/*
 * Music Legs findability layer (additive). Pairs with js/ml-findability.js.
 * Every rule targets mlf-* elements the script creates, except the two
 * phone-only header tidy-ups at the bottom. Removing this file and the
 * script restores the exact previous storefront.
 */

/* ---------- phone bar: Menu + full-width search (hidden on desktop) ---------- */
.mlf-bar { display: none; }

@media (max-width: 770px) {
    .mlf-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 900;
        padding: 8px 10px;
        background: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    }
    .mlf-menu-btn {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: 6px;
        background: #222;
        color: #fff;
        font: 700 14px/1 'Lato', sans-serif;
        text-transform: uppercase;
        letter-spacing: .04em;
        cursor: pointer;
    }
    .mlf-burger,
    .mlf-burger::before,
    .mlf-burger::after {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        position: relative;
    }
    .mlf-burger::before,
    .mlf-burger::after { content: ''; position: absolute; left: 0; }
    .mlf-burger::before { top: -6px; }
    .mlf-burger::after { top: 6px; }

    .mlf-search-slot { flex: 1 1 auto; min-width: 0; }
    .mlf-search-slot #search_mini_form { position: relative; width: 100%; margin: 0; float: none; }
    .mlf-search-slot .input-box { width: 100%; padding: 0; }
    .mlf-search-slot #search {
        width: 100% !important;
        height: 44px;
        padding: 0 46px 0 12px;
        border: 2px solid #ff73ff;
        border-radius: 6px;
        font-size: 16px; /* 16px stops iOS zooming the page on focus */
        box-sizing: border-box;
    }
    .mlf-search-slot .search-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
    }
    .mlf-search-slot #search_autocomplete { z-index: 950; }
    .mlf-search-slot #search_autocomplete ul { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* the empty header search wrapper -- hidden only once the script has moved the form */
    html.mlf-on #header #header-search { display: none !important; }

    html.mlf-locked, html.mlf-locked body { overflow: hidden; }
}

/* ---------- drawer ---------- */
.mlf-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .45);
}
.mlf-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 86%;
    max-width: 360px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
    font-family: 'Lato', sans-serif;
}
.mlf-overlay[hidden], .mlf-drawer[hidden] { display: none; }
.mlf-drawer-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #ff73ff;
    color: #fff;
}
.mlf-drawer-title { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.mlf-close {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.mlf-cats, .mlf-sub { list-style: none; margin: 0; padding: 0; }
.mlf-cat { border-bottom: 1px solid #eee; }
.mlf-cat-toggle, .mlf-cat-link {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 44px 0 16px;
    border: 0;
    background: #fff;
    color: #222;
    font: 700 16px/52px 'Lato', sans-serif;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
}
.mlf-cat-toggle::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 0;
    font-size: 22px;
    font-weight: 400;
    color: #ff73ff;
}
.mlf-cat-toggle[aria-expanded="true"] { background: #fff4ff; }
.mlf-cat-toggle[aria-expanded="true"]::after { content: '\2212'; }
.mlf-sub { padding: 4px 0 10px; background: #fffaff; }
.mlf-sub[hidden] { display: none; }
.mlf-sub a {
    display: block;
    padding: 12px 16px 12px 28px;
    color: #333;
    font-size: 15px;
    text-decoration: none;
}
.mlf-sub a:active, .mlf-sub a:hover { background: #ffe6ff; }
.mlf-sub a.mlf-all { font-weight: 700; color: #b0009f; }

/* ---------- subcategory chips (all screen sizes) ---------- */
.mlf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}
.mlf-chip {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ff73ff;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font: 600 13px/1.2 'Lato', sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.mlf-chip:hover { background: #fff0ff; color: #222; text-decoration: none; }
.mlf-chip.is-current { background: #222; border-color: #222; color: #fff; }
.mlf-chips.is-collapsed .mlf-chip.is-extra { display: none; }
.mlf-chip-more { cursor: pointer; border-style: dashed; font-family: 'Lato', sans-serif; }

@media (max-width: 770px) {
    .mlf-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -10px 14px;
        padding: 2px 10px 6px;
    }
    .mlf-chips::-webkit-scrollbar { display: none; }
    .mlf-chip { padding: 10px 14px; font-size: 14px; }
    /* phones scroll the row sideways, so every chip stays reachable */
    .mlf-chips.is-collapsed .mlf-chip.is-extra { display: inline-block; }
    .mlf-chip-more { display: none; }
}

/* ---------- search retry note ---------- */
.mlf-retry-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 4px solid #ff73ff;
    background: #fff4ff;
    color: #333;
    font-size: 14px;
}

/* ---------- layout tidy-ups ---------- */
/* An empty iframe (src="") in the product tabs leaves a 150px blank gap. */
.product-collateral iframe[src=""] { display: none; }

@media (max-width: 770px) {
    /* Homepage category circles: the CMS block's -50px margin pushes the last circle off screen. */
    .cms-index-index .col-main .fadein {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
    }
    .cms-index-index .col-main .fadein img { width: 20% !important; padding: 0 1% !important; box-sizing: border-box; }
}

/* ---------- discontinued style number ---------- */
.mlf-retired {
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid #f3c6f3;
    border-radius: 8px;
    background: #fff8ff;
    font-family: 'Lato', sans-serif;
    color: #333;
}
.mlf-retired p { margin: 0 0 8px; font-size: 15px; }
.mlf-retired .mlf-retired-title { font-size: 18px; font-weight: 700; color: #222; }
.mlf-retired-go {
    display: inline-block;
    margin: 4px 0 14px;
    padding: 12px 18px;
    border-radius: 6px;
    background: #222;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}
.mlf-retired .mlf-chips { margin: 0; }

/* ---------- size chart page: the pasted Excel table is ~860px wide ---------- */
.cms-size-chart .col-main .std { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mlf-swipe-hint { margin: 0 0 8px; color: #666; font-size: 14px; }