/* Mega menu (NOT generated): hand-written additions to the ported catalog menu. Tokens only (--c-*, --s-*, --p-*).
   The mock has ONE kids column and ONE "New releases" column that header.js never swaps; Magento renders one pane per top category, so the pane
   (.dv-mega__kids, the unit header.js shows and hides) dissolves into the grid and its two children take the 2nd and 3rd columns. */
.dv-chrome .dv-mega__kids.dv-mega__pane { display: contents; }
.dv-chrome .dv-mega__kids.dv-mega__pane[hidden] { display: none; }
.dv-chrome .dv-mega__kidscol { display: grid; align-content: start; gap: var(--s-sp-2); }

/* New releases cover: the name is the link text, so it wraps inside the 160 px column instead of stretching the grid. */
.dv-chrome .dv-mega__cover { min-width: 0; }
.dv-chrome .dv-mega__cover .dv-t-small { overflow-wrap: anywhere; }

/* Maldito head lockup: the mock draws it above the label of the Maldito pane, hidden until the Maldito row is hovered or focused (header.css rules). */
.dv-chrome .dv-mega__mal img { display: block; }

/* header.js moves aria-current to the row under the pointer; the mock keeps it on the first row. The Maldito retint rule that clears the accent of
   the current row (header.css, ":has(.dv-mega__cat--maldito:hover) .dv-mega__cat[aria-current]") would then also clear the Maldito row itself.
   The hovered or focused Maldito row keeps the one accent line every other row gets. */
.dv-chrome .dv-mega:has(.dv-mega__cat--maldito:hover) .dv-mega__cat.dv-mega__cat--maldito:hover,
.dv-chrome .dv-mega:has(.dv-mega__cat--maldito:focus-visible) .dv-mega__cat.dv-mega__cat--maldito:focus-visible { border-block-end-color: transparent; box-shadow: inset 0 calc(-1 * var(--s-rule-w-2)) 0 var(--s-accent); }

/* Phone drawer, two levels (card fcaeba, header.js): the category list first; a tap shows that category's subcategories in its place with a Back control.
   Above 767 px nothing here applies: the panes stay hover panels. 48 px rows, 2 px rules, no radius. */
.dv-chrome .dv-mega__back { display: none; }
@media (max-width: 767px) {
  .dv-chrome .dv-mega:not([data-level="kids"]) .dv-mega__pane { display: none; }
  .dv-chrome .dv-mega[data-level="kids"] .dv-mega__cats { display: none; }
  .dv-chrome .dv-mega[data-level="kids"] .dv-mega__back { display: flex; align-items: center; gap: var(--s-sp-2); min-height: max(var(--p-48), var(--s-target)); padding: 0; border: 0; border-block-end: var(--s-rule-w) solid var(--s-rule); border-radius: 0; background: transparent; color: var(--s-text); font: var(--t-heading-sm); text-align: start; cursor: pointer; }
  .dv-chrome .dv-mega__back .dv-icon { transform: scaleX(-1); }
  .dv-chrome .dv-mega__back:is(:hover, :focus-visible) { box-shadow: inset 0 calc(-1 * var(--s-rule-w-2)) 0 var(--s-accent); }
  .dv-chrome .dv-mega__cat[aria-expanded="true"] { box-shadow: inset 0 calc(-1 * var(--s-rule-w-2)) 0 var(--s-accent); }
}