/* =============================================================
   TOM FAULKNER — MEGA PANEL (generic, structural trigger)
   Applies only to .tf-mega-menu, which the navwalker now only
   outputs for items with a genuine second level of children.
   Nothing here touches .dropdown-menu / .nav-link elsewhere —
   single-level dropdowns are pure untouched Bootstrap defaults.
   ============================================================= */
:root { --tf-header-height: 80px; }
.tf-mega-menu ul,
.tf-mega-menu li,
.tf-mega-cat-list,
.tf-mega-cat-list li,
.tf-mega-subgroup-list,
.tf-mega-subgroup-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.tf-mega-menu,
.tf-mega-menu * {
  box-sizing: border-box;
}
/* ── Container: fixed, full width, below the header ─────────── */
/* NOTE: selectors here are deliberately compound (.nav-item.dropdown >
   .tf-mega-menu) rather than just `.tf-mega-menu` alone. There's a
   pre-existing rule in the theme's main style.css —
   `.dropdown:hover > .dropdown-menu` — left over from before this
   mega-panel work, written for plain Bootstrap dropdowns. Since
   .tf-mega-menu also carries the generic `dropdown-menu` class, that
   old rule matches it too and fires on native :hover, independently
   of the .show class this JS uses. Its selector specificity (0,3,0)
   was beating a bare `.tf-mega-menu` (0,1,0), which is why the panel
   rendered at a different, narrower width on a real hover (both
   rules fighting) than when only .show-less hover was forced in
   DevTools. Every property here needs to out-specificity that rule,
   not just out-!important it. */
#header .nav-item.dropdown > .tf-mega-menu {
  position: fixed !important;
  top: var(--tf-header-height, 80px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #ececec !important;
  margin: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
  z-index: 1050 !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
#header .nav-item.dropdown > .tf-mega-menu.show {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.tf-mega-inner {
  display: flex !important;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  /* Gives the row a stable, predictable height instead of letting it
     balloon to match however many subcategories a given column has.
     This is what was making the image panel (and the CTA link sitting
     at its bottom) grow way taller than the visible panel and end up
     scrolled out of view. 500px (up from 440px) gives the image panel
     enough room for real top/bottom padding around the photo plus the
     link below it — see .tf-mega-panel--image. */
  min-height: 500px;
}
/* ── Panel 1 — categories (left) ─────────────────────────────── */
.tf-mega-panel--categories {
  flex: 0 0 220px;
  border-right: 1px solid #ececec;
  padding: 36px 24px 36px 32px !important;
}
.tf-mega-cat-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0 !important;
  font-family: 'Futura', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s ease;
}
.tf-mega-cat-link:hover,
.tf-mega-cat-item.is-active > .tf-mega-cat-link {
  color: #000 !important;
  font-weight: 600 !important;
}
.tf-mega-cat-arrow {
  font-size: .6rem !important;
  opacity: .35;
  margin-left: 8px;
  flex-shrink: 0;
}
.tf-mega-cat-item.is-active > .tf-mega-cat-link .tf-mega-cat-arrow,
.tf-mega-cat-link:hover .tf-mega-cat-arrow {
  opacity: 1;
}
/* ── Panel 2 — subcategories (middle) ────────────────────────── */
.tf-mega-panel--subcats {
  flex: 1 1 auto;
  position: relative;
  padding: 36px 32px !important;
  min-height: 260px;
  /* Opts this column out of .tf-mega-inner's align-items:stretch.
     Without this, whatever height tf-mega-menu.js last set inline on
     the image panel (its syncImageHeight() logic) stretched this
     column to match it — and syncImageHeight() then measures THIS
     column's height on the very next hover and re-applies it to the
     image panel. That's a feedback loop: each hover re-reads a
     height that was itself inflated by the previous hover, so it
     only ever grows and never resets, which is the "adds more height
     every time" behaviour. This makes the column size purely to its
     own visible subpanel's real content instead, so every hover
     measures a true, independent value. */
  align-self: flex-start;
}
.tf-mega-subpanel {
  display: none;
}
.tf-mega-subpanel.is-visible {
  display: flex !important;
  flex-direction: column;
  gap: 20px 0;
  animation: tf-fade-right .28s ease;
}
@keyframes tf-fade-right {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tf-mega-subgroup-title {
  display: block;
  font-family: 'Futura', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: #1a1a1a !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.tf-mega-sublink {
  display: block;
  padding: 5px 0 !important;
  font-family: 'Futura', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 300 !important;
  color: #555 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.tf-mega-sublink:hover { color: #000 !important; }

#header ul.tf-mega-subgroup-list li a.tf-mega-sublink {
    text-transform: none !important;
    letter-spacing: 0em;
    font-size: 0.9em !important;
}

/* ── Panel 3 — image (right) ─────────────────────────────────── */
/* NOTE: this panel and everything inside it (.tf-mega-image-wrap,
   .tf-mega-image, .tf-mega-cta) is addressed with the same compound
   `#header .nav-item.dropdown …` prefix used on the container rule
   near the top of this file, for the same reason documented there —
   the theme's main style.css carries older, higher-than-expected-
   specificity rules for things that look like plain dropdown/button
   content, and a bare `.tf-mega-panel--image` class selector isn't
   guaranteed to win against them. Bumping specificity here is what
   makes the padding and de-buttoned link actually stick. */
#header .nav-item.dropdown .tf-mega-panel--image {
  /* Was flex: 0 0 360px — that fixed narrow width against the row's
     natural height (driven by the categories/subcats content, ~450-
     500px) is what made a correctly object-fit:cover-cropped image
     read as portrait: the box itself was a tall, narrow rectangle.
     660px puts the box closer to a 2:1 landscape shape, matching
     large_lands' own 1200x600 crop, so cover has a landscape box to
     fill instead of a portrait one. */
  flex: 0 0 660px !important;
  /* Generous top/bottom padding around the image + link, matching
     the categories/subcats columns either side of it, instead of the
     old edge-to-edge image with a button overlaid on top of it. */
  padding: 48px 32px !important;
  display: flex !important;
  align-items: stretch !important;
  /* FIXED height, not driven by JS/stretch at all. This used to be
     set dynamically (tf-mega-menu.js copied whatever height the
     currently-visible subcats column needed onto this panel), which
     meant the image box — and the "View All" link pinned to its
     bottom-left corner — changed size per category: it grew huge for
     a category with a long subcategory list, and collapsed down to
     almost nothing for a category with only 1-2 (e.g. Mirrors),
     which is also what made the crop look wrong — a very short box
     forces object-fit:cover to zoom in and crop away most of the
     image's height. A fixed size makes the box (and the crop, and
     the link's position within it) identical and predictable no
     matter which category is active. align-self:flex-start stops
     .tf-mega-inner's align-items:stretch from overriding it if a
     category's own column ever needs more height than this.
     tf-mega-menu.js's syncImageHeight() has been made a no-op to
     match — see that file. */
  height: 500px !important;
  align-self: flex-start !important;
  overflow: hidden !important;
}
#header .nav-item.dropdown .tf-mega-image-wrap {
  /* Column layout: image on top, link below it in normal flow — this
     replaces the old position:absolute overlay that pinned the CTA
     over the bottom-left corner of the image itself. tf-mega-menu.js
     only ever toggles style.display on the image/link (never their
     position), so nothing there needed to change for this. The
     image and link below both have their own fixed/auto sizes now
     (see .tf-mega-image and .tf-mega-cta), so this wrap doesn't need
     an explicit height of its own — it just sizes to their total,
     which always fits inside the panel's fixed 500px height above. */
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#header .nav-item.dropdown .tf-mega-image {
  width: 100%;
  /* Fixed height rather than flex-grow — 500px panel height minus
     48px top/bottom padding (96px) minus the 18px gap minus the link
     row's own ~26px leaves 360px for the image itself. A fixed pixel
     height (instead of relying on flex-grow/min-height:0 to shrink
     it to "whatever's left") means the crop is identical in every
     browser and can't get squeezed to nothing by an unexpectedly
     tall link row. */
  height: 360px !important;
  flex: 0 0 360px !important;
  object-fit: cover !important;
  /* Explicit, matching what was asked for — this is already cover's
     own default, but stated outright so it's not dependent on that
     default staying unset. */
  object-position: center !important;
  /* display is left for tf-mega-panel.js to toggle
     (style.display = 'none' / 'block') — nothing here forces it. */
}
#header .nav-item.dropdown .tf-mega-cta {
  /* Plain text link sitting BELOW the image, in the flex column on
     .tf-mega-image-wrap above — no background pill, no border, no
     shadow, no absolute positioning over the photo. Same small-caps
     styling as the category list on the left so it reads as one
     consistent link style across the panel. display is left for
     tf-mega-panel.js to toggle (style.display = 'none' /
     'inline-flex'); nothing here overrides that, so the existing
     hover-to-reveal behaviour for Products is unchanged. */
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  font-family: 'Futura', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#header .nav-item.dropdown .tf-mega-cta:hover { color: #555 !important; background: none !important; }
#menu-mega-menu-left a {
	margin-right: 10px;
}
/* ── Chevron rotation on open (reuses existing dropdown pattern) */
.nav-item.dropdown.show > .nav-link .fa-chevron-down {
  transform: rotate(180deg);
}
/* ── Hide below the breakpoint where the desktop nav collapses ─ */
@media (max-width: 1199.98px) {
  .tf-mega-menu { display: none !important; }
}
/* =============================================================
   COLLECTIONS — flat/single-level mega variant (ADDITIVE ONLY)
   Nothing above is changed in a way that alters Products' own
   behaviour — the .tf-mega-menu / .tf-mega-inner / categories /
   subcats scaffolding is all still reused as-is by both variants.
   This block only styles the two leaf classes
   (.tf-mega-image-static / .tf-mega-cta-static) used by
   render_flat_mega_panel() in the navwalker, kept separate from
   .tf-mega-image / .tf-mega-cta on purpose: tf-mega-panel.js
   unconditionally hides those two classes on every panel open as
   part of the hover-to-reveal behaviour Products needs. Reusing
   them for Collections' static image would make it vanish the
   instant the panel opened.
   ============================================================= */
#header .nav-item.dropdown .tf-mega-image-static {
  width: 100%;
  /* Same fixed-height treatment as .tf-mega-image above (see that
     rule's comment for why this is a fixed px height rather than
     flex-grow): 500px panel height minus 48px top/bottom padding
     minus the 18px gap minus the link row leaves 360px for the
     image. */
  height: 360px !important;
  flex: 0 0 360px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
#header .nav-item.dropdown .tf-mega-cta-static {
  /* Plain text link below the image, matching .tf-mega-cta's styling
     — no background pill, no border, no shadow, no absolute overlay
     on the photo. Always visible (Collections' image/link are
     static, not hover-driven), so display stays a plain inline-flex
     here rather than being toggled by JS. */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  font-family: 'Futura', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#header .nav-item.dropdown .tf-mega-cta-static:hover {
  color: #555 !important;
  background: none !important;
}
/* Collections' image now matches Products/Mirrors EXACTLY: same
   fixed 660px width, same padding/height/crop — not a wider image
   filling the space a subcats column would otherwise take up (an
   earlier version of this file tried that "cover two columns" idea;
   this reverts it because the two mega panels need to look identical,
   not just proportionally similar). Categories stays a narrow
   FIXED-width column here (220px — the same width Products' own
   categories column uses). Collections has no subcats column to fill
   the space between categories and the image the way Products' does,
   so margin-left:auto on the image panel pushes it flush against the
   right edge of the row instead — the same place Products' image
   ends up — leaving plain, empty (background-colour-matched) ecru
   space in between rather than a stretched, over-wide image. */
#header .nav-item.dropdown .tf-mega-inner--flat .tf-mega-panel--categories {
  flex: 0 0 220px !important;
  max-width: none !important;
}
#header .nav-item.dropdown .tf-mega-inner--flat .tf-mega-panel--image {
  flex: 0 0 660px !important;
  max-width: none !important;
  margin-left: auto !important;
  /* Padding/display/overflow restated here directly rather than left
     to inherit from the shared #header .nav-item.dropdown
     .tf-mega-panel--image rule above. On the live site that shared
     rule wasn't winning for Collections specifically (something else
     in the theme's stylesheet was still beating it there, even though
     it won for the structural Products panel using the exact same
     selector pattern) — this flat-scoped selector has one more class
     in it, so it's strictly higher specificity than whatever that
     other rule turned out to be. The navwalker's
     render_flat_mega_panel() also now sets these same three
     properties as an inline style on this element as a second,
     un-losable safety net — see that function's docblock. */
  padding: 48px 32px !important;
  display: flex !important;
  align-items: stretch !important;
  /* Matches the 500px row height set on .tf-mega-inner and on the
     structural Products image panel above, so Collections' padding
     (48px top/bottom) and image height (360px, from
     .tf-mega-image-static) line up with the rest of the site's mega
     panels. align-self:flex-start stops .tf-mega-inner--flat's own
     align-items:stretch from overriding this fixed height if the
     categories column ever needs more room than 500px. */
  height: 500px !important;
  align-self: flex-start !important;
  overflow: hidden !important;
}

/* =============================================================
   GALLERY — "Our Spaces"-style mega variant (ADDITIVE ONLY)
   For items opted in via `tf-mega-gallery`: 2-4 direct children,
   each rendered by render_gallery_mega_panel() as one image+title
   tile in a single equal-width row. Reuses the same .tf-mega-menu
   container/positioning rules above — only .tf-mega-inner--gallery
   and its children are new. Nothing here touches Products' or
   Collections' own classes, and tf-mega-panel.js needs no changes:
   there's no hover-driven image swap or subpanel switching in this
   variant, just the same generic open/close it already handles.
   ============================================================= */
#header .nav-item.dropdown .tf-mega-inner.tf-mega-inner--gallery {
  /* Cancels the base .tf-mega-inner's display:flex + min-height:500px
     (written for the categories/subcats/image row layout) — a simple
     tile grid doesn't need either, and forcing 500px here would leave
     a lot of empty space under a normal-height image. */
  display: block !important;
  min-height: 0 !important;
  padding: 40px 32px !important;
  max-width: 100%;
  margin: 0 auto;
}
.tf-mega-gallery-row {
  display: flex !important;
  gap: 32px;
  width: 100%;
}
.tf-mega-gallery-tile {
  /* Equal-width columns whether there are 2, 3, or 4 tiles — no
     per-count classes needed, flex just divides the row evenly. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
}
.tf-mega-gallery-tile-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
  background: #e2e2e2; /* visible placeholder ground if no image is set yet */
}
.tf-mega-gallery-tile-title {
  font-family: 'Futura', sans-serif !important;
  font-size: .74rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #1a1a1a !important;
  transition: color .15s ease;
}
.tf-mega-gallery-tile:hover .tf-mega-gallery-tile-title {
  color: #555 !important;
}
.tf-mega-gallery-tile:hover .tf-mega-gallery-tile-image {
  opacity: .92;
}

/* =============================================================
   NESTED SUBPANEL CASING
   Flat items that sit alongside headed groups in a subpanel with a
   genuine 3rd level (e.g. Console Tables under Tables) take the
   header styling, so the whole column reads as one level. The
   navwalker adds .tf-mega-subpanel--nested structurally; purely
   flat subpanels (e.g. Seating) don't get it and keep standard-case
   links.
   ============================================================= */
#header .tf-mega-subpanel--nested ul.tf-mega-subgroup-list--flat li a.tf-mega-sublink {
  font-size: .68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: #1a1a1a !important;
  padding: 0 !important;
}
#header .tf-mega-subpanel--nested ul.tf-mega-subgroup-list--flat li + li {
  margin-top: 20px !important;
}

/* =============================================================
   BACKDROP OVERLAY — darkens page content behind an open mega panel
   Uses :has() so no JS is needed: whenever any .tf-mega-menu
   carries .show (added by tf-mega-panel.js), a fixed overlay fades
   in below the header. pointer-events:none means clicks pass
   straight through, so click-outside-to-close is unaffected.
   Adjust the rgba alpha (.45) for a lighter or darker overlay.

   Z-INDEX ORDER: page content (sticky product column is Bootstrap's
   .sticky-top at 1020) < backdrop 1035 < header 1040 < offcanvas /
   modals / search overlay. The header was previously 1000, which
   put it UNDER .sticky-top — that's what let the product page's
   sticky left column paint over the open mega panel.
   ============================================================= */
@media (min-width: 1200px) {
  html::after {
    content: '';
    position: fixed;
    top: var(--tf-header-height, 80px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s;
  }
  html:has(.tf-mega-menu.show)::after {
    opacity: 1;
    visibility: visible;
  }
  #header { z-index: 1040; }
}

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