/* ========================================================================== 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

Balkon, Seite 21

Übertopf Recycelt

Henning Koppel Vase

Traverse Outdoor Hocker

Maximo Tavolino 70 Maxi Beistelltisch

Apero Outdoor Armlehnstuhl

Tuck Bodenvase

Oasis Pflanztopf

Kintbury Stuhl

Last Order LED Tischleuchte

Flower Vase

Selbstbewässernder Orchideentopf

Bloom Vase

Svea Teppich

Hector Vase

Alfredo Glasvase

Terrazzo Vase

Story Krug

Forma Glasvase

Regie Aluminium Sessel

Star Aluminium Armlehnenstuhl

Urban Stuhl

Valkea Teelichthalter

Sphere LED Outdoor Akkuleuchte

Hatto Akku Tischleuchte LED

Sixties Stuhl

Lucca SC51 Portable Akku LED Outdoor-Leuchte

LIUM Portable Tischleuchte

Glacies Vase

High Glasvase

Flames Feuerschale

Verde Lanza Vase

Fab Vase

Bistro Klappstuhl Duraflon

Serviertablett

Earth Vase

Fußmatte door-line 58 × 36 cm

Ähnliche Kategorien

Beliebte Produkte

Beliebte Kollektionen

Beliebte Kategorien

Beliebte Marken