/*! mega-menu (Figma hamburger 4691:12063/12295/12865) — copied verbatim from the demo's app.css lines 390–563 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

body.menu-open{overflow:hidden;}
.mega-menu{/* above every header variant (they sit at z-index:1000) — on mobile the
     panel covers the WHOLE screen, header and logo included */position:fixed;top:0;bottom:0;right:0;z-index:1200;width:402px;max-width:100vw;background:var(--bg-component-hamburger);display:flex;flex-direction:column;overflow-y:auto;/* slides in from its edge (physical right; revisit with translate logical when
     English lands). visibility must NOT ride the eased transition — WebKit can
     hold the panel hidden through it; it flips instantly on open and waits for
     the slide-out on close. */transform:translateX(100%);visibility:hidden;transition:transform .3s ease, visibility 0s linear .3s;}
.mega-menu.is-open{transform:translateX(0);visibility:visible;transition:transform .3s ease, visibility 0s;}
/* mobile-only top bar inside the panel — STICKY over the internal scroll
   (Figma annotation on 4691:12865: fullscreen with inner scroll, top bar
   sticky), so the close X never scrolls away */
.mega-menu__top{direction:ltr;display:none;position:sticky;top:0;z-index:2;background:var(--bg-component-hamburger);height:60px;padding:0 var(--sp-normal);justify-content:space-between;align-items:center;flex-shrink:0;}
.mega-menu__top .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);color:var(--content-primary);}
/* left group: lang toggle + theme moon (Figma: 61 + gap 10 + 24 = 95) */
.mega-menu__utility{display:flex;gap:var(--sp-tight);align-items:center;}
button.mega-menu__close{background:none;border:0;margin:0;padding:0;cursor:pointer;font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);color:var(--content-primary);}
@media (max-width:767px){
  .mega-menu{width:100vw;}
  .mega-menu__top{display:flex;}
}
/* opened from a compact/hero header — the panel carries its own top bar
   (lang + theme + X) and covers the header, since that header collapses its
   utility while the menu is open (Figma compact hamburger variant) */
.mega-menu.mega-menu--compact .mega-menu__top{display:flex;}
/* the 20px inset column holding everything below the sticky top bar; the
   menu rows sit at px:0 so their dividers span this width (inset 20 from the
   panel edge, matching Figma) */
.mega-menu__screen{padding:0 var(--sp-normal);display:flex;flex-direction:column;}
/* spacer component — transparent, token-driven vertical gaps */
.mega-menu__spacer{flex-shrink:0;}
.mega-menu__spacer--normal{height:var(--sp-normal);}
.mega-menu__spacer--loose{height:var(--sp-loose);}
/* search — Default: dark pill. Click-in (.is-active) → white field (Variant2),
   dark icons, separator + clear X revealed; the field bg eases between them. */
.menu-search{direction:ltr;height:40px;width:100%;background:var(--bg-basic-white);border:var(--bw-thin) solid var(--border-normal);border-radius:var(--radius-pill);padding:0 var(--sp-snug);display:flex;gap:var(--sp-x-tight);align-items:center;transition:background-color .2s ease, border-color .2s ease;}
.menu-search .ic{font-family:var(--typo-font-icon);flex-shrink:0;color:var(--content-primary);transition:color .2s ease;}
.menu-search__icon{font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);}
.menu-search__separator{font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);display:none;}
.menu-search__clear{font-size:var(--typo-icon-xs-font-size);line-height:var(--typo-icon-xs-line-height);background:none;border:0;margin:0;padding:0;cursor:pointer;color:var(--content-primary);display:none;}
.menu-search__input{flex:1;min-width:1px;direction:rtl;background:none;border:0;padding:var(--sp-height-fix) 0 0;margin:0;color:var(--content-primary);}
.menu-search__input::placeholder{color:var(--content-tertiary);}
.menu-search__input:focus::placeholder{opacity:0;}
/* every search field draws its OWN affordances — kill the browser's native
   search widgets (the extra clear X, the decoration) */
.menu-search.is-active{background:var(--bg-static-white);}
.menu-search.is-active .ic{color:var(--content-static-darkest);}
.menu-search.is-active .menu-search__input{color:var(--content-static-darkest);}
/* the separator + clear X appear only once there is text to clear */
.menu-search.is-typing .menu-search__separator{display:block;animation:mm-fade-in .2s ease;}
.menu-search.is-typing .menu-search__clear{display:block;animation:mm-fade-in .2s ease;}
@keyframes mm-fade-in{ from{opacity:0;} to{opacity:1;} }
.mega-menu .button-primary--donate{width:100%;}
/* menu rows */
.mega-menu__group{display:flex;flex-direction:column;}
/* section heading — solid border/normal divider, Almoni display, uppercase */
.mega-menu__group-title{border-top:var(--bw-thin) solid var(--border-normal);padding:var(--sp-tight) 0;letter-spacing:var(--typo-navigation-menu-level-0-letter-spacing);text-transform:uppercase;color:var(--content-breaking);text-align:right;}
/* item flows with the document direction — label first, caret after it (no
   row-reverse; RTL puts the caret on the label's left by itself). Each item
   carries a dashed border/hairline divider on top. */
.mega-menu__link{border-top:var(--bw-thin) dotted var(--border-hairline);padding:var(--sp-tight) 0;display:flex;gap:var(--sp-x-tight);align-items:center;justify-content:space-between;color:var(--content-primary);text-decoration:none;cursor:pointer;}
/* one glyph, rotated: closed points into the reading direction, open points down
   (same animated-caret pattern as the byline) */
.mega-menu__link .dropdown-trigger{font-family:var(--typo-font-icon);font-size:var(--typo-icon-xs-font-size);line-height:var(--typo-icon-xs-line-height);}
.mega-menu__link .dropdown-trigger::before{content:"\e006";display:inline-block;transform:rotate(0);transition:transform .25s ease;}
.mega-menu__link.is-open .dropdown-trigger::before{transform:rotate(180deg);}
/* level-2 items fold open under their level-1 (grid-rows pattern, like ab-fold) */
.mega-menu__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.mega-menu__link.is-open + .mega-menu__fold{grid-template-rows:1fr;}
.mega-menu__fold-inner{overflow:hidden;min-height:0;}
/* level-2 = plain text terms, stacked vertically, right-aligned (Figma
   menu-level-2-tag: transparent pill, resting border invisible; hover reveals
   a border/strong pill. The resting border is transparent at the same width so
   the hover never shifts layout. */
.mega-menu__sublist{padding:var(--sp-x-tight) 0 var(--sp-normal);/* column cross-axis start = the RIGHT edge in RTL — flex-end would send the
     tags to the left */display:flex;flex-direction:column;align-items:flex-start;opacity:0;transition:opacity .3s ease;}
.mega-menu__link.is-open + .mega-menu__fold .mega-menu__sublist{opacity:1;}
.mega-menu__tag{display:inline-flex;align-items:center;padding:var(--sp-x-tight) var(--sp-normal) var(--sp-micro) var(--sp-tight);border:var(--bw-thin) solid transparent;border-radius:var(--radius-pill);color:var(--content-primary);text-decoration:none;transition:border-color .2s ease;}
.mega-menu__tag:hover{border-color:var(--border-strong);}
/* newsletter + follow + footer — solid border/hairline dividers, centred */
/* menu-newsletter-promo (Figma 6023:58458) — the component itself; the
   mega-menu and the footer both render it and only add their own chrome */
.newsletter-promo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-normal);}
.newsletter-promo__title{color:var(--content-tertiary);text-align:center;margin:0;}
.mm-newsletter{border-top:var(--bw-thin) solid var(--border-hairline);padding:var(--sp-normal) 0;}
.mega-menu__follow{border-top:var(--bw-thin) solid var(--border-hairline);padding:var(--sp-normal) 0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-normal);}
.mega-menu__follow h3{color:var(--content-tertiary);text-align:center;margin:0;}
.mega-menu__follow .mega-menu__row{direction:ltr;display:flex;gap:var(--sp-tight);align-items:center;justify-content:center;}
/* the demo draws each network as a span; every entry here carries a real URL, so it is a link (C5) —
   and a link's own underline is the one thing that has to be turned off to keep the same picture */
.mega-menu__follow .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-lg-font-size);line-height:var(--typo-icon-lg-line-height);color:var(--content-primary);text-decoration:none;}
.mega-menu__credit{border-top:var(--bw-thin) solid var(--border-hairline);padding:var(--sp-tight) 0;display:flex;justify-content:center;}
.mega-menu__credit p{margin:0;direction:ltr;color:var(--content-subhead);}
.mega-menu__credit b{font-weight:var(--typo-text-bold-sm-font-weight);}
/*! the port's own four declarations, and they are the demo's own four (components.js 775-781): the design centre draws the panel as a COMPONENT, in flow, where the demo's `static` attribute does the same thing from script. The panel is fixed AND hidden until it is opened, and neither is true of a case on a shelf — with only the first two the specimen kept its 402x1644 box and painted nothing, which every geometry channel reads as present. The transition goes with the visibility: the base rule delays it .3s on the way out. The selector is three deep because a BRAND may place the panel - [data-brand="boker"] .mega-menu slides it the other way - and a specimen on a shelf is placed by the shelf, which is what the demo says with an inline style. Ties on specificity are decided by file order, and that is not a thing to depend on. */
[data-brand] .mega-menu.mega-menu--static{position:static;transform:none;visibility:visible;transition:none;}