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

Broste Copenhagen, Seite 2

Limfjord Trinkglas

Amy Kerzenhalter

Sletten Löffel

Ruby Wandspiegel

Vig Auflaufform

Nordic Marsh Teller

Salt Tasse mit Untertasse

Edgar Salz-/Pfeffermühle

Twist Glossy Kerzen

Elouise Tischläufer

Hekla Kerzenhalter

Karen Kissenbezug

Rillo Beistelltisch

Heli Kerzenhalter

Gracie Serviette

Nordic Vanilla Salatschale

Hector Vase

Yuki Teppich

Mie Kerzentablett

Ina Kissenbezug

Marina Mörser mit Stößel

Botanical Duftkerze

Lulu Wandspiegel

Nordic Vanilla Butterdose

Silke Kerzenständer

Nordic Sand Teekanne

Nordic Sand Schale

Twist Kerzen

Gracie Tischdecke

Annabella Blumentopf

Nordic Vanilla Servierplatte

Nordic Sand Teller

Nordic Vanilla Schale

Folke Geschirrtuch

Emmy Rattan Korb

Complete Spiegel

Kollektionen

Broste Copenhagen - Nordic

Broste Copenhagen - Christmas

Ähnliche Kategorien

Beliebte Produkte

Beliebte Kollektionen

Beliebte Kategorien

Beliebte Marken