/* Dark/Light switcher 
 * See also: head.tpl | header.tpl | theme-switcher.css | theme-switcher.js
 */
#header #theme-toggle {
	background: transparent;
	border: 0;
	outline: none;
    margin-top: .8375rem;
    margin-left: .9375rem;	
    padding: 0;
	font-size: .875rem;
	line-height: 18px;
	color: #fbfbfb;
    
    max-width: 90px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

#header #theme-toggle:hover {
    color: #fbfbfb
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center;
}

.sun-and-moon > :is(.moon, .sun) {
  fill: #292d32;
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
  fill: #292d32;
}

.sun-and-moon > .sun-beams {
  stroke: #292d32;
  stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
  stroke: #292d32;
}

html.dark .sun-and-moon > .sun {
  transform: scale(1.75);
}

html.dark .sun-and-moon > .sun-beams {
  opacity: 0;
}

html.dark .sun-and-moon > .moon > circle {
  transform: translateX(-7px);
}

@supports (cx: 1) {
  html.dark .sun-and-moon > .moon > circle {
    cx: 17;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform .5s ease-in;
  }

  .sun-and-moon > .sun-beams {
    transition: transform .5s ease, opacity .5s ease-in;
  }

  .sun-and-moon .moon > circle {
    transition: transform .25s ease-out;
  }

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx .25s ease-out;
    }
  }

  html.dark .sun-and-moon > .sun {
    transition-timing-function: ease;
    transition-duration: .25s;
    transform: scale(1.75);
  }

  html.dark .sun-and-moon > .sun-beams {
    transition-duration: .15s;
    transform: rotateZ(-25deg);
  }

  html.dark .sun-and-moon > .moon > circle {
    transition-duration: .5s;
    transition-delay: .25s;
  }
}
/* /Dark/Light switcher */


/* Theme Transistion */
#header,
 .bonsearch .bonsearch_btn, 
  .product-container > div:first-child,
   .product-container > div,
    .product-miniature, 
     .product-miniature .product,
      #footer:before,
.card,
 #bonwhatsappchat .whatsappchat-body, 
  .whatsappchat-wrapper-copy .whatsappchat-body {
    
	transition: all .4s ease;
}
/* /Theme Transistion */


/* Theme Light */
html.light #header,
 html.light .bonsearch .bonsearch_btn, 
  html.light .product-container > div:first-child,
   html.light .product-container > div,
    html.light .product-miniature, 
     html.light .product-miniature .product,
      html.light #footer:before,
html.light .card:not(.block-category.card),
 html.light #left-column,
  html.light #prices-drop h1:after, 
   html.light #best-sales h1:after, 
    html.light #new-products h1:after,
     html.light #manufacturer #main ul .brand,
      html.light #contact .row #left-column .contact-rich{    
	background-color: #f0f0f0}

html.light #best-sales h1 {
	color: #e36464}

html.light #_desktop_logo .logo {
	filter: saturate(.6) brightness(1.2)}

html.light .product-container > div:first-child,
 html.light #contact .row #content-wrapper .page-content,
  html.light #contact .row #left-column{
    outline-color: #f0f0f0}

html.light .burger-lines:before {
	background: linear-gradient(100deg, rgb(222, 224, 227), rgb(178, 183, 189))}

html.light #header .header-nav, 
  html.light #index .carousel,
   html.light #bonbannersmenu a,
    html.light #index #custom-text-block,
     html.light #bonbanners,
html.light #header .header-nav .cart-preview .cart-products-count:after,
 html.light #stores .page-stores .store-item.card:first-child,
  html.light #bongooglemap #googlemap,
   html.light #sitemap #wrapper,
    html.light body#checkout section.checkout-step,
     html.light .page-customer-account #content.card, 
html.light .page-customer-account #content, 
 html.light .page-addresses .address,
  html.light .irobot-blob,
   html.light .page-my-account #content .links a span.link-item,
    html.light #module-advansedwishlist-mywishlist #content, 
     html.light #module-advansedwishlist-view #content,
html.light .popover .pp-info{
	background-color: rgb(112, 161, 223)}

html.light .bonmmenu .sub-menu {
    background-color: rgb(112, 161, 223, .222)}
html.light #index .bonmmenu .sub-menu {
    background-color: rgb(112, 161, 223)}

html.light #guest-tracking .btn-primary, 
 html.light #authentication .btn-primary, 
  html.light .input-group .input-group-btn > .btn[data-action="show-password"], 
   html.light #registration .btn-primary, 
    html.light #password .btn-primary, 
     html.light #checkout .btn-primary, 
      html.light .page-customer-account .btn-primary, 
html.light .wishlist-product-addtocart.btn-primary, 
 html.light #wishlist-detail .btn-primary, 
  html.light #wishlist__detailed .btn-primary, 
   html.light #module-ets_wholesale-registration .btn-primary {
	background-image: linear-gradient(to right, #70a1df, #70a1df, #f6f6f6 50%)}

html.light .gm-style {	
	filter: saturate(.55) brightness(1.15)}

html.light #product .product-cover img:not(#product .product-comment-modal .product-cover img),
 html.light #product-modal.in .modal-content .modal-body .product-cover-modal, 
  html.light #product-modal.in .modal-content .modal-body .product-images img,
   html.light #product-button .next-product-button .product-button-hover, 
    html.light #product-button .prev-product-button .product-button-hover,
     html.light #product-modal .modal-content .modal-body .image-caption{
	background: #70a1df}

html.light #top-menu-0[data-bonmm-depth="0"] > li > a, 
 html.light .bonmm-title, 
  html.light .bonmm-mobile-button, 
   html.light .wishlist a.wl-checked, 
    html.light .wishlist a.wl-checked i {	
	color: #177dff}

html.light .product-flags.product-self li.product-flag {
	background: #b2b7bd}

html.light .product-flags li.product-flag.discount, 
 html.light .product-flags li.product-flag.discount-amount, 
  html.light .product-flags li.product-flag.discount-percentage {
	background: linear-gradient(120deg, rgba(208, 208, 208, .8), rgba(218, 218, 218, .8))}
html.light .has-discount .discount {
	background: linear-gradient(120deg, rgba(181, 181, 181, .8), rgb(171, 176, 181))}
html.light .product-container .has-discount .discount {
	background: linear-gradient(120deg, rgba(181, 181, 181, .8), rgb(171, 176, 181))}
html.light #index .product-miniature .regular-price {
	background: linear-gradient(120deg, transparent 50%, rgba(189, 189, 189, .8) 50%)}
html.light .discount-percentage:before {
    border-color: transparent rgba(181, 181, 181, .8) transparent transparent}
html.light .product-container .discount-percentage:before {
    border-color: transparent rgba(181, 181, 181, .8) transparent transparent}

html.light #index #bonwhatsappchat.dark .whatsappchat-body, 
 html.light #index .whatsappchat-wrapper-copy.dark .whatsappchat-body, 
  html.light #sitemap #bonwhatsappchat.dark .whatsappchat-body {
	background: linear-gradient(90deg, #f7f7f7, rgba(206, 206, 206, .855))
}

 html.light #index #bonwhatsappchat .whatsappchat-title, 
  html.light #index .whatsappchat-wrapper-copy .whatsappchat-title,
   html.light #sitemap #bonwhatsappchat .whatsappchat-title {
	color: #646464;
}

html.light #index #bonwhatsappchat .whatsappchat-body, 
 html.light #index .whatsappchat-wrapper-copy .whatsappchat-body, 
  html.light #sitemap #bonwhatsappchat .whatsappchat-body {
	background: linear-gradient(90deg, rgb(67, 129, 208), rgba(45, 108, 189, .855));
}

html.light #index #bonwhatsappchat .whatsappchat-body:after, 
 html.light #index .whatsappchat-wrapper-copy .whatsappchat-body:after, 
  html.light #sitemap #bonwhatsappchat .whatsappchat-body:after {
	background: linear-gradient(192deg, transparent 60%, rgb(67, 129, 208) 50%);
}

html.light #index #bonwhatsappchat.dark .whatsappchat-body:after, 
 html.light #index .whatsappchat-wrapper-copy.dark .whatsappchat-body:after, 
  html.light #sitemap #bonwhatsappchat.dark .whatsappchat-body:after {
	background: linear-gradient(192deg, transparent 62%, #f4f4f4 50%);
}

@media (min-width: 1592px) {
  html.light #index .whatsappchat-wrapper-copy:before {
    background: rgba(206, 206, 206, .855);
  }

  html.light #index .whatsappchat-wrapper.right:before, 
   html.light #sitemap .whatsappchat-wrapper.right:before {
    background: rgba(45, 108, 189, .855) 
  }
}

html.light #top-menu-0 .bonmm-top-menu a.dropdown-submenu,
 html.light .product-prices .tax-shipping-delivery-label,  
  html.light #search_filters .facet .facet-label a, 
   html.light #search_filters_brands .facet .facet-label a, 
    html.light #search_filters_suppliers .facet .facet-label a,
     html.light #product .modal-body h1, 
html.light .quickview h1,
 html.light .product-information p,
  html.light #search_filters p,
   html.light #product .product-price:not(.has-discount),
    html.light #blockcart-modal .cart-content p,
     html.light #blockcart-modal .cart-content p .label,
 html.light #blockcart-modal .cart-content p .value,
  html.light #blockcart-modal,
   html.light .contact-form h3, 
    html.light .contact-rich h4,
     html.light .contact-rich .block .data,
      html.light .contact-rich a,
 html.light .contact-form .form-control-label,
  html.light #contact .form-control-comment,
   html.light #desktop_bonmm_0:not(#index #desktop_bonmm_0) #hidden-button .burger-text,
    html.light body#checkout .js-show-details,
     html.light body#checkout .js-show-details:hover,
      html.light .cart-summary-line .value,
html.light body#checkout .cart-grid-right .product-price,
 html.light body#checkout #cart-summary-product-list .media-body span.product-quantity,
  html.light body#checkout #order-summary-content h4.black, 
    html.light body#checkout #order-summary-content h4.h4, 
     html.light body#checkout .h4,
      html.light body#checkout #order-summary-content #order-items h3.h3,   
html.light body#checkout section.checkout-step .address,
 html.light body#checkout section.checkout-step .edit-address,
  html.light body#checkout section.checkout-step .delete-address,
   html.light body#checkout #delivery textarea, 
    html.light body#checkout #gift_message textarea,
     html.light #order-items table tr.total-value,
html.light [paypal-acdc-card-wrapper=""] form label,
 html.light #contact .desc_contact_content p,
  html.light .has-discount .page-content.page-cms ul, 
   html.light .has-discount p, 
    html.light .has-discount.product-price,
     html.light .page-content.page-cms .has-discount ul,
html.light #top-menu-0[data-bonmm-depth="0"] > li.current > a,
 html.light .product-price:not(.has-discount.product-price, .product .product-price),
   html.light .card a.remove-from-cart,  
    html.light .cart-grid-body .wrap_allert p i,
     html.light body .card,
      html.light #cart .label{
	color: #232323}

html.light body #cookiesplus-modal > div, 
 html.light body #cookiesplus-modal p{
	color: #232323 !important}

html.light .product-miniature .product-description, 
 html.light .product-miniature .highlighted-informations, 
  html.light .product-miniature .variant-links, 
   html.light .product-miniature .thumbnail-container {
	background: rgb(249, 249, 249)}

html.light .product-miniature .thumbnail-container .product-thumbnail img,
 html.light #blockcart-modal .product-image,
  html.light #stores .page-stores .store-picture img, 
   html.light .product-line-grid-left img,
    html.light body#checkout #cart-summary-product-list img {
	filter: contrast(1.1) brightness(.9)}

html.light .featured-products > h2:not(#category .featured-products > h2, 
 html.light #index .featured-products > h2) {
	color: #8c8d91}

html.light #viewed > h2:after, 
 html.light #same-category > h2:after,  
  html.light .block-category h1:after,
   html.light #product-comments-list-header:after,
    html.light .product-accessories > h2:after {
	background-image: linear-gradient(135deg, transparent 50%, #b2b7bd 50%)}

html.light #viewed > h2, 
 html.light #same-category > h2,
  html.light .block-category .block-category-inner,
   html.light .brands-sort .select-title, 
    html.light .products-sort-order .select-title, 
     html.light .suppliers-sort .select-title,
html.light #product-comments-list-header,
 html.light #prices-drop h1, 
  html.light #best-sales h1, 
   html.light #new-products h1,
    html.light .product-discounts > .table-product-discounts tbody tr td,
     html.light .product-discounts > .table-product-discounts thead tr th,
html.light .product-accessories > h2{
	border-color: #f0f0f0}

html.light .brands-sort .select-title, 
 html.light .products-sort-order .select-title, 
  html.light .suppliers-sort .select-title {
	color: #b2b7bd}

html.light .tabs .nav-tabs {
	border-color: #e3e3e3}

html.light body#checkout p:has(.js-show-details),
 html.light body#checkout #order-summary-content > .row h4 {
    border-color: #3a4764}

html.light body#checkout .js-show-details:after,
 html.light body#checkout #order-summary-content > .row h4:after {
    background-image: linear-gradient(135deg, transparent 50%, #3a4764 50%)}

html.light body#checkout .cart-grid-right .card .cart-summary-subtotals-container,
 html.light hr{
     border-image: linear-gradient(to left, transparent, #fbfbfb, transparent) 1}

html.light .whatsappchat-body .p-0 {
	border-image: linear-gradient(to left, transparent, #cfcfd7, #e9e9f2) 1}
html.light #search_filters .facet:not(#search_filters .facet:last-child)::after, 
 html.light #search_filters_brands .facet:not(#search_filters_brands .facet:last-child):after, 
  html.light #search_filters_suppliers .facet:not(#search_filters_suppliers .facet:last-child)::after {
	border-image: linear-gradient(to left, transparent, #e0e0e3, #e0e0e3) 1}

html.light #index .whatsappchat-body .p-0, 
 html.light #sitemap .whatsappchat-body .p-0 {
     border-image: linear-gradient(to right, transparent, #d5d5d9, #cfcfd7) 1;}

html.light #bonhtmlcontent .box-htmlcontent h5, 
 html.light #bonhtmlcontent .box-htmlcontent p,
  html.light .blockreassurance p,
   html.light .block-contact, 
    html.light .block-contact a:not(.block-contact a:hover), 
     html.light .footer-container li a,
      html.light #footer .copyright p {
	color: #333335}

html.light #bonwhatsappchat .whatsappchat-body, 
 html.light .whatsappchat-wrapper-copy .whatsappchat-body {
     background: linear-gradient(90deg, #f0f0f0, rgba(206, 206, 206, .855))}

html.light .whatsappchat-wrapper.right:before, 
 html.light .whatsappchat-wrapper-copy:before {
	background-color: rgba(206, 206, 206, .855)}

html.light #product #bonwhatsappchat .whatsappchat-body:after, 
 html.light #stores #bonwhatsappchat .whatsappchat-body:after, 
  html.light #contact #bonwhatsappchat .whatsappchat-body:after, 
   html.light #index #bonwhatsappchat .whatsappchat-body:not(#index .whatsappchat-body):after, 
    html.light .whatsappchat-wrapper-copy .whatsappchat-body:after {
        background: linear-gradient(192deg, transparent 60%, rgb(239, 239, 239) 50%)}

html.light #footer .copyright p a {
	color: rgb(154, 160, 170)}

html.light #bonhtmlcontent .box-htmlcontent h5 span,
 html.light #footer .container .h3 a span,
   html.light cart-summary-line .label, 
    html.light .product-line-grid-right .cart-line-product-actions, 
     html.light .product-line-grid-right .product-price, 
html.light .product-line-grid-right .cart-line-product-actions .remove-from-cart,  
 html.light .card .cart-summary-products p, 
  html.light a.remove_from_wishlist {
	fill: #fbfbfb}

html.light .page-customer-account .psgdprinfo17 .btn-primary,
 html.light .ajax_add_to_cart_button span,
  html.light body#checkout .label,
   html.light body#checkout section.checkout-step .address,
    html.light body#checkout section.checkout-step .carrier-name,
     html.light body#checkout section.checkout-step .carrier-delay,
 html.light body#checkout section.checkout-step .carrier-price,
  html.light .cart-grid-body .card-block,
    html.light body#checkout section.checkout-step .order-confirmation-table a{
    color: #515151}

html.light body#checkout .order-confirmation-table {
    color: #515151!important}

html.light #manufacturer #main ul .brand-img {
	filter: grayscale() invert(1) brightness(3) opacity(.822);
}

html.light .tvproduct-play-icon a,
 html.light #manufacturer #main ul .brand-infos a,
  html.light #desktop_bonmm_0 #hidden-button .burger-text,
   html.light #czoffercmsblock .container p,    
    html.light #header .dropdown .expand-more, 
     html.light #header .dropdown:hover .expand-more, 
html.light #header #theme-toggle,
 html.light #header #wrapper .breadcrumb li a:hover, 
  html.light #header .block-contact .block-contact-title:hover, 
   html.light #header .block-contact .navbar-toggler .material-icons:hover, 
    html.light #header #block_myaccount_infos .myaccount-title a:hover, 
     html.light #header .linklist .blockcms-title a:hover, 
html.light #header .currency-selector button:hover .expand-more, 
 html.light #header .currency-selector button:focus .expand-more,
  html.light .wish_link_text,
   html.light #index #top-menu-0 .bonmm-top-menu a.dropdown-submenu {
    color: #fff}

html.light #wrapper,
 html.light .bonsearch .bonsearch-microphone,  
  html.light .bonsearch #searchbox:after,
   html.light #header .header-nav .blockcart,
    html.light .custom-checkbox span,
     html.light .bonmmenu .sub-menu ul > li:before {
    background: #fff}

    html.light #checkout .custom-checkbox span,
     html.light #checkout .custom-radio{    
        background: rgba(250,250,250,.933)}

html.light #desktop_bonmm_0 .burger-lines span, 
 html.light #mobile_bonmm_0 .burger-lines span {
    background: #fff !important}


html.light #czoffercmsblock h2:after {
	background: rgba(255,255,255,.888);
}

html.light #czoffercmsblock h2 {
	color: #3f444a;
}

html.light body #cookiesplus-tab.showtab {	
	opacity: .111}

html.light .modal-body:not(#product-modal .modal-body), 
 html.light .fancybox-skin,
  html.light #blockcart-modal .modal-header, 
   html.light #product #block-reassurance,
    html.light #blockcart-modal .modal-header .close,     
html.light .modal-header .close, 
 html.light .modal-content .popup-close, 
  html.light .quickview .modal-header .close, 
   html.light .fancybox-close,
    html.light .modal-header,
 button.ets_ws_close {
	background-color: rgba(237, 243, 251, .922)}

html.light body #cookiesplus-modal.col-xs-12{    
	background-color: rgba(237, 243, 251, .922) !important}

html.light #blockcart-modal .modal-footer-top,
 html.light .product-comment-modal .modal-footer,
  html.light #bonask-wrapper .modal-footer{
	background: linear-gradient(20deg, transparent 30%, rgba(237, 243, 251, .922), rgba(237, 243, 251, .922))}

html.light .burger-lines:not(#index .burger-lines):before {
	background: linear-gradient(100deg, #fff 30%, #f0f0f0)}

html.light #product .current-price-value, 
 html.light .quickview .has-discount.product-price, 
  html.light .quickview .current-price-value{
    color: #000}

html.light #blockcart-modal .cart-content .page-content.page-cms ul.cart-products-count, 
 html.light .page-content.page-cms #blockcart-modal .cart-content ul.cart-products-count,    
  html.light #cart .cart-item .product-line-info a.label,
   html.light .card a:not(
    html.light .card .checkout a,
    html.light .card a.remove-from-cart) {
	color: #0070ff}

html.light #blockcart-modal .modal-title,
 html.light #blockcart-modal .product-name,
  html.light #blockcart-modal .cart-content p.cart-products-count {
    color: #519eff}

html.light .product-information h2, 
 html.light .tabs .nav-tabs .nav-link:not(.nav-link.active),  
  html.light #product-details .label,
   html.light .bonsearch .bonsearch_btn:before{
	color: #888}

html.light #bonwhatsappchat .whatsappchat-subtitle p, 
 html.light .whatsappchat-wrapper-copy .whatsappchat-subtitle p, 
  html.light .whatsappchat-subtitle p {
	color: #2d6cbd}

html.light .cart-grid-body .card-block h1 {
    color: rgba(1, 7, 15, .922);}

html.light body#checkout #order-summary-content .summary-selected-carrier,
 html.light body#checkout #order-summary-content .order-confirmation-table,
  html.light body#checkout section.checkout-step .delivery-options .delivery-option,
   html.light body#checkout section.checkout-step .address-item.selected,
    html.light body#checkout section.checkout-step .address-item,
     html.light body#checkout section.checkout-step .page-order-overview .card,
html.light body#checkout #delivery textarea, 
 html.light body#checkout #gift_message textarea,
  html.light [paypal-acdc-card-wrapper=""] form {
    background: #e1e8f2}

html.light .social-sharing li { background-image: unset }
html.light .social-sharing li:before {
	filter: grayscale(1) brightness(1.2);
	display: block;
	height: 100%;
	width: 100%;
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat}

html.light .product-images > li.thumb-container .thumb.selected, 
 html.light .product-images > li.thumb-container .thumb:hover {
	border-color: #5695db}
html.light #product .tvproduct-play-icon .fancybox img {
	filter: brightness(1.05) saturate(.7)}

html.light .blockreassurance .box-title,
 html.light .footer-container .h3, 
  html.light .footer-container .h4, 
   html.light #block_myaccount_infos .myaccount-title a, 
    html.light #footer .container .h3,
     html.light #bonhtmlcontent .box-htmlcontent h3,
html.light #bonhtmlcontent .box-htmlcontent h5 span,
 html.light a:not(.header-nav .container a, #header a.dropdown-item, #header .allert_note a, .nav-link.active):hover{
    color: #2d6cbd}
html.light .block-contact svg path {
    fill: #2d6cbd}

html.light #product h1,
 html.light #bonwhatsappchat .whatsappchat-title, 
  html.light .whatsappchat-wrapper-copy .whatsappchat-title {
    color: #3c3c3c}

html.light .cart-item,
 html.light .card-block.cart-detailed-subtotals + .cart-summary-totals .cart-total{	
	border-image: linear-gradient(to left, transparent, #cfcfd7, transparent) 1;}

html.light #checkout #footer:before {
	background-color: rgb(255, 255, 255, .888)}
/* /Theme Light */