/* =========================================================================
   Forest Mill Antiques — MOBILE ART DIRECTION
   -------------------------------------------------------------------------
   The desktop design is approved and LOCKED. Nothing in this file may reach
   it, so the whole sheet is protected twice over:

     1. it is enqueued with media="(max-width: 767px)", and
     2. every rule below also sits inside @media (max-width: 767px).

   Either guard alone would be enough; both are here because a CSS combiner
   can drop a media attribute, and a stray brace can escape a media block.
   768px is deliberately below the site's tablet/desktop switch (1024px), so
   this layer only ever governs phones.

   The intent is not a narrower desktop. It is a separate composition: an
   antiques catalogue set for a phone, using the same forest green, warm
   cream, restrained brass and display serif.

   Six reusable compositions run through it:
     A. monumental serif headline
     B. portrait image with editorial caption
     C. full-bleed atmospheric image
     D. asymmetric collection grid (feature / pair / wide)
     E. quiet text-led passage
     F. overlapping image and text
   ========================================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------- SCALE */
  :root {
    /* One gutter value governs every inset and every full-bleed pull-out, so
       an image that breaks the margin lands exactly on the screen edge. */
    --fmm-gut: clamp(1.15rem, 5.5vw, 1.6rem);

    /* Display scale. The jump between the eyebrow and the headline is the
       point: hierarchy on a small screen has to come from contrast, not from
       four sizes a few pixels apart. */
    --fmm-xl: clamp(2.75rem, 13vw, 3.9rem);   /* hero headline          */
    --fmm-lg: clamp(2.05rem, 9.2vw, 2.85rem); /* major section headline */
    --fmm-md: clamp(1.5rem, 6.1vw, 1.9rem);   /* secondary headline     */
    --fmm-sm: clamp(1.12rem, 4.5vw, 1.35rem); /* card title             */

    --fmm-lead: 1.5;
  }

  /* A pulled-out image must never open a horizontal scrollbar. Body only:
     `overflow` on the root element would disable position:sticky site-wide. */
  body { overflow-x: clip; }

  /* ======================================================================
     HEADER
     The live header is the Header Footer Elementor template (post 164): a
     flex container holding the logo widget, the HFE nav widget and a
     shortcode widget with the utility icons. Elementor sets
     --flex-wrap-mobile: wrap on it, so on a phone those three widgets each
     took a row of their own and the menu control ended up floating in the
     middle of a tall green field.

     Held on one line instead, weighted: crest, then utilities and the menu
     control read as one group behind a hairline. Elementor writes its
     per-widget CSS inline in the header itself, so it lands after this
     sheet and these overrides have to carry !important.
     ====================================================================== */
  .fma-header-el.e-con {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0.45rem var(--fmm-gut) !important;
    position: relative;
    border-bottom: 1px solid rgba(179, 150, 94, 0.3);
  }
  .fma-header-el__logo {
    order: 1;
    flex: 0 0 auto !important;
    margin-right: auto !important;
    width: auto !important;
  }
  .fma-header-el__logo img { height: 52px !important; width: auto !important; }
  .fma-header-el__logo .hfe-site-logo-img { width: auto !important; }

  .fma-header-el__utility {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    /* static, so the search drawer below can position against the header */
    position: static !important;
  }
  .fma-header-el__utility > .elementor-widget-container,
  .fma-header-el__utility .elementor-shortcode { position: static !important; }
  .fma-header-el .fma-header-utility { gap: 0; margin-inline-start: 0; }
  .fma-header-el .fma-header-utility__btn { width: 44px; height: 44px; }
  /* A tap leaves :hover latched on a touch screen, which left a dark disc sitting
     under whichever icon was pressed last. Reserve the tint for devices that can
     really hover, and let the keyboard focus ring do the rest. */
  .fma-header-el .fma-header-utility__btn:hover { background: transparent; }
  .fma-header-el .fma-header-utility__btn:active { background: rgba(255, 255, 255, 0.12); }
  @media (hover: hover) {
    .fma-header-el .fma-header-utility__btn:hover { background: rgba(255, 255, 255, 0.1); }
  }
  .fma-header-el .fma-header-utility__btn svg { width: 19px; height: 19px; }

  .fma-header-el__nav {
    order: 3;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0.5rem;
    padding-left: 0.6rem;
    /* A hairline that stops short of the full height, so it reads as a rule
       between two jobs rather than a border on a box. */
    border-left: 1px solid transparent;
    border-image: linear-gradient(
      transparent 24%,
      rgba(179, 150, 94, 0.5) 24%,
      rgba(179, 150, 94, 0.5) 76%,
      transparent 76%) 1;
  }
  .fma-header-el .hfe-nav-menu__toggle {
    margin: 0 !important;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .fma-header-el .hfe-nav-menu-icon { display: flex; }
  .fma-header-el .hfe-nav-menu-icon svg {
    width: 20px; height: 20px;
    fill: var(--fm-ivory);
  }

  /* The search opens as a full-width drawer under the header rather than a
     squeezed field inside the icon group. */
  .fma-header-el .fma-header-search {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0;
    padding: 0.8rem var(--fmm-gut) 0.95rem;
    gap: 0.45rem;
    background: var(--fm-forest-dark);
    border-bottom: 1px solid rgba(179, 150, 94, 0.32);
    box-shadow: 0 12px 24px rgba(16, 42, 32, 0.28);
    z-index: 40;
  }
  .fma-header-el .fma-header-search input[type="search"] {
    border-color: rgba(244, 240, 230, 0.28);
    background: rgba(255, 255, 255, 0.07);
    color: var(--fm-ivory);
  }
  .fma-header-el .fma-header-search input[type="search"]::placeholder {
    color: rgba(244, 240, 230, 0.55);
  }

  /* The open menu panel is handled in style.css under @media (max-width: 1024px),
     because HFE shows the hamburger from 1024px down and the panel was opening
     white and off the left edge at tablet widths too. Only the phone's own type
     sizes remain here. */
  .fma-header-el nav.hfe-dropdown a.hfe-menu-item,
  .fma-header-el nav.hfe-dropdown-expandible a.hfe-menu-item {
    font-size: 1.3rem !important;
  }
  .fma-header-el .hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 1.25rem !important;
  }
  .fma-header-el .fma-mega__label { font-size: 0.72rem !important; }
  /* Below about 420px two columns leave no room for the count beside the
     department, so it wraps under it. One full-width row each instead. */
  @media (max-width: 420px) {
    .fma-header-el .hfe-nav-menu > li.fma-mega-parent > ul.sub-menu {
      grid-template-columns: 1fr !important;
    }
    .fma-header-el .fma-mega-item:nth-child(2) { border-top: 1px solid rgba(244, 240, 230, 0.09) !important; }
  }

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  .fma-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.17em;
    margin-bottom: 0.75rem;
  }
  .woocommerce .woocommerce-breadcrumb { font-size: 0.68rem; }

  /* Headline scale, applied by role rather than uniformly, so that the page
     does not read as one size repeated down the screen. */
  .fma-band .elementor-heading-title,
  .fma-sec-head .elementor-heading-title {
    font-size: var(--fmm-md);
    line-height: 1.08;
  }
  .fma-band--flush .fma-split__text .elementor-heading-title,
  .fma-story__text .elementor-heading-title,
  .fma-twoup > .e-con .elementor-heading-title {
    font-size: var(--fmm-lg);
    line-height: 1.02;
    letter-spacing: -0.018em;
    max-width: 13ch;
  }
  /* Statement bands carry their own measure and an authored line break. */
  .fma-statement__title .elementor-heading-title {
    font-size: var(--fmm-lg);
    line-height: 1.02;
    letter-spacing: -0.018em;
  }
  .fma-statement.e-con { padding-block: clamp(3.5rem, 13vw, 5rem) !important; }
  .fma-statement__lead { font-size: 1rem; max-width: 38ch; }
  .fma-sec-head .elementor-heading-title {
    font-size: var(--fmm-lg);
    line-height: 1.02;
    letter-spacing: -0.018em;
  }
  .fma-lede { font-size: 1rem; line-height: var(--fmm-lead); max-width: 38ch; }
  .fma-band p { line-height: var(--fmm-lead); }

  /* ---- Section numbering (homepage only) --------------------------------
     Brass numerals against the section openers. The eyebrow above three of
     the four is deliberately empty in the page data, so the numeral stands
     on its own there — which is the effect wanted. */
  body.home { counter-reset: fmm-sec; }
  body.home .fma-sec-head { counter-increment: fmm-sec; }
  body.home .fma-sec-head__l .fma-eyebrow::before {
    content: counter(fmm-sec, decimal-leading-zero);
    display: block;
    font-family: var(--fm-font-display);
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0.5rem;
    opacity: 0.9;
  }

  /* ======================================================================
     BANDS AND SECTION TRANSITIONS
     Alternating weights rather than one padding everywhere, and a brass
     hairline wherever two bands of the same ground meet.
     ====================================================================== */
  .fma-band.e-con {
    padding: clamp(3.25rem, 11vw, 4.25rem) var(--fmm-gut) !important;
  }
  .fma-band--flush.e-con { padding: 0 !important; }
  .fma-band--tight.e-con { padding-block: clamp(2.25rem, 8vw, 3rem) !important; }

  /* A dark band opening under a light one gets a brass rule at the join. */
  .fma-band--dark.e-con,
  .fma-band--darker.e-con { border-top: 1px solid rgba(179, 150, 94, 0.3); }

  /* Two light bands running together are separated by a hairline instead of
     more air, which keeps the scroll moving. */
  .fma-band--cream + .fma-band--paper,
  .fma-band--paper + .fma-band--cream,
  .fma-band--cream + .fma-band--cream,
  .fma-band--paper + .fma-band--paper { border-top: 1px solid rgba(37, 39, 36, 0.1); }

  .fma-sec-head.e-con {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0 0 1.6rem;
  }
  .fma-sec-head__r { padding-bottom: 0; }

  /* ======================================================================
     BUTTONS AND CALLS TO ACTION
     One brass bar carries the commercial action. Its companion becomes a
     ruled editorial link, so a section never closes on two stacked boxes.
     ====================================================================== */
  .fma-btn.elementor-widget-button .elementor-button {
    font-size: 0.73rem;
    letter-spacing: 0.15em;
    padding: 1em 1.6em;
    min-height: 50px;
  }
  .fma-hero__ctas.e-con,
  .fma-contact-bar__actions.e-con {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
  }
  .fma-hero__ctas > .fma-btn--primary,
  .fma-contact-bar__actions > .fma-btn--primary { align-self: stretch; width: 100%; }
  .fma-hero__ctas > .fma-btn--primary .elementor-button,
  .fma-contact-bar__actions > .fma-btn--primary .elementor-button { width: 100%; }

  /* The secondary action: a brass rule and a caret, not a second rectangle. */
  .fma-hero__ctas > .fma-btn--onhero,
  .fma-contact-bar__actions > .fma-btn--onhero { align-self: flex-start; }
  .fma-hero__ctas > .fma-btn--onhero .elementor-button,
  .fma-contact-bar__actions > .fma-btn--onhero .elementor-button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 174, 119, 0.55);
    border-radius: 0;
    color: var(--fm-brass-on-dark);
    padding: 0.9em 0 0.55em;
    min-height: 44px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }
  .fma-hero__ctas > .fma-btn--onhero .elementor-button::after,
  .fma-contact-bar__actions > .fma-btn--onhero .elementor-button::after {
    content: "\2192";
    margin-left: 0.6em;
    font-size: 1.05em;
    letter-spacing: 0;
  }

  /* The same pairing where the buttons are plain theme markup rather than an
     Elementor button widget (Journal index, articles). */
  .fma-contact-bar__actions .fma-btn-plain { min-height: 50px; font-size: 0.73rem; letter-spacing: 0.15em; }
  .fma-contact-bar__actions .fma-btn-plain--primary { width: 100%; }
  .fma-contact-bar__actions .fma-btn-plain--onhero {
    align-self: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 174, 119, 0.55);
    border-radius: 0;
    color: var(--fm-brass-on-dark);
    padding: 0.9em 0 0.55em;
    min-height: 44px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }
  .fma-contact-bar__actions .fma-btn-plain--onhero::after {
    content: "\2192";
    margin-left: 0.6em;
    font-size: 1.05em;
    letter-spacing: 0;
  }
  .fma-contact-bar__actions .fma-btn-plain--onhero:hover {
    background: transparent;
    color: var(--fm-white);
    border-color: var(--fm-white);
  }

  /* ======================================================================
     A. HERO — homepage
     The photograph opens the page full bleed and dissolves into the green;
     the headline is allowed to sit across that join. Composition C over F.
     ====================================================================== */
  .fma-hero.e-con {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .fma-hero > .elementor-widget-shortcode {
    order: 0;
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: clamp(360px, 105vw, 500px);
  }
  .fma-hero .fma-hero__image { position: absolute; inset: 0; }
  /* Mobile crop: hold the middle of the frame rather than the centre of a
     landscape plate, so the interior still reads at this aspect. */
  .fma-hero .fma-hero__image img {
    height: 100%; width: 100%;
    object-fit: cover;
    object-position: 58% 45%;
  }
  .fma-hero .fma-hero__image::after {
    background: linear-gradient(
      180deg,
      rgba(16, 42, 32, 0.34) 0%,
      rgba(16, 42, 32, 0.05) 38%,
      rgba(16, 42, 32, 0.30) 68%,
      rgba(16, 42, 32, 0.88) 90%,
      var(--fm-forest-dark) 100%
    );
  }
  .fma-hero__panel.e-con {
    order: 1;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin-top: -4.5rem;
    padding: 0 var(--fmm-gut) clamp(2.5rem, 9vw, 3.25rem) !important;
    gap: 0;
  }
  .fma-hero__title .elementor-heading-title {
    font-size: var(--fmm-xl) !important;
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0 0 0.9rem;
    text-wrap: pretty;
    max-width: 9ch;           /* forces the deliberate two-to-three line break */
  }
  .fma-hero__lead {
    font-size: 1rem;
    line-height: var(--fmm-lead);
    max-width: 34ch;
    margin-bottom: 1.5rem;
  }
  .fma-hero__search {
    max-width: none;
    margin-bottom: 1.35rem;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  }
  .fma-hero__search input[type="search"] { padding-left: 1.15em; font-size: 0.92rem; }
  .fma-hero__search .fma-btn { padding-inline: 1.35em; }
  .fma-hero__ctas.e-con { margin-bottom: 1.75rem; }

  /* The address and hours become a small ruled ledger rather than two runs
     of text under an icon. */
  .fma-hero__meta {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }
  .fma-hero__meta li {
    padding: 0.85rem 0;
    border-top: 1px solid rgba(244, 240, 230, 0.18);
    font-size: 0.8rem;
  }
  .fma-hero__meta li:last-child { border-bottom: 1px solid rgba(244, 240, 230, 0.18); }

  /* ---- Inner-page heroes, varied by page so the site does not open the
     same way seven times over. ------------------------------------------- */
  .fma-hero--page.e-con { min-height: 0; }
  .fma-hero--page > .elementor-widget-shortcode {
    order: 2;
    height: clamp(240px, 58vw, 330px);
  }
  .fma-hero--page .fma-hero__panel.e-con {
    order: 1;
    margin-top: 0;
    padding: clamp(2.5rem, 9vw, 3.5rem) var(--fmm-gut) clamp(2.25rem, 8vw, 3rem) !important;
  }
  .fma-hero--page .fma-hero__title .elementor-heading-title {
    font-size: var(--fmm-lg) !important;
    max-width: 12ch;
    line-height: 1;
  }
  .fma-hero--page .fma-hero__image::after {
    background: linear-gradient(
      180deg,
      var(--fm-forest-dark) 0%,
      rgba(16, 42, 32, 0.38) 14%,
      rgba(16, 42, 32, 0.06) 52%,
      rgba(16, 42, 32, 0.26) 100%);
  }
  /* The panel closes tighter above the photograph than the homepage hero does,
     which otherwise left a stretch of empty green between the two. */
  .fma-hero--page .fma-hero__ctas.e-con { margin-bottom: 0.75rem; }

  /* Visit and Dealers open cinematically, like the homepage: photograph
     first, headline across the fade. */
  body.fma-page-visit .fma-hero--page > .elementor-widget-shortcode,
  body.fma-page-dealers .fma-hero--page > .elementor-widget-shortcode {
    order: 0;
    height: clamp(300px, 64vw, 420px);
  }
  body.fma-page-visit .fma-hero--page .fma-hero__image::after,
  body.fma-page-dealers .fma-hero--page .fma-hero__image::after {
    background: linear-gradient(180deg, rgba(16, 42, 32, 0.3) 0%, rgba(16, 42, 32, 0.05) 38%, rgba(16, 42, 32, 0.66) 78%, var(--fm-forest-dark) 100%);
  }
  body.fma-page-visit .fma-hero--page .fma-hero__panel.e-con,
  body.fma-page-dealers .fma-hero--page .fma-hero__panel.e-con {
    margin-top: -2.75rem;
    padding-top: 0 !important;
  }

  /* About is text-led and monumental: the headline carries the page and the
     photograph follows as a quiet full-bleed plate. */
  body.fma-page-about .fma-hero--page .fma-hero__title .elementor-heading-title {
    font-size: var(--fmm-xl) !important;
    max-width: 10ch;
    line-height: 0.96;
  }
  /* A framed portrait plate, in the brass rule the design language uses for
     small images. Its own composition, and it stops the hero photograph
     butting straight against the photograph of the band below. */
  body.fma-page-about .fma-hero--page > .elementor-widget-shortcode {
    height: auto;
    /* Elementor gives widgets width:100%, so side margins alone pushed the frame
       off the right edge instead of insetting it. */
    width: auto !important;
    max-width: none;
    box-sizing: border-box;
    margin: 0 var(--fmm-gut) clamp(2rem, 7vw, 2.75rem);
    padding: 4px;
    border: 1px solid rgba(179, 150, 94, 0.45);
    background: rgba(0, 0, 0, 0.18);
  }
  /* Inner-page heroes render [fma_image], which outputs .fma-bleed-image with
     its contents absolutely positioned — fine when the widget has a definite
     height, but this plate is sized by its photograph, so the picture has to be
     put back in the flow or the frame collapses to its own padding. */
  body.fma-page-about .fma-hero--page .elementor-shortcode,
  body.fma-page-about .fma-hero--page .elementor-widget-container { height: auto !important; }
  body.fma-page-about .fma-hero--page .fma-bleed-image,
  body.fma-page-about .fma-hero--page .fma-hero__image {
    position: relative;
    inset: auto;
    height: auto;
  }
  body.fma-page-about .fma-hero--page .fma-bleed-image img,
  body.fma-page-about .fma-hero--page .fma-hero__image img {
    position: relative;
    height: auto;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
  }
  body.fma-page-about .fma-hero--page .fma-hero__image::after { background: none; }

  /* Sell To Us, Become A Dealer and Contact stay quiet and text-led: no
     overlap, a brass rule instead, so they read as working pages. */
  body.fma-page-sell-to-us .fma-hero--page > .elementor-widget-shortcode,
  body.fma-page-become-a-dealer .fma-hero--page > .elementor-widget-shortcode,
  body.fma-page-contact .fma-hero--page > .elementor-widget-shortcode {
    height: clamp(200px, 48vw, 270px);
  }

  /* Static (theme-template) heroes: Journal index and articles. */
  .fma-hero--static.e-con { flex-direction: column; min-height: 0; }
  .fma-hero--static .fma-hero__image {
    position: relative;
    inset: auto;
    order: 2;
    height: clamp(230px, 54vw, 320px);
  }
  .fma-hero--static .fma-hero__image::after {
    background: linear-gradient(
      180deg,
      var(--fm-forest-dark) 0%,
      rgba(16, 42, 32, 0.34) 16%,
      rgba(16, 42, 32, 0.05) 55%,
      rgba(16, 42, 32, 0.2) 100%);
  }
  .fma-hero--static .fma-hero__panel {
    order: 1;
    width: 100%;
    max-width: none;
    padding: clamp(2.5rem, 9vw, 3.5rem) var(--fmm-gut) clamp(2rem, 7vw, 2.75rem);
  }
  .fma-hero--static .fma-hero__title,
  .fma-hero--static .fma-hero__title.elementor-heading-title {
    font-size: var(--fmm-lg);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* ======================================================================
     STAT ROW — a ruled ledger, two across, not four stacked blocks
     ====================================================================== */
  .fma-stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--fm-rule);
  }
  .fma-stat {
    display: block;
    padding: 1.05rem 0.9rem 1.15rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--fm-rule);
  }
  .fma-stat:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--fm-rule); padding-right: 0; }
  .fma-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .fma-stat__icon { display: block; width: 20px; height: 20px; margin: 0 0 0.5rem; }
  .fma-stat__stat { font-size: 1.5rem; display: block; }
  .fma-stat__label {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--fm-brass-text);
    display: block;
    margin-top: 0.15rem;
  }
  .fma-stat__sub { font-size: 0.76rem; margin-top: 0.4rem; }

  /* ======================================================================
     D. DEPARTMENTS — feature, pair, pair, wide, pair, wide
     Nine departments, six different sizes. Overrides the desktop refinement
     layer, which squares every tile below 760px.
     ====================================================================== */
  .fma-dept-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem 0.55rem;
  }
  .fma-dept-tile { grid-column: span 1 !important; }
  .fma-dept-tile:nth-child(1),
  .fma-dept-tile:nth-child(6),
  .fma-dept-tile:nth-child(9) { grid-column: span 2 !important; }
  .fma-dept-tile .fma-dept-tile__frame img { aspect-ratio: 4/5 !important; }
  .fma-dept-tile:nth-child(1) .fma-dept-tile__frame img { aspect-ratio: 4/3 !important; }
  .fma-dept-tile:nth-child(6) .fma-dept-tile__frame img { aspect-ratio: 16/9 !important; }
  .fma-dept-tile:nth-child(9) .fma-dept-tile__frame img { aspect-ratio: 21/9 !important; }

  /* F. The name of a full-width tile crosses the frame rather than sitting
     obediently beneath it. */
  .fma-dept-tile:nth-child(1),
  .fma-dept-tile:nth-child(6),
  .fma-dept-tile:nth-child(9) { position: relative; text-align: left; }
  .fma-dept-tile:nth-child(1) .fma-dept-tile__name,
  .fma-dept-tile:nth-child(6) .fma-dept-tile__name,
  .fma-dept-tile:nth-child(9) .fma-dept-tile__name {
    position: absolute;
    left: 0.85rem;
    bottom: 0.55rem;
    margin: 0;
    padding: 0.4em 0.75em;
    background: var(--fm-forest-dark);
    color: var(--fm-brass-on-dark);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }
  .fma-dept-tile__name { font-size: 0.62rem; letter-spacing: 0.13em; margin-top: 0.5rem; }
  .fma-dept-tile__frame { padding: 3px; }

  /* ======================================================================
     D. PRODUCT GRIDS — a catalogue rhythm, not an endless pair of tiles
     Feature, pair, wide, pair, pair, wide … applied to Just Arrived, the
     shop, category archives, search results and related products.
     ====================================================================== */
  .fma-stock.e-con .woocommerce ul.products,
  .woocommerce ul.products,
  ul.products,
  .fma-stock .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.6rem 0.85rem !important;
  }
  .woocommerce ul.products li.product img,
  ul.products li.product img {
    aspect-ratio: 4/5 !important;
    object-fit: cover;
  }
  /* WooCommerce adds a clearfix ::before/::after to ul.products. Harmless in a float
     layout, but in a grid they become items and would occupy the cell the feature
     piece is meant to fill, pushing every card one place along. */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after,
  ul.products::before,
  ul.products::after { content: none !important; display: none !important; }

  /* The first piece in any grid is given the full width and a landscape
     plate: an opening statement, then the pairs. */
  .woocommerce ul.products li.product:first-child,
  ul.products li.product:first-child { grid-column: span 2; }
  .woocommerce ul.products li.product:first-child img,
  ul.products li.product:first-child img { aspect-ratio: 5/4 !important; }
  .woocommerce ul.products li.product:first-child .woocommerce-loop-product__title,
  ul.products li.product:first-child .woocommerce-loop-product__title {
    font-size: 1.42rem !important;
    line-height: 1.15;
  }

  /* And every seventh after that, so a long archive keeps changing pace. */
  .woocommerce ul.products li.product:nth-child(7n + 4),
  ul.products li.product:nth-child(7n + 4) { grid-column: span 2; }
  .woocommerce ul.products li.product:nth-child(7n + 4) img,
  ul.products li.product:nth-child(7n + 4) img { aspect-ratio: 3/2 !important; }

  .woocommerce ul.products li.product,
  ul.products li.product {
    display: flex;
    flex-direction: column;
  }
  .woocommerce ul.products li.product a.button,
  ul.products li.product a.button { margin-top: auto; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem !important;
    line-height: 1.22;
    padding-top: 0.7rem !important;
  }
  .woocommerce ul.products li.product .price,
  ul.products li.product .price { font-size: 0.95rem; margin: 0.15rem 0 0.5rem; }

  /* A fine ruled CTA sized to its label, not a full-width grey rectangle.
     Still a 44px target and still obviously the action. */
  .woocommerce ul.products li.product a.button,
  ul.products li.product a.button,
  .fma-stock .woocommerce ul.products li.product .button.fma-btn {
    width: auto !important;
    display: inline-flex;
    min-height: 44px;
    padding: 0.7em 1.15em;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    align-self: flex-start;
    border-color: var(--fm-rule);
    color: var(--fm-brass-text);
    background: transparent;
  }

  /* ======================================================================
     B / F. DEALERS BAND — portrait plate, text panel lifted across it
     ====================================================================== */
  .fma-split.e-con { flex-direction: column; min-height: 0; }
  .fma-split__media.e-con {
    min-height: 0;
    height: clamp(310px, 78vw, 420px);
    width: 100%;
  }
  .fma-split__text.e-con {
    width: 100%;
    position: relative;
    z-index: 2;
    margin-top: -2.5rem !important;
    padding: 1.75rem var(--fmm-gut) clamp(2.75rem, 10vw, 3.5rem) !important;
    background: linear-gradient(180deg, transparent 0, var(--fm-band-bg, var(--fm-forest)) 2.5rem);
  }
  .fma-split__media .fma-bleed-image img { object-position: center 40%; }

  .fma-dealer-list, .fma-specialism-list { grid-template-columns: 1fr; }
  .fma-dealer-list { margin-block: 1.5rem; }

  /* ======================================================================
     D. EXPLORE MOSAIC — aspect-led on mobile, so nothing is a fixed slab
     ====================================================================== */
  .fma-explore-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0.55rem;
  }
  /* The photograph is put back in the flow and given the aspect ratio, rather
     than the cell carrying it. A cell whose only children are absolutely
     positioned has no intrinsic height, and an aspect-ratio on a grid item does
     not feed the grid's own intrinsic height — so the band measured 409px while
     its grid ran to 791px and the following section painted straight over it. */
  .fma-explore-cell { aspect-ratio: auto; }
  .fma-explore-cell img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
  .fma-explore-cell.is-feature { grid-column: span 2 !important; }
  .fma-explore-cell.is-feature img { aspect-ratio: 5/4; }
  .fma-explore-cell.is-wide { grid-column: span 2 !important; }
  .fma-explore-cell.is-wide img { aspect-ratio: 21/9; }
  .fma-explore-cell.is-feature .fma-explore-cell__body strong { font-size: 2.15rem; }
  .fma-explore-cell.is-wide .fma-explore-cell__body strong { font-size: 1.6rem; }
  .fma-explore-cell__body { padding: 0.9rem 1rem; }
  .fma-explore-cell__body strong { font-size: 1.12rem; }
  .fma-explore-cell__body span { font-size: 0.72rem; line-height: 1.35; }

  /* ======================================================================
     C / F. STORY BAND — the mill, full bleed, headline across the join
     ====================================================================== */
  .fma-story.e-con { flex-direction: column; min-height: 0; }
  .fma-story > .elementor-widget-shortcode {
    position: relative;
    inset: auto;
    right: auto;
    width: 100%;
    height: clamp(280px, 66vw, 380px);
  }
  .fma-story .fma-bleed-image::after {
    background: linear-gradient(180deg, rgba(16, 42, 32, 0.28) 0%, rgba(16, 42, 32, 0.06) 40%, rgba(16, 42, 32, 0.7) 80%, var(--fm-forest) 100%);
  }
  .fma-story__text.e-con {
    width: 100%;
    margin-left: 0;
    margin-top: -2.25rem !important;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0, var(--fm-band-bg, var(--fm-forest)) 2.25rem);
    padding: 1.5rem var(--fmm-gut) clamp(2.75rem, 10vw, 3.5rem) !important;
  }

  /* ======================================================================
     TWO-UP — Visit and Sell, weighted differently rather than twinned
     ====================================================================== */
  .fma-twoup.e-con { flex-direction: column; }
  .fma-twoup > .e-con {
    width: 100%;
    padding: clamp(2.5rem, 9vw, 3.25rem) var(--fmm-gut) !important;
  }
  .fma-panel--sell.e-con { padding-block: clamp(2rem, 7vw, 2.75rem) !important; }
  .fma-panel--sell .elementor-heading-title { font-size: var(--fmm-md) !important; max-width: 14ch; }
  .fma-twoup > .e-con .fma-btn .elementor-button { width: 100%; }

  /* ======================================================================
     TRUST STRIP — two across, ruled
     ====================================================================== */
  .fma-trust-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--fm-rule);
  }
  .fma-trust-strip__item {
    display: block;
    padding: 0.95rem 0.85rem 1.05rem 0;
    border-bottom: 1px solid var(--fm-rule);
  }
  .fma-trust-strip__item:nth-child(even) {
    padding-left: 0.85rem;
    padding-right: 0;
    border-left: 1px solid var(--fm-rule);
  }
  .fma-trust-strip__item:nth-last-child(-n+2) { border-bottom: 0; }
  .fma-trust-strip__icon {
    display: block;
    width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 0;
    margin-bottom: 0.5rem;
  }
  .fma-trust-strip__item strong { font-size: 0.8rem; display: block; }
  .fma-trust-strip__item span { font-size: 0.76rem; line-height: 1.45; }

  /* ======================================================================
     F. JOURNAL — one lead story with an overlapping caption, then compact
     ruled rows. Three identical cards became one composition.
     ====================================================================== */
  .fma-journal-grid { grid-template-columns: 1fr; gap: 0; }

  .fma-journal-grid > .fma-journal-card:first-child { display: block; margin-bottom: 2.25rem; }
  .fma-journal-card:first-child .fma-journal-card__img {
    margin-inline: calc(-1 * var(--fmm-gut));
    border: 0;
  }
  .fma-journal-card:first-child .fma-journal-card__img img { aspect-ratio: 4/5; }
  .fma-journal-card:first-child .fma-journal-card__meta {
    position: relative;
    z-index: 2;
    display: block;
    margin: -3.5rem 2.5rem 0 calc(-1 * var(--fmm-gut));
    padding: 1.15rem 1.15rem 0.15rem var(--fmm-gut);
    background: var(--fm-band-bg, var(--fm-ivory));
  }
  .fma-journal-card:first-child strong {
    position: relative;
    z-index: 2;
    margin: 0 2.5rem 0 calc(-1 * var(--fmm-gut));
    padding: 0 1.15rem 1.1rem var(--fmm-gut);
    background: var(--fm-band-bg, var(--fm-ivory));
    font-size: var(--fmm-md);
    line-height: 1.1;
  }
  .fma-journal-card:first-child .fma-journal-card__excerpt { margin-top: 0.35rem; }

  .fma-journal-grid > .fma-journal-card:not(:first-child) {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.15rem 0;
    border-top: 1px solid var(--fm-rule);
  }
  .fma-journal-card:not(:first-child) .fma-journal-card__img {
    grid-column: 1;
    grid-row: 1 / span 2;
    border: 0;
  }
  .fma-journal-card:not(:first-child) .fma-journal-card__img img { aspect-ratio: 1/1; }
  .fma-journal-card:not(:first-child) .fma-journal-card__meta {
    grid-column: 2; grid-row: 1;
    margin: 0 0 0.3rem;
    font-size: 0.68rem;
  }
  .fma-journal-card:not(:first-child) strong {
    grid-column: 2; grid-row: 2;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
  }
  .fma-journal-card:not(:first-child) strong::after {
    content: "\2192";
    color: var(--fm-brass-text);
    margin-left: 0.45em;
  }
  .fma-journal-card:not(:first-child) .fma-journal-card__excerpt,
  .fma-journal-card:not(:first-child) .fma-link-cta { display: none; }

  /* ======================================================================
     CONTACT BAR
     ====================================================================== */
  .fma-contact-bar.e-con {
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(2.25rem, 8vw, 3rem) var(--fmm-gut) !important;
  }
  .fma-contact-bar .elementor-heading-title { font-size: var(--fmm-md); }

  /* ======================================================================
     INNER-PAGE FURNITURE
     ====================================================================== */

  /* Column sets: ruled rows rather than a column of icon blocks. */
  .fma-colset--4, .fma-colset--5 { grid-template-columns: 1fr; gap: 0; }
  .fma-col {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 0.9rem;
    padding: 1.05rem 0;
    border-left: 0;
    border-top: 1px solid var(--fm-rule);
  }
  .fma-col:first-child { border-top: 0; padding-top: 0; }
  .fma-col__icon { display: block; width: 22px; height: 22px; grid-row: 1 / span 2; margin-top: 0.25rem; }
  .fma-col strong { grid-column: 2; font-size: 1.12rem; }
  .fma-col span { grid-column: 2; font-size: 0.85rem; }

  /* Numbered steps: the numeral is the composition. */
  .fma-steps { grid-template-columns: 1fr; gap: 0; }
  .fma-step {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    column-gap: 1rem;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(179, 150, 94, 0.32);
  }
  .fma-step:first-child { border-top: 0; padding-top: 0; }
  .fma-step__num { grid-row: 1 / span 2; font-size: 2.4rem; margin: 0; line-height: 0.9; }
  .fma-step strong { grid-column: 2; font-size: 1.18rem; }
  .fma-step span { grid-column: 2; font-size: 0.88rem; }

  /* Contact routes: one dominant card, then a quieter ruled pair. */
  .fma-routes { grid-template-columns: 1fr 1fr; gap: 1.25rem 0.85rem; }
  .fma-route { border: 0; background: transparent; }
  .fma-route:hover { transform: none; box-shadow: none; }
  .fma-route:first-child { grid-column: span 2; }
  .fma-route__img img { aspect-ratio: 4/5; border: 1px solid var(--fm-rule-soft); }
  .fma-route:first-child .fma-route__img img { aspect-ratio: 16/9; }
  .fma-route__body { padding: 0.75rem 0 0; gap: 0.3rem; }
  .fma-route:first-child .fma-route__body strong { font-size: var(--fmm-sm); }
  .fma-route__body strong { font-size: 1rem; }
  .fma-route__body > span:not(.fma-link-cta) { font-size: 0.82rem; }
  .fma-route:not(:first-child) .fma-link-cta { display: none; }
  .fma-route:last-child:nth-child(even) { grid-column: span 2; }
  .fma-route:last-child:nth-child(even) .fma-route__img img { aspect-ratio: 16/9; }

  /* Dealer directory: a lead dealer, then pairs. */
  .fma-dealer-dir { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 0.85rem; }
  .fma-dealer-tile:first-child { grid-column: span 2; }
  .fma-dealer-tile__img img { aspect-ratio: 4/5; }
  .fma-dealer-tile:first-child .fma-dealer-tile__img img { aspect-ratio: 16/9; }
  .fma-dealer-tile:first-child .fma-dealer-tile__body strong { font-size: var(--fmm-sm); }
  .fma-dealer-tile__body { padding-top: 0.7rem; gap: 0.25rem; }
  .fma-dealer-tile__body strong { font-size: 1rem; }
  .fma-dealer-tile__spec { font-size: 0.6rem; }
  .fma-dealer-tile__desc { font-size: 0.82rem; }
  .fma-dealer-tile:last-child:nth-child(even) { grid-column: span 2; }
  .fma-dealer-tile:last-child:nth-child(even) .fma-dealer-tile__img img { aspect-ratio: 16/9; }

  /* Contact details and map */
  .fma-contact-row__detail { font-size: 1.02rem; }
  .fma-contact-row__detail a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(110, 90, 46, 0.4);
  }
  .fma-map iframe { height: 260px; }

  /* Forms sit on the band, not in a floating white box. */
  .fma-form-panel { padding: 0; border: 0; background: transparent; }
  .fma-band--dark .fma-form-panel,
  .fma-band--darker .fma-form-panel { background: transparent; }
  .fma-lead-form .button.fma-btn { width: 100%; }

  /* ======================================================================
     SHOP AND ARCHIVES
     ====================================================================== */
  .woocommerce .woocommerce-breadcrumb {
    padding: 1.1rem var(--fmm-gut) 0;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--fm-brass-text);
  }
  .woocommerce .woocommerce-products-header { padding: 0.9rem var(--fmm-gut) 0; }
  .woocommerce .woocommerce-products-header__title {
    font-size: var(--fmm-lg);
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 11ch;
  }
  .woocommerce .woocommerce-products-header .term-description,
  .woocommerce .woocommerce-products-header p { font-size: 0.95rem; margin-top: 0.85rem; }

  .woocommerce.archive ul.products,
  .woocommerce-page ul.products {
    padding-inline: var(--fmm-gut) !important;
    margin-top: 1.6rem !important;
  }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering { padding-inline: var(--fmm-gut); }
  .woocommerce .woocommerce-result-count { margin-top: 1.5rem; font-size: 0.66rem; }
  .woocommerce .woocommerce-ordering select { max-width: none; width: 100%; }
  .woocommerce nav.woocommerce-pagination { padding-inline: var(--fmm-gut); margin-top: 2.5rem; }

  /* ---- Filters as a disclosure ------------------------------------------
     A thousand pixels of checkboxes stood between the visitor and the first
     object. The panel is collapsed behind one control; JS supplies the
     button and the open/closed state (see filters-mobile in motion.js).
     Without JS the panel simply stays open, exactly as it is today. */
  .woocommerce .fma-filters {
    margin: 1.4rem var(--fmm-gut) 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-top: 1px solid var(--fm-rule);
    border-bottom: 1px solid var(--fm-rule);
  }
  .fma-filters__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 54px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--fm-forest);
    font-family: var(--fm-font-display);
    font-size: 1.15rem;
    text-align: left;
    cursor: pointer;
  }
  .fma-filters__toggle-count {
    font-family: var(--fm-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fm-brass-text);
  }
  .fma-filters__toggle::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 1.5px solid var(--fm-brass);
    border-bottom: 1.5px solid var(--fm-brass);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    flex: 0 0 auto;
  }
  .fma-filters__toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translate(-3px, -3px);
  }
  .fma-filters__body[hidden] { display: none; }
  .fma-filters__body { padding-bottom: 1.4rem; }
  .fma-filters .fma-filters__head { display: none; }
  .fma-filters .fma-filters__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .fma-filters .fma-facet__opt { font-size: 0.86rem; }
  .fma-filters .fma-facet__price input { width: 100%; }
  .fma-filters .button,
  .fma-filters button[type="submit"] { width: 100%; }

  /* ======================================================================
     SINGLE PRODUCT — the object first, full bleed
     ====================================================================== */
  .woocommerce div.product {
    grid-template-columns: 1fr;
    padding: 0 var(--fmm-gut) 2.5rem;
  }
  .woocommerce div.product .woocommerce-product-gallery {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
  }
  .woocommerce div.product .woocommerce-product-gallery__image img { border: 0; }
  .woocommerce div.product .flex-control-thumbs { padding-inline: var(--fmm-gut); }
  .woocommerce div.product .flex-control-thumbs img { width: 58px !important; height: 58px; }
  .woocommerce div.product .product_title {
    font-size: var(--fmm-md);
    line-height: 1.06;
    margin-bottom: 0.5rem;
  }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 1.45rem; margin-bottom: 1.1rem; }
  .woocommerce div.product .woocommerce-tabs { margin-top: 2.25rem; }
  .woocommerce div.product .related.products,
  .woocommerce div.product .fma-discover { margin-top: 2.5rem; padding-top: 2.25rem; }
  .fma-keyfacts__row { padding: 0.7rem 0; }
  .fma-keyfacts dt { flex-basis: 42%; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fm-brass-text); }
  .fma-keyfacts dd { font-size: 0.95rem; }

  /* The persistent action bar, finished properly. */
  .fma-mobilebar {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    gap: 0;
    background: transparent;
    border-top: 1px solid rgba(179, 150, 94, 0.5);
    box-shadow: 0 -6px 20px rgba(16, 42, 32, 0.18);
  }
  .fma-mobilebar__btn {
    min-height: 56px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: var(--fm-ivory);
    color: var(--fm-forest);
  }
  .fma-mobilebar__btn--primary { background: var(--fm-brass); color: var(--fm-forest-dark); }
  body.single-product { padding-bottom: 66px; }

  /* ======================================================================
     JOURNAL ARTICLE — a proper reading page
     ====================================================================== */
  .fma-article .fma-band.e-con,
  .fma-journal-page .fma-band.e-con { padding-inline: var(--fmm-gut) !important; }
  .fma-prose { font-size: 1.06rem; line-height: 1.68; max-width: 36ch; }
  .fma-prose h2 { font-size: var(--fmm-md); line-height: 1.1; margin-top: 2.25rem; }
  .fma-prose h3 { font-size: 1.2rem; margin-top: 1.75rem; }
  .fma-prose img {
    margin-inline: calc(-1 * var(--fmm-gut));
    width: calc(100% + 2 * var(--fmm-gut));
    max-width: none;
    border: 0;
  }
  .fma-prose blockquote { font-size: 1.18rem; }

  /* One brass initial opens the article: a single editorial gesture, not a
     decorative system. The opening paragraph only. */
  .fma-article .fma-prose > p:first-child::first-letter {
    float: left;
    font-family: var(--fm-font-display);
    font-size: 3.5rem;
    line-height: 0.8;
    padding: 0.06em 0.13em 0 0;
    color: var(--fm-brass-text);
  }
  .fma-article-nav { padding-top: 1.5rem; border-top: 1px solid var(--fm-rule); }

  /* ======================================================================
     FOOTER
     The live footer is the HFE template (post 165): a brand block and four
     link columns. Collapsed to one column it became an endless run of
     identical links, which is the one place the page stopped being designed.

     Reordered and reweighted instead: the mill's own details come second,
     where a phone visitor actually wants them; the two browsing columns sit
     side by side; the account links close as a quiet utility row.
     ====================================================================== */
  .fma-footer-el.e-con {
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: flex-start !important;
    padding: clamp(2.5rem, 9vw, 3.5rem) var(--fmm-gut) 1.25rem !important;
  }
  .fma-footer-el > .e-con { margin: 0 !important; }

  /* 1. Brand */
  .fma-footer-el__brand {
    order: 1;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-bottom: 1.5rem;
  }
  .fma-footer-el__brand .fma-footer__logo,
  .fma-footer-el__brand .elementor-widget-image { text-align: left !important; }
  .fma-footer-el__brand .fma-footer__logo img,
  .fma-footer-el__brand img {
    width: 118px !important;
    height: auto !important;
    margin-inline: 0 !important;
  }
  .fma-footer-el__brand p { max-width: 34ch; font-size: 0.88rem; }
  .fma-footer-el .fma-footer__social { gap: 0; margin-top: 1.1rem; }
  .fma-footer-el .fma-footer__social a {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(179, 150, 94, 0.35);
    margin-right: -1px;
  }
  .fma-footer-el .fma-footer__social a svg { width: 17px; height: 17px; }

  /* 2. The mill's own details, promoted */
  .fma-footer-el__contact {
    order: 2;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(179, 150, 94, 0.28);
    border-bottom: 1px solid rgba(179, 150, 94, 0.28);
  }
  .fma-footer-el__contact p {
    font-family: var(--fm-font-display);
    font-size: 1.02rem;
    line-height: 1.45;
    color: rgba(244, 240, 230, 0.88);
  }
  .fma-footer-el__contact a {
    font-family: var(--fm-font-display);
    font-size: 1.02rem;
    color: var(--fm-brass-on-dark);
  }
  .fma-footer-el__contact .fma-footer__hours {
    font-family: var(--fm-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 240, 230, 0.55);
  }

  /* 3 + 4. Two browsing columns side by side */
  .fma-footer-el > .fma-footer-el__col:nth-child(2),
  .fma-footer-el > .fma-footer-el__col:nth-child(4) {
    flex: 0 0 50% !important;
    width: 50% !important;
    padding: 1.4rem 0 0.5rem;
  }
  .fma-footer-el > .fma-footer-el__col:nth-child(2) { order: 3; padding-right: 0.75rem; }
  .fma-footer-el > .fma-footer-el__col:nth-child(4) { order: 4; }

  /* 5. Account links close as one quiet wrapped row, not a fifth list */
  .fma-footer-el > .fma-footer-el__col:nth-child(3) {
    order: 5;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 1.1rem 0 0;
    border-top: 1px solid rgba(244, 240, 230, 0.12);
    margin-top: 1.1rem !important;
  }
  .fma-footer-el > .fma-footer-el__col:nth-child(3) ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
  }
  .fma-footer-el > .fma-footer-el__col:nth-child(3) li { margin: 0; }
  .fma-footer-el > .fma-footer-el__col:nth-child(3) a {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 240, 230, 0.6);
  }

  .fma-footer-el h3 { font-size: 0.6rem; letter-spacing: 0.2em; margin-bottom: 0.75rem; }
  .fma-footer-el li { margin-bottom: 0.45rem; }
  .fma-footer-el a { font-size: 0.88rem; }

  .fma-footer-el__bar.e-con {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 1.1rem var(--fmm-gut) 1.5rem !important;
  }
  .fma-footer-el__bar p { font-size: 0.74rem; }
  .fma-footer-el__legal nav { gap: 1.1rem; flex-wrap: wrap; }
  .fma-footer-el__legal a { font-size: 0.74rem; }
  .fma-footer-el__credit-row.e-con { padding-inline: var(--fmm-gut) !important; }

  /* The hand-built footer, still used by any template that does not load the
     Elementor one. */
  .fma-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1rem;
    padding: clamp(2.5rem, 9vw, 3.25rem) var(--fmm-gut) 2rem;
  }
  .fma-footer__grid > *:first-child { grid-column: span 2; }
  .fma-footer__logo { max-width: 132px; }

  /* ======================================================================
     MOTION — the same language, shorter travel. Composition first, and a
     smaller shift because on a phone 14px is a larger share of the screen.
     ====================================================================== */
  .fma-motion-ready .fma-reveal { transform: translateY(9px); }
  .fma-motion-ready .fma-reveal--child { transform: translateY(7px); }
  .fma-motion-ready .fma-reveal.fma-in { transform: none; }

  /* ======================================================================
     SEARCH RESULTS
     Hello Elementor's own archive markup, given the site's voice at phone
     widths: a display heading, then ruled rows with the object first.
     ====================================================================== */
  body.search .site-main { padding-inline: var(--fmm-gut); }
  body.search .page-header { padding: 2rem 0 0.5rem; }
  body.search .page-header .entry-title {
    font-family: var(--fm-font-display);
    font-weight: 500;
    font-size: var(--fmm-md);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--fm-forest);
    margin: 0;
  }
  body.search .page-content > article.post {
    padding: 1.5rem 0;
    border-top: 1px solid var(--fm-rule);
  }
  body.search .page-content > article.post .entry-title {
    font-family: var(--fm-font-display);
    font-weight: 500;
    font-size: var(--fmm-sm);
    line-height: 1.2;
    margin: 0 0 0.6rem;
  }
  body.search .page-content > article.post .entry-title a { text-decoration: none; }
  body.search .page-content > article.post img {
    display: block;
    width: calc(100% + 2 * var(--fmm-gut));
    margin-inline: calc(-1 * var(--fmm-gut));
    max-width: none;
    aspect-ratio: 16/10;
    object-fit: cover;
  }
  body.search .page-content > article.post p {
    font-size: 0.9rem;
    line-height: 1.55;
    opacity: 0.78;
    margin: 0.85rem 0 0;
  }
  body.search .pagination { padding: 2rem 0 3rem; }

  /* ======================================================================
     DEALER PROFILE
     A theme template that predates the band system and carries almost no
     styling of its own. Given proper gutters, scale and rules here so the
     page reads as Forest Mill on a phone.
     ====================================================================== */
  .fma-dealer-profile .fma-container { padding-inline: var(--fmm-gut); }
  .fma-dealer-profile .fma-hero--page {
    position: relative;
    padding: clamp(2.25rem, 8vw, 3rem) var(--fmm-gut);
    background: var(--fm-forest-dark);
  }
  /* The hero photograph reads through behind the name; a scrim keeps the type
     legible without hiding the picture. */
  .fma-dealer-profile .fma-hero--page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(16, 42, 32, 0.94) 0%, rgba(16, 42, 32, 0.86) 46%, rgba(16, 42, 32, 0.55) 100%);
    z-index: 1;
  }
  .fma-dealer-profile .fma-hero--page > * { position: relative; z-index: 2; }
  .fma-dealer-profile__hero { gap: 1rem; }
  .fma-dealer-profile__img { width: 84px; height: 84px; }
  .fma-dealer-profile .fma-hero__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fm-brass-on-dark);
    margin: 0 0 0.5rem;
  }
  .fma-dealer-profile .fma-hero__title {
    font-family: var(--fm-font-display);
    font-weight: 500;
    font-size: var(--fmm-lg);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fm-white);
    margin: 0;
  }
  .fma-dealer-profile .fma-hero__lead { color: rgba(244, 240, 230, 0.8); margin-top: 0.6rem; }
  .fma-dealer-profile .fma-home-section { padding-block: clamp(2.25rem, 8vw, 3rem); }
  .fma-dealer-profile .fma-home-section--alt { background: #FBF9F4; }
  .fma-dealer-profile .fma-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }
  .fma-dealer-profile .fma-section-head h2 {
    font-size: var(--fmm-md);
    line-height: 1.08;
    margin: 0;
  }

  /* ======================================================================
     UTILITY PAGES — cart, checkout, account
     Not redesigned, simply given the same gutter and touch sizing so they
     do not read as a different website on a phone.
     ====================================================================== */
  body.woocommerce-cart .site-main,
  body.woocommerce-checkout .site-main,
  body.woocommerce-account .site-main { padding-inline: var(--fmm-gut); }
  body.woocommerce-cart .entry-title,
  body.woocommerce-checkout .entry-title,
  body.woocommerce-account .entry-title {
    font-family: var(--fm-font-display);
    font-weight: 500;
    font-size: var(--fmm-md);
    line-height: 1.06;
    color: var(--fm-forest);
  }
  .woocommerce table.shop_table { font-size: 0.92rem; }
  .woocommerce .button,
  .woocommerce button.button,
  .woocommerce input.button { min-height: 48px; }

  @media (prefers-reduced-motion: reduce) {
    .fma-filters__toggle::after { transition: none; }
  }
}