/* Product page — B2B catalogue + quotation (brief/b2b-installatori.md §5.2). Tokens from tokens.css; components from base.css. */

/* ---------- top / breadcrumb ---------- */
.pd-top { padding-top: 20px; }
.pd-crumbs { min-height: 29px; font-size: 13px; color: var(--color-muted); }
.pd-crumbs ol { display: flex; flex-wrap: nowrap; gap: 4px 0; list-style: none; padding: 0; margin: 0; white-space: nowrap; } /* one line: no shift when JS writes long names (FV-P4) */
.pd-crumbs li { display: inline-flex; align-items: center; flex: none; }
.pd-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.pd-crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-top: 1.5px solid var(--color-border-strong); border-right: 1.5px solid var(--color-border-strong); transform: rotate(45deg); }
.pd-crumbs a { color: var(--color-foreground-2); text-decoration: none; padding-block: 4px; }
.pd-crumbs a:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.pd-crumbs [aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-muted); }

/* ---------- hero grid ---------- */
.pd-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; padding-block: 20px clamp(48px, 6vw, 88px); }

/* ---------- gallery ---------- */
.pd-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; position: sticky; top: calc(var(--header-height-live, var(--header-height)) + 16px); }
.pd-thumbs { display: flex; flex-direction: column; gap: 10px; align-self: stretch; height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: none; padding: 2px; mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.pd-thumbs.is-end { mask-image: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb { position: relative; flex: none; width: 72px; height: 72px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--color-border); overflow: hidden; padding: 4px; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.pd-thumb picture, .pd-thumb img { width: 100%; height: 100%; }
.pd-thumb img { object-fit: contain; }
.pd-thumb:hover { border-color: var(--color-foreground-2); }
.pd-thumb[aria-current="true"] { border-color: var(--color-deep); box-shadow: inset 0 0 0 1px var(--color-deep); }
.pd-thumb:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pd-thumb--video { background: var(--color-deep); border-color: var(--color-deep); }
.pd-thumb__play { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.pd-thumb__play .icon { width: 22px; height: 22px; }

.pd-stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: #fff; border: 1px solid var(--color-border); overflow: hidden; }
.pd-stage__ph { position: absolute; inset: 0; border-radius: 0; }
.pd-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pd-track::-webkit-scrollbar { display: none; }
.pd-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; }
.pd-zoomable { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(16px, 4%, 40px); background: #fff; cursor: zoom-in; }
.pd-zoomable picture { display: contents; }
.pd-zoomable img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform var(--duration-slow) var(--ease-out); }
@media (hover: hover) { .pd-zoomable:hover img { transform: scale(1.03); } }
.pd-zoomable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -6px; border-radius: var(--radius-card); }
.pd-stage__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(255 255 255 / 0.92); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--duration-base), background-color var(--duration-fast); }
.pd-stage__nav--prev { left: 14px; }
.pd-stage__nav--next { right: 14px; }
.pd-stage:hover .pd-stage__nav, .pd-stage__nav:focus-visible { opacity: 1; }
.pd-stage__nav:hover { background: #fff; }
.pd-stage__count { position: absolute; right: 16px; bottom: 14px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.92); font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-foreground-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.pd-dots { display: none; }

/* video slides: poster only (nothing loads from YouTube until play) */
.pd-slide--video { background: var(--color-deep); }
.pd-video { display: grid; align-content: center; justify-items: start; gap: 10px; width: 100%; height: 100%; padding: clamp(24px, 8%, 64px); color: #fff; text-align: left; background: radial-gradient(120% 90% at 85% 10%, rgb(0 146 216 / 0.45), transparent 60%), var(--color-deep); }
.pd-video__play { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 50%; background: #fff; color: var(--color-deep); box-shadow: var(--shadow-md); transition: transform var(--duration-base) var(--ease-out); }
.pd-video__play .icon { width: 26px; height: 26px; }
.pd-video:hover .pd-video__play { transform: scale(1.06); }
.pd-video:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
.pd-video__kicker { font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: rgb(255 255 255 / 0.78); }
.pd-video__title { max-width: 18ch; font-size: clamp(22px, 2.4vw, 32px); font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.pd-video__note { font-size: 13px; color: rgb(255 255 255 / 0.78); }
.pd-slide--video { position: relative; }
.pd-video__consent { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; gap: 16px; padding: clamp(24px, 8%, 64px); color: #fff; background: rgb(0 40 76 / 0.94); }
.pd-video__consent p { max-width: 42ch; font-size: 15px; line-height: 1.5; }
.pd-video__consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pd-video__consent .button { --button-bg: #fff; --button-fg: var(--color-deep); --button-border: #fff; }
.pd-video__consent .link { color: #fff; }
.pd-video__frame { width: 100%; height: 100%; border: 0; background: #000; }

/* ---------- info column ---------- */
.pd-info { padding-top: 8px; min-width: 0; }
/* CLS: until product.js fills them, the sections below reserve a viewport so the footer never jumps into view */
.pd-sections:empty { min-height: 100vh; }
.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-title { margin-top: 12px; font-size: clamp(2rem, 3.2vw, 2.875rem); font-weight: var(--font-weight-medium); line-height: 1.08; letter-spacing: var(--letter-spacing-display); text-wrap: balance; }
.pd-summary { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--color-foreground-2); max-width: 52ch; text-wrap: pretty; }
.pd-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pd-form fieldset { min-width: 0; }
.pd-option legend { margin-bottom: 12px; }
.pd-option .option-pill.is-disabled span { opacity: 0.4; cursor: not-allowed; border-style: dashed; }
.pd-option .option-pill.is-disabled input { cursor: not-allowed; }

/* quantity → «Aggiungi alla quotazione» → «Parla con un tecnico» (full width: the info column is 360–520 px wide) */
.pd-buy { display: grid; gap: 12px; }
.pd-qty { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.pd-qty__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-foreground-2); }
.pd-qty .quantity { height: var(--control-height); }
.pd-buy__main, .pd-buy__tech { width: 100%; }
.pd-buy__tech .icon { width: 20px; height: 20px; }
.pd-buy__note { margin-top: -10px; font-size: 13px; color: var(--color-muted); }

.pd-assure { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 14px; line-height: 1.5; color: var(--color-foreground-2); }
.pd-assure .icon { flex: none; width: 20px; height: 20px; color: var(--color-link); margin-top: 1px; }
.pd-assure b { font-weight: var(--font-weight-semibold); color: var(--color-foreground); }

.pd-model { margin-top: 10px; font-size: 13px; color: var(--color-muted); letter-spacing: 0.01em; }
.pd-model b { margin-left: 4px; font-weight: var(--font-weight-semibold); color: var(--color-foreground-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-model b.is-na { font-weight: var(--font-weight-regular); color: var(--color-muted); }
.pd-series { letter-spacing: 0.04em; }
.pd-sheet { display: inline-grid; grid-template-columns: 22px auto; align-items: center; gap: 10px; min-height: var(--touch-target); margin-top: 20px; padding: 8px 16px 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-foreground); text-decoration: none; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.pd-sheet .icon { width: 22px; height: 22px; color: var(--color-link); }
.pd-sheet > span { display: grid; font-size: 14px; font-weight: var(--font-weight-semibold); line-height: 1.25; }
.pd-sheet small { font-size: 12px; font-weight: var(--font-weight-regular); color: var(--color-muted); }
.pd-sheet:hover { border-color: var(--color-deep); background: var(--color-tint); }
.pd-sheet:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pd-vnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface); font-size: 13px; line-height: 1.5; color: var(--color-foreground-2); }
.pd-vnote .icon { flex: none; width: 18px; height: 18px; color: var(--color-link); margin-top: 1px; }
.pd-vnote[hidden] { display: none; }

/* placeholder figure: product without an official photo (backup box EBU) */
.pd-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; margin: 0; padding: 32px; text-align: center; background: linear-gradient(180deg, var(--color-surface), #fff 70%); }
.pd-placeholder__mark { display: grid; place-items: center; width: clamp(120px, 22%, 168px); aspect-ratio: 1; border-radius: 28px; background: #fff; box-shadow: var(--shadow-md), inset 0 0 0 1px var(--color-border); color: var(--color-deep); }
.pd-placeholder__mark .icon { width: 56%; height: 56%; }
.pd-placeholder figcaption { display: grid; gap: 6px; max-width: 34ch; }
.pd-placeholder b { font-size: 18px; font-weight: var(--font-weight-semibold); }
.pd-placeholder figcaption > span { font-size: 14px; color: var(--color-foreground-2); }
.pd-placeholder small { font-size: 12px; color: var(--color-muted); }
.pd-gallery--empty { grid-template-columns: minmax(0, 1fr); }
.pd-gallery--empty .pd-thumbs { display: none; }

/* ---------- key numbers ---------- */
.pd-numbers { border-top: 1px solid var(--color-border); padding-block: clamp(40px, 5vw, 72px); }
.pd-numbers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.pd-num { border-top: 1px solid var(--color-border); padding-top: 20px; }
.pd-num__v { display: flex; align-items: baseline; gap: 8px; color: var(--color-primary); }
.pd-num__v b { font-size: clamp(44px, 5vw, 76px); font-weight: var(--font-weight-light); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-num--long .pd-num__v b { font-size: clamp(32px, 3.6vw, 56px); } /* «1P+N+PE», «97,3–97,6»: one step down so they keep to their column */
.pd-num__v span { font-size: clamp(16px, 1.4vw, 20px); font-weight: var(--font-weight-regular); color: var(--color-link); } /* small unit text: #0077B6, AA */
.pd-num__l { margin-top: 12px; font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-foreground-2); max-width: 26ch; }
.pd-num__l span { font-weight: var(--font-weight-regular); color: var(--color-muted); }
.pd-numbers__note { margin-top: 20px; font-size: 13px; color: var(--color-muted); }

/* ---------- componi il kit: configuration tile (grey) + summary tile (Deep Blue) ---------- */
.pd-kit, .pd-pairs { padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--color-border); } /* follows the key numbers band */
.pd-kit__head { max-width: 64ch; margin-bottom: clamp(28px, 3.5vw, 44px); }
.pd-kit__head .h2 { margin: 12px 0; }
.pd-kit__lead { font-size: 16px; line-height: 1.6; color: var(--color-foreground-2); text-wrap: pretty; }
.pd-kit__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--grid-gap); align-items: start; }
.pd-kit__rows { padding: 4px clamp(20px, 2.4vw, 32px); border-radius: var(--radius-card); background: var(--color-surface); }
.pd-kit__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding-block: 24px; }
.pd-kit__row + .pd-kit__row { border-top: 1px solid var(--color-border-strong); }
.pd-kit__thumb { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-sm); background: #fff; overflow: hidden; transition: opacity var(--duration-fast); }
.pd-kit__thumb picture { display: contents; }
.pd-kit__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pd-kit__thumb .media-ph { background: #fff; }
.pd-kit__body { min-width: 0; }
.pd-kit__role { font-size: 12px; line-height: 1.3; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-muted); }
.pd-kit__name { margin-top: 6px; font-size: 17px; line-height: 1.3; font-weight: var(--font-weight-medium); }
.pd-kit__toggle { min-height: 0; margin-top: 4px; padding-block: 2px; font-size: 17px; font-weight: var(--font-weight-medium); line-height: 1.3; }
.pd-kit__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.pd-kit__field { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--color-foreground-2); transition: opacity var(--duration-fast); }
.pd-kit__field .select { width: auto; min-width: 220px; max-width: 100%; min-height: var(--touch-target); border-radius: var(--radius-pill); font-size: 15px; }
.pd-kit__code { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-kit__row.is-off .pd-kit__field, .pd-kit__row.is-off .pd-kit__thumb { opacity: 0.45; } /* the code below stays readable (AA) */
.pd-kit__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.pd-kit__type { position: relative; display: block; cursor: pointer; }
.pd-kit__type input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pd-kit__type span { display: grid; gap: 3px; height: 100%; padding: 12px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: #fff; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.pd-kit__type b { font-size: 14px; line-height: 1.35; font-weight: var(--font-weight-semibold); text-wrap: balance; }
.pd-kit__type small { font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-deep); font-variant-numeric: tabular-nums; }
.pd-kit__type:hover span { border-color: var(--color-foreground-2); }
.pd-kit__type input:checked + span { border-color: var(--color-deep); box-shadow: inset 0 0 0 1px var(--color-deep); }
.pd-kit__type input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* module stack: one tick per module; past 8 (gap + Midea Blue) the tech line confirms the configuration */
.pd-kit__mods { display: flex; gap: 3px; margin-top: 14px; }
.pd-kit__mods i { width: 16px; height: 10px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-border-strong); transition: background-color var(--duration-fast); }
.pd-kit__mods i:nth-child(9) { margin-left: 7px; }
.pd-kit__mods i.is-over { box-shadow: none; outline: 1px dashed var(--color-border-strong); outline-offset: -1px; }
.pd-kit__mods i.is-on { background: var(--color-deep); box-shadow: none; outline: 0; }
.pd-kit__mods i.is-on.is-over { background: var(--color-primary); }
.pd-kit__sum { position: sticky; top: calc(var(--header-height-live, var(--header-height)) + 24px); display: grid; gap: 18px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius-card); background: var(--color-deep); color: #fff; }
.pd-kit__line { font-size: 19px; line-height: 1.45; font-weight: var(--font-weight-medium); letter-spacing: -0.01em; }
.pd-kit__line b { display: block; margin-bottom: 8px; font-size: 13px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.pd-kit__add { width: 100%; padding-inline: 20px; font-size: 17px; white-space: normal; text-align: center; line-height: 1.25; }
.pd-kit__note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-inline: -12px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.8); transition: background-color var(--duration-base), color var(--duration-base); }
.pd-kit__note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pd-kit__note.is-on { background: rgb(255 255 255 / 0.12); color: #fff; }
.pd-kit__tech { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: var(--touch-target); font-size: 15px; font-weight: var(--font-weight-semibold); color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.45); text-underline-offset: 4px; transition: text-decoration-color var(--duration-fast); }
.pd-kit__tech:hover { text-decoration-color: #fff; }
.pd-kit__tech .icon { width: 18px; height: 18px; }
.pd-kit__sum :focus-visible { outline-color: #fff; }
.pd-kit__none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px 28px; border-radius: var(--radius-card); background: var(--color-surface); }
.pd-kit__none p { display: flex; gap: 10px; align-items: flex-start; max-width: 60ch; color: var(--color-foreground-2); }
.pd-kit__none .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--color-link); }

/* ---------- feature story (home variant B craft) ---------- */
.pd-story__head { max-width: 40ch; margin-bottom: clamp(32px, 4vw, 56px); }
.pd-story__head .h2 { margin-top: 12px; }
.pd-story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.pd-story__media { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-height-compact) + 32px); align-self: start; height: min(600px, calc(100vh - 140px)); }
.pd-story__card { position: relative; height: 100%; border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.pd-story__vis { position: absolute; inset: 0; display: grid; place-items: center; padding: 16% 10% 12%; opacity: 0; transform: translateY(20px) scale(0.97); transition: opacity var(--duration-slow) var(--ease-out), transform 900ms var(--ease-out); }
.pd-story__vis.is-on { opacity: 1; transform: none; }
.pd-story__vis picture { display: contents; }
.pd-story__vis img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pd-story__bar { position: absolute; left: 28px; right: 28px; top: 28px; display: flex; gap: 6px; }
.pd-story__bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.pd-story__bar i::after { content: ""; display: block; height: 100%; background: var(--color-primary); transform: scaleX(var(--p, 0)); transform-origin: left; }
.pd-story__count { position: absolute; left: 28px; bottom: 22px; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pd-story__panels { grid-column: 8 / span 5; list-style: none; padding: 0; margin: 0; }
.pd-story__panel { min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: 32px; }
.pd-story__n { font-size: 14px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); color: var(--color-link); }
.pd-story__panel p { font-size: clamp(22px, 2.1vw, 30px); font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-foreground); text-wrap: pretty; max-width: 24ch; }

/* ---------- scheda tecnica (spec_groups) ---------- */
.pd-sheetsec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.pd-sheetsec__head .h2 { margin: 12px 0 10px; }
.pd-sheetsec__lead { font-size: 16px; color: var(--color-foreground-2); max-width: 60ch; }
.pd-sheetsec__lead b { font-weight: var(--font-weight-semibold); color: var(--color-foreground); }
.pd-sheetsec__actions { display: grid; justify-items: end; gap: 10px; }
.pd-sheet-btn .icon, .pd-compare-toggle .icon { width: 20px; height: 20px; }
.pd-sheetsec__meta { font-size: 12px; color: var(--color-muted); text-align: right; }
.pd-compare-toggle[data-on], .pd-compare-toggle[data-on]:active { --button-border: var(--color-deep); --button-bg: var(--color-tint); --button-fg: var(--color-deep); }
.pd-compare-toggle[data-on]:hover { --button-bg: oklch(0.93 0.03 238); --button-fg: var(--color-deep); } /* FV-A2: was white on tint, 1,11:1 */
.pd-sheetsec__source { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 12px; line-height: 1.6; color: var(--color-muted); max-width: 110ch; }

.sp-groups { columns: 2 420px; column-gap: clamp(32px, 4vw, 64px); }
.sp-group { break-inside: avoid; margin-bottom: 40px; }
.sp-group--wide { column-span: all; }
.sp-group__t { padding-bottom: 10px; border-bottom: 1.5px solid var(--color-foreground); font-size: 13px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-foreground); }
.sp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sp-table th, .sp-table td { padding: 12px 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.sp-table th { width: 55%; padding-right: 20px; font-weight: var(--font-weight-regular); color: var(--color-foreground-2); }
.sp-table td { font-weight: var(--font-weight-semibold); color: var(--color-foreground); overflow-wrap: anywhere; }
.sp-table td.sp-long { font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.55; color: var(--color-foreground-2); }
.sp-unit { font-weight: var(--font-weight-regular); color: var(--color-muted); }
.sp-na { color: var(--color-muted); font-weight: var(--font-weight-regular); }
.sp-note { display: block; margin-top: 4px; font-size: 12px; font-weight: var(--font-weight-regular); line-height: 1.45; color: var(--color-muted); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.sp-chips .chip { min-height: 32px; font-size: 13px; font-variant-numeric: tabular-nums; cursor: default; }
.sp-chips .chip:hover { border-color: var(--color-border-strong); }
.sp-chips-na { margin-top: 16px; font-size: 15px; }
.sp-callout { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface); font-size: 13px; line-height: 1.55; color: var(--color-foreground-2); }
.sp-callout > .icon, .sp-callout summary .icon { flex: none; width: 18px; height: 18px; color: var(--color-link); margin-top: 1px; }
.sp-callout--details { display: block; }
.sp-callout--details summary { display: flex; gap: 10px; align-items: center; min-height: 28px; cursor: pointer; list-style: none; font-weight: var(--font-weight-medium); color: var(--color-foreground); }
.sp-callout--details summary::-webkit-details-marker { display: none; }
.sp-callout--details summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--duration-fast); }
.sp-callout--details[open] summary::after { transform: rotate(-135deg); }
.sp-callout--details p { margin-top: 10px; padding-left: 28px; }
.pd-codes { margin-top: 24px; }
.pd-codes__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 32px; margin: 10px 0 0; padding: 0 0 0 28px; list-style: none; }
.pd-codes__list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.pd-codes__list b { font-weight: var(--font-weight-medium); color: var(--color-foreground); overflow-wrap: anywhere; text-align: right; }
.sp-warranty { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--color-foreground-2); }

/* compare: all variants, sticky first column, horizontal scroll */
.sp-compare-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; overscroll-behavior-x: contain; }
.sp-compare-wrap:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sp-compare { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.sp-compare th, .sp-compare td { padding: 11px 16px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; white-space: nowrap; }
.sp-compare td { font-weight: var(--font-weight-medium); }
.sp-compare thead th { position: sticky; top: 0; z-index: 2; padding: 0; background: #fff; border-bottom: 1.5px solid var(--color-foreground); vertical-align: bottom; }
.sp-compare thead th.sp-sticky { z-index: 3; padding: 14px 16px; font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-muted); }
.sp-pick { display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left; font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--color-foreground); border-radius: 0; transition: background-color var(--duration-fast); }
.sp-pick small { font-size: 11px; font-weight: var(--font-weight-regular); color: var(--color-muted); letter-spacing: 0.01em; }
.sp-pick:hover { background: var(--color-surface); }
.sp-pick:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; }
.sp-compare .is-sel { background: var(--color-tint); }
.sp-compare thead .is-sel .sp-pick { color: var(--color-deep); box-shadow: inset 0 -3px 0 var(--color-deep); }
.sp-compare thead .is-sel .sp-pick:hover { background: oklch(0.93 0.03 238); }
.sp-compare .is-sel .sp-pick small { color: var(--color-foreground-2); } /* FV-A2: SKU ≥ 4,5:1 on tint */
.sp-sticky { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 300px; white-space: normal !important; background: #fff; box-shadow: 1px 0 0 var(--color-border); font-weight: var(--font-weight-regular); color: var(--color-foreground-2); }
.sp-compare__group th { padding: 22px 16px 10px; background: var(--color-surface); font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-foreground); }
.sp-compare__group th span { position: sticky; left: 16px; }
.sp-all { white-space: normal !important; color: var(--color-foreground); }
.sp-all small { margin-left: 6px; font-size: 12px; font-weight: var(--font-weight-regular); color: var(--color-muted); }
.sp-all .sp-chips { margin-top: 0; }
.sp-compare__hint { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--color-muted); }
.sp-compare__hint .icon { width: 16px; height: 16px; color: var(--color-link); }

/* ---------- documents ---------- */
.pd-docsec { border-top: 1px solid var(--color-border); }
.pd-docsec__head { margin-bottom: 28px; }
.pd-docsec__head .h2 { margin-top: 12px; }
.pd-docs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pd-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-tile); background: #fff; color: var(--color-foreground); text-decoration: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.pd-doc:hover { border-color: var(--color-deep); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pd-doc:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pd-doc__ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-tint); color: var(--color-deep); }
.pd-doc__ic .icon { width: 20px; height: 20px; }
.pd-doc__t { font-size: 15px; font-weight: var(--font-weight-semibold); line-height: 1.35; }
.pd-doc__m { font-size: 12px; color: var(--color-muted); }
.pd-doc__m b { font-weight: var(--font-weight-semibold); color: var(--color-foreground-2); }
.pd-doc--primary { border-color: var(--color-deep); }
.pd-doc--primary .pd-doc__ic { background: var(--color-deep); color: #fff; }
.pd-docsec__note { margin-top: 20px; font-size: 13px; color: var(--color-muted); }

/* ---------- «Si abbina a» rail (batteries, EBU, wallbox) ---------- */
.pd-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 3 * var(--grid-gap)) / 4)); gap: var(--grid-gap); margin: 0; padding: 4px 4px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; }
.pd-rail > li { scroll-snap-align: start; }
.pd-rail product-card { height: 100%; }
.pd-rail:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-card); }

/* ---------- assistenza: the four services, compact ---------- */
.pd-help__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pd-help__head .h2 { margin: 12px 0 16px; }
.pd-help__head .button { margin-top: 28px; }
.pd-help__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.pd-help__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.pd-help__ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--color-deep); }
.pd-help__ic .icon { width: 22px; height: 22px; }
.pd-help__t { align-self: center; font-size: 17px; line-height: 1.3; font-weight: var(--font-weight-semibold); }
.pd-help__t a, .pd-help__t button { display: inline-block; padding-block: 3px; text-align: left; color: var(--color-foreground); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.pd-help__t a:hover, .pd-help__t button:hover { color: var(--color-link); text-decoration-color: currentColor; }
.pd-help__item p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--color-foreground-2); }

/* ---------- related ---------- */
.pd-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.pd-related__head .h2 { margin-top: 10px; }
.pd-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- trust strip ---------- */
.pd-trust { border-top: 1px solid var(--color-border); padding-block: 36px; }
.pd-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; padding: 0; margin: 0; }
.pd-trust__list li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.pd-trust__list .icon { width: 24px; height: 24px; color: var(--color-link); }
.pd-trust__list b { display: block; font-size: 15px; font-weight: var(--font-weight-semibold); }
.pd-trust__list small { display: block; margin-top: 2px; font-size: 13px; color: var(--color-muted); line-height: 1.45; }

/* ---------- zoom dialog ---------- */
.pd-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; opacity: 0; transition: opacity var(--duration-base) var(--ease-out), overlay var(--duration-base) allow-discrete, display var(--duration-base) allow-discrete; }
.pd-zoom[open] { display: block; opacity: 1; }
@starting-style { .pd-zoom[open] { opacity: 0; } }
.pd-zoom__bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px 12px 24px; background: rgb(255 255 255 / 0.92); border-bottom: 1px solid var(--color-border); }
.pd-zoom__count { font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-foreground-2); font-variant-numeric: tabular-nums; }
.pd-zoom__tools { display: flex; gap: 6px; }
.pd-zoom__stage { position: absolute; inset: 69px 0 0; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; touch-action: none; user-select: none; }
.pd-zoom__stage.is-zoomed { cursor: grab; }
.pd-zoom__stage.is-zoomed:active { cursor: grabbing; }
.pd-zoom__stage:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }
.pd-zoom__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center; will-change: transform; transition: transform var(--duration-fast) var(--ease-out); }
.pd-zoom__nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.pd-zoom__nav--prev { left: 16px; }
.pd-zoom__nav--next { right: 16px; }
.pd-zoom__hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 6px 14px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.92); box-shadow: var(--shadow-sm); font-size: 12px; color: var(--color-foreground-2); text-align: center; }

/* ---------- mobile buy bar ---------- */
.pd-buybar { display: none; }

/* ---------- 404 ---------- */

/* ---------- reveals (never block content: core Theme.reveal — IO + 1.5 s fallback) ---------- */
.js .pd-reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .pd-reveal.is-in { opacity: 1; transform: none; }
.pd-related__grid > li:nth-child(2) { --i: 1; } .pd-related__grid > li:nth-child(3) { --i: 2; } .pd-related__grid > li:nth-child(4) { --i: 3; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pd-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 989px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 12px; }
  .pd-gallery { position: static; grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--gutter) * -1); }
  .pd-thumbs { display: none; }
  .pd-stage { border-radius: 0; border-inline: 0; }
  .pd-stage__nav { display: none; }
  .pd-dots { display: flex; justify-content: center; gap: 2px; padding-top: 12px; min-height: 28px; }
  .pd-dot { width: 22px; height: 16px; display: grid; place-items: center; }
  .pd-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); transition: background-color var(--duration-fast), width var(--duration-base) var(--ease-out); }
  .pd-dot--video::before { border-radius: 1px; }
  .pd-dot.is-on::before { width: 18px; border-radius: 4px; background: var(--color-deep); }
  .pd-help__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-kit__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-kit__sum { position: static; }
  .pd-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-sheetsec__actions { justify-items: start; }
  .pd-sheetsec__meta { text-align: left; }
  .pd-rail { grid-auto-columns: minmax(250px, 72%); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .pd-buybar__ph { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); color: var(--color-deep); }
  .pd-buybar__ph .icon { width: 28px; height: 28px; }
  .pd-story__media { display: none; }
  .pd-story__panels { grid-column: 1 / -1; border-top: 1px solid var(--color-border-strong); }
  .pd-story__panel { min-height: 0; flex-direction: row; align-items: baseline; gap: 18px; padding-block: 22px; border-bottom: 1px solid var(--color-border-strong); }
  .pd-story__panel p { font-size: 19px; max-width: none; }

  .pd-buybar { display: block; position: fixed; z-index: var(--z-sticky); inset: auto 0 0; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--color-border); box-shadow: 0 -12px 32px -24px rgb(0 40 76 / 0.45); transform: translateY(110%); transition: transform var(--duration-base) var(--ease-out); }
  .pd-buybar.is-visible { transform: none; }
  .pd-buybar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .pd-buybar__in img { flex: none; width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #fff; }
  .pd-buybar__txt { flex: 1 1 160px; min-width: 0; }
  .pd-buybar__txt p { font-size: 13px; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-buybar__txt .pd-buybar__v { font-weight: var(--font-weight-regular); color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .pd-buybar__btn { flex: 1 0 auto; min-height: 48px; padding-inline: 22px; font-size: 16px; --button-bg: var(--color-deep); } /* < 19 px: Deep Blue for AA */
  .pd-buybar__btn:hover:not([disabled]) { --button-bg: var(--color-deep-hover); }
  .pd-has-buybar { --toast-offset: calc(68px + env(safe-area-inset-bottom)); }
  .pd-has-buybar .footer { padding-bottom: 80px; }
}
/* narrow phones: version + code on one line, the full label «Aggiungi alla quotazione» on the full width below */
@media (max-width: 480px) {
  .pd-buybar__in > img, .pd-buybar__ph, .pd-buybar__txt p:first-child { display: none; }
  .pd-buybar__txt { flex-basis: 100%; }
  .pd-has-buybar { --toast-offset: calc(100px + env(safe-area-inset-bottom)); }
  .pd-has-buybar .footer { padding-bottom: 112px; }
}
@media (max-width: 640px) {
  .pd-buy__main, .pd-buy__tech { min-height: var(--control-height); padding-inline: 16px; font-size: 17px; }
  .pd-buy__main { --button-bg: var(--color-deep); } /* < 19 px: Deep Blue for AA */
  .pd-buy__main:hover { --button-bg: var(--color-deep-hover); }
  .pd-docs__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-help__list { grid-template-columns: minmax(0, 1fr); }
  .pd-kit__row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-block: 20px; }
  .pd-kit__thumb { width: 56px; height: 56px; }
  .pd-kit__pick, .pd-kit__field { flex-direction: column; align-items: stretch; }
  .pd-kit__field { gap: 6px; }
  .pd-kit__field .select { width: 100%; min-width: 0; }
  .pd-kit__line { font-size: 17px; }
  .sp-groups { columns: 1; }
  .sp-table th { width: 50%; font-size: 14px; }
  .sp-table td { font-size: 14px; }
  .sp-sticky { min-width: 150px; max-width: 170px; }
  .sp-compare th, .sp-compare td { padding: 10px 12px; }
  .pd-sheet-btn, .pd-compare-toggle { width: 100%; min-width: 0; padding-inline: 16px; font-size: 16px; white-space: normal; text-align: center; }
  .pd-sheetsec__head > div { min-width: 0; }
  .pd-sheetsec__actions { justify-items: stretch; width: 100%; }
  .pd-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .pd-num__v { flex-wrap: wrap; gap: 2px 6px; }
  .pd-num__v b { font-size: 40px; }
  .pd-num--long .pd-num__v b { font-size: 28px; }
  .pd-related__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-trust__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pd-zoom__hint { display: none; }
  .pd-zoom__nav { top: auto; bottom: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-track { scroll-behavior: auto; }
  .pd-story__vis, .pd-zoomable img, .pd-zoom__stage img, .pd-buybar, .pd-video__play, .pd-zoom { transition: none !important; }
  .js .pd-reveal { opacity: 1; transform: none; transition: none; }
  .pd-story__vis { transform: none; }
  .pd-zoomable:hover img { transform: none; }
  .pd-doc { transition: none; }
  .pd-doc:hover { transform: none; }
}
.pd-docsec__head > .link { display: inline-flex; margin-top: 14px; }