/*
 * HyperFolkUs Custom Styles
 * Theme: Emoza WooCommerce (v1.1.4)
 * Loaded by: functions-hyperfolkus.php (does not modify Emoza core files)
 *
 * Design language: warm off-white canvas (not stark white) with white
 * "surface" cards for contrast, a full-bleed blurred-gradient hero, a dark
 * contrast section for rhythm, pill-shaped buttons/badges, and a fluid
 * auto-fill product grid that scales up naturally on ultrawide monitors
 * instead of capping at a fixed column count.
 *
 * Section map:
 *   1. CSS custom properties (brand colors, type scale, spacing, shadows)
 *   2. Base typography
 *   3. Buttons
 *   4. Category badges
 *   5. Product cards
 *   6. Hero section
 *   7. Trust / "Why HyperFolkUs?" section
 *   8. Single product layout
 *   9. Responsive breakpoints
 *  10. Header logo
 *  11. Accessibility helpers
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */
:root {
	/* Brand palette (toned down from mockup neons).
	   Note: magenta corrected from a typo in the original spec (#B2904B,
	   which is tan/brown) to the true magenta shown on the mockup's color
	   reference sheet (#B2004B). Blue and yellow are nudged slightly darker
	   than the raw mockup swatches so white/charcoal text placed on them
	   still clears WCAG AA (4.5:1) — see HYPERFOLKUS_IMPLEMENTATION.md. */
	--hfu-magenta: #B2004B;
	--hfu-blue: #0073A3;
	--hfu-green: #2BB20E;
	--hfu-yellow: #B2B20E;
	--hfu-white: #FFFFFF;
	--hfu-charcoal: #1A1A1A;

	/* Canvas + surfaces. A warm off-white page background instead of pure
	   white is what makes white cards actually read as cards instead of
	   invisible rectangles floating on an identical background. */
	--hfu-bg: #F6F4EF;
	--hfu-bg-dark: #15140F;
	--hfu-surface: #FFFFFF;

	/* Derived text/border tones */
	--hfu-charcoal-soft: #4A4842;
	--hfu-border: rgba(20, 19, 15, 0.10);

	/* Shadow scale — soft, warm-tinted (not pure black) to match the canvas */
	--hfu-shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.06), 0 1px 3px rgba(20, 19, 15, 0.08);
	--hfu-shadow-md: 0 10px 24px -8px rgba(20, 19, 15, 0.18);
	--hfu-shadow-lg: 0 24px 60px -16px rgba(20, 19, 15, 0.28);
	--hfu-card-shadow: var(--hfu-shadow-sm);
	--hfu-card-shadow-hover: var(--hfu-shadow-md);

	/* Typography. Space Grotesk gives the "bold, geometric, modern +
	   retro-inspired" heading look the brief asked for; Inter is a clean,
	   highly legible workhorse body face. Both loaded via
	   hfu_enqueue_assets() in functions-hyperfolkus.php — see
	   HYPERFOLKUS_IMPLEMENTATION.md if you'd rather self-host them. */
	--hfu-font-heading: 'Space Grotesk', 'Arial Black', Arial, sans-serif;
	--hfu-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hfu-font-size-base: 16px;
	--hfu-line-height-base: 1.6;

	/* Spacing / radius — larger, softer radii read as more contemporary
	   than the tighter 6–10px used in the first pass. */
	--hfu-radius: 20px;
	--hfu-radius-sm: 12px;
	--hfu-radius-pill: 999px;
	--hfu-gap: 1.5rem;
	--hfu-container-max: 1360px;
	--hfu-section-pad: clamp(3.5rem, 8vw, 7rem);
}

/* ==========================================================================
   2. Base Typography
   ========================================================================== */
body.hfu-scope {
	font-family: var(--hfu-font-body);
	font-size: var(--hfu-font-size-base);
	line-height: var(--hfu-line-height-base);
	color: var(--hfu-charcoal);
	background-color: var(--hfu-bg);
	/* .hfu-hero and .hfu-trust deliberately break out to full viewport width
	   (100vw + negative margins) below — this keeps that trick from ever
	   introducing a horizontal scrollbar. */
	overflow-x: hidden;
}

.hfu-scope h1,
.hfu-scope h2,
.hfu-scope h3,
.hfu-scope h4 {
	font-family: var(--hfu-font-heading);
	font-weight: 700;
	color: var(--hfu-charcoal);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

.hfu-scope h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.hfu-scope h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); margin-bottom: 0.75em; }
.hfu-scope h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

.hfu-scope p {
	font-weight: 400;
	margin: 0 0 1em;
}

.hfu-container {
	max-width: var(--hfu-container-max);
	margin: 0 auto;
	/* Fluid equivalent of the 20px mobile / 40px tablet / 60px desktop
	   spec — a clamp scales smoothly between those two endpoints instead
	   of jumping at fixed breakpoints. */
	padding: 0 clamp(1.25rem, 4vw, 3.75rem);
}

/* Small geometric corner-bracket accent inspired by the logo's blocky
   frame corners (see branding/Squre-Logo-1000px@1000x.png) — two opposing
   brackets only, kept small so it reads as a flourish, not a border.
   Applied to the "Featured Products" and homepage "Why HyperFolkUs?"
   headings only, per the brief's "keep it subtle" note. */
.hfu-section-heading {
	position: relative;
	display: inline-block;
	padding: 0.4em 1.4em;
}

.hfu-section-heading::before,
.hfu-section-heading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	opacity: 0.85;
}

.hfu-section-heading::before {
	top: 0;
	left: 0;
	border-top: 3px solid var(--hfu-blue);
	border-left: 3px solid var(--hfu-blue);
}

.hfu-section-heading::after {
	bottom: 0;
	right: 0;
	border-bottom: 3px solid var(--hfu-magenta);
	border-right: 3px solid var(--hfu-magenta);
}

.hfu-empty-state {
	text-align: center;
	color: var(--hfu-charcoal-soft);
	padding: 2rem 1rem;
	background-color: var(--hfu-surface);
	border: 1px dashed var(--hfu-border);
	border-radius: var(--hfu-radius-sm);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.hfu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--hfu-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 0.95em 2em;
	border-radius: var(--hfu-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hfu-btn:focus-visible {
	outline: 3px solid var(--hfu-blue);
	outline-offset: 2px;
}

/* Primary CTA — green bg with charcoal text. White text on this green
   only reaches ~2.8:1, so charcoal (~6.2:1) is used to keep AA compliance. */
.hfu-btn--primary {
	background-color: var(--hfu-green);
	color: var(--hfu-charcoal);
	box-shadow: 0 10px 24px -6px rgba(43, 178, 14, 0.45);
}

.hfu-btn--primary:hover,
.hfu-btn--primary:focus-visible {
	background-color: #249c0c;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -6px rgba(43, 178, 14, 0.55);
}

.hfu-btn--primary:active {
	transform: translateY(0);
}

/* Secondary action — dark background, per spec */
.hfu-btn--secondary {
	background-color: var(--hfu-charcoal);
	color: var(--hfu-white);
	border-color: var(--hfu-charcoal);
}

.hfu-btn--secondary:hover,
.hfu-btn--secondary:focus-visible {
	background-color: #2E2C26;
	transform: translateY(-2px);
}

.hfu-btn--outline {
	background-color: transparent;
	color: var(--hfu-charcoal);
	border-color: var(--hfu-charcoal);
}

.hfu-btn--outline:hover,
.hfu-btn--outline:focus-visible {
	background-color: var(--hfu-charcoal);
	color: var(--hfu-white);
}

.hfu-btn:disabled,
.hfu-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   4. Category Badges
   ========================================================================== */
.hfu-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--hfu-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.75em;
	border-radius: var(--hfu-radius-pill);
	line-height: 1;
	white-space: nowrap;
	box-shadow: var(--hfu-shadow-sm);
}

/* Fidget Tools */
.hfu-badge--click {
	background-color: var(--hfu-magenta);
	color: var(--hfu-white);
}

/* Apparel */
.hfu-badge--soft {
	background-color: var(--hfu-blue);
	color: var(--hfu-white);
}

/* Visual Stims */
.hfu-badge--visual {
	background-color: var(--hfu-green);
	color: var(--hfu-charcoal);
}

/* Bundles */
.hfu-badge--bundle {
	background-color: var(--hfu-yellow);
	color: var(--hfu-charcoal);
}

/* ==========================================================================
   5. Product Cards
   ========================================================================== */
/* Full-bleed white band behind the featured-products grid, matching the
   hero/trust pattern: an outer section owns the full-width background,
   an inner .hfu-container centers the actual content. Previously
   .hfu-featured and .hfu-container were the same element, which meant
   .hfu-container's max-width also capped the section's background —
   fine for the content, but it's what made "full-width background,
   centered content" impossible to achieve here specifically. */
.hfu-featured {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: var(--hfu-surface);
	padding: var(--hfu-section-pad) 0;
	/* Centers the heading, which is inline-block (see .hfu-section-heading)
	   so its corner brackets hug the text — text-align on the heading
	   itself would only center text inside that box, not the box itself. */
	text-align: center;
}

.hfu-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}

.hfu-product-card {
	/* Reset explicitly: .hfu-featured centers its heading and would
	   otherwise leak text-align: center down into card text (title/price/
	   descriptor have no text-align of their own), which would make cards
	   render differently on the homepage vs. the shop/category page where
	   this same component renders outside .hfu-featured. */
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--hfu-surface);
	border: 1px solid var(--hfu-border);
	border-radius: var(--hfu-radius);
	box-shadow: var(--hfu-card-shadow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hfu-product-card:hover,
.hfu-product-card:focus-within {
	box-shadow: var(--hfu-card-shadow-hover);
	transform: translateY(-4px);
}

.hfu-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--hfu-bg);
	overflow: hidden;
}

.hfu-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.hfu-product-card:hover .hfu-product-card__media img {
	transform: scale(1.06);
}

.hfu-product-card__badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 2;
}

.hfu-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem;
	flex: 1;
}

.hfu-product-card__title {
	font-family: var(--hfu-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
}

.hfu-product-card__title a {
	color: var(--hfu-charcoal);
	text-decoration: none;
}

.hfu-product-card__title a:hover,
.hfu-product-card__title a:focus-visible {
	text-decoration: underline;
}

.hfu-product-card__price {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--hfu-charcoal);
}

.hfu-product-card__price del {
	color: #8a8a8a;
	font-weight: 400;
	margin-right: 0.4em;
}

.hfu-product-card__descriptor {
	font-size: 0.85rem;
	color: var(--hfu-charcoal-soft);
	font-style: italic;
	margin: 0;
}

.hfu-product-card__cta {
	margin-top: 0.6rem;
	width: 100%;
}

/* WooCommerce renders its own add-to-cart markup here (see
   woocommerce_template_loop_add_to_cart() in template-product-card-custom.php)
   so it correctly handles variable products, out-of-stock state, and AJAX.
   Restyle whatever button class it outputs to match the .hfu-btn system. */
.hfu-product-card__cta .button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--hfu-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.85em 1.25em;
	border-radius: var(--hfu-radius-pill);
	border: 2px solid transparent;
	background-color: var(--hfu-green);
	color: var(--hfu-charcoal);
	text-decoration: none;
	text-align: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hfu-product-card__cta .button:hover,
.hfu-product-card__cta .button:focus-visible {
	background-color: #249c0c;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -6px rgba(43, 178, 14, 0.45);
}

.hfu-product-card__cta .button.loading {
	opacity: 0.6;
}

/* ==========================================================================
   6. Hero Section
   ========================================================================== */
.hfu-hero {
	/* Full-bleed breakout: makes the hero span the true viewport width even
	   if a parent theme wrapper (Emoza's #content, etc.) constrains normal
	   flow to a max-width column — otherwise the colorful background stops
	   at that column edge and ultrawide monitors are back to flat white
	   gutters on either side. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--hfu-bg);
	padding: clamp(4rem, 10vw, 8rem) 1.5rem;
	text-align: center;
}

/* Soft blurred color blobs give the hero depth on wide screens instead of
   a flat pastel rectangle. Pure CSS — no extra markup required. */
.hfu-hero::before,
.hfu-hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
}

.hfu-hero::before {
	width: min(42vw, 620px);
	height: min(42vw, 620px);
	top: -14%;
	left: -8%;
	background: radial-gradient(circle, var(--hfu-magenta), transparent 70%);
}

.hfu-hero::after {
	width: min(38vw, 560px);
	height: min(38vw, 560px);
	bottom: -20%;
	right: -6%;
	background: radial-gradient(circle, var(--hfu-green), transparent 70%);
}

.hfu-hero__inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: calc(var(--hfu-radius) * 1.5);
	padding: clamp(2.5rem, 5vw, 4rem);
	box-shadow: var(--hfu-shadow-lg);
}

.hfu-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	background-color: var(--hfu-magenta);
	color: var(--hfu-white);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.45em 1.1em;
	border-radius: var(--hfu-radius-pill);
	margin-bottom: 1.25rem;
}

.hfu-hero__title {
	font-size: clamp(2.75rem, 7vw, 5rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.2em;
	/* Gradient text as a progressive enhancement: the charcoal color below
	   is what renders if background-clip: text isn't supported. */
	color: var(--hfu-charcoal);
	background: linear-gradient(90deg, var(--hfu-magenta), var(--hfu-blue) 40%, var(--hfu-green) 75%, var(--hfu-yellow));
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.hfu-hero__title {
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.hfu-hero__tagline {
	font-family: var(--hfu-font-heading);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.5vw, 1.6rem);
	color: var(--hfu-charcoal-soft);
	margin-bottom: 1rem;
}

.hfu-hero__subtext {
	font-size: 1.05rem;
	color: var(--hfu-charcoal-soft);
	margin-bottom: 2rem;
}

.hfu-hero__cta {
	font-size: 1.05rem;
	padding: 1.05em 2.5em;
}

/* ==========================================================================
   7. Trust / "Why HyperFolkUs?" Section
   ========================================================================== */

/* Homepage version: full-bleed dark section for visual rhythm against the
   light hero/product sections above and below it. */
.hfu-trust {
	/* Same full-bleed breakout as .hfu-hero — see the comment there. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: var(--hfu-bg-dark);
	color: var(--hfu-white);
	padding: var(--hfu-section-pad) 1.5rem;
	/* Same reasoning as .hfu-featured above: centers the inline-block
	   .hfu-section-heading box itself, not just text inside it. */
	text-align: center;
}

.hfu-trust__heading {
	margin-bottom: 2.5rem;
	color: var(--hfu-white);
}

.hfu-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: var(--hfu-container-max);
	margin: 0 auto;
}

.hfu-trust__item {
	text-align: center;
	padding: 1.5rem 1rem;
}

.hfu-trust__item p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.95rem;
}

.hfu-trust__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Rotate each trust tile's icon chip through the brand palette so the dark
   section still reads as colorful/on-brand rather than monochrome. */
.hfu-trust__item:nth-child(4n+1) .hfu-trust__icon { background: color-mix(in srgb, var(--hfu-magenta) 35%, transparent); }
.hfu-trust__item:nth-child(4n+2) .hfu-trust__icon { background: color-mix(in srgb, var(--hfu-blue) 35%, transparent); }
.hfu-trust__item:nth-child(4n+3) .hfu-trust__icon { background: color-mix(in srgb, var(--hfu-green) 35%, transparent); }
.hfu-trust__item:nth-child(4n+4) .hfu-trust__icon { background: color-mix(in srgb, var(--hfu-yellow) 35%, transparent); }

.hfu-trust__label {
	font-family: var(--hfu-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.35em;
	color: var(--hfu-white);
}

/* Single-product version: same markup, reset back to light since it sits
   inside the white summary panel rather than as its own full-bleed section. */
.hfu-trust--compact {
	/* Cancel the full-bleed breakout from .hfu-trust — this instance lives
	   inside the single-product summary panel, not as its own section. */
	width: auto;
	position: static;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	background: transparent;
	color: inherit;
	padding: 1.5rem 0 0;
}

.hfu-trust--compact .hfu-trust__grid {
	grid-template-columns: repeat(2, 1fr);
	max-width: none;
}

.hfu-trust--compact .hfu-trust__heading {
	text-align: left;
	font-size: 1.15rem;
	margin-bottom: 1rem;
	color: var(--hfu-charcoal);
}

.hfu-trust--compact .hfu-trust__icon {
	width: 48px;
	height: 48px;
	font-size: 1.4rem;
	background: var(--hfu-bg);
	border-color: var(--hfu-border);
}

.hfu-trust--compact .hfu-trust__label {
	color: var(--hfu-charcoal);
	font-size: 0.95rem;
}

.hfu-trust--compact .hfu-trust__item p {
	color: var(--hfu-charcoal-soft);
}

/* ==========================================================================
   8. Single Product Layout
   ========================================================================== */
.hfu-single-product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
	max-width: var(--hfu-container-max);
	margin: 0 auto;
}

.hfu-single-product__gallery {
	background-color: var(--hfu-bg);
	border-radius: var(--hfu-radius);
	overflow: hidden;
}

.hfu-single-product__gallery img {
	width: 100%;
	height: auto;
	display: block;
}

.hfu-single-product__summary {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hfu-single-product__title {
	margin-bottom: 0;
}

.hfu-single-product__price {
	font-size: 1.5rem;
	font-weight: 700;
}

.hfu-single-product__rating {
	color: var(--hfu-yellow);
	filter: brightness(0.85); /* darken star color for AA contrast on white */
}

.hfu-sensory-breakdown {
	border-top: 1px solid var(--hfu-border);
	border-bottom: 1px solid var(--hfu-border);
	padding: 1.25rem 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
}

.hfu-sensory-breakdown__item dt {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfu-charcoal-soft);
	margin-bottom: 0.15rem;
}

.hfu-sensory-breakdown__item dd {
	margin: 0;
	font-size: 1rem;
}

/* Markup below this point (form.cart, table.variations, .quantity, the
   add-to-cart button) is rendered by WooCommerce core via
   woocommerce_template_single_add_to_cart() — restyled here rather than
   rebuilt so variable products, stock states, and cart nonces keep working. */
.hfu-single-product__actions form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.hfu-single-product__actions table.variations {
	width: 100%;
	margin-bottom: 0.75rem;
}

.hfu-single-product__actions table.variations select {
	width: 100%;
	font-size: 1rem;
	padding: 0.6em 0.75em;
	border: 1px solid var(--hfu-border);
	border-radius: var(--hfu-radius-sm);
	min-height: 44px;
}

/* WooCommerce 8.7+ renders native +/- stepper buttons (class .minus /
   .plus) around the quantity input by default — no theme JS or custom
   markup needed. The "weird overlapping border" bug was these buttons
   rendering unstyled/default right next to a fully-bordered input with no
   gap between them. Fixing it is a pure restyle of the three children WC
   already outputs; verify .minus/.plus are the actual classes in your
   browser's inspector after upload — WooCommerce has changed this markup
   before and could again in a future update. */
.hfu-single-product__actions .quantity {
	display: inline-flex;
	align-items: stretch;
	gap: 6px;
}

.hfu-single-product__actions .quantity .qty,
.hfu-single-product__actions .quantity .minus,
.hfu-single-product__actions .quantity .plus {
	box-sizing: border-box;
	min-height: 44px;
	border: 1px solid var(--hfu-border);
	border-radius: var(--hfu-radius-sm);
}

.hfu-single-product__actions .quantity .qty {
	width: 4.5rem;
	text-align: center;
	font-size: 1rem;
	padding: 0.6em 0.5em;
	background-color: var(--hfu-surface);
	/* The .minus/.plus buttons already provide stepping — hide the native
	   number-input spinner so there's only one set of controls. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.hfu-single-product__actions .quantity .qty::-webkit-inner-spin-button,
.hfu-single-product__actions .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hfu-single-product__actions .quantity .minus,
.hfu-single-product__actions .quantity .plus {
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: #E4E4E4;
	color: var(--hfu-charcoal);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hfu-single-product__actions .quantity .minus:hover,
.hfu-single-product__actions .quantity .plus:hover {
	background-color: #D0D0D0;
}

.hfu-single-product__actions .quantity .minus:active,
.hfu-single-product__actions .quantity .plus:active {
	background-color: #B0B0B0;
}

.hfu-single-product__actions .single_add_to_cart_button {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hfu-font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9em 1.75em;
	border-radius: var(--hfu-radius-pill);
	border: 2px solid transparent;
	background-color: var(--hfu-green);
	color: var(--hfu-charcoal);
	cursor: pointer;
	box-shadow: 0 10px 24px -6px rgba(43, 178, 14, 0.45);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hfu-single-product__actions .single_add_to_cart_button:hover,
.hfu-single-product__actions .single_add_to_cart_button:focus-visible {
	background-color: #249c0c;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -6px rgba(43, 178, 14, 0.55);
}

.hfu-single-product__actions .hfu-btn--secondary,
.hfu-single-product__actions .yith-wcwl-add-to-wishlist {
	flex: 1 1 220px;
}

/* ==========================================================================
   9. Responsive Breakpoints (mobile-first: base styles above are mobile)
   ========================================================================== */

/* Tablet and up */
@media screen and (min-width: 600px) {
	.hfu-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hfu-trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.hfu-sensory-breakdown {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop and up — the product grid switches to an auto-fill fluid layout
   so it naturally grows past 4 columns on ultrawide monitors instead of
   leaving dead space in the container's margins. */
@media screen and (min-width: 960px) {
	.hfu-product-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}

	.hfu-single-product {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: start;
	}

	.hfu-single-product__gallery {
		position: sticky;
		top: 1.5rem;
	}
}

/* ==========================================================================
   10. Header Logo
   ========================================================================== */

/* Targets the standard `the_custom_logo()` markup WordPress core outputs
   (any theme with add_theme_support('custom-logo') uses these two class
   names), so this works regardless of Emoza's specific header layout.
   Upload the logo via Appearance → Customize → Site Identity — see
   HYPERFOLKUS_IMPLEMENTATION.md for why it can't just be hardcoded here. */
.hfu-scope .custom-logo-link {
	display: flex;
	justify-content: center;
	margin: 0 auto 20px;
}

.hfu-scope .custom-logo {
	width: 100px;
	height: auto;
	transition: width 0.2s ease;
}

@media screen and (min-width: 960px) {
	.hfu-scope .custom-logo {
		width: 150px;
	}
}

/* ==========================================================================
   11. Accessibility Helpers
   ========================================================================== */
.hfu-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hfu-scope a:focus-visible,
.hfu-scope button:focus-visible,
.hfu-scope input:focus-visible,
.hfu-scope select:focus-visible {
	outline: 3px solid var(--hfu-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hfu-product-card,
	.hfu-product-card__media img,
	.hfu-btn {
		transition: none;
	}
}