/* ==========================================================================
   Cozy Garden — main stylesheet
   ========================================================================== */

:root {
	--color-green-dark: #1f3320;
	--color-green: #2f5233;
	--color-green-mid: #3f6b3f;
	--color-green-light: #eef4ea;
	--color-cream: #faf9f5;
	--color-text: #1e241c;
	--color-text-muted: #5c6558;
	--color-border: #e2e6dd;
	--color-gold: #e8b93a;
	--color-white: #ffffff;
	--color-accent: var(--color-green);
	--color-heading: var(--color-text);
	--color-button-bg: var(--color-green);
	--color-button-text: var(--color-white);
	--header-bg: var(--color-white);
	--header-text: var(--color-text);
	--hero-accent-color: var(--color-accent);
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-weight-heading: 700;
	--font-weight-body: 400;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-card: 0 4px 20px rgba(31, 51, 32, 0.08);
	--max-width: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-body);
	color: var(--color-text);
	background-color: var(--color-cream);
	background-image: var(--body-bg-image, none);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	line-height: 1.5;
}

body.cg-layout-boxed #page {
	max-width: var(--site-max-width, 1400px);
	margin: 0 auto;
	background-color: var(--color-cream);
}

section.is-full-width > * {
	max-width: none;
}
.faq-section.is-full-width {
	max-width: none;
}

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

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

button { font-family: inherit; cursor: pointer; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 { color: var(--color-heading); font-family: var(--font-heading); }

.accent { color: var(--color-accent); }
.hero-title__accent { color: var(--hero-accent-color); }

.section-title {
	text-align: center;
	font-size: var(--font-size-h2, clamp(1.5rem, 3vw, 2.1rem));
	font-weight: var(--font-weight-heading);
	margin: 0 0 2rem;
}

.section-subtitle {
	text-align: center;
	max-width: 700px;
	margin: -1.25rem auto 2rem;
	color: var(--color-text-muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--color-button-bg);
	color: var(--color-button-text);
	border: none;
	border-radius: var(--radius-sm);
	padding: 0.9rem 1.5rem;
	font-size: var(--font-size-button, 1rem);
	font-weight: 600;
	transition: background 0.2s ease, transform 0.1s ease;
}

.btn:hover { background: var(--color-green-dark); }
.btn:active { transform: translateY(1px); }
.btn--large { width: 100%; padding: 1.1rem 1.5rem; font-size: 1.05rem; }

/* ---------- Announcement bar ---------- */
.announcement-bar {
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.8rem;
}
.announcement-bar__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	padding: 0.5rem 1rem;
	flex-wrap: wrap;
}
.announcement-item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

/* ---------- Site header ---------- */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--header-bg); color: var(--header-text); }
.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--header-padding, 1rem 1.5rem);
	min-height: var(--header-height, auto);
	gap: 1rem;
}

body.cg-sticky-header .site-header { position: sticky; top: 0; z-index: 100; }
body.cg-transparent-header .site-header { background: transparent; border-bottom-color: transparent; position: absolute; width: 100%; z-index: 10; }

body.cg-logo-center .site-header__inner { flex-wrap: wrap; justify-content: center; text-align: center; }
body.cg-logo-center .site-branding { width: 100%; display: flex; justify-content: center; }

body.cg-menu-left .main-navigation { margin-right: auto; }
body.cg-menu-center .main-navigation { margin-left: auto; margin-right: auto; }
body.cg-menu-right .main-navigation { margin-left: auto; }

body.cg-icons-left .header-actions { order: -1; }
body.cg-icons-right .header-actions { margin-left: auto; }
.site-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--color-green-dark); }
.site-logo--image img { max-height: 48px; width: auto; }
.site-logo__icon { color: var(--color-green); }
.main-navigation .site-nav { display: flex; gap: 2rem; }
.main-navigation .site-nav a { font-weight: 600; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.main-navigation .site-nav a:hover,
.main-navigation .site-nav li:first-child a { border-color: var(--color-green); }
.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-icon-link { position: relative; display: inline-flex; color: var(--color-text); }
.header-cart-link .cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* ---------- Hero ---------- */
.hero-section { padding: var(--hero-spacing, 2.5rem 1.5rem); }
.hero-section__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--hero-ratio, 1.1fr 1fr);
	min-height: var(--hero-height, auto);
	gap: 3rem;
}
.hero-section--stacked .hero-section__inner { grid-template-columns: 1fr; }
.hero-section--image-right .hero-gallery { order: 2; }
.hero-section--image-right .hero-info { order: 1; }
.hero-section--center .hero-info { text-align: center; }
.hero-section--center .hero-rating,
.hero-section--center .hero-features,
.hero-section--center .hero-microcopy { justify-content: center; }
.hero-gallery__main {
	position: relative;
	border-radius: var(--hero-radius, var(--radius-lg));
	overflow: hidden;
	background: var(--color-green-dark);
	aspect-ratio: 4 / 5;
}
.hero-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.hero-gallery__video { display: none; width: 100%; height: 100%; object-fit: cover; }
.hero-gallery__main.is-playing img,
.hero-gallery__main.is-playing .play-button { display: none; }
.hero-gallery__main.is-playing .hero-gallery__video { display: block; }
.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-green-dark);
}
.hero-gallery__thumbs { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.hero-thumb {
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	overflow: hidden;
	padding: 0;
	background: none;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
}
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-thumb.is-active { border-color: var(--color-green); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}
.badge--bestseller { background: var(--color-green-light); color: var(--color-green-dark); }

.hero-title { font-size: var(--font-size-h1, clamp(1.8rem, 3.4vw, 2.6rem)); line-height: 1.2; margin: 0 0 0.75rem; font-weight: 800; }
.hero-subtitle { color: var(--color-text-muted); margin: 0 0 1rem; font-size: 1.05rem; }

.hero-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.95rem; }
.stars { color: var(--color-gold); letter-spacing: 2px; }
.hero-rating__count { color: var(--color-text-muted); }

.bundle-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.bundle-card {
	position: relative;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1rem 0.75rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	cursor: pointer;
	background: var(--color-white);
	transition: border-color 0.15s ease;
}
.bundle-card input { position: absolute; opacity: 0; pointer-events: none; }
.bundle-card.is-selected,
.bundle-card:has(input:checked) { border-color: var(--color-green); background: var(--color-green-light); }
.bundle-card__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
}
.bundle-card__label { font-weight: 600; }
.bundle-card__price { font-weight: 800; font-size: 1.05rem; }
.bundle-card__sub { font-weight: 400; font-size: 0.75rem; color: var(--color-text-muted); }

.hero-features { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; }
.hero-feature { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); }
.hero-feature svg { width: 18px; height: 18px; color: var(--color-green); }

.hero-microcopy { display: flex; gap: 1.5rem; justify-content: center; margin-top: 0.75rem; font-size: 0.8rem; color: var(--color-text-muted); flex-wrap: wrap; }

/* ---------- Benefits ---------- */
.benefits-section {
	padding-top: var(--benefits-padding-top, 3rem);
	padding-bottom: var(--benefits-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--benefits-margin-top, 0);
	margin-bottom: var(--benefits-margin-bottom, 0);
	background-color: var(--benefits-bg-color, var(--color-green-light));
	background-image: var(--benefits-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--benefits-border-radius, 0);
}
.benefits-section .section-title,
.benefits-section .section-subtitle { text-align: var(--benefits-text-align, center); }
.benefits-grid {
	max-width: var(--benefits-max-width, var(--max-width));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--benefits-columns, 6), 1fr);
	gap: var(--benefits-gap, 1.25rem);
}
.benefit-card {
	width: var(--card-width, auto);
	min-height: var(--card-min-height, auto);
	background: var(--card-bg, var(--color-white));
	border-radius: var(--card-radius, var(--radius-md));
	border: 1px solid var(--card-border-color, transparent);
	padding: var(--card-padding, 1.5rem 1rem);
	text-align: var(--card-text-align, center);
	box-shadow: var(--card-shadow, var(--shadow-card));
}
.benefit-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-green-light); color: var(--color-green); margin-bottom: 0.75rem; }
.benefit-card__icon svg { width: var(--card-icon-size, 22px); height: var(--card-icon-size, 22px); }
.benefit-card h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.benefit-card p { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }

/* ---------- Before / After ---------- */
.before-after-section {
	padding-top: var(--before_after-padding-top, 3rem);
	padding-bottom: var(--before_after-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--before_after-margin-top, 0);
	margin-bottom: var(--before_after-margin-bottom, 0);
	background-color: var(--before_after-bg-color, transparent);
	background-image: var(--before_after-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--before_after-border-radius, 0);
}
.before-after-section .section-title,
.before-after-section .section-subtitle { text-align: var(--before_after-text-align, center); }
.before-after {
	position: relative;
	max-width: var(--before_after-max-width, var(--max-width));
	margin: 0 auto;
	display: flex;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 21 / 9;
}
.before-after-section.is-full-width .before-after { max-width: none; }
.before-after__panel { position: relative; overflow: hidden; }
.before-after__panel img { width: 100%; height: 100%; object-fit: cover; }
.before-after__panel--before { width: 100%; }
.before-after__panel--after {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	border-right: 3px solid var(--color-white);
}
.before-after__label {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(0, 0, 0, 0.7);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}
.before-after__label--after { background: var(--color-green); }
.before-after__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	box-shadow: var(--shadow-card);
	z-index: 2;
}

/* ---------- Outdoor spaces ---------- */
.spaces-section {
	padding-top: var(--spaces-padding-top, 3rem);
	padding-bottom: var(--spaces-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--spaces-margin-top, 0);
	margin-bottom: var(--spaces-margin-bottom, 0);
	background-color: var(--spaces-bg-color, var(--color-green-light));
	background-image: var(--spaces-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--spaces-border-radius, 0);
}
.spaces-section .section-title,
.spaces-section .section-subtitle { text-align: var(--spaces-text-align, center); }
.spaces-grid {
	max-width: var(--spaces-max-width, var(--max-width));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--spaces-columns, 6), 1fr);
	gap: var(--spaces-gap, 1rem);
}
.space-card {
	margin: 0;
	width: var(--card-width, auto);
	min-height: var(--card-min-height, auto);
	border-radius: var(--card-radius, var(--radius-md));
	border: 1px solid var(--card-border-color, transparent);
	overflow: hidden;
	background: var(--card-bg, var(--color-white));
	box-shadow: var(--card-shadow, var(--shadow-card));
}
.space-card img { aspect-ratio: 1; object-fit: cover; height: var(--card-image-height, auto); }
.space-card figcaption { text-align: var(--card-text-align, center); padding: 0.6rem 0.4rem; font-size: 0.85rem; font-weight: 600; }

/* ---------- Reviews ---------- */
.reviews-section {
	padding-top: var(--reviews-padding-top, 3rem);
	padding-bottom: var(--reviews-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--reviews-margin-top, 0);
	margin-bottom: var(--reviews-margin-bottom, 0);
	background-color: var(--reviews-bg-color, transparent);
	background-image: var(--reviews-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--reviews-border-radius, 0);
}
.reviews-section .section-title,
.reviews-section .section-subtitle { text-align: var(--reviews-text-align, center); }
.reviews-grid {
	max-width: var(--reviews-max-width, var(--max-width));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--reviews-columns, 5), 1fr);
	gap: var(--reviews-gap, 1.25rem);
}
.review-card {
	width: var(--card-width, auto);
	min-height: var(--card-min-height, auto);
	background: var(--card-bg, var(--color-white));
	border: 1px solid var(--card-border-color, var(--color-border));
	border-radius: var(--card-radius, var(--radius-md));
	padding: var(--card-padding, 1.25rem);
	text-align: var(--card-text-align, left);
}
.review-card__text { font-size: 0.85rem; margin: 0.6rem 0 1rem; color: var(--color-text); }
.review-card__author { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.review-card__author strong { display: block; font-size: 0.85rem; }
.review-card__author small { color: var(--color-text-muted); }
.review-card__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-green-light);
	color: var(--color-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}
.review-card__avatar--image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- How it works ---------- */
.how-it-works-section {
	padding-top: var(--how_it_works-padding-top, 3rem);
	padding-bottom: var(--how_it_works-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--how_it_works-margin-top, 0);
	margin-bottom: var(--how_it_works-margin-bottom, 0);
	background-color: var(--how_it_works-bg-color, var(--color-green-light));
	background-image: var(--how_it_works-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--how_it_works-border-radius, 0);
}
.how-it-works-section .section-title,
.how-it-works-section .section-subtitle { text-align: var(--how_it_works-text-align, center); }
.how-it-works-grid {
	max-width: var(--how_it_works-max-width, var(--max-width));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--how_it_works-columns, 3), 1fr);
	gap: var(--how_it_works-gap, 1.5rem);
}
.step-card {
	width: var(--card-width, auto);
	min-height: var(--card-min-height, auto);
	background: var(--card-bg, var(--color-white));
	border: 1px solid var(--card-border-color, transparent);
	border-radius: var(--card-radius, var(--radius-md));
	padding: var(--card-padding, 1.5rem);
	text-align: var(--card-text-align, left);
	box-shadow: var(--card-shadow, var(--shadow-card));
	position: relative;
}
.step-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-green);
	color: var(--color-white);
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 0.75rem;
}
.step-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.step-card p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }
.step-card__icon { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--color-green); }
.step-card__icon svg { width: var(--card-icon-size, 22px); height: var(--card-icon-size, 22px); }

/* ---------- FAQ ---------- */
.faq-section {
	padding-top: var(--faq-padding-top, 3rem);
	padding-bottom: var(--faq-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin: var(--faq-margin-top, 0) auto var(--faq-margin-bottom, 0);
	max-width: var(--faq-max-width, 800px);
	background-color: var(--faq-bg-color, transparent);
	background-image: var(--faq-bg-image, none);
	background-size: cover;
	background-position: center;
	border-radius: var(--faq-border-radius, 0);
}
.faq-section .section-title,
.faq-section .section-subtitle { text-align: var(--faq-text-align, center); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
	width: 100%;
	background: none;
	border: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.1rem 0.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: left;
	color: var(--color-text);
}
.faq-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-panel { padding: 0 0.25rem 1.1rem; color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- CTA banner ---------- */
.cta-banner {
	padding-top: var(--cta-padding-top, 1rem);
	padding-bottom: var(--cta-padding-bottom, 3rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--cta-margin-top, 0);
	margin-bottom: var(--cta-margin-bottom, 0);
}
.cta-banner__inner {
	max-width: var(--cta-max-width, var(--max-width));
	margin: 0 auto;
	background-color: var(--cta-bg-color, var(--color-green-dark));
	background-image: linear-gradient(135deg, var(--color-green-dark), var(--color-green));
	border-radius: var(--cta-border-radius, var(--radius-lg));
	padding: 2.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	color: var(--color-white);
	text-align: var(--cta-text-align, left);
}
.cta-banner__inner h2 { margin: 0 0 0.5rem; font-size: 1.6rem; }
.cta-banner__inner p { margin: 0; opacity: 0.85; }

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--footer-bg-color, var(--color-green-light));
	background-image: var(--footer-bg-image, none);
	background-size: cover;
	background-position: center;
	padding-top: var(--footer-padding-top, 3rem);
	padding-bottom: var(--footer-padding-bottom, 1.5rem);
	padding-left: var(--container-padding, 1.5rem);
	padding-right: var(--container-padding, 1.5rem);
	margin-top: var(--footer-margin-top, 0);
	margin-bottom: var(--footer-margin-bottom, 0);
	border-radius: var(--footer-border-radius, 0);
}
.site-footer__inner {
	max-width: var(--footer-max-width, var(--max-width));
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 2rem;
}
.footer-brand p { color: var(--color-text-muted); font-size: 0.85rem; margin: 0.75rem 0; }
.social-icons { display: flex; gap: 0.75rem; }
.social-icons a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-green-dark);
}
.footer-col h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 1rem; }
.footer-col ul li { margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--color-text-muted); }
.footer-col ul li a:hover { color: var(--color-green-dark); }
.site-footer__bottom {
	max-width: var(--footer-max-width, var(--max-width));
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
.payment-icons { display: flex; gap: 0.5rem; }
.payment-icon { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; font-size: 0.7rem; font-weight: 700; }

/* ---------- Generic content pages ---------- */
.content-area__inner { max-width: var(--content-max-width, 800px); margin: 0 auto; padding: 3rem var(--container-padding, 1.5rem); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.hero-section__inner { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.main-navigation { display: none; }
	.announcement-bar__inner { gap: 1rem; font-size: 0.7rem; }
	.bundle-selector { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.cta-banner__inner { flex-direction: column; text-align: center; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
}

/*
 * Note: card-grid column counts (Benefits, Outdoor Spaces, Reviews, How It
 * Works) are no longer hardcoded here — they're driven entirely by the
 * --{section}-columns custom properties generated per breakpoint by
 * cozy_garden_dynamic_css() in inc/customizer.php, so the Section Layout
 * Controls in the Customizer can override them per device.
 */