@import url('carouselDetails.css');
@import url('quantityInput.css');

#details {
    padding: 1rem;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 1rem;
}
#cantSection {
    width:100%;
    margin-top: 1rem;
}
/*
#info > p {
    margin-bottom: 3rem;
}*/
#cantSection .item:first-of-type::before {
    content: '';
    width: 100%;
    /* height: 1px; */
    /* background: rgba(0,0,0,.1); */
    padding: 0px;
    position: absolute;
    top: -1rem;
    left: 0px;
}
#cantSection .item {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    grid-gap: 1rem;
    /* margin-bottom: 2rem; */
    position: relative;
    align-items: center;
}
#cantSection .item p {
    margin-bottom: 0px;
}
/* #cantSection .item::after {
    content: '';
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,.1);
    padding: 0px;
    position: absolute;
    bottom: 0.5rem;
    left: 0px;
} */
.responsiveTitle {display: none;}
#details .bread a,
#details .bread span {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(102,102,102,0.7);

}
#details .bread a::after {
    font-size: 12px;
    content:'/';
    margin: 0rem -.1rem 0rem .1rem;
}
#details h2 {
    /* font-size: 1.7rem; */
    line-height: 1;
    /* font-weight: bold; */
    padding-bottom: 0rem;
    margin-bottom: 0rem;
    padding-top: .5rem;
}
#details hr {
    margin: .5rem 0;
}
@media(max-width: 992px) {
    #details {
        display: flex;
        flex-direction: column;
    }
    .responsiveTitle {display: block;}
    #info .bread, #info h2 {display: none;}
}
.peso h3{
    font-size: small;
    color: #2c9dd7;
    margin-bottom: 0;
}

.peso2 h3{
    font-size: small;
    color: #dc3545;
    margin-bottom: 0;
}

.name{
    grid-area: descri;
}
.peso{
    grid-area: peso;
}

.peso2{
    grid-area: peso2;
}


.qty-input{
    grid-area: qty;
}

.oferta{
    grid-area: oferta;
}

.item{
    grid-template-areas: "descri descri oferta" "peso peso2 qty";
}

#cantSection .item {
    grid-gap: 0.3rem;
    /* margin-bottom: 0.7rem; */
    position: relative;
    align-items: center;
}
#cantSection .item::after {
    bottom: -0.5rem;
    left: 0px;
}

.oferta{
    color:red;
    font-weight: 200;
}

#info article p{
    margin-bottom: .2rem;
    line-height: 1.2;

}
#details{
    /*font-size:0.9rem;*/
    font-size:0.95rem;
}

#products{
    grid-column-start: 1;
    grid-column-end: span 2;
}

.detalle-esp-tecnica-link{
    color: #2c9dd7;
}

#texto-inferior{
    grid-column-start: 1;
    grid-column-end: none;
}

.fancybox__content {
    width: 500px !important;
    height: 500px !important;
}