/*
 * Magewiz Mega Menu — storefront styles.
 *
 * The bar itself deliberately keeps the theme's own `.navigation`, `.level0` and `.level-top`
 * rules; everything below styles what the mega menu adds. Colours come from the active theme's
 * design tokens where they exist, with neutral fallbacks so the module also renders sanely on a
 * stock theme.
 */

.mm-nav {
    --mm-ink: var(--ink, #1a1a18);
    --mm-slate: var(--slate, #3a3a38);
    --mm-muted: var(--muted, #888880);
    --mm-surface: var(--warm, #ffffff);
    --mm-surface-alt: var(--cream, #f5f5f2);
    --mm-border: var(--border, rgba(0, 0, 0, .11));
    --mm-accent: var(--green-ink, #2f7360);
    --mm-radius: 10px;
    --mm-panel-pad: 26px;
}

/*
 * ---- colour overrides ----
 *
 * `--mm-surface`, `--mm-slate` and `--mm-accent` are consumed by this stylesheet already, so a
 * menu- or entry-level value for those just needs to be set as an inline variable — no rule here.
 * The three below are different: the *theme* owns the bar links, so a rule must fire only once a
 * colour is actually configured. That is what the `mm-c-*` marker class is for, and why each rule
 * is written twice — the class sits on the nav for a menu colour and on the entry for an override.
 */

.navigation.mm-nav {
    background: var(--mm-bar-bg, transparent);
}

.mm-nav.mm-c-link .mm-item.level0 > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link.level0 > .mm-link.level-top {
    color: var(--mm-link);
}

.mm-nav.mm-c-link-active .mm-item.level0 > .mm-link.level-top:hover,
.mm-nav.mm-c-link-active .mm-item.level0.is-open > .mm-link.level-top,
.mm-nav.mm-c-link-active .mm-item.level0.active > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link-active.level0 > .mm-link.level-top:hover,
.mm-nav .mm-item.mm-c-link-active.level0.is-open > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link-active.level0.active > .mm-link.level-top {
    color: var(--mm-link-active);
}

/* The padding is applied at rest too, so filling the pill on hover cannot shift the row. */
.mm-nav.mm-c-link-active-bg .mm-item.level0 > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link-active-bg.level0 > .mm-link.level-top {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 6px;
    transition: background .18s ease, color .18s ease;
}

.mm-nav.mm-c-link-active-bg .mm-item.level0 > .mm-link.level-top:hover,
.mm-nav.mm-c-link-active-bg .mm-item.level0.is-open > .mm-link.level-top,
.mm-nav.mm-c-link-active-bg .mm-item.level0.active > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link-active-bg.level0 > .mm-link.level-top:hover,
.mm-nav .mm-item.mm-c-link-active-bg.level0.is-open > .mm-link.level-top,
.mm-nav .mm-item.mm-c-link-active-bg.level0.active > .mm-link.level-top {
    background: var(--mm-link-active-bg);
}

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

.mm-bar {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Preferred, but not relied upon: themes often set `.navigation li.level0 { position: relative }`
   and win on specificity. The panel's offset is measured against its real offset parent. */
.mm-item {
    position: static;
}

.mm-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mm-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mm-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.6;
}

.mm-item--has-panel > .mm-link::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .2s, opacity .2s;
}

.mm-item--has-panel.is-open > .mm-link::after {
    transform: translateY(1px) rotate(-135deg);
    opacity: 1;
}

/* ---- dropdown panel ---- */

.mm-nav {
    position: relative;
}

/*
 * Panels always break out of the nav column and span the viewport; only the inner card decides
 * how wide the content sits. `--mm-panel-shift` / `--mm-vw` are measured per panel by
 * megamenu.js against its real offset parent — see the comment there for why CSS cannot.
 */
.mm-panel {
    position: absolute;
    z-index: 210;
    top: 100%;
    left: calc(-1 * var(--mm-panel-shift, 0px));
    right: auto;
    width: var(--mm-vw, 100vw);
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.mm-item.is-open > .mm-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mm-panel__inner {
    max-width: var(--mm-max-width, 1440px);
    margin: 0 auto;
    padding: var(--mm-panel-pad);
    background: var(--mm-surface);
    border: 1.5px solid var(--mm-border);
    border-radius: var(--mm-radius);
    box-shadow: 0 24px 56px rgba(26, 26, 24, .14);
}

/* Full width: the card itself spans the viewport, with the content still gutter-aligned. */
.mm-panel--full .mm-panel__inner {
    max-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: max(var(--mm-panel-pad), calc((var(--mm-vw, 100vw) - var(--mm-max-width, 1440px)) / 2));
    padding-right: max(var(--mm-panel-pad), calc((var(--mm-vw, 100vw) - var(--mm-max-width, 1440px)) / 2));
}

/* ---- the grid: `--mm-cols` x `--mm-rows`, with widgets placed on it by `--mm-c` / `--mm-r` ---- */

.mm-grid {
    display: grid;
    grid-template-columns: repeat(var(--mm-cols, 4), minmax(0, 1fr));
    grid-template-rows: repeat(var(--mm-rows, 1), minmax(var(--mm-row-min, 0px), auto));
    gap: 22px 30px;
    align-items: start;
}

/*
 * Multi-column rather than grid: a category tree is one long ordered list, and readers expect it
 * to run *down* each column and then across. A grid would lay it out across each row instead, so
 * an alphabetical list would read Hockey / Baseball / Basketball / Bowling left-to-right.
 */
.mm-tree {
    column-count: var(--mm-cols, 4);
    column-gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-tree__branch {
    break-inside: avoid;
}

/* A multi-level tree is a set of titled blocks, so each needs air; a one-level tree is a plain
   link list and would only look gappy. */
.mm-tree--deep > .mm-tree__branch {
    margin-bottom: 15px;
}

.mm-tree__link {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    color: var(--mm-slate);
    text-decoration: none;
}

.mm-tree__link:hover {
    color: var(--mm-ink);
}

.mm-tree__link--lead {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mm-accent);
    margin-bottom: 4px;
}

.mm-tree__children {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- widgets ---- */

.mm-widget {
    grid-column: var(--mm-c, auto) / span var(--mm-cs, 1);
    grid-row: var(--mm-r, auto) / span var(--mm-rs, 1);
    min-width: 0;
}

.mm-widget__title {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mm-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mm-accent);
}

.mm-widget__title a {
    color: inherit;
    text-decoration: none;
}

/*
 * `--mm-list-cols` flows a long flat list down N columns. column-count, not a grid, for the same
 * reason the category tree uses it: a list of category names has to read *down* each column.
 */
.mm-widget__links {
    margin: 0;
    padding: 0;
    column-count: var(--mm-list-cols, 1);
    column-gap: 30px;
    list-style: none;
}

.mm-widget__links > li {
    break-inside: avoid;
}

.mm-widget__links > li > a,
.mm-widget__links > li > span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mm-slate);
    text-decoration: none;
}

.mm-widget__links > li > a:hover {
    color: var(--mm-ink);
}

.mm-widget__links--thumbs > li > a {
    padding: 4px 0;
}

.mm-widget__thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--mm-surface-alt);
}

.mm-widget__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 8px 0;
    border-radius: 8px;
}

.mm-widget__all {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-accent);
    text-decoration: underline;
}

.mm-widget__content {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mm-slate);
}

.mm-widget__content img {
    max-width: 100%;
    height: auto;
}

/* banner */

.mm-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--mm-surface-alt);
    text-decoration: none;
}

/* Targeted at the `img`, not at `.mm-banner__image`: a WebP module (Yireo_Webp2 here) wraps the
   image in a `<picture>` and copies the class onto the wrapper, where `object-fit` does nothing
   and `aspect-ratio` would size an element that is not the image. */
.mm-banner picture {
    display: block;
}

.mm-banner img {
    display: block;
    width: 100%;
    /* Tiles sit side by side in the grid, so source images of different proportions are
       normalised rather than left to set their own height. The cap keeps a wide tile in a
       wide panel from turning the dropdown into a full-screen billboard. */
    aspect-ratio: 16 / 9;
    max-height: 220px;
    object-fit: cover;
}

.mm-banner__caption {
    display: block;
    padding: 12px 14px;
}

.mm-banner__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--mm-ink);
}

.mm-banner__text {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--mm-muted);
}

.mm-banner__button {
    display: inline-block;
    margin-top: 9px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mm-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* products */

.mm-products {
    display: grid;
    grid-template-columns: repeat(var(--mm-product-cols, 2), minmax(0, 1fr));
    gap: 14px;
}

.mm-product {
    display: block;
    text-decoration: none;
}

.mm-product__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: var(--mm-surface-alt);
}

.mm-product__name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--mm-slate);
}

.mm-product__price {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mm-ink);
}

.mm-product__price .price-box {
    margin: 0;
}

/* ---- page dim ---- */

.mm-dim {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(26, 26, 24, .38);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.mm-dim.is-visible {
    opacity: 1;
}

/* ---- flat lists (top bar / footer columns) ---- */

.mm-list__title {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mm-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-list__items a {
    text-decoration: none;
}

/* The top bar renders its items in a row rather than a column. */
.mm-list--inline .mm-list__items,
[data-mm-location="header_top"] .mm-list__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

/* ---- mobile: burger + off-canvas ---- */

.mm-burger {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.mm-burger__bars,
.mm-burger__bars::before,
.mm-burger__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--ink, #1a1a18);
    border-radius: 2px;
}

.mm-burger__bars::before,
.mm-burger__bars::after {
    content: '';
    position: relative;
}

.mm-burger__bars::before { top: -6px; }
.mm-burger__bars::after { top: 4px; }

.mm-oc {
    position: fixed;
    inset: 0;
    z-index: 320;
}

.mm-oc[hidden] {
    display: none;
}

.mm-oc__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 24, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.mm-oc.is-open .mm-oc__backdrop {
    opacity: 1;
}

.mm-oc__drawer {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(88vw, 380px);
    display: flex;
    flex-direction: column;
    background: var(--mm-surface, #fff);
    transform: translateX(-100%);
    transition: transform .3s var(--ease-drawer, cubic-bezier(.32, .72, 0, 1));
}

.mm-oc.is-open .mm-oc__drawer {
    transform: none;
}

.mm-oc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .11));
}

.mm-oc__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mm-oc__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.mm-oc__viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.mm-oc__panel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 6px 0 24px;
    list-style: none;
    overflow-y: auto;
    background: var(--mm-surface, #fff);
    transform: translateX(100%);
    transition: transform .28s var(--ease-drawer, cubic-bezier(.32, .72, 0, 1));
}

.mm-oc__panel--root {
    transform: none;
}

.mm-oc__panel.is-active {
    transform: none;
}

.mm-oc__panel[hidden] {
    display: none;
}

.mm-oc__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .07));
}

.mm-oc__link {
    flex: 1 1 auto;
    padding: 13px 18px;
    font-size: 14px;
    color: var(--mm-slate, var(--slate, #3a3a38));
    text-decoration: none;
}

.mm-oc__link--all {
    font-weight: 700;
    color: var(--mm-accent, #2f7360);
}

.mm-oc__drill {
    flex: 0 0 48px;
    align-self: stretch;
    border: none;
    border-left: 1px solid var(--border, rgba(0, 0, 0, .07));
    background: transparent;
    cursor: pointer;
    position: relative;
}

.mm-oc__drill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: translate(-60%, -50%) rotate(45deg);
    opacity: .6;
}

.mm-oc__row--back {
    background: var(--mm-surface-alt, #f5f5f2);
}

.mm-oc__back {
    width: 100%;
    padding: 13px 18px 13px 34px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    position: relative;
    color: inherit;
}

.mm-oc__back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 7px;
    height: 7px;
    border-bottom: 1.6px solid currentColor;
    border-left: 1.6px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.mm-oc__group {
    padding: 16px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mm-muted, #888880);
}

.mm-oc__group a {
    color: inherit;
    text-decoration: none;
}

body.mm-oc-open {
    overflow: hidden;
}

/*
 * ---- responsive ----
 *
 * The desktop/mobile switch itself is NOT here: it depends on the configured breakpoint and is
 * emitted inline by megamenu.phtml, so a merchant can move it without a static-content deploy.
 */

@media (max-width: 1280px) {
    .mm-panel__inner {
        padding: 20px;
    }

    .mm-grid,
    .mm-tree {
        gap: 18px 22px;
    }

    /*
     * Below this width four columns of widgets stop being readable. The panel becomes a single
     * stack in reading order — which the DOM is already in, because Item::getWidgets() sorts by
     * row then column — so every placement is dropped rather than squeezed.
     */
    .mm-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .mm-grid > .mm-widget {
        grid-column: auto / span 1;
        grid-row: auto;
    }
}