/**
 * Fumo Cigars design system.
 *
 * Palette/typography grounded in real colors/fonts mined from the live
 * fumocigars.com (see docs/DESIGN-SYSTEM.md for the full audit) - refined
 * into a deliberate system rather than the current site's ad-hoc per-widget
 * styling.
 *
 * Revised 2026-07-26: the main site moved from an all-dark "Davidoff/
 * Cohiba" palette to a warm ivory/parchment light palette (direct client
 * request - the all-black build read as "blank"). A handful of sections
 * deliberately stay dark for rhythm and already keep their own hardcoded
 * dark background regardless of the tokens below (header, topbar, footer,
 * hero, the wholesale banner) - see the "Dark-chrome sections" override
 * block at the end of this file for their own paired -on-dark tokens.
 * Every color pair below is WCAG-contrast-checked against its real
 * background (ivory/parchment for the light tokens, black for -on-dark) -
 * see docs/DESIGN-SYSTEM.md §19.
 */

/* ---------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------- */

:root {
	/* Color - light (main site: body, cards, shop, product, account, etc.) */
	--fumo-color-primary: #8A6116;
	--fumo-color-primary-hover: #A9791E;
	--fumo-color-secondary: #6B1E23;
	--fumo-color-secondary-hover: #82242B;
	--fumo-color-bg: #F3EDE0;
	--fumo-color-surface: #EAE1CC;
	--fumo-color-surface-alt: #E3D6BE;
	--fumo-color-media-bg: #000; /* Product photography frames stay black by design - see §6 of the design doc. */
	--fumo-color-border: #B8A57C;
	--fumo-color-text: #241E18;
	--fumo-color-text-secondary: #6B6155;
	--fumo-color-success: #357A41;
	--fumo-color-error: #B23A2E;

	/* Color - dark-chrome sections only (header, topbar, footer, hero,
	 * wholesale banner). These are the ORIGINAL dark-theme values from the
	 * pre-2026-07-26 palette, kept as-is since they were already
	 * contrast-verified against a black background. */
	--fumo-color-primary-on-dark: #C9A227;
	--fumo-color-primary-on-dark-hover: #E0B830;
	--fumo-color-text-on-dark: #F5F3EE;
	--fumo-color-text-secondary-on-dark: #9C9C9C;
	--fumo-color-border-on-dark: #3A3A3A;

	/* Typography - Playfair Display for headings, Poppins for everything else */
	--fumo-font-display: 'Playfair Display', Georgia, serif;
	--fumo-font-heading: 'Poppins', -apple-system, sans-serif;
	--fumo-font-body: 'Poppins', -apple-system, sans-serif;

	--fumo-text-h1: 3rem;
	--fumo-text-h2: 2.5rem;
	--fumo-text-h3: 2rem;
	--fumo-text-h4: 1.5rem;
	--fumo-text-h5: 1.25rem;
	--fumo-text-h6: 1.125rem;
	--fumo-text-body: 1rem;
	--fumo-text-small: 0.875rem;
	--fumo-line-height: 1.6;

	/* Spacing (8px base unit) */
	--fumo-space-xs: 0.5rem;
	--fumo-space-sm: 1rem;
	--fumo-space-md: 1.5rem;
	--fumo-space-lg: 2rem;
	--fumo-space-xl: 3rem;
	--fumo-space-2xl: 4rem;
	--fumo-space-section: 2.5rem;
	--fumo-space-section-mobile: 2.5rem;

	/* Layout */
	--fumo-container-width: 1280px;
	--fumo-banner-height: 300px;
	--fumo-banner-height-mobile: 180px;

	/* Shape */
	--fumo-radius: 4px;

	/* Motion */
	--fumo-transition: 220ms ease;

	/* Buttons - single global system, modeled on the Add to Cart button.
	 * Every labeled action button on the site (WooCommerce's own .button
	 * output, WP core/Gutenberg buttons, and every .fumo-btn usage) reads
	 * these same tokens - see the "Global button system" rule below. */
	--fumo-btn-radius: var( --fumo-radius );
	--fumo-btn-border-width: 1px;
	--fumo-btn-font: var( --fumo-font-heading );
	--fumo-btn-font-size: var( --fumo-text-small );
	--fumo-btn-font-weight: 600;
	--fumo-btn-letter-spacing: 0.04em;
	--fumo-btn-padding-y: 0.6rem;
	--fumo-btn-padding-x: 1.25rem;
	--fumo-btn-height: 2.75rem;
	--fumo-btn-gap: var( --fumo-space-xs );
	--fumo-btn-focus-ring: 0 0 0 3px rgba( 201, 162, 39, 0.35 );
}

@media ( max-width: 782px ) {
	:root {
		--fumo-text-h1: 2.25rem;
		--fumo-text-h2: 1.875rem;
		--fumo-text-h3: 1.5rem;
	}
}

/* ---------------------------------------------------------------
 * Base
 * ------------------------------------------------------------- */

body {
	background: var( --fumo-color-bg );
	color: var( --fumo-color-text );
	font-family: var( --fumo-font-body );
	font-size: var( --fumo-text-body );
	line-height: var( --fumo-line-height );
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var( --fumo-font-display );
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.25;
	color: var( --fumo-color-text );
	margin: 0 0 var( --fumo-space-sm );
}

h1 { font-size: var( --fumo-text-h1 ); }
h2 { font-size: var( --fumo-text-h2 ); }
h3 { font-size: var( --fumo-text-h3 ); }
h4 { font-size: var( --fumo-text-h4 ); }
h5 { font-size: var( --fumo-text-h5 ); }
h6 { font-size: var( --fumo-text-h6 ); }

p {
	margin: 0 0 var( --fumo-space-sm );
	color: var( --fumo-color-text );
}

a {
	color: var( --fumo-color-primary );
	text-decoration: none;
	transition: color var( --fumo-transition );
}

a:hover, a:focus {
	color: var( --fumo-color-primary-hover );
}

:focus-visible {
	outline: 2px solid var( --fumo-color-primary );
	outline-offset: 3px;
}

.skip-link:focus {
	background: var( --fumo-color-surface );
	color: var( --fumo-color-text );
}

/* Display/eyebrow text - the serif, used sparingly for hero moments only */
.fumo-display {
	font-family: var( --fumo-font-display );
	font-weight: 600;
	font-style: normal;
	line-height: 1.15;
}

.fumo-eyebrow {
	font-family: var( --fumo-font-heading );
	font-size: var( --fumo-text-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --fumo-color-primary );
	margin: 0 0 var( --fumo-space-xs );
	display: block;
}

.fumo-text-muted {
	color: var( --fumo-color-text-secondary );
}

/* ---------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------- */

.fumo-container {
	max-width: var( --fumo-container-width );
	margin-inline: auto;
	padding-inline: var( --fumo-space-md );
}

.fumo-container--quote {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var( --fumo-space-md );
	text-align: center;
}

.fumo-section {
	padding-block: var( --fumo-space-section );
}

@media ( max-width: 782px ) {
	.fumo-section {
		padding-block: var( --fumo-space-section-mobile );
	}
}

.fumo-section--alt {
	background: var( --fumo-color-surface );
}

.fumo-section__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var( --fumo-space-xl );
}

.fumo-grid {
	display: grid;
	gap: var( --fumo-space-lg );
	grid-template-columns: repeat( 12, 1fr );
}

.fumo-grid > * {
	grid-column: span 12;
}

@media ( min-width: 600px ) {
	.fumo-col-6  { grid-column: span 6; }
	.fumo-col-4  { grid-column: span 4; }
	.fumo-col-3  { grid-column: span 3; }
}

/* ---------------------------------------------------------------
 * Buttons - restrained luxury: outline by default, fills on hover.
 * Pill-shaped, not bubbly-rounded elsewhere in the system - buttons are
 * the one deliberately soft shape, everything else stays sharp/precise.
 * ------------------------------------------------------------- */

/**
 * Global button system. Every one of these selectors - our own .fumo-btn
 * (and its --primary/--solid/--ghost aliases, kept as class names so
 * existing markup doesn't need touching, but no longer distinct looks),
 * WooCommerce's native .button (add to cart, login/register/lost-password,
 * place order, proceed to checkout, apply coupon/update cart), WordPress
 * core/Gutenberg buttons, and plain form submit/button inputs - resolves
 * to ONE declaration block. This is deliberate: the brief is "every button
 * matches the Add to Cart button," so rather than duplicating the same
 * property list under a dozen names (which is how the drift happened -
 * see .fumo-product-card__footer .button below), every button-like
 * element is grouped into a single selector list pointing at one set of
 * rules. Icon-only micro-controls (wishlist heart, quick-view eye, modal
 * close, quantity stepper +/-) are intentionally excluded - they're
 * circular glyph controls, not labeled actions, and forcing them into this
 * shape would break their layout; they still share the same color tokens
 * and transition via .fumo-icon-btn.
 */
.fumo-btn,
.fumo-btn--primary,
.fumo-btn--solid,
.fumo-btn--ghost,
.fumo-article-card__more,
a.button,
button.button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --fumo-btn-gap );
	min-height: var( --fumo-btn-height );
	font-family: var( --fumo-btn-font );
	font-size: var( --fumo-btn-font-size );
	font-weight: var( --fumo-btn-font-weight );
	letter-spacing: var( --fumo-btn-letter-spacing );
	text-transform: uppercase;
	text-decoration: none;
	padding: var( --fumo-btn-padding-y ) var( --fumo-btn-padding-x );
	border-radius: var( --fumo-btn-radius );
	border: var( --fumo-btn-border-width ) solid var( --fumo-color-primary );
	background-color: transparent;
	color: var( --fumo-color-primary );
	box-shadow: none;
	cursor: pointer;
	transition: background-color var( --fumo-transition ), color var( --fumo-transition ), border-color var( --fumo-transition ), box-shadow var( --fumo-transition );
	white-space: nowrap;
}

.fumo-btn:hover, .fumo-btn:focus-visible,
.fumo-btn--primary:hover, .fumo-btn--primary:focus-visible,
.fumo-btn--solid:hover, .fumo-btn--solid:focus-visible,
.fumo-btn--ghost:hover, .fumo-btn--ghost:focus-visible,
.fumo-article-card__more:hover, .fumo-article-card__more:focus-visible,
a.button:hover, a.button:focus-visible,
button.button:hover, button.button:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus-visible,
input[type="button"]:hover, input[type="button"]:focus-visible,
.woocommerce a.button:hover, .woocommerce a.button:focus-visible,
.woocommerce button.button:hover, .woocommerce button.button:focus-visible,
.woocommerce input.button:hover, .woocommerce input.button:focus-visible,
.woocommerce-page a.button:hover, .woocommerce-page a.button:focus-visible,
.woocommerce-page button.button:hover, .woocommerce-page button.button:focus-visible,
.woocommerce-page input.button:hover, .woocommerce-page input.button:focus-visible,
.wp-element-button:hover, .wp-element-button:focus-visible,
.wp-block-button__link:hover, .wp-block-button__link:focus-visible {
	background-color: var( --fumo-color-primary );
	border-color: var( --fumo-color-primary );
	color: var( --fumo-color-bg );
}

.fumo-btn:focus-visible,
.fumo-btn--primary:focus-visible,
.fumo-btn--solid:focus-visible,
.fumo-btn--ghost:focus-visible,
.fumo-article-card__more:focus-visible,
a.button:focus-visible,
button.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: var( --fumo-btn-focus-ring );
}

.fumo-btn--sm {
	padding: 0.4rem 1rem;
	min-height: 2.25rem;
	font-size: 0.75rem;
}

.fumo-btn:disabled,
.fumo-btn[disabled],
a.button.disabled,
button.button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------- */

/**
 * Homepage Collections section. Deliberately not the shared 12-column
 * `.fumo-grid`/`.fumo-col-3` system: that grid's columns are `1fr` (always
 * stretch to fill 100% width), so `justify-content` has no leftover space
 * to center into - with the real 3 product categories this site has (not
 * the full 4 the section is designed for), the cards sat flush left with
 * a bare gap on the right instead of reading as a deliberate 3-up layout.
 * `repeat(auto-fit, minmax(...))` + `justify-content: center` collapses to
 * exactly as many tracks as there are cards and centers the group,
 * handling 3 (or any other count) correctly without a PHP conditional.
 */
.fumo-collections-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 260px ) );
	justify-content: center;
	gap: var( --fumo-space-lg );
}

.fumo-card {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	overflow: hidden;
	transition: border-color var( --fumo-transition ), transform var( --fumo-transition );
}

.fumo-card:hover {
	border-color: var( --fumo-color-primary );
}

.fumo-why-fumo__item {
	text-align: center;
}

.fumo-why-fumo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var( --fumo-space-sm );
	color: var( --fumo-color-primary );
}

.fumo-why-fumo__icon .fumo-icon {
	width: 28px;
	height: 28px;
}

/**
 * Brand Story / Craftsmanship sections currently reuse real product photos
 * as stand-in imagery (no dedicated lifestyle photography yet - see
 * DESIGN-SYSTEM.md §15). Those photos are tall/narrow product shots
 * (checked: 1130x2000) inside this box's wide 4:3 frame - `object-fit:
 * cover` was cropping them down to a thin vertical sliver of cigar
 * surrounded by solid black, reading as an almost-empty box rather than a
 * deliberate photo. `contain` on the same solid black backdrop the rest of
 * the site's product photography uses (`--fumo-color-media-bg`) keeps the
 * full product visible instead, consistent with how every other product
 * image on the site is framed.
 */
.fumo-story-image {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var( --fumo-radius );
	background: var( --fumo-color-media-bg );
}

.fumo-story-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.fumo-card__body {
	padding: var( --fumo-space-md );
}

/* ---------------------------------------------------------------
 * Testimonials (template-parts/testimonials.php - reused across the site)
 * ------------------------------------------------------------- */

.fumo-testimonial__stars {
	color: var( --fumo-color-primary );
	letter-spacing: 0.1em;
	margin-bottom: var( --fumo-space-xs );
}

.fumo-testimonial__quote {
	color: var( --fumo-color-text );
	font-family: var( --fumo-font-display );
	font-size: var( --fumo-text-h5 );
	line-height: 1.4;
}

.fumo-testimonial__name {
	margin-top: var( --fumo-space-sm );
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * About Us storytelling page (template-about.php)
 * ------------------------------------------------------------- */

.fumo-about-lede {
	font-family: var( --fumo-font-display );
	font-size: var( --fumo-text-h4 );
	line-height: 1.4;
	color: var( --fumo-color-text );
	margin-top: var( --fumo-space-md );
	max-width: 46ch;
}

.fumo-story-quote {
	margin: 0;
}

.fumo-story-quote__text {
	font-family: var( --fumo-font-display );
	font-size: var( --fumo-text-h3 );
	line-height: 1.4;
	color: var( --fumo-color-text );
	margin: 0;
}

.fumo-story-quote__author {
	margin-top: var( --fumo-space-md );
	margin-bottom: 0;
	font-family: var( --fumo-font-heading );
	font-size: var( --fumo-text-small );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --fumo-color-primary );
}

/* Testimonial slider - one centered card at a time, arrows + dots + swipe,
 * see assets/js/fumo-testimonial-slider.js. With a single testimonial the
 * template omits the controls entirely and this just centers the one card. */
.fumo-testimonial-slider {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

.fumo-testimonial-slider__viewport {
	overflow: hidden;
}

.fumo-testimonial-slider__track {
	display: flex;
	transition: transform 500ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.fumo-testimonial-slider__track {
		transition: none;
	}
}

.fumo-testimonial-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	padding-inline: var( --fumo-space-xs );
}

.fumo-testimonial-slider .fumo-testimonial__stars,
.fumo-testimonial-slider .fumo-testimonial__quote,
.fumo-testimonial-slider .fumo-testimonial__name {
	text-align: center;
}

.fumo-testimonial-slider .fumo-testimonial__quote {
	font-size: var( --fumo-text-h4 );
}

.fumo-testimonial-slider .fumo-card__body {
	padding: var( --fumo-space-xl ) var( --fumo-space-lg );
}

.fumo-testimonial-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
}

.fumo-testimonial-slider__arrow--prev {
	left: -3.5rem;
}

.fumo-testimonial-slider__arrow--prev .fumo-icon {
	transform: rotate( 90deg );
}

.fumo-testimonial-slider__arrow--next {
	right: -3.5rem;
}

.fumo-testimonial-slider__arrow--next .fumo-icon {
	transform: rotate( -90deg );
}

@media ( max-width: 900px ) {
	.fumo-icon-btn.fumo-testimonial-slider__arrow {
		display: none;
	}
}

.fumo-testimonial-slider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var( --fumo-space-xs );
	margin-top: var( --fumo-space-lg );
}

.fumo-testimonial-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var( --fumo-color-primary );
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color var( --fumo-transition );
}

.fumo-testimonial-slider__dot.is-active {
	background: var( --fumo-color-primary );
}

/* ---------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	color: var( --fumo-color-text );
	font-family: var( --fumo-font-body );
	font-size: var( --fumo-text-body );
	padding: 0.75rem 1rem;
	transition: border-color var( --fumo-transition );
}

input:focus, select:focus, textarea:focus {
	border-color: var( --fumo-color-primary );
	outline: none;
}

label {
	font-weight: 500;
	color: var( --fumo-color-text );
	display: block;
	margin-bottom: var( --fumo-space-xs );
}

/* ---------------------------------------------------------------
 * Header / navigation
 * ------------------------------------------------------------- */

.fumo-topbar {
	background: #000000;
	border-bottom: 1px solid var( --fumo-color-border-on-dark );
	font-size: var( --fumo-text-small );
}

.fumo-topbar .fumo-nav ul {
	display: flex;
	justify-content: flex-end;
	gap: var( --fumo-space-md );
	list-style: none;
	margin: 0;
	padding: var( --fumo-space-xs ) 0;
}

.fumo-topbar a {
	color: var( --fumo-color-text-secondary );
}

.fumo-topbar a:hover {
	color: var( --fumo-color-primary );
}

.site-header {
	background: #000000;
	border-bottom: 1px solid var( --fumo-color-border-on-dark );
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: none;
	transition: box-shadow var( --fumo-transition );
}

/* Compact-on-scroll (assets/js/fumo-frontend.js toggles .is-scrolled past a
 * small scroll threshold) - shrinks padding/logo rather than just sitting
 * pinned at full height for the whole session. */
.site-header.is-scrolled {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.35 );
}

.fumo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --fumo-space-lg );
	padding-block: var( --fumo-space-sm );
	transition: padding-block var( --fumo-transition );
}

.site-header.is-scrolled .fumo-header__inner {
	padding-block: calc( var( --fumo-space-sm ) / 2 );
}

.fumo-logo {
	font-family: var( --fumo-font-display );
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --fumo-color-text );
	transition: font-size var( --fumo-transition );
}

.site-header.is-scrolled .fumo-logo {
	font-size: 1.35rem;
}

.custom-logo-link img {
	transition: max-height var( --fumo-transition );
	max-height: 48px;
	width: auto;
}

.site-header.is-scrolled .custom-logo-link img {
	max-height: 34px;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header,
	.fumo-header__inner,
	.fumo-logo,
	.custom-logo-link img {
		transition: none;
	}
}

.fumo-header__actions {
	display: flex;
	align-items: center;
	gap: var( --fumo-space-md );
}

.fumo-header__icon-link {
	position: relative;
	color: var( --fumo-color-text );
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	font-size: 1.1rem;
	padding: 0;
	cursor: pointer;
	transition: color var( --fumo-transition );
}

.fumo-header__icon-link:hover,
.fumo-header__icon-link:focus-visible {
	color: var( --fumo-color-primary );
}

/**
 * One global icon system (see inc/template-tags.php::fumo_icon()) - every
 * icon everywhere shares this exact size/stroke/color/transition instead
 * of each context inventing its own via emoji font rendering.
 */
.fumo-icon {
	width: 1.15em;
	height: 1.15em;
	stroke: currentColor;
	flex-shrink: 0;
	transition: color var( --fumo-transition ), stroke var( --fumo-transition );
}

.fumo-icon--menu {
	width: 1.35em;
	height: 1.35em;
}

/**
 * The chevron icon is only ever used standalone inside a centered
 * .fumo-icon-btn (testimonial-slider and carousel prev/next arrows) -
 * nowhere on the site does it sit inline after text. The margin-left
 * this rule used to carry (presumably meant for a future text+chevron
 * usage, e.g. a dropdown toggle, that was never built) pushed the icon
 * 8px right inside every one of those buttons, shifting its rendered
 * center 4px off the button's true center - exactly the "icon not
 * centered" bug reported site-wide, since every chevron usage is one of
 * these buttons.
 */
.fumo-icon--chevron {
	width: 0.7em;
	height: 0.7em;
}

.fumo-icon--heart.is-active,
.is-active .fumo-icon--heart {
	fill: currentColor;
}

.fumo-header__count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var( --fumo-color-primary );
	color: var( --fumo-color-bg );
	font-size: 0.65rem;
	font-weight: 700;
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
}

.main-navigation > ul {
	display: flex;
	gap: var( --fumo-space-lg );
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	font-family: var( --fumo-font-heading );
	font-size: var( --fumo-text-small );
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --fumo-color-text );
}

.main-navigation a:hover {
	color: var( --fumo-color-primary );
}

.main-navigation .menu-item-has-children > a::after {
	content: '\25BE';
	margin-left: var( --fumo-space-xs );
	font-size: 0.7em;
	vertical-align: middle;
}

/**
 * Dropdown submenus. WordPress nests a plain <ul class="sub-menu"> inside
 * any parent <li> with children - without this, that nested <ul> inherited
 * the top-level display:flex rule above and rendered permanently inline
 * next to its parent instead of as a hidden hover dropdown.
 */
.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-xs ) 0;
	margin: 0;
	list-style: none;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

.main-navigation .sub-menu a {
	display: block;
	padding: var( --fumo-space-xs ) var( --fumo-space-md );
	text-transform: none;
	font-weight: 500;
	white-space: nowrap;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var( --fumo-color-border );
	color: var( --fumo-color-text );
	border-radius: var( --fumo-radius );
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

@media ( max-width: 900px ) {
	.menu-toggle { display: inline-flex; }
	.main-navigation > ul {
		display: none;
		flex-direction: column;
		gap: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var( --fumo-color-bg );
		border-bottom: 1px solid var( --fumo-color-border );
		padding: var( --fumo-space-sm ) var( --fumo-space-md );
		max-height: calc( 100vh - 100% );
		overflow-y: auto;
	}
	.main-navigation.is-open > ul { display: flex; }
	.main-navigation a { display: block; padding: var( --fumo-space-xs ) 0; }

	/* No hover on touch - submenus render as a static, indented, always-open list. */
	.main-navigation .sub-menu {
		display: block;
		position: static;
		border: none;
		background: none;
		padding: 0 0 0 var( --fumo-space-md );
	}
	.main-navigation .sub-menu a { padding: var( --fumo-space-xs ) 0; }
}

/* ---------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------- */

.site-footer {
	background: #000000;
	border-top: 1px solid var( --fumo-color-border-on-dark );
	padding-block: var( --fumo-space-2xl ) var( --fumo-space-lg );
}

.fumo-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var( --fumo-space-xl );
	margin-bottom: var( --fumo-space-xl );
}

@media ( max-width: 900px ) {
	.fumo-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 560px ) {
	.fumo-footer__grid { grid-template-columns: 1fr; }
}

.fumo-footer__heading {
	font-size: var( --fumo-text-small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --fumo-color-primary );
	margin-bottom: var( --fumo-space-sm );
}

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

.fumo-footer__grid li {
	margin-bottom: var( --fumo-space-xs );
}

.fumo-footer__grid a {
	color: var( --fumo-color-text-secondary );
}

.fumo-footer__grid a:hover {
	color: var( --fumo-color-primary );
}

.fumo-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: var( --fumo-space-xs );
}

.fumo-newsletter input[type="email"] {
	flex: 1 1 180px;
}

.fumo-newsletter__status {
	flex-basis: 100%;
	margin: var( --fumo-space-xs ) 0 0;
	font-size: var( --fumo-text-small );
	color: var( --fumo-color-primary );
}

.fumo-footer__bottom {
	border-top: 1px solid var( --fumo-color-border );
	padding-top: var( --fumo-space-lg );
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var( --fumo-space-sm );
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
}

.fumo-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var( --fumo-space-sm ) var( --fumo-space-md );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fumo-footer__legal a {
	color: var( --fumo-color-text-secondary );
}

.fumo-footer__legal a:hover {
	color: var( --fumo-color-primary );
}

.fumo-social {
	display: flex;
	gap: var( --fumo-space-sm );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fumo-social a {
	color: var( --fumo-color-text );
	border: 1px solid var( --fumo-color-border );
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fumo-social a:hover {
	border-color: var( --fumo-color-primary );
	color: var( --fumo-color-primary );
}

.fumo-social .fumo-icon {
	width: 18px;
	height: 18px;
}

/* Footer trust badges (replaces the leftover default Archives/Categories
 * widget area - see footer.php) */
.fumo-footer__trust {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fumo-footer__trust li {
	display: flex;
	align-items: center;
	gap: var( --fumo-space-xs );
	margin-bottom: var( --fumo-space-sm );
	color: var( --fumo-color-text-secondary );
}

.fumo-footer__trust .fumo-icon {
	width: 20px;
	height: 20px;
	color: var( --fumo-color-primary );
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
 * Age verification gate
 * ------------------------------------------------------------- */

.fumo-age-gate {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.95 );
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --fumo-space-md );
}

.fumo-age-gate[hidden] { display: none; }

.fumo-age-gate__card {
	max-width: 460px;
	text-align: center;
	border: 1px solid var( --fumo-color-primary );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-xl );
	background: var( --fumo-color-surface );
}

.fumo-age-gate__eyebrow {
	font-family: var( --fumo-font-heading );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --fumo-color-primary );
	font-size: var( --fumo-text-small );
}

.fumo-age-gate__actions {
	display: flex;
	gap: var( --fumo-space-sm );
	justify-content: center;
	margin-top: var( --fumo-space-md );
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------- */

.fumo-hero {
	min-height: 80vh;
	display: flex;
	align-items: center;
	position: relative;
	background-color: #000000;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.fumo-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, 0.8 ) 0%, rgba( 0, 0, 0, 0.55 ) 45%, rgba( 0, 0, 0, 0.85 ) 100% );
}

.fumo-hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.fumo-hero .fumo-display {
	font-size: clamp( 2.5rem, 5vw, 4rem );
	margin-bottom: var( --fumo-space-md );
}

.fumo-hero__actions {
	display: flex;
	gap: var( --fumo-space-sm );
	margin-top: var( --fumo-space-lg );
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * Product cards / archive grid
 * ------------------------------------------------------------- */

/**
 * ul.products is WooCommerce's own class for the <ul> it wraps around
 * related/upsell/cross-sell loops (woocommerce_output_related_products(),
 * woocommerce_upsell_display(), the cart page's cross-sells) - completely
 * unstyled before, so it fell back to plain block-level stacking (each
 * card one after another instead of a grid). Grouped with our own
 * .fumo-product-grid rather than duplicated, since it's the same grid.
 * Must be tag-qualified (ul.products, not bare .products): the wrapping
 * <section class="related products"> carries the same "products" class
 * token, and a bare .products selector turned that section into a SECOND,
 * outer grid - its only two children (the <h2> and the <ul>) then became
 * grid items themselves, blowing the <ul> column out to fit all the real
 * cards inside one warped track instead of the cards forming their own
 * even 4-column grid.
 */
.fumo-product-grid,
ul.products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --fumo-space-lg );
	list-style: none;
	margin: 0;
	padding: 0;
}

@media ( max-width: 1024px ) { .fumo-product-grid, ul.products { grid-template-columns: repeat( 3, 1fr ); } }
@media ( max-width: 782px )  { .fumo-product-grid, ul.products { grid-template-columns: repeat( 2, 1fr ); } }
/* Stay at 2 columns down to the smallest phone widths, just with a tighter
 * gap - product cards read better 2-per-row than full-width on a phone. */
@media ( max-width: 480px )  { .fumo-product-grid, ul.products { grid-template-columns: repeat( 2, 1fr ); gap: var( --fumo-space-sm ); } }

/**
 * ul.products > li (related/upsell/cross-sell - see the <li> wrapper added
 * in woocommerce/content-product.php) wasn't stretching to fill its grid
 * column - traced to WooCommerce's OWN core CSS, not a grid/stretch quirk:
 * woocommerce-layout.css sets `li.product { width: 22.05% }` unconditionally,
 * and woocommerce-smallscreen.css (loaded via a max-width:768px `media`
 * attribute on the <link> itself, not a visible @media block in the file)
 * sets an even more specific 48% below that width. Both are real WC
 * stylesheets still enqueued for their own classic float-grid layout system,
 * which we replace with CSS Grid - matching their exact selectors here
 * (rather than a lower-specificity `ul.products > li`, which lost to both)
 * is what actually overrides them.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: 100%;
	min-width: 0;
}

/**
 * The real reason items were landing one column over (and the last item
 * wrapping to its own row): woocommerce-layout.css puts a `::before`/
 * `::after` clearfix (`content:" "; display:table;`) on ul.products for
 * its own legacy float-based grid. A `display:table` pseudo-element is not
 * `none`/`contents`, so CSS Grid still counts it as a real grid item -
 * the invisible `::before` was silently occupying column 1, shifting
 * every real <li> over by one track. Neutralizing both pseudo-elements
 * (matching WC's own selectors so this wins on specificity) removes the
 * phantom items entirely.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

/**
 * Carousel - reusable horizontal-scroll component (Featured Cigars, Best
 * Sellers, homepage Gallery). Native CSS scroll-snap rather than a
 * transform-based track: swipe/touch scrolling and keyboard scrolling both
 * work for free with zero JS, `assets/js/fumo-carousel.js` only drives the
 * prev/next arrow buttons (scrollBy one item) and hides them when there's
 * nothing to scroll to.
 */
.fumo-carousel {
	position: relative;
}

.fumo-carousel__track {
	display: flex;
	gap: var( --fumo-space-lg );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px; /* keeps focus outlines on the last row from clipping */
}

.fumo-carousel__track::-webkit-scrollbar {
	display: none;
}

.fumo-carousel__item {
	flex: 0 0 calc( 25% - var( --fumo-space-lg ) * 3 / 4 );
	min-width: 0;
	scroll-snap-align: start;
}

@media ( max-width: 1024px ) { .fumo-carousel__item { flex-basis: calc( 33.333% - var( --fumo-space-lg ) * 2 / 3 ); } }
@media ( max-width: 782px )  { .fumo-carousel__item { flex-basis: calc( 50% - var( --fumo-space-lg ) / 2 ); } }
/* At least 2 fully visible per view even on the smallest phones, not ~1
 * item plus a sliver of the next - the track's own gap also drops to
 * --fumo-space-sm here so the 50% math (which subtracts half the gap)
 * stays exact instead of assuming the larger desktop gap. */
@media ( max-width: 480px ) {
	.fumo-carousel__track { gap: var( --fumo-space-sm ); }
	.fumo-carousel__item { flex-basis: calc( 50% - var( --fumo-space-sm ) / 2 ); }
}

.fumo-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
}

.fumo-carousel__arrow--prev {
	left: -1.375rem;
}

.fumo-carousel__arrow--prev .fumo-icon {
	transform: rotate( 90deg );
}

.fumo-carousel__arrow--next {
	right: -1.375rem;
}

.fumo-carousel__arrow--next .fumo-icon {
	transform: rotate( -90deg );
}

.fumo-carousel__arrow[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
 * Instagram gallery (homepage "Follow Along" section)
 * ------------------------------------------------------------- */

.fumo-instagram-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --fumo-space-lg );
}

@media ( max-width: 1024px ) { .fumo-instagram-grid { grid-template-columns: repeat( 3, 1fr ); } }
@media ( max-width: 600px )  { .fumo-instagram-grid { grid-template-columns: repeat( 2, 1fr ); gap: var( --fumo-space-sm ); } }

.fumo-instagram-card {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var( --fumo-radius );
	background: var( --fumo-color-surface );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.25 );
	transition: box-shadow var( --fumo-transition );
}

.fumo-instagram-card.fumo-animate:hover,
.fumo-instagram-card.fumo-animate:focus-visible {
	box-shadow: 0 16px 32px rgba( 0, 0, 0, 0.4 );
}

.fumo-instagram-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --fumo-transition );
}

.fumo-instagram-card.fumo-animate:hover .fumo-instagram-card__image,
.fumo-instagram-card.fumo-animate:focus-visible .fumo-instagram-card__image {
	transform: scale( 1.05 );
}

.fumo-instagram-card__badge {
	position: absolute;
	top: var( --fumo-space-xs );
	right: var( --fumo-space-xs );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	color: #ffffff;
	backdrop-filter: blur( 2px );
}

.fumo-instagram-card__badge .fumo-icon {
	width: 14px;
	height: 14px;
}

.fumo-instagram-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --fumo-space-xs );
	background: rgba( 0, 0, 0, 0.55 );
	color: #ffffff;
	text-align: center;
	font-size: var( --fumo-text-small );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0;
	transition: opacity var( --fumo-transition );
}

.fumo-instagram-card__overlay .fumo-icon {
	width: 28px;
	height: 28px;
}

.fumo-instagram-card.fumo-animate:hover .fumo-instagram-card__overlay,
.fumo-instagram-card.fumo-animate:focus-visible .fumo-instagram-card__overlay {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.fumo-instagram-card,
	.fumo-instagram-card__image,
	.fumo-instagram-card__overlay {
		transition: none;
	}

	.fumo-instagram-card.fumo-animate:hover .fumo-instagram-card__image {
		transform: none;
	}
}

@media ( max-width: 1024px ) {
	.fumo-carousel__arrow {
		display: none;
	}
}

.related.products,
.upsells.products,
.cross-sells.products {
	margin-top: var( --fumo-space-2xl );
}

.related.products > h2,
.upsells.products > h2,
.cross-sells.products > h2 {
	font-size: var( --fumo-text-h3 );
	margin-bottom: var( --fumo-space-lg );
}


.fumo-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * `.fumo-product-card.fumo-animate:hover` (not just `.fumo-product-card:hover`):
 * every card also carries `.fumo-animate` for the scroll-reveal (see the
 * bottom of this file), and `.fumo-animate.is-visible`'s resting
 * `transform: translateY(0)` is equal specificity to a plain
 * `:hover` rule and declared later in the file - it silently won and
 * cancelled this hover lift entirely once a card had revealed. The extra
 * class in the selector outranks that unconditionally.
 */
.fumo-product-card.fumo-animate:hover {
	transform: translateY( -4px );
	box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.12 );
}

@media ( prefers-reduced-motion: reduce ) {
	.fumo-product-card {
		transition: none;
	}

	.fumo-product-card.fumo-animate:hover {
		transform: none;
	}
}

/**
 * Global product-image frame. The ONE reusable container for every product
 * image on the site - shop/homepage/related/upsell/cross-sell/recently-
 * viewed cards (content-product-card.php), the PDP gallery (main + thumbs),
 * quick view, and cart line-item thumbnails. Real cigar photography in this
 * catalog ranges from tall portrait shots to square box shots (checked
 * actual file dimensions - ratios from 0.57 to 1.0), so object-fit: cover
 * will always crop some of them; object-fit: contain on a solid black
 * frame guarantees the full image is always visible and reads as premium
 * product photography (black seamless background) rather than a cropping
 * bug, regardless of the source image's own aspect ratio.
 *
 * Each usage sets its own aspect-ratio (a card, a gallery main image, and a
 * 64px cart thumbnail are different shapes) on top of this shared class -
 * that's sizing, not a different implementation.
 */
.fumo-media-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var( --fumo-color-media-bg );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-sm );
}

.fumo-media-frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.fumo-product-card__image {
	aspect-ratio: 3 / 4;
}

.fumo-product-card__image img {
	transition: transform 400ms ease;
}

/**
 * scale(1.05) grew the image enough to eat most of the frame's 16px
 * black-matting padding on hover (measured live: 16px gap shrank to
 * ~9.7px), reading as the photo "touching the edge" of the card instead
 * of keeping its matted look. 1.02 keeps a noticeable-but-subtle zoom
 * without meaningfully consuming that padding.
 */
.fumo-product-card:hover .fumo-product-card__image img {
	transform: scale( 1.02 );
}

.fumo-product-card__actions {
	position: absolute;
	top: var( --fumo-space-sm );
	right: var( --fumo-space-sm );
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-xs );
	opacity: 0;
	transform: translateX( 8px );
	transition: opacity var( --fumo-transition ), transform var( --fumo-transition );
}

.fumo-product-card:hover .fumo-product-card__actions,
.fumo-product-card__actions:focus-within {
	opacity: 1;
	transform: translateX( 0 );
}

.fumo-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --fumo-color-bg );
	border: 1px solid var( --fumo-color-border );
	color: var( --fumo-color-text );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.fumo-icon-btn:hover, .fumo-icon-btn.is-active {
	border-color: var( --fumo-color-primary );
	color: var( --fumo-color-primary );
}

/**
 * Fixed to exactly 2 lines regardless of actual title length, so the price
 * below always starts at the same vertical position across a row of cards
 * instead of shifting up/down with how many words wrap - a 1-line title
 * and a 2-line title now occupy identical space.
 */
.fumo-product-card__title {
	font-size: var( --fumo-text-h6 );
	line-height: 1.25;
	margin: var( --fumo-space-sm ) 0 var( --fumo-space-xs );
	min-height: calc( var( --fumo-text-h6 ) * 1.25 * 2 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fumo-product-card__title a {
	color: var( --fumo-color-text );
}

.fumo-product-card__title a:hover,
.fumo-product-card__title a:focus {
	color: var( --fumo-color-primary );
}

.fumo-product-card__price {
	color: var( --fumo-color-primary );
	font-weight: 600;
	min-height: 1.5em;
	margin-bottom: var( --fumo-space-sm );
}

.fumo-product-card__price del {
	color: var( --fumo-color-text-secondary );
	margin-right: var( --fumo-space-xs );
	font-weight: 400;
}

.fumo-product-card__footer {
	margin-top: auto;
}

.fumo-product-card__footer .button {
	display: flex;
	width: 100%;
}

.fumo-product-card__footer .added_to_cart {
	display: block;
	margin-top: var( --fumo-space-xs );
	text-align: center;
	font-size: var( --fumo-text-small );
	color: var( --fumo-color-success );
}

.fumo-product-card__footer .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Shop / archive - styling WooCommerce's own core markup (result count,
 * ordering dropdown, pagination, notices) to match the dark palette,
 * rather than replacing it, so plugin compatibility/behavior is untouched.
 * ------------------------------------------------------------- */

.fumo-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var( --fumo-space-sm );
	margin-bottom: var( --fumo-space-lg );
	padding-bottom: var( --fumo-space-sm );
	border-bottom: 1px solid var( --fumo-color-border );
}

.woocommerce-result-count {
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
	margin: 0;
}

.woocommerce-ordering select {
	width: auto;
}

.woocommerce-pagination {
	margin-top: var( --fumo-space-xl );
	text-align: center;
}

.woocommerce-pagination ul {
	display: inline-flex;
	gap: var( --fumo-space-xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Pagination (both WooCommerce's own shop pagination and WordPress core's
 * the_posts_pagination() on blog/archive/search) uses a compact square
 * shape rather than the full button footprint - a numbered page control
 * has no room for uppercase/padded label buttons - but shares the exact
 * same border-radius, colors, font, and hover/active/focus treatment as
 * every other button so it still reads as "the same system."
 */
.woocommerce-pagination a,
.woocommerce-pagination span.current,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var( --fumo-btn-font );
	font-size: var( --fumo-text-small );
	font-weight: var( --fumo-btn-font-weight );
	border: var( --fumo-btn-border-width ) solid var( --fumo-color-primary );
	border-radius: var( --fumo-btn-radius );
	color: var( --fumo-color-primary );
	background-color: transparent;
	transition: background-color var( --fumo-transition ), color var( --fumo-transition );
}

.woocommerce-pagination a:hover,
.woocommerce-pagination a:focus-visible,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	background-color: var( --fumo-color-primary );
	color: var( --fumo-color-bg );
}

.woocommerce-pagination span.current,
.pagination .page-numbers.current {
	background-color: var( --fumo-color-primary );
	color: var( --fumo-color-bg );
	border-color: var( --fumo-color-primary );
}

.pagination {
	margin-top: var( --fumo-space-xl );
	text-align: center;
}

.pagination .nav-links {
	display: inline-flex;
	gap: var( --fumo-space-xs );
	flex-wrap: wrap;
	justify-content: center;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-left: 4px solid var( --fumo-color-primary );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-sm ) var( --fumo-space-md );
	list-style: none;
	margin: 0 0 var( --fumo-space-md );
}

.woocommerce-error {
	border-left-color: var( --fumo-color-error );
}

/* ---------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------- */

.fumo-product {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var( --fumo-space-2xl );
}

@media ( max-width: 900px ) {
	.fumo-product { grid-template-columns: 1fr; }
}

/**
 * Product gallery. Mobile (default): main image on top, thumbnails as a
 * horizontal slider below. Desktop (901px+): thumbnails move to a vertical
 * rail on the left via `order` (DOM stays main-then-thumbs either way - no
 * markup change needed for the two layouts).
 *
 * The thumb rail never reserves height it doesn't need: with only 1-3
 * thumbnails, `align-self: stretch` still stretches the (invisible, no
 * background/border of its own) rail to match the main image's height, but
 * `justify-content: flex-start` keeps the actual thumbnail buttons packed
 * at the top rather than centered or spread out - there's nothing to see
 * in the unused space below them, so no "large empty area" reads visually.
 * If there are enough thumbnails to exceed that stretched height,
 * `overflow-y: auto` scrolls just the rail (main image height untouched);
 * the scrollbar itself is hidden since the rail is short and scrolls in
 * small steps, not a content area users need a scrollbar affordance for.
 */
.fumo-product-gallery__main {
	aspect-ratio: 4 / 5;
}

.fumo-product-gallery__thumbs {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var( --fumo-space-xs );
	margin-top: var( --fumo-space-sm );
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fumo-product-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.fumo-product-gallery__thumbs button {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-xs );
	cursor: pointer;
}

.fumo-product-gallery__thumbs button.is-active,
.fumo-product-gallery__thumbs button:hover {
	border-color: var( --fumo-color-primary );
}

@media ( min-width: 901px ) {
	.fumo-product-gallery {
		display: flex;
		align-items: flex-start;
		gap: var( --fumo-space-sm );
	}

	.fumo-product-gallery__main {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	.fumo-product-gallery__thumbs {
		order: 0;
		flex: 0 0 72px;
		flex-direction: column;
		align-self: stretch;
		margin-top: 0;
		overflow-x: visible;
		overflow-y: auto;
	}
}

.fumo-product__price {
	font-family: var( --fumo-font-heading );
	font-size: var( --fumo-text-h3 );
	color: var( --fumo-color-primary );
	margin: var( --fumo-space-sm ) 0;
}

.fumo-product__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-sm ) var( --fumo-space-lg );
	margin: var( --fumo-space-lg ) 0;
	padding: var( --fumo-space-lg ) 0;
	border-top: 1px solid var( --fumo-color-border );
	border-bottom: 1px solid var( --fumo-color-border );
}

.fumo-product__spec dt {
	font-size: var( --fumo-text-small );
	color: var( --fumo-color-text-secondary );
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fumo-product__spec dd {
	margin: 0;
	font-weight: 500;
}

.fumo-quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-btn-radius );
}

.fumo-quantity button {
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	color: var( --fumo-color-text );
	cursor: pointer;
	font-size: 1.1rem;
	transition: color var( --fumo-transition );
}

.fumo-quantity button:hover,
.fumo-quantity button:focus-visible {
	color: var( --fumo-color-primary );
}

.fumo-quantity input {
	width: 48px;
	border: none;
	background: none;
	text-align: center;
	padding: 0;
	-moz-appearance: textfield;
}

.fumo-add-to-cart-row {
	display: flex;
	gap: var( --fumo-space-sm );
	align-items: center;
	margin: var( --fumo-space-lg ) 0;
	flex-wrap: wrap;
}

/* Product page trust badges (Live Chat / Free Shipping / Secure Checkout) */
.fumo-product-trust {
	margin: var( --fumo-space-xl ) 0 0;
}

.fumo-product-trust__item .fumo-card__body {
	text-align: center;
}

.fumo-product-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var( --fumo-space-sm );
	color: var( --fumo-color-primary );
}

.fumo-product-trust__icon .fumo-icon {
	width: 28px;
	height: 28px;
}

.fumo-product-trust__title {
	font-size: var( --fumo-text-h6 );
	margin-bottom: var( --fumo-space-xs );
}

.fumo-product-trust__body {
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
	margin-bottom: 0;
}

/* Sticky add-to-cart bar, revealed via IntersectionObserver in fumo-woocommerce.js */
.fumo-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var( --fumo-color-surface );
	border-top: 1px solid var( --fumo-color-primary );
	padding: var( --fumo-space-sm ) 0;
	transform: translateY( 100% );
	transition: transform var( --fumo-transition );
	z-index: 200;
}

.fumo-sticky-cart.is-visible {
	transform: translateY( 0 );
}

.fumo-sticky-cart__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --fumo-space-md );
}

/* Product tabs */
.fumo-product-tabs__nav {
	display: flex;
	gap: var( --fumo-space-lg );
	border-bottom: 1px solid var( --fumo-color-border );
	margin-top: var( --fumo-space-2xl );
}

.fumo-product-tabs__nav button {
	background: none;
	border: none;
	color: var( --fumo-color-text-secondary );
	font-family: var( --fumo-font-heading );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var( --fumo-text-small );
	padding: var( --fumo-space-sm ) 0;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.fumo-product-tabs__nav button.is-active {
	color: var( --fumo-color-text );
	border-bottom-color: var( --fumo-color-primary );
}

.fumo-product-tabs__panel {
	padding: var( --fumo-space-lg ) 0;
}

.fumo-product-tabs__panel[hidden] { display: none; }

/* Re-skin WooCommerce's own product-data tabs (Description/Additional
   Information/Reviews) - kept as WC's real markup for the reviews
   form/AJAX to keep working, restyled to match the design system. */
.woocommerce-tabs {
	margin-top: var( --fumo-space-2xl );
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var( --fumo-space-lg );
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var( --fumo-color-border );
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var( --fumo-space-sm ) 0;
	font-family: var( --fumo-font-heading );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var( --fumo-text-small );
	color: var( --fumo-color-text-secondary );
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var( --fumo-color-text );
	border-bottom-color: var( --fumo-color-primary );
}

.woocommerce-tabs .panel {
	padding: var( --fumo-space-lg ) 0;
}

.woocommerce-tabs .panel h2 {
	font-size: var( --fumo-text-h4 );
}

.woocommerce-Reviews .comment-form-rating select,
#review_form textarea {
	max-width: 480px;
}

.star-rating {
	color: var( --fumo-color-primary );
}

/* Quick view modal */
.fumo-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --fumo-space-md );
}

.fumo-modal[hidden] { display: none; }

.fumo-modal__dialog {
	background: var( --fumo-color-bg );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: var( --fumo-space-lg );
	position: relative;
}

.fumo-modal__close {
	position: absolute;
	top: var( --fumo-space-sm );
	right: var( --fumo-space-sm );
	background: none;
	border: 1px solid var( --fumo-color-border );
	border-radius: 50%;
	width: 36px;
	height: 36px;
	color: var( --fumo-color-text );
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * Header search panel
 * ------------------------------------------------------------- */

.fumo-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var( --fumo-color-surface );
	border-bottom: 1px solid var( --fumo-color-border );
	box-shadow: 0 16px 32px rgba( 0, 0, 0, 0.4 );
	z-index: 90;
}

.fumo-search-panel[hidden] { display: none; }

.fumo-search-panel__inner {
	padding-block: var( --fumo-space-md );
}

.fumo-search-panel__form {
	display: flex;
	align-items: center;
	gap: var( --fumo-space-sm );
}

.fumo-search-panel__form input[type="search"] {
	flex: 1;
}

.fumo-search-panel__submit {
	background: none;
	border: none;
	color: var( --fumo-color-text );
	font-size: 1.1rem;
	cursor: pointer;
	padding: 0 var( --fumo-space-xs );
}

.fumo-search-results {
	margin-top: var( --fumo-space-sm );
	max-height: 60vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-xs );
}

.fumo-search-results[hidden] { display: none; }

.fumo-search-results__item {
	display: flex;
	align-items: center;
	gap: var( --fumo-space-sm );
	padding: var( --fumo-space-xs );
	border-radius: var( --fumo-radius );
	color: var( --fumo-color-text );
}

.fumo-search-results__item:hover,
.fumo-search-results__item:focus-visible {
	background: var( --fumo-color-surface-alt );
}

.fumo-search-results__thumb {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	padding: var( --fumo-space-xs );
}

.fumo-search-results__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fumo-search-results__title {
	font-weight: 600;
}

.fumo-search-results__price {
	color: var( --fumo-color-primary );
	font-size: var( --fumo-text-small );
}

.fumo-search-results__empty,
.fumo-search-results__status {
	color: var( --fumo-color-text-secondary );
	padding: var( --fumo-space-sm ) 0;
	margin: 0;
}

@media ( max-width: 480px ) {
	.fumo-search-results__title { font-size: var( --fumo-text-small ); }
}

/* ---------------------------------------------------------------
 * Cart drawer
 * ------------------------------------------------------------- */

.fumo-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
}

.fumo-cart-drawer[hidden] { display: none; }

.fumo-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	opacity: 0;
	transition: opacity 300ms ease;
}

.fumo-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 420px, 100% );
	background: var( --fumo-color-bg );
	border-left: 1px solid var( --fumo-color-border );
	padding: var( --fumo-space-lg );
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 300ms ease;
}

.fumo-cart-drawer.is-open .fumo-cart-drawer__backdrop { opacity: 1; }
.fumo-cart-drawer.is-open .fumo-cart-drawer__panel { transform: translateX( 0 ); }

.fumo-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --fumo-space-md );
	padding-bottom: var( --fumo-space-md );
	border-bottom: 1px solid var( --fumo-color-border );
}

.fumo-cart-drawer__header h2 {
	margin: 0;
	font-size: var( --fumo-text-h5 );
}

.fumo-cart-drawer__count {
	color: var( --fumo-color-text-secondary );
	font-family: var( --fumo-font-heading );
}

.fumo-cart-drawer__close {
	background: none;
	border: 1px solid var( --fumo-color-border );
	border-radius: 50%;
	width: 32px;
	height: 32px;
	color: var( --fumo-color-text );
	cursor: pointer;
	font-size: 1.1rem;
}

.fumo-cart-drawer__empty {
	text-align: center;
	padding: var( --fumo-space-2xl ) 0;
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-md );
	align-items: center;
}

/**
 * WooCommerce's Cart block renders its empty-cart heading with a stock
 * "sad face" icon via a CSS mask-image (see
 * wp-content/plugins/woocommerce/assets/client/blocks/cart.css) - clashes
 * with the rest of the site's Feather-style icon set. Swapping only the
 * mask-image keeps WC's own technique (a currentColor-tinted mask, so it
 * already inherits the heading's text color) instead of fighting it with a
 * parallel icon element. Same-specificity selector + !important since we
 * don't control the enqueue order of WooCommerce's block stylesheet
 * relative to this one.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: var( --fumo-color-primary ) !important;
	mask-image: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNiAyIDMgNnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJWNmwtMy00SDZabTEgNmExIDEgMCAwIDEgMiAwIDMgMyAwIDAgMCA2IDAgMSAxIDAgMCAxIDIgMCA1IDUgMCAwIDEtMTAgMFoiLz48L3N2Zz4=" ) !important;
	-webkit-mask-image: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNiAyIDMgNnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJWNmwtMy00SDZabTEgNmExIDEgMCAwIDEgMiAwIDMgMyAwIDAgMCA2IDAgMSAxIDAgMCAxIDIgMCA1IDUgMCAwIDEtMTAgMFoiLz48L3N2Zz4=" ) !important;
	height: 3.5em !important;
	width: 3.5em !important;
}

.fumo-cart-drawer__items {
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-md );
	flex: 1;
}

.fumo-cart-drawer__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: var( --fumo-space-sm );
	align-items: start;
	padding-bottom: var( --fumo-space-md );
	border-bottom: 1px solid var( --fumo-color-border );
}

.fumo-cart-drawer__thumb {
	width: 64px;
	height: 64px;
	padding: var( --fumo-space-xs );
}

.fumo-cart-drawer__details {
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-xs );
	min-width: 0;
}

.fumo-cart-drawer__title {
	color: var( --fumo-color-text );
	font-weight: 600;
	font-size: var( --fumo-text-small );
}

.fumo-cart-drawer__price {
	color: var( --fumo-color-primary );
	font-size: var( --fumo-text-small );
}

.fumo-cart-drawer__qty {
	margin-top: var( --fumo-space-xs );
}

.fumo-cart-drawer__qty button {
	width: 28px;
	height: 28px;
	font-size: 0.9rem;
}

.fumo-cart-drawer__qty input {
	width: 32px;
}

.fumo-cart-drawer__remove {
	background: none;
	border: none;
	color: var( --fumo-color-text-secondary );
	cursor: pointer;
	font-size: 1rem;
	padding: var( --fumo-space-xs );
}

.fumo-cart-drawer__remove:hover,
.fumo-cart-drawer__remove:focus-visible {
	color: var( --fumo-color-error );
}

.fumo-cart-drawer__footer {
	margin-top: var( --fumo-space-md );
	padding-top: var( --fumo-space-md );
	border-top: 1px solid var( --fumo-color-border );
}

.fumo-cart-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var( --fumo-text-h6 );
	margin-bottom: var( --fumo-space-xs );
}

.fumo-cart-drawer__subtotal strong {
	color: var( --fumo-color-primary );
}

.fumo-cart-drawer__note {
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
	margin: 0 0 var( --fumo-space-md );
}

.fumo-cart-drawer__checkout {
	display: block;
	width: 100%;
	text-align: center;
}

.fumo-cart-drawer__view-cart {
	display: block;
	text-align: center;
	margin-top: var( --fumo-space-sm );
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
}

@media ( prefers-reduced-motion: reduce ) {
	.fumo-cart-drawer__backdrop,
	.fumo-cart-drawer__panel {
		transition: none;
	}
}

.fumo-quick-view {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-lg );
}

.fumo-quick-view__gallery {
	aspect-ratio: 4 / 5;
}

@media ( max-width: 700px ) {
	.fumo-quick-view { grid-template-columns: 1fr; }
}

.fumo-quick-view__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-xs ) var( --fumo-space-md );
	margin: var( --fumo-space-sm ) 0;
}

/* ---------------------------------------------------------------
 * Animation utility classes (see assets/js/fumo-animations.js)
 * ------------------------------------------------------------- */

.fumo-animate {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 600ms ease, transform 600ms ease;
}

.fumo-animate.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.fumo-animate--scale {
	transform: scale( 0.96 );
}

.fumo-animate--scale.is-visible {
	transform: scale( 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.fumo-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.fumo-product-card__image img {
		transition: none;
	}
}

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
 * Static pages, blog (single/archive/index/search), 404
 * ------------------------------------------------------------- */

.fumo-section--narrow {
	max-width: 860px;
}

.fumo-page__header,
.fumo-article__meta {
	margin-bottom: var( --fumo-space-lg );
}

.fumo-page__title,
.fumo-archive__title {
	font-family: var( --fumo-font-display );
}

.fumo-page__thumbnail img,
.fumo-article__thumbnail img,
.fumo-article-card__thumbnail img {
	width: 100%;
	border-radius: var( --fumo-radius );
}

.fumo-page__thumbnail,
.fumo-article__thumbnail {
	margin-bottom: var( --fumo-space-lg );
}

.fumo-page__content,
.fumo-article__content {
	color: var( --fumo-color-text );
	line-height: 1.7;
}

.fumo-page__content a,
.fumo-article__content a,
.fumo-faq__answer a {
	color: var( --fumo-color-primary );
}

.fumo-article-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --fumo-space-lg );
	margin-bottom: var( --fumo-space-xl );
}

@media ( max-width: 1024px ) { .fumo-article-grid { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 600px )  { .fumo-article-grid { grid-template-columns: 1fr; } }

.fumo-article-card {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.fumo-article-card__thumbnail {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.fumo-article-card__thumbnail img {
	height: 100%;
	object-fit: cover;
}

.fumo-article-card__body {
	padding: var( --fumo-space-md );
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-xs );
}

.fumo-article-card__title {
	font-size: var( --fumo-text-h5 );
	margin: 0;
}

.fumo-article-card__title a {
	color: var( --fumo-color-text );
}

.fumo-article-card__excerpt {
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
}

.fumo-article-card__more {
	margin-top: auto;
	color: var( --fumo-color-primary );
	font-weight: 600;
	text-transform: uppercase;
	font-size: var( --fumo-text-small );
	letter-spacing: 0.04em;
}

.fumo-article__meta,
.fumo-article-card__body > .fumo-article__meta {
	display: flex;
	gap: var( --fumo-space-sm );
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
}

.fumo-article__meta a {
	color: var( --fumo-color-text-secondary );
}

.fumo-article__title {
	font-family: var( --fumo-font-display );
	font-size: var( --fumo-text-h1 );
}

.post-navigation {
	margin: var( --fumo-space-2xl ) 0;
	padding-top: var( --fumo-space-lg );
	border-top: 1px solid var( --fumo-color-border );
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var( --fumo-space-md );
}

.fumo-post-nav__subtitle {
	display: block;
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fumo-post-nav__title {
	display: block;
	color: var( --fumo-color-text );
	font-weight: 600;
}

.fumo-no-results {
	text-align: center;
	padding: var( --fumo-space-2xl ) 0;
}

.fumo-no-results__title {
	font-family: var( --fumo-font-display );
}

.fumo-404 {
	text-align: center;
}

.fumo-404__title {
	font-family: var( --fumo-font-display );
	font-size: var( --fumo-text-h1 );
	margin-top: var( --fumo-space-sm );
}

.search-form {
	display: flex;
	gap: var( --fumo-space-xs );
	margin: var( --fumo-space-lg ) auto;
	max-width: 480px;
}

.search-form .search-field {
	flex: 1;
}

.search-form .search-submit {
	background: var( --fumo-color-primary );
	color: var( --fumo-color-bg );
	border: none;
	border-radius: var( --fumo-radius );
	padding: 0 var( --fumo-space-md );
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * WooCommerce: cart, checkout, my account
 * ------------------------------------------------------------- */

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var( --fumo-space-lg );
}

table.shop_table th,
table.shop_table td {
	padding: var( --fumo-space-sm );
	border-bottom: 1px solid var( --fumo-color-border );
	text-align: left;
}

table.shop_table th {
	color: var( --fumo-color-text-secondary );
	font-size: var( --fumo-text-small );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.fumo-cart__thumbnail {
	width: 64px;
	height: 64px;
	padding: var( --fumo-space-xs );
}

.fumo-cart__thumbnail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

table.shop_table a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --fumo-color-error );
	font-size: 1.25rem;
	text-decoration: none;
}

.fumo-cart {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var( --fumo-space-2xl );
	align-items: start;
}

.fumo-cart__collaterals {
	position: sticky;
	top: var( --fumo-space-lg );
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-lg );
}

@media ( max-width: 900px ) {
	.fumo-cart { grid-template-columns: 1fr; }
	.fumo-cart__collaterals { position: static; }
}

.cart_totals table,
.woocommerce-checkout-review-order-table {
	width: 100%;
}

.cart_totals th,
.cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var( --fumo-space-xs ) 0;
	border-bottom: 1px solid var( --fumo-color-border );
}

.cart_totals .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .amount {
	color: var( --fumo-color-primary );
	font-weight: 700;
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	width: 100%;
}

.fumo-checkout {
	display: block;
}

.fumo-checkout__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-xl );
	margin-bottom: var( --fumo-space-xl );
}

@media ( max-width: 900px ) {
	.fumo-checkout__details { grid-template-columns: 1fr; }
}

.fumo-checkout__review {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-lg );
}

.form-row {
	margin-bottom: var( --fumo-space-sm );
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
	font-size: var( --fumo-text-h5 );
	margin-bottom: var( --fumo-space-md );
}

.fumo-myaccount {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var( --fumo-space-2xl );
	align-items: start;
}

@media ( max-width: 782px ) {
	.fumo-myaccount { grid-template-columns: 1fr; }
}

/**
 * WooCommerce's own core woocommerce-layout.css (loaded regardless of
 * theme) sets .woocommerce-MyAccount-navigation to float:left;width:30%
 * and .woocommerce-MyAccount-content to float:right;width:68% - a legacy
 * two-column layout meant for a full-width page, not our 240px grid
 * column. 30% of a 240px grid cell is only 72px, which is why every nav
 * label ("Dashboard", "Addresses", "Account details"...) was rendering
 * cut off. Neutralizing both so our CSS grid (above) is the only layout
 * mechanism in play.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var( --fumo-color-border );
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var( --fumo-space-sm ) var( --fumo-space-md );
	color: var( --fumo-color-text );
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var( --fumo-color-surface-alt );
	color: var( --fumo-color-primary );
	font-weight: 600;
}

/**
 * Card treatment for every My Account sub-page (dashboard, orders, login/
 * register, edit-account, addresses) - matches the .fumo-checkout__review /
 * .fumo-cart__collaterals panel treatment used elsewhere, so these no
 * longer look like bare WooCommerce default content sitting inside the
 * styled nav shell.
 */
.fumo-account-panel {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-lg );
}

.fumo-account-panel h2 {
	font-size: var( --fumo-text-h5 );
	margin-top: 0;
}

/**
 * WooCommerce core's own woocommerce-layout.css floats .col2-set's
 * .col-1/.col-2 at 48% each with float:left/right (login/register split,
 * and the billing/shipping address cards) - the same legacy full-width-
 * page assumption already neutralized for .woocommerce-MyAccount-navigation
 * above. Note it's .col-1/.col-2 that actually carry float+width in WC's
 * CSS, not .u-column1/.u-column2 (those sit alongside col-1/col-2 on the
 * same elements but carry no conflicting rule) - and WC's selector
 * (.woocommerce .col2-set .col-1) is 3 classes deep, so the override below
 * uses 4 to win outright rather than relying on stylesheet order.
 */
.fumo-account-panel .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-xl );
}

.woocommerce-account .fumo-account-panel .col2-set .col-1,
.woocommerce-account .fumo-account-panel .col2-set .col-2 {
	float: none;
	width: 100%;
}

@media ( max-width: 600px ) {
	.fumo-account-panel .u-columns.col2-set {
		grid-template-columns: 1fr;
	}
}

/* Billing/shipping address cards (my-address.php) */
.fumo-account-panel .woocommerce-Address {
	background: var( --fumo-color-surface-alt );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-md ) var( --fumo-space-lg );
}

.fumo-account-panel .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --fumo-space-sm );
	margin-bottom: var( --fumo-space-sm );
}

.fumo-account-panel .woocommerce-Address-title h2 {
	font-size: var( --fumo-text-h6 );
	margin: 0;
}

/**
 * form-row-first/form-row-last (edit-account name split, address field
 * pairs) already render correctly as WooCommerce core's own two-column
 * float (47%/47%) - unlike .col-1/.col-2 above, nothing in this theme
 * conflicts with it, so it's left alone rather than neutralized.
 */
.fumo-account-panel .clear {
	display: none;
}

.fumo-account-panel fieldset {
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-md ) var( --fumo-space-lg );
	margin: var( --fumo-space-lg ) 0;
}

.fumo-account-panel fieldset legend {
	padding: 0 var( --fumo-space-xs );
	font-weight: 600;
	color: var( --fumo-color-text );
}

/* Empty cart page (cart/cart-empty.php) */
.fumo-cart-empty {
	text-align: center;
	padding: var( --fumo-space-2xl ) 0;
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-md );
	align-items: center;
}

.fumo-cart-empty .fumo-icon {
	width: 3rem;
	height: 3rem;
	color: var( --fumo-color-text-secondary );
}

.fumo-cart-empty__title {
	font-size: var( --fumo-text-h4 );
	margin: 0;
}

/* Order confirmation (checkout/thankyou.php, checkout/order-received.php) */
.fumo-order-confirmation {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-xl ) var( --fumo-space-lg );
}

.fumo-order-confirmation__banner {
	text-align: center;
	padding-bottom: var( --fumo-space-lg );
	margin-bottom: var( --fumo-space-lg );
	border-bottom: 1px solid var( --fumo-color-border );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --fumo-space-sm );
}

.fumo-order-confirmation__banner .fumo-icon {
	width: 3rem;
	height: 3rem;
	color: var( --fumo-color-primary );
}

.fumo-order-confirmation__banner p {
	margin: 0;
	font-size: var( --fumo-text-h5 );
	color: var( --fumo-color-text );
}

.fumo-order-overview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --fumo-space-md ) var( --fumo-space-xl );
}

.fumo-order-overview li {
	color: var( --fumo-color-text-secondary );
}

.fumo-order-overview li strong {
	display: block;
	color: var( --fumo-color-text );
}

/* ---------------------------------------------------------------
 * FAQ accordion, distributor form
 * ------------------------------------------------------------- */

.fumo-faq {
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-sm );
	margin-top: var( --fumo-space-lg );
}

.fumo-faq__item {
	background: var( --fumo-color-surface );
	border: 1px solid var( --fumo-color-border );
	border-radius: var( --fumo-radius );
	padding: var( --fumo-space-md );
}

.fumo-faq__question {
	cursor: pointer;
	font-weight: 600;
	color: var( --fumo-color-text );
	list-style: none;
}

.fumo-faq__question::-webkit-details-marker {
	display: none;
}

.fumo-faq__question::before {
	content: '+';
	color: var( --fumo-color-primary );
	margin-right: var( --fumo-space-xs );
}

.fumo-faq__item[open] .fumo-faq__question::before {
	content: '\2212';
}

.fumo-faq__answer {
	margin-top: var( --fumo-space-sm );
	color: var( --fumo-color-text-secondary );
}

.fumo-distributor-form {
	max-width: 640px;
	margin-top: var( --fumo-space-xl );
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-md );
}

.fumo-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fumo-space-md );
}

@media ( max-width: 560px ) {
	.fumo-form-row--split { grid-template-columns: 1fr; }
}

.fumo-distributor-form__status {
	color: var( --fumo-color-primary );
}

.fumo-contact-form {
	max-width: 640px;
	margin-top: var( --fumo-space-xl );
	display: flex;
	flex-direction: column;
	gap: var( --fumo-space-md );
}

.fumo-contact-form__status {
	color: var( --fumo-color-primary );
}

/* ---------------------------------------------------------------
 * Page banner (dynamic featured-image hero for interior pages)
 * ------------------------------------------------------------- */

.fumo-page-banner {
	position: relative;
	height: var( --fumo-banner-height, 300px );
	display: flex;
	align-items: center;
	background-color: var( --fumo-color-surface );
	background-size: cover;
	background-position: center;
}

.fumo-page-banner--fallback::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var( --fumo-color-primary );
	opacity: 0.6;
}

.fumo-page-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 0deg, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0.35 ) 100% );
}

.fumo-page-banner__inner {
	position: relative;
	z-index: 1;
}

.fumo-page-banner__title {
	font-family: var( --fumo-font-display );
	color: var( --fumo-color-text );
	margin: 0;
}

.fumo-page-banner__title mark {
	background: none;
	color: inherit;
}

.fumo-page-banner__subtitle {
	color: var( --fumo-color-text-secondary );
	margin: var( --fumo-space-xs ) 0 0;
}

@media ( max-width: 782px ) {
	.fumo-page-banner {
		height: var( --fumo-banner-height-mobile, 180px );
	}
}

/**
 * Every banner-then-content template (shop, wholesale, FAQ, distributor
 * form, single/archive/page/search, etc.) follows the page banner with a
 * `.fumo-section` wrapper whose breadcrumb is the first thing inside it -
 * `.fumo-section`'s own padding-block (6rem/96px, meant for spacing
 * between big homepage sections) was also the gap between the banner and
 * the breadcrumb here, reading as a large empty band. Capped to 30px site-
 * wide via this adjacent-sibling override, which only touches the TOP
 * padding - `.fumo-section`'s bottom padding (and every other use of the
 * class) is untouched.
 */
.fumo-page-banner + .fumo-section {
	padding-top: 30px;
}

/* ---------------------------------------------------------------
 * Breadcrumbs (Theme Forge's SEO_Module::render_breadcrumbs() output)
 * ------------------------------------------------------------- */

.tf-breadcrumbs {
	margin-bottom: var( --fumo-space-lg );
}

.tf-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: var( --fumo-space-xs );
	font-size: var( --fumo-text-small );
}

.tf-breadcrumbs__item {
	color: var( --fumo-color-text-secondary );
}

.tf-breadcrumbs__item a {
	color: var( --fumo-color-text-secondary );
}

.tf-breadcrumbs__item a:hover,
.tf-breadcrumbs__item a:focus {
	color: var( --fumo-color-primary );
}

.tf-breadcrumbs__sep {
	color: var( --fumo-color-border );
}

/* ---------------------------------------------------------------
 * Dark-chrome sections (2026-07-26 light-palette rework)
 *
 * The main site moved to a warm ivory palette, but the header, topbar,
 * footer, hero, the wholesale banner (.fumo-banner-dark), and the generic
 * page banner (.fumo-page-banner - shop/wholesale/FAQ/single/archive/etc.,
 * a photo background under a dark gradient overlay) all deliberately keep
 * a dark/black background (see the token block at the top of this file)
 * for rhythm. Their own background/border rules already point at
 * hardcoded black or the -on-dark border token; this block re-points every
 * text/link/icon/button color *inside* those containers back to the
 * -on-dark tokens, since the generic element rules they'd otherwise
 * inherit (h1-h6, a, .fumo-eyebrow, .fumo-text-muted, the global button
 * system, form inputs) now default to the light-theme values and would
 * render as dark-on-dark. `.fumo-page-banner__title` was originally missed
 * in this pass - it went dark-text-on-dark-photo, reading as a blank
 * banner with no visible title at all.
 *
 * Two deliberate exceptions this section is careful NOT to touch:
 *  - .main-navigation .sub-menu (desktop dropdown) and the mobile expanded
 *    menu panel both use the LIGHT surface/bg tokens for their own popover
 *    background (a light popover reading over the dark header is the
 *    intended look), so their link text stays on the normal light-theme
 *    color, not -on-dark - only the top-level nav bar sitting directly on
 *    the dark header bar is overridden, and only above the 900px mobile
 *    breakpoint where that popover takes over.
 *  - Form inputs inside the footer (newsletter email field) keep the
 *    normal light surface/border/text styling - a light input floating on
 *    a dark section is a normal, legible pattern and needs no override.
 * ------------------------------------------------------------- */

.fumo-banner-dark {
	background: linear-gradient( 135deg, #000 0%, var( --fumo-color-secondary ) 150% );
}

.site-header,
.fumo-topbar,
.site-footer,
.fumo-hero,
.fumo-banner-dark,
.fumo-page-banner {
	color: var( --fumo-color-text-on-dark );
}

.site-header h1, .site-header h2, .site-header h3, .site-header h4,
.fumo-topbar h1, .fumo-topbar h2, .fumo-topbar h3, .fumo-topbar h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.fumo-hero h1, .fumo-hero h2, .fumo-hero h3, .fumo-hero h4,
.fumo-banner-dark h1, .fumo-banner-dark h2, .fumo-banner-dark h3, .fumo-banner-dark h4,
.fumo-page-banner h1, .fumo-page-banner h2, .fumo-page-banner h3, .fumo-page-banner h4,
.site-header p, .fumo-topbar p, .site-footer p, .fumo-hero p, .fumo-banner-dark p,
.fumo-logo {
	color: var( --fumo-color-text-on-dark );
}

.site-header .fumo-text-muted,
.fumo-topbar .fumo-text-muted,
.site-footer .fumo-text-muted,
.fumo-hero .fumo-text-muted,
.fumo-banner-dark .fumo-text-muted,
.fumo-page-banner__subtitle,
.site-footer .fumo-footer__bottom,
.site-footer .fumo-footer__bottom p {
	color: var( --fumo-color-text-secondary-on-dark );
}

.fumo-hero .fumo-eyebrow,
.fumo-banner-dark .fumo-eyebrow,
.site-footer .fumo-footer__heading,
.site-footer .fumo-newsletter__status {
	color: var( --fumo-color-primary-on-dark );
}

/* Direct top-level nav links sitting on the dark header bar - NOT the
 * desktop dropdown or the mobile panel, both of which use the light
 * popover background (see note above). */
@media ( min-width: 901px ) {
	.main-navigation > ul > li > a {
		color: var( --fumo-color-text-on-dark );
	}

	.main-navigation > ul > li > a:hover {
		color: var( --fumo-color-primary-on-dark );
	}
}

.fumo-topbar a {
	color: var( --fumo-color-text-secondary-on-dark );
}

.fumo-topbar a:hover {
	color: var( --fumo-color-primary-on-dark );
}

.fumo-footer__grid a,
.fumo-footer__legal a {
	color: var( --fumo-color-text-secondary-on-dark );
}

.fumo-footer__grid a:hover,
.fumo-footer__legal a:hover {
	color: var( --fumo-color-primary-on-dark );
}

.fumo-header__icon-link {
	color: var( --fumo-color-text-on-dark );
}

.fumo-header__icon-link:hover,
.fumo-header__icon-link:focus-visible {
	color: var( --fumo-color-primary-on-dark );
}

.fumo-header__count {
	background: var( --fumo-color-primary-on-dark );
}

.menu-toggle {
	color: var( --fumo-color-text-on-dark );
	border-color: var( --fumo-color-border-on-dark );
}

.fumo-social a {
	color: var( --fumo-color-text-on-dark );
	border-color: var( --fumo-color-border-on-dark );
}

.fumo-social a:hover {
	color: var( --fumo-color-primary-on-dark );
	border-color: var( --fumo-color-primary-on-dark );
}

.fumo-footer__trust li {
	color: var( --fumo-color-text-secondary-on-dark );
}

.fumo-footer__trust .fumo-icon {
	color: var( --fumo-color-primary-on-dark );
}

/* Buttons inside the dark sections - the global button system (further up
 * this file) defaults to the light-theme gold now, which still passes
 * contrast on black (see docs/DESIGN-SYSTEM.md §19) but reads noticeably
 * less vivid than the brighter -on-dark gold these sections used before -
 * and the hover-fill's text color needs to flip to a dark tone instead of
 * the (now light) --fumo-color-bg. */
.fumo-hero .fumo-btn, .fumo-hero a.button, .fumo-hero button.button, .fumo-hero input[type="submit"],
.fumo-banner-dark .fumo-btn, .fumo-banner-dark a.button, .fumo-banner-dark button.button,
.site-footer .fumo-btn, .site-footer a.button, .site-footer button.button {
	border-color: var( --fumo-color-primary-on-dark );
	color: var( --fumo-color-primary-on-dark );
}

.fumo-hero .fumo-btn:hover, .fumo-hero .fumo-btn:focus-visible,
.fumo-hero a.button:hover, .fumo-hero a.button:focus-visible,
.fumo-banner-dark .fumo-btn:hover, .fumo-banner-dark .fumo-btn:focus-visible,
.fumo-banner-dark a.button:hover, .fumo-banner-dark a.button:focus-visible,
.site-footer .fumo-btn:hover, .site-footer .fumo-btn:focus-visible,
.site-footer a.button:hover, .site-footer a.button:focus-visible {
	background-color: var( --fumo-color-primary-on-dark );
	border-color: var( --fumo-color-primary-on-dark );
	color: var( --fumo-color-text );
}