:root {
  --mm-accent: #d3fb52;
  --mm-accent-text: #14150F; /* dark text/icons on the lime accent for contrast */
  --mm-header-h: 84px;
  --mm-header-h-scrolled: 52px;
  --mm-header-w: 1240px;
  --mm-header-w-scrolled: 960px;
}

/* !important guards against WP core's auto-injected `body{padding-top:0}` reset
   (part of global-styles-inline-css, present on every page regardless of theme).
   Reserves room for the header at its rest height plus the topbar marquee
   sitting above it — header.js measures the topbar's real height into
   --mm-topbar-h, the value here is just a same-size fallback before JS runs. */
body { padding-top: calc(var(--mm-header-h) + var(--mm-topbar-h)) !important; }

/* ===== Header shell =====
   Always centered, at both sizes — never a full-bleed bar. Scroll toggles
   max-width (860px vs 1240px) and background only. max-width is used instead
   of width so the shrink is a plain, cheap, smoothly-animatable px-to-px
   transition — width:fit-content can't be tweened and just snaps. */
.mm-header {
  position: fixed;
  top: 0;
  left: 50%;
  width: calc(100% - 48px);
  max-width: var(--mm-header-w);
  transform: translateX(-50%);
  z-index: 9999;
  background: transparent;
  border-radius: 10px;
  transition: max-width .3s ease, background-color .3s ease, margin-top .3s ease, top .3s ease;
}
/* top is otherwise owned by header.js (inline style), which accounts for the
   admin bar and topbar heights together — this is just the pre-JS fallback. */

.mm-header.is-scrolled {
  max-width: var(--mm-header-w-scrolled);
  background: #052326;
  margin-top: 12px;
}

.mm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  height: var(--mm-header-h);
  transition: height .28s ease, padding .3s ease, gap .3s ease;
  position: relative; /* containing block for the full-width mega panel below */
}
.mm-header.is-scrolled .mm-header-inner {
  height: var(--mm-header-h-scrolled);
  padding: 0 12px 0 20px;
  gap: 16px;
}
.mm-header.is-scrolled .mm-nav { flex: 0 0 auto; }
.mm-header.is-scrolled .mm-menu { gap: 2px; }
.mm-header.is-scrolled .mm-menu-item > a { padding: 8px 10px; font-size: 13.5px; color: #F5F4EE; }
.mm-header.is-scrolled .mm-menu-item > a:hover { background: rgba(245, 244, 238, .1); }
.mm-header.is-scrolled .mm-logo-text { color: #F5F4EE; }
.mm-header.is-scrolled .mm-logo-tagline { color: rgba(245, 244, 238, .7); }
.mm-header.is-scrolled .mm-mobile-toggle span { background: #F5F4EE; }

/* ===== Logo ===== */
/* Column, not row: the tagline sits under the main name as its own line
   rather than beside it, and centering the whole stack (not just the
   name) is what keeps the name vertically centered in the header bar
   once a second line is added, instead of the name getting pushed up. */
.mm-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-decoration: none; flex-shrink: 0; }
.mm-logo-text { font-weight: 800; font-size: 17px; color: #1A1917; white-space: nowrap; }
/* Muted, not full-strength, so it reads as a secondary line under the
   name rather than competing with it — same translucent-on-both-
   backgrounds trick in both header states so it stays readable whether
   the header is transparent (light page behind it) or solid dark
   (.is-scrolled). */
.mm-logo-tagline { font-weight: 600; font-size: 11px; letter-spacing: .03em; color: rgba(26, 25, 23, .6); white-space: nowrap; transition: color .3s ease; }

/* Floating pill CTA shown only below the header on mobile (see the 960px
   block below) — positioned against .mm-header itself (fixed, so this
   rides along with it) rather than inside .mm-header-inner, so it sits
   under the pill instead of competing for room inside it. */
.mm-mobile-cta {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 20px;
  align-items: center; gap: 5px;
  width: fit-content;
  background: var(--mm-accent); color: var(--mm-accent-text);
  font-weight: 700; font-size: 13px; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.mm-mobile-cta-arrow { font-size: 13px; line-height: 1; transition: transform .15s ease; }
.mm-mobile-cta:hover .mm-mobile-cta-arrow,
.mm-mobile-cta:active .mm-mobile-cta-arrow { transform: translateX(2px); }

/* ===== Nav + mega menu ===== */
.mm-nav { flex: 1; display: flex; justify-content: center; }
.mm-menu { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.mm-menu-item { position: static; }
.mm-menu-item > a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px;
  color: #1A1917; text-decoration: none; font-weight: 600; font-size: 14.5px;
  transition: background .15s ease;
}
.mm-menu-item > a:hover { background: #F5F4F0; }
.mm-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px;
  transition: transform .15s ease, margin-top .15s ease;
}
.mm-menu-item.has-mega:hover .mm-caret,
.mm-menu-item.has-mega:focus-within .mm-caret,
.mm-menu-item.has-mega.mega-open .mm-caret { transform: rotate(225deg); margin-top: 3px; }

.mm-mega {
  /* Independently centered under the header rather than spanning it — with
     6 categories the panel needs more width than the header's own capped
     max-width (--mm-header-w) allows, so it breaks past that on its own,
     centered via left:50%+translate the same way full-bleed sections are. */
  position: absolute; top: 100%; left: 50%; right: auto;
  width: min(1500px, 96vw);
  transform: translate(-50%, 8px);
  background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  margin-top: 10px;
  /* Safety net for very short viewports — the grid + 2-col sub-lists below
     already keep this well under 78vh in normal cases. */
  max-height: 78vh;
  overflow-y: auto;
}
.mm-menu-item.has-mega:hover .mm-mega,
.mm-menu-item.has-mega:focus-within .mm-mega,
.mm-menu-item.has-mega.mega-open .mm-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.mm-mega-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 24px;
  padding: 28px 32px;
}
.mm-mega-col { min-width: 0; }
.mm-mega-col-label {
  font-size: 13px; font-weight: 700; color: #1A1917; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--mm-accent);
}
/* Each category's items are pre-sorted into Fit/Decoration/Finish groups
   (mm_mega_group_items() in functions.php) with the redundant product name
   already stripped off — a few short, labeled clusters instead of one long
   wall of near-identical phrases. */
.mm-mega-group { margin-bottom: 16px; }
.mm-mega-group:last-child { margin-bottom: 0; }
.mm-mega-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: #9E9D97; margin-bottom: 6px;
}
/* Single column, full column width per link — a 2-up grid here squeezed
   longer labels like "Distressed Embroidery" into half-width cells and
   wrapped them awkwardly. */
.mm-mega-group ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.mm-mega-group ul a {
  display: block; padding: 5px 7px; border-radius: 6px;
  color: #1A1917; text-decoration: none; font-size: 12.5px; font-weight: 600;
  line-height: 1.35; white-space: nowrap;
}
.mm-mega-group ul a:hover { background: #F5F4F0; }

@media (max-width: 1500px) {
  .mm-mega-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mm-mega-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mm-mega-inner { grid-template-columns: 1fr; }
}

/* ===== CTA + mobile toggle ===== */
.mm-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mm-btn-cta {
  background: var(--mm-accent); color: var(--mm-accent-text); font-weight: 700; font-size: 14px;
  padding: 11px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: filter .15s ease, padding .28s ease;
}
.mm-btn-cta:hover { filter: brightness(0.92); color: var(--mm-accent-text); }
.mm-header.is-scrolled .mm-btn-cta { padding: 9px 18px; }

.mm-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.mm-mobile-toggle span { width: 22px; height: 2px; background: #1A1917; border-radius: 2px; }

/* ===== Mobile / tablet drill-down drawer =====
   Structurally: a fixed backdrop + a fixed off-canvas sheet, both driven by
   an .mm-drawer-open class on <html> (not .mm-header — the drawer lives
   outside <header> so it isn't clipped/scaled by the header's own
   max-width/transform). Inside the sheet, every level of the menu tree gets
   its own full-size .mm-drawer-panel absolutely stacked on top of the
   others; only one is ever .is-active (translated on-screen) at a time,
   with the panel one level up kept as .is-behind for a subtle parallax
   push, matching the standard iOS drill-down feel. */
.mm-drawer { position: fixed; inset: 0; z-index: 10000; visibility: hidden; }
html.mm-drawer-open .mm-drawer { visibility: visible; }

.mm-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 21, 15, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
html.mm-drawer-open .mm-drawer-backdrop { opacity: 1; pointer-events: auto; }

.mm-drawer-sheet {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(86vw, 380px);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .32s ease;
  overflow: hidden;
}
html.mm-drawer-open .mm-drawer-sheet { transform: translateX(0); }

.mm-drawer-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease;
}
.mm-drawer-panel.is-active { transform: translateX(0); visibility: visible; z-index: 2; }
.mm-drawer-panel.is-behind { transform: translateX(-30%); visibility: visible; z-index: 1; }

.mm-drawer-panel-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid #F0EFEB;
}
.mm-drawer-panel-title { font-weight: 800; font-size: 16px; color: #1A1917; }
.mm-drawer-close,
.mm-drawer-back {
  box-sizing: border-box;
  width: 34px; height: 34px; padding: 0; border-radius: 999px; flex-shrink: 0;
  border: none; background: #F5F4F0; color: #1A1917; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.mm-drawer-close { margin-left: auto; }
.mm-drawer-close svg,
.mm-drawer-back svg { display: block; }
.mm-drawer-close:hover,
.mm-drawer-back:hover { background: var(--mm-accent); }

.mm-drawer-chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid #1A1917; border-bottom: 1.5px solid #1A1917;
  transform: rotate(-45deg);
}

.mm-drawer-list { list-style: none; margin: 0; padding: 8px 12px 20px; overflow-y: auto; flex: 1; }
.mm-drawer-row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  color: #1A1917; text-decoration: none; font-weight: 700; font-size: 15px;
  text-align: left;
}
.mm-drawer-row:hover { background: #F5F4F0; }
.mm-drawer-row .mm-drawer-chevron { flex-shrink: 0; }
.mm-drawer-row.is-sub { font-weight: 600; font-size: 14px; padding: 11px 10px; }

.mm-drawer-group-label {
  padding: 16px 10px 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #9E9D97;
}
.mm-drawer-list-sub > .mm-drawer-group-label:first-child { padding-top: 6px; }

.mm-drawer-cta-wrap { flex-shrink: 0; padding: 14px 20px 22px; border-top: 1px solid #F0EFEB; }
.mm-drawer-cta-wrap .mm-btn-cta { display: block; text-align: center; }

/* ===== Mobile ===== */
@media (max-width: 960px) {
  .mm-nav { display: none; }
  .mm-mobile-toggle { display: flex; }
  .mm-header-inner { padding: 0 20px; }
  .mm-logo-text { font-size: 15px; }
  .mm-logo-tagline { font-size: 10px; }
}

/* Below 540px there's no longer room for "Malinor Manufacturer" + "Get
   Quote in 5 Sec" + the hamburger on one row no matter how far the button
   is compressed — the hamburger (last in the flex row) ends up pushed past
   the right edge and clipped. Between 540-960px there's enough width to
   keep the header-row CTA next to the hamburger as normal; only below
   540px does it get swapped for the .mm-mobile-cta pill floating below
   the header instead. */
@media (max-width: 540px) {
  .mm-header-actions .mm-btn-cta { display: none; }
  .mm-mobile-cta { display: inline-flex; }
}

html.mm-drawer-open { overflow: hidden; }