@charset "utf-8";

@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: 0px; 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-visible, label.dfd-image-search-button:focus-visible, .dfd-btn-image-filter:focus-visible, .dfd-btn-color-filter:focus-visible, .dfd-btn-term-filter:focus-visible, .dfd-root button:focus-visible { box-shadow: 0 0 0 2px var(--df-neutral-surface, hsl(204, 2%, 100%)),0 0 0 4px var(--df-accent-tertiary, hsl(204, 2%, 20%)); outline: none; }
}

.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: 0px; border-top-left-radius: 0px; 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: 0px; border-top-right-radius: 0px; }

.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: 0.5s; }

:root { --df-accent-primary: #1069f9; --df-accent-primary-hover: #065dea; --df-accent-primary-active: #0553d1; --df-accent-on-primary: #f5f9ff; --df-accent-secondary: #737678; --df-accent-secondary-hover: #66696b; --df-accent-secondary-active: #5a5c5e; --df-accent-on-secondary: #fafafa; --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: #737678; --df-neutral-high-contrast: #323334; --df-neutral-disabled: #eff0f0; }

.dfd-root { color-scheme: revert; forced-color-adjust: revert; mask: revert; math-depth: revert; position: revert; position-anchor: revert; text-size-adjust: 100%; appearance: revert; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); font-family: inherit; font-feature-settings: revert; font-kerning: revert; font-optical-sizing: revert; font-palette: revert; font-size: 16px; font-size-adjust: revert; font-stretch: revert; font-style: revert; font-synthesis: revert; font-variant: revert; font-variation-settings: revert; font-weight: revert; position-area: revert; text-orientation: revert; text-rendering: revert; text-spacing-trim: revert; -webkit-font-smoothing: antialiased; -webkit-locale: revert; -webkit-text-orientation: revert; -webkit-writing-mode: revert; writing-mode: revert; zoom: revert; accent-color: revert; place-content: revert; place-items: revert; place-self: revert; alignment-baseline: revert; anchor-name: revert; anchor-scope: revert; animation-composition: revert; animation: revert; app-region: revert; aspect-ratio: revert; backdrop-filter: revert; backface-visibility: revert; background: revert; background-blend-mode: revert; baseline-shift: revert; baseline-source: revert; block-size: revert; border-block: revert; border: revert; border-radius: revert; border-collapse: revert; border-end-end-radius: revert; border-end-start-radius: revert; border-inline: revert; border-start-end-radius: revert; border-start-start-radius: revert; inset: revert; box-decoration-break: revert; box-shadow: revert; box-sizing: revert; break-after: revert; break-before: revert; break-inside: revert; buffered-rendering: revert; caption-side: revert; caret-color: revert; clear: revert; clip: revert; clip-path: revert; clip-rule: revert; color-interpolation: revert; color-interpolation-filters: revert; color-rendering: revert; columns: revert; column-fill: revert; gap: revert; column-rule: revert; column-span: revert; contain: revert; contain-intrinsic-block-size: revert; contain-intrinsic-size: revert; contain-intrinsic-inline-size: revert; container: revert; content: revert; content-visibility: revert; counter-increment: revert; counter-reset: revert; counter-set: revert; cursor: default; cx: revert; cy: revert; d: revert; display: revert; dominant-baseline: revert; dynamic-range-limit: revert; empty-cells: revert; field-sizing: revert; fill: revert; fill-opacity: revert; fill-rule: revert; filter: revert; flex: revert; flex-flow: revert; float: revert; flood-color: revert; flood-opacity: revert; grid: revert; grid-area: revert; height: revert; hyphenate-character: revert; hyphenate-limit-chars: revert; hyphens: revert; image-orientation: revert; image-rendering: revert; initial-letter: revert; inline-size: revert; inset-block: revert; inset-inline: revert; interpolate-size: revert; isolation: isolate; letter-spacing: revert; lighting-color: revert; line-break: revert; line-height: 1.5; list-style: revert; margin-block: revert; margin: revert; margin-inline: revert; marker: revert; mask-type: revert; math-shift: revert; math-style: revert; max-block-size: revert; max-height: revert; max-inline-size: revert; max-width: revert; min-block-size: revert; min-height: revert; min-inline-size: revert; min-width: revert; mix-blend-mode: revert; object-fit: revert; object-position: revert; object-view-box: revert; offset: revert; opacity: revert; order: revert; orphans: revert; outline: revert; outline-offset: revert; overflow-anchor: revert; overflow-block: revert; overflow-clip-margin: revert; overflow-inline: revert; overflow-wrap: revert; overflow: revert; overlay: revert; overscroll-behavior-block: revert; overscroll-behavior-inline: revert; overscroll-behavior: revert; padding-block: revert; padding: revert; padding-inline: revert; page: revert; page-orientation: revert; paint-order: revert; perspective: revert; perspective-origin: revert; pointer-events: all !important; position-try: revert; position-visibility: revert; print-color-adjust: revert; quotes: revert; r: revert; resize: revert; rotate: revert; ruby-align: revert; ruby-position: revert; rx: revert; ry: revert; scale: revert; scroll-behavior: smooth; scroll-initial-target: revert; scroll-margin-block: revert; scroll-margin: revert; scroll-margin-inline: revert; scroll-marker-group: revert; scroll-padding-block: revert; scroll-padding: revert; scroll-padding-inline: revert; scroll-snap-align: revert; scroll-snap-stop: revert; scroll-snap-type: revert; scroll-timeline: revert; scrollbar-color: revert; scrollbar-gutter: revert; scrollbar-width: revert; shape-image-threshold: revert; shape-margin: revert; shape-outside: revert; shape-rendering: revert; size: revert; speak: revert; stop-color: revert; stop-opacity: revert; stroke: revert; stroke-dasharray: revert; stroke-dashoffset: revert; stroke-linecap: revert; stroke-linejoin: revert; stroke-miterlimit: revert; stroke-opacity: revert; stroke-width: revert; tab-size: revert; table-layout: revert; text-align: revert; text-align-last: revert; text-anchor: revert; text-box: revert; text-combine-upright: revert; text-decoration: revert; text-decoration-skip-ink: revert; text-emphasis: revert; text-emphasis-position: revert; text-indent: revert; text-overflow: revert; text-shadow: revert; text-transform: revert; text-underline-offset: revert; text-underline-position: revert; text-wrap: revert; timeline-scope: revert; touch-action: manipulation; transform: revert; transform-box: revert; transform-origin: revert; transform-style: revert; transition: revert; translate: revert; user-select: revert; vector-effect: revert; vertical-align: revert; view-timeline: revert; view-transition-class: revert; view-transition-name: revert; visibility: revert; border-spacing: revert; -webkit-box-align: revert; -webkit-box-decoration-break: revert; -webkit-box-direction: revert; -webkit-box-flex: revert; -webkit-box-ordinal-group: revert; -webkit-box-orient: revert; -webkit-box-pack: revert; -webkit-box-reflect: revert; -webkit-line-break: revert; -webkit-line-clamp: revert; -webkit-mask-box-image: revert; -webkit-rtl-ordering: revert; -webkit-ruby-position: revert; -webkit-tap-highlight-color: revert; -webkit-text-combine: revert; -webkit-text-decorations-in-effect: revert; -webkit-text-fill-color: revert; -webkit-text-security: revert; -webkit-text-stroke: revert; -webkit-user-drag: revert; white-space-collapse: revert; widows: revert; width: revert; will-change: revert; word-break: revert; word-spacing: revert; x: revert; y: revert; z-index: revert; }

.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: 0px; }

.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, 95%, 52%)); }

.dfd-root a:hover, .dfd-root a:focus { color: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); }

.dfd-root a:active { color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); }

.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: 0.6; cursor: not-allowed !important; }

.dfd-root path[fill="none"] { fill: none !important; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; border: 0px !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: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }

.dfd-backdrop { position: absolute; inset: 0px; z-index: -1; background-color: rgb(0, 0, 0); opacity: 0; transition: opacity var(--df-layer-animation-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block !important; }

.dfd-root.dfd-animate .dfd-backdrop { opacity: 0.75; }

.df-b { display: inline-block; flex: 0 1 auto; }

.df-b-img { width: 100%; height: auto; border: 0px; margin: 0px auto; }

.dfd-branding { width: 69.5px; height: 8px; background: url("//cdn.doofinder.com/media/images/doofinder-logo-horizontal-black-sm.svg") center center / contain no-repeat rgba(0, 0, 0, 0); text-indent: -9999px; overflow: hidden; opacity: 0.3; display: inline-block !important; }

.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-sort-button:hover { text-decoration: underline; }

.dfd-sort-dropdown-modal { position: absolute; display: flex; flex-direction: column; border-radius: 4px; border-width: 1px; border-style: solid; border-color: var(--df-neutral-outline, hsl(204, 2%, 80%)); background: rgb(255, 255, 255); z-index: 2; box-shadow: rgba(49, 36, 133, 0.04) 0px 6px 20px 0px; right: 0px; max-width: 33%; }

.dfd-sort-option { padding: 10px 0px; align-items: center; margin: 0px 10px; }

button.dfd-sort-option-button { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

button.dfd-sort-option-button:focus, button.dfd-sort-option-button:hover { text-decoration: underline; }

.dfd-sort-dropdown-modal .dfd-sort-option:not(:last-child) { border-bottom: 1px solid var(--df-neutral-outline, hsl(204, 2%, 80%)); }

.dfd-sort-label { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dfd-suggestion-button { --dfd-btn-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); --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%, 46%)); --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%, 46%)); --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); padding-right: 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: 0px; }

.dfd-suggestion-button > button:not(:last-child) { border-right-width: 0px; }

.dfd-suggestion-button > button.dfd-is-action:focus-visible { background-color: var(--dfd-btn-hover-bg); border-color: var(--dfd-btn-hover-border-color); color: var(--dfd-btn-hover-color); }

.dfd-suggestion-button > button.dfd-is-action:focus-visible svg { fill: var(--dfd-btn-hover-color); }

.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: 0px; }

.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%, 46%)); }

.dfd-suggestion-link > a { text-decoration: none; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); }

.dfd-suggestion-link > a:visited { color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); }

.dfd-suggestion-link > a:hover { text-decoration: underline; color: var(--df-neutral-high-contrast, hsl(204, 2%, 20%)); }

.dfd-cart-add-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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, 95%, 52%)); }

.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, 95%, 52%)); --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, 95%, 52%)); --dfd-btn-active-bg: var(--df-accent-secondary-active, hsl(204, 2%, 36%)); --dfd-btn-active-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --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, 95%, 52%)); --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%, 46%)),0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 46%)); }

.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, 95%, 52%)); --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, 95%, 52%)); --dfd-btn-active-bg: var(--df-accent-secondary-active, hsl(204, 2%, 36%)); --dfd-btn-active-border-color: var(--df-accent-on-tertiary, hsl(204, 2%, 98%)); --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --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, 95%, 52%)); --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%, 46%)); }

.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-top-color: ; border-top-style: ; border-top-width: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-right-color: rgba(0, 0, 0, 0); animation: 0.5s linear 0s infinite normal none running rotate360, 0.1s ease 0s 1 normal forwards running exist; }

.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, 95%, 98%)); border-right: 2px solid var(--df-accent-on-primary, hsl(217, 95%, 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: 0px; width: 16px; border-top: 2px solid rgb(255, 255, 255); }

.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%, 46%)); }

@media (hover: hover) {
  .dfd-btn-checkbox:not(.dfd-is-selected):hover { outline: 1px solid var(--df-accent-primary, hsl(217, 95%, 52%)); background-color: var(--df-accent-primary, hsl(217, 95%, 52%)); opacity: 0.5; }
  .dfd-btn-checkbox:not(.dfd-is-selected):focus { outline: 1px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); background-color: rgb(255, 255, 255); }
}

.dfd-btn-checkbox.dfd-is-selected { background-color: var(--df-accent-primary, hsl(217, 95%, 52%)); outline-color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.dfd-btn-checkbox.dfd-is-selected:hover { background-color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.dfd-btn-checkbox.dfd-is-selected:focus { outline: 1px solid var(--df-accent-primary, hsl(217, 95%, 52%)); }

.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%, 46%)); margin-left: auto; }

.dfd-btn-term-filter::before { flex-shrink: 0; flex-grow: 0; content: ""; display: inline-block; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-radius: 4px; border: 2px solid rgb(255, 255, 255); outline: 1px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); margin-right: 8px; }

@media (hover: hover) {
  .dfd-btn-term-filter:not(.dfd-is-selected):hover::before { outline-color: var(--df-accent-primary, hsl(217, 95%, 52%)); background-color: var(--df-accent-primary, hsl(217, 95%, 52%)); opacity: 0.5; }
}

.dfd-btn-term-filter.dfd-is-selected::before { background-color: var(--df-accent-primary, hsl(217, 95%, 52%)); outline-color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.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: rgb(255, 255, 255) solid 1px; border-radius: 50%; }

.dfd-filter-color-circle[data-color="multicolor"] { background: conic-gradient(from 90deg, rgb(50, 220, 132), rgb(222, 215, 64), rgb(226, 82, 85), rgb(211, 40, 183), rgb(42, 103, 237), rgb(35, 227, 175)); }

.dfd-filter-color-circle[data-color="undefined"]::after { position: absolute; left: 50%; content: " "; display: block; height: 100%; width: 1px; background-color: rgb(238, 61, 76); transform-origin: center center; transform: rotate(45deg); }

.dfd-filter-color-circle::before { content: ""; display: none; position: absolute; inset: -5px; border: 2px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); 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: 0.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%, 46%)); 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; inset: -5px; border: 2px solid var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); 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: 0.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%, 46%)); 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: 0px; 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%, 46%)); --dfd-btn-hover-color: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --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, 95%, 47%)); --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%, 46%)); --dfd-btn-font-size: 14px; --dfd-btn-width: fit-content; --dfd-btn-height: 40px; --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, 95%, 42%)); 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, 95%, 42%)); }
}

.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,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" height=\"16px\" width=\"16px\"><path d=\"M24 30.75 12 18.75 14.15 16.6 24 26.5 33.85 16.65 36 18.8Z\"/></svg>"); background-repeat: no-repeat; background-position: center center; transform: rotate(0deg); transition: transform 0.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: 0.5; }

.dfd-close-button:hover, .dfd-close-button:focus, .dfd-close-button:active { opacity: 0.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 center; }

.dfd-close-button:focus-visible { border-radius: 4px; }

.dfd-back-to-top-button { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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%, 46%)); --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%, 46%)); --dfd-btn-active-border-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); --dfd-btn-disabled-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); --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, 95%, 52%)); --dfd-btn-bg: transparent; --dfd-btn-border-color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-hover-color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); }

.dfd-smart-filters-toggle-btn { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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, 95%, 52%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.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, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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, 95%, 52%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --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: 0px !important; }

@media (hover: hover) {
  .dfd-clear-filters-button { margin-top: 4px !important; }
  .dfd-clear-filters-button:focus-visible { border-radius: 4px; }
}

label.dfd-image-search-button { position: relative; overflow: hidden; }

label.dfd-image-search-button input[type="file"] { position: absolute; top: 0px; left: 0px; 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-top-color: ; border-top-style: ; border-top-width: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-right-color: rgba(0, 0, 0, 0); animation: 0.5s linear 0s infinite normal none running rotate360, 0.1s ease 0s 1 normal forwards running exist; }

.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(16, 105, 249, 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(16, 105, 249, 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: 0px; justify-content: flex-start; }

.dfd-category-term .dfd-btn-term-filter > :last-child { margin-left: 0px; }

.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: rgb(0, 0, 0); }

.dfd-category-term .dfd-btn-icon:hover, .dfd-category-term label.dfd-image-search-button:hover, .dfd-category-term .dfd-btn-icon:focus, .dfd-category-term label.dfd-image-search-button:focus { stroke-width: 4px; }

.dfd-category-term.dfd-is-selected { --dfd-btn-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-hover-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-active-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-color: var(--df-accent-on-primary, hsl(217, 95%, 98%)); --dfd-btn-disabled-bg: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-color: var(--df-accent-on-primary, hsl(217, 95%, 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, 95%, 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, 95%, 98%)); }

.dfd-category-breadcrumbs { list-style: none; padding: 0px; margin: 0px; }

.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 { display: flex; flex-direction: column; padding: 24px; height: 100%; 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; position: relative !important; }

@media (hover: hover) {
  .dfd-card:hover { border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 95%, 52%)); }
  .dfd-card:focus-visible { box-shadow: 0 0 0 2px var(--df-neutral-surface, hsl(204, 2%, 100%)),0 0 0 4px var(--df-accent-tertiary, hsl(204, 2%, 20%)); outline: none; }
}

@media (hover: none) {
  .dfd-card:active > * { opacity: 0.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, 95%, 52%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 95%, 52%)); background: rgba(66, 133, 244, 0.1); }

.dfd-card-link { position: static; overflow: visible; filter: none; display: block !important; 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; inset: 0px; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); }

.dfd-card-media { flex: 0 0 auto; padding: 0px; overflow: hidden; border-radius: 0px; }

.dfd-card-thumbnail { display: block; overflow: hidden; z-index: 0; position: relative; width: 100%; height: 0px; 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: 0px; left: 0px; }

.dfd-card-thumbnail-404 { background-color: rgb(245, 245, 245); 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; justify-content: space-between; align-items: center; margin-top: 12px; }

.dfd-card-content { flex: 0 0 auto; display: flex; flex-flow: column; justify-content: flex-start; padding: 0px; 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.0178571em; opacity: 0.8; }

.dfd-card-preset-product .dfd-card-description { display: none; }

.dfd-card-flags { position: absolute; top: 8px; left: 0px; right: 0px; display: flex; flex-flow: row; z-index: 2; }

.dfd-card-flags .dfd-flags-container { width: 100%; display: flex; }

.dfd-card-flags .dfd-flags-container > div { padding: 4px 6px; font-size: 12px; }

.dfd-card-flags .dfd-flags-container.with-similar-products { gap: 5px; flex-direction: column; }

.dfd-card-flags [data-availability] { padding: 4px 6px; font-size: 12px; margin-right: auto; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.dfd-card-flags .with-similar-products > [data-availability] { margin-right: 0px; margin-left: auto; border-radius: 4px 0px 0px 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%, 46%))); }

.dfd-card-flags [data-discount] { padding: 4px 6px; font-size: 12px; 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-flags .dfd-card-flag { align-content: center; }

.dfd-similar { position: absolute; z-index: 2; }

button.dfd-similar { color: rgb(118, 122, 123); width: auto; height: fit-content; padding: 0px; align-items: start; margin-left: 10px !important; z-index: 2 !important; }

button.dfd-similar:hover { color: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px 3px; }

button.dfd-similar svg { margin-top: 0.4rem; }

button.dfd-similar.highlighted { color: rgb(0, 0, 0); transform: scale(1.1); border-radius: 10%; }

button.dfd-similar.highlighted svg { fill: currentcolor; }

.dfd-card-flex { flex: 1 1 auto; min-height: 0px; }

.dfd-card-flex:empty { display: block !important; }

.dfd-card-pricing { display: flex; flex-flow: 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: 0px; }

.dfd-card-price--sale { order: 1; font-weight: bold; color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.dfd-card-price--sale ~ .dfd-card-price { color: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); font-weight: normal; text-decoration: line-through; }

.dfd-card-select-quantity { 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; position: relative !important; }

.dfd-card-select-quantity input[type="number"]::-webkit-inner-spin-button, .dfd-card-select-quantity input[type="number"]::-webkit-outer-spin-button { appearance: none; }

.dfd-card-select-quantity input[type="number"] { appearance: textfield; }

.dfd-card-select-quantity form { z-index: 2; margin-bottom: 0px; box-shadow: 0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 46%)); max-height: 40px; }

.dfd-card-select-quantity form input { text-align: center; width: 100%; height: 40px; border: 0px; }

.dfd-card-select-quantity input { z-index: 2; margin-bottom: 0px; box-shadow: 0 0 0 1px var(--df-accent-secondary, hsl(204, 2%, 46%)); max-height: 40px; text-align: center; width: 100%; height: 40px; margin-right: 2px; border: 0px; }

.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, 95%, 52%)); --dfd-btn-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-color: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-hover-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-hover-border-color: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-active-color: var(--df-accent-primary-hover, hsl(217, 95%, 47%)); --dfd-btn-active-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-active-border-color: var(--df-accent-primary-active, hsl(217, 95%, 42%)); --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-bg: var(--df-neutral-surface, hsl(204, 2%, 100%)); --dfd-btn-disabled-border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --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; inset: 0px; z-index: 3; display: grid; grid-template-rows: min-content 1fr; backdrop-filter: blur(2px); background-color: rgba(255, 255, 255, 0.75); border-width: 2px; border-style: solid; border-radius: 4px; border-color: var(--df-accent-primary, hsl(217, 95%, 52%)); box-shadow: 0 0 0 1px var(--df-accent-primary, hsl(217, 95%, 52%)); 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; 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%, 46%)); --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%, 46%)); --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; content: " "; height: 40px; width: 1px; margin-left: auto; margin-right: auto; left: 0px; right: 0px; 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: 0px; 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; --dfd-btn-font-size: 14px; --dfd-btn-width: 18px; --dfd-btn-height: 18px; --dfd-btn-padding-x: 0; --dfd-btn-border-radius: 6px; background-color: rgba(0, 0, 0, 0); border: none; top: 8px !important; right: 8px !important; }

.dfd-carousel { display: flex; flex-flow: row; 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 0.125s ease-in; }

.dfd-carousel-arrow:hover { opacity: 0.8; }

.dfd-carousel-arrow svg { flex: 0 0 auto; width: 40px; height: 40px; fill: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.dfd-carousel-content { display: flex; flex-flow: row; justify-content: flex-start; flex: 1 1 auto; padding: 4px; overflow-x: scroll; 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: 0px; margin-right: 0px; 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: 0px; margin: 0px; }

.dfd-facet + .dfd-facet { margin-top: 32px; }

.dfd-facet-title { display: flex; flex-flow: row; justify-content: space-between; align-items: center; padding: 0px; margin: 0px; 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,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" height=\"32px\" width=\"32px\"><path d=\"M24 30.75 12 18.75 14.15 16.6 24 26.5 33.85 16.65 36 18.8Z\"/></svg>"); background-repeat: no-repeat; background-position: center center; transform: rotate(0deg); transition: transform 0.125s ease-out; margin-left: 8px; }

.dfd-facet-collapsed .dfd-facet-title::after { transform: rotate(-180deg); }

.dfd-facet-collapsed .dfd-facet-content { margin: 0px !important; }

.dfd-facet-layout-grid, .dfd-facet-layout-grid-with-label { margin: 12px 0px 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(0px, 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(0px, 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; justify-content: space-between; align-items: center; 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: 0px; --dfd-btn-bg: transparent; --dfd-btn-border-color: transparent; --dfd-btn-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-hover-bg: transparent; --dfd-btn-hover-border-color: transparent; --dfd-btn-hover-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-active-bg: transparent; --dfd-btn-active-border-color: transparent; --dfd-btn-active-color: var(--df-accent-primary, hsl(217, 95%, 52%)); --dfd-btn-disabled-bg: transparent; --dfd-btn-disabled-border-color: transparent; --dfd-btn-disabled-color: var(--df-accent-primary, hsl(217, 95%, 52%)); }

.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: 0px; }

.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; height: 80px; }

.dfd-guided-filters-card span { display: inline-flex; align-items: center; justify-content: center; padding: 0px 24px; }

.dfd-guided-filters .dfd-close-button { position: absolute; top: 0px; right: 0px; }

.dfd-guided-filters .dfd-close-button::before { transform: scale(0.5); }

.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: 0px; height: var(--dfd-icon-size); line-height: var(--dfd-icon-size); padding: 0 calc(var(--dfd-icon-size)/2); margin: 0px; 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; justify-content: space-between; align-items: center; font-size: 14px; white-space: nowrap; line-height: 32px; }

.dfd-meta > * { flex: 0 0 auto; }

@media (hover: hover) {
  .dfd-meta { padding-top: 4px; }
}

.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, 95%, 52%)); text-align: center; white-space: nowrap; overflow: hidden; transition: width 0.6s; }

.dfd-pagination { display: flex; flex-flow: column; 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: 0px; 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))); float: none; }

[data-dfd-role="scroll-sentinel"], [data-dfd-role="scroll-top-sentinel"] { z-index: -1; background-color: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); opacity: 0; display: block !important; }

[data-dfd-role="scroll-sentinel"] { position: relative; width: 100%; height: 600px; margin-top: -300px; }

[data-dfd-role="scroll-top-sentinel"] { position: absolute; left: 0px; right: 0px; 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-cart-add-button, .dfd-card-row[data-quantity-pinned="true"] .dfd-cart-add-button { display: none; }

.dfd-card-row[data-status="quantity"] .dfd-card-select-quantity, .dfd-card-row[data-quantity-pinned="true"] .dfd-card-select-quantity { display: flex; }

.dfd-card-row[data-status="quantity"] .dfd-card-selector, .dfd-card-row[data-quantity-pinned="true"] .dfd-card-selector { display: none; }

.dfd-card-row[data-quantity-pinned="true"] { display: block; }

.dfd-card-row[data-quantity-pinned="true"] .dfd-card-pricing { flex-direction: row; margin-bottom: 12px; }

.dfd-card-row[data-status="quantity"] .dfd-card-pricing { display: none; }

.dfd-searchbox { position: relative; display: flex; flex-flow: row; justify-content: space-between; padding: 0px; margin: 0px; background-color: rgb(255, 255, 255); border: 0px; 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; align-items: center; gap: 4px; }

.dfd-searchbox-main { flex: 1 1 auto; position: relative; }

.dfd-searchbox-input { overflow: visible; appearance: none; position: relative; z-index: 1; display: block; min-width: 0px; margin: 0px; width: 100% !important; height: 100% !important; border-width: 0px !important; border-radius: 0px !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; align-items: center; white-space: nowrap; overflow: hidden; position: absolute; inset: 0px; z-index: 0; color: var(--df-neutral-low-contrast, hsl(204, 2%, 80%)); }

.dfd-searchbox-input, .dfd-searchbox-autocomplete { font-family: inherit; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; letter-spacing: inherit; padding: 0px 0px 0px 4px !important; }

.dfd-slider { padding: 48px 24px; font-size: 14px; --df-slider-color-primary: var(--df-accent-primary, hsl(217, 95%, 52%)); --df-slider-color-secondary: var(--df-neutral-surface, hsl(204, 2%, 100%)); --df-slider-color-tertiary: var(--df-neutral-medium-contrast, hsl(204, 2%, 46%)); --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%, 46%)); --df-slider-color-marker: var(--df-neutral-surface-variant, hsl(204, 2%, 90%)); }

.dfd-slider-target, .dfd-slider-target * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; user-select: none; 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: 0px; right: 0px; height: 100%; width: 100%; transform-origin: 0px 0px; transform-style: flat; }

.dfd-slider-txt-dir-rtl.dfd-slider-horizontal .dfd-slider-origin { left: 0px; right: auto; }

.dfd-slider-vertical .dfd-slider-origin { top: -100%; width: 0px; }

.dfd-slider-horizontal .dfd-slider-origin { height: 0px; }

.dfd-slider-handle { backface-visibility: hidden; position: absolute; }

@media (hover: hover) {
  .dfd-slider-handle:focus-visible { box-shadow: 0 0 0 2px var(--df-neutral-surface, hsl(204, 2%, 100%)),0 0 0 4px var(--df-accent-tertiary, hsl(204, 2%, 20%)); outline: none; }
}

.dfd-slider-touch-area { height: 100%; width: 100%; }

.dfd-slider-state-tap .dfd-slider-connect, .dfd-slider-state-tap .dfd-slider-origin { transition: transform 0.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 * { 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 0px 0px; height: 80px; top: 100%; left: 0px; width: 100%; }

.dfd-slider-value-horizontal { transform: translate(-50%, 75%); }

.dfd-slider-rtl .dfd-slider-value-horizontal { 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 { transform: translate(-50%, 0px); 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 { transform: translate(50%, 0px); 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; justify-content: space-between; align-items: center; padding: 8px 16px 0px; }

.dfd-range-input-group input { flex: 1 1 auto; min-width: 0px; margin: 0px; padding: 0px 0px 0px 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; min-height: 0px; overflow: hidden; }

.dfd-tabs-nav { flex: 0 0 auto; display: flex; padding: 0px; margin: 0px; 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%, 46%)); 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, 95%, 52%)); }

.dfd-tabs-item:first-child { margin-left: 0px; }

.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: 0.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: 4s ease 0s infinite normal both running recording; }