:root {
    --primary-color: #fab505;
    --secondary-color: #000000;
    --price-color: #000000;
    --link-hover-color: #fab505;
    --box-bodybkg-color: #f0f0f0;
    --border-radius: 5px;
    --body-font-family: Poppins;
    --title-font-family: Poppins;
    --body-font-size: 14px;
    --title-font-size: 18px;

}

/* Barra de título, el color que coincida con el color del slider para que no se vea una línea divisorioa, negro en este caso */
.header-bottom {
    --header-top-border-bottom: 1px solid var(--secondary-color);
	--header-bottom-border-bottom: 1px solid var(--secondary-color);
}

/* input de búsqueda de productos, en pantalla grande */
@media only screen and (min-width: 992px) {
  #search_widget {
    min-width: 26.5rem;
  }
}

@media only screen and (min-width: 768px) {
  #search_widget {
    float: right;
    margin-bottom: 0;
  }
}

/* link de producto en tarjetas de producto */
.product-miniature a {
    color: black;
    background-color: transparent;
}

.all-product-link.btn i {
    color: var(--secondary-color);
}

.js-address-form a:hover {
    color: var(--secondary-color);
}
.js-conditions-to-approve a:hover {
    color: var(--secondary-color);   
}
.js-conditions-to-approve label {
     font-weight: 550;
}

@media (max-width: 767px) {
    .payment__actions {
        flex-direction: column-reverse;
    }
}


/* formas con etiquetas flotantes para direcciónes -- en cel */
.form-floating >  .form-label {
	font-weight: 400;
    font-size: unset;
    font-style: italic;
    /* color: gray; */
}
.form-floating > .form-control {
	height: unset;
	line-height: 1.25;
	min-height: unset;
    padding-bottom: 5px;
}

.form-floating-textarea > .form-label {
     padding: .75rem .75rem;
}

.form-floating-textarea > textarea {
    height: 88px!important;
}

/* esto eliminar la etiqueta flotante cuando tiene texto cualquiera y/o tiene el enfoque, no funciona muy bien
   porque deja un espacio en blanco sin usar....
*/
/*
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label {
  opacity: 0;  Make the label text transparent when floated 
   Or, if you want it to visually disappear but still occupy space: 
   color: transparent; 
}
*/

/* Ajustar TextArea cuanto esta en un form-group y usa floating label, el caso es que el padding top solo lo respecta antes
   de scrollear, ya escroleado usa el area del padding que es donde está la etiqueta flotada, por lo que se mezclan ambos
   textos... esta solición crea una franja blanca superior, sobre esta queda el label y el text area por debajo, como inicialmente 
   el textarea respecta el padding pues sobre pasa inicialmente la franja... pero cuando scrolea el text area, la parte superior
   del scroll queda por debajo del area blanca, por tanto esta parte ya no se mezcla */
.form-floating-textarea {
  position: relative;
  /* max-width: 300px;  not relevant */
  /* margin: 40px 20px; not relevant */
}

.form-floating-textarea:before {
  content: '';
  position: absolute;
  top: 1px; /* border-width (default by BS) */
  left: 1px; /* border-width (default by BS) */
  width: calc(100% - 14px); /* to show scrollbar */
  height: 30px;
  border-radius: 4px; /* (default by BS) */
  background-color: #ffffff; /* igualar al fondo */
}


.cart-overview hr {
    margin-top: 0rem;
    margin-bottom: .5rem;
}

/** mejoramiento de espaciado en el resumen del carrito en el checkout, habia mucho espacio entre el nombre y texto adicionales */
.cart-summary__products .cart-summary__product__body .product-line-info {
	margin: unset;
}

/* los divisores estaban muy claros */
hr:not(.alert-divider) {
    color: unset;
}

.carousel .carousel-indicators button {
  background-color: var(--secondary-color);
  border: 1;
  border-radius: 1000rem;
  height:12px;
  width: 12px;
}

.page-product .product__description-short {
    margin-bottom: 0.5rem;
}

.header {
    --header-bg: #000;
    --header-top-bg: #000;
    --header-color: var(--primary-color);
    /* color-mix(in srgb, #FF7F50 100%, #070707F7 0%); */
    --header-top-color: var(--primary-color);
}

.h3 {
    font-size: 1.3rem;
}

a {
    /*color: black;*/
    background-color: transparent;
}

.btn {
    border: none;
}

/* Barra de búsqueda */
.container-md {
    --bs-gutter-x: 1.0rem; /* dar mas espacio en el celular porqe no se definió otro contaier para amall */
}
.header-bottom .navbar-brand {
    /* originalmente son 250, pero el logo de DILAR es muy ancho para el celular, botones de usuario y carrito saltaban al siguiente renglón, 
       Ese logo tiene mucha información, image, titulo y hasta subtitulo... si se simplifica podemos regresar al dato original..
       pero la condición es ue el logo no tenga más de 200 de ancho y cuando mucho 50-52 de alto para que funcione bien
    */
    max-width: 200px; 
}
.search__offcanvas {
    background-color: var(--header-bg);
    color: var(--primary-color);
}
.search__offcanvas .btn-close {
    color: var(--primary-color) !important;
    opacity: unset;
}

@media (min-width: 992px) {
  .header-block--active .header-block, .header-block--active .header-block__icon {
    color: unset; /*var(--bs-primary) horrible, como hacer que el color dependa del media query!!!*/ 
  }
}

@media (min-width: 768px) {
  .header-block__badge {
    background: var(--primary-color); 
    color: black;
  }   
}

/* mobile menu (side bar) */

@media (max-width: 767px) {
  #mobileMenu {
    width: 300px;
  }

  #offcanvas-faceted {
    width: 300px;
  }

}

#offcanvas-faceted {
    .offcanvas-header {
        background-color: var(--primary-color);
    }
}

#mobileMenu {
    padding-left: 0vw; /* eliminar bordes */
    padding-right: 0vw;
    .offcanvas-header {
        background-color: var(--primary-color);
    }

}

#mobileMenu  a {
        color: var(--secondary-color);
}

/* slider, carusel del imágenes */
@media (max-width: 767px) {    
    .carousel .carousel-control-prev {
        --slider-control-height: 2rem;
        width: 2rem;
        left: 1rem;
    }
    .carousel .carousel-control-next {
        --slider-control-height: 2rem;
        width: 2rem;
        right: 1rem;
    }
}

/** Cambios generales * */
body.box_layout {
    background-color: var(--box-bodybkg-color);
    background-image: url(https://coderplace.net/prestashop/PRS02/PRS02043/demo2/modules/cp_themeoptions/views/img/boxed-bg.png);
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Set body font family  */
body,
.top-menu a[data-depth="0"],
.btn {
    font-family: var(--body-font-family), Arial, Helvetica, sans-serif;
}

/* Set body font size */
body,
.product-title a,
h4,
h5,
h6,
.h4,
.h5,
.h6,
#desc_user_info a.logout {
    font-size: var(--body-font-size);
}

/* Set title font family and size */
.flexslider .slides li .slide_content .headdings .sub_title,
.cart_block .toggle-title,
.footer-container .links h3 a,
#main>h1,
#main h2.h2,
#main .page-header h1,
.block-category h1,
#right-column .block .block_title,
.breadcrumb .h1,
.text-uppercase.h6,
#subcategories .subcategory-heading,
#subcategories .subcategory-heading,
.Recent-title,
.footer-container .links .h3,
body#checkout section.checkout-step .step-title,
.block-social .block_title,
.cat-title.title2,
h1,
h3,
.h2,
.title_menu,
#left-column .block .block_title,
.category-info h1,
.Recnet-blog h3 {
    font-family: var(--title-font-family), Arial, Helvetica, sans-serif;
    font-size: var(--title-font-size);
}

.products-section-title h2.title {
    font-family: var(--title-font-family), Arial, Helvetica, sans-serif;
}


/* Set Primary color & Secondary color */
#header .header-top-main.bg_main #cpheadercms2 .offer-link a,
.ap-total-wishlist,
.ap-total-compare,
.cart-products-counthome,
.customNavigation i.next:hover::before,
.customNavigation i.prev:hover::before,
.special-products .products .product_list .product-actions .btn.add-to-cart:hover,
.special-products .products .product_list .product-actions-main .btn.add-to-cart:hover,
#left-column .block_content .allproducts,
.btn:focus,
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.products .product_list li .product-miniature .product-actions-main .view_detail,
.products .product_list li .product-miniature .product-actions .view_detail,
.products-sort-order .select-list:hover,
#js-product-list .product_list.gridcount.list li.product_item .product-actions-main .view_detail,
#js-product-list .product_list.gridcount.list li.product_item .product-actions .view_detail,
body#checkout [data-action="show-password"],
.custom-radio input[type="radio"]:checked+span,
#authentication [data-action="show-password"],
.input-group .input-group-btn>.btn,
#cpnavcmsblock .contact_description a::before,
.pagination .current a,
.pagination a:hover,
.cpcategory-container .categoryblock .block_content .categorylist .cate-btn a:hover,
.checkout-step li.nav-item .nav-link.active,
.search-widget form button[type="submit"]:hover,
#header .header-top .header_logo::before,
.cat-title.title2,
.Recnet-blog .pagination li.active>span,
.blog-image .blogicons .icon:hover::before,
.blog-image .blogicons .icon:active::before,
.blog-image .blogicons .icon:focus::before,
#left-column #cpinstagramblock .products-section-title,
#cpinstagramblock .instagramblock .instagram_list article.instagram_item a::before,
#cpinstagramblock .instagramblock .instagram_list article.item a::before,
#header .header-top .header_logo a::before,
#cpnavcmsblock .contact_description .offer-icon::before,
#header .vertical_currency li.current a.dropdown-item,
#header .vertical_currency ul.dropdown-menu li:hover a,
#cp_sidevertical_menu_top .title_main_menu,
#index .tabs .nav-tabs .nav-link.active,
.cart_block.block.exclusive .top-block-cart,
#_desktop_user_info .user-info .logout.hidden-md-down,
.newsletter-form a.button,
.flexslider .flex-direction-nav .flex-next:hover,
.flexslider .flex-direction-nav .flex-prev:hover,
.block-promo .promo-input+button,
.product-quantity .add .btn.btn-primary.checkout_button,
#_desktop_user_info .user-info .logout.hidden-md-down:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

#search_filters .ui-slider .ui-slider-handle,
.blog-image .blogicons .icon:hover::before,
.blog-image .blogicons .icon:active::before,
.blog-image .blogicons .icon:focus::before,
.Recnet-blog .pagination li.active>span,
#left-column #cpinstagramblock .owl-page.active span,
#left-column #cpinstagramblock .owl-page span:hover,
#header .vertical_currency li.current a.dropdown-item,
#header .vertical_currency ul.dropdown-menu li:hover a,
.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.footer-container .block-social li a:hover::before,
#header .header-top-main.bg_main #cpheadercms2 .offer-link a::before,
.products .product_list .product-actions .add-to-cart::before,
.products .product_list .product-actions-main .add-to-cart::before,
.products .product_list li .product-miniature .product-actions-main .view_detail::before,
.products .product_list li .product-miniature .product-actions .view_detail::before,
#left-column #cpinstagramblock .instagram-heading::before,
#cpinstagramblock .instagramblock .instagram_list article.instagram_item a::after,
#cpinstagramblock .instagramblock .instagram_list article.item a::after,
.flexslider .flex-direction-nav .flex-next:hover::before,
.flexslider .flex-direction-nav .flex-prev:hover::before {
    background-color: var(--secondary-color);
}


.products .product_list li .fa-heart::before,
.cmsbanner .sub-btn,
.list-group-item-action:focus,
.list-group-item-action:hover {
    color: var(--secondary-color);
}

#cpcmsbanner1 .cms-block .offer-text2 span.yellow,
#cpcmsbanner2 .cms-block .offer-text2 span.yellow,
#cpcmsbanner3 .cms-block .offer-text2 span.yellow,
.flexslider .caption-description .slidertext2 span,
.page-my-account #content .links a:hover i,
.vertical_language .current a.dropdown-item,
.block-categories .block_content .collapse-icons .add:hover,
.block-categories .block_content .collapse-icons .remove:hover {
    color: var(--primary-color);
}

.block_newsletter .title::before,
.header-top .header-div .header-center #cpheadercms3 .callus::before,
.service_image,
.carousel-indicators .active,
.footer-container .block-social li a:hover,
.wishlist-item.added,
.wishlist-item.added:hover {
    background-color: var(--primary-color);
}


/* Set link hover colors */
a:focus,
a:hover,
.breadcrumb li a:hover::before,
#header ul.dropdown-menu li a:hover,
.header-top .menu #manufacturers .sub-menu .top-menu>li a.dropdown-submenu:hover,
.nav-item .nav-link.active,
.nav-item .nav-separtor.active,
.footer-container li a:hover,
#left-column .products-block .view_more a:hover,
#right-column .products-block .view_more a:hover,
.wish-comp .compare .st-compare-bt-content:hover,
.wish-comp .wishlist .st-wishlist-bt-content:hover,
.wish-comp .compare .st-compare-bt-content:hover .fa,
.wish-comp .wishlist .st-wishlist-bt-content:hover .fa,
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit:hover,
.currency-selector li.current a,
.language-selector li.current a,
.footer-container .footer-right li a:hover::before,
#products .product-title a:hover {
    color: var(--link-hover-color);
}

#cp_sidevertical_menu_top .top-menu[data-depth="1"] li a:hover::before,
#cp_sidevertical_menu_top .top-menu[data-depth="2"] li a:hover::before,
#cp_sidevertical_menu_top .top-menu[data-depth="3"] li a:hover::before,
.footer-container .footer-right li a:hover::before {
    background-color: var(--link-hover-color);
}

/* Set Price Color */
.products .product-price-and-shipping,
.product-price,
.product-discount .regular-price,
.cart-summary-line .value {
    color: var(--price-color);
}

/* set border radius */
.cms_content,
.menu-container,
.top_button,
.btn,
.pagination a,
.btn-primary,
#left-column .block_content .allproducts,
.search-widget form input[type="text"],
.block-promo .promo-input,
.block-social li::before,
.vertical_currency a.dropdown-item,
.sale-percentage,
.product-leftside li.product-flag,
.container.text-xs-center.mobile,
.products-sort-order .select-title,
.special-products,
.newsletter-input-email,
.dashed-border,
#left-column .block-categories.block,
.homeblog-inner article .blog-item,
.countdown-row .countdown-section,
.alert,
#cpleftbanner1 li,
#cpleftbanner2 li,
.lastest_block .blog-item .blog-image,
.radio-label,
.js-modal-mask.mask .thumb-container .thumb.selected,
#product-availability .product-available,
#product-availability .product-unavailable,
.product-images>article.thumb-container>.thumb,
#main .images-container .js-qv-mask ul li,
body#checkout section.checkout-step,
.card,
.cart_block .cart-item .cart-image img,
#main .page-content,
#sitemap .container-fluid,
.product-line-grid-left img,
.products-selection,
.product-variants>.product-variants-item select,
.alert-info,
.product-additional-info .social-sharing li,
.ets_item_img,
.ets_blog_img_wrapper img,
.blog-product-list img,
.product-features>dl.data-sheet dd.value,
.product-features>dl.data-sheet dt.name,
.img-thumbnail,
#subcategories ul li .subcategory-image,
.checkout-step li.nav-item .nav-link,
#left-column .left-part,
.block-category .category-cover img,
.form-control,
#js-checkout-summary .card-block .cart-summary-products .js-show-details,
body#checkout #cart-summary-product-list img,
.quickview .thumb-container.item,
.quickview .images-container .product-cover,
#blockcart-modal .product-image,
#_desktop_user_info .user-info .logout.hidden-md-down,
.pagination li>span,
#blog-listing .pagination li a,
.Recnet-blog .pagination li a,
.Recnet-blog .blog-item .blog-image,
#product-modal .modal-content .modal-body .product-cover-modal,
#product-modal .modal-content .modal-body .product-images img,
.top-menu .sub-menu .menu-banners .menu-banner img,
#cpsearch_content_result,
#cpsearch_eccept_data .title_showall_text {
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
}

#_top_main_menu .top-menu .sub-menu.collapse,
.products-sort-order .dropdown-menu,
.dropdown-menu,
#_desktop_user_info .user-info {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    -webkit-border-radius: 0 0 var(--border-radius) var(--border-radius);
    -moz-border-radius: 0 0 var(--border-radius) var(--border-radius);
    -ms-border-radius: 0 0 var(--border-radius) var(--border-radius);
    -o-border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.lang-rtl .search-widget form button[type=submit],
.lang-rtl .block-promo .promo-input+button,
.product-quantity #quantity_wanted,
.block_newsletter form input[type="email"],
.lang-rtl .block_newsletter form input.btn {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    -webkit-border-radius: var(--border-radius) 0 0 var(--border-radius);
    -moz-border-radius: var(--border-radius) 0 0 var(--border-radius);
    -ms-border-radius: var(--border-radius) 0 0 var(--border-radius);
    -o-border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-radius: 0 var(--border-radius) 0 0;
    -webkit-border-radius: 0 var(--border-radius) 0 0;
    -moz-border-radius: 0 var(--border-radius) 0 0;
    -ms-border-radius: 0 var(--border-radius) 0 0;
    -o-border-radius: 0 var(--border-radius) 0 0;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
    border-radius: 0 0 var(--border-radius) 0;
    -webkit-border-radius: 0 0 var(--border-radius) 0;
    -moz-border-radius: 0 0 var(--border-radius) 0;
    -ms-border-radius: 0 0 var(--border-radius) 0;
    -o-border-radius: 0 0 var(--border-radius) 0;
}

.lang-rtl .block_newsletter form input[type="text"],
.lang-rtl .product-quantity #quantity_wanted,
.lang-rtl .input-group .form-control:not(:first-child):not(:last-child) .search-widget form button[type=submit],
.block-promo .promo-input+button,
.lang-rtl .block_newsletter form input[type="email"],
.block_newsletter form input.btn {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -webkit-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -moz-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -ms-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -o-border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.lang-rtl .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
    border-radius: 0 0 0 var(--border-radius);
    -webkit-border-radius: 0 0 0 var(--border-radius);
    -moz-border-radius: 0 0 0 var(--border-radius);
    -ms-border-radius: 0 0 0 var(--border-radius);
    -o-border-radius: 0 0 0 var(--border-radius);
}

.lang-rtl .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-radius: var(--border-radius) 0 0 0;
    -webkit-border-radius: var(--border-radius) 0 0 0;
    -moz-border-radius: var(--border-radius) 0 0 0;
    -ms-border-radius: var(--border-radius) 0 0 0;
    -o-border-radius: var(--border-radius) 0 0 0;
}

.images-container .product_list .thumb-container .elevatezoom-gallery .thumb.selected,
.special-products .special_container.container,
#left-column .block-categories,
#product .tabs .nav-tabs .nav-link.active,
.products-section-title::after {
    border-color: var(--primary-color);
}