/* ========================================================================== Series doors — product-card grid for one kitchen series. Family: .series-doors (grid wrapper, uses .grid API) div.card.door (single door — built on the media-card pattern) > img.ratio-2x3 (sized by card.css via aspect-ratio) > div.title (flex row: name + optional info button) > h5.name > button.btn.icon.sm (only when there are tooltip attrs) > svg (inline info icon) > span.tooltip (DOM tooltip body with

) > div.attributes (two pre-groomed text rows) Color swatches family: .color-swatches (grid wrapper, uses .grid API) div.card.center (one swatch — icon-card pattern from card.css) > svg (color circle, sized via --card-icon-size: 50cqi) > h6 (label) ========================================================================== */ .series-doors { --row-gap: var(--s-48); --col-gap: var(--s-24); } .series-doors .door .title { display: flex; align-items: center; } .series-doors .door .name { margin: 0; } .series-doors .door .attributes { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; font-size: var(--font-size-sm); } .series-doors .door .attributes p { margin: 0; } /* --- Media wrapper ------------------------------------------------------ */ .series-doors .door .media { overflow: hidden; width: 100%; aspect-ratio: var(--ratio, auto); border-radius: var(--border-radius-media); } .series-doors .door .media > img { width: 100%; height: 100%; object-fit: cover; } /* Door spec content lives in a hidden .haga-tooltip-source next to the info button; HagaTooltip (assets/js/tooltip.js) clones it into a .haga-tooltip bubble on hover/tap. Door spec styling lives with .haga-tooltip below. */ /* ========================================================================== Color swatches grid — uses div.card.center icon-card pattern from card.css ========================================================================== */ .color-swatches { row-gap: var(--s-8); column-gap: var(--s-12); } .color-swatches:not(:last-child) { margin-bottom: var(--s-32); } /* Container query unit (cqi) = % of the card's inline (horizontal) size. Feeding it into --card-icon-size means the existing card.css rule (width/height: var(--card-icon-size)) gets a value that resolves the same in both axes, so the circle scales fluidly with the cell width. */ .color-swatches .card { container-type: inline-size; --card-icon-size: 80cqi; } /* Placeholder colour for swatches without a real --swatch value: a softly tinted warm-brown so empty cells read as "missing" without clashing with the page palette. Uses the strong placeholder token because a filled circle needs more visual weight than a flat surface. */ .color-swatches .card > svg:first-child { color: var(--swatch, var(--surface-placeholder-strong)); } /* Hairline border so light swatches (Vit, Antikvit, Ljusgrå) remain visible against the off-white page background. non-scaling-stroke keeps the stroke 1 device-pixel wide regardless of swatch size. */ .color-swatches .card > svg:first-child circle { stroke: color-mix(in srgb, var(--wp--preset--color--warm-brown) 24%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } .color-swatches .card h6 { display: none; } @media (min-width: 40rem) { .color-swatches { row-gap: var(--s-32); column-gap: var(--s-16); } .color-swatches .card { --card-icon-size: 50cqi; } .color-swatches .card h6 { display: block; } } /* ========================================================================== Haga tooltip — generic floating bubble (assets/js/tooltip.js). Positioned by Floating UI, appended to ; coords via inline left/top. Used by: color swatches (label, tap on touch) and door cards (spec dl, hover on desktop / tap on touch). Visual styles only. ========================================================================== */ .haga-tooltip { /* position: fixed (matches Floating UI strategy: 'fixed') so the bubble is positioned relative to the viewport, immune to WP's html { margin-top: 32px } admin-bar shift. */ position: fixed; top: 0; left: 0; z-index: 100; max-width: min(20rem, calc(100vw - 2rem)); padding: var(--s-12); background: var(--wp--preset--color--warm-brown); color: var(--wp--preset--color--off-white); border-radius: var(--s-4); font-size: 0.875rem; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; text-transform: none; white-space: normal; opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms ease; } .haga-tooltip[data-show] { opacity: 1; transform: none; } .haga-tooltip > .arrow { position: absolute; width: 8px; height: 8px; rotate: 45deg; background: inherit; } /* Door spec tooltips: lock to a consistent width regardless of which fields are populated, so the bubble shape does not jitter row-by-row. Targets only tooltips that contain a

(door specs); color-swatch label tooltips remain content-sized. */ .haga-tooltip:has(dl) { min-width: 13rem; max-width: 16rem; } /* Door spec list rendered inside the bubble — two-column grid so labels align in a left column and values flow in a right column. */ .haga-tooltip dl { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-16); row-gap: var(--s-12); margin: 0; text-align: start; } .haga-tooltip dt { font-weight: 500; } .haga-tooltip dd { margin: 0; } /* Thin separator above every row except the first, drawn only in the value column. Padding is applied to both columns so the dt label still aligns with the dd value in the same grid row. */ .haga-tooltip dt:not(:first-of-type), .haga-tooltip dt:not(:first-of-type) + dd { padding-block-start: var(--s-12); } .haga-tooltip dt:not(:first-of-type) + dd { border-block-start: solid 1px var(--border-divider-light); } /* Trigger affordances. */ .color-swatches .card[data-haga-tooltip] { cursor: pointer; } .color-swatches .card[data-haga-tooltip]:focus-visible { outline: 2px solid var(--wp--preset--color--warm-brown); outline-offset: 4px; border-radius: 50%; } @media (prefers-reduced-motion: reduce) { .haga-tooltip { transition: opacity 180ms ease; transform: none; } }