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

Star Aluminium Stuhl

Strand gesteppte Matratze

Bon Accessoires Tablett

Amfora Dekovase

Bubble - 2 in 1 Vase & Kerzenhalter

Alas Vase

Tilka Windlicht

Beetle Dining Stuhl Outdoor

Bouquet Tischleuchte LED

Huri Vase

OPAL Tablett

Chiquito Tablett

A-Café Outdoor Tisch

Silhouette Glasvase

Asteria Move Mini LED Tischleuchte

Cero Beistelltisch

South Gartenarmlehnstuhl

Billy Vase

x Liberty Jellies Family Tablett

Farol Mini LED Akkuleuchte

Cobra Vase

Les Femmes Vase

WeinLicht

Marlon Windlicht

Roza Blumentopf

Sphere Vase Square Large

Hana Vase

Vera Wendeteppich 2.0

Pflanztopf mit Untersetzer

Atelier Glasvase

Ilda Wendeteppich

Yara Vase

Ball Portable Tischleuchte

Yard Stuhl

RE Air Armchair

Bird Table

Ähnliche Kategorien

Beliebte Produkte

Beliebte Kollektionen

Beliebte Kategorien

Beliebte Marken