.pp-layout{width:100%;max-width:1080px;margin:0 auto} .pp-main-media{border:1px solid rgba(15,23,42,.12);border-radius:20px;overflow:hidden;background:var(--landing-card-bg,#f1f5f9);aspect-ratio:var(--pp-aspect,1/1)} .pp-main-image,.pp-main-placeholder{width:100%;height:100%;object-fit:var(--pp-fit,contain);display:block;--poster-color:transparent} .pp-main-placeholder{background:var(--landing-card-bg,#f1f5f9)} .pp-configurator-status{display:flex;align-items:center;justify-content:center;padding:20px;color:color-mix(in srgb,currentColor 58%,transparent);font-size:.9rem;text-align:center} .pp-configurator-status.is-error{color:#991b1b} .pp-configurator-view-controls{display:grid;gap:7px;margin-top:12px} .pp-configurator-tabs{display:inline-flex;width:max-content;max-width:100%;gap:3px;padding:3px;border-radius:10px;background:color-mix(in srgb,currentColor 8%,transparent)} .pp-configurator-tabs button{min-height:34px;padding:6px 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:color-mix(in srgb,currentColor 62%,transparent);font:inherit;font-size:.84rem;font-weight:750;cursor:pointer;white-space:nowrap} .pp-configurator-tabs button:hover{color:inherit}.pp-configurator-tabs button.is-active{border-color:rgba(15,23,42,.1);background:var(--landing-card-bg,#fff);color:inherit;box-shadow:0 1px 3px rgba(15,23,42,.12)} .pp-configurator-tabs button:focus-visible{outline:3px solid color-mix(in srgb,var(--landing-accent,var(--accent)) 35%,transparent);outline-offset:2px} .pp-configurator-preview-note{margin:0;color:color-mix(in srgb,currentColor 58%,transparent);font-size:.76rem;line-height:1.4} .pp-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .pp-thumb{width:64px;height:64px;padding:0;border:1px solid rgba(15,23,42,.14);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer} .pp-main-stage{position:relative} .pp-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:rgba(255,255,255,.9);color:#111;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12);transition:background .15s,transform .15s;z-index:2} .pp-gallery-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .pp-gallery-prev{left:12px} .pp-gallery-next{right:12px} .pp-main-stage:focus-visible{outline:2px solid var(--landing-accent,#2563eb);outline-offset:3px;border-radius:20px} .pp-thumb[aria-current="true"]{border-color:var(--landing-accent,#2563eb);box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,#2563eb) 35%,transparent)} .pp-thumb img,.pp-thumb video{width:100%;height:100%;object-fit:var(--pp-fit,cover)} .pp-thumb-3d{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:.7rem;font-weight:700;color:color-mix(in srgb,currentColor 55%,transparent);background:#f1f5f9} .pp-title{margin:0;line-height:1.1;color:var(--landing-headline-color,inherit)} h1.pp-title{font-size:clamp(2.1rem,4vw,3.1rem)} h2.pp-title{font-size:clamp(1.7rem,3vw,2.4rem)} h3.pp-title{font-size:clamp(1.45rem,2.6vw,2.05rem)} h4.pp-title{font-size:clamp(1.25rem,2.2vw,1.7rem)} h5.pp-title{font-size:clamp(1.1rem,1.8vw,1.4rem)} h6.pp-title{font-size:clamp(1rem,1.5vw,1.2rem)} .pp-price{font-size:1.4rem;font-weight:800} .pp-stock{color:color-mix(in srgb,currentColor 65%,transparent);font-size:.95rem} .pp-description{line-height:1.6;color:color-mix(in srgb,currentColor 82%,transparent)} .pp-options{display:grid;gap:10px} .pp-option-group{border:0;padding:0;margin:0;display:grid;gap:8px} .pp-option-group legend{font-weight:700;font-size:.92rem;padding:0} .pp-option-values{display:flex;flex-wrap:wrap;gap:8px} .pp-option-value{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid rgba(15,23,42,.18);border-radius:999px;background:var(--landing-variant-bg,var(--landing-card-bg,#fff));color:var(--landing-variant-text,inherit);font:inherit;cursor:pointer} .pp-option-value.is-selected{border-color:var(--landing-accent,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,var(--accent)) 20%,transparent)} .pp-option-value.is-hidden{display:none} .pp-option-value.is-out-of-stock{opacity:.45;text-decoration:line-through;cursor:not-allowed} .pp-option-value:disabled{cursor:not-allowed} .pp-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,23,42,.18)} .pp-swatch-image{width:20px;height:20px;border-radius:6px;object-fit:cover;border:1px solid rgba(15,23,42,.18)} .pp-option-group-select{display:grid;gap:6px} .pp-option-select-label{font-weight:700;font-size:.92rem} .pp-option-select{min-height:38px;padding:8px 14px;border:1px solid rgba(15,23,42,.18);border-radius:10px;background:var(--landing-variant-bg,var(--landing-card-bg,#fff));color:var(--landing-variant-text,inherit);font:inherit;cursor:pointer} .pp-option-group-slider{width:min(100%,560px)}.pp-option-slider-label{display:grid;gap:8px;font-weight:700;font-size:.9rem}.pp-option-slider-label>span:first-child{display:flex;justify-content:space-between;gap:12px}.pp-option-slider-label output{font-variant-numeric:tabular-nums;text-align:right}.pp-option-slider-track{position:relative;height:28px;display:flex;align-items:center;touch-action:none}.pp-option-slider-track::before,.pp-option-slider-track::after{content:'';position:absolute;left:0;height:5px;border-radius:999px;pointer-events:none}.pp-option-slider-track::before{right:0;background:rgba(15,23,42,.15)}.pp-option-slider-track::after{width:var(--pp-option-slider-progress,0%);background:var(--landing-accent,var(--accent))}.pp-option-slider{position:absolute;z-index:1;left:0;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}.pp-option-slider:disabled{cursor:not-allowed;opacity:.45}.pp-option-slider::-webkit-slider-runnable-track{height:5px;background:transparent}.pp-option-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab}.pp-option-slider::-moz-range-track{height:5px;background:transparent}.pp-option-slider::-moz-range-progress{height:5px;background:transparent}.pp-option-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab}.pp-option-slider-bounds{display:flex;justify-content:space-between;color:color-mix(in srgb,currentColor 76%,transparent);font-size:.78rem;font-weight:500}.pp-option-slider-bounds span:last-child{text-align:right} .pp-option-group-swatch-dropdown{min-width:0} .pp-swatch-dropdown{position:relative;width:min(100%,460px)} .pp-swatch-dropdown-trigger{display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 12px;border:1px solid rgba(15,23,42,.18);border-radius:10px;background:var(--landing-variant-bg,var(--landing-card-bg,#fff));color:var(--landing-variant-text,inherit);font:inherit;cursor:pointer;list-style:none} .pp-swatch-dropdown-trigger::-webkit-details-marker{display:none} .pp-swatch-dropdown[open]>.pp-swatch-dropdown-trigger{border-color:var(--landing-accent,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,var(--accent)) 16%,transparent)} .pp-swatch-dropdown-current-swatch{flex:0 0 auto} .pp-swatch-dropdown-current-swatch.is-empty,.pp-swatch.is-empty{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(15,23,42,.12) 4px 6px)} .pp-swatch-dropdown-chevron{margin-left:auto;transition:transform .15s ease} .pp-swatch-dropdown[open] .pp-swatch-dropdown-chevron{transform:rotate(180deg)} .pp-swatch-dropdown-panel{display:grid;gap:8px;margin-top:6px;padding:10px;border:1px solid rgba(15,23,42,.18);border-radius:12px;background:var(--landing-card-bg,#fff);box-shadow:0 14px 32px rgba(15,23,42,.14)} .pp-swatch-dropdown-search{width:100%;min-height:40px;padding:8px 11px;border:1px solid rgba(15,23,42,.18);border-radius:9px;background:var(--landing-variant-bg,var(--landing-card-bg,#fff));color:var(--landing-variant-text,inherit);font:inherit} .pp-swatch-dropdown-options{display:grid;gap:4px;max-height:320px;overflow:auto;overscroll-behavior:contain;padding:2px} .pp-swatch-dropdown-option{width:100%;justify-content:flex-start;border-radius:8px;background:transparent;text-align:left} /* RAL and the special finishes are one list, headed rather than split into two controls - see `textured_option_values`. The heading is a sibling row, not a wrapper, so the search filter can hide it independently. */ /* Opaque, not `inherit`: these stick to the top of the scroller, and a sticky heading with a transparent background is drawn straight over the one it is meant to replace. Same token the panel itself paints with. */ .pp-swatch-dropdown-group{position:sticky;top:0;z-index:1;margin:6px 0 2px;padding:5px 6px;background:var(--landing-card-bg,#fff);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,currentColor 55%,transparent)} .pp-swatch-dropdown-group:first-child{margin-top:0} .pp-swatch-tag{margin-left:auto;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .pp-swatch-dropdown-option[hidden]{display:none} .pp-swatch-dropdown-empty{margin:4px 2px;color:color-mix(in srgb,currentColor 62%,transparent);font-size:.88rem} .pp-section-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center}.pp-section-slider-label{display:grid;gap:8px;font-weight:700;font-size:.9rem}.pp-section-slider-label>span{display:flex;justify-content:space-between;gap:12px}.pp-section-slider-label output{font-variant-numeric:tabular-nums}.pp-section-range-track{position:relative;height:28px;display:flex;align-items:center;touch-action:none}.pp-section-range-track::before,.pp-section-range-track::after{content:'';position:absolute;left:0;height:5px;border-radius:999px}.pp-section-range-track::before{right:0;background:rgba(15,23,42,.15)}.pp-section-range-track::after{width:var(--pp-section-progress,0%);background:var(--landing-accent,var(--accent))}.pp-section-range{position:absolute;left:0;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}.pp-section-range::-webkit-slider-runnable-track{height:5px;background:transparent}.pp-section-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab}.pp-section-range::-moz-range-track{height:5px;background:transparent}.pp-section-range::-moz-range-progress{height:5px;background:transparent}.pp-section-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab}.pp-section-range-bounds{display:flex;justify-content:space-between;color:color-mix(in srgb,currentColor 58%,transparent);font-size:.78rem;font-weight:500}.pp-section-controls strong{font-variant-numeric:tabular-nums;white-space:nowrap}.pp-section-note{margin:0;color:color-mix(in srgb,currentColor 65%,transparent);font-size:.88rem}.pp-section-price-summary{font-size:.88rem}.pp-section-price-summary summary{cursor:pointer;font-weight:700}.pp-section-price-summary table{width:100%;border-collapse:collapse;margin-top:8px}.pp-section-price-summary th,.pp-section-price-summary td{text-align:left;padding:6px 0;border-bottom:1px solid rgba(15,23,42,.08)}@media(max-width:480px){.pp-section-controls{grid-template-columns:1fr}.pp-section-controls strong{grid-row:1}} .pp-meta{display:flex;flex-wrap:wrap;gap:8px;color:color-mix(in srgb,currentColor 60%,transparent);font-size:.88rem} .pp-specs{margin-top:8px} .pp-specs-table{width:100%;border-collapse:collapse;font-size:.92rem} .pp-specs-table th,.pp-specs-table td{text-align:left;padding:8px 4px;border-bottom:1px solid rgba(15,23,42,.08)} .pp-specs-table th{font-weight:600;color:color-mix(in srgb,currentColor 75%,transparent);width:40%} /* Interactive 3D viewer. These classes only had admin styles before, so on a storefront the canvas had no size at all. Height and backdrop are merchant settings, delivered as custom properties by the block. */ .pp-3d-viewer{position:relative;margin-top:12px} .pp-3d-host{position:relative;display:block;width:100%;height:var(--pp-3d-height,640px);min-height:320px;overflow:hidden;border:1px solid rgba(15,23,42,.12);border-radius:20px;background:var(--pp-3d-bg,#f4f1eb)} .parametric-3d-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none} .parametric-3d-canvas:active{cursor:grabbing} .parametric-3d-status{position:absolute;inset:auto .75rem .75rem;padding:.6rem .75rem;border-radius:12px;color:#fff;background:rgba(24,24,27,.78);font-size:.82rem;line-height:1.35} .parametric-3d-status[data-kind="error"]{background:rgba(127,29,29,.92)} .parametric-3d-status[hidden]{display:none} /* Expand. An in-page overlay rather than the Fullscreen API, because iOS Safari has never supported requestFullscreen on a non-video element - it would do nothing on the device where filling the screen matters most. The viewer is moved, not re-mounted: the ResizeObserver already inside `mount` refits the canvas, where a re-mount would cost a fresh WebGL context and a second download of the GLB. */ .pp-3d-viewer{display:block} .pp-3d-stage{position:relative} .pp-3d-tools{position:absolute;left:12px;top:12px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)} .pp-3d-tool{padding:6px 12px;border:1px solid rgba(15,23,42,.16);border-radius:8px;background:rgba(255,255,255,.94);color:#0f172a;font:inherit;font-size:.8rem;font-weight:600;line-height:1.2;cursor:pointer} .pp-3d-tool:hover{background:#fff} .pp-3d-tool[aria-pressed="true"]{background:#0f172a;border-color:#0f172a;color:#fff} .pp-3d-room-type{padding-right:8px} /* Expanded: the stage and the panel share the screen. The panel is where the product's real picker goes - it is moved here rather than duplicated, so there is still one set of controls, one price, and one selection event. */ /* `grid-template-rows` is not decoration: without it the single implicit row is sized to its content, the panel holds the whole picker, and the stage grows to match - so `height:100%` on the host resolves to something taller than the screen and the radiator is rendered off it. The row is pinned to the overlay, and each cell gets `min-height:0` so it may be smaller than its own content and scroll instead of pushing. */ .pp-3d-viewer.is-expanded{position:fixed;inset:0;z-index:9000;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,var(--pp-3d-panel-w,380px));grid-template-rows:100%;overflow:hidden;background:var(--pp-3d-bg,#f4f1eb)} .pp-3d-viewer.is-expanded .pp-3d-stage{min-width:0;min-height:0;height:100%} .pp-3d-viewer.is-expanded .pp-3d-host{height:100%;min-height:0;border:0;border-radius:0} .pp-3d-panel{min-height:0;overflow-y:auto;padding:20px;background:#fff;border-left:1px solid rgba(15,23,42,.12);color:#0f172a;font-size:.9rem;-webkit-overflow-scrolling:touch} .pp-3d-panel h3,.pp-3d-panel h4{margin:0 0 8px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(15,23,42,.55)} .pp-3d-heat{margin-top:20px;padding-top:18px;border-top:1px solid rgba(15,23,42,.12)} .pp-3d-dt{display:flex;gap:6px;margin-bottom:10px} .pp-3d-dt button{flex:1;padding:6px 0;border:1px solid rgba(15,23,42,.16);border-radius:7px;background:#fff;color:rgba(15,23,42,.6);font:inherit;font-size:.78rem;font-variant-numeric:tabular-nums;cursor:pointer} .pp-3d-dt button[aria-pressed="true"]{background:#0f172a;border-color:#0f172a;color:#fff} .pp-3d-output{margin:0;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums} .pp-3d-output small{display:block;font-size:.8rem;font-weight:500;color:rgba(15,23,42,.6)} .pp-3d-sizing{margin-top:18px;padding-top:16px;border-top:1px solid rgba(15,23,42,.12)} .pp-3d-room-size,.pp-3d-room-kind{display:grid;gap:8px;margin-bottom:10px} .pp-3d-room-size{grid-template-columns:repeat(3,minmax(0,1fr))} .pp-3d-room-kind{grid-template-columns:repeat(2,minmax(0,1fr))} .pp-3d-sizing label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:rgba(15,23,42,.6)} .pp-3d-sizing input,.pp-3d-sizing select{width:100%;padding:6px 8px;border:1px solid rgba(15,23,42,.18);border-radius:7px;background:#fff;color:inherit;font:inherit;font-size:.86rem} .pp-3d-room-size label span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .pp-3d-requirement{margin:10px 0 4px;font-weight:700;font-variant-numeric:tabular-nums} .pp-3d-verdict{margin:0;font-size:.86rem;font-weight:600} .pp-3d-verdict[data-fit="over"]{color:#166534} .pp-3d-verdict[data-fit="under"]{color:#9a3412} .pp-3d-note{margin:10px 0 0;font-size:.76rem;line-height:1.45;color:rgba(15,23,42,.55)} /* The page behind a full-screen overlay must not scroll under it. */ body.pp-3d-expanded{overflow:hidden} @media (max-width:860px){ .pp-3d-host{height:min(var(--pp-3d-height,640px),70vh)} /* Too narrow to stand the panel beside the radiator: stack it under, and let the stage keep enough height to still read as a picture. */ .pp-3d-viewer.is-expanded{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,45vh) minmax(0,1fr)} .pp-3d-viewer.is-expanded .pp-3d-panel{border-left:0;border-top:1px solid rgba(15,23,42,.12)} } /* Thumbnails-only gallery: sits under the 3D viewer without a second hero image competing with it. Fixed aspect ratio keeps layout stable while the images load (no CLS, which Google measures). */ .pp-gallery-thumbs-only .pp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px} .pp-gallery-thumbs-only .pp-thumb{width:100%;height:auto;aspect-ratio:1/1} .pp-thumb img,.pp-thumb video{width:100%;height:100%;object-fit:contain;display:block;aspect-ratio:1/1} /* The gallery's interactive 3D item. The tile is a thumbnail-sized button; the pill floats over the main photo; the 3D face of the stage is a frame with the photo's aspect ratio, so opening the viewer never moves the page - or, when the gallery sets a stage height for the device (--pp-3dg-height*, with --pp-3dg-aspect*:auto beside it), a frame of that height. The viewer inside fills the frame instead of using its own height; the backdrop is the gallery's --pp-3d-bg, the standalone viewer's default when unset. */ .pp-thumb-3d-tile .pp-thumb-3d{flex-direction:column;gap:2px;font-size:.62rem;letter-spacing:.04em} .pp-thumb-3d-tile[aria-pressed="true"]{border-color:var(--landing-accent,#2563eb);box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,#2563eb) 35%,transparent)} .pp-thumb-3d-tile[aria-pressed="true"] .pp-thumb-3d{color:var(--landing-accent,#2563eb)} .pp-3d-pill{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid rgba(15,23,42,.16);border-radius:999px;background:rgba(255,255,255,.94);color:#0f172a;font:inherit;font-size:.8rem;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12)} .pp-3d-pill:hover{background:#fff} .pp-3d-pill::before{content:"";width:12px;height:12px;border:1.5px solid currentColor;border-radius:2px;transform:rotate(45deg) scale(.8)} .pp-main-stage.is-3d .pp-3d-pill,.pp-3d-pill[hidden],.pp-thumb-3d-tile[hidden]{display:none} .pp-main-3d{position:relative;aspect-ratio:var(--pp-3dg-aspect,var(--pp-aspect,1/1));height:var(--pp-3dg-height,auto);border:1px solid rgba(15,23,42,.12);border-radius:20px;overflow:hidden;background:var(--pp-3d-bg,#f4f1eb)} @media(max-width:820px){.pp-main-3d{aspect-ratio:var(--pp-3dg-aspect-tablet,var(--pp-aspect,1/1));height:var(--pp-3dg-height-tablet,auto)}} @media(max-width:520px){.pp-main-3d{aspect-ratio:var(--pp-3dg-aspect-mobile,var(--pp-aspect,1/1));height:var(--pp-3dg-height-mobile,auto)}} .pp-main-3d[hidden],.pp-main-media[hidden]{display:none} .pp-main-3d .pp-3d-viewer{margin-top:0;height:100%} .pp-main-3d .pp-3d-stage{height:100%} .pp-main-3d .pp-3d-host{height:100%;min-height:0;border:0;border-radius:0} .pp-main-3d .pp-3d-viewer.is-expanded{height:auto} /* The poster: a real image in the host until the scene mounts, and again after the gallery closes the viewer. The loading state sits over it. */ .pp-3d-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--pp-fit,contain);display:block} .pp-3d-viewer.is-loading .pp-3d-host::before{content:"";position:absolute;left:50%;top:50%;z-index:2;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid rgba(255,255,255,.7);border-top-color:#0f172a;animation:pp-spin .8s linear infinite} .pp-3d-viewer.is-loading .pp-3d-host::after{content:"Loading 3D\2026";position:absolute;left:50%;bottom:16px;z-index:2;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(24,24,27,.78);color:#fff;font-size:.8rem;white-space:nowrap} @media(prefers-reduced-motion:reduce){.pp-3d-viewer.is-loading .pp-3d-host::before{animation:none}} /* Long specification tables: clipped to ~N rows with a toggle. The rows stay in the DOM (visually clipped, not display:none) so they remain indexable. */ .pp-specs-clip{position:relative;max-height:calc(var(--pp-specs-rows,8) * 2.45rem);overflow:hidden;transition:max-height .25s ease} .pp-specs-collapsible:not(.is-open) .pp-specs-clip::after{content:"";position:absolute;inset:auto 0 0;height:3.2rem;background:linear-gradient(to bottom,transparent,var(--landing-page-background,#fff))} .pp-specs-collapsible.is-open .pp-specs-clip{max-height:none} .pp-specs-toggle{margin-top:8px;padding:8px 14px;border:1px solid rgba(15,23,42,.16);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer} .pp-specs-toggle:hover{background:color-mix(in srgb,currentColor 6%,transparent)} /* Information sections: independent native
(any number open, no script needed). "Tabs on desktop" is applied by the runtime, which adds .is-tabs and a tablist on wide screens; without it the block stays this accordion. */ .pp-info{display:grid;border-top:1px solid var(--landing-line,rgba(15,23,42,.12))} .pp-info-section{border-bottom:1px solid var(--landing-line,rgba(15,23,42,.12))} .pp-info-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px;cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;color:var(--landing-headline-color,inherit)} .pp-info-summary::-webkit-details-marker{display:none} .pp-info-summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease} .pp-info-section[open]>.pp-info-summary::after{transform:rotate(225deg) translateY(-3px)} .pp-info-summary:focus-visible,.pp-info-tab:focus-visible,.pp-faq-item>summary:focus-visible{outline:2px solid var(--landing-accent,currentColor);outline-offset:2px} .pp-info-panel{padding:0 2px 18px;line-height:1.6} .pp-info-panel>.pp-specs{margin-top:0} .pp-info-panel .lp-downloads{gap:10px} .pp-info-empty{margin:0;color:color-mix(in srgb,currentColor 60%,transparent)} .pp-info-list{margin:0;padding-left:1.2em;display:grid;gap:6px} .pp-info-field+.pp-info-field{margin-top:16px} .pp-info-field-name{margin:0 0 6px;font-size:.82rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:color-mix(in srgb,currentColor 70%,transparent)} .pp-info-tablist{display:none;gap:4px;border-bottom:1px solid var(--landing-line,rgba(15,23,42,.12));overflow-x:auto} .pp-info-tab{padding:12px 16px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap} .pp-info-tab[aria-selected="true"]{border-bottom-color:var(--landing-accent,currentColor);color:var(--landing-headline-color,inherit)} .pp-info.is-tabs{border-top:0} .pp-info.is-tabs>.pp-info-tablist{display:flex} .pp-info.is-tabs>.pp-info-section{border-bottom:0} .pp-info.is-tabs>.pp-info-section>.pp-info-summary{display:none} .pp-info.is-tabs>.pp-info-section>.pp-info-panel{padding-top:18px} .pp-faq{display:grid;gap:8px} .pp-faq-item{border:1px solid var(--landing-line,rgba(15,23,42,.12));border-radius:10px;padding:0 14px} .pp-faq-item>summary{padding:12px 0;cursor:pointer;font-weight:600} .pp-faq-answer{padding-bottom:12px} .pp-faq-answer>:first-child{margin-top:0} .pp-delivery-rates{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px} .pp-delivery-rates li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline} .pp-delivery-rate-name{font-weight:700} .pp-delivery-rate-estimate{color:color-mix(in srgb,currentColor 65%,transparent)} .pp-delivery-lead{margin:0 0 12px;font-weight:600} .pp-returns>p{margin:0 0 8px} /* Key specs by the price and the Delivery note by the buy button. */ .pp-key-specs{display:grid;gap:8px} .pp-key-specs-list{display:flex;flex-wrap:wrap;gap:10px;margin:0} .pp-key-spec{display:grid;gap:2px;min-width:92px;padding:10px 14px;border:1px solid var(--landing-line,rgba(15,23,42,.12));border-radius:10px;background:var(--landing-card-bg,transparent)} .pp-key-spec[hidden]{display:none} .pp-key-spec dt{font-size:.78rem;font-weight:600;color:color-mix(in srgb,currentColor 62%,transparent)} .pp-key-spec dd{margin:0;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums} .pp-key-specs-link{justify-self:start;font-size:.9rem;font-weight:600;color:inherit} .pp-delivery-note{margin:0;font-size:.92rem;font-weight:600;color:color-mix(in srgb,currentColor 78%,transparent)} .pp-action-row{display:flex;flex-wrap:wrap;gap:10px}.pp-card-action-own>*{flex:1 1 100%}.pp-card-action-own .pp-card-button,.pp-card-action-own .pp-commerce-action{width:100%}.pp-commerce-action,.pp-card-button{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 16px;border:1px solid var(--landing-button-border,transparent);border-radius:var(--landing-button-radius,999px);background:var(--landing-button-bg,var(--button-bg));color:var(--landing-button-text,var(--button-text));font:inherit;font-weight:800;text-decoration:none;cursor:pointer}.pp-commerce-action:disabled,.pp-commerce-action.is-disabled{opacity:.5;cursor:not-allowed}.pp-commerce-action.is-added{box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,var(--accent)) 25%,transparent)} .commerce-summary{display:grid;gap:18px}.commerce-lines{display:grid;gap:12px}.commerce-line{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(54px,auto) minmax(78px,auto);gap:12px;align-items:center;padding:12px;border:1px solid var(--landing-line,rgba(15,23,42,.12));border-radius:14px;background:var(--landing-card-bg,rgba(255,255,255,.78))}.commerce-line img,.commerce-line-placeholder{width:72px;height:72px;border-radius:10px;object-fit:cover;background:color-mix(in srgb,var(--landing-text-color,var(--ink)) 8%,var(--landing-card-bg,#f1f5f9))}.commerce-line-info{display:grid;gap:4px}.commerce-line strong{display:block}.commerce-line span,.commerce-line small,.commerce-note{color:color-mix(in srgb,currentColor 65%,transparent)}.commerce-qty{width:64px;min-height:36px;padding:6px 8px;border:1px solid var(--landing-line,rgba(15,23,42,.16));border-radius:9px;background:var(--landing-input-bg,#fff);color:var(--landing-text-color,inherit);font:inherit}.commerce-line-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.commerce-remove{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 12px;border:1px solid var(--landing-button-border,var(--button-border,transparent));border-radius:var(--landing-button-radius,999px);background:var(--landing-button-bg,var(--button-bg));color:var(--landing-button-text,var(--button-text));font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}.commerce-remove:hover{background:color-mix(in srgb,var(--landing-button-bg,var(--button-bg)) 86%,var(--landing-button-text,var(--button-text)) 14%)}.commerce-totals{display:grid;gap:8px;justify-self:end;min-width:min(100%,320px)}.commerce-totals>div{display:flex;justify-content:space-between;gap:16px}.commerce-total{padding-top:10px;border-top:1px solid var(--landing-line,rgba(15,23,42,.14));font-size:1.14rem}.commerce-checkout{display:inline-flex;align-items:center;justify-content:center;width:max-content;min-height:44px;padding:11px 20px;border:1px solid var(--landing-button-border,var(--button-border,transparent));border-radius:var(--landing-button-radius,999px);background:var(--landing-button-bg,var(--button-bg));color:var(--landing-button-text,var(--button-text));font:inherit;font-weight:900;text-decoration:none;cursor:pointer}.commerce-discount{display:flex;gap:8px;max-width:420px}.commerce-discount input,.commerce-checkout-form input,.commerce-address-grid input,.commerce-address-grid select,.commerce-auth-form input{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--landing-line,rgba(15,23,42,.16));border-radius:10px;background:var(--landing-input-bg,#fff);color:var(--landing-text-color,inherit);font:inherit}.commerce-discount button{min-height:42px;padding:10px 16px;border:1px solid var(--landing-button-border,var(--button-border,transparent));border-radius:var(--landing-button-radius,999px);background:var(--landing-button-bg,var(--button-bg));color:var(--landing-button-text,var(--button-text));font:inherit;font-weight:800;cursor:pointer}.commerce-wishlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.commerce-wishlist-card{display:grid;gap:10px;border:1px solid var(--landing-line,rgba(15,23,42,.12));border-radius:14px;overflow:hidden;background:var(--landing-card-bg,rgba(255,255,255,.78))}.commerce-wishlist-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.commerce-wishlist-card>div{display:grid;gap:8px;padding:12px}.commerce-wishlist-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.commerce-wishlist-actions .commerce-remove{margin-top:0}.commerce-checkout-form,.commerce-address-grid{display:grid;gap:12px}.commerce-address-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.commerce-address-grid label,.commerce-checkout-form label{display:grid;gap:6px;font-weight:700}.commerce-method,.commerce-order-status,.commerce-account,.commerce-empty,.commerce-auth-form,.commerce-order-history{padding:18px;border:1px solid var(--landing-line,rgba(15,23,42,.12));border-radius:14px;background:var(--landing-card-bg,rgba(255,255,255,.78));display:grid;gap:10px}.commerce-account-auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.commerce-auth-form h2,.commerce-order-history h2{margin:0;color:var(--landing-headline-color,inherit)}.commerce-auth-form label{display:grid;gap:6px;font-weight:700}.commerce-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px;font-weight:500!important}.commerce-check input{width:auto;min-height:0}.commerce-auth-message,.commerce-checkout-message{min-height:1.4em;color:color-mix(in srgb,currentColor 65%,transparent)}.commerce-auth-message.is-error,.commerce-checkout-message.is-error{color:#b91c1c}.commerce-order-history{gap:12px}.commerce-order-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--landing-line,rgba(15,23,42,.1));border-radius:12px;color:inherit;text-decoration:none}.commerce-order-row small{display:block;color:color-mix(in srgb,currentColor 60%,transparent)}.commerce-order-invoice{justify-self:start;color:inherit;font-weight:700}.commerce-order-credit-notes{display:grid;gap:6px;justify-self:start}.commerce-order-credit-notes strong{color:color-mix(in srgb,currentColor 70%,transparent);font-size:.9rem}[data-commerce-logout-form]{display:flex;flex-wrap:wrap;gap:10px;align-items:center}@media(max-width:620px){.commerce-line{grid-template-columns:56px minmax(0,1fr);align-items:start}.commerce-line img,.commerce-line-placeholder{width:56px;height:56px}.commerce-totals{justify-self:stretch}.commerce-discount{display:grid}.commerce-address-grid,.commerce-account-auth,.commerce-order-row{grid-template-columns:1fr}} .pp-empty{padding:24px;border:1px dashed rgba(15,23,42,.2);border-radius:16px;color:color-mix(in srgb,currentColor 60%,transparent)} /* Both follow the section's content width (Narrow…Full), as its title does; 1080px only outside a section. */ .pp-listing-header{max-width:var(--section-max,1080px);margin:0 auto clamp(20px,3vw,32px);} .pp-listing-header h1{margin:0 0 8px;font-size:clamp(1.6rem,3vw,2.2rem)} .pp-listing-header p{margin:0;color:color-mix(in srgb,currentColor 65%,transparent)} .pp-listing-layout{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:clamp(20px,3vw,40px);max-width:var(--section-max,1080px);margin:0 auto;align-items:start} .pp-listing-layout.no-filters{grid-template-columns:1fr} /* While an in-place filter update is in flight (FILTER_NAV_RUNTIME_SCRIPT). Dimming the whole listing rather than blanking the grid keeps the page height stable, so the scroll position the visitor clicked at doesn't move under them. */ .pp-listing-layout.is-loading{position:relative;opacity:.55;pointer-events:none;transition:opacity .12s ease} .pp-listing-layout.is-loading::after{content:"";position:absolute;top:12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;animation:pp-spin .7s linear infinite} @keyframes pp-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.pp-listing-layout.is-loading::after{animation:none}} /* The sidebar sticks and scrolls within the viewport, so a dozen groups never scroll away. */ .pp-filters{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.25) transparent} .pp-filters.desktop-top{position:static} .pp-filters.desktop-top .pp-filters-body{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start} /* `~`, not `+`: the range-slider script sits between the filters and the grid when a facet is a slider. */ .pp-listing-layout>.pp-filters.desktop-top,.pp-listing-layout>.pp-filters.desktop-top~div{grid-column:1/-1} .pp-filters-body{display:grid;gap:20px} .pp-filters-toggle{display:none} .pp-filter-group{display:grid;gap:8px} .pp-filter-legend{font-weight:700;font-size:.85rem;cursor:pointer;list-style:none} .pp-filter-legend::-webkit-details-marker{display:none} .pp-filter-legend::after{content:'−';float:right;opacity:.5;font-weight:400} .pp-filter-group:not([open])>.pp-filter-legend::after{content:'+'} .pp-filter-values{display:flex;flex-wrap:wrap;gap:6px} /* A per-row count switches the value list from wrapping pills to a fixed grid, so swatches stack predictably instead of reflowing with the label lengths. */ .pp-filter-group[style*="--pp-filter-cols"]>.pp-filter-values{display:grid;grid-template-columns:repeat(var(--pp-filter-cols,4),minmax(0,1fr))} .pp-filter-value{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid rgba(15,23,42,.16);border-radius:999px;font-size:.82rem;color:inherit;text-decoration:none;min-height:34px} .pp-filter-value.is-active{background:var(--landing-accent,var(--accent));border-color:var(--landing-accent,var(--accent));color:var(--landing-button-text,var(--button-text))} /* Instant filtering (FILTER_NAV_RUNTIME_SCRIPT): values no row would match under the current selection stay clickable but read as such; cards and the empty state toggle with `hidden`. */ .pp-filter-value.is-empty{opacity:.45} .pp-filter-value[hidden]{display:none} /* Long groups: the first values, then the rest behind a "Show all"
(no script needed), plus a search box the runtime filters with. */ .pp-filter-more{display:grid;gap:8px} .pp-filter-more-toggle{cursor:pointer;list-style:none;font-size:.8rem;font-weight:600;opacity:.75} .pp-filter-more-toggle::-webkit-details-marker{display:none} .pp-filter-more[open]>.pp-filter-more-toggle,.pp-filter-group.is-searching .pp-filter-more-toggle{display:none} .pp-filter-group[style*="--pp-filter-cols"] .pp-filter-more>.pp-filter-values{display:grid;grid-template-columns:repeat(var(--pp-filter-cols,4),minmax(0,1fr))} .pp-filter-search{width:100%;min-height:34px;padding:6px 10px;border:1px solid rgba(15,23,42,.16);border-radius:9px;background:var(--landing-card-bg,#fff);color:inherit;font:inherit;font-size:.82rem} .pp-card[hidden],.pp-empty[hidden]{display:none} .pp-active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .pp-active-filters[hidden]{display:none} .pp-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--landing-accent,var(--accent));color:var(--landing-button-text,var(--button-text));font-size:.8rem;text-decoration:none} .pp-filter-chip-remove{font-weight:700;opacity:.8} .pp-filter-clear{font-size:.8rem;color:inherit;opacity:.75} .pp-filter-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,23,42,.2);flex:0 0 auto} .pp-filter-thumb{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:0 0 auto} .pp-filter-box{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid rgba(15,23,42,.35);border-radius:4px;font-size:.7rem;line-height:1;flex:0 0 auto} /* Checkbox style reads as a list; dropdown is a real native select below. */ .pp-filter-group.display-checkboxes .pp-filter-values{flex-direction:column;align-items:stretch} .pp-filter-group.display-checkboxes .pp-filter-value{border:0;border-radius:8px;padding:5px 8px;justify-content:flex-start} .pp-filter-group.display-checkboxes .pp-filter-value.is-active{background:color-mix(in srgb,var(--landing-accent,var(--accent)) 14%,transparent);color:inherit} .pp-filter-select{width:100%;min-height:40px;padding:8px 34px 8px 10px;border:1px solid rgba(15,23,42,.16);border-radius:9px;background:var(--landing-card-bg,#fff);color:inherit;font:inherit;font-size:.85rem;cursor:pointer} .pp-filter-group.display-swatches .pp-filter-value,.pp-filter-group.display-image_swatches .pp-filter-value{justify-content:flex-start} .pp-card-grid{display:grid;grid-template-columns:repeat(var(--pp-card-cols,4),minmax(0,1fr));gap:clamp(16px,2.5vw,28px)} .lp-product-list.layout-scroll .pp-card-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,calc(100% / var(--pp-card-cols,4)));overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;padding-bottom:10px} .lp-product-list.layout-scroll .pp-card{scroll-snap-align:start} .pp-card{position:relative;display:flex;flex-direction:column;color:inherit;text-decoration:none;border:1px solid var(--pp-product-card-border,rgba(15,23,42,.1));border-radius:16px;overflow:visible;background:var(--pp-product-card-bg,var(--landing-card-bg,#fff));text-align:var(--pp-card-align,left)} .pp-card.is-colour-open{z-index:20} /* Stretched link: the whole card is one click target, but real links and buttons inside the card sit above it and win their own clicks. */ .pp-card-link{position:absolute;inset:0;z-index:1;text-decoration:none} .pp-card-link:focus-visible{outline:2px solid var(--landing-accent,var(--accent));outline-offset:-3px} .pp-card-body a,.pp-card-button{position:relative;z-index:2} .pp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .pp-card-specs{width:100%;margin-top:8px;border-collapse:collapse;font-size:.78rem} .pp-card-specs-toggle{position:relative;z-index:3;margin-top:8px;font-size:.78rem} .pp-card-specs-toggle>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(15,23,42,.08);font-weight:600;cursor:pointer;list-style:none} .pp-card-specs-toggle>summary::-webkit-details-marker{display:none} .pp-card-specs-toggle>summary::after{content:"+";font-weight:400} .pp-card-specs-toggle[open]>summary::after{content:"\2212"} .pp-card-specs-toggle .pp-card-specs{margin-top:2px} .pp-card-specs td{padding:3px 0;border-bottom:1px solid rgba(15,23,42,.08);vertical-align:top} .pp-card-specs td:first-child{padding-right:10px;color:color-mix(in srgb,currentColor 60%,transparent)} .pp-card-field{margin-top:6px;font-size:.8rem} .pp-card-field-label{color:color-mix(in srgb,currentColor 60%,transparent)} .pp-card-heading{margin:8px 0 4px;font-size:.9rem} .pp-card-text{margin-top:6px;font-size:.82rem;line-height:1.45} .pp-card-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:10px;padding:7px 14px;border:1px solid var(--pp-product-card-button-border,var(--landing-button-border,var(--button-border,transparent)));border-radius:var(--landing-button-radius,999px);background:var(--pp-product-card-button-bg,var(--landing-button-bg,var(--button-bg)));color:var(--pp-product-card-button-text,var(--landing-button-text,var(--button-text)));font-size:.82rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none} /* Card actions (product_card.rs). The buttons also carry .pp-commerce-action for its disabled / added states; these keep the card's own size and font. Primary is the rule above; Secondary is a quiet tint, Outline the button colour as a border. A per-button colour (the card block's style) sets the --pp-product-card-button-* variables on the button itself, so it wins over the grid's; its size and hover rules are scoped by .pp-card so they outrank the grid block's own (the [style*] rules below). */ .pp-card-button.pp-commerce-action{min-height:36px;padding:7px 14px;font-size:.82rem;font-weight:700;line-height:1.2} .pp-card-action-row .pp-card-button{margin-top:0} .pp-card-button.secondary{border-color:transparent;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit} .pp-card-button.outline{border-color:var(--pp-product-card-button-bg,var(--landing-button-bg,var(--button-bg)));background:transparent;color:var(--pp-product-card-button-bg,var(--landing-button-bg,var(--button-bg)))} .pp-card-button.secondary[style*="--pp-product-card-button-bg:"]{background:var(--pp-product-card-button-bg)} .pp-card-button:is(.secondary,.outline)[style*="--pp-product-card-button-text:"]{color:var(--pp-product-card-button-text)} .pp-card-button:is(.secondary,.outline)[style*="--pp-product-card-button-border:"]{border-color:var(--pp-product-card-button-border)} .pp-card-button:disabled{opacity:.5;cursor:not-allowed} .pp-card-button.is-added{box-shadow:0 0 0 2px color-mix(in srgb,var(--landing-accent,var(--accent)) 30%,transparent)} .pp-card-button.secondary.is-added{background:color-mix(in srgb,currentColor 14%,transparent)} .pp-card .pp-card-button[style*="--landing-button-border-width:"]{border-width:var(--landing-button-border-width)} .pp-card .pp-card-button[style*="--landing-button-shadow:"]{box-shadow:var(--landing-button-shadow)} .pp-card .pp-card-button[style*="--lp-button-min-height:"]{min-height:var(--lp-button-min-height)} .pp-card .pp-card-button[style*="--lp-button-padding:"]{padding:var(--lp-button-padding)} .pp-card .pp-card-button[style*="--lp-button-font-size:"]{font-size:var(--lp-button-font-size)} .pp-card .pp-card-button[style*="--lp-button-font-weight:"]{font-weight:var(--lp-button-font-weight)} .pp-card .pp-card-button[style*="--lp-button-text-transform:"]{text-transform:var(--lp-button-text-transform)} .pp-card .pp-card-button[style*="--lp-button-line-height:"]{line-height:var(--lp-button-line-height)} .pp-card .pp-card-button[style*="--lp-button-letter-spacing:"]{letter-spacing:var(--lp-button-letter-spacing)} .pp-card .pp-card-button[style*="--lp-button-width:"]{width:var(--lp-button-width);max-width:100%} .pp-card .pp-card-button[style*="--lp-button-hover-bg:"].lp-has-hover:hover{background:var(--lp-button-hover-bg)} .pp-card .pp-card-button[style*="--lp-button-hover-text:"].lp-has-hover:hover{color:var(--lp-button-hover-text)} .pp-card .pp-card-button[style*="--lp-button-hover-shadow:"].lp-has-hover:hover{box-shadow:var(--lp-button-hover-shadow)} /* A grid set to Stretch horizontal position stretches .pp-commerce-action buttons (landing.css); inside a card the row decides. */ .landing-block[style*="justify-self:stretch"] .pp-card-action-row:not(.pp-card-action-own) .pp-card-button{width:auto} /* Stacked action rows share the inline gap; Stretch shares the row's width; the actions that end the card sit at its bottom, so a row of cards lines its buttons up. */ .pp-card-actions+.pp-card-actions{margin-top:-12px;padding-top:10px} .pp-card-actions-stretch>*{flex:1 1 0;min-width:max-content} .pp-card-actions-foot{margin-top:auto} .pp-card-image{position:relative;aspect-ratio:var(--pp-card-ratio,1/1);background:var(--pp-product-card-image-bg,var(--landing-card-bg,#fff));overflow:hidden;border-radius:15px 15px 0 0} .pp-card-image img{width:100%;height:100%;object-fit:var(--pp-card-fit,cover);object-position:var(--pp-object-position,center);display:block;transition:opacity .16s ease} /* Second image on hover: pointer devices only, so touch never sticks on it; display:none elsewhere keeps the lazy image from downloading. */ .pp-card-image-hover{display:none} @media(hover:hover){.pp-card-image-hover{display:block;position:absolute;inset:0;opacity:0;transition:opacity .25s ease}.pp-card:hover .pp-card-image-hover,.pp-card:focus-within .pp-card-image-hover{opacity:1}} @media(prefers-reduced-motion:reduce){.pp-card-image-hover{transition:none}} .pp-card-image-placeholder{width:100%;height:100%;background:var(--pp-product-card-image-bg,color-mix(in srgb,currentColor 5%,var(--landing-card-bg,#fff)))} .pp-card-image.is-loading [data-pp-card-configurator-image]{opacity:.58} .pp-card-image.is-loading::after{content:"";position:absolute;z-index:3;top:50%;left:50%;width:22px;height:22px;margin:-11px;border:2px solid color-mix(in srgb,currentColor 24%,transparent);border-top-color:currentColor;border-radius:50%;animation:pp-spin .7s linear infinite;pointer-events:none} @media(prefers-reduced-motion:reduce){.pp-card-image img{transition:none}.pp-card-image.is-loading::after{animation:none}} .pp-card-image.is-error [data-pp-card-configurator-image]{display:none} .pp-card-image-fallback{display:none;width:100%;height:100%} .pp-card-image.is-error .pp-card-image-fallback{display:block} .pp-card-body{padding:12px 14px} .pp-card-badges{margin-bottom:6px} .pp-card-badge{display:inline-block;margin-right:6px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pp-product-card-badge-color,color-mix(in srgb,currentColor 60%,transparent))} .pp-card-badge.is-sale{padding:2px 7px;border-radius:999px;background:var(--pp-product-card-sale-bg,var(--landing-accent,var(--accent)));color:var(--pp-product-card-sale-text,var(--landing-button-text,var(--button-text)))} .pp-card-was{margin-left:6px;opacity:.55;font-weight:400} .pp-card-title{color:var(--pp-product-card-title-color,inherit);font-weight:700;font-size:.95rem;margin-bottom:4px} .pp-card-variant{font-size:.8rem;opacity:.7;margin-bottom:4px} .pp-card-description{margin-top:6px;font-size:.82rem;line-height:1.45;color:color-mix(in srgb,currentColor 75%,transparent)} .pp-card-description ul,.pp-card-description ol{margin:4px 0;padding-left:18px} .pp-card-description li{margin:2px 0} .pp-card-description a{color:inherit} /* Icons used as bullets are sized to the text line so a set of source images with different natural dimensions still renders as a uniform run. An author-set width or height on the tag wins, for the case where a real (non-icon) image is wanted. */ .pp-card-description img{height:1.15em;width:auto;max-width:100%;vertical-align:-.15em} .pp-card-description img[width],.pp-card-description img[height]{height:auto} .pp-card-description li img{margin-right:4px} .pp-card-swatches{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .pp-card-colour{position:relative;z-index:3;margin-top:9px;text-align:left} .pp-card-colour-trigger{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:9px;background:var(--landing-card-bg,var(--bg,#fff));color:inherit;font:inherit;cursor:pointer} .pp-card-colour-trigger .pp-card-colour-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-card-colour-chip{display:inline-block;flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:1px solid rgba(15,23,42,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .pp-card-colour-popover{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;padding:8px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:11px;background:var(--landing-card-bg,var(--bg,#fff));box-shadow:0 16px 38px rgba(15,23,42,.2)} .pp-card-colour-popover[hidden]{display:none} .pp-card-colour-search{width:100%;padding:9px 10px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:8px;font:inherit} .pp-card-colour-options{max-height:180px;overflow:auto;margin-top:6px} .pp-card-colour-option{width:100%;display:flex;align-items:center;gap:9px;padding:8px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .pp-card-colour-option:hover,.pp-card-colour-option[aria-selected="true"]{background:color-mix(in srgb,var(--accent,#334155) 10%,transparent)} .pp-card-colour-empty{margin:10px;color:color-mix(in srgb,currentColor 60%,transparent);font-size:.85rem} .pp-card-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,23,42,.2);overflow:hidden;display:inline-flex;align-items:center;justify-content:center} .pp-card-swatch img{width:100%;height:100%;object-fit:cover;display:block} .pp-card-swatch.is-text{width:auto;min-width:16px;padding:0 5px;border-radius:999px;font-size:.62rem;font-weight:700} .pp-card-swatch-more{font-size:.7rem;opacity:.6;align-self:center} .pp-card-price{font-size:.9rem;color:var(--pp-product-card-price-color,color-mix(in srgb,currentColor 70%,transparent))} .pp-range-form{display:grid;gap:10px} .pp-range-inputs{display:flex;align-items:center;gap:6px} .pp-range-unit{font-size:.8rem;opacity:.6} .pp-range-input{width:100%;min-width:0;min-height:34px;padding:5px 8px;border:1px solid rgba(15,23,42,.16);border-radius:8px;font:inherit;font-size:.82rem;color:inherit;background:transparent} .pp-range-dash{opacity:.5} .pp-range-apply{min-height:34px;padding:5px 14px;border:1px solid rgba(15,23,42,.16);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer} /* With the slider active the button becomes a fallback for keyboard/manual entry, so it stays present but recedes. Without script it is the only way to apply, and stays full. */ .pp-range-apply.is-enhanced{opacity:.75;font-weight:400} .pp-range-track{position:relative;height:34px;display:flex;align-items:center;touch-action:none;cursor:pointer} .pp-range-track::before{content:'';position:absolute;left:0;right:0;height:5px;border-radius:999px;background:rgba(15,23,42,.15)} .pp-range-fill{position:absolute;height:5px;border-radius:999px;background:var(--landing-accent,var(--accent))} .pp-range-slider{position:absolute;left:0;width:100%;margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none} .pp-range-slider::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab} .pp-range-slider::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;border:3px solid #fff;background:var(--landing-accent,var(--accent));box-shadow:0 1px 5px rgba(15,23,42,.35);cursor:grab} .pp-range-slider::-moz-range-track{background:transparent} .pp-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:clamp(14px,2vw,20px)} .pp-sort.align-left{justify-content:flex-start}.pp-sort.align-center{justify-content:center}.pp-sort.align-right{justify-content:flex-end} .pp-sort-label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700} .pp-sort-select{min-height:40px;padding:8px 34px 8px 11px;border:1px solid rgba(15,23,42,.16);border-radius:9px;background:var(--landing-card-bg,#fff);color:inherit;font:inherit;font-size:.85rem;cursor:pointer} .pp-sort-apply,.pp-sort-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid rgba(15,23,42,.16);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:700;text-decoration:none;cursor:pointer} .pp-sort-links{display:flex;flex-wrap:wrap;gap:6px} .pp-sort-link:hover,.pp-sort-link:focus-visible,.pp-sort-apply:hover,.pp-sort-apply:focus-visible{border-color:var(--landing-accent,var(--accent))} .pp-sort-link.is-active{border-color:var(--landing-accent,var(--accent));background:var(--landing-accent,var(--accent));color:var(--landing-button-text,var(--button-text))} .pp-pagination{display:grid;gap:12px;justify-items:center;margin-top:clamp(24px,4vw,40px)} .pp-pagination-count{font-size:.85rem;color:color-mix(in srgb,currentColor 65%,transparent)} .pp-pagination-pages{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center} .pp-page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:6px 12px;border:1px solid rgba(15,23,42,.16);border-radius:10px;color:inherit;text-decoration:none;font-size:.85rem} .pp-page-link.is-active{background:var(--landing-accent,var(--accent));border-color:var(--landing-accent,var(--accent));color:var(--landing-button-text,var(--button-text));font-weight:700} .pp-page-gap{padding:0 4px;color:color-mix(in srgb,currentColor 50%,transparent)} @media(max-width:980px){.pp-card-grid{grid-template-columns:repeat(var(--pp-card-cols-tablet,3),minmax(0,1fr))}} @media(max-width:980px){.lp-product-list.layout-scroll .pp-card-grid{grid-template-columns:none;grid-auto-columns:minmax(220px,calc(100% / var(--pp-card-cols-tablet,3)))}} @media(max-width:760px){.pp-listing-layout{grid-template-columns:1fr} /* Drawer mode: the whole sidebar collapses behind one toggle so the grid isn't pushed below a wall of filters. `stacked` keeps everything open. The runtime closes the native
on phone widths; its open SSR fallback remains usable when scripts are blocked. */ .pp-filters{position:static;max-height:none;overflow:visible} .pp-filters.desktop-top .pp-filters-body{grid-template-columns:1fr} .pp-filters.mobile-drawer>.pp-filters-drawer:not([open])>.pp-filters-body{display:none} .pp-filters.mobile-drawer .pp-filters-toggle{display:inline-flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:1px solid rgba(15,23,42,.16);border-radius:12px;font-weight:700;font-size:.9rem;cursor:pointer;list-style:none;margin-bottom:12px} .pp-filters.mobile-drawer .pp-filters-toggle::-webkit-details-marker{display:none} .pp-filters.mobile-drawer .pp-filters-toggle::after{content:'▾';margin-left:auto;opacity:.6} .pp-filters.mobile-drawer>.pp-filters-drawer[open]>.pp-filters-toggle::after{content:'▴'} .pp-sort,.pp-sort.align-left,.pp-sort.align-center,.pp-sort.align-right{justify-content:flex-start} .pp-sort-label{flex-wrap:wrap}.pp-sort-select{max-width:100%}} @media(max-width:560px){.pp-card-grid{grid-template-columns:repeat(var(--pp-card-cols-mobile,2),minmax(0,1fr))}} @media(max-width:560px){.lp-product-list.layout-scroll .pp-card-grid{grid-template-columns:none;grid-auto-columns:minmax(210px,calc(100% / var(--pp-card-cols-mobile,2)))}} /* B3-30: wishlist page layout and project controls, formerly a per-render inline