
.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 58%,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}
/* 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)}
.pp-action-row{display:flex;flex-wrap:wrap;gap:10px}.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-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--landing-button-border,var(--button-border,transparent));border-radius:var(--landing-button-radius,999px);color:var(--landing-button-text,var(--button-text));text-decoration:none;font-weight:800;background:var(--landing-button-bg,var(--button-bg))}.commerce-button strong{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--landing-button-text,var(--button-text)) 20%,transparent);color:var(--landing-button-text,var(--button-text));font-size:.78rem}.commerce-btn-icon{width:20px;height:20px;flex:0 0 auto}.commerce-button.display-icon{padding:8px 10px}.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)}[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)}
.pp-listing-header{max-width: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: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}}
.pp-filters{position:sticky;top:16px}
.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}
.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))}
.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:block;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 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}
.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);display:block;transition:opacity .16s ease}
.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
   <details> on phone widths; its open SSR fallback remains usable when scripts are blocked. */
.pp-filters{position:static}
.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)))}}
