/**
 * DataFirefly - Mega Menu - front-office styles.
 */
.dfmm {
  --dfmm-bg: #ffffff;
  --dfmm-fg: #232323;
  --dfmm-fg-muted: #6c727d;
  --dfmm-accent: #2b6cff;
  --dfmm-hover-bg: #f4f6fb;
  --dfmm-panel-bg: #ffffff;
  --dfmm-border: #e6e9ef;
  --dfmm-radius: 10px;
  --dfmm-shadow: 0 18px 48px rgba(20, 28, 52, .14);
  --dfmm-gap: 4px;
  --dfmm-justify: flex-start;
  --dfmm-bar-bg: transparent;
  --dfmm-font-size: 15px;
  --dfmm-font-weight: 600;
  --dfmm-transform: none;
  --dfmm-pad-y: 12px;
  --dfmm-pad-x: 14px;
  --dfmm-z: 1000;
  position: relative;
  font-size: var(--dfmm-font-size, 15px);
  line-height: 1.35;
}

.dfmm * { box-sizing: border-box; }
.dfmm ul { list-style: none; margin: 0; padding: 0; }
.dfmm a { text-decoration: none; color: inherit; }

/* Root bar */
.dfmm__root {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: var(--dfmm-justify, flex-start);
  gap: var(--dfmm-gap);
  background: var(--dfmm-bar-bg, transparent);
}

.dfmm__item { position: relative; }

.dfmm__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--dfmm-pad-y, 12px) var(--dfmm-pad-x, 14px);
  color: var(--dfmm-fg);
  font-weight: var(--dfmm-font-weight, 600);
  text-transform: var(--dfmm-transform, none);
  border-radius: var(--dfmm-radius);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.dfmm__item:hover > .dfmm__link,
.dfmm__item.is-open > .dfmm__link { color: var(--dfmm-accent); }

/* Hover style: pill (default) */
.dfmm--hover-pill .dfmm__item:hover > .dfmm__link,
.dfmm--hover-pill .dfmm__item.is-open > .dfmm__link { background: var(--dfmm-hover-bg); }

/* Hover style: underline */
.dfmm--hover-underline .dfmm__item > .dfmm__link { position: relative; }
.dfmm--hover-underline .dfmm__item > .dfmm__link::after {
  content: "";
  position: absolute;
  left: var(--dfmm-pad-x, 14px);
  right: var(--dfmm-pad-x, 14px);
  bottom: 6px;
  height: 2px;
  background: var(--dfmm-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .15s ease;
}
.dfmm--hover-underline .dfmm__item:hover > .dfmm__link::after,
.dfmm--hover-underline .dfmm__item.is-open > .dfmm__link::after { transform: scaleX(1); }

/* Hover style: outlined border */
.dfmm--hover-border .dfmm__item > .dfmm__link { border: 1px solid transparent; }
.dfmm--hover-border .dfmm__item:hover > .dfmm__link,
.dfmm--hover-border .dfmm__item.is-open > .dfmm__link { border-color: var(--dfmm-accent); background: transparent; }
.dfmm__link--label { cursor: default; color: var(--dfmm-fg-muted); }

.dfmm__icon { font-size: 20px; line-height: 1; }
.dfmm__text { white-space: nowrap; }

.dfmm__badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--dfmm-accent);
  border-radius: 999px;
}

.dfmm__caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  transition: transform .2s ease;
  opacity: .65;
}
.dfmm__caret--right { transform: rotate(-45deg); }
.dfmm__item:hover > .dfmm__link .dfmm__caret { transform: rotate(225deg); }

/* Dropdown (walker) */
.dfmm__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 8px;
  background: var(--dfmm-panel-bg);
  border: 1px solid var(--dfmm-border);
  border-radius: var(--dfmm-radius);
  box-shadow: var(--dfmm-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* Small close delay = hover grace: the panel doesn't collapse when the
   * pointer briefly leaves the trigger on a diagonal move. */
  transition: opacity .18s ease .12s, transform .18s ease .12s, visibility .18s .12s;
  z-index: var(--dfmm-z);
}
.dfmm__item:hover > .dfmm__dropdown,
.dfmm__item.is-open > .dfmm__dropdown,
.dfmm__sub-item:hover > .dfmm__dropdown,
.dfmm__sub-item.is-open > .dfmm__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s; /* open instantly, grace applies on close only */
}
.dfmm__dropdown--nested { top: -9px; left: 100%; }

.dfmm__sub-item { position: relative; }
.dfmm__sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--dfmm-fg);
  transition: background .15s ease, color .15s ease;
}
.dfmm__sub-link:hover { background: var(--dfmm-hover-bg); color: var(--dfmm-accent); }
.dfmm__sub-link .dfmm__caret { margin-left: auto; }
.dfmm__sub-link--label { color: var(--dfmm-fg-muted); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; cursor: default; }

/* Mega panel */
.dfmm__mega {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 22px;
  background: var(--dfmm-panel-bg);
  border: 1px solid var(--dfmm-border);
  border-radius: var(--dfmm-radius);
  box-shadow: var(--dfmm-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease .12s, transform .18s ease .12s, visibility .18s .12s;
  z-index: var(--dfmm-z);
  min-width: 520px;
}
.dfmm__item:hover > .dfmm__mega,
.dfmm__item.is-open > .dfmm__mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.dfmm__mega-inner {
  display: grid;
  grid-template-columns: repeat(var(--dfmm-cols, 4), minmax(0, 1fr));
  gap: 22px;
}
.dfmm__mega-col { grid-column: span min(var(--dfmm-span, 3), var(--dfmm-cols)); min-width: 0; }
.dfmm__mega-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--dfmm-fg);
  padding: 4px 0 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--dfmm-border);
}
.dfmm__mega-title:hover { color: var(--dfmm-accent); }
.dfmm__mega-list .dfmm__sub-link { padding: 6px 8px; }
.dfmm__mega-thumb { display: block; margin-bottom: 10px; }
.dfmm__img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.dfmm__promo { display: block; position: relative; overflow: hidden; border-radius: 8px; }
.dfmm__promo-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  color: #fff; font-weight: 700;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.dfmm__html { font-size: 14px; color: var(--dfmm-fg); }

/* Inline thumbnail (category image / product cover) inside dropdown rows. */
.dfmm__thumb {
  flex: none;
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--dfmm-hover-bg);
}
.dfmm__mega-list .dfmm__thumb { width: 28px; height: 28px; }

/* Product price */
.dfmm__price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--dfmm-accent);
  white-space: nowrap;
}
.dfmm__sub-link .dfmm__price { padding-left: 10px; }

/* Category product count */
.dfmm__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--dfmm-fg-muted);
  background: var(--dfmm-hover-bg);
  border-radius: 999px;
  padding: 1px 7px;
}
.dfmm__sub-link .dfmm__caret + .dfmm__count,
.dfmm__count + .dfmm__caret { margin-left: 6px; }

/* Divider item */
.dfmm__vdivider {
  display: inline-block;
  align-self: center;
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--dfmm-border);
}
.dfmm.is-mobile .dfmm__vdivider { width: 100%; height: 1px; margin: 6px 0; }
.dfmm__sub-item--divider { padding: 4px 0; }
.dfmm__sub-item--divider hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--dfmm-border);
}

/* "View all" auto link at the end of a category tree */
.dfmm__sub-link--viewall {
  font-weight: 700;
  color: var(--dfmm-accent);
}
.dfmm__sub-link--viewall .dfmm__text::after {
  content: " \2192";
}

/* Current page highlighting (set by JS). */
.dfmm__item.is-active > .dfmm__link { color: var(--dfmm-accent); }
.dfmm--hover-pill .dfmm__item.is-active > .dfmm__link { background: var(--dfmm-hover-bg); }
.dfmm--hover-underline .dfmm__item.is-active > .dfmm__link::after { transform: scaleX(1); }
.dfmm--hover-border .dfmm__item.is-active > .dfmm__link { border-color: var(--dfmm-accent); }
.dfmm__sub-item.is-active > .dfmm__sub-link {
  color: var(--dfmm-accent);
  background: var(--dfmm-hover-bg);
}

/* Full-width mega.
 * The item must NOT be the positioning context here, otherwise left/right
 * anchor to the <li> and the panel never spans the bar. Anchoring to .dfmm
 * (position: relative) makes the panel truly full width — and automatically
 * aligned with the boxed bar when a max-width is set. */
/* Only MEGA items lose their positioning context: a classic dropdown must
 * stay anchored to its <li>, otherwise it renders at the left edge of the
 * whole bar (left: 0 resolves against .dfmm). */
.dfmm--full .dfmm__item--mega { position: static; }
.dfmm--full .dfmm__mega { left: 0; right: 0; width: 100%; min-width: 0; }

/* In displayTop the bar is shrunk to its content, so a both-side anchored
 * panel would only be as wide as the links. The JS placement guard computes
 * a viewport-centered width/left instead (see bindOverflowGuard). */
.dfmm--hook-displaytop.dfmm--full .dfmm__mega { right: auto; min-width: 520px; }

/* Boxed bar: constrain and center the menu to match the theme container. */
.dfmm--boxed {
  max-width: var(--dfmm-max-width, none);
  margin-left: auto;
  margin-right: auto;
}

/* displayTop: the menu sits inside the theme's header flex row, next to the
 * logo and the search bar. Bootstrap 5 forces `.row > * { width: 100% }` on
 * any direct child without a col-* class, which pushes the search bar to the
 * next line. Shrink to content and align vertically instead.
 * (.dfmm.dfmm-- doubles the specificity to beat `.row > *`.) */
.dfmm.dfmm--hook-displaytop {
  float: left;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}

/* Keep panels within the viewport height on desktop. */
.dfmm:not(.is-mobile) .dfmm__mega { max-height: calc(100vh - 140px); overflow-y: auto; }

/* Inside a mega panel, deeper levels render inline (indented) instead of
 * absolute flyouts — flyouts would be clipped by the scrollable panel. */
.dfmm:not(.is-mobile) .dfmm__mega .dfmm__dropdown--nested {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  min-width: 0;
  padding: 0 0 0 14px;
}
.dfmm:not(.is-mobile) .dfmm__mega .dfmm__caret--right { display: none; }

/* Viewport edge detection (set by JS): flip panels that would overflow. */
.dfmm__dropdown.is-flipped { left: auto; right: 0; }
.dfmm__dropdown--nested.is-flipped { left: auto; right: 100%; }
.dfmm__mega.is-flipped { left: auto; right: 0; }

/* Keyboard accessibility: panels open while focus is inside (desktop). */
.dfmm:not(.is-mobile) .dfmm__item:focus-within > .dfmm__dropdown,
.dfmm:not(.is-mobile) .dfmm__item:focus-within > .dfmm__mega,
.dfmm:not(.is-mobile) .dfmm__sub-item:focus-within > .dfmm__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Sticky */
.dfmm--sticky.is-stuck {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 4px 16px;
  background: var(--dfmm-bg);
  box-shadow: 0 6px 20px rgba(20, 28, 52, .10);
  z-index: calc(var(--dfmm-z) + 10);
}

/* Boxed + sticky: full-width background, content aligned on the max width. */
.dfmm--boxed.dfmm--sticky.is-stuck { max-width: none; }
.dfmm--boxed.dfmm--sticky.is-stuck .dfmm__root {
  max-width: var(--dfmm-max-width, none);
  margin-left: auto;
  margin-right: auto;
}
.dfmm--boxed.dfmm--sticky.is-stuck.dfmm--full .dfmm__mega {
  left: 50%;
  right: auto;
  width: min(100%, var(--dfmm-max-width, 100%));
  transform: translateX(-50%) translateY(8px);
}
.dfmm--boxed.dfmm--sticky.is-stuck.dfmm--full .dfmm__item:hover > .dfmm__mega,
.dfmm--boxed.dfmm--sticky.is-stuck.dfmm--full .dfmm__item:focus-within > .dfmm__mega,
.dfmm--boxed.dfmm--sticky.is-stuck.dfmm--full .dfmm__item.is-open > .dfmm__mega {
  transform: translateX(-50%) translateY(0);
}
.dfmm__sticky-spacer { flex: none; pointer-events: none; }

/* Burger button (hidden on desktop) */
.dfmm__burger {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--dfmm-border);
  border-radius: var(--dfmm-radius);
  color: var(--dfmm-fg);
  font-weight: 700;
  cursor: pointer;
}
.dfmm__burger-box { position: relative; width: 20px; height: 14px; }
.dfmm__burger-inner,
.dfmm__burger-inner::before,
.dfmm__burger-inner::after {
  position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.dfmm__burger-inner { top: 6px; }
.dfmm__burger-inner::before { content: ""; top: -6px; }
.dfmm__burger-inner::after { content: ""; top: 6px; }
.dfmm.is-mobile-open .dfmm__burger-inner { background: transparent; }
.dfmm.is-mobile-open .dfmm__burger-inner::before { top: 0; transform: rotate(45deg); }
.dfmm.is-mobile-open .dfmm__burger-inner::after { top: 0; transform: rotate(-45deg); }

/* Device visibility helpers */
.dfmm:not(.is-mobile) .dfmm-hide-desktop { display: none !important; }
.dfmm.is-mobile .dfmm-hide-mobile { display: none !important; }
@media (min-width: 768px) and (max-width: 991px) {
  .dfmm-hide-tablet { display: none !important; }
}

/* ============ Boot guard (anti-FOUC) ============
 * .dfmm--boot is printed in the markup and removed by the JS as soon as the
 * desktop / mobile mode has been resolved. Without it the bar is first painted
 * as a horizontal list on phones, then .is-mobile turns .dfmm__root into a
 * fixed drawer carrying transform: translateX(-100%) with a .25s transition:
 * the menu is visibly animated off-screen to the left on every page load.
 * The width media query lives inline in menu.tpl because the breakpoint is
 * configurable per menu; only the transition freeze is global here.
 * .dfmm--no-anim is applied for one frame around the very first mode switch. */
.dfmm--boot,
.dfmm--boot *,
.dfmm--no-anim,
.dfmm--no-anim * { transition: none !important; animation: none !important; }

/* ============ Mobile / burger mode ============ */
.dfmm.is-mobile .dfmm__burger { display: inline-flex; }
.dfmm.is-mobile .dfmm__root {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(86vw, 360px);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  padding: 70px 14px 24px;
  background: var(--dfmm-panel-bg);
  box-shadow: var(--dfmm-shadow);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: calc(var(--dfmm-z) + 20);
}
.dfmm.is-mobile.is-mobile-open .dfmm__root { transform: translateX(0); }

.dfmm.is-mobile .dfmm__item,
.dfmm.is-mobile .dfmm__sub-item { width: 100%; }
.dfmm.is-mobile .dfmm__link,
.dfmm.is-mobile .dfmm__sub-link {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
  border-bottom: 1px solid var(--dfmm-border);
}
.dfmm.is-mobile .dfmm__caret { margin-left: auto; transform: rotate(45deg); }
.dfmm.is-mobile .dfmm__item.is-open > .dfmm__link .dfmm__caret,
.dfmm.is-mobile .dfmm__sub-item.is-open > .dfmm__sub-link .dfmm__caret { transform: rotate(225deg); }

/* In mobile, panels become static accordions */
.dfmm.is-mobile .dfmm__dropdown,
.dfmm.is-mobile .dfmm__mega {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0 14px 0 12px;
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.dfmm.is-mobile .dfmm__item.is-open > .dfmm__dropdown,
.dfmm.is-mobile .dfmm__item.is-open > .dfmm__mega,
.dfmm.is-mobile .dfmm__sub-item.is-open > .dfmm__dropdown { max-height: 2000px; }
.dfmm.is-mobile .dfmm__dropdown--nested { left: auto; top: auto; }
.dfmm.is-mobile .dfmm__mega-inner { grid-template-columns: 1fr; gap: 4px; }
.dfmm.is-mobile .dfmm__mega-col { grid-column: 1 / -1; }

/* Backdrop */
.dfmm__backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 22, 41, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
  z-index: calc(var(--dfmm-z) + 15);
}
.dfmm.is-mobile-open ~ .dfmm__backdrop,
.dfmm.is-mobile-open .dfmm__backdrop { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .dfmm * { transition: none !important; }
}
/* -------------------------------------------------------------------------
 * Collapsible mega column titles (menu option "col_collapse").
 * JS adds .is-colcollapse on the nav when the option applies to the current
 * mode (mobile / desktop / both). Columns are closed by default.
 * ---------------------------------------------------------------------- */
.dfmm__caret--col { display: none; margin-left: auto; transform: rotate(45deg); transition: transform .2s ease; }
.dfmm.is-colcollapse .dfmm__mega-col--collapsible > .dfmm__mega-title { cursor: pointer; user-select: none; }
.dfmm.is-colcollapse .dfmm__mega-col--collapsible > .dfmm__mega-title .dfmm__caret--col { display: inline-block; }
.dfmm.is-colcollapse .dfmm__mega-col--collapsible.is-open > .dfmm__mega-title .dfmm__caret--col { transform: rotate(225deg); }
.dfmm.is-colcollapse .dfmm__mega-col--collapsible > .dfmm__mega-list {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height .25s ease;
}
.dfmm.is-colcollapse .dfmm__mega-col--collapsible.is-open > .dfmm__mega-list { max-height: 4000px; }
.dfmm.is-colcollapse .dfmm__mega-col--collapsible:not(.is-open) > .dfmm__mega-title { margin-bottom: 0; }
.dfmm.is-colcollapse.is-mobile .dfmm__mega-col--collapsible > .dfmm__mega-title { margin-bottom: 0; }