/* =====================================================================
   HempyTails — Premium Pet Store Design System
   Path: /wp-content/themes/astra-child/assets/css/hempytails.css
   Mobile-first. Layered on Astra. Tokens drive the whole UI.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
	/* --- Brand palette --- */
	--ht-forest:        #1B4332; /* deep forest green — primary */
	--ht-cream:         #FAF7F2; /* warm cream — surfaces/background */
	--ht-terracotta:    #C4622D; /* terracotta — accent / CTAs */
	--ht-gold:          #D4A853; /* soft gold — highlights / borders */
	--ht-ink:           #1A1A1A; /* near-black — body text */

	/* --- Tints & shades (derived) --- */
	--ht-forest-700:    #163828;
	--ht-forest-300:    #4A6B5A;
	--ht-cream-200:     #F1EBE0;
	--ht-cream-deep:    #EFE8DC;
	--ht-terracotta-600:#A84F22;
	--ht-gold-200:      #EBD6A8;
	--ht-white:         #FFFFFF;
	--ht-muted:         #6B6B66;
	--ht-line:          rgba(26, 26, 26, 0.10);

	/* Ink steps + border alias; referenced by sec 22-25 components (were undefined). */
	--ht-ink-700:       #3A3A36; /* softened body ink — secondary copy */
	--ht-ink-500:       #6B6B66; /* muted — breadcrumbs / meta */
	--ht-border:        rgba(20, 40, 30, 0.12); /* hairline (matches component fallbacks) */

	/* --- Semantic roles --- */
	--ht-bg:            var(--ht-cream);
	--ht-surface:       var(--ht-white);
	--ht-text:          var(--ht-ink);
	--ht-text-soft:     var(--ht-muted);
	--ht-primary:       var(--ht-forest);
	--ht-accent:        var(--ht-terracotta);
	--ht-highlight:     var(--ht-gold);
	--ht-on-primary:    var(--ht-cream);
	--ht-on-accent:     #FFFFFF;

	/* --- Typography --- */
	--ht-font-heading:  "Playfair Display", Georgia, "Times New Roman", serif;
	--ht-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluid type scale (mobile-first base, clamps up for larger screens) */
	--ht-text-xs:   0.75rem;   /* 12px */
	--ht-text-sm:   0.875rem;  /* 14px */
	--ht-text-base: 1rem;      /* 16px */
	--ht-text-lg:   1.125rem;  /* 18px */
	--ht-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--ht-text-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
	--ht-text-3xl:  clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
	--ht-text-4xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

	--ht-leading-tight: 1.15;
	--ht-leading-snug:  1.35;
	--ht-leading-base:  1.65;

	--ht-weight-body:   400;
	--ht-weight-medium: 500;
	--ht-weight-semi:   600;
	--ht-weight-bold:   700;

	/* --- Spacing scale (8pt base) --- */
	--ht-space-1: 0.25rem;
	--ht-space-2: 0.5rem;
	--ht-space-3: 0.75rem;
	--ht-space-4: 1rem;
	--ht-space-5: 1.5rem;
	--ht-space-6: 2rem;
	--ht-space-7: 3rem;
	--ht-space-8: 4rem;
	--ht-space-9: 6rem;

	/* --- Radii --- */
	--ht-radius-sm: 6px;
	--ht-radius-md: 12px;
	--ht-radius-lg: 20px;
	--ht-radius-pill: 999px;

	/* --- Shadows --- */
	--ht-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
	--ht-shadow-md: 0 6px 20px rgba(27, 67, 50, 0.10);
	--ht-shadow-lg: 0 16px 48px rgba(27, 67, 50, 0.16);

	/* --- Layout --- */
	--ht-container: 1200px;
	--ht-container-narrow: 760px;

	/* --- Motion --- */
	--ht-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ht-transition: 0.25s var(--ht-ease);

	/* --- Breakpoints (reference only; used in media queries below) ---
	   sm 480px · md 768px · lg 1024px · xl 1280px */
}

/* ---------------------------------------------------------------------
   2. BASE / RESET-LITE  (mobile-first)
   --------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--ht-bg);
	color: var(--ht-text);
	font-family: var(--ht-font-body);
	font-size: var(--ht-text-base);
	font-weight: var(--ht-weight-body);
	line-height: var(--ht-leading-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--ht-font-heading);
	color: var(--ht-primary);
	font-weight: var(--ht-weight-semi);
	line-height: var(--ht-leading-tight);
	letter-spacing: -0.01em;
	margin-top: 0;
}

h1, .entry-title { font-size: var(--ht-text-4xl); font-weight: var(--ht-weight-bold); }
h2 { font-size: var(--ht-text-3xl); }
h3 { font-size: var(--ht-text-2xl); }
h4 { font-size: var(--ht-text-xl); }
h5 { font-size: var(--ht-text-lg); }
h6 { font-size: var(--ht-text-base); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ht-text-soft); }

p { margin: 0 0 var(--ht-space-4); }

a {
	color: var(--ht-accent);
	text-decoration: none;
	transition: color var(--ht-transition);
}
a:hover,
a:focus-visible { color: var(--ht-terracotta-600); }

.ht-eyebrow {
	font-family: var(--ht-font-body);
	font-size: var(--ht-text-sm);
	font-weight: var(--ht-weight-semi);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ht-highlight);
}

/* ---------------------------------------------------------------------
   4. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.ht-container {
	width: 100%;
	max-width: var(--ht-container);
	margin-inline: auto;
	padding-inline: var(--ht-space-4);
}

.ht-section {
	padding-block: var(--ht-space-7);
}

/* ---------------------------------------------------------------------
   5. BUTTONS  (covers Astra + WooCommerce button classes)
   --------------------------------------------------------------------- */
.ht-btn,
.wp-block-button__link,
.ast-button,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ht-space-2);
	font-family: var(--ht-font-body);
	font-weight: var(--ht-weight-semi);
	font-size: var(--ht-text-base);
	line-height: 1;
	padding: 0.85em 1.6em;
	border: 0;
	border-radius: var(--ht-radius-pill);
	background-color: var(--ht-accent);
	color: var(--ht-on-accent) !important;
	cursor: pointer;
	transition: transform var(--ht-transition), background-color var(--ht-transition), box-shadow var(--ht-transition);
	box-shadow: var(--ht-shadow-sm);
}

.ht-btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
	background-color: var(--ht-terracotta-600);
	color: var(--ht-on-accent) !important;
	transform: translateY(-2px);
	box-shadow: var(--ht-shadow-md);
}

/* Secondary / forest variant */
.ht-btn--primary,
.woocommerce-page .button.alt.checkout {
	background-color: var(--ht-primary);
	color: var(--ht-on-primary) !important;
}
.ht-btn--primary:hover { background-color: var(--ht-forest-700); }

/* Ghost / gold-outline variant */
.ht-btn--ghost {
	background: transparent;
	color: var(--ht-primary) !important;
	border: 1.5px solid var(--ht-highlight);
	box-shadow: none;
}
.ht-btn--ghost:hover {
	background: var(--ht-gold-200);
	color: var(--ht-primary) !important;
}

/* ---------------------------------------------------------------------
   6. CARDS & SURFACES
   --------------------------------------------------------------------- */
.ht-card,
.woocommerce ul.products li.product {
	background: var(--ht-surface);
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius-md);
	padding: var(--ht-space-4);
	box-shadow: var(--ht-shadow-sm);
	transition: transform var(--ht-transition), box-shadow var(--ht-transition);
}
.ht-card:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--ht-shadow-md);
}

.woocommerce ul.products li.product .price {
	color: var(--ht-primary);
	font-weight: var(--ht-weight-semi);
}

/* On-sale badge in gold */
.woocommerce span.onsale {
	background-color: var(--ht-highlight);
	color: var(--ht-ink);
	border-radius: var(--ht-radius-pill);
	font-weight: var(--ht-weight-semi);
}

/* ---------------------------------------------------------------------
   7. HEADER / FOOTER ACCENTS
   --------------------------------------------------------------------- */
.site-header { background-color: var(--ht-cream); }
.site-title a { color: var(--ht-primary) !important; }

.site-footer,
.ast-small-footer {
	background-color: var(--ht-forest);
	color: var(--ht-cream);
}
.site-footer a,
.ast-small-footer a { color: var(--ht-gold-200); }

/* Section divider rule in gold */
.ht-rule {
	height: 2px;
	width: 64px;
	background: var(--ht-highlight);
	border: 0;
	margin: var(--ht-space-4) 0;
}

/* ---------------------------------------------------------------------
   8. FORMS / INPUTS
   --------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background: var(--ht-surface);
	border: 1.5px solid var(--ht-line);
	border-radius: var(--ht-radius-sm);
	padding: 0.7em 0.9em;
	font-family: var(--ht-font-body);
	color: var(--ht-text);
	transition: border-color var(--ht-transition), box-shadow var(--ht-transition);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--ht-primary);
	box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12);
}

/* ---------------------------------------------------------------------
   9. ACCESSIBILITY
   --------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--ht-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   10. RESPONSIVE — mobile-first; min-width breakpoints scale UP
   ===================================================================== */

/* ≥ 480px — large phones */
@media (min-width: 480px) {
	.ht-container { padding-inline: var(--ht-space-5); }
}

/* ≥ 768px — tablets */
@media (min-width: 768px) {
	.ht-section { padding-block: var(--ht-space-8); }
	.ht-container { padding-inline: var(--ht-space-6); }
	body { font-size: 1.0625rem; } /* 17px — slightly larger reading size */
}

/* ≥ 1024px — laptops */
@media (min-width: 1024px) {
	.ht-section { padding-block: var(--ht-space-9); }
}

/* ≥ 1280px — large desktops */
@media (min-width: 1280px) {
	.ht-container { padding-inline: 0; }
}

/* =====================================================================
   11. STORE LOCATOR  (template-store-locator.php)
   ===================================================================== */
.ht-locator-head { text-align: center; max-width: var(--ht-container-narrow); margin-inline: auto; }
.ht-locator-head .ht-rule { margin-inline: auto; }
.ht-locator-intro { color: var(--ht-text-soft); font-size: var(--ht-text-lg); }

/* Mobile-first: single column; two-up from tablet. */
.ht-locator-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ht-space-5);
	margin-top: var(--ht-space-6);
}

.ht-store { padding: 0; overflow: hidden; }
.ht-store__map iframe { display: block; }
.ht-store__body { padding: var(--ht-space-5); }
.ht-store__name { font-size: var(--ht-text-2xl); margin-bottom: var(--ht-space-2); }

.ht-store__addr {
	font-style: normal;
	color: var(--ht-text-soft);
	line-height: var(--ht-leading-snug);
	margin-bottom: var(--ht-space-3);
}

.ht-store__meta { list-style: none; margin: 0 0 var(--ht-space-4); padding: 0; }
.ht-store__meta li { padding: var(--ht-space-1) 0; border-bottom: 1px solid var(--ht-line); }
.ht-store__meta li:last-child { border-bottom: 0; }
.ht-store__label {
	display: inline-block;
	min-width: 4.5rem;
	font-weight: var(--ht-weight-semi);
	color: var(--ht-primary);
}

.ht-store__actions { display: flex; flex-wrap: wrap; gap: var(--ht-space-3); }

.ht-locator-services { text-align: center; margin-top: var(--ht-space-8); }
.ht-services-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ht-space-3);
	padding: 0;
	margin-top: var(--ht-space-4);
}
.ht-services-list li {
	background: var(--ht-gold-200);
	color: var(--ht-forest-700);
	font-weight: var(--ht-weight-medium);
	padding: var(--ht-space-2) var(--ht-space-4);
	border-radius: var(--ht-radius-pill);
}

@media (min-width: 768px) {
	.ht-locator-grid { grid-template-columns: 1fr 1fr; gap: var(--ht-space-6); }
}

/* =====================================================================
   12. PRESCRIPTION (Rx) PRODUCTS  (inc/prescription-products.php)
   ===================================================================== */
.ht-rx-notice {
	background: rgba(196, 98, 45, 0.08);        /* terracotta tint */
	border: 1px solid var(--ht-accent);
	border-left-width: 4px;
	border-radius: var(--ht-radius-sm);
	padding: var(--ht-space-3) var(--ht-space-4);
	margin: var(--ht-space-3) 0;
	color: var(--ht-ink);
	font-size: var(--ht-text-sm);
	line-height: var(--ht-leading-snug);
}
.ht-rx-notice strong { color: var(--ht-terracotta-600); }

.ht-rx-confirm {
	display: flex;
	gap: var(--ht-space-2);
	align-items: flex-start;
	font-size: var(--ht-text-sm);
	margin: var(--ht-space-3) 0;
}
.ht-rx-confirm input { margin-top: 0.2em; }

.ht-rx-loop-btn { white-space: nowrap; }

/* Rx badge on product thumbnails */
.woocommerce ul.products li.product,
.single-product div.product { position: relative; }
.ht-rx-badge {
	position: absolute;
	top: var(--ht-space-2);
	left: var(--ht-space-2);
	z-index: 2;
	background: var(--ht-accent);
	color: #fff;
	font-size: var(--ht-text-xs);
	font-weight: var(--ht-weight-semi);
	letter-spacing: 0.02em;
	padding: 0.2em 0.55em;
	border-radius: var(--ht-radius-pill);
	box-shadow: var(--ht-shadow-sm);
}

/* =====================================================================
   13. HOME PAGE  (front-page.php)
   ===================================================================== */

/* Button variants used on the homepage */
.ht-btn--accent {
	background: var(--ht-accent);
	color: var(--ht-on-accent) !important;
}
.ht-btn--accent:hover { background: var(--ht-terracotta-600); }
.ht-btn--ghost-light {
	background: transparent;
	color: var(--ht-cream) !important;
	border: 1.5px solid rgba(250, 247, 242, 0.6);
	box-shadow: none;
}
.ht-btn--ghost-light:hover {
	background: rgba(250, 247, 242, 0.12);
	color: var(--ht-white) !important;
}

/* HERO */
.ht-hero {
	background:
		radial-gradient(120% 120% at 80% 0%, var(--ht-forest-700) 0%, var(--ht-forest) 55%);
	color: var(--ht-cream);
	padding-block: var(--ht-space-8);
	text-align: center;
}
.ht-hero__eyebrow { color: var(--ht-gold); }
.ht-hero__title {
	color: var(--ht-cream);
	font-size: var(--ht-text-4xl);
	line-height: 1.08;
	margin: var(--ht-space-3) 0 var(--ht-space-4);
}
.ht-hero__sub {
	max-width: 46ch;
	margin: 0 auto var(--ht-space-6);
	color: rgba(250, 247, 242, 0.85);
	font-size: var(--ht-text-lg);
}
.ht-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-space-3);
	justify-content: center;
}

/* Shared home section headers */
.ht-home-head { text-align: center; max-width: var(--ht-container-narrow); margin: 0 auto var(--ht-space-6); }
.ht-home-head .ht-rule { margin-inline: auto; }

/* CATEGORY GRID */
.ht-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ht-space-4);
}
.ht-cat-card {
	display: block;
	background: var(--ht-surface);
	border: 1px solid var(--ht-line);
	border-top: 3px solid var(--ht-highlight);
	border-radius: var(--ht-radius-md);
	padding: var(--ht-space-5);
	transition: transform var(--ht-transition), box-shadow var(--ht-transition), border-color var(--ht-transition);
}
.ht-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ht-shadow-md);
	border-top-color: var(--ht-accent);
}
.ht-cat-card__name { color: var(--ht-primary); margin-bottom: var(--ht-space-2); }
.ht-cat-card__desc { color: var(--ht-text-soft); font-size: var(--ht-text-sm); margin-bottom: var(--ht-space-3); }
.ht-cat-card__cta { color: var(--ht-accent); font-weight: var(--ht-weight-semi); }

/* WHY grid */
.ht-home-why { background: var(--ht-cream-deep); }
.ht-why-grid { display: grid; grid-template-columns: 1fr; gap: var(--ht-space-4); }
.ht-why-card {
	background: var(--ht-surface);
	border-radius: var(--ht-radius-md);
	padding: var(--ht-space-5);
	box-shadow: var(--ht-shadow-sm);
}
.ht-why-card h3 { color: var(--ht-primary); font-size: var(--ht-text-xl); margin-bottom: var(--ht-space-2); }
.ht-why-card p { color: var(--ht-text-soft); margin: 0; }

/* SERVICES grid */
.ht-services-grid { display: grid; grid-template-columns: 1fr; gap: var(--ht-space-4); }
.ht-service {
	border: 1px solid var(--ht-line);
	border-left: 4px solid var(--ht-accent);
	border-radius: var(--ht-radius-sm);
	padding: var(--ht-space-4) var(--ht-space-5);
	background: var(--ht-surface);
}
.ht-service h3 { color: var(--ht-primary); font-size: var(--ht-text-lg); margin-bottom: var(--ht-space-1); }
.ht-service p { color: var(--ht-text-soft); margin: 0; }

/* LOCATIONS CTA band */
.ht-home-locations {
	background: var(--ht-forest);
	color: var(--ht-cream);
	text-align: center;
	padding-block: var(--ht-space-8);
}
.ht-home-locations h2 { color: var(--ht-cream); }
.ht-home-locations p { color: rgba(250, 247, 242, 0.85); margin-bottom: var(--ht-space-5); }

/* Home responsive */
@media (min-width: 768px) {
	.ht-hero { padding-block: var(--ht-space-9); }
	.ht-cat-grid    { grid-template-columns: repeat(3, 1fr); gap: var(--ht-space-5); }
	.ht-why-grid    { grid-template-columns: repeat(2, 1fr); gap: var(--ht-space-5); }
	.ht-services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ht-space-5); }
}
@media (min-width: 1024px) {
	.ht-why-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   14. ABOUT PAGE  (template-about.php)
   ===================================================================== */
.ht-about-hero {
	background: var(--ht-cream-deep);
	text-align: center;
	padding-block: var(--ht-space-8);
	border-bottom: 3px solid var(--ht-highlight);
}
.ht-about-hero__title {
	font-size: var(--ht-text-4xl);
	line-height: 1.1;
	margin: var(--ht-space-3) 0 var(--ht-space-4);
}
.ht-about-hero__lede {
	max-width: 50ch;
	margin: 0 auto;
	color: var(--ht-text-soft);
	font-size: var(--ht-text-lg);
}

/* Readable narrative column */
.ht-prose {
	max-width: 68ch;
}
.ht-prose h2 {
	font-size: var(--ht-text-2xl);
	margin-bottom: var(--ht-space-4);
}
.ht-prose p {
	font-size: var(--ht-text-lg);
	line-height: var(--ht-leading-base);
	color: var(--ht-text);
	margin-bottom: var(--ht-space-4);
}
.ht-prose strong { color: var(--ht-primary); }

/* =====================================================================
   15. HOME — SHOP-BY-CATEGORY TILES  (front-page.php, species-first)
   ===================================================================== */
.ht-tilegroup-title {
	font-size: var(--ht-text-xl);
	color: var(--ht-primary);
	text-align: center;
	margin: var(--ht-space-6) 0 var(--ht-space-3);
}
.ht-tilegroup-title:first-of-type { margin-top: var(--ht-space-4); }

.ht-tile-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ht-space-3);
}

.ht-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 1 / 1;
	border-radius: var(--ht-radius-md);
	overflow: hidden;
	padding: var(--ht-space-3);
	border: 1px solid var(--ht-line);
	background-color: var(--ht-forest);
	background-size: cover;
	background-position: center;
	transition: transform var(--ht-transition), box-shadow var(--ht-transition);
}
.ht-tile:hover { transform: translateY(-4px); box-shadow: var(--ht-shadow-md); }

.ht-tile__label {
	position: relative;
	z-index: 2;
	font-family: var(--ht-font-heading);
	font-weight: var(--ht-weight-semi);
	font-size: var(--ht-text-base);
	line-height: 1.15;
	color: var(--ht-cream);
}

/* Image tiles: dark forest gradient so the label stays legible */
.ht-tile--img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(27,67,50,0.88) 0%, rgba(27,67,50,0.20) 55%, rgba(27,67,50,0) 100%);
}

/* Fallback (no image yet): forest gradient tile, gold label */
.ht-tile:not(.ht-tile--img) {
	background-image: linear-gradient(135deg, var(--ht-forest) 0%, var(--ht-forest-700) 100%);
	align-items: center;
	justify-content: center;
	text-align: center;
}
.ht-tile:not(.ht-tile--img) .ht-tile__label { color: var(--ht-gold-200); }

@media (min-width: 600px) { .ht-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ht-tile-grid { grid-template-columns: repeat(5, 1fr); gap: var(--ht-space-4); } }

/* =====================================================================
   16. STORE LOCATION PAGE  (template-store-location.php)
   ===================================================================== */
.ht-store-map { margin: var(--ht-space-5) 0; border-radius: var(--ht-radius-md); overflow: hidden; box-shadow: var(--ht-shadow-sm); }
.ht-store-cols { display: grid; grid-template-columns: 1fr; gap: var(--ht-space-6); }
.ht-store-details h2, .ht-store-context h2, .ht-store-faq h2 { font-size: var(--ht-text-xl); margin-bottom: var(--ht-space-3); }
.ht-detail-table { width: 100%; border-collapse: collapse; margin-bottom: var(--ht-space-4); }
.ht-detail-table th, .ht-detail-table td { text-align: left; padding: var(--ht-space-2) var(--ht-space-3); border-bottom: 1px solid var(--ht-line); vertical-align: top; }
.ht-detail-table th { color: var(--ht-primary); font-weight: var(--ht-weight-semi); width: 8rem; }
.ht-store-context { background: var(--ht-cream-deep); border-radius: var(--ht-radius-md); padding: var(--ht-space-5); }
.ht-store-context p { color: var(--ht-text-soft); }
.ht-shop-cta { margin-top: var(--ht-space-4); }
.ht-store-faq { margin-top: var(--ht-space-7); max-width: var(--ht-container-narrow); }
.ht-faq-item { border-bottom: 1px solid var(--ht-line); padding: var(--ht-space-3) 0; }
.ht-faq-item summary { cursor: pointer; font-weight: var(--ht-weight-semi); color: var(--ht-primary); font-family: var(--ht-font-heading); font-size: var(--ht-text-lg); }
.ht-faq-item p { margin: var(--ht-space-2) 0 0; color: var(--ht-text-soft); }
@media (min-width: 860px) {
	.ht-store-cols { grid-template-columns: 1.4fr 1fr; }
}

/* =====================================================================
   17. SERVICE PAGES  (template-service-*.php)
   ===================================================================== */
.ht-quick-answer {
	background: rgba(212, 168, 83, 0.12);        /* soft gold tint */
	border-left: 4px solid var(--ht-highlight);
	border-radius: var(--ht-radius-sm);
	padding: var(--ht-space-4) var(--ht-space-5);
	margin: 0 0 var(--ht-space-6);
}
.ht-quick-answer h2 {
	font-family: var(--ht-font-body);
	font-size: var(--ht-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ht-terracotta-600);
	margin-bottom: var(--ht-space-2);
}
.ht-quick-answer p { margin: 0; font-size: var(--ht-text-lg); line-height: var(--ht-leading-base); }
.ht-service .ht-prose { max-width: var(--ht-container-narrow); }
.ht-service h2 { font-size: var(--ht-text-2xl); margin: var(--ht-space-6) 0 var(--ht-space-3); }
.ht-service h3 { font-size: var(--ht-text-lg); margin: var(--ht-space-4) 0 var(--ht-space-1); color: var(--ht-primary); }
.ht-price-table th { background: var(--ht-cream-deep); }
.ht-price-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ht-fineprint { font-size: var(--ht-text-sm); color: var(--ht-text-soft); max-width: var(--ht-container-narrow); }
.ht-service ol { max-width: var(--ht-container-narrow); padding-left: var(--ht-space-5); }
.ht-service ol li { margin-bottom: var(--ht-space-2); }

/* Services hub cards (template-services-hub.php) */
.ht-service-card { display: flex; flex-direction: column; position: relative; }
.ht-service-card__store {
	display: inline-block; align-self: flex-start;
	font-size: var(--ht-text-xs); font-weight: var(--ht-weight-semi);
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ht-forest-700); background: var(--ht-gold-200);
	padding: 0.15em 0.6em; border-radius: var(--ht-radius-pill); margin-bottom: var(--ht-space-2);
}
.ht-service-card__price { margin-top: var(--ht-space-3); color: var(--ht-accent); font-weight: var(--ht-weight-semi); }
.ht-services-loc-title { text-align: center; margin: var(--ht-space-7) 0 var(--ht-space-3); }
#ht-services-hub .ht-detail-table { max-width: var(--ht-container-narrow); margin-inline: auto; }
#ht-services-hub .ht-detail-table td:not(:first-child),
#ht-services-hub .ht-detail-table th:not(:first-child) { text-align: center; }

/* =====================================================================
   18. HOME — TRUST BAR + QUICK-NAV TILES  (front-page.php)
   ===================================================================== */
.ht-trustbar {
	background: var(--ht-forest-700);
	color: var(--ht-cream);
	padding-block: var(--ht-space-3);
}
.ht-trustbar ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--ht-space-2) var(--ht-space-5);
	text-align: center;
}
.ht-trustbar li {
	font-size: var(--ht-text-sm); font-weight: var(--ht-weight-medium);
	letter-spacing: 0.01em; color: rgba(250, 247, 242, 0.92);
	position: relative;
}
.ht-trustbar li span[aria-hidden] { color: var(--ht-gold); }

.ht-quicknav-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--ht-space-3);
}
.ht-quicknav-tile {
	display: block; background: var(--ht-surface);
	border: 1px solid var(--ht-line); border-bottom: 3px solid var(--ht-highlight);
	border-radius: var(--ht-radius-md); padding: var(--ht-space-5);
	transition: transform var(--ht-transition), box-shadow var(--ht-transition), border-color var(--ht-transition);
}
.ht-quicknav-tile:hover { transform: translateY(-4px); box-shadow: var(--ht-shadow-md); border-bottom-color: var(--ht-accent); }
.ht-quicknav-tile h3 { color: var(--ht-primary); font-size: var(--ht-text-lg); margin-bottom: var(--ht-space-1); }
.ht-quicknav-tile p { color: var(--ht-text-soft); font-size: var(--ht-text-sm); margin-bottom: var(--ht-space-2); }
.ht-quicknav-cta { color: var(--ht-accent); font-weight: var(--ht-weight-semi); font-size: var(--ht-text-sm); }

@media (min-width: 768px) {
	.ht-quicknav-grid { grid-template-columns: repeat(4, 1fr); gap: var(--ht-space-4); }
}

/* =====================================================================
   19. BLOG — IN-POST RELATED BOX + BLOG HUB
   ===================================================================== */
.ht-related {
	margin: var(--ht-space-6) 0;
	padding: var(--ht-space-5);
	background: var(--ht-cream-200);
	border: 1px solid var(--ht-line);
	border-left: 4px solid var(--ht-highlight);
	border-radius: var(--ht-radius-md);
}
.ht-related h3 { margin-top: 0; color: var(--ht-primary); font-size: var(--ht-text-lg); }
.ht-related ul { margin: 0; padding-left: var(--ht-space-4); }
.ht-related li { margin-bottom: var(--ht-space-2); }
.ht-related a { color: var(--ht-accent); font-weight: var(--ht-weight-medium); }

.ht-post-list { list-style: none; margin: 0; padding: 0; }
.ht-post-list li {
	border-bottom: 1px solid var(--ht-line);
	padding: var(--ht-space-3) 0;
}
.ht-post-list a { color: var(--ht-primary); font-weight: var(--ht-weight-medium); font-size: var(--ht-text-lg); }
.ht-post-list a:hover { color: var(--ht-accent); }

/* =====================================================================
   20. CONTACT PAGE — enquiry form (template-contact.php)
   ===================================================================== */
.ht-contact-form-wrap { margin: var(--ht-space-7) 0; }
.ht-contact-form-note { color: var(--ht-text-soft); margin-bottom: var(--ht-space-4); }
.ht-contact-form {
	display: grid; gap: var(--ht-space-4);
	max-width: 640px;
	background: var(--ht-cream-200);
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius-md);
	padding: var(--ht-space-5);
}
.ht-contact-form label {
	display: grid; gap: var(--ht-space-1);
	font-weight: var(--ht-weight-medium); color: var(--ht-primary);
	font-size: var(--ht-text-sm);
}
.ht-contact-form input,
.ht-contact-form select,
.ht-contact-form textarea {
	font: inherit; color: var(--ht-primary);
	background: var(--ht-surface);
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius-sm);
	padding: 0.6rem 0.75rem;
	width: 100%;
}
.ht-contact-form input:focus,
.ht-contact-form select:focus,
.ht-contact-form textarea:focus {
	outline: none; border-color: var(--ht-accent);
	box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.12);
}
.ht-contact-form textarea { resize: vertical; }
.ht-contact-form button { justify-self: start; margin-top: var(--ht-space-1); cursor: pointer; }

/* =====================================================================
   21. SITE FOOTER (inc/site-footer.php) — hides Astra's default footer
   ===================================================================== */
/* Hide Astra's built-in footer; ours renders via astra_footer_before. */
#colophon,
.site-footer,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap { display: none !important; }

/* ...but never hide our own footer. */
.ht-footer { display: block !important; }

.ht-footer {
	background: var(--ht-forest);
	color: var(--ht-cream);
	padding-top: var(--ht-space-8);
	margin-top: var(--ht-space-8);
}
.ht-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ht-space-6);
	padding-bottom: var(--ht-space-7);
}
.ht-footer a { color: var(--ht-cream); text-decoration: none; }
.ht-footer a:hover { color: var(--ht-gold); }
.ht-footer h4 {
	color: var(--ht-gold-200); font-size: var(--ht-text-sm);
	text-transform: uppercase; letter-spacing: 0.06em;
	margin: 0 0 var(--ht-space-3);
}
.ht-footer__logo {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: var(--ht-text-2xl); font-weight: var(--ht-weight-bold);
	color: var(--ht-cream) !important; display: inline-block; margin-bottom: var(--ht-space-2);
}
.ht-footer__brand p { color: rgba(250, 247, 242, 0.82); font-size: var(--ht-text-sm); margin: 0 0 var(--ht-space-3); max-width: 34ch; }
.ht-footer__wa { display: flex; flex-wrap: wrap; gap: var(--ht-space-2) var(--ht-space-4); }
.ht-footer__wa a { font-weight: var(--ht-weight-semi); color: var(--ht-gold) !important; }
.ht-footer__social { display: flex; flex-wrap: wrap; gap: var(--ht-space-2) var(--ht-space-4); margin: var(--ht-space-3) 0 0; }
.ht-footer__social a { font-size: var(--ht-text-sm); }
.ht-footer__stores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ht-space-5); }
.ht-footer__stores p { color: rgba(250, 247, 242, 0.82); font-size: var(--ht-text-sm); line-height: 1.6; margin: 0 0 var(--ht-space-2); }
.ht-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ht-footer__col li { margin-bottom: var(--ht-space-2); font-size: var(--ht-text-sm); }
.ht-footer__bar { border-top: 1px solid rgba(250, 247, 242, 0.14); padding: var(--ht-space-4) 0; }
.ht-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ht-space-2); font-size: var(--ht-text-xs); color: rgba(250, 247, 242, 0.7); }

@media (min-width: 768px) {
	.ht-footer__inner { grid-template-columns: 1.6fr 1.8fr 1fr 1.2fr 1.4fr; gap: var(--ht-space-6); align-items: start; }
}

/* ─────────────────────────────────────────────────────────────
   §22 · Shop by Condition (template-shop-by-condition.php)
   ───────────────────────────────────────────────────────────── */
.ht-cond { margin-top: var(--ht-space-9); scroll-margin-top: 96px; }
.ht-cond__intro {
	max-width: 62ch;
	color: var(--ht-ink-700);
	font-size: var(--ht-text-lg);
	line-height: 1.7;
	margin: 0 0 var(--ht-space-6);
}
/* Product grid — self-contained so it renders correctly even outside shop context. */
.ht-cond ul.products {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ht-space-5);
	margin: var(--ht-space-5) 0 0;
	padding: 0;
}
.ht-cond ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
.ht-cond ul.products li.product img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 var(--ht-space-3);
}
@media (min-width: 768px) {
	.ht-cond ul.products { grid-template-columns: repeat(4, 1fr); }
}
.ht-cond__reading { margin-top: var(--ht-space-7); }
.ht-cond__reading h3,
.ht-cond__faq h3 {
	font-size: var(--ht-text-xl);
	color: var(--ht-forest-700);
	margin: 0 0 var(--ht-space-3);
}
.ht-cond__faq { margin-top: var(--ht-space-6); max-width: 72ch; }
.ht-faq-item {
	border-top: 1px solid var(--ht-border, rgba(20, 40, 30, 0.12));
	padding: var(--ht-space-3) 0;
}
.ht-faq-item summary {
	cursor: pointer;
	font-weight: var(--ht-weight-semi);
	color: var(--ht-primary);
	list-style: none;
}
.ht-faq-item summary::-webkit-details-marker { display: none; }
.ht-faq-item summary::after { content: " +"; color: var(--ht-accent); font-weight: var(--ht-weight-bold); }
.ht-faq-item[open] summary::after { content: " –"; }
.ht-faq-item p { margin: var(--ht-space-2) 0 0; color: var(--ht-ink-700); line-height: 1.7; }
.ht-cond__cta {
	margin-top: var(--ht-space-9);
	padding: var(--ht-space-6);
	background: var(--ht-cream, #faf7f2);
	border-radius: var(--ht-radius, 10px);
	text-align: center;
}
.ht-cond__cta p { margin: 0 0 var(--ht-space-3); color: var(--ht-ink-700); }

/* ─────────────────────────────────────────────────────────────
   §23 · Hide imported product-tag clutter on single product pages
   (tags wiped 2026-08-14; this future-proofs against re-imports)
   ───────────────────────────────────────────────────────────── */
.product_meta .tagged_as { display: none; }

/* ─────────────────────────────────────────────────────────────
   §24 · Tier-1 UX / CRO (hempytails-ux.php)
   ───────────────────────────────────────────────────────────── */
.ht-ux-ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -2px; }

/* PDP reassurance block (under add-to-cart) */
.ht-pdp-reassure {
	list-style: none;
	margin: var(--ht-space-4) 0 0;
	padding: var(--ht-space-3) 0 0;
	border-top: 1px solid var(--ht-border, rgba(20, 40, 30, 0.12));
	display: grid;
	gap: var(--ht-space-2);
	max-width: 34rem;
}
.ht-pdp-reassure li { display: flex; align-items: center; gap: var(--ht-space-2); font-size: var(--ht-text-sm); color: var(--ht-ink-700); }
.ht-pdp-reassure .ht-ux-ico { color: var(--ht-forest-700); }
.ht-pdp-reassure__rx { color: var(--ht-accent, #b45a2c); }
.ht-pdp-reassure__rx .ht-ux-ico { color: var(--ht-accent, #b45a2c); }

/* Trust-badge row (cart) */
.ht-trust-badges {
	list-style: none;
	margin: var(--ht-space-6) 0 0;
	padding: var(--ht-space-5) 0 0;
	border-top: 1px solid var(--ht-border, rgba(20, 40, 30, 0.12));
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ht-space-3) var(--ht-space-5);
}
.ht-trust-badges li { display: flex; align-items: center; gap: var(--ht-space-2); font-size: var(--ht-text-sm); font-weight: var(--ht-weight-medium); color: var(--ht-ink-700); }
.ht-trust-badges .ht-ux-ico { color: var(--ht-forest-700); }
@media (min-width: 768px) { .ht-trust-badges { grid-template-columns: repeat(3, 1fr); } }

/* Free-shipping progress bar (cart + mini-cart) */
.ht-freeship { margin: 0 0 var(--ht-space-4); }
.ht-freeship__msg { margin: 0 0 var(--ht-space-2); font-size: var(--ht-text-sm); color: var(--ht-ink-700); display: flex; align-items: center; gap: var(--ht-space-2); }
.ht-freeship__msg .ht-ux-ico { color: var(--ht-forest-700); }
.ht-freeship__track { height: 8px; border-radius: 999px; background: rgba(20, 40, 30, 0.1); overflow: hidden; }
.ht-freeship__track span { display: block; height: 100%; border-radius: 999px; background: var(--ht-gold, #c79a3a); transition: width .3s ease; }
.ht-freeship.is-unlocked .ht-freeship__track span { background: var(--ht-forest-700, #1f5138); }

/* Breadcrumbs */
.ht-breadcrumbs { margin: var(--ht-space-4) auto 0; font-size: var(--ht-text-sm); color: var(--ht-ink-500, #6b7280); }
.ht-breadcrumbs a { color: var(--ht-forest-700); }
.ht-breadcrumbs a:hover { color: var(--ht-accent); }

/* Wishlist heart on product cards */
.ht-loop-wishlist { margin-top: var(--ht-space-2); font-size: var(--ht-text-sm); }
.ht-loop-wishlist .yith-wcwl-add-to-wishlist { margin: 0; }

/* ─────────────────────────────────────────────────────────────
   §25 · Sticky add-to-cart (single product)
   ───────────────────────────────────────────────────────────── */
.ht-sticky-atc {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 900;
	background: #fff;
	border-top: 1px solid var(--ht-border, rgba(20, 40, 30, 0.12));
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	padding: var(--ht-space-2) 0;
}
.ht-sticky-atc[hidden] { display: none; }
.ht-sticky-atc__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ht-space-3); }
.ht-sticky-atc__info { display: flex; align-items: center; gap: var(--ht-space-3); min-width: 0; }
.ht-sticky-atc__info img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ht-sticky-atc__meta { display: flex; flex-direction: column; min-width: 0; }
.ht-sticky-atc__title { font-weight: var(--ht-weight-semi); font-size: var(--ht-text-sm); color: var(--ht-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-sticky-atc__price { font-size: var(--ht-text-sm); color: var(--ht-ink-700); }
.ht-sticky-atc__price .amount { font-weight: var(--ht-weight-bold); }
.ht-sticky-atc__btn {
	flex: 0 0 auto; white-space: nowrap; cursor: pointer; border: 0;
	background: var(--ht-accent, #c8622d); color: #fff;
	padding: 0.7rem 1.4rem; border-radius: 999px;
	font-weight: var(--ht-weight-semi); font-size: var(--ht-text-sm);
}
.ht-sticky-atc__btn:hover { filter: brightness(0.94); }
/* Hide the WhatsApp chat widget ONLY on single-product pages, so the flush sticky
   add-to-cart bar is clean there. The widget stays on the homepage / all other pages. */
.single-product .qlwapp { display: none !important; }
@media (max-width: 782px) {
	.ht-sticky-atc__title { max-width: 60vw; }
}
/* ─────────────────────────────────────────────────────────────
   §26 · Premium polish — brand consistency + card/PDP refinements
   (from live pixel review 2026-08-15; validated in-browser)
   ──────────────────────────────────────────────────────────── */

/* #1 · Kill Astra's default blue (#046bd2) — map its global colours to brand forest.
   !important so it beats Astra's dynamic inline CSS regardless of source order. */
:root {
	--ast-global-color-0: var(--ht-forest) !important;
	--ast-global-color-1: var(--ht-forest-700) !important;
}
.woocommerce-tabs .wc-tabs li.active a,
.wc-tabs li.active a { color: var(--ht-primary) !important; }
.woocommerce-tabs .wc-tabs li.active { border-bottom-color: var(--ht-primary) !important; }

/* #2 · Equalize product-card height so price + Add-to-cart align across every row. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .price { margin-top: auto; }

/* #3 · PDP reassurance list: full-width row below Add-to-cart (was squeezed beside the qty float). */
.single-product form.cart { overflow: hidden; }
.single-product form.cart .ht-pdp-reassure { clear: both; float: none; width: 100%; max-width: 34rem; margin-top: var(--ht-space-5); }

/* #4 · Wishlist heart → icon-only button in the card's top-right corner. */
.woocommerce ul.products li.product .ht-loop-wishlist { position: absolute; top: var(--ht-space-2); right: var(--ht-space-2); margin: 0; z-index: 3; }
.woocommerce ul.products li.product .ht-loop-wishlist a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; background: #fff; border-radius: var(--ht-radius-pill);
	box-shadow: var(--ht-shadow-md); font-size: 0; color: var(--ht-accent);
}
.woocommerce ul.products li.product .ht-loop-wishlist svg { width: 18px; height: 18px; }

/* #4b · Hide Astra's redundant on-card hover action (add-to-cart / select-options trigger).
   It sat top-right and collided with the corner wishlist heart; the full-width Add-to-cart
   below each card already covers the action, so this is pure redundancy removal. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-card-action-tooltip { display: none !important; }
/* ─────────────────────────────────────────────────────────────
   §27 · Shop filter rail (hempytails-shop-filters.php)
   Mobile: collapsible <details> at top. Desktop (≥1024): left rail + grid.
   ───────────────────────────────────────────────────────────── */
.ht-shop-main { min-width: 0; }
.ht-filters { margin: 0 0 var(--ht-space-5); }
.ht-filters__acc {
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius-md);
	background: var(--ht-surface);
	box-shadow: var(--ht-shadow-sm);
	overflow: hidden;
}
.ht-filters__toggle {
	display: flex; align-items: center; gap: var(--ht-space-2);
	list-style: none; cursor: pointer;
	padding: var(--ht-space-3) var(--ht-space-4);
	font-family: var(--ht-font-heading); font-weight: var(--ht-weight-semi);
	color: var(--ht-primary);
}
.ht-filters__toggle::-webkit-details-marker { display: none; }
.ht-filters__toggle::after { content: "+"; margin-left: auto; font-size: 1.2em; color: var(--ht-accent); }
.ht-filters__acc[open] .ht-filters__toggle::after { content: "–"; }
.ht-filters__ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ht-filters__body { padding: 0 var(--ht-space-4) var(--ht-space-3); }

.ht-filter-group { padding: var(--ht-space-4) 0; border-top: 1px solid var(--ht-line); }
.ht-filter-group:first-child { border-top: 0; }
.ht-filter-group__title {
	font-family: var(--ht-font-body); font-size: var(--ht-text-xs);
	text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--ht-text-soft); margin: 0 0 var(--ht-space-2);
}
.ht-filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ht-filter-list a {
	display: flex; justify-content: space-between; align-items: center; gap: var(--ht-space-2);
	padding: var(--ht-space-1) var(--ht-space-2);
	border-radius: var(--ht-radius-sm);
	color: var(--ht-ink-700); font-size: var(--ht-text-sm);
	transition: background var(--ht-transition), color var(--ht-transition);
}
.ht-filter-list a:hover { background: var(--ht-cream-200); color: var(--ht-primary); }
.ht-filter-list .is-active > a { background: var(--ht-forest); color: var(--ht-cream); font-weight: var(--ht-weight-medium); }
.ht-filter-list .is-active .ht-filter-count { color: var(--ht-cream); }
.ht-filter-count { color: var(--ht-text-soft); font-size: var(--ht-text-xs); font-variant-numeric: tabular-nums; }
.ht-filter-list--scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.ht-filter-active { padding: var(--ht-space-3) 0 0; }
.ht-filter-active__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ht-space-2); }
.ht-filter-active__head span { font-size: var(--ht-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ht-text-soft); }
.ht-filter-active__head a { font-size: var(--ht-text-xs); color: var(--ht-accent); font-weight: var(--ht-weight-semi); }
.ht-filter-active ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ht-space-2); }
.ht-filter-active li a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 10px; background: var(--ht-gold-200); color: var(--ht-forest-700);
	border-radius: var(--ht-radius-pill); font-size: var(--ht-text-xs); font-weight: var(--ht-weight-medium);
}
.ht-filter-active li a:hover { background: var(--ht-gold); }

/* Desktop: rail beside the grid; force the rail open + make the header non-collapsible. */
@media (min-width: 1024px) {
	.ht-shop-wrap { display: grid; grid-template-columns: 248px 1fr; gap: var(--ht-space-6); align-items: start; }
	.ht-filters__body { display: block !important; }
	.ht-filters__toggle { pointer-events: none; }
	.ht-filters__toggle::after { display: none; }
}
/* ─────────────────────────────────────────────────────────────
   §28 · Product-card hover image-swap (hempytails-card-hover.php)
   Alt (2nd) image is inside the loop product link; overlay + crossfade on hover.
   ───────────────────────────────────────────────────────────── */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a { position: relative; display: block; }
.woocommerce ul.products li.product img.ht-card-alt {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; background: #fff;
	opacity: 0; z-index: 2; pointer-events: none;
	transition: opacity 0.35s var(--ht-ease);
}
.woocommerce ul.products li.product:hover img.ht-card-alt { opacity: 1; }
/* ─────────────────────────────────────────────────────────────
   §29 · Brand logo image (footer white variant)
   Header logo is the Astra Site-Identity custom_logo (charcoal on cream).
   Footer reuses the same file, inverted to white for the forest band.
   ───────────────────────────────────────────────────────────── */
.ht-footer__logo-img {
	display: block;
	width: 180px;
	max-width: 60vw;
	height: auto;
	filter: brightness(0) invert(1);
}
/* ─────────────────────────────────────────────────────────────
   §30 · Typography — Baloo Tamma 2 headings (matches the logo)
   Supersedes the §1 --ht-font-heading token + §21 footer-logo font.
   Baloo is display-only; body/UI/small text stay Inter. Tuned for Baloo's
   tall metrics: tighter leading, slight negative tracking, weight 600–700.
   ───────────────────────────────────────────────────────────── */
:root { --ht-font-heading: "Baloo Tamma 2", "Trebuchet MS", system-ui, sans-serif; }
h1, h2, h3, h4, h5, .entry-title, .site-title {
	line-height: 1.08;
	letter-spacing: -0.01em;
}
h1, .entry-title { font-weight: 700; }
h2, h3, h4, h5 { font-weight: 600; }
.ht-footer__logo { font-family: var(--ht-font-heading); }
/* ─────────────────────────────────────────────────────────────
   §31 · Baloo refinements — hero weight + eyebrow labels (extra logo-echo)
   ───────────────────────────────────────────────────────────── */
/* Hero headline → Baloo ExtraBold to match the logo's chunky weight (hero only). */
.ht-hero__title { font-weight: 800; }
/* Eyebrow / kicker labels → Baloo, echoing the wordmark. Tighter tracking than Inter
   needs, weight 600 so small-caps stay crisp. */
.ht-eyebrow {
	font-family: var(--ht-font-heading);
	font-weight: var(--ht-weight-semi);
	letter-spacing: 0.06em;
}