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

Oslo Marmor Tablett

Tapas Brett

Marmor Tablett

Ratio Laterne

Clip Wandkerzenhalter

Kumo Laterne

Rivi Tablett

Boo Wendeteppich

Liva Vase

Nium Vase

Milan Terrazzo Tablett

Chubby Pflanzentopf

Sphere Vase Square Mini

Fisch Vase

Globus Laterne

Alcoa Vase

Way Outdoor Kissen

Fenster-Futterstelle

Umbra - Triflora Blumenampel

Bobby Vase

Teelichthaus Nyhavn

Hydraulic Vase

Vogeldach "just for birds"

19 Outdoors Hocker

Round Armlehnstuhl

Brura Vase

Globe Bubbles Teelichthalter

Cast Brenner

Okra Vase

Plis Vase

Luonto Kräutertopf

SunLight Bell Solarleuchte

Soft Spot Solar Akku-Dots

Porti LED Akku Tischleuchte

Tiny Vase

Waves Vase

Ähnliche Kategorien

Beliebte Produkte

Beliebte Kollektionen

Beliebte Kategorien

Beliebte Marken