#productos{
    width: 100%;
    display: grid;
    grid-template-columns: 260px 3fr;
}
#productos .container-filtros{
    border-right: 3px solid white;
    padding: 20px;
    background-color: #ece1ec;
    color: #494949;
}

#productos .filtro{
    margin-top: 50px;
}

#productos .filtro form{
    display: flex;
    width: 90%;
}

#productos .filtro a{
    text-decoration: none;
    color: black;
    margin-left: 10px;
    line-height: 2;
}

#productos .filtro a:hover{
    text-decoration: underline;
}

#productos .cuerpo-catalogo{
    padding: 20px ;
}

#productos .intro_categoria{
    padding: 20px;
    color: #494949;
}

#productos .intro_categoria h1{
    font-family: 'Playfair Display', serif;
}

#productos .intro_categoria p{
    letter-spacing: 1px;
    line-height: 2;
}

#productos .catalogo_productos{
    margin-top: 10px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);
    gap:30px;
    justify-content: center;
    align-items: flex-start;
    
}

#productos .catalogo_productos .caja_producto { 
   position: relative;
   background-color: #fff;
   box-shadow: 0.5rem 0.5rem rgba(0,0,0,.1);
   border-radius: 0.5rem;
   border: 1px solid #333;
   padding: 1.5rem;
   overflow: hidden;
   height: 400px;
}

#productos .catalogo_productos .caja_producto img{
    height: 220px;
   width: 100%;
   object-fit: contain;
   margin-bottom: 12px;
}

#productos .catalogo_productos .caja_producto .megusta,
#productos .catalogo_productos .caja_producto .ver{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 1.5rem;
   background-color: #fff;
   border: 1px solid #333;
   border-radius: .5rem;
   text-align: center;
   color: #333;
   cursor: pointer;
   transition: .2s linear;
}

#productos .caja_producto .megusta{
   right: -6rem;
   background-image: url(../../assets/img/milista.png);
   background-position: center;
   background-size: 4rem;
}

#productos .caja_producto .ver{
   left: -6rem;
   background-image: url(../../assets/img/ver.png);
   background-position: center;
   background-size: 4rem;
}

#productos .caja_producto .megusta:hover,
#productos .caja_producto .ver:hover{
    border: 3px solid #333;
}

#productos .caja_producto:hover .megusta{
   right:1rem;
}

#productos .caja_producto:hover .ver{
   left:1rem;
}

#productos .caja_producto .name{
   font-size: 28px;
   color: #494949;
   height: 100px;
   font-family: 'Playfair Display', serif;
}

#productos .caja_producto .flex{
   display: flex;
   align-items: center;
   gap:1rem;
   margin-top: 30px;
}

#productos .qty{
   font-size: 1rem;
   color:#333;
   margin-left: auto;
}

#productos .caja_producto .flex .price{
   font-size: 1rem;
   color: red;
   margin-right: auto;
}

@media (max-width: 720px) {
    #productos{ display: block;}
    #productos .container-filtros{display: none;}
    #productos .caja_producto .megusta{right:1rem;}
    #productos .caja_producto .ver{left:1rem;}
}


/* ------------------- PRODUCTOS_ITEM ------------------*/
#item {
   padding: 40px;
   background-color: #ece1ec;
}

#item .next{
    text-decoration: none;
    color: #494949;
    padding: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    
    position: absolute;
    margin-top: 100px;
}

#item form{
    border-radius: 8px;
    border:1px solid gray;
    background-color: white;
    box-shadow: 8px 8px rgba(0,0,0,.1);
    margin-top: 10px;
}

#item form h2{
    text-align: center;
    margin-top: 50px;
    color: #494949;
    margin-bottom: 0;
    font-family: 'Playfair Display', serif;
}
 
#item form .row{
    display: grid;
    gap: 50px;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
    padding: 60px;
}

#item form .row .image-container{
    text-align: center;
}
 
#item form .row .image-container .main-image img{
    height: 70%;
    width: 100%;
    object-fit: cover;
    margin-bottom: 60px;
    margin-top: 10px;
    max-height: 418px;
    
}
 
#item form .row .image-container .sub-image{
    display: flex;
    gap: 2px;
    justify-content: center;
}

#item form .row .image-container .sub-image img{
    height: 70px;
    width: 10rem;
    object-fit: contain;
    padding:5px;
    cursor: pointer;
}
 
#item form .flex .image-container .sub-image img:hover{
  transform: scale(1.1);
}
 
#item form .row .content{
    letter-spacing: 1px;
}

#item form .row .content .details{
    font-size: 16px;
    line-height: 2;
}

#item form .row .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px;
}

#item .flex .dispo, #item .flex .price {
    font-size: 20px;
    padding: 5px;
    border: 1px dotted #cc780a;
    color: #cc780a;
}

#item .botones{
    display: flex;
    gap: 20px;
    margin: 0 40px;
}

#item .btn-contactar, #item .btn-megusta{
    display: block;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px 30px;
    font-size: 17px;
    text-transform: capitalize;
    color:white;
    cursor: pointer;
    text-align: center;
    background-color: grey;
    text-decoration: none;
    border-style: none;
    font-family: 'Open Sans', sans-serif;
}
 
#item .btn-contactar:hover, #item .btn-megusta:hover{
    background-color: black;
}

@media (max-width: 1200px) {
    #item form{position: inherit;}
    #item form .row{display: block; padding: 30px;}
    #item form .row .image-container .main-image img{ width: 450px; margin: 0; height: auto;}
    #item form .row .image-container .sub-image img{ width: 100px; padding: 7px;}
    #item form .row .flex{margin: 20px 0;}
    #item .botones{margin: 0;}
    #item .btn-contactar, #item .btn-megusta{padding: 10px;}
}

@media (max-width: 720px){
    #item form .row .image-container .main-image img{ width: 230px; height: auto;}
    #item form .row .image-container .sub-image img{ width: 70px; padding: 2px;}
}