/* ==========================================================================
   Hydro King — component & layout styles
   ========================================================================== */

/* ---------- Announcement bar ---------- */
.hk-announcement {
	background: var(--hk-dark-bg);
	color: var(--hk-white);
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.6em var(--hk-gutter);
}
.hk-announcement a { text-decoration: underline; }

/* ---------- Header ---------- */
.hk-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--hk-dark-bg);
	border-bottom: 1px solid var(--hk-border-light);
	transition: background var(--hk-duration) var(--hk-ease), border-color var(--hk-duration) var(--hk-ease);
}
.hk-header .hk-menu-link,
.hk-header .hk-site-title { color: var(--hk-white); }
.hk-header .hk-logo-fallback .hk-crown { color: var(--hk-orange); }
.hk-header .hk-header-actions .hk-btn--outline { border-color: rgba(255,255,255,0.6); color: var(--hk-white); }
.hk-header .hk-menu-toggle { border-color: rgba(255,255,255,0.35); }
.hk-header .hk-menu-toggle span { background: var(--hk-white); }

/* Non-front-page headers (and the front-page header once scrolled) are solid black. */
.hk-header:not(.hk-header--overlay) { background: var(--hk-dark-bg); }

/* On the homepage the header starts fully transparent, laid over the dark hero,
   then gains the same solid-black treatment once the visitor scrolls. */
.hk-header--overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	transform: translateZ(0);
	will-change: transform;
}
.hk-header--overlay.is-scrolled {
	background: var(--hk-dark-bg);
	border-bottom-color: var(--hk-border-light);
}
.hk-home #hk-main { padding-top: 0; }
/* Logged-in admin bar pushes the page down; keep the hero (and its bottom
   strip) fitting the visible screen and the fixed header below the bar. */
.admin-bar .hk-header--overlay { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .hk-hero { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); }
html { background: var(--hk-black); }

.hk-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hk-space-md);
	padding-block: 1rem;
}
.hk-logo { display: flex; align-items: center; gap: 0.6em; text-decoration: none; }
.hk-logo img {
	max-height: 75px;
	width: auto;
	/* The header is always dark — force an uploaded logo to render white.
	   Add the "hk-logo-original-colors" class via Settings/Customizer notes
	   if a pre-coloured logo file should be shown as-is instead. */
	filter: brightness(0) invert(1);
}
.hk-logo.hk-logo-original-colors img { filter: none; }
.hk-site-title {
	font-family: var(--hk-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.hk-logo-fallback { display: flex; align-items: center; gap: 0.4em; }
.hk-logo-fallback .hk-crown { display: inline-flex; }

.hk-primary-nav { display: none; }
@media (min-width: 1024px) {
	.hk-primary-nav { display: block; }
}
.hk-menu {
	display: flex;
	align-items: center;
	gap: var(--hk-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}
.hk-menu-link {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.5em 0.1em;
	position: relative;
}
.hk-menu-link::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--hk-orange);
	transition: right var(--hk-duration) var(--hk-ease);
}
.hk-menu-item:hover .hk-menu-link::after,
.hk-menu-item.is-current .hk-menu-link::after { right: 0; }

.hk-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.hk-header-actions .hk-btn { display: none; }
@media (min-width: 1024px) {
	.hk-header-actions .hk-btn { display: inline-flex; }
}

.hk-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--hk-border);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
@media (min-width: 1024px) { .hk-menu-toggle { display: none; } }
.hk-menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--hk-black);
	transition: transform var(--hk-duration) var(--hk-ease), opacity var(--hk-duration) var(--hk-ease);
}
.hk-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hk-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hk-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hk-mobile-nav {
	position: fixed;
	inset: 0;
	left: auto;
	top: var(--hk-header-height, 72px);
	width: 50%;
	max-width: 380px;
	min-width: 200px;
	background: var(--hk-white);
	box-shadow: -16px 0 40px rgba(0,0,0,0.25);
	transform: translateX(100%);
	transition: transform var(--hk-duration) var(--hk-ease);
	overflow-y: auto;
	z-index: 400;
	padding: var(--hk-space-lg) var(--hk-gutter);
}
.hk-mobile-nav.is-open { transform: translateX(0); }
.hk-mobile-nav .hk-menu { flex-direction: column; align-items: flex-start; gap: var(--hk-space-sm); }
.hk-mobile-nav .hk-menu-link { font-size: 1.3rem; }
.hk-mobile-nav .hk-btn { margin-top: var(--hk-space-lg); width: 100%; }
@media (min-width: 1024px) { .hk-mobile-nav { display: none !important; } }

.hk-submenu-toggle { background: none; border: none; cursor: pointer; }
.hk-submenu { list-style: none; padding-left: var(--hk-space-md); }

/* ---------- Footer ---------- */
.hk-footer {
	position: relative;
	overflow: hidden;
	background: var(--hk-dark-bg);
	color: var(--hk-sand);
	padding-block: calc(var(--hk-space-2xl) + 1.5rem) var(--hk-space-lg);
}
.hk-footer::after {
	content: "";
	position: absolute;
	bottom: -60px; right: -40px;
	width: 260px; height: 260px;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23ffffff' d='M100 10C60 40 20 60 10 100c40-10 70-10 90 0-10-40-10-70 0-90z'/%3E%3Cpath fill='%23ffffff' d='M100 10c40 30 80 50 90 90-40-10-70-10-90 0 10-40 10-70 0-90z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(15deg);
	pointer-events: none;
}
.hk-footer .hk-container { position: relative; z-index: 1; }
.hk-footer a { color: var(--hk-sand); text-decoration: none; }
.hk-footer a:hover { color: var(--hk-orange); }
/* The three link columns size to their own content and share one fixed gap, so the
   space between Explore | Our Drinks and Our Drinks | Contact is always identical
   (equal-width columns made it look uneven because the texts differ in length). */
.hk-footer-grid {
	display: grid;
	/* Contact is capped (a long address wraps instead of stretching the column and squeezing the brand text). */
	grid-template-columns: minmax(18rem, 1.4fr) auto auto fit-content(20rem);
	column-gap: var(--hk-space-xl);
	row-gap: var(--hk-space-lg);
}
@media (max-width: 1200px) {
	.hk-footer-grid { grid-template-columns: 1fr 1fr; column-gap: var(--hk-space-lg); }
	.hk-footer-brand, .hk-footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .hk-footer-grid { gap: var(--hk-space-md); } }
.hk-footer-widget-title, .hk-footer-col h3 {
	font-size: calc(1rem * var(--hk-heading-scale, 1));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--hk-space-sm);
	color: var(--hk-white);
}
.hk-footer-col ul { list-style: none; margin: 0; padding: 0; }
.hk-footer-col li { margin-bottom: 0.6em; }
.hk-footer-logo img { max-height: 40px; margin-bottom: var(--hk-space-sm); filter: brightness(0) invert(1); }
.hk-footer-brand p { max-width: 46ch; }

/* Brand column: description, then a ruled row with the policy links, then the social icons. */
.hk-footer-col ul.hk-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
	margin: var(--hk-space-md) 0 0;
	padding: var(--hk-space-sm) 0;
	border-top: 1px solid var(--hk-border-light);
	border-bottom: 1px solid var(--hk-border-light);
	max-width: 46ch;
}
.hk-footer-col ul.hk-footer-legal li { margin: 0; font-size: 0.92rem; }
.hk-footer-brand .hk-social-links { margin-top: var(--hk-space-md); }

/* Contact column: an icon in front of each detail. */
.hk-footer-contact li { display: flex; align-items: flex-start; gap: 0.7rem; }
.hk-footer-contact li.hk-footer-contact-empty { display: block; }
.hk-footer-contact-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin-top: -4px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(240, 152, 47, 0.16);
	color: var(--hk-orange);
}
.hk-footer-contact li > a,
.hk-footer-contact li > span:not(.hk-footer-contact-icon) { padding-top: 0; min-width: 0; overflow-wrap: anywhere; }
.hk-footer-bottom {
	margin-top: var(--hk-space-xl);
	padding-top: var(--hk-space-md);
	border-top: 1px solid var(--hk-border-light);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hk-space-sm);
	font-size: 0.85rem;
	opacity: 0.8;
}
.hk-social-links { display: flex; gap: var(--hk-space-sm); list-style: none; padding: 0; margin: var(--hk-space-sm) 0 0; }

/* ---------- Hero ---------- */
.hk-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(ellipse at 78% 30%, #2a2115 0%, var(--hk-black) 55%), var(--hk-black);
	color: var(--hk-white);
	padding-top: var(--hk-header-height, 84px);
	/* Default bottom padding only matters when there's no highlight strip to
	   pin to the bottom edge (see :has() below) — when there is one, it should
	   sit flush with the viewport bottom on load, not float above it. */
	padding-bottom: 5.5rem;
}
.hk-hero:has(.hk-hero-highlights) {
	padding-bottom: 0;
}
.hk-hero-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23f0982f' stroke-width='1' opacity='0.14'%3E%3Cpath d='M-20 60C60 20 140 100 220 60S380 20 440 60'/%3E%3Cpath d='M-20 140C60 100 140 180 220 140S380 100 440 140'/%3E%3Cpath d='M-20 220C60 180 140 260 220 220S380 180 440 220'/%3E%3Cpath d='M-20 300C60 260 140 340 220 300S380 260 440 300'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 700px 700px;
	mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.9) 75%, transparent);
}
.hk-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--hk-space-xl);
	align-items: center;
	padding-block: var(--hk-space-lg);
	width: 100%;
}
.hk-hero-inner--no-visual { grid-template-columns: 1fr; max-width: 760px; }
@media (max-width: 900px) {
	.hk-hero-inner { grid-template-columns: 1fr; padding-block: var(--hk-space-md); }
	.hk-hero { min-height: auto; padding-top: calc(var(--hk-header-height, 84px) + var(--hk-space-xs)); }
}
.hk-hero-copy .hk-eyebrow { color: var(--hk-orange-light); }
/* Sized (and line-broken via the heading's own \n, see hero.php) to hold at
   four lines across common viewport widths — tuned against this column's
   actual width rather than reusing the shared .hk-display-1 scale, which
   would run to five lines on most desktop screens. */
.hk-hero-copy h1 {
	color: var(--hk-white);
	white-space: pre-line;
	font-size: clamp(2.5rem, 5vw - 0.3rem, 3.9rem);
}
@media (max-width: 900px) {
	.hk-hero-copy h1 { font-size: clamp(1.85rem, 9.3vw - 0.21rem, 5rem); }
}
.hk-hero-brandline {
	/*font-family: var(--hk-font-display);*/
	font-weight: 400;
	color: var(--hk-orange);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.00rem;
	margin-top: var(--hk-space-sm);
}
.hk-hero-ctas { display: flex; gap: var(--hk-space-sm); flex-wrap: wrap; margin-top: var(--hk-space-lg); }
.hk-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hk-hero-visual img {
	max-width: 780px;
	border-radius: 0;
	box-shadow: none;
	background: none;
	will-change: transform;
}
.hk-hero-visual .hk-hero-glow {
	position: absolute;
	inset: 6%;
	background: radial-gradient(circle, rgba(240,152,47,0.4), transparent 70%);
	filter: blur(40px);
	z-index: -1;
}
.hk-hero-showcase { position: relative; width: 100%; max-width: 780px; height: min(70vh, 760px); }
@media (max-width: 900px) {
	.hk-hero-showcase { height: auto; aspect-ratio: 1/1; max-width: 520px; }
}
.hk-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	/* Sequential, never overlapping: the outgoing slide fades fully out first
	   (500ms), then the incoming slide waits for that and fades in (see below). */
	transition: opacity 500ms ease-in, transform 500ms ease-in, visibility 0s linear 500ms;
	pointer-events: none;
	will-change: opacity, transform;
}
.hk-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 800ms ease-out 500ms, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 500ms, visibility 0s linear 500ms;
}
@media (prefers-reduced-motion: reduce) {
	.hk-hero-slide, .hk-hero-slide.is-active { transition: opacity 300ms linear; transform: none; }
}
.hk-hero-slide { display: flex; align-items: flex-end; justify-content: center; }
.hk-hero-slide img { width: 90%; max-width: 100%; margin-bottom: -3rem; border-radius: 0; box-shadow: none; }
.hk-hero-showcase-dots {
	position: absolute;
	bottom: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.6rem;
}
.hk-hero-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.5);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background var(--hk-duration) var(--hk-ease), border-color var(--hk-duration) var(--hk-ease), transform var(--hk-duration) var(--hk-ease);
}
.hk-hero-dot.is-active { background: var(--hk-orange); border-color: var(--hk-orange); transform: scale(1.2); }
.hk-scroll-cue {
	position: absolute;
	bottom: var(--hk-space-md);
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	z-index: 1;
}

/* ---------- Hero bottom highlight strip ---------- */
.hk-hero-highlights {
	position: relative;
	z-index: 2;
	margin-top: auto;
	background: var(--hk-orange);
}
.hk-hero-highlights-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 760px) {
	.hk-hero-highlights-grid { grid-template-columns: repeat(2, 1fr); }
}
.hk-hero-highlight {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1.1rem var(--hk-space-sm);
	border-right: 1px solid rgba(18,16,13,0.15);
	color: var(--hk-black);
}
.hk-hero-highlight:last-child { border-right: none; }
@media (max-width: 760px) {
	.hk-hero-highlight:nth-child(2n) { border-right: none; }
	.hk-hero-highlight:nth-child(-n+2) { border-bottom: 1px solid rgba(18,16,13,0.15); }
}
.hk-hero-highlight-icon { display: inline-flex; flex-shrink: 0; }
.hk-hero-highlight-label {
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
.hk-scroll-cue span { width: 1px; height: 26px; background: currentColor; animation: hk-scroll-cue 1.8s infinite; }
@keyframes hk-scroll-cue { 0% { opacity: 0; transform: scaleY(0);} 40% { opacity: 1; transform: scaleY(1);} 100% { opacity:0; transform: scaleY(0) translateY(10px);} }

/* ---------- Reveal-on-scroll ---------- */
.hk-reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--hk-ease), transform 900ms var(--hk-ease); }
.hk-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.hk-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Our Story / Sri Lankan Origin (copy left, image right) ---------- */
.hk-story {
	position: relative;
	overflow: hidden;
	background: var(--hk-dark-bg);
	color: var(--hk-white);
	margin-top: -1px; /* seam-free join with the hero above */
}
/* Copy over a full-width background photo (set in the dashboard) with an
   orange overlay; no side image. */
.hk-story-inner {
	position: relative;
	z-index: 1;
	padding-block: var(--hk-space-3xl);
}
.hk-story-copy { max-width: 640px; text-shadow: 0 1px 16px rgba(42,23,8,0.35); }
.hk-story-copy .hk-btn { text-shadow: none; }
.hk-story-copy .hk-eyebrow { color: var(--hk-white); }
.hk-story-copy .hk-lede { color: rgba(255,255,255,0.95); opacity: 1; }
.hk-story-copy .hk-btn--outline { border-color: rgba(255,255,255,0.85); color: var(--hk-white); }
.hk-story-copy .hk-btn--outline:hover, .hk-story-copy .hk-btn--outline:focus-visible { background: var(--hk-dark-btn); border-color: transparent; color: var(--hk-white); }

.hk-media-placeholder {
	aspect-ratio: 4/3;
	border-radius: var(--hk-radius-md);
	background: repeating-linear-gradient(135deg, var(--hk-sand), var(--hk-sand) 12px, #ece2cc 12px, #ece2cc 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hk-muted);
	font-size: 0.8rem;
	text-align: center;
	padding: 1rem;
}

/* ---------- Why Hydro King (white section, black + orange; includes the hydration block) ---------- */
.hk-why-section { overflow: hidden; color: var(--hk-black); }
.hk-why-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--hk-space-lg);
	flex-wrap: wrap;
	margin-bottom: var(--hk-space-lg);
}
.hk-why-head .hk-eyebrow { color: var(--hk-orange); }
.hk-why-head h2 { color: var(--hk-black); max-width: 14ch; }
.hk-why-lede { max-width: 42ch; color: var(--hk-black); opacity: 0.75; margin-bottom: 0; }
.hk-why-card {
	scroll-snap-align: start;
	/* Exactly four cards (plus their three gaps) fill the row width, so the
	   fifth never peeks in — see the narrower per-row counts below. */
	flex: 0 0 calc((100% - 3 * var(--hk-space-md)) / 4);
	background: var(--hk-white);
	border: 2px solid var(--hk-black);
	border-radius: var(--hk-radius-md);
	padding: var(--hk-space-md);
	position: relative;
	transition: transform var(--hk-duration) var(--hk-ease), background var(--hk-duration) var(--hk-ease), border-color var(--hk-duration) var(--hk-ease);
}
.hk-why-card:hover,
.hk-why-card:focus-visible {
	transform: translateY(-10px) scale(1.03);
	background: var(--hk-orange);
	border-color: var(--hk-black);
}
.hk-why-card:hover .hk-why-card-number,
.hk-why-card:focus-visible .hk-why-card-number { color: rgba(18,16,13,0.4); }
.hk-why-card-number {
	position: absolute;
	top: var(--hk-space-sm);
	right: var(--hk-space-md);
	font-family: var(--hk-font-heading, var(--hk-font-display));
	font-size: 1.6rem;
	color: var(--hk-orange);
	transition: color var(--hk-duration) var(--hk-ease);
}
.hk-why-card-icon {
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--hk-dark-btn);
	color: var(--hk-orange);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: var(--hk-space-md);
}
.hk-why-card h3 { color: var(--hk-black); font-size: calc(1.1rem * var(--hk-heading-scale, 1)); margin-bottom: 0.4em; }
.hk-why-card p { color: var(--hk-black); opacity: 0.8; font-size: 0.88rem; margin: 0; }
.hk-why-controls .hk-carousel-btn { background: transparent; border-color: var(--hk-black); color: var(--hk-black); }
.hk-why-controls .hk-carousel-btn:hover { background: var(--hk-orange); border-color: var(--hk-orange); color: var(--hk-black); }
@media (max-width: 900px) {
	.hk-why-card { flex-basis: calc((100% - var(--hk-space-md)) / 2); }
}
@media (max-width: 640px) {
	.hk-why-card { flex-basis: 100%; }
}

/* Hydration block: a full-width band with its own background (set in the dashboard) */
.hk-hydration-band { position: relative; isolation: isolate; overflow: hidden; color: var(--hk-white); }
/* The photo sits on its own layer, so its opacity can change without touching the text. */
.hk-section-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.hk-hydration-band .hk-container { position: relative; }
.hk-hydration-band .hk-why-hydration-copy,
.hk-hydration-band .hk-why-hydration-body > p { text-shadow: 0 1px 14px rgba(18,16,13,0.55); }
.hk-why-hydration {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--hk-space-xl);
	align-items: flex-start;
}
@media (max-width: 900px) { .hk-why-hydration { grid-template-columns: 1fr; gap: var(--hk-space-md); } }
.hk-hydration-band .hk-eyebrow { color: var(--hk-white); }
.hk-why-hydration h2 { color: var(--hk-white); }
.hk-why-hydration-body p { color: var(--hk-white); font-size: 1.05rem; line-height: 1.6; }
.hk-hydration-band .hk-btn--outline { border-color: rgba(255,255,255,0.85); color: var(--hk-white); }
.hk-hydration-band .hk-btn--outline:hover,
.hk-hydration-band .hk-btn--outline:focus-visible { background: var(--hk-dark-btn); border-color: transparent; color: var(--hk-white); }
.hk-why-disclaimer {
	margin-top: var(--hk-space-md);
	padding: var(--hk-space-md);
	border-radius: var(--hk-radius-sm);
	border-left: 4px solid var(--hk-orange);
	background: rgba(18,16,13,0.55);
	color: var(--hk-white);
	font-size: 0.88rem;
}
/* Dark-text variant: for a white / light background chosen in the dashboard. */
.hk-hydration-band--dark { color: var(--hk-black); }
.hk-hydration-band--dark .hk-eyebrow { color: var(--hk-orange-deep); }
.hk-hydration-band--dark .hk-why-hydration h2,
.hk-hydration-band--dark .hk-why-hydration-body p { color: var(--hk-black); text-shadow: none; }
.hk-hydration-band--dark .hk-why-hydration-copy { text-shadow: none; }
.hk-hydration-band--dark .hk-why-disclaimer { background: rgba(255,255,255,0.82); color: var(--hk-black); border: 1px solid var(--hk-border); border-left: 4px solid var(--hk-orange); box-shadow: var(--hk-shadow-sm); }

/* Tighter rhythm around the Hydration band (the white section above it and the band itself). */
.hk-why-section { padding-bottom: var(--hk-space-xl); }
.hk-hydration-band { padding-block: var(--hk-space-xl); }
/* ---------- Product range carousel ---------- */
.hk-carousel-wrap { position: relative; }
.hk-carousel {
	display: flex;
	gap: var(--hk-space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* A scroller clips whatever pokes out of it, so a lifted card and its shadow were
	   being cut off on hover. Extra padding gives them room; the matching negative
	   margins keep the layout exactly where it was. */
	padding: 32px var(--hk-gutter) 56px;
	margin: -32px calc(-1 * var(--hk-gutter)) -56px;
	scroll-padding-inline: var(--hk-gutter);
}
.hk-carousel::-webkit-scrollbar { display: none; }
.hk-product-card {
	scroll-snap-align: start;
	/* Exactly four cards (plus their three gaps) fill the row width in the
	   homepage carousel — flex-basis is a no-op in the archive's CSS grid. */
	flex: 0 0 calc((100% - 3 * var(--hk-space-md)) / 4);
	border-radius: var(--hk-radius-lg);
	background: var(--hk-white);
	padding: var(--hk-space-md);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--hk-ink);
	border: 1px solid var(--hk-border);
	box-shadow: var(--hk-shadow-sm);
	transition: transform var(--hk-duration) var(--hk-ease), box-shadow var(--hk-duration) var(--hk-ease);
	position: relative;
}
.hk-product-card:hover { transform: translateY(-8px); box-shadow: var(--hk-shadow-md); }
.hk-product-card .hk-product-card-image {
	/* Matches the hard-cropped "hk-card" size (800x900) exactly, so
	   object-fit: cover below has nothing left to crop off the sides. */
	aspect-ratio: 8/9;
	border-radius: var(--hk-radius-md);
	overflow: hidden;
	margin-bottom: var(--hk-space-sm);
	background: color-mix(in srgb, var(--card-accent, var(--hk-orange)) 18%, var(--hk-sand));
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.hk-product-card .hk-product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.hk-product-card-flavour {
	position: absolute;
	top: calc(var(--hk-space-md) + 10px);
	left: calc(var(--hk-space-md) + 10px);
	z-index: 1;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--hk-white);
	background: var(--card-accent, var(--hk-orange));
	padding: 0.3em 0.8em;
	border-radius: 999px;
}
.hk-product-card h3 { font-size: calc(1.25rem * var(--hk-heading-scale, 1)); margin-bottom: 0.25em; text-transform: none; }
.hk-product-card p { font-size: 0.88rem; opacity: 0.72; flex-grow: 1; }
.hk-product-card .hk-btn { margin-top: var(--hk-space-xs); align-self: flex-start; }
@media (max-width: 900px) {
	.hk-product-card { flex-basis: calc((100% - var(--hk-space-md)) / 2); }
}
@media (max-width: 640px) {
	.hk-product-card { flex-basis: 100%; }
}
.hk-range-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--hk-space-lg);
	flex-wrap: wrap;
	margin-bottom: var(--hk-space-lg);
}
.hk-range-head-cta { flex-shrink: 0; }
.hk-carousel-controls { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: var(--hk-space-sm); }
.hk-carousel-btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--hk-border);
	background: var(--hk-white);
	cursor: pointer;
	font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center;
}
.hk-carousel-btn:hover { background: var(--hk-orange); color: var(--hk-white); border-color: var(--hk-orange); }
.hk-carousel-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* ---------- Active life ---------- */
/* Active Life page: three big panels per row (an unfinished last row is centred). */
.hk-activelife-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hk-space-md); }
.hk-activelife-grid > .hk-activelife-panel { flex: 0 0 calc((100% - 2 * var(--hk-space-md)) / 3); aspect-ratio: 8 / 9; }
@media (max-width: 900px) { .hk-activelife-grid > .hk-activelife-panel { flex-basis: calc((100% - var(--hk-space-md)) / 2); } }
@media (max-width: 560px) { .hk-activelife-grid > .hk-activelife-panel { flex-basis: 100%; aspect-ratio: 1 / 1; } }
/* aspect-ratio matches the hard-cropped "hk-square" (600x600) source exactly,
   so object-fit: cover below has nothing left to crop and shows the full frame. */
.hk-activelife-panel { position: relative; border-radius: var(--hk-radius-md); overflow: hidden; aspect-ratio: 1/1; color: var(--hk-white); }
.hk-activelife-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-activelife-panel .hk-media-placeholder { position: absolute; inset: 0; border-radius: 0; }
.hk-activelife-caption {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--hk-space-md);
	background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.hk-activelife-caption h3 { margin: 0; font-size: calc(1.3rem * var(--hk-heading-scale, 1)); }

/* Homepage Active Life marquee — an infinite scrolling row of tall cards */
.hk-activelife-section { overflow: hidden; }
.hk-activelife-section .hk-container { margin-bottom: var(--hk-space-lg); }
.hk-marquee {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.hk-marquee-track {
	display: flex;
	gap: var(--hk-space-md);
	width: max-content;
	animation: hk-marquee 38s linear infinite;
	will-change: transform;
}
.hk-marquee:hover .hk-marquee-track { animation-play-state: paused; }
.hk-marquee .hk-activelife-panel { flex: 0 0 260px; aspect-ratio: 1/1; }
/* --marquee-distance is set from JS to the track's own measured half-width
   (main.js), which is exact in every browser's own rounding — a calc()
   guess from CSS alone (e.g. -50% adjusted for gaps) drifted by a
   fractional pixel per loop in some browsers, visible as a periodic jump.
   The 50% fallback only matters for the instant before JS runs. */
@keyframes hk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
	.hk-marquee { overflow-x: auto; }
	.hk-marquee-track { animation: none; }
}



/* ---------- Journal ---------- */
.hk-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hk-space-md); }
@media (max-width: 900px) { .hk-journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hk-journal-grid { grid-template-columns: 1fr; } }
.hk-journal-card,
.hk-journal-card a,
.hk-journal-card a:hover,
.hk-journal-card a:focus-visible,
.hk-journal-card a * { text-decoration: none; }
.hk-journal-card { color: inherit; display: block; }
.hk-journal-card-image { aspect-ratio: 4/3; border-radius: var(--hk-radius-md); overflow: hidden; margin-bottom: var(--hk-space-sm); }
.hk-journal-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hk-duration) var(--hk-ease); }
.hk-journal-card:hover .hk-journal-card-image img { transform: scale(1.05); }
.hk-journal-meta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hk-muted); margin-bottom: 0.4em; }
.hk-journal-card h3 { font-size: calc(1.15rem * var(--hk-heading-scale, 1)); margin-bottom: 0.3em; text-transform: none; }
.hk-journal-card-link { font-weight: 700; font-size: 0.85rem; color: var(--hk-orange); display: inline-flex; align-items: center; gap: 0.3em; }
.hk-journal-card a { position: relative; display: block; }
.hk-journal-card-badge {
	position: absolute;
	top: var(--hk-space-sm);
	left: var(--hk-space-sm);
	z-index: 1;
	background: var(--hk-orange);
	color: var(--hk-black);
}

/* Journal homepage carousel — one enlarged "featured" card leads the strip */
.hk-journal-carousel .hk-journal-card {
	scroll-snap-align: start;
	flex: 0 0 300px;
	background: var(--hk-white);
	border-radius: var(--hk-radius-lg);
	padding: var(--hk-space-sm);
	border: 1px solid var(--hk-border);
	transition: transform var(--hk-duration) var(--hk-ease), box-shadow var(--hk-duration) var(--hk-ease);
}
.hk-journal-carousel .hk-journal-card:hover { transform: translateY(-8px); box-shadow: var(--hk-shadow-md); }
.hk-journal-carousel .hk-journal-card .hk-journal-card-image { margin-bottom: var(--hk-space-sm); }
.hk-journal-carousel .hk-journal-card--featured {
	flex-basis: 460px;
}
.hk-journal-carousel .hk-journal-card--featured .hk-journal-card-image { aspect-ratio: 16/10; }
.hk-journal-carousel .hk-journal-card--featured h3 { font-size: calc(1.5rem * var(--hk-heading-scale, 1)); }
@media (max-width: 640px) {
	.hk-journal-carousel .hk-journal-card,
	.hk-journal-carousel .hk-journal-card--featured { flex-basis: 100%; }
}

/* ---------- Trade / forms ---------- */
.hk-trade-section { position: relative; overflow: hidden; }
/* The brown glow now comes from the section background itself (--hk-dark-bg), so the Trade page, footer and every dark section share one look. */
.hk-trade-texture { display: none; }
.hk-trade-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--hk-space-xl); align-items: flex-start; }
@media (max-width: 900px) { .hk-trade-layout { grid-template-columns: 1fr; } }
.hk-trade-copy .hk-lede { color: rgba(255,255,255,0.75); }
.hk-trade-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hk-space-md); margin-top: var(--hk-space-lg); }
@media (max-width: 560px) { .hk-trade-types { grid-template-columns: 1fr; } }
.hk-trade-type { display: flex; gap: 0.75rem; align-items: flex-start; }
.hk-trade-type-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(240,152,47,0.14);
	color: var(--hk-orange);
	display: flex; align-items: center; justify-content: center;
}
.hk-trade-type h3 { font-size: calc(1rem * var(--hk-heading-scale, 1)); text-transform: none; color: var(--hk-white); margin-bottom: 0.15em; }
.hk-trade-type p { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0; }

.hk-form-card { position: relative; background: var(--hk-white); color: var(--hk-ink); padding: var(--hk-space-lg); border-radius: var(--hk-radius-lg); box-shadow: var(--hk-shadow-md); border-top: 5px solid var(--hk-orange); }
.hk-form-card-eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hk-orange); margin-bottom: 0.5em; }
.hk-form-card-title { text-transform: none; font-size: calc(1.4rem * var(--hk-heading-scale, 1)); margin-bottom: 0.2em; }
.hk-form-card-intro { color: var(--hk-muted); font-size: 0.9rem; margin-bottom: var(--hk-space-md); }

/* ---------- Social ---------- */
.hk-social-empty { text-align: center; opacity: 0.75; }
.hk-social-links--center { justify-content: center; margin-top: var(--hk-space-md); }

/* Instagram-style feed grid */
.hk-instagram-handle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--hk-space-sm);
	font-weight: 700;
	color: var(--hk-orange);
	text-decoration: none;
}
.hk-instagram-handle:hover { text-decoration: underline; }
.hk-instagram-grid {
	display: grid;
	grid-template-columns: repeat(var(--hk-ig-cols, 6), 1fr);
	gap: 4px;
	margin-top: var(--hk-space-lg);
	border-radius: var(--hk-radius-md);
	overflow: hidden;
}
@media (max-width: 900px) { .hk-instagram-grid { grid-template-columns: repeat(min(var(--hk-ig-cols, 3), 3), 1fr); } }
.hk-instagram-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--hk-duration) var(--hk-ease); }
.hk-instagram-tile:hover img { transform: scale(1.06); }
.hk-instagram-tile { position: relative; aspect-ratio: 1; display: block; overflow: hidden; }
.hk-instagram-tile .hk-media-placeholder { position: absolute; inset: 0; border-radius: 0; }
.hk-instagram-tile-overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(18,16,13,0.55);
	color: var(--hk-white);
	opacity: 0;
	transition: opacity var(--hk-duration) var(--hk-ease);
}
.hk-instagram-tile:hover .hk-instagram-tile-overlay,
.hk-instagram-tile:focus-visible .hk-instagram-tile-overlay { opacity: 1; }

/* ---------- Final CTA ---------- */
.hk-final-cta { text-align: center; position: relative; overflow: hidden; }
.hk-final-cta-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(240,152,47,0.16), transparent 60%);
}
.hk-final-cta-heading {
	position: relative;
	font-size: clamp(2rem, 4.2vw, 4.2rem);
	line-height: 1.1;
	max-width: 100%;
}
.hk-accent-text { color: var(--hk-orange); }
.hk-final-cta .hk-hero-ctas { justify-content: center; position: relative; }

/* ---------- Product archive ---------- */
.hk-archive-header { text-align: center; padding-block: var(--hk-space-xl) var(--hk-space-md); }
.hk-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hk-space-lg); }
@media (max-width: 900px) { .hk-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hk-archive-grid { grid-template-columns: 1fr; } }

/* ---------- Single product ---------- */
.hk-product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hk-space-xl); align-items: center; }
@media (max-width: 900px) { .hk-product-hero { grid-template-columns: 1fr; } }
.hk-product-visual { aspect-ratio: 4/5; border-radius: var(--hk-radius-lg); overflow: hidden; background: var(--accent, var(--hk-orange)); display:flex; align-items:center; justify-content:center; }
.hk-product-visual img { width: 100%; height: 100%; object-fit: cover; }
.hk-product-badges { display: flex; gap: 0.5rem; margin-bottom: var(--hk-space-sm); flex-wrap: wrap; }
.hk-product-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hk-space-sm); }
.hk-product-gallery img { border-radius: var(--hk-radius-sm); aspect-ratio: 1; object-fit: cover; }
.hk-nutrition-table { width: 100%; border-collapse: collapse; margin-top: var(--hk-space-sm); }
.hk-nutrition-table th, .hk-nutrition-table td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--hk-border); font-size: 0.92rem; }
.hk-nutrition-table th { font-weight: 600; }
.hk-tbc { color: var(--hk-muted); font-style: italic; }
.hk-nutrition-placeholder { padding: 0.9em 1.1em; border-radius: var(--hk-radius-sm); background: var(--hk-sand); font-size: 0.9rem; }
.hk-bullet-list { padding-left: 1.2em; }
.hk-bullet-list li { margin-bottom: 0.4em; }

/* ---------- Breadcrumbs ---------- */
.hk-breadcrumbs { padding-block: var(--hk-space-sm); font-size: 0.85rem; }
.hk-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0; margin: 0; }
.hk-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4em; opacity: 0.5; }
.hk-breadcrumbs a { text-decoration: underline; }

/* ---------- FAQ ---------- */
.hk-faq-group { margin-bottom: var(--hk-space-lg); }
.hk-faq-item { border-bottom: 1px solid var(--hk-border); }
.hk-faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: var(--hk-space-sm) 0;
	font-weight: 700;
	font-size: 1.05rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.hk-faq-answer { display: none; padding-bottom: var(--hk-space-sm); opacity: 0.85; }
.hk-faq-item.is-open .hk-faq-answer { display: block; }
.hk-faq-icon { transition: transform var(--hk-duration) var(--hk-ease); }
.hk-faq-item.is-open .hk-faq-icon { transform: rotate(45deg); }

/* ---------- Pagination / comments ---------- */
.hk-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--hk-space-lg); }
.hk-pagination a, .hk-pagination span { padding: 0.5em 1em; border-radius: var(--hk-radius-sm); border: 1px solid var(--hk-border); text-decoration: none; }
.hk-pagination .current { background: var(--hk-orange); color: var(--hk-white); border-color: var(--hk-orange); }

/* ---------- 404 ---------- */
.hk-404 { text-align: center; padding-block: var(--hk-space-3xl); }

/* Header height variable used by mobile nav offset */
:root { --hk-header-height: 76px; }