/**
 * assets/css/main.css
 * =============================================================================
 * LaraibFinds — Main Theme Stylesheet
 * =============================================================================
 * This is the single file that controls the entire visual design of the
 * site: colors, fonts, spacing, buttons, cards, the header/footer, and every
 * page layout. It's organized into clearly labeled sections (use your
 * editor's search / Ctrl+F to jump to a section name in all caps, e.g.
 * "HERO SECTION").
 *
 * ---- WANT TO CHANGE THE COLORS OR FONTS? ----
 * Scroll down to "1. DESIGN TOKENS" right below this comment. Almost every
 * color, font, spacing value, shadow, and corner-radius used anywhere on the
 * site is defined ONCE there as a CSS custom property (variable), then
 * reused everywhere else. Change a value there and it updates site-wide.
 * =============================================================================
 */

/* =============================================================================
   1. DESIGN TOKENS — the design system in one place
   ============================================================================= */
:root {

	/* ---- COLOR PALETTE ----
	   A trustworthy, premium palette: deep pine/teal (credibility) + warm
	   ivory background (soft, editorial) + a warm coral accent (energy,
	   used ONLY for calls-to-action so it always stands out). */
	--color-primary: #0B3D3B;        /* deep pine teal — headings, header/footer bg, links */
	--color-primary-dark: #072928;   /* darker teal — hover states, footer */
	--color-primary-light: #2C6E68;  /* lighter teal — secondary accents, badges */
	--color-primary-tint: #E7F0EE;   /* very light teal — subtle backgrounds */

	--color-accent: #FF6B4A;         /* warm coral — buttons, CTAs, price tags */
	--color-accent-dark: #E4502F;    /* coral hover state */
	--color-accent-tint: #FFE8E0;    /* light coral background (badges, hover fills) */

	--color-gold: #F5B400;           /* star rating fill */
	--color-success: #1F8A57;        /* pros checkmarks */
	--color-danger: #D64545;         /* cons crosses */

	--color-bg: #FBF9F4;             /* warm ivory page background */
	--color-surface: #FFFFFF;        /* card / panel background */
	--color-surface-tint: #F4F1E9;   /* tinted section background (alternate sections) */

	--color-text: #1C2321;           /* body text — warm near-black, not pure black */
	--color-text-muted: #5C6864;     /* secondary text (meta, captions) */
	--color-text-inverse: #FDFBF6;   /* text on dark backgrounds */
	--color-border: #E6E1D6;         /* hairline borders */
	--color-border-strong: #D3CDBE;

	/* ---- TYPOGRAPHY ----
	   Fraunces = distinctive display serif for headlines (premium, editorial).
	   Inter = clean, highly readable sans-serif for body copy & UI. */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Type scale — fluid sizing (clamp) so text scales smoothly between mobile
	   and desktop instead of jumping at breakpoints. */
	--fs-h1: clamp(2.25rem, 1.85rem + 2vw, 3.75rem);
	--fs-h2: clamp(1.85rem, 1.55rem + 1.4vw, 2.75rem);
	--fs-h3: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
	--fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-h5: 1.125rem;
	--fs-h6: 1rem;
	--fs-body-lg: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xsmall: 0.75rem;

	/* ---- SPACING SCALE ----
	   Consistent multiples so nothing is cramped or randomly spaced. */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-7: 3rem;      /* 48px */
	--space-8: 4rem;      /* 64px */
	--space-9: 6rem;      /* 96px */
	--space-10: 8rem;     /* 128px */

	/* ---- SHAPE & DEPTH ---- */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(11, 61, 59, 0.06), 0 1px 3px rgba(11, 61, 59, 0.08);
	--shadow-md: 0 4px 12px rgba(11, 61, 59, 0.08), 0 2px 4px rgba(11, 61, 59, 0.06);
	--shadow-lg: 0 20px 40px -12px rgba(11, 61, 59, 0.18), 0 8px 16px -8px rgba(11, 61, 59, 0.1);
	--shadow-accent: 0 10px 24px -8px rgba(255, 107, 74, 0.45);

	--transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

	--container-width: 1240px;
	--container-width-narrow: 780px;
	--header-height: 84px;
}

/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* Respect visitors who've asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-primary);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 600;
	margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-family: var(--font-body); font-weight: 700; }
h6 { font-size: var(--fs-h6); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

p { margin: 0 0 var(--space-4); color: var(--color-text); }
p:last-child { margin-bottom: 0; }

small, .text-small { font-size: var(--fs-small); }

a.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 2px;
	transition: gap var(--transition-fast), color var(--transition-fast);
}
a.link-arrow:hover { gap: var(--space-3); color: var(--color-accent-dark); }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xsmall);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-3);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}
.skip-link {
	position: fixed;
	top: -100px; left: var(--space-4);
	z-index: 9999;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	transition: top var(--transition-fast);
}
.skip-link:focus {
	position: fixed;
	top: var(--space-4);
	width: auto; height: auto;
	clip: auto; overflow: visible;
}

/* Prose styling — used inside block-editor content areas (reviews, posts, pages) */
.page-article__content, .post-article__content, .product-review-body, .legal-page__content {
	font-size: var(--fs-body-lg);
	color: var(--color-text);
}
.page-article__content > *:first-child,
.post-article__content > *:first-child,
.product-review-body > *:first-child { margin-top: 0; }
.page-article__content h2, .post-article__content h2, .product-review-body h2, .legal-page__content h2 { margin-top: var(--space-8); }
.page-article__content h3, .post-article__content h3, .product-review-body h3, .legal-page__content h3 { margin-top: var(--space-6); }
.page-article__content ul, .post-article__content ul, .product-review-body ul, .legal-page__content ul,
.page-article__content ol, .post-article__content ol, .product-review-body ol, .legal-page__content ol {
	margin: 0 0 var(--space-5); padding-left: 1.4em; list-style: disc;
}
.page-article__content ol, .post-article__content ol, .product-review-body ol, .legal-page__content ol { list-style: decimal; }
.page-article__content li, .post-article__content li, .product-review-body li, .legal-page__content li { margin-bottom: var(--space-2); }
.page-article__content blockquote, .post-article__content blockquote, .product-review-body blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-5) var(--space-6);
	border-left: 4px solid var(--color-accent);
	background: var(--color-primary-tint);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.2em;
	color: var(--color-primary);
}
.page-article__content img, .post-article__content img, .product-review-body img {
	border-radius: var(--radius-md);
	margin: var(--space-6) 0;
}
.page-article__content a, .post-article__content a, .product-review-body a, .legal-page__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}
.page-article__content a:hover, .post-article__content a:hover, .product-review-body a:hover, .legal-page__content a:hover { color: var(--color-accent-dark); }
.page-article__content table, .product-review-body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.page-article__content table th, .product-review-body table th,
.page-article__content table td, .product-review-body table td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); text-align: left; }
.page-article__content table th, .product-review-body table th { background: var(--color-primary-tint); font-family: var(--font-body); }

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

.section { padding-block: var(--space-9); }
.section--tinted, .latest-posts--tinted { background: var(--color-surface-tint); }

.section__header { max-width: 640px; margin-bottom: var(--space-7); }
.section__header h2 { margin-bottom: var(--space-3); }
.section__header p { color: var(--color-text-muted); font-size: var(--fs-body-lg); }
.section__footer { display: flex; justify-content: center; margin-top: var(--space-7); }
.archive-description { color: var(--color-text-muted); font-size: var(--fs-body-lg); margin-top: var(--space-3); }

.page-links {
	display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
	margin-top: var(--space-7);
	font-weight: 700;
	font-size: var(--fs-small);
}
.page-links a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-primary-tint);
	color: var(--color-primary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.page-links a:hover { background: var(--color-primary); color: #fff; }

/* =============================================================================
   5. SCROLL-REVEAL ANIMATION
   ----------------------------------------------------------------------------
   Elements with class "fade-in-up" start slightly lower & transparent, then
   animate into place once assets/js/main.js detects (via IntersectionObserver)
   that they've entered the viewport, by adding the "is-visible" class.
   ============================================================================= */
.fade-in-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
/* Fallback: if JS fails to load for any reason, don't hide content forever. */
.no-js .fade-in-up { opacity: 1; transform: none; }

/* =============================================================================
   6. BUTTONS
   ============================================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1;
	padding: 0.95em 1.7em;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }
.btn:active { transform: scale(0.97); }

.btn--accent {
	background: var(--color-accent);
	color: #fff;
	box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--color-accent-dark); transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 28px -8px rgba(255, 107, 74, 0.55); }

.btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-text-inverse); transform: translateY(-2px); }

.btn--ghost {
	background: var(--color-primary-tint);
	color: var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: var(--color-text-inverse); }

.btn--large { padding: 1.1em 2.2em; font-size: 1.05rem; }
.btn--small { padding: 0.6em 1.2em; font-size: var(--fs-small); }
.btn--full { width: 100%; }

/* =============================================================================
   7. HEADER / NAVIGATION
   ----------------------------------------------------------------------------
   Starts transparent over the hero, becomes a solid white bar with a shadow
   once the visitor scrolls (see main.js, which toggles ".is-scrolled").
   ============================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	width: 100%;
	height: var(--header-height);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background-color var(--transition), box-shadow var(--transition), height var(--transition);
}
.site-header.is-scrolled {
	background: rgba(251, 249, 244, 0.92);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-sm);
	height: 72px;
}
/* Pages without a full-bleed hero always show the solid bar (readability). */
body:not(.home) .site-header { background: rgba(251, 249, 244, 0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	width: 100%;
}

.site-branding img { max-height: 44px; width: auto; }
.site-branding__text-logo {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: -0.01em;
}

.primary-navigation { flex: 1; display: flex; justify-content: center; }
.nav-menu { display: flex; align-items: center; gap: var(--space-6); }
.nav-menu li { position: relative; }
.nav-menu a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-primary);
	padding: var(--space-2) 0;
	position: relative;
}
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 0; height: 2px;
	background: var(--color-accent);
	transition: width var(--transition-fast);
}
.nav-menu a:hover::after, .nav-menu .current-menu-item > a::after { width: 100%; }

/* Dropdown support for menu items with children */
.nav-menu ul.sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 200px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 10;
}
.nav-menu li:hover > ul.sub-menu, .nav-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu ul.sub-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.nav-menu ul.sub-menu a:hover { background: var(--color-primary-tint); }
.nav-menu ul.sub-menu a::after { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.site-header__cta { padding: 0.7em 1.4em; font-size: var(--fs-small); }

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px; height: 44px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
}
.mobile-menu-toggle__bar {
	width: 22px; height: 2px;
	background: var(--color-primary);
	border-radius: 2px;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   8. HERO SECTION
   ============================================================================= */
.hero {
	position: relative;
	padding-top: calc(var(--space-9) + var(--header-height) * 0.4);
	padding-bottom: var(--space-9);
	background:
		radial-gradient(circle at 85% 20%, rgba(255, 107, 74, 0.12), transparent 45%),
		radial-gradient(circle at 10% 80%, rgba(44, 110, 104, 0.14), transparent 45%),
		var(--color-primary-tint);
	overflow: hidden;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-8);
	align-items: center;
}
.hero__content .eyebrow { color: var(--color-accent-dark); }
.hero__heading { margin-bottom: var(--space-5); }
.hero__subtext { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.hero__rating-proof { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
.hero__rating-stars { color: var(--color-gold); letter-spacing: 2px; }

.hero__visual { position: relative; }
.hero__visual-shape {
	position: absolute;
	inset: -6% -6% 6% 6%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	border-radius: var(--radius-lg);
	z-index: 0;
}
.hero__image {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.hero__image--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	background: var(--color-surface);
	color: var(--color-text-muted);
	text-align: center;
	padding: var(--space-6);
}
.hero__image--placeholder svg { width: 48px; height: 48px; fill: var(--color-border-strong); }
.hero__badge {
	position: absolute;
	bottom: var(--space-5); left: calc(var(--space-5) * -1);
	z-index: 2;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4) var(--space-5);
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.hero__badge-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-accent); }
.hero__badge span:last-child { font-size: var(--fs-xsmall); color: var(--color-text-muted); font-weight: 600; }

/* =============================================================================
   9. CARDS — Product cards & Post cards
   ============================================================================= */
.product-grid, .post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.product-card, .post-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
	display: flex;
	flex-direction: column;
}
.product-card:hover, .post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

.product-card__image-link, .post-card__image-link { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-tint); }
.product-card__image, .post-card__image {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.product-card:hover .product-card__image, .post-card:hover .post-card__image { transform: scale(1.06); }
.product-card__image--placeholder, .post-card__image--placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.product-card__price-tag {
	position: absolute;
	top: var(--space-3); right: var(--space-3);
	background: var(--color-surface);
	color: var(--color-primary);
	font-weight: 800;
	font-size: var(--fs-small);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
}

.product-card__body, .post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__category, .post-card__category {
	font-size: var(--fs-xsmall);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary-light);
}
.product-card__title, .post-card__title { font-size: var(--fs-h5); margin-bottom: 0; }
.product-card__title a, .post-card__title a { transition: color var(--transition-fast); }
.product-card__title a:hover, .post-card__title a:hover { color: var(--color-accent-dark); }

.product-card__blurb, .post-card__excerpt { color: var(--color-text-muted); font-size: var(--fs-small); flex: 1; }

.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }

.post-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xsmall); color: var(--color-text-muted); margin-top: auto; }

/* Star rating component (used on cards + single product page) */
.star-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--color-gold); }
.star-rating .star { width: 17px; height: 17px; fill: currentColor; }
.star-rating .star--empty { color: var(--color-border-strong); }
.star-rating__number { margin-left: var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--color-text); }

/* =============================================================================
   10. TRUST STRIP
   ============================================================================= */
.trust-strip { padding-block: var(--space-9); }
.trust-strip__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-8);
	align-items: center;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	position: relative;
	overflow: hidden;
}
.trust-strip__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% -10%, rgba(255, 107, 74, 0.25), transparent 50%);
	pointer-events: none;
}
.trust-strip__photo img, .trust-strip__photo-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	border: 4px solid rgba(255, 255, 255, 0.15);
}
.trust-strip__photo-placeholder { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); }
.trust-strip__photo-placeholder svg { width: 64px; height: 64px; fill: rgba(255, 255, 255, 0.4); }
.trust-strip__content { position: relative; z-index: 1; }
.trust-strip__content .eyebrow { color: #FFB199; }
.trust-strip__content h2, .trust-strip__content p { color: var(--color-text-inverse); }
.trust-strip__content p { opacity: 0.88; font-size: var(--fs-body-lg); }
.trust-strip__content .link-arrow { color: #fff; border-bottom-color: var(--color-accent); }
.trust-strip__content .link-arrow:hover { color: #FFB199; }

/* =============================================================================
   11. NEWSLETTER
   ============================================================================= */
.newsletter { padding-block: var(--space-9); }
.newsletter__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-6);
	box-shadow: var(--shadow-md);
}
.newsletter__icon {
	width: 56px; height: 56px;
	margin: 0 auto var(--space-5);
	display: flex; align-items: center; justify-content: center;
	background: var(--color-accent-tint);
	border-radius: var(--radius-full);
}
.newsletter__icon svg { width: 26px; height: 26px; fill: var(--color-accent-dark); }
.newsletter__heading { margin-bottom: var(--space-3); }
.newsletter__text { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.newsletter__form { display: flex; gap: var(--space-3); max-width: 420px; margin: 0 auto var(--space-4); }
.newsletter__form input {
	flex: 1;
	padding: 0.9em 1.2em;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-full);
	font-family: inherit;
	font-size: var(--fs-body);
	transition: border-color var(--transition-fast);
}
.newsletter__form input:focus { outline: none; border-color: var(--color-primary); }
.newsletter__disclaimer { font-size: var(--fs-xsmall); color: var(--color-text-muted); }

/* =============================================================================
   12. FOOTER
   ============================================================================= */
.site-footer { background: var(--color-primary-dark); color: var(--color-text-inverse); padding-top: var(--space-9); margin-top: var(--space-9); }
.site-footer__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: var(--space-7);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer .site-branding__text-logo { color: #fff; }
.site-footer__tagline { color: rgba(253, 251, 246, 0.7); margin-top: var(--space-3); max-width: 32ch; }

.social-icons { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social-icons__link {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-full);
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.social-icons__link svg { width: 16px; height: 16px; fill: #fff; }
.social-icons__link:hover { background: var(--color-accent); transform: translateY(-3px); }

.footer-nav-menu, .footer-widget ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-nav-menu a, .footer-widget a { color: rgba(253, 251, 246, 0.78); transition: color var(--transition-fast); }
.footer-nav-menu a:hover, .footer-widget a:hover { color: #fff; }
.footer-widget__title { color: #fff; font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
/* Modern WordPress often auto-fills a brand-new widget area with
   block-based widgets (Archives, Categories, etc.) whose headings render as
   a plain <h2 class="wp-block-heading"> — NOT the .footer-widget__title
   class above. Left alone, those headings would inherit the global h1-h6
   color (dark teal), which is nearly invisible on this dark footer. This
   catches ANY heading inside the footer, classic widget or block widget. */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: var(--color-text-inverse); }
.site-footer .footer-widget p { color: rgba(253, 251, 246, 0.78); }

.site-footer__disclosure {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding-block: var(--space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(253, 251, 246, 0.65);
	font-size: var(--fs-small);
}
.site-footer__disclosure svg { width: 18px; height: 18px; fill: rgba(253, 251, 246, 0.5); flex-shrink: 0; margin-top: 2px; }
.site-footer__disclosure p { margin: 0; }

.site-footer__bottom { padding-block: var(--space-5); text-align: center; font-size: var(--fs-small); color: rgba(253, 251, 246, 0.55); }

.back-to-top {
	position: fixed;
	bottom: var(--space-5); right: var(--space-5);
	z-index: 400;
	width: 46px; height: 46px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 18px; height: 18px; fill: #fff; }
.back-to-top:hover { background: var(--color-accent); }

/* =============================================================================
   13. BREADCRUMBS
   ============================================================================= */
.breadcrumbs { margin-block: var(--space-6) var(--space-4); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-text-muted); }
.breadcrumbs__list li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--color-border-strong); }
.breadcrumbs__list a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.breadcrumbs__list a:hover { color: var(--color-primary); }
.breadcrumbs__list li[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

/* =============================================================================
   14. SINGLE PRODUCT PAGE
   ============================================================================= */
.single-product .container { padding-top: var(--space-4); padding-bottom: var(--space-9); }

.product-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); margin-bottom: var(--space-8); }

.product-gallery__main {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-tint);
	box-shadow: var(--shadow-md);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.product-gallery__placeholder svg { width: 64px; height: 64px; fill: var(--color-border-strong); }
.product-gallery__video { position: absolute; inset: 0; background: #000; }
.product-gallery__video iframe { width: 100%; height: 100%; border: 0; }

.product-gallery__thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.product-gallery__thumb {
	width: 72px; height: 72px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--color-surface-tint);
	padding: 0;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover { transform: translateY(-2px); }
.product-gallery__thumb.is-active { border-color: var(--color-accent); }
.product-gallery__thumb--video { color: var(--color-primary); gap: 2px; }
.product-gallery__thumb--video svg { width: 20px; height: 20px; fill: var(--color-primary); }
.product-gallery__thumb--video span { font-size: 0.65rem; font-weight: 700; }

.product-hero__category {
	display: inline-block;
	font-size: var(--fs-xsmall); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--color-primary-light);
	margin-bottom: var(--space-2);
}
.product-hero__title { margin-bottom: var(--space-3); }
.product-hero__rating { margin-bottom: var(--space-4); }
.product-hero__verdict { font-size: var(--fs-body-lg); color: var(--color-text-muted); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.product-hero__verdict strong { color: var(--color-primary); }

.product-hero__price { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.product-hero__price-label { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 600; }
.product-hero__price-value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--color-primary); }

.affiliate-disclosure-box {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	background: var(--color-accent-tint);
	border: 1px solid #FFD2C2;
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}
.affiliate-disclosure-box svg { width: 20px; height: 20px; fill: var(--color-accent-dark); flex-shrink: 0; margin-top: 1px; }
.affiliate-disclosure-box p { margin: 0; font-size: var(--fs-small); color: #7A3018; }

#main-amazon-cta { margin-bottom: var(--space-3); }
.product-hero__updated { font-size: var(--fs-xsmall); color: var(--color-text-muted); text-align: center; }

/* Pros & Cons */
.pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-9);
}
.pros-cons__col { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.pros-cons__col h2 { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.pros-cons__col--pros h2 { color: var(--color-success); }
.pros-cons__col--cons h2 { color: var(--color-danger); }
.pros-cons__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.pros-cons__col li { display: flex; align-items: flex-start; gap: var(--space-3); }
.pros-cons__col li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.pros-cons__col--pros li svg { fill: var(--color-success); }
.pros-cons__col--cons li svg { fill: none; }
.pros-cons__col--cons svg { color: var(--color-danger); }

.product-review-body { max-width: var(--container-width-narrow); margin: 0 auto var(--space-9); }

/* Sticky "Check Price" bar — revealed by main.js once you scroll past the
   main CTA button, so it's always one tap away. */
.sticky-cta-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 600;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -8px 24px rgba(11, 61, 59, 0.1);
	transform: translateY(110%);
	transition: transform var(--transition-slow);
}
.sticky-cta-bar.is-visible { transform: translateY(0); }
.sticky-cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.sticky-cta-bar__product { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sticky-cta-bar__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.sticky-cta-bar__title { display: block; font-weight: 700; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.sticky-cta-bar__price { display: block; font-size: var(--fs-xsmall); color: var(--color-text-muted); }

/* =============================================================================
   15. RELATED PRODUCTS
   ============================================================================= */
.related-products { padding-top: var(--space-8); border-top: 1px solid var(--color-border); }

/* =============================================================================
   16. SINGLE BLOG POST
   ============================================================================= */
.post-article__header { max-width: var(--container-width-narrow); margin-inline: auto var(--space-6); }
.post-article__category { display: inline-block; font-size: var(--fs-xsmall); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-light); margin-bottom: var(--space-2); }
.post-article__title { margin-bottom: var(--space-5); }
.post-article__meta { display: flex; align-items: center; gap: var(--space-3); }
.post-article__avatar { border-radius: var(--radius-full); }
.post-article__author { font-weight: 700; display: block; }
.post-article__meta-sub { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xsmall); color: var(--color-text-muted); }
.post-article__image { margin-block: var(--space-7); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.post-article__image img { width: 100%; }
.post-article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* =============================================================================
   17. COMMENTS
   ============================================================================= */
.comments-wrap { max-width: var(--container-width-narrow); margin: var(--space-9) auto 0; }
.comments-area__title { margin-bottom: var(--space-6); }
.comment-list { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); }
.comment-list .children { margin-top: var(--space-5); margin-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.comment-body { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.comment-author { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.comment-author .avatar { border-radius: var(--radius-full); }
.comment-author .fn { font-weight: 700; font-style: normal; }
.comment-metadata { font-size: var(--fs-xsmall); color: var(--color-text-muted); }
.comment-metadata a { color: inherit; }
.comment-reply-link { font-size: var(--fs-small); font-weight: 700; color: var(--color-primary); }

.comment-form { display: flex; flex-direction: column; gap: var(--space-4); }
.comment-form label { font-weight: 600; margin-bottom: var(--space-2); display: block; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-body);
	transition: border-color var(--transition-fast);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--color-primary); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: var(--space-2); }

/* =============================================================================
   18. GENERIC PAGE ARTICLE
   ============================================================================= */
.page-article__header { text-align: center; margin-bottom: var(--space-6); }
.page-article__image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-7); box-shadow: var(--shadow-md); }

/* =============================================================================
   19. ABOUT PAGE
   ============================================================================= */
.about-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); align-items: center; margin-bottom: var(--space-8); }
.about-intro__photo img, .about-intro__photo-placeholder { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-intro__photo-placeholder { background: var(--color-surface-tint); display: flex; align-items: center; justify-content: center; }
.about-intro__photo-placeholder svg { width: 72px; height: 72px; fill: var(--color-border-strong); }
.about-intro__lead { font-size: var(--fs-body-lg); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
.about-stats__item { text-align: center; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); box-shadow: var(--shadow-sm); }
.about-stats__number { display: block; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--color-accent); }
.about-stats__label { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 600; }

/* =============================================================================
   20. CONTACT PAGE
   ============================================================================= */
.contact-page__intro { text-align: center; margin-bottom: var(--space-6); }
.contact-form { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-5); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.contact-form__field label { display: block; font-weight: 700; margin-bottom: var(--space-2); font-size: var(--fs-small); }
.contact-form__field input, .contact-form__field textarea {
	width: 100%;
	padding: 0.9em 1.1em;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-body);
	background: var(--color-bg);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-weight: 600; }
.form-notice--success { background: #E4F5EC; color: var(--color-success); }
.form-notice--error { background: #FBE7E7; color: var(--color-danger); }

/* =============================================================================
   21. LEGAL PAGES (Privacy Policy / Affiliate Disclosure)
   ============================================================================= */
.legal-page__updated { color: var(--color-text-muted); font-size: var(--fs-small); }

.disclosure-hero {
	display: flex; align-items: center; gap: var(--space-4);
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-7);
	margin-bottom: var(--space-7);
}
.disclosure-hero svg { width: 40px; height: 40px; fill: var(--color-accent); flex-shrink: 0; }
.disclosure-hero p { font-size: var(--fs-body-lg); margin: 0; }

.disclosure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-block: var(--space-8); }
.disclosure-grid__item { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.disclosure-grid__item svg { width: 32px; height: 32px; fill: var(--color-accent); margin-bottom: var(--space-4); }
.disclosure-grid__item h3 { font-size: var(--fs-h5); margin-bottom: var(--space-2); }
.disclosure-grid__item p { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; }

/* =============================================================================
   22. FILTER PILLS (Products archive, category archive, Blog Archive template)
   ============================================================================= */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.filter-bar--secondary { margin-top: calc(var(--space-7) * -1 + var(--space-4)); margin-bottom: var(--space-7); }
.filter-pill {
	display: inline-flex; align-items: center;
	padding: 0.6em 1.3em;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--color-text);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.filter-pill:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.filter-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-pill--small { padding: 0.45em 1em; font-size: var(--fs-xsmall); }

/* =============================================================================
   23. SEARCH
   ============================================================================= */
.search-form { display: flex; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 480px; }
.search-form__field {
	flex: 1;
	padding: 0.9em 1.2em;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-full);
	font-family: inherit;
	font-size: var(--fs-body);
}
.search-form__field:focus { outline: none; border-color: var(--color-primary); }
.search-form__submit {
	width: 48px; height: 48px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background-color var(--transition-fast);
}
.search-form__submit:hover { background: var(--color-accent); }
.search-form__submit svg { width: 18px; height: 18px; fill: #fff; }
.section__header h1 span { color: var(--color-accent-dark); }

/* =============================================================================
   24. 404 PAGE
   ============================================================================= */
.error-404-page { padding-block: var(--space-9); }
.error-404 { max-width: 520px; margin-inline: auto; text-align: center; }
.error-404__code { display: block; font-family: var(--font-display); font-size: 6rem; font-weight: 700; color: var(--color-accent-tint); line-height: 1; -webkit-text-stroke: 2px var(--color-accent); }
.error-404 p { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.error-404 .search-form { margin-inline: auto; margin-bottom: var(--space-6); }
.error-404__links { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* =============================================================================
   25. PAGINATION
   ============================================================================= */
.pagination { margin-top: var(--space-8); display: flex; justify-content: center; }
.pagination__list { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pagination__list a, .pagination__list span {
	display: flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: var(--fs-small);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pagination__list a:hover { border-color: var(--color-primary); }
.pagination__list span.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* =============================================================================
   26. RESPONSIVE — TABLET
   ============================================================================= */
@media (max-width: 1024px) {
	.product-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { order: -1; max-width: 480px; margin-inline: auto; }
	.trust-strip__inner { grid-template-columns: 1fr; text-align: center; }
	.trust-strip__photo { max-width: 260px; margin-inline: auto; }
	.product-hero { grid-template-columns: 1fr; }
	.about-intro { grid-template-columns: 1fr; text-align: center; }
	.about-intro__photo { max-width: 320px; margin-inline: auto; }
	.about-intro .social-icons { justify-content: center; }
	.disclosure-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   27. RESPONSIVE — MOBILE
   ----------------------------------------------------------------------------
   This is a genuinely distinct mobile layout, not just a squeezed desktop
   view: single-column stacked cards, a slide-in hamburger menu, a
   full-width sticky CTA bar, and reduced section spacing so nothing feels
   cramped on a small screen.
   ============================================================================= */
@media (max-width: 767px) {
	:root { --header-height: 68px; }

	.section { padding-block: var(--space-7); }
	.container { padding-inline: var(--space-4); }

	.product-grid, .post-grid { grid-template-columns: 1fr; gap: var(--space-5); }
	.pros-cons { grid-template-columns: 1fr; }
	.about-stats { grid-template-columns: 1fr; }
	.disclosure-grid { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }

	/* Mobile nav: slides down from under the header as a full-width panel */
	.mobile-menu-toggle { display: flex; }
	.primary-navigation {
		position: fixed;
		top: var(--header-height); left: 0; right: 0;
		background: var(--color-surface);
		box-shadow: var(--shadow-lg);
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		justify-content: flex-start;
	}
	.primary-navigation.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: var(--space-4); }
	.nav-menu li { border-bottom: 1px solid var(--color-border); }
	.nav-menu li:last-child { border-bottom: none; }
	.nav-menu a { display: block; padding: var(--space-4) var(--space-2); }
	.nav-menu ul.sub-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: var(--space-4); }
	.nav-menu li.is-submenu-open > ul.sub-menu { display: block; }

	.site-header__cta { display: none; }

	.hero { padding-top: calc(var(--space-7) + var(--header-height) * 0.5); padding-bottom: var(--space-7); }
	.hero__badge { left: var(--space-3); bottom: var(--space-3); padding: var(--space-3); }
	.hero__actions { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

	.product-hero__price-value { font-size: 1.75rem; }

	.sticky-cta-bar__inner { flex-direction: row; gap: var(--space-3); }
	.sticky-cta-bar__title { max-width: 22ch; }
	.sticky-cta-bar .btn { padding: 0.75em 1.2em; font-size: var(--fs-small); }

	.site-footer__top { grid-template-columns: 1fr; gap: var(--space-7); text-align: center; }
	.social-icons { justify-content: center; }

	.contact-form { padding: var(--space-5); }
}