/*
===============================================================================
 FILE: /css/catalog-nav.css
 VERSION: 1.0
 PROJECT: ОКНА ORIGINAL — CATALOG NAVIGATION UX
 DATE: 2026-09-06

 - desktop Catalog dropdown with useful preset filters;
 - mobile Catalog accordion content;
 - compact catalog usage guide;
 - quick-pick filter chips.
===============================================================================
*/

/* ===== Desktop Catalog dropdown ===== */
.nav-dropdown-menu--catalog{
    width:470px;
    min-width:470px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:8px;
    padding:10px;
}
.catalog-menu-group{
    min-width:0;
    padding:4px;
}
.catalog-menu-group + .catalog-menu-group{
    border-left:1px solid var(--border);
    padding-left:12px;
}
.catalog-menu-label{
    display:block;
    padding:5px 10px 7px;
    color:#829099;
    font-size:12px;
    font-weight:500;
}
.nav-dropdown-menu--catalog a{
    white-space:normal;
    line-height:1.25;
}

/* ===== Mobile Catalog accordion ===== */
.mobile-submenu-label{
    display:block;
    margin:5px 0 1px;
    padding:.4rem 0 .2rem;
    color:#8998a0;
    font-size:.72rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.mobile-submenu-catalog{
    columns:1;
}

/* ===== Compact catalog guide ===== */
.catalog-guide{
    margin:10px 0 14px;
    padding:15px 17px;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:20px;
    align-items:center;
    border:1px solid #dfe7ea;
    border-radius:14px;
    background:#f9fbfb;
}
.catalog-guide__copy h2{
    margin:0 0 5px;
    color:#324b57;
    font-size:16px;
    line-height:1.25;
    font-weight:500;
}
.catalog-guide__copy p{
    margin:0;
    max-width:760px;
    color:#637783;
    font-size:14px;
    line-height:1.48;
}
.catalog-guide__steps{
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    list-style:none;
}
.catalog-guide__steps li{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    color:#536a75;
    font-size:12px;
    line-height:1.25;
}
.catalog-guide__steps span{
    flex:0 0 25px;
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border:1px solid #cbdade;
    border-radius:50%;
    background:#fff;
    color:#426474;
    font-size:12px;
    font-weight:500;
}

/* ===== Quick picks ===== */
.catalog-quick-picks{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 15px;
}
.catalog-quick-picks a,
.catalog-filter-shortcut{
    min-height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 11px;
    border:1px solid #d5e1e5;
    border-radius:999px;
    background:#fff;
    color:#486470;
    font:inherit;
    font-size:12px;
    font-weight:400;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
}
.catalog-quick-picks a:hover,
.catalog-filter-shortcut:hover{
    border-color:#9eb9c4;
    background:#f4f8f9;
}
.catalog-quick-picks a.is-active{
    border-color:#8eb1bc;
    background:#edf5f6;
    color:#315d69;
}
.catalog-filter-shortcut{
    margin-left:auto;
}

/* ===== Responsive ===== */
@media(max-width:980px){
    .catalog-guide{
        grid-template-columns:1fr;
        gap:11px;
    }
    .catalog-guide__steps{
        max-width:520px;
    }
}
@media(max-width:768px){
    .nav-dropdown-menu--catalog{
        width:auto;
        min-width:0;
        display:block;
    }
    .catalog-menu-group + .catalog-menu-group{
        border-left:0;
        padding-left:4px;
    }
    .catalog-guide{
        margin:7px 0 11px;
        padding:13px 14px;
        border-radius:12px;
    }
    .catalog-guide__copy h2{
        font-size:15px;
    }
    .catalog-guide__copy p{
        font-size:13px;
    }
    .catalog-guide__steps{
        display:flex;
        flex-wrap:wrap;
        gap:7px 13px;
    }
    .catalog-guide__steps li{
        flex:0 1 auto;
        font-size:11px;
    }
    .catalog-guide__steps span{
        width:22px;height:22px;flex-basis:22px;
    }
    .catalog-quick-picks{
        gap:6px;
        margin-bottom:12px;
    }
    .catalog-quick-picks a,
    .catalog-filter-shortcut{
        min-height:36px;
        padding:7px 10px;
    }
    .catalog-filter-shortcut{
        margin-left:0;
    }
}
@media(max-width:520px){
    .catalog-guide__steps{
        display:grid;
        grid-template-columns:1fr;
        gap:5px;
    }
    .catalog-quick-picks{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:3px;
        scrollbar-width:thin;
    }
    .catalog-quick-picks a,
    .catalog-filter-shortcut{
        flex:0 0 auto;
        white-space:nowrap;
    }
}