/************************
variables generales 
*************************/


:root{
    --body-bg: #ffffff;
    --body-txt-default-color: #3c3c3a;
    /* fuentes */
    --body-font-family:'Outfit', sans-serif;
    --title-font-family:'Outfit', sans-serif;
    --font-bold: 700;
    --font-regular: 600;
    --font-light: 400;
    --font-small:75%;
    
    
    /*************************
    colores 
    **************************/ 
    
    /* primary -----------------------------*/
    --primary-color: #3c65c0;
    --primary-contrast: #fff;
    --primary-hover-color: #5d81e2;
    --primary-hover-contrast: #fff;
    
    /* secondary --------------------------*/
    --secondary-color: #6ab120;
    --secondary-contrast:  #fff;
    --secondary-hover-color: #5a8b02;
    --secondary-hover-contrast: #fff;
    
    /* danger -----------------------------*/
    --danger-color: #b2000d;
    --danger-contrast: #fff;
    --danger-hover-color: #8b010b;
    --danger-hover-contrast: #fff;
    
    /* success --------------------------*/
    --success-color: #96eb83;
    --success-contrast:rgba(0,0,0,0.8);
    --success-color: #96eb83;
    --success-contrast:rgba(0,0,0,0.8);
    
    /* DESCATADOS -----------------------*/
    --highlight-color: #000000;
    --highlight-contrast: white;
    
    
    /* default --------------------------*/
    --element-bg: #f9f9f9;
    
    /* text colors ----------------------*/
    --text-color: #1D1D1B;
    --muted-color: #838383;
    
    /* default --------------------------*/
    --default-border-radius:4px;
    
    
    /* buttons---------------------------*/
    --btn-border-radius:.25rem;
    
    

    /* Etiqueta texto destacado */
    --notice-color:var(--highlight-contrast);
    --notice-bg:var(--highlight-color);
    --notice-padding: .125rem .25rem;
    --notice-border-radius: .125rem;

    /* boton flotante redes sociales */
    --chat-facebook-bg:linear-gradient(0deg, rgba(0,98,224,1) 0%, rgba(25,175,255,1) 100%);
    --chat-facebook-color: white;
    --chat-whatsapp-bg:linear-gradient(0deg, rgba(32,176,56,1) 0%, rgba(96,214,106,1) 100%);
    --chat-whatsapp-color: white;


    /* header top */
    --header-top-bg: #3164bd;
    --header-top-color:white;

     /* carro top*/
    --cart-btn-color: #000000;
    --cart-btn-bg:var(--header-top-color);
    --cart-items-bg: #8b0004;
    --cart-items-color: #ffffff;

    /* header down */
    --header-bg: #ffffff;
    --header-navbar-mobile-bg:#f2f2f2;

   /* carro down*/
    --mobile-btn-color:#1D1D1B;
    --mobile-btn-bg:none;
    --mobile-btn-hover-color:var(--primary-color);
    --mobile-btn-hover-bg:none;
    --mobile-cart-items-bg:var(--primary-color);
    --mobile-cart-items-color: white;

    /* buscador */
    --search-input-bg:white;
    --search-input-color:var(--header-top-bg);
    --search-btn-bg:white;
    --search-btn-color:var(--header-top-bg);
    --search-btn-hover-bg:white;
    --search-btn-hover-color:var(--primary-color);
    --search-decoration-bg:var(--element-bg);

    /* LOGO ------------------------------*/
    --header-logo-align: left;
    --header-logo-align-mobile:center;
    --logo-height: 100px;
    --logo-width: 100px;

    /* menu ------------------------------*/
    --menu-columns: 5;

    /* menu destacado, cuando el nombre se escribe con ==nombre== */
    --menu-hightlight-bg: #e3aa9f;
    --menu-hightlight-color:var(--primary-contrast);
    --menu-hightlight-hover-bg: #f0d0c8;
    --menu-hightlight-hover-color:white;


    /* menu Lv 1 -------------------------*/
    --lv1-color:var(--body-txt-default-color);
    --lv1-bg: none;
    --lv1-transform: capitalize;
    --lv1-size:14px;
    --lv1-font:var(--font-light);
    --lv1-hover-color: #69b11e;
    --lv1-hover-bg: none;

    /* menu Lv 2 ------------------------*/
    --lv2-color: #2c2c2c;
    --lv2-bg: none;
    --lv2-transform: capitalize;
    --lv2-size:14px;
    --lv2-font:var(--font-regular);
    --lv2-hover-color:var(--lv1-hover-color);
    --lv2-hover-bg: none;

    /* menu Lv 3 ------------------------*/
    --lv3-color:var(--lv1-color);
    --lv3-bg: none;
    --lv3-transform: capitalize;
    --lv3-size:14px;
    --lv3-font:var(--font-regular);
    --lv3-hover-color:var(--lv1-hover-color);
    --lv3-hover-bg: none;
    --title-background:black;
    /********************************************************************
    Modal Suscripción
    *********************************************************************/ 
    /* Variables para el título del modal de suscripción */
    --suscripcion-titulo-font-size: 1.8rem;
    --suscripcion-titulo-font-weight: var(--font-bold);
    --suscripcion-titulo-background: linear-gradient(45deg, #00b8af, #09615c);
    --suscripcion-titulo-margin-bottom: 15px;

    /* Variables para el texto del modal de suscripción */
    --suscripcion-texto-font-size: 1.1rem;
    --suscripcion-texto-line-height: 1.6;
    --suscripcion-texto-color: var(--body-txt-default-color);

    /* Variables para el botón de suscripción */
    --suscripcion-boton-padding: 12px 30px;
    --suscripcion-boton-margin: 15px auto;
    --suscripcion-boton-font-weight: bold;
    --suscripcion-boton-border-radius: 25px;
    --suscripcion-boton-background: linear-gradient(45deg, #00b8af, #09615c);
    --suscripcion-boton-border: none;
    --suscripcion-boton-color: white;
    --suscripcion-boton-text-transform: uppercase;
    --suscripcion-boton-letter-spacing: 1px;
    --suscripcion-boton-transition: transform 0.2s ease, box-shadow 0.2s ease;

    /********************************************************************
    Pop up última compra
    *********************************************************************/
    --popup-bg-color: rgba(0, 0, 0, 0.7);
    --popup-text-color: white;
    --popup-text-price-color: white;
    --popup-font-family: var(--font-body-family);
    --popup-message-size: 14px;
    --popup-product-name-size: 14px;
    --popup-time-size: 12px;
    --popup-price-size: 14px;


    /********************************************************************
    Cabecera Slider mensajes
    *********************************************************************/
    --mobile-contact-banner-bg: linear-gradient(240deg, #f3f3f3, #ffffff);
    --mobile-contact-banner-text: var(--body-txt-default-color);
    --mobile-contact-banner-title-color: #2d3748;
    --mobile-contact-banner-icon-color: var(--primary-color);

    /* Tamaños configurables */
    --mobile-contact-banner-font-size: 11px;
    --mobile-contact-banner-icon-size: 12px;

        /********************************************************************
    Temporizador con colección de productos
    *********************************************************************/
    --collection-timer-bg: linear-gradient(135deg, #1e3c72, #2a5298);
    --collection-timer-title-text-color: #fff;
    --collection-timer-box-bg: rgba(255, 255, 255, 0.15);
    --collection-timer-box-text-color: #fff;
    --collection-timer-highlight-bg: yellow;
    --collection-timer-highlight-text: black;
    --scroll-arrow-color: #ffffff;

    /********************************************************************
    Temporizador Solo con botón
    *********************************************************************/
    --exclusive-timer-bg: linear-gradient(135deg, #FF416C, #FF4B2B);
    --exclusive-timer-box-bg: rgba(255, 255, 255, 0.2);
    --exclusive-timer-box-text-color: #fff;
    --exclusive-timer-message-bg: #FFDE59;
    --exclusive-timer-message-text: #333;
    --exclusive-timer-button-bg: linear-gradient(135deg, #4CAF50, #3e8e41);
    --exclusive-timer-button-hover-bg: linear-gradient(135deg, #45a049, #36802e);
    --exclusive-timer-button-text: white;
    --exclusive-timer-button-hover-text: #eeeeee;
    }


/*******************************************************************
Colección home grilla temporizador
********************************************************************/

.bs-collection-temporizer{
    --cols:2; 
    --cols-sm:3;
    --cols-md:3; 
    --cols-lg:4; 
    --cols-xl:4;
}


.pagination{
--pagination-bg: inherit;
--pagination-color: inherit;
--pagination-hover-bg: var(--element-bg);
--pagination-hover-color:inherit;
--pagination-active-bg: var(--secondary-color);
--pagination-active-color:var(--secondary-contrast);
}



.bs-filter-btn{
    --btn-bg: white;
    --btn-color: inherit;
    --btn-hover-bg: var(--secondary-color);
    --btn-hover-color: var(--secondary-contrast);
}
.slick-slider{
    --slider-btn-color: black;
    --slider-btn-color-active: black;
    /* dots */
    --slider-dots-width:.5rem;
    --slider-dots-height:.5rem;
    --slider-dots-bg: var(--secondary-color);
    --slider-dots-bg-hover: rgb(11,167,255);
    --slider-dots-bg-active: var(--primary-contrast);
    --slider-dots-op:1;
    --slider-dots-border-size: 2px;
    --slider-dots-border-color-active: var(--primary-color);

    /* flechas*/
    --slider-arrow-bg: none;
    --slider-arrow-color: rgba(0,0,0,0.4);
    --slider-arrow-border: 2px solid rgba(0,0,0,0.4);
    
    --slider-arrow-hover-bg: none;
    --slider-arrow-hover-color: var(--primary-color);
    --slider-arrow-hover-border: 2px solid var(--primary-color);
}
.bs-discount{
    --weight:var(--font-bold);
    --padding: .25em 0.8em;
    --border-radius: .25rem;
    --discount-bg-color:var(--primary-color);
    --discount-txt-color:var(--primary-contrast);
}
.bs-collection{
    
--cols-xl:4;
    
--cols-lg:3;
    
--cols-md:3;
    
--cols-sm:3;
    
--cols:2;
    
--collection-product-bg:white;
    
--collection-product-padding:0px;
    
--collection-product-border: 1px solid #e0e0e0;
    
--collection-product-title-lines:2;
    
--collection-product-border-radius: 4px;
    
--collection-product-img-border-radius: 4px 4px 0 0;
    
--aspect-ratio:1/1;

    /*loading animation*/
    
--loading-color1: #E9E9E9;
    
--loading-color2: #d1d1d1;
}
.bs-collection-bg{
    --color: white;
    --background:var(--primary-color);
}
.grid-slider{
 --slider-margin:12px;
 }
.bs-blog{
    --aspect-ratio:3/4;
    --cols-xl:3;
    --cols-lg:3;
    --cols-md:2;
    --cols-sm:2;
    --cols:2;
    --slider-margin:1rem;

    /* article */
    --blog-article-bg: #ffffff;
    --btn-bg:var(--element-bg);
    --btn-color:var(--primary-color);
    --btn-hover-bg:var(--element-bg);
    --btn-hover-color:var(--primary-color);
    --btn-hover-decoration:underline;
}
.bs-blog-home{
    --blog-home-bg: none;
    --blog-home-padding: 16px 0;
}
.bs-footer{
    --footer-bg: url(pie1.png);
    --footer-color: white;
    --footer-link-color: #000000;
    --footer-link-hover-color: #67b21f;
    --footer-title-color: #3064bc;
    --footer-title-decoration: #3164bd;
    --footer-logo-bg:none;
}