/* =====================================================================
   Category bar (desktop, above 1024px) + phone/tablet menu (up to 1024px)
   2026-10-11. Markup: includes/mega-menu.php. Behaviour: js/mega-menu.js.
   Loaded only on pages where the new menu is on, and every rule is scoped
   to .header.mm-on / .mm-*, so nothing else on the page can change.
   Colours come from the tokens in styles.css :root (style guide §1).
   ===================================================================== */

/* ---------- Header row ---------- */

/* The logo keeps its width while the SVG is still loading, so the burger and the
   account/cart buttons no longer jump sideways when it arrives (seen on iPhone).
   "auto" = the file's own ratio wins once it has loaded (e.g. a logo replaced in Admin). */
.header.mm-on .logo img {
    aspect-ratio: auto 160 / 25.3;
}

.mm-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mm-burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
}
.mm-burger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
}

.mm-bar {
    display: none;
}

@media (max-width: 1024px) {
    /* The page links (Pricing, Tutorial, FAQ, Design Service) move into the menu. */
    .header.mm-on .nav-links {
        display: none !important;
    }
    .header.mm-on .mm-burger {
        display: flex;
    }
}

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

@media (min-width: 1025px) {
    .header.mm-on .mm-bar {
        display: block;
        position: relative;
        border-top: 1px solid var(--border);
        background: var(--bg-white);
    }
}

/* In the design editor the bar would only take room from the canvas. */
body:has(#designStudio:not(.hidden)) .header.mm-on .mm-bar {
    display: none !important;
}

.mm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    /* Items spread over the full width with equal gaps between them (owner 2026-10-11). */
    justify-content: space-between;
    gap: 2px;
    height: 48px;
    /* Safety net: if Admin ever adds more items than fit, the bar scrolls inside
       itself instead of making the whole page scroll sideways. The panels are not
       clipped by this (their containing block is .mm-bar, outside the list). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.mm-list::-webkit-scrollbar {
    display: none;
}
.mm-item {
    display: flex;
    align-items: stretch;
}
.mm-top {
    appearance: none;
    background: none;
    border: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
/* Hover = the open look, a little lighter: green text, green line, light green tint. */
.mm-top:hover,
.mm-item.is-open > .mm-top {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.mm-top:hover {
    background: var(--primary-light);
}
.mm-top .mm-chev {
    transition: transform 0.2s;
}
.mm-item.is-open > .mm-top .mm-chev {
    transform: rotate(180deg);
}
.mm-top:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
    border-radius: 4px;
}

/* A link item in the last place sits on the right as a pill. */
.mm-item-link {
    align-items: center;
}
.mm-item-link:last-child {
    margin-left: auto;
}
/* Green item (Bundles, owner 2026-10-11): a full-height green tab, as wide as its label
   like the other items; its panel lines up with the tab's right edge. */
.mm-top.mm-deal {
    justify-content: center;
    border-top-color: transparent;
    border-bottom-color: transparent;
    background: var(--primary);
    color: var(--bg-white);
    padding: 0 18px;
}
.mm-top.mm-deal:hover,
.mm-item.is-open > .mm-top.mm-deal {
    background: var(--primary-hover);
    border-bottom-color: transparent;
    color: var(--bg-white);
}
/* Solid colour (not a translucent overlay) so the sticky column title and the bottom fade
   can paint the same colour: --primary-light (10% #01b497) over white = rgb(230, 248, 245). */
.mm-item-deal .mm-panel {
    --mm-panel-bg: rgb(230, 248, 245);
    background: var(--mm-panel-bg);
}
.mm-item-deal .mm-col-title {
    border-bottom-color: rgba(1, 154, 130, 0.22);
}
.mm-item-deal .mm-col li a:hover {
    background: rgba(255, 255, 255, 0.75);
}
.mm-top.mm-deal .mm-chev {
    margin-left: -2px;
}
.mm-badge {
    display: inline-block;
    background: var(--bg-white);
    color: var(--primary-hover);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0 8px;
}

/* "More below" fade, shown by js/mega-menu.js only while the panel can scroll further. */
.mm-panel::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 36px;
    margin-top: -36px;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--mm-panel-bg, var(--bg-white)));
    opacity: 0;
    transition: opacity 0.15s;
}
.mm-panel.mm-more::after {
    opacity: 1;
}

/* Small desktops and iPad landscape (1025-1279px): a tighter bar so all items fit.
   With 8 or more items the arrows go as well (measured: 8 items need it at 1025px). */
@media (min-width: 1025px) and (max-width: 1279px) {
    .mm-top {
        font-size: 0.84rem;
        padding: 0 9px;
        gap: 4px;
    }
    .mm-top .mm-chev {
        width: 10px;
        height: 10px;
    }
    .mm-top.mm-deal {
        padding: 0 12px;
        gap: 6px;
    }
    .mm-list:has(> .mm-item:nth-child(8)) .mm-top .mm-chev {
        display: none;
    }
}

/* Preview only: an item that is switched off in Admin, shown so it can be checked. */
.mm-hidden-preview {
    opacity: 0.55;
    outline: 1px dashed var(--border-dark);
    outline-offset: -4px;
}

.mm-panel {
    --mm-panel-bg: var(--bg-white);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--mm-panel-top, 140px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mm-panel[hidden] {
    display: none;
}
.mm-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--primary-light);
    padding: 12px 24px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.mm-shopall {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
}
.mm-panel-top a {
    color: var(--primary-hover);
    font-weight: 600;
}
.mm-panel-top a:hover {
    text-decoration: underline;
}
.mm-count {
    color: var(--text-medium);
    font-size: 0.8rem;
    white-space: nowrap;
}
.mm-cols {
    display: grid;
    /* 42px wider than before: the 32px picture + gap, so names keep the same width. */
    grid-template-columns: repeat(var(--mm-cols, 1), minmax(0, 272px));
    gap: 8px 36px;
    padding: 20px 24px 24px;
}
.mm-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Column titles stay at the top of the panel while its products scroll underneath. */
.mm-col-title {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mm-panel-bg, var(--bg-white));
    padding-top: 8px;
    margin-top: -8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-dark);
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.mm-col-title b {
    font-weight: 700;
}
.mm-col-title .mm-ar {
    font-style: normal;
    display: inline-block;
    transition: transform 0.15s;
}
.mm-col-title:hover .mm-ar {
    transform: translateX(3px);
}
.mm-col-title span {
    font-weight: 400;
    color: var(--text-light);
    font-size: 0.78rem;
}
.mm-col li a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-medium);
    transition: background-color 0.15s, color 0.15s;
}
.mm-col li a:hover {
    background: var(--primary-light);
    color: var(--primary-hover);
}
/* Product pictures (menu rows): same frame as the product cards, light grey + thin border. */
.mm-thumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-light);
    border: 1px solid var(--border);
}
.mm-col-title:hover {
    color: var(--primary-hover);
}
.mm-col a:focus-visible,
.mm-panel-top a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Section jumps (#products, #faq...) land below the sticky header, not under it.
   js/mega-menu.js sets the exact header height; these are the fallbacks. */
html:has(.header.mm-on) {
    scroll-padding-top: var(--mm-sp, 96px);
}
@media (min-width: 1025px) {
    html:has(.header.mm-on) {
        scroll-padding-top: var(--mm-sp, 150px);
    }
}

/* ---------- Phone / tablet menu ---------- */

/* Above the cookie banner (99999) and the chat button (1000001) while it is open. */
.mm-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
}
.mm-drawer-root[hidden] {
    display: none;
}
.mm-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mm-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(88vw, 380px);
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-drawer-root.is-open .mm-scrim {
    opacity: 1;
}
.mm-drawer-root.is-open .mm-drawer {
    transform: none;
}
html.mm-lock,
html.mm-lock body {
    overflow: hidden;
}

.mm-dhead {
    flex: 0 0 auto;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 18px;
    border-bottom: 1px solid var(--border);
}
.mm-dlogo img {
    height: 22px;
    width: auto;
    display: block;
}
.mm-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    cursor: pointer;
}

.mm-panes {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.mm-pane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-white);
    transition: transform 0.25s ease, visibility 0s linear 0s;
}
.mm-pane-l1.is-behind {
    transform: translateX(-30%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.mm-pane-l2 {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.mm-pane-l2.is-active {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

.mm-plabel {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 600;
    line-height: 1.4;
    padding: 18px 18px 6px;
}
.mm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
}
.mm-row:hover,
.mm-row:active {
    background: var(--bg-light);
    color: var(--text-dark);
}
.mm-row .mm-chev {
    flex: 0 0 auto;
    color: var(--text-light);
}
.mm-row-plain {
    font-weight: 400;
    color: var(--text-medium);
}
.mm-row-deal,
.mm-row-deal:hover {
    color: var(--primary-hover);
    font-weight: 600;
}
.mm-row-deal .mm-badge {
    background: var(--primary);
    color: var(--bg-white);
    margin-left: 8px;
    vertical-align: 2px;
}
.mm-row-product {
    justify-content: flex-start;
    gap: 12px;
    font-weight: 400;
    font-size: 0.95rem;
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.mm-row-product .mm-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}
.mm-ds {
    display: block;
    margin: 16px 18px 24px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--accent);
    text-align: center;
    padding: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.mm-ds:hover {
    background: var(--accent);
    color: var(--bg-white);
}
.mm-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-medium);
    cursor: pointer;
}
.mm-l2-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 16px 18px 4px;
}
.mm-shopall-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 18px 4px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary-hover);
    font-weight: 600;
}
.mm-shopall-row:hover {
    color: var(--primary-hover);
}
.mm-grp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-light);
    padding: 14px 18px 2px;
}
.mm-grp a {
    color: var(--primary-hover);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    padding: 8px 0 8px 12px;
}
.mm-pane :focus-visible,
.mm-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.mm-pane .mm-pane-end {
    height: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-scrim,
    .mm-drawer,
    .mm-pane,
    .mm-top,
    .mm-top .mm-chev {
        transition: none !important;
    }
}