/* ==========================================================================
    shop.css — main nav + home/list controls
    Targets: .main-nav + mega dropdown, toolbars, filter modal, etc.
    ========================================================================== */

    /* -----------------------------
    NAVIGATION (full-bleed row)
    ----------------------------- */
    .main-nav{
        position: relative;          /* dropdown anchors to this */
        z-index: 85;                 /* must sit above full-bleed banner */
        border-top: 0;
        background: var(--bg);
        overflow: visible;
    }
    
    .main-nav-inner{
        max-width: none;
        width: 100%;
        margin-inline: 0;
        padding: 0 var(--gutter);
        height: 3.25rem;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap: var(--sp-2);
        overflow: visible;
    }
    
    .nav-home{
        display:inline-flex;
        align-items:center;
        padding: 0.55rem 0.75rem;
        border-radius: 0.6rem;
        font-weight: 680;
    }
    .nav-home:hover{ background: rgba(0,0,0,0.03); text-decoration:none; }
    
    .nav-categories{
        display:flex;
        align-items:center;
        gap: 0.25rem;
        flex: 0 1 auto;
        justify-content:flex-start;
        overflow: visible;
    }
    
    /* each category becomes JS-controllable via [data-open="true"] */
    .nav-category{
        position: static; /* IMPORTANT: prevents left-side clipping */
    }
    
    .nav-category-link{
        display:inline-flex;
        align-items:center;
        padding: 0.55rem 0.75rem;
        border-radius: 0.6rem;
        font-weight: 560;
        position: relative; /* for underline */
    }
    .nav-category-link:hover{ background: rgba(0,0,0,0.03); text-decoration:none; }
    
    /* Hover/open/focus state = blue */
    .nav-category:hover > .nav-category-link,
    .nav-category[data-open="true"] > .nav-category-link,
    .nav-category:focus-within > .nav-category-link{
        color: var(--primary);
    }
    
    /* Underline when hovered/open  */
    .nav-category:hover > .nav-category-link::after,
    .nav-category[data-open="true"] > .nav-category-link::after,
    .nav-category:focus-within > .nav-category-link::after{
        content:"";
        position:absolute;
        left: 0.65rem;
        right: 0.65rem;
        bottom: 0.15rem;
        height: 2px;
        background: var(--primary);
        border-radius: 2px;
    }
    
    /* Active category tab (page) */
    .nav-category-link.is-active{
        color: var(--primary);
    }
    .nav-category-link.is-active::after{
        content:"";
        position:absolute;
        left: 0.65rem;
        right: 0.65rem;
        bottom: 0.15rem;
        height: 2px;
        background: var(--primary);
        border-radius: 2px;
    }
    
    /* -----------------------------
        MEGA DROPDOWN 
        - full-width panel
        - click-safe via data-open
        - hero stays left (absolute)
        - columns tight & centered (auto-fit + fixed max width)
        - background always tall enough (min-height)
        ----------------------------- */
    
    .nav-dropdown{
        /* contains the absolutely positioned hero + CTA */
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
    
        background: var(--bg);
        border-top: 1px solid var(--ink-12);
        border-bottom: 1px solid var(--ink-12);
    
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    
        box-shadow: 0 16px 40px var(--ink-08);
    
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition:
        opacity var(--dur-2) var(--ease),
        transform var(--dur-2) var(--ease),
        visibility var(--dur-2) var(--ease);
    
        z-index: 90;
    
        /* IMPORTANT: ensure panel is tall even if there are few columns */
        min-height: 22rem;
    }
    
    /* OPEN: hover/focus for no-js, plus JS state for reliability */
    .nav-category[data-open="true"] .nav-dropdown,
    .nav-category:hover .nav-dropdown,
    .nav-category:focus-within .nav-dropdown{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    /* Inner container: holds ONLY the columns (hero and CTA are absolute) */
    .nav-dropdown-inner{
        max-width: var(--container);
        margin-inline: auto;
    
        /* give panel good spacing */
        padding: var(--sp-5) var(--gutter);
    
        /* leave room at bottom so CTA doesn't overlap columns */
        padding-bottom: calc(var(--sp-5) + 3.5rem);
    
        /* columns layout:
        - auto-fit keeps it centered when fewer columns exist
        - fixed max widths keep it "tight"
        */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 14rem));
        justify-content: center;  /* centers the group when fewer columns */
        gap: var(--sp-4);
        align-items: start;
    }
    
    /* -----------------------------
        LEFT OVAL HERO (absolute, stays left)
        ----------------------------- */
    .nav-dropdown-hero{
        position: absolute;
    
        /* left edge of the PANEL, nudged right a bit */
        left: calc(var(--gutter) + var(--sp-8));
        top: var(--sp-3);
    
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    
        width: 12.5rem;
        pointer-events: none; /* decorative; links are in columns */
    }
    
    /* The vertical oval */
    .nav-dropdown-hero img,
    .nav-dropdown-heroPlaceholder{
        width: 11rem;
        height: 16rem;
        border-radius: 999px;
        border: 1px solid var(--ink-12);
        background: rgba(0,0,0,0.02);
        box-shadow: 0 10px 24px var(--ink-06);
        overflow: hidden;
        display: block;
    }
    .nav-dropdown-hero img{ object-fit: cover; }
    .nav-dropdown-heroPlaceholder{ background: rgba(0,0,0,0.04); }
    
    /* Simple centered label under the oval (no capsule) */
    .nav-dropdown-heroLabel{
        position: static;
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
    
        text-align: center;
        color: var(--text);
        font-size: var(--fs-0);
        font-weight: 680;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    
    /* -----------------------------
        Mega columns
        ----------------------------- */
    .nav-dropdown-column h4{
        margin: 0 0 var(--sp-2) 0;
        font-size: var(--fs-0);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-72);
        font-weight: 680;
    }
    
    .nav-dropdown-column ul{
        list-style:none;
        padding:0;
        margin:0;
        display:grid;
        gap: 0.25rem;
    }
    
    .nav-dropdown-column a{
        display:block;
        padding: 0.5rem 0.6rem;
        border-radius: 0.75rem;
    }
    
    .nav-dropdown-column a:hover,
    .nav-dropdown-column a:focus-visible{
    background: rgba(0,0,0,0.03);
    color: var(--primary);
    text-decoration: none;
    }

    /* Optional: a tiny left “indicator” like premium sites (still minimal) */
    .nav-dropdown-column a{
    position: relative;
    }
    .nav-dropdown-column a:hover::before,
    .nav-dropdown-column a:focus-visible::before{
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    background: var(--primary);
    border-radius: 2px;
    }

    
    .nav-muted{
        color: var(--ink-60);
        padding: 0.5rem 0.6rem;
    }
    
    /* -----------------------------
        View-all CTA (inside panel, bottom-right)
        ----------------------------- */
    .nav-dropdown-cta{
        position: absolute;
        right: calc(var(--gutter) + var(--sp-2));
        bottom: var(--sp-4);
    }
    
    .nav-dropdown-cta a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    
        height: 2.65rem;
        padding: 0 1rem;
    
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-18);
        background: var(--bg);
        font-weight: 680;
    
        transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
    }
    
    .nav-dropdown-cta a:hover{
        background: rgba(0,0,0,0.02);
        box-shadow: 0 10px 24px var(--ink-06);
        text-decoration: none;
    }
    
    .nav-dropdown-cta a:active{
        transform: translateY(1px);
    }
    
    /* -----------------------------
        Right-side actions (Login/Cart)
        ----------------------------- */
    .nav-actions{
        margin-left: auto;
        display:flex;
        align-items:center;
        gap: 0.5rem;
    }
    
    .nav-action{
        display:inline-flex;
        align-items:center;
        gap: 0.5rem;
        height: 2.65rem;
        padding: 0 0.85rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-12);
        background: var(--bg);
        transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
        text-decoration:none;
    }
    .nav-action:hover{
        background: rgba(0,0,0,0.03);
        box-shadow: 0 10px 24px var(--ink-06);
        text-decoration:none;
    }
    .nav-action:active{ transform: translateY(1px); }
    
    .nav-action-text{
        font-size: var(--fs-0);
        color: var(--ink-72);
        font-weight: 560;
    }
    .nav-cart{ padding-right: 0.9rem; }
    
    /* Mobile hamburger */
    .nav-toggle{
        display:none;
        width: 2.65rem;
        height: 2.65rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-12);
        background: var(--bg);
    }
    .nav-toggle:hover{ background: rgba(0,0,0,0.03); }
    
    .nav-drawer{ display:none; }
    
    /* -----------------------------
        PAGE (existing parts you had)
        ----------------------------- */
    .page-main h1{
        max-width: var(--container);
        margin: 0 auto var(--sp-3) auto;
        padding: 0 var(--gutter);
        font-size: var(--fs-6);
        line-height: var(--lh-tight);
        letter-spacing: -0.01em;
    }
    
    .toolbar-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding: 0.65rem 0.95rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-18);
        background: var(--bg);
        font-weight: 680;
        transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
    }
    .toolbar-btn:hover{ background: rgba(0,0,0,0.02); box-shadow: 0 10px 24px var(--ink-06); }
    .toolbar-btn:active{ transform: translateY(1px); }
    .toolbar-popover{
        position: relative;
        display: inline-flex;
    }
    
    .sort-dropdown{
        position: absolute;
        top: calc(100% + 10px);
        inset-inline-start: 0;
        width: min(18rem, 78vw);
        display: none;
        z-index: 5000;
        padding: 0;
        margin: 0;
    }
    
    .sort-dropdown.is-open{ display: block; }
    .sort-dropdown form{
        border: 1px solid var(--ink-12);
        border-radius: var(--r-2);
        background: var(--bg);
        box-shadow: var(--sh-2);
        padding: 0.6rem;
        display: grid;
        gap: 0.25rem;
    }
    
    .sort-dropdown label{
        display:flex;
        align-items:center;
        gap: 0.6rem;
        padding: 0.55rem 0.65rem;
        border-radius: 0.75rem;
        cursor: pointer;
    }
    
    .sort-dropdown label:hover{ background: rgba(0,0,0,0.03); }
    .sort-dropdown button{
        justify-self: end;
        background: var(--primary);
        color: var(--text);
        border: 1px solid rgba(0,0,0,0.10);
        border-radius: var(--r-pill);
        padding: 0.7rem 1rem;
        font-weight: 760;
    }
    
    .filter-modal{
        position: fixed;
        inset: 0;
        display:none;
    
        /* Must be above header + nav + dropdowns */
        z-index: 9999;
    }
    
    .filter-modal.is-open{ display:block; }
    .filter-modal.is-open .filter-modal-content{
        transform: translateX(0);
    }
    
    .filter-modal-backdrop{
        position:absolute;
        inset:0;
        background: var(--overlay);
    }
    .filter-modal-content{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
    
        width: min(480px, 92vw);
        background: var(--bg);
        border-right: 1px solid var(--ink-12);
        box-shadow: 18px 0 40px var(--ink-08);
    
        transform: translateX(-102%);
        transition: transform 220ms var(--ease);
    
        z-index: 10000;
        overflow: hidden;          /* IMPORTANT: drawer content scroll is inside */
        border-radius: 0;          /* sharp corners */
        padding: 0;
    }
    .filter-modal.is-open .filter-modal-content{ transform: translateX(0); }
    
    
    .filter-close{
        position:absolute;
        top: 0.85rem;
        right: 0.85rem;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-12);
        background: var(--bg);
    }
    .filter-close:hover{ background: rgba(0,0,0,0.03); }
    
    .filter-modal-content h2{
        margin: 0 0 var(--sp-2) 0;
        font-size: var(--fs-4);
        line-height: var(--lh-tight);
    }
    
    body.is-modal-open{
        overflow: hidden;
        touch-action: none;
    }

    .filter-group{
        display:grid;
        gap: var(--sp-1);
        margin-top: var(--sp-2);
    }
    .filter-group label{
        display:grid;
        gap: 0.35rem;
        font-size: var(--fs-0);
        color: var(--ink-72);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .filter-group input,
    .filter-group select{
        font-size: var(--fs-1);
        letter-spacing: 0.01em;
        text-transform:none;
        color: var(--text);
    }
    
    .filter-actions{
        margin-top: var(--sp-3);
        display:flex;
        gap: var(--sp-1);
        justify-content:flex-end;
        align-items:center;
    }
    .filter-actions button{
        background: var(--primary);
        color: var(--text);
        border-radius: var(--r-pill);
        padding: 0.75rem 1.05rem;
        font-weight: 760;
        border: 1px solid rgba(0,0,0,0.10);
    }
    .filter-reset{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-18);
        padding: 0.75rem 1.05rem;
    }
    .filter-reset:hover{ background: rgba(0,0,0,0.02); text-decoration:none; }
    
    .tryon-promo{
        max-width: var(--container);
        margin: var(--sp-5) auto;
        padding: 0 var(--gutter);
        display:grid;
        grid-template-columns: 1.4fr 0.6fr;
        gap: var(--sp-3);
        align-items:center;
        border: 1px solid var(--ink-12);
        border-radius: var(--r-2);
        background: var(--bg);
        box-shadow: var(--sh-1);
    }
    .tryon-promo-text{ padding: var(--sp-3); }
    .tryon-promo-text h2{
        margin:0 0 0.5rem 0;
        font-size: var(--fs-5);
        line-height: var(--lh-tight);
    }
    .tryon-promo-text p{ margin:0; color: var(--ink-72); }
    
    .tryon-promo-actions{
        padding: var(--sp-3);
        display:flex;
        justify-content:flex-end;
    }
    .btn-tryon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding: 0.85rem 1.15rem;
        border-radius: var(--r-pill);
        background: var(--primary);
        color: var(--text);
        font-weight: 760;
        border: 1px solid rgba(0,0,0,0.10);
        box-shadow: 0 10px 24px var(--ink-06);
    }
    .btn-tryon:hover{ filter: brightness(0.98); text-decoration:none; }
    
    .small-div{
        max-width: var(--container);
        margin: 0 auto var(--sp-4) auto;
        padding: 0 var(--gutter);
    }
    .categories{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-wrap:wrap;
        gap: 0.5rem;
    }
    .category a{
        display:inline-flex;
        align-items:center;
        padding: 0.55rem 0.85rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-18);
        background: var(--bg);
        font-size: var(--fs-0);
        font-weight: 680;
    }
    .category a:hover{ background: rgba(0,0,0,0.02); text-decoration:none; }
    
    .list-controls{
        max-width: var(--container);
        margin: 0 auto var(--sp-4) auto;
        padding: 0 var(--gutter);
    }
    .filters-form{
        display:flex;
        flex-wrap:wrap;
        gap: var(--sp-2);
        align-items:end;
        border: 1px solid var(--ink-12);
        border-radius: var(--r-2);
        padding: var(--sp-3);
        background: var(--bg);
    }
    .filters-group{
        display:flex;
        gap: var(--sp-1);
        flex-wrap:wrap;
    }
    .filters-group label,
    .sort-group label{
        display:grid;
        gap: 0.35rem;
        font-size: var(--fs-0);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-72);
    }
    .sort-group{ margin-left:auto; display:grid; gap: 0.35rem; }
    .btn-apply-filters{
        background: var(--primary);
        color: var(--text);
        border-radius: var(--r-pill);
        padding: 0.8rem 1.05rem;
        font-weight: 760;
        border: 1px solid rgba(0,0,0,0.10);
    }
    
    /* -----------------------------
        Responsive
        ----------------------------- */
    @media (max-width: 64rem){
        /* On tablet: put hero back into flow above columns */
        .nav-dropdown{
        min-height: 0; /* let content define height */
        }
    
        .nav-dropdown-inner{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        padding-bottom: var(--sp-5);
        }
    
        .nav-dropdown-hero{
        position: static;
        width: auto;
        pointer-events: none;
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: var(--sp-3);
        }
    
        .nav-dropdown-cta{
        position: static;
        grid-column: 1 / -1;
        justify-self: end;
        margin-top: var(--sp-2);
        }
    
        .tryon-promo{ grid-template-columns: 1fr; }
        .tryon-promo-actions{ justify-content:flex-start; }
    }
    
    @media (max-width: 48rem){
        .nav-categories{ display:none; }
        .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
        .product-toolbar{ justify-content:space-between; }
        .nav-dropdown{ display:none; }
    }
    
    @media (max-width: 30rem){
        .nav-action-text{ display:none; }
        .nav-action{ padding: 0; width: 2.65rem; justify-content:center; }
    }

    /* PLP: compact title + actions on same row */
    .plp-topbar{
        max-width: var(--container);
        margin: 0 auto var(--sp-3) auto;
        padding: 0 var(--gutter);
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: var(--sp-2);
    }
    
    .plp-title{
        font-size: var(--fs-3);
        line-height: var(--lh-tight);
        font-weight: 720;
        letter-spacing: -0.01em;
    }
    
    /* Fix PLP topbar alignment: keep Sort/Filters at top-right */
    .plp-topbar .product-toolbar{
        max-width: var(--container);
        margin: 0 auto var(--sp-3) auto;
        padding: 0 var(--gutter);
        display:flex;
        gap: var(--sp-1);
        justify-content:flex-end;
    }
    
    

    
    .sort-label{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 10px;
        padding: 0.65rem 0.9rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--ink-18);
        background: var(--bg);
        font-weight: 680;
    }
    
    .sort-select{
        height: 2.4rem;
        border-radius: 0.75rem;
        border: 1px solid var(--ink-18);
        padding: 0 0.75rem;
        background: #fff;
    }
    
    /* =========================
    Search overlay above nav
    ========================= */
    .top-header{ position: relative; z-index: 200; } /* header above nav */
    .search-bar{
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: auto;

    z-index: 500;              /* above nav (85) */
    display: none;
    }

    .search-bar.is-open{ display:block; }

    /* Make it look premium */
    .search-bar form{
    gap: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--ink-12);
    border-radius: 16px;
    box-shadow: 0 16px 40px var(--ink-08);
    }

    .search-bar input[type="text"]{
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-weight: 650;
    }

    .search-bar button{
    border: 0;
    background: #111;
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    }