/* ==========================================================================
   Hacllun — main stylesheet
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Buttons & forms
   5.  Layout & helpers
   6.  Announcement bar
   7.  Header & navigation
   8.  Hero
   9.  Homepage sections
   10. Page hero / breadcrumbs
   11. About page
   12. Contact page
   13. WooCommerce — single product
   14. Product story (A1–A5)
   15. WooCommerce — archive & general
   16. WooCommerce — cart / checkout / account
   17. Footer
   18. Responsive
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
	--hl-green-950: #10261A;
	--hl-green-900: #16301F;
	--hl-green-800: #1E3A2B;
	--hl-green-700: #2A4F38;
	--hl-green-600: #3C6B4A;
	--hl-green-500: #5C8A67;
	--hl-sage-300: #A9C0A6;
	--hl-sage-200: #CBDAC6;
	--hl-sage-100: #E6EEE1;
	--hl-cream: #F9F6EF;
	--hl-cream-2: #F2ECE0;
	--hl-sand: #E4D9C5;
	--hl-gold: #B4913F;
	--hl-gold-soft: #E8D9A8;
	--hl-ink: #1F241B;
	--hl-body: #5B6255;
	--hl-line: rgba(30, 58, 43, 0.13);
	--hl-white: #ffffff;

	--hl-radius-sm: 8px;
	--hl-radius: 14px;
	--hl-radius-lg: 24px;
	--hl-radius-pill: 999px;

	--hl-shadow-sm: 0 4px 16px -8px rgba(16, 38, 26, 0.28);
	--hl-shadow: 0 22px 50px -26px rgba(16, 38, 26, 0.38);
	--hl-shadow-lg: 0 40px 80px -40px rgba(16, 38, 26, 0.45);

	--hl-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--hl-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--hl-container: 1200px;
	--hl-gutter: 24px;
	--hl-transition: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Reset & base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--hl-cream);
	color: var(--hl-body);
	font-family: var(--hl-sans);
	font-size: 16.5px;
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--hl-green-700); text-decoration: none; transition: color var(--hl-transition); }
a:hover { color: var(--hl-gold); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }

hr { border: 0; border-top: 1px solid var(--hl-line); margin: 2.5rem 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.hl-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--hl-green-800);
	color: #fff;
	border-radius: 0 0 var(--hl-radius-sm) 0;
}
.hl-skip:focus { left: 0; color: #fff; }

/* 3. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.55em;
	color: var(--hl-green-900);
	font-family: var(--hl-serif);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }

p { margin: 0 0 1.15em; }

.hl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	color: var(--hl-green-600);
	font-family: var(--hl-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.hl-eyebrow::before,
.hl-eyebrow--center::after {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--hl-sage-300);
}
.hl-eyebrow--center { justify-content: center; }

.hl-lead { font-size: 1.12rem; color: var(--hl-body); }

/* 4. Buttons & forms ----------------------------------------------------- */
.hl-btn,
button.hl-btn,
input[type="submit"].hl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 34px;
	border: 1px solid transparent;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-green-800);
	color: #fff;
	font-family: var(--hl-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: all var(--hl-transition);
}
.hl-btn:hover {
	background: var(--hl-green-950);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--hl-shadow-sm);
}

.hl-btn--sm { padding: 12px 24px; font-size: 0.72rem; }

.hl-btn--gold { background: var(--hl-gold); color: #241d07; }
.hl-btn--gold:hover { background: #9c7c31; color: #241d07; }

.hl-btn--ghost {
	background: transparent;
	color: var(--hl-green-800);
	border-color: var(--hl-green-800);
}
.hl-btn--ghost:hover { background: var(--hl-green-800); color: #fff; }

.hl-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}
.hl-btn--outline-light:hover { background: #fff; color: var(--hl-green-900); }

.hl-btn--block { width: 100%; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-sm);
	background: #fff;
	color: var(--hl-ink);
	font-family: var(--hl-sans);
	font-size: 0.95rem;
	transition: border-color var(--hl-transition), box-shadow var(--hl-transition);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--hl-green-500);
	box-shadow: 0 0 0 3px rgba(92, 138, 103, 0.16);
}
textarea { min-height: 150px; resize: vertical; }

label { font-size: 0.82rem; font-weight: 400; color: var(--hl-green-900); letter-spacing: 0.02em; }

/* 5. Layout & helpers ---------------------------------------------------- */
.hl-container {
	width: 100%;
	max-width: var(--hl-container);
	margin-inline: auto;
	padding-inline: var(--hl-gutter);
}

/* The single product page needs the extra room so the gallery and the buy box
   each keep a comfortable measure instead of being squeezed into half of
   1200px. */
.hl-container.hl-product { max-width: 1420px; }

.hl-section { padding: clamp(64px, 9vw, 120px) 0; }
.hl-section--tight { padding: clamp(48px, 6vw, 76px) 0; }
.hl-section--cream { background: var(--hl-cream-2); }
.hl-section--sage { background: var(--hl-sage-100); }
.hl-section--dark { background: var(--hl-green-900); color: rgba(255, 255, 255, 0.82); }
.hl-section--dark h1,
.hl-section--dark h2,
.hl-section--dark h3,
.hl-section--dark h4 { color: #fff; }

.hl-center { text-align: center; }
.hl-section__head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); }
.hl-section__head--left { margin-inline: 0; text-align: left; }
.hl-section__head p { margin-bottom: 0; }

.hl-grid { display: grid; gap: 30px; }
.hl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hl-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hl-card {
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
	padding: 34px 30px;
	transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-card:hover { transform: translateY(-4px); box-shadow: var(--hl-shadow); }
.hl-card h3 { font-size: 1.3rem; margin-bottom: 0.4em; }
.hl-card p:last-child { margin-bottom: 0; }

.hl-divider-leaf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 26px;
	color: var(--hl-green-500);
	max-width: 220px;
}
.hl-divider-leaf::before,
.hl-divider-leaf::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--hl-sage-200);
}

/* Reveal-on-scroll. Guarded by .hl-js (set by main.js) so the content stays
   visible when JavaScript is unavailable. */
.hl-js .hl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hl-js .hl-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hl-js .hl-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* 6. Announcement bar ---------------------------------------------------- */
.hl-announcement {
	background: var(--hl-green-900);
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 11px 18px;
}
.hl-announcement p { margin: 0; }

/* 7. Header & navigation ------------------------------------------------- */
.hl-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(249, 246, 239, 0.9);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--hl-line);
}
.hl-header.is-stuck { box-shadow: 0 10px 34px -26px rgba(16, 38, 26, 0.5); }

.hl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px;
}

.hl-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: var(--hl-green-900);
}
.hl-logo:hover { color: var(--hl-green-900); }
.hl-logo__mark { width: 40px; height: 40px; flex: none; color: var(--hl-green-700); }
.hl-logo__type { display: flex; flex-direction: column; line-height: 1; }
.hl-logo__word {
	font-family: var(--hl-serif);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}
.hl-logo__tag {
	margin-top: 5px;
	font-size: 0.54rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--hl-green-500);
}
.hl-logo--light,
.hl-logo--light:hover { color: #fff; }
.hl-logo--light .hl-logo__mark { color: var(--hl-sage-200); }
.hl-logo--light .hl-logo__tag { color: var(--hl-sage-300); }

.custom-logo { max-height: 54px; width: auto; }

.hl-menu { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
.hl-menu li { position: relative; }
.hl-menu > li > a {
	display: inline-block;
	padding: 8px 0;
	color: var(--hl-green-900);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.hl-menu > li > a::after {
	content: '';
	display: block;
	height: 1px;
	width: 0;
	margin-top: 4px;
	background: var(--hl-gold);
	transition: width var(--hl-transition);
}
.hl-menu > li:hover > a::after,
.hl-menu > li.current-menu-item > a::after { width: 100%; }
.hl-menu > li.current-menu-item > a { color: var(--hl-green-700); }

.hl-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 208px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--hl-transition);
}
.hl-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hl-menu .sub-menu a { display: block; padding: 9px 22px; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: none; }

.hl-header__actions { display: flex; align-items: center; gap: 20px; }

.hl-cart { position: relative; display: inline-flex; color: var(--hl-green-900); }
.hl-cart svg { width: 25px; height: 25px; }
.hl-cart:hover { color: var(--hl-gold); }
.hl-cart__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-gold);
	color: #241d07;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 19px;
	text-align: center;
}

.hl-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-sm);
	background: transparent;
	cursor: pointer;
}
.hl-nav-toggle__bars,
.hl-nav-toggle__bars::before,
.hl-nav-toggle__bars::after {
	display: block;
	width: 19px;
	height: 2px;
	background: var(--hl-green-900);
	transition: transform var(--hl-transition), opacity var(--hl-transition);
}
.hl-nav-toggle__bars { position: relative; }
.hl-nav-toggle__bars::before,
.hl-nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.hl-nav-toggle__bars::before { top: -6px; }
.hl-nav-toggle__bars::after { top: 6px; }
.hl-nav-toggle[aria-expanded="true"] .hl-nav-toggle__bars { background: transparent; }
.hl-nav-toggle[aria-expanded="true"] .hl-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.hl-nav-toggle[aria-expanded="true"] .hl-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* 8. Hero ---------------------------------------------------------------- */
.hl-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 18%, rgba(203, 218, 198, 0.55), transparent 46%),
		linear-gradient(180deg, var(--hl-cream) 0%, var(--hl-cream-2) 100%);
}
.hl-hero__inner {
	display: grid;
	grid-template-columns: 1.03fr 0.97fr;
	align-items: center;
	gap: clamp(30px, 5vw, 70px);
	padding: clamp(52px, 7vw, 104px) 0 clamp(60px, 8vw, 110px);
}
.hl-hero__title { margin-bottom: 22px; }
.hl-hero__title em {
	display: block;
	font-style: italic;
	color: var(--hl-green-600);
}
.hl-hero__text { max-width: 30em; font-size: 1.08rem; }
.hl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }

.hl-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--hl-line);
}
.hl-hero__badges li {
	display: flex;
	align-items: center;
	gap: 9px;
	list-style: none;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hl-green-700);
}
.hl-hero__badges svg { width: 17px; height: 17px; color: var(--hl-green-500); }
.hl-hero__badges ul { display: contents; }

.hl-hero__price-tag {
	position: absolute;
	left: -18px;
	bottom: 34px;
	display: flex;
	flex-direction: column;
	padding: 16px 24px;
	background: #fff;
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
}
.hl-hero__price-tag strong {
	font-family: var(--hl-serif);
	font-size: 1.85rem;
	color: var(--hl-green-800);
	line-height: 1;
}
.hl-hero__price-tag span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hl-green-500); }

/* Banner hero — the supplied artwork fills the whole band and the copy sits on
   top of its empty left third. A gradient scrim keeps the text legible while
   the bottle stays visible on the right. */
.hl-hero--banner {
	min-height: clamp(500px, 62vh, 700px);
	display: flex;
	align-items: center;
	background-color: var(--hl-green-950);
	background-image: var(--hl-hero-image);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}
.hl-hero--banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(16, 38, 26, 0.94) 0%,
		rgba(16, 38, 26, 0.86) 34%,
		rgba(16, 38, 26, 0.42) 60%,
		rgba(16, 38, 26, 0.06) 84%
	);
}
.hl-hero--banner > .hl-container { width: 100%; position: relative; z-index: 1; }
.hl-hero--banner .hl-hero__inner {
	grid-template-columns: minmax(0, 620px);
	gap: 0;
	padding: clamp(64px, 8vw, 112px) 0;
}
.hl-hero--banner .hl-hero__title { color: #fff; }
.hl-hero--banner .hl-hero__title em { color: var(--hl-gold-soft); }
.hl-hero--banner .hl-hero__text { color: rgba(255, 255, 255, 0.84); }
.hl-hero--banner .hl-eyebrow { color: var(--hl-sage-300); }
.hl-hero--banner .hl-eyebrow::before { background: var(--hl-sage-300); }
.hl-hero--banner .hl-hero__badges { border-top-color: rgba(255, 255, 255, 0.24); }
.hl-hero--banner .hl-hero__badges li { color: rgba(255, 255, 255, 0.88); }
.hl-hero--banner .hl-hero__badges svg { color: var(--hl-gold-soft); }
.hl-hero--banner .hl-btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.hl-hero--banner .hl-btn--ghost:hover { background: #fff; color: var(--hl-green-900); }
.hl-hero--banner .hl-hero__price-tag {
	right: clamp(24px, 5vw, 72px);
	bottom: clamp(34px, 5vw, 64px);
	left: auto;
	z-index: 2;
}

/* 9. Homepage sections --------------------------------------------------- */
.hl-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--hl-line); }
.hl-perks li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	list-style: none;
	padding: 32px 28px;
	border-right: 1px solid var(--hl-line);
}
.hl-perks li:last-child { border-right: 0; }
.hl-perks svg { width: 26px; height: 26px; flex: none; margin-top: 3px; color: var(--hl-green-600); }
.hl-perks strong { display: block; color: var(--hl-green-900); font-weight: 500; font-size: 0.95rem; }
.hl-perks span { font-size: 0.85rem; }

.hl-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(32px, 6vw, 80px);
}
.hl-split--reverse .hl-split__media { order: 2; }
.hl-split__media img { border-radius: var(--hl-radius-lg); box-shadow: var(--hl-shadow); }

.hl-benefits { counter-reset: benefit; }
.hl-benefits li {
	position: relative;
	list-style: none;
	padding: 0 0 22px 46px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--hl-line);
}
.hl-benefits li::before {
	counter-increment: benefit;
	content: counter(benefit, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--hl-serif);
	font-size: 1.25rem;
	color: var(--hl-sage-300);
}
.hl-benefits li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hl-benefits strong { display: block; color: var(--hl-green-900); font-weight: 500; font-size: 1.05rem; margin-bottom: 2px; }

.hl-ingredients { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.hl-ingredient {
	text-align: center;
	padding: 26px 16px;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius);
	transition: transform var(--hl-transition), border-color var(--hl-transition);
}
.hl-ingredient:hover { transform: translateY(-4px); border-color: var(--hl-sage-300); }
.hl-ingredient__icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hl-sage-100);
	color: var(--hl-green-700);
}
.hl-ingredient__icon svg { width: 28px; height: 28px; }
.hl-ingredient strong { display: block; font-family: var(--hl-serif); font-size: 1.1rem; color: var(--hl-green-900); }
.hl-ingredient span { font-size: 0.8rem; }

.hl-ritual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.hl-ritual__step {
	position: relative;
	padding: 34px 26px 30px;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
}
.hl-ritual__step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: -20px;
	left: 26px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hl-green-800);
	color: #fff;
	font-family: var(--hl-serif);
	font-size: 1.25rem;
}
.hl-ritual__step h4 { margin-top: 12px; }

.hl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.hl-stats strong {
	display: block;
	font-family: var(--hl-serif);
	font-size: clamp(2.2rem, 4vw, 3.1rem);
	line-height: 1;
	color: var(--hl-gold-soft);
}
.hl-stats span { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; }

.hl-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hl-quote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 34px 30px;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
}
.hl-quote__stars { display: flex; gap: 3px; color: var(--hl-gold); }
.hl-quote__stars svg { width: 16px; height: 16px; }
.hl-quote blockquote {
	margin: 0;
	font-family: var(--hl-serif);
	font-size: 1.18rem;
	line-height: 1.55;
	color: var(--hl-green-900);
}
.hl-quote figcaption { margin-top: auto; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hl-green-500); }

.hl-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hl-green-900) 0%, var(--hl-green-700) 100%);
	color: rgba(255, 255, 255, 0.84);
	text-align: center;
}
.hl-cta::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -12%;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(180, 145, 63, 0.22), transparent 68%);
}
.hl-cta__inner { position: relative; max-width: 760px; margin: 0 auto; }
.hl-cta h2 { color: #fff; }
.hl-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }

.hl-faq { max-width: 840px; margin: 0 auto; }
.hl-faq details {
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius);
	margin-bottom: 14px;
	overflow: hidden;
}
.hl-faq summary {
	padding: 20px 26px;
	cursor: pointer;
	list-style: none;
	color: var(--hl-green-900);
	font-family: var(--hl-serif);
	font-size: 1.12rem;
	position: relative;
}
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::after {
	content: '+';
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hl-green-500);
	font-size: 1.4rem;
	line-height: 1;
}
.hl-faq details[open] summary::after { content: '\2013'; }
.hl-faq details > p { padding: 0 26px 22px; margin: 0; }

/* 10. Page hero / breadcrumbs -------------------------------------------- */
.hl-page-hero {
	background: linear-gradient(180deg, var(--hl-sage-100) 0%, var(--hl-cream) 100%);
	text-align: center;
	padding: clamp(52px, 7vw, 92px) 0 clamp(40px, 5vw, 66px);
}
.hl-page-hero h1 { margin-bottom: 14px; }
.hl-page-hero p { max-width: 660px; margin: 0 auto; }

.hl-breadcrumb {
	padding: 16px 0;
	border-bottom: 1px solid var(--hl-line);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hl-green-500);
}
.hl-breadcrumb a { color: var(--hl-green-600); }
.hl-breadcrumb__sep { margin: 0 9px; color: var(--hl-sage-300); }
.woocommerce-breadcrumb { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hl-green-500); }
.woocommerce-breadcrumb a { color: var(--hl-green-600); }

.hl-page { padding: clamp(48px, 6vw, 84px) 0; }
.hl-page__content { max-width: 800px; margin-inline: auto; }
.hl-page__content--wide { max-width: 100%; }
.hl-page__content img { border-radius: var(--hl-radius); }

/* WP block support inside content */
.hl-page__content .wp-block-image { margin-bottom: 1.8rem; }
.hl-page__content h2 { margin-top: 1.4em; }

/* Gutenberg-authored pages */
.hl-page__content .wp-block-group > *:first-child { margin-top: 0; }
.hl-page__content .wp-block-group > *:last-child { margin-bottom: 0; }
.hl-page__content .wp-block-columns { gap: clamp(20px, 3vw, 36px); margin-bottom: 1.8rem; }
.hl-page__content .wp-block-column > *:last-child { margin-bottom: 0; }
.hl-page__content .wp-block-quote {
	margin: 2.4rem 0;
	padding: 2px 0 2px 26px;
	border-left: 3px solid var(--hl-gold);
}
.hl-page__content .wp-block-quote p {
	margin: 0;
	color: var(--hl-green-900);
	font-family: var(--hl-serif);
	font-size: 1.42rem;
	line-height: 1.4;
}
.hl-page__content .wp-block-quote cite {
	display: block;
	margin-top: 10px;
	color: var(--hl-green-500);
	font-family: var(--hl-sans);
	font-size: 0.74rem;
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.hl-page__content .wp-block-separator { margin: 2.6rem 0; border: 0; border-top: 1px solid var(--hl-line); }
.hl-page__content .wp-block-list { padding-left: 1.15em; }
.hl-page__content .wp-block-list li + li { margin-top: 6px; }
.hl-page__content .wp-block-buttons { gap: 14px; margin: 1.6rem 0 0; }
.hl-page__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 34px;
	border: 1px solid transparent;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-green-800);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}
.hl-page__content .wp-block-button__link:hover { background: var(--hl-gold); color: #fff; }
.hl-page__content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--hl-green-700);
	color: var(--hl-green-700);
}
.hl-page__content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--hl-green-800);
	border-color: var(--hl-green-800);
	color: #fff;
}

/* 11. About page --------------------------------------------------------- */
.hl-about-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(32px, 6vw, 74px); }
.hl-about-hero__media img { border-radius: var(--hl-radius-lg); box-shadow: var(--hl-shadow); }

.hl-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hl-value { padding: 34px 30px; background: #fff; border: 1px solid var(--hl-line); border-radius: var(--hl-radius-lg); }
.hl-value__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	margin-bottom: 18px;
	border-radius: var(--hl-radius-sm);
	background: var(--hl-sage-100);
	color: var(--hl-green-700);
}
.hl-value__icon svg { width: 26px; height: 26px; }

.hl-timeline { position: relative; max-width: 780px; margin: 0 auto; padding-left: 34px; }
.hl-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--hl-sage-200); }
.hl-timeline__item { position: relative; padding-bottom: 38px; }
.hl-timeline__item:last-child { padding-bottom: 0; }
.hl-timeline__item::before {
	content: '';
	position: absolute;
	left: -34px;
	top: 8px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 3px solid var(--hl-cream);
	background: var(--hl-green-600);
}
.hl-timeline__item strong {
	display: block;
	font-family: var(--hl-serif);
	font-size: 1.35rem;
	color: var(--hl-green-900);
}
.hl-timeline__item em { display: block; margin-bottom: 6px; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hl-gold); font-style: normal; }

/* 12. Contact page ------------------------------------------------------- */
.hl-contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.hl-contact-card {
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
	padding: clamp(28px, 4vw, 46px);
	box-shadow: var(--hl-shadow-sm);
}
.hl-contact-aside {
	background: var(--hl-green-900);
	color: rgba(255, 255, 255, 0.8);
	border-radius: var(--hl-radius-lg);
	padding: clamp(28px, 4vw, 46px);
}
.hl-contact-aside h3 { color: #fff; }
.hl-contact-list { list-style: none; margin: 0; padding: 0; }
.hl-contact-list li { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hl-contact-list li:last-child { border-bottom: 0; }
.hl-contact-list svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--hl-gold-soft); }
.hl-contact-list strong { display: block; color: #fff; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 3px; }
.hl-contact-list a { color: rgba(255, 255, 255, 0.86); }
.hl-contact-list a:hover { color: var(--hl-gold-soft); }

.hl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hl-form__field { margin-bottom: 18px; }
.hl-form__field label { display: block; margin-bottom: 7px; }
.hl-form__req { color: var(--hl-gold); }
.hl-form__hp { position: absolute; left: -9999px; }

.hl-notice {
	border-radius: var(--hl-radius);
	padding: 16px 22px;
	margin-bottom: 26px;
	border: 1px solid transparent;
	font-size: 0.94rem;
}
.hl-notice--success { background: var(--hl-sage-100); border-color: var(--hl-sage-300); color: var(--hl-green-800); }
.hl-notice--error { background: #fbeeea; border-color: #e5c3b8; color: #8a3b22; }

.hl-map { border-radius: var(--hl-radius-lg); overflow: hidden; border: 1px solid var(--hl-line); }
.hl-map iframe { display: block; width: 100%; height: 340px; border: 0; }

/* 13. WooCommerce — single product --------------------------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(28px, 3.6vw, 58px);
	padding: clamp(34px, 5vw, 64px) 0 clamp(30px, 4vw, 50px);
	position: relative;
}

/* Both elements must match WooCommerce's own selectors (div.images /
   div.summary) so our width wins: woocommerce-layout.css sizes them at 48%,
   which inside a two-column grid shrinks each one to a quarter of the page. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: 100%; float: none; margin: 0; }

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .hl-trust,
.woocommerce div.product .woocommerce-product-gallery__wrapper { }

/* Gallery */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { border-radius: var(--hl-radius-lg); overflow: hidden; }
.woocommerce div.product div.images img {
	border-radius: var(--hl-radius-lg);
	background: #fff;
	border: 1px solid var(--hl-line);
}

/* Thumbnails — one scrollable row with arrows on either side. */
.hl-thumbs {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}
.hl-thumbs__arrow {
	flex: none;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	padding: 0;
	border: 1px solid var(--hl-line);
	border-radius: 50%;
	background: #fff;
	color: var(--hl-green-800);
	cursor: pointer;
	transition: background var(--hl-transition), color var(--hl-transition), opacity var(--hl-transition);
}
.hl-thumbs__arrow svg { width: 15px; height: 15px; }
.hl-thumbs__arrow:hover:not(:disabled) { background: var(--hl-green-800); color: #fff; border-color: var(--hl-green-800); }
.hl-thumbs__arrow:disabled { opacity: 0.3; cursor: default; }
/* Nothing to scroll — hide the arrows and let the row fill the space. */
.hl-thumbs.is-static .hl-thumbs__arrow { display: none; }
.hl-thumbs.is-static { grid-template-columns: minmax(0, 1fr); }

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n+1) {
	flex: 0 0 auto;
	width: 108px;
	clear: none;
	float: none;
	margin: 0;
}
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%;
	border-radius: var(--hl-radius-sm);
	opacity: 0.62;
	transition: opacity var(--hl-transition), border-color var(--hl-transition);
	border: 1px solid var(--hl-line);
	padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--hl-green-600); }
.woocommerce-product-gallery__trigger {
	top: 18px; right: 18px;
	width: 44px; height: 44px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	font-size: 1.1rem;
}

/* Sale flash — WooCommerce prints it as a direct child of .product, so it is
   anchored to the gallery's top-left corner. */
.woocommerce div.product span.onsale {
	top: 22px;
	left: 22px;
	right: auto;
	z-index: 3;
}

/* Summary */
.hl-product-cat {
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--hl-green-500);
	margin-bottom: 12px;
}
.hl-product-cat a { color: var(--hl-green-500); }

.woocommerce div.product .product_title {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	margin-bottom: 12px;
}

.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }
.woocommerce .star-rating span, .woocommerce .star-rating::before { color: var(--hl-gold); }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { color: var(--hl-green-500); font-size: 0.85rem; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--hl-green-800);
	font-family: var(--hl-serif);
	font-size: 2.15rem;
	font-weight: 600;
	margin-bottom: 6px;
}
.woocommerce div.product p.price del { color: #a6a699; font-size: 1.35rem; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--hl-green-800); }

.hl-price-note { font-size: 0.82rem; color: var(--hl-green-500); margin-bottom: 22px; }

.woocommerce-product-details__short-description { margin-bottom: 24px; }
.woocommerce-product-details__short-description ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-product-details__short-description li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 11px;
	color: var(--hl-body);
}
.woocommerce-product-details__short-description li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--hl-green-600);
	border-bottom: 2px solid var(--hl-green-600);
	transform: rotate(-45deg);
}

.woocommerce div.product form.cart { display: flex; align-items: stretch; gap: 14px; margin-bottom: 8px; }
.woocommerce div.product form.cart .quantity {
	float: none;
	margin: 0;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-pill);
	background: #fff;
	overflow: hidden;
}
/* The − / + steppers injected next to the input field. */
.woocommerce div.product .quantity .hl-qty__btn {
	width: 48px;
	height: 54px;
	flex: none;
	display: grid;
	place-items: center;
	position: relative;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hl-green-800);
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	transition: background var(--hl-transition), color var(--hl-transition);
}
/* Long minus / plus glyphs drawn as two bars so the pair stays optically even. */
.woocommerce div.product .quantity .hl-qty__btn::before,
.woocommerce div.product .quantity .hl-qty__btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: currentColor;
	border-radius: 1px;
}
.woocommerce div.product .quantity .hl-qty__btn::before { width: 13px; height: 2px; }
.woocommerce div.product .quantity .hl-qty__btn::after { width: 2px; height: 13px; }
.woocommerce div.product .quantity .hl-qty__btn--minus::after { display: none; }
.woocommerce div.product .quantity .hl-qty__btn:hover { background: var(--hl-sage-100); }
.woocommerce div.product .quantity .hl-qty__btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.woocommerce div.product form.cart .quantity input.qty {
	width: 62px;
	height: 54px;
	border: 0;
	text-align: center;
	font-weight: 500;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .quantity input.qty:focus { box-shadow: none; }
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	background: var(--hl-green-800);
	color: #fff;
	border-radius: var(--hl-radius-pill);
	padding: 0 34px;
	height: 56px;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: all var(--hl-transition);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--hl-green-950); }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button[disabled] { background: #b9c4b8; }
.woocommerce div.product form.cart .button::after { content: none; }

.woocommerce div.product .stock { font-size: 0.88rem; color: var(--hl-green-600); }
.woocommerce div.product .stock.in-stock::before { content: '\2022'; margin-right: 8px; color: var(--hl-green-500); }

.woocommerce div.product .product_meta {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--hl-line);
	font-size: 0.85rem;
	color: var(--hl-green-500);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 5px; }
.woocommerce div.product .product_meta a { color: var(--hl-green-700); }

.hl-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	list-style: none;
	margin: 26px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hl-line);
}
.hl-trust__item { display: flex; gap: 11px; align-items: flex-start; }
.hl-trust__icon {
	flex: none;
	width: 24px; height: 24px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--hl-sage-100);
	color: var(--hl-green-700);
}
.hl-trust__icon svg { width: 14px; height: 14px; }
.hl-trust__body strong { display: block; font-size: 0.88rem; font-weight: 500; color: var(--hl-green-900); }
.hl-trust__body em { font-style: normal; font-size: 0.79rem; color: var(--hl-body); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; padding-top: clamp(20px, 3vw, 40px); clear: both; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0 0 30px;
	padding: 0 0 2px;
	border-bottom: 1px solid var(--hl-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 0;
	color: var(--hl-green-500);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--hl-green-900);
	box-shadow: inset 0 -2px 0 var(--hl-gold);
}
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; }

.woocommerce table.shop_attributes { border: 1px solid var(--hl-line); border-radius: var(--hl-radius); overflow: hidden; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { padding: 13px 20px; border-bottom: 1px solid var(--hl-line); font-size: 0.92rem; }
.woocommerce table.shop_attributes th { background: var(--hl-cream-2); color: var(--hl-green-900); font-weight: 500; }

/* 14. Product story (A1–A5) ---------------------------------------------- */
/* The story shares its row with a sticky sidebar. Above 1320px the copy column
   is pinned to the 970px native width of the detail artwork, so those images
   are never upscaled, and the sidebar absorbs the rest of the row. */
.hl-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
	gap: clamp(28px, 3vw, 48px);
	align-items: start;
	margin-top: clamp(34px, 4.5vw, 62px);
}
@media (min-width: 1320px) {
	.hl-details { grid-template-columns: 970px minmax(0, 1fr); }
}

.hl-story {
	border-radius: var(--hl-radius-lg);
	/* No horizontal padding: at 970px the artwork runs edge to edge. The copy
	   is width-constrained instead — see .hl-story__caption below. */
	padding: clamp(40px, 5vw, 64px) 0;
}
.hl-story__inner > p { text-align: center; max-width: 760px; margin-inline: auto; }
.hl-story__layout{max-width: 970px;margin: 0 auto;}
/* Stacked layout: the image spans the full width and the copy sits under it. */
.hl-story__block {
	display: block;
	margin-bottom: clamp(48px, 6vw, 84px);
}
.hl-story__block:last-child { margin-bottom: 0; }
.hl-story__media { margin-bottom: clamp(26px, 3.4vw, 44px); }
.hl-story__block img { display: block; width: 100%; border-radius: var(--hl-radius-lg); box-shadow: var(--hl-shadow); }

.hl-story__caption { max-width: 820px; margin-inline: auto; text-align: center; }
.hl-story__caption h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-bottom: 18px; }
.hl-story__caption p:last-child { margin-bottom: 0; }
.hl-story__caption .hl-eyebrow { margin-bottom: 14px; }

.hl-story__features { list-style: none; margin: 22px 0 0; padding: 0; }
.hl-story__features li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	color: var(--hl-green-900);
}
.hl-story__features li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 14px; height: 8px;
	border-left: 2px solid var(--hl-green-600);
	border-bottom: 2px solid var(--hl-green-600);
	transform: rotate(-45deg);
}

.hl-story__caption .hl-story__features { max-width: 560px; margin: 22px auto 0; text-align: left; }

.hl-story__heading { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }

/* Simple table layout used inside the story */
.hl-story__inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 26px 0;
	background: #fff;
	border-radius: var(--hl-radius);
	overflow: hidden;
	box-shadow: var(--hl-shadow-sm);
}
.hl-story__inner th,
.hl-story__inner td { padding: 14px 20px; border-bottom: 1px solid var(--hl-line); text-align: left; font-size: 0.95rem; }
.hl-story__inner th { background: var(--hl-green-900); color: #fff; font-weight: 500; letter-spacing: 0.04em; }
.hl-story__inner tr:last-child td { border-bottom: 0; }

/* 15. Product story sidebar --------------------------------------------- */
.hl-aside {
	position: sticky;
	top: 108px;
	display: grid;
	gap: 20px;
	min-width: 0;
}
.hl-aside__card {
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
	padding: 24px 26px;
	box-shadow: var(--hl-shadow-sm);
}
.hl-aside__title { font-size: 1.08rem; margin-bottom: 16px; }

.hl-specs { margin: 0; }
.hl-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--hl-line);
	font-size: 0.88rem;
}
.hl-specs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hl-specs dt { color: var(--hl-green-500); }
.hl-specs dd { margin: 0; color: var(--hl-green-900); font-weight: 500; text-align: right; }

.hl-aside__steps { margin: 0; padding: 0; list-style: none; counter-reset: hl-step; }
.hl-aside__steps li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 12px;
	font-size: 0.92rem;
	color: var(--hl-body);
	counter-increment: hl-step;
}
.hl-aside__steps li:last-child { margin-bottom: 0; }
.hl-aside__steps li::before {
	content: counter(hl-step);
	position: absolute;
	left: 0; top: 1px;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--hl-sage-100);
	color: var(--hl-green-700);
	font-size: 0.72rem;
	font-weight: 600;
}

.hl-aside__list { margin: 0; padding: 0; list-style: none; }
.hl-aside__list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 0.92rem;
	color: var(--hl-body);
}
.hl-aside__list li:last-child { margin-bottom: 0; }
.hl-aside__list svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--hl-green-600); }

.hl-aside__note {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--hl-line);
	font-size: 0.85rem;
	color: var(--hl-green-500);
}
.hl-aside__note a { color: var(--hl-green-700); text-decoration: underline; }

/* 16. WooCommerce — product reviews (below the story) -------------------- */
.hl-reviews {
	margin-top: clamp(44px, 5.5vw, 76px);
	padding-top: clamp(34px, 4vw, 52px);
	border-top: 1px solid var(--hl-line);
}
.hl-reviews .woocommerce-Reviews { max-width: 820px; margin-inline: auto; }
.hl-reviews .woocommerce-Reviews-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 26px; }
.hl-reviews .woocommerce-Reviews-title span { color: var(--hl-green-700); }

.hl-reviews .commentlist { list-style: none; margin: 0 0 40px; padding: 0; }
.hl-reviews .commentlist > li { margin-bottom: 26px; }
.hl-reviews .comment_container {
	display: flex;
	gap: 18px;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
}
.hl-reviews .comment_container img.avatar { border-radius: 50%; flex: none; margin: 0; }
.hl-reviews .comment-text { flex: 1; border: 0; padding: 0; margin: 0; }
.hl-reviews .comment-text .star-rating { float: right; margin: 0; }
.hl-reviews .comment-text .meta { color: var(--hl-green-500); font-size: 0.85rem; margin: 0 0 10px; }
.hl-reviews .comment-text .meta strong { color: var(--hl-green-900); font-weight: 500; }
.hl-reviews .comment-text .description p:last-child { margin-bottom: 0; }

.hl-reviews .woocommerce-noreviews { color: var(--hl-green-500); }

.hl-reviews #review_form_wrapper { background: var(--hl-cream-2); border-radius: var(--hl-radius-lg); padding: clamp(24px, 4vw, 40px); }
.hl-reviews .comment-reply-title { display: block; font-family: var(--hl-serif); font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: 20px; }
.hl-reviews .comment-form-rating { margin-bottom: 18px; }
.hl-reviews .comment-form-rating label { display: block; margin-bottom: 7px; }
.hl-reviews .comment-form-rating select { max-width: 260px; }
.hl-reviews .form-submit { margin: 0; }
.hl-reviews .form-submit input[type="submit"] {
	background: var(--hl-green-800);
	color: #fff;
	border: 0;
	border-radius: var(--hl-radius-pill);
	padding: 15px 36px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}
.hl-reviews .form-submit input[type="submit"]:hover { background: var(--hl-green-950); }

/* 17. WooCommerce — archive & general ------------------------------------ */
.hl-shop { padding: clamp(40px, 5vw, 72px) 0; }
.hl-shop .woocommerce-products-header { text-align: center; margin-bottom: 44px; }
.hl-shop .woocommerce-products-header__title { margin-bottom: 10px; }
.hl-shop .woocommerce-result-count { font-size: 0.86rem; color: var(--hl-green-500); }
.hl-shop .woocommerce-ordering { margin-bottom: 30px; }
.hl-shop .woocommerce-ordering select { padding: 10px 34px 10px 14px; border-radius: var(--hl-radius-pill); font-size: 0.86rem; }

.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; margin: 0; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none;
	position: relative;
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-lg);
	overflow: hidden;
	text-align: left;
	transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--hl-shadow); }
.woocommerce ul.products li.product a img {
	margin: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 20px 24px 0; font-size: 1.22rem; }
.woocommerce ul.products li.product .price { padding: 0 24px; color: var(--hl-green-800); font-family: var(--hl-serif); font-size: 1.3rem; font-weight: 600; }
.woocommerce ul.products li.product .price del { color: #a6a699; font-size: 0.95rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 18px 24px 24px;
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-green-800);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover { background: var(--hl-green-950); color: #fff; }
.woocommerce ul.products li.product .button::after { content: none; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	top: 16px;
	right: 16px;
	left: auto;
	min-height: 0;
	min-width: 0;
	padding: 7px 15px;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-gold);
	color: #241d07;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 30px;
	padding: 18px 26px;
	border: 1px solid var(--hl-line);
	border-top: 0;
	border-radius: var(--hl-radius);
	background: #fff;
	color: var(--hl-green-900);
	list-style: none;
	box-shadow: var(--hl-shadow-sm);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { top: auto; left: auto; position: static; color: var(--hl-green-600); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	height: 44px;
	line-height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hl-line);
	color: var(--hl-green-800);
	background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--hl-green-800); color: #fff; border-color: var(--hl-green-800); }

/* 16. WooCommerce — cart / checkout / account ---------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius);
	border-collapse: separate;
	overflow: hidden;
	background: #fff;
}
.woocommerce table.shop_table th { background: var(--hl-cream-2); color: var(--hl-green-900); font-weight: 500; padding: 15px 18px; }
.woocommerce table.shop_table td { padding: 18px; border-top: 1px solid var(--hl-line); }
.woocommerce table.shop_table_responsive tr td::before { color: var(--hl-green-900); font-weight: 500; }

.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: var(--hl-radius-pill);
	background: var(--hl-green-800);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1;
	border: 0;
	transition: all var(--hl-transition);
}
.woocommerce .cart .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--hl-green-950); color: #fff; }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--hl-gold); color: #241d07; }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #9c7c31; color: #241d07; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals .cart_totals > h2 { margin-bottom: 18px; }
.woocommerce .cart-collaterals .cart_totals table { margin-bottom: 20px; }

.woocommerce-checkout .woocommerce { display: block; }
.woocommerce-checkout h3 { margin-top: 10px; }
.woocommerce form .form-row { padding: 0; margin-bottom: 18px; }
.woocommerce form .form-row label { margin-bottom: 7px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { padding: 14px 16px; border-radius: var(--hl-radius-sm); }
.woocommerce #order_review { background: #fff; border: 1px solid var(--hl-line); border-radius: var(--hl-radius-lg); padding: 28px; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--hl-line); border-radius: var(--hl-radius); overflow: hidden; background: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--hl-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 15px 22px; font-size: 0.9rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--hl-green-800); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { padding-left: 34px; }

.woocommerce form.login,
.woocommerce form.register { border: 1px solid var(--hl-line); border-radius: var(--hl-radius-lg); padding: 32px; background: #fff; }

/* 17. Footer ------------------------------------------------------------- */
.hl-footer {
	background: var(--hl-green-900);
	color: rgba(255, 255, 255, 0.72);
	padding: clamp(56px, 7vw, 84px) 0 0;
}
.hl-footer h4,
.hl-footer__title { color: #fff; }
.hl-footer a { color: rgba(255, 255, 255, 0.72); }
.hl-footer a:hover { color: var(--hl-gold-soft); }

.hl-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
	gap: clamp(28px, 4vw, 52px);
	padding-bottom: clamp(40px, 5vw, 60px);
}
.hl-footer__about { margin: 20px 0 22px; font-size: 0.92rem; max-width: 34ch; }

.hl-footer__title {
	font-family: var(--hl-sans);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.hl-footer__links,
.hl-footer__contact { list-style: none; margin: 0; padding: 0; }
.hl-footer__links li { margin-bottom: 11px; font-size: 0.93rem; }
.hl-footer__contact li { margin-bottom: 15px; font-size: 0.93rem; }
.hl-footer__label {
	display: block;
	margin-bottom: 2px;
	font-size: 0.68rem;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--hl-sage-300);
}

.hl-social { display: flex; gap: 11px; list-style: none; margin: 0; padding: 0; }
.hl-social a {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	transition: all var(--hl-transition);
}
.hl-social svg { width: 18px; height: 18px; }
.hl-social a:hover { background: var(--hl-gold); border-color: var(--hl-gold); color: #241d07; }

.hl-footer__newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 30px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hl-footer__newsletter-copy h4 { margin-bottom: 4px; }
.hl-footer__newsletter-copy p { margin: 0; font-size: 0.88rem; }
.hl-footer__subscribe { display: flex; gap: 10px; flex-wrap: wrap; }
.hl-footer__subscribe input {
	width: 280px;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}
.hl-footer__subscribe input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hl-footer__subscribe input:focus { border-color: var(--hl-gold-soft); box-shadow: none; }

.hl-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	padding: 26px 0 34px;
	font-size: 0.8rem;
}
.hl-footer__copy { margin: 0; }
.hl-footer__disclaimer { margin: 0; max-width: 62ch; font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); }

.hl-payments { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hl-payments li {
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--hl-radius-sm);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.66);
	background: rgba(255, 255, 255, 0.05);
}

/* Newsletter signup: honeypot and inline reply. */
.hl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hl-footer__subscribe { position: relative; }
.hl-footer__subscribe-msg { flex: 1 0 100%; margin: 0; font-size: 0.85rem; min-height: 1.2em; }
.hl-footer__subscribe-msg.is-ok { color: var(--hl-gold-soft); }
.hl-footer__subscribe-msg.is-error { color: #E8B4A8; }

/* 18. Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
	.hl-menu { gap: 24px; }
	.hl-ingredients { grid-template-columns: repeat(3, 1fr); }
	.hl-ritual { grid-template-columns: repeat(2, 1fr); }
	.hl-perks { grid-template-columns: repeat(2, 1fr); }
	.hl-perks li:nth-child(2) { border-right: 0; }
	.hl-perks li:nth-child(1),
	.hl-perks li:nth-child(2) { border-bottom: 1px solid var(--hl-line); }
	.hl-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.hl-nav-toggle { display: inline-flex; }
	.hl-header__inner { min-height: 72px; }

	.hl-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		padding: 96px 30px 40px;
		background: var(--hl-cream);
		border-left: 1px solid var(--hl-line);
		box-shadow: var(--hl-shadow-lg);
		transform: translateX(102%);
		transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
		overflow-y: auto;
		z-index: 95;
	}
	.hl-nav.is-open { transform: translateX(0); }
	.hl-menu { flex-direction: column; align-items: flex-start; gap: 4px; }
	.hl-menu > li { width: 100%; border-bottom: 1px solid var(--hl-line); }
	.hl-menu > li > a { display: block; padding: 15px 0; font-size: 0.95rem; }
	.hl-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 10px 12px;
		background: transparent;
	}
	.hl-menu .sub-menu a { padding: 7px 0; }

	.hl-header__cta { display: none; }

	body.hl-nav-open { overflow: hidden; }

	.hl-hero__inner,
	.hl-split,
	.hl-about-hero,
	.hl-contact-grid { grid-template-columns: 1fr; }

	/* Banner hero: the artwork is cropped to portrait here, so it becomes a
	   backdrop behind the whole card and the scrim turns vertical to keep the
	   copy readable above the bottle. */
	.hl-hero--banner { display: block; min-height: 0; background-position: 68% center; }
	.hl-hero--banner::before {
		background: linear-gradient(
			180deg,
			rgba(16, 38, 26, 0.88) 0%,
			rgba(16, 38, 26, 0.62) 38%,
			rgba(16, 38, 26, 0.82) 72%,
			rgba(16, 38, 26, 0.96) 100%
		);
	}
	.hl-hero--banner .hl-hero__inner { padding: clamp(48px, 12vw, 76px) 0; }
	.hl-hero--banner .hl-hero__price-tag {
		position: relative;
		z-index: 1;
		width: fit-content;
		margin: 0 var(--hl-gutter) clamp(34px, 9vw, 56px);
	}

	.woocommerce div.product { grid-template-columns: 1fr; }

	/* One column: the sidebar drops below the description and stops sticking. */
	.hl-details { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.hl-aside { position: static; top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hl-aside__card:first-child { grid-column: 1 / -1; }

	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.hl-values,
	.hl-quotes { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-content { padding-left: 0; padding-top: 26px; }
}

@media (max-width: 680px) {
	:root { --hl-gutter: 18px; }

	.hl-logo__mark { width: 34px; height: 34px; }
	.hl-logo__word { font-size: 1.3rem; }
	.hl-logo__tag { font-size: 0.48rem; letter-spacing: 0.26em; }

	.hl-announcement { font-size: 0.66rem; letter-spacing: 0.08em; }

	.hl-perks,
	.hl-ingredients,
	.hl-ritual,
	.hl-stats,
	.hl-form__row,
	.hl-trust { grid-template-columns: 1fr; }
	.hl-perks li { border-right: 0; border-bottom: 1px solid var(--hl-line); }
	.hl-perks li:last-child { border-bottom: 0; }

	.woocommerce ul.products { grid-template-columns: 1fr; }
	.hl-aside { grid-template-columns: 1fr; }
	.hl-aside__card { padding: 20px 20px; }
	.woocommerce div.product form.cart { flex-wrap: wrap; }
	.woocommerce div.product form.cart .quantity { width: 100%; justify-content: space-between; }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
	/* Narrower thumbs so more of the row is visible before it starts scrolling. */
	.woocommerce div.product div.images .flex-control-thumbs li,
	.woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n+1) { width: 84px; }
	.hl-thumbs { gap: 8px; }
	.hl-thumbs__arrow { width: 34px; height: 34px; }

	.hl-footer__grid { grid-template-columns: 1fr; }
	.hl-footer__subscribe { width: 100%; }
	.hl-footer__subscribe input { width: 100%; }
	.hl-footer__bottom { flex-direction: column; align-items: flex-start; }

	.hl-btn { width: auto; }
	.hl-hero__actions .hl-btn { flex: 1 1 auto; }

	.hl-quote blockquote { font-size: 1.06rem; }
}