/**
 * Mega menu — default presentation.
 *
 * Three surfaces, one block: the navigation band (`--`less), the category rail
 * (`.kicked-megamenu--rail`) and the home page's entry cards
 * (`.kicked-megamenu--cards`). All three carry `.kicked-megamenu`, so the
 * contract below is declared once and every surface inherits it.
 *
 * THEMING CONTRACT
 * ----------------
 * This file is self-contained: drop the module into any PrestaShop 9 shop and it
 * renders correctly with neutral defaults, no theme work required.
 *
 * To restyle it, a theme sets the custom properties declared on
 * `.kicked-megamenu` below — it should not need to override a single selector.
 * That is the whole point of the indirection: selector overrides break whenever
 * this file changes, custom properties do not.
 *
 *   .kicked-megamenu {
 *     --kmm-accent: var(--my-brand-colour);
 *     --kmm-font-display: "My Display Face", sans-serif;
 *   }
 *
 * The one thing that cannot be a custom property is the breakpoint at which the
 * floating panel collapses into a stacked accordion — media queries cannot read
 * custom properties. It is 992px. Override the two media blocks at the bottom if
 * your theme's grid disagrees.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

/* Everything below sits in a cascade layer on purpose: layered CSS always loses
   to unlayered CSS, so a host theme's ordinary stylesheet overrides these
   defaults without needing to match load order or out-specify a selector. */
@layer kicked-megamenu {


.kicked-megamenu {
  /* Typography */
  --kmm-font-display: inherit;
  --kmm-font-mono: ui-monospace, sfmono-regular, menlo, monospace;
  --kmm-tab-size: 0.875rem;
  --kmm-link-size: 0.8125rem;

  /* Column headings' weight. Declared here so the knob is part of the visible
     contract — a theme whose display face carries its weight in the family
     itself (or wants heavier caps) sets this rather than a selector. */
  --kmm-heading-weight: 600;

  /* Menu chrome is set solid, not at body measure: a host theme's body
     line-height is tuned for paragraphs, and inheriting it makes the band and
     every panel row taller than the design draws them. Declared as a property
     rather than hard-coded so a theme with a different idea can say so. */
  --kmm-line-height: normal;

  /* One tab's padding and its internal gap, named because three other rules
     have to agree with them: the chevron's box, the optical pull-back on the
     leading tab, and the mobile accordion's row. */
  --kmm-tab-padding-block: 0.8125rem;
  --kmm-tab-padding-inline: 0.875rem;
  --kmm-tab-gap: 0.4375rem;

  /* Colour. --kmm-muted is body-weight secondary copy (panel links); --kmm-meta
     is the lighter grey the design reserves for captions and notes, one step
     back from it. They are separate properties because a theme's palette
     normally has separate tokens for the two roles. */
  --kmm-ink: #18181b;
  --kmm-muted: #52525b;
  --kmm-meta: #71717a;
  --kmm-accent: #b91c1c;
  --kmm-surface: #fff;
  --kmm-border: #e4e4e7;

  /* The tab for the page you are on, and for the section that page belongs to.
     The design has no state for it — it is a static mock and never shows a
     current page — so this stays inside the palette it already uses rather than
     inventing a rule, an underline or a background nothing else in the band has. */
  --kmm-tab-current: var(--kmm-accent);

  /* Panel */
  --kmm-panel-bg: var(--kmm-surface);
  --kmm-panel-radius: 0 0 1rem 1rem;
  --kmm-panel-shadow: 0 22px 44px rgb(0 0 0 / 14%);
  --kmm-panel-padding: 1.625rem 1.75rem;
  --kmm-panel-gap: 1.5rem 2.5rem;

  /* Horizontal inset of the two home surfaces, which are full page sections
     rather than menu parts; match your shell's gutter. The floating panel does
     NOT use it: it is positioned against this element, so it spans the tabs
     whatever the host wraps them in. */
  --kmm-gutter: 1rem;
  --kmm-shell-max: 77.5rem;

  /* Promo card */
  --kmm-promo-bg: #27272a;
  --kmm-promo-ink: #fff;
  --kmm-promo-eyebrow: #f59e0b;
  --kmm-promo-subtitle: #a1a1aa;
  --kmm-promo-radius: 0.875rem;

  /* Category rail */
  --kmm-chip-fg: var(--kmm-ink);
  --kmm-chip-bg: var(--kmm-surface);
  --kmm-chip-border: var(--kmm-border);
  --kmm-chip-border-hover: #d4d4d8;
  --kmm-chip-well-bg: #f4f4f5;
  --kmm-chip-well-fg: var(--kmm-accent);

  /* Entry cards. The two light treatments share the text colours below; the dark
     one redeclares them on itself, so a theme tunes three values, not nine. */
  --kmm-card-fg: var(--kmm-ink);
  --kmm-card-eyebrow: var(--kmm-accent);
  --kmm-card-cta: var(--kmm-accent);
  --kmm-card-media-bg: var(--kmm-surface);
  --kmm-card-glyph: var(--kmm-accent);
  --kmm-card-ink-bg: var(--kmm-promo-bg);
  --kmm-card-ink-fg: var(--kmm-promo-ink);
  --kmm-card-ink-eyebrow: var(--kmm-promo-eyebrow);
  --kmm-card-sand-bg: #fafafa;
  --kmm-card-sand-border: var(--kmm-border);
  --kmm-card-tint-bg: #fef2f2;
  --kmm-card-tint-border: #fecaca;
  --kmm-card-shadow: 0 16px 36px rgb(0 0 0 / 12%);
  --kmm-card-shadow-strong: 0 16px 36px rgb(0 0 0 / 20%);

  /* The panel's containing block, so every panel spans the whole band instead
     of hanging off the tab that opened it. It has to be THIS element and not the
     item: pinning it to the item is what makes a mega panel the width of one
     word. Relying on the host theme having a positioned wrapper is the other
     failure mode — when it has none the panel escapes to the viewport. */
  position: relative;
  line-height: var(--kmm-line-height);
}

.kicked-megamenu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: var(--kmm-tab-size);
  font-weight: 600;
  list-style: none;
}

.kicked-megamenu__item {
  position: static;
}

/* The chevron's accessible name. Its own class rather than the host theme's
   `.visually-hidden`, so a theme that spells that utility differently does not
   print "Show subcategories of Tools" next to every tab. */
.kicked-megamenu__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kicked-megamenu__tab-wrap {
  display: flex;
  align-items: center;
}

.kicked-megamenu__tab {
  display: flex;
  gap: var(--kmm-tab-gap);
  align-items: center;
  padding: var(--kmm-tab-padding-block) var(--kmm-tab-padding-inline);
  color: var(--kmm-ink);
  text-decoration: none;
}

/* The chevron is a sibling button rather than part of the link, so between the
   two the label's trailing padding would read as a gap and the chevron would sit
   short of the tab's own edge. Hand the trailing padding to the chevron: the
   label-to-glyph distance is then the tab's gap, and the tab still ends where a
   single-element tab would. */
.kicked-megamenu__item--has-panel .kicked-megamenu__tab {
  padding-inline-end: 0;
}

.kicked-megamenu__tab:hover,
.kicked-megamenu__tab:focus {
  color: var(--kmm-accent);
}

.kicked-megamenu__tab--highlight {
  gap: 0.375rem;
  color: var(--kmm-accent);
}

/* The page you are on, or the section it sits in. */
.kicked-megamenu__tab--current {
  color: var(--kmm-tab-current);
}

.kicked-megamenu__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--kmm-accent);
  border-radius: 50%;
}

.kicked-megamenu__tab-icon {
  flex: none;
  opacity: 0.7;
}

.kicked-megamenu__chevron {
  display: flex;
  align-items: center;
  padding:
    var(--kmm-tab-padding-block) var(--kmm-tab-padding-inline)
    var(--kmm-tab-padding-block) var(--kmm-tab-gap);
  color: var(--kmm-ink);
  background: none;
  border: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* The glyph rotates, not the button. The button's padding is deliberately
   asymmetric — the label's trailing space was handed to it, so it is 7px on the
   left and 14px on the right — and rotating that box swaps the two, sliding the
   chevron 7px sideways every time a panel opens. */
.kicked-megamenu__chevron svg {
  transition: transform 0.22s ease;
}

.kicked-megamenu__chevron:hover {
  opacity: 1;
}

/* --- Panel ---------------------------------------------------------------- */

.kicked-megamenu__panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kmm-panel-gap);
  padding: var(--kmm-panel-padding);
  background: var(--kmm-panel-bg);
  border: 1px solid var(--kmm-border);
  border-radius: var(--kmm-panel-radius);
  box-shadow: var(--kmm-panel-shadow);
}

.kicked-megamenu__column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 9.875rem;
}

/* 600, not 400. The design's column heading declares no weight of its own, so
   it inherits the 600 the navbar sets on the whole menu — and at 11px in a
   monospace face that difference is the whole reason the heading reads as a
   heading rather than as another link. */
.kicked-megamenu__heading {
  display: flex;
  gap: 0.4375rem;
  align-items: center;
  margin: 0 0 0.1875rem;
  font-family: var(--kmm-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--kmm-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kmm-accent);
}

.kicked-megamenu__heading-icon {
  flex: none;
}

.kicked-megamenu__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.kicked-megamenu__link {
  font-size: var(--kmm-link-size);
  font-weight: 400;
  color: var(--kmm-muted);
  text-decoration: none;
}

.kicked-megamenu__link:hover,
.kicked-megamenu__link:focus {
  color: var(--kmm-accent);
}

/* --- Promo card ----------------------------------------------------------- */

.kicked-megamenu__promo {
  display: flex;
  flex: 1 1 14.375rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  min-width: 13.75rem;
  max-width: 18.75rem;
  padding: 1.25rem;
  margin-inline-start: auto;
  color: var(--kmm-promo-ink);
  text-decoration: none;
  background: var(--kmm-promo-bg);
  border-radius: var(--kmm-promo-radius);
}

.kicked-megamenu__promo:hover,
.kicked-megamenu__promo:focus {
  color: var(--kmm-promo-ink);
}

/* Optional and absent from the design, which draws the card as copy over a dark
   panel. It sits above the copy and is height-capped so that uploading a large
   photo cannot push the call to action out of the panel. */
.kicked-megamenu__promo-image {
  display: block;
  width: 100%;
  max-height: 6.25rem; /* 100px */
  object-fit: contain;
}

.kicked-megamenu__promo-eyebrow {
  display: block;
  margin-bottom: 0.5625rem;
  font-family: var(--kmm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kmm-promo-eyebrow);
}

.kicked-megamenu__promo-title {
  display: block;
  margin-bottom: 0.4375rem;
  font-family: var(--kmm-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
}

.kicked-megamenu__promo-subtitle {
  display: block;
  font-size: 0.78125rem;
  color: var(--kmm-promo-subtitle);
}

.kicked-megamenu__promo-cta {
  padding: 0.6875rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  background: var(--kmm-accent);
  border-radius: 0.625rem;
}

/* --- Category rail -------------------------------------------------------- */
/* The same categories the band lists, read as a glanceable strip of icon chips.
   A host theme normally supplies the shell measure and the scrolling behaviour
   through its own layout classes; these declarations are what makes the rail
   stand up on its own in a theme that does not.

   Text colour is declared on the inner spans rather than on the <a>, here and on
   the cards below. This file is layered, so a host theme's unlayered
   `a { color: … }` outranks any rule we put on the link itself; an element that
   is not a link has no such rule to lose to. */

.kicked-megamenu--rail {
  max-width: var(--kmm-shell-max);
  padding-block-start: 0.875rem; /* 14px + the rail's own 4px = the design's 18px */
  padding-inline: var(--kmm-gutter);
  margin-inline: auto;
}

.kicked-megamenu__rail {
  display: flex;
  gap: 0.625rem; /* 10px */
  /* Chips lift 2px on hover, and `overflow-x: auto` computes overflow-y to
     `auto` too — without room above, the lift is clipped by the scrollport. */
  padding-block: 0.25rem; /* 4px */
  overflow-x: auto;
}

/* The scrollbar is hidden only where something else has taken over saying that
   the strip continues — a host theme that fades the edges and offers paging
   buttons marks the rail `data-lc-rail="ready"` when it does.

   Unconditionally hiding it, which is what this rule used to do, leaves a mouse
   user on a wide screen with no scrollbar, no arrows, no fade, and a wheel that
   scrolls the page: the chips past the right edge become unreachable. A strip
   that scrolls must always admit it somehow. */
.kicked-megamenu__rail[data-lc-rail='ready'] {
  scrollbar-width: none;
}

.kicked-megamenu__rail[data-lc-rail='ready']::-webkit-scrollbar {
  height: 0;
}

.kicked-megamenu__chip {
  display: flex;
  flex: none;
  gap: 0.5625rem; /* 9px */
  align-items: center;
  padding: 0.6875rem 0.9375rem; /* 11px 15px */
  font-size: 0.84375rem; /* 13.5px */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--kmm-chip-bg);
  border: 1px solid var(--kmm-chip-border);
  border-radius: 0.75rem; /* 12px */
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.kicked-megamenu__chip:hover,
.kicked-megamenu__chip:focus-visible {
  border-color: var(--kmm-chip-border-hover);
  transform: translateY(-0.125rem); /* 2px */
}

.kicked-megamenu__chip-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.875rem; /* 30px */
  height: 1.875rem;
  color: var(--kmm-chip-well-fg);
  background: var(--kmm-chip-well-bg);
  border-radius: 0.5rem; /* 8px */
}

.kicked-megamenu__chip-label {
  color: var(--kmm-chip-fg);
}

/* --- Entry cards ---------------------------------------------------------- */
/* Three treatments the template cycles by position, so a shop that promotes two
   categories or five still gets a balanced row. */

.kicked-megamenu--cards {
  max-width: var(--kmm-shell-max);
  /* Deliberately tighter than a full section: the cards follow the rail, which
     is itself tucked under whatever sits above it. */
  padding-block-start: 2.125rem; /* 34px */
  padding-inline: var(--kmm-gutter);
  margin-inline: auto;
}

.kicked-megamenu__cards-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* 12px */
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: 1.125rem; /* 18px */
}

.kicked-megamenu__cards-title {
  margin: 0;
  font-family: var(--kmm-font-display);
  font-size: clamp(1.375rem, 2.8vw, 1.75rem); /* 22px → 28px */
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kicked-megamenu__cards-note {
  font-size: 0.84375rem; /* 13.5px */
  color: var(--kmm-meta);
}

.kicked-megamenu__cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); /* 260px */
  gap: 1.125rem; /* 18px */
}

.kicked-megamenu__card {
  display: flex;
  flex-direction: column;
  min-height: 17.5rem; /* 280px */
  overflow: hidden;
  text-decoration: none;
  border-radius: 1.25rem; /* 20px */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kicked-megamenu__card:hover,
.kicked-megamenu__card:focus-visible {
  box-shadow: var(--kmm-card-shadow);
  transform: translateY(-0.25rem); /* 4px */
}

.kicked-megamenu__card--ink {
  --kmm-card-fg: var(--kmm-card-ink-fg);
  --kmm-card-eyebrow: var(--kmm-card-ink-eyebrow);
  --kmm-card-cta: var(--kmm-card-ink-fg);

  background: var(--kmm-card-ink-bg);
}

/* The dark card sits on the page with more weight than the two light ones, so
   the design lifts it out with a heavier shadow. */
.kicked-megamenu__card--ink:hover,
.kicked-megamenu__card--ink:focus-visible {
  box-shadow: var(--kmm-card-shadow-strong);
}

.kicked-megamenu__card--sand {
  background: var(--kmm-card-sand-bg);
  border: 1px solid var(--kmm-card-sand-border);
}

.kicked-megamenu__card--tint {
  background: var(--kmm-card-tint-bg);
  border: 1px solid var(--kmm-card-tint-border);
}

.kicked-megamenu__card-media {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 1.75rem; /* 28px */
  background: var(--kmm-card-media-bg);
}

.kicked-megamenu__card-image {
  width: 78%;
  max-width: 13.125rem; /* 210px */
  height: auto;
  object-fit: contain;
}

.kicked-megamenu__card-glyph {
  display: flex;
  color: var(--kmm-card-glyph);
}

.kicked-megamenu__card-body {
  padding: 1.25rem 1.375rem; /* 20px 22px */
}

.kicked-megamenu__card-eyebrow {
  display: block;
  margin-bottom: 0.4375rem; /* 7px */
  font-family: var(--kmm-font-mono);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kmm-card-eyebrow);
}

.kicked-megamenu__card-title {
  display: block;
  margin-bottom: 0.625rem; /* 10px */
  font-family: var(--kmm-font-display);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: var(--kmm-card-fg);
}

.kicked-megamenu__card-cta {
  display: inline-flex;
  gap: 0.4375rem; /* 7px */
  align-items: center;
  font-size: 0.84375rem; /* 13.5px */
  font-weight: 700;
  color: var(--kmm-card-cta);
}

/* --- Desktop: floating panel ---------------------------------------------- */

@media (min-width: 992px) {
  /* Pinned to the block, not to the item — see the note on .kicked-megamenu.
     The panel therefore starts flush under the band with no dead strip between
     tab and panel for the pointer to fall through on its way down. */
  .kicked-megamenu__panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.625rem);
    transition:
      opacity 0.2s ease,
      transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0.22s;
  }

  /* Pointer users get the panel on hover; keyboard users get it through
     :focus-within and through the chevron's aria-expanded state, which the
     script mirrors onto data-ps-state. */
  .kicked-megamenu__item:hover .kicked-megamenu__panel,
  .kicked-megamenu__item:focus-within .kicked-megamenu__panel,
  .kicked-megamenu__item[data-ps-state="open"] .kicked-megamenu__panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .kicked-megamenu__item:hover .kicked-megamenu__chevron svg,
  .kicked-megamenu__item:focus-within .kicked-megamenu__chevron svg,
  .kicked-megamenu__item[data-ps-state="open"] .kicked-megamenu__chevron svg {
    transform: rotate(180deg);
  }

  /* Escape has to beat :focus-within, or it cannot work at all: closing the
     panel leaves focus on the tab that opened it, :focus-within is still true,
     and the panel reopens in the same frame. Same specificity as the rules
     above and written after them, so dismissal wins. The script drops the state
     as soon as focus or the pointer leaves the item. */
  .kicked-megamenu__item[data-ps-state="closed"] .kicked-megamenu__panel {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.625rem);
  }

  .kicked-megamenu__item[data-ps-state="closed"] .kicked-megamenu__chevron svg {
    transform: none;
  }

  /* Optical alignment. Every tab is padded, so the leading tab's BOX sits on the
     shell edge while its TEXT starts one padding inside it — against the brand
     mark above, which has no padding, that reads as an indent. Pull the item out
     by exactly the padding it carries: the text lands on the edge, the tab keeps
     its full hit area, and the 2px to the next tab is untouched. Keyed to
     whichever item is first, not to a particular one. */
  .kicked-megamenu__list > .kicked-megamenu__item:first-child {
    margin-inline-start: calc(-1 * var(--kmm-tab-padding-inline));
  }

  /* The right-hand group. One auto margin on the item that opens it pushes it
     and everything after it to the trailing edge, the way the design's
     `<span style="flex:1">` does. The repository has already sorted the
     end-aligned placements last, so this matches exactly once. */
  .kicked-megamenu__item:not(.kicked-megamenu__item--end) + .kicked-megamenu__item--end {
    margin-inline-start: auto;
  }
}

/* --- Below 992px: stacked accordion --------------------------------------- */
/* A floating panel has nowhere to float on a narrow screen. The same markup
   becomes an in-flow disclosure, opened only by the chevron — hover is not a
   gesture that exists here. */

@media (max-width: 991.98px) {
  .kicked-megamenu__list {
    flex-direction: column;
    align-items: stretch;
  }

  .kicked-megamenu__item {
    border-bottom: 1px solid var(--kmm-border);
  }

  .kicked-megamenu__tab-wrap {
    justify-content: space-between;
  }

  /* Alignment is a left/right idea and there is no left and right in a stack —
     the end-aligned items simply come last. What survives the rotation is the
     grouping the alignment expressed: air above the first end-aligned item, so
     the utility links read as a different kind of row from the departments. */
  .kicked-megamenu__item:not(.kicked-megamenu__item--end) + .kicked-megamenu__item--end {
    margin-top: 0.875rem; /* 14px */
  }

  /* The drawer hosting this stack draws its own rule before whatever follows
     the menu; a border on the last item doubled it. */
  .kicked-megamenu__item:last-child {
    border-bottom: 0;
  }

  .kicked-megamenu__tab {
    flex: 1;
  }

  .kicked-megamenu__item--has-panel .kicked-megamenu__tab {
    padding-inline-end: var(--kmm-tab-padding-inline);
  }

  .kicked-megamenu__chevron {
    padding: var(--kmm-tab-padding-block);
  }

  .kicked-megamenu__panel {
    display: none;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .kicked-megamenu__item[data-ps-state="open"] .kicked-megamenu__panel {
    display: flex;
  }

  .kicked-megamenu__item[data-ps-state="open"] .kicked-megamenu__chevron svg {
    transform: rotate(180deg);
  }

  .kicked-megamenu__promo {
    max-width: none;
    margin-inline-start: 0;
  }

  /* --- The drawer submenu, re-set for thumbs --------------------------------
     Everything above this line is the desktop panel wearing a drawer: 13px
     muted links in airy columns, tuned for a pointer — in the drawer they
     were the complaint ("text too small, hard to tap", 2026-08-11). The same
     markup re-reads in the shop's card vocabulary: each column becomes a
     surface card, its mono heading stays as the card's label, and each link
     becomes a full-width 46px row in ink, hairline-separated, with the quiet
     trailing chevron every marketplace drawer row carries. */

  .kicked-megamenu__panel {
    flex-direction: column;
    /* Stretch, or every card shrinks to its own longest link and the stack
       reads as a staircase. */
    align-items: stretch;
    gap: 0.75rem; /* 12px between section cards */
    padding-block: 0.125rem 1rem;
  }

  .kicked-megamenu__column {
    gap: 0;
    min-width: 0;
    padding: 0.5rem 1rem 0.25rem; /* 8px 16px 4px */
    background: var(--kmm-surface);
    border: 1px solid var(--kmm-border);
    border-radius: 0.875rem; /* 14px */
  }

  .kicked-megamenu__heading {
    padding-block: 0.5rem 0.25rem;
    margin: 0;
  }

  .kicked-megamenu__links {
    gap: 0;
  }

  .kicked-megamenu__links > li + li {
    border-top: 1px solid color-mix(in srgb, var(--kmm-border) 60%, transparent);
  }

  .kicked-megamenu__link {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    min-height: 2.875rem; /* 46px — a row a thumb cannot miss */
    font-size: 1rem; /* 16px, up from the pointer's 13 */
    color: var(--kmm-ink);
  }

  .kicked-megamenu__link::after {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--kmm-meta);
    content: "\203A";
  }
}

  /* Motion is decoration here: the panel, the chevron and the lift on a chip or
     card all say "this responded", and none of them carry information the state
     does not already carry in colour and position. So they stop, and the states
     stay. The chevron keeps its rotation because a chevron that does not point
     the right way is wrong rather than merely still. */
  @media (prefers-reduced-motion: reduce) {
    .kicked-megamenu__panel,
    .kicked-megamenu__chevron svg,
    .kicked-megamenu__chip,
    .kicked-megamenu__card,
    .kicked-megamenu__promo {
      transition: none;
    }

    .kicked-megamenu__chip:hover,
    .kicked-megamenu__chip:focus-visible,
    .kicked-megamenu__card:hover,
    .kicked-megamenu__card:focus-visible {
      transform: none;
    }
  }
}