/*
    Storefront navigation styles, shared by every theme.

    Loaded from <head> rather than inlined beside the markup: the header renders
    inside #app, and Vue's in-DOM template compiler discards <style> elements it
    finds there, so an inline block is served by PHP and then silently dropped
    the moment Vue mounts.

    A theme adopts a variant by setting a few custom properties on its header:

        --menu-ink       text colour                (default: inherit)
        --menu-accent    hover / active colour      (default: currentColor)
        --menu-surface   dropdown panel background  (default: #fff)
        --menu-line      dropdown panel borders
*/

/* ---------------------------------------------------- shared */

.tmenu {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--menu-ink, inherit);
}

/* Long category names such as "Audio & Wearables" wrapped onto a
   second line and pushed the header out of alignment. Items stay on
   one line; if there are more than fit, the row scrolls. */
.tmenu a { white-space: nowrap; text-decoration: none; }

/* Scroll rather than wrap when the row still does not fit, with the trailing
   edge faded so a partly visible item reads as "there is more" instead of as a
   clipped one. */
.tmenu--simple,
.tmenu--modern {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.tmenu--simple::-webkit-scrollbar,
.tmenu--modern::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------- simple */

.tmenu--simple { gap: 22px; }

.tmenu--simple a {
    position: relative;
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 0;
}

.tmenu--simple a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.5px;
    background: var(--menu-accent, currentColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    content: "";
}

.tmenu--simple a:hover { color: var(--menu-accent, currentColor); }
.tmenu--simple a:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------- modern */

.tmenu--modern {
    /* The pill track is the menu's own shape, so it hugs its items instead of
       stretching to fill whatever column the header hands it. */
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--menu-ink, currentColor) 7%, transparent);
}

.tmenu--modern a {
    padding: 7px 14px;
    border-radius: 999px;
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.tmenu--modern a:hover {
    background: var(--menu-surface, #fff);
    color: var(--menu-accent, currentColor);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ------------------------------------------------------ mega */

.tmenu--mega { gap: 24px; }

.tmenu__item { position: relative; }

.tmenu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tmenu__trigger::after {
    border-top: 4px solid currentColor;
    border-right: 3.5px solid transparent;
    border-left: 3.5px solid transparent;
    content: "";
    opacity: .5;
    transition: transform .2s ease;
}

.tmenu__item:hover .tmenu__trigger { color: var(--menu-accent, currentColor); }
.tmenu__item:hover .tmenu__trigger::after { transform: rotate(180deg); }

/* The panel is full-bleed rather than dropdown-width: a mega menu
   that only spans its trigger reads as an ordinary dropdown. */
/* Anchored to the nav rather than the trigger. Centring on the trigger put
   the panel off the right edge of the viewport whenever the trigger sat near
   the end of the row — which is exactly where "All departments" lives. */
.tmenu--mega { position: relative; }
.tmenu--mega .tmenu__item { position: static; }

.tmenu__panel {
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 0;
    width: min(920px, calc(100vw - 48px));
    padding: 26px 30px;
    border: 1px solid var(--menu-line, rgba(0, 0, 0, .1));
    border-radius: 14px;
    background: var(--menu-surface, #fff);
    box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    visibility: hidden;
}

.tmenu__item:hover .tmenu__panel,
.tmenu__item:focus-within .tmenu__panel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.tmenu__cols {
    display: grid;
    gap: 10px 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tmenu__panel a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: inherit;
    font-size: 13px;
    font-weight: 550;
    transition: background .16s ease, color .16s ease;
}

.tmenu__panel a:hover {
    background: color-mix(in srgb, var(--menu-accent, currentColor) 10%, transparent);
    color: var(--menu-accent, currentColor);
}

.tmenu__panel small {
    color: color-mix(in srgb, var(--menu-ink, currentColor) 55%, transparent);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tmenu__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--menu-line, rgba(0, 0, 0, .1));
    font-size: 12px;
}

.tmenu__foot strong { font-weight: 650; }
.tmenu__foot a { padding: 0; color: var(--menu-accent, currentColor); font-weight: 700; }

@media (max-width: 900px) {
    .tmenu__panel { display: none; }
}
