/* AXM Menu System - mega navigation ([axm_mega_nav]).
 *
 * Override any --axm-mega-* property on :root (or the header) to restyle.
 * Defaults fall back to Core Framework tokens when they exist.
 */

.axm-mega,
.axm-mega-layer,
.axm-mega-drawer {
    --_ink: var(--axm-mega-ink, var(--primary, #1f2a37));
    --_text: var(--axm-mega-text, var(--base, #2b3640));
    --_muted: var(--axm-mega-muted, var(--base-muted, #606e79));
    --_bg: var(--axm-mega-bg, var(--bg-body, #fff));
    --_surface: var(--axm-mega-surface, var(--bg-surface, #f7f7f8));
    --_line: var(--axm-mega-line, var(--border-primary, #e3e5e8));
    --_promo-bg: var(--axm-mega-promo-bg, var(--_ink));
    --_promo-ink: var(--axm-mega-promo-ink, #fff);
    --_font: var(--axm-mega-font, inherit);
    --_radius: var(--axm-mega-radius, var(--radius-m, 6px));
    --_dradius: var(--axm-mega-dropdown-radius, var(--_radius));
    --_link-size: var(--axm-mega-link-size, 0.875rem);
    --_foot-size: var(--axm-mega-foot-size, calc(var(--_link-size) * 6 / 7));
    --_bar-size: var(--axm-mega-bar-size, 0.75rem);
    --_bar-weight: var(--axm-mega-bar-weight, 500);
    --_bar-case: var(--axm-mega-bar-case, uppercase);
    --_bar-tracking: var(--axm-mega-bar-tracking, 0.1em);
    --_bar-gap: var(--axm-mega-bar-gap, clamp(1rem, 1.7vw, 2rem));
    --_bar-py: var(--axm-mega-bar-py, 1.75rem);
    --_max: var(--axm-mega-max, 1440px);
    --_pad: var(--axm-mega-pad, clamp(1.25rem, 3.5vw, 3.5rem));
    --_npad: var(--axm-mega-narrow-pad, var(--axm-mega-pad, 1.25rem));
    --_gutter: var(--axm-mega-gutter, 12px);
    --_ease: cubic-bezier(.2, .7, .2, 1);
    --_z: var(--axm-mega-z, 990);
    font-family: var(--_font);
}

.axm-mega *,
.axm-mega-layer *,
.axm-mega-drawer * {
    box-sizing: border-box;
}

.axm-mega-icon {
    flex: none;
    width: 0.75em;
    height: 0.75em;
}

/* ------------------------------------------------------------------ bar */

.axm-mega {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.axm-mega__bar,
.axm-mega__list {
    display: flex;
    align-items: stretch;
}

.axm-mega__list {
    gap: var(--_bar-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.axm-mega__item {
    display: flex;
    margin: 0;
}

.axm-mega__trigger,
.axm-mega__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    padding: var(--_bar-py) 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--_ink);
    font: inherit;
    font-size: var(--_bar-size);
    font-weight: var(--_bar-weight);
    letter-spacing: var(--_bar-tracking);
    line-height: 1.2;
    text-decoration: none;
    text-transform: var(--_bar-case);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.axm-mega__trigger::after,
.axm-mega__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--_ease);
}

.axm-mega__trigger:hover::after,
.axm-mega__link:hover::after,
.axm-mega__trigger[aria-expanded="true"]::after,
.axm-mega__item.is-active > .axm-mega__trigger::after,
.axm-mega__item.is-active > .axm-mega__link::after {
    transform: scaleX(1);
}

.axm-mega.is-open .axm-mega__item.is-active:not(.is-open) > .axm-mega__trigger::after {
    transform: scaleX(0);
}

.axm-mega__caret {
    width: 0.7em;
    height: 0.7em;
    transition: transform 0.28s var(--_ease);
}

.axm-mega__trigger[aria-expanded="true"] .axm-mega__caret {
    transform: rotate(180deg);
}

.axm-mega__trigger:focus-visible,
.axm-mega__link:focus-visible,
.axm-mega__burger:focus-visible,
.axm-mega-layer :focus-visible,
.axm-mega-drawer :focus-visible {
    outline: 2px solid var(--_ink);
    outline-offset: 3px;
}

/* --------------------------------------------------------------- burger */

.axm-mega__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--_ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.axm-mega__burger-box {
    position: relative;
    display: block;
    width: 1.375rem;
    height: 0.875rem;
}

.axm-mega__burger-box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.32s var(--_ease), opacity 0.2s;
}

.axm-mega__burger-box span:nth-child(1) { top: 0; }
.axm-mega__burger-box span:nth-child(2) { top: calc(50% - 0.75px); }
.axm-mega__burger-box span:nth-child(3) { bottom: 0; }

.axm-mega.is-drawer-open .axm-mega__burger-box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.axm-mega.is-drawer-open .axm-mega__burger-box span:nth-child(2) { opacity: 0; }
.axm-mega.is-drawer-open .axm-mega__burger-box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* Breakpoint: CSS default is 1024px; JS adds is-compact / is-wide for custom values. */
@media (max-width: 1023px) {
    .axm-mega:not(.is-wide) .axm-mega__bar { display: none; }
    .axm-mega:not(.is-wide) .axm-mega__burger { display: inline-flex; }
}

.axm-mega.is-compact .axm-mega__bar { display: none; }
.axm-mega.is-compact .axm-mega__burger { display: inline-flex; }

/* --------------------------------------------------------- desktop layer */

.axm-mega-layer {
    position: fixed;
    top: var(--axm-mega-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--_z);
    pointer-events: none;
}

.axm-mega-layer[hidden],
.axm-mega-panel[hidden],
.axm-mega-drawer[hidden],
.axm-mega-view[hidden],
.axm-mega-acc__body[hidden] {
    display: none;
}

.axm-mega-layer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--axm-mega-backdrop, rgba(8, 20, 34, 0.32));
    opacity: 0;
    transition: opacity 0.3s var(--_ease);
    pointer-events: auto;
}

.axm-mega-layer.is-visible .axm-mega-layer__backdrop {
    opacity: 1;
}

.axm-mega-layer__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--axm-mega-top, 0px));
    max-height: calc(100dvh - var(--axm-mega-top, 0px));
    overflow: hidden;
    border-top: 1px solid var(--_line);
    background: var(--_bg);
    box-shadow: 0 30px 60px -30px rgba(8, 20, 34, 0.35);
    pointer-events: auto;
    contain: layout paint;
}

.axm-mega-layer__stage {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* No scrollbar while the sheet animates its height (see show() in axm-mega-nav.js). */
.axm-mega-layer.is-animating .axm-mega-layer__stage,
.axm-mega-layer:not(.is-visible) .axm-mega-layer__stage {
    overflow: hidden;
}

.axm-mega-panel {
    max-width: var(--_max);
    margin: 0 auto;
    padding: clamp(2.25rem, 3vw, 3rem) var(--_pad) 0;
}

.axm-mega-panel__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem clamp(2.5rem, 4.5vw, 5.5rem);
}

@media (min-width: 1200px) {
    .axm-mega-panel__inner {
        flex-wrap: nowrap;
    }
}

.axm-mega-panel__foot {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--_line);
}

/*
 * Fixed panel height (panel_height="fixed"): every panel shares one grid cell, so the stage is
 * as tall as the tallest panel and switching items never changes the sheet height. Inactive
 * panels keep their [hidden] attribute and stay invisible and unfocusable, but still take up space.
 */
.axm-mega-layer--fixed .axm-mega-layer__stage {
    display: grid;
}

.axm-mega-layer--fixed .axm-mega-panel,
.axm-mega-layer--fixed .axm-mega-panel[hidden] {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    width: 100%;
    min-height: var(--axm-mega-panel-min, 0px);
}

.axm-mega-layer--fixed .axm-mega-panel[hidden] {
    visibility: hidden;
}

/* Shorter panels: content stays at the top and the "View all" row sits at the bottom. */
.axm-mega-layer--fixed .axm-mega-panel::after {
    content: "";
    flex: 1 0 0;
    order: 1;
}

.axm-mega-layer--fixed .axm-mega-panel__foot {
    order: 2;
}

/*
 * Narrow panel (panel_width="narrow"): the sheet is a dropdown as wide as its longest item, placed
 * under its trigger by axm-mega-nav.js (--axm-mega-x) and kept inside the viewport. Deeper levels
 * are position:fixed flyouts placed beside their row (--axm-mega-sub-x/y), so a scrolling list
 * never clips them. The sheet drops paint containment, which would trap and clip those flyouts.
 */
.axm-mega-layer--narrow .axm-mega-layer__sheet {
    position: absolute;
    top: 0;
    left: var(--axm-mega-x, var(--_gutter));
    width: max-content;
    max-width: calc(100% - 2 * var(--_gutter));
    border: 1px solid var(--_line);
    border-radius: 0 0 var(--_dradius) var(--_dradius);
    box-shadow: 0 18px 40px -20px rgba(8, 20, 34, 0.35);
    overflow: visible;
    contain: none;
}

.axm-mega-layer--narrow.is-animating .axm-mega-layer__sheet,
.axm-mega-layer--narrow:not(.is-visible) .axm-mega-layer__sheet {
    overflow: hidden;
}

.axm-mega-layer--narrow .axm-mega-panel {
    max-width: none;
    margin: 0;
    padding: calc(var(--_npad) * 0.75) var(--_npad);
}

.axm-mega-layer--narrow .axm-mega-panel__foot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* A dropdown closes on hover-out, Escape or the backdrop; the fold button is for the full sheet. */
.axm-mega-layer--narrow .axm-mega-layer__close {
    display: none;
}

/* Prefixed with the layer so theme button rules (button:hover) do not paint the toggles. */
.axm-mega-layer .axm-mega-menu__toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 -0.5rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--_radius);
    background-color: transparent;
    box-shadow: none;
    color: var(--_muted);
    font: inherit;
    cursor: pointer;
}

.axm-mega-layer .axm-mega-menu__toggle:hover,
.axm-mega-layer .axm-mega-menu__toggle[aria-expanded="true"] {
    background-color: transparent;
    color: var(--_ink);
}

.axm-mega-menu > .axm-mega-links__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.axm-mega-menu > .axm-mega-links__item > .axm-mega-link {
    flex: 1 1 auto;
}

/* A parent without a page of its own: the whole row is the toggle. */
.axm-mega-layer .axm-mega-menu__toggle--row {
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.3rem 0;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 0;
    background-color: transparent;
    color: var(--_text);
    font-size: var(--_link-size);
    line-height: 1.45;
    text-align: left;
}

.axm-mega-layer .axm-mega-menu__toggle--row:hover,
.axm-mega-layer .axm-mega-menu__toggle--row[aria-expanded="true"] {
    color: var(--_ink);
}

.axm-mega-links__item.has-sub.is-open > .axm-mega-link {
    color: var(--_ink);
}

/* Prefixed to outrank the .axm-mega-links margin and padding reset below. */
.axm-mega-layer .axm-mega-menu--sub {
    position: fixed;
    top: var(--axm-mega-sub-y, 0px);
    left: var(--axm-mega-sub-x, 0px);
    z-index: 1;
    width: max-content;
    max-width: calc(100vw - 2 * var(--_gutter));
    max-height: calc(100vh - 2 * var(--_gutter));
    max-height: calc(100dvh - 2 * var(--_gutter));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: calc(var(--_npad) * 0.75) var(--_npad);
    border: 1px solid var(--_line);
    border-radius: 0 var(--_dradius) var(--_dradius) 0;
    background: var(--_bg);
    box-shadow: 0 18px 40px -20px rgba(8, 20, 34, 0.35);
}

/* The side against the parent list stays square; the exposed side is rounded. */
.axm-mega-layer .axm-mega-menu--sub[data-side="left"] {
    border-radius: var(--_dradius) 0 0 var(--_dradius);
}

.axm-mega-menu--sub[hidden] {
    display: none;
}

.axm-mega-panel__all,
.axm-mega-view__all {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--_ink);
    font-size: var(--_foot-size);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.axm-mega-panel__all .axm-mega-icon,
.axm-mega-promo__cta .axm-mega-icon {
    transition: transform 0.28s var(--_ease);
}

.axm-mega-panel__all:hover .axm-mega-icon,
.axm-mega-promo:hover .axm-mega-promo__cta .axm-mega-icon {
    transform: translateX(3px);
}

.axm-mega-layer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0.75rem auto 0.5rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.28s var(--_ease);
}

/* A quiet fold control: small, unfilled and always round. The doubled class
   outranks global button-radius rules such as AXM buttons.css. */
.axm-mega-layer .axm-mega-layer__close.axm-mega-layer__close {
    width: 2rem;
    height: 2rem;
    border-radius: 50% !important;
    background: transparent;
    color: var(--_muted);
}

.axm-mega-layer__close .axm-mega-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.axm-mega-layer .axm-mega-layer__close.axm-mega-layer__close:hover {
    background: var(--_surface);
    color: var(--_ink);
    transform: translateY(-1px);
}

.axm-mega-layer .axm-mega-layer__close.axm-mega-layer__close:focus-visible {
    outline: 2px solid var(--_ink);
    outline-offset: 2px;
    color: var(--_ink);
}

/* -------------------------------------------------------------- columns */

.axm-mega-col {
    flex: 0 1 12.5rem;
    min-width: 9rem;
}

.axm-mega-col--list-2 { flex: 0 1 26rem; }
.axm-mega-col--list-3 { flex: 0 1 40rem; }
.axm-mega-col--swatches,
.axm-mega-col--tiles { flex: 1 1 32rem; }
.axm-mega-col--promo { flex: 0 1 18rem; align-self: flex-start; min-width: 14rem; margin-left: auto; }

.axm-mega-col__heading,
.axm-mega-view__heading {
    display: block;
    margin: 0 0 1.25rem;
    color: var(--_ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
}

a.axm-mega-col__heading:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.axm-mega-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.axm-mega-col--list-2 > .axm-mega-links { columns: 2; column-gap: 3rem; }
.axm-mega-col--list-3 > .axm-mega-links { columns: 3; column-gap: 3rem; }

.axm-mega-links__item {
    margin: 0;
    break-inside: avoid;
}

.axm-mega-link {
    display: inline-block;
    padding: 0.3rem 0;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.15rem) / 0 1px no-repeat;
    color: var(--_text);
    font-size: var(--_link-size);
    line-height: 1.45;
    text-decoration: none;
    transition: background-size 0.3s var(--_ease), color 0.15s;
}

.axm-mega-link:hover {
    background-size: 100% 1px;
    color: var(--_ink);
}

.axm-mega-links__item.is-current > .axm-mega-link {
    color: var(--_ink);
    font-weight: 600;
}

.axm-mega-links--sub {
    padding-left: 0.875rem;
}

.axm-mega-links--sub .axm-mega-link {
    font-size: calc(var(--_link-size) * 13 / 14);
    color: var(--_muted);
}

.axm-mega-col__all {
    display: inline-block;
    margin-top: 0.875rem;
    color: var(--_ink);
    font-size: calc(var(--_link-size) * 13 / 14);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--_line);
    text-underline-offset: 0.35em;
    transition: text-decoration-color 0.2s;
}

.axm-mega-col__all:hover {
    text-decoration-color: currentColor;
}

/* ------------------------------------------------------------- swatches */

.axm-mega-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 1.75rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.axm-mega-swatches__item {
    margin: 0;
}

.axm-mega-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    color: var(--_ink);
    text-align: center;
    text-decoration: none;
}

.axm-mega-swatch__chip {
    position: relative;
    display: block;
    width: 4.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--_surface);
    box-shadow: 0 0 0 1px rgba(8, 20, 34, 0.08), 0 10px 18px -12px rgba(8, 20, 34, 0.55);
    transition: transform 0.4s var(--_ease), box-shadow 0.3s var(--_ease);
}

.axm-mega-swatch__chip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--_bg), 0 0 0 2px transparent;
    transition: box-shadow 0.3s var(--_ease);
}

.axm-mega-swatch__chip img,
.axm-mega-swatch__color {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.axm-mega-swatch:hover .axm-mega-swatch__chip,
.axm-mega-swatch:focus-visible .axm-mega-swatch__chip {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 0 2px var(--_ink), 0 16px 24px -14px rgba(8, 20, 34, 0.6);
}

.axm-mega-swatch.is-current .axm-mega-swatch__chip {
    box-shadow: 0 0 0 2px var(--_ink), 0 10px 18px -12px rgba(8, 20, 34, 0.55);
}

/* Finish badge ("New Finish") from the AXM Swatch Pro label or the item Eyebrow.
   Positioned above the chip so labelled and plain swatches stay aligned. */
.axm-mega-swatch.has-badge {
    position: relative;
}

/* Reserve the badge's height above a row that carries one, so it never meets the heading. */
.axm-mega-swatches:has(.axm-mega-swatch__badge) {
    padding-top: 0.875rem;
}

.axm-mega-swatch__badge {
    position: absolute;
    top: -1.35rem;
    left: 50%;
    z-index: 1;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: var(--axm-mega-badge-bg, #fdecea);
    color: var(--axm-mega-badge-ink, #b42318);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Swatch Pro label styles (1.8+). Circle, ribbon and image badges are a sticker on the
   chip's top-right corner, so the row needs no extra space; pills keep the slot above. */
.axm-mega-swatch__badge[class*="--"] {
    padding: 0;
    border-radius: 0;
    background: none;
    line-height: 0;
}

.axm-mega-swatch__badge .axm-label {
    display: inline-block;
    line-height: 0;
}

.axm-mega-swatch__badge .axm-label svg,
.axm-mega-swatch__badge .axm-label img {
    display: block;
    width: 100%;
    height: auto;
}

.axm-mega-swatch__badge .axm-label__pill {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: var(--axm-label-bg, #fdecea);
    color: var(--axm-label-ink, #b42318);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.axm-mega-swatch__badge--circle,
.axm-mega-swatch__badge--ribbon,
.axm-mega-swatch__badge--icon {
    top: -0.45rem;
    left: calc(50% + 1.15rem);
    width: 2.1rem;
    transform: none;
    filter: drop-shadow(0 2px 3px rgba(8, 20, 34, 0.25));
}

.axm-mega-swatch__badge--ribbon {
    top: -0.3rem;
    width: 1.8rem;
}

.axm-mega-swatch__badge--circle .axm-label,
.axm-mega-swatch__badge--ribbon .axm-label,
.axm-mega-swatch__badge--icon .axm-label {
    width: 100%;
}

.axm-mega-swatches:not(:has(.axm-mega-swatch__badge--pill, .axm-mega-swatch__badge:not([class*="--"]))) {
    padding-top: 0.5rem;
}

.axm-mega-view__group .axm-mega-swatch__badge--circle,
.axm-mega-view__group .axm-mega-swatch__badge--ribbon,
.axm-mega-view__group .axm-mega-swatch__badge--icon {
    top: -0.35rem;
    left: calc(50% + 0.95rem);
    width: 1.75rem;
    font-size: inherit;
}

.axm-mega-swatch__label {
    max-width: 9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.axm-mega-swatches--tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem 1.5rem;
}

.axm-mega-swatches--tiles > .axm-mega-swatches__item {
    flex: 1 1 10rem;
    max-width: 15rem;
}

.axm-mega-swatches--tiles .axm-mega-swatch {
    align-items: stretch;
    text-align: left;
}

.axm-mega-swatches--tiles .axm-mega-swatch__chip {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--_radius);
}

.axm-mega-swatches--tiles .axm-mega-swatch:hover .axm-mega-swatch__chip {
    transform: none;
    box-shadow: 0 0 0 1px rgba(8, 20, 34, 0.08);
}

.axm-mega-swatches--tiles .axm-mega-swatch__chip img {
    transition: transform 0.6s var(--_ease);
}

.axm-mega-swatches--tiles .axm-mega-swatch:hover img {
    transform: scale(1.05);
}

/* ---------------------------------------------------------------- promo */

.axm-mega-promo {
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    overflow: hidden;
    border-radius: var(--_radius);
    background: var(--_promo-bg);
    color: var(--_promo-ink);
    text-decoration: none;
}

.axm-mega-promo__media {
    display: block;
    overflow: hidden;
}

.axm-mega-promo__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.7s var(--_ease);
}

.axm-mega-promo:hover .axm-mega-promo__media img {
    transform: scale(1.04);
}

.axm-mega-promo__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

.axm-mega-promo__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    opacity: 0.78;
    text-transform: uppercase;
}

.axm-mega-promo__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
}

.axm-mega-promo__text {
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.86;
}

.axm-mega-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Site-wide `a:hover` / `a:visited` colours (e.g. Breakdance's link colour) outrank a
   single class; restate each menu link's own colour so hover never matches its background. */
.axm-mega-promo:is(:hover, :focus, :focus-visible, :visited, :active) {
    color: var(--_promo-ink);
}

.axm-mega__link:is(:hover, :focus, :visited, :active),
.axm-mega-col__heading:is(:hover, :focus, :visited, :active),
.axm-mega-col__all:is(:hover, :focus, :visited, :active),
.axm-mega-panel__all:is(:hover, :focus, :visited, :active),
.axm-mega-view__all:is(:hover, :focus, :visited, :active),
.axm-mega-view__row:is(:hover, :focus, :visited, :active),
.axm-mega-swatch:is(:hover, :focus, :visited, :active) {
    color: var(--_ink);
}

.axm-mega-link:is(:focus, :visited, :active) {
    color: var(--_text);
}

.axm-mega-link:hover,
.axm-mega-links__item.is-current > .axm-mega-link {
    color: var(--_ink);
}

.axm-mega-view__utility a:is(:visited, :focus) {
    color: var(--_muted);
}

.axm-mega-view__utility a:hover {
    color: var(--_ink);
}

/* --------------------------------------------------------------- drawer */

html.axm-mega-locked {
    overflow: hidden;
}

html.axm-mega-locked body {
    padding-right: var(--axm-mega-scrollbar, 0px);
    overscroll-behavior: none;
}

.axm-mega-drawer {
    position: fixed;
    inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
    z-index: calc(var(--_z) + 10);
}

.axm-mega-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 34, 0.45);
    opacity: 0;
    transition: opacity 0.32s var(--_ease);
}

.axm-mega-drawer.is-visible .axm-mega-drawer__scrim {
    opacity: 1;
}

.axm-mega-drawer__sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(26rem, 100vw);
    background: var(--_bg);
    box-shadow: -20px 0 60px -20px rgba(8, 20, 34, 0.35);
}

.axm-mega-drawer--left .axm-mega-drawer__sheet {
    right: auto;
    left: 0;
    box-shadow: 20px 0 60px -20px rgba(8, 20, 34, 0.35);
}

.axm-mega-drawer__head {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr minmax(5.5rem, auto);
    align-items: center;
    flex: none;
    min-height: 3.75rem;
    padding: env(safe-area-inset-top, 0) 0.5rem 0;
    border-bottom: 1px solid var(--_line);
}

.axm-mega-drawer__back,
.axm-mega-drawer__x {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 0;
    background: none;
    color: var(--_ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.axm-mega-drawer__back {
    grid-column: 1;
    justify-self: start;
}

.axm-mega-drawer__back[hidden] {
    display: none;
}

.axm-mega-drawer__x {
    grid-column: 3;
    justify-self: end;
    width: 2.75rem;
    justify-content: center;
    padding: 0;
}

.axm-mega-drawer__x .axm-mega-icon,
.axm-mega-drawer__back .axm-mega-icon {
    width: 1rem;
    height: 1rem;
}

.axm-mega-drawer__title {
    grid-column: 2;
    margin: 0;
    overflow: hidden;
    color: var(--_ink);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.axm-mega-drawer__views {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.axm-mega-view {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0));
    background: var(--_bg);
    -webkit-overflow-scrolling: touch;
}

.axm-mega-view:focus {
    outline: none;
}

.axm-mega-view__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.axm-mega-view__item {
    margin: 0;
}

.axm-mega-view__row,
.axm-mega-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.875rem 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--_line);
    border-radius: 0;
    background: none;
    color: var(--_ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s;
}

.axm-mega-view__row:active,
.axm-mega-acc__btn:active {
    background: var(--_surface);
}

.axm-mega-view__item.is-active > .axm-mega-view__row {
    box-shadow: inset 3px 0 0 var(--_ink);
}

.axm-mega-view__row .axm-mega-icon,
.axm-mega-acc__icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--_muted);
}

.axm-mega-acc__icon {
    transition: transform 0.3s var(--_ease);
}

.axm-mega-acc__btn[aria-expanded="true"] .axm-mega-acc__icon {
    transform: rotate(45deg);
}

.axm-mega-acc__body {
    overflow: hidden;
    border-bottom: 1px solid var(--_line);
}

.axm-mega-acc__body .axm-mega-links {
    padding: 0.5rem 1.25rem 0.25rem;
}

.axm-mega-acc__body .axm-mega-link {
    display: block;
    padding: 0.6rem 0;
    font-size: 1rem;
    background: none;
}

.axm-mega-acc__body .axm-mega-col__all {
    margin: 0 1.25rem 1rem;
}

.axm-mega-view__all {
    display: flex;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--_line);
    background: var(--_surface);
}

.axm-mega-view__group {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--_line);
}

.axm-mega-view__group .axm-mega-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 0.5rem;
}

.axm-mega-view__group .axm-mega-swatch__chip {
    width: 3.75rem;
}

.axm-mega-view__group .axm-mega-swatch__badge {
    top: -1.15rem;
    font-size: 0.625rem;
}

.axm-mega-view__group .axm-mega-swatch__label {
    font-size: 0.6875rem;
}

.axm-mega-view__group .axm-mega-swatches--tiles {
    gap: 1.25rem 1rem;
}

.axm-mega-view__group .axm-mega-swatches--tiles > .axm-mega-swatches__item {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: none;
}

.axm-mega-view__group .axm-mega-swatches--tiles .axm-mega-swatch__chip {
    width: 100%;
}

.axm-mega-view__promo {
    padding: 1.25rem;
}

.axm-mega-view__promo .axm-mega-promo {
    min-height: 0;
}

.axm-mega-view__utility {
    margin: 1.25rem 0 0;
    padding: 0 1.25rem;
    list-style: none;
}

.axm-mega-view__utility a {
    display: block;
    padding: 0.6rem 0;
    color: var(--_muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.axm-mega-view__utility a:hover {
    color: var(--_ink);
}

@media (prefers-reduced-motion: reduce) {
    .axm-mega *,
    .axm-mega-layer *,
    .axm-mega-drawer * {
        transition-duration: 0.01ms !important;
    }
}