/* =========================================================================
   widgets.css — Fule Station Elementor widgets.
   =========================================================================
   Loaded globally on the front end (enqueued by WidgetRegistrar).

   v1.20.0 architecture (Maximal Style tabs):
   --------------------------------------------------------------------------
   This file is the STRUCTURAL FLOOR for Fule Station widgets. Visual values
   (colors, fonts, sizes, hover effects, transitions) are owned by Elementor
   Style-tab controls per widget instance — see register_*_style_pack helpers
   on src/Elementor/BaseWidget.php. Style controls bind to Elementor Global
   Colors + Global Typography slots so a single Site Settings change updates
   every widget that doesn't have an explicit per-instance override.

   What stays in this file:
   * Layout (display: grid/flex), grid-template-columns, gap defaults
   * Aspect ratios for media containers
   * Pseudo-elements (::after for badges/overlays)
   * Responsive breakpoints (column count changes)
   * Base structural padding/margin that defines the layout
   * Variable-backed color/font-family fallbacks pulling from tokens.css
     (so an unstyled instance still renders the dealer's brand defaults)

   What moved out into Style-tab controls:
   * Hover-state color/background/border/transform/transition (per-element)
   * Per-instance typography (font-size/weight/style/line-height/letter)
   * Element padding/margin where it's a "look" choice not a layout choice
   * Box-shadows, border-radius (when not load-bearing for the layout)

   Pattern A correctness: every Style control's `selectors` array is scoped
   `{{WRAPPER}} .fule-foo__bar` so per-instance CSS never bleeds across
   widget instances. tokens.css is the floor, Style controls are the
   ceiling. Token vocabulary (verified against tokens.css):
     --color-brand{,-dark,-light}
     --color-accent{,-dark,-light}
     --color-text{,-muted,-subtle,-on-brand,-on-accent}
     --color-surface{,-card,-tint}
     --color-border{,-strong}
     --color-gold        (rating-star color)
     --space-3xs..4xl    (t-shirt scale, NOT numeric series)
     --font-display, --font-body
     --radius-xs..pill
     --shadow-xs..xl
     --duration-* / --ease-*
   ========================================================================= */

/* Atom container — every widget shares the inline-flex baseline so
   they line up cleanly in horizontal rows AND stack to a column when
   their Elementor flex parent is direction:column. */
.fule-atom {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs, 0.5rem);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Phone
   ------------------------------------------------------------------------- */
.fule-phone__icon {
	font-size: 0.95em;
	line-height: 1;
}
.fule-phone__prefix {
	color: var(--color-text-muted, #5A5A5A);
	font-size: 0.95em;
}
.fule-phone__number {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}
.fule-phone__number:hover,
.fule-phone__number:focus-visible {
	color: var(--color-accent, #C65D3E);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Dealer Map (v1.53.0 atom — static image replacement for Google Maps iframe)
   ------------------------------------------------------------------------- */
.fule-dealer-map {
	display: block;
	line-height: 0;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.fule-dealer-map img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: var(--fule-map-aspect, 16/9);
	object-fit: cover;
}
.fule-dealer-map__cta {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.95);
	color: #1d2327;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.fule-dealer-map:hover .fule-dealer-map__cta,
.fule-dealer-map:focus-visible .fule-dealer-map__cta {
	background: #fff;
}

/* -------------------------------------------------------------------------
   Address
   ------------------------------------------------------------------------- */
.fule-address {
	align-items: flex-start;
}
.fule-address__icon {
	flex-shrink: 0;
	margin-top: 0.1em;
}
.fule-address__text {
	color: inherit;
	text-decoration: none;
}
a.fule-address__text:hover,
a.fule-address__text:focus-visible {
	color: var(--color-accent, #C65D3E);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Hours
   ------------------------------------------------------------------------- */
.fule-hours {
	flex-wrap: wrap;
	gap: var(--space-2xs, 0.5rem);
}
.fule-hours__icon {
	flex-shrink: 0;
}
.fule-hours__label {
	color: var(--color-text-muted, #5A5A5A);
	font-weight: 600;
	font-size: 0.95em;
}
.fule-hours__times {
	color: inherit;
}
.fule-hours__status {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.6em;
	border-radius: var(--radius-pill, 9999px);
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}
.fule-hours__status::before {
	content: "●";
	font-size: 0.9em;
}
.fule-hours__status--open {
	background: color-mix( in srgb, var(--color-secondary, #3A5A3D) 12%, transparent );
	color: var(--color-secondary, #3A5A3D);
}
.fule-hours__status--closed {
	background: color-mix( in srgb, var(--color-text-muted, #5A5A5A) 12%, transparent );
	color: var(--color-text-muted, #5A5A5A);
}

/* Table format — used when format="table". */
.fule-hours--table {
	display: block; /* override inline-flex baseline for the table layout */
	width: 100%;
}
.fule-hours--table .fule-hours__icon,
.fule-hours--table .fule-hours__label {
	display: inline-block;
	margin-right: var(--space-2xs, 0.5rem);
}
.fule-hours__table {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-3xs, 0.25rem) var(--space-md, 1.5rem);
	margin: var(--space-2xs, 0.5rem) 0 0;
}
.fule-hours__table dt {
	font-weight: 600;
	color: var(--color-text-muted, #5A5A5A);
}
.fule-hours__table dd {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Reviews
   ------------------------------------------------------------------------- */
.fule-reviews {
	color: inherit;
	text-decoration: none;
}
a.fule-reviews:hover,
a.fule-reviews:focus-visible {
	color: var(--color-accent, #C65D3E);
}
.fule-reviews__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: var(--radius-full, 50%);
	font-weight: 700;
	font-size: 0.9em;
	line-height: 1;
	color: #fff;
	flex-shrink: 0;
}
.fule-reviews__logo--google    { background: #4285F4; }
.fule-reviews__logo--facebook  { background: #1877F2; }
.fule-reviews__logo--aggregate { background: var(--color-brand, #1D3557); }
.fule-reviews__stars {
	color: var(--color-gold, #D4A24C);
	letter-spacing: 0.05em;
	font-size: 1em;
	white-space: nowrap;
}
.fule-reviews__score {
	font-weight: 700;
}
.fule-reviews__divider {
	color: var(--color-text-subtle, #8A8A8A);
}
.fule-reviews__count {
	color: var(--color-text-muted, #5A5A5A);
	font-size: 0.95em;
}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */
.fule-logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}
.fule-logo__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.fule-logo__img {
	display: block;
	height: auto;
	width: 100%;
	max-width: var(--fule-logo-w, 200px);
}
@media (max-width: 640px) {
	.fule-logo__img {
		max-width: var(--fule-logo-w-mobile, 150px);
	}
}

/* -------------------------------------------------------------------------
   Contact button
   ------------------------------------------------------------------------- */
.fule-contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs, 0.5rem);
	padding: 0.7em 1.4em;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--radius-md, 10px);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--duration-fast, 180ms) var(--ease-out, ease-out),
		color      var(--duration-fast, 180ms) var(--ease-out, ease-out),
		border-color var(--duration-fast, 180ms) var(--ease-out, ease-out);
	white-space: nowrap;
}
.fule-contact-btn:focus-visible {
	outline: 2px solid var(--color-accent, #C65D3E);
	outline-offset: 2px;
}

.fule-contact-btn--primary {
	background: var(--color-brand, #1D3557);
	color: var(--color-text-on-brand, #FBF7EE);
}
.fule-contact-btn--primary:hover {
	background: var(--color-brand-dark, #142840);
	color: var(--color-text-on-brand, #FBF7EE);
}

.fule-contact-btn--secondary {
	background: var(--color-accent, #C65D3E);
	color: var(--color-text-on-accent, #FFFFFF);
}
.fule-contact-btn--secondary:hover {
	background: var(--color-accent-dark, #A84A30);
	color: var(--color-text-on-accent, #FFFFFF);
}

.fule-contact-btn--ghost {
	background: transparent;
	color: var(--color-brand, #1D3557);
	border-color: var(--color-border-strong, #C9BC9B);
}
.fule-contact-btn--ghost:hover {
	background: var(--color-surface-tint, #EFE8D6);
	color: var(--color-brand, #1D3557);
}

.fule-contact-btn--pill {
	background: var(--color-brand, #1D3557);
	color: var(--color-text-on-brand, #FBF7EE);
	border-radius: var(--radius-pill, 9999px);
	padding-inline: 1.6em;
}
.fule-contact-btn--pill:hover {
	background: var(--color-brand-dark, #142840);
}

.fule-contact-btn__icon {
	font-size: 1em;
	line-height: 1;
}

/* =========================================================================
   v1.19.0 — Section header (shared partial)
   ========================================================================= */
.fule-section-header {
	margin-block-end: var(--space-lg, 2rem);
}
.fule-section-header__lockup {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-md, 1.5rem);
	flex-wrap: wrap;
}
.fule-section-header--center .fule-section-header__lockup { justify-content: center; }
.fule-section-header--right  .fule-section-header__lockup { justify-content: flex-end; }
.fule-section-header__text { flex: 1 1 auto; min-width: 0; }
.fule-section-header__subtitle {
	display: block;
	font-family: inherit;
	font-size: var(--fs-2xs, 0.6875rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wider, 0.08em);
	text-transform: uppercase;
	color: var(--color-gold, #F5B800);
	margin-block-end: var(--space-2xs, 0.5rem);
}
.fule-section-header__title {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-3xl, clamp(2rem, 1.5rem + 2.5vw, 3rem));
	line-height: var(--lh-tight, 1.1);
	letter-spacing: var(--tracking-snug, -0.01em);
	margin: 0;
	color: inherit;
}
.fule-section-header__title em {
	font-style: italic;
	color: var(--color-accent, #C65D3E);
	font-weight: 400;
}
.fule-section-header__description {
	font-size: var(--fs-md, 1.125rem);
	color: var(--color-text-muted, #5A5A5A);
	margin-block-start: var(--space-xs, 0.75rem);
	max-width: 60ch;
}
.fule-section-header__browse {
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--fs-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wide, 0.04em);
	color: var(--color-accent, #C65D3E);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-section-header__browse:hover,
.fule-section-header__browse:focus-visible {
	color: var(--color-accent-dark, #A84A30);
	text-decoration: underline;
}

/* =========================================================================
   v1.19.0 — Social icons
   ========================================================================= */
.fule-social-icons {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}
.fule-social-icons--gap-tight  { gap: var(--space-3xs, 0.25rem); }
.fule-social-icons--gap-medium { gap: var(--space-2xs, 0.5rem); }
.fule-social-icons--gap-loose  { gap: var(--space-sm,  1rem); }
.fule-social-icons__item { line-height: 0; }
.fule-social-icons__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text, #1A1A1A);
	background: var(--color-surface-card, #FFFFFF);
	transition:
		background var(--duration-fast, 180ms) var(--ease-out, ease-out),
		color      var(--duration-fast, 180ms) var(--ease-out, ease-out),
		transform  var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-social-icons__link:hover,
.fule-social-icons__link:focus-visible {
	background: var(--fule-brand-color, var(--color-accent, #C65D3E));
	color: #fff;
	transform: translateY(-1px);
}
.fule-social-icons--small  .fule-social-icons__link { width: 24px; height: 24px; }
.fule-social-icons--medium .fule-social-icons__link { width: 32px; height: 32px; }
.fule-social-icons--large  .fule-social-icons__link { width: 40px; height: 40px; }

.fule-social-icons--circle-filled   .fule-social-icons__link { border-radius: var(--radius-full, 50%); }
.fule-social-icons--circle-outlined .fule-social-icons__link {
	border-radius: var(--radius-full, 50%);
	background: transparent;
	border: 1px solid var(--color-border-strong, #C9BC9B);
}
.fule-social-icons--square-filled   .fule-social-icons__link { border-radius: var(--radius-sm, 6px); }
.fule-social-icons--bare            .fule-social-icons__link { background: transparent; }

.fule-social-icons__svg {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

/* =========================================================================
   v1.19.0 — Inventory Class Types
   ========================================================================= */
.fule-class-types {
	padding-block: var(--space-2xl, 4rem);
}
.fule-class-types__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--container-gutter, 1.5rem);
}
/* v1.30.3 — list layouts are footer-style nav menus, not page sections.
 * Drop the 1440px max-width + 1.5rem inline padding so the list sits
 * flush against whatever column the widget is dropped into (matches the
 * Search & Explore / About Blue Fox sibling widgets in the footer grid).
 * Grid layout keeps the v1.19.0 container behavior. */
.fule-class-types--layout-vertical-list .fule-class-types__inner,
.fule-class-types--layout-horizontal-list .fule-class-types__inner,
.fule-class-types--layout-compact-text .fule-class-types__inner {
	max-width: none;
	padding-inline: 0;
}
.fule-class-types__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols-desktop, 6), minmax(0, 1fr));
	gap: var(--space-md, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 1024px) {
	.fule-class-types__grid {
		grid-template-columns: repeat(var(--cols-tablet, 3), minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.fule-class-types__grid {
		grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
		gap: var(--space-sm, 1rem);
	}
}
.fule-class-types__card { display: contents; }
.fule-class-types__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	transition: transform var(--duration-fast, 180ms) var(--ease-out, ease-out),
	            background var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-class-types__link:hover,
.fule-class-types__link:focus-visible {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.08);
}
.fule-class-types__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface-tint, #EFE8D6);
}
.fule-class-types__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fule-class-types__placeholder {
	width: 100%;
	height: 100%;
	display: block;
	color: var(--color-text-muted, #5A5A5A);
}
.fule-class-types__body {
	padding: var(--space-sm, 1rem) var(--space-md, 1.5rem);
}
.fule-class-types__name {
	display: block;
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-lg, 1.25rem);
	line-height: var(--lh-snug, 1.25);
	color: inherit;
}
.fule-class-types__count {
	display: block;
	font-size: var(--fs-sm, 0.875rem);
	color: color-mix( in srgb, currentColor 70%, transparent );
	margin-block-start: var(--space-3xs, 0.25rem);
}

/* Text-only variant — no media, more compact card. */
.fule-class-types--text-only .fule-class-types__link {
	padding: var(--space-md, 1.5rem);
	background: rgba(255, 255, 255, 0.06);
}
.fule-class-types--text-only .fule-class-types__media { display: none; }
.fule-class-types--text-only .fule-class-types__body { padding: 0; }

/* =========================================================================
   v1.19.0 — Inventory Brands
   ========================================================================= */
.fule-brands {
	padding-block: var(--space-2xl, 4rem);
}
.fule-brands__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--container-gutter, 1.5rem);
}
.fule-brands__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols-desktop, 5), minmax(0, 1fr));
	gap: var(--space-md, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 1024px) {
	.fule-brands__grid { grid-template-columns: repeat(var(--cols-tablet, 3), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.fule-brands__grid {
		grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
		gap: var(--space-sm, 1rem);
	}
}
.fule-brands__card { display: contents; }
.fule-brands__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs, 0.5rem);
	min-height: 140px;
	padding: var(--space-md, 1.5rem);
	background: var(--color-surface-card, #FFFFFF);
	border: 1px solid var(--color-border, #E5DCC6);
	border-radius: var(--radius-lg, 16px);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--duration-fast, 180ms) var(--ease-out, ease-out),
	            transform   var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-brands__link:hover,
.fule-brands__link:focus-visible {
	border-color: var(--color-accent, #C65D3E);
	transform: translateY(-1px);
}
.fule-brands__media {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 60px;
}
.fule-brands__media img {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.fule-brands__body { text-align: center; }
.fule-brands__name {
	display: block;
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-base, 1rem);
	color: var(--color-text, #1A1A1A);
}
.fule-brands__count {
	display: block;
	font-size: var(--fs-xs, 0.75rem);
	color: var(--color-text-muted, #5A5A5A);
	margin-block-start: var(--space-3xs, 0.25rem);
}

/* Text-only variant — name + count, no logo. */
.fule-brands--text-only .fule-brands__link,
.fule-brands__card--text-only .fule-brands__link {
	background: var(--color-surface-dark, #0E1A2A);
	color: var(--color-text-on-brand, #FBF7EE);
	border-color: transparent;
	min-height: 100px;
}
.fule-brands--text-only .fule-brands__name,
.fule-brands__card--text-only .fule-brands__name {
	color: var(--color-text-on-brand, #FBF7EE);
}
.fule-brands--text-only .fule-brands__count,
.fule-brands__card--text-only .fule-brands__count {
	color: color-mix( in srgb, var(--color-text-on-brand, #FBF7EE) 70%, transparent );
}

/* =========================================================================
   v1.19.0 — Featured Inventory
   ========================================================================= */
.fule-featured {
	padding-block: var(--space-2xl, 4rem);
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--container-gutter, 1.5rem);
}

.fule-featured--hero-grid .fule-featured__layout {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-lg, 2rem);
	align-items: stretch;
}
@media (max-width: 1024px) {
	.fule-featured--hero-grid .fule-featured__layout { grid-template-columns: 1fr; }
}

/* Hero card
 * v1.27.4 restructure: body content is now the single grid container —
 * eyebrow / title / specs box / image / price / CTA stack vertically inside
 * one padded box. Previous structure put the photo outside the body as a
 * sibling; the new layout flows the photo through the same padding so the
 * hero reads as a single editorial card. Card background is set via the
 * Elementor "Hero Card" style pack (register_card_style_pack on
 * .fule-featured__hero), so the default cream below acts only as a fallback.
 */
.fule-featured__hero {
	display: block;
	background: var(--color-surface-alt, #F2EBDB);
	border-radius: var(--radius-xl, 24px);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--shadow-md, 0 8px 20px rgba(45, 30, 15, 0.10));
	transition: transform var(--duration-base, 280ms) var(--ease-out, ease-out),
	            box-shadow var(--duration-base, 280ms) var(--ease-out, ease-out);
}
.fule-featured__hero:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 16px 40px rgba(45, 30, 15, 0.12));
}
.fule-featured__hero-body {
	padding: var(--space-lg, 2rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 1rem);
}
.fule-featured__hero-eyebrow {
	font-size: var(--fs-2xs, 0.6875rem);
	font-weight: 700;
	letter-spacing: var(--tracking-wider, 0.08em);
	text-transform: uppercase;
	color: inherit;
	opacity: 0.7;
}
.fule-featured__hero-title {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-2xl, clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem));
	line-height: var(--lh-snug, 1.25);
	margin: 0;
	color: inherit;
}
/* Two-line split: top = year + make, bottom = model + trim.
 * Top inherits the card's text color (set via Elementor "Hero · Title"
 * style pack). Bottom defaults to brand navy + italic-script for a
 * visual hierarchy break — also independently styleable via the
 * existing hero_title style pack (selector covers both spans). */
.fule-featured__hero-title-top {
	display: block;
}
.fule-featured__hero-title-bottom {
	display: block;
	font-style: italic;
	font-weight: 700;
	color: var(--color-brand, #14304D);
}

/* Spec chip row — a single bordered box containing GVWR / Length / Sleeps.
 * Each chip is label-above-value to read as a quick stat strip. Dividers
 * between chips, no dividers on the outer edges. */
.fule-featured__hero-specs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: var(--space-sm, 1rem) var(--space-xs, 0.75rem);
	background: rgba(255, 255, 255, 0.55);
	border-radius: var(--radius-md, 12px);
}
.fule-featured__hero-specs li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs, 0.25rem);
	padding-inline: var(--space-2xs, 0.5rem);
	text-align: center;
	border-inline-end: 1px solid rgba(0, 0, 0, 0.12);
}
.fule-featured__hero-specs li:last-child { border-inline-end: 0; }
.fule-featured__hero-specs-label {
	font-size: var(--fs-2xs, 0.6875rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wider, 0.08em);
	text-transform: uppercase;
	opacity: 0.65;
}
.fule-featured__hero-specs-value {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-md, 1.125rem);
	font-weight: 700;
	line-height: 1;
}

/* Image sits between specs and price. Aspect-locked so the card height
 * is predictable; full-bleed inside the body's padding. */
.fule-featured__hero-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: rgba(0, 0, 0, 0.06);
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-md, 12px);
}
.fule-featured__hero-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

.fule-featured__hero-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-xs, 0.75rem);
	flex-wrap: wrap;
	text-align: center;
}
.fule-featured__hero-price-now {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-2xl, 2rem);
	font-weight: 700;
	color: inherit;
}
.fule-featured__hero-price-was {
	color: inherit;
	opacity: 0.55;
	text-decoration: line-through;
	font-size: var(--fs-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wide, 0.04em);
	text-transform: uppercase;
}
.fule-featured__hero-price-callus {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-xl, 1.5rem);
	color: inherit;
}

/* CTA — full-width pill, contrasts against the (user-controlled) card bg.
 * v1.27.5: text + arrow both forced to brand navy via !important so they
 * read on the white pill regardless of inherited link color from the
 * wrapping <a class="fule-featured__hero"> (themes commonly cascade an
 * accent color onto all anchors, which turned the CTA orange before).
 */
.fule-featured__hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs, 0.5rem);
	padding: var(--space-sm, 1rem) var(--space-md, 1.5rem);
	background: #fff;
	color: var(--color-brand, #14304D) !important;
	font-weight: 700;
	font-size: var(--fs-sm, 0.875rem);
	letter-spacing: var(--tracking-wide, 0.04em);
	text-transform: uppercase;
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08));
	transition: transform var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-featured__hero:hover .fule-featured__hero-cta { transform: translateY(-1px); }
.fule-featured__hero-cta-arrow {
	display: inline-flex;
	color: var(--color-brand, #14304D);
	font-size: var(--fs-md, 1.125rem);
	line-height: 1;
}

/* Hero badges (corner overlays on the photo).
 * v1.27.3: brand-aligned to the v4 mockup — gold NEW, white/outlined USED,
 * brand-blue CERTIFIED. Previously all three were dark fills which rendered
 * as featureless black rectangles on the photo.
 */
.fule-featured__badge {
	position: absolute;
	top: var(--space-sm, 1rem);
	left: var(--space-sm, 1rem);
	padding: var(--space-3xs, 0.25rem) var(--space-xs, 0.75rem);
	border-radius: var(--radius-sm, 6px);
	font-size: var(--fs-2xs, 0.6875rem);
	font-weight: 700;
	letter-spacing: var(--tracking-wider, 0.08em);
	text-transform: uppercase;
	color: var(--color-text, #1A1A1A);
	background: var(--color-gold, #F5B800);
}
.fule-featured__badge--new       { color: var(--color-text, #1A1A1A); background: var(--color-gold, #F5B800); }
.fule-featured__badge--used      { color: var(--color-text, #1A1A1A); background: #fff; box-shadow: inset 0 0 0 1px var(--color-border, #E5DCC6); }
.fule-featured__badge--certified { color: #fff; background: var(--color-brand, #1D3557); }
.fule-featured__savings {
	position: absolute;
	top: var(--space-sm, 1rem);
	right: var(--space-sm, 1rem);
	padding: var(--space-3xs, 0.25rem) var(--space-sm, 1rem);
	border-radius: var(--radius-pill, 9999px);
	font-size: var(--fs-xs, 0.75rem);
	font-weight: 700;
	color: #fff;
	background: var(--color-danger, #B33A3A);
}

/* Right column: 2x2 grid of standard cards (hero_grid layout) */
.fule-featured--hero-grid .fule-featured__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md, 1.5rem);
}
@media (max-width: 640px) {
	.fule-featured--hero-grid .fule-featured__grid { grid-template-columns: 1fr; }
}

/* Uniform grid layout */
.fule-featured__grid--uniform {
	display: grid;
	grid-template-columns: repeat(var(--cols-desktop, 3), minmax(0, 1fr));
	gap: var(--space-md, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 1024px) {
	.fule-featured__grid--uniform { grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.fule-featured__grid--uniform { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)); }
}
.fule-featured__grid-item { list-style: none; }

/* Standard unit card */
.fule-featured__card {
	background: var(--color-surface-card, #FFFFFF);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(45, 30, 15, 0.08));
	transition: transform var(--duration-fast, 180ms) var(--ease-out, ease-out),
	            box-shadow var(--duration-fast, 180ms) var(--ease-out, ease-out);
	height: 100%;
}
.fule-featured__card:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md, 0 8px 20px rgba(45, 30, 15, 0.10));
}
.fule-featured__card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.fule-featured__card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-tint, #EFE8D6);
	overflow: hidden;
	margin: 0;
}
.fule-featured__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fule-featured__card-body {
	padding: var(--space-md, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
	flex: 1;
}
.fule-featured__card-title {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-md, 1.125rem);
	line-height: var(--lh-snug, 1.25);
	margin: 0;
}
.fule-featured__card-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 0.5rem) var(--space-sm, 1rem);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs-xs, 0.75rem);
	color: var(--color-text-muted, #5A5A5A);
}
.fule-featured__card-price { display: flex; align-items: baseline; gap: var(--space-2xs, 0.5rem); margin-block-start: auto; }
.fule-featured__card-price-now { font-weight: 700; color: var(--color-brand, #1D3557); font-size: var(--fs-lg, 1.25rem); }
.fule-featured__card-price-was { color: var(--color-text-subtle, #8A8A8A); text-decoration: line-through; font-size: var(--fs-sm, 0.875rem); }
.fule-featured__card-price-callus { font-weight: 600; }
.fule-featured__card-cta {
	font-size: var(--fs-sm, 0.875rem);
	font-weight: 600;
	color: var(--color-accent, #C65D3E);
}

/* =========================================
 * v1.22.5 — Inline-SVG icon base.
 *
 * Every Helpers\Icons::svg() return value carries class="fule-icon
 * fule-icon--{name}" + fill="currentColor", so icons inherit the parent
 * text color. The Style-tab Color and Size controls from v1.20.0
 * (register_icon_style_pack) target both the wrapper span and the inner
 * svg/path nodes — see BaseWidget::register_icon_style_pack.
 *
 * No defaults for color/fill below — leaving those to the Style tab so
 * each widget instance owns its color.
 * ========================================= */
.fule-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* =========================================
 * v1.22.4 — Overlay clip fix.
 *
 * Section wrappers that opt into Border Radius via the Style tab need
 * overflow: hidden so the overlay color (rendered as a ::after
 * pseudo-element by BaseWidget::register_section_background_pack) clips
 * to the rounded corners. Pre-v1.22.4 the overlay painted a perfect
 * rectangle outside the radius.
 *
 * Selector list mirrors every register_section_background_pack call
 * across src/Elementor/Widgets/ — atoms, v1.19.0 blocks, the v1.22.0
 * Class Types per-card body, the pre-v1.18 widgets, and the location
 * card. Adding a new widget that uses the helper means appending its
 * wrapper class here.
 *
 * Tradeoff: overflow: hidden on a wrapper also clips outer box-shadow
 * applied to that same wrapper. Acceptable for v1.22.4 — the broken
 * overlay was the priority. If outer-shadow clipping shows up as a
 * real-world dealer complaint, refactor to an inner-content-wrapper
 * approach in v1.23+ (apply radius/overflow to an inner element so the
 * outer wrapper stays unclipped for shadows).
 * ========================================= */
.alert-form,
.fule-address,
.fule-brands,
.fule-class-types,
.fule-class-types__body,
.fule-featured,
.fule-hours,
.fule-logo,
.fule-phone,
.fule-reviews,
.fule-social-icons,
.fule-shortcode--inventory,
.fule-shortcode--recent-drops,
.fule-shortcode--saved-units,
.fule-shortcode--search,
.fule-shortcode--staff-grid,
.location-card {
	overflow: hidden;
}

/* =========================================================================
 * Inventory Mega Menu (v1.25.0)
 * =========================================================================
 *
 * Specificity strategy: every color-bearing rule uses 4-class selectors
 * (e.g. `.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket
 * .fule-mega-menu__bucket-label`, specificity 0,4,0) so they beat Elementor's
 * compiled Style-tab rules. Style controls in BaseWidget bind to
 * Global_Colors::COLOR_PRIMARY by default; Elementor emits
 * `{{WRAPPER}} .fule-mega-menu__bucket-label { color: var(--e-global-color-primary); }`
 * (specificity 0,2,0 to 0,3,0). Without the higher-specificity defaults
 * below, that resolves to the dealer's navy on a navy widget bg → invisible
 * labels. The cascade still respects per-instance Style picks (Elementor
 * emits direct property values that overrule via cascade ordering when
 * specificity matches).
 *
 * Brand palette is hardcoded via --fule-mm-* CSS vars on the widget root
 * (NOT pulled from tokens.css) because dealer-fule's tokens.css ships with
 * a legacy Fox/rust palette (--color-accent: #C65D3E) that doesn't match
 * the current Elementor Global Colors the dealer has configured. The widget
 * owns its own defaults; dealers override per-instance via the Style tab
 * or globally via a :root override in their child theme's CSS.
 * ========================================================================= */

.fule-mega-menu {
	/* ---- Brand tokens (Blue Fox RV final palette v1.25.1) ---- */
	/* Navy ladder — primary surfaces */
	--fule-mm-navy-900:           #0a1c36; /* darkest, utility bar */
	--fule-mm-navy-800:           #0e2444; /* widget panel bg */
	--fule-mm-navy-700:           #15315a; /* class-card bg */
	--fule-mm-navy-600:           #1c3d70; /* class-card hover */

	/* Cream ladder — light surfaces */
	--fule-mm-cream-50:           #fbf7ee; /* page bg (unused here) */
	--fule-mm-cream-100:          #f6efe0; /* card image bg + active bucket bg */
	--fule-mm-cream-200:          #ede4d0;

	/* Ink ladder — text on cream */
	--fule-mm-ink-900:            #16202e; /* primary text */
	--fule-mm-ink-700:            #38465a;
	--fule-mm-ink-500:            #6a7488; /* muted */

	/* Gold ladder — accents (used sparingly per design rule) */
	--fule-mm-gold-500:           #d9a14a; /* primary gold accent */
	--fule-mm-gold-400:           #e6b769; /* hover / accent icons */
	--fule-mm-gold-200:           #f3dca6; /* soft accent text */

	/* Text-on-navy ladder */
	--fule-mm-text-primary:       rgba(255, 255, 255, 0.88);
	--fule-mm-text-muted:         rgba(255, 255, 255, 0.55);
	--fule-mm-text-subtle:        rgba(255, 255, 255, 0.45);

	/* Translucent overlays */
	--fule-mm-divider:            rgba(255, 255, 255, 0.10);
	--fule-mm-bucket-hover-bg:    rgba(255, 255, 255, 0.06);
	--fule-mm-footer-bg:          rgba(0, 0, 0, 0.20);

	/* Active bucket — soft gold tint with 1px gold border + gold-200 text
	 * (matches design ref: subtle "featured row" treatment, not a screaming
	 * fill. Spec: gold @ 0.07 bg, gold @ 0.22 border, gold-200 text). */
	--fule-mm-bucket-active-bg:     rgba(217, 161, 74, 0.07);
	--fule-mm-bucket-active-border: rgba(217, 161, 74, 0.22);
	--fule-mm-bucket-active-text:   var(--fule-mm-gold-200);
	--fule-mm-bucket-active-meta:   rgba(243, 220, 166, 0.70);

	/* CTA ("View all …") — user-anchored yellow, kept from v1.25.0 */
	--fule-mm-cta-bg:             #F5B800;
	--fule-mm-cta-bg-hover:       #E0A800;
	--fule-mm-cta-text:           var(--fule-mm-navy-900);

	/* Typography stacks (Newsreader serif for headings/card names,
	 * DM Sans for UI, JetBrains Mono for counts/eyebrows). All have
	 * system fallbacks so unloaded fonts degrade gracefully. */
	--fule-mm-font-serif:         'Newsreader', Georgia, 'Times New Roman', serif;
	--fule-mm-font-sans:          'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fule-mm-font-mono:          'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

	/* ---- Layout ---- */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 32px;
	padding: 32px;
	background: var(--fule-mm-navy-800);
	color: var(--fule-mm-text-primary);
	border-radius: 12px;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--fule-mm-font-sans);
	line-height: 1.4;
}

@media (max-width: 900px) {
	.fule-mega-menu {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px;
	}
}

/* =========================================================================
 *  Responsive ladder
 *
 *  900px — two-pane → single-pane (classes stack above specs)
 *  768px — phone view: class cards drop to 2 col, bucket row strips to
 *          label-only (sublabels + counts hide for room), footer stacks
 *  560px — narrow phone: specs sections collapse to 1 col (was 2)
 *  400px — tiny phone: class cards drop to 1 col, wider image aspect
 * ========================================================================= */

/* Phone — strip the bucket row down to just label + active-state styling.
 * Sublabels ("pre-owned, inspected" / "under 5,000 lbs · most SUVs") and the
 * count badges hide — not enough horizontal room and the label alone
 * communicates the bucket clearly enough. Active-bucket gold tint + border
 * still flags the selected one. */
@media (max-width: 768px) {
	.fule-mega-menu {
		padding: 18px;
		gap: 20px;
	}
	.fule-mega-menu__classes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.fule-mega-menu__bucket {
		grid-template-columns: 1fr;
	}
	.fule-mega-menu__bucket-sublabel,
	.fule-mega-menu__bucket-count {
		display: none;
	}
	.fule-mega-menu__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.fule-mega-menu__footer-links {
		justify-content: flex-start;
		gap: 14px 18px;
	}
	.fule-mega-menu__view-all {
		margin-left: 0;
		justify-content: center;
	}
	.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon {
		width: 28px;
		height: 28px;
	}
	.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon svg,
	.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon i {
		width: 16px;
		height: 16px;
		font-size: 16px;
	}
}

/* Narrow phone — specs sections fold to single column (the default 2-col
 * stays through tablet/landscape phone). */
@media (max-width: 560px) {
	.fule-mega-menu__specs {
		grid-template-columns: 1fr;
	}
}

/* Tiny phone — class cards drop to 1 col, image goes widescreen so the
 * card stays compact. */
@media (max-width: 400px) {
	.fule-mega-menu__classes {
		grid-template-columns: 1fr;
	}
	.fule-mega-menu__class-card-media {
		aspect-ratio: 16 / 9;
	}
}

/* =========================================================================
 *  Pane headers — heading left, meta right (e.g. "SHOP BY CLASS  66 units")
 * ========================================================================= */
.fule-mega-menu__pane-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fule-mm-divider);
}

.fule-mega-menu .fule-mega-menu__pane-header .fule-mega-menu__pane-heading {
	font-family: var(--fule-mm-font-mono);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
	color: var(--fule-mm-text-muted);
}
.fule-mega-menu .fule-mega-menu__pane-header .fule-mega-menu__pane-meta {
	font-family: var(--fule-mm-font-mono);
	font-size: 12px;
	color: var(--fule-mm-text-subtle);
	letter-spacing: 0.02em;
}

/* =========================================================================
 *  Classes pane (left) — cream cards with image, name, unit count
 * ========================================================================= */
.fule-mega-menu__classes {
	display: grid;
	grid-template-columns: repeat(var(--fule-mm-classes-cols, 3), minmax(0, 1fr));
	gap: 12px;
}
.fule-mega-menu .fule-mega-menu__classes .fule-mega-menu__class-card {
	display: block;
	background: var(--fule-mm-navy-700);
	color: var(--fule-mm-text-primary);
	border-radius: 8px;
	padding: 12px;
	text-decoration: none;
	transition: background-color 150ms ease, transform 150ms ease;
}
.fule-mega-menu .fule-mega-menu__classes .fule-mega-menu__class-card:hover {
	background: var(--fule-mm-navy-600);
}
.fule-mega-menu__class-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 10px;
	background: var(--fule-mm-cream-100);
}
.fule-mega-menu__class-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fule-mega-menu__class-card-placeholder {
	width: 100%;
	height: 100%;
	color: var(--fule-mm-ink-500);
}
.fule-mega-menu .fule-mega-menu__class-card .fule-mega-menu__class-card-name {
	display: block;
	font-family: var(--fule-mm-font-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: var(--fule-mm-text-primary);
}
.fule-mega-menu .fule-mega-menu__class-card .fule-mega-menu__class-card-count {
	display: block;
	font-family: var(--fule-mm-font-mono);
	font-size: 11px;
	margin-top: 4px;
	color: var(--fule-mm-text-muted);
	letter-spacing: 0.02em;
}

/* =========================================================================
 *  Specs pane (right) — sections in a 2-column grid by default
 * ========================================================================= */
.fule-mega-menu__specs {
	display: grid;
	grid-template-columns: repeat(var(--fule-mm-specs-cols, 2), minmax(0, 1fr));
	gap: 24px 32px;
}

/* Section heading: icon · label · total-count (count right-aligned) */
.fule-mega-menu__spec-section-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fule-mm-divider);
	font-size: 14px;
	font-weight: 700;
}
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-heading {
	font-family: var(--fule-mm-font-serif);
	font-weight: 600;
	color: var(--fule-mm-text-primary);
}
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fule-mm-gold-500);
	background: var(--fule-mm-navy-700);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	box-sizing: border-box;
}
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon svg,
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon i {
	width: 18px;
	height: 18px;
	font-size: 18px;
	fill: currentColor; /* SVG default is #000 — force inherit from wrapper's gold */
}
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-icon svg path {
	fill: currentColor; /* some Font Awesome SVGs put fill on the <path>, override that too */
}
.fule-mega-menu .fule-mega-menu__spec-section .fule-mega-menu__spec-section-count {
	margin-left: auto;
	font-family: var(--fule-mm-font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--fule-mm-text-muted);
}

/* Buckets list */
.fule-mega-menu__buckets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/*
 * Bucket row — 3-column grid: label / sublabel / count.
 *
 *   max-content       label sticks left, exactly its content width
 *   minmax(0, 1fr)    sublabel cell fills remaining; empty span renders 0w
 *   max-content       count right-aligned, exactly its content width
 *
 * The empty sublabel span (rendered when bucket has no sublabel) still
 * participates in the grid — it just produces zero visual content but keeps
 * the count column reliably at the far right.
 */
.fule-mega-menu__bucket {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr) max-content;
	column-gap: 12px;
	align-items: baseline;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid transparent; /* placeholder so .is-active doesn't shift layout */
	color: inherit;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.fule-mega-menu__bucket:hover {
	background: var(--fule-mm-bucket-hover-bg);
}
/*
 * Active state — subtle gold-tint pill with a 1px gold-tinted border and
 * gold-200 text. Spec from the design ref: rgba(217,161,74,0.07) bg +
 * rgba(217,161,74,0.22) border + #f3dca6 text. Earlier v1.25.0 treatment
 * was a solid gold fill; v1.25.1 used cream pill + gold left stripe.
 * This is the third pass — subtler than both, matches the design mockup
 * "All RVs for sale" featured row exactly.
 */
.fule-mega-menu__bucket.is-active {
	background: var(--fule-mm-bucket-active-bg);
	border-color: var(--fule-mm-bucket-active-border);
}

/* 4-class color rules — beat Elementor's compiled Style controls. */
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket .fule-mega-menu__bucket-label {
	font-family: var(--fule-mm-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--fule-mm-text-primary);
}
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket .fule-mega-menu__bucket-sublabel {
	font-family: var(--fule-mm-font-mono);
	font-size: 11px;
	color: var(--fule-mm-text-muted);
	letter-spacing: 0.02em;
}
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket .fule-mega-menu__bucket-count {
	font-family: var(--fule-mm-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--fule-mm-text-muted);
	text-align: right;
	min-width: 1.5em;
}
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket.is-active .fule-mega-menu__bucket-label,
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket.is-active .fule-mega-menu__bucket-count {
	color: var(--fule-mm-bucket-active-text);
	font-weight: 600;
}
.fule-mega-menu .fule-mega-menu__buckets .fule-mega-menu__bucket.is-active .fule-mega-menu__bucket-sublabel {
	color: var(--fule-mm-bucket-active-meta);
}

/* =========================================================================
 *  Footer — links left, view-all CTA right
 * ========================================================================= */
.fule-mega-menu__footer {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
	margin-top: 8px;
	border-top: 1px solid var(--fule-mm-divider);
	flex-wrap: wrap;
}
.fule-mega-menu__footer-links {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.fule-mega-menu .fule-mega-menu__footer .fule-mega-menu__footer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fule-mm-text-muted);
	text-decoration: none;
	font-family: var(--fule-mm-font-sans);
	font-size: 13px;
	transition: color 150ms ease;
}
.fule-mega-menu .fule-mega-menu__footer .fule-mega-menu__footer-link:hover {
	color: var(--fule-mm-text-primary);
}
.fule-mega-menu .fule-mega-menu__footer .fule-mega-menu__footer-link .fule-mega-menu__footer-link-icon {
	color: var(--fule-mm-gold-400);
}
.fule-mega-menu__footer-link-icon svg,
.fule-mega-menu__footer-link-icon i {
	width: 14px;
	height: 14px;
	font-size: 14px;
	fill: currentColor; /* same SVG-fill-default-is-black fix as the section icons */
}
.fule-mega-menu__footer-link-icon svg path {
	fill: currentColor;
}

/* View-all CTA (gold pill) */
.fule-mega-menu .fule-mega-menu__footer .fule-mega-menu__view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--fule-mm-cta-bg);
	color: var(--fule-mm-cta-text);
	text-decoration: none;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	margin-left: auto;
	transition: background-color 150ms ease;
}
.fule-mega-menu .fule-mega-menu__footer .fule-mega-menu__view-all:hover {
	background: var(--fule-mm-cta-bg-hover);
}
.fule-mega-menu__footer-spacer {
	display: block;
}

/* =========================================================================
   v1.27.7 — Fule: Makes / Fule: Models widgets
   =========================================================================
   Two render modes per widget:
   • .fule-makes--vertical-menu / .fule-models--vertical-menu — single-column
     stacked list, mirrors the site-footer "RVs By Class" nav-menu pattern
     (footer.php:82 → components.css:503). Footer uses on-dark tokens; the
     widgets use light-surface tokens so they can be dropped anywhere on
     the page.
   • .fule-makes--grid / .fule-models--grid — CSS Grid of cards. Logo or
     placeholder + label + count. Card hover lift, custom-prop column count.
   Rules are duplicated for both .fule-makes* and .fule-models* selector
   trees so a future divergence (e.g. ModelsWidget gets a "Show make name"
   toggle that needs a 2-line layout) stays scoped.
   ========================================================================= */

/* --- shared: hide list bullets when rendered as <ul> --- */
.fule-makes,
.fule-models {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* --- vertical menu (footer-style stack) --- */
.fule-makes--vertical-menu,
.fule-models--vertical-menu {
	display: flex;
	flex-direction: column;
}
.fule-makes--vertical-menu .fule-makes__item,
.fule-models--vertical-menu .fule-models__item {
	margin-bottom: var(--space-3xs, 0.25rem);
}
.fule-makes--vertical-menu .fule-makes__link,
.fule-models--vertical-menu .fule-models__link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2xs, 0.5rem);
	color: var(--color-text, #1A1A1A);
	font-size: var(--fs-sm, 0.875rem);
	text-decoration: none;
	transition: color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-makes--vertical-menu .fule-makes__link:hover,
.fule-makes--vertical-menu .fule-makes__link:focus-visible,
.fule-models--vertical-menu .fule-models__link:hover,
.fule-models--vertical-menu .fule-models__link:focus-visible {
	color: var(--color-accent, #C65D3E);
}
.fule-makes--vertical-menu .fule-makes__count,
.fule-models--vertical-menu .fule-models__count {
	color: var(--color-text-muted, #5A5A5A);
	font-size: 0.85em;
}

/* --- grid mode --- */
.fule-makes--grid,
.fule-models--grid {
	display: grid;
	grid-template-columns: repeat(var(--fule-cols, 3), minmax(0, 1fr));
	gap: var(--space-md, 1.5rem);
	/* v1.30.4 safety belt: when the widget sits in a narrow Elementor
	 * column (e.g. a footer 4-column grid), the cards' intrinsic min-content
	 * can otherwise push the grid past 100% of its parent and overflow to
	 * the right edge of the page. max-width caps the wrapper; min-width:0
	 * is restated on cards below so 1fr tracks can actually shrink. */
	max-width: 100%;
	min-width: 0;
}
/* Fallback when --fule-cols is unset (e.g. CSS rendered without inline var
 * — shouldn't happen in practice but defensive). */
@supports not (grid-template-columns: repeat(var(--fule-cols), 1fr)) {
	.fule-makes--grid,
	.fule-models--grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}
@media (max-width: 768px) {
	/* Cap at 2 columns on small screens regardless of --fule-cols. */
	.fule-makes--grid,
	.fule-models--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm, 1rem);
	}
}

/* --- card --- */
.fule-makes__card,
.fule-models__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
	padding: var(--space-md, 1.5rem);
	background: var(--color-surface-card, #FFFFFF);
	border: 1px solid var(--color-border, #E5DCC6);
	border-radius: var(--radius-lg, 16px);
	color: inherit;
	text-decoration: none;
	/* v1.30.4: pair with the wrapper's max-width:100% — grid items default
	 * to min-width:min-content which prevents the 1fr tracks from shrinking
	 * below the card's intrinsic content size, causing overflow in narrow
	 * columns. box-sizing keeps the 1.5rem padding inside the allotted
	 * track width. */
	min-width: 0;
	box-sizing: border-box;
	transition:
		transform  var(--duration-fast, 180ms) var(--ease-out, ease-out),
		box-shadow var(--duration-fast, 180ms) var(--ease-out, ease-out),
		border-color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-makes__card:hover,
.fule-makes__card:focus-visible,
.fule-models__card:hover,
.fule-models__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 8px 20px rgba(45, 30, 15, 0.10));
	border-color: var(--color-border-strong, #C9BC9B);
}
.fule-makes__card--no-image,
.fule-models__card--no-image {
	padding: var(--space-sm, 1rem) var(--space-md, 1.5rem);
}

/* --- image slot --- */
.fule-makes__image,
.fule-models__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--color-surface-tint, #EFE8D6);
	border-radius: var(--radius-md, 10px);
	overflow: hidden;
}
.fule-makes__image img,
.fule-models__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: var(--space-sm, 1rem);
}

/* --- placeholder (no logo) ---
 * Same aspect ratio as the image slot so a mixed grid (some logos, some
 * placeholders) stays visually aligned.
 */
.fule-makes__placeholder,
.fule-models__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--space-sm, 1rem);
	color: var(--color-text-muted, #5A5A5A);
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-md, 1.125rem);
	font-weight: 600;
	text-align: center;
	line-height: var(--lh-tight, 1.2);
}

/* --- meta (label + count) --- */
.fule-makes__meta,
.fule-models__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3xs, 0.25rem);
}
.fule-makes__label,
.fule-models__label {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-md, 1.125rem);
	font-weight: 600;
	color: var(--color-text, #1A1A1A);
	line-height: var(--lh-snug, 1.25);
}
.fule-makes__count,
.fule-models__count {
	font-size: 0.85em;
	color: var(--color-text-muted, #5A5A5A);
}

/* ============================================
 * Section Header (Fule: Section Header widget)
 * v1.28.0
 * ============================================
 * Structural defaults only. All color / font / sizing knobs come from
 * Elementor Style packs on the widget instance. Decorator color flows
 * via currentColor on the wrapping .fule-sh__decorator span so a single
 * Style-tab color control paints dashes, icons, and custom SVG paths.
 */

.fule-sh {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Margin reset — element tags are user-selectable (h1–h6 / div / p / span)
   so the flex gap controls all vertical spacing instead of browser
   defaults. v1.52.0 */
.fule-sh__subtitle,
.fule-sh__title,
.fule-sh__description {
	margin: 0;
}

/* Alignment variants — text-align for inline content, align-items for the
 * flex children so subtitle-wrap and link line up to the same edge. */
.fule-sh--align-left   { text-align: left;   align-items: flex-start; }
.fule-sh--align-center { text-align: center; align-items: center;     }
.fule-sh--align-right  { text-align: right;  align-items: flex-end;   }

/* Subtitle row — inline-flex so decorator and subtitle baseline-align.
 * gap is overridable by the decorator Style pack (decorator_gap). */
.fule-sh__subtitle-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.fule-sh--align-center .fule-sh__subtitle-wrap { justify-content: center; }
.fule-sh--align-right  .fule-sh__subtitle-wrap { justify-content: flex-end; }

.fule-sh__subtitle {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Decorator wrapper — color cascades to dash background + icon fill. */
.fule-sh__decorator {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

/* Dash — defaults sized for the typical eyebrow row; Style pack overrides
 * width (dash_length) and height (dash_thickness). */
.fule-sh__dash {
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: currentColor;
	flex-shrink: 0;
}

/* Icon slot — both Icons::svg() output and custom user-pasted SVG.
 * Force fill: currentColor on every nested svg + path (v1.25.2 lesson:
 * SVG spec default fill is #000, NOT currentColor — wrapper color
 * doesn't auto-cascade to paths). */
.fule-sh__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: currentColor;
	flex-shrink: 0;
}
.fule-sh__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}
.fule-sh__icon svg path {
	fill: currentColor;
}

/* Title — defaults only; typography + color come from the title Style
 * pack. Tight line-height for editorial display sizing. */
.fule-sh__title {
	margin: 0;
	line-height: 1.1;
}
.fule-sh__title em,
.fule-sh__em-accent {
	font-style: italic;
}

/* Description — last <p> margin reset so the bottom of the description
 * block aligns flush with the widget gap. */
.fule-sh__description {
	margin: 0;
}
.fule-sh__description p:last-child {
	margin-bottom: 0;
}

/* Browse-all link — inline-flex so a trailing arrow/icon sits on the
 * text baseline. */
.fule-sh__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 600;
}
.fule-sh__link:hover,
.fule-sh__link:focus-visible {
	text-decoration: underline;
}

/* ============================================
 * Inventory Search (Fule: Inventory Search)
 * v1.28.0-alpha.3
 * ============================================
 * Structural defaults only. All color / font / size knobs from Style packs.
 * Three layout modes:
 *   .fule-search--horizontal   — CSS grid, column-span aware (>=768px)
 *   .fule-search--stacked      — flex column, label-above-input rows
 *   .fule-search--compact_bar  — inline-flex single row, no labels visible
 * Mobile (<768px) flattens everything to single-column stacked.
 */

.fule-search {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 1rem);
	width: 100%;
}

.fule-search__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: 100%;
}

/* Horizontal: 4-column grid >=768px, column-span per row honored. */
@media (min-width: 768px) {
	.fule-search--horizontal .fule-search__fields {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.fule-search--horizontal .fule-search-field--span-1    { grid-column: span 1; }
	.fule-search--horizontal .fule-search-field--span-2    { grid-column: span 2; }
	.fule-search--horizontal .fule-search-field--span-3    { grid-column: span 3; }
	.fule-search--horizontal .fule-search-field--span-full { grid-column: 1 / -1; }
}

/* Stacked: always single column. */
.fule-search--stacked .fule-search__fields {
	grid-template-columns: 1fr;
}

/* Compact bar: single inline-flex row, scrolls horizontally on overflow.
 * Labels visually hidden (still in DOM for SR). Best for <= 4 fields. */
.fule-search--compact_bar .fule-search__fields {
	display: inline-flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	-webkit-overflow-scrolling: touch;
}
.fule-search--compact_bar .fule-search-field {
	flex: 0 0 auto;
	min-width: 160px;
}
.fule-search--compact_bar .fule-search-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Field shells — flex column to stack label + input. */
.fule-search-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fule-search-field__label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

.fule-search-field__input,
.fule-search-field__select {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	font: inherit;
	background: var(--color-surface-card, #FFFFFF);
	border: 1px solid var(--color-border-strong, #C9BC9B);
	border-radius: var(--radius-sm, 6px);
	color: inherit;
	box-sizing: border-box;
}
.fule-search-field__input:focus,
.fule-search-field__select:focus {
	outline: 2px solid var(--color-accent, #C65D3E);
	outline-offset: 2px;
}

/* Range — paired min/max with a separator. */
.fule-search-field__range {
	display: flex;
	align-items: center;
	gap: 6px;
}
.fule-search-field__range .fule-search-field__input {
	flex: 1 1 0;
	min-width: 0;
}
.fule-search-field__range-sep {
	color: var(--color-text-muted, #5A5A5A);
	font-weight: 600;
}

/* Multiselect — checkbox list. */
.fule-search-field__fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}
.fule-search-field__checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	padding: 4px 0;
}

/* Submit button. Style pack handles color/typography; structural-only here. */
.fule-search-submit {
	align-self: flex-start;
	padding: 10px 24px;
	font: inherit;
	font-weight: 600;
	background: var(--color-accent, #C65D3E);
	color: var(--color-text-on-accent, #FFFFFF);
	border: 0;
	border-radius: var(--radius-sm, 6px);
	cursor: pointer;
	transition: background 150ms ease;
}
.fule-search-submit:hover,
.fule-search-submit:focus-visible {
	background: var(--color-accent-dark, #A84A30);
}

/* Submit button — size modifiers (Bootstrap-style scale).
 * Medium is the structural default above; the modifier class repeats
 * those values for clarity. Block makes the button span the form's
 * full width via width:100% + align-self:stretch (overrides any
 * --align-* class — render() also stops emitting --align-* when
 * size=block, so the rules don't fight). */
.fule-search-submit--size-small {
	padding: 6px 14px;
	font-size: 0.8125rem;
}
.fule-search-submit--size-medium {
	padding: 10px 24px;
	font-size: 1rem;
}
.fule-search-submit--size-large {
	padding: 14px 32px;
	font-size: 1.125rem;
}
.fule-search-submit--size-block {
	padding: 12px 24px;
	font-size: 1rem;
	width: 100%;
	display: block;
	align-self: stretch;
}

/* Submit button — alignment modifiers (within the form's flex column).
 * --align-left overrides the structural default flex-start with the
 * same value for symmetry; --align-center and --align-right do the
 * actual work. Not emitted when layout_mode=compact_bar (button is
 * inline) or size=block (button spans full width) — see render(). */
.fule-search-submit--align-left   { align-self: flex-start; }
.fule-search-submit--align-center { align-self: center; }
.fule-search-submit--align-right  { align-self: flex-end; }

/* Compact bar: submit sits inline with the fields. */
.fule-search--compact_bar {
	flex-direction: row;
	align-items: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}
.fule-search--compact_bar .fule-search-submit {
	align-self: stretch;
}

/* Empty state. */
.fule-search--empty {
	padding: 8px 0;
}
.fule-search__empty-link {
	color: var(--color-accent, #C65D3E);
	text-decoration: none;
	font-weight: 600;
}
.fule-search__empty-link:hover {
	text-decoration: underline;
}

/* =========================================================================
   v1.30.1 — Makes & Class Types list/horizontal/compact-text layouts
   -------------------------------------------------------------------------
   The grid + vertical-menu rules above stay unchanged. These rules add:
   • .fule-makes--horizontal-list   • .fule-makes--compact-text
   • .fule-class-types__list--vertical-list
   • .fule-class-types__list--horizontal-list
   • .fule-class-types__list--compact-text
   ClassTypes list rules mirror the Makes vertical-menu treatment so both
   widgets share a single text-link visual language.
   ========================================================================= */

/* --- Makes: horizontal list (inline pill row) --- */
.fule-makes--horizontal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
.fule-makes--horizontal-list .fule-makes__item {
	margin: 0;
}
.fule-makes--horizontal-list .fule-makes__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.35em 0.85em;
	border: 1px solid var(--color-border, #E5DCC6);
	border-radius: 999px;
	color: var(--color-text, #1A1A1A);
	font-size: var(--fs-sm, 0.875rem);
	text-decoration: none;
	background: transparent;
	transition:
		color var(--duration-fast, 180ms) var(--ease-out, ease-out),
		background var(--duration-fast, 180ms) var(--ease-out, ease-out),
		border-color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-makes--horizontal-list .fule-makes__link:hover,
.fule-makes--horizontal-list .fule-makes__link:focus-visible {
	color: var(--color-accent, #C65D3E);
	border-color: var(--color-accent, #C65D3E);
}
.fule-makes--horizontal-list .fule-makes__count {
	color: var(--color-text-muted, #5A5A5A);
	font-size: 0.85em;
}

/* --- Makes: compact text (CSS multi-column flow) --- */
.fule-makes--compact-text {
	column-count: var(--fule-text-cols, 2);
	column-gap: var(--space-lg, 2rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
.fule-makes--compact-text .fule-makes__item {
	break-inside: avoid;
	margin: 0 0 var(--space-3xs, 0.25rem);
}
.fule-makes--compact-text .fule-makes__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	color: var(--color-text, #1A1A1A);
	font-size: var(--fs-sm, 0.875rem);
	text-decoration: none;
	transition: color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-makes--compact-text .fule-makes__link:hover,
.fule-makes--compact-text .fule-makes__link:focus-visible {
	color: var(--color-accent, #C65D3E);
}
.fule-makes--compact-text .fule-makes__count {
	color: var(--color-text-muted, #5A5A5A);
	font-size: 0.85em;
}
@media (max-width: 640px) {
	/* Cap text columns at 2 on small screens regardless of --fule-text-cols. */
	.fule-makes--compact-text { column-count: min(var(--fule-text-cols, 2), 2); }
}

/* =========================================================================
   Class Types — list / horizontal / compact text
   ========================================================================= */
.fule-class-types__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.fule-class-types__list .fule-class-types__name {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--fs-md, 1.125rem);
	font-weight: 600;
	color: inherit;
	line-height: var(--lh-snug, 1.25);
}
.fule-class-types__list .fule-class-types__count {
	color: color-mix( in srgb, currentColor 65%, transparent );
	font-size: 0.85em;
}
.fule-class-types__list .fule-class-types__link-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-class-types__list .fule-class-types__link-text:hover,
.fule-class-types__list .fule-class-types__link-text:focus-visible {
	color: var(--color-accent, #C65D3E);
}

/* Vertical list — stacked. */
.fule-class-types__list--vertical-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
}

/* Horizontal list — flex-wrap pills. */
.fule-class-types__list--horizontal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
}
.fule-class-types__list--horizontal-list .fule-class-types__link-text {
	padding: 0.35em 0.85em;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 999px;
	font-size: var(--fs-sm, 0.875rem);
}
.fule-class-types__list--horizontal-list .fule-class-types__link-text:hover,
.fule-class-types__list--horizontal-list .fule-class-types__link-text:focus-visible {
	border-color: var(--color-accent, #C65D3E);
}
/* Don't compound the link-text font-size with the .name child font-size. */
.fule-class-types__list--horizontal-list .fule-class-types__name {
	font-size: 1em;
}

/* Compact text — CSS columns flow. */
.fule-class-types__list--compact-text {
	column-count: var(--fule-text-cols, 2);
	column-gap: var(--space-lg, 2rem);
}
.fule-class-types__list--compact-text .fule-class-types__item {
	break-inside: avoid;
	margin: 0 0 var(--space-3xs, 0.25rem);
}
.fule-class-types__list--compact-text .fule-class-types__name {
	font-size: var(--fs-sm, 0.95rem);
}
@media (max-width: 640px) {
	.fule-class-types__list--compact-text { column-count: min(var(--fule-text-cols, 2), 2); }
}


/* -------------------------------------------------------------------------
   Action Cluster (v1.62.0) — header Saved & Compare icon cluster.

   Structural floor only: layout + the positioned count pill. Icon color/
   fill/size come from the widget's register_icon_style_pack; the badge's
   background + text color come from the Count Badge style section (both
   scoped {{WRAPPER}}). The charcoal/lime values below are var()-backed
   fallbacks so an unstyled instance still matches the header screenshot.
   ------------------------------------------------------------------------- */
.fule-cluster {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm, 1rem);
}
.fule-cluster__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	line-height: 0;
	text-decoration: none;
	/* v1.63.0 — out-of-the-box icon-button treatment. Padding gives the
	   background + border breathing room around the glyph; transparent
	   defaults read as a clean outline button that the Elementor "Icon
	   Button" style controls override per instance. */
	padding: 0.5rem;
	border: 1px solid var(--color-border, #d8d8d8);
	border-radius: var(--radius-md, 10px);
	background-color: transparent;
	transition:
		background-color var(--duration-fast, 180ms) var(--ease-out, ease-out),
		border-color     var(--duration-fast, 180ms) var(--ease-out, ease-out),
		color            var(--duration-fast, 180ms) var(--ease-out, ease-out);
}
.fule-cluster__action:hover {
	background-color: color-mix( in srgb, var(--color-text, #1d2327) 8%, transparent );
}
.fule-cluster__icon {
	display: block;
	width: 24px;
	height: 24px;
}
/* Count pill — pinned to the icon's top-right corner. Charcoal field,
   lime numerals (matches the header screenshot). */
.fule-cluster__badge {
	position: absolute;
	top: -0.5rem;
	inset-inline-start: 100%;
	transform: translateX(-55%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	border-radius: var(--radius-pill, 9999px);
	background: var(--color-charcoal, #1d2327);
	color: var(--color-lime, #c5f03d);
	font-family: var(--font-body, inherit);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}
/* Explicit reset: the inline-flex above would otherwise override the UA
   [hidden] { display: none }, leaving an empty "0" pill visible at count 0. */
.fule-cluster__badge[hidden] {
	display: none;
}