/* ========================================================================== Bloomreach Loomi AI search widget — custom_css (Theme editor → Search template → bloomreach_loomi_ai_search_widget block) Merged 2026-08-04: this is Arya's facet/drawer redesign (accordion-style facet rows, dropdown panel, price slider, drawer body) combined with the product-card work done in the "bloomreach product card" chat session (variant swatches, selected-swatch state, overflow-count button, secondary-image hover swap, mobile sizing). Everything lives inside a shadow root, so var(--color-*) / var(--font-*) still work because CSS custom properties inherit through shadow boundaries — this pulls the theme's live color scheme and font instead of hardcoding values. NOTE: the ":host([data-br-autosuggest]) ..." exception rule from that chat is intentionally NOT duplicated here — it only matters for the header's native-search autosuggest fallback, which is styled via the separate `settings.bloomreach_shadow_css` theme setting + the JS injector in layout/theme.liquid, not this app-block custom_css (this block only renders on the dedicated Search template). If Bloomreach ever renders autosuggest through this same block, bring that rule over. ========================================================================== */ /* ---- Product card (unchanged from current setting) ---- */ .br-product-card__image{ aspect-ratio: 1; border-radius: 15px; overflow: hidden; position: relative; } .br-product-card__image img{ position: relative; z-index: +1; mix-blend-mode: darken; } .br-product-card__image::before{ content: ""; position: absolute; width: 100%; height: 100%; background: #fafafa; } .br-product-card:hover .br-product-card__image img{ transform: unset; } .br-product-card:hover { box-shadow: unset; transform: unset; } .br-product-card__price{ margin: 0; font-size: 14px; font-weight: bold; } .br-product-card__title{ line-height: normal; font-size: 14px; font-weight: 400; min-height: unset; margin-bottom: 4px !important; } .br-product-card__brand{ font-size: 14px; font-weight: 700; color: black; line-height: normal; text-transform: unset; letter-spacing: unset; } .br-product-card__info{ padding-inline: 0; } .br-product-card__add-to-cart{ display: none; } .br-pagination__page--active{ color: black !important; } .br-pagination__button, .br-pagination__page{ transition: unset; border: 0 !important; } .br-toolbar__filters-drawer-close{ padding: 0 !important; } @media (min-width: 1280px){ .br-products__grid{ grid: auto-flow dense / repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; } .br-product-card{ max-width: unset; } } /* ---- Product card variants / swatches / secondary image ---- Added in the "bloomreach product card" chat session — variant swatch row, selected-swatch state, the "+N more" overflow button, and the secondary-image hover swap (Bloomreach ships a second inside .br-secondary-img with inline style="display:none"; we flip that and hide the primary image on hover). See that chat for the reasoning behind each rule, in particular why the hide-primary rule uses the ">" direct-child combinator (it must not also hide the secondary img, which is nested one level deeper). */ .br-product-card__variants{ margin: 0; min-height: 30px; margin-bottom: 9px; gap: 7px; } .br-product-card__variant-swatch{ width: 30px; height: 30px; border-radius: 8px; border: 0 !important; position: relative; overflow: visible; } .br-product-card__variant-swatch::after{ content: ''; width: calc(100% + 7px); height: 100%; position: absolute; top: 0; left: 0; display: block; border-radius: 0; border: 0; box-sizing: content-box; pointer-events: auto; } .br-product-card__variant-swatch--selected{ border: 1px solid var(--variant-border-color); } .br-product-card__variants-overflow{ width: 30px; height: 30px; border-radius: 8px; border: .5px solid black; font-size: 10px; font-weight: 500; } .br-secondary-img{ position: absolute; top: 0; left: 0; width: 100%; } .br-product-card:hover .br-secondary-img, .br-product-card:hover .br-secondary-img img{ display: block !important; } .br-product-card:hover .br-product-card__image.br-product-card__image--has-image:not(.br-onlyone-img) > img{ display: none !important; } @media screen and (max-width: 767.98px) { .br-product-card__variants{ gap: 6px; min-height: 18px; } .br-product-card__variant-swatch{ width: 18px; height: 18px; min-width: 18px; min-height: 18px; border-radius: 4px; } .br-product-card__variants-overflow{ width: 18px; height: 18px; min-width: 18px; min-height: 18px; border-radius: 4px; font-size: 8px; padding: 0; } } /* ---- Facet row — now that bloomreach-facets-drawer.js reparents every br-facet into the native drawer (full-width, stacked), style the header like the theme's own accordion row (accordion-details__summary): full width, bottom divider only, no pill/border-box, padding-block 1.6rem — instead of the old horizontal chip look. ---- */ .br-sorting__trigger, .br-facet__header { display: flex !important; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; padding-block: 1.6rem; padding-inline: 0; background: transparent !important; color: rgb(var(--color-foreground)); border: none !important; border-radius: 0; cursor: pointer; transition: border-color 0.3s; padding: initial !important; min-height: 74px; } .br-sorting__trigger:hover, .br-facet__header:hover { border-color: rgb(var(--color-foreground)); } .br-facet__title { color: rgb(var(--color-foreground)) !important; font-family: var(--font-body-family); font-weight: 700; font-size: 1.4rem !important; } .br-facet__arrow { filter: none !important; width: 1.6rem !important; height: 1.6rem !important; transition: transform 0.3s; svg{ display: none !important; } &::after{ content: url('data:image/svg+xml,'); width: 1.6rem; height: 1.6rem; display: block; } } .br-facet__arrow svg path { fill: rgb(var(--color-foreground)); } /* Open/expanded state — confirmed from live devtools inspection: Bloomreach adds/removes an "br-facet__arrow--open" modifier class on the arrow span itself (nothing on the header or host element), so that's the one reliable hook we have for "is this facet open". */ .br-facet:has(.br-facet__arrow--open) .br-facet__header { border-color: rgb(var(--color-foreground)); } .br-facet__arrow--open { transform: rotate(180deg); } /* If a br-facet is ever used outside the drawer again (e.g. you keep one inline on desktop), restore the bordered pill look with this class — not applied automatically. */ .br-facet--pill .br-facet__header { width: auto; height: 4.4rem; padding-inline: 1.6rem; border: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1)); border-radius: var(--inputs-radius, 0); } /* ---- Facet dropdown panel (checkbox list) ---- Confirmed from live devtools inspection of an opened "Kleur" facet: .br-facet__dropdown only exists in the DOM while open (Bloomreach adds/ removes it, rather than just hiding it), and it renders as a normal sibling after .br-facet__header inside the same .br-facet host — so forcing it to position: static makes it push the layout down in place instead of floating as an absolute popover. That's what gives the native accordion "expand and push everything else down" behavior. */ .br-facet__dropdown { position: static !important; width: 100% !important; box-sizing: border-box; background: transparent; border: none !important; box-shadow: none !important; border-radius: 0; padding: 0.4rem 0 1.6rem; font-family: var(--font-body-family); display: flex; flex-direction: column; gap: 0.2rem; max-height: 32rem; overflow-y: auto; margin-top: 0 !important; margin-bottom: 24px !important; } .br-facet__option { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; padding: 0 12px 12px 0 !important; border: 0 !important; } .br-facet__option:hover{ background-color: unset !important; text-decoration: underline; text-underline-offset: 4px; } .br-facet__option-content { display: flex; align-items: center; justify-content: space-between; flex-grow: 1; gap: 0.8rem; } .br-facet__option-name { color: rgb(var(--color-foreground)); font-size: 1.4rem !important; } .br-facet__option-count { color: rgba(var(--color-foreground), 0.5); font-size: 1.3rem; } .br-facet__checkbox { accent-color: rgb(var(--color-foreground)); width: 2rem !important; height: 2rem !important; flex-shrink: 0; cursor: pointer; } .br-facet__show-more { color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: 0.3rem; font-size: 1.3rem; background: none; border: none; cursor: pointer; } .br-facet__search-input { border: 0.1rem solid rgba(var(--color-border), var(--color-border-alpha, 1)); border-radius: var(--inputs-radius, 0); padding: 0.8rem 1.2rem; font-family: var(--font-body-family); } /* ---- Price / range slider facet ---- Confirmed from live devtools inspection: Bloomreach already handles the dual-thumb stacking/interaction itself (two overlapping range inputs + a rail div), so this only reskins colors/spacing rather than touching position/z-index — safer than guessing at the layout mechanics it already has working. */ .br-slider-facet__container { padding-block: 1.6rem; border-bottom: .1rem solid rgba(var(--color-border),var(--color-border-alpha, 1)) !important; font-family: var(--font-body-family); } .br-slider-facet__title { color: rgb(var(--color-foreground)) !important; font-weight: 700; font-size: 1.4rem !important; margin-bottom: 3rem !important; } .br-slider-facet__rail { background: rgba(var(--color-foreground), 0.15) !important; } .br-slider-facet__range-input { accent-color: rgb(var(--color-foreground)); } .br-slider-facet__range-input::-webkit-slider-thumb { background: rgb(var(--color-foreground)) !important; border: none !important; } .br-slider-facet__range-input::-moz-range-thumb { background: rgb(var(--color-foreground)) !important; border: none !important; } .br-slider-facet__range-input::-webkit-slider-runnable-track, .br-slider-facet__range-input::-moz-range-track { background: transparent !important; } .br-slider-facet__values { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; } .br-slider-facet__value-display { color: rgb(var(--color-foreground)); font-size: 1.3rem; background: rgba(var(--color-foreground), 0.05); padding: 0.4rem 0.8rem; border-radius: var(--inputs-radius, 0); } /* ---- "All filters" overflow drawer body (the block you pasted) ---- Gives the drawer content itself the same look as the facet body above. */ .br-toolbar__filters-drawer-body { font-family: var(--font-body-family); background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); } .br-facet{ border-bottom: .1rem solid rgba(var(--color-border),var(--color-border-alpha, 1)) !important; } .br-product-card__variant-swatch[data-tooltip="#ffffff" i], .br-product-card__variant-swatch[data-tooltip="#fff" i], .br-product-card__variant-swatch[data-tooltip="#ffffe0" i], .br-product-card__variant-swatch[data-tooltip="#fffff0" i], .br-product-card__variant-swatch[data-tooltip="#fafafa" i], .br-product-card__variant-swatch[data-tooltip="#f5f5f5" i], .br-product-card__variant-swatch[data-tooltip="#f0f0f0" i], .br-product-card__variant-swatch[data-tooltip="#f8f8ff" i], .br-product-card__variant-swatch[data-tooltip="#fdf5e6" i], .br-product-card__variant-swatch[data-tooltip="#faf0e6" i], .br-product-card__variant-swatch[data-tooltip="#fff8dc" i], .br-product-card__variant-swatch[data-tooltip="#f5f5dc" i], .br-product-card__variant-swatch[data-tooltip="#ffe4c4" i], .br-product-card__variant-swatch[data-tooltip="#eeeeee" i], .br-product-card__variant-swatch[data-tooltip="#e6e6e6" i] { border: 1px solid #000 !important; } /* ---- DISCOUNT BADGES ---- */ .br-discount-badges{ color: white; background-color: #eb574d; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; white-space: nowrap; font-size: 14px; font-weight: 500; font-style: normal; line-height: 16px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; position: absolute; inset-inline: 1.5rem auto; bottom: 1.3rem; z-index: +1; } .br-availability{ font-weight: 700; font-size: 1.2rem; color: #027A00; display: flex; align-items: center; } .br-availability-indicator{ display: block; width: .6rem; height: .6rem; margin: 0 .7rem 0 0; background: #027A00; border-radius: 50%; } .br-availability.is_in_stock-false{ color: black; } .br-availability.is_in_stock-false .br-availability-indicator{ background: #ffc627; } .br-product-card__price .br-product-card__price-original{ font-size: 12px; line-height: 1; font-weight: 400; color: #858585; } @media (max-width: 767.98px) { .br-discount-badges { font-size: 1.1rem; padding: .2rem .8rem; border-radius: 6px; } } .br-product-card__variants,.br-hidden{display: none !important} .br-product-card__info:not(.in-serp) .br-product-card__price{display: none !important}

Last searches

Fritz Hansen, Seite 2

Clam Stehleuchte

3er Kerzenständer

Planner Regal

Utzon Hocker

Clam Tischleuchte

Egg Fußhocker

Drop Stuhl

Carimate Stuhl

Lily Stuhl

Schaukelpferd

After Armlehnstuhl

Grand Prix Barhocker

After Esstisch, Ø120 cm

Swan Sessel

Serie 7 Leder Sitzkissen

Garderobenständer Coat Tree

Serie 7 Stuhl

Suspence Pendelleuchte

Vico Duo Armlehnenstuhl

KAISER idell 6559-W Wandleuchte

Grand Prix Stuhl

After Sitzpolster für After Armlehnstuhl

Vico Duo Stuhl

Solae LED-Tischleuchte

FH3605 Schreibtisch

Kollektionen

Fritz Hansen – Serie 7

Fritz Hansen – Kaiser Idell

Fritz Hansen – Ant

Ähnliche Kategorien

Beliebte Produkte

Beliebte Kollektionen

Beliebte Kategorien

Beliebte Marken