/** Shopify CDN: Minification failed

Line 1166:0 Unexpected "}"
Line 1511:51 Expected "}" to go with "{"

**/
/* ============================================
   FF Header + Mega Menu — FULL REPLACEMENT CSS
   Desktop mega unchanged. Mobile drawer rebuilt:
   • Slides in from LEFT (no fade)
   • Root list → full-width sub-pane (slides RIGHT)
   • Background is non-interactable while open
   • Scroll-lock & no “page flick” on open
   ============================================ */

/* ===== Fixed header (desktop + mobile) ===== */
.ff-header{
  position:fixed; top:var(--ff-announce-height, 0px); left:0; right:0;
  z-index:2147483000;
  isolation:isolate;
  background: rgb(var(--color-background, 255 255 255));
  --header-icon-size:30px;
  --ff-mega-time: 0ms;   /* instant open/close */
  --ff-dim-time:  0ms;
}

.ff-header__inner{
  position:relative;
  display:flex; align-items:center; gap:var(--ff-nav-gap);
  height:var(--ff-header-height);
  padding-left:var(--ff-pad-x); padding-right:var(--ff-pad-x);
  margin:0 auto; max-width:var(--page-width);
}
.ff-header__logo,.ff-header__logo a{display:inline-flex;align-items:center}
/* was global */
@media (min-width: 990px){
  .ff-header__logo img{ height: var(--ff-logo-h) !important; width:auto; }
}
/* === FF dual-logo control === */
.ff-header__logo-image{ display:block; width:auto; height:auto; }

/* Default: desktop visible, mobile hidden */
.ff-header__logo--desktop{ display:block; height: var(--ff-logo-h) !important; }
.ff-header__logo .ff-header__logo--mobile { display:none; height: var(--ff-logo-mobile-h, var(--ff-logo-h)) !important; }

/* Viewports */
@media (max-width: 989px){
  .ff-header__logo--desktop{ display:none !important; }
  .ff-header__logo--mobile { display:block !important; }
}
@media (min-width: 990px){
  .ff-header__logo--desktop{ display:block !important; }
  .ff-header__logo--mobile { display:none  !important; }
}

/* Keep page below header (JS sets --ff-header-fixed-h) */
body{ padding-top: calc(var(--ff-announce-height, 0px) + var(--ff-header-fixed-h, var(--ff-header-height, 72px))) }

/* When announcement bar is scrollable (sticky=OFF):
   - Body padding 0 so header-group starts at page top
   - Header SECTION WRAPPER uses position:sticky (not the header element itself)
   - No JavaScript scroll tracking = perfectly smooth native behavior */
html.ff-announce-scrollable body {
  padding-top: 0;
}

/* When drawer is open in scrollable mode, add body padding since header becomes fixed */
/* Also during close transition (is-drawer-closing) */
html.ff-announce-scrollable:has(.ff-drawer[aria-hidden="false"]) body,
html.ff-announce-scrollable:has(.ff-header.is-drawer-open) body,
html.ff-announce-scrollable:has(.ff-header.is-drawer-closing) body {
  padding-top: calc(var(--ff-announce-bar-h, 0px) + var(--ff-header-fixed-h, var(--ff-header-height, 72px)));
}

/* Apply sticky to the Shopify section wrapper and section element containing the header */
html.ff-announce-scrollable .shopify-section-group-header-group .shopify-section:has(.ff-header),
html.ff-announce-scrollable .section-ff-header {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  overflow: visible;
  transition: top 0.2s ease;
}

/* When drawer is open in scrollable mode, header section must be fixed so drawer positions correctly */
html.ff-announce-scrollable:has(.ff-drawer[aria-hidden="false"]) .shopify-section-group-header-group .shopify-section:has(.ff-header),
html.ff-announce-scrollable:has(.ff-drawer[aria-hidden="false"]) .section-ff-header,
html.ff-announce-scrollable .section-ff-header:has(.is-drawer-open),
html.ff-announce-scrollable .shopify-section:has(.ff-header.is-drawer-open) {
  position: fixed;
  top: var(--ff-announce-bar-h, 0px);
  left: 0;
  right: 0;
  transition: top 0.2s ease;
}

/* Skip transition when opening at top of page */
html.ff-announce-scrollable .section-ff-header:has(.is-at-top),
html.ff-announce-scrollable .shopify-section:has(.ff-header.is-at-top) {
  transition: none !important;
}

/* During close transition: header animates UP to top:0, covering the announcement bar */
html.ff-announce-scrollable .section-ff-header:has(.is-drawer-closing),
html.ff-announce-scrollable .shopify-section:has(.ff-header.is-drawer-closing) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: top 0.2s ease;
}

/* Header stays relative within its sticky wrapper */
html.ff-announce-scrollable .ff-header {
  position: relative;
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  overflow: visible;
}

/* Remove position:relative from inner so mega menu positions relative to ff-header (full width) */
html.ff-announce-scrollable .ff-header__inner {
  position: static;
}

.ff-header-spacer{height:0}

/* nav + icons */
.ff-header__nav{flex:1 1 auto;display:flex;justify-content:center;gap:var(--ff-nav-gap)}
.ff-header__icons{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.ff-nav-link{
  color:var(--ff-nav-color);text-decoration:none;
  display:flex;align-items:center;
  height:var(--ff-header-height); padding:0 8px;
}
.ff-header .ff-nav-link,
.ff-header .ff-nav-label { font: inherit; }
.ff-nav-link:hover,.ff-nav-link:focus{color:var(--ff-nav-hover)}
.ff-icon-btn{background:transparent;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;appearance:none}
.ff-icon-btn .svg-wrapper svg,.ff-icon-btn svg{width:var(--header-icon-size);height:var(--header-icon-size);display:block}

/* Burger / drawer state icons */
.ff-header .ff-burger .icon--close{display:none !important;}
.ff-header.is-drawer-open .ff-burger .icon--menu{display:none !important;}
.ff-header.is-drawer-open .ff-burger .icon--close{display:inline-flex !important;}
.ff-header .header__search .modal__toggle-close{ display:none !important; }
.ff-header .header__search[open] .modal__toggle-close{ display:inline-flex !important; }

/* Optional stroke under header (editor setting) */
.ff-header{
  border-bottom: var(--ff-header-stroke-w, 0px) solid var(--ff-header-stroke-color, transparent);
}

/* ===== Desktop mega (unchanged) ===== */
.ff-header__inner{position:relative}
.ff-mega{
  position:fixed; left:0; right:0;
  top: calc(var(--ff-announce-height, 0px) + var(--ff-header-fixed-h, var(--ff-header-height)));
  z-index:2147483001;
  opacity:0; visibility:hidden; transform:translateY(8px);
  pointer-events:none;
  transition:
    opacity var(--ff-mega-time) ease,
    transform var(--ff-mega-time) ease,
    visibility 0s linear var(--ff-mega-time);
}

/* Scrollable mode: mega must be absolute (relative to header) not fixed (relative to viewport)
   This ensures it positions correctly whether header is at page top or stuck */
html.ff-announce-scrollable .ff-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ff-header-fixed-h, var(--ff-header-height));
}
.ff-mega::before{
  content:"";
  position:absolute; left:0; right:0;
  top: calc(-1 * var(--ff-mega-bridge, 8px));
  height: var(--ff-mega-bridge, 8px);
  pointer-events:auto;
}
.ff-nav-item[aria-expanded="true"] > .ff-mega{
  opacity:1; visibility:visible; transform:translateY(0);
  pointer-events:auto;
  transition:
    opacity var(--ff-mega-time) ease,
    transform var(--ff-mega-time) ease,
    visibility 0s;
}

/* Panel chrome */
.ff-mega__inner{
  min-height:var(--ff-mega-min_h);
  padding: var(--ff-mega-pad);
  background:#fff;
  box-shadow:
    0 18px 28px -16px rgba(0,0,0,.14),
    0  8px 16px -10px rgba(0,0,0,.08);
  border-radius:0;
  border-top: var(--ff-mega-sep-w, 0px) solid var(--ff-mega-sep-color, transparent);
  display:grid;
  grid-template-rows: auto;
  column-gap: var(--ff-mega-gap);
}
.ff-mega__inner:has(.ff-mega__footer){ grid-template-rows: auto auto; row-gap: var(--ff-mega-pad); }
.ff-mega--fixed .ff-mega__inner{ height: var(--ff-mega-fixed-h); }
.ff-mega--fixed .ff-mega__inner:has(.ff-mega__footer){ grid-template-rows: 1fr auto; }
.ff-mega__group{ grid-row:1; min-height:0; margin-left:auto; margin-right:auto; }

/* Content pieces */
.ff-mega__title{font-weight:600; margin-bottom:8px}
.ff-mega__links{list-style:none; padding:0; margin:0}
.ff-mega__links li{margin:6px 0}
.ff-mega__links a{text-decoration:none; color:inherit}

/* Dividers (in-gap, full-height) */
.ff-has-dividers > * + *{ padding-left: var(--ff-mega-gap); }
.ff-mega__group { align-items: stretch; position: relative; }
.ff-mega__col   { position: relative; min-height: 100%; }
.ff-mega__col.ff-div-right::after{
  content:""; position:absolute;
  top:    calc(-1 * var(--ff-mega-pad));
  bottom: calc(-1 * var(--ff-mega-pad));
  right:  calc(var(--ff-mega-gap) * -0.5);
  width:  var(--ff-col-div-w, 1px);
  background: var(--ff-col-div-color, rgba(0,0,0,.07));
  pointer-events:none; z-index:3;
}
.ff-mega__col.ff-div-right{ padding-right: var(--ff-col-div-clearance, 10px); }
.ff-mega__col.ff-div-right + .ff-mega__col{ padding-left: var(--ff-col-div-clearance, 10px); }

/* Collages */
.ff-mega__col.ff-collage-col{ display:flex; min-width:0; overflow:visible; }
.ff-mega__col.ff-collage-col > .ff-tiles{ overflow:hidden; width:100%; display:grid; gap:var(--ff-tile-gap); margin: var(--ff-collage-margin, 8px) 0; }
.ff-tile{position:relative; overflow:hidden; border-radius:0; display:block}
.ff-tile img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:translateZ(0) scale(1);
  transition:transform .35s ease;
  will-change: transform;
  backface-visibility:hidden;
}
.ff-tile:hover img{transform:translateZ(0) scale(1.04)}

/* ── Tile overlay (mirrors FF Collection Grid pattern) ────────────────────────
   Variables come from the section's {% style %} block:
     --ff-mm-ov-color / -opacity / -blend / -hover / -trans
     --ff-mm-grad-on / -bottom / -top / -h
   z-index 1 = above the image, below .ff-tile__label (z-index 2) so labels
   stay readable. Two <span>s instead of one ::after pseudo so we don't fight
   any future Dawn-side rules for .ff-tile::after.
   ─────────────────────────────────────────────────────────────────────────── */
.ff-tile > .ff-mm__overlay{
  position:absolute;
  inset:0;
  background-color: var(--ff-mm-ov-color, #000000);
  opacity: var(--ff-mm-ov-opacity, 0);
  mix-blend-mode: var(--ff-mm-ov-blend, normal);
  transition: opacity var(--ff-mm-trans, 350ms) ease;
  pointer-events:none;
  z-index:1;
}
.ff-tile:hover > .ff-mm__overlay{
  opacity: var(--ff-mm-ov-hover, 0.15);
}

.ff-tile > .ff-mm__gradient{
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--ff-mm-grad-h, 65%);
  pointer-events:none;
  z-index:1;
  opacity: var(--ff-mm-grad-on, 0);
  background:
    linear-gradient(
      to top,
      color-mix(in oklab, var(--ff-mm-ov-color, #000) var(--ff-mm-grad-bottom, 70%), transparent) 0%,
      color-mix(in oklab, var(--ff-mm-ov-color, #000) var(--ff-mm-grad-top, 0%), transparent) 100%
    );
}


/* ── Column extra text typography ─────────────────────────────────────────────
   Per-block opt-in via the "Customize extra text typography" checkbox on each
   nav_item. When ON, the section Liquid adds the --custom modifier class and
   inlines six CSS variables (--ff-rich-font/-size/-weight/-color/-ls/-transform).
   When OFF, the modifier class isn't added and these rules don't apply — the
   richtext keeps inheriting from the mega-menu's section-level typography.

   Selectors use a compound class form (.ff-drop__rich.ff-drop__rich--custom,
   specificity 0,2,0) so they beat the existing .ff-drop__rich single-class
   rule earlier in this file (font-size / font-weight / text-transform on
   line 677) regardless of source order.

   Descendant rules cover Shopify's richtext output (<p>, <li>, <span>) and
   pull link styling along too, except for color so links stay distinguishable.
   ─────────────────────────────────────────────────────────────────────────── */
.ff-mega__rich.ff-mega__rich--custom,
.ff-drop__rich.ff-drop__rich--custom {
  font-family: var(--ff-rich-font);
  font-size: var(--ff-rich-size);
  font-weight: var(--ff-rich-weight);
  color: var(--ff-rich-color);
  letter-spacing: var(--ff-rich-ls);
  text-transform: var(--ff-rich-transform);
}

.ff-mega__rich.ff-mega__rich--custom p,
.ff-mega__rich.ff-mega__rich--custom li,
.ff-mega__rich.ff-mega__rich--custom span,
.ff-drop__rich.ff-drop__rich--custom p,
.ff-drop__rich.ff-drop__rich--custom li,
.ff-drop__rich.ff-drop__rich--custom span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Links keep the wrapper's font/size/weight/spacing/transform but retain
   their own color so they remain visually distinguishable from body text. */
.ff-mega__rich.ff-mega__rich--custom a,
.ff-drop__rich.ff-drop__rich--custom a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.ff-mega--fixed .ff-mega__group{ min-height:0; }
.ff-mega--fixed .ff-mega__col.ff-collage-col > .ff-tiles{
  height: calc(100% - (var(--ff-collage-margin, 8px) * 2));
}

/* Collage recipes */
.ff-collage--three-tall{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; align-items:stretch; }
.ff-collage--wide-plus-two{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,3fr) minmax(0,2fr); align-items:stretch; }
.ff-collage--wide-plus-two .ff-tile:first-child{ grid-column:1/-1; grid-row:1; min-height:0; }
.ff-collage--one-large-two-stacked{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; align-items:stretch; }
.ff-collage--one-large-two-stacked .ff-tile:first-child{ grid-column:1; grid-row:1 / span 2; }

/* Show only as many tiles as the layout needs */
.ff-collage--two-wide{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }
.ff-collage--two-wide .ff-tile:nth-child(n+3){ display:none; }

.ff-collage--grid-2x2{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
.ff-collage--grid-2x2 .ff-tile:nth-child(n+5){ display:none; }

.ff-collage--three-tall{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
.ff-collage--three-tall .ff-tile:nth-child(n+4){ display:none; }

.ff-collage--wide-plus-two{
  grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,3fr) minmax(0,2fr);
}
.ff-collage--wide-plus-two .ff-tile:first-child{ grid-column:1/-1; grid-row:1; }
.ff-collage--wide-plus-two .ff-tile:nth-child(n+4){ display:none; }

.ff-collage--one-large-two-stacked{
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
}
.ff-collage--one-large-two-stacked .ff-tile:first-child{ grid-column:1; grid-row:1 / span 2; }
.ff-collage--one-large-two-stacked .ff-tile:nth-child(n+4){ display:none; }

.ff-collage--quilt-5{
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.ff-collage--quilt-5 .ff-tile:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.ff-collage--quilt-5 .ff-tile:nth-child(2){ grid-column:2; grid-row:1; }
.ff-collage--quilt-5 .ff-tile:nth-child(3){ grid-column:3; grid-row:1; }
.ff-collage--quilt-5 .ff-tile:nth-child(4){ grid-column:2; grid-row:2; }
.ff-collage--quilt-5 .ff-tile:nth-child(5){ grid-column:3; grid-row:2; }
.ff-collage--quilt-5 .ff-tile:nth-child(n+6){ display:none; }


/* Column-head images */
.ff-mega__col .ff-col-head{
  position: relative; width:100%; max-width:100%;
  aspect-ratio: var(--ff-colhead-w, 4) / var(--ff-colhead-h, 3);
  overflow: hidden; border-radius: var(--ff-radius, 0);
  margin-bottom: calc(var(--ff-mega-gap, 24px) * 0.5);
}
.ff-mega__col .ff-col-head img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@supports not (aspect-ratio: 1 / 1){
  .ff-mega__col .ff-col-head{ padding-top: 100%; }
  .ff-mega__col .ff-col-head img{ position:absolute; inset:0; }
}
.ff-mega__col .ff-col-head__link{ display:block; width:100%; height:100%; position:relative; }
.ff-mega__col .ff-col-head.ff-col-head--below{ margin-top: calc(var(--ff-mega-gap, 24px) * 0.5); margin-bottom: 0; }

/* Text-only click targets */
.section-ff-header .ff-mega__title a,
.section-ff-header .ff-mega__links a{ display:inline; padding:0; margin:0; }
.section-ff-header .ff-link-text { display:inline; }

/* Image overlay labels */
.ff-tile__label{
  position:absolute;
  left:12px;
  padding:6px 10px;
  border-radius:0;
  font-family: var(--font-heading-family);
  font-size:var(--label-size,14px);
  z-index:2;
  pointer-events:none;
  --tx:0; --ty:0; transform: translate(var(--tx), var(--ty));
}
.ff-align-center{ left:50%; right:auto; --tx:-50% }
.ff-align-right{ left:auto; right:12px; --tx:0 }
.ff-valign-top{ top:12px; bottom:auto; --ty:0 }
.ff-valign-center{ top:50%; bottom:auto; --ty:-50% }
.ff-valign-bottom{ bottom:12px; top:auto; --ty:0 }

/* Footer (desktop mega) */
.ff-mega__footer{
  grid-row:2;
  margin-left:  calc(-1 * var(--ff-mega-pad));
  margin-right: calc(-1 * var(--ff-mega-pad));
  margin-bottom: calc(-1 * var(--ff-mega-pad));
  padding: var(--ff-mega-footer-pad) var(--ff-mega-footer-pad-x, var(--ff-mega-pad));
  background:#fff;
  border-top: var(--ff-mega-footer-border-w, 0px) solid var(--ff-mega-footer-border-color, rgba(0,0,0,.08));
  border-bottom: var(--ff-mega-footer-border-w) solid var(--ff-mega-footer-border-color);
}
.ff-mega__footer-inner{
  display:flex; align-items:center; justify-content: var(--ff-mega-footer-justify, space-between);
  gap:24px; width:100%; margin:0; padding:0; max-width:none !important;
}
.ff-mega__footer .rte p{ margin:0; }
.ff-mega__footer-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ff-mega__footer-socials{
  margin-left:auto; display:flex; align-items:center; gap: var(--ff-social-gap, 12px);
  list-style:none; padding:0; margin:0;
}
.ff-mega__footer-socials a{
  display:inline-flex; width: var(--ff-social-size, 18px); height: var(--ff-social-size, 18px);
  color: var(--ff-social-color, currentColor); text-decoration:none; line-height:0;
}
.ff-mega__footer-socials svg{ width:100%; height:100%; display:block; }
.ff-mega__footer-socials svg, .ff-mega__footer-socials svg *{ fill: currentColor; stroke: currentColor; }
.ff-mega__footer-socials a:hover{ color: var(--ff-social-hover, #000); }

/* ===== Overlay / blur on page ===== */
#MainContent::before{
  content:"";
  position: fixed;
  left: -48px; right: -48px;
  top: calc(var(--ff-announce-height, 0px) + var(--ff-header-fixed-h, var(--ff-header-height)));
  bottom: -48px;
  background: rgba(0,0,0, var(--ff-dim-opacity, .14));
  -webkit-backdrop-filter: blur(var(--ff-blur, 0px));
  backdrop-filter: blur(var(--ff-blur, 0px));
  opacity: 0; pointer-events: none;
  transition: opacity var(--ff-dim-time, 0ms) ease;
  z-index: 2147482000;
  transform: translateZ(0);
  contain: paint;
  backface-visibility: hidden;
}

/* Scrollable mode: header is at top:0, and constrain left/right to prevent horizontal scrollbar */
html.ff-announce-scrollable #MainContent::before {
  top: var(--ff-header-fixed-h, var(--ff-header-height));
  left: 0;
  right: 0;
}

/* Scrollable mode with drawer open: overlay below bar + header */
html.ff-announce-scrollable:has(.ff-drawer[aria-hidden="false"]) #MainContent::before,
html.ff-announce-scrollable:has(.ff-header.is-drawer-open) #MainContent::before {
  top: calc(var(--ff-announce-bar-h, 0px) + var(--ff-header-fixed-h, var(--ff-header-height)));
}

html:has(.ff-header .ff-nav-item[aria-expanded="true"]) #MainContent,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) #MainContent,
html.ff-dim-on #MainContent{
  filter: blur(var(--ff-blur, 0px));
  transition: filter var(--ff-dim-time, 0ms) ease;
  transform: translateZ(0);
}
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) #MainContent::before,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) #MainContent::before,
html.ff-dim-on #MainContent::before{
  opacity: 1; pointer-events: auto;
}

/* Keep legacy element overlay harmless */
.ff-page-dim{
  position: fixed; inset: 0;
  background: rgba(0,0,0, var(--ff-dim-opacity, .14));
  -webkit-backdrop-filter: blur(var(--ff-blur, 0px));
  backdrop-filter: blur(var(--ff-blur, 0px));
  opacity: 0; pointer-events: none;
  transition: opacity var(--ff-dim-time, 0ms) ease;
  z-index: 2147482990;
}
.ff-page-dim.is-active, html.ff-dim-on .ff-page-dim{ opacity: 1; pointer-events: auto; }

/* Hide horizontal scrollbar only while dim/blur is active (prevents “flick left”) */
html:has(.ff-header .ff-nav-item[aria-expanded="true"]),
html:has(.ff-header .ff-drawer[aria-hidden="false"]),
html.ff-dim-on{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html:has(.ff-header .ff-nav-item[aria-expanded="true"]),
  html:has(.ff-header .ff-drawer[aria-hidden="false"]),
  html.ff-dim-on{ overflow-x: hidden; }
}

/* Scrollable mode: don't apply overflow clip - it breaks sticky positioning */
html.ff-announce-scrollable:has(.ff-header .ff-nav-item[aria-expanded="true"]),
html.ff-announce-scrollable:has(.ff-header .ff-drawer[aria-hidden="false"]),
html.ff-announce-scrollable.ff-dim-on {
  overflow-x: visible !important;
}

/* ===== Auto-height: text columns set height; collages fit it ===== */
.ff-mega:not(.ff-mega--fixed) .ff-mega__group { min-height: 0; }
.ff-mega:not(.ff-mega--fixed) .ff-mega__col.ff-collage-col { min-height: 0; }
.ff-mega:not(.ff-mega--fixed) .ff-mega__col.ff-collage-col > .ff-tiles{
  height: auto;
  max-height: none;
  overflow: visible;
}


/* === Viewport-wide mega (so divider + footer can be full-bleed) === */
.section-ff-header .ff-mega{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--ff-announce-height, 0px) + var(--ff-header-fixed-h, var(--ff-header-height))) !important;
  margin-top: 0 !important;
  z-index: 2147483001;
}

/* Scrollable mode: mega must be absolute (relative to header) not fixed (relative to viewport) */
html.ff-announce-scrollable .section-ff-header .ff-mega {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--ff-header-fixed-h, var(--ff-header-height)) !important;
}

.section-ff-header .ff-nav-item[aria-expanded="true"] > .ff-mega{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.section-ff-header .ff-mega::before{ left: 0; right: 0; }

/* === Footer full-bleed === */
.section-ff-header .ff-mega__inner{ position: relative; border-top: 0 !important; row-gap: var(--ff-mega-pad); }
.section-ff-header .ff-mega__inner:not(:has(.ff-mega__footer)){ row-gap: 0; }
.section-ff-header .ff-mega__inner{ display: grid !important; grid-template-columns: 1fr !important; justify-items: stretch; }
.section-ff-header .ff-mega__group{ grid-column: 1 / -1; }
.section-ff-header .ff-mega__footer{ grid-column: 1 / -1; }

/* Normalize icon sizing */
.section-ff-header .ff-header .ff-icon-btn .svg-wrapper{ width: var(--header-icon-size) !important; height: var(--header-icon-size) !important; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.section-ff-header .ff-header .ff-icon-btn .svg-wrapper > svg{ width:100% !important; height:100% !important; display:block; }

/* === Restore dim + blur over Newsletter + Footer groups === */
footer,
.footer-group,
.shopify-section-group--footer,
.shopify-section-group-footer,
.section-newsletter,
.shopify-section-group--newsletter,
.newsletter{ position: relative; z-index: 0; }
footer::after,
.footer-group::after,
.shopify-section-group--footer::after,
.shopify-section-group-footer::after,
.section-newsletter::after,
.shopify-section-group--newsletter::after,
.newsletter::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0, var(--ff-dim-opacity, .14));
  opacity: 0; pointer-events: none; z-index:1; transition: none !important;
}
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) footer::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) footer::after,
html.ff-dim-on footer::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .footer-group::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .footer-group::after,
html.ff-dim-on .footer-group::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group--footer::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group--footer::after,
html.ff-dim-on .shopify-section-group--footer::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group-footer::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group-footer::after,
html.ff-dim-on .shopify-section-group-footer::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .section-newsletter::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .section-newsletter::after,
html.ff-dim-on .section-newsletter::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group--newsletter::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group--newsletter::after,
html.ff-dim-on .shopify-section-group--newsletter::after,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .newsletter::after,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .newsletter::after,
html.ff-dim-on .newsletter::after{ opacity: 1; }
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) footer,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) footer,
html.ff-dim-on footer,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .footer-group,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .footer-group,
html.ff-dim-on .footer-group,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group--footer,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group--footer,
html.ff-dim-on .shopify-section-group--footer,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group-footer,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group-footer,
html.ff-dim-on .shopify-section-group-footer,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .section-newsletter,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .section-newsletter,
html.ff-dim-on .section-newsletter,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .shopify-section-group--newsletter,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .shopify-section-group--newsletter,
html.ff-dim-on .shopify-section-group--newsletter,
html:has(.ff-header .ff-nav-item[aria-expanded="true"]) .newsletter,
html:has(.ff-header .ff-drawer[aria-hidden="false"]) .newsletter,
html.ff-dim-on .newsletter{
  filter: blur(var(--ff-blur, 0px));
  transform: translateZ(0);
  transition: none !important;
}

/* =========================================================
   MOBILE (NEW): drawer slides from LEFT; sub-panes slide RIGHT
   ========================================================= */
@media (max-width:989px){
  .ff-header__nav,.ff-mega{display:none!important}

/* make sub-pane header flush and full-bleed with full-width divider */
.ff-mpane--sub { padding-top: 0; }
.ff-mpane__header{
  position: sticky; top: 0; z-index: 2;
  background: var(--ff-mnav-bg, #fff);
  /* pull to edges so divider spans entire panel width */
  margin-left: calc(-1 * var(--ff-mnav-pad-x, 18px));
  margin-right: calc(-1 * var(--ff-mnav-pad-x, 18px));
  padding: 8px var(--ff-mnav-pad-x, 18px) 10px;
  border-bottom: 1px solid var(--ff-mnav-divider, rgba(0,0,0,.08));
  /* interactive shadow (off until scrolled) */
  box-shadow: none;
  transition: box-shadow .18s ease;
}
.ff-mpane.is-scrolled .ff-mpane__header{
  box-shadow: var(--ff-mnav-header-shadow, 0 18px 28px -16px rgba(0,0,0,.14), 0 8px 16px -12px rgba(0,0,0,.10));
}

/* Root pane scroll shadows - handled via JS inline styles */

/* separate typography: titles vs main items */
.ff-back,
.ff-drop__summary{
  font-size: var(--ff-mnav-title-size, 16px);
  font-weight: var(--ff-mnav-title-weight, 600);
  text-transform: var(--ff-mnav-title-case, none);
}

/* split-tap rows on root */
.ff-mnav__row{ display:flex; align-items:center; gap:10px; }
.ff-mnav__label-link,
.ff-mnav__label-btn{
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center;
  padding: 14px 0; background: none; border: 0; color: inherit;
  font-size: var(--ff-mnav-item-size, 16px);
  font-weight: var(--ff-mnav-item-weight, 600);
  text-transform: var(--ff-mnav-item-case, none);
  text-decoration: none;
}
.ff-mnav__label-btn{ cursor: pointer; text-align: left; }

/* use the separate link typography for lists */
.ff-drop__panel .ff-drop__links a,
.ff-drop__rich,
.ff-shopall{
  font-size: var(--ff-mnav-link-size, 15px);
  font-weight: var(--ff-mnav-link-weight, 400);
  text-transform: var(--ff-mnav-link-case, none);
}

/* optional BOXED style (white title box + light grey link panel) */
.ff-mnav[data-mstyle="boxed"] .ff-drop{
  border-bottom: 0; margin-bottom: 10px;
}
.ff-mnav[data-mstyle="boxed"] .ff-drop__summary{
  background: #fff; border: 1px solid var(--ff-mnav-divider, rgba(0,0,0,.08));
  border-radius: 8px; padding: 12px 12px;
}
.ff-mnav[data-mstyle="boxed"] .ff-drop__panel{
  margin-top: 8px; padding: 10px 12px;
  background: #f5f5f5; border-radius: 8px;
  border: 1px solid var(--ff-mnav-divider, rgba(0,0,0,.08));
}

/* ensure "See all" last gets a little separation when asked */
.ff-drop__shopall--last{ margin-top: 10px; }


  /* Tighter mobile padding, consistent icon sizing */
  .ff-header__inner{
    justify-content:space-between;
    padding-left:  clamp(10px, var(--ff-pad-x), 18px) !important;
    padding-right: clamp(10px, var(--ff-pad-x), 18px) !important;
  }
  .ff-header{ --header-icon-size: 26px; }
  .ff-header__icons .ff-icon-btn .svg-wrapper,
  .ff-header__icons .ff-icon-btn .svg-wrapper svg{
    width: var(--header-icon-size) !important;
    height: var(--header-icon-size) !important;
  }
  .ff-header__icons a[href*="/cart"] .svg-wrapper svg{ transform: scale(1.08); transform-origin:center; }
  .ff-header__logo{position:absolute; left:50%; transform:translateX(-50%); height:var(--ff-header-height); display:flex; align-items:center; pointer-events:none}
  .ff-header__logo a{pointer-events:auto}
  .ff-icon--account{display:none!important}
  .ff-header__icons{width:100%; justify-content:flex-end}
  .ff-header__icons .ff-burger{margin-right:auto}

  /* ----- Drawer container (overlay region under header) ----- */
  .ff-drawer{
    position:fixed; left:0; right:0; bottom:0;
    top: calc(var(--ff-announce-height, 0px) + var(--ff-header-fixed-h, var(--ff-header-height)));
    z-index:2147482998;
    pointer-events:none;  /* enable only when open */
    background: transparent; /* overlay handled by page dim layer */
  }
  
  /* Scrollable mode: drawer stays fixed, positioned below bar + header */
  html.ff-announce-scrollable .ff-drawer {
    top: calc(var(--ff-announce-bar-h, 0px) + var(--ff-header-fixed-h, var(--ff-header-height)));
  }
  
  .ff-drawer[aria-hidden="false"]{ pointer-events:auto; }

  /* ----- Sliding panel ----- */
  .ff-mnav{
  position:absolute; top:0; bottom:0; left:0;
  width: var(--ff-mnav-w, 100vw);
  max-width: none;
  background: var(--ff-mnav-bg, #fff);
  color: var(--ff-mnav-color, #111);
  box-shadow: var(--ff-mnav-shadow, 0 18px 28px -16px rgba(0,0,0,.14), 0 8px 16px -10px rgba(0,0,0,.08));
  transform: translateX(-100%);
  will-change: transform;
  transition: transform .28s ease; /* SLIDE ONLY (no fade) */
  contain: paint;
  backface-visibility: hidden;
}

  .ff-drawer[aria-hidden="false"] .ff-mnav{
    transform: translateX(0);
  }

  /* Viewport + horizontal track for sub-panes */
  .ff-mnav__viewport{
    position:absolute; inset:0;
    overflow:hidden; /* horizontal slides happen inside */
  }
  .ff-mnav__track{
    position:relative; height:100%;
    display:flex; flex-flow:row nowrap;
    will-change: transform;
    transition: transform .28s ease;
    touch-action: pan-y pinch-zoom;
  }

  /* Each pane fills the panel width */
  .ff-mpane{
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; /* stop background scroll if pane can't scroll */
    padding: var(--ff-mnav-pad-y, 12px) var(--ff-mnav-pad-x, 18px) 28px;
    /* Extra bottom padding for Chrome's tab bar (~48-56px) + safe area */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    font-family: var(--ff-mnav-font, inherit);
  }
  
  .ff-mpane--root{ padding-top: 8px; }
  
  /* Top/bottom shadows for root pane - all styles set via inline JS */

  /* Root list (top-level items) */
  .ff-mnav__list{ list-style:none; margin:0; padding:0; }
  .ff-mnav__item{ border-bottom:1px solid var(--ff-mnav-divider, rgba(0,0,0,.08)); }
  .ff-mnav__row{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:10px; background:none; border:0; padding:14px 0; cursor:pointer;
    color:inherit; text-align:left; appearance:none;
    font-size: var(--ff-mnav-item-size, 16px);
    font-weight: var(--ff-mnav-item-weight, 600);
    text-transform: var(--ff-mnav-item-case, none);
  }
  .ff-mnav__row:focus-visible{ outline:2px solid var(--ff-mnav-accent, currentColor); outline-offset:2px; border-radius:4px; }
  .ff-mnav__label{ flex:1 1 auto; min-width:0; }

  /* Generic arrows (borders) */
  .ff-arrow{ display:inline-block; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; }
  .ff-arrow--right{ transform: rotate(-45deg); }
  .ff-arrow--left{ transform: rotate(135deg); }

  .ff-back{
    display:flex; align-items:center; gap:10px;
    background:none; border:0; padding:10px 0; cursor:pointer; color:inherit;
    font-size: var(--ff-mnav-item-size, 16px);
    font-weight: var(--ff-mnav-item-weight, 600);
    text-transform: var(--ff-mnav-item-case, none);
  }
  .ff-back:focus-visible{ outline:2px solid var(--ff-mnav-accent, currentColor); outline-offset:2px; border-radius:4px; }
  .ff-back__label{ line-height:1; }

  /* Sub-pane body */
  .ff-mpane__body{ padding-top: 6px; display:block; }

  /* Column dropdowns (details/summary) */
  .ff-drop{ border-bottom:1px solid var(--ff-mnav-divider, rgba(0,0,0,.08)); }
  .ff-drop__summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    list-style:none; cursor:pointer; padding: 14px 0;
    font-size: var(--ff-mnav-item-size, 16px);
    font-weight: var(--ff-mnav-item-weight, 600);
    text-transform: var(--ff-mnav-item-case, none);
  }
  .ff-drop__summary::-webkit-details-marker{ display:none; }
  /* Sub-menu dropdown chevrons: down when closed, up when open */
  .ff-drop__summary .ff-arrow--right{ transform: rotate(45deg); }
  .ff-drop[open] > .ff-drop__summary .ff-arrow--right{ transform: rotate(-135deg); }
  .ff-drop__title{ flex:1 1 auto; min-width:0; }

  .ff-drop__panel{ padding: 8px 0 14px; }
  .ff-drop__shopall{ margin: 0 0 8px; }
  .ff-shopall{
    display:inline-block; text-decoration:none;
    font-size: var(--ff-mnav-link-size, 15px);
    font-weight: var(--ff-mnav-link-weight, 400);
    text-transform: var(--ff-mnav-link-case, none);
    color: var(--ff-mnav-accent, currentColor);
  }

  .ff-drop__links{ list-style:none; margin:6px 0 0; padding:0 0 0 8px; }
  .ff-drop__links li{ margin:6px 0; }
  .ff-drop__links a{
    text-decoration:none; color:inherit;
    font-size: var(--ff-mnav-link-size, 15px);
    font-weight: var(--ff-mnav-link-weight, 400);
    text-transform: var(--ff-mnav-link-case, none);
  }
  .ff-drop__links a:hover{ color: var(--ff-mnav-accent, currentColor); }
  .ff-drop__rich{ margin-top:8px; font-size: var(--ff-mnav-link-size, 15px); }

  /* Optional bottom promo (image + label) */
  .ff-mpane__promo{ margin-top: 16px; }
  .ff-mpane__promo-link{
  display:block; position:relative; text-decoration:none; color:inherit;
  aspect-ratio: var(--ff-mpromo-ratio, 16/9); /* change 16/9 to 4/3 or 1/1 if you prefer */
  overflow:hidden; border-radius: 0;
}
.ff-mpane__promo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; border-radius: 0;
}

  .ff-mpane__promo-label{
    position: absolute; left: 12px; bottom: 12px;
    display:inline-block; margin-top:8px;
    font-size: var(--ff-mnav-link-size, 15px);
    font-weight: var(--ff-mnav-link-weight, 400);
    pointer-events: none;
  }

  /* Account/Login at root bottom */
  .ff-drawer__account{ margin-top:12px; border-top:1px solid var(--ff-mnav-divider, rgba(0,0,0,.08)); padding-top:10px; list-style:none; }
  .ff-drawer__account a{ text-decoration:none; color:inherit; font-size: var(--ff-mnav-link-size, 15px); }

  /* Prevent background scroll/interaction while open */
  html.ff-no-scroll{ overflow: hidden; overscroll-behavior: none; }
  body{ overscroll-behavior-y: none; }
  .ff-mnav, .ff-mpane{ touch-action: pan-y pinch-zoom; }

  /* Hide horizontal scroll on panes EXCEPT the root pane (it needs to bleed the 1px cuts) */
.ff-mnav__viewport,
.ff-mpane:not(.ff-mpane--root){ overflow-x: hidden; }

}

/* Desktop: hide burger & drawer wrapper */
@media (min-width:990px){
  .ff-burger{display:none!important}
  .ff-drawer{display:none!important}
}
/* transparent overlay “catcher” (no dim/blur) */
.ff-page-dim.as-catcher{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* while the drawer is open on mobile, force no blur/dim on the page */
@media (max-width: 989px){
  html:has(.ff-header .ff-drawer[aria-hidden="false"]) #MainContent{
    filter: none !important;
    transform: none !important; /* Critical: transform breaks position:fixed inside */
  }
  html:has(.ff-header .ff-drawer[aria-hidden="false"]) #MainContent::before{
    opacity: 0 !important;
  }
}
@media (max-width: 989px){
  .ff-mpane.no-scroll{ overflow-y: hidden; } /* keep X already hidden elsewhere */
}

/* --- PATCH 1A: mobile overflow fixes while drawer is open --- */
@media (max-width: 989px){
  /* Stop the dim overlay from extending past the viewport on mobile */
  #MainContent::before{ left: 0 !important; right: 0 !important; }

  /* When JS adds ff-no-scroll, hard-disable both axis scroll on all browsers */
  html.ff-no-scroll,
  html.ff-no-scroll body{
    overflow: hidden !important;
    width: 100% !important;
    position: relative; /* avoids subtle layout shifts on iOS */
  }
}

/* ---------- PATCH: Mobile root rows & split-tap targets ---------- */
@media (max-width: 989px){
  /* 1) Remove double vertical padding on root items */
  .ff-mnav__row{ padding: 0 !important; }

  /* Label = text-only target (complimentary action) */
  .ff-mnav__label-link,
  .ff-mnav__label-btn{
    padding: 6px 0 !important;              /* keep it tight */
    display: inline-flex !important;         /* shrink to text */
    align-items: center;
  }

/* Big click target, no native button chrome, small icon */
.ff-mnav__chev{
  flex: 0 0 56px;          /* widen tap to ~56px */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* kill native button styles / highlights */
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ff-mnav__chev .ff-arrow{
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}



  /* 2) Kill the tiny top gap on the root pane under the header */
  .ff-mpane--root{ padding-top: 0 !important; }

  /* Back row alignment stays inside padding (no clipping) */
  .ff-back{ padding: 12px 0 10px 0 !important; }

  /* 4) Column dropdown summary: restrict link to title text,
        make chevron side the big toggle area */
  .ff-drop__summary{
    padding: 14px 0;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
  }
  .ff-drop__summary .ff-drop__title{
    flex: 0 0 auto; min-width: 0;            /* just its text width */
  }
/* Arrow stays 10×10; sits at the right edge of the row */
.ff-drop__summary .ff-arrow{
  width: 10px;
  height: 10px;
  display: block;
  margin-left: auto; /* push to the right */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* Points DOWN when closed */
}
.ff-drop[open] > .ff-drop__summary .ff-arrow{ transform: rotate(-135deg); } /* Points UP when open */


  /* 5) BOXED style = screen-wide, no borders, no radius, no gaps */
  .ff-mnav[data-mstyle="boxed"] .ff-mpane{
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .ff-mnav[data-mstyle="boxed"] .ff-mpane__body{
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .ff-mnav[data-mstyle="boxed"] .ff-drop{
    margin: 0 !important; border: 0 !important;
  }
  .ff-mnav[data-mstyle="boxed"] .ff-drop__summary{
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    padding: 14px var(--ff-mnav-pad-x, 18px) !important;
    background: #ffffff !important;
  }
  .ff-mnav[data-mstyle="boxed"] .ff-drop__panel{
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    padding: 10px var(--ff-mnav-pad-x, 18px) 14px !important;
    background: #f5f5f5 !important;          /* continuous grey slab */
  }
  /* Keep "See all" separation when shown last */
  .ff-mnav[data-mstyle="boxed"] .ff-drop__shopall--last{ margin-top: 10px; }

  /* Remove rounded corners globally in mobile menu context */
  .ff-mnav[data-mstyle="boxed"] .ff-mpane__promo-link,
  .ff-mnav[data-mstyle="boxed"] .ff-mpane__promo img{ border-radius: 0 !important; }
}

/* Make sure only one header rule wins (yours had two).
   This line just ensures the sticky header gets its shadow when scrolled. */
@media (max-width: 989px){
  .ff-mpane.is-scrolled .ff-mpane__header{
    box-shadow: var(--ff-mnav-header-shadow, 0 18px 28px -16px rgba(0,0,0,.14), 0 8px 16px -12px rgba(0,0,0,.10));
  }
}
/* ---------- Root split-tap: text-only label + chevron fills remainder ---------- */
@media (max-width: 989px){
  /* The whole row is still flex, but remove the dead-zone gap so the chevron can own it */
  .ff-mnav__row{ gap: 0 !important; }

  /* Label = only as wide as its text */
  .ff-mnav__label-link,
  .ff-mnav__label-btn{
    flex: 0 0 auto !important;     /* shrink to content */
    display: inline-flex !important;
    align-items: center;
    padding: 6px 0 !important;      /* tight, as requested */
  }

  /* Chevron = owns the remaining space (big tap target), tiny icon */
  .ff-mnav__chev{
    flex: 1 1 auto !important;      /* fill the rest of the row */
    min-width: 44px;                 /* preserve accessible tap width on tiny labels */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;       /* arrow hugs the right edge */
    background: none;
    border: 0;
    appearance: none;
    padding: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .ff-mnav__chev .ff-arrow{
    width: 10px; height: 10px;      /* small icon stays small */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  /* Ensure the sub-pane header is visually flush (no sneaky margins) */
  .ff-mpane__header{ margin-top: 0 !important; }
}
@media (max-width: 989px){
  .ff-mpane--sub{ padding-top: 0 !important; }
  .ff-mpane__header{ margin-top: 0 !important; }
  .ff-mpane__body{ padding-top: 0 !important; } /* this was the visible 6px */
}
/* Show the header divider over the desktop mega */
.section-ff-header .ff-nav-item[aria-expanded="true"] > .ff-mega::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: var(--ff-header-stroke-w, 0px);
  background: var(--ff-header-stroke-color, transparent);
  pointer-events:none; z-index:5;
  display: none !important;
}

/* Show the header divider over the mobile drawer */
@media (max-width: 989px){
  .ff-drawer[aria-hidden="false"] .ff-mnav::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height: var(--ff-header-stroke-w, 0px);
    background: var(--ff-header-stroke-color, transparent);
    pointer-events:none; z-index:10;
  }
}
@media (max-width: 989px){
  /* Root rows: text label gets the padding, chevron auto-sizes to keep tap area comfy */
  .ff-mnav__label-link,
  .ff-mnav__label-btn{
    padding: var(--ff-mnav-row-pad-y, 8px) 0 !important;
  }
  .ff-mnav__chev{
    /* Keep at least 44px tap height, or match label padding + a little breathing room */
    height: max(var(--ff-mnav-row-min, 44px), calc(var(--ff-mnav-row-pad-y, 8px) * 2 + 12px));
  }

  /* Dropdown (column) summary rows */
  .ff-drop__summary{
    padding: var(--ff-mnav-drop-pad-y, 14px) 0 !important;
  }

  /* Links inside the dropdowns */
  .ff-drop__links li{
    margin: var(--ff-mnav-link-gap-y, 6px) 0 !important;
  }
}
@media (max-width: 989px){
  /* kill the extra border under the last root item */
  .ff-mnav__list .ff-mnav__item:last-child{ border-bottom: 0; }

}


  /* new bottom link list (replaces "Log in") */
  .ff-drawer__extras{
  list-style:none; margin: 8px 0 0; padding:0;
  display:flex; flex-direction:column;
  gap: var(--ff-extra-gap-y, 8px);  /* <- now driven by the editor slider */
}

  .ff-drawer__extras a{
    display:flex; align-items:center; gap:10px;
    padding: var(--ff-extra-pad-y, 10px) 0; text-decoration:none; color:inherit;
    font-size: var(--ff-mnav-link-size, 15px);
    font-weight: var(--ff-mnav-link-weight, 400);
    text-transform: var(--ff-mnav-link-case, none);
  }
  .ff-ex__icon{ width:18px; height:18px; line-height:0; display:inline-flex; }
  .ff-ex__icon svg{ width:100%; height:100%; display:block; }

  /* socials at bottom */
  @media (max-width: 989px){
  .ff-mnav__socials{
    list-style:none; margin:0; padding:0;
    margin-top: var(--ff-m-social-pad-top, 12px);     /* <- editor-controlled */
    display:flex; align-items:center;
    gap: var(--ff-social-gap, 12px);
  }
}

  .ff-mnav__socials a{
    display:inline-flex; width: var(--ff-social-size, 18px); height: var(--ff-social-size, 18px);
    color: var(--ff-social-color, currentColor); text-decoration:none;
  }
  .ff-mnav__socials a:hover{ color: var(--ff-social-hover, currentColor); }
  .ff-mnav__socials svg{ width:100%; height:100%; display:block; }
}

/* hide any legacy "account" block if still present in markup (safety) */
@media (max-width: 989px){
  .ff-drawer__account{ display:none !important; }
}
@media (max-width: 989px){
  /* Make the root pane a column so we can push socials to the bottom */
  .ff-mpane--root{
    display: flex;
    flex-direction: column;
    overflow-x: visible;
  }
  .ff-mnav__list,
  .ff-drawer__extras,
  .ff-mnav__cut { flex: 0 0 auto; }
  .ff-mnav__bottom{
  margin-top: auto;
  /* Extra padding to account for Chrome tab bar + safe-area (tab bar can be ~50px) */
  padding-bottom: max(env(safe-area-inset-bottom, 0px) + 56px, var(--ff-m-social-pad-bottom, 12px) + 56px);
}


/* FIX: only indent items that actually have an icon */
.ff-drawer__extras li.has-icon a{
  position: relative;
  padding-left: 28px; /* 18px icon + ~10px breathing room */
  gap: 0 !important;
}
.ff-drawer__extras li.has-icon .ff-ex__icon{
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
}




  @media (max-width: 989px){
  /* normal row borders */
  .ff-mpane--sub .ff-drop{
    border-bottom:1px solid var(--ff-mnav-divider, rgba(0,0,0,.08));
    margin:0;                     /* avoid pushing the divider down */
  }

  /* last row: kill its normal border */
  .ff-mpane--sub .ff-drop:last-of-type{
    border-bottom:0;
    position:relative;
  }

  /* full-bleed divider exactly where the old one was */
  .ff-mpane--sub .ff-drop:last-of-type::after{
    content:"";
    display:block;
    height:1px;
    margin: 0 calc(-1 * var(--ff-mnav-pad-x, 18px)); /* flush to edges */
    background: var(--ff-mnav-divider, rgba(0,0,0,.08));
  }
  /* Full-width 1px “cut” lines on the root pane */
.ff-mnav__cut{
  display:block;
  height:1px;
  margin: 0px calc(-1 * var(--ff-mnav-pad-x, 18px));
  background: var(--ff-mnav-divider, rgba(0,0,0,.08));
  transform: translateZ(0); /* crisp 1px on mobile GPUs */
}

}

/* === FIX: root/sub full-width cuts are always visible and full-bleed === */
@media (max-width: 989px){
  .ff-mnav__cut{
    display:block !important;
    height:1px !important;
    min-height: 1px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    margin-left: calc(-1 * var(--ff-mnav-pad-x, 18px)) !important;
    margin-right: calc(-1 * var(--ff-mnav-pad-x, 18px)) !important;
    background: var(--ff-mnav-divider, rgba(0,0,0,.08)) !important;
    flex-shrink: 0 !important;
  }
  /* sub-pane: draw a single full-bleed line after the last dropdown */
  .ff-mpane--sub .ff-drop{ border-bottom:1px solid var(--ff-mnav-divider, rgba(0,0,0,.08)); }
  .ff-mpane--sub .ff-drop:last-of-type{ border-bottom:0; position:relative; }
  .ff-mpane--sub .ff-drop:last-of-type::after{
    content:""; display:block; height:1px;
    margin: 0 calc(-1 * var(--ff-mnav-pad-x, 18px));
    background: var(--ff-mnav-divider, rgba(0,0,0,.08));
  }
}
/* === FIX: socials own their bottom padding; pane stops enforcing 28px === */
@media (max-width: 989px){
  .ff-mpane--root{ padding-bottom: 0 !important; }
  .ff-mnav__bottom{
    margin-top: auto;
    padding: var(--ff-m-social-pad-top, 12px) var(--ff-mnav-pad-x, 18px)
             var(--ff-m-social-pad-bottom, env(safe-area-inset-bottom, 12px));
    margin-left: calc(-1 * var(--ff-mnav-pad-x, 18px));
    margin-right: calc(-1 * var(--ff-mnav-pad-x, 18px));
    background: var(--ff-mnav-bg, #fff);
  }
}
@media (max-width: 989px){
  .ff-mpane__header{
    display:flex; align-items:center; gap:10px;
  }
  @media (max-width: 989px){
  .ff-head-link{
    margin-left:auto;
    text-decoration: var(--ff-headlink-underline, none);
    color: var(--ff-headlink-color, currentColor);
    font-size: var(--ff-headlink-size, 15px);
    font-weight: var(--ff-headlink-weight, 600);
    text-transform: var(--ff-headlink-case, none);
    padding: var(--ff-headlink-pad-y, 8px) var(--ff-headlink-pad-x, 0);
  }
  .ff-head-link:hover{ color: var(--ff-headlink-hover, currentColor); }
}
@media (max-width: 989px){
  /* Promo container now also controls padding/vertical spacing/alignment */
  .ff-mpane__promo{
    margin-top: 16px;
    padding: var(--ff-mpromo-pad, 0);
    display: flex;
    flex-direction: column;
    align-items: var(--ff-mpromo-align, flex-start);
    gap: var(--ff-mpromo-gap, 10px);
  }

  .ff-mpane__promo-title{
    font-family: var(--ff-mpromo-title-font, inherit);
    font-size: var(--ff-mpromo-title-size, 16px);
    font-weight: var(--ff-mpromo-title-weight, 600);
    text-transform: var(--ff-mpromo-title-case, none);
    color: var(--ff-mpromo-title-color, #111);
  }
  .ff-mpane__promo-title a{ color:inherit; text-decoration:none; }

  .ff-mpane__promo-text{
    font-family: var(--ff-mpromo-text-font, inherit);
    font-size: var(--ff-mpromo-text-size, 15px);
    color: var(--ff-mpromo-text-color, #111);
    width: 100%;
    text-align: var(--ff-mpromo-text-align, left);
    text-transform: var(--ff-mpromo-text-case, none); /* <- stops unwanted uppercase */
  }

  /* Media wrapper decides width and alignment (no crop unless asked) */
  .ff-mpane__promo-media{
    width: 100%;
    display: flex;
    justify-content: var(--ff-mpromo-img-align, flex-start);
    position: relative;
  }

  .ff-mpane__promo-link{
    display: block;
    text-decoration: none;
    color: inherit;
    /* width mode */
    width: 100%;
    max-width: none;
  }

  /* Width modes */
  .ff-mpane__promo { /* no-op here; kept for context */ }
  .ff-mpane__promo-media .ff-mpane__promo-link{
    /* defaults for width-mode: full */
    width: 100%;
    max-width: none;
  }
  /* width-mode: max */
  .ff-mpane__promo[style*="--ff-mpromo-width-mode: max"] .ff-mpane__promo-link{
    width: 100%;
    max-width: var(--ff-mpromo-max-w, 600px);
  }
  /* width-mode: natural */
  .ff-mpane__promo[style*="--ff-mpromo-width-mode: natural"] .ff-mpane__promo-link{
    width: auto;
    max-width: 100%;
  }

  /* Aspect ratio handling:
     - With a fixed ratio, the image fills the box by fit (contain/cover).
     - With 'auto', the image renders at natural aspect (no forced height). */
  .ff-mpane__promo-link{
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: var(--ff-mpromo-ratio, auto);
  }
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link{
    aspect-ratio: auto;     /* disable fixed ratio */
  }
/* If ratio is auto (use natural image height) */
.ff-mpane__promo-media.is-auto img {
  position: static;       /* do NOT absolute-position; let it size the box */
  display: block;         /* remove inline-gap issues */
  width: 100%;
  height: auto;
  object-fit: contain;    /* or leave as default if you prefer */
}
  /* Image behavior */
  .ff-mpane__promo-link img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ff-mpromo-fit, contain);
  }
  /* When aspect-ratio is auto, let image define its own height (no crop, no letterbox) */
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link{
    position: relative;
  }
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link img{
    height: auto;
    object-fit: initial;
  }
}
/* If ratio is fixed (use aspect-ratio on wrapper + object-fit) */
.ff-mpane__promo-media.is-fixed {
  /* aspect-ratio is set inline via Liquid; if you'd rather use the CSS var:
     aspect-ratio: var(--ff-mpromo-ratio); */
}
.ff-mpane__promo-media.is-fixed img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--ff-mpromo-fit, contain); /* 'contain' or 'cover' from settings */
}
/* === PATCH: mobile promo image (cover/contain) + label z-index === */
@media (max-width: 989px){
  /* The link is the aspect-ratio box */
  .ff-mpane__promo-media { position: relative; }
  .ff-mpane__promo-link{
    display:block; position:relative; width:100%;
    overflow:hidden; border-radius:0;
    aspect-ratio: var(--ff-mpromo-ratio, auto);
  }
  /* Fixed ratio -> crop or contain inside the box */
  .ff-mpane__promo-media.is-fixed .ff-mpane__promo-link{
    aspect-ratio: var(--ff-mpromo-ratio, 16/9);
  }
  /* Image fills the box when fixed ratio */
  .ff-mpane__promo-media .ff-mpane__promo-link img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: var(--ff-mpromo-fit, contain); /* set to 'cover' in editor for crop */
    z-index: 1;
    display:block;
  }
  /* Auto ratio -> let the image set its own height (no crop, no letterbox) */
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link{ aspect-ratio:auto; }
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link img{
    position: static; height:auto; object-fit: initial;
  }

  /* Label must sit above image */
  .ff-mpane__promo-label{
    position:absolute; left:12px; bottom:12px; z-index:3;
    padding: var(--ff-mpromo-label-py,6px) var(--ff-mpromo-label-px,10px);
    border-radius: var(--ff-mpromo-label-radius,8px);
    background: var(--ff-mpromo-label-bg, rgba(0,0,0,.6));
    color: var(--ff-mpromo-label-color, #fff);
    font-weight: var(--ff-mpromo-label-weight, 600);
    pointer-events:none;
  }
}
/* === FINAL PATCH: Mobile promo image crop + label stacking/placement === */
@media (max-width: 989px){
  .ff-mpane__promo-media{ position: relative; }

  /* The link becomes the aspect-ratio box */
  .ff-mpane__promo-link{
    display:block; position:relative; width:100%;
    overflow:hidden; border-radius:0;
    aspect-ratio: var(--ff-mpromo-ratio, auto);
  }

  /* Fixed ratio → image fills and crops (or contains via setting) */
  .ff-mpane__promo-media.is-fixed .ff-mpane__promo-link{ /* aspect-ratio set inline via Liquid */ }
  .ff-mpane__promo-media.is-fixed .ff-mpane__promo-link img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: var(--ff-mpromo-fit, contain) !important;  /* set to 'cover' in editor */
    z-index:1; display:block;
  }

  /* Auto ratio → natural height, no crop */
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link{ aspect-ratio:auto; }
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link img{
    position:static !important;
    width:100%; height:auto !important;
    object-fit:initial !important;
  }

  /* Label sits above image and can be aligned via vars */
  .ff-mpane__promo-label{
    inset: auto !important;
    position:absolute; z-index:3; pointer-events:none;
    left:   var(--ff-mlab-left, auto)   !important;
    right:  var(--ff-mlab-right, auto)  !important;
    top:    var(--ff-mlab-top, auto)    !important;
    bottom: var(--ff-mlab-bottom, 12px) !important;
    transform: translate(var(--ff-mlab-tx,0), var(--ff-mlab-ty,0)) !important;
    padding: var(--ff-mpromo-label-py,6px) var(--ff-mpromo-label-px,10px);
    border-radius: var(--ff-mpromo-label-radius,8px);
    background: var(--ff-mpromo-label-bg, rgba(0,0,0,.6));
    color: var(--ff-mpromo-label-color, #fff);
    font: inherit;
    font-family: var(--ff-mpromo-label-font, inherit);
    font-size: var(--ff-mpromo-label-size, 14px);
    font-weight: var(--ff-mpromo-label-weight, 600);
    letter-spacing: var(--ff-mpromo-label-ls, 0);
    text-transform: var(--ff-mpromo-label-case, none);
    line-height: var(--ff-mpromo-label-lh, 1.2);
    text-shadow: var(--ff-mpromo-label-shadow, none);
    display:inline-block;
  }
}
@media (max-width: 989px){
  /* Fixed ratio: enforce the box ratio */
  .ff-mpane__promo-media.is-fixed .ff-mpane__promo-link{
    aspect-ratio: var(--ff-mpromo-ratio, 16/9) !important;
  }
  /* Auto ratio: disable any earlier aspect-ratio */
  .ff-mpane__promo-media.is-auto .ff-mpane__promo-link{
    aspect-ratio: auto !important;
  }
}
/* --- FIX: collage label centering & side resets --- */
.ff-tile__label{
  /* kill any stale sides from earlier rules */
  inset: auto;
  /* start from known sides; alignment classes will override */
  left: 12px; top: auto; right: auto; bottom: 12px;

  /* guarantee translate always parses */
  --tx: var(--tx, 0);
  --ty: var(--ty, 0);
  transform: translate(var(--tx, 0), var(--ty, 0));
}

/* alignment classes (unchanged semantics, but now bulletproof) */
.ff-align-center{ left:50%; right:auto; --tx:-50%; }
.ff-align-right { left:auto; right:12px; --tx:0; }
.ff-valign-top   { top:12px; bottom:auto; --ty:0; }
.ff-valign-center{ top:50%; bottom:auto; --ty:-50%; }
.ff-valign-bottom{ bottom:12px; top:auto; --ty:0; }