(Breakdance richtext emits `
`) must not carry the paragraph's bottom margin. */ .bss-richtext li > p { margin: 0; } /* Headings inside rich text (h2 section / h3 sub-section / h4). `body.breakdance` prefix beats BD-core's `.breakdance hN` (0,1,1) defaults — see [[feedback_bd_core_specificity_trap]]. Top margins give visible breathing room between sections; first-child resets so the block doesn't push down from its container's top edge. */ body.breakdance .bss-richtext h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--neutral-900); /* 2.5rem above (section break) · 1.5rem below to the sub-heading (figma). */ margin: 2.5rem 0 1.5rem; } /* The bold lead line right after a section h2 (e.g. "30-day return window") sits 0.75rem above its body copy — half the normal paragraph gap (figma). */ body.breakdance .bss-richtext h2 + p { margin-bottom: 0.75rem; } body.breakdance .bss-richtext h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--neutral-900); margin: 1.75rem 0 0.5rem; } body.breakdance .bss-richtext h4 { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--neutral-900); margin: 1.25rem 0 0.5rem; } /* First heading in the block hugs the top — no extra padding before it. */ body.breakdance .bss-richtext > h2:first-child, body.breakdance .bss-richtext > h3:first-child, body.breakdance .bss-richtext > h4:first-child { margin-top: 0; } /* Intro rich-text blocks reuse the large lead/intro look of the page they sit on (Returns / Shipping / FAQs contact-intro, Privacy / About / Safety info-lead) — the wrapper sets size, inner
inherits it. */ .bss-contact-intro-rich { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--neutral-900); } .bss-contact-intro-rich p { margin: 0 0 0.25rem; } .bss-contact-intro-rich p:last-child { margin-bottom: 0; } .bss-contact-intro-rich .bss-muted { color: var(--neutral-300); } .bss-info-lead-rich { /* figma "Desktop/Heading 5" — 24px/600/neutral-900, full 933 column, left-aligned (the lead sits at the content column's left edge, not a narrow centered block). */ font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--neutral-900); max-width: 58.375rem; } .bss-info-lead-rich p { margin: 0 0 0.5rem; } .bss-info-lead-rich p:last-child { margin-bottom: 0; } /* The FAQ answer cell is a rich-text block — keep its muted answer colour (figma .faq-item__a) and drop the default rich-text paragraph margin so a single-paragraph answer hugs the question. */ .bss-faq-item__a.bss-richtext { color: var(--neutral-400); } /* Work at Height section body as rich text — preserve the figma 16px muted look; first/last paragraph collapse handled by the shared rule above. */ .bss-wah-section__body.bss-richtext { color: var(--neutral-500); } /* =========================================================================== REQUEST A QUOTE — popup chrome --------------------------------------------------------------------------- The QuoteForm element lives inside a native breakdance_popup (post 58). BD's `design.popup.*` settings are unreliable when set programmatically (catalog doc 09), so the modal chrome — dimmed overlay + centered white card — is supplied here as SCOPED CSS keyed on the form root class `.bss-quote-form`. This lives in a normal global stylesheet (not the element's default.css) to avoid Breakdance's compile-dedup leak that can drop ancestor selectors declared inside an element's default.css. Popup DOM (from the rendered product page): .bde-popup ← outer overlay (we dim + center here) .breakdance-popup ← the card (we size + round here) .breakdance-popup-content ← inner padding box (scroll container) .bss-quote-form ← the element root .breakdance-popup-close-button ← BD's native close X (hidden; the in-card header X handles close) =========================================================================== */ /* Outer overlay — dim + blur + center the card. :has() scopes this to ONLY the quote popup, never any other breakdance_popup on the site. */ body.breakdance .bde-popup:has(.bss-quote-form) { position: fixed; inset: 0; background: rgba(11, 11, 12, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; } /* The card — fixed max-width per figma `.quote-modal` (43.5rem = 696px), rounded, scroll-capped. Neutralizes any absolute positioning BD may set. */ body.breakdance .bde-popup:has(.bss-quote-form) .breakdance-popup { position: relative; width: 100%; max-width: 43.5rem; max-height: 90vh; margin: 0; left: auto; right: auto; top: auto; bottom: auto; transform: none; background: var(--neutral-0); border-radius: var(--radius); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); overflow: hidden; display: flex; flex-direction: column; } /* Inner content box — no BD padding (the modal supplies its own header/body/ footer padding); it is the flex column that lets the body scroll. */ body.breakdance .bde-popup:has(.bss-quote-form) .breakdance-popup-content { padding: 0; background: transparent; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* The form root is the card's flex column (header / step body / footer). */ body.breakdance .bde-popup:has(.bss-quote-form) .bss-quote-form { flex: 1 1 auto; min-height: 0; } /* The modal supplies its own header-X — suppress BD's native close button. */ body.breakdance .bde-popup:has(.bss-quote-form) .breakdance-popup-close-button { display: none; } /* Mobile — the modal takes over the whole screen so the user has zero page distraction while building a quote. The card is pinned edge-to-edge and runs as a full-height flex column: header pinned top, footer pinned bottom, body scrolls internally. */ @media (max-width: 640px) { /* Overlay covers the entire viewport — no padding, nothing peeks through. dvh tracks the dynamic mobile viewport (URL bar collapse); the vh line above it is the fallback for browsers without dvh support. */ body.breakdance .bde-popup:has(.bss-quote-form) { padding: 0; height: 100vh; height: 100dvh; align-items: stretch; justify-content: stretch; } /* The card fills the screen: full width/height, no max caps, square corners, pinned to the viewport edges. */ body.breakdance .bde-popup:has(.bss-quote-form) .breakdance-popup { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border-radius: 0; } /* Inner content box must be a height-constrained flex column so the body can scroll instead of pushing the footer off-screen. */ body.breakdance .bde-popup:has(.bss-quote-form) .breakdance-popup-content { height: 100%; min-height: 0; } /* The form root fills that column — header pinned top, footer pinned bottom, .bss-quote-form__body scrolls internally (overflow-y already set in the element's default.css). */ body.breakdance .bde-popup:has(.bss-quote-form) .bss-quote-form { height: 100%; min-height: 0; } } /* =========================================================================== FAVORITES — PDP button + My Account list --------------------------------------------------------------------------- The Favorite button on the PDP is a plain .bss-btn--outline that flips into a filled "favorited" treatment when the user is logged in and the toggle succeeds. The heart icon is drawn purely from CSS (no asset request) so the button has zero extra payload on first paint. =========================================================================== */ body.breakdance .bss-btn.bss-btn--favorite { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Heart glyph — outlined by default, filled when favorited. CSS-only so we don't add an HTTP request per PDP. */ body.breakdance .bss-btn.bss-btn--favorite::before { content: ''; width: 1rem; height: 1rem; flex-shrink: 0; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } body.breakdance .bss-btn.bss-btn--favorite.is-favorited { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--neutral-0); } body.breakdance .bss-btn.bss-btn--favorite.is-favorited:hover { background: var(--neutral-700); border-color: var(--neutral-700); } body.breakdance .bss-btn.bss-btn--favorite[disabled] { opacity: 0.6; cursor: progress; } /* My-Account "Favorites" tab grid — the cards themselves are the standard product card (.bss-card--product, tokens.css); only the grid and the per-item action stack live here. */ .bss-favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .bss-favorites-item { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--neutral-0); transition: box-shadow var(--t-base) var(--ease); } /* The elevation belongs to the WHOLE item. The nested standard product card brings its own hover shadow, which paints a lifted panel around just the image+text and stops above the buttons — reading as a second card inside the card. Neutralise it here and lift the wrapper instead; the image zoom follows the same hover so the two stay in sync. */ .bss-favorites-item:hover { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.12); } body.breakdance .bss-favorites-item .bss-card--product:hover { box-shadow: none; } .bss-favorites-item:hover .bss-card__thumb img { transform: scale(1.06); } /* The card carries its own 1rem padding; match it so the buttons line up with the card content instead of the wrapper edge. `margin-top: auto` pins the actions to the bottom so they line up across a row whose product names run to different line counts (grid items stretch to the row height). */ .bss-favorites-item__actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1rem; margin-top: auto; } body.breakdance .bss-favorites-item__actions .bss-btn { width: 100%; justify-content: center; /* .bss-btn is nowrap by design (wide page buttons). In this narrow card a long translated label (NL "Toevoegen aan winkelwagen") overflows the pill; since the label is white it then sits invisibly on the white card and reads as clipped text. Let it wrap inside the pill instead. */ white-space: normal; line-height: 1.25; text-align: center; } .bss-favorites-empty { font-size: 1rem; color: var(--neutral-500); margin: 0 0 1rem; } /* =========================================================================== LANGUAGE SUGGESTION MODAL — bss-langmodal --------------------------------------------------------------------------- A self-contained JS-driven modal (rendered in wp_footer by includes/ lang-modal.php, revealed by bss-interactions.js → initLangModal). It reuses the Request-a-Quote popup look — dimmed blurred overlay + centered white card — but is NOT a Breakdance popup, so it carries its own chrome here. =========================================================================== */ .bss-langmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(11, 11, 12, 0.5); backdrop-filter: blur(2px); font-family: var(--font); } .bss-langmodal[hidden] { display: none; } .bss-langmodal__card { width: 100%; max-width: 26rem; background: var(--neutral-0); border-radius: var(--radius); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); overflow: hidden; display: flex; flex-direction: column; } .bss-langmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--border); } body.breakdance h2.bss-langmodal__title { font-family: var(--font); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--neutral-900); margin: 0; } body.breakdance button.bss-langmodal__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--neutral-0); color: var(--neutral-500); cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } body.breakdance button.bss-langmodal__close:hover { border-color: var(--neutral-300); color: var(--neutral-900); } .bss-langmodal__body { padding: 1.25rem; } .bss-langmodal__text { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--neutral-500); margin: 0 0 1rem; } ul.bss-langmodal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .bss-langmodal__list li { margin: 0; } body.breakdance a.bss-langmodal__opt { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--neutral-900); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } body.breakdance a.bss-langmodal__opt:hover { border-color: var(--neutral-300); background: var(--neutral-100); } /* The browser-matched language — emphasised with the design system's selected-card ring (same as the checkout option cards). */ body.breakdance a.bss-langmodal__opt.is-suggested { border-color: var(--neutral-900); box-shadow: inset 0 0 0 1px var(--neutral-900); } body.breakdance img.bss-langmodal__flag { width: 1.5rem; height: 1.125rem; max-width: none; border-radius: 0.125rem; object-fit: cover; flex-shrink: 0; } .bss-langmodal__name { flex: 1 1 auto; font-size: 1rem; font-weight: 600; color: var(--neutral-900); } body.breakdance .bss-langmodal__arrow { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--neutral-400); } body.breakdance a.bss-langmodal__opt:hover .bss-langmodal__arrow { color: var(--neutral-900); }