/* EL RINCÓN DE EINSTEIN — COLORES GENERALES */

:root {
    --rincon-rojo: #d9252a;
    --rincon-rojo-oscuro: #b91c22;
    --rincon-mostaza: #dca820;
    --rincon-amarillo-claro: #fff0b8;
    --rincon-crema: #fff8ed;
    --rincon-blanco: #ffffff;
    --rincon-texto: #29231f;

    /* Compatibilidad con los componentes que iremos adaptando */
    --pipas-cafe: var(--rincon-rojo);
    --pipas-cafe-oscuro: var(--rincon-rojo-oscuro);
    --pipas-amarillo: var(--rincon-mostaza);
    --pipas-amarillo-pastel: var(--rincon-amarillo-claro);
    --pipas-beige: var(--rincon-crema);
    --pipas-blanco-calido: var(--rincon-blanco);
}

html,
body,
main,
#main,
.bs-main,
.main-content,
.page-content,
.content-wrapper {
    background-color: var(--rincon-crema) !important;
}

main .container,
main .container-fluid,
main .container-xxl,
.bs-main .container,
.bs-main .container-fluid,
.bs-main .container-xxl {
    background-color: transparent;
}

.pipas-categories,
.pipas-benefits,
.pipas-history,
.pipas-blog,
.pipas-products,
.pipas-section-separator {
    background-color: var(--rincon-crema) !important;
}

.pipas-benefits__card,
.pipas-history__content,
.pipas-category-card__link,
.pipas-blog-card,
.pipas-product-card {
    background-color: var(--rincon-blanco) !important;
}

.bs-banners__title {
    color: var(--rincon-texto);
    font-weight: 700;
}

.btn-primary,
.badge-primary {
    background-color: var(--rincon-rojo) !important;
    border-color: var(--rincon-rojo) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--rincon-rojo-oscuro) !important;
    border-color: var(--rincon-rojo-oscuro) !important;
    color: #ffffff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--rincon-rojo) !important;
    border-color: var(--rincon-rojo) !important;
    opacity: 0.65;
}

.cart-items {
    background-color: var(--rincon-mostaza) !important;
    color: var(--rincon-texto) !important;
}

.form-control {
    border-color: #d9cdbb;
}

.form-control:focus {
    border-color: var(--rincon-mostaza);
    box-shadow: 0 0 0 3px rgba(220, 168, 32, 0.2);
}

.breadcrumb,
.bs-breadcrumb {
    background-color: transparent !important;
}