/* AlterSmoke — overrides for AlterMegaMenu
 * Refactor aligned on Figma components (file TIZjsWyaJBNWOSahY7I7Zy):
 *   31:2581 E-cigarettes · 31:2582 E-liquides · 31:2583 Accessoires · 31:2584 Magasins
 * Tokens : alter-tokens.css (--as-*). Scope strictly under #altermegamenu.
 */

/* ---------- Root bar ---------- */
#altermegamenu.am {
  width: 100%;
  /* Sync flex gap math with our 32px columns gap (base default is 18px) */
  --am-gap: var(--as-spacing-lg);
}

#altermegamenu .am__root {
  display: flex;
  align-items: center;
  gap: 0;
}

#altermegamenu .am__rootItem {
  position: static;
}

#altermegamenu .am__rootLink {
  display: inline-flex;
  align-items: center;
  padding: 18px;
  text-decoration: none;
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-semibold);
  font-size: var(--as-label);
  line-height: 1;
}

#altermegamenu .am__rootLink:focus-visible {
  outline: var(--as-focus-ring);
  outline-offset: 2px;
}

/* ---------- Toggle (mobile) ---------- */
#altermegamenu .am__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Panel shell (desktop) ----------
 * Panel is positioned relative to #altermegamenu (position:relative in
 * altermegamenu.css) so its base X is constant across all root items.
 * Width follows Figma specs (bounded card, not full-width banner).
 * JS clamps horizontally if the natural right edge overflows the viewport.
 */
#altermegamenu .am__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 620px;
  max-width: min(960px, calc(100vw - var(--as-spacing-md-plus) * 2));
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--as-z-dropdown);
  background: var(--as-white);
  border-radius: var(--as-radius-large);
  box-shadow: var(--as-shadow-main);
  border: 1px solid var(--as-grey-200);
  transition:
    opacity var(--as-transition-base) var(--as-ease-out),
    visibility var(--as-transition-base) var(--as-ease-out),
    transform var(--as-transition-base) var(--as-ease-out);
}

/* Wider panel for items with 4+ columns (E-liquides) */
#altermegamenu .am__panel:has(.am__col--6 ~ .am__col--6) {
  max-width: min(1200px, calc(100vw - var(--as-spacing-md-plus) * 2));
}

/* Panels with a brand_logos block need room for its 4×5 grid (Figma 31:2581,
 * 31:2582). Force to Figma surface width (~936px content + 32px padding). */
#altermegamenu .am__panel:has(.am__block--brand_logos) {
  min-width: 960px;
  max-width: min(960px, calc(100vw - var(--as-spacing-md-plus) * 2));
}

#altermegamenu .am__rootItem.is-open > .am__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#altermegamenu .am__panelInner {
  padding: var(--as-spacing-lg);
  background: var(--as-white);
  border-radius: var(--as-radius-large);
}

/* ---------- Desktop overlay (dims page below the header while a panel is open) ---------- */
#altermegamenu .am__overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; /* JS sets the real top = nav bottom */
  background: rgba(0, 0, 0, 0.25);
  z-index: calc(var(--as-z-dropdown) - 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--as-transition-base) var(--as-ease-out),
    visibility var(--as-transition-base) var(--as-ease-out);
}

body.am-panel-open #altermegamenu .am__overlay {
  opacity: 1;
  visibility: visible;
}

#altermegamenu .am__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--as-spacing-lg);
  padding: 0;
}

/* col--12 takes the whole row. Used for DIY row 2 in E-liquides. */
#altermegamenu .am__col--12 {
  flex: 0 0 100%;
  width: 100%;
}

/* ---------- Section titles (Figma: Small Label 14px medium amaranth + 2px underline) ---------- */
#altermegamenu .amm__block_title {
  margin: 0 0 8px;
  padding-bottom: 4px;
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-small-label);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--as-amaranth);
  border-bottom: 2px solid var(--as-amaranth);
}

/* Breathing room above a block title that follows another block in the same
 * column (e.g. e-liquide Classics/Premium/DIY stacked under a previous list):
 * 32px separates the sections clearly. The first title of a column keeps its
 * flush top so it aligns with the panel top. */
#altermegamenu .am__col > .am__block + .am__block > .amm__block_title:first-child,
#altermegamenu .am__col > .am__block + .am__block > .am__twolists > .amm__block_title:first-child {
  margin-top: 32px;
}

#altermegamenu .amm__block_title a {
  color: inherit;
  text-decoration: none;
}

#altermegamenu .amm__block_title a:hover {
  color: var(--as-amaranth-hover);
}

/* ---------- Blog editorial selection (alterblog_pinned_manual): cover cards ---------- */
#altermegamenu .am__blogSelection {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--as-spacing-md);
}

#altermegamenu .am__blogSelectionCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

#altermegamenu .am__blogSelectionCard_media {
  aspect-ratio: 16 / 10;
  border-radius: var(--as-radius-main, 8px);
  background-color: var(--as-grey-100, #ededf3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#altermegamenu .am__blogSelectionCard_media--empty {
  background-image: var(--as-gradient-card, linear-gradient(135deg, #2d1f3d 0%, #6b2d5c 60%, #e62249 100%));
}

#altermegamenu .am__blogSelectionCard_title {
  font-family: var(--as-font-family);
  font-size: var(--as-small-label);
  line-height: 1.35;
  color: var(--as-grey-900);
}

#altermegamenu .am__blogSelectionCard:hover .am__blogSelectionCard_title {
  color: var(--as-amaranth);
}

/* Desktop: the editorial selection spans the full panel width as its own
 * row of 4 cards (reuses the am__col--12 full-width pattern via :has), and
 * leads the panel (order:-1) so "Sélection de la rédaction" sits FIRST,
 * full-width, above the other blog columns. */
@media (min-width: 992px) {
  #altermegamenu .am__col:has(> .am__block--alterblog_pinned_manual) {
    flex: 0 0 100%;
    width: 100%;
    order: -1;
  }

  #altermegamenu .am__blogSelection {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Simple links list (fallback) ---------- */
#altermegamenu .am__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

#altermegamenu .am__list li { margin: 0; }

#altermegamenu .am__list a {
  display: inline-block;
  padding: 0;
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--as-grey-900);
  text-decoration: none;
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__list a:hover {
  color: var(--as-amaranth);
}

/* ---------- Cards (Nouveautés / Top Ventes — Figma: 140px tall, 22px semibold label) ---------- */
#altermegamenu .am__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Single card → full width (E-liquides Top Ventes) */
#altermegamenu .am__block:has(.am__cards > .am__card:only-child) .am__cards {
  grid-template-columns: 1fr;
}

#altermegamenu .am__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 140px;
  padding: 16px;
  overflow: clip;
  text-decoration: none;
  background: var(--as-grey-900);
  isolation: isolate;
}

/* Figma: first card in a pair gets left radius, second gets right radius */
#altermegamenu .am__cards > .am__card:first-child {
  border-radius: 6px 0 0 6px;
}
#altermegamenu .am__cards > .am__card:last-child {
  border-radius: 0 6px 6px 0;
}
#altermegamenu .am__cards > .am__card:only-child {
  border-radius: 6px;
}

#altermegamenu .am__cardImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  transition: transform var(--as-transition-base) var(--as-ease-out);
}

/* Figma: gradient overlay from 60% transparent to 0.65 black — ensures label
 * readability regardless of the uploaded image brightness. */
#altermegamenu .am__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 60%,
    rgba(0, 0, 0, 0.65)
  );
  transition: background var(--as-transition-base) var(--as-ease-out);
}

#altermegamenu .am__card:hover .am__cardImg {
  transform: scale(1.04);
}

#altermegamenu .am__card:hover::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.75)
  );
}

#altermegamenu .am__cardLabel {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  top: auto;
  z-index: 2;
  color: var(--as-white);
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-semibold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: none;
}

/* ---------- Icon tiles (Kits / DIY — Figma 9:490, 282:12079) ----------
 * Each tile: h=60px icon slot + 10px gap + 16px label.
 * Layout uses flex so N items auto-distribute in 1 row (1 col per item).
 * Works for 3 (Kits), 4 (DIY), or any count added later in BO. */
#altermegamenu .am__tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

#altermegamenu .am__tiles > .am__tile {
  flex: 1 0 0;
  min-width: 0;
}

#altermegamenu .am__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  text-decoration: none;
  color: var(--as-grey-900);
  font-family: var(--as-font-family);
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__tile:hover {
  color: var(--as-amaranth);
}

/* Icon images : laisser dimensions naturelles du SVG s'exprimer jusqu'au cap.
 * width/height en `auto` + max-* évite la déformation des SVG dont le viewBox
 * n'est pas carré, ou dont l'icône est centrée dans un frame avec padding. */
#altermegamenu .am__tileImg {
  width: auto;
  height: auto;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

#altermegamenu .am__tileLabel {
  font-size: var(--as-label);
  font-weight: var(--as-fw-medium);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ---------- Icon links (Débutants — Figma: 60px icon-slot, 16px gap, label 16px medium) ---------- */
#altermegamenu .am__icons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
}

/* Auto grid when block has ≥4 items and is in a wide column */
#altermegamenu .am__col--6 .am__icons,
#altermegamenu .am__col--8 .am__icons,
#altermegamenu .am__col--12 .am__icons {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#altermegamenu .am__icon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  text-decoration: none;
  color: var(--as-grey-900);
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__icon:hover {
  color: var(--as-amaranth);
}

#altermegamenu .am__icon img {
  width: auto;
  height: auto;
  max-width: 80px;
  max-height: 32px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Accessoires top-level (col--12) : SVG carrés viewBox 60×60 avec width/height
 * "100%" → naturalWidth/Height fallback 300×150 (2:1) côté browser. La règle
 * Débutants ci-dessus produit alors une boîte IMG 80×32 qui déforme le SVG
 * (étirement horizontal). Slot icône fixe carré pour rendre le SVG 1:1. */
#altermegamenu .am__col--12 .am__icon img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  flex: 0 0 60px;
}

/* ---------- Icon + text links (Pièces détachées / Accessoires — Figma: icon 60x60, gap 10px, 16px label) ---------- */
#altermegamenu .am__icontext {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--as-spacing-lg);
  padding: 0;
}

/* Accessoires standalone : 3 cols × 2 rows (Figma 31:2583) */
#altermegamenu .am__col--12 .am__icontext {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-spacing-lg);
}

#altermegamenu .am__icontext_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  text-decoration: none;
  color: var(--as-grey-900);
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__icontext_item:hover {
  color: var(--as-amaranth);
}

#altermegamenu .am__icontext_item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 60px;
}

/* Single column fallback when block is narrow (col span < 6) */
#altermegamenu .am__col--3 .am__icontext,
#altermegamenu .am__col--4 .am__icontext {
  grid-template-columns: 1fr;
}

/* ---------- Brand logos (Marques — Figma: 2 cols × 5 rows, item height 60px, logo 60×60 square SVG) ---------- */
#altermegamenu .am__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 16px;
  column-gap: 8px;
  padding: 0;
  align-items: center;
  justify-items: center;
}

#altermegamenu .am__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  transition: opacity var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__logo:hover { opacity: 0.7; }

/* Logos ship at varied native sizes — bound them to a uniform display box so
 * tall logos (Big Papa) and small text marks (A&L) read at consistent scale.
 * Override base altermegamenu.css `.am__logo img { max-height: 34px }`. */
#altermegamenu .am__logo img {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 64px;
  display: block;
  filter: none;
  object-fit: contain;
}

/* E-liquides 5-col grid (col--8) packs 22 logos in 5×5 → cap tighter so logos
 * don't crowd each other or push grid height beyond Figma surface. */
#altermegamenu .am__col--8 .am__logo img,
#altermegamenu .am__col--12 .am__logo img {
  max-width: 100px;
  max-height: 44px;
}

/* Wider brand grids: E-liquides (col--8/12) → 5 cols (Figma 31:2582); E-cigs (col--6) stays 2-col */
#altermegamenu .am__col--8 .am__logos,
#altermegamenu .am__col--12 .am__logos {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------- Two lists (E-liquides 10ML / 50ML — Figma: 14px title 2px border, items 10px gap) ---------- */
#altermegamenu .am__twolists {
  display: flex;
  gap: var(--as-spacing-md);
  padding: 0;
}

#altermegamenu .am__twolists_col { flex: 1; }

#altermegamenu .am__twolists_title {
  margin-bottom: var(--as-spacing-sm);
  padding-bottom: 6px;
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-small-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--as-grey-900);
  border-bottom: 2px solid var(--as-amaranth);
}

#altermegamenu .am__twolists ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

#altermegamenu .am__twolists a {
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-label);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--as-grey-900);
  text-decoration: none;
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__twolists a:hover {
  color: var(--as-amaranth);
}

/* Hide mobile drawer footer on desktop (rendered in DOM but only visible in mobile drawer) */
.am__drawerFooter { display: none; }

/* ---------- Burger icon (header trigger for mobile drawer) ---------- */
.am-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.am-burger__bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 22px;
  height: 16px;
  pointer-events: none;
}

.am-burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--as-white);
  border-radius: 1px;
  transition: transform var(--as-transition-fast) var(--as-ease-out),
              opacity var(--as-transition-fast) var(--as-ease-out);
}

/* Adapt to light header surfaces (when header has no dark gradient) */
.am-header-top--light .am-burger__bar,
header[data-theme="light"] .am-burger__bar {
  background: var(--as-grey-900);
}

.am-burger:focus { outline: none; }
.am-burger:focus-visible {
  outline: 2px solid var(--as-amaranth);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Show burger only on mobile widths */
@media (max-width: 991.98px) {
  .am-burger { display: inline-flex; }
}

/* When the drawer is open, burger morphs into close (X) */
.am-burger[aria-expanded="true"] .am-burger__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.am-burger[aria-expanded="true"] .am-burger__bar:nth-child(2) {
  opacity: 0;
}
.am-burger[aria-expanded="true"] .am-burger__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- StorePlus dropdown — Magasins (Figma 13:1241) ---------- */
#altermegamenu .am__panel--storeplus {
  min-width: 1264px;
  max-width: min(1264px, calc(100vw - var(--as-spacing-md-plus) * 2));
}

#altermegamenu .am__columns--storeplus {
  display: flex;
  align-items: flex-start;
  gap: var(--as-spacing-lg);
}

#altermegamenu .am__col--storeplus_left {
  flex: 1 1 0;
  min-width: 0;
}

#altermegamenu .am__col--storeplus_right {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--as-spacing-md);
}

#altermegamenu .am__storeplus_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-spacing-lg);
}

#altermegamenu .am__storeplus_subcol .amm__block_subtitle {
  margin: 32px 0 var(--as-spacing-sm);
  padding-bottom: 6px;
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-small-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--as-grey-900);
  border-bottom: 1px solid var(--as-grey-900);
}

#altermegamenu .am__storeplus_subcol .amm__block_subtitle a {
  color: inherit;
  text-decoration: none;
}

#altermegamenu .am__storeplus_subcol .am__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#altermegamenu .am__storeplus_subcol .am__list li a {
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--as-grey-900);
  text-decoration: none;
  transition: color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__storeplus_subcol .am__list li a:hover {
  color: var(--as-amaranth);
}

/* CTA "Prendre rendez-vous" — Figma 167:8609 (250x64) */
#altermegamenu .am__storeplus_cta {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  width: 250px;
  height: 64px;
  margin-top: var(--as-spacing-md);
  padding: 10px 16px;
  border: 1px solid var(--as-grey-200);
  border-radius: var(--as-radius-main);
  background: var(--as-white);
  text-decoration: none;
  transition:
    background var(--as-transition-fast) var(--as-ease-out),
    border-color var(--as-transition-fast) var(--as-ease-out);
}

#altermegamenu .am__storeplus_cta_icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--as-amaranth);
}

#altermegamenu .am__storeplus_cta_icon svg {
  display: block;
  width: 20px;
  height: 18px;
}

#altermegamenu .am__storeplus_cta_text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#altermegamenu .am__storeplus_cta:hover {
  background: var(--as-grey-050, #f7f7f7);
  border-color: var(--as-amaranth);
}

#altermegamenu .am__storeplus_cta_kicker {
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-medium);
  font-size: var(--as-small-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--as-amaranth);
}

#altermegamenu .am__storeplus_cta_label {
  font-family: var(--as-font-family);
  font-weight: var(--as-fw-semibold);
  font-size: var(--as-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--as-grey-900);
}

/* Mobile: stack vertically */
@media (max-width: 991.98px) {
  /* Override desktop min/max-width rules from :has() selectors so panels
   * fit any mobile viewport (drawer accordion). */
  #altermegamenu .am__panel--storeplus,
  #altermegamenu .am__panel:has(.am__block--brand_logos),
  #altermegamenu .am__panel:has(.am__col--6 ~ .am__col--6) {
    min-width: 0;
    max-width: none;
  }

  /* Storeplus layout collapses in drawer */
  #altermegamenu .am__columns--storeplus { flex-direction: column; }
  #altermegamenu .am__col--storeplus_right { flex: 1 1 auto; width: 100%; }
  #altermegamenu .am__storeplus_grid { grid-template-columns: 1fr; }
  #altermegamenu .am__storeplus_cta { width: 100%; }

  /* E-liquides DIY-in-col--8 stays valid on mobile (no merge needed) */
  #altermegamenu .am__columns:has(> .am__col--4 + .am__col--8 + .am__col--12) > .am__col--12 {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
  }

  /* Panel surfaces transparent so the drawer dark gradient shows through */
  #altermegamenu .am__panel,
  #altermegamenu .am__panelInner {
    background: transparent;
    box-shadow: none;
    border: 0;
  }

  /* All link / list / item text turns white on the dark drawer */
  #altermegamenu .am__list li a,
  #altermegamenu .am__twolists li a,
  #altermegamenu .am__icon,
  #altermegamenu .am__icon span,
  #altermegamenu .am__icontext_item,
  #altermegamenu .am__icontext_item span,
  #altermegamenu .am__tile,
  #altermegamenu .am__tileLabel,
  #altermegamenu .amm__block_subtitle,
  #altermegamenu .amm__block_subtitle a,
  #altermegamenu .am__blogArticles li a {
    color: var(--as-white);
  }

  /* Sub-titles (PARIS / IDF / 10ML / 50ML / etc.) keep amaranth border
   * but switch to white text/border for contrast on the dark gradient */
  #altermegamenu .am__storeplus_subcol .amm__block_subtitle {
    color: var(--as-white);
    border-bottom-color: rgba(255, 255, 255, 0.5);
  }
  #altermegamenu .am__twolists_title {
    color: var(--as-amaranth);
  }

  /* Icons / SVG glyphs invert so the dark line-art reads on dark bg */
  #altermegamenu .am__icon img,
  #altermegamenu .am__icontext_item img,
  #altermegamenu .am__tile img,
  #altermegamenu .am__tileImg {
    filter: invert(1) brightness(1.4);
  }

  /* Brand logos brighten so the dark glyphs become visible on dark bg */
  #altermegamenu .am__logo img {
    filter: invert(1) brightness(1.4);
  }
}

/* ---------- (legacy storeplus selectors below) ---------- */
#altermegamenu .am__rootItem[data-am-item-id="storeplus"] .am__rootLink {
  padding-right: 28px;
}

/* ================================================================
 * Mobile menu (≤ 991px) — offcanvas drawer
 *   • Drawer: white surface, edge-to-edge safe-area aware
 *   • Root items: dark (grey-900) band with white text
 *   • Submenu panels: white, smooth accordion expand
 *   • One-submenu-at-a-time (JS openPanel already enforces this)
 * ================================================================ */
@media (max-width: 991px) {

  /* ---- Drawer shell — full-screen on mobile ----
   * Cross-OS notes:
   *   - safe-area insets handle iOS notch + Android nav-bar
   *   - -webkit-overflow-scrolling: touch keeps iOS momentum scroll
   *   - overscroll-behavior: contain prevents iOS pull-to-refresh from
   *     bouncing the page behind the drawer
   *   - 100dvh fallbacks to vh on browsers without dvh (Firefox <100, etc.)
   *   - flex column lets the footer stick at bottom while the menu list
   *     scrolls between header and footer */
  #altermegamenu .am__drawer {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-900) 100%);
    color: var(--as-white);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none;
  }

  /* The menu list scrolls between header and footer */
  #altermegamenu .am__root {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #altermegamenu .am__backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  /* ---- Drawer header (transparent over the dark gradient) ---- */
  #altermegamenu .am__drawerHeader {
    padding: 14px 20px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
  }

  #altermegamenu .am__drawerTitle {
    font-family: var(--as-font-family);
    font-weight: var(--as-fw-semibold);
    font-size: var(--as-label);
    letter-spacing: 0.02em;
    color: var(--as-white);
  }

  #altermegamenu .am__drawerClose {
    width: 40px;
    height: 40px;
    -webkit-tap-highlight-color: transparent;
  }
  #altermegamenu .am__drawerClose::before,
  #altermegamenu .am__drawerClose::after {
    background: var(--as-white);
  }

  /* ---- Drawer sticky footer + CTA RDV (mobile) ---- */
  #altermegamenu .am__drawerFooter {
    display: block;
    flex: 0 0 auto;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--as-grey-900) 0%, var(--as-black) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #altermegamenu .am__drawerCta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    background: var(--as-white);
    border-radius: var(--as-radius-main, 8px);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--as-transition-fast) var(--as-ease-out);
  }
  #altermegamenu .am__drawerCta:hover,
  #altermegamenu .am__drawerCta:active {
    background: var(--as-grey-050, #eeeeee);
  }
  #altermegamenu .am__drawerCta_kicker {
    font-family: var(--as-font-family);
    font-weight: var(--as-fw-medium);
    font-size: var(--as-small-label);
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--as-amaranth);
  }
  #altermegamenu .am__drawerCta_label {
    font-family: var(--as-font-family);
    font-weight: var(--as-fw-semibold);
    font-size: var(--as-label);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--as-grey-900);
  }

  #altermegamenu .am__drawerSearch {
    padding: 12px 20px;
    margin: 0;
  }

  /* ---- Root list (black band) ---- */
  #altermegamenu .am__root {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--as-grey-900);
  }

  #altermegamenu .am__rootItem {
    position: relative;
    display: block;
    width: 100%;
    align-self: stretch;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
  }
  #altermegamenu .am__rootItem:last-child {
    border-bottom: 0;
  }

  #altermegamenu .am__rootLink {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 60px 18px 20px;
    color: var(--as-white);
    background: transparent;
    font-family: var(--as-font-family);
    font-weight: var(--as-fw-medium);
    font-size: var(--as-label);
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-transform: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--as-transition-fast) var(--as-ease-out),
                color var(--as-transition-fast) var(--as-ease-out);
  }
  #altermegamenu .am__rootLink:focus { outline: none; }
  #altermegamenu .am__rootLink:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: -2px;
  }

  #altermegamenu .am__rootLink:hover,
  #altermegamenu .am__rootLink:focus-visible {
    color: var(--as-white);
  }

  /* Open or pressed state — subtle lift */
  #altermegamenu .am__rootItem.is-open > .am__rootLink,
  #altermegamenu .am__rootLink:active {
    background: var(--as-grey-700);
  }

  /* ---- Toggle chevron — compact tap target on the right side ---- */
  #altermegamenu .am__toggle {
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--as-white);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    transition: background var(--as-transition-fast) var(--as-ease-out);
  }
  #altermegamenu .am__toggle:focus { outline: none; }
  #altermegamenu .am__toggle:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: 2px;
  }
  #altermegamenu .am__toggle:active {
    background: rgba(255, 255, 255, 0.06);
  }

  #altermegamenu .am__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--as-white);
    border-bottom: 2px solid var(--as-white);
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform var(--as-transition-base) var(--as-ease-out);
    will-change: transform;
  }

  #altermegamenu .am__rootItem.is-open .am__toggle::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* ---- Panel: accordion expand via max-height (JS sets target px) ---- */
  #altermegamenu .am__panel {
    display: block;
    position: static;
    min-width: 0;
    max-width: none;
    max-height: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    transition: max-height var(--as-transition-base) var(--as-ease-out);
    will-change: max-height;
  }

  #altermegamenu .am__panelInner {
    padding: 20px;
    max-width: none;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  /* ---- Desktop overlay: hidden on mobile (drawer has its own backdrop) ---- */
  #altermegamenu .am__overlay {
    display: none;
  }

  /* ---- Columns inside panel: stack vertically on mobile ---- */
  #altermegamenu .am__columns {
    flex-direction: column;
    gap: var(--as-spacing-md);
    padding: 0;
  }

  #altermegamenu .am__col,
  #altermegamenu .am__col--3,
  #altermegamenu .am__col--4,
  #altermegamenu .am__col--6,
  #altermegamenu .am__col--8,
  #altermegamenu .am__col--12 {
    width: 100%;
    min-width: 0;
  }

  /* DIY-under-Marques rule (desktop) MUST be neutralized on mobile — it used
   * calc with margin-left:auto which would create offset on single-col layout. */
  #altermegamenu .am__columns:has(> .am__col--4 + .am__col--8 + .am__col--12:last-child) > .am__col--12:last-child {
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
  }

  /* ---- Inner blocks: mobile-friendly grid densities ---- */
  #altermegamenu .am__icontext {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #altermegamenu .am__col--12 .am__icontext {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #altermegamenu .am__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #altermegamenu .am__logos,
  #altermegamenu .am__col--8 .am__logos,
  #altermegamenu .am__col--12 .am__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ---- Cards inside panel: stack, full width ---- */
  #altermegamenu .am__cards {
    grid-template-columns: 1fr;
  }
  #altermegamenu .am__cards > .am__card:first-child,
  #altermegamenu .am__cards > .am__card:last-child {
    border-radius: 6px;
  }

  /* ---- Icon/text item mobile sizing adjustments ---- */
  #altermegamenu .am__icontext_item img,
  #altermegamenu .am__icon img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  #altermegamenu .am__tileImg {
    height: 48px;
    max-width: 48px;
    flex: 0 0 48px;
  }
}

/* Reduced motion — respect user preference (no accordion slide) */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  #altermegamenu .am__panel,
  #altermegamenu .am__toggle::after,
  #altermegamenu .am__rootLink {
    transition: none !important;
  }
}


/* ============================================================================
 * Migrated from classic-child/assets/css/custom.css (Lot 5b — 2026-04-24)
 * Section originally labelled "MODULE: altermegamenu (.am-*)" containing
 * .am-topbar, .am-header, .am-search, .am-icons, #altermegamenu .am__*,
 * #header sticky rules, .am-header-top, .am-burger, .am-logo, responsive.
 * Home to the module is more coherent; module already loads this file via
 * registerFrontAssets (priority 155) since Lot 2.
 * ============================================================================ */

/* ============ MODULE: altermegamenu (.am-*) ============ */

.am-topbar {
    background: var(--as-grey-900);
    color: var(--as-white);
    font-size: 12px;
    line-height: 1.2;
    padding: 12px 32px;
}

.am-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.am-topbar__left,
.am-topbar__center,
.am-topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.am-topbar__left {

    min-width: 0;
}

.am-topbar__text {
    white-space: nowrap;
}

.am-topbar__mif {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.am-topbar__icon {
    height: 22px;
    width: auto;
    display: inline-block;
}
#header .container::after{content: inherit}
.am-topbar__store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
line-height: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}
.am-topbar__store span{color:var(--as-white)}

.am-topbar__store:hover {
    text-decoration: underline;
}

/* Hook avis (tu adaptes selon ton module) */
.am-topbar__center .agr-banner-avis,
.am-topbar__center .banner-avis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* ---- AM: Header main ---- */

.am-header {
    background: var(--as-black);
    color: var(--as-white);
}

/* `.am-header__inner / __logo / __h1 / __logoImg / __menu / __search / __icons`
   rules dropped Lot C.3 — these selectors never matched any real markup.
   classic-child `templates/_partials/header.tpl` uses BEM with simpler classes :
   `.am-header-top__inner`, `.am-logo`, `.am-logo__h1`, `.am-logo__img`,
   `.am-menu`, `.am-search`, `.am-icons`. The canonical layout lives at l.1430+
   (`.am-header-top__inner`) and the responsive mobile rules at l.1470+. */

/* Cart badge (ps_shoppingcart) */
#_desktop_cart .blockcart a {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#_desktop_cart .cart-products-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;

    color: var(--as-white);
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- AM: Megamenu overrides ---- */

#altermegamenu .am__root {
    display: flex;
    align-items: center;
    gap: 26px;
}

#altermegamenu .am__rootLink {
    color: var(--as-white);
    text-decoration: none;
    font-weight: 500;
}

/* Theme override neutralizer — defeats classic Bootstrap a:hover (cyan + underline) */
#altermegamenu .am__rootLink,
#altermegamenu .am__rootLink:hover,
#altermegamenu .am__rootLink:focus,
#altermegamenu .am__rootLink:active,
#altermegamenu .am__rootLink:visited {
    text-decoration: none;
}

/* ---- AM: Responsive ---- */

@media (max-width: 991.98px) {
    /* Topbar: wrap propre */
    .am-topbar {
        padding: 8px 12px;
    }
    .am-topbar__inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 4px 8px;
    }

    .am-topbar__left,
    .am-topbar__center,
    .am-topbar__right {
        justify-content: center;
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* Texte « Cigarettes électroniques et e-liquides Premium » : wrap au lieu de
       être tronqué par le nowrap desktop. Le slogan est secondaire en mobile. */
    .am-topbar__text {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }

    /* Header responsive layout : dead code dropped Lot C.3.
       The `.am-header__inner / __logo / __icons / __search / __menu` selectors
       never matched any real markup (classic-child header.tpl uses
       `.am-header-top__inner / .am-logo / .am-icons / .am-search / .am-menu`).
       The canonical mobile layout lives further below at l.1510+. */

    #altermegamenu .am__root {
        gap: 16px;
    }
}/* ---- Sticky header (hide on scroll-down, reveal on scroll-up) ----
   Le sticky est sur #header (pas .am-header-top) car sticky ne fonctionne
   que dans les limites du parent. #header contient topbar + header-top ;
   un top négatif = hauteur de la topbar fait que la topbar scroll hors de
   vue tandis que header-top colle au viewport.                              */
#header {
    position: sticky;
    top: 0;                        /* JS ajuste à -topbarHeight au chargement */
    z-index: var(--as-z-header, 300);
    transition: transform .35s cubic-bezier(.4,0,.2,1),
                box-shadow .35s cubic-bezier(.4,0,.2,1);
    /* PAS de will-change:transform ici — ça crée un containing block
       qui casse position:fixed du megamenu offcanvas (#altermegamenu) */
}
#header.am-header--hidden {
    transform: translateY(-100%);
    pointer-events: none;
}
/* Reveal instantly on scroll-up (no downward slide): the slide briefly exposed
   the white page background in the header's vacated slot above the hero on fast
   scroll-up. Hiding keeps its smooth upward slide; only the transform reveal is
   made instant (box-shadow still eases). */
#header:not(.am-header--hidden) {
    transition: box-shadow .35s cubic-bezier(.4,0,.2,1);
}
#header.am-header--shadow {
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
    #header { transition: none; }
}

/* header container */
.am-header-top {
    background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-900) 100%);
}
.am-header-top__inner{
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap:wrap;
    gap:12px;
    padding:20px 32px;
}

/* burger */
.am-burger{
    display:none;              /* desktop */
    width:44px; height:44px;
    border:0; background:transparent;
    align-items:center; justify-content:center;
    padding:0;
}
/* logo */
.am-logo{ flex:0 0 auto; }
.am-logo__h1{ margin:0; line-height:0; }
.am-logo__img{ width:auto; display:block; }

/* desktop layout */
.am-menu{  min-width:0; }
.am-search{ flex:0 0 360px; max-width:420px; }
.am-icons--desktop{ flex:0 0 auto; display:flex; align-items:center; gap:16px; }
.am-icons--mobile{ display:none; }

/* mid viewport 992-1279 : 5 menu items (~670px) + logo + icons + search
   ne tiennent pas sur 1 ligne. On garde le menu desktop sur ligne 1
   (logo + menu + icons), search descend en 2e ligne pleine largeur.
   Pattern identique au layout mobile <992 (cf @media max-width:991.98). */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .am-search{
        flex:1 1 100%;
        order:10;
        max-width:none;
    }
}

/* ============ HEADER ICONS A11Y (Lot 7-4 HDR-002) ============
   Header icon links/buttons in .am-icons (desktop + mobile).
   - min 40x40 click-target (WCAG 2.5.5 AA enhanced size).
   - inline-flex centring : inner <img>/<svg> stays at its natural size.
   - min-width (not width) lets cart link grow naturally to fit
     icon + .cart-products-count badge.
   - .am-burger sits outside .am-icons (already 44x44 at l.1403).
   - :focus-visible covered globally by Lot 7-1 (FRM-001) — no rule needed.
   ============================================================ */
.am-icons a,
.am-icons button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* mobile layout */
@media (max-width: 991.98px) {
    .am-header-top__inner{padding: 12px; gap:8px;}
    .am-topbar{display: none}
    .am-burger{ display:inline-flex; flex:0 0 auto; }
    .am-icons--mobile{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
    .am-icons--desktop{ display:none; }

    /* menu offcanvas = hors flux en mobile (absolute retire du flex layout,
       le #altermegamenu dedans est position:fixed donc s'affiche normalement) */
    .am-menu{ position:absolute; }

    /* centre le logo entre burger et icônes */
    .am-logo{
        flex:1 1 0;
        display:flex;
        justify-content:center;
        min-width:0;
    }
    .am-logo__img{ max-width:100%; height:22px; }

    /* search en 2e ligne sur HP (si elle n’est pas déplacée) */
    .am-search{
        flex:1 1 100%;
        order:10;
        max-width:none;
    }

    /* hors HP : le JS ajoute body.am-search-in-drawer et déplace le widget */
    body.am-search-in-drawer .am-search{ display:none; }
}

/* ============================================================
   HEADER MOBILE + MENU — Lot 5h-1 (extracted from custom.css)
   Source: custom.css @media (max-width: 991.98px) l.646-738 pre-lot.
   - HEADER MOBILE: header-banner, cart-products-count, mobile-top,
     menu-icon, header-nav, search-mobile-bottom, _mobile_logo, d-none-mobile
   - MENU: menu-bottom, arrow
   Note: 2nd @media (max-width: 991.98px) co-existing with layout @media
   above is intentional (pattern validated Lot 5g-mobile-listing, D-009).
   ============================================================ */
@media (max-width: 991.98px) {
    .menu-bottom {
        margin-top: 32px
    }
    .menu-bottom a { padding-bottom: 8px }

    .arrow {
        height: 30px;
        right: 15px;
        padding: 42px 16px;
    }

    #header .cart-products-count {
        margin-left: 4px
    }

    #header .header-nav .blockcart {
        background: none
    }

    .cart-products-count {
        color: var(--as-white)
    }

    .header-banner {
        display: none
    }

    .mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-900) 100%);
    }

    #header .header-nav #menu-icon {
        background: none;
        margin: 0 !important;
        padding: 0
    }

    #header .header-nav #menu-icon img {
        width: 25px
    }

    #header .header-nav #menu-icon .material-icons {
        color: var(--as-white);
        line-height: inherit;
        position: relative;
        top: -2px
    }

    .header-nav {
        height: 50px;
        padding: 0
    }

    .search-mobile-bottom img {
        width: 25px
    }

    #header .header-nav .cart-preview.active {
        background: none
    }

    #header .header-nav .blockcart {
        height: inherit;
        padding: 0;
        margin: inherit
    }

    #header .header-nav .user-info {
        margin-top: 0
    }

    #_mobile_logo img {
        width: 150px;
        max-width: 100%
    }

    #_mobile_logo h1 {
        margin: 0
    }

    .d-none-mobile {
        display: none
    }
}

/* ========================================================================
   Desktop megamenu hover (Figma May 2026)
   - hovered link: stays #FFFFFF + bottom border #E62249 collé en bas du header
     sur la largeur du texte
   - sibling links: fade vers #EDEDF3
   - submenu : collé sous le header, top corners non arrondis
   ======================================================================== */
@media (min-width: 992px) {
    /* Offset = .am-header-top__inner padding-bottom (20px). Used to push the
       amaranth bar + the submenu panel down to the actual header bottom edge,
       compensating the vertical padding of the header inner container. */
    #altermegamenu {
        --am-header-pad-bottom: 20px;
    }

    /* Promote .am__root to the panel positioning context so every dropdown
       anchors to the same horizontal origin (no more "random" left edge
       drifting per item width). */
    #altermegamenu .am__root {
        align-items: stretch;
        position: relative;
    }

    #altermegamenu .am__rootItem {
        display: flex;
        align-items: center;
        position: static;
    }

    #altermegamenu .am__rootLink {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 100%;
        color: var(--as-white);
        transition: color .15s ease;
    }

    /* Sibling fade: when ANY rootItem is hovered or open, dim all root links.
       Driven by a JS-managed class (.am__root--hovering / .am__rootItem.is-hovered)
       for max browser compat, plus :hover / :has() fallbacks. */
    #altermegamenu .am__root.am__root--hovering .am__rootLink,
    #altermegamenu .am__root:hover .am__rootLink,
    #altermegamenu .am__root:has(.am__rootItem.is-open) .am__rootLink {
        color: var(--as-grey-100);
    }

    /* …except the hovered / open one — keep it pure white.
       Specificity bumped (.am__root scope) so the exception wins over fade. */
    #altermegamenu .am__root .am__rootItem.is-hovered > .am__rootLink,
    #altermegamenu .am__root .am__rootItem:hover > .am__rootLink,
    #altermegamenu .am__root .am__rootItem.is-open > .am__rootLink,
    #altermegamenu .am__root .am__rootLink:focus-visible {
        color: var(--as-white);
    }

    /* Amaranth indicator + invisible hover bridge covering the header
       padding-bottom gap. The pseudo spans the full gap below the root
       link; the 3px amaranth bar is painted on its BOTTOM edge so it
       sits flush against the header bottom, right above the dropdown
       panel (which starts at header.bottom = gap end). The full hit area
       lets the cursor cross the gap from the root link to the dropdown
       panel without losing :hover. */
    #altermegamenu .am__rootLink::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(-1 * var(--am-header-pad-bottom));
        height: var(--am-header-pad-bottom);
        background: transparent;
        border-bottom: 3px solid var(--as-amaranth);
        box-sizing: border-box;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .18s var(--as-ease-out, ease);
        pointer-events: auto;
    }

    #altermegamenu .am__rootItem:hover > .am__rootLink::after,
    #altermegamenu .am__rootItem.is-open > .am__rootLink::after {
        transform: scaleX(1);
    }

    /* Submenu panel: glued to header bottom, top corners flat. */
    #altermegamenu .am__panel {
        top: calc(100% + var(--am-header-pad-bottom));
        margin-top: 0;
        transform: translateY(0);
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    #altermegamenu .am__rootItem.is-open > .am__panel {
        transform: translateY(0);
    }

    #altermegamenu .am__panelInner {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}