/* ======================================
   SHOW PRODUCTO
====================================== */

body{
    background:#f7f3ee;
}

/* CONTENEDOR */
.container.py-5{
    padding-top:70px !important;
    padding-bottom:90px !important;
}

/* ======================================
   BREADCRUMB
====================================== */
.breadcrumb{
    margin-bottom:0;
    font-size:.92rem;
}

.breadcrumb a{
    color:#7c766d;
    text-decoration:none;
}

.breadcrumb a:hover{
    color:#5e584f;
}

/* ======================================
   COLUMNA IMAGEN
====================================== */
.img-producto{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    background:#fff;
    border:1px solid #e8dfd4;
    padding:10px;
}

/* MINIATURAS */
.col-lg-3.col-md-6{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.col-lg-3.col-md-6 .card{
    border:1px solid #e7ddd2;
    border-radius:0;
    overflow:hidden;
    cursor:pointer;
    transition:.25s ease;
}

.col-lg-3.col-md-6 .card:hover{
    border-color:#cdbfb0;
}

.col-lg-3.col-md-6 .card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

/* ======================================
   PANEL DERECHO
====================================== */
.carrito-agregar-form{
    background:#fff;
    padding:34px;
    border:1px solid #e8dfd4;
}

.borde-b-1{
    border-bottom:1px solid #e9e0d6;
}

h3.fs-2{
    font-size:2rem !important;
    font-weight:400;
    color:#2a2a2a;
    letter-spacing:.5px;
}

/* DESCRIPCIÓN */
.carrito-agregar-form p{
    color:#646464;
    line-height:1.75;
    font-size:1rem;
}

.carrito-agregar-form strong{
    color:#7c766d;
    font-weight:600;
    letter-spacing:.4px;
}

/* ======================================
   BLOQUES ATRIBUTOS / COMPLEMENTOS
====================================== */
.row .col-md-3{
    margin-bottom:14px;
}

.form-select{
    height:48px;
    border:1px solid #ddd3c8;
    border-radius:0;
    box-shadow:none !important;
    color:#4b4b4b;
}

.form-select:focus{
    border-color:#bcae9d;
}

/* CHECKBOX */
.form-check{
    padding:14px 14px 14px 2rem;
    border:1px solid #ece3d8;
    background:#faf8f5;
    min-height:100%;
}

.form-check-input{
    margin-top:.35rem;
}

.form-check-label{
    color:#4d4d4d;
    font-size:.95rem;
}

/* ======================================
   PRECIO
====================================== */
.h4{
    font-size:1.6rem !important;
    color:#222;
}

#precio{
    color:#7c766d;
    font-weight:700;
}

.text-muted{
    color:#8e877f !important;
}

/* ======================================
   BOTÓN
====================================== */
.boton-principal{
    border:0;
    border-radius:999px;
    background:#cbc3ba;
    color:#7c766d;
    padding:14px 28px !important;
    transition:
        background-color .25s ease,
        color .25s ease;
}

.boton-principal:hover{
    background:#b8afa5;
    color:#5f5951;
}

.boton-principal span{
    font-size:.95rem;
    font-weight:500;
}

.boton-principal i{
    font-size:.85rem !important;
}

/* BOTONES DESHABILITADOS */
.btn[disabled]{
    opacity:1;
}

.text-danger{
    color:#b44b4b !important;
}

.btn-info[disabled]{
    background:#d7d7d7;
    border:0;
    color:#666;
}

/* ======================================
   HR
====================================== */
hr{
    border-color:#ebe2d8;
    opacity:1;
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 991.98px){

    .img-producto{
        margin-bottom:28px;
    }

    .carrito-agregar-form{
        padding:26px;
    }

    h3.fs-2{
        font-size:1.65rem !important;
    }
}

@media (max-width: 767.98px){

    .container.py-5{
        padding-top:35px !important;
        padding-bottom:60px !important;
    }

    .carrito-agregar-form{
        padding:20px;
    }

    .h4{
        font-size:1.35rem !important;
    }

    .d-flex.justify-content-end.pt-3{
        justify-content:center !important;
    }

    .boton-principal{
        width:100%;
        justify-content:center;
    }

    .col-lg-3.col-md-6{
        grid-template-columns:repeat(4,1fr);
    }
}