/* troostwijk-items — all selectors scoped under .twk-items. * v0.2.0: brand colours via CSS custom properties emitted from wp_head by * Plugin::maybeEmitInlineColors(). Fallbacks here mirror the defaults so the * plugin still renders correctly when the admin hasn't customised them. * v0.5.0: merged in the popover + range-slider + loading-and-chips CSS that * previously lived in three scratch buffers. Now the single shipped CSS. */ .twk-items{box-sizing:border-box;font-family:inherit;color:inherit;} .twk-items *,.twk-items *::before,.twk-items *::after{box-sizing:inherit;} /* Scoped visually-hidden utility — mirrors WP core's canonical rule so the * plugin doesn't depend on the theme shipping the legacy _s boilerplate. * Scoped to .twk-items to avoid colliding with any theme declaration. */ .twk-items .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .twk-items .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* M2: gap normalised from 1.25rem → 1.5rem (24px) for the 4px-based spacing scale. */ .twk-items__list{display:grid;gap:1.5rem;list-style:none;margin:0;padding:0;} /* H1 (§54 theme-conflict pattern): Elementor / theme `ul` styling sets * padding-inline-start:20px and margin-block:16px as logical longhands at * specificity (0,1,0). The unscoped rule above shares that specificity and * loses by source order. This scoped rule raises specificity to (0,2,0) and * uses !important on the logical longhands that the theme actually sets, * so the plugin wins regardless of cascade order. Physical shorthands are * kept as belt-and-braces for engines that don't support logical props. * Scoped to .twk-items--grid (NOT .twk-items) so the !important padding reset * does NOT clobber the carousel list's deliberate `padding-bottom:.5rem` scroll * gutter — the Elementor ul leak is a grid-layout concern only. (Wave 2d review.) */ .twk-items--grid .twk-items__list{margin:0!important;padding:0!important;padding-inline:0!important;margin-block:0!important;list-style:none!important;} .twk-items--grid.twk-cols-2 .twk-items__list{grid-template-columns:repeat(2,minmax(0,1fr));} .twk-items--grid.twk-cols-3 .twk-items__list{grid-template-columns:repeat(3,minmax(0,1fr));} .twk-items--grid.twk-cols-4 .twk-items__list{grid-template-columns:repeat(4,minmax(0,1fr));} /* Mobile breakpoints. Selectors include every column-class variant so the media-query rules have the SAME specificity as the column rules above — otherwise the desktop column count wins on small screens (latent v0.1/v0.2 bug discovered on Marco's LocalWP). */ @media (max-width:768px){ .twk-items--grid.twk-cols-2 .twk-items__list, .twk-items--grid.twk-cols-3 .twk-items__list, .twk-items--grid.twk-cols-4 .twk-items__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:480px){ .twk-items--grid.twk-cols-2 .twk-items__list, .twk-items--grid.twk-cols-3 .twk-items__list, .twk-items--grid.twk-cols-4 .twk-items__list{ grid-template-columns:1fr; } } .twk-card{background:#fff;border:1px solid var(--twk-card-border,#056FBB);border-radius:8px;overflow:hidden;transition:box-shadow .15s ease;} .twk-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);} .twk-card__link{display:block;color:inherit;text-decoration:none;} /* v0.8.0 — skeleton shimmer for the card media placeholder while the lot image * is loading. JS removes the animation by setting img.complete on each card img * load/error event (troostwijk.js initCardSkeletons). The gradient sweep matches * the card background so the shimmer is invisible once the image replaces it. */ @keyframes twk-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .twk-card__media{position:relative;margin:0;aspect-ratio:4/3;background:linear-gradient(90deg,#f3f4f6 25%,#e9ebec 50%,#f3f4f6 75%);background-size:200% 100%;animation:twk-shimmer 1.5s infinite linear;overflow:hidden;} /* JS adds --loaded once the img fires load/error; stops the shimmer. */ .twk-card__media--loaded{animation:none;background:#f3f4f6;} .twk-card__media img{width:100%;height:100%;object-fit:cover;display:block;} .twk-card__status{position:absolute;top:.5rem;left:.5rem;max-width:calc(100% - 1rem);padding:.25rem .5rem;font-size:.75rem;line-height:1.2;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .twk-status--open{background:var(--twk-status-open,#D04400);} /* #D04400 = 4.61:1 on white — clears WCAG 1.4.3 AA for 12px text */ .twk-status--closed{background:#6b7280;} .twk-status--not-open{background:#0369a1;} /* WCAG AA on white text (4.83:1) */ .twk-card__body{padding:.75rem 1rem 1rem;} .twk-card__title{margin:0 0 .5rem;font-size:1rem;line-height:1.3;} .twk-card__bid{margin:0 0 .25rem;font-size:.875rem;} .twk-card__bid-label{color:#6b7280;margin-right:.25rem;} .twk-card__meta{margin:0;font-size:.75rem;color:#6b7280;} /* M3: secondary-button style — brand blue, not orange. The inline emit in * Plugin::maybeEmitInlineColors() now emits #056FBB for --twk-loadmore-bg * (default migrated), so the var() and the fallback both resolve to blue. */ .twk-items__loadmore{display:block;margin:1.5rem auto 0;padding:.625rem 1.5rem;background:var(--twk-loadmore-bg,#056FBB);color:#fff;border:2px solid var(--twk-loadmore-bg,#056FBB);border-radius:8px;cursor:pointer;font:inherit;font-weight:500;} .twk-items__loadmore:hover{background:#045a9a;border-color:#045a9a;} .twk-items__loadmore:disabled{opacity:.6;cursor:not-allowed;} /* Mobile responsive: shrink the status badge so it doesn't dominate the card. */ @media (max-width:480px){ .twk-card__status{padding:.15rem .4rem;font-size:.7rem;} } .twk-items--carousel .twk-items__list{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-bottom:.5rem;} .twk-items--carousel .twk-card{flex:0 0 280px;scroll-snap-align:start;} .twk-items__carousel-controls{display:flex;gap:.5rem;margin-top:.75rem;justify-content:flex-end;} .twk-items__carousel-prev, .twk-items__carousel-next{min-width:44px;min-height:44px;padding:.5rem;border:1px solid var(--twk-card-border,#056FBB);border-radius:4px;background:#fff;font:inherit;cursor:pointer;font-size:1.5rem;line-height:1;} .twk-items__carousel-prev:focus-visible, .twk-items__carousel-next:focus-visible{outline:2px solid var(--twk-popover-border,#056FBB);outline-offset:2px;} .twk-items-error{padding:1rem;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:6px;} /* v0.4.0 — toolbar (search + sort) above the grid */ /* M2: 1rem (16px) bottom margin — consistent with the 4px-based scale. */ .twk-items__toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;} .twk-items__search,.twk-items__sort{min-height:44px;padding:.5em .75em;border:1px solid #94a3b8 !important;border-radius:6px;font:inherit;background:#fff;color:#1f2937;} .twk-items__search:focus-visible,.twk-items__sort:focus-visible{outline:2px solid var(--twk-popover-border,#056FBB);outline-offset:2px;border-color:var(--twk-popover-border,#056FBB)!important;} .twk-items__sort{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.25rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.1em;} .twk-items__search{flex:1 1 240px;} .twk-items__sort{min-width:200px;} /* v0.4.0 — filter form (single-auction grid only) */ /* v0.6.5: removed grey slab wrapper — filter rail is now a bordered band * rather than a card, per 21st.dev/shadcn filter-rail convention. */ /* v0.7.2: align-items is flex-START, not flex-end. A range-slider filter * (legend → number inputs → ~40px track ≈ 140px tall) shares this wrapping row * with short popover-trigger filters (~60px). flex-end pinned every item to the * bottom, so the tall slider's label floated up while the short filters' buttons * dropped down level with the slider track — the slider read as a broken, mis- * placed bar. flex-start aligns all legends at the top so each filter stays a * self-contained group (slider sits under its own inputs). See LEARNINGS §53. */ /* M2: margin-bottom 1.5rem (24px) — step up from toolbar's 16px for clear section rhythm. */ .twk-items__filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start;margin-bottom:1.5rem;padding:.875rem 0;background:transparent;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;border-radius:0;} /* Each filter is now a fieldset with position:relative so the popover panel can absolutely-position itself relative to the trigger. v0.5.0. */ .twk-items__filter{position:relative;min-width:180px;border:0;padding:0;margin:0;flex:1 1 180px;} .twk-items__filter legend,.twk-items__filter-legend{font-weight:500;margin-bottom:.35em;font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;} /* Legacy v0.4.0 selectors retained for any custom theme overrides that may still target `.twk-filter` (kept for backward compat — both class names work). */ .twk-filter{position:relative;min-width:180px;border:0;padding:0;margin:0;flex:1 1 180px;} .twk-filter legend{font-weight:600;margin-bottom:.25em;font-size:.875rem;} .twk-filter select, .twk-filter input[type="number"], .twk-filter input[type="date"]{width:100%;min-height:36px;padding:.25em .5em;border:1px solid var(--twk-card-border,#056FBB);border-radius:4px;font:inherit;background:#fff;} .twk-filter select[multiple]{min-height:80px;} .twk-filter input[data-twk-range][data-twk-range-bound="min"]{margin-right:.5em;width:calc(50% - .25em);display:inline-block;} .twk-filter input[data-twk-range][data-twk-range-bound="max"]{width:calc(50% - .25em);display:inline-block;} .twk-items__filter-actions{display:flex;gap:.5rem;align-items:flex-end;flex-basis:100%;margin-top:.5em;} .twk-items__apply,.twk-items__reset{padding:.5em 1em;border-radius:6px;border:1px solid var(--twk-card-border,#056FBB);font:inherit;cursor:pointer;background:#fff;} .twk-items__apply{background:var(--twk-loadmore-bg,#056FBB);color:#fff;border-color:transparent;} .twk-items__apply:hover{filter:brightness(.92);} /* v0.4.0 — count line */ /* L1: slate-600 at weight 500 unifies the palette against chip + legend text. */ .twk-items__count{font-size:.875rem;color:#475569;font-weight:500;margin:.5em 0 1em;} .twk-items__count:empty{display:none;} /* M1: the legacy margin inflates the count row inside its flex parent. Zero it * when the count paragraph sits inside the count-row wrapper so the row stays * a tidy single-line label with one intentional gap before load-more. */ .twk-items__count-row .twk-items__count{margin:0;} /* v0.4.0 — responsive. v0.7.0: filters use row-wrap with two-per-row at tablet * (was full-width column which produced awkward stacks). Below 480px each * filter falls back to full-width single column for thumb reach. */ @media (max-width:768px){ .twk-items__toolbar{flex-direction:column;align-items:stretch;} .twk-items__search,.twk-items__sort{flex:1 1 auto;min-width:0;} .twk-items__filters{flex-flow:row wrap;align-items:flex-start;} /* v0.7.2: see base rule note */ .twk-filter,.twk-items__filter{flex:1 1 calc(50% - .75rem);min-width:0;} } @media (max-width:480px){ .twk-items__filters{flex-flow:row wrap;} .twk-filter,.twk-items__filter{flex:1 1 100%;} } @media (max-width:480px){ .twk-filter select[multiple]{min-height:0;} } .twk-items-placeholder{padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;text-align:center;} /* =========================================================================== * v0.5.0 — Popover dropdown widget (Stream A; was assets/css/popover.css). * Spec §17.2, §17.13. * =========================================================================== */ .twk-items__filter-trigger { display: inline-flex; align-items: center; gap: 0.4em; padding: 0 14px; height: 40px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: var(--twk-popover-radius, 8px); color: #1f2937; font: inherit; font-size: 0.875rem; font-weight: 500; text-transform: none; /* defeat theme uppercase leak */ letter-spacing: normal; cursor: pointer; white-space: nowrap; position: relative; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .twk-items__filter-trigger:hover { background: #fff; border-color: var(--twk-popover-border, #056FBB); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .twk-items__filter-trigger:focus-visible { outline: 2px solid var(--twk-popover-border, #056FBB); outline-offset: 2px; } .twk-items__filter-trigger[aria-expanded="true"] { background: #fff; border-color: var(--twk-popover-border, #056FBB); box-shadow: 0 0 0 3px rgba(5, 111, 187, 0.15); color: var(--twk-popover-border, #056FBB); } .twk-items__filter-trigger[data-twk-active-count]:not([data-twk-active-count="0"]) { background: rgba(5, 111, 187, 0.08); border-color: var(--twk-popover-border, #056FBB); color: var(--twk-popover-border, #056FBB); font-weight: 600; } .twk-items__filter-chevron { font-size: 0.875em; line-height: 1; margin-left: 2px; opacity: 0.7; transition: transform 120ms ease; } .twk-items__filter-trigger[aria-expanded="true"] .twk-items__filter-chevron { transform: rotate(180deg); opacity: 1; } .twk-items__filter-panel { position: absolute; z-index: 100; top: calc(100% + 6px); left: 0; min-width: 260px; max-width: 340px; max-height: var(--twk-popover-max-height, min(60vh, 480px)); overflow-y: auto; overflow-x: hidden; background: var(--twk-popover-bg, #fff); border: 1px solid #e2e8f0; border-radius: var(--twk-popover-radius, 10px); box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10); padding: 8px 0 4px; box-sizing: border-box; opacity: 1; transition: opacity 120ms ease; } .twk-items__filter-panel[hidden] { display: none; } .twk-items__filter-search { display: block; width: calc(100% - 16px); margin: 0 8px 8px; padding: 8px 10px; border: 1px solid #94a3b8 !important; border-radius:6px; font: inherit; font-size: 0.875rem; box-sizing: border-box; background: #fff; color: #1f2937; } .twk-items__filter-search:focus-visible { outline: 2px solid var(--twk-popover-border, #056FBB); outline-offset: 1px; border-color: var(--twk-popover-border, #056FBB) !important; } /* v0.7.0 — hide the WebKit `×` clear button that overlaps our own popover × * close button (Matteo flagged the double-× as confusing on the live site). */ .twk-items__filter-search::-webkit-search-cancel-button, .twk-items__filter-search::-webkit-search-decoration, .twk-items__filter-search::-webkit-search-results-button, .twk-items__filter-search::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .twk-items__filter-options { list-style: none; margin: 0; padding: 0; } .twk-items__filter-option { display: block; } .twk-items__filter-option-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 0.875rem; line-height: 1.3; min-height: 36px; box-sizing: border-box; transition: background 80ms ease; } .twk-items__filter-option-label:hover { background: rgba(0, 0, 0, 0.04); } .twk-items__filter-checkbox { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--twk-primary, #056FBB); } .twk-items__filter-checkbox:focus-visible + .twk-items__filter-option-name { outline: 2px solid var(--twk-popover-border, #056FBB); outline-offset: 2px; border-radius: 2px; } .twk-items__filter-option-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .twk-items__filter-option-count { flex-shrink: 0; font-size: 0.75em; font-weight: 500; color: #475569; padding: 2px 7px; background: #f1f5f9; border-radius: 999px; min-width: 1.5em; text-align: center; } .twk-items__filter-empty { margin: 0; padding: 8px 12px; font-size: 0.875rem; color: #888; font-style: italic; } .twk-items__filter-empty[hidden] { display: none; } .twk-items__filter-clear { display: block; width: calc(100% - 16px); margin: 6px 8px 4px; padding: 6px 8px; background: transparent; border: 1px solid #ddd; border-radius: 4px; font: inherit; font-size: 0.8rem; color: #555; cursor: pointer; text-align: center; transition: border-color 80ms ease, color 80ms ease; } .twk-items__filter-clear:hover { border-color: var(--twk-primary, #056FBB); color: var(--twk-primary, #056FBB); } .twk-items__filter-clear:focus-visible { outline: 2px solid var(--twk-popover-border, #056FBB); outline-offset: 2px; } .twk-items__filter-clear[hidden] { display: none; } .twk-items__filter-select { display: none !important; } /* ux-M1 — close button. Visible on desktop (inside panel top-right corner) and on mobile bottom-sheet. The panel carries position:absolute via its own rule; the close button uses position:absolute here to dock inside that ancestor. */ .twk-items__popover-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 6px; right: 6px; min-height: 32px; min-width: 32px; background: #f1f5f9; border: 0; padding: 0; cursor: pointer; color: #475569; font-size: 1.25rem; line-height: 1; border-radius: 6px; transition: background 80ms ease, color 80ms ease; } .twk-items__popover-close:hover { background: #e2e8f0; color: #1e293b; } .twk-items__popover-close:focus-visible { outline: 2px solid var(--twk-popover-border, #056FBB); outline-offset: 2px; } /* Mobile popover: panel becomes a fixed bottom-sheet. */ @media (max-width: 600px) { .twk-items__filter-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-width: none; max-height: min(60vh, 480px); border-radius: 12px 12px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); } .twk-items__filter-option-label { min-height: 44px; /* WCAG 2.5.5 — 44px touch target */ padding: 10px 16px; } /* ux-M1 — override desktop 6px offset with 8px for the taller bottom-sheet header. */ .twk-items__popover-close { top: 8px; right: 8px; } } /* =========================================================================== * v0.5.0 — Range slider widget (Stream B; was assets/css/range-slider.css). * Spec §17.3, §17.13. * =========================================================================== */ .twk-items__range { display: flex; flex-direction: column; gap: 12px; width: 100%; } .twk-items__range-slider { position: relative; height: 40px; display: flex; align-items: center; width: 100%; } .twk-items__range-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 8px; border-radius: 4px; background: var(--twk-slider-track, #e2e8f0); pointer-events: none; } .twk-items__range-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 8px; border-radius: 4px; background: var(--twk-slider-fill, var(--twk-slider-thumb, #056FBB)); pointer-events: none; left: 0; right: 100%; } .twk-items__range-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; touch-action: none; } /* v0.6.4: hide the native track per browser. We can't use opacity:0 on the * input itself because that propagates to the ::*-slider-thumb pseudo-element * and makes our visible thumb invisible too (the bug Marco hit on the live * Bouwjaar slider). Setting transparent track styles per browser hides the * native chrome while leaving the thumb visible. */ .twk-items__range-thumb::-webkit-slider-runnable-track { background: transparent; border: 0; height: 6px; } .twk-items__range-thumb::-moz-range-track { background: transparent; border: 0; height: 6px; } /* v0.7.1: Firefox auto-paints a ::-moz-range-progress bar (0 → value) on each * native range input. With two stacked inputs that stacks two stray accent bars * over our custom .twk-items__range-fill div. Make it transparent so only the * fill div shows. (WebKit has no equivalent progress pseudo-element.) */ .twk-items__range-thumb::-moz-range-progress { background: transparent; } .twk-items__range-thumb::-webkit-slider-thumb { pointer-events: auto; } .twk-items__range-thumb::-moz-range-thumb { pointer-events: auto; } .twk-items__range-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; /* v0.7.4: solid brand blue marker (no white fill / blue border combo), smaller, * vertically centred on the 6px native track: margin-top = (6 - 16) / 2 = -5px. */ background: var(--twk-slider-thumb, #056FBB); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; opacity: 1; box-sizing: border-box; padding: 0; margin-top: -5px; transition: background 0.15s ease, box-shadow 0.15s ease; } .twk-items__range-thumb::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--twk-slider-thumb, #056FBB); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; opacity: 1; transition: background 0.15s ease, box-shadow 0.15s ease; } .twk-items__range-thumb:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(5, 111, 187, 0.4); outline-offset: 2px; } .twk-items__range-thumb:focus-visible::-moz-range-thumb { outline: 3px solid rgba(5, 111, 187, 0.4); outline-offset: 2px; } .twk-items__range-thumb::-moz-focus-outer { border: 0; } .twk-items__range-thumb--max { z-index: 1; } /* v0.7.0 — drag tooltip pill (shadcn/Radix Slider port, Option β). */ .twk-items__range-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.10); } .twk-items__range-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1e293b; } .twk-items__range-tooltip[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .twk-items__range-tooltip { transition: none; } } @media (max-width: 600px) { .twk-items__range-thumb::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; /* (6 - 20) / 2 */ } .twk-items__range-thumb::-moz-range-thumb { width: 20px; height: 20px; } } .twk-items__range-inputs { display: flex; align-items: center; gap: 8px; width: 100%; } .twk-items__range-label { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* v0.7.4: the visible "Van"/"Tot" (From/To) labels are removed per Matteo — the * two number inputs + the dash separator + the facet legend already convey the * range. The span stays in the DOM as the inputs' accessible name (it's the text * content of the wrapping