/**
 * FlexMart Homepage — Front-end styles.
 * Only loaded on requests that actually render [flexmart_homepage]
 * (see FMH_Assets::enqueue_frontend()).
 *
 * Colour/spacing/radius/shadow values referenced below as CSS custom
 * properties (--fmh-*) are printed dynamically by
 * FMH_Assets::output_dynamic_css_vars() based on the admin's Homepage
 * Settings — this file itself never hardcodes a colour or a pixel value
 * for anything the admin panel controls.
 */

.fmh-homepage {
	--fmh-text: #111827;
	--fmh-text-secondary: #6b7280;
	--fmh-border: #e5e7eb;
	--fmh-bg-light: #f8fafc;
	--fmh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-family: var(--fmh-font);
	color: var(--fmh-text);
	/* NOTE (v1.2.1): the previous overflow-x:hidden lockdown on this
	   wrapper was removed. Horizontal-shift prevention is now handled
	   site-wide by the standalone Code Snippet (overflow-x + overscroll
	   -behavior-x on html/body — the browser-optimised place for it).
	   Keeping a second clip here created a nested horizontal scroll/clip
	   context that made mobile browsers hesitate when disambiguating
	   vertical pan gestures against the page's horizontal sliders —
	   felt as a brief "stick" at the start of scrolling. */
}

.fmh-homepage * {
	box-sizing: border-box;
}

/* Defensive safety net: no image/svg can ever be intrinsically wider than
   its own container, a common hidden cause of sideways page movement. */
.fmh-homepage img,
.fmh-homepage svg {
	max-width: 100%;
}

.fmh-container {
	max-width: var(--fmh-content-width, 1280px);
	margin: 0 auto;
	padding: 0 8px;
}

.fmh-section {
	padding: var(--fmh-section-spacing, 9px) 0 0;
}

.fmh-section:first-child {
	padding-top: 0;
}

/* Marketplace-tight sizing: was clamp(1.4rem, 2.4vw, 1.9rem) with a
 * 24px bottom margin — a Jumia-style shelf title is much smaller and
 * sits close to its row of cards, not floating in its own whitespace. */
.fmh-section-title {
	font-size: clamp(1rem, 2vw, 1.3rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--fmh-secondary, #0f172a);
	margin: 0 0 10px;
}

.fmh-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.fmh-section-header .fmh-section-title {
	margin-bottom: 0;
}

/* "Title … See All ›" — the shared shelf-header link used by every
 * marketplace shelf (Featured Products, Flash Deals, New Arrivals). */
.fmh-section-header__viewall {
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--fmh-primary, #2563eb) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.fmh-section-header__viewall:hover { text-decoration: underline !important; }

.fmh-section-footer {
	text-align: center;
	margin-top: 16px;
}

/* ================================================================
   SHELF CARD — the section itself is ONE white card; products flow
   naturally inside it with no card of their own. Used by every
   marketplace shelf (Featured Products, Flash Deals, New Arrivals,
   Category Collections, Categories, Brands) for one consistent design
   language across the whole homepage.
   ================================================================ */
.fmh-shelf {
	background: #fff;
	border: 1px solid var(--fmh-border);
	border-radius: var(--fmh-radius, 14px);
	box-shadow: var(--fmh-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
	padding: 12px 12px 8px;
}
.fmh-shelf .fmh-section-header,
.fmh-shelf .fmh-section-title {
	margin-bottom: 2px;
}
.fmh-shelf-subtitle {
	font-size: 0.76rem;
	color: var(--fmh-text-secondary);
	margin: -4px 0 6px;
}
.fmh-shelf .fmh-product-grid,
.fmh-shelf .fmh-category-grid,
.fmh-shelf .fmh-brand-carousel__track {
	margin-top: 6px;
}

/* Entrance animation — a simple, cheap fade+rise, gated entirely by the
   --fmh-anim-duration variable (0s when animations are disabled in
   Homepage Settings, making this a genuine no-op rather than a hidden
   toggle). */
.fmh-animate-in {
	opacity: 0;
	transform: translateY(16px);
	animation: fmh-fade-in var(--fmh-anim-duration, 0.3s) ease forwards;
	animation-play-state: paused;
}

.fmh-animate-in.fmh-in-view {
	animation-play-state: running;
}

@keyframes fmh-fade-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fmh-animate-in {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.fmh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 26px;
	border-radius: var(--fmh-radius, 18px);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fmh-btn--primary {
	background: var(--fmh-primary, #2563eb);
	color: #fff !important;
	box-shadow: var(--fmh-shadow, 0 8px 24px rgba(15, 23, 42, 0.1));
}

.fmh-btn--outline {
	background: transparent;
	color: var(--fmh-primary, #2563eb) !important;
	border: 2px solid var(--fmh-primary, #2563eb);
}

@media (hover: hover) and (pointer: fine) {
	.fmh-btn:hover {
		transform: translateY(-2px);
	}
}

/* ---------------------------------------------------------------------
   1. Hero Slider
   --------------------------------------------------------------------- */
/*
 * Layout wrapper: centers the hero and gives it a small, consistent gutter
 * from the screen edges (~14px on mobile, matching the rest of the
 * homepage's spacing on larger screens) so the rounded banner never
 * touches the viewport edge. Kept separate from .fmh-hero itself, which
 * remains the visual card (radius/shadow/overflow) — the slide size,
 * aspect ratio, and everything inside it are unchanged.
 */
.fmh-hero-wrap {
	max-width: min(var(--fmh-content-width, 1280px), 1400px);
	margin: 0 auto;
	padding: 0 14px;
}

@media (min-width: 681px) {
	.fmh-hero-wrap {
		padding: 0 20px;
	}
}

.fmh-hero {
	position: relative;
	/* Fixed premium radius (12–16px, per design spec) — intentionally NOT
	   the shared --fmh-radius variable, so this never drifts if the
	   admin's global "Border Radius" setting changes elsewhere. */
	border-radius: 16px;
	overflow: hidden;
	/* Soft shadow beneath the banner. */
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.fmh-hero__track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Mobile (default): a compact, wide banner strip — like Jumia's mobile
 * homepage — instead of the old tall, near-square block. The admin's
 * existing "Mobile Banner Height" setting is still honoured as the
 * preferred value, but clamp() keeps it inside a sane ~180–220px band so
 * the slider can never again render oversized on a phone, regardless of
 * what number is saved.
 */
.fmh-hero__slide {
	position: relative;
	flex: 0 0 100%;
	height: clamp(180px, var(--fmh-hero-h-mobile, 200px), 220px);
}

/*
 * Tablet and up: a true 16:9 widescreen banner. A fixed aspect-ratio —
 * rather than a manually guessed pixel height — is what actually fixes
 * the "almost square" / heavily-cropped look: any banner uploaded at the
 * recommended 1920×1080 (16:9) size now displays edge to edge with only
 * minimal, natural cropping, at every screen width, with no admin tuning
 * required. This intentionally supersedes the old fixed-pixel Desktop/
 * Tablet height settings, which is exactly what caused the oversized
 * banner — see the note on the Hero Slider admin screen.
 */
@media (min-width: 681px) {
	.fmh-hero__slide {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.fmh-hero__slide-inner {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
	cursor: default;
}

a.fmh-hero__slide-inner {
	cursor: pointer;
}

.fmh-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.fmh-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4% 5%;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.05) 65%);
	max-width: 60%;
}

.fmh-hero__title {
	color: #fff;
	font-size: clamp(1.05rem, 2.4vw, 1.9rem);
	font-weight: 800;
	margin: 0 0 4px;
	line-height: 1.15;
}

.fmh-hero__subtitle {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.75rem, 1.1vw, 0.95rem);
	margin: 0;
}

.fmh-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease;
}

.fmh-hero__arrow:hover {
	background: #fff;
}

.fmh-hero__arrow svg {
	width: 18px;
	height: 18px;
	color: var(--fmh-secondary, #0f172a);
}

.fmh-hero__arrow--prev {
	left: 14px;
}

.fmh-hero__arrow--next {
	right: 14px;
}

.fmh-hero__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.fmh-hero__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
	padding: 0;
}

.fmh-hero__dot.is-active {
	width: 20px;
	background: #fff;
}

@media (max-width: 680px) {
	.fmh-hero__content {
		max-width: 100%;
		padding: 5% 6%;
		background: linear-gradient(0deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.05) 60%);
	}
}

/* ---------------------------------------------------------------------
   2. Categories
   --------------------------------------------------------------------- */
/* Categories sit directly inside the shelf card (see .fmh-shelf) —
 * individual category tiles carry no card/border/shadow of their own,
 * same "section is the card" principle as products. Smaller and
 * tighter than before: no item-count line, smaller icon, less padding,
 * so more categories fit on screen at once. */
.fmh-category-grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 76px;
	gap: 14px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.fmh-category-grid::-webkit-scrollbar { display: none; }
/* Marketplace-shelf philosophy: categories always scroll horizontally,
 * on every breakpoint — never converts into a stacked/static grid. */

.fmh-category-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.fmh-category-card:hover { opacity: 0.85; }
.fmh-category-card:active { transform: scale(0.96); }

.fmh-category-card__icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--fmh-bg-light);
	color: var(--fmh-primary, #2563eb);
}

.fmh-category-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.fmh-category-card__icon svg {
	width: 20px;
	height: 20px;
}

.fmh-category-card__name {
	font-weight: 600;
	font-size: 0.72rem;
	line-height: 1.25;
}

/* ---------------------------------------------------------------------
   Product grid (shared: Flash Deals, Featured Products, New Arrivals)
   --------------------------------------------------------------------- */
/* Marketplace shelf: EVERY product section (Flash Deals, Featured
 * Products, New Arrivals) uses this — a single horizontally-scrolling
 * row of compact cards, on every breakpoint. Products are never
 * stacked vertically on the homepage; the large WooCommerce-style grid
 * belongs to the Shop page only. .fmh-product-grid--scroll is kept as
 * an alias for markup that still uses it. */
.fmh-product-grid,
.fmh-product-grid--scroll {
	display: flex;
	overflow-x: auto;
	gap: 8px;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}
.fmh-product-grid::-webkit-scrollbar,
.fmh-product-grid--scroll::-webkit-scrollbar { display: none; }

/* No card of its own — the shelf around it IS the card (see .fmh-shelf
 * above). Each product is just an image + text block that sits with
 * natural spacing inside that one shared container. */
.fmh-product-card {
	scroll-snap-align: start;
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.fmh-product-card:hover { opacity: 0.88; }
.fmh-product-card:active { transform: scale(0.97); }

.fmh-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--fmh-bg-light);
	border-radius: 10px;
	overflow: hidden;
}

.fmh-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.fmh-product-card:hover .fmh-product-card__media img {
		transform: scale(1.06);
	}
}

.fmh-card-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #fff;
	font-size: 0.64rem;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 6px;
	line-height: 1.4;
}

.fmh-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 9px 9px;
}

.fmh-product-card__title {
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.3;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fmh-product-card__price {
	font-size: 0.86rem;
	font-weight: 800;
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	min-height: 0; /* never reserves space for a missing old price */
}

/* Current price: always the accent colour, however WooCommerce nests
 * its .woocommerce-Price-amount span inside <ins>. */
.fmh-product-card__price ins,
.fmh-product-card__price ins .woocommerce-Price-amount,
.fmh-product-card__price:not(:has(del)) .woocommerce-Price-amount {
	color: var(--fmh-primary, #2563eb) !important;
	text-decoration: none !important;
	font-weight: 800 !important;
	order: 1;
}

/* Old price: grey, small, light, strikethrough — never blue. Targeted
 * with !important AND a "del *" catch-all (covers WooCommerce's
 * .woocommerce-Price-amount span, its nested <bdi>, the currency-symbol
 * span, or any other markup nested inside <del> — not just the one
 * specific class), since WooCommerce/theme CSS elsewhere can otherwise
 * win on specificity and colour it like the current price. */
.fmh-product-card__price del,
.fmh-product-card__price del * {
	color: var(--fmh-text-secondary, #6b7280) !important;
	font-weight: 400 !important;
	font-size: 0.68rem !important;
	text-decoration: line-through !important;
	order: 2;
}

/* ---------------------------------------------------------------------
   3. Flash Deals — countdown
   --------------------------------------------------------------------- */
.fmh-countdown {
	display: flex;
	gap: 8px;
}

.fmh-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--fmh-secondary, #0f172a);
	color: #fff;
	border-radius: 10px;
	padding: 8px 10px;
	min-width: 48px;
}

.fmh-countdown__value {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
}

.fmh-countdown__label {
	font-size: 0.6rem;
	text-transform: uppercase;
	opacity: 0.7;
	margin-top: 2px;
}

/* ---------------------------------------------------------------------
   5. Promotional Banner — horizontal slider, same interaction pattern
   as the Hero Slider (see section 1), styled via its own admin-
   configurable height/radius CSS variables.
   --------------------------------------------------------------------- */
.fmh-promo-slider {
	position: relative;
	border-radius: var(--fmh-promo-radius, 18px);
	overflow: hidden;
}

.fmh-promo-slider__track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fmh-promo-slider__slide {
	position: relative;
	flex: 0 0 100%;
	height: var(--fmh-promo-h-mobile, 160px);
}

@media (min-width: 681px) {
	.fmh-promo-slider__slide {
		height: var(--fmh-promo-h-tablet, 220px);
	}
}

@media (min-width: 900px) {
	.fmh-promo-slider__slide {
		height: var(--fmh-promo-h-desktop, 280px);
	}
}

.fmh-promo-slider__link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: default;
}

a.fmh-promo-slider__link {
	cursor: pointer;
}

.fmh-promo-slider__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fmh-promo-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease;
}

.fmh-promo-slider__arrow:hover {
	background: #fff;
}

.fmh-promo-slider__arrow svg {
	width: 18px;
	height: 18px;
	color: var(--fmh-secondary, #0f172a);
}

.fmh-promo-slider__arrow--prev {
	left: 14px;
}

.fmh-promo-slider__arrow--next {
	right: 14px;
}

.fmh-promo-slider__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.fmh-promo-slider__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(15, 23, 42, 0.15);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
	padding: 0;
}

.fmh-promo-slider__dot.is-active {
	width: 20px;
	background: var(--fmh-primary, #2563eb);
	border-color: var(--fmh-primary, #2563eb);
}

/* ---------------------------------------------------------------------
   7. Popular Brands
   --------------------------------------------------------------------- */
.fmh-brand-carousel {
	overflow: hidden;
	position: relative;
}

.fmh-brand-carousel__track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

/* Sits directly inside the shelf card, same "section is the card"
 * principle — no border/box of its own, just logo + name. */
.fmh-brand-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.fmh-brand-card:hover,
.fmh-brand-card:active {
	opacity: 0.85;
	transform: scale(0.97);
}

.fmh-brand-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	flex-shrink: 0;
}

.fmh-brand-card__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.fmh-brand-card__name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--fmh-text);
	text-align: center;
	text-decoration: none !important;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   8. Why Shop With Us
   --------------------------------------------------------------------- */
.fmh-why-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (min-width: 720px) {
	.fmh-why-shop-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fmh-why-shop-card {
	text-align: center;
	background: #fff;
	border: 1px solid var(--fmh-border);
	border-radius: var(--fmh-radius, 18px);
	padding: 24px 16px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fmh-why-shop-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fmh-shadow, 0 8px 24px rgba(15, 23, 42, 0.1));
}

.fmh-why-shop-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.1);
	color: var(--fmh-primary, #2563eb);
	margin-bottom: 14px;
}

.fmh-why-shop-card__icon svg {
	width: 26px;
	height: 26px;
}

.fmh-why-shop-card__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.fmh-why-shop-card__description {
	font-size: 0.8rem;
	color: var(--fmh-text-secondary);
	margin: 0;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
   9. Testimonials
   --------------------------------------------------------------------- */
.fmh-testimonial-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.fmh-testimonial-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) {
	.fmh-testimonial-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fmh-testimonial-card {
	background: #fff;
	border: 1px solid var(--fmh-border);
	border-radius: var(--fmh-radius, 18px);
	padding: 22px;
}

.fmh-testimonial-card__rating {
	color: #f59e0b;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.fmh-testimonial-card__text {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--fmh-text);
	margin: 0 0 16px;
}

.fmh-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fmh-testimonial-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.fmh-testimonial-card__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fmh-primary, #2563eb);
	color: #fff;
	font-weight: 700;
}

.fmh-testimonial-card__author strong {
	display: block;
	font-size: 0.85rem;
}

.fmh-testimonial-card__role {
	display: block;
	font-size: 0.75rem;
	color: var(--fmh-text-secondary);
}

/* ---------------------------------------------------------------------
   10. Newsletter
   --------------------------------------------------------------------- */
.fmh-newsletter {
	background: var(--fmh-secondary, #0f172a);
	border-radius: var(--fmh-radius, 18px);
	padding: 28px 24px;
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.fmh-newsletter__text {
	margin-bottom: 12px;
}

.fmh-newsletter__heading {
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 4px;
	line-height: 1.25;
}

.fmh-newsletter__description {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.82rem;
	margin: 0;
	max-width: 40ch;
	line-height: 1.4;
}

.fmh-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.fmh-newsletter__input {
	width: 100%;
	height: 52px;
	border-radius: 999px;
	border: none;
	padding: 0 20px;
	font-size: 0.9rem;
	font-family: var(--fmh-font);
	text-align: center;
}

.fmh-newsletter__input:focus {
	outline: 3px solid rgba(37, 99, 235, 0.4);
}

.fmh-newsletter__submit {
	width: 100%;
	height: 48px;
}

.fmh-newsletter__message {
	width: 100%;
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: #fff;
}

.fmh-newsletter__message:empty {
	margin: 0;
}

.fmh-newsletter__message.is-error {
	color: #fca5a5;
}

.fmh-newsletter__message.is-success {
	color: #86efac;
}

@media (max-width: 560px) {
	.fmh-newsletter {
		padding: 24px 20px;
	}
}

/* ---------------------------------------------------------------------
   Admin-only empty state (shown when nothing is enabled/has content)
   --------------------------------------------------------------------- */
.fmh-empty-state {
	max-width: 640px;
	margin: 60px auto;
	text-align: center;
	background: #fff;
	border: 1px dashed #d1d5db;
	border-radius: 18px;
	padding: 40px;
}

/* Category Collections renders multiple shelves inside ONE section — 
 * each needs its own bottom margin since there's no outer per-section
 * spacing between them (unlike separate registered sections). */
.fmh-container--stacked { margin-bottom: 14px; }
.fmh-container--stacked:last-child { margin-bottom: 0; }