/* ============================================================================
   Scheda barretta: configuratore (cablaggio, fissaggio, kit) e rendering interattivo.
   Usa i token del sistema di design (seasongenerator.css): filetti da un pixel,
   niente angoli arrotondati, Chivo / Karla / Plex Mono. Le tavole stanno su fondo chiaro.
   Le classi .br-* stanno dentro le due tavole SVG generate da render-barrette/build.py.
   ========================================================================== */

.sg-bp{background:var(--paper,#f7f9fa);color:var(--ink,#12202a);border-block:1px solid var(--rule,#d5dfe6);padding:clamp(40px,6vw,72px) 0}
.sg-bp [hidden]{display:none!important}
.sg-bp *,.sg-bp *::before,.sg-bp *::after{box-sizing:border-box}
.sg-bp .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.sg-bp table{min-width:0}   /* il sito ha table{min-width:680px} per le tabelle dati: qui farebbe scorrere la pagina */
.sg-bp-head{max-width:70ch;margin-bottom:clamp(22px,3vw,34px)}
.sg-bp-head h2{margin-top:9px}
.sg-bp-head .lede{margin-top:14px}

/* ------------------------------------------------------------------ griglia
   Scelte a sinistra, scena a destra (resta in vista mentre si scorrono le scelte). Il dettaglio sta FUORI dalla griglia, a
   tutta larghezza sotto: la scena e' sticky solo dentro il suo contenitore e si ferma prima del dettaglio, senza coprirlo. */
.sg-bp-layout{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:24px clamp(24px,3.6vw,52px);align-items:start;
  grid-template-areas:"choices scene"}
.sg-bp-choices{grid-area:choices;min-width:0}
.sg-bp-scene{grid-area:scene;align-self:start;position:sticky;top:20px}
.sg-bp .sg-bp-detail{margin-top:clamp(20px,3vw,32px)}   /* .sg-bp: batte il margin:0 della regola comune alle due tavole, piu' sotto */

/* --------------------------------------------------------------------- i passi */
.sg-bp-step{margin:0 0 28px;min-width:0}
.sg-bp-step-title{display:flex;align-items:center;gap:11px;margin:0 0 12px;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.14rem;letter-spacing:-.015em;line-height:1.2}
.sg-bp-step-n{display:grid;place-items:center;flex:none;width:26px;height:26px;background:var(--ink,#12202a);border-radius:50%;
  font:600 .8rem "IBM Plex Mono",ui-monospace,monospace;color:#fff}
.sg-bp-help{margin:10px 0 0;color:var(--muted,#5f7381);font-size:.86rem;line-height:1.5}
.sg-bp-price{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.84rem;font-weight:500;color:var(--ink,#12202a);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- cablaggio */
.sg-bp-cables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sg-bp-chip{position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6);cursor:pointer;font-size:.92rem;line-height:1.2}
.sg-bp-chip input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.sg-bp-chip:hover{border-color:var(--plate-line,#93aec4)}
.sg-bp-chip.is-checked{background:#fff;border-color:var(--ink,#12202a);box-shadow:inset 0 -2px 0 var(--ink,#12202a)}
.sg-bp-chip:focus-within{outline:2px solid var(--accent,#0f7ab5);outline-offset:2px}
.sg-bp-cable{display:block;padding:11px 12px}
.sg-bp-cable-body{display:grid;gap:2px;justify-items:start;min-width:0}
.sg-bp-cable-body strong{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.04rem;letter-spacing:-.01em}
.sg-bp-cable-body>span:not(.sg-bp-price):not(.sg-bp-cable-tag){color:var(--muted,#5f7381);font-size:.82rem}
.sg-bp-cable-body .sg-bp-price{margin-top:3px}
/* il prezzo del cavo non c'e' ancora: testo, non cifra */
.sg-bp .sg-bp-price.is-pending{font-family:Karla,"Segoe UI",system-ui,sans-serif;font-style:italic;font-weight:400;font-size:.8rem;color:var(--muted,#5f7381)}
/* cablaggio senza variante WooCommerce: si offre, ma si ordina con una richiesta */
.sg-bp-cable-tag{margin-top:2px;font:500 .6rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink,#0a5c8a)}

/* ------------------------------------------------------------- le quattro scelte */
.sg-bp-options{display:grid;gap:10px;border:0;margin:0;padding:0;min-width:0}
.sg-bp-legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sg-bp-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px;background:var(--panel,#fff);
  border:1px solid var(--rule,#d5dfe6);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.sg-bp-card:hover{border-color:var(--plate-line,#93aec4)}
.sg-bp-card.is-selected{border-color:var(--accent,#0f7ab5);box-shadow:inset 3px 0 0 var(--accent,#0f7ab5)}
.sg-bp-card input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.sg-bp-card:focus-within{outline:2px solid var(--accent,#0f7ab5);outline-offset:3px}
.sg-bp-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule,#d5dfe6);background:var(--paper,#f7f9fa);color:var(--accent-ink,#0a5c8a)}
.sg-bp-card.is-selected .sg-bp-icon{border-color:var(--accent,#0f7ab5);color:var(--accent,#0f7ab5)}
.sg-bp-card-body{display:grid;gap:5px;min-width:0}
.sg-bp-card-body strong{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.04rem;letter-spacing:-.012em;line-height:1.2}
.sg-bp-card-text{color:var(--muted,#5f7381);font-size:.92rem;line-height:1.5}
.sg-bp-card-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin-top:2px}
.sg-bp-tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink,#0a5c8a)}

/* ------------------------------------------------------- componi il kit WIDE24 */
.sg-bp-kit{padding:18px 18px 16px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6);border-top:3px solid var(--accent,#0f7ab5)}
.sg-bp-group{border:0;margin:16px 0 0;padding:0;min-width:0}
.sg-bp-group legend{padding:0;margin-bottom:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-bp-chips{display:flex;flex-wrap:wrap;gap:8px}
.sg-bp-kit .sg-bp-chip{background:var(--paper,#f7f9fa)}
.sg-bp-kit .sg-bp-chip.is-checked{background:#fff}
.sg-bp-swatch{flex:none;width:16px;height:16px;border:1px solid rgba(18,32,42,.4)}
.sg-bp-swatch--finish-WH{background:#f4f5f3}
.sg-bp-swatch--finish-BK{background:#1c2126}
.sg-bp-swatch--finish-NAT{background:linear-gradient(#eef1f2,#b3bbc0)}
.sg-bp-swatch--finish-NATA{background:linear-gradient(#dcdfdf,#9aa0a3)}
.sg-bp-swatch--cover-TR{background:repeating-linear-gradient(135deg,#fff 0 3px,#d9e4ea 3px 6px)}
.sg-bp-swatch--cover-LT{background:#fff}
.sg-bp-swatch--cover-GH{background:linear-gradient(#f8fbfd,#d6e2e8)}
.sg-bp-swatch--caps-TWH,.sg-bp-swatch--caps-TBK{border-radius:50%}
.sg-bp-swatch--caps-TWH{background:#f4f4ef}
.sg-bp-swatch--caps-TBK{background:#181c1f}
.sg-bp-swatch--support-CLIP2,.sg-bp-swatch--support-MAG2{display:none}
.sg-bp-kitfacts{display:grid;gap:10px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--rule-soft,#e6edf1)}
.sg-bp-kitfacts div{display:grid;grid-template-columns:minmax(104px,.55fr) minmax(0,1.45fr);gap:12px;align-items:baseline}
.sg-bp-kitfacts dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-bp-kitfacts dd{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.sg-bp-kitfacts dd span{font-family:Karla,"Segoe UI",system-ui,sans-serif;color:var(--muted,#5f7381)}

/* ------------------------------------------ riepilogo: totale, codice, distinta */
.sg-bp-kicker{margin:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,#0a5c8a)}
.sg-bp-summary{display:grid;gap:12px;margin-top:6px;padding:18px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6);border-top:3px solid var(--accent,#0f7ab5)}
.sg-bp-sum-title{margin:0;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.04rem;letter-spacing:-.01em;line-height:1.3}
.sg-bp-sum-text{margin:0;color:var(--muted,#5f7381);font-size:.9rem;line-height:1.55}
.sg-bp-total{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label value" "note note";align-items:baseline;gap:4px 14px;padding:14px 0 12px;border-block:1px solid var(--rule-soft,#e6edf1)}
.sg-bp-total-label{grid-area:label;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-bp-total-value{grid-area:value;justify-self:end;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:clamp(1.9rem,4.2vw,2.6rem);letter-spacing:-.03em;line-height:1;color:var(--ink,#12202a);font-variant-numeric:tabular-nums;text-align:right}
.sg-bp-total-note{grid-area:note;color:var(--muted,#5f7381);font-size:.84rem;line-height:1.45}
.sg-bp-code{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.sg-bp-code-label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-bp-code-value{display:block;padding:6px 9px;background:var(--paper,#f7f9fa);border:1px solid var(--rule,#d5dfe6);font-size:.86rem;line-height:1.4;overflow-wrap:anywhere;color:var(--ink,#12202a)}
.sg-bp-code-value.is-empty{color:var(--muted,#5f7381)}
.sg-bp-copy{padding:6px 10px;border:1px solid var(--ink,#12202a);background:transparent;color:var(--ink,#12202a);font:600 .8rem Karla,"Segoe UI",system-ui,sans-serif;cursor:pointer}
.sg-bp-copy:hover{background:#fff}
.sg-bp-lines summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--accent-ink,#0a5c8a)}
.sg-bp-lines-table{width:100%;margin:10px 0 0;border-collapse:collapse;font-size:.88rem;line-height:1.4}
.sg-bp-lines-table th{padding:0 8px 6px 0;text-align:left;font:500 .66rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5f7381);border-bottom:1px solid var(--rule,#d5dfe6)}
.sg-bp-lines-table td{padding:9px 8px 9px 0;vertical-align:top;border-bottom:1px solid var(--rule-soft,#e6edf1)}
.sg-bp-lines-table .sg-bp-num{padding-right:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sg-bp-lines-table .sg-bp-num small{color:var(--muted,#5f7381);font-size:.72rem;font-weight:400}
.sg-bp-line-text{display:block}
.sg-bp .sg-bp-line-code{display:block;margin-top:2px;padding:0;background:none;border:0;font-size:.76rem;color:var(--muted,#5f7381);overflow-wrap:anywhere}
.sg-bp-lines-table .is-sub td{padding-top:4px;padding-bottom:4px;color:var(--muted,#5f7381);font-size:.82rem;border-bottom-style:dotted}
.sg-bp-lines-table .is-sub td:first-child{padding-left:14px}
.sg-bp-lines-table .is-pending{font-style:italic}

/* --------------------------------------------------------- acquisto e azioni */
.sg-bp-buy{display:grid;gap:12px;margin-top:14px}
.sg-bp-hint{margin:0;color:var(--muted,#5f7381);font-size:.9rem;line-height:1.5}
.sg-bp-buy form.cart{margin:0}
.sg-bp .btn{border-color:var(--ink,#12202a);color:var(--ink,#12202a);background:transparent}
.sg-bp .btn:hover{background:#fff}
.sg-bp .btn.primary{background:var(--green,#4b9f38);border-color:var(--green,#4b9f38);color:#06180a}
.sg-bp .btn.primary:hover{background:#57b342}
.sg-bp-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:.92rem}
.sg-bp-links a{font-weight:700}


/* i due menu di WooCommerce (cablaggio, ancoraggio a calamite) si scelgono qui sopra: con JavaScript attivo restano nella pagina
   ma nascosti, e il JavaScript li imposta. Senza JavaScript restano visibili e il modulo funziona da solo. */
html.sg-bp-js body.sg-barrette-pilot-page form.variations_form table.variations{display:none!important}
.sg-bp-buy .single_variation .woocommerce-variation-price,
.sg-bp-buy .single_variation .woocommerce-variation-description{display:none}
.sg-bp-cta{margin:4px 0 14px}
.sg-bp-cta p{margin:10px 0 0;color:var(--muted,#5f7381);font-size:.9rem;line-height:1.5}

/* --------------------------------------------- le due tavole, su fondo chiaro */
.sg-bp-scene,.sg-bp-detail{--bp-bg:#f2f6f9;--bp-line:#c6d5df;--bp-ink:#12202a;--bp-soft:#33475a;--bp-muted:#516574;margin:0;min-width:0;background:var(--bp-bg);border:1px solid var(--bp-line);color:var(--bp-ink)}
.sg-bp-canvas{position:relative}
.sg-bp-canvas svg{display:block;width:100%;height:auto}
.sg-bp-badge,.sg-bp-ceil{position:absolute;bottom:12px;padding:4px 9px;background:rgba(255,255,255,.88);border:1px solid var(--bp-line,#c6d5df);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-muted,#516574)}
.sg-bp-badge{right:12px}
.sg-bp-ceil{left:12px}
.sg-bp-scene figcaption,.sg-bp-detail figcaption{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;padding:14px 18px 16px;background:transparent;color:inherit;font-size:inherit;text-align:left;border-top:1px solid var(--bp-line,#c6d5df)}
.sg-bp-cap-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;min-width:0}
.sg-bp-scene figcaption strong{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.02rem;letter-spacing:-.01em}
.sg-bp-cap-total{white-space:nowrap}
.sg-bp-cap-total small{font:500 .64rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--bp-muted,#516574)}
.sg-bp-cap-total b{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:var(--bp-ink,#12202a);font-variant-numeric:tabular-nums}
.sg-bp-cap-copy{color:var(--bp-soft,#33475a);font-size:.92rem;line-height:1.5}
.sg-bp-detail{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.sg-bp-detail figcaption{align-content:start;border-top:0;border-left:1px solid var(--bp-line,#c6d5df);padding:18px 20px}
.sg-bp-legend-list{display:grid;gap:9px;margin:2px 0 0;padding:0;list-style:none;counter-reset:leg}
.sg-bp-legend-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start;counter-increment:leg;color:var(--bp-soft,#33475a);font-size:.9rem;line-height:1.45}
.sg-bp-legend-list li::before{content:counter(leg);display:grid;place-items:center;width:22px;height:22px;background:#12202a;border-radius:50%;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.76rem;font-weight:600;color:#fff}
.sg-bp-note{margin:6px 0 0;color:var(--bp-muted,#516574);font-size:.8rem;line-height:1.5}
.sg-bp-detail .sg-bp-canvas{overflow-x:auto}

/* --------------------------------- stato delle tavole: cosa si vede, di che colore */
.sg-bp-scene,.sg-bp-detail{
  --pf-hi:#fff;--pf-mid:#eef0ef;--pf-low:#c4cbce;--pf-edge:#fff;--pf-line:#66798a;
  --cap-f:#f3f3ee;--cap-s:#cfd3d0;
  --cv-fill:rgba(255,255,255,.16);--cv-led:1;--cv-strip:rgba(255,255,255,.22);--ray:1;--cone:1}
[data-finish="BK"]{--pf-hi:#586068;--pf-mid:#22282d;--pf-low:#0f1214;--pf-edge:#6b747c;--pf-line:#000}
[data-finish="NAT"]{--pf-hi:#f2f4f5;--pf-mid:#c9cfd3;--pf-low:#8d959b;--pf-edge:#fff;--pf-line:#6d757b}
[data-finish="NATA"]{--pf-hi:#e2e4e4;--pf-mid:#b2b6b7;--pf-low:#787d80;--pf-edge:#eceeee;--pf-line:#5b6266}
[data-caps="TBK"]{--cap-f:#1b1f22;--cap-s:#0d1012}
[data-cover="GH"]{--cv-fill:rgba(255,255,255,.38);--cv-led:.55;--cv-strip:rgba(255,255,255,.5);--ray:.92;--cone:.92}
[data-cover="LT"]{--cv-fill:rgba(255,255,255,.86);--cv-led:.12;--cv-strip:rgba(255,255,255,.92);--ray:.7;--cone:.72}

.sg-bp .br-asm,.sg-bp .br-dt{opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.sg-bp [data-option="bare"] .br-asm-bare,.sg-bp [data-option="magnet"] .br-asm-magnet,
.sg-bp [data-option="hooks"] .br-asm-hooks,.sg-bp [data-option="profile"] .br-asm-profile,
.sg-bp [data-option="bare"] .br-dt-bare,.sg-bp [data-option="magnet"] .br-dt-magnet,
.sg-bp [data-option="hooks"] .br-dt-hooks,.sg-bp [data-option="profile"] .br-dt-profile{opacity:1;visibility:visible;transition-delay:0s}

/* soffitto: rete a filo (ganci, supporti a W) oppure lamiera piena (calamite) */
.sg-bp .br-ceil-sheet{display:none}
.sg-bp [data-option="magnet"] .br-ceil-sheet,.sg-bp [data-option="profile"][data-support="MAG2"] .br-ceil-sheet{display:inline}
.sg-bp [data-option="magnet"] .br-ceil-wire,.sg-bp [data-option="profile"][data-support="MAG2"] .br-ceil-wire{display:none}
.sg-bp [data-support="MAG2"] .br-ceilw,.sg-bp [data-support="CLIP2"] .br-ceils{display:none}
.sg-bp .br-sup{display:none}
.sg-bp [data-support="MAG2"] .br-sup-MAG2,.sg-bp [data-support="CLIP2"] .br-sup-CLIP2{display:inline}

.sg-bp .br-pf-front{fill:var(--pf-mid)}
.sg-bp .br-pf-bottom,.sg-bp .br-pf-side{fill:var(--pf-low)}
.sg-bp .br-pf-front,.sg-bp .br-pf-bottom,.sg-bp .br-pf-side{stroke:var(--pf-line);stroke-width:.8;stroke-linejoin:round}
.sg-bp .br-pf-edge{stroke:var(--pf-edge);stroke-width:1.4;fill:none}
.sg-bp .br-pf-g0{stop-color:var(--pf-hi)}
.sg-bp .br-pf-g1{stop-color:var(--pf-mid)}
.sg-bp .br-pf-g2{stop-color:var(--pf-low)}
.sg-bp .br-pf-body{fill:url(#sgd-alu);stroke:var(--pf-line);stroke-width:1.1;stroke-linejoin:round}
.sg-bp .br-cap-f{fill:var(--cap-f)}
.sg-bp .br-cap-s{fill:var(--cap-s)}
.sg-bp .br-cap-body{fill:var(--cap-f);stroke:var(--pf-line);stroke-width:1.1}
.sg-bp .br-cover{fill:var(--cv-fill)}
.sg-bp .br-cv-leds{opacity:var(--cv-led)}
.sg-bp .br-cover-strip{fill:var(--cv-strip);stroke:#9fb0ba;stroke-width:.8}
.sg-bp .br-ray{fill:url(#sgd-ray);opacity:var(--ray)}
.sg-bp .br-cone,.sg-bp .br-pool{opacity:var(--cone)}
.sg-bp .br-ghost{fill:rgba(18,32,42,.26);stroke:#12202a;stroke-width:1.5;stroke-dasharray:3.5 2.6}
.sg-bp .br-ghost-hook{fill:rgba(18,32,42,.62)}
.sg-bp .br-ghost-mag{fill:rgba(176,190,200,.75);stroke:#516574}
.sg-bp .br-mk circle{fill:#12202a;stroke:#fff;stroke-width:1.6}
.sg-bp .br-mk text{fill:#fff;font:600 14px "IBM Plex Mono",ui-monospace,monospace}
.sg-bp .br-dim path{stroke:#516574;stroke-width:1;fill:none}
.sg-bp .br-dim text{fill:#26394a;font:500 14px "IBM Plex Mono",ui-monospace,monospace}
.sg-bp .br-cap-t{fill:#516574;font:500 12px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}

/* --------------------------------------------------------------------- schermi */
@media (max-width:900px){
  /* una colonna: la scena in cima, le scelte, poi il dettaglio */
  .sg-bp-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "choices"}
  .sg-bp-scene{position:static}
  .sg-bp-detail{grid-template-columns:minmax(0,1fr)}
  .sg-bp-detail figcaption{border-left:0;border-top:1px solid var(--bp-line,#c6d5df)}
  .sg-bp-kitfacts div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:600px){
  /* la tavola di dettaglio ha testi piccoli: sul telefono resta a una larghezza leggibile e si scorre di lato */
  .sg-bp-detail .sg-bp-canvas svg{min-width:520px}
  /* sul telefono la scena resta in vista mentre si scelgono le opzioni */
  .sg-bp-scene{position:sticky;top:0;z-index:3}
  .sg-bp-scene figcaption{padding:9px 14px}
  .sg-bp-cap-copy{display:none}
  .sg-bp-badge,.sg-bp-ceil{padding:3px 7px;font-size:.6rem;letter-spacing:.08em}
  .sg-bp-ceil{top:10px;bottom:auto;left:10px}
  .sg-bp-badge{bottom:10px;right:10px}
  .sg-bp-cap-row{flex-wrap:nowrap}
  .sg-bp-scene figcaption strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
  .sg-bp-cables{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sg-bp-card{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px}
  .sg-bp-icon{width:36px;height:36px}
  .sg-bp-icon svg{width:26px;height:26px}
  .sg-bp .sg-bp-buy .btn{width:100%;justify-content:center}
  /* il codice puo' essere «barretta + cavo»: tutta la larghezza, e il pulsante di copia sotto */
  .sg-bp-code{grid-template-columns:minmax(0,1fr)}
  .sg-bp-code-value{font-size:.8rem}
  .sg-bp-copy{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .sg-bp *,.sg-bp *::before,.sg-bp *::after{transition:none!important;animation:none!important}
}
@media print{
  .sg-bp-scene{position:static}
  .sg-bp-card,.sg-bp-detail{break-inside:avoid}
}

/* ============================================================================
   La scheda intorno al blocco (solo le pagine con il pilota: body.sg-barrette-pilot-page)
   Sistema il layout WooCommerce con i token del sito. Nessun template Woo viene copiato.
   ========================================================================== */

/* Nel sito c'e' una regola globale table{min-width:680px} pensata per le tabelle dati dentro un
   contenitore scorrevole: sul modulo delle varianti allarga la pagina (704 px su un telefono,
   1351 su un desktop da 1280). Qui il modulo torna a stare nella sua colonna. */
.sg-barrette-pilot-page table.variations{min-width:0;width:100%}

/* galleria a sinistra, acquisto a destra, tutto il resto a larghezza piena */
body.sg-barrette-pilot-page div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,56px);align-items:start}
body.sg-barrette-pilot-page div.product>*{grid-column:1/-1;min-width:0}
body.sg-barrette-pilot-page div.product>div.images{grid-column:1;float:none;width:auto;margin:0 0 28px}
body.sg-barrette-pilot-page div.product>div.summary{grid-column:2;float:none;width:auto;margin:0 0 28px}

.sg-barrette-pilot-page .product_title{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.032em;line-height:1.03;text-align:left;margin:0 0 14px}
.sg-barrette-pilot-page div.summary .price{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.55rem;line-height:1.2;color:var(--ink,#12202a);margin:0 0 14px}
.sg-barrette-pilot-page .woocommerce-product-details__short-description{color:var(--muted,#5f7381);margin-bottom:14px}

/* modulo delle varianti (senza JavaScript, o se il modulo non si sposta): etichetta sopra, scelta a tutta larghezza */
.sg-barrette-pilot-page form.variations_form table.variations,
.sg-barrette-pilot-page form.variations_form table.variations tbody,
.sg-barrette-pilot-page form.variations_form table.variations tr,
.sg-barrette-pilot-page form.variations_form table.variations th,
.sg-barrette-pilot-page form.variations_form table.variations td{display:block;width:100%;padding:0;border:0;background:none}
.sg-barrette-pilot-page form.variations_form table.variations th.label{margin-top:16px;padding:0 0 6px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-barrette-pilot-page form.variations_form table.variations th.label label{font:inherit;letter-spacing:inherit}
.sg-barrette-pilot-page form.variations_form table.variations select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--rule,#d5dfe6);border-radius:0;background-color:#fff;color:var(--ink,#12202a);font:inherit}
.sg-barrette-pilot-page form.variations_form table.variations select:focus{outline:2px solid var(--accent,#0f7ab5);outline-offset:1px}
.sg-barrette-pilot-page a.reset_variations{display:inline-block;margin-top:8px;font-size:.86rem}
.sg-barrette-pilot-page .woocommerce-variation-price .price{font-size:1.3rem}
.sg-barrette-pilot-page .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:0}
.sg-barrette-pilot-page .woocommerce-variation-add-to-cart .quantity .qty{min-height:48px;width:5.2em;border:1px solid var(--rule,#d5dfe6);border-radius:0;text-align:center}
body.sg-barrette-pilot-page div.product form.cart .single_add_to_cart_button.button{flex:1 1 200px;min-height:48px;padding:11px 20px;border:1px solid var(--green,#4b9f38);border-radius:0;background:var(--green,#4b9f38);color:#06180a;font-weight:700;font-size:.98rem;opacity:1}
body.sg-barrette-pilot-page div.product form.cart .single_add_to_cart_button.button:hover{background:#57b342;color:#06180a}
body.sg-barrette-pilot-page div.product form.cart .single_add_to_cart_button.button.disabled,
body.sg-barrette-pilot-page div.product form.cart .single_add_to_cart_button.button:disabled{background:#d7e6d1;border-color:#d7e6d1;color:#4f5d4b;opacity:1;cursor:not-allowed}
.sg-barrette-pilot-page .product_meta{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule-soft,#e6edf1);color:var(--muted,#5f7381);font-size:.86rem;line-height:1.7}
.sg-barrette-pilot-page .product_meta .sku_wrapper{display:none}   /* "COD: N/A": la scheda non ha un codice da mostrare */

/* il blocco: pannello dentro la colonna del contenuto, sotto galleria e acquisto */
.sg-barrette-pilot-page .sg-bp{margin:clamp(20px,3vw,36px) 0 clamp(32px,5vw,56px);padding:clamp(22px,3.4vw,44px);border:1px solid var(--rule,#d5dfe6)}
.sg-barrette-pilot-page .sg-bp .wrap{max-width:none;padding:0}

@media (max-width:820px){
  body.sg-barrette-pilot-page div.product>div.images,
  body.sg-barrette-pilot-page div.product>div.summary{grid-column:1/-1}
}

.sg-bp-delivery-note{display:block;margin-top:.3rem;color:var(--muted,#5f7381);font-size:.78rem;line-height:1.35}