/* صفحه‌ی دسته‌بندی — فقط قواعدی که مخصوص این صفحه است. پایه‌ی مشترک در app.css */
/* =========================================================
   tokens
   ========================================================= */
:root{
    --bg:#FDFBF8;--card:#F4EDE5;--sand:#EFE6DB;--clay:#C8A78D;--clay-d:#B08E73;--taupe:#9B8878;
    --ink:#1D1A17;--ink-soft:#6B6058;--line:rgba(29,26,23,.11);--line-soft:rgba(29,26,23,.06);
    --rad:20px;--rad-lg:26px;--rad-xl:34px;--e:cubic-bezier(.16,.84,.34,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:'Vazirmatn','IRANSansX','Segoe UI',Tahoma,sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-weight:300;
    font-size:15.5px;
    line-height:1.9;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.h1{
    font-size:clamp(32px,5vw,62px);
    font-weight:200;
}
.h2{
    font-size:clamp(24px,3.2vw,40px);
    font-weight:200}
/* =========================================================
   cursor / header / footer
   ========================================================= */
.cursor{
    position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink);z-index:150;pointer-events:none;
    opacity:0;mix-blend-mode:difference;transform:translate3d(var(--cx,0),var(--cy,0),0);
    transition:width .35s var(--e),height .35s var(--e),opacity .3s,margin .35s var(--e),background .35s;
}
.menu{
    display:flex;
    align-items:center;
    gap:30px;font-size:14px;
    list-style:none
}

.menu a{
    color:var(--ink-soft);
    transition:color .3s;
    padding:8px 0
}

.icon-btn{
    width:40px;height:40px;border-radius:50%;
    display:grid;
    place-items:center;
    transition:.35s var(--e)
}
/* =========================================================
   buttons
   ========================================================= */
.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;gap:11px;
    white-space:nowrap;
    padding:15px 28px;
    border-radius:100px;
    font-size:14px;
    background:var(--ink);
    color:var(--bg);
    position:relative;
    overflow:hidden;
    transition:color .4s var(--e);
}

.pill::before{
    content:"";
    position:absolute;inset:0;
    background:var(--clay-d);
    border-radius:inherit;
    transform:translateY(101%);
    transition:transform .5s var(--e)
}


.pill--sm{
    padding:11px 20px;
    font-size:13px
}

.pill--block{
    width:100%;
}
/* =========================================================
   category hero
   ========================================================= */
.cat{padding-top:118px}
.crumbs{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--taupe);
    padding-bottom: 26px;
    padding-top: 20px;
}


.crumbs a:hover{
    color:var(--ink)
}


.crumbs i{
    width:4px;height:4px;
    border-radius:50%;
    background:var(--line);
    display:block
}


.cat-hero{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:end;
    background:var(--sand);
    border-radius:var(--rad-xl);
    padding:52px 46px;
    overflow:hidden;
}


.cat-hero::before{
    content:"";
    position:absolute;
    width:520px;height:520px;
    left:-140px;
    top:-240px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(200,167,141,.35),transparent 70%);
    pointer-events:none;
}


.cat-hero-text{position:relative;
    z-index:1;max-width:52ch
}


.cat-title{
    margin:14px 0 14px
}

.cat-stats{
    display:flex;
    gap:30px;
    margin-top:22px;
    flex-wrap:wrap;
    font-size:12.5px;
    color:var(--taupe)
}


.cat-stats b{
    display:block;
    font-size:26px;
    font-weight:200;
    color:var(--ink);
    line-height:1.3

}


.cat-collage{
    position:relative;
    z-index:1;
    display:flex;gap:12px

}


.cat-collage figure{
    width:clamp(84px,9vw,124px);
    aspect-ratio:4/5;
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
    box-shadow:0 26px 50px -36px rgba(29,26,23,.7);
    transition:transform .6s var(--e);
}


.cat-collage figure:nth-child(1){
    transform:translateY(16px) rotate(-4deg)
}


.cat-collage figure:nth-child(2){
    transform:translateY(-8px) rotate(2deg)
}


.cat-collage figure:nth-child(3){
    transform:translateY(22px) rotate(5deg)
}


.cat-collage figure:hover{
    transform:translateY(-4px) rotate(0) scale(1.05)
}


.cat-collage img{
    width:100%;height:100%;object-fit:cover
}


/* =========================================================
   toolbar
   ========================================================= */
.toolbar{
    position:sticky;
    top:70px;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    margin:34px 0 26px;
    background:rgba(253,251,248,.86);
    backdrop-filter:blur(14px);
    border-block:1px solid var(--line-soft);
    flex-wrap:wrap;
}


.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}


.tab{
    padding:9px 20px;
    border:1px solid var(--line);
    border-radius:100px;
    font-size:13px;
    color:var(--ink-soft);
    transition:.35s var(--e)
}


.tab:hover{
    border-color:var(--clay);
    color:var(--ink)
}


.tab.is-on{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg)
}


.tab span{
    font-size:11px;
    color:var(--taupe);
    margin-inline-start:6px
}


.tab.is-on span{
    color:rgba(255,255,255,.6)
}

.tool-right{
    display:flex;
    align-items:center;
    gap:10px
}


.count-badge{
    font-size:12.5px;
    color:var(--taupe)
}


.count-badge b{
    color:var(--ink);
    font-weight:400
}


.select{
    position:relative
}


.select-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border:1px solid var(--line);
    border-radius:100px;
    font-size:13px;
    transition:.35s var(--e)
}


.select-btn:hover{
    border-color:var(--ink)
}


.select-btn svg{
    stroke:currentColor;
    fill:none;stroke-width:1.5;
    transition:transform .35s var(--e)
}


.select.is-open .select-btn svg{
    transform:rotate(180deg)
}


.select-list{
    position:absolute;
    top:calc(100% + 8px);
    left:0;min-width:200px;
    background:var(--bg);
    border:1px solid var(--line-soft);
    border-radius:16px;
    padding:8px;
    display:grid;
    gap:2px;
    box-shadow:0 30px 60px -40px rgba(29,26,23,.5);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.35s var(--e);
    z-index:5;
}


.select.is-open .select-list{
    opacity:1;
    visibility:visible;
    transform:none
}


.select-list button{
    text-align:right;
    padding:9px 14px;
    border-radius:10px;
    font-size:13.5px;
    transition:background .3s
}


.select-list button:hover{
    background:var(--card)
}


.select-list button.is-on{
    background:var(--card);
    color:var(--ink)
}


.filter-toggle{
    display:none
}


.view-toggle{
    display:flex;
    gap:4px;
    border:1px solid var(--line);
    border-radius:100px;
    padding:4px
}


.view-btn{
    width:34px;
    height:32px;
    border-radius:100px;
    display:grid;
    place-items:center;
    transition:.35s var(--e)
}


.view-btn svg{
    stroke:var(--ink-soft);
    fill:none;
    stroke-width:1.3
}


.view-btn.is-on{
    background:var(--ink)
}


.view-btn.is-on svg{
    stroke:var(--bg)
}


/* =========================================================
   layout: sidebar + grid
   ========================================================= */
.cat-body{
    display:grid;
    grid-template-columns:238px 1fr;
    gap:34px;
    align-items:start;
    padding-bottom:20px
}


.side{
    position:sticky;
    top:150px
}


.fgroup{
    border-bottom:1px solid var(--line);
    padding:18px 0
}


.fgroup:first-child{
    padding-top:0
}


.fgroup h4{
    font-size:12px;
    letter-spacing:.16em;color:var(--taupe);
    margin-bottom:14px;
    display:flex;
    justify-content:space-between
}


.check{display:flex;
    align-items:center;
    gap:11px;
    padding:6px 0;
    font-size:13.5px;
    color:var(--ink-soft);
    cursor:pointer;
    transition:color .3s
}


.check:hover{
    color:var(--ink)
}


.check input{
    position:absolute;
    opacity:0;
    pointer-events:none
}


.box{
    width:17px;
    height:17px;
    border-radius:5px;
    border:1px solid var(--line);
    flex:none;
    position:relative;
    transition:background .3s var(--e),border-color .3s var(--e);
}


.box::after{
    content:"";
    position:absolute;
    inset:0;
    background:no-repeat center/9px 7px;
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1' fill='none' stroke='%23FDFBF8' stroke-width='1.6'/%3E%3C/svg%3E");
    opacity:0;
    transform:scale(.6);
    transition:.3s var(--e);
}



.check input:checked+.box{
    background:var(--ink);
    border-color:var(--ink)
}


.check input:checked+.box::after{
    opacity:1;
    transform:none
}


.check em{
    font-style:normal;
    margin-inline-start:auto;
    font-size:11.5px;
    color:var(--taupe)
}


.color-list{
    display:flex;
    gap:9px;
    flex-wrap:wrap
}


.color-opt{
    position:relative;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--c);
    border:1px solid rgba(0,0,0,.08);
    transition:transform .35s var(--e)
}


.color-opt::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid var(--ink);
    opacity:0;transform:scale(.85);
    transition:.35s var(--e)
}


.color-opt:hover{
    transform:translateY(-2px)
}


.color-opt.is-on::after{
    opacity:1;transform:none
}


.size-list{
    display:flex;
    gap:7px;
    flex-wrap:wrap
}


.size-opt{
    min-width:44px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    font-size:13px;
    color:var(--ink-soft);
    transition:.35s var(--e)
}


.size-opt:hover{
    border-color:var(--clay)
}


.size-opt.is-on{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg)
}


.clear-all{
    font-size:12.5px;
    color:var(--taupe);
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
    margin-top:18px;
    display:inline-block;
    transition:.3s
}


.clear-all:hover{
    color:var(--ink);
    border-color:var(--ink)
}


/* active filter tags */
.tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
    min-height:0
}


.tag{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:var(--card);
    border-radius:100px;
    padding:8px 14px;
    font-size:12.5px;
    animation:pop .4s var(--e) both
}


.tag button{
    width:15px;
    height:15px;
    border-radius:50%;background:rgba(29,26,23,.12);
    display:grid;
    place-items:center;
    font-size:11px;
    line-height:1;
    transition:.3s
}


.tag button:hover{
    background:var(--ink);
    color:var(--bg)
}



@keyframes pop{
    from{
    opacity:0;transform:scale(.9) translateY(6px)
    }
    to{
        opacity:1;transform:none
    }}
/* =========================================================
   grid + cards
   ========================================================= */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}


.grid.is-dense{
    grid-template-columns:repeat(4,1fr);
    gap:16px
}


.card{
    opacity:0;
    transform:translateY(26px) scale(.985);
    transition:opacity .7s var(--e),transform .7s var(--e)
}


.card.is-in{
    opacity:1;
    transform:none
}


.card-media{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:var(--rad);
    background:var(--card);
    aspect-ratio:4/5
}


.card-img{
    position:absolute;
    inset:0;width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .7s var(--e),transform 1.2s var(--e)
}


.card-img--alt{
    opacity:0
}


.card:hover .card-img--main{
    opacity:0;transform:scale(1.04)
}


.card:hover .card-img--alt{
    opacity:1;
    transform:scale(1.05)
}


.card-tag{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    background:rgba(253,251,248,.93);
    padding:6px 13px;
    border-radius:100px;
    font-size:11px;color:var(--ink-soft)
}


.card-new{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    background:var(--ink);
    color:var(--bg);padding:6px 13px;
    border-radius:100px;
    font-size:10.5px;
    letter-spacing:.1em
}


.card-quick{
    position:absolute;
    inset:auto 12px 12px 12px;
    z-index:2;
    background:rgba(253,251,248,.96);
    backdrop-filter:blur(6px);
    border-radius:100px;
    padding:12px;
    font-size:12.5px;
    opacity:0;
    transform:translateY(14px);
    transition:.45s var(--e);
}


.card-quick:hover{
    background:var(--ink);
    color:var(--bg)
}


.card:hover .card-quick{
    opacity:1;
    transform:none
}


.card-body{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:14px 4px 0;
}


.card-body h3{
    font-size:15.5px;
    font-weight:400
}


.card-body h3 span{
    background-image:linear-gradient(var(--ink),var(--ink));
    background-repeat:no-repeat;
    background-position:100% 100%;
    background-size:0 1px;
    transition:background-size .5s var(--e);
    padding-bottom:2px;
}


.card:hover .card-body h3 span{
    background-size:100% 1px
}


.card-body p{
    font-size:12.5px;
    color:var(--taupe)
}


.empty{
    text-align:center;
    padding:70px 20px;
    border:1px dashed var(--line);
    border-radius:var(--rad-lg);
    color:var(--ink-soft)
}


.empty b{
    display:block;
    font-weight:400;
    font-size:18px;
    color:var(--ink);
    margin-bottom:8px
}


.more-wrap{
    display:grid;
    place-items:center;
    gap:14px;
    padding:44px 0 10px
}


.more-note{
    font-size:12.5px;
    color:var(--taupe)
}


.bar{
    width:170px;
    height:2px;
    background:var(--line);
    border-radius:2px;
    overflow:hidden
}


.bar i{
    display:block;
    height:100%;
    background:var(--clay-d);
    width:var(--w,0%);
    transition:width .7s var(--e)
}


/* =========================================================
   filter drawer (mobile)
   ========================================================= */
.drawer-bg{
    position:fixed;
    inset:0;background:rgba(29,26,23,.45);
    backdrop-filter:blur(4px);
    z-index:104;
    opacity:0;
    visibility:hidden;
    transition:.4s var(--e)
}


body.is-filters-open .drawer-bg{
    opacity:1;
    visibility:visible;
}


.drawer{
    position:fixed;
    inset:0 auto 0 0;
    width:min(340px,88vw);
    background:var(--bg);
    z-index:105;padding:24px 22px 30px;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .5s var(--e);
}


body.is-filters-open .drawer{
    transform:none
}


.drawer-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}


.drawer-head b{
    font-weight:400;
    font-size:17px
}


.drawer-close{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--card);
    display:grid;
    place-items:center;
    font-size:18px
}


.modal-box{
    position:relative;
    background:var(--bg);
    border-radius:var(--rad-lg);
    width:min(880px,100%);
    max-height:88vh;
    overflow:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    transform:translateY(20px) scale(.98);
    transition:.5s var(--e)
}


.modal-box img{
    width:100%;
    height:100%;
    min-height:320px;
    object-fit:cover
}


.modal-info{
    padding:34px 30px
}


.modal-title{
    font-size:22px;
    font-weight:400;
    margin:12px 0 10px
}


.modal-desc{
    font-size:14px;
    color:var(--ink-soft)
}


.spec{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:13.5px
}


.modal-specs{
    margin-top:18px
}


.modal-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px
}


.modal-close{
    position:absolute;
    top:14px;
    left:14px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--bg);
    display:grid;
    place-items:center;
    font-size:18px;
    box-shadow:0 6px 18px -10px rgba(0,0,0,.4);
    transition:.3s
}


/* =========================================================
   reveal / mobile menu
   ========================================================= */
.rv{
    opacity:0;
    transform:translateY(26px);
    filter:blur(5px);
    transition:opacity .9s var(--e),transform .9s var(--e),filter .9s var(--e)
}


.sp:nth-child(2) i{
    transition-delay:.07s
}
.sp:nth-child(3) i{
    transition-delay:.14s
}


/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1100px){
    .cat-body{grid-template-columns:1fr}
    .side{display:none}
    .filter-toggle{display:inline-flex}
    .grid,.grid.is-dense{grid-template-columns:repeat(3,1fr)}
    .cat-hero{grid-template-columns:1fr;gap:30px}
    .cat-collage{justify-content:flex-start}
}
@media (max-width:900px){
    .grid,.grid.is-dense{

        grid-template-columns:repeat(2,1fr);
        gap:14px
    }

    .view-toggle{
        display:none
    }

    .cat-hero{
        padding:38px 26px;
    }

    .toolbar{
        top:62px;
    }

    .modal-box img{
        min-height:190px;
        max-height:34vh
    }
}


@media (max-width:600px){

    .cat{
        padding-top:96px
    }

    .tabs{
        width:100%;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:4px
    }


    .tab{
        flex:none
    }

}

@media screen and (max-width: 575px){
    .cat-collage figure {
        width: clamp(67px, 6vw, 124px);
    }
}


@media (prefers-reduced-motion:reduce){
    .rv,.card{
        opacity:1;
        transform:none;
        filter:none
    }
}

/* --- حالت‌های نمایش گرید (فیلتر / نمایش بیشتر) --- */
.grid .card[hidden],.empty[hidden],.more-wrap[hidden],#moreBtn[hidden]{
    display:none!important
}