/*
Theme Name: GeneratePress Child
Template: generatepress
Description: Child theme for Toke Haus — built on GeneratePress. Custom styles go here.
Version: 1.0.0
*/

/* =============================================================================
   TABLE OF CONTENTS
   1. Design Tokens (:root)
   2. Base Styles
   3. Skip Link
   (Sections 4+ added as homepage build progresses)
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   All color, spacing, radius, font, and motion values as CSS custom properties.
   Never hardcode hex values in component rules — always reference a token.
   ============================================================================= */

:root {

	/* ── Colors: Backgrounds ─────────────────────────────────────────────── */
	--bg:           #0F1A0F; /* Page background — deep forest                 */
	--surface:      #162B16; /* Cards, nav, panels                            */
	--surface-el:   #1E3A1E; /* Elevated surfaces, hover states               */
	--surface-high: #265226; /* High-emphasis surfaces — stats bar, callouts  */
	--footer-bg:    #0A150A; /* Footer — slightly darker than page bg         */

	/* ── Colors: Text ────────────────────────────────────────────────────── */
	--text:           #EAE4D6; /* Primary — warm parchment                    */
	--text-secondary: #B8D4B8; /* Secondary body + card eyebrow labels        */
	--muted:          #7A9E7A; /* Section eyebrows on --bg only, captions     */

	/* ── Colors: Accent ─────────────────────────────────────────────────── */
	--lime:       #A8F080; /* Primary CTA — Add to Cart, active nav, badges   */
	--amber:      #C4914A; /* Pricing, sale indicators, premium moments       */
	--deal-badge: #E8921A; /* Deal/sale badge fill — warm orange              */
	--low-stock:  #D4604A; /* Low stock indicator — only when genuinely low   */

	/* ── Colors: Borders ────────────────────────────────────────────────── */
	--border:       #2A4A2A; /* Card borders, dividers                        */
	--border-light: #3A5A3A; /* Hover borders, interactive card edges         */

	/* ── Colors: Cream (accent sections only) ───────────────────────────── */
	--cream:       #F2EDE1; /* Effect tiles section background                */
	--cream-text:  #1A2E1A; /* Text on cream sections                         */
	--cream-muted: #4A6A4A; /* Muted text on cream sections                   */

	/* ── Typography ─────────────────────────────────────────────────────── */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body:    'DM Sans', system-ui, sans-serif;
	--font-mono:    'Geist Mono', 'Courier New', monospace;

	/* ── Spacing (base unit: 8px) ────────────────────────────────────────── */
	--space-2xs: 4px;   /* Micro gaps — badge internals                       */
	--space-xs:  8px;   /* Tight internal padding                             */
	--space-sm:  16px;  /* Small gaps — between list items                    */
	--space-md:  24px;  /* Component internal padding                         */
	--space-lg:  32px;  /* Component gaps — between cards in a section        */
	--space-xl:  48px;  /* Between major components within a section          */
	--space-2xl: 64px;  /* Section padding (vertical)                         */
	--space-3xl: 96px;  /* Hero vertical padding                              */
	--space-4xl: 128px; /* Extra breathing room sections (homepage only)      */

	/* ── Border Radius ───────────────────────────────────────────────────── */
	--radius-sm:   4px;     /* Badges, pills, tags                            */
	--radius-md:   8px;     /* Buttons, inputs, small cards                   */
	--radius-lg:   12px;    /* Standard product cards, panels                 */
	--radius-xl:   16px;    /* Hero featured product card (.hh-hero-card) only */
	--radius-full: 9999px;  /* Cart bubble, round icons, toggles              */

	/* ── Motion ─────────────────────────────────────────────────────────── */
	--duration-micro:    80ms;
	--duration-standard: 200ms;
	--duration-medium:   280ms;
	--duration-long:     360ms;
	--ease-enter: ease-out;
	--ease-exit:  ease-in;
	--ease-move:  ease-in-out;
}


/* =============================================================================
   2. BASE STYLES
   ============================================================================= */

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

html {
	overflow-x: clip;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	/* No overflow-x:clip here — html above handles horizontal clip.
	   Body must remain overflow:visible so position:sticky on .site-header
	   works correctly. The wc-block-product-filters block sets a bogus
	   body{overflow:auto} inline style on init; that is cleared by a targeted
	   MutationObserver JS fix in functions.php (see "WC overflow init fix"). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--text);
}


/* =============================================================================
   3. SKIP LINK
   Hidden at rest; visible on focus for keyboard users.
   ============================================================================= */

.hh-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: var(--lime);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	padding: 12px 20px;
	text-decoration: none;
	z-index: 9999;
	border-radius: var(--radius-md);
}

.hh-skip-link:focus {
	position: fixed;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	overflow: visible;
}


/* =============================================================================
   4. ANNOUNCEMENT BAR
   ============================================================================= */

.hh-announcement-bar {
	background-color: var(--surface-high);
	color: var(--text);
	text-align: center;
	padding: 10px var(--space-sm);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	position: relative;
	z-index: 101;
}

.hh-announcement-bar p {
	margin: 0;
}

.hh-announcement-bar a {
	color: var(--lime);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hh-announcement-bar a:hover {
	color: var(--text);
	text-decoration: none;
}


/* =============================================================================
   5. SITE HEADER & NAVIGATION
   ============================================================================= */

/* ── Container widths ────────────────────────────────────────────────────── */

.inside-header.grid-container,
.inside-navigation.grid-container,
.inside-site-info.grid-container {
	max-width: 1280px;
}

/* ── Header base ─────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--bg);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--duration-standard) var(--ease-move),
		border-color var(--duration-standard) var(--ease-move),
		box-shadow var(--duration-standard) var(--ease-move);
}

/* Scroll state — toggled by JS (.is-scrolled class added via wp_footer script) */
.site-header.is-scrolled {
	background-color: var(--surface);
	border-bottom-color: var(--border);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.inside-header {
	display: flex;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.site-logo a {
	display: flex;
	align-items: center;
}

.site-logo .is-logo-image {
	height: 52px;
	width: auto;
	max-width: none;
	border-radius: 4px;
	/* Invert the logo so the white-background PNG renders as a bright white
	   silhouette on the dark header. brightness(0) collapses all colours to
	   black first, then invert(1) maps to white — produces a clean, high-
	   contrast mark. Replace this when a transparent-background logo is available. */
	filter: brightness(0) invert(1);
}

/* Site name fallback (displayed when no logo image is set) */
.main-title a,
.main-title a:hover {
	color: var(--text);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	text-decoration: none;
}

/* ── Nav container ───────────────────────────────────────────────────────── */

.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

/* ── Nav links ───────────────────────────────────────────────────────────── */

.main-navigation .main-nav ul li a {
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 8px 14px;
	transition: color var(--duration-micro) var(--ease-enter);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
	color: var(--text);
}

/* Active / current page */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--lime);
}

/* ── Dropdown sub-menus ──────────────────────────────────────────────────── */

.main-navigation ul ul {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
	padding: 6px 0;
	min-width: 200px;
}

.main-navigation ul ul li a {
	color: var(--text-secondary);
	font-size: 13px;
	padding: 8px 16px;
}

.main-navigation ul ul li a:hover {
	color: var(--text);
	background-color: var(--surface-el);
}

/* Dropdown arrow */
.main-navigation .dropdown-menu-toggle svg {
	fill: var(--muted);
	width: 10px;
	height: 10px;
	transition: fill var(--duration-micro) var(--ease-enter);
}

.main-navigation .main-nav ul li a:hover .dropdown-menu-toggle svg {
	fill: var(--text);
}

/* ── Nav focus states ────────────────────────────────────────────────────── */

.main-navigation .main-nav ul li a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── WooCommerce cart in header (styles ready for when cart is added) ─────── */

.header-cart-items,
.wc-menu-cart {
	color: var(--text-secondary);
	transition: color var(--duration-micro) var(--ease-enter);
}

.header-cart-items:hover,
.wc-menu-cart:hover {
	color: var(--text);
}

.header-cart-items .cart-count,
.wc-menu-cart .count {
	background-color: var(--lime);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	border-radius: var(--radius-full);
	padding: 1px 5px;
	min-width: 18px;
	text-align: center;
}


/* =============================================================================
   6. MOBILE NAVIGATION
   ============================================================================= */

/* ── Hamburger button ────────────────────────────────────────────────────── */

.menu-toggle {
	background-color: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 8px;
	border-radius: var(--radius-md);
	transition:
		color var(--duration-micro) var(--ease-enter),
		background-color var(--duration-micro) var(--ease-enter);
}

.menu-toggle:hover,
.menu-toggle:focus {
	color: var(--text);
	background-color: var(--surface-el);
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

.menu-toggle .gp-icon svg {
	fill: currentColor;
	width: 20px;
	height: 20px;
}

.menu-toggle .mobile-menu {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
}

/* When drawer is open: promote label + icon to full parchment contrast */
#site-navigation.toggled .menu-toggle {
	color: var(--text);
}

/* ── Mobile nav (toggled open state) ─────────────────────────────────────── */

/* GP adds .toggled to #site-navigation when the hamburger is tapped */
.main-navigation.toggled {
	background-color: var(--bg);
	border-top: 1px solid var(--border);
}

/* ≤1100px: hamburger + dropdown nav styles.
   GP's parent theme only switches to hamburger at ≤768px via inline CSS.
   The rules below replicate the critical GP mobile-nav rules at ≤1100px
   so the hamburger appears at tablet widths and the header search can be
   hidden without leaving a searchless viewport.
   1100px chosen because the logo + search + 6-item nav crowds the header
   at 1025–1100px; desktop layout is comfortable from 1101px+. */
@media (max-width: 1100px) {
	/* Show the hamburger toggle button */
	.main-navigation .menu-toggle {
		display: block;
	}

	/* Hide nav items when menu is closed */
	.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
		display: none;
	}

	/* Show the mobile-menu-control-wrapper flex container */
	.has-inline-mobile-toggle .mobile-menu-control-wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	/* Keep .inside-header as a flex row with wrap so nav drops to its own row */
	.has-inline-mobile-toggle .inside-header {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Nav takes full width on its own row below logo + hamburger */
	.has-inline-mobile-toggle #site-navigation {
		flex-basis: 100%;
	}
}

/* 769–1100px only: collapse #site-navigation when the hamburger is closed.
   Problem: our .main-navigation .menu-toggle { display:block } rule (above)
   makes the toggle button inside #site-navigation visible at these widths.
   That button gives the nav row ~77px of height even when everything else is
   hidden, producing an empty full-width row below logo + hamburger.
   Fix: display:none on #site-navigation:not(.toggled) removes the element from
   layout entirely. GP's JS still adds .toggled when the hamburger is clicked —
   the :not(.toggled) selector stops matching and the nav becomes visible.
   min-width:769px guard leaves GP's native ≤768px handling untouched. */
@media (min-width: 769px) and (max-width: 1100px) {
	.has-inline-mobile-toggle #site-navigation:not(.toggled) {
		display: none;
	}
}

@media (max-width: 1100px) {

	/* Nav link styles inside the dropdown */
	.main-navigation .main-nav ul li a {
		color: var(--text);
		font-size: 16px;
		font-weight: 500;
		padding: 14px 20px;
		border-bottom: 1px solid var(--border);
	}

	.main-navigation .main-nav ul li a:hover {
		color: var(--lime);
		background-color: var(--surface-el);
	}

	/* Sub-menu links — nested indent, no rounded box */
	.main-navigation ul ul {
		background-color: var(--surface-el);
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	.main-navigation ul ul li a {
		padding: 12px 32px;
		font-size: 14px;
	}

	.mobile-menu-control-wrapper .menu-toggle {
		background-color: transparent;
		border: none;
	}

	.mobile-menu-control-wrapper .menu-toggle:hover {
		background-color: var(--surface-el);
	}
}


/* =============================================================================
   7. HOMEPAGE LAYOUT OVERRIDES
   Removes GP's default white article box so the dark homepage renders correctly.
   All rules scoped to .home — no effect on inner pages.
   ============================================================================= */

/* Override GP's separate-containers white box (specificity: 0,3,0 vs GP's 0,2,0) */
.home.separate-containers .inside-article {
	background-color: transparent;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

@media (max-width: 768px) {
	.home.separate-containers .inside-article {
		padding: 0;
	}
}

/* Hide the auto-generated "Home" page title above content */
.home .entry-header {
	display: none;
}

/* Full-width layout — remove sidebar (specificity: 0,3,0 vs GP's 0,2,0) */
.home .site-content .content-area {
	width: 100%;
	float: none;
}

.home .widget-area {
	display: none;
}

/* Remove default article spacing around entry content */
.home .site-content {
	padding: 0;
}

.home .entry-content {
	margin: 0;
	padding: 0;
}

/* Allow GenerateBlocks full-width containers to break out of article padding */
.home .entry-content .alignfull,
.home .entry-content .alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}


/* =============================================================================
   8. GP NATIVE FOOTER (GLOBAL CHROME)
   ============================================================================= */

.site-footer {
	background-color: var(--footer-bg);
}

.site-info {
	background-color: transparent;
	color: var(--muted);
	border-top: 1px solid var(--border);
}

.inside-site-info {
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-info .copyright-bar,
.site-info .copyright-bar span {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 12px;
}

.site-info .copyright-bar a {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 12px;
}

.site-info .copyright-bar a:hover {
	color: var(--text-secondary);
}


/* =============================================================================
   9. HH-FOOTER (PAGE CONTENT FOOTER COMPONENT)
   Applies to the custom footer built inside page content using .hh-* classes.
   Currently styles the Kadence reference markup; carries over to the Phase C
   GenerateBlocks rebuild which uses the same class names.
   ============================================================================= */

.hh-footer {
	background-color: var(--footer-bg);
	color: var(--text-secondary);
	padding: var(--space-3xl) 0 0;
	font-family: var(--font-body);
}

.hh-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
}

.hh-footer-brand {
	display: flex;
	flex-direction: column;
}

.hh-footer-logo {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: var(--space-sm);
}

.hh-footer-tagline {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 var(--space-md);
	max-width: 280px;
}

.hh-footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.hh-footer-badge {
	background-color: var(--surface);
	color: var(--text-secondary);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

.hh-footer-col-title {
	color: var(--text);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
}

.hh-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hh-footer-col ul li {
	margin-bottom: 10px;
}

.hh-footer-col ul li a {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

.hh-footer-col p,
.hh-footer-col address {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
	font-style: normal;
	margin: 0;
}

.hh-footer-col ul li a:hover {
	color: var(--text);
}

.hh-footer-social {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.hh-footer-social a {
	color: var(--muted);
	font-size: 18px;
	transition: color var(--duration-micro) var(--ease-enter);
}

.hh-footer-social a:hover {
	color: var(--text-secondary);
}

.hh-footer-bottom {
	max-width: 1280px;
	margin: var(--space-2xl) auto 0;
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.hh-footer-copy {
	color: var(--muted);
	font-size: 12px;
	margin: 0;
}

.hh-footer-legal {
	display: flex;
	gap: var(--space-md);
}

.hh-footer-legal a {
	color: var(--muted);
	font-size: 12px;
	transition: color var(--duration-micro) var(--ease-enter);
}

.hh-footer-legal a:hover {
	color: var(--text-secondary);
}

@media (max-width: 768px) {
	.hh-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
	}

	.hh-footer-brand {
		grid-column: 1 / -1;
	}

	.hh-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}
}

@media (max-width: 480px) {
	.hh-footer-inner {
		grid-template-columns: 1fr;
	}

	.hh-footer-legal {
		flex-wrap: wrap;
		gap: var(--space-sm);
	}
}


/* =============================================================================
   10. HERO SECTION
   Two-column layout: text left (55%), featured product card right (45%).
   All block text is editable in the block editor — no hardcoded content here.
   ============================================================================= */

/* ── Outer hero shell (full-width, dark bg, vertical padding) ────────────── */

.hh-hero {
	background-color: var(--bg);
	padding: var(--space-xl) 0 var(--space-2xl);
}

/* ── Inner grid (max-width constraint + 2-col layout) ────────────────────── */

.hh-hero-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: var(--space-xl);
	align-items: start;
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.hh-hero-left {
	display: flex;
	flex-direction: column;
}

/* Eyebrow label */
.hh-hero-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
	line-height: 1.4;
}

/* H1 headline */
.hh-hero-headline {
	font-family: var(--font-display);
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 400;
	color: var(--text);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-md);
}

/* Subhead copy */
.hh-hero-subhead {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.6;
	max-width: 480px;
	margin: 0 0 var(--space-xl);
}

/* CTA button row */
.hh-cta-group {
	display: flex;
	flex-direction: row;
	gap: var(--space-sm);
	flex-wrap: wrap;
	align-items: center;
}

/* ── Button base ─────────────────────────────────────────────────────────── */

.hh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--radius-md);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		filter var(--duration-standard) var(--ease-enter),
		background-color var(--duration-standard) var(--ease-enter),
		border-color var(--duration-standard) var(--ease-enter),
		color var(--duration-standard) var(--ease-enter),
		transform var(--duration-micro) var(--ease-enter);
}

.hh-btn:active {
	transform: scale(0.97);
}

.hh-btn:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Primary — lime fill */
.hh-btn-primary {
	background-color: var(--lime);
	color: var(--bg);
	border: none;
}

.hh-btn-primary:hover {
	filter: brightness(1.08);
	color: var(--bg);
}

/* Secondary — transparent with border */
.hh-btn-secondary {
	background-color: transparent;
	color: var(--text);
	border: 1px solid var(--border-light);
}

.hh-btn-secondary:hover {
	background-color: var(--surface-el);
	border-color: var(--border-light);
	color: var(--text);
}

/* ── Right column ────────────────────────────────────────────────────────── */

.hh-hero-right {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

/* ── Hero featured product card (radius-xl — only card using this tier) ──── */

.hh-hero-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	width: 100%;
	max-width: 420px;
	transition:
		border-color var(--duration-standard) var(--ease-enter),
		box-shadow var(--duration-standard) var(--ease-enter),
		transform var(--duration-standard) var(--ease-enter);
}

.hh-hero-card:hover {
	border-color: var(--border-light);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
	transform: translateY(-3px);
}

/* ── Card image area ─────────────────────────────────────────────────────── */

.hh-card-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	background-color: var(--surface-el);
}

.hh-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Suppress alt text rendering on empty src placeholders */
.hh-card-image img[src=""] {
	color: transparent;
}

/* ── Grade badge (absolute, top-right of image) ──────────────────────────── */

.hh-grade-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: var(--lime);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--radius-full);
	line-height: 1.4;
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.hh-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

/* Strain type eyebrow — uses --text-secondary (not --muted) per DESIGN.md WCAG note */
.hh-strain-type {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.4;
}

/* Product name */
.hh-product-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	color: var(--text);
	line-height: 1.2;
	margin: 0;
}

/* THC/CBD data row */
.hh-thc-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

.hh-thc-label,
.hh-cbd-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--text-secondary);
}

.hh-thc-value {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	color: var(--lime);
}

.hh-cbd-value {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--text-secondary);
}

/* Price row */
.hh-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: var(--space-2xs);
}

.hh-price {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 600;
	color: var(--amber);
}

/* Only shown when product is on sale */
.hh-price-original {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 400;
	color: var(--muted);
	text-decoration: line-through;
}

/* Add to Cart — full-width in card context */
.hh-add-to-cart {
	width: 100%;
	height: 48px;
	margin-top: var(--space-xs);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.hh-hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	.hh-hero {
		padding: var(--space-lg) 0 var(--space-2xl);
	}

	.hh-hero-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		padding: 0 20px;
	}

	.hh-hero-headline {
		font-size: clamp(36px, 8vw, 44px);
		margin-bottom: var(--space-sm);
	}

	.hh-hero-subhead {
		font-size: 16px;
		max-width: 100%;
		margin-bottom: var(--space-lg);
	}

	.hh-cta-group {
		flex-direction: column;
		align-items: stretch;
	}

	.hh-btn {
		height: 48px;
		width: 100%;
		justify-content: center;
	}

	.hh-hero-right {
		justify-content: center;
	}

	.hh-hero-card {
		max-width: 100%;
	}
}


/* =============================================================================
   11. EFFECT TILES SECTION
   Cream accent section — one of two light sections on the homepage.
   Anti-slop rule: no icon circles, no colored bg on icons.
   Fraunces tile names + cream palette are the differentiation — not the icons.
   ============================================================================= */

/* ── Outer shell (full-width, cream bg) ──────────────────────────────────── */

.hh-effects {
	background-color: var(--cream);
	padding: 80px 0;
}

/* ── Section header ───────────────────────────────────────────────────────── */

.hh-effects-header {
	max-width: 1280px;
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-lg);
	text-align: center;
}

.hh-effects-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--cream-muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-xs);
}

.hh-effects-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 40px);
	font-weight: 400;
	color: var(--cream-text);
	line-height: 1.15;
	margin: 0;
}

/* ── 4-column tile grid ───────────────────────────────────────────────────── */

.hh-effects-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* ── Individual tile (full-tile tappable link) ────────────────────────────── */

.hh-effect-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	border: 1px solid rgba(26, 46, 26, 0.12);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	gap: var(--space-xs);
	transition: background-color 200ms ease-out,
	            border-color 200ms ease-out,
	            transform 200ms ease-out;
}

.hh-effect-tile:hover {
	background-color: rgba(26, 46, 26, 0.06);
	border-color: rgba(26, 46, 26, 0.26);
	transform: translateY(-3px);
}

.hh-effect-tile:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* ── Tile icon (inline SVG, no circle bg) ─────────────────────────────────── */

.hh-tile-icon {
	width: 40px;
	height: 40px;
	color: var(--cream-text);
	flex-shrink: 0;
	display: block;
	margin-bottom: var(--space-2xs);
}

/* ── Tile name (Fraunces — this is the differentiator) ───────────────────── */

.hh-tile-name {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	color: var(--cream-text);
	line-height: 1.2;
	display: block;
}

/* ── Tile descriptor ──────────────────────────────────────────────────────── */

.hh-tile-desc {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--cream-muted);
	line-height: 1.5;
	display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.hh-effects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hh-effects {
		padding: 56px 0;
	}

	.hh-effects-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 0 20px;
	}

	.hh-effects-header {
		padding: 0 20px;
		margin-bottom: var(--space-lg);
	}

	.hh-effect-tile {
		padding: var(--space-md) var(--space-sm);
		min-height: 120px;
	}

	.hh-tile-name {
		font-size: 15px;
	}
}


/* =============================================================================
   12. FEATURED DEALS SECTION
   Dark section, 3 product cards. Desktop: 3-col. Tablet: 2-col. Mobile: 1-col.
   Anti-slop rules: no colored card backgrounds, no gradient overlays, no star
   ratings, no "best seller" ribbons. Grade badge top-right, deal badge top-left.
   Product card border-radius uses --radius-lg (not --radius-xl — that's hero only).
   ============================================================================= */

/* ── Outer shell (full-width, dark bg) ───────────────────────────────────── */

.hh-featured {
	background-color: var(--bg);
	padding: 80px 0;
}

/* ── Section header — eyebrow/title/subtitle left, ghost CTA right ───────── */

.hh-featured-header {
	max-width: 1280px;
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-lg);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
}

.hh-featured-header-left {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hh-featured-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-xs);
	line-height: 1.4;
}

.hh-featured-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 40px);
	font-weight: 400;
	color: var(--text);
	line-height: 1.15;
	margin: 0 0 var(--space-xs);
}

.hh-featured-subtitle {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
	max-width: 480px;
}

/* ── Ghost button ("View All Deals →") ───────────────────────────────────── */

.hh-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 var(--space-lg);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background-color: transparent;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 150ms ease-out,
	            border-color 150ms ease-out,
	            color 150ms ease-out;
}

.hh-btn-ghost:hover {
	background-color: var(--surface);
	border-color: var(--border-light);
	color: var(--text);
}

.hh-btn-ghost:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* ── 3-column product grid ───────────────────────────────────────────────── */

.hh-featured-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── Product card ────────────────────────────────────────────────────────── */

.hh-product-card {
	display: flex;
	flex-direction: column;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--duration-standard) var(--ease-enter),
	            box-shadow var(--duration-standard) var(--ease-enter),
	            transform var(--duration-standard) var(--ease-enter);
}

.hh-product-card:hover {
	border-color: var(--border-light);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.35);
	transform: translateY(-3px);
}

/* Image area — override hero's radius-xl, use radius-lg (flat top corners,
   card handles the border-radius at the wrapper level) */
.hh-product-card .hh-card-image {
	border-radius: 0;
}

/* Card body fills remaining vertical space so price/CTA anchor to bottom */
.hh-product-card .hh-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Short product description (below name, above THC row) */
.hh-card-desc {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* Push price/CTA group to bottom of card body */
.hh-card-footer {
	margin-top: auto;
	padding-top: var(--space-sm);
}

/* ── Deal badge (top-left — orange, for promos/discounts) ────────────────── */

.hh-deal-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--amber);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--radius-full);
	line-height: 1.4;
}

/* ── Grade badge — AAA variant (amber instead of lime) ───────────────────── */

.hh-grade-badge.hh-grade-aaa {
	background-color: var(--amber);
	color: var(--bg);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.hh-featured-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* Hide subtitle on tablet — header gets crowded */
	.hh-featured-subtitle {
		display: none;
	}
}

@media (max-width: 768px) {
	.hh-featured {
		padding: 56px 0;
	}

	.hh-featured-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
		padding: 0 20px;
		margin-bottom: var(--space-lg);
	}

	.hh-featured-subtitle {
		display: block;
		font-size: 15px;
	}

	.hh-featured-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 20px;
	}

	.hh-btn-ghost {
		width: 100%;
	}
}


/* =============================================================================
   13. TRUST / WHY TOKE HAUS SECTION
   Two-column layout: left intro (sticky on desktop), right 2×2 trust cards.
   Background: --surface (slightly lighter than --bg) to break rhythm between
   the two flanking --bg sections (Featured Deals above, next section below).
   Anti-slop rules: no icons with colored circles, no checkmarks, no gradients.
   Typography is the differentiator — Fraunces card titles feel editorial, not SaaS.
   ============================================================================= */

/* ── Outer shell ─────────────────────────────────────────────────────────── */

.hh-trust {
	background-color: var(--surface);
	padding: 96px 0;
}

/* ── Two-column grid: 5:7 ratio (intro narrower, cards wider) ────────────── */

.hh-trust-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 80px;
	align-items: start;
}

/* ── Left column — intro copy ────────────────────────────────────────────── */

.hh-trust-intro {
	display: flex;
	flex-direction: column;
	/* Stick intro in place as the card grid scrolls past on tall viewports */
	position: sticky;
	top: 96px;
}

.hh-trust-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-xs);
	line-height: 1.4;
}

.hh-trust-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 44px);
	font-weight: 400;
	font-style: italic;
	color: var(--text);
	line-height: 1.1;
	margin: 0 0 var(--space-md);
}

.hh-trust-body {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.7;
	margin: 0;
	max-width: 380px;
}

/* ── Right column — 2×2 trust card grid ─────────────────────────────────── */

.hh-trust-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ── Individual trust card ───────────────────────────────────────────────── */

.hh-trust-card {
	background-color: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	transition: border-color var(--duration-standard) var(--ease-enter);
}

.hh-trust-card:hover {
	border-color: var(--border-light);
}

/* Short horizontal rule above each card title — subtle, not decorative noise */
.hh-trust-card::before {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background-color: var(--lime);
	margin-bottom: var(--space-xs);
	flex-shrink: 0;
}

/* Card headline (Fraunces — editorial, not SaaS) */
.hh-trust-card-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--text);
	line-height: 1.2;
	margin: 0;
}

/* Card descriptor */
.hh-trust-card-desc {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* At 1024px: tighten the gap before stacking */
@media (max-width: 1024px) {
	.hh-trust-inner {
		gap: var(--space-2xl);
	}

	/* Release sticky — not useful on shorter viewports */
	.hh-trust-intro {
		position: static;
	}
}

/* At 768px: stack columns, single-column cards */
@media (max-width: 768px) {
	.hh-trust {
		padding: 64px 0;
	}

	.hh-trust-inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		padding: 0 20px;
	}

	.hh-trust-intro {
		position: static;
	}

	.hh-trust-title {
		font-size: clamp(28px, 7vw, 36px);
	}

	.hh-trust-body {
		max-width: 100%;
		font-size: 16px;
	}

	.hh-trust-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/* =============================================================================
   14. NEWSLETTER / CTA SECTION
   Closing CTA before the footer. Background: --surface-high (brightest dark
   green in the palette) signals an action zone without leaving the brand palette.
   Two-column: left = headline copy + secondary link; right = styled card with
   primary CTA. No real form yet — card links to /shop/ as placeholder.
   Anti-slop rules: no emoji, no confetti, no fake social-proof counters.
   ============================================================================= */

/* ── Outer shell ─────────────────────────────────────────────────────────── */

.hh-nl {
	background-color: var(--surface-high);
	padding: 96px 0;
}

/* ── Two-column inner layout (6:5 — content slightly wider than card) ─────── */

.hh-nl-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 80px;
	align-items: center;
}

/* ── Left column — headline copy ─────────────────────────────────────────── */

.hh-nl-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hh-nl-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-xs);
	line-height: 1.4;
}

.hh-nl-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 44px);
	font-weight: 400;
	color: var(--text);
	line-height: 1.1;
	margin: 0 0 var(--space-md);
}

.hh-nl-body {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.7;
	margin: 0 0 var(--space-lg);
	max-width: 440px;
}

/* Secondary text link — no button chrome, just an understated link + arrow */
.hh-nl-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-secondary);
	text-decoration: none;
	padding: 12px 0; /* 12px top+bottom → 39px text + 24px padding = 49px tap target */
	transition: color var(--duration-standard) var(--ease-enter);
}

.hh-nl-link:hover {
	color: var(--text);
}

.hh-nl-link:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Right column — CTA card ─────────────────────────────────────────────── */

.hh-nl-card {
	background-color: var(--bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Pill badge at top of card — "TOKE HAUS UPDATES" */
.hh-nl-badge {
	display: inline-flex;
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	color: var(--bg);
	background-color: var(--lime);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	line-height: 1.4;
	margin: 0;
}

/* Card short copy */
.hh-nl-card-desc {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.65;
	margin: 0;
}

/* CTA button — inherits .hh-btn .hh-btn-primary; full-width in this context */
.hh-nl-cta {
	width: 100%;
	height: 52px;
	font-size: 15px;
}

/* Helper text below button */
.hh-nl-helper {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.hh-nl-inner {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}

	.hh-nl-body {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.hh-nl {
		padding: 64px 0;
	}

	.hh-nl-inner {
		padding: 0 20px;
		gap: var(--space-xl);
	}

	.hh-nl-title {
		font-size: clamp(28px, 7vw, 36px);
	}

	.hh-nl-body {
		font-size: 16px;
		margin-bottom: var(--space-md);
	}

	.hh-nl-card {
		padding: 28px 24px;
		border-radius: var(--radius-lg);
	}
}

/* ============================================================
   §15 — Global Footer
   ============================================================ */

/* ── Suppress default GeneratePress footer output ─────────── */
.site-info { display: none !important; }

/* ── Footer shell ─────────────────────────────────────────── */
.hh-footer {
	background-color: var(--bg);
	border-top: 1px solid var(--border);
	font-family: var(--font-body);
}

/* ── Main footer: 4-column grid ───────────────────────────── */
.hh-footer-main {
	padding: 72px 0 64px;
}

.hh-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: grid;
	grid-template-columns: 2.2fr 1.2fr 1.2fr 1.8fr;
	gap: 48px;
	align-items: start;
}

/* ── Brand column ─────────────────────────────────────────── */
.hh-footer-brand-name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--text);
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	line-height: 1;
}

.hh-footer-brand-desc {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin: 0;
	max-width: 280px;
}

/* ── Nav columns ──────────────────────────────────────────── */
.hh-footer-col-heading {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

.hh-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hh-footer-links a {
	font-size: 14px;
	color: var(--text);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hh-footer-links a:hover {
	color: var(--lime);
}

.hh-footer-links a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Contact / compliance column ──────────────────────────── */
.hh-footer-address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 20px;
}

.hh-footer-address p {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.hh-footer-address a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hh-footer-address a:hover {
	color: var(--lime);
}

.hh-footer-address a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 2px;
}

.hh-footer-compliance {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--border);
	opacity: 0.8;
}

/* ── Bottom bar ───────────────────────────────────────────── */
.hh-footer-bottom {
	border-top: 1px solid var(--border);
	padding: 20px 0;
}

.hh-footer-bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.hh-footer-copyright {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
	opacity: 0.7;
}

.hh-footer-legal {
	display: flex;
	align-items: center;
	gap: 24px;
}

.hh-footer-legal a {
	font-size: 13px;
	color: var(--text-secondary);
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.hh-footer-legal a:hover {
	color: var(--lime);
	opacity: 1;
}

.hh-footer-legal a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 2px;
	opacity: 1;
}

/* ── Responsive: tablet (≤1024px) → 2-column ─────────────── */
@media (max-width: 1024px) {
	.hh-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
	}

	.hh-footer-brand-desc {
		max-width: 100%;
	}
}

/* ── Responsive: mobile (≤768px) → 1-column ──────────────── */
@media (max-width: 768px) {
	.hh-footer-main {
		padding: 56px 0 48px;
	}

	.hh-footer-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.hh-footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.hh-footer-legal {
		gap: 16px;
	}
}


/* =============================================================================
   16. WOOCOMMERCE ARCHIVE / CATEGORY
   Applies to: /shop/, /product-category/*, /product-tag/*
   Body classes used for scoping: .post-type-archive-product, .tax-product_cat,
   .tax-product_tag.
   All tokens reference Section 1. No hexes.
   ============================================================================= */

/* ── Override GP separate-containers white bg on WooCommerce archive pages ──
   Limit Phase 2A styling to true archive body classes so cart, checkout,
   account, single-product, and shortcode loops keep their own behavior. ── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .inside-article {
	background-color: transparent !important;
}

/* Remove GP's internal padding from the woocommerce-archive-wrapper */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-archive-wrapper {
	padding: 0;
	margin: 0;
}

/* ── GP sidebar widget backgrounds ──────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .widget {
	background-color: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: 20px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .widget:last-child {
	margin-bottom: 0;
}

/* GP inner-padding class override on WC pages */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .widget.inner-padding {
	padding: 20px !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 28px;
	display: block;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb a:hover {
	color: var(--lime);
}

/* ── Archive header ──────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-products-header {
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title.page-title {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 400;
	color: var(--text);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

/* Category description — preserve admin-authored SEO/merchandising copy */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .term-description {
	font-size: 14px;
	line-height: 1.75;
	color: var(--text-secondary);
	max-width: 72ch;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .term-description p {
	margin: 0 0 12px;
	color: var(--text-secondary);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .term-description p:last-child {
	margin-bottom: 0;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .term-description strong {
	color: var(--text);
}

/* Shop archive has no term-description — no truncation needed */
body:is(.tax-product_cat, .tax-product_tag) .woocommerce-products-header .term-description {
	display: none;
}

body.post-type-archive-product .term-description {
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ── Toolbar: result count + ordering row ────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-result-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 20px;
	float: left;
	line-height: 40px; /* vertically align with the select */
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-ordering {
	float: right;
	margin: 0 0 20px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-ordering select.orderby {
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 13px;
	padding: 9px 36px 9px 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A9E7A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: border-color var(--duration-micro) var(--ease-enter);
	min-width: 180px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-ordering select.orderby:hover {
	border-color: var(--border-light);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--lime);
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Clearfix after toolbar */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) .woocommerce-result-count + .woocommerce-ordering::after {
	content: '';
	display: table;
	clear: both;
}

/* ── Product grid ────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px;
	list-style: none !important;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	clear: both;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products::before,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products::after {
	content: none !important;
	display: none !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products[class*="columns-"] {
	grid-template-columns: repeat(3, 1fr) !important;
}

/* ── WC float/width overrides — WC sets float:left + width:30.75% at higher
   specificity. We must override both so the CSS grid can size items correctly. ── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product {
	float: none !important;
	width: auto !important;
}

/* ── Product card ────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product {
	background-color: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	transition:
		border-color var(--duration-standard) var(--ease-enter),
		transform var(--duration-standard) var(--ease-enter),
		box-shadow var(--duration-standard) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product:hover {
	border-color: var(--border-light);
	transform: translateY(-3px);
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
}

/* ── Product link wrapper (wraps image + title + price) ──────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* ── Product image ───────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results) ul.products li.product .woocommerce-LoopProduct-link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background-color: var(--surface-el); /* unify transparent-bg product thumbnails */
	transition: transform var(--duration-medium) var(--ease-move);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product:hover .woocommerce-LoopProduct-link img {
	transform: scale(1.05);
}

/* Image overflow clip — image is inside the link which is inside li (overflow:hidden) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-LoopProduct-link::before {
	content: '';
	display: block;
	overflow: hidden;
}

/* ── Sale badge ──────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background-color: var(--deal-badge);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	line-height: 1.4;
	margin: 0;
	min-height: 0;
	min-width: 0;
}

/* Out-of-stock class on li */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product.outofstock::after {
	content: 'Out of Stock';
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background-color: rgba(15, 26, 15, 0.75);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ── Product title ───────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--text);
	line-height: 1.35;
	padding: 14px 16px 4px;
	margin: 0;
	/* grow to push price down when title is short */
	flex: 1;
}

/* ── Star rating ─────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .star-rating {
	display: block;
	padding: 4px 16px 0;
	margin: 0;
	overflow: hidden;
	font-size: 12px;
	color: var(--amber);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .star-rating::before {
	color: var(--border);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .star-rating span::before {
	color: var(--amber);
}

/* ── Price ───────────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .price {
	display: block;
	padding: 6px 16px 0;
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--amber);
	line-height: 1.3;
	margin: 0;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .price del {
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
	margin-right: 4px;
	text-decoration: line-through;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .price ins {
	text-decoration: none;
	color: var(--amber);
}

/* ── Add to Cart / Read More / Select Options button ─────────────────────── */
/* Note: li.product is display:flex column. The button is a direct flex child.
   align-items defaults to stretch so we don't need explicit width/display.
   Use box-sizing + margin to create the visual 16px inset on each side. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .button,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product a.button {
	box-sizing: border-box !important;
	margin: 12px 16px 16px !important;
	padding: 11px 16px !important;
	background-color: transparent !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
	transition:
		background-color var(--duration-micro) var(--ease-enter),
		border-color var(--duration-micro) var(--ease-enter),
		color var(--duration-micro) var(--ease-enter) !important;
	box-shadow: none !important;
	letter-spacing: 0.01em;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .button:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product a.button:hover {
	background-color: var(--lime) !important;
	border-color: var(--lime) !important;
	color: var(--bg) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-LoopProduct-link:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .button:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product a.button:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Keep WooCommerce's post-add-to-cart feedback visible on archives */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .added_to_cart {
	box-sizing: border-box !important;
	margin: -4px 16px 16px !important;
	padding: 0 !important;
	color: var(--lime) !important;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .added_to_cart:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .added_to_cart:focus-visible {
	color: var(--text) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .added_to_cart:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-info,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-message {
	background-color: var(--surface) !important;
	border-top-color: var(--lime) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius-md) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-error {
	background-color: rgba(212, 96, 74, 0.12) !important;
	border-top-color: var(--low-stock) !important;
	color: var(--text) !important;
	border-radius: var(--radius-md) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-info::before,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-message::before {
	color: var(--lime) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-error::before {
	color: var(--low-stock) !important;
}

/* ── No products found ───────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-no-products-found p {
	color: var(--text-secondary);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none !important;
	margin: 0;
	padding: 0;
	min-height: 0;
	height: auto;
	border: 0 !important;
	background: transparent !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	color: var(--text-secondary);
	font-family: var(--font-mono);
	font-size: 13px;
	text-decoration: none;
	transition:
		background-color var(--duration-micro) var(--ease-enter),
		border-color var(--duration-micro) var(--ease-enter),
		color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers:hover {
	background-color: var(--surface-el);
	border-color: var(--border-light);
	color: var(--text);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers.current {
	background-color: var(--lime);
	border-color: var(--lime);
	color: var(--bg);
	font-weight: 700;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
	cursor: default;
}

/* ── Sidebar: Product Categories block ───────────────────────────────────── */

/* Sidebar widget headings */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .inside-right-sidebar h2.wp-block-heading,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .inside-right-sidebar h3.wp-block-heading {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

/* Category list */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list .wc-block-product-categories-list-item {
	border-bottom: 1px solid var(--border);
	margin: 0;
	padding: 0;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list .wc-block-product-categories-list-item:last-child {
	border-bottom: none;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .wc-block-product-categories-list-item:has(a[href*="/product-category/bliss/"]),
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .wc-block-product-categories-list-item:has(a[href*="/product-category/cosmic-concentrates/"]),
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .wc-block-product-categories-list-item:has(a[href*="/product-category/out-of-stock/"]),
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .wc-block-product-categories-list-item:has(a[href*="/product-category/shrooms/"]),
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .sidebar .wc-block-product-categories-list-item:has(a[href*="/product-category/the-green-samurai/"]) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	max-height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	visibility: hidden !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > a,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > div > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	font-size: 13px;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	transition: color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > a:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > div > a:hover {
	color: var(--lime) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > a:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item > div > a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
	color: var(--lime) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item__name {
	color: inherit;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list-item-count {
	font-family: var(--font-mono);
	font-size: 10px;
	background-color: var(--surface-el);
	color: var(--muted);
	border-radius: var(--radius-full);
	padding: 2px 8px;
	min-width: 22px;
	text-align: center;
	flex-shrink: 0;
}

/* Sub-categories (depth-1) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list--depth-1 {
	padding-left: 12px !important;
	border-top: 1px solid var(--border);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item > a,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item > div > a {
	font-size: 12px;
	color: var(--muted) !important;
	padding: 7px 0;
}

/* ── Sidebar: Product Filters block ──────────────────────────────────────── */

/* Override WC inline CSS variables for the filter block */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-woocommerce-product-filters {
	--wc-product-filters-text-color: var(--text) !important;
	--wc-product-filters-background-color: var(--surface) !important;
	width: 100%;
}

/* Filter overlay open button */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__open-overlay {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md);
	color: var(--text) !important;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__open-overlay:hover {
	border-color: var(--border-light) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__open-overlay:focus-visible {
	border-color: var(--lime) !important;
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Filter overlay (modal) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__overlay {
	background-color: var(--surface) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__overlay-wrapper {
	background-color: var(--surface) !important;
	border: 1px solid var(--border);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__overlay-header {
	border-bottom: 1px solid var(--border);
	padding: 16px 20px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__close-overlay {
	color: var(--text-secondary) !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filters__close-overlay:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Inline filter content (when not using overlay) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price {
	margin-bottom: 20px;
}

/* Price slider */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__content {
	padding: 8px 0;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__range {
	margin-bottom: 12px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .range-bar {
	background-color: var(--border) !important;
	height: 3px !important;
	border-radius: 2px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .range-bar::before {
	background-color: var(--lime) !important;
	border-radius: 2px;
}

/* Range input thumbs */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__range input[type="range"] {
	accent-color: var(--lime);
}

/* Price text inputs */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__left.text input,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__right.text input,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__left input[type="text"],
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__right input[type="text"] {
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text) !important;
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 5px 8px;
	width: 72px;
}

/* Rating / status filter checkboxes */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-checkbox-list__label {
	color: var(--text-secondary);
	font-size: 13px;
	cursor: pointer;
	gap: 8px;
	transition: color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-checkbox-list__label:hover {
	color: var(--text);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-checkbox-list__input {
	accent-color: var(--lime);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-checkbox-list__text {
	color: inherit;
}

/* Active filters chips */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-removable-chips__items {
	gap: 6px;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-removable-chips__chip {
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border-light) !important;
	color: var(--text) !important;
	border-radius: var(--radius-full);
	font-size: 12px;
	padding: 4px 10px;
}

/* Clear filters button */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var(--border) !important;
	color: var(--muted) !important;
	font-size: 12px;
	padding: 8px 14px;
	border-radius: var(--radius-md);
	transition:
		border-color var(--duration-micro) var(--ease-enter),
		color var(--duration-micro) var(--ease-enter);
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover {
	border-color: var(--border-light) !important;
	color: var(--text) !important;
	background-color: transparent !important;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__left.text input:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__right.text input:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__left input[type="text"]:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-price-slider__right input[type="text"]:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-checkbox-list__input:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wc-block-product-filter-removable-chips__chip:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products,
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .inside-article {
		padding: 20px 20px 48px !important;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title.page-title {
		font-size: 28px;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products,
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-loop-product__title {
		font-size: 17px;
		padding: 12px 12px 4px;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .price {
		font-size: 15px;
		padding: 4px 12px 0;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product .button,
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products li.product a.button {
		margin: 10px 12px 12px !important;
		padding: 10px 12px !important;
		font-size: 12px !important;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-result-count {
		display: none; /* hide count on mobile — too cluttered */
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-ordering {
		float: none;
		display: block;
		margin-bottom: 16px;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-ordering select.orderby {
		width: 100%;
	}
}


/* =============================================================================
   17. INTERIOR / STATIC PAGES
   Applies to: FAQ, Terms & Conditions, Privacy Policy, About Us.
   Scoped via body.th-interior-page — added only to the pages listed in
   th_is_interior_page() in functions.php. Homepage, search, blog, archives,
   and all WooCommerce pages are never given this class.
   ============================================================================= */

/* ── Content area: dark surface card ─────────────────────────────────────── */
body.th-interior-page .inside-article {
	background-color: var(--surface) !important;
	border-radius: var(--radius-lg);
	padding: 48px 56px 64px;
}

/* ── Page title ───────────────────────────────────────────────────────────── */
body.th-interior-page .entry-header .entry-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 400;
	font-style: italic;
	color: var(--text);
	margin: 0 0 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border);
	line-height: 1.15;
}

/* ── Entry header: align with reader column ───────────────────────────────── */
body.th-interior-page .entry-header {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Entry content base ───────────────────────────────────────────────────── */
body.th-interior-page .entry-content {
	max-width: 760px;
	margin: 0 auto;
	color: var(--text-secondary);
}

body.th-interior-page .entry-content p {
	color: var(--text-secondary);
	line-height: 1.85;
	margin-bottom: 1.4em;
	font-size: 15px;
}

/* ── Legal section headings (standalone <strong> used as section titles) ──── */
body.th-interior-page .entry-content p:has(> strong:only-child) {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}
body.th-interior-page .entry-content p:has(> strong:only-child) strong {
	font-size: 16px;
	letter-spacing: 0.01em;
	display: block;
	color: var(--amber);
}

body.th-interior-page .entry-content h2,
body.th-interior-page .entry-content .wp-block-heading {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 400;
	color: var(--text);
	margin-top: 2.5em;
	margin-bottom: 0.7em;
	padding-top: 1.5em;
	border-top: 1px solid var(--border-light);
	line-height: 1.25;
}

body.th-interior-page .entry-content h3 {
	font-family: var(--font-display);
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 400;
	color: var(--text);
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	line-height: 1.3;
}

body.th-interior-page .entry-content strong {
	color: var(--text);
	font-weight: 600;
}

body.th-interior-page .entry-content a {
	color: var(--lime);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-micro) var(--ease-enter);
}

body.th-interior-page .entry-content a:hover {
	color: var(--text);
}

body.th-interior-page .entry-content ul,
body.th-interior-page .entry-content ol {
	color: var(--text-secondary);
	padding-left: 1.6em;
	margin-bottom: 1.3em;
}

body.th-interior-page .entry-content li {
	margin-bottom: 0.5em;
	line-height: 1.75;
	font-size: 15px;
}

/* ── Breadcrumb / post-navigation ────────────────────────────────────────── */
body.th-interior-page .post-navigation,
body.th-interior-page .paging-navigation {
	display: none;
}

/* ── Track Order form ─────────────────────────────────────────────────────── */
body.th-interior-page form.track_order {
	display: grid;
	gap: 18px;
	max-width: 560px;
	margin: 28px auto 0;
	padding: 28px;
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

body.th-interior-page form.track_order p {
	margin: 0;
}

body.th-interior-page form.track_order label {
	display: block;
	margin-bottom: 8px;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.th-interior-page form.track_order input.input-text {
	width: 100%;
	min-height: 44px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text);
	padding: 11px 14px;
	box-sizing: border-box;
}

body.th-interior-page form.track_order input.input-text:focus {
	border-color: var(--lime);
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.18);
}

body.th-interior-page form.track_order button.button {
	width: fit-content;
	min-height: 44px;
	background-color: var(--lime) !important;
	border: 1px solid var(--lime) !important;
	border-radius: var(--radius-md);
	color: var(--bg) !important;
	font-weight: 700;
	padding: 12px 22px;
}

body.th-interior-page form.track_order button.button:hover,
body.th-interior-page form.track_order button.button:focus-visible {
	background-color: var(--text) !important;
	border-color: var(--text) !important;
	color: var(--bg) !important;
}

body.th-interior-page form.track_order button.button:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
}

.th-reviews-empty {
	max-width: 620px;
	margin: 24px auto 0;
	padding: 28px;
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.th-reviews-empty p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.7;
}

/* ── FAQ accordion ────────────────────────────────────────────────────────── */
.th-faq-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 720px;
	margin-top: 8px;
}

.th-faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--duration-micro) var(--ease-enter);
}

.th-faq-item.is-open {
	border-color: var(--border-light);
}

.th-faq-q {
	width: 100%;
	background: transparent;
	border: none;
	padding: 18px 20px;
	text-align: left;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: background-color var(--duration-micro) var(--ease-enter);
	line-height: 1.4;
}

.th-faq-q:hover {
	background-color: var(--surface-el);
}

.th-faq-q:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: -2px;
	border-radius: var(--radius-md);
}

.th-faq-q:active {
	background-color: var(--surface-high);
}

.th-faq-item.is-open .th-faq-q {
	background-color: var(--surface-el);
	border-left: 3px solid var(--lime);
	padding-left: 17px;
}

.th-faq-icon {
	flex-shrink: 0;
	color: var(--muted);
	transition: transform 0.22s ease;
}

.th-faq-item.is-open .th-faq-icon {
	transform: rotate(180deg);
}

.th-faq-a {
	background-color: var(--surface-el);
}

.th-faq-a-inner {
	padding: 16px 20px 24px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.8;
}

/* ── About page hero stats ────────────────────────────────────────────────── */
.th-about-hero {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--border);
}

.th-about-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lime);
	margin-bottom: 28px;
}

.th-about-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.th-about-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.th-about-stat-num {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 400;
	color: var(--text);
	line-height: 1;
}

.th-about-stat-label {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ── Section headings used in About page ─────────────────────────────────── */
.th-about-section-heading {
	font-family: var(--font-display) !important;
	font-size: clamp(22px, 2.8vw, 30px) !important;
	font-weight: 400 !important;
	color: var(--text) !important;
	margin-top: 0 !important;
	margin-bottom: 16px !important;
	padding-top: 0 !important;
	border-top: none !important;
}

/* ── Featured image on interior pages ────────────────────────────────────── */
body.th-interior-page .post-image,
body.th-interior-page .featured-image {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
	margin-bottom: 0;
}

body.th-interior-page .post-image img,
body.th-interior-page .featured-image img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	body.th-interior-page .inside-article {
		padding: 36px 36px 48px;
	}

	.th-about-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	body.th-interior-page .inside-article {
		padding: 24px 28px 40px;
	}

	body.th-interior-page .entry-header .entry-title {
		font-size: 26px;
		margin-bottom: 24px;
		padding-bottom: 20px;
	}

	.th-about-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.th-faq-q {
		font-size: 14px;
		padding: 16px 18px;
	}
}

@media (max-width: 480px) {
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products,
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) ul.products[class*="columns-"] {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul.page-numbers > li > .page-numbers {
		min-width: 32px;
		height: 34px;
		padding: 0 7px;
		font-size: 12px;
	}
}


/* =============================================================================
   18. WOOCOMMERCE CART / CHECKOUT / ACCOUNT (Trust Flow)
   Applies to: /cart/, /checkout/, /my-account/ and all account sub-pages.
   Scoped via body.woocommerce-cart, .woocommerce-checkout, .woocommerce-account.
   Sidebar removed via generate_sidebar_layout filter in functions.php.
   Payment/shipping/order settings are completely untouched — visual only.
   ============================================================================= */

/* ── Remove GP article white background on trust-flow pages ──────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .inside-article {
	background-color: transparent !important;
	padding: 0 !important;
}

/* ── Headings ────────────────────────────────────────────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) h1,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) h2,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) h3 {
	font-family: var(--font-display);
	color: var(--text);
	font-weight: 400;
}

/* ── Shared form inputs ───────────────────────────────────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.input-text,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="text"],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="email"],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="tel"],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="password"],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce select,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea {
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--radius-md) !important;
	padding: 11px 14px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	width: 100% !important;
	box-sizing: border-box;
	transition: border-color var(--duration-micro) var(--ease-enter),
	            box-shadow var(--duration-micro) var(--ease-enter);
	appearance: none;
	-webkit-appearance: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.input-text:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="text"]:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="email"]:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="tel"]:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="password"]:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce select:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea:focus {
	border-color: var(--lime) !important;
	outline: none !important;
	/* 0.22 opacity gives a clearly visible lime halo without overpowering
	   the dark card background. Previous 0.12 was too subtle. */
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.22) !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input::placeholder,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Select chevron */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%237A9E7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px !important;
}

/* Checkout Select2 country/state fields */
body.woocommerce-checkout select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single {
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text) !important;
	min-height: 45px;
	box-sizing: border-box;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text) !important;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 43px !important;
	padding-left: 14px;
	padding-right: 36px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--muted) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 43px !important;
	right: 8px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--text-secondary) transparent transparent transparent !important;
}

body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--lime) !important;
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.22) !important;
}

body.woocommerce-checkout .select2-dropdown {
	background-color: var(--surface) !important;
	border: 1px solid var(--border-light) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text) !important;
	overflow: hidden;
}

body.woocommerce-checkout .select2-search--dropdown {
	background-color: var(--surface) !important;
	padding: 8px;
}

body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text) !important;
	font-family: var(--font-body);
	font-size: 14px;
	padding: 9px 12px !important;
	outline: none !important;
}

body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--lime) !important;
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.18) !important;
}

body.woocommerce-checkout .select2-results {
	background-color: var(--surface) !important;
}

body.woocommerce-checkout .select2-results__option {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-body);
	font-size: 14px;
	padding: 9px 12px !important;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--surface-high) !important;
	color: var(--text) !important;
}

body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--surface-el) !important;
	color: var(--lime) !important;
}

/* ── Shared labels ───────────────────────────────────────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce label {
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
}

/* Required asterisk */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) abbr.required,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) span.required {
	color: var(--amber);
	text-decoration: none;
	border: none;
}

/* Password input wrapper */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce span.password-input {
	display: flex;
	position: relative;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce span.password-input input {
	flex: 1;
	border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .show-password-input {
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-left: none;
	/* --text-secondary (#B8D4B8) gives adequate contrast against --surface-el
	   (#1E3A1E); --muted (#7A9E7A) was too low contrast to read comfortably. */
	color: var(--text-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 0 12px;
	cursor: pointer;
	transition: color var(--duration-micro) var(--ease-enter);
	font-size: 16px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .show-password-input:hover {
	color: var(--text);
}

/* ── Shared buttons (secondary/default) ──────────────────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button {
	background-color: var(--surface-el) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border-light) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border-radius: var(--radius-md) !important;
	padding: 11px 20px !important;
	cursor: pointer;
	transition: background-color var(--duration-micro) var(--ease-enter),
	            color var(--duration-micro) var(--ease-enter) !important;
	text-decoration: none;
	letter-spacing: 0.02em;
	display: inline-block;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:hover {
	background-color: var(--surface-high) !important;
	color: var(--text) !important;
}

/* Primary CTA buttons (checkout, place order, alt) */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button.alt {
	background-color: var(--lime) !important;
	color: #0F1A0F !important;
	border-color: transparent !important;
	font-weight: 700 !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:hover {
	background-color: #b5f48a !important;
}

/* ── Shared notices ──────────────────────────────────────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-info,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-message {
	background-color: var(--surface);
	border-top-color: var(--lime) !important;
	color: var(--text-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-info::before,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-message::before {
	color: var(--lime);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-error {
	background-color: rgba(212, 96, 74, 0.12) !important;
	border-left: 3px solid var(--low-stock) !important;
	border-top-color: var(--low-stock) !important;
	color: var(--text) !important;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-error::before {
	color: var(--low-stock);
}

body.woocommerce-checkout .woocommerce .woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="text"],
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="email"],
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="tel"],
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="password"],
body.woocommerce-checkout .woocommerce .woocommerce-invalid select,
body.woocommerce-checkout .woocommerce .woocommerce-invalid textarea,
body.woocommerce-checkout .woocommerce .woocommerce-invalid .select2-container--default .select2-selection--single {
	border-color: var(--low-stock) !important;
	box-shadow: 0 0 0 1px rgba(212, 96, 74, 0.45) !important;
}

body.woocommerce-checkout .woocommerce .woocommerce-invalid input.input-text:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="text"]:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="email"]:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="tel"]:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid input[type="password"]:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid select:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid textarea:focus,
body.woocommerce-checkout .woocommerce .woocommerce-invalid .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .woocommerce .woocommerce-invalid .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--low-stock) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(212, 96, 74, 0.24) !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-error a,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-info a,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-message a {
	color: var(--lime);
}


/* ══════════════════════════════════════════════════════════════════════════
   § CART PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Empty cart state ────────────────────────────────────────────────────── */
body.woocommerce-cart .cart-empty {
	background-color: var(--surface);
	border-top-color: var(--muted) !important;
	color: var(--text-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body.woocommerce-cart .return-to-shop {
	margin-top: 12px;
}

body.woocommerce-cart .return-to-shop .button {
	background-color: var(--surface-el) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border-light) !important;
	font-weight: 600 !important;
	border-radius: var(--radius-md) !important;
	padding: 11px 20px !important;
	text-decoration: none;
	transition: background-color var(--duration-micro) var(--ease-enter) !important;
}

body.woocommerce-cart .return-to-shop .button:hover {
	background-color: var(--surface-high) !important;
	color: var(--text) !important;
}

/* ── Cart table ──────────────────────────────────────────────────────────── */
body.woocommerce-cart table.shop_table {
	background-color: var(--surface);
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg);
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100%;
	overflow: hidden;
}

body.woocommerce-cart table.shop_table th {
	background-color: var(--surface-el);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border) !important;
	font-weight: 400;
	text-align: left;
}

body.woocommerce-cart table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--border) !important;
	color: var(--text-secondary);
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table tbody tr:last-child td {
	border-bottom: none !important;
}

/* Product name */
body.woocommerce-cart .cart_item .product-name a {
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

body.woocommerce-cart .cart_item .product-name a:hover {
	color: var(--lime);
}

body.woocommerce-cart .cart_item .product-name .variation {
	color: var(--muted);
	font-size: 12px;
	margin-top: 4px;
}

/* Product thumbnail */
body.woocommerce-cart .cart_item .product-thumbnail img {
	border-radius: var(--radius-md);
	width: 64px;
	height: 64px;
	object-fit: cover;
}

/* Prices */
body.woocommerce-cart td.product-price .woocommerce-Price-amount,
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
	color: var(--amber);
	font-weight: 600;
}

/* ── Remove button ───────────────────────────────────────────────────────── */
body.woocommerce-cart .product-remove a.remove {
	color: var(--muted) !important;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	transition: color var(--duration-micro) var(--ease-enter),
	            background-color var(--duration-micro) var(--ease-enter);
	text-decoration: none;
}

body.woocommerce-cart .product-remove a.remove:hover {
	color: var(--low-stock) !important;
	background-color: rgba(212, 96, 74, 0.1);
}

/* ── Quantity input ──────────────────────────────────────────────────────── */
body.woocommerce-cart .quantity .qty {
	width: 72px !important;
	text-align: center;
	padding: 8px 10px !important;
}

/* ── Cart actions (coupon + update) ──────────────────────────────────────── */
body.woocommerce-cart .woocommerce-cart-form__contents .actions {
	padding: 16px;
	background: transparent;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

body.woocommerce-cart .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
}

body.woocommerce-cart .coupon input.input-text {
	width: 200px !important;
}

/* ── Cart collaterals ────────────────────────────────────────────────────── */
body.woocommerce-cart .cart-collaterals {
	margin-top: 32px;
	display: flex;
	justify-content: flex-end;
}

/* ── Cart totals card ────────────────────────────────────────────────────── */
body.woocommerce-cart .cart_totals {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	min-width: 300px;
	max-width: 380px;
	width: 100%;
}

body.woocommerce-cart .cart_totals h2 {
	font-size: 18px;
	font-style: italic;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

/* Totals table (inside card) */
body.woocommerce-cart .cart_totals table.shop_table {
	background: transparent;
	border: none !important;
	border-radius: 0;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	background: transparent;
	border-bottom: 1px solid var(--border) !important;
	padding: 10px 0;
	font-size: 14px;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--text-secondary);
}

body.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
body.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
	border-bottom: none !important;
}

body.woocommerce-cart .cart_totals .order-total th {
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
}

body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
	color: var(--amber);
	font-size: 22px;
	font-weight: 700;
}

/* ── Proceed to checkout button ──────────────────────────────────────────── */
body.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 20px;
}

body.woocommerce-cart .checkout-button {
	display: block !important;
	width: 100%;
	text-align: center;
	background-color: var(--lime) !important;
	color: #0F1A0F !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 15px 24px !important;
	border-radius: var(--radius-md) !important;
	letter-spacing: 0.02em;
	transition: background-color var(--duration-micro) var(--ease-enter) !important;
}

body.woocommerce-cart .checkout-button:hover {
	background-color: #b5f48a !important;
}

/* Cross-sells heading */
body.woocommerce-cart .cross-sells h2 {
	font-size: 20px;
	font-style: italic;
	margin-bottom: 20px;
	padding-top: 32px;
}


/* ══════════════════════════════════════════════════════════════════════════
   § CHECKOUT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Form section cards ──────────────────────────────────────────────────── */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	margin-bottom: 24px;
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 18px;
	font-style: italic;
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

/* ── Form row layout ─────────────────────────────────────────────────────── */
body.woocommerce-checkout .woocommerce-checkout .form-row {
	margin-bottom: 16px;
}

body.woocommerce-checkout .woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
}

/* ── Order review card ──────────────────────────────────────────────────── */
body.woocommerce-checkout #order_review_heading {
	font-size: 20px;
	font-style: italic;
	margin-bottom: 20px;
	color: var(--text);
}

body.woocommerce-checkout #order_review {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 14px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td strong {
	color: var(--text);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th {
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	border-bottom: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
	color: var(--amber);
	font-size: 20px;
	font-weight: 700;
}

/* ── Payment methods box ─────────────────────────────────────────────────── */
body.woocommerce-checkout #payment {
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-top: 24px;
}

body.woocommerce-checkout #payment .payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

body.woocommerce-checkout #payment .payment_methods li {
	padding: 14px 16px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color var(--duration-micro) var(--ease-enter);
}

body.woocommerce-checkout #payment .payment_methods li:has(input[type="radio"]:checked) {
	border-color: var(--lime);
}

body.woocommerce-checkout #payment .payment_methods li label {
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 15px;
}

body.woocommerce-checkout #payment .payment_box {
	color: var(--text-secondary);
	font-size: 14px;
	padding: 12px 16px;
	line-height: 1.7;
	/* Override WooCommerce default lavender/grey background */
	background-color: var(--surface-el) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-top: 6px;
}

/* Arrow triangle above payment_box — must match new dark surface bg.
   WC sets border-bottom-color from the box background via ::before.
   Both selectors needed as WC themes vary on which one they render. */
body.woocommerce-checkout #payment .payment_box::before,
body.woocommerce-checkout #payment .payment_box::after {
	border-bottom-color: var(--surface-el) !important;
}

/* ── Place order button ──────────────────────────────────────────────────── */
body.woocommerce-checkout #place_order {
	display: block !important;
	width: 100% !important;
	background-color: var(--lime) !important;
	color: #0F1A0F !important;
	border: none !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	padding: 16px 24px !important;
	border-radius: var(--radius-md) !important;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background-color var(--duration-micro) var(--ease-enter) !important;
	margin-top: 20px;
}

body.woocommerce-checkout #place_order:hover {
	background-color: #b5f48a !important;
}

/* ── Terms / privacy note ────────────────────────────────────────────────── */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin-top: 16px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--lime);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   § MY ACCOUNT / LOGIN / REGISTER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Two-column layout: login + register ─────────────────────────────────── */
body.woocommerce-account .woocommerce > .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

/* ── Form cards ──────────────────────────────────────────────────────────── */
/* Override WooCommerce's float: left / width: 48% so grid takes over */
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	float: none !important;
	width: auto !important;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px;
}
body.woocommerce-account .u-column1 { grid-column: 1; }
body.woocommerce-account .u-column2 { grid-column: 2; }

body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
	font-size: 20px;
	font-style: italic;
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

/* ── Login / register submit buttons — primary CTA ──────────────────────── */
/* WC adds .button to these submits, so the secondary-button rule above
   (body:is(...) .woocommerce button.button — specificity 0,3,2) wins over
   the old (0,2,1) selectors even with !important. We match 0,3,2 here
   by including .woocommerce + button element; being later in source wins. */
body.woocommerce-account .woocommerce button.woocommerce-form-login__submit,
body.woocommerce-account .woocommerce button.woocommerce-form-register__submit,
body.woocommerce-account .woocommerce button.woocommerce-Button,
body.woocommerce-account .woocommerce input.woocommerce-Button {
	background-color: var(--lime) !important;
	color: #0F1A0F !important;
	border: none !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 12px 28px !important;
	border-radius: var(--radius-md) !important;
	cursor: pointer;
	transition: background-color var(--duration-micro) var(--ease-enter),
	            box-shadow var(--duration-micro) var(--ease-enter) !important;
	letter-spacing: 0.02em;
	display: inline-block;
}

body.woocommerce-account .woocommerce button.woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce button.woocommerce-form-register__submit:hover,
body.woocommerce-account .woocommerce button.woocommerce-Button:hover {
	background-color: #b5f48a !important;
}

body.woocommerce-account .woocommerce button.woocommerce-form-login__submit:focus-visible,
body.woocommerce-account .woocommerce button.woocommerce-form-register__submit:focus-visible,
body.woocommerce-account .woocommerce button.woocommerce-Button:focus-visible {
	outline: 2px solid var(--lime) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(168, 240, 128, 0.20) !important;
}

/* ── Remember me checkbox row ────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

/* Custom checkbox — replaces native white/grey browser control.
   appearance: none lets us paint the box; we draw the checkmark via ::after.
   Keyboard focus rings use :focus-visible so mouse users aren't disturbed. */
body.woocommerce-account .woocommerce-form__input-checkbox {
	-webkit-appearance: none;
	appearance: none;
	width: 16px !important;
	height: 16px !important;
	background-color: var(--surface-el);
	border: 1.5px solid var(--border-light);
	border-radius: 3px;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	transition: background-color var(--duration-micro) var(--ease-enter),
	            border-color var(--duration-micro) var(--ease-enter);
}

body.woocommerce-account .woocommerce-form__input-checkbox:checked {
	background-color: var(--lime);
	border-color: var(--lime);
}

/* Checkmark drawn as a rotated L-shape */
body.woocommerce-account .woocommerce-form__input-checkbox:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border: 2px solid #0F1A0F;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

body.woocommerce-account .woocommerce-form__input-checkbox:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}

/* Form row with submit + remember-me side by side */
body.woocommerce-account .woocommerce-form-login .form-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ── Lost password link ──────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-LostPassword {
	margin-top: 12px;
}

body.woocommerce-account .woocommerce-LostPassword a {
	color: var(--muted);
	font-size: 13px;
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-enter);
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var(--lime);
}

/* ── Privacy policy note ─────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-privacy-policy-text {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 16px 0;
}

body.woocommerce-account .woocommerce-privacy-policy-text a {
	color: var(--lime);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Dashboard layout (logged in) ────────────────────────────────────────── */
/* Only apply the nav+content grid when the sidebar nav is actually present.
   Excludes: login/register (.u-columns present), lost-password
   (body.woocommerce-lost-password), and any other non-dashboard sub-pages
   that land here without a navigation panel. */
body.woocommerce-account:not(.woocommerce-lost-password) .woocommerce:not(:has(.u-columns)) {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	align-items: start;
}

/* ── Account navigation ──────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 8px 0;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 10px 20px;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 14px;
	border-left: 3px solid transparent;
	transition: color var(--duration-micro) var(--ease-enter),
	            background-color var(--duration-micro) var(--ease-enter);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--text);
	background-color: var(--surface-el);
	border-left-color: var(--lime);
}

/* ── Account content area ────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px;
}

body.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 1.2em;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--lime);
}

body.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
}

body.woocommerce-account .woocommerce-MyAccount-content table th {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table td {
	padding: 12px;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 14px;
}

body.woocommerce-account .woocommerce-MyAccount-content table tr:last-child td {
	border-bottom: none;
}

/* ── Lost password page ──────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account form.lost_reset_password {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px;
	max-width: 480px;
	margin: 0 auto;
}

body.woocommerce-account form.lost_reset_password p {
	color: var(--text-secondary);
	font-size: 15px;
	margin-bottom: 20px;
}


/* ══════════════════════════════════════════════════════════════════════════
   § TRUST FLOW — RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	/* Account: stack login + register */
	body.woocommerce-account .woocommerce > .u-columns {
		grid-template-columns: 1fr;
	}
	body.woocommerce-account .u-column1,
	body.woocommerce-account .u-column2 {
		grid-column: 1;
	}

	/* Account: stack dashboard nav + content */
	body.woocommerce-account .woocommerce:not(:has(.u-columns)) {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}

	/* Cart: totals full-width */
	body.woocommerce-cart .cart-collaterals {
		justify-content: stretch;
	}

	body.woocommerce-cart .cart_totals {
		max-width: 100%;
	}

	/* Checkout: label font size bump for mobile readability */
	body.woocommerce-checkout .woocommerce label {
		font-size: 13px;
	}
}

@media (max-width: 600px) {
	body.woocommerce-cart table.shop_table thead {
		display: none;
	}

	body.woocommerce-cart table.shop_table,
	body.woocommerce-cart table.shop_table tbody,
	body.woocommerce-cart table.shop_table tr,
	body.woocommerce-cart table.shop_table td {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart table.shop_table td {
		text-align: right;
		position: relative;
		padding-left: 45%;
	}

	body.woocommerce-cart table.shop_table td::before {
		content: attr(data-title);
		position: absolute;
		left: 16px;
		color: var(--muted);
		font-family: var(--font-mono);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		top: 50%;
		transform: translateY(-50%);
	}

	body.woocommerce-cart table.shop_table td.product-remove,
	body.woocommerce-cart table.shop_table td.product-thumbnail {
		padding-left: 16px;
		text-align: left;
	}

	body.woocommerce-cart .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	body.woocommerce-cart .coupon input.input-text {
		width: 100% !important;
	}

	body.woocommerce-cart .coupon [name="apply_coupon"],
	body.woocommerce-cart .coupon button {
		white-space: nowrap !important;
	}

	body.woocommerce-account .u-column1,
	body.woocommerce-account .u-column2 {
		padding: 24px 20px;
	}

	/* Lost-password card: reduce desktop 32px sides to 20px on small phones */
	body.woocommerce-account .woocommerce-ResetPassword,
	body.woocommerce-account form.lost_reset_password {
		padding: 24px 20px;
		max-width: 100%;
	}

	/* Lost-password input full-width on narrow screens */
	body.woocommerce-lost-password .woocommerce input.input-text,
	body.woocommerce-lost-password .woocommerce input[type="text"] {
		width: 100% !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   § GLOBAL KEYBOARD FOCUS PASS
   Visible :focus-visible rings for every interactive element that doesn't
   already have a bespoke focus style defined above.
   Pattern: 2px lime outline, offset 2px (matches .hh-btn:focus-visible).
   Inputs/textareas/selects already receive lime border + glow via :focus
   (see § WC FORMS section above) — those are preserved; no double-ring.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── WooCommerce buttons (cart, checkout, account) ───────────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button:focus-visible,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:focus-visible,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:focus-visible,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button[type="submit"]:focus-visible {
	outline: 2px solid var(--lime) !important;
	outline-offset: 2px !important;
}

/* ── WooCommerce links inside cart / checkout / account ─────────────────── */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a:not(.button):focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Account nav links ───────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: -2px;
	border-radius: 0;
}

/* ── Lost-password: form button ─────────────────────────────────────────── */
body.woocommerce-lost-password .woocommerce button[type="submit"]:focus-visible,
body.woocommerce-lost-password .woocommerce .woocommerce-Button:focus-visible {
	outline: 2px solid var(--lime) !important;
	outline-offset: 2px !important;
}

/* ── Global sitewide links (not already styled) ─────────────────────────── */
/* Only targets plain anchor links outside components that define their own
   focus style (nav, footer, buttons, FAQs all have bespoke rules above). */
.entry-content a:focus-visible,
.site-content a:not([class]):focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   § SINGLE PRODUCT PAGE  (body.single-product)
   Scoped exclusively to WooCommerce single product pages.
   Sidebar is removed via generate_sidebar_layout filter in functions.php,
   giving the full content width to the image + summary two-column layout.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────────── */
/* Remove GP's white inside-article card — page background shows through. */
body.single-product .inside-article {
	background-color: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
body.single-product .woocommerce-breadcrumb {
	color: var(--muted);
	font-size: 13px;
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

body.single-product .woocommerce-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-enter);
}

body.single-product .woocommerce-breadcrumb a:hover {
	color: var(--lime);
}

/* ── Main product grid: image left, summary right ────────────────────────── */
/* WooCommerce's JS sets inline width on gallery/summary — !important beats it.
   The grid handles layout; clear divs become hidden to avoid empty rows. */
body.single-product div.product {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
	align-items: start;
}

body.single-product div.product > .clear {
	display: none !important;
}

/* Gallery and summary override WC inline widths */
body.single-product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
}

body.single-product .summary.entry-summary {
	width: auto !important;
	float: none !important;
}

/* Tabs, related, up-sells span both columns */
body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .up-sells.products {
	grid-column: 1 / -1;
}

/* ── Product gallery ─────────────────────────────────────────────────────── */
body.single-product .woocommerce-product-gallery {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	position: relative; /* anchor for zoom trigger */
}

body.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Gallery zoom trigger ─────────────────────────────────────────────────
   WC renders a white circle with a WP emoji <img> inside. Override to a dark
   semi-transparent pill that matches the dark gallery surface. The <img> emoji
   is hidden and replaced with a CSS SVG magnifier via ::before.
   The trigger keeps all its href/role/aria attributes so PhotoSwipe still fires. */
body.single-product .woocommerce-product-gallery__trigger {
	background-color: rgba(15, 26, 15, 0.78) !important;
	border: 1px solid var(--border-light) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 100% !important;
	transition:
		background-color var(--duration-micro) var(--ease-enter),
		border-color var(--duration-micro) var(--ease-enter);
	display: flex !important;
	align-items: center;
	justify-content: center;
}

body.single-product .woocommerce-product-gallery__trigger:hover {
	background-color: rgba(15, 26, 15, 0.95) !important;
	border-color: var(--lime) !important;
}

/* Hide the WP emoji <img>, show a CSS magnifier icon instead */
body.single-product .woocommerce-product-gallery__trigger span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.single-product .woocommerce-product-gallery__trigger span img {
	display: none !important;
}

body.single-product .woocommerce-product-gallery__trigger span::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23EAE4D6' stroke-width='2'/%3E%3Cpath d='M16.5 16.5L21 21' stroke='%23EAE4D6' stroke-width='2' stroke-linecap='round'/%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Thumbnails strip */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	margin: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	margin: 0;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	opacity: 0.7;
	transition: opacity var(--duration-micro) var(--ease-enter),
	            border-color var(--duration-micro) var(--ease-enter);
	cursor: pointer;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--lime);
}

/* No-image placeholder */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	color: var(--muted);
	background-color: var(--surface-el);
}

/* ── Product summary panel ───────────────────────────────────────────────── */
body.single-product .summary.entry-summary {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 36px;
}

/* ── Product title ───────────────────────────────────────────────────────── */
body.single-product .product_title.entry-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 500;
	font-style: italic;
	color: var(--text);
	line-height: 1.15;
	margin: 0 0 16px;
}

/* ── Star rating ─────────────────────────────────────────────────────────── */
body.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

body.single-product .star-rating {
	color: var(--amber);
	font-size: 14px;
}

body.single-product .woocommerce-review-link {
	color: var(--muted);
	font-size: 13px;
	text-decoration: none;
}

body.single-product .woocommerce-review-link:hover {
	color: var(--lime);
}

/* ── Price ───────────────────────────────────────────────────────────────── */
body.single-product div.product .price {
	font-size: 28px;
	font-weight: 700;
	color: var(--amber) !important;
	margin: 0 0 20px;
	display: block;
}

body.single-product div.product .price del {
	color: var(--muted) !important;
	font-size: 18px;
	font-weight: 400;
	opacity: 0.7;
	margin-right: 8px;
}

body.single-product div.product .price ins {
	text-decoration: none;
}

/* ── Short description ───────────────────────────────────────────────────── */
body.single-product .woocommerce-product-details__short-description {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 24px;
	border-top: 1px solid var(--border);
	padding-top: 20px;
}

body.single-product .woocommerce-product-details__short-description ul {
	padding-left: 1.2em;
	margin: 8px 0;
}

body.single-product .woocommerce-product-details__short-description li {
	margin-bottom: 4px;
}

/* ── Variations (Select Options products) ────────────────────────────────── */
body.single-product .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

body.single-product .variations th.label label {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	padding-right: 16px;
}

body.single-product .variations td.value {
	width: 100%;
}

body.single-product .variations select {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--surface-el) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	padding: 10px 36px 10px 14px !important;
	font-size: 14px !important;
	font-family: var(--font-body) !important;
	width: 100%;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%237A9E7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	transition: border-color var(--duration-micro) var(--ease-enter);
}

body.single-product .variations select:focus,
body.single-product .variations select:focus-visible {
	border-color: var(--lime) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.22) !important;
}

/* Reset variation link */
body.single-product .reset_variations {
	color: var(--muted);
	font-size: 12px;
	text-decoration: none;
	margin-left: 12px;
	white-space: nowrap;
}

body.single-product .reset_variations:hover {
	color: var(--lime);
}

/* Variation price display */
body.single-product .woocommerce-variation-price .price {
	font-size: 24px;
	color: var(--amber) !important;
}

/* ── Add to cart form ────────────────────────────────────────────────────── */
body.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 24px 0 20px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

/* Quantity input */
body.single-product form.cart .quantity {
	flex-shrink: 0;
}

body.single-product form.cart .qty {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--surface-el) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-light) !important;
	border-radius: var(--radius-md) !important;
	padding: 11px 14px !important;
	font-size: 16px !important;
	font-family: var(--font-body) !important;
	width: 72px !important;
	text-align: center;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: border-color var(--duration-micro) var(--ease-enter),
	            box-shadow var(--duration-micro) var(--ease-enter);
}

body.single-product form.cart .qty:focus {
	border-color: var(--lime) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.22) !important;
}

/* Add to cart button — lime primary CTA */
body.single-product .single_add_to_cart_button {
	background-color: var(--lime) !important;
	color: #0F1A0F !important;
	border: none !important;
	font-family: var(--font-body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 12px 32px !important;
	border-radius: var(--radius-md) !important;
	cursor: pointer;
	flex: 1;
	transition: background-color var(--duration-micro) var(--ease-enter) !important;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

body.single-product .single_add_to_cart_button:hover {
	background-color: #b5f48a !important;
}

body.single-product .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--lime) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(168, 240, 128, 0.20) !important;
}

/* Loading state */
body.single-product .single_add_to_cart_button.loading {
	opacity: 0.7 !important;
	cursor: wait;
}

body.single-product .single_add_to_cart_button.added {
	background-color: var(--surface-high) !important;
	color: var(--lime) !important;
}

/* ── Stock status ─────────────────────────────────────────────────────────── */
body.single-product .stock {
	font-size: 13px;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

body.single-product .stock.in-stock {
	color: var(--lime);
}

body.single-product .stock.out-of-stock {
	color: var(--amber);
}

/* ── Product meta (categories, tags) ─────────────────────────────────────── */
body.single-product .product_meta {
	border-top: 1px solid var(--border);
	padding-top: 16px;
	margin-top: 8px;
}

body.single-product .product_meta span {
	display: block;
	font-size: 11px;
	font-family: var(--font-mono);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-bottom: 10px;
}

body.single-product .product_meta a {
	color: var(--text-secondary);
	text-decoration: none;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	transition: color var(--duration-micro) var(--ease-enter);
}

body.single-product .product_meta a:hover {
	color: var(--lime);
}

/* ── Product tabs ─────────────────────────────────────────────────────────── */
body.single-product .woocommerce-tabs {
	margin-top: 40px;
}

/* Tab nav */
body.single-product .woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--border);
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
	display: none;
}

body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	border: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 24px;
	color: var(--muted);
	font-size: 14px;
	font-family: var(--font-body);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--duration-micro) var(--ease-enter),
	            border-color var(--duration-micro) var(--ease-enter);
}

body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--text-secondary);
}

body.single-product .woocommerce-tabs ul.tabs li.active {
	background-color: rgba(168, 240, 128, 0.05) !important;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--text);
	font-weight: 600;
	border-bottom: 3px solid var(--lime);
	margin-bottom: -1px;
}

/* Tab panels */
body.single-product .woocommerce-tabs .panel {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: 32px 36px;
}

body.single-product .woocommerce-tabs .panel h2 {
	font-family: var(--font-display);
	font-size: 20px;
	font-style: italic;
	font-weight: 400;
	color: var(--text);
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

body.single-product .woocommerce-tabs .panel p,
body.single-product .woocommerce-tabs .panel li {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.75;
}

body.single-product .woocommerce-tabs .panel ul {
	padding-left: 1.3em;
}

/* Additional information table */
body.single-product .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

body.single-product .woocommerce-product-attributes th {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	width: 30%;
	text-align: left;
}

body.single-product .woocommerce-product-attributes td {
	color: var(--text-secondary);
	font-size: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

/* Reviews */
body.single-product .woocommerce-Reviews-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-style: italic;
	color: var(--text);
	margin-bottom: 20px;
}

body.single-product .woocommerce-noreviews,
body.single-product .woocommerce-verification-required {
	color: var(--muted);
	font-size: 14px;
}

/* ── Related / up-sell products ──────────────────────────────────────────── */
/* Phase 2A archive card rules are scoped to post-type-archive-product /
   tax-product_cat / tax-product_tag — they do NOT apply on body.single-product.
   We replicate the same grid + card design tokens here. */
body.single-product .related.products,
body.single-product .up-sells.products {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}

body.single-product .related.products > h2,
body.single-product .up-sells.products > h2 {
	font-family: var(--font-display);
	font-size: 22px;
	font-style: italic;
	font-weight: 400;
	color: var(--text);
	margin: 0 0 24px;
}

/* Grid */
body.single-product .related.products ul.products,
body.single-product .up-sells.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: both;
}

/* WC outputs clearfix ::before/::after on ul.products — these become ghost grid
   items and push the first card into column 2. Reset them to display:none. */
body.single-product .related.products ul.products::before,
body.single-product .related.products ul.products::after,
body.single-product .up-sells.products ul.products::before,
body.single-product .up-sells.products ul.products::after {
	display: none !important;
}

/* WC sets float:left + width on li — override so grid can size items */
body.single-product .related.products ul.products li.product,
body.single-product .up-sells.products ul.products li.product {
	float: none !important;
	width: auto !important;
}

/* Card */
body.single-product .related.products ul.products li.product,
body.single-product .up-sells.products ul.products li.product {
	background-color: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	transition:
		border-color var(--duration-standard) var(--ease-enter),
		transform var(--duration-standard) var(--ease-enter),
		box-shadow var(--duration-standard) var(--ease-enter);
}

body.single-product .related.products ul.products li.product:hover,
body.single-product .up-sells.products ul.products li.product:hover {
	border-color: var(--border-light);
	transform: translateY(-3px);
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
}

/* Link wrapper */
body.single-product .related.products ul.products li.product .woocommerce-LoopProduct-link,
body.single-product .up-sells.products ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* Image */
body.single-product .related.products ul.products li.product .woocommerce-LoopProduct-link img,
body.single-product .up-sells.products ul.products li.product .woocommerce-LoopProduct-link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-medium) var(--ease-move);
}

body.single-product .related.products ul.products li.product:hover .woocommerce-LoopProduct-link img,
body.single-product .up-sells.products ul.products li.product:hover .woocommerce-LoopProduct-link img {
	transform: scale(1.05);
}

/* Title */
body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .up-sells.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--text);
	line-height: 1.35;
	padding: 14px 16px 4px;
	margin: 0;
	flex: 1;
}

/* Price */
body.single-product .related.products ul.products li.product .price,
body.single-product .up-sells.products ul.products li.product .price {
	display: block;
	padding: 6px 16px 0;
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--amber);
	line-height: 1.3;
	margin: 0;
}

body.single-product .related.products ul.products li.product .price del,
body.single-product .up-sells.products ul.products li.product .price del {
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
	margin-right: 4px;
	text-decoration: line-through;
}

body.single-product .related.products ul.products li.product .price ins,
body.single-product .up-sells.products ul.products li.product .price ins {
	text-decoration: none;
	color: var(--amber);
}

/* Card button (ghost style, lime on hover — matches archive cards) */
body.single-product .related.products ul.products li.product .button,
body.single-product .related.products ul.products li.product a.button,
body.single-product .up-sells.products ul.products li.product .button,
body.single-product .up-sells.products ul.products li.product a.button {
	box-sizing: border-box !important;
	margin: 12px 16px 16px !important;
	padding: 11px 16px !important;
	background-color: transparent !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
	transition:
		background-color var(--duration-micro) var(--ease-enter),
		border-color var(--duration-micro) var(--ease-enter),
		color var(--duration-micro) var(--ease-enter) !important;
	box-shadow: none !important;
}

body.single-product .related.products ul.products li.product .button:hover,
body.single-product .related.products ul.products li.product a.button:hover,
body.single-product .up-sells.products ul.products li.product .button:hover,
body.single-product .up-sells.products ul.products li.product a.button:hover {
	background-color: var(--lime) !important;
	border-color: var(--lime) !important;
	color: var(--bg) !important;
}

/* Button hierarchy: direct Add to Cart (ajax_add_to_cart) → lime primary CTA.
   Variable/Select Options/Read More stays ghost. Scoped to single-product only. */
body.single-product .related.products ul.products li.product .button.ajax_add_to_cart,
body.single-product .related.products ul.products li.product a.button.ajax_add_to_cart,
body.single-product .up-sells.products ul.products li.product .button.ajax_add_to_cart,
body.single-product .up-sells.products ul.products li.product a.button.ajax_add_to_cart {
	background-color: var(--lime) !important;
	border-color: var(--lime) !important;
	color: var(--bg) !important;
}

body.single-product .related.products ul.products li.product .button.ajax_add_to_cart:hover,
body.single-product .related.products ul.products li.product a.button.ajax_add_to_cart:hover,
body.single-product .up-sells.products ul.products li.product .button.ajax_add_to_cart:hover,
body.single-product .up-sells.products ul.products li.product a.button.ajax_add_to_cart:hover {
	background-color: #b5f48a !important;
	border-color: #b5f48a !important;
	color: var(--bg) !important;
}

/* Image consistency: dark background mat behind images so white-bg product
   photos don't produce a checkerboard against the dark card surface. */
body.single-product .related.products ul.products li.product .woocommerce-LoopProduct-link,
body.single-product .up-sells.products ul.products li.product .woocommerce-LoopProduct-link {
	background-color: var(--surface-el);
}

/* Sale badge — amber/dark to match design system; scoped to single product related. */
body.single-product .related.products ul.products li.product .onsale,
body.single-product .up-sells.products ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background-color: var(--amber) !important;
	color: var(--bg) !important;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	line-height: 1.4;
	margin: 0;
	min-height: 0;
	min-width: 0;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info {
	background-color: var(--surface);
	border-top-color: var(--lime) !important;
	color: var(--text-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body.single-product .woocommerce-message::before,
body.single-product .woocommerce-info::before {
	color: var(--lime);
}

body.single-product .woocommerce-error {
	background-color: var(--surface);
	border-top-color: var(--low-stock) !important;
	color: var(--text-secondary);
}

/* ── Responsive: single product ──────────────────────────────────────────── */
@media (max-width: 768px) {
	body.single-product div.product {
		grid-template-columns: 1fr !important;
	}

	body.single-product .woocommerce-product-gallery,
	body.single-product .summary.entry-summary {
		grid-column: 1;
	}

	body.single-product .summary.entry-summary {
		padding: 24px 20px;
	}

	body.single-product .product_title.entry-title {
		font-size: 26px;
	}

	body.single-product div.product .price {
		font-size: 24px;
	}

	body.single-product .woocommerce-tabs .panel {
		padding: 24px 20px;
	}

	body.single-product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	body.single-product form.cart .qty {
		width: 100% !important;
	}

	body.single-product .single_add_to_cart_button {
		width: 100%;
		text-align: center;
	}

	body.single-product .related.products ul.products,
	body.single-product .up-sells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	body.single-product div.product {
		column-gap: 0;
	}

	body.single-product .woocommerce-breadcrumb {
		font-size: 11px;
	}

	body.single-product .related.products ul.products,
	body.single-product .up-sells.products ul.products {
		grid-template-columns: 1fr !important;
	}
}


/* =============================================================================
   Phase 4.5 — Product Search
   Desktop: pill input in header, between logo and nav.
   Mobile: full-width input at the top of the hamburger dropdown.
   Search targets WooCommerce products only (?s=…&post_type=product).
   Results land on the post-type-archive-product page — Phase 2A card styles
   apply automatically with no extra work.
============================================================================= */

/* ── Desktop header search ───────────────────────────────────────────────── */

/* Flex-order the desktop header as logo -> search -> nav.
   GP's .nav-float-right sets #site-navigation { margin-left: auto }; we cancel
   that so the search can sit cleanly between brand and navigation. */
.hh-header-search {
	order: 1;
	margin-left: clamp(24px, 3vw, 44px);
	margin-right: 20px;
	flex: 0 1 clamp(210px, 18vw, 260px);
	min-width: 120px;
	position: relative;
	display: flex;
	align-items: center;
}

/* Override GP nav-float-right auto margin — search now owns the gap. */
.site-header #site-navigation {
	order: 2;
	margin-left: 0 !important;
}

.hh-header-search input[type="search"] {
	width: 100%;
	height: 38px;
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-radius: 100px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 13px;
	padding: 0 40px 0 16px;
	outline: none;
	transition: border-color var(--duration-micro) var(--ease-enter),
	            box-shadow var(--duration-micro) var(--ease-enter);
	-webkit-appearance: none;
	appearance: none;
}

.hh-header-search input[type="search"]::placeholder {
	color: var(--text-secondary);
}

.hh-header-search input[type="search"]:focus {
	border-color: var(--lime);
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.12);
}

.hh-header-search button[type="submit"] {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--duration-micro) var(--ease-enter);
}

.hh-header-search:focus-within button[type="submit"],
.hh-header-search button[type="submit"]:hover {
	color: var(--lime);
}

.hh-header-search button[type="submit"]:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 4px;
	color: var(--lime);
}

/* Remove browser-native search chrome (cancel/results buttons, decoration) */
.hh-header-search input[type="search"]::-webkit-search-decoration,
.hh-header-search input[type="search"]::-webkit-search-cancel-button,
.hh-header-search input[type="search"]::-webkit-search-results-button,
.hh-header-search input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

/* Hide desktop search at tablet and below — hamburger dropdown search takes over */
@media (max-width: 1100px) {
	.hh-header-search {
		display: none !important;
	}
}

/* ── Mobile search (inside nav dropdown) ─────────────────────────────────── */

/* Hidden everywhere by default — shown only when hamburger is open (.toggled).
   GP adds .toggled to #site-navigation when the hamburger button is activated.
   Horizontal padding is 0 so the search aligns with the nav links (which sit
   at the .inside-navigation.grid-container's 20px horizontal padding). */
.hh-mobile-search {
	display: none;
	padding: 14px 0 10px;
	border-bottom: 1px solid var(--border);
}

.hh-mobile-account {
	display: none;
	border-bottom: 1px solid var(--border);
}

/* At ≤1100px with hamburger active: show mobile search when dropdown is open.
   Two GP rules must be beaten here:
   (a) GP ≤768px: .inside-navigation > *:not(.navigation-search):not(.main-nav) { display:none }
   (b) The ≤1100px rule above that replicates (a) for the wider breakpoint.
   Both are beaten by the .toggled scope + !important.
   flex-basis:100% + width:100% force the wrapper to span the full nav row — without
   these the flex container only gives .hh-mobile-search its intrinsic width. */
@media (max-width: 1100px) {
	.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .hh-mobile-search {
		display: block !important;
		width: 100%;
		flex-basis: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .hh-mobile-account {
		display: block !important;
		width: 100%;
		flex-basis: 100%;
		max-width: none;
		box-sizing: border-box;
	}
}

.hh-mobile-account a {
	display: block;
	padding: 13px 0;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.hh-mobile-account a:hover,
.hh-mobile-account a:focus-visible {
	color: var(--lime);
}

.hh-mobile-account a:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: -2px;
}

.hh-mobile-search form {
	position: relative;
	display: flex;
	align-items: center;
}

.hh-mobile-search input[type="search"] {
	width: 100%;
	height: 42px;
	background-color: var(--surface-el);
	border: 1px solid var(--border);
	border-radius: 100px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
	padding: 0 44px 0 16px;
	outline: none;
	transition: border-color var(--duration-micro) var(--ease-enter),
	            box-shadow var(--duration-micro) var(--ease-enter);
	-webkit-appearance: none;
	appearance: none;
}

.hh-mobile-search input[type="search"]::placeholder {
	color: var(--text-secondary);
}

.hh-mobile-search input[type="search"]:focus {
	border-color: var(--lime);
	box-shadow: 0 0 0 3px rgba(168, 240, 128, 0.12);
}

.hh-mobile-search button[type="submit"] {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--duration-micro) var(--ease-enter);
}

.hh-mobile-search:focus-within button[type="submit"],
.hh-mobile-search button[type="submit"]:hover {
	color: var(--lime);
}

.hh-mobile-search button[type="submit"]:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 4px;
	color: var(--lime);
}

.hh-mobile-search input[type="search"]::-webkit-search-decoration,
.hh-mobile-search input[type="search"]::-webkit-search-cancel-button,
.hh-mobile-search input[type="search"]::-webkit-search-results-button,
.hh-mobile-search input[type="search"]::-webkit-search-results-decoration {
	display: none;
}


/* =============================================================================
   Phase 5 — Customer Trust + Conversion Layer
   Transactional trust signals: homepage strip, product reassurance, cart/checkout.
   All CSS is tightly scoped to .hh-trust-strip, .hh-product-reassurance,
   .hh-cart-notice, .hh-checkout-notice — no global WooCommerce selector overlap.
============================================================================= */

/* ── Homepage transactional trust strip ─────────────────────────────────────
   4-item horizontal band between last page section and footer.
   Background: var(--surface) — visually distinct from --bg page background
   but cohesive with the existing trust stats bar above it. */

.hh-trust-strip {
	background-color: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 32px 0;
}

.hh-trust-strip-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.hh-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.hh-trust-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--lime);
	width: 22px;
	height: 22px;
}

.hh-trust-icon * {
	stroke-width: 2;
}

.hh-trust-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hh-trust-text strong {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
}

.hh-trust-text span {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.4;
}

/* Tablet: 2-column grid */
@media (max-width: 900px) {
	.hh-trust-strip-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		padding: 0 20px;
	}
}

/* Mobile: single column, tighter strip */
@media (max-width: 560px) {
	.hh-trust-strip {
		padding: 24px 0;
	}
	.hh-trust-strip-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/* ── Single product reassurance block ───────────────────────────────────────
   Compact checklist below the Add to Cart form.
   Scoped to body.single-product to avoid any archive bleed. */

body.single-product .hh-product-reassurance {
	margin-top: 20px;
	padding: 14px 16px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.hh-reassurance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hh-reassurance-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.5;
}

.hh-reassurance-list li svg {
	flex-shrink: 0;
	margin-top: 2px; /* nudge icon to first-line cap-height */
	color: var(--muted);
}

.hh-reassurance-list li a {
	color: var(--lime);
	text-decoration: none;
	font-weight: 500;
}

.hh-reassurance-list li a:hover {
	text-decoration: underline;
}


/* ── Cart confidence copy ────────────────────────────────────────────────────
   Appears above the Cart Totals box.
   Subtle — informational, not promotional. */

.hh-cart-notice {
	margin-bottom: 20px;
	padding: 12px 16px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--border-light);
	border-radius: var(--radius-md);
}

.hh-cart-notice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.hh-cart-notice-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.5;
}

.hh-cart-notice-list li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--border-light);
}

.hh-cart-notice-list li a {
	color: var(--lime);
	text-decoration: none;
	font-weight: 500;
}

.hh-cart-notice-list li a:hover {
	text-decoration: underline;
}


/* ── Checkout confidence copy ────────────────────────────────────────────────
   Appears above the Payment section in the order review column.
   Same quiet treatment as the cart notice. */

.hh-checkout-notice {
	margin-bottom: 16px;
	padding: 12px 16px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--border-light);
	border-radius: var(--radius-md);
}

.hh-checkout-notice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.hh-checkout-notice-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.5;
}

.hh-checkout-notice-list li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--border-light);
}

.hh-checkout-notice-list li a {
	color: var(--lime);
	text-decoration: none;
	font-weight: 500;
}

.hh-checkout-notice-list li a:hover {
	text-decoration: underline;
}