/* =================================
   PRODUCT CATALOG
================================= */

.product-catalog{
    padding:50px 100px 150px; 
}

.catalog-header{
    margin-bottom:40px;
}

.catalog-tag{
    color:var(--blue);

    font-size:.95rem;
    font-weight:600;
}

.catalog-title{
    margin-top:10px;

    font-size:3rem;
    line-height:1.1;

    color:#fff;
}

/* =================================
   GRID
================================= */

.catalog-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;
}

/* =================================
   CARD
================================= */

.catalog-card{
    position:relative;

    min-height:520px;

    overflow:hidden;

    border-radius:20px;

    background:#111;
}

.catalog-image{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s ease;
}

.catalog-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.20) 0%,
        rgba(0,0,0,.30) 35%,
        rgba(0,0,0,.55) 100%
    );

    z-index:1;
}

.catalog-content{
    position:relative;

    z-index:2;

    height:100%;

    padding:24px;

    display:flex;
    flex-direction:column;
}

.catalog-content h3{
    color:#fff;

    font-size:2rem;

    line-height:1.1;

    margin-bottom:14px;
}

.catalog-content p{
    color:#fff;

    font-size:.95rem;

    line-height:1.6;

    margin-bottom:20px;
}

.catalog-content ul{
    list-style:none;

    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;

    gap:10px;
}

.catalog-content li{
    color:#fff;

    font-size:.95rem;
}

.catalog-content li::before{
    content:"○ ";
}

.catalog-card:hover .catalog-image{
    transform:scale(1.05);
}

/* =================================
   SEGUNDA FILA CENTRADA
================================= */

.catalog-card:nth-child(5){
    grid-column:1;
}

.catalog-card:nth-child(6){
    grid-column:2;
}

.catalog-card:nth-child(7){
    grid-column:3;
}

/* =================================
   MOBILE CONTROLS
================================= */

.catalog-controls{
    display:none;
}

/* =================================
   TABLET
================================= */

@media(max-width:1200px){

    .catalog-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .catalog-card:nth-child(5),
    .catalog-card:nth-child(6),
    .catalog-card:nth-child(7){
        grid-column:auto;
    }

}

/* =================================
   MOBILE
================================= */

@media(max-width:900px){

    
    .product-catalog{
        padding:50px 0 110px;
    }

    .catalog-header{
        padding:0 22px;
        margin-bottom:24px;
    }

    .catalog-title{
        font-size:2rem;
    }

  .catalog-grid{

    display:flex;
  overflow-x:hidden;
    gap:18px;

  
    overflow-y:hidden;

    scrollbar-width:none;

    padding:0 22px 8px;

    scroll-snap-type:x mandatory;
    scroll-padding:22px;

    -webkit-overflow-scrolling:touch;
}

.catalog-grid::-webkit-scrollbar{
    display:none;
}

    .catalog-card{

       flex:0 0 min(82vw,340px);

        min-height:420px;

        scroll-snap-align:center;
        scroll-snap-stop:always;
    }

    .catalog-content{
        padding:22px;
    }

    .catalog-content h3{
        font-size:1.35rem;
    }

    .catalog-content p{
        font-size:.9rem;
        line-height:1.55;
    }

    .catalog-controls{
        display:flex;

        justify-content:flex-end;

        gap:12px;

        margin-top:20px;

        padding-right:22px;
    }

    .catalog-arrow{
        width:42px;
        height:42px;

        border:0;
        border-radius:50%;

        background:#e2e4e8;
        color:#60646c;

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

        cursor:pointer;

        transition:.2s ease;
    }

    .catalog-arrow:hover{
        background:#d7dbe1;
        color:#25272c;
    }

}

/* =================================
   SMALL MOBILE
================================= */

@media(max-width:560px){

    .catalog-grid{
        padding-left:24px;
        padding-right:24px;

        scroll-padding:24px;
    }

    .catalog-card{
        flex-basis:82vw;

        min-height:380px;
    }

    .catalog-controls{
        padding-right:24px;
    }

}

/* ==========================
   PRODUCT NAV
========================== */

.product-nav{
    padding:100px 0;
    background:#050505;
}

.product-nav-container{
    width:min(1400px,90%);
    margin:0 auto;
}

.product-nav-header{
    margin-bottom:40px;
}

.product-nav-header span{
    color:var(--blue);
    font-size:.9rem;
    font-weight:600;
}

.product-nav-header h2{
    margin-top:10px;
      color:#fff;
    font-size:3rem;
    line-height:1.1;
}

.product-nav-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.product-nav-card{
    position:relative;

    display:block;

    height:280px;

    overflow:hidden;

    border-radius:20px;

    text-decoration:none;

    background:#000;

    transition:.3s ease;
}

.product-nav-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s ease;
}

.product-nav-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    padding:24px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,.75) 100%
    );
}

.product-nav-overlay h3{
    color:#fff;
    font-size:1.5rem;
    font-weight:700;
}

.product-nav-card:hover img{
    transform:scale(1.06);
}

.product-nav-card:hover{
    transform:translateY(-4px);
}

/* ==========================
   MOBILE
========================== */

@media(max-width:900px){

    .product-nav{
        padding:80px 0;
    }

    .product-nav-container{
        width:90%;
    }

    .product-nav-header{
        margin-bottom:24px;
    }

    .product-nav-header h2{
        font-size:2rem;
    }

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

    .product-nav-card{
        height:180px;
        border-radius:14px;
    }

    .product-nav-overlay{
        padding:16px;
    }

    .product-nav-overlay h3{
        font-size:1rem;
    }

}