/* Font */ :root { --font1: 'Playfair Display', sans-serif; } .nav-link[aria-expanded="true"] .text-cart::after, .accordion .menu[aria-expanded="true"]::after, .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } /*@media (min-width: 768px) and (max-width:1024) { .btn-instagram:hover .fab.fa-instagram.fa-fw.fa-lg::before{ margin: 0 1.3rem; } }*/ @media (min-width: 992px) { /*#crd-cllps-146 > div > div.footer-social-media > ul > li > a > i{ font-size: 4.3333333333em; margin-left: -10px; margin-right: -20px; }*/ #content > div.container.opc-Container.mb-5.mb-lg-6.mt-5 > div > div.container.opc-Container > div > div:nth-child(3) > div:nth-child(3) > div > picture > img{ margin-top: -30px;} } /*.btn-instagram .fab.fa-instagram.fa-fw.fa-lg::before{ content: ""; display: inline-block; width: 63px; height: 60px; mask: url(https://www.wagnerbeauty.de/bilder/template/instagram.svg) no-repeat center; background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: -4px; background-color:#b3b3b3; }*/ /*.btn-instagram:hover .fab.fa-instagram.fa-fw.fa-lg::before{ background-image: unset!important; background-color: #dba581; mask: url(https://www.wagnerbeauty.de/bilder/template/instagram.svg) no-repeat center; margin: 0 1.3rem; } .btn-tiktok .fab.fa-tiktok.fa-fw.fa-lg::before{ content: ""; display: inline-block; width: 63px; height: 60px; mask: url(https://www.wagnerbeauty.de/bilder/template/tiktok-brands.svg) no-repeat center; background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: -4px; background-color:#b3b3b3; } .btn-tiktok:hover .fab.fa-tiktok.fa-fw.fa-lg::before { background-color: #dba581; }*/ /*!* topbar img hotfix *!*/ /*#mainNavigation.collapse.navbar-collapse.nav-scrollbar div.nav-mobile-body ul.navbar-nav.nav-scrollbar-inner.mr-auto li.nav-item.nav-scrollbar-item.dropdown.order-5.dropdown-full:nth-child(3) div.dropdown-menu.show div.dropdown-body div.container div.row.lg-row-lg-.nav div:nth-child(2) a.categories-recursive-link.d-lg-block.submenu-headline.submenu-headline-toplevel picture img.submenu-headline-image.img-fluid:nth-child(2){*/ /*max-width:90px;*/ /*}*/ /* Anpassungen scrollbare Warenkorbmatrix */ div.product-matrix div.matrix-classic-wrapper > div.table-responsive { overflow-y: scroll; max-height: 280px; max-width: 90%; margin: 0px auto; } div.product-matrix div.matrix-classic-wrapper > div.table-responsive::-webkit-scrollbar { width: 12px; } div.product-matrix div.matrix-classic-wrapper > div.table-responsive::-webkit-scrollbar-thumb { background-color: #E4BCA1; } div.product-matrix div.matrix-classic-wrapper div.product-matrix-submit { max-width: 95%; margin: 0px auto; margin-top: 20px; } @media (min-width: 360px) and (max-width: 574px){ /* Anpassungen scrollbare Warenkorbmatrix */ div.product-matrix div.matrix-classic-wrapper > div.table-responsive { overflow-y: scroll; max-height: 274px; max-width: 90%; } div.product-matrix div.matrix-classic-wrapper div.product-matrix-submit div { padding-right: 0px; } } @media (min-width: 575px) { /* Anpassungen scrollbare Warenkorbmatrix */ div.product-matrix div.matrix-classic-wrapper > div.table-responsive { max-height: 370px; max-width: 95%; } div.product-matrix div.matrix-classic-wrapper div.product-matrix-submit div { padding-right: 0px; } } /* Anpassungen Google Translate */ .list-inline { display: flex; padding-top: 3px; } .language-dropdown { display: none; } .greyicons img { filter: grayscale(1); opacity: 0.9; transition: 0.7s; padding-left: 20px } .greyicons img:hover { filter: unset; scale: 1.1; opacity: unset; } .meistertext { font-family: var(--font1); line-height: 39px; } /*.b2btext {*/ /* font-family: var(--font1);*/ /* line-height: 39px;*/ /* margin-top:10px*/ /*}*/ .facebook_icon svg path { fill: #b3b3b3; } #footer a .facebook_icon svg path:hover { fill: #dba581; } #footer .fa-fw { text-align: center; width: 2.25em; } .submenu-headline.submenu-headline-toplevel img { width: 130px; height: 130px; } .theme-default .nivoSlider { box-shadow: unset; } .unterkategoriebilder { width: 82%; } .subcategories-image.d-none.d-md-flex { height: 150px; display: flex !important; align-items: center; } .info { width: 1340px; } /*Links ausbessern*/ p a { color: #dba581; background-color: transparent; font-weight: 800; } p a:hover{ color: #000; background-color: transparent; font-weight: 800; } /* BREVO start */ @keyframes rotate360 { 100% { transform: rotate(360deg) } } @keyframes exist { 100% { width: 1rem; height: 1rem } } @keyframes appear { 0% { opacity: 0 } 100% { opacity: 1 } } .dfd-category-term,label.dfd-image-search-button,.dfd-btn-image-filter,.dfd-btn-color-filter,.dfd-btn-term-filter,.dfd-root button { display: var(--dfd-btn-display, inline-flex); align-items: var(--dfd-btn-align-items, center); justify-content: center; padding: var(--dfd-btn-padding-y, 0) var(--dfd-btn-padding-x, 12px); margin: 0; font-family: var(--dfd-btn-font-family, inherit); font-size: var(--dfd-btn-font-size, 14px); font-weight: var(--dfd-btn-font-weight, normal); text-align: var(--dfd-btn-text-align, center); text-decoration: var(--dfd-btn-text-decoration, none); text-transform: initial; vertical-align: var(--dfd-btn-vertical-align, middle); white-space: var(--dfd-btn-white-space, nowrap); background-color: var(--dfd-btn-bg, transparent); border-color: var(--dfd-btn-border-color, transparent); color: var(--dfd-btn-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))); border-radius: var(--dfd-btn-border-radius, 6px); border-width: var(--dfd-btn-border-width, 1px); width: var(--dfd-btn-width, auto); height: var(--dfd-btn-height, 38px); line-height: calc(var(--dfd-btn-height, 38px) - var(--dfd-btn-border-width, 1px)*2); transition: var(--dfd-btn-transition, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out); border-style: solid; text-decoration-skip-ink: auto; cursor: pointer; user-select: none; gap: 4px } .dfd-category-term svg,label.dfd-image-search-button svg,.dfd-btn-image-filter svg,.dfd-btn-color-filter svg,.dfd-btn-term-filter svg,.dfd-root button svg { fill: var(--dfd-btn-color); overflow: hidden; vertical-align: middle; transition: var(--dfd-btn-svg-transition, fill 0.15s ease-in-out) } @media(hover: hover) { .dfd-category-term:hover,label.dfd-image-search-button:hover,.dfd-btn-image-filter:hover,.dfd-btn-color-filter:hover,.dfd-btn-term-filter:hover,.dfd-root button:hover { background-color:var(--dfd-btn-hover-bg, transparent); border-color: var(--dfd-btn-hover-border-color, transparent); color: var(--dfd-btn-hover-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))); text-decoration: var(--dfd-btn-hover-text-decoration, none) } .dfd-category-term:hover svg,label.dfd-image-search-button:hover svg,.dfd-btn-image-filter:hover svg,.dfd-btn-color-filter:hover svg,.dfd-btn-term-filter:hover svg,.dfd-root button:hover svg { fill: var(--dfd-btn-hover-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))) } } .dfd-category-term:focus,label.dfd-image-search-button:focus,.dfd-btn-image-filter:focus,.dfd-btn-color-filter:focus,.dfd-btn-term-filter:focus,.dfd-root button:focus { outline: 0 } .dfd-category-term:active,label.dfd-image-search-button:active,.dfd-btn-image-filter:active,.dfd-btn-color-filter:active,.dfd-btn-term-filter:active,.dfd-root button:active { background-color: var(--dfd-btn-active-bg, transparent); border-color: var(--dfd-btn-active-border-color, transparent); color: var(--dfd-btn-active-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))) } .dfd-category-term:active svg,label.dfd-image-search-button:active svg,.dfd-btn-image-filter:active svg,.dfd-btn-color-filter:active svg,.dfd-btn-term-filter:active svg,.dfd-root button:active svg { fill: var(--dfd-btn-active-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))) } .dfd-category-term:disabled,label.dfd-image-search-button:disabled,.dfd-btn-image-filter:disabled,.dfd-btn-color-filter:disabled,.dfd-btn-term-filter:disabled,.dfd-root button:disabled { background-color: var(--dfd-btn-disabled-bg, transparent); border-color: var(--dfd-btn-disabled-border-color, transparent); color: var(--dfd-btn-disabled-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))); opacity: var(--dfd-btn-disabled-opacity, 0.65); pointer-events: none } .dfd-category-term:disabled svg,label.dfd-image-search-button:disabled svg,.dfd-btn-image-filter:disabled svg,.dfd-btn-color-filter:disabled svg,.dfd-btn-term-filter:disabled svg,.dfd-root button:disabled svg { fill: var(--dfd-btn-disabled-color, var(--df-neutral-high-contrast, hsl(204, 2%, 20%))) } .dfd-suggestion-link,.dfd-suggestion-button { display: var(--dfd-btn-group-display, inline-flex); position: relative; vertical-align: middle; border-radius: var(--dfd-btn-border-radius) } .dfd-suggestion-link>button,.dfd-suggestion-button>button { position: relative } .dfd-suggestion-link>button:hover,.dfd-suggestion-button>button:hover,.dfd-suggestion-link>button:focus,.dfd-suggestion-button>button:focus,.dfd-suggestion-link>button:active,.dfd-suggestion-button>button:active { z-index: 1 } .dfd-suggestion-link>button:not(:first-child),.dfd-suggestion-button>button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: calc(var(--dfd-btn-border-width, 1px)*-1) } .dfd-suggestion-link>button:not(:last-child),.dfd-suggestion-button>button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0 } .dfd-guided-filters-header button,.dfd-clear-filters-button,.dfd-view-all-link-button,.dfd-delete-link-button,.dfd-view-more-button,.dfd-sort-button { --dfd-btn-display: inline-flex; --dfd-btn-border-width: 0px; --dfd-btn-hover-text-decoration: underline; --dfd-btn-text-align: left; --dfd-btn-text-decoration: none; --dfd-btn-vertical-align: baseline } .dfd-fixed-layout,.dfd-fixed-layout body { overflow: hidden !important } .dfd-fixed-layout #NavDrawer,.dfd-fixed-layout #SearchDrawer,.dfd-fixed-layout #shopify-section-header,.dfd-fixed-layout .bc-sf-search-suggestion-mobile-top-panel,.dfd-fixed-layout .mfp-wrap,.dfd-fixed-layout .ht-notification-section { display: none !important } :root { --df-layer-animation-duration: .5s } :root { --df-accent-primary: #4387f4; --df-accent-primary-hover: #2b77f3; --df-accent-primary-active: #1368f1; --df-accent-on-primary: #f5f9fe; --df-accent-secondary: #e5e6e6; --df-accent-secondary-hover: #d8d9da; --df-accent-secondary-active: #cbcccd; --df-accent-on-secondary: #323334; --df-accent-tertiary: #323334; --df-accent-tertiary-hover: #252627; --df-accent-tertiary-active: #191a1a; --df-accent-on-tertiary: #fafafa; --df-neutral-background: #fff; --df-neutral-surface: #fff; --df-neutral-surface-variant: #e5e6e6; --df-neutral-outline: #cbcccd; --df-neutral-low-contrast: #cbcccd; --df-neutral-medium-contrast: #75787a; --df-neutral-high-contrast: #323334; --df-neutral-disabled: #eff0f0 } .dfd-root { all: revert; cursor: default; font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; isolation: isolate; pointer-events: all !important; touch-action: manipulation; scroll-behavior: smooth; -webkit-overflow-scrolling: touch } .dfd-root,.dfd-root::before,.dfd-root::after,.dfd-root *,.dfd-root *::before,.dfd-root *::after { box-sizing: border-box } .dfd-root[hidden],.dfd-root [hidden] { display: none !important } .dfd-root img,.dfd-root picture,.dfd-root video,.dfd-root canvas { display: block; max-width: 100% } .dfd-root input,.dfd-root textarea,.dfd-root select { font: inherit; margin: 0 } .dfd-root select { text-transform: none } .dfd-root select optgroup { font-family: inherit } .dfd-root p { overflow-wrap: break-word } .dfd-root a,.dfd-root a:visited { color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-root a:hover,.dfd-root a:focus { color: var(--df-accent-primary-hover, hsl(217, 89%, 56%)) } .dfd-root a:active { color: var(--df-accent-primary-active, hsl(217, 89%, 51%)) } .dfd-root b,.dfd-root strong { font-weight: bolder } .dfd-root kbd { font-family: monospace,monospace; font-size: 1em } .dfd-root small { font-size: 12px } .dfd-root sub,.dfd-root sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } .dfd-root sub { bottom: -0.25em } .dfd-root sup { top: -0.5em } .dfd-root [disabled] { opacity: .6; cursor: not-allowed !important } .dfd-root path[fill=none] { fill: none !important } .dfd-title-xl { font-size: 24px; font-weight: bold } .dfd-title-lg,.dfd-facet-title>:first-child { font-size: 18px; font-weight: bold } .dfd-title-md { font-size: 16px; font-weight: bold } .dfd-title-sm { font-size: 14px; font-weight: bold } .dfd-title-xs { font-size: 12px; font-weight: bold } .dfd-is-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important } .dfd-backdrop { display: block !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #000; opacity: 0; transition: opacity var(--df-layer-animation-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) } .dfd-root.dfd-animate .dfd-backdrop { opacity: .75 } .df-b { display: inline-block; flex: 0 1 auto } .df-b-img { width: 100%; height: auto; border: 0; margin: 0 auto } .dfd-branding { display: inline-block !important; width: 69.5px; height: 8px; background: rgba(0,0,0,0) url("//cdn.doofinder.com/media/images/doofinder-logo-horizontal-black-sm.svg") no-repeat center; background-size: contain; text-indent: -9999px; overflow: hidden; opacity: .3 } .dfd-branding:hover,.dfd-branding:focus,.dfd-branding:active { opacity: 1 } .dfd-sort-button { --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 4px; --dfd-btn-border-radius: 0 } .dfd-sort-button svg { padding-top: 3px; transform: scale(1.5) } .dfd-sort-button[data-sort-order=asc] svg { transform: matrix(1.5, 0, 0, -1.5, 0, 4) } .dfd-suggestion-button { --dfd-btn-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-hover-border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); background-color: rgba(0,0,0,0); border: 1px solid var(--dfd-btn-border-color); border-radius: 50rem; transition: var(--dfd-btn-transition, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out) } .dfd-suggestion-button:hover { border-color: var(--dfd-btn-hover-border-color) } .dfd-suggestion-button>button { --dfd-btn-border-width: 0; --dfd-btn-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 30px; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 50rem } .dfd-suggestion-button>button svg { width: 18px; height: 18px } .dfd-suggestion-button>button:first-child { flex: 1 1 auto; padding-left: calc(var(--dfd-btn-padding-x) + 4px) } .dfd-suggestion-button>button:last-child svg { margin-left: -4px } .dfd-suggestion-button>button:not(:first-child) { border-left-width: 0 } .dfd-suggestion-button>button:not(:last-child) { border-right-width: 0 } .dfd-root[data-dfd-screen=mobile-initial] .dfd-suggestion-button { max-width: 100% } .dfd-root[data-dfd-screen=mobile-initial] .dfd-suggestion-button>button:first-child { min-width: 0 } .dfd-root[data-dfd-screen=mobile-initial] .dfd-suggestion-button>button:first-child>span { overflow: hidden; text-overflow: ellipsis; justify-content: flex-start } .dfd-suggestion-link { --dfd-btn-group-display: flex; min-height: 32px } .dfd-suggestion-link>button { --dfd-btn-hover-text-decoration: underline; --dfd-btn-white-space: normal; --dfd-btn-text-align: left; --dfd-btn-font-size: 14px; --dfd-btn-width: 32px; --dfd-btn-height: auto; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0 } .dfd-suggestion-link>button:first-child { flex-grow: 1; justify-content: flex-start } .dfd-suggestion-link>button[dfd-click=remove-term] { --dfd-btn-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)) } .dfd-cart-add-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px } .dfd-cart-check-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0 4px 4px 0; box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-cart-delete-button,.dfd-cart-decrease-button { --dfd-btn-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-hover-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-bg: var(--df-accent-secondary-active, hsl(204, 2%, 80%)); --dfd-btn-active-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-disabled-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 4px 0 0 4px; box-shadow: 1px 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 90%)),0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 90%)) } .dfd-cart-increase-button { --dfd-btn-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-hover-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-bg: var(--df-accent-secondary-active, hsl(204, 2%, 80%)); --dfd-btn-active-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-disabled-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0; box-shadow: 1px 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 90%)) } .dfd-cart-add-button,.dfd-cart-check-button,.dfd-cart-delete-button,.dfd-cart-decrease-button,.dfd-cart-increase-button { min-width: 40px } .dfd-cart-add-button svg,.dfd-cart-check-button svg,.dfd-cart-delete-button svg,.dfd-cart-decrease-button svg,.dfd-cart-increase-button svg { width: 24px; height: 24px } .dfd-btn-loading::before { content: ""; width: 0px; height: 0px; border-radius: 50%; border: 2px solid var(--df-accent-on-primary, hsl(217, 89%, 98%)); border-right-color: rgba(0,0,0,0); animation: rotate360 .5s infinite linear,exist .1s forwards ease } .dfd-btn-loading svg { display: none } .dfd-btn-done::after { content: ""; display: inline-block; box-sizing: border-box; height: 16px; width: 8px; margin-top: -4px; margin-left: 4px; border-bottom: 2px solid var(--df-accent-on-primary, hsl(217, 89%, 98%)); border-right: 2px solid var(--df-accent-on-primary, hsl(217, 89%, 98%)); transform: rotate(45deg) } .dfd-btn-done svg { display: none } .dfd-btn-error { background-color: red !important; justify-content: center !important } .dfd-btn-error::before,.dfd-btn-error::after { position: absolute; left: 50%; content: ""; box-sizing: border-box; height: 0; width: 16px; border-top: 2px solid #fff } .dfd-btn-error::before { transform: translateX(-50%) rotate(-45deg) } .dfd-btn-error::after { transform: translateX(-50%) rotate(45deg) } .dfd-btn-checkbox { --dfd-btn-width: 16px; --dfd-btn-height: 16px; --dfd-btn-padding-y: 0; --dfd-btn-padding-x: 0; --dfd-btn-border-width: 2px; --dfd-btn-border-radius: 4px; --dfd-btn-border-color: white; --dfd-btn-bg: white; --dfd-btn-hover-border-color: white; --dfd-btn-transition: none; flex: 0 0 auto; outline: 1px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)) } @media(hover: hover) { .dfd-btn-checkbox:not(.dfd-is-selected):hover { outline:1px solid var(--df-accent-primary, hsl(217, 89%, 61%)); background-color: var(--df-accent-primary, hsl(217, 89%, 61%)); opacity: .5 } .dfd-btn-checkbox:not(.dfd-is-selected):focus { outline: 1px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); background-color: #fff } } .dfd-btn-checkbox.dfd-is-selected { background-color: var(--df-accent-primary, hsl(217, 89%, 61%)); outline-color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-btn-checkbox.dfd-is-selected:hover { background-color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-btn-checkbox.dfd-is-selected:focus { outline: 1px solid var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-btn-term-filter { --dfd-btn-display: flex; --dfd-btn-border-width: 0px; --dfd-btn-text-align: left; --dfd-btn-white-space: normal; margin-top: 4px; align-items: center; text-decoration-skip-ink: auto; min-height: 32px; --dfd-btn-font-size: 14px; --dfd-btn-width: 100%; --dfd-btn-height: auto; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 4px; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-btn-term-filter:nth-of-type(1) { margin-top: 16px } .dfd-btn-term-filter.dfd-is-selected { --dfd-btn-font-weight: bold } .dfd-btn-term-filter>:not(:last-child) { margin-right: 8px } .dfd-btn-term-filter>:last-child { color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); margin-left: auto } .dfd-btn-term-filter::before { flex-shrink: 0; flex-grow: 0; content: ""; display: inline-block; width: 16px; height: 16px; background-color: #fff; border-radius: 4px; border: 2px solid #fff; outline: 1px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); margin-right: 8px } @media(hover: hover) { .dfd-btn-term-filter:not(.dfd-is-selected):hover::before { outline-color:var(--df-accent-primary, hsl(217, 89%, 61%)); background-color: var(--df-accent-primary, hsl(217, 89%, 61%)); opacity: .5 } } .dfd-btn-term-filter.dfd-is-selected::before { background-color: var(--df-accent-primary, hsl(217, 89%, 61%)); outline-color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-filter-color-circle { flex-shrink: 0; flex-grow: 0; position: relative; width: 30px; height: 30px; background-color: var(--dfd-filter-color); border: .5px solid var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); outline: 1px solid #fff; border-radius: 50% } .dfd-filter-color-circle[data-color=multicolor] { background: conic-gradient(from 90deg, #32DC84, #DED740, #E25255, #D328B7, #2A67ED, #23E3AF) } .dfd-filter-color-circle[data-color=undefined]::after { position: absolute; left: 50%; content: " "; display: block; height: 100%; width: 1px; background-color: #ee3d4c; transform-origin: center center; transform: rotate(45deg) } .dfd-filter-color-circle::before { content: ""; display: none; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); border-radius: 50% } .dfd-btn-color-filter { --dfd-btn-display: flex; --dfd-btn-border-width: 0px; --dfd-btn-text-align: left; --dfd-btn-white-space: normal; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-btn-color-filter.dfd-is-selected { --dfd-btn-font-weight: bold } .dfd-btn-color-filter.dfd-is-selected>.dfd-filter-color-circle::before { display: block } .dfd-btn-color-filter>span:empty { display: none !important } @media(hover: hover) { .dfd-btn-color-filter:not(.dfd-is-selected):hover { --dfd-btn-font-weight: bold } .dfd-btn-color-filter:not(.dfd-is-selected):hover>:first-child::before { display: block; opacity: .5 } } .dfd-facet-layout-list .dfd-btn-color-filter { min-height: 32px; margin-bottom: 8px; --dfd-btn-font-size: 14px; --dfd-btn-width: 100%; --dfd-btn-height: auto; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 4px } .dfd-facet-layout-list .dfd-btn-color-filter:nth-of-type(1) { margin-top: 16px } .dfd-facet-layout-list .dfd-btn-color-filter.dfd-is-selected { --dfd-btn-font-weight: bold } .dfd-facet-layout-list .dfd-btn-color-filter>:not(:last-child) { margin-right: 8px } .dfd-facet-layout-list .dfd-btn-color-filter>:last-child { color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); margin-left: auto } .dfd-facet-layout-grid .dfd-btn-color-filter { flex-direction: column; height: auto; line-height: normal } .dfd-facet-layout-grid .dfd-btn-color-filter>:last-child { display: none } .dfd-facet-layout-grid-with-label .dfd-btn-color-filter { flex-direction: column; height: auto; line-height: normal } .dfd-facet-layout-grid-with-label .dfd-btn-color-filter>:last-child { display: none } .dfd-facet-layout-grid-with-label .dfd-btn-color-filter.dfd-is-selected { --dfd-btn-font-weight: normal } @media(hover: hover) { .dfd-facet-layout-grid-with-label .dfd-btn-color-filter:hover { --dfd-btn-font-weight: normal; --dfd-btn-hover-text-decoration: underline } } div.dfd-facet-content.dfd-facet-type-color.dfd-facet-layout-grid-with-label>button>span:nth-child(2) { display: flex; align-items: center; text-align: center } div.dfd-facet-content.dfd-facet-type-color.dfd-facet-layout-grid>button.dfd-btn-color-filter>span:nth-child(2) { font-size: 90%; text-align: center } div.dfd-facet-content.dfd-facet-type-color.dfd-facet-layout-grid>button.dfd-btn-color-filter:not([data-color=undefined])>span:nth-child(2) { display: none } .dfd-btn-image-filter { --dfd-btn-display: flex; --dfd-btn-border-width: 0px; --dfd-btn-text-align: center; --dfd-btn-white-space: normal; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-btn-image-filter .dfd-filter-image { display: flex; justify-content: center; flex-shrink: 0; flex-grow: 0; position: relative; width: 60px; height: 30px } .dfd-btn-image-filter .dfd-filter-image img { width: auto; height: 100%; object-fit: contain } .dfd-btn-image-filter .dfd-filter-image::before { content: ""; display: none; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); border-radius: 3px } .dfd-btn-image-filter.dfd-is-selected { --dfd-btn-font-weight: bold } .dfd-btn-image-filter.dfd-is-selected>:first-child::before { display: block } .dfd-btn-image-filter>span:empty { display: none !important } @media(hover: hover) { .dfd-btn-image-filter:not(.dfd-is-selected):hover { --dfd-btn-font-weight: bold } .dfd-btn-image-filter:not(.dfd-is-selected):hover>:first-child::before { display: block; opacity: .5 } } [class*=dfd-facet-layout-list] .dfd-btn-image-filter { min-height: 40px; margin-bottom: 8px; --dfd-btn-font-size: 14px; --dfd-btn-width: 100%; --dfd-btn-height: auto; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 4px } [class*=dfd-facet-layout-list] .dfd-btn-image-filter .dfd-filter-image { width: auto; margin-right: 8px } [class*=dfd-facet-layout-list] .dfd-btn-image-filter:nth-of-type(1) { margin-top: 16px } [class*=dfd-facet-layout-list] .dfd-btn-image-filter :not(:last-child) { margin-right: 8px } [class*=dfd-facet-layout-list] .dfd-btn-image-filter :last-child { color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); margin-left: auto } [class*=dfd-facet-layout-list] .dfd-btn-image-filter.dfd-is-selected { --dfd-btn-font-weight: bold } .dfd-facet-layout-grid .dfd-btn-image-filter { padding: 0; line-height: normal } .dfd-facet-layout-grid .dfd-btn-image-filter>:last-child { display: none } .dfd-facet-layout-grid-with-label .dfd-btn-image-filter { flex-direction: column; height: 60px; line-height: normal } .dfd-facet-layout-grid-with-label .dfd-btn-image-filter>.dfd-filter-image+span { margin-top: 8px } .dfd-facet-layout-grid-with-label .dfd-btn-image-filter>:last-child { display: none } div.dfd-facet-content.dfd-facet-type-image.dfd-facet-layout-list-without-label>button>span:nth-child(2) { display: none } div.dfd-facet-content.dfd-facet-type-image.dfd-facet-layout-grid>button>span:nth-child(2) { display: none } .dfd-btn-frame-filter { --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-hover-color: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-active-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-active-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-disabled-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-font-size: 14px; --dfd-btn-width: fit-content; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px; --dfd-btn-padding-x: 8px; min-width: 40px; font-size: 16px } .dfd-btn-frame-filter.dfd-is-selected { --dfd-btn-font-weight: bold; border-color: rgba(0,0,0,0); background-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)); color: var(--df-neutral-surface, hsl(204, 2%, 100%)) } @media(hover: hover) { .dfd-btn-frame-filter.dfd-is-selected:hover { background-color:var(--df-accent-primary-active, hsl(217, 89%, 51%)) } } .dfd-view-more-button { --dfd-btn-display: flex; --dfd-btn-text-align: center; justify-content: center; --dfd-btn-font-size: 12px; --dfd-btn-width: 100%; --dfd-btn-height: auto; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-view-more-button::after { flex: 0 0 auto; display: inline-block; content: ""; width: 16px; height: 16px; background-color: rgba(0,0,0,0); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center center; transform: rotate(0deg); transition: transform .125s ease-out; margin-left: 4px } .dfd-view-more-button[data-collapsed=false]::after { transform: rotate(-180deg) } .dfd-close-button { --dfd-btn-font-size: 0; --dfd-btn-width: 32px; --dfd-btn-height: 32px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0; position: relative; flex: 0 0 auto; opacity: .5 } .dfd-close-button:hover,.dfd-close-button:focus,.dfd-close-button:active { opacity: .8 } .dfd-close-button::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='36px' height='36px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'%3E%3C/path%3E%3Cpath d='M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'%3E%3C/path%3E%3C/svg%3E"); background-position: center } .dfd-back-to-top-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-font-size: 0; --dfd-btn-width: 48px; --dfd-btn-height: 48px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 500px; --dfd-btn-display: inline-flex; align-items: center; justify-content: center } .dfd-back-to-top-button svg { width: 32px; height: 32px } .dfd-smart-filter-button,.dfd-smart-filter-button-primary { --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 500px } .dfd-smart-filter-button { --dfd-btn-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-bg: transparent; --dfd-btn-border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-active-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-disabled-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-smart-filter-button-primary { --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-bg: transparent; --dfd-btn-border-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-hover-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)) } .dfd-smart-filters-toggle-btn { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 4px } .dfd-smart-filters-toggle-btn svg { width: 16px; height: 16px } .dfd-view-all-link-button,.dfd-delete-link-button { --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 8px; --dfd-btn-border-radius: 0; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-btn-icon,label.dfd-image-search-button { --dfd-btn-font-size: 14px; --dfd-btn-width: 32px; --dfd-btn-height: 32px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 0; flex: 0 0 auto } .dfd-next-page-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-font-size: 16px; --dfd-btn-width: auto; --dfd-btn-height: 48px; --dfd-btn-padding-x: 16px; --dfd-btn-border-radius: 8px } .dfd-clear-filters-button { --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 4px; --dfd-btn-border-radius: 0; padding-left: 0 !important } label.dfd-image-search-button { position: relative; overflow: hidden } label.dfd-image-search-button input[type=file] { position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0 } label.dfd-image-search-button[data-status=loading] svg { display: none } label.dfd-image-search-button[data-status=loading]::after { content: ""; width: 0px; height: 0px; border-radius: 50%; border: 2px solid var(--df-accent-primary, hsl(217, 89%, 61%)); border-right-color: rgba(0,0,0,0); animation: rotate360 .5s infinite linear,exist .1s forwards ease } .dfd-facet:not(.dfd-facet-collapsed) .dfd-category-navigation { margin-top: 16px } .dfd-category-breadcrumbs~.dfd-category,.dfd-category .dfd-category-tree { margin-left: 18px } .dfd-category-term { --dfd-btn-display: flex; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: rgba(67, 135, 244, 0.1); --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: rgba(67, 135, 244, 0.1); --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-font-size: 14px; --dfd-btn-width: auto; --dfd-btn-height: 32px; --dfd-btn-padding-x: 4px; --dfd-btn-border-radius: 6px; line-height: normal; margin-top: 4px } .dfd-category-term .dfd-btn-term-filter { --dfd-btn-bg: transparent; margin-top: 0; justify-content: flex-start } .dfd-category-term .dfd-btn-term-filter>:last-child { margin-left: 0 } .dfd-category-term .dfd-btn-term-filter::before { display: none } .dfd-category-term .dfd-btn-icon,.dfd-category-term label.dfd-image-search-button { --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-hover-bg: transparent; --dfd-btn-active-bg: transparent; stroke: #000 } .dfd-category-term .dfd-btn-icon:hover,.dfd-category-term label.dfd-image-search-button:hover { stroke-width: 4px } .dfd-category-term.dfd-is-selected { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 89%, 98%)) } .dfd-category-term.dfd-is-selected .dfd-btn-term-filter>:first-child { font-weight: bold } .dfd-category-term.dfd-is-selected .dfd-btn-term-filter span { color: var(--df-accent-on-primary, hsl(217, 89%, 98%)) } .dfd-category-term.dfd-is-selected .dfd-btn-icon,.dfd-category-term.dfd-is-selected label.dfd-image-search-button { stroke: var(--df-accent-on-primary, hsl(217, 89%, 98%)) } .dfd-category-breadcrumbs { list-style: none; padding: 0; margin: 0 } .dfd-category-breadcrumbs li { display: inline-block } .dfd-category-breadcrumbs li+li::before { display: inline-block; content: ">" } .dfd-category-breadcrumbs span { cursor: pointer } .dfd-category-breadcrumbs span:hover { text-decoration: underline; text-decoration-skip-ink: auto } .dfd-card { position: relative !important; display: flex; flex-direction: column; padding: 24px; border-width: 1px; border-style: solid; border-color: var(--df-neutral-outline, hsl(204, 2%, 80%)); border-radius: 4px; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); background-color: var(--df-neutral-surface, hsl(204, 2%, 100%)); font-size: 14px; text-align: left; overflow-wrap: break-word; outline: none; cursor: pointer } @media(hover: hover) { .dfd-card:hover,.dfd-card:focus-visible { border-color:var(--df-accent-primary, hsl(217, 89%, 61%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 89%, 61%)) } } @media(hover: none) { .dfd-card:active>* { opacity:.8 } } .dfd-card button { position: relative; z-index: 2 } .dfd-card .dfd-cart-add-button { margin-left: auto } .dfd-card .dfd-cart-add-button:has(.dfd-card-procesing-quantity) { width: 100% } .dfd-card.dfd-card--selected { border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 89%, 61%)); background: rgba(66,133,244,.1) } .dfd-card-link { display: block !important; position: static; overflow: visible; filter: none; transform: unset !important; perspective: unset !important } .dfd-card-link>* { display: none } .dfd-card-preset-generic .dfd-card-link { margin-top: 6px } .dfd-card-preset-generic .dfd-card-link>* { display: unset } .dfd-card-link::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0,0,0,0) } .dfd-card-media { flex: 0 0 auto; padding: 0; overflow: hidden; border-radius: 0 } .dfd-card-thumbnail { display: block; overflow: hidden; z-index: 0; position: relative; width: 100%; height: 0; padding-bottom: var(--dfd-card-thumbnail-height-ratio, 100%) } .dfd-card-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: initial; margin: auto; position: absolute; bottom: 0; left: 0 } .dfd-card-thumbnail-404 { background-color: #f5f5f5; background-image: url("data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgZmlsbD0iI2RkZCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6IiBmaWxsPSJub25lIi8+PHBhdGggZD0ibTIxLjE5IDIxLjE5LS43OC0uNzgtMi40MS0yLjQxLTQuNTktNC41OS05LjgyLTkuODItLjc4LS43OGMtLjM5LS4zOS0xLjAyLS4zOS0xLjQxIDAtLjQuMzktLjQgMS4wMi0uMDEgMS40MWwxLjYxIDEuNjF2MTMuMTdjMCAxLjEuOSAyIDIgMmgxMy4xN2wxLjYxIDEuNjFjLjM5LjM5IDEuMDIuMzkgMS40MSAwcy4zOS0xLjAzIDAtMS40MnptLTE1LjE3LTMuMTljLS40MiAwLS42NS0uNDgtLjM5LS44MWwyLjQ5LTMuMmMuMi0uMjUuNTgtLjI2Ljc4LS4wMWwyLjEgMi41MyAxLjE3LTEuNTEgMyAzem0xNC45OC4xNy0xNS4xNy0xNS4xN2gxMy4xN2MxLjEgMCAyIC45IDIgMnoiLz48L3N2Zz4K"); background-repeat: no-repeat; background-position: center center } .dfd-card-thumbnail-404 img { display: none } .dfd-card-row { flex: 0 0 auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 12px } .dfd-card-content { flex: 0 0 auto; display: flex; flex-flow: column nowrap; justify-content: flex-start; padding: 0; margin-top: 12px } .dfd-card-title { flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: var(--dfd-card-title-max-lines, 3); -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis } .dfd-card-description { flex: 0 0 auto; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: var(--dfd-card-description-max-lines, 3); -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: 0.0178571429em; opacity: .8 } .dfd-card-preset-product .dfd-card-description { display: none } .dfd-card-flags { position: absolute; top: 8px; left: 0; right: 0; z-index: 0; display: flex; flex-flow: row nowrap } .dfd-card-flags>div { padding: 4px 6px; font-size: 12px } .dfd-card-flags [data-availability] { margin-right: auto; border-top-right-radius: 4px; border-bottom-right-radius: 4px } .dfd-card-flags [data-availability=out-of-stock] { background: var(--df-card-flag-out-of-stock-background, var(--df-neutral-disabled, hsl(204, 2%, 94%))); color: var(--df-card-flag-out-of-stock-color, var(--df-neutral-medium-contrast, hsl(204, 2%, 47%))) } .dfd-card-flags [data-discount] { font-weight: bold; margin-left: auto; background-color: var(--df-card-flag-discount-background, var(--df-accent-tertiary, hsl(204, 2%, 20%))); color: var(--df-card-flag-discount-color, var(--df-accent-on-tertiary, hsl(204, 2%, 98%))); border-top-left-radius: 4px; border-bottom-left-radius: 4px } .dfd-card-flex { flex: 1 1 auto; min-height: 0 } .dfd-card-flex:empty { display: block !important } .dfd-card-pricing { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; margin-left: -8px; font-size: 14px } .dfd-card-pricing>* { flex: 0 0 auto } .dfd-feat-add-to-cart .dfd-card-pricing { flex-direction: column } .dfd-card-price { order: 0; margin-left: 8px; white-space: nowrap; font-weight: bold } .dfd-card-price:last-child { margin-right: 0 } .dfd-card-price--sale { order: 1; font-weight: bold; color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-card-price--sale~.dfd-card-price { color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); font-weight: normal; text-decoration: line-through } .dfd-card-select-quantity { position: relative !important; display: flex; flex-direction: row; width: 100%; border-width: 0px; border-style: solid; border-color: var(--df-neutral-outline, hsl(204, 2%, 80%)); border-radius: 4px; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); background-color: var(--df-neutral-surface, hsl(204, 2%, 100%)); font-size: 14px; text-align: left; overflow-wrap: break-word; outline: none; cursor: pointer; margin-bottom: 2px } .dfd-card-select-quantity input[type=number]::-webkit-inner-spin-button,.dfd-card-select-quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none } .dfd-card-select-quantity input[type=number] { appearance: textfield } .dfd-card-select-quantity form { z-index: 2; margin-bottom: 0; box-shadow: 0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 90%)); max-height: 40px } .dfd-card-select-quantity form input { text-align: center; width: 100%; height: 40px; border: 0 } .dfd-card-select-quantity input { z-index: 2; margin-bottom: 0; box-shadow: 0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 90%)); max-height: 40px; text-align: center; width: 100%; height: 40px; margin-right: 2px; border: 0 } .dfd-card-procesing-quantity { display: flex; flex-direction: row; height: 40px; border-width: 0px; border-style: solid; border-color: var(--df-neutral-outline, hsl(204, 2%, 80%)); border-radius: 4px; color: var(--df-neutral-surface, hsl(204, 2%, 100%)); background-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); font-size: 14px; text-align: left; overflow-wrap: break-word; outline: none; align-items: center; justify-content: center; cursor: pointer } .dfd-card-procesing-quantity span { display: block } .dfd-card-add-to-cart[data-phx-component] { display: inline-flex; gap: 4px; margin-left: 16px; align-self: end } .dfd-cart-select-button { --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-color: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-hover-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-border-color: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-active-color: var(--df-accent-primary-hover, hsl(217, 89%, 56%)); --dfd-btn-active-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-active-border-color: var(--df-accent-primary-active, hsl(217, 89%, 51%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px } .dfd-cart-select-button.selected { font-weight: bold; font-size: 18px; border-width: 2px } .dfd-cart-select-button input { pointer-events: none; text-align: center; background: rgba(0,0,0,0); border: none; color: inherit; cursor: inherit; outline: none; width: inherit } .dfd-card.behind-selector { cursor: auto; pointer-events: none } @media(hover: hover) { .dfd-card.behind-selector:hover,.dfd-card.behind-selector:focus-visible { border-color:rgba(0,0,0,0); box-shadow: revert } } .dfd-card.behind-selector .dfd-card-link::after { display: none !important; pointer-events: none } .dfd-card-selector { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 3; display: grid; grid-template-rows: min-content 1fr; backdrop-filter: blur(2px); background-color: rgba(255,255,255,.75); border-width: 2px; border-style: solid; border-radius: 4px; border-color: var(--df-accent-primary, hsl(217, 89%, 61%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 89%, 61%)); pointer-events: auto } .dfd-card-selector .dfd-card-selector-header { margin-top: 32px; text-align: center } .dfd-card-selector .dfd-card-selector-body { height: 86%; overflow-y: auto; margin-bottom: 16px } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, max-content)); gap: 16px; grid-gap: 16px; place-items: center; justify-content: center; padding: 16px } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants .dfd-card-variant-button { --dfd-btn-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-hover-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-hover-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-active-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-active-border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); --dfd-btn-disabled-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-disabled-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --dfd-btn-font-size: 14px; --dfd-btn-width: 40px; --dfd-btn-height: 40px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px; margin: 4px; font-size: 16px } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants .out-stock { --dfd-btn-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-border-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-hover-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-hover-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-border-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-active-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-active-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-active-border-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-disabled-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); --dfd-btn-disabled-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-disabled-border-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); pointer-events: none } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants .out-stock::after { position: absolute; left: 19px; content: " "; height: 49px; width: 1px; background-color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); transform: rotate(45deg) } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants .selected { border-width: 2px; border-color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); font-weight: bold } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants.one-column { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants.one-column>button { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0px 5px; display: inline } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants.no-scrollable { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px } .dfd-card-selector .dfd-card-selector-body .dfd-card-variants.no-scrollable .dfd-card-variant-button { margin: 0; font-size: 16px; flex: 1 1 calc(33.333% - 20px); text-align: center; padding: 5px; box-sizing: border-box } .dfd-card-selector .dfd-close-button { position: absolute; top: 8px !important; right: 8px !important; --dfd-btn-font-size: 14px; --dfd-btn-width: 18px; --dfd-btn-height: 18px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px } .dfd-carousel { display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 8px; position: relative; overflow: hidden } .dfd-carousel-arrow { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 24px; overflow: hidden; margin: 4px; cursor: pointer; opacity: 1; transition: opacity .125s ease-in } .dfd-carousel-arrow:hover { opacity: .8 } .dfd-carousel-arrow svg { flex: 0 0 auto; width: 40px; height: 40px; fill: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-carousel-content { display: flex; flex-flow: row nowrap; justify-content: flex-start; flex: 1 1 auto; padding: 4px; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none } .dfd-carousel-content::-webkit-scrollbar { display: none } .dfd-carousel-content>* { flex: 0 0 auto } .dfd-carousel-content>*:not(:first-child) { margin-left: 16px } .dfd-carousel-content::after { content: "."; display: block; width: 4px; margin-left: 0; margin-right: 0; visibility: hidden } .dfd-carousel-content .dfd-card { flex: 0 0 auto; width: 200px } @media(min-width: 992px) { .dfd-carousel-content .dfd-card { width:240px } } .dfd-facet { padding: 0; margin: 0 } .dfd-facet+.dfd-facet { margin-top: 32px } .dfd-facet-title { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0; margin: 0; line-height: 32px; cursor: pointer } .dfd-facet-title>:first-child { flex: 1 1 auto; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden } .dfd-facet-title::after { flex: 0 0 auto; display: inline-block; content: ""; width: 32px; height: 32px; background-color: rgba(0,0,0,0); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center center; transform: rotate(0deg); transition: transform .125s ease-out; margin-left: 8px } .dfd-facet-collapsed .dfd-facet-title::after { transform: rotate(-180deg) } .dfd-facet-collapsed .dfd-facet-content { margin: 0 !important } .dfd-facet-layout-grid,.dfd-facet-layout-grid-with-label { margin: 12px 0 8px } .dfd-facet-layout-grid.dfd-facet-type-color,.dfd-facet-layout-grid-with-label.dfd-facet-type-color { display: grid; gap: 16px 4px; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: flex-start } .dfd-facet-layout-grid.dfd-facet-type-image,.dfd-facet-layout-grid-with-label.dfd-facet-type-image { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)) } .dfd-facet-layout-grid.dfd-facet-type-frame,.dfd-facet-layout-grid-with-label.dfd-facet-type-frame { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: auto; margin-right: auto; gap: 8px 12px } .dfd-facet-layout-grid.dfd-facet-type-frame button>span:nth-child(2),.dfd-facet-layout-grid-with-label.dfd-facet-type-frame button>span:nth-child(2) { display: none } .dfd-guided-filters { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 24px 32px; overflow: hidden; overscroll-behavior: contain; background-color: var(--df-neutral-background, hsl(204, 2%, 100%)); border: 1px solid var(--df-neutral-outline, hsl(204, 2%, 80%)); cursor: default } .dfd-guided-filters-header { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-width: fit-content; margin-right: 24px } .dfd-guided-filters-header button { font-size: 80%; padding: 0; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 89%, 61%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-guided-filters-title { font-weight: bold } .dfd-guided-filters-subtitle { font-size: 90% } .dfd-guided-filters-content { flex: 1 1 auto; width: auto; overflow: hidden } .dfd-guided-filters-content .dfd-carousel { min-width: 0 } .dfd-guided-filters-content .dfd-carousel .dfd-carousel-arrow svg { fill: revert } .dfd-guided-filters-card { display: flex; flex-direction: row; border: 1px solid var(--df-neutral-outline, hsl(204, 2%, 80%)); border-radius: 4px; cursor: pointer } @media(hover: hover) { .dfd-guided-filters-card:hover { box-shadow:0 0 0 1px var(--df-neutral-outline, hsl(204, 2%, 80%)) } } .dfd-guided-filters-card img { max-width: 100px; max-height: 80px } .dfd-guided-filters-card span { display: inline-flex; align-items: center; justify-content: center; padding: 0 24px } .dfd-guided-filters .dfd-close-button { position: absolute; top: 0; right: 0 } .dfd-guided-filters .dfd-close-button::before { transform: scale(50%) } .dfd-icon:not(svg),[class*=dfd-icon-]:not(svg) { display: inline-flex; justify-content: center; align-items: center; overflow: visible; flex: 0 0 auto; width: 0; height: var(--dfd-icon-size); line-height: var(--dfd-icon-size); padding: 0 calc(var(--dfd-icon-size)/2); margin: 0; background-color: rgba(0,0,0,0) } .dfd-icon:not(svg)>svg,[class*=dfd-icon-]:not(svg)>svg { flex: 0 0 auto } svg.dfd-icon,svg[class*=dfd-icon-] { width: var(--dfd-icon-size); height: var(--dfd-icon-size) } .dfd-icon-sm { --dfd-icon-size: 16px } .dfd-icon { --dfd-icon-size: 24px } .dfd-icon-lg { --dfd-icon-size: 32px } .dfd-icon-xl { --dfd-icon-size: 48px } .dfd-meta { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 14px; white-space: nowrap; line-height: 32px } .dfd-meta>* { flex: 0 0 auto } .dfd-progress { display: block; width: 100%; height: 2px; background-color: var(--df-neutral-surface-variant, hsl(204, 2%, 90%)); overflow: hidden; border-radius: 500px } .dfd-progress>div { display: block; height: 100%; color: var(--df-accent-primary-contrast, ); background-color: var(--df-accent-primary, hsl(217, 89%, 61%)); text-align: center; white-space: nowrap; overflow: hidden; transition: width .6s ease } .dfd-pagination { display: flex; flex-flow: column nowrap; align-items: center } .dfd-pagination .dfd-progress { margin-bottom: 16px } .dfd-pagination .dfd-progress,.dfd-pagination button { max-width: 240px } .dfd-results-grid { position: relative; z-index: 1; display: grid; padding: var(--dfd-results-grid-y-padding, 0) var(--dfd-results-grid-x-padding, 0); margin: 0; grid-gap: var(--dfd-results-grid-gap, 16px); gap: var(--dfd-results-grid-gap, 16px); grid-template-columns: repeat(var(--dfd-results-grid-column-count, auto-fill), var(--dfd-results-grid-column-size, minmax(200px, 1fr))) } [data-dfd-role=scroll-sentinel],[data-dfd-role=scroll-top-sentinel] { z-index: -1; display: block !important; background-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); opacity: 0 } [data-dfd-role=scroll-sentinel] { position: relative; width: 100%; height: 600px; margin-top: -300px } [data-dfd-role=scroll-top-sentinel] { position: absolute; left: 0; right: 0; height: 200px } .dfd-no-results { padding: var(--dfd-no-results-padding, 0) } .dfd-no-results .dfd-title-xl { margin-bottom: 16px } .dfd-no-results .dfd-card { flex: 0 0 auto; width: 200px } @media(min-width: 992px) { .dfd-no-results .dfd-card { width:240px } } .dfd-card-row[data-status] { min-height: 41px } .dfd-card-row[data-status=initial] .dfd-card-select-quantity { display: none } .dfd-card-row[data-status=initial] .dfd-card-selector { display: none } .dfd-card-row[data-status=quantity] .dfd-card-pricing { display: none } .dfd-card-row[data-status=quantity] .dfd-cart-add-button { display: none } .dfd-card-row[data-status=quantity] .dfd-card-select-quantity { display: flex } .dfd-card-row[data-status=quantity] .dfd-card-selector { display: none } .dfd-searchbox { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 0; margin: 0; background-color: #fff; border: 0; height: var(--dfd-searchbox-height, 48px); line-height: var(--dfd-searchbox-height, 48px); font-size: var(--dfd-searchbox-font-size, 16px); font-weight: var(--dfd-searchbox-font-weight, 400) } .dfd-searchbox-slot { flex: 0 0 auto; display: flex; flex-flow: row nowrap; align-items: center; gap: 4px } .dfd-searchbox-main { flex: 1 1 auto; position: relative } .dfd-searchbox-input { overflow: visible; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; z-index: 1; display: block; min-width: 0; width: 100% !important; height: 100% !important; margin: 0; border-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: none !important } .dfd-searchbox-input::-webkit-search-cancel-button { display: none } .dfd-searchbox-autocomplete { display: flex; flex-flow: row nowrap; align-items: center; white-space: nowrap; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)) } .dfd-searchbox-input,.dfd-searchbox-autocomplete { padding: 0 0 0 4px !important; font-family: inherit; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; letter-spacing: inherit } .dfd-slider { padding: 48px 24px; font-size: 14px; --df-slider-color-primary: var(--df-accent-primary, hsl(217, 89%, 61%)); --df-slider-color-secondary: var(--df-neutral-surface, hsl(204, 2%, 100%)); --df-slider-color-tertiary: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --df-slider-color-border: var(--df-slider-color-primary); --df-slider-color-connect-background: var(--df-slider-color-primary); --df-slider-color-connect-disabled: var(--df-neutral-surface-variant, hsl(204, 2%, 90%)); --df-slider-color-handle-background: var(--df-slider-color-secondary); --df-slider-color-handle-border: var(--df-slider-color-tertiary); --df-slider-color-tooltip-rgb: var(--df-slider-color-secondary); --df-slider-color-tooltip-background: var(--df-slider-color-primary); --df-slider-color-tooltip-border: var(--df-slider-color-primary); --df-slider-color-pips: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); --df-slider-color-marker: var(--df-neutral-surface-variant, hsl(204, 2%, 90%)) } .dfd-slider-target,.dfd-slider-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box } .dfd-slider-target { position: relative } .dfd-slider-base,.dfd-slider-connects { width: 100%; height: 100%; position: relative; z-index: 1 } .dfd-slider-connects { overflow: hidden; z-index: 0 } .dfd-slider-connect,.dfd-slider-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 100%; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat } .dfd-slider-txt-dir-rtl.dfd-slider-horizontal .dfd-slider-origin { left: 0; right: auto } .dfd-slider-vertical .dfd-slider-origin { top: -100%; width: 0 } .dfd-slider-horizontal .dfd-slider-origin { height: 0 } .dfd-slider-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute } .dfd-slider-touch-area { height: 100%; width: 100% } .dfd-slider-state-tap .dfd-slider-connect,.dfd-slider-state-tap .dfd-slider-origin { -webkit-transition: transform .3s; transition: transform .3s } .dfd-slider-state-drag * { cursor: inherit !important } .dfd-slider-horizontal { height: 6px } .dfd-slider-horizontal .dfd-slider-handle { width: 24px; height: 24px; right: -12px; top: -10px } .dfd-slider-txt-dir-rtl.dfd-slider-horizontal .dfd-slider-handle { left: -12px; right: auto } .dfd-slider-target { background: rgba(0,0,0,0); border-radius: 50rem; border: 1px solid var(--df-slider-color-border) } .dfd-slider-connects { border-radius: 50rem } .dfd-slider-connect { background-color: var(--df-slider-color-connect-background) } .dfd-slider-draggable { cursor: ew-resize } .dfd-slider-vertical .dfd-slider-draggable { cursor: ns-resize } .dfd-slider-handle { border: 2px solid var(--df-slider-color-handle-border); border-radius: 50rem; background: var(--df-slider-color-handle-background); cursor: pointer } [disabled] .dfd-slider-connect { background: var(--df-slider-color-connect-disabled) } [disabled].dfd-slider-target,[disabled].dfd-slider-handle,[disabled] .dfd-slider-handle { cursor: not-allowed } .dfd-slider-pips,.dfd-slider-pips * { -moz-box-sizing: border-box; box-sizing: border-box } .dfd-slider-pips { position: absolute; font-size: 12px; color: var(--df-slider-color-pips) } .dfd-slider-value { position: absolute; white-space: nowrap; text-align: center } .dfd-slider-marker { position: absolute } .dfd-slider-marker,.dfd-slider-marker-sub,.dfd-slider-marker-large { background: var(--df-slider-color-marker) } .dfd-slider-pips-horizontal { padding: 4px 0 0; height: 80px; top: 100%; left: 0; width: 100% } .dfd-slider-value-horizontal { -webkit-transform: translate(-50%, 75%); transform: translate(-50%, 75%) } .dfd-slider-rtl .dfd-slider-value-horizontal { -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%) } .dfd-slider-marker-horizontal.dfd-slider-marker { margin-left: -1px; width: 2px; height: 4px } .dfd-slider-marker-horizontal.dfd-slider-marker-sub { height: 10px } .dfd-slider-marker-horizontal.dfd-slider-marker-large { height: 12px } .dfd-slider-tooltip { display: block; position: absolute; border: 0 solid var(--df-slider-color-tooltip-border); background: var(--df-slider-color-tooltip-background); color: var(--df-slider-color-tooltip-rgb); border-radius: 4px; padding: 4px; line-height: 1.2; font-weight: bold; text-align: center; white-space: nowrap } .dfd-slider-horizontal .dfd-slider-tooltip { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120% } .dfd-slider-horizontal:not([data-autohide-tooltips]) .dfd-slider-handle>.dfd-slider-tooltip { z-index: 100; opacity: 0 } .dfd-slider-horizontal:not([data-autohide-tooltips]) .dfd-slider-origin>.dfd-slider-tooltip { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); left: auto; bottom: 12px; z-index: 10 } .dfd-slider-horizontal[data-autohide-tooltips] .dfd-slider-tooltip { display: none } .dfd-slider-horizontal[data-autohide-tooltips] .dfd-slider-active .dfd-slider-tooltip { display: block } .dfd-range-input-group { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 8px 16px 0 } .dfd-range-input-group input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 0 0 4px; font-size: 14px; line-height: 24px; height: 24px; border: 1px solid var(--df-neutral-outline, hsl(204, 2%, 80%)) } .dfd-range-input-group :not(:last-child) { margin-right: 8px } .dfd-range-input-group~.dfd-slider { padding-top: 8px } .dfd-tabs { display: flex; flex-flow: column nowrap; min-height: 0; overflow: hidden } .dfd-tabs-nav { flex: 0 0 auto; display: flex; padding: 0; margin: 0; border-bottom: 1px solid var(--df-neutral-outline, hsl(204, 2%, 80%)); white-space: nowrap; overflow-x: auto } .dfd-tabs-item { margin-left: 1em; padding: 8px; color: var(--df-neutral-medium-contrast, hsl(204, 2%, 47%)); cursor: pointer } .dfd-tabs-item::first-letter { text-transform: capitalize } .dfd-tabs-item:hover,.dfd-tabs-item:focus,.dfd-tabs-item.dfd-is-selected { color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } .dfd-tabs-item.dfd-is-selected { font-weight: bold; border-bottom: 3px solid var(--df-accent-primary, hsl(217, 89%, 61%)) } .dfd-tabs-item:first-child { margin-left: 0 } .dfd-tabs-item :last-child { margin-left: 2px } .dfd-tab-disabled { cursor: not-allowed; color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)) } .dfd-tab-disabled:hover,.dfd-tab-disabled:focus,.dfd-tab-disabled.dfd-is-selected { color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)) } @keyframes recording { 0%,50%,100% { opacity: 1 } 25%,75% { opacity: .25 } } [data-dfd-role=voice-search] { --df-voice-search-recording-color: #c00 } [data-dfd-role=voice-search] svg { fill: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)) } [data-dfd-role=voice-search][data-dfd-recording] svg { fill: var(--df-voice-search-recording-color); animation: recording 4s infinite both } #ws5_sendinblue_popup .modal-content{ padding:0px!important; } #ws5_sendinblue_popup .modal-header{ padding:0px!important; margin:0px!important; } #ws5_sendinblue_popup .modal-header button{ z-index:99; } #ws5_sendinblue_popup #ws5_sendinblue_popup_body{ height:520px; width:auto; padding:0px!important; margin:0px!important; } #ws5_sendinblue_popup iframe{ padding:0px!important; margin:auto!important; } @media (min-width: 576px) { #ws5_sendinblue_popup .modal-content { width: 530px; } } @media (max-width: 900px) { #ws5_sendinblue_popup_body > iframe{ height:500px!important; } } #ws5_sendinblue_popup_body #18-popup .modal-content{ margin-right: auto; margin-left: auto; } #ws5_sendinblue_popup .modal-content { padding: 0px !important; width: 550px; margin-left: auto; margin-right: auto; } @media (max-width: 498px) { #ws5_sendinblue_popup #ws5_sendinblue_popup_body { height: 512px; width: 405px; } .modal-header .close { right: 62%; } } /* Social Icons MOBILE Fix */ #footer-boxes .footer-social-media .fab::before { font-size: 3rem; } #footer-boxes .footer-social-media .fab { margin-right: 1rem; } @media (max-width: 768px) { #footer-boxes .footer-social-media .fab::before { font-size: 2.2rem; } } /* BREVO END */