/*
Theme Name: Forest Mill Antiques
Theme URI: https://forestmillantiques.com
Description: Forest Mill Antiques — child theme of Hello Elementor. Establishes the forest-green design system and hosts the Antique Passport data model, stock workflow, image-SEO pipeline, product/archive templates and structured data. Built by GrowTraffic.
Author: GrowTraffic
Template: hello-elementor
Version: 0.1.0
Text Domain: forestmill
*/

/* =========================================================================
   Forest Mill — design tokens (brief §10)
   Deep forest green, NOT teal. Brass used sparingly as accent, never as text.
   ========================================================================= */
:root {
  /* Brand palette */
  --fm-forest:        #173B2C; /* Deep Forest Green — primary */
  --fm-forest-dark:   #102A20; /* Dark Forest Green — depth / footers */
  --fm-ivory:         #F4F0E6; /* Warm Ivory — page ground */
  --fm-brass:         #B3965E; /* Restrained Antique Brass — decorative accent only (not text) */
  --fm-brass-on-dark: #C9AE77; /* Brass text on dark bg — WCAG AA (5.77:1 on forest) §64 */
  --fm-brass-text:    #6E5A2E; /* Bronze text on light bg — WCAG AA (5.8:1 on ivory) §64 */
  --fm-charcoal:      #252724; /* Charcoal — body text */
  --fm-white:         #FFFFFF;

  /* Semantic roles */
  --fm-bg:            var(--fm-ivory);
  --fm-surface:       var(--fm-white);
  --fm-text:          var(--fm-charcoal);
  --fm-heading:       var(--fm-forest);
  --fm-accent:        var(--fm-brass);
  --fm-link:          var(--fm-forest);
  --fm-link-hover:    var(--fm-forest-dark);

  /* Typography — editorial serif display + humanist sans body.
     Real webfonts are self-hosted in a later phase (privacy §74); these are
     high-quality fallbacks so the system is coherent from day one. */
  --fm-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fm-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale — generous, accessible sizing (brief §4, §64) */
  --fm-text-base:    1.125rem;  /* 18px */
  --fm-line:         1.6;
  --fm-measure:      68ch;
  --fm-radius:       4px;
  --fm-tap:          48px;      /* min touch target */
  --fm-space:        clamp(1rem, 2.5vw, 2rem);
}

/* =========================================================================
   Base — kept light; Elementor + templates own most layout.
   ========================================================================= */
html { font-size: 100%; }

body {
  background-color: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-base);
  line-height: var(--fm-line);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fm-font-display);
  color: var(--fm-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: var(--fm-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--fm-link-hover); }

/* Visible focus for keyboard users (brief §64) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--fm-brass);
  outline-offset: 2px;
}

/* Accessible minimum tap targets on primary controls (brief §4, §65) */
.button, button, input[type="submit"], .wp-element-button {
  min-height: var(--fm-tap);
}

/* =========================================================================
   Product page — the "dealer ticket" (§26)
   ========================================================================= */
.fma-sold-banner {
  display: inline-block;
  background: var(--fm-charcoal);
  color: var(--fm-white);
  font-family: var(--fm-font-display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35em 1em;
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.fma-keyfacts {
  margin: 1.25rem 0;
  border-top: 1px solid rgba(37,39,36,0.15);
}
.fma-keyfacts__row {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(37,39,36,0.12);
}
.fma-keyfacts dt {
  flex: 0 0 34%;
  font-weight: 600;
  color: var(--fm-forest);
}
.fma-keyfacts dd { margin: 0; }

.fma-status { font-weight: 600; }
.fma-status--available     { color: #1f7a44; }
.fma-status--sold          { color: var(--fm-charcoal); }
.fma-status--reserved,
.fma-status--viewing,
.fma-status--offer_pending { color: var(--fm-brass); }
.fma-status--withdrawn     { color: #8a8a8a; }

/* CTAs — compound `.button.fma-btn.*` (0-3-0) beats WooCommerce's `.woocommerce a.button` (0-2-1) without !important */
.fma-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
.fma-btn,
.button.fma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fm-tap);
  padding: 0.7em 1.4em;
  border-radius: var(--fm-radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--fm-forest);
  background: transparent;
  color: var(--fm-forest);
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
/* Primary CTA — brass/gold fill (design reference 2026-08-30: gold is the conversion colour,
   forest green is reserved for headings/structure). Dark-forest text on brass, NOT white — white
   on this brass fails WCAG AA (~2.9:1); forest-dark on brass passes (~6.5:1). */
.fma-btn--primary,
.button.fma-btn.fma-btn--primary { background: var(--fm-brass); border-color: var(--fm-brass); color: var(--fm-forest-dark); }
.fma-btn--primary:hover, .fma-btn--primary:focus,
.button.fma-btn.fma-btn--primary:hover, .button.fma-btn.fma-btn--primary:focus { background: #a3835a; border-color: #a3835a; color: var(--fm-forest-dark); transform: translateY(-1px); }
.fma-btn--secondary,
.button.fma-btn.fma-btn--secondary { background: transparent; color: var(--fm-forest); }
.fma-btn--secondary:hover, .fma-btn--secondary:focus,
.button.fma-btn.fma-btn--secondary:hover, .button.fma-btn.fma-btn--secondary:focus { background: var(--fm-forest); color: var(--fm-white); }
.fma-btn--link,
.button.fma-btn.fma-btn--link { border-color: transparent; background: transparent; color: var(--fm-forest); text-decoration: underline; padding-inline: 0.4em; min-height: 0; }

/* Detail + visit prompt + forms */
.fma-detail, .fma-visit-prompt, .fma-forms {
  margin: 2.5rem 0;
  max-width: var(--fm-measure);
}
.fma-visit-prompt {
  background: var(--fm-white);
  border-left: 4px solid var(--fm-brass);
  padding: 1.25rem 1.5rem;
}
.fma-enquiry { margin: 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid rgba(37,39,36,0.12); }
.fma-enquiry__form label { display: block; font-weight: 600; margin-bottom: 0.9rem; }
.fma-enquiry__form input,
.fma-enquiry__form textarea {
  width: 100%;
  max-width: 32rem;
  padding: 0.6em 0.7em;
  border: 1px solid rgba(37,39,36,0.35);
  border-radius: var(--fm-radius);
  font: inherit;
  font-weight: 400;
}
.fma-enquiry__ok {
  background: #eef6ee;
  border-left: 4px solid #1f7a44;
  padding: 0.9rem 1.1rem;
}

/* Catalogue cards (§18) */
.fma-card-badge {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  background: var(--fm-charcoal); color: var(--fm-white);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25em 0.6em; border-radius: 2px;
}
.fma-card-badge--sold { background: var(--fm-charcoal); }
.fma-card-badge--reserved, .fma-card-badge--offer_pending, .fma-card-badge--viewing { background: var(--fm-brass); }
.woocommerce ul.products li.product {
  position: relative;
  background: var(--fm-white);
  border: 1px solid rgba(23,59,44,0.08);
  border-radius: 8px;
  padding: 0.75rem 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(23,59,44,0.05);
  transition: box-shadow .15s ease, transform .1s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 8px 22px rgba(23,59,44,0.1); transform: translateY(-2px); }

/* Coherent card imagery regardless of source aspect ratio (design instruction §19) */
.woocommerce ul.products li.product img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  background: var(--fm-white);
}

/* Woo's own shop-loop selector (.woocommerce ul.products li.product a.button) out-specifies
   the base .fma-btn rule, so button styling is restated here at matching specificity. */
.woocommerce ul.products li.product .button.fma-btn {
  width: 100%; text-align: center; margin-top: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--fm-tap); padding: 0.65em 1em; border-radius: var(--fm-radius);
  font-weight: 600; text-decoration: none;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em;
  border: 1.5px solid var(--fm-forest); background: transparent; color: var(--fm-forest);
  transition: background-color .15s ease, color .15s ease;
}
.woocommerce ul.products li.product .button.fma-btn:hover,
.woocommerce ul.products li.product .button.fma-btn:focus {
  background: var(--fm-forest); color: var(--fm-white);
}

/* Admin-only edit/delete bubbles over card images (visible to logged-in admins only,
   never to customers) get pushed clear of the corner badge */
.woocommerce ul.products li.product { overflow: visible; }


/* Branded footer (§14, §46) — hide Hello Elementor default footer */
.site-footer { display: none !important; }
.fma-footer { background: var(--fm-forest-dark); color: var(--fm-ivory); margin-top: 3rem; }
.fma-footer a { color: var(--fm-ivory); }
.fma-footer a:hover, .fma-footer a:focus { color: var(--fm-brass-on-dark); }
.fma-footer__grid {
  max-width: 1200px; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) 2rem;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1.3fr; gap: 2rem;
}
@media (max-width: 980px) { .fma-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 780px) { .fma-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fma-footer__grid { grid-template-columns: 1fr; } }
.fma-footer__logo { max-width: 180px; height: auto; margin-bottom: 1.1rem; }

/* Header logo sizing (§10, §28 brand) — enough presence to establish the brand */
.site-header .custom-logo,
img.custom-logo,
.site-logo img { max-height: 92px !important; width: auto !important; }
@media (max-width: 640px) {
  .site-header .custom-logo, img.custom-logo, .site-logo img { max-height: 64px !important; }
}

/* Suppress WCFM's duplicate catalog-enquiry button (we have our own flow §37) */
.wcfm_catalog_enquiry { display: none !important; }


/* Remove WCFM's frontend quick-edit/delete overlay from the customer-facing
   catalogue (design instruction §19) — dealers manage stock via /store-manager/,
   not from the public shop grid customers browse. */
.woocommerce ul.products .wcfm_buttons,
.woocommerce.single-product .wcfm_buttons { display: none !important; }


/* Discover-more pills (§53) + archive intro */
.fma-discover { margin: 2.5rem 0; max-width: var(--fm-measure); }
.fma-discover__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; }
.fma-discover__list a {
  display: inline-block; padding: 0.5em 1.2em;
  border: 1px solid var(--fm-forest); border-radius: 2rem;
  text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.03em;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fma-discover__list a:hover, .fma-discover__list a:focus { background: var(--fm-forest); color: var(--fm-white); }
.fma-explore__pills .fma-discover__list a { border-color: var(--fm-brass); color: var(--fm-brass-text); }
.fma-explore__pills .fma-discover__list a:hover, .fma-explore__pills .fma-discover__list a:focus { background: var(--fm-brass); color: var(--fm-forest-dark); border-color: var(--fm-brass); }
.fma-archive-intro { margin: 0 0 1.75rem; }
.fma-archive-intro h1 { margin: 0 0 0.4rem; }


/* Faceted filtering (§50) */
.fma-filters {
  background: var(--fm-white);
  border: 1px solid rgba(37,39,36,0.12);
  border-radius: var(--fm-radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.fma-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.fma-filters__head h2 { margin: 0; font-size: 1.4rem; }
.fma-filters__clear { font-size: 0.9rem; }
.fma-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.fma-facet { border: 0; margin: 0; padding: 0; min-width: 0; }
.fma-facet legend { font-weight: 600; color: var(--fm-forest); padding: 0; margin-bottom: 0.5rem; }
.fma-facet__opt { display: block; font-weight: 400; margin-bottom: 0.35rem; line-height: 1.4; }
.fma-facet__count { color: #7a7a72; font-size: 0.85em; }
.fma-facet__price { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.75rem; }
.fma-facet__price input { width: 5.5rem; padding: 0.4em; border: 1px solid rgba(37,39,36,0.35); border-radius: 3px; font: inherit; }


/* Persistent mobile action bar (§65) */
.fma-mobilebar { display: none; }
@media (max-width: 768px) {
  .fma-mobilebar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    gap: 1px;
    background: rgba(37,39,36,0.15);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  }
  .fma-mobilebar__btn {
    flex: 1;
    min-height: 54px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fm-white);
    color: var(--fm-forest);
    font-weight: 600;
    text-decoration: none;
  }
  .fma-mobilebar__btn--primary { background: var(--fm-forest); color: var(--fm-white); }
  /* keep content clear of the bar */
  body.single-product { padding-bottom: 56px; }
}

/* =========================================================================
   Header utility row — search / phone / basket (§6). A customer landing on
   a product, dealer or article page (not just the homepage hero) needs a
   way to search, ring Forest Mill, or see their basket.
   ========================================================================= */
.fma-site-header { align-items: center; gap: 1rem 1.5rem; box-shadow: 0 1px 0 rgba(23,59,44,0.1); position: relative; z-index: 20; }
/* Bug fix 2026-08-30: renaming "Shop" to "Shop Antiques" (+ its dropdown-arrow indicator) pushed the
   nav ~90px past the header's available width, so header-inner wrapped onto 2 rows at normal desktop
   widths (utility icons dropping below the nav) — reported by the user as odd overlapping/oversized
   header. Trimming per-item horizontal padding reclaims the width without shortening any label. */
.fma-site-header .site-navigation ul li > a { padding-left: 6px; padding-right: 6px; }
@media (min-width: 1025px) { .fma-site-header { gap: 0.75rem 1rem; } }
/* Brass underline on nav hover — small editorial detail carried from the section-heading rule motif */
.fma-site-header .site-navigation ul li > a {
  position: relative;
}
.fma-site-header .site-navigation ul li > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--fm-brass); transition: right .18s ease;
}
.fma-site-header .site-navigation ul li > a:hover::after,
.fma-site-header .site-navigation ul li > a:focus::after { right: 0; }
.fma-header-utility { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; }
.fma-header-utility__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--fm-forest);
  cursor: pointer;
  text-decoration: none;
}
.fma-header-utility__btn:hover, .fma-header-utility__btn:focus-visible { background: rgba(23,59,44,0.08); }
.fma-header-utility__badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px;
  background: var(--fm-brass-text);
  color: var(--fm-white);
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fma-header-search {
  order: 10;
  flex-basis: 100%;
  display: flex; gap: 0.5rem;
  margin-top: 0.75rem;
}
.fma-header-search input[type=search] {
  flex: 1;
  padding: 0.6em 0.8em;
  border: 1px solid rgba(37,39,36,0.2);
  border-radius: var(--fm-radius);
  font-size: 1rem;
}
.fma-header-search[hidden] { display: none; }

/* =========================================================================
   Homepage editorial — the mill/Russell story. Deliberately NOT a card:
   an asymmetric text column with a rule, not another bordered box (§2).
   ========================================================================= */
.fma-editorial {
  max-width: 58ch;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(37,39,36,0.15);
}
.fma-editorial__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--fm-brass-text);
  margin: 0 0 0.5rem;
}
.fma-editorial h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.fma-editorial__lead { font-size: 1.15rem; }
.fma-editorial p { margin: 0 0 1rem; }

/* =========================================================================
   Visit — proof strip + map (§13)
   ========================================================================= */
.fma-proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem 2rem;
  border-top: 1px solid rgba(37,39,36,0.12);
  border-bottom: 1px solid rgba(37,39,36,0.12);
  padding-block: 1.75rem;
}
.fma-proof-strip__item { text-align: center; }
.fma-proof-strip__item strong {
  display: block;
  font-family: var(--fm-font-display);
  color: var(--fm-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  margin-bottom: 0.15rem;
}
.fma-proof-strip__item span { font-size: 0.92rem; color: rgba(37,39,36,0.75); }
.fma-visit-map { margin-top: 2rem; border-radius: var(--fm-radius); overflow: hidden; border: 1px solid rgba(37,39,36,0.12); }
.fma-visit-map iframe { display: block; }

/* =========================================================================
   Dealer directory + profile (§7) — "a room inside Forest Mill", not a
   generic marketplace vendor grid.
   ========================================================================= */
.fma-dealer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}
.fma-dealer-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.fma-dealer-card:hover h2, .fma-dealer-card:focus h2 { color: var(--fm-forest-dark); text-decoration: underline; }
.fma-dealer-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--fm-radius);
  margin-bottom: 0.9rem;
  background: var(--fm-ivory);
}
.fma-dealer-card__img--placeholder {
  background: linear-gradient(135deg, var(--fm-ivory), rgba(179,150,94,0.18));
  border: 1px solid rgba(37,39,36,0.1);
}
.fma-dealer-card h2 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.fma-dealer-card p { margin: 0 0 0.5rem; font-size: 0.95rem; color: rgba(37,39,36,0.85); }
.fma-dealer-card__count {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fm-brass-text);
}
.fma-dealer-empty {
  max-width: 62ch;
  text-align: left;
  border-left: 3px solid var(--fm-brass);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.fma-dealer-empty h2 { margin-top: 0; }

.fma-dealer-profile__hero {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: none;
}
.fma-dealer-profile__img {
  width: clamp(96px, 12vw, 160px);
  height: clamp(96px, 12vw, 160px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--fm-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
@media (max-width: 560px) {
  .fma-dealer-profile__hero { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   FOREST MILL — SITE DESIGN LANGUAGE + PAGE COMPOSITIONS
   Built to the supplied page concepts. Green is a stage the page returns to,
   not an accent; photography carries the sophistication; rhythm alternates
   immersive / restrained / editorial / commercial rather than card-grid-repeat.
   ========================================================================= */

:root {
  --fm-maxw: 1280px;
  --fm-rule: rgba(179,150,94,0.34);
  --fm-rule-soft: rgba(37,39,36,0.14);
}

/* ---------------------------------------------------------------- HEADER */
.fma-site-header,
.site-header.fma-site-header {
  background: var(--fm-forest-dark);
  border-bottom: 1px solid rgba(179,150,94,0.26);
}
.fma-site-header .header-inner {
  max-width: 1400px; margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.5rem clamp(1rem, 3vw, 2.25rem);
}
.fma-site-header .site-branding { flex: 0 0 auto; margin-right: auto; }
.fma-site-header .site-logo img,
.fma-site-header img.custom-logo { max-height: 68px !important; width: auto !important; display: block; }
.fma-site-header .site-navigation ul { gap: 0.1rem; }
.fma-site-header .site-navigation ul li > a {
  color: var(--fm-ivory); font-size: 0.92rem; padding: 0.5rem 0.7rem; position: relative;
}
.fma-site-header .site-navigation ul li > a::after {
  content: ""; position: absolute; left: 0.7rem; right: 100%; bottom: 0.15rem; height: 1.5px;
  background: var(--fm-brass); transition: right .2s ease;
}
.fma-site-header .site-navigation ul li > a:hover::after,
.fma-site-header .site-navigation ul li > a:focus::after,
.fma-site-header .site-navigation .current-menu-item > a::after,
.fma-site-header .site-navigation .current_page_item > a::after,
.fma-site-header .site-navigation .current-menu-ancestor > a::after { right: 0.7rem; }
.fma-site-header .site-navigation ul ul {
  background: var(--fm-forest-dark); border: 1px solid rgba(179,150,94,0.28); padding: 0.35rem 0;
}
.fma-site-header .fma-header-utility { flex: 0 0 auto; margin-inline-start: 0; }
.fma-site-header .fma-header-utility__btn { color: var(--fm-ivory); }
.fma-site-header .fma-header-utility__btn:hover,
.fma-site-header .fma-header-utility__btn:focus-visible { background: rgba(255,255,255,0.1); }
.fma-site-header .site-navigation-toggle { color: var(--fm-ivory); }
@media (max-width: 640px) {
  .fma-site-header .site-logo img, .fma-site-header img.custom-logo { max-height: 48px !important; }
}

/* ------------------------------------------------------------- TYPOGRAPHY
   Hierarchy comes from scale and weight, not from a brass rule under
   everything. The rule is reserved for section openers that need an anchor. */
.fma-display {
  font-family: var(--fm-font-display); font-weight: 500; line-height: 1.06;
  letter-spacing: -0.015em; text-wrap: balance;
}
.fma-eyebrow {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem;
  font-weight: 600; color: var(--fm-brass-text); margin: 0 0 0.9rem;
}
.fma-on-dark .fma-eyebrow, .fma-band--dark .fma-eyebrow { color: var(--fm-brass-on-dark); }
.fma-lede { font-size: 1.06rem; line-height: 1.65; max-width: 46ch; opacity: 0.9; }

.fma-link-cta {
  display: inline-block; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fm-brass-text); text-decoration: none;
  border-bottom: 1px solid var(--fm-rule); padding-bottom: 0.25rem;
  transition: color .15s ease, border-color .15s ease;
}
.fma-band--dark .fma-link-cta, .fma-on-dark .fma-link-cta { color: var(--fm-brass-on-dark); }
a:hover > .fma-link-cta, .fma-link-cta:hover { color: var(--fm-forest); border-color: var(--fm-brass); }
.fma-band--dark a:hover > .fma-link-cta { color: var(--fm-white); border-color: var(--fm-white); }

/* ----------------------------------------------------------------- BANDS */
.fma-band.e-con { padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2.5rem); }
.fma-band > .e-con-inner { max-width: var(--fm-maxw); }
.fma-band--dark.e-con { background: var(--fm-forest); color: var(--fm-ivory); }
.fma-band--darker.e-con { background: var(--fm-forest-dark); color: var(--fm-ivory); }
.fma-band--cream.e-con { background: var(--fm-ivory); }
.fma-band--paper.e-con { background: #FBF9F4; }
.fma-band--dark .elementor-heading-title,
.fma-band--darker .elementor-heading-title { color: var(--fm-white); }
.fma-band--dark p, .fma-band--darker p { color: rgba(244,240,230,0.86); }
.fma-band--flush.e-con { padding: 0; }

/* Section opener: heading left, action right */
.fma-sec-head.e-con {
  flex-direction: row; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; padding: 0 0 1.75rem; flex-wrap: wrap;
}
.fma-sec-head .elementor-heading-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* ---------------------------------------------------------------- BUTTONS */
.elementor-widget-button.fma-btn,
.elementor-widget-button.fma-btn.fma-btn--primary,
.elementor-widget-button.fma-btn.fma-btn--secondary,
.elementor-widget-button.fma-btn.fma-btn--onhero {
  border: 0; background: transparent; padding: 0; min-height: 0;
  display: block; width: auto; align-self: flex-start;
}
.fma-btn.elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--fm-tap); padding: 0.85em 1.9em;
  border-radius: 2px; font-family: var(--fm-font-body);
  font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.13em;
  border: 1px solid var(--fm-forest); background: transparent; color: var(--fm-forest);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fma-btn--primary.elementor-widget-button .elementor-button {
  background: var(--fm-brass); border-color: var(--fm-brass); color: var(--fm-forest-dark);
}
.fma-btn--primary.elementor-widget-button .elementor-button:hover { background: #c2a76e; border-color: #c2a76e; }
.fma-btn--secondary.elementor-widget-button .elementor-button:hover { background: var(--fm-forest); color: var(--fm-white); }
.fma-btn--onhero.elementor-widget-button .elementor-button {
  background: transparent; color: var(--fm-white); border-color: rgba(255,255,255,0.7);
}
.fma-btn--onhero.elementor-widget-button .elementor-button:hover { background: var(--fm-white); color: var(--fm-forest); border-color: var(--fm-white); }

/* ------------------------------------------------------------------- HERO
   Asymmetric: a deep green editorial panel against a full-bleed photograph.
   Not a centred ecommerce hero, not a grid of product thumbnails. */
.fma-hero.e-con {
  position: relative; padding: 0; min-height: clamp(520px, 64vh, 720px);
  background: var(--fm-forest-dark); overflow: hidden;
  flex-direction: row; align-items: stretch;
}
.fma-hero__image { position: absolute; inset: 0 0 0 38%; z-index: 0; }
.fma-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fma-hero__image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--fm-forest-dark) 0%, rgba(16,42,32,0.86) 22%, rgba(16,42,32,0.20) 62%, rgba(16,42,32,0.42) 100%);
}
.fma-hero__panel.e-con {
  position: relative; z-index: 2;
  flex: 0 1 62%; max-width: 720px;
  justify-content: center; gap: 0;
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.fma-hero .fma-eyebrow { color: var(--fm-brass-on-dark); }
.fma-hero__title .elementor-heading-title {
  color: var(--fm-white); font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1.1rem; text-wrap: balance;
}
.fma-hero__lead { color: rgba(244,240,230,0.9); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 40ch; margin: 0 0 1.9rem; }
.fma-hero__search {
  display: flex; max-width: 27rem; margin: 0 0 1.6rem;
  background: var(--fm-white); border-radius: 999px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.fma-hero__search input[type=search] {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 0.95em 0 0.95em 1.4em; font: inherit; font-size: 0.95rem;
}
.fma-hero__search .fma-btn { border: 0; border-radius: 0; padding-inline: 1.7em; font-size: 0.76rem; }
.fma-hero__ctas.e-con { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; padding: 0; margin-bottom: 2rem; width: 100%; }
.fma-hero__meta {
  list-style: none; margin: 0; padding: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  border-top: 1px solid rgba(244,240,230,0.2);
}
.fma-hero__meta li { display: flex; gap: 0.7rem; font-size: 0.83rem; line-height: 1.45; color: rgba(244,240,230,0.82); }
.fma-hero__meta svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fm-brass-on-dark); margin-top: 2px; }
.fma-hero__meta a { color: inherit; }
@media (max-width: 1024px) {
  .fma-hero.e-con { flex-direction: column; min-height: 0; }
  .fma-hero__image { position: relative; inset: auto; height: 300px; order: 2; }
  .fma-hero__image::after { background: linear-gradient(180deg, rgba(16,42,32,0.55) 0%, rgba(16,42,32,0.1) 100%); }
  .fma-hero__panel.e-con { flex: 1 1 auto; max-width: none; width: 100%; order: 1; }
}

/* --------------------------------------------------------------- STAT ROW */
.fma-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.fma-stat { display: flex; gap: 0.9rem; padding: 0.2rem 1.75rem; border-left: 1px solid var(--fm-rule); }
.fma-stat:first-child { border-left: 0; padding-left: 0; }
.fma-stat__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--fm-brass-text); margin-top: 3px; }
.fma-stat__icon svg { width: 100%; height: 100%; }
.fma-stat__body { display: flex; flex-direction: column; }
.fma-stat__stat { font-family: var(--fm-font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.1; color: var(--fm-forest); }
.fma-stat__label { font-size: 0.92rem; color: var(--fm-forest); line-height: 1.3; }
.fma-stat__sub { font-size: 0.8rem; opacity: 0.68; line-height: 1.4; margin-top: 0.35rem; }
@media (max-width: 900px) {
  .fma-stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .fma-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) { .fma-stat-row { grid-template-columns: 1fr; } .fma-stat { border-left: 0; padding-left: 0; } }

/* ------------------------------------------------------- DEPARTMENT TILES
   Framed photographic tiles — the signature device across the concepts. */
.fma-dept-tiles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.85rem; width: 100%; }
.fma-dept-tile { display: block; text-decoration: none; text-align: center; }
.fma-dept-tile__frame {
  display: block; position: relative; overflow: hidden;
  border: 1px solid rgba(179,150,94,0.5); padding: 4px; background: rgba(0,0,0,0.18);
  transition: border-color .2s ease, transform .2s ease;
}
.fma-dept-tile__frame img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .5s ease, filter .3s ease; filter: brightness(0.92);
}
.fma-dept-tile:hover .fma-dept-tile__frame { border-color: var(--fm-brass); transform: translateY(-3px); }
.fma-dept-tile:hover .fma-dept-tile__frame img { transform: scale(1.06); filter: brightness(1.02); }
.fma-dept-tile__name {
  display: block; margin-top: 0.7rem; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--fm-ivory);
}
@media (max-width: 1180px) { .fma-dept-tiles { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .fma-dept-tiles { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } }
@media (max-width: 420px)  { .fma-dept-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------ JUST ARRIVED
   Curated, generous, four across — not a cramped product feed. */
.fma-stock.e-con .woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 2.25rem; margin: 0; width: 100%;
}
.fma-stock .woocommerce ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  background: transparent; border: 0; padding: 0; box-shadow: none; text-align: left;
}
.fma-stock .woocommerce ul.products li.product img {
  aspect-ratio: 1/1; object-fit: cover; width: 100%; border-radius: 0;
  border: 1px solid var(--fm-rule-soft); background: var(--fm-white);
  transition: transform .5s ease; filter: saturate(0.94) contrast(1.03);
}
.fma-stock .woocommerce ul.products li.product:hover img { transform: scale(1.02); }
.fma-stock .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fm-font-display) !important; font-size: 1.06rem !important;
  font-weight: 500 !important; line-height: 1.25; color: var(--fm-forest); padding: 0.85rem 0 0.15rem !important;
}
.fma-stock .woocommerce ul.products li.product .price {
  font-family: var(--fm-font-display); font-size: 1.02rem; color: var(--fm-charcoal); margin: 0.2rem 0 0.55rem; display: block;
}
.fma-stock .woocommerce ul.products li.product .button.fma-btn {
  width: 100%; margin-top: 0.35rem; border-width: 1px; border-radius: 2px;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; min-height: 44px;
}
.fma-stock .fma-card-dealer { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fm-brass-text); font-weight: 700; margin: 0; }
.fma-stock .fma-card-meta { font-size: 0.78rem; color: rgba(37,39,36,0.6); margin: 0.1rem 0 0; }
@media (max-width: 900px) { .fma-stock.e-con .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 460px) { .fma-stock.e-con .woocommerce ul.products { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- SPLIT / BLEED
   Asymmetric editorial bands: a photograph bleeding off one edge against a
   text column. Deliberately breaks the equal-cards rhythm. */
.fma-split.e-con { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.fma-split__media.e-con { flex: 1 1 52%; padding: 0; min-height: 420px; position: relative; }
.fma-split__text.e-con {
  flex: 1 1 48%; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.fma-bleed-image { position: absolute; inset: 0; }
.fma-bleed-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) {
  .fma-split.e-con { flex-direction: column; }
  .fma-split__media.e-con, .fma-split__text.e-con { flex: 1 1 auto; width: 100%; }
  .fma-split__media.e-con { min-height: 300px; }
}
.fma-split--reverse.e-con { flex-direction: row-reverse; }
@media (max-width: 1024px) { .fma-split--reverse.e-con { flex-direction: column; } }

.fma-specialism-list {
  list-style: none; margin: 1.75rem 0 2rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.5rem;
}
.fma-specialism-list li {
  font-size: 0.9rem; padding-left: 1.1rem; position: relative; line-height: 1.45;
  color: rgba(244,240,230,0.88);
}
.fma-specialism-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--fm-brass); border-radius: 50%;
}
@media (max-width: 560px) { .fma-specialism-list { grid-template-columns: 1fr; } }

.fma-dealer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.fma-dealer-card { display: block; text-decoration: none; color: inherit; }
.fma-dealer-card__img { display: block; overflow: hidden; border: 1px solid var(--fm-rule); }
.fma-dealer-card__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s ease; }
.fma-dealer-card:hover .fma-dealer-card__img img { transform: scale(1.05); }
.fma-dealer-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.8rem; }
.fma-dealer-card__body strong { font-family: var(--fm-font-display); font-size: 1.15rem; font-weight: 500; }

/* ---------------------------------------------------------- EXPLORE GRID
   An editorial mosaic — varied spans, typography over imagery. */
.fma-explore-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px; gap: 0.9rem; width: 100%;
}
.fma-explore-cell {
  position: relative; overflow: hidden; text-decoration: none; display: block;
  border: 1px solid rgba(179,150,94,0.4);
}
.fma-explore-cell.is-feature { grid-column: span 2; grid-row: span 2; }
.fma-explore-cell.is-wide { grid-column: span 2; }
.fma-explore-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease; filter: brightness(0.8);
}
.fma-explore-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,42,32,0.92) 0%, rgba(16,42,32,0.45) 45%, rgba(16,42,32,0.08) 100%);
}
.fma-explore-cell:hover img { transform: scale(1.06); }
.fma-explore-cell__body {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.2rem; padding: 1.15rem 1.25rem;
  color: var(--fm-white);
}
.fma-explore-cell__body strong {
  font-family: var(--fm-font-display); font-weight: 500; line-height: 1.12;
  font-size: 1.2rem; color: var(--fm-white);
}
.fma-explore-cell.is-feature .fma-explore-cell__body strong { font-size: 1.9rem; }
.fma-explore-cell__body span { font-size: 0.82rem; color: rgba(244,240,230,0.8); }
@media (max-width: 900px) {
  .fma-explore-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .fma-explore-cell.is-feature { grid-column: span 2; grid-row: span 1; }
  .fma-explore-cell.is-wide { grid-column: span 2; }
}

/* --------------------------------------------------------- STORY / VISIT / SELL
   Three propositions of different weight, deliberately NOT three equal cards:
   the story is a full-bleed atmospheric band; visit and sell are a two-up below. */
.fma-story.e-con { position: relative; min-height: 460px; padding: 0; overflow: hidden; }
.fma-story .fma-bleed-image { inset: 0 46% 0 0; }
.fma-story .fma-bleed-image img { filter: brightness(0.78) saturate(0.85); }
.fma-story .fma-bleed-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,42,32,0.55) 0%, rgba(16,42,32,0.15) 50%, var(--fm-forest) 100%);
}
.fma-story__text.e-con {
  position: relative; z-index: 2; margin-left: auto; flex: 0 1 54%;
  justify-content: center; padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  background: var(--fm-forest);
}
@media (max-width: 1024px) {
  .fma-story.e-con { flex-direction: column; }
  .fma-story .fma-bleed-image { position: relative; inset: auto; height: 260px; }
  .fma-story .fma-bleed-image::after { background: linear-gradient(180deg, rgba(16,42,32,0.4), rgba(16,42,32,0.65)); }
  .fma-story__text.e-con { flex: 1 1 auto; width: 100%; margin-left: 0; }
}

.fma-twoup.e-con { flex-direction: row; gap: 0; padding: 0; align-items: stretch; }
.fma-twoup > .e-con { flex: 1 1 0; min-width: 0; padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem); justify-content: center; }
.fma-panel--visit.e-con { background: var(--fm-forest); }
.fma-panel--sell.e-con  { background: var(--fm-brass); }
.fma-panel--sell .elementor-heading-title { color: var(--fm-forest-dark); }
.fma-panel--sell p { color: rgba(16,42,32,0.82); }
.fma-panel--sell .fma-eyebrow { color: rgba(16,42,32,0.7); }
.fma-panel--sell .fma-btn .elementor-button {
  background: var(--fm-forest-dark); border-color: var(--fm-forest-dark); color: var(--fm-white);
}
.fma-panel--sell .fma-btn .elementor-button:hover { background: var(--fm-charcoal); border-color: var(--fm-charcoal); }
@media (max-width: 860px) { .fma-twoup.e-con { flex-direction: column; } .fma-twoup > .e-con { width: 100%; } }

/* ------------------------------------------------------------ TRUST STRIP */
.fma-trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem;
  width: 100%; border: 0; padding: 0;
}
.fma-trust-strip__item { display: flex; align-items: flex-start; gap: 0.85rem; }
.fma-trust-strip__icon {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; box-sizing: border-box;
  color: var(--fm-brass-text); border: 1px solid var(--fm-rule); border-radius: 50%;
}
.fma-trust-strip__icon svg { width: 100%; height: 100%; }
.fma-trust-strip__item div { display: flex; flex-direction: column; gap: 0.15rem; }
.fma-trust-strip__item strong { font-size: 0.92rem; color: var(--fm-forest); }
.fma-trust-strip__item span { font-size: 0.82rem; opacity: 0.72; line-height: 1.4; }
@media (max-width: 900px) { .fma-trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fma-trust-strip { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- JOURNAL */
.fma-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; }
.fma-journal-card { display: block; text-decoration: none; color: inherit; }
.fma-journal-card__img { display: block; overflow: hidden; border: 1px solid var(--fm-rule-soft); }
.fma-journal-card__img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .5s ease; }
.fma-journal-card:hover .fma-journal-card__img img { transform: scale(1.04); }
.fma-journal-card__meta {
  display: block; margin: 0.9rem 0 0.35rem; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fm-brass-text);
}
.fma-journal-card strong {
  display: block; font-family: var(--fm-font-display); font-weight: 500;
  font-size: 1.15rem; line-height: 1.25; color: var(--fm-forest); margin-bottom: 0.7rem;
}
@media (max-width: 860px) { .fma-journal-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ------------------------------------------------------------ CONTACT BAR */
.fma-contact-bar.e-con {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: var(--fm-forest-dark); color: var(--fm-ivory);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
}
.fma-contact-bar .elementor-heading-title { color: var(--fm-white); font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.fma-contact-bar p { color: rgba(244,240,230,0.8); margin: 0.35rem 0 0; }
.fma-contact-bar__actions.e-con { flex-direction: row; gap: 0.75rem; flex-wrap: wrap; padding: 0; flex: 0 0 auto; }
@media (max-width: 700px) { .fma-contact-bar.e-con { flex-direction: column; align-items: flex-start; } }

/* Logo carries the wordmark — suppress the duplicate text title/tagline. (Restored: this was
   lost when the homepage CSS was rebuilt, leaving the tagline ghosting under the nav.) */
.fma-site-header .site-title,
.fma-site-header .site-description,
.site-header .site-title,
.site-header .site-description {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.fma-site-header .site-branding { display: flex; align-items: center; }

/* Full-bleed image layers come from Shortcode widgets, and Elementor's widget wrapper becomes
   the containing block for their absolutely-positioned contents — collapsing them to a zero-width
   flex item. Promote the wrapper itself to the positioned layer instead. */
.fma-hero > .elementor-widget-shortcode,
.fma-split__media > .elementor-widget-shortcode,
.fma-story > .elementor-widget-shortcode {
  position: absolute; inset: 0; z-index: 0; margin: 0; width: auto;
}
.fma-hero > .elementor-widget-shortcode { left: 38%; }
.fma-story > .elementor-widget-shortcode { right: 46%; }
.fma-hero > .elementor-widget-shortcode > .elementor-widget-container,
.fma-split__media > .elementor-widget-shortcode > .elementor-widget-container,
.fma-story > .elementor-widget-shortcode > .elementor-widget-container { height: 100%; }
.fma-hero__image, .fma-bleed-image { position: absolute; inset: 0; }
.fma-story .fma-bleed-image { inset: 0; }

@media (max-width: 1024px) {
  .fma-hero > .elementor-widget-shortcode { position: relative; inset: auto; left: auto; height: 300px; order: 2; }
  .fma-story > .elementor-widget-shortcode { position: relative; inset: auto; right: auto; height: 260px; }
  .fma-split__media > .elementor-widget-shortcode { position: absolute; inset: 0; }
}

/* Logo: the whole branding chain collapsed to 0 width. `width:auto` + `max-height` gave the
   replaced element no definite dimension to resolve against inside a shrink-to-fit flex item,
   so an explicit height is used and the wrappers are given intrinsic width. */
.fma-site-header .site-branding { flex: 0 0 auto; width: auto; }
.fma-site-header .site-logo,
.fma-site-header .custom-logo-link { display: block; width: auto; line-height: 0; }
.fma-site-header img.custom-logo,
.fma-site-header .site-logo img {
  height: 58px !important; width: auto !important; max-height: none !important;
  max-width: none !important; display: block;
}
@media (max-width: 640px) {
  .fma-site-header img.custom-logo, .fma-site-header .site-logo img { height: 42px !important; }
}

/* Hero scrim was masking the photograph — it held ~0.86 opacity across most of the visible
   image. Fades far earlier so the interior actually reads while the headline stays legible. */
.fma-hero__image::after {
  background: linear-gradient(90deg,
    var(--fm-forest-dark) 0%,
    rgba(16,42,32,0.72) 10%,
    rgba(16,42,32,0.18) 38%,
    rgba(16,42,32,0.06) 62%,
    rgba(16,42,32,0.28) 100%);
}
.fma-hero__image img { filter: brightness(1.06) saturate(0.95); }

/* Section opener: both halves were full-width Elementor containers, so the CTA stacked under
   the heading instead of sitting opposite it. */
.fma-sec-head > .e-con { width: auto; flex: 0 1 auto; }
.fma-sec-head__l { flex: 1 1 auto; }
.fma-sec-head__r { flex: 0 0 auto; padding-bottom: 0.4rem; }
.fma-sec-head .fma-eyebrow { margin-bottom: 0.5rem; }
.fma-sec-head .elementor-heading-title { margin: 0; }
@media (max-width: 640px) {
  .fma-sec-head.e-con { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}

/* WooCommerce/Hello add a clearfix ::before/::after to ul.products. Harmless in float layout,
   but in a GRID container they become grid items — the ::before was occupying cell 1 and
   pushing every product one place along, wrapping the fourth onto its own row. */
.fma-stock ul.products::before,
.fma-stock ul.products::after { content: none !important; display: none !important; }

/* The wide explore tile spanned only 2 of 4 columns, leaving a two-column void on its row.
   Spanning the full width turns it into a closing banner and completes the mosaic. */
.fma-explore-cell.is-wide { grid-column: span 4; }
.fma-explore-cell.is-wide .fma-explore-cell__body strong { font-size: 1.5rem; }
@media (max-width: 900px) { .fma-explore-cell.is-wide { grid-column: span 2; } }

/* Product grid: 4-across gets tight between ~900–1100px, so step down to 3 there. */
@media (max-width: 1100px) and (min-width: 761px) {
  .fma-stock.e-con .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) { .fma-stock.e-con .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   INNER PAGES — Dealers · Visit · Sell To Us · About · Contact
   Same design language as the homepage, deliberately different layouts.
   ========================================================================= */

/* Page hero — shorter than the homepage hero, same construction */
.fma-hero--page.e-con { min-height: clamp(420px, 48vh, 560px); }
.fma-hero--page .fma-hero__title .elementor-heading-title { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.fma-hero--page .fma-hero__panel.e-con { flex: 0 1 58%; max-width: 660px; }
.fma-hero--page > .elementor-widget-shortcode { left: 42%; }
@media (max-width: 1024px) {
  .fma-hero--page > .elementor-widget-shortcode { position: relative; inset: auto; left: auto; height: 260px; order: 2; }
}

.fma-ticks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fma-ticks li { position: relative; padding-left: 1.6rem; font-size: 0.94rem; color: rgba(244,240,230,0.88); }
.fma-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.4em; width: 9px; height: 9px;
  border-left: 1.5px solid var(--fm-brass-on-dark); border-bottom: 1.5px solid var(--fm-brass-on-dark);
  transform: rotate(-45deg);
}

/* Column sets — icon + title + copy divided by hairline rules */
.fma-colset { display: grid; width: 100%; gap: 0; }
.fma-colset--4 { grid-template-columns: repeat(4, 1fr); }
.fma-colset--5 { grid-template-columns: repeat(5, 1fr); }
.fma-col {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.25rem 1.6rem; border-left: 1px solid var(--fm-rule);
}
.fma-col:first-child { border-left: 0; padding-left: 0; }
.fma-col__icon { width: 34px; height: 34px; color: var(--fm-brass-text); }
.fma-col__icon svg { width: 100%; height: 100%; }
.fma-on-dark .fma-col__icon,
.fma-band--dark .fma-col__icon,
.fma-band--darker .fma-col__icon { color: var(--fm-brass-on-dark); }
.fma-col strong {
  font-family: var(--fm-font-display); font-weight: 500; font-size: 1.12rem;
  line-height: 1.2; color: var(--fm-forest);
}
.fma-band--dark .fma-col strong,
.fma-band--darker .fma-col strong,
.fma-on-dark .fma-col strong { color: var(--fm-white); }
.fma-col span { font-size: 0.86rem; line-height: 1.55; opacity: 0.75; }
.fma-band--dark .fma-col span,
.fma-band--darker .fma-col span { color: rgba(244,240,230,0.78); opacity: 1; }
@media (max-width: 980px) {
  .fma-colset--4, .fma-colset--5 { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .fma-col:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .fma-colset--4, .fma-colset--5 { grid-template-columns: 1fr; }
  .fma-col { border-left: 0; padding-left: 0; }
}

/* Dealer directory */
.fma-test-notice {
  width: 100%; margin: 0 0 1.75rem; padding: 0.85rem 1.15rem;
  background: rgba(179,150,94,0.14); border-left: 3px solid var(--fm-brass);
  font-size: 0.88rem; color: var(--fm-charcoal);
}
.fma-dealer-dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; width: 100%; }
.fma-dealer-tile { display: block; text-decoration: none; color: inherit; }
.fma-dealer-tile__img { position: relative; display: block; overflow: hidden; border: 1px solid var(--fm-rule); }
.fma-dealer-tile__img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
a.fma-dealer-tile:hover .fma-dealer-tile__img img { transform: scale(1.05); }
.fma-test-flag {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  background: var(--fm-charcoal); color: var(--fm-white);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3em 0.6em;
}
.fma-dealer-tile__body { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.85rem; }
.fma-dealer-tile__body strong {
  font-family: var(--fm-font-display); font-weight: 500; font-size: 1.1rem;
  line-height: 1.25; color: var(--fm-forest);
}
.fma-dealer-tile__spec {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fm-brass-text); font-weight: 700;
}
.fma-dealer-tile__desc { font-size: 0.87rem; line-height: 1.5; opacity: 0.78; }
@media (max-width: 1000px) { .fma-dealer-dir { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fma-dealer-dir { grid-template-columns: 1fr; } }

/* Sell To Us — numbered steps */
.fma-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; }
.fma-step {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem;
  padding: 2.1rem 1.6rem 1.6rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(179,150,94,0.4);
}
.fma-step__num {
  position: absolute; top: -18px; left: 1.5rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fm-brass); color: var(--fm-forest-dark);
  font-family: var(--fm-font-display); font-size: 1.05rem; font-weight: 600;
}
.fma-step strong { font-family: var(--fm-font-display); font-weight: 500; font-size: 1.25rem; color: var(--fm-white); }
.fma-step span { font-size: 0.88rem; line-height: 1.55; color: rgba(244,240,230,0.78); }
@media (max-width: 860px) { .fma-steps { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Departments rendered on a light band */
.fma-dept--light .fma-dept-tile__frame { background: rgba(0,0,0,0.04); border-color: rgba(179,150,94,0.45); }
.fma-dept--light .fma-dept-tile__name { color: var(--fm-forest); }

/* Contact — route cards */
.fma-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; width: 100%; }
.fma-route {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--fm-rule); background: var(--fm-white);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fma-route:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(23,59,44,0.12); }
.fma-route__img { display: block; overflow: hidden; }
.fma-route__img img { display: block; width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.fma-route__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem 1.35rem; }
.fma-route__body strong {
  font-family: var(--fm-font-display); font-weight: 500; font-size: 1.15rem;
  color: var(--fm-forest); line-height: 1.2;
}
.fma-route__body > span:not(.fma-link-cta) { font-size: 0.86rem; line-height: 1.5; opacity: 0.75; }
.fma-route .fma-link-cta { align-self: flex-start; margin-top: 0.3rem; }
@media (max-width: 1000px) { .fma-routes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fma-routes { grid-template-columns: 1fr; } }

/* Contact — details list + map two-up */
.fma-split-plain.e-con { flex-direction: row; gap: clamp(2rem, 5vw, 4rem); align-items: flex-start; }
.fma-contact-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
  .fma-split-plain.e-con { flex-direction: column; }
  .fma-contact-col { width: 100%; }
}

.fma-contact-list { display: flex; flex-direction: column; width: 100%; }
.fma-contact-row { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--fm-rule); }
.fma-contact-row:last-child { border-bottom: 0; }
.fma-contact-row__icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--fm-brass-text); margin-top: 2px; }
.fma-contact-row__icon svg { width: 100%; height: 100%; }
.fma-contact-row__body { display: flex; flex-direction: column; gap: 0.15rem; }
.fma-contact-row__body strong {
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fm-brass-text);
}
.fma-contact-row__detail { font-family: var(--fm-font-display); font-size: 1.15rem; color: var(--fm-forest); line-height: 1.35; }
.fma-contact-row__detail a { color: inherit; text-decoration: none; }
.fma-contact-row__detail a:hover { text-decoration: underline; }
.fma-contact-row__note { font-size: 0.83rem; opacity: 0.7; }

.fma-map { width: 100%; }
.fma-map iframe { display: block; width: 100%; border: 1px solid var(--fm-rule); filter: saturate(0.85) contrast(1.02); }
.fma-map .fma-link-cta { margin-top: 1rem; }

/* Mandatory attribution for CC BY-SA photography — sits on the image, always travels with it. */
.fma-credit {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  padding: 0.35em 0.7em;
  background: rgba(16,42,32,0.72);
  color: rgba(244,240,230,0.9);
  font-size: 0.64rem; letter-spacing: 0.04em; line-height: 1.3;
}
.fma-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fma-credit a:hover { color: var(--fm-brass-on-dark); }

/* =========================================================================
   JOURNAL INDEX + ARTICLE (theme templates, not Elementor — see home.php)
   ========================================================================= */

/* Static hero variant for theme templates (no Elementor container context) */
.fma-hero--static.e-con {
  display: flex; flex-direction: row; align-items: stretch;
  position: relative; overflow: hidden;
  background: var(--fm-forest-dark);
  min-height: clamp(340px, 40vh, 460px); padding: 0;
}
.fma-hero--static .fma-hero__image { position: absolute; inset: 0 0 0 42%; z-index: 0; }
.fma-hero--static .fma-hero__panel {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  flex: 0 1 62%; max-width: 700px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.fma-hero--static .fma-hero__title { margin: 0 0 0.6rem; }
@media (max-width: 1024px) {
  .fma-hero--static.e-con { flex-direction: column; }
  .fma-hero--static .fma-hero__image { position: relative; inset: auto; height: 240px; order: 2; }
  .fma-hero--static .fma-hero__panel { flex: 1 1 auto; max-width: none; width: 100%; order: 1; }
}

.fma-band__inner { width: 100%; max-width: var(--fm-maxw); margin-inline: auto; }
.fma-journal-page .fma-band.e-con,
.fma-article .fma-band.e-con { display: block; }

.fma-journal-card__excerpt { display: block; font-size: 0.88rem; line-height: 1.55; opacity: 0.75; margin-bottom: 0.75rem; }

/* Pagination */
.fma-pagination { margin-top: 3rem; }
.fma-pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.fma-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 0.85em;
  border: 1px solid var(--fm-rule); color: var(--fm-forest);
  text-decoration: none; font-size: 0.85rem;
}
.fma-pagination .page-numbers.current,
.fma-pagination .page-numbers:hover { background: var(--fm-forest); color: var(--fm-white); border-color: var(--fm-forest); }

/* Article prose */
.fma-prose {
  max-width: 68ch; margin-inline: auto;
  font-size: 1.06rem; line-height: 1.75;
}
.fma-prose > * + * { margin-top: 1.25rem; }
.fma-prose h2 {
  font-family: var(--fm-font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.75rem; color: var(--fm-forest);
}
.fma-prose h3 { font-family: var(--fm-font-display); font-weight: 500; font-size: 1.3rem; margin-top: 2rem; color: var(--fm-forest); }
.fma-prose img { max-width: 100%; height: auto; border: 1px solid var(--fm-rule); }
.fma-prose blockquote {
  border-left: 3px solid var(--fm-brass); padding-left: 1.4rem; margin-left: 0;
  font-family: var(--fm-font-display); font-size: 1.2rem; line-height: 1.5; color: var(--fm-forest);
}
.fma-prose ul, .fma-prose ol { padding-left: 1.4rem; }
.fma-prose li + li { margin-top: 0.45rem; }
.fma-article-nav { max-width: 68ch; margin: 3rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--fm-rule); }

/* Plain anchors styled as buttons (theme templates have no Elementor button widget) */
.fma-btn-plain {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--fm-tap); padding: 0.85em 1.9em;
  border-radius: 2px; font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.13em; text-decoration: none;
  border: 1px solid var(--fm-forest); background: transparent; color: var(--fm-forest);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fma-btn-plain--primary { background: var(--fm-brass); border-color: var(--fm-brass); color: var(--fm-forest-dark); }
.fma-btn-plain--primary:hover { background: #c2a76e; border-color: #c2a76e; color: var(--fm-forest-dark); }
.fma-btn-plain--onhero { background: transparent; color: var(--fm-white); border-color: rgba(255,255,255,0.7); }
.fma-btn-plain--onhero:hover { background: var(--fm-white); color: var(--fm-forest); border-color: var(--fm-white); }
.fma-contact-bar .fma-btn-plain--primary:hover { color: var(--fm-forest-dark); }

/* Numbered steps on a light band */
.fma-steps--light .fma-step { background: var(--fm-white); border-color: var(--fm-rule); }
.fma-steps--light .fma-step strong { color: var(--fm-forest); }
.fma-steps--light .fma-step span { color: rgba(37,39,36,0.75); }

/* =========================================================================
   CREATIVE-DIRECTOR POLISH PASS
   Subtraction, spacing, typography, hierarchy. No new devices.
   ========================================================================= */

:root {
  /* One spacing scale for the whole site. Variation between sections should be
     a deliberate choice from this scale, not an arbitrary number. */
  --fm-s1: 0.5rem;
  --fm-s2: 1rem;
  --fm-s3: 1.75rem;
  --fm-s4: 2.75rem;
  --fm-s5: clamp(3.5rem, 7vw, 6rem);   /* standard band padding */
  --fm-s6: clamp(5rem, 10vw, 8.5rem);  /* generous band padding */
}

/* ---- Typography: more confident below the hero -------------------------- */
body { font-size: 1.06rem; }

.fma-band .elementor-heading-title,
.fma-sec-head .elementor-heading-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.015em;
}
.fma-lede {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.6; max-width: 44ch;
}
.fma-band p { font-size: 1.02rem; line-height: 1.66; }

/* Column sets read as content, not captions */
.fma-col strong { font-size: 1.22rem; line-height: 1.25; }
.fma-col span { font-size: 0.94rem; line-height: 1.6; opacity: 0.82; }
.fma-band--dark .fma-col span, .fma-band--darker .fma-col span { color: rgba(244,240,230,0.85); }

/* Cards */
.fma-dealer-tile__body strong { font-size: 1.32rem; }
.fma-dealer-tile__desc { font-size: 0.94rem; }
.fma-journal-card strong { font-size: 1.3rem; line-height: 1.22; }
.fma-route__body strong { font-size: 1.24rem; }
.fma-explore-cell__body strong { font-size: 1.35rem; }
.fma-explore-cell.is-feature .fma-explore-cell__body strong { font-size: 2.2rem; }
.fma-explore-cell.is-wide .fma-explore-cell__body strong { font-size: 1.7rem; }

/* ---- Brass restraint: the rule is now a rare marker, not a default ------ */
.fma-el-heading .elementor-heading-title::after { display: none; }
.fma-editorial h2::after { display: none; }

/* ---- Band rhythm -------------------------------------------------------- */
.fma-band.e-con { padding: var(--fm-s5) clamp(1.25rem, 4vw, 2.5rem); }
.fma-band--flush.e-con { padding: 0; }
.fma-sec-head.e-con { padding: 0 0 var(--fm-s3); }
.fma-sec-head + * { margin-top: 0; }
.fma-band .fma-lede { margin-bottom: var(--fm-s3); }

/* Consecutive bands of the same tone shouldn't double their padding */
.fma-band--paper + .fma-band--paper.e-con,
.fma-band--cream + .fma-band--cream.e-con { padding-top: 0; }

/* ---- Section transitions: kill the accidental cream gap before the footer */
.fma-contact-bar.e-con { margin: 0; }
.fma-contact-bar + .fma-footer,
.fma-band + .fma-footer { margin-top: 0; }
.fma-footer { margin-top: 0; }
/* Elementor's wrapper can leave a stray strip between the last band and the footer */
.elementor > .e-con:last-child { margin-bottom: 0; }
body .site-main, body .page-content { margin-bottom: 0; padding-bottom: 0; }

/* ---- Images never render as an empty void ------------------------------- */
.fma-dept-tile__frame,
.fma-explore-cell,
.fma-journal-card__img,
.fma-dealer-tile__img,
.fma-route__img,
.fma-bleed-image { background-color: #1d3f31; }
.fma-band--paper .fma-journal-card__img,
.fma-band--paper .fma-route__img,
.fma-band--cream .fma-route__img { background-color: #e8e2d4; }

/* ---- Header: a little more presence ------------------------------------- */
.fma-site-header .header-inner { padding-block: 0.7rem; }
.fma-site-header img.custom-logo,
.fma-site-header .site-logo img { height: 66px !important; }
.fma-site-header .site-navigation ul li > a { font-size: 0.95rem; letter-spacing: 0.01em; padding: 0.55rem 0.8rem; }
@media (max-width: 640px) {
  .fma-site-header img.custom-logo, .fma-site-header .site-logo img { height: 46px !important; }
}

/* ---- Footer: designed once, globally ------------------------------------ */
.fma-footer { background: var(--fm-forest-dark); color: var(--fm-ivory); }
.fma-footer__grid {
  max-width: var(--fm-maxw); margin-inline: auto;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 3vw, 3rem);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem);
}
.fma-footer__logo { max-width: 210px; width: 100%; height: auto; margin-bottom: var(--fm-s2); }
.fma-footer__brand p { max-width: 32ch; opacity: 0.72; font-size: 0.92rem; line-height: 1.6; }
.fma-footer__col h3 {
  color: var(--fm-brass-on-dark);
  font-family: var(--fm-font-body);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 var(--fm-s2);
}
.fma-footer__col li { margin-bottom: 0.55rem; }
.fma-footer__col a, .fma-footer__visit p {
  color: rgba(244,240,230,0.8); font-size: 0.93rem; text-decoration: none; line-height: 1.55;
}
.fma-footer__col a:hover { color: var(--fm-white); }
.fma-footer__visit p { margin: 0 0 0.6rem; }
.fma-footer__hours { opacity: 0.62; }
.fma-footer__social { display: flex; gap: 1.1rem; margin-top: var(--fm-s3); }
.fma-footer__social a { width: 20px; height: 20px; opacity: 0.72; }
.fma-footer__social a:hover { opacity: 1; color: var(--fm-brass-on-dark); }
.fma-footer__bar {
  max-width: var(--fm-maxw); margin-inline: auto;
  padding: var(--fm-s3) clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(244,240,230,0.12);
  display: flex; flex-wrap: wrap; gap: var(--fm-s2) var(--fm-s3);
  justify-content: space-between; align-items: center;
  font-size: 0.82rem; color: rgba(244,240,230,0.55);
}
.fma-footer__bar nav { display: flex; gap: var(--fm-s3); }
.fma-footer__bar nav a { margin: 0; color: rgba(244,240,230,0.55); font-size: 0.82rem; }
.fma-footer__bar nav a:hover { color: var(--fm-white); }
@media (max-width: 980px) { .fma-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) {
  .fma-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .fma-footer__brand { grid-column: 1 / -1; }
  .fma-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* ---- Contact bar: reads as the close of the page, not another band ------ */
.fma-contact-bar.e-con {
  padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(179,150,94,0.22);
}
.fma-contact-bar .elementor-heading-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* ---- Attribution: compliant but quiet ---------------------------------- */
.fma-credit {
  background: none; padding: 0.4em 0.75em;
  color: rgba(244,240,230,0.5); font-size: 0.58rem; letter-spacing: 0.06em;
}
.fma-credit a { text-decoration: none; border-bottom: 1px solid rgba(244,240,230,0.25); }
.fma-credit:hover { color: rgba(244,240,230,0.8); }

/* ---- Trust strip: quieter, less ecommerce ------------------------------- */
.fma-trust-strip { gap: 1.25rem 2.5rem; }
.fma-trust-strip__icon { display: none; }
.fma-trust-strip__item { gap: 0; }
.fma-trust-strip__item strong {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fm-brass-text); font-weight: 700; margin-bottom: 0.35rem;
}
.fma-trust-strip__item span { font-size: 0.95rem; opacity: 0.8; line-height: 1.5; }

/* ---- Product cards: quieter, object-led -------------------------------- */
.fma-stock .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.14rem !important; padding-top: 1rem !important;
}
.fma-stock .fma-card-dealer { display: none; }        /* every card said "FOREST MILL" */
.fma-stock .fma-card-meta { font-size: 0.8rem; opacity: 0.6; }
.fma-stock .woocommerce ul.products li.product .price { font-size: 1.06rem; opacity: 0.85; }
.fma-stock .woocommerce ul.products li.product .button.fma-btn {
  background: transparent; border-color: rgba(23,59,44,0.28); color: var(--fm-forest);
}
.fma-stock .woocommerce ul.products li.product .button.fma-btn:hover {
  background: var(--fm-forest); border-color: var(--fm-forest); color: var(--fm-white);
}
.fma-stock.e-con .woocommerce ul.products { gap: clamp(1.75rem, 3vw, 3rem); }

/* ---- Department tiles: hierarchy, not nine equal squares ---------------- */
.fma-dept-tiles { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.fma-dept-tile:nth-child(-n+3) { grid-column: span 2; }
.fma-dept-tile:nth-child(-n+3) .fma-dept-tile__frame img { aspect-ratio: 5/4; }
.fma-dept-tile:nth-child(n+4) .fma-dept-tile__frame img { aspect-ratio: 1/1; }
.fma-dept-tile:nth-child(-n+3) .fma-dept-tile__name { font-size: 0.84rem; }
@media (max-width: 1180px) {
  .fma-dept-tiles { grid-template-columns: repeat(4, 1fr); }
  .fma-dept-tile:nth-child(-n+3) { grid-column: span 2; }
}
@media (max-width: 760px) {
  .fma-dept-tiles { grid-template-columns: repeat(2, 1fr); }
  .fma-dept-tile:nth-child(-n+3) { grid-column: span 1; }
  .fma-dept-tile .fma-dept-tile__frame img { aspect-ratio: 1/1 !important; }
}

/* ---- Journal: lead story + supporting ---------------------------------- */
.fma-journal-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
.fma-journal-grid .fma-journal-card:first-child { grid-column: span 3; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
.fma-journal-grid .fma-journal-card:first-child .fma-journal-card__img { grid-row: span 4; }
.fma-journal-grid .fma-journal-card:first-child img { aspect-ratio: 16/10; }
.fma-journal-grid .fma-journal-card:first-child strong { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
.fma-journal-grid .fma-journal-card:first-child .fma-journal-card__excerpt { font-size: 1rem; }
@media (max-width: 900px) {
  .fma-journal-grid { grid-template-columns: 1fr; }
  .fma-journal-grid .fma-journal-card:first-child { grid-column: span 1; grid-template-columns: 1fr; }
}

/* ---- Dealer directory: three columns, more room ------------------------ */
.fma-dealer-dir { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.5vw, 3rem); }
@media (max-width: 900px) { .fma-dealer-dir { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fma-dealer-dir { grid-template-columns: 1fr; } }
.fma-dealer-tile__spec { order: -1; margin-bottom: 0.15rem; }
.fma-dealer-tile__body { gap: 0.35rem; padding-top: 1rem; }

/* TEST DEALER marker: present, but secondary */
.fma-test-flag {
  background: rgba(16,42,32,0.82); color: rgba(244,240,230,0.9);
  font-size: 0.56rem; letter-spacing: 0.16em; padding: 0.35em 0.65em;
  top: 0.5rem; left: 0.5rem;
}
.fma-test-notice {
  background: none; border-left: 0; border-top: 1px solid var(--fm-rule);
  padding: 0.85rem 0 0; margin-bottom: var(--fm-s3);
  font-size: 0.8rem; color: rgba(37,39,36,0.55);
}
.fma-test-notice strong { color: rgba(37,39,36,0.75); font-weight: 600; }

/* ---- Steps: typographic, not boxed ------------------------------------- */
.fma-steps { gap: clamp(2rem, 4vw, 3.5rem); }
.fma-step { background: none; border: 0; padding: 0; gap: 0.75rem; }
.fma-step__num {
  position: static; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--fm-brass-on-dark);
  font-family: var(--fm-font-display); font-size: 3rem; line-height: 1;
  display: block; margin-bottom: 0.35rem;
}
.fma-steps--light .fma-step__num { color: var(--fm-brass); }
.fma-step strong { font-size: 1.35rem; }
.fma-step span { font-size: 0.96rem; line-height: 1.6; }

/* ---- Forms ------------------------------------------------------------- */
.fma-form-panel {
  background: var(--fm-white); border: 1px solid var(--fm-rule);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fma-band--dark .fma-form-panel, .fma-band--darker .fma-form-panel { background: rgba(255,255,255,0.04); }
.fma-lead-form p { margin: 0 0 1.1rem; }
.fma-lead-form label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fm-brass-text); font-weight: 700; }
.fma-band--dark .fma-lead-form label, .fma-band--darker .fma-lead-form label { color: var(--fm-brass-on-dark); }
.fma-lead-form input[type=text],
.fma-lead-form input[type=email],
.fma-lead-form input[type=tel],
.fma-lead-form select,
.fma-lead-form textarea {
  width: 100%; max-width: none; margin-top: 0.4rem;
  padding: 0.75em 0.9em; font: inherit; font-size: 0.98rem; font-weight: 400;
  border: 1px solid rgba(37,39,36,0.25); border-radius: 2px; background: var(--fm-white);
}
.fma-band--dark .fma-lead-form input, .fma-band--dark .fma-lead-form textarea,
.fma-band--dark .fma-lead-form select { background: rgba(255,255,255,0.94); }
.fma-lead-form input:focus, .fma-lead-form textarea:focus, .fma-lead-form select:focus {
  outline: 2px solid var(--fm-brass); outline-offset: 1px; border-color: var(--fm-brass);
}
.fma-lead-form input[type=file] { margin-top: 0.4rem; font-size: 0.9rem; }
.fma-lead-form .button.fma-btn {
  margin-top: 0.5rem; width: auto; text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.78rem; padding: 0.9em 2em; border-radius: 2px;
}
.fma-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.fma-form-grid > p.fma-form-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .fma-form-grid { grid-template-columns: 1fr; } }
.fma-enquiry__ok { border-left: 3px solid var(--fm-brass); background: rgba(179,150,94,0.12); }

/* ---- Two-up split for form pages --------------------------------------- */
.fma-form-split.e-con { flex-direction: row; gap: clamp(2rem, 4vw, 4rem); align-items: flex-start; }
.fma-form-split > .e-con { flex: 1 1 0; min-width: 0; }
.fma-form-split > .fma-form-aside { flex: 0 1 34%; }
@media (max-width: 900px) {
  .fma-form-split.e-con { flex-direction: column; }
  .fma-form-split > .e-con, .fma-form-split > .fma-form-aside { width: 100%; flex: 1 1 auto; }
}

/* ---- Mobile rhythm ------------------------------------------------------ */
@media (max-width: 640px) {
  .fma-band.e-con { padding: clamp(2.75rem, 9vw, 3.5rem) 1.25rem; }
  .fma-hero__panel.e-con { padding: 2.5rem 1.25rem; }
  .fma-sec-head.e-con { padding-bottom: var(--fm-s2); }
  .fma-band .elementor-heading-title, .fma-sec-head .elementor-heading-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .fma-hero__title .elementor-heading-title { font-size: clamp(2.1rem, 9vw, 2.7rem); }
}

/* Statement bands — a typographic promise, not another icon grid */
.fma-statement.e-con { padding-block: var(--fm-s6); }
.fma-statement__title .elementor-heading-title {
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; max-width: 16ch;
}
.fma-statement__lead {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.6;
  max-width: 52ch; margin-top: var(--fm-s3); color: rgba(244,240,230,0.82);
}

/* Quiet supporting note */
.fma-note { font-size: 0.94rem; opacity: 0.7; max-width: 46ch; }
.fma-band--dark .fma-note, .fma-band--darker .fma-note { color: rgba(244,240,230,0.68); }

/* Seller checklist */
.fma-checklist { list-style: none; margin: var(--fm-s3) 0 0; padding: 0; }
.fma-checklist li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.65rem;
  font-size: 0.98rem; line-height: 1.5;
}
.fma-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-left: 1.5px solid var(--fm-brass);
  border-bottom: 1.5px solid var(--fm-brass); transform: rotate(-45deg);
}

/* Tight band — for short passages that would otherwise float in an over-tall section */
.fma-band--tight.e-con { padding-block: var(--fm-s4); }

/* "What we're interested in" — guidance as an editorial passage, not a taxonomy grid */
.fma-interest.e-con { flex-direction: row; gap: clamp(2rem, 5vw, 4.5rem); align-items: flex-start; padding: 0; }
.fma-interest__head { flex: 0 1 32%; }
.fma-interest__body { flex: 1 1 0; min-width: 0; }
.fma-interest__list {
  font-family: var(--fm-font-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.55; color: var(--fm-forest); max-width: 46ch; margin: 0 0 var(--fm-s2);
}
@media (max-width: 860px) {
  .fma-interest.e-con { flex-direction: column; gap: var(--fm-s2); }
  .fma-interest__head, .fma-interest__body { width: 100%; flex: 1 1 auto; }
}

/* The rotated-border "tick" read as a dropdown chevron. A short brass rule is unambiguous
   and quieter — the list is a set of assurances, not a checklist to complete. */
.fma-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 14px; height: 1px; border: 0;
  background: var(--fm-brass-on-dark); transform: none;
}
.fma-ticks li { padding-left: 1.9rem; }
.fma-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 12px; height: 1px; border: 0;
  background: var(--fm-brass); transform: none;
}
.fma-checklist li { padding-left: 1.7rem; }

/* Journal/article templates: the closing bar sits flush on the footer like the Elementor pages */
.fma-journal-page .fma-contact-bar,
.fma-article .fma-contact-bar { margin-bottom: 0; }
.fma-journal-page, .fma-article { margin-bottom: 0; padding-bottom: 0; }
.fma-journal-page + .fma-footer, .fma-article + .fma-footer { margin-top: 0; }

/* Theme templates (Journal index, article) reuse the band classes but Elementor's own
   `.e-con { display:flex }` is not enqueued on non-Elementor pages — the contact bar was
   falling back to `display:inline` and overflowing its container. Declare layout explicitly
   so these classes stand on their own. */
.fma-journal-page .fma-contact-bar,
.fma-article .fma-contact-bar {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.fma-journal-page .fma-contact-bar__copy,
.fma-article .fma-contact-bar__copy { display: block; }
.fma-journal-page .fma-contact-bar__actions,
.fma-article .fma-contact-bar__actions { display: flex; flex-direction: row; gap: 0.75rem; flex-wrap: wrap; }
.fma-journal-page .fma-band,
.fma-article .fma-band { display: block; }
.fma-journal-page .fma-hero--static,
.fma-article .fma-hero--static { display: flex; }
@media (max-width: 700px) {
  .fma-journal-page .fma-contact-bar,
  .fma-article .fma-contact-bar { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   EDGE FADES + INTERNAL SPACING RHYTHM
   The homepage hero dissolves its green panel into the photograph. Page heroes
   and split bands had a hard vertical seam instead. Each band declares its own
   background colour so a fade can resolve to the correct tone.
   ========================================================================= */

/* Each band publishes its background so gradients can match it exactly */
.fma-band--dark   { --fm-band-bg: #173B2C; }
.fma-band--darker { --fm-band-bg: #102A20; }
.fma-band--cream  { --fm-band-bg: #F4F0E6; }
.fma-band--paper  { --fm-band-bg: #FBF9F4; }
.fma-hero, .fma-hero--page { --fm-band-bg: #102A20; }

/* ---- Page heroes: same dissolve as the homepage ------------------------- */
.fma-hero--page .fma-bleed-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    var(--fm-forest-dark) 0%,
    rgba(16,42,32,0.74) 12%,
    rgba(16,42,32,0.20) 42%,
    rgba(16,42,32,0.06) 68%,
    rgba(16,42,32,0.30) 100%);
}
.fma-hero--page .fma-bleed-image img { filter: brightness(1.05) saturate(0.95); }

/* Static theme-template heroes (Journal index, article) already fade via
   .fma-hero__image::after — kept as-is. */

/* ---- Split bands: dissolve the image edge into the adjacent panel -------
   .fma-split      → media left,  text right → fade the image's RIGHT edge
   .fma-split--reverse (row-reverse) → media right → fade the LEFT edge */
.fma-split .fma-split__media .fma-bleed-image::after,
.fma-story .fma-bleed-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.fma-split:not(.fma-split--reverse) .fma-split__media .fma-bleed-image::after {
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 55%,
    color-mix(in srgb, var(--fm-band-bg, #173B2C) 55%, transparent) 80%,
    var(--fm-band-bg, #173B2C) 100%);
}
.fma-split--reverse .fma-split__media .fma-bleed-image::after {
  background: linear-gradient(270deg,
    rgba(0,0,0,0) 55%,
    color-mix(in srgb, var(--fm-band-bg, #173B2C) 55%, transparent) 80%,
    var(--fm-band-bg, #173B2C) 100%);
}
/* Fallback for browsers without color-mix — a plain two-stop fade still softens the seam */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .fma-split:not(.fma-split--reverse) .fma-split__media .fma-bleed-image::after {
    background: linear-gradient(90deg, rgba(0,0,0,0) 62%, var(--fm-band-bg, #173B2C) 100%);
  }
  .fma-split--reverse .fma-split__media .fma-bleed-image::after {
    background: linear-gradient(270deg, rgba(0,0,0,0) 62%, var(--fm-band-bg, #173B2C) 100%);
  }
}
/* Stacked on mobile the seam becomes horizontal, so fade downward instead */
@media (max-width: 1024px) {
  .fma-split .fma-split__media .fma-bleed-image::after,
  .fma-split--reverse .fma-split__media .fma-bleed-image::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 58%, var(--fm-band-bg, #173B2C) 100%);
  }
  .fma-hero--page .fma-bleed-image::after {
    background: linear-gradient(180deg, rgba(16,42,32,0.55) 0%, rgba(16,42,32,0.12) 45%, var(--fm-forest-dark) 100%);
  }
}

/* Contact map + framed media get the same softened edge treatment as photography */
.fma-map iframe { border-color: rgba(179,150,94,0.32); }

/* ---- Internal spacing rhythm -------------------------------------------
   Headings sat 20px from their content while the band carried 96px padding,
   which read as cramped. Content now breathes in proportion to the band. */
.fma-band > .e-con-inner > * + *,
.fma-band > * + * { margin-top: var(--fm-s3); }
.fma-band .fma-sec-head + * { margin-top: var(--fm-s4); }
.fma-band .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 1rem; }
.fma-band .elementor-widget-heading + .elementor-widget-shortcode,
.fma-band .elementor-widget-text-editor + .elementor-widget-shortcode { margin-top: var(--fm-s4); }
.fma-band .elementor-widget-shortcode + .elementor-widget-button { margin-top: var(--fm-s3); }
.fma-sec-head.e-con { padding-bottom: 0; }

/* Split/statement text columns keep their own tighter internal rhythm */
.fma-split__text > * + *,
.fma-story__text > * + *,
.fma-hero__panel > * + * { margin-top: 0; }
.fma-split__text .elementor-widget-heading + .elementor-widget-text-editor,
.fma-story__text .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 1rem; }
.fma-split__text .elementor-widget-text-editor + .elementor-widget-button,
.fma-story__text .elementor-widget-text-editor + .elementor-widget-button { margin-top: var(--fm-s3); }
.fma-split__text .elementor-widget-shortcode + .elementor-widget-button { margin-top: var(--fm-s3); }

/* Two-up columns (Contact) */
.fma-contact-col > * + * { margin-top: var(--fm-s2); }
.fma-contact-col .elementor-widget-heading + .elementor-widget-shortcode { margin-top: var(--fm-s3); }

/* Form panels */
.fma-form-aside > * + * { margin-top: var(--fm-s2); }
.fma-form-aside .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 1rem; }

/* Hero panel rhythm — the lead, CTAs and detail strip each need their own breathing room */
.fma-hero__panel .elementor-widget-text-editor + .fma-hero__ctas.e-con { margin-top: 0.5rem; }
.fma-hero__ctas.e-con + .elementor-widget-shortcode { margin-top: 2rem; }
.fma-hero--page .fma-hero__meta { padding-top: 1.6rem; }
.fma-hero--page .fma-ticks { margin-bottom: 2rem; }

/* Agency credit — the quietest line on the page, sitting below the legal bar */
.fma-footer__credit {
  max-width: var(--fm-maxw); margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) var(--fm-s3);
  font-size: 0.76rem; color: rgba(244,240,230,0.38); letter-spacing: 0.02em;
}
.fma-footer__credit a { color: rgba(244,240,230,0.55); text-decoration: none; border-bottom: 1px solid rgba(244,240,230,0.2); }
.fma-footer__credit a:hover { color: var(--fm-brass-on-dark); border-color: var(--fm-brass-on-dark); }

/* =========================================================================
   ELEMENTOR (HFE) HEADER + FOOTER TEMPLATES
   Reuse the established design language so the editable templates look
   identical to the hand-built versions they replace.
   ========================================================================= */
.fma-header-el.e-con {
  background: var(--fm-forest-dark);
  border-bottom: 1px solid rgba(179,150,94,0.26);
  align-items: center; gap: 1.25rem;
  max-width: none;
}
.fma-header-el > .e-con-inner { max-width: 1400px; align-items: center; gap: 1.25rem; }
.fma-header-el__logo { flex: 0 0 auto; margin-right: auto; }
.fma-header-el__logo img { height: 66px !important; width: auto !important; display: block; }
.fma-header-el__nav { flex: 0 1 auto; }
.fma-header-el__utility { flex: 0 0 auto; }
.fma-header-el .hfe-nav-menu__layout-horizontal .hfe-nav-menu li a.hfe-menu-item {
  color: var(--fm-ivory); font-family: var(--fm-font-body); font-size: 0.95rem;
  padding: 0.55rem 0.8rem;
}
.fma-header-el .hfe-nav-menu li a.hfe-menu-item:hover,
.fma-header-el .hfe-nav-menu li.current-menu-item > a.hfe-menu-item { color: var(--fm-brass-on-dark); }
.fma-header-el .sub-menu { background: var(--fm-forest-dark); border: 1px solid rgba(179,150,94,0.28); }
.fma-header-el .sub-menu a.hfe-sub-menu-item { color: var(--fm-ivory); font-size: 0.9rem; }
@media (max-width: 640px) { .fma-header-el__logo img { height: 46px !important; } }

.fma-footer-el.e-con {
  background: var(--fm-forest-dark); color: var(--fm-ivory);
  max-width: none; gap: clamp(2rem, 4vw, 3.5rem); align-items: flex-start;
}
.fma-footer-el > .e-con-inner {
  max-width: var(--fm-maxw); gap: clamp(2rem, 4vw, 3.5rem); align-items: flex-start;
}
.fma-footer-el__brand { flex: 1.6 1 0; }
.fma-footer-el__col { flex: 1 1 0; min-width: 0; }
.fma-footer-el__contact { flex: 1.25 1 0; }
.fma-footer-el p { color: rgba(244,240,230,0.72); font-size: 0.92rem; line-height: 1.6; }
.fma-footer-el h3 {
  color: var(--fm-brass-on-dark); font-family: var(--fm-font-body);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 1rem;
}
.fma-footer-el ul { list-style: none; margin: 0; padding: 0; }
.fma-footer-el li { margin-bottom: 0.55rem; }
.fma-footer-el a { color: rgba(244,240,230,0.8); font-size: 0.93rem; text-decoration: none; }
.fma-footer-el a:hover { color: var(--fm-white); }
.fma-footer-el__bar.e-con,
.fma-footer-el__credit-row.e-con { background: var(--fm-forest-dark); max-width: none; }
.fma-footer-el__bar > .e-con-inner {
  max-width: var(--fm-maxw); flex-direction: row; justify-content: space-between;
  align-items: center; gap: 1rem; border-top: 1px solid rgba(244,240,230,0.12); padding-top: 1.5rem;
}
.fma-footer-el__bar p { font-size: 0.82rem; color: rgba(244,240,230,0.55); margin: 0; }
.fma-footer-el__legal nav { display: flex; gap: 1.75rem; }
.fma-footer-el__legal a { font-size: 0.82rem; color: rgba(244,240,230,0.55); }
.fma-footer-el__credit-row > .e-con-inner { max-width: var(--fm-maxw); }
.fma-footer-el__credit-row p { font-size: 0.76rem; color: rgba(244,240,230,0.38); margin: 0; }
.fma-footer-el__credit-row a { color: rgba(244,240,230,0.55); font-size: 0.76rem; border-bottom: 1px solid rgba(244,240,230,0.2); }
.fma-footer-el__credit-row a:hover { color: var(--fm-brass-on-dark); }
@media (max-width: 980px) { .fma-footer-el > .e-con-inner { flex-wrap: wrap; } .fma-footer-el__brand { flex-basis: 100%; } }
@media (max-width: 640px) {
  .fma-footer-el > .e-con-inner { flex-direction: column; }
  .fma-footer-el__bar > .e-con-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   PRODUCT CARDS — ONE SYSTEM, EVERYWHERE
   Shop, category archives, search, related products, homepage and Visit bands
   all share this. Buttons always align; a differently-proportioned photograph
   can never stretch a column or distort the image.
   ========================================================================= */

.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
/* Woo/Hello add clearfix pseudo-elements which become stray grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
  position: relative;
}
/* Woo wraps image+title+price in one link; let it grow so the button pins to the bottom */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; flex: 1 1 auto;
  text-decoration: none; color: inherit;
}

/* Image: fixed frame, cropped not squashed — image proportion can never affect layout */
.woocommerce ul.products li.product img,
ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 0 1rem !important;
  border: 1px solid var(--fm-rule-soft);
  background: #efe9dc;
  transition: transform .5s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.02); }
/* The image is the only element allowed to fill remaining space, so keep it fixed */
.woocommerce ul.products li.product a img { flex: 0 0 auto; }

/* Title: reserve two lines so one-line titles don't raise the row */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fm-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.12rem !important;
  line-height: 1.28 !important;
  color: var(--fm-forest);
  padding: 0 !important;
  margin: 0 0 0.35rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.28em);
}

/* Optional meta line — reserve its height so cards without one still align */
.woocommerce ul.products li.product .fma-card-meta,
ul.products li.product .fma-card-meta {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(37,39,36,0.55);
  margin: 0 0 0.4rem !important;
  min-height: 1.25em;
}
.woocommerce ul.products li.product .fma-card-dealer { display: none; }

.woocommerce ul.products li.product .price,
ul.products li.product .price {
  font-family: var(--fm-font-display);
  font-size: 1.08rem !important;
  font-weight: 500;
  color: var(--fm-charcoal) !important;
  margin: 0 0 1rem !important;
  display: block;
}
.woocommerce ul.products li.product .price del { opacity: 0.5; font-size: 0.9em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Button: always last, always level across the row */
.woocommerce ul.products li.product a.button,
ul.products li.product a.button {
  margin-top: auto !important;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.7em 1em;
  border: 1px solid rgba(23,59,44,0.3); border-radius: 2px;
  background: transparent; color: var(--fm-forest);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--fm-forest); border-color: var(--fm-forest); color: var(--fm-white);
}

/* Stock badge sits on the image, not in the flow */
.fma-card-badge { top: 0.75rem; left: 0.75rem; }

@media (max-width: 1100px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 780px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; } }
@media (max-width: 420px)  { .woocommerce ul.products, ul.products { grid-template-columns: 1fr; } }

/* Homepage / Visit bands keep four across at desktop regardless of Woo's column class */
.fma-stock .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .fma-stock .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 780px)  { .fma-stock .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px)  { .fma-stock .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Related / upsell grids sit tighter */
.related.products ul.products,
.upsells.products ul.products,
.cross-sells ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================================================
   SHOP + CATEGORY ARCHIVES
   Commerce first: regular, scannable, quick — but unmistakably Forest Mill.
   ========================================================================= */
.woocommerce.archive .site-main,
.woocommerce-page .site-main,
body.woocommerce main,
body.woocommerce-page main { background: var(--fm-band-bg, #FBF9F4); }

.woocommerce .woocommerce-breadcrumb {
  max-width: var(--fm-maxw); margin: 0 auto; padding: 1.75rem clamp(1.25rem,4vw,2.5rem) 0;
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(37,39,36,0.5);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--fm-brass-text); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

.woocommerce .woocommerce-products-header {
  max-width: var(--fm-maxw); margin: 0 auto; padding: 1.25rem clamp(1.25rem,4vw,2.5rem) 0;
}
.woocommerce .woocommerce-products-header__title {
  font-family: var(--fm-font-display); font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.06;
  color: var(--fm-forest); margin: 0;
}
.woocommerce .woocommerce-products-header .term-description,
.woocommerce .woocommerce-products-header p {
  max-width: 56ch; margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.6; opacity: 0.8;
}

/* Filters + sort share one calm control row */
.woocommerce .fma-filters {
  max-width: var(--fm-maxw); margin: 2rem auto 0; padding: 1.5rem clamp(1.25rem,4vw,2.5rem);
  background: var(--fm-white); border: 1px solid var(--fm-rule-soft); border-radius: 2px;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  max-width: var(--fm-maxw); margin-inline: auto; padding-inline: clamp(1.25rem,4vw,2.5rem);
}
.woocommerce .woocommerce-result-count {
  float: none; margin: 2.25rem auto 0;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(37,39,36,0.55);
}
.woocommerce .woocommerce-ordering { float: none; margin: -1.6rem auto 0; text-align: right; }
.woocommerce .woocommerce-ordering select {
  padding: 0.55em 0.8em; font: inherit; font-size: 0.86rem;
  border: 1px solid var(--fm-rule-soft); border-radius: 2px; background: var(--fm-white);
}
@media (max-width: 640px) {
  .woocommerce .woocommerce-ordering { margin-top: 0.75rem; text-align: left; }
}

.woocommerce.archive ul.products,
.woocommerce-page ul.products {
  max-width: var(--fm-maxw); margin: 2.25rem auto 0 !important;
  padding-inline: clamp(1.25rem,4vw,2.5rem) !important;
}

.woocommerce nav.woocommerce-pagination {
  max-width: var(--fm-maxw); margin: 3.5rem auto 0; padding: 0 clamp(1.25rem,4vw,2.5rem) 4rem;
}
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 0.5rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fm-rule); color: var(--fm-forest); font-size: 0.86rem; padding: 0 0.8em;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--fm-forest); color: var(--fm-white); border-color: var(--fm-forest);
}

/* Woo notices in the site language */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  max-width: var(--fm-maxw); margin: 1.5rem auto !important;
  border-top: 0; border-left: 3px solid var(--fm-brass);
  background: rgba(179,150,94,0.1); color: var(--fm-charcoal);
  font-size: 0.95rem; border-radius: 0;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--fm-brass-text); }

/* =========================================================================
   SINGLE PRODUCT — make the object the hero
   ========================================================================= */
.woocommerce div.product {
  max-width: var(--fm-maxw); margin-inline: auto;
  padding: 0 clamp(1.25rem,4vw,2.5rem) 3rem;
  display: grid; grid-template-columns: 1.05fr 1fr;
  column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 2.5rem; align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img {
  border: 1px solid var(--fm-rule-soft); background: #efe9dc;
}
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 0.6rem; margin: 0.75rem 0 0; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.woocommerce div.product .flex-control-thumbs img {
  width: 78px !important; height: 78px; object-fit: cover;
  border: 1px solid var(--fm-rule-soft); opacity: 0.75; transition: opacity .15s ease, border-color .15s ease;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--fm-brass); }

.woocommerce div.product .summary { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .product_title {
  font-family: var(--fm-font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08;
  color: var(--fm-forest); margin: 0 0 0.75rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--fm-font-display); font-size: 1.7rem; color: var(--fm-charcoal);
  margin: 0 0 1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 1.02rem; line-height: 1.65; }

/* Tabs, related and the surrounding sections span the full width below the two columns */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .fma-visit-prompt,
.woocommerce div.product .fma-forms,
.woocommerce div.product .fma-discover,
.woocommerce div.product .related.products { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-tabs { margin-top: 3rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.75rem; border-bottom: 1px solid var(--fm-rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0 1.75rem 0 0; padding: 0 0 0.85rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--fm-font-body); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(37,39,36,0.5); padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fm-forest); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 68ch; font-size: 1.02rem; line-height: 1.7; }
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }

.woocommerce div.product .related.products,
.woocommerce div.product .fma-discover { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--fm-rule-soft); }
.woocommerce div.product .related.products > h2,
.woocommerce div.product .fma-discover > h2 {
  font-family: var(--fm-font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--fm-forest); margin: 0 0 1.75rem;
}

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

/* Result count + sorting: the earlier negative-margin trick made them overlap. They are
   siblings in Woo's markup, so float them onto one line and clear before the grid. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  max-width: var(--fm-maxw); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  box-sizing: border-box;
}
.woocommerce .woocommerce-result-count {
  float: none; display: block; margin: 2.5rem auto 0;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(37,39,36,0.5);
}
.woocommerce .woocommerce-ordering {
  float: none; display: block; margin: 0.85rem auto 0; text-align: left;
}
.woocommerce .woocommerce-ordering select { max-width: 260px; }
.woocommerce.archive ul.products,
.woocommerce-page ul.products { clear: both; }

/* Wider viewports can afford the two controls side by side */
@media (min-width: 781px) {
  .woocommerce .woocommerce-result-count { float: left; margin-top: 2.5rem; padding-right: 0; }
  .woocommerce .woocommerce-ordering {
    float: right; margin-top: 2.25rem; padding-left: 0; text-align: right;
  }
}

/* Filter panel: quieter, and its Apply button proportionate to the controls */
.woocommerce .fma-filters .fma-filters__head h2 { font-size: 1.15rem; }
.woocommerce .fma-filters legend { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fm-brass-text); }
.woocommerce .fma-filters .fma-facet__opt { font-size: 0.92rem; }
.woocommerce .fma-filters .button,
.woocommerce .fma-filters button[type="submit"],
.woocommerce .fma-filters input[type="submit"] {
  min-height: 44px; padding: 0.6em 1.5em;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--fm-forest); border: 1px solid var(--fm-forest); color: var(--fm-white);
  border-radius: 2px;
}
.woocommerce .fma-filters .button:hover { background: var(--fm-forest-dark); border-color: var(--fm-forest-dark); }

/* HFE wraps the footer in .footer-width-fixer set to 100vw, which includes the scrollbar and
   pushes the document ~11px wider than the viewport. */
.footer-width-fixer { width: 100% !important; max-width: 100% !important; }
/* WooCommerce FlexSlider's slide track is intentionally wider than its viewport; keep it clipped. */
.woocommerce div.product .flex-viewport { overflow: hidden !important; max-width: 100%; }
.woocommerce div.product .woocommerce-product-gallery { max-width: 100%; overflow: hidden; }

/* =========================================================================
   DEALER SYSTEM
   ========================================================================= */

/* Dealer card additions */
.fma-dealer-tile__count {
  display: block; font-size: 0.76rem; letter-spacing: 0.06em;
  color: rgba(37,39,36,0.5); margin-top: 0.15rem;
}
.fma-test-flag--inline {
  position: static; display: inline-block; margin-left: 0.6rem; vertical-align: middle;
  background: rgba(179,150,94,0.25); color: var(--fm-brass-on-dark);
}

/* Homepage featured-dealer list — names lead, specialism supports */
.fma-dealer-list { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.fma-dealer-list a { display: block; text-decoration: none; color: inherit; padding-left: 1rem; border-left: 1px solid rgba(179,150,94,0.4); transition: border-color .15s ease; }
.fma-dealer-list a:hover { border-color: var(--fm-brass); }
.fma-dealer-list strong { display: block; font-family: var(--fm-font-display); font-weight: 500; font-size: 1.12rem; color: var(--fm-white); line-height: 1.25; }
.fma-dealer-list span { display: block; font-size: 0.82rem; color: rgba(244,240,230,0.65); margin-top: 0.15rem; }
@media (max-width: 560px) { .fma-dealer-list { grid-template-columns: 1fr; } }

/* Dealer profile page */
.fma-dealer-hero__spec {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fm-brass-on-dark); margin: 0 0 1rem;
}
.fma-dealer-hero__meta li strong { font-family: var(--fm-font-display); font-size: 1.15rem; color: var(--fm-white); }
.fma-dealer-page .fma-band { display: block; }
.fma-dealer-story__inner { max-width: var(--fm-maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.fma-dealer-story__inner h2 { font-family: var(--fm-font-display); font-weight: 500; font-size: clamp(1.6rem,2.8vw,2.2rem); color: var(--fm-forest); margin: 0; }
.fma-dealer-story .fma-prose { max-width: none; margin: 0; font-size: 1.06rem; }
@media (max-width: 860px) { .fma-dealer-story__inner { grid-template-columns: 1fr; gap: 1rem; } }

.fma-dealer-stock .fma-band__inner { max-width: var(--fm-maxw); margin-inline: auto; }
.fma-dealer-stock .fma-sec-head { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; padding: 0 0 2rem; }
.fma-dealer-stock .fma-sec-head h2 { font-family: var(--fm-font-display); font-weight: 500; font-size: clamp(1.6rem,2.8vw,2.2rem); color: var(--fm-forest); margin: 0; }

.fma-dealer-empty {
  max-width: 62ch; padding-left: clamp(1.25rem,3vw,2rem);
  border-left: 3px solid var(--fm-brass);
}
.fma-dealer-empty p { font-size: 1.02rem; line-height: 1.65; opacity: 0.85; }
.fma-dealer-empty__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* "Offered by" on the product page — provenance, not a competing CTA */
.fma-offered-by {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.75rem 0 0; padding: 1rem 1.15rem;
  border: 1px solid var(--fm-rule); background: rgba(179,150,94,0.06);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.fma-offered-by:hover { border-color: var(--fm-brass); background: rgba(179,150,94,0.12); }
.fma-offered-by__img { flex: 0 0 auto; width: 58px; height: 58px; overflow: hidden; border: 1px solid var(--fm-rule); }
.fma-offered-by__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fma-offered-by__body { display: flex; flex-direction: column; gap: 0.1rem; }
.fma-offered-by__label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fm-brass-text); font-weight: 700; }
.fma-offered-by__body strong { font-family: var(--fm-font-display); font-weight: 500; font-size: 1.15rem; color: var(--fm-forest); line-height: 1.2; }
.fma-offered-by__spec { font-size: 0.82rem; opacity: 0.7; }
.fma-offered-by .fma-link-cta { border: 0; padding: 0; margin-top: 0.35rem; }

/* The footer email address is a single long unbreakable token and was pushing the document
   ~11px wider than the viewport at tablet widths. Allow it to wrap. */
.fma-footer-el a,
.fma-footer-el p,
.fma-footer__col a,
.fma-footer__visit p { overflow-wrap: anywhere; word-break: break-word; }
.fma-footer-el__contact a { display: inline-block; max-width: 100%; }

/* =========================================================================
   TEST PRODUCTS + SHOP BY DEALER
   Demonstration records must be unmistakable without shouting. The badge sits
   on the image in the same visual register as the Test Dealer flag, so the two
   read as one system rather than two warnings.
   ========================================================================= */

/* Badge on the product card. Positioned against the square image frame. */
.woocommerce ul.products li.product { position: relative; }
.fma-test-flag--product {
  position: absolute; z-index: 3; top: 0.6rem; left: 0.6rem;
  background: rgba(16,42,32,0.86); color: rgba(244,240,230,0.92);
  font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4em 0.7em; border-radius: 1px; pointer-events: none;
}

/* Card CTA reads as a link into the demonstration, not a purchase. */
.woocommerce ul.products li.product a.button.fma-test-product-cta {
  background: none; color: rgba(37,39,36,0.6);
  border: 1px solid rgba(37,39,36,0.18);
}
.woocommerce ul.products li.product a.button.fma-test-product-cta:hover {
  border-color: var(--fm-brass); color: var(--fm-green);
}

/* Single product: the honest note where price + add to cart would be. */
.fma-test-product-note {
  border-top: 1px solid var(--fm-rule); border-bottom: 1px solid var(--fm-rule);
  padding: 1.1rem 0; margin: 1.5rem 0;
}
.fma-test-product-note p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: rgba(37,39,36,0.62); }
.fma-test-product-note p + p { margin-top: 0.5rem; }
.fma-test-product-note strong { color: rgba(37,39,36,0.85); font-weight: 600; }

/* Shop By Dealer facet — the one facet worth a route out of the filter. */
.fma-facet--dealer .fma-facet__opt { align-items: baseline; }
.fma-facet--dealer .fma-test-flag--inline {
  margin-left: 0.4rem; font-size: 0.5rem; padding: 0.25em 0.5em;
  background: rgba(179,150,94,0.2); color: rgba(37,39,36,0.6);
}
.fma-facet__more {
  display: inline-block; margin-top: 0.65rem;
  font-size: 0.76rem; letter-spacing: 0.06em; color: rgba(37,39,36,0.55);
  text-decoration: none; border-bottom: 1px solid rgba(179,150,94,0.5);
  padding-bottom: 1px; transition: color .15s ease, border-color .15s ease;
}
.fma-facet__more:hover { color: var(--fm-green); border-color: var(--fm-brass); }

@media (max-width: 560px) {
  .fma-facet--dealer .fma-facet__opt { font-size: 0.86rem; }
}

/* A demonstration record has nothing to enquire about, so WCFM's catalog-enquiry
   button is suppressed rather than left offering a route that goes nowhere. */
body.fma-is-test-product .wcfm_catalog_enquiry_button_w,
body.fma-is-test-product .wcfm_ele_wrapper { display: none !important; }

/* =========================================================================
   DEALER SYSTEM — VISUAL REVIEW PASS (2026-08-31)
   Judged against DESIGN-LANGUAGE.md §2 (framed, consistently graded, low-key
   photography) and the product-card standard already in force site-wide.
   ========================================================================= */

/* ---- Directory tiles: one baseline, not eight -------------------------- */
/* The tiles were ragged — a two-line introduction pushed that dealer's count
   and CTA below its neighbours'. Same fault the product cards had, so the same
   fix: grid stretch makes every tile in a row equal height, and the bottom
   group is pinned with margin-top:auto so CTAs land on one line. */
.fma-dealer-dir { align-items: stretch; }
.fma-dealer-tile { display: flex !important; flex-direction: column; height: 100%; }
.fma-dealer-tile__body { flex: 1 1 auto; }
.fma-dealer-tile__count { margin-top: auto !important; padding-top: 0.6rem; }
.fma-dealer-tile__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.5em);
}

/* Brass frame — the signature device from the concepts, and it also unifies a
   set of photographs that were never shot together. */
.fma-dealer-tile__img {
  border: 1px solid rgba(179,150,94,0.45);
  box-shadow: 0 1px 0 rgba(37,39,36,0.04);
}
/* Several library images are high-key and sat outside the dark, warm register
   the rest of the site uses. A warm scrim brings them into one key without
   re-editing files that other pages also rely on. */
.fma-dealer-tile__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(16,42,32,0.34) 0%, rgba(16,42,32,0.08) 45%, rgba(16,42,32,0) 75%),
    linear-gradient(rgba(94,68,32,0.10), rgba(94,68,32,0.10));
  transition: opacity .35s ease;
}
a.fma-dealer-tile:hover .fma-dealer-tile__img::after { opacity: 0.72; }
.fma-dealer-tile__img img { filter: saturate(0.94) contrast(1.04); }

/* Empty profiles read as a state, not as a zero. */
.fma-dealer-tile__count--none { font-style: italic; opacity: 0.75; }

/* ---- Profile hero: legible over ANY photograph ------------------------- */
/* The scrim assumed a dark image. Harrington & Wells' is pale and the white
   headline nearly vanished. Real dealer photography will be just as
   unpredictable, so the fix is a scrim that does not depend on the picture. */
.fma-dealer-hero .fma-bleed-image::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(16,42,32,0.94) 0%, rgba(16,42,32,0.86) 34%,
                    rgba(16,42,32,0.55) 58%, rgba(16,42,32,0.28) 100%);
}
.fma-dealer-hero .fma-bleed-image img { filter: saturate(0.9) brightness(0.92); }
.fma-dealer-hero .fma-hero__panel { position: relative; z-index: 3; }

/* Hero facts were cramped and the second item read as an afterthought. */
.fma-dealer-hero__meta { gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; }
.fma-dealer-hero__meta li { max-width: 30ch; }
.fma-dealer-hero__spec { color: var(--fm-brass-on-dark); }

/* ---- A dealer's stock: never strand a short row ------------------------ */
/* A dealer with two pieces was getting two cards marooned in a four-column
   grid with half the band empty. Column count now follows the actual stock, so
   a small dealer looks deliberate rather than unfinished. */
.fma-dealer-stock ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fma-dealer-stock ul.products.fma-cols-1 { grid-template-columns: minmax(0, 22rem); }
.fma-dealer-stock ul.products.fma-cols-2 { grid-template-columns: repeat(2, minmax(0, 24rem)); }
.fma-dealer-stock ul.products.fma-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .fma-dealer-stock ul.products,
  .fma-dealer-stock ul.products.fma-cols-2,
  .fma-dealer-stock ul.products.fma-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fma-dealer-stock ul.products,
  .fma-dealer-stock ul.products.fma-cols-1,
  .fma-dealer-stock ul.products.fma-cols-2,
  .fma-dealer-stock ul.products.fma-cols-3 { grid-template-columns: 1fr; }
}

/* A demonstration card has no price, and the reserved price slot left a hole
   that made the card look broken rather than deliberately priceless. */
.woocommerce ul.products li.product.fma-test-card .price,
.woocommerce ul.products li.product.fma-test-card .fma-card-meta { min-height: 0; display: none; }
.woocommerce ul.products li.product.fma-test-card .woocommerce-loop-product__title { margin-bottom: 0.35rem; }

/* ---- Offered By: a ruled block, not another filled card ---------------- */
/* The polish pass removed boxed cards site-wide; this one had crept back in as
   a grey panel. Brass rules above and below give it presence on the page
   ground instead. */
.fma-offered-by {
  background: none; border: 0;
  border-top: 1px solid rgba(179,150,94,0.5);
  border-bottom: 1px solid rgba(179,150,94,0.5);
  padding: 1.15rem 0; border-radius: 0;
}
.fma-offered-by:hover { background: none; border-color: var(--fm-brass); }
.fma-offered-by__img {
  width: 64px; height: 64px; border: 1px solid rgba(179,150,94,0.45);
}
.fma-offered-by__img img { filter: saturate(0.94) contrast(1.04) brightness(0.96); }
/* Brass-on-beige was too faint to read. */
.fma-offered-by .fma-test-flag--inline {
  background: rgba(16,42,32,0.86); color: rgba(244,240,230,0.94);
}

/* Hero facts read as two short statements, not two wrapped paragraphs. */
.fma-dealer-hero__meta li { max-width: 34ch; text-wrap: balance; }
.fma-dealer-hero__meta li span { line-height: 1.45; }

/* =========================================================================
   FOOTER — DESIGN PASS (2026-08-31)
   ========================================================================= */

/* The bottom bar was misaligned with the footer's own columns: the legal-links
   widget renders EMPTY (correctly — the policy pages are unpublished drafts,
   and we do not invent legal text), but it still occupied a flex slot ahead of
   a 20% gap, pushing the copyright to x285 and the credit to x707. Neither
   lined up with anything above them, so the row read as accidental.
   Collapse empty shortcode widgets, then let the row use the full width. */
footer .elementor-widget-shortcode:not(:has(.elementor-shortcode > *)) { display: none; }
.fma-footer-el__legal:has(.elementor-shortcode:empty) { display: none; }

.fma-footer-el__bar {
  justify-content: space-between !important;
  gap: 1.5rem 2rem !important;
  align-items: baseline;
  /* A hairline instead of a floating row — the bar now reads as a footing, and
     it picks up the brass rule motif used across the rest of the site. */
  border-top: 1px solid rgba(179,150,94,0.28);
  /* Space with PADDING, never margin. The bar is a sibling container with its own
     dark background, so a top margin lets the cream page ground show between two
     dark blocks — the dark/cream/dark banding an earlier pass deliberately removed. */
  margin-top: 0 !important;
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem) !important;
}
/* space-between does the work; the copyright sits left with the brand column
   and the credit closes the row on the right. */
.fma-footer-el__bar > *:last-child { text-align: right; }
@media (max-width: 720px) {
  .fma-footer-el__bar { flex-direction: column; align-items: flex-start; gap: 0.5rem !important; }
  .fma-footer-el__bar > *:last-child { text-align: left; }
}

/* Social icons sat marooned: the brand column ran ~125px longer than its
   neighbours, so the icons floated in a band of empty green with nothing
   beside them. Tightened up under the blurb where they belong, and given the
   brass hover every other interactive element on the site has. */
.fma-footer-el__brand .fma-footer__social { margin-top: 0.35rem; }
.fma-footer__social { display: flex; gap: 0.9rem; }
.fma-footer__social a {
  color: rgba(244,240,230,0.55);
  transition: color .18s ease, transform .18s ease;
  display: inline-flex;
}
.fma-footer__social a:hover { color: var(--fm-brass-on-dark); transform: translateY(-2px); }

/* The columns are naturally uneven (contact carries an address, the brand a
   logo). Aligning them to a common top and easing the row's bottom padding
   stops the left side reading as bottom-heavy. */
.fma-footer-el { align-items: flex-start; }
.fma-footer-el__brand { gap: 0.9rem !important; }

/* =========================================================================
   MEGA MENU — the Shop Antiques panel
   Built from ordinary menu items + product-category images, so it stays
   editable in Appearance -> Menus and Products -> Categories.
   ========================================================================= */

/* The panel is centred with left:50%, so its offset parent decides where 'centre'
   is. Elementor makes the nav WIDGET position:relative, which put the centre at
   the middle of the menu (x=464, w=705) rather than the page — the panel started
   at 227 and ran 41px past the viewport. Hand the positioning context back to the
   full-width header. */
.fma-mega-parent { position: static !important; }
.fma-site-header { position: relative; }
.fma-site-header [class*="hfe-submenu-icon"],
.fma-site-header .elementor-widget-navigation-menu { position: static !important; }

/* Break the panel out of the narrow dropdown box and centre it on the page. */
/* Elementor writes per-widget CSS for the HFE nav with higher specificity than a
   theme stylesheet, and it loads later — width, background and transform were all
   being reset. These properties are forced deliberately. */
.hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
  position: absolute !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) translateY(6px) !important;
  width: min(1180px, calc(100vw - 3rem)) !important;
  min-width: 0 !important; max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1.35rem 1.25rem !important;
  padding: 2rem 2.1rem 2.1rem !important;
  background: var(--fm-forest-dark, #102A20) !important;
  border: 0 !important; border-top: 1px solid rgba(179,150,94,0.35) !important;
  box-shadow: 0 26px 60px rgba(16,42,32,0.34);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.hfe-nav-menu > li.fma-mega-parent:hover > ul.sub-menu,
.hfe-nav-menu > li.fma-mega-parent:focus-within > ul.sub-menu,
.hfe-nav-menu > li.fma-mega-parent.fma-mega-open > ul.sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

/* Reset the theme/HFE submenu item chrome inside the panel. */
.fma-mega-parent > ul.sub-menu > li {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  border: 0 !important; padding: 0 !important; background: none !important;
}
.fma-mega-parent > ul.sub-menu > li > a { padding: 0 !important; background: none !important; }
.fma-mega-parent > ul.sub-menu > li > a:not(.fma-mega__tile) { display: none; }

/* ---- Department tile --------------------------------------------------- */
.fma-mega__tile { display: block; text-decoration: none; color: inherit; }
.fma-mega__fig {
  display: block; position: relative; overflow: hidden;
  border: 1px solid rgba(179,150,94,0.4);
  background: rgba(244,240,230,0.05);
}
.fma-mega__fig img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(0.9) brightness(0.86);
}
.fma-mega__fig::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,42,32,0.5), rgba(16,42,32,0) 60%);
}
.fma-mega__label {
  display: block; margin-top: 0.6rem;
  font-family: var(--fm-font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--fm-white, #fff); line-height: 1.25;
}
.fma-mega__count {
  display: block; margin-top: 0.1rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244,240,230,0.5); font-family: var(--fm-font-body, inherit); font-weight: 400;
}

/* ---- Editorial panel --------------------------------------------------- */
.fma-mega__info {
  grid-column: span 1; align-self: start;
  padding-left: 1.35rem; border-left: 1px solid rgba(179,150,94,0.3);
}
.fma-mega__info-eyebrow {
  display: block; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fm-brass-on-dark, #C9AE77); margin-bottom: 0.5rem;
}
.fma-mega__info strong {
  display: block; font-family: var(--fm-font-display); font-weight: 500; font-size: 1.15rem;
  color: var(--fm-white, #fff); line-height: 1.25; margin-bottom: 0.45rem;
}
.fma-mega__info p {
  margin: 0 0 0.85rem; font-size: 0.84rem; line-height: 1.6; color: rgba(244,240,230,0.68);
}
.fma-mega__info .fma-link-cta { color: var(--fm-brass-on-dark, #C9AE77); border-bottom-color: rgba(179,150,94,0.5); }

@media (max-width: 1180px) {
  .hfe-nav-menu > li.fma-mega-parent > ul.sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---- Mobile: no mega panel, just an honest list ------------------------ */
@media (max-width: 1024px) {
  .hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
    position: static !important; left: auto !important; transform: none !important;
    width: auto !important; display: block !important;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 0.5rem 0 0.75rem 0.75rem !important; box-shadow: none; border-top: 0 !important;
  }
  .fma-mega__fig { display: none; }
  .fma-mega__tile { padding: 0.5rem 0; }
  .fma-mega__label { margin-top: 0; font-size: 0.98rem; }
  .fma-mega__count { display: inline; margin-left: 0.5rem; }
  .fma-mega__info { padding: 0.75rem 0 0; border-left: 0; border-top: 1px solid rgba(179,150,94,0.3); margin-top: 0.5rem; }
}

/* ---- The menu control, below the nav breakpoint ------------------------
   Header Footer Elementor swaps the horizontal nav for a hamburger at 1024px
   and leaves its icon at the theme's default dark grey, which on the forest
   header read as a black mark. Scoped to the widths where the control is
   shown at all, so the desktop header is untouched. */
@media (max-width: 1024px) {
  .fma-header-el .hfe-nav-menu__toggle,
  .fma-header-el .hfe-nav-menu-icon { color: var(--fm-ivory); }
  .fma-header-el .hfe-nav-menu-icon svg,
  .fma-header-el .hfe-nav-menu__toggle svg { fill: var(--fm-ivory); }
  .fma-header-el .hfe-nav-menu-close svg,
  .fma-header-el nav .hfe-nav-menu-icon svg { fill: var(--fm-ivory); }

  /* HFE positions the dropdown against the nav WIDGET, and the widget sits at the
     right-hand end of the header, so the panel opened 325px off the left edge of
     the screen with only a sliver showing. Take the widget out of the positioning
     chain and let the header (position: relative) be the containing block. */
  .fma-header-el__nav,
  .fma-header-el__nav > .elementor-widget-container,
  .fma-header-el__nav .hfe-nav-menu,
  .fma-header-el__nav .hfe-nav-menu-layout,
  .fma-header-el__nav .hfe-nav-menu-wrapper { position: static !important; }
  .fma-header-el nav.hfe-dropdown,
  .fma-header-el nav.hfe-dropdown-expandible {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 100% !important;
    /* Every department is listed inline on a phone, so the panel has to be able
       to scroll rather than run off the bottom of the screen. */
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid rgba(179, 150, 94, 0.32);
    box-shadow: 0 16px 30px rgba(16, 42, 32, 0.35);
  }
  /* Closed, the panel is only hidden by opacity and visibility, so it still laid
     out a 337px box starting 264px in and pushed the document's scroll width to
     601. Nothing could actually be scrolled to, because the body clips, but a
     page should not report itself as wider than the screen. */
  .fma-header-el nav.hfe-dropdown:not(.menu-is-active),
  .fma-header-el nav.hfe-dropdown-expandible:not(.menu-is-active) {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
  }

  /* The open menu is a designed surface, not a white default dropdown:
     display serif, generous rows, brass hairlines on dark forest. */
  .fma-header-el nav.hfe-dropdown,
  .fma-header-el nav.hfe-dropdown-expandible,
  .fma-header-el nav.hfe-dropdown .menu-item a.hfe-menu-item,
  .fma-header-el nav.hfe-dropdown .menu-item a.hfe-sub-menu-item,
  .fma-header-el nav.hfe-dropdown-expandible .menu-item a.hfe-menu-item,
  .fma-header-el nav.hfe-dropdown-expandible .menu-item a.hfe-sub-menu-item,
  .fma-header-el .hfe-nav-menu .sub-menu {
    background-color: var(--fm-forest-dark) !important;
  }
  .fma-header-el nav.hfe-dropdown,
  .fma-header-el nav.hfe-dropdown-expandible {
    padding: 0.25rem clamp(1.15rem, 5.5vw, 1.6rem) 1.1rem;
    border-top: 1px solid rgba(179, 150, 94, 0.32);
  }
  .fma-header-el nav.hfe-dropdown li.menu-item:not(:last-child),
  .fma-header-el nav.hfe-dropdown-expandible li.menu-item:not(:last-child) {
    border-bottom-color: rgba(179, 150, 94, 0.22) !important;
  }
  /* The parent item's link sits inside HFE's .hfe-has-submenu-container, not
     directly in the <li>, so a child selector alone left "Shop Antiques" in the
     body face while everything under it was set in the display serif. */
  .fma-header-el nav.hfe-dropdown a.hfe-menu-item,
  .fma-header-el nav.hfe-dropdown-expandible a.hfe-menu-item,
  .fma-header-el .hfe-nav-menu__layout-vertical a.hfe-menu-item {
    font-family: var(--fm-font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fm-ivory) !important;
    padding: 0.7rem 0 !important;
  }
  .fma-header-el nav.hfe-dropdown .sub-menu a,
  .fma-header-el nav.hfe-dropdown-expandible .sub-menu a,
  .fma-header-el .hfe-nav-menu .sub-menu a.fma-mega__tile {
    font-family: var(--fm-font-body) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(244, 240, 230, 0.74) !important;
  }
  .fma-header-el .fma-mega__count { font-size: 0.75rem; text-transform: none; letter-spacing: 0; opacity: 0.6; }

  /* ---- The departments inside the open menu ------------------------------
     The mega panel is forced visible on small screens by the main sheet, but
     HFE still owns the submenu's height for its own open/close animation, so
     it measured 20px while holding ten items — every department painted on
     top of the menu items below it. Given its own height back, and laid out
     two across so nine departments read as a compact block rather than a
     column as long as the menu itself. */
  .fma-header-el .hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 1.25rem !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.25rem 0 1rem 0.9rem !important;
    border-left: 1px solid rgba(179, 150, 94, 0.28);
    margin-left: 0.1rem;
  }
  .fma-header-el .fma-mega-item {
    margin: 0 !important;
    border-bottom: 0 !important;
    /* A hairline per row rather than per item, so the two columns read as one
       list and each department gets a full-height row to be tapped. */
    border-top: 1px solid rgba(244, 240, 230, 0.09) !important;
  }
  .fma-header-el .fma-mega-item:nth-child(1),
  .fma-header-el .fma-mega-item:nth-child(2) { border-top: 0 !important; }
  .fma-header-el .fma-mega__tile {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    /* Was a 16px row. Nothing on a phone should be that hard to hit. */
    min-height: 46px !important;
    padding: 0.55rem 0 !important;
  }
  .fma-header-el .fma-mega__label {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0 !important;
    font-size: 0.72rem !important;
  }
  /* The panel's promotional note belongs to the desktop mega menu; in a phone
     menu it is a paragraph in the way, and its one link is already a top-level
     item. */
  .fma-header-el .fma-mega__info { display: none !important; }
  /* With the list always open, the disclosure arrow says something untrue. */
  .fma-header-el nav.hfe-dropdown .hfe-menu-toggle,
  .fma-header-el nav.hfe-dropdown-expandible .hfe-menu-toggle { display: none !important; }
}

/* =========================================================================
   MOTION — one small system
   Weight decides duration. A brass rule is light and reacts almost at once;
   a large photograph is heavy and takes its time. Single easing curve
   throughout, no bounce, no overshoot, no parallax.
   ========================================================================= */

:root {
  --fm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fm-t-click:  170ms;   /* button press, immediate feedback   */
  --fm-t-link:   240ms;   /* links, rules, small chrome         */
  --fm-t-reveal: 640ms;   /* scroll reveal                      */
  --fm-t-image:  780ms;   /* photograph hover — heavy, unhurried*/
  --fm-t-hero:   900ms;   /* large editorial movement           */
}

/* ---- Scroll reveal ----------------------------------------------------- */
/* Only structural blocks. Body copy is never animated — it should be readable
   the instant it arrives. Movement is small: 14px, not a slide across the page. */
/* No will-change. Promoting every reveal target to its own compositing layer put
   the renderer under enough pressure to stall paints — the homepage hero image
   stopped painting entirely and Chrome timed out capturing the page. Plain
   opacity/transform transitions are cheap and behave. */
.fma-motion-ready .fma-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--fm-t-reveal) var(--fm-ease),
              transform var(--fm-t-reveal) var(--fm-ease);
}
.fma-motion-ready .fma-reveal--child { transform: translateY(10px); }
.fma-motion-ready .fma-reveal.fma-in { opacity: 1; transform: none; }

/* ---- Hero: the heaviest thing on the page, so it settles slowest -------- */
/*
 * A note on a wrong turn, kept so nobody repeats it: this was removed once after
 * the homepage hero photograph appeared to vanish whenever motion was enabled.
 * It had not. Chrome was serving a stale composited frame to the screenshot
 * pipeline, and every "fix" that seemed to work had merely forced a repaint.
 * Proven by enabling motion AND forcing a repaint — the photograph is there.
 * Verify paint bugs by forcing a repaint first; DOM state alone will not tell
 * you, and neither will an unforced capture.
 */
.fma-motion-ready .fma-hero__panel > *:nth-child(-n+5) {
  animation: fma-settle var(--fm-t-hero) var(--fm-ease) both;
}
.fma-motion-ready .fma-hero__panel > *:nth-child(2) { animation-delay: 70ms; }
.fma-motion-ready .fma-hero__panel > *:nth-child(3) { animation-delay: 140ms; }
.fma-motion-ready .fma-hero__panel > *:nth-child(4) { animation-delay: 200ms; }
.fma-motion-ready .fma-hero__panel > *:nth-child(5) { animation-delay: 250ms; }
@keyframes fma-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Hover: images are slow, chrome is quick --------------------------- */
.fma-dealer-tile__img img,
.woocommerce ul.products li.product img,
.fma-journal-card__img img,
.fma-mega__fig img {
  transition: transform var(--fm-t-image) var(--fm-ease),
              filter var(--fm-t-image) var(--fm-ease) !important;
}
a.fma-dealer-tile:hover .fma-dealer-tile__img img,
.woocommerce ul.products li.product:hover img,
.fma-journal-card:hover .fma-journal-card__img img { transform: scale(1.04); }
.fma-mega__tile:hover .fma-mega__fig img { transform: scale(1.05); filter: saturate(0.95) brightness(0.95); }

/* Links, rules and small chrome react quickly — they weigh nothing. */
a, .fma-link-cta, .fma-facet__more, .fma-footer__social a,
.fma-mega__label, .fma-mega__tile .fma-mega__count {
  transition: color var(--fm-t-link) var(--fm-ease),
              border-color var(--fm-t-link) var(--fm-ease),
              opacity var(--fm-t-link) var(--fm-ease);
}
.fma-mega__tile:hover .fma-mega__label { color: var(--fm-brass-on-dark, #C9AE77); }

/* Buttons: press feedback is immediate, and the movement is a millimetre, not a leap. */
.fma-btn, .fma-btn-plain, .button, button[type="submit"] {
  transition: background-color var(--fm-t-link) var(--fm-ease),
              border-color var(--fm-t-link) var(--fm-ease),
              color var(--fm-t-link) var(--fm-ease),
              transform var(--fm-t-click) var(--fm-ease);
}
.fma-btn:active, .fma-btn-plain:active, .button:active, button[type="submit"]:active {
  transform: translateY(1px);
}

/* The mega panel is a large surface: it should feel drawn open, not flicked. */
.hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
  transition: opacity var(--fm-t-link) var(--fm-ease),
              transform 380ms var(--fm-ease),
              visibility 0s linear var(--fm-t-link);
}
.hfe-nav-menu > li.fma-mega-parent:hover > ul.sub-menu,
.hfe-nav-menu > li.fma-mega-parent:focus-within > ul.sub-menu {
  transition: opacity var(--fm-t-link) var(--fm-ease),
              transform 380ms var(--fm-ease),
              visibility 0s;
}

/* ---- Respect the system setting, completely ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fma-reveal, .fma-reveal--child { opacity: 1 !important; transform: none !important; }
  .fma-hero__panel > *, .fma-hero .fma-bleed-image img { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The two-up Visit / Sell panels sat at different heights: the brass panel carried
   a 28px top margin from Elementor's container settings, so it started lower and
   finished shorter, leaving a cream strip above it and an uneven bottom edge.
   Both panels now stretch to the same height. Zeroed on mobile too, where the
   margin would otherwise open a cream gap between two stacked colour blocks. */
/* Generalised: a flush band should be flush. Several panels carried a 28px top
   margin from Elementor's container settings, so the coloured panel started lower
   than the photograph beside it and finished shorter, leaving a cream strip along
   the top and an uneven bottom edge. Applies to the whole pattern rather than to
   the two instances that were reported, since they were the same fault. */
@media (min-width: 1025px) {
  .fma-band--flush { align-items: stretch !important; }
  .fma-band--flush > .e-con {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
  }
}
/* Stacked on smaller screens the same margin would open a cream gap between two
   colour blocks, so it goes there too. */
@media (max-width: 1024px) {
  .fma-band--flush > .e-con { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* =========================================================================
   WOOCOMMERCE TEMPLATES — breathing room before the footer
   ========================================================================= */

/*
 * `body .site-main { padding-bottom: 0 }` was added earlier to close an accidental
 * cream strip between the last Elementor band and the footer. That is right for
 * pages that END in a full-bleed band, and wrong for everything WooCommerce
 * renders: Shop, category archives and single products all finish on ordinary
 * content, so the product grid was butting straight into the footer with a
 * measured gap of exactly 0px.
 *
 * Restore the space only where the page does not end in a band, and use the
 * site's own spacing scale so it matches every other section boundary.
 */
body.woocommerce .site-main,
body.woocommerce-page .site-main,
body.woocommerce main,
body.woocommerce-page main {
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

/* A page ending in a full-bleed band still closes flush against the footer. */
body.woocommerce .site-main:has(> .fma-band:last-child),
body.woocommerce-page .site-main:has(> .fma-band:last-child),
body.woocommerce .site-main:has(.fma-contact-bar:last-child),
body.woocommerce-page .site-main:has(.fma-contact-bar:last-child) {
  padding-bottom: 0 !important;
}

/* The grid itself wants a little air beneath the final row before that padding. */
.woocommerce ul.products,
.woocommerce-page ul.products { margin-bottom: clamp(1rem, 2vw, 2rem); }

/* Longer labels wrap to two lines, and line-height:1 left them looking crushed
   against the border. Give wrapped text proper leading and let the button grow. */
.woocommerce ul.products li.product a.button,
ul.products li.product a.button {
  line-height: 1.35;
  height: auto;
  padding-top: 0.75em; padding-bottom: 0.75em;
  text-wrap: balance;
}

/* =========================================================================
   404 — Antiques With A Story. This One Has Gone Missing.

   One dark stage, not two columns either side of a rule. The photograph is
   pinned to the right of the section and dissolves into the green through a
   tonal fade, so the copy panel and the image read as a single composition.

   On a phone the photograph drops back into the flow, between the recovery
   actions and the quieter onward routes, which is the order somebody actually
   needs them in: work out where you are, try to find the thing, then browse.
   ========================================================================= */

.fma-404__stage {
  /* Aligns the copy with every other page's 1280px container without wrapping
     it in one, so the photograph can still bleed to the edge of the section. */
  --fm-gutter: max(0px, calc((100% - var(--fm-maxw)) / 2));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(560px, 76vh, 800px);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.15rem, 4vw, 2.5rem);
  background: var(--fm-forest-dark);
  color: var(--fm-ivory);
}

.fma-404__copy,
.fma-404__tail {
  position: relative;
  z-index: 2;
  margin-inline-start: var(--fm-gutter);
  max-width: 40rem;
}
/* The heading has to hold its two written lines as two visual lines, and the
   width it has to do that in is this column, not the viewport. Sizing it in
   container units keeps that true at every width: measured in the live font,
   the longer line is 11em wide, so anything at or under column/11 fits. */
.fma-404__copy { container-type: inline-size; }

.fma-404__eyebrow { margin-bottom: 0.9rem; }

.fma-404__title {
  margin: 0 0 1.1rem;
  color: var(--fm-white);
  font-size: clamp(1.9rem, 8.8cqw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* Each line is its own mask. The padding/margin pair stops the overflow clip
   shaving the descender off "Story." while the line is at rest. */
.fma-404__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.fma-404__line > span { display: block; }

.fma-404__body {
  margin: 0 0 1.7rem;
  max-width: 50ch;
  color: rgba(244, 240, 230, 0.86);
  font-size: 1.02rem;
  line-height: 1.68;
}

/* ---- The recovery action ------------------------------------------------
   A real product search, and it has to look like the primary thing on the page
   rather than a courtesy field. Ivory on the green so it reads as a card slipped
   into the dark, which is also the right note for a page about a card index. */
.fma-404__search { margin: 0 0 1.15rem; }
.fma-404__search-label {
  display: block;
  margin: 0 0 0.75rem;
  color: var(--fm-brass-on-dark);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
/* Narrower than the heading on purpose. The display type is allowed to run wide and
   overlap the photograph, but the things you click must sit squarely on the green. */
.fma-404__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
  max-width: 33rem;
}
.fma-404__search input[type="search"] {
  flex: 1 1 15rem;
  min-width: 0;
  min-height: var(--fm-tap);
  margin: 0;
  padding: 0.7rem 1.05rem;
  border: 1px solid rgba(179, 150, 94, 0.55);
  border-radius: 2px;
  background: var(--fm-ivory);
  color: var(--fm-charcoal);
  font-family: var(--fm-font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--fm-t-link) var(--fm-ease),
              box-shadow var(--fm-t-link) var(--fm-ease);
}
.fma-404__search input[type="search"]::placeholder { color: rgba(37, 39, 36, 0.5); }
.fma-404__search input[type="search"]:hover { border-color: var(--fm-brass); }
.fma-404__search input[type="search"]:focus {
  outline: none;
  border-color: var(--fm-brass);
  box-shadow: 0 0 0 3px rgba(179, 150, 94, 0.35);
}
.fma-404__search button[type="submit"] { flex: 0 0 auto; }

.fma-404__home { margin: 0; }

/* ---- The quieter routes -------------------------------------------------
   Below a hairline, in two calm columns. Deliberately not four more buttons:
   only one thing on this page should look like the thing to do next. */
.fma-404__tail {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.65rem);
  border-top: 1px solid rgba(201, 174, 119, 0.22);
}
.fma-404__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.75rem;
  max-width: 27rem;
}
.fma-404__routes a { text-decoration: none; }
.fma-404__routes .fma-link-cta { color: var(--fm-brass-on-dark); }
.fma-404__routes a:hover > .fma-link-cta,
.fma-404__routes a:focus-visible > .fma-link-cta {
  color: var(--fm-white);
  border-color: var(--fm-white);
}
.fma-404__phone {
  margin: 1.6rem 0 0;
  color: rgba(244, 240, 230, 0.62);
  font-size: 0.9rem;
}
.fma-404__phone a {
  color: var(--fm-brass-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fma-404__phone a:hover, .fma-404__phone a:focus-visible { color: var(--fm-white); }

/* ---- The photograph -----------------------------------------------------
   Pinned to the right of the stage and faded into the green on its left edge,
   plus a little top and bottom so it meets the header and the footer without a
   seam. The fade sits on ::before; ::after is the light finding the drawer. */
.fma-404__visual {
  position: absolute;
  inset: 0 0 0 43%;
  z-index: 0;
  margin: 0;
}
.fma-404__visual picture { display: block; height: 100%; }
.fma-404__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.fma-404__visual::before,
.fma-404__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fma-404__visual::before {
  background:
    linear-gradient(90deg,
      var(--fm-forest-dark) 0%,
      var(--fm-forest-dark) 9%,
      rgba(16, 42, 32, 0.88) 20%,
      rgba(16, 42, 32, 0.44) 40%,
      rgba(16, 42, 32, 0.18) 66%,
      rgba(16, 42, 32, 0.38) 100%),
    linear-gradient(180deg,
      rgba(16, 42, 32, 0.66) 0%,
      rgba(16, 42, 32, 0) 22%,
      rgba(16, 42, 32, 0) 80%,
      rgba(16, 42, 32, 0.30) 87%,
      rgba(16, 42, 32, 0.72) 94%,
      rgb(16, 42, 32) 100%);
}
/* Centred on the open drawer, which the desktop crop puts at 60.5%/64.5%. */
.fma-404__visual::after {
  background: radial-gradient(34% 30% at 60.5% 64.5%,
    rgba(255, 234, 196, 0.15), rgba(255, 234, 196, 0) 72%);
}

/* ---- Motion -------------------------------------------------------------
   Same durations and the same single curve as everywhere else. The heading
   lines rise out of their masks, everything under them settles in sequence,
   and the photograph resolves slowly because it is the heaviest thing here.
   The light on the drawer comes up last, once the page has stopped moving. */
.fma-motion-ready .fma-404__line > span {
  animation: fma-404-line var(--fm-t-hero) var(--fm-ease) both;
}
.fma-motion-ready .fma-404__line:nth-child(2) > span { animation-delay: 110ms; }
@keyframes fma-404-line {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

.fma-motion-ready .fma-404__eyebrow,
.fma-motion-ready .fma-404__body,
.fma-motion-ready .fma-404__search,
.fma-motion-ready .fma-404__home,
.fma-motion-ready .fma-404__tail {
  animation: fma-settle var(--fm-t-hero) var(--fm-ease) both;
}
.fma-motion-ready .fma-404__eyebrow { animation-duration: var(--fm-t-reveal); }
.fma-motion-ready .fma-404__body    { animation-delay: 250ms; }
.fma-motion-ready .fma-404__search  { animation-delay: 330ms; }
.fma-motion-ready .fma-404__home    { animation-delay: 400ms; }
.fma-motion-ready .fma-404__tail    { animation-delay: 480ms; }

.fma-motion-ready .fma-404__visual img {
  animation: fma-404-image 1000ms var(--fm-ease) 60ms both;
}
@keyframes fma-404-image {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}
.fma-motion-ready .fma-404__visual::after {
  animation: fma-404-lamp 1400ms var(--fm-ease) 780ms both;
}
@keyframes fma-404-lamp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fail-safe, set by motion.js five seconds after the page becomes visible. Every element
   above starts from opacity 0, so if an animation never runs the page loses its own
   headline. Dropping the animations returns each element to its base style, which is the
   finished state. Applies to the hero for the same reason. */
.fma-motion-settled .fma-404__line > span,
.fma-motion-settled .fma-404__eyebrow,
.fma-motion-settled .fma-404__body,
.fma-motion-settled .fma-404__search,
.fma-motion-settled .fma-404__home,
.fma-motion-settled .fma-404__tail,
.fma-motion-settled .fma-404__visual img,
.fma-motion-settled .fma-404__visual::after,
.fma-motion-settled .fma-hero__panel > * {
  animation: none !important;
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .fma-404__visual { inset: 0 0 0 48%; }
  .fma-404__copy, .fma-404__tail { max-width: 31rem; }
  /* Same rule as on desktop: the controls stay clear of the photograph even though
     the heading is allowed to run into it. */
  .fma-404__search-row { max-width: 29rem; }
  .fma-404__routes { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
}

/* ---- Phone --------------------------------------------------------------
   The photograph rejoins the flow in DOM order, full bleed, between the
   actions and the routes. Not the desktop composition squeezed. */
@media (max-width: 900px) {
  .fma-404__stage {
    display: block;
    min-height: 0;
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }
  .fma-404__copy, .fma-404__tail { max-width: 34rem; }
  .fma-404__visual {
    position: relative;
    inset: auto;
    /* 84vw is the mobile crop's own aspect ratio, so at phone widths the whole
       photograph shows and nothing is cropped away from the open drawer. */
    height: clamp(320px, 84vw, 430px);
    margin: clamp(2rem, 6vw, 2.6rem) calc(-1 * clamp(1.15rem, 4vw, 2.5rem));
  }
  .fma-404__visual::before {
    background:
      linear-gradient(180deg,
        rgb(16, 42, 32) 0%,
        rgba(16, 42, 32, 0) 15%,
        rgba(16, 42, 32, 0) 85%,
        rgb(16, 42, 32) 100%);
  }
  /* The mobile crop sits the drawer nearer the middle of its frame. */
  .fma-404__visual::after {
    background: radial-gradient(40% 38% at 56% 57%,
      rgba(255, 234, 196, 0.15), rgba(255, 234, 196, 0) 72%);
  }
  .fma-404__tail {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
  .fma-404__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
}

@media (max-width: 460px) {
  .fma-404__search-row { flex-direction: column; align-items: stretch; }
  /* flex-basis switches axis with the container. Left as `flex: 1 1 15rem` the field
     inherited a 240px HEIGHT here, which made the search box a tall empty panel. */
  .fma-404__search input[type="search"] { flex: 0 0 auto; }
  .fma-404__search button[type="submit"] { width: 100%; }
  .fma-404__home { display: flex; width: 100%; }
  .fma-404__routes { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
}

/* -------------------------------------------------------------------------
   Delivery & Collection component (delivery sprint)
   Additive only. Uses the established tokens, the brass rule motif under
   section headings, and the same card conventions as the rest of the page.
   ---------------------------------------------------------------------- */

.fma-delivery-block {
  margin: 1.75rem 0;
  padding: 1.25rem 1.35rem;
  background: var(--fm-surface);
  border: 1px solid rgba(37, 39, 36, 0.12);
  border-radius: 8px;
}
.fma-delivery-block h2 {
  font-family: var(--fm-font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--fm-heading);
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  position: relative;
}
.fma-delivery-block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--fm-brass);
}
.fma-delivery-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fma-delivery-block__list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fm-text);
}
.fma-delivery-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fm-brass);
}
.fma-delivery-block__more {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
}

.fma-delivery-estimate {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(37, 39, 36, 0.12);
}
.fma-delivery-estimate label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fm-brass-text);
  margin-bottom: 0.5rem;
}
.fma-delivery-estimate__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.fma-delivery-estimate input[type="text"] {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(37, 39, 36, 0.28);
  border-radius: 4px;
  font: inherit;
  background: var(--fm-white);
  color: var(--fm-text);
}
.fma-delivery-estimate input[type="text"]:focus-visible,
.fma-delivery-estimate button:focus-visible {
  outline: 2px solid var(--fm-brass);
  outline-offset: 2px;
}
.fma-delivery-estimate__result:empty {
  display: none;
}
.fma-delivery-estimate__result {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fm-text);
}
.fma-delivery-estimate__note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: rgba(37, 39, 36, 0.7);
}

@media (max-width: 767px) {
  .fma-delivery-block {
    padding: 1.1rem;
  }
  .fma-delivery-estimate__row {
    flex-direction: column;
  }
  .fma-delivery-estimate button {
    align-self: flex-start;
  }
}