.catalog-section{
    width:93%;
    min-height:100vh;
    max-width: 1500px;

    margin:0 auto;
    margin-top:118px; /* 78px header + 40px отступ */
}

.catalog-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-bottom:40px;
}


.catalog-controls{

    width:93%;
    margin-left:2%;

    display:flex;
    flex-direction:column;
    gap:0;

    background:#fff;

    border:1px solid rgb(205,205,211);
    border-radius:16px;

    overflow:hidden;

    transition:
        box-shadow .3s ease,
        border-color .3s ease;

}

.catalog-controls:hover{

    border-color:#d5d5dc;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


.catalog-categories{

    width:100%;

    border-top:1px solid #ececec;

}

.catalog-filters{

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    padding:14px;

}

.catalog-search{

    width:100%;
    padding:14px;

}

.catalog-search input{

    width:100%;
    height:44px;

    border:none;
    border-radius:12px;

    background:#f6f7f9;

    padding:0 16px;

    font-size:15px;

}

.catalog-search input:focus{

    background:#fff;
    border:1px solid #cd40f7;

}


.catalog-info h1{
  font-size:24px;
  margin-bottom:10px;
}

.catalog-info p{
  max-width:600px;
  color:#666;
  line-height:1.6;
}


/* =========================
   FILTER BUTTONS
========================= */



.filter-btn{

  position:relative;

  padding:10px 18px;

  border-radius:11px;

  border:1px solid;

  background:white;
  
  border-color:rgb(205, 205, 211);

  color:#333;

  font-size:14px;

  cursor:pointer;

  transition:
    border-color .3s ease,
    color .3s ease;

}



/* активный фильтр */

.filter-btn.active{

  border-color:#1877f2;

  color:#1877f2;

}



/* наведение */

.filter-btn:hover{

  border-color:#1877f2;

  color:#1877f2;

}

/* ===== Skeleton ===== */

.skeleton-card{
  pointer-events:none;
}

.skeleton-image{
  grid-column: span 2;
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  background:#e8e8e8;
  position:relative;
  overflow:hidden;
}

.skeleton-line{
  grid-column: span 2;
  height:14px;
  border-radius:8px;
  background:#e8e8e8;
  margin-top:10px;
  position:relative;
  overflow:hidden;
}

.skeleton-line.short{
  width:60%;
}

.skeleton-button{
  height:38px;
  border-radius:8px;
  background:#e8e8e8;
  margin-top:15px;
  position:relative;
  overflow:hidden;
}

.skeleton-image::before,
.skeleton-line::before,
.skeleton-button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
  );
  transform:translateX(-100%);
  animation:skeleton-loading 1.2s infinite;
}

.categories-toggle{
    display:none;
}

.catalog-pagination{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    margin:60px 0 20px;

    flex-wrap:wrap;

}

.page-btn{

    min-width:42px;
    height:42px;

    padding:0 14px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid rgb(205,205,211);

    background:#fff;

    border-radius:12px;

    cursor:pointer;

    font-size:14px;
    font-weight:500;

    transition:
        border-color .25s,
        background .25s,
        color .25s;

}

.page-btn:hover{

    border-color:#1877f2;
    color:#1877f2;

}

.page-btn.active{

    background:#1877f2;
    border-color:#1877f2;

    color:#fff;

}

.page-btn:disabled{

    opacity:.45;
    cursor:default;
    border-color:rgb(205,205,211);
    color:#333;

}

.page-ellipsis{

    min-width:20px;
    display:flex;
    justify-content:center;
    align-items:center;

    color:#999;
    font-size:14px;

    user-select:none;

}

.catalog-empty{

    width:100%;
    text-align:center;
    padding:60px 0;
    color:#888;
    font-size:15px;

}

@media(max-width:500px){

    .catalog-pagination{

        gap:8px;
        margin:40px 0 10px;

    }

    .page-btn{

        min-width:38px;
        height:38px;

        font-size:13px;

        border-radius:10px;

        padding:0 10px;

    }

    .page-ellipsis{

        font-size:13px;

    }

}

@keyframes skeleton-loading{
  to{
    transform:translateX(100%);
  }
}

/* ===== Card animation ===== */

.fade-in{
  opacity:0;
  transform:translateY(20px);
  animation:cardAppear .45s ease forwards;
}

@keyframes cardAppear{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width: 1600px) {
  .catalog-section{
    width:95%;
    margin: 5% auto;
    margin-top: 9%;
  }

  .catalog-filters{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width:500px){

    .catalog-header{
        margin-top:84px; 

        margin-bottom:20px;

        position:static;

        margin-right:0;

        z-index:auto;

        padding-bottom:0;

        background:transparent;

    }


    .catalog-section{
        width:95%;
        margin:0 auto;
        margin-top:18%;
    }


    .catalog-controls{

        display:flex;
        flex-direction:column;
        gap:0;
        width:95%;

        background:#fff;

        border:1px solid rgb(205, 205, 211);

        border-radius:16px;

        overflow:hidden;

        transition:
            box-shadow .3s ease,
            border-color .3s ease;

    }


    .catalog-search{

        width:100%;
        padding:12px;

    }


    .catalog-search input{

        width:100%;
        height:35px;

        margin:0;

        border:none;

        border-radius:12px;

        background:#f6f7f9;

        padding:0 16px;

        font-size:15px;

    }


    .catalog-search input:focus{

        background:#fff;

        border:1px solid #cd40f7;

    }



    .catalog-categories{

        width:100%;

        border-top:1px solid #ececec;

        position:relative;

    }



    .categories-toggle{

        width:100%;

        height:44px;

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:0 14px;

        background:#fff;

        border:none;

        cursor:pointer;

        font-size:15px;

        font-weight:400;

    }



    .toggle-icon{

        font-size:18px;

        transition:
            transform .3s ease,
            color .3s ease;

        color:#666;

    }


    .categories-toggle.open .toggle-icon{

        transform:rotate(45deg);

        color:#1877f2;

    }



    .catalog-filters{

        display:flex;

        flex-wrap:wrap;

        justify-content:flex-start;

        gap:10px;


        max-height:0;

        overflow:hidden;


        opacity:0;

        padding:0 14px;


        transition:

            max-height .35s ease,

            opacity .25s ease,

            padding .35s ease;

    }



    .catalog-filters.open{

        max-height:300px;

        opacity:1;

        padding:14px;

    }



    .filter-btn{

        padding:8px 14px;

        border-radius:999px;

        font-size:13px;

        white-space:nowrap;

    }

}