@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/SpaceGrotesk-500.woff2) format('woff2');}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/SpaceGrotesk-700.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/Inter-400.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/Inter-500.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/Inter-600.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/Inter-700.woff2) format('woff2');}

  :root{
    --orange:#FF3B0A;--orange-action:#C93200;--black:#080808;--graphite:#202124;
    --warm-white:#F7F6F2;--white:#FFFFFF;--tech-gray:#DDDCD7;--iface-gray:#686A6D;--pale-orange:#FFF0EA;
    --font-display:'Space Grotesk',ui-sans-serif,Arial,sans-serif;
    --font-body:'Inter',ui-sans-serif,Arial,sans-serif;
    --content-max:1920px;--margin-desktop:72px;--margin-tablet:40px;--margin-mobile:20px;
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:40px;--sp-8:52px;--sp-9:76px;
    --logo-w-desktop:132px;--logo-w-mobile:100px;--header-h-desktop:84px;--header-h-mobile:68px;
    --radius-sm:4px;--radius-md:10px;--radius-lg:20px;
    --shadow-hover:0 10px 30px rgba(8,8,8,0.10);
    color-scheme: light;
  }
  *,*::before,*::after{box-sizing:border-box;}
  body{margin:0;background:var(--warm-white);color:var(--graphite);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;}
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}}

h1, h2, h3, h4{font-family:var(--font-display);font-weight:700;margin:0;color:var(--black);text-wrap:balance;letter-spacing:-0.01em;}
  .eyebrow{font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-action);display:flex;align-items:center;gap:10px;}
  .eyebrow::before{content:"";width:16px;height:2px;background:var(--orange);flex:none;}
  .h1{font-size:50px;line-height:1.06;}
  .h2{font-size:35px;line-height:1.12;}
  .h3{font-size:24px;line-height:1.2;}
.h4, .h3{font-size:18.5px;line-height:1.3;}
  .body-l{font-size:20px;line-height:1.6;color:var(--iface-gray);}
  .body{font-size:17px;line-height:1.6;color:var(--iface-gray);}
  .small{font-size:14.5px;line-height:1.5;color:var(--iface-gray);}
  .micro{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--iface-gray);}
  .tabular{font-variant-numeric:tabular-nums;}

  .wrap{max-width:var(--content-max);margin:0 auto;padding-left:var(--margin-desktop);padding-right:var(--margin-desktop);}
  @media (max-width:1023px){.wrap{padding-left:var(--margin-tablet);padding-right:var(--margin-tablet);}}
  @media (max-width:599px){.wrap{padding-left:var(--margin-mobile);padding-right:var(--margin-mobile);}}
  section{padding:var(--sp-9) 0;}
  @media (max-width:1023px){section{padding:var(--sp-8) 0;}}
  @media (max-width:599px){section{padding:var(--sp-7) 0;}}
  .section-head{max-width:720px;margin-bottom:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
  /* Testata di sezione con un link allineato a destra (es. "Vedi tutte le soluzioni").
     Era uno stile inline sul singolo elemento: portato in classe perché su smartphone
     va impilato, e uno stile inline non è sovrascrivibile da una media query. */
  .section-head-split{flex-direction:row;align-items:flex-end;justify-content:space-between;max-width:none;width:100%;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:15px 28px;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;max-width:100%;}
  /* Un pulsante con testo lungo e white-space:nowrap sfora il contenitore invece di
     restare centrato. La soglia era fissata a 380px, ma non bastava: su /contesti/arrampicata
     il pulsante "Esplora i tools per l'arrampicata" è largo 447px e mandava in overflow
     orizzontale l'intera pagina già a 390px. Su tutti gli smartphone il testo può andare
     a capo, restando centrato. */
  @media (max-width:599px){.btn{white-space:normal;text-align:center;}}
  .btn-primary{background:var(--orange-action);color:#fff;}
  .btn-primary:hover{background:#a92900;}
  .btn-primary:disabled{background:var(--tech-gray);color:var(--iface-gray);cursor:not-allowed;}
  .btn-outline{background:transparent;color:var(--black);border-color:var(--black);}
  .btn-outline:hover{background:var(--black);color:#fff;}
  .btn-sm{padding:10px 18px;font-size:13.5px;}
  .link{font-weight:600;font-size:14.5px;color:var(--orange-action);display:inline-flex;align-items:center;gap:6px;}
  .link:hover{color:var(--black);}
  .link .arrow{transition:transform .15s ease;}
  .link:hover .arrow{transform:translateX(3px);}

  /* header (identico alla homepage) */
  header{position:sticky;top:0;z-index:50;background:rgba(247,246,242,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--tech-gray);}
  .header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h-desktop);gap:24px;}
  .logo-img{width:var(--logo-w-desktop);height:auto;}
  nav.primary-nav{display:flex;align-items:center;gap:36px;}
  nav.primary-nav a{font-size:14.5px;font-weight:600;color:var(--graphite);}
  nav.primary-nav a.active{color:var(--orange-action);}
  .header-actions{display:flex;align-items:center;gap:18px;}
  .icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--graphite);position:relative;}
  .icon-btn:hover{background:var(--pale-orange);color:var(--orange-action);}

  /* Ricerca e carrello nell'header: pulsanti minimali, nessun riquadro/bordo visibile. */
  .header-icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:8px;padding:0;color:var(--graphite);position:relative;}
  .header-icon-btn:hover{background:#F1F0EC;}
  .header-icon-btn svg{width:21px;height:21px;stroke-width:1.7;}
  .cart-badge{position:absolute;top:-3px;right:-3px;background:var(--orange);color:#fff;min-width:17px;height:17px;padding:0 4px;border-radius:999px;font-size:10px;font-weight:700;line-height:17px;display:flex;align-items:center;justify-content:center;}
  .mobile-toggle{display:none;}
  @media (max-width:900px){nav.primary-nav{display:none;}.mobile-toggle{display:inline-flex;}}

  /* Pannello ricerca a comparsa: nascosto finché non si clicca l'icona lente. */
  .search-panel{display:none;border-top:1px solid var(--tech-gray);background:var(--white);}
  .search-panel.open{display:block;}
  .search-panel .wrap{padding-top:16px;padding-bottom:16px;}
  .search-form{display:flex;gap:10px;max-width:520px;}
  .search-form input[type=search]{flex:1;border:1.5px solid var(--tech-gray);border-radius:var(--radius-sm);padding:11px 16px;font-size:15px;font-family:inherit;color:var(--graphite);background:var(--white);}
  .search-form input[type=search]:focus{outline:none;border-color:var(--orange-action);}

  /* Menu mobile a comparsa: nav.primary-nav resta display:none sotto i 900px finché
     non riceve la classe .open dal toggle JS (vedi header.html). */
  @media (max-width:900px){
    nav.primary-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--white);border-top:1px solid var(--tech-gray);border-bottom:1px solid var(--tech-gray);padding:8px var(--margin-mobile) 16px;z-index:45;}
    nav.primary-nav.open a{padding:13px 0;border-bottom:1px solid #EDEBE6;font-size:15.5px;}
    nav.primary-nav.open a:last-child{border-bottom:0;}
  }
  @media (max-width:599px){.header-inner{height:var(--header-h-mobile);}.logo-img{width:var(--logo-w-mobile);}}

  /* scroll-margin per le sezioni raggiunte via ancora (es. #innovation-lab), così il titolo non
     resta coperto dall'header sticky: non tocca layout/padding, incide solo sul punto di arrivo dello scroll. */
  section[id]{scroll-margin-top:calc(var(--header-h-desktop) + 36px);}
  @media (max-width:599px){section[id]{scroll-margin-top:calc(var(--header-h-mobile) + 32px);}}

  /* template banner label (solo nel prototipo, non nel sito reale) */
  .proto-banner{background:var(--graphite);color:#fff;padding:10px 0;position:sticky;top:var(--header-h-desktop);z-index:40;}
  .proto-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .proto-banner .micro{color:#c8c8c5;}
  .proto-banner .jump{display:flex;gap:14px;}
  .proto-banner .jump a{font-size:12.5px;font-weight:600;color:#fff;border-bottom:1px solid transparent;}
  .proto-banner .jump a:hover{border-color:var(--orange);}

  .template-start{padding:14px 0;background:var(--pale-orange);border-top:3px solid var(--orange);border-bottom:1px solid var(--tech-gray);}
  .template-start .wrap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
  .template-start .tag{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--orange-action);}
  .template-start .desc{font-size:13px;color:var(--iface-gray);}

  /* breadcrumb */
  .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--iface-gray);flex-wrap:wrap;padding-top:var(--sp-5);}
  .breadcrumb a{color:var(--iface-gray);}
  .breadcrumb a:hover{color:var(--orange-action);}
  .breadcrumb .sep{color:var(--tech-gray);}
  .breadcrumb .current{color:var(--graphite);font-weight:600;}

  /* photo placeholder (coerente con homepage) */
  .photo-ph{position:relative;width:100%;height:100%;background:radial-gradient(circle, rgba(201,50,0,0.14) 1.6px, transparent 1.6px) 0 0/22px 22px, var(--white);border:1px solid var(--tech-gray);display:flex;align-items:flex-end;overflow:hidden;}
  .photo-ph.has-photo{display:block;border-style:solid;}
  .photo-ph img{width:100%;height:100%;object-fit:cover;display:block;}
  .photo-ph .ph-label{background:rgba(255,255,255,.92);color:var(--graphite);padding:12px 14px;font-size:12px;line-height:1.5;font-weight:500;width:100%;border-top:1px solid var(--tech-gray);}
  .photo-ph .ph-label b{color:var(--orange-action);font-weight:700;display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
  .photo-ph.dark{background:radial-gradient(circle, rgba(255,59,10,0.18) 1.6px, transparent 1.6px) 0 0/22px 22px, var(--black);border-color:#232323;}
  .photo-ph.dark .ph-label{background:rgba(8,8,8,.85);color:#fff;border-top-color:#2b2b2b;}
  .photo-ph.dark .ph-label b{color:var(--orange);}

  /* Anteprima generica temporanea (solo finché non c'è una foto reale): sostituisce il pattern a
     pallini con un'illustrazione generica, così in fase di revisione si capisce dove andrà la foto.
     Sparisce da sola non appena product.images (o equivalente) viene valorizzato, perché a quel
     punto si applica .has-photo e questa regola non viene più selezionata. */
  .photo-ph:not(.has-photo){background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23F7F6F2"/><circle cx="292" cy="76" r="30" fill="%23FFDCC9"/><path d="M0 232 L112 142 L172 190 L262 112 L400 226 V300 H0 Z" fill="%23FFE8DC"/><path d="M0 262 L142 172 L202 210 L302 150 L400 258 V300 H0 Z" fill="%23FFF0EA"/></svg>') center/cover no-repeat, var(--white);}
  .photo-ph.dark:not(.has-photo){background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23080808"/><circle cx="292" cy="76" r="30" fill="%232a2a2a"/><path d="M0 232 L112 142 L172 190 L262 112 L400 226 V300 H0 Z" fill="%23202020"/><path d="M0 262 L142 172 L202 210 L302 150 L400 258 V300 H0 Z" fill="%23161616"/></svg>') center/cover no-repeat, var(--black);}

  .placeholder-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--orange-action);background:var(--pale-orange);border-radius:4px;padding:3px 7px;}

  /* icone funzione (riuso homepage) */
  .fn-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--pale-orange);color:var(--orange-action);display:flex;align-items:center;justify-content:center;flex:none;}
  .fn-icon svg{width:26px;height:26px;}

  /* ===== TEMPLATE 1: SOLUZIONI HUB ===== */
  .sol-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center;padding-top:var(--sp-7);}
  .sol-hero-media{aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;}
  @media (max-width:1023px){.sol-hero{grid-template-columns:1fr;gap:var(--sp-6);}.sol-hero-media{order:-1;aspect-ratio:16/9;}}

  /* Collage di foto reali dei tools nella hero di /soluzioni: un tile grande + due piccoli
     impilati, su sfondo pale-orange coerente col brand. Sostituisce il vecchio placeholder
     decorativo generico con una composizione che mostra davvero la varietà del catalogo. */
  .catalog-collage{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:12px;width:100%;height:100%;background:var(--pale-orange);border-radius:var(--radius-lg);padding:12px;}
  .catalog-collage .collage-main{grid-row:1 / 3;border-radius:var(--radius-md);overflow:hidden;background:var(--white);}
  .catalog-collage .collage-sm{border-radius:var(--radius-md);overflow:hidden;background:var(--white);}
  .catalog-collage img{width:100%;height:100%;object-fit:cover;display:block;}

  .cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
  .cat-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:10px;transition:box-shadow .18s,border-color .18s,transform .18s;}
  .cat-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
  .cat-card .count{font-size:12px;color:var(--iface-gray);}
  @media (max-width:1023px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:599px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  /* Sotto i 360px (iPhone SE e simili) due colonne non stanno più nello schermo:
     la card più stretta possibile è 166px e la colonna disponibile ne misura 146. */
  @media (max-width:359px){.cat-grid{grid-template-columns:1fr;}}

  .path-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
  /* Variante a quattro colonne (/contatti). Era uno stile inline, che nessuna media
     query può sovrascrivere: su smartphone la riga restava a quattro colonne, cioè
     quattro schede da circa 80px l'una. */
  .path-row-4{grid-template-columns:repeat(4,1fr);}
  .path-card{border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5);background:var(--white);position:relative;overflow:hidden;min-height:220px;}
.path-card h4, .path-card h3, .path-card h2{font-size:17px;}
  /* Foto del tool/contesto (PNG con trasparenza reale, sfondo ritagliato) usata come elemento
     grafico decorativo sullo sfondo della card, non come miniatura: grande, in basso a destra,
     molto trasparente, dietro al testo. */
  .path-card-bg{position:absolute;right:-8%;bottom:-8%;width:78%;height:auto;max-width:none;opacity:.15;pointer-events:none;z-index:0;}
  .path-card-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;}
  @media (max-width:1023px){.path-row{grid-template-columns:1fr 1fr;}}
  @media (max-width:599px){.path-row{grid-template-columns:1fr;}}

  /* Esplora per contesto — volutamente più leggero dei fn-card (le funzioni restano la struttura primaria) */
  .context-intro{max-width:640px;margin-bottom:var(--sp-5);}
  .context-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));gap:var(--sp-4);}
  .context-card{border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;background:var(--white);transition:box-shadow .18s,border-color .18s,transform .18s;}
  a.context-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
.context-card h4, .context-card h3{font-size:15px;}
  .context-card .status{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  .context-card.is-active .status{color:var(--orange-action);}
  .context-card.is-upcoming{border-style:dashed;opacity:.72;cursor:default;}
  .context-card.is-upcoming .status{color:var(--iface-gray);}

  .filter-bar{display:flex;gap:10px;flex-wrap:wrap;padding:var(--sp-4) 0 var(--sp-5);border-bottom:1px solid var(--tech-gray);margin-bottom:var(--sp-6);}
  .filter-pill{font-size:13px;font-weight:600;padding:9px 16px;border-radius:99px;border:1px solid var(--tech-gray);color:var(--graphite);background:var(--white);cursor:pointer;}
  .filter-pill.active{background:var(--black);border-color:var(--black);color:#fff;}
  .filter-pill:hover:not(.active){border-color:var(--orange);color:var(--orange-action);}

  .proto-mode-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:18px;padding:12px 16px;border:1px dashed var(--tech-gray);border-radius:10px;background:var(--white);}
  .proto-mode-toggle .mode-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--iface-gray);}
  .mode-btn{font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;border:1px solid var(--tech-gray);color:var(--graphite);background:var(--white);cursor:pointer;}
  .mode-btn.active{background:var(--black);border-color:var(--black);color:#fff;}
  .mode-btn:hover:not(.active){border-color:var(--orange);color:var(--orange-action);}
  .empty-public-state{padding:var(--sp-5) 0;color:var(--iface-gray);}

  .grid-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
  /* Variante a tre colonne (pagine categoria). Come per .fn-mini-row-2 era uno stile
     inline, che nessuna media query può sovrascrivere: su smartphone la griglia
     restava a tre colonne e sforava lo schermo di oltre 100px. */
  .grid-tools-3{grid-template-columns:repeat(3,1fr);}
  .tool-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s,transform .18s;}
  .tool-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
  .tool-media{aspect-ratio:4/3;}
  .tool-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:6px;flex:1;}
  .tool-cat{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-action);}
.tool-body h4, .tool-body h3, .tool-body h2{font-size:16.5px;}
  .tool-body .body{font-size:15px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .tool-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
  .price-tag{font-size:11.5px;color:var(--iface-gray);font-style:italic;}
  @media (max-width:1023px){.grid-tools{grid-template-columns:repeat(2,1fr);}}

  .tool-card .btn{width:100%;white-space:normal;text-align:center;font-size:13.5px;padding:12px 14px;line-height:1.3;}
  @media (max-width:599px){.grid-tools{grid-template-columns:1fr;}}

  .cta-band{background:var(--graphite);border-radius:var(--radius-lg);padding:var(--sp-7);color:#fff;text-align:left;}
  .cta-band .h2{color:#fff;}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--sp-5);}

  /* ===== TEMPLATE 2: CATEGORIA ===== */
  .cat-hero{max-width:830px;padding-top:var(--sp-6);}
  .info-list{display:flex;flex-direction:column;gap:10px;}
  .info-list li{display:flex;gap:10px;font-size:14.5px;color:var(--iface-gray);}
  .info-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none;margin-top:8px;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);}
  @media (max-width:1023px){.two-col{grid-template-columns:1fr;gap:var(--sp-6);}}

  .table-scroll{overflow-x:auto;border:1px solid var(--tech-gray);border-radius:var(--radius-md);}
  table.compare{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px;}
  table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--tech-gray);}
  table.compare th{font-family:var(--font-body);font-weight:700;color:var(--black);background:var(--pale-orange);white-space:nowrap;}
  table.compare td{color:var(--iface-gray);}
  table.compare tr:last-child td{border-bottom:none;}
  table.compare td:first-child,table.compare th:first-child{font-weight:600;color:var(--graphite);position:sticky;left:0;background:var(--white);}
  table.compare th:first-child{background:var(--pale-orange);}

  /* ===== TEMPLATE 3: SINGOLO TOOL ===== */
  .product-hero{display:flex;align-items:flex-start;gap:var(--sp-8);padding-top:var(--sp-6);}
  .product-gallery{display:flex;flex-direction:column;gap:var(--sp-3);flex:0 0 55%;min-width:0;}
  .product-gallery-main{aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;}
  .product-gallery-thumbs{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
  .product-gallery-thumbs .photo-ph{aspect-ratio:1/1;border-radius:var(--radius-sm);flex:1 1 64px;min-width:64px;}
  .product-info{flex:1 1 auto;min-width:0;}
  .product-gallery-thumbs .ph-label{display:none;}
  .gallery-thumb{cursor:pointer;border:2px solid transparent;}
  .gallery-thumb.selected{border-color:var(--orange);}
  .product-info{display:flex;flex-direction:column;gap:var(--sp-4);}
  .product-info .h1{font-size:37px;}
  /* Nome generico dell'oggetto sotto al nome commerciale. Volutamente più leggero
     dell'H1 e più marcato della descrizione: si legge come un'etichetta di categoria,
     non come una seconda riga del nome. Il margine negativo lo tiene agganciato al
     titolo, dentro lo spazio che il flex della colonna lascerebbe fra i due. */
  .product-generic{margin:calc(var(--sp-4) * -1) 0 0;font-size:18px;font-weight:600;color:var(--iface-gray);}
  .product-info form{display:flex;flex-direction:column;gap:var(--sp-4);}
  .product-price{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--black);}
  .product-avail{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--iface-gray);}
  .dot-status{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;}
  .variant-row{display:flex;flex-direction:column;gap:8px;}
  .variant-row .label{font-size:12.5px;font-weight:600;color:var(--graphite);}
  .swatches{display:flex;flex-wrap:wrap;gap:8px;}
  .swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--white);outline:1.5px solid var(--tech-gray);cursor:pointer;flex:none;}
  .swatch.selected{outline-color:var(--orange);}
  .buy-row{display:flex;gap:12px;align-items:center;}
  .qty-input{width:64px;height:52px;border:1.5px solid var(--tech-gray);border-radius:var(--radius-sm);text-align:center;font-size:15px;font-family:var(--font-body);}

  /* Riga del carrello: descrizione a sinistra, quantità e azioni a destra. */
  .cart-line{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
    border-bottom:1px solid var(--tech-gray);padding-bottom:14px;margin-bottom:14px;}
  .cart-line-info{min-width:0;}
  .cart-line-actions{display:flex;align-items:center;gap:10px;flex:none;}
  .cart-line-actions form{display:flex;align-items:center;gap:10px;}
  .cart-totals{display:flex;flex-direction:column;gap:8px;margin-top:20px;max-width:320px;margin-left:auto;}
  .ship-note{font-size:12.5px;color:var(--iface-gray);display:flex;gap:8px;align-items:flex-start;}

  .prod-section{padding:var(--sp-8) 0;border-top:1px solid var(--tech-gray);}
  .prod-section:first-of-type{border-top:none;}
  .prod-section .eyebrow{margin-bottom:14px;}
  .verb-row{display:flex;flex-wrap:wrap;gap:8px;}
  .verb-chip{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:99px;background:var(--pale-orange);color:var(--orange-action);}

  .audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);}
  .audience-card{border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5);}
.audience-card h4, .audience-card h3{font-size:15px;margin-bottom:10px;}
  @media (max-width:900px){.audience-grid{grid-template-columns:1fr;}}

  /* Pannelli di consultazione della scheda prodotto. Sul desktop sono <details> sempre
     aperti e devono apparire come normali blocchi affiancati: nessun triangolino,
     nessun segno più, nessun indizio che ci sia qualcosa da aprire. La fisarmonica
     esiste solo sotto i 600px. */
  .prod-panel > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
  .prod-panel > summary::-webkit-details-marker{display:none;}
  .prod-panel > summary::marker{content:"";}
  .prod-panel-icon{display:none;}

  .spec-table{width:100%;border-collapse:collapse;font-size:14px;}
  .spec-table tr{border-bottom:1px solid var(--tech-gray);}
  .spec-table tr:last-child{border-bottom:none;}
  .spec-table th{text-align:left;padding:12px 16px 12px 0;font-family:var(--font-body);font-weight:600;color:var(--graphite);width:34%;vertical-align:top;}
  .spec-table td{padding:12px 0;color:var(--iface-gray);}

  .box-note{border:1px solid var(--tech-gray);background:var(--white);border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-5);display:flex;gap:14px;align-items:flex-start;}
  .box-note svg{flex:none;margin-top:2px;color:var(--orange-action);}
  .box-note.legal{
    background:repeating-linear-gradient(135deg, #FAFAF8, #FAFAF8 10px, #F1F0EC 10px, #F1F0EC 20px);
    border-style:dashed;border-color:var(--iface-gray);flex-direction:column;
  }
  /* .box-note è in flex row perché nasce per "icona + testo". Con più paragrafi
     fratelli i <p> diventano colonne affiancate: questo modificatore li impila,
     per i riquadri che contengono un blocco di testo su più capoversi. */
  .box-note--stack{flex-direction:column;gap:8px;}
  .box-note p{margin:0;font-size:13.5px;color:var(--iface-gray);}
  .box-note strong{color:var(--graphite);}
  .internal-flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);background:var(--tech-gray);border-radius:4px;padding:5px 10px;margin-bottom:4px;}

  details.faq-item{border-bottom:1px solid var(--tech-gray);padding:16px 0;}
  details.faq-item summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--graphite);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary::after{content:"+";font-family:var(--font-display);font-size:20px;color:var(--orange-action);flex:none;}
  details.faq-item[open] summary::after{content:"–";}
  details.faq-item p{margin:12px 0 0;font-size:14px;color:var(--iface-gray);}

  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
  @media (max-width:1023px){.related-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:599px){.related-grid{grid-template-columns:1fr;}}

  /* ===== TEMPLATE 8: CONTATTI — form ===== */
  .form-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-lg);padding:var(--sp-7);}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  .form-field{display:flex;flex-direction:column;gap:8px;}
  .form-field.full{grid-column:1/-1;}
  .form-label{font-size:12.5px;font-weight:600;color:var(--graphite);}
  /* max-width:100% è necessario soprattutto su <select>: senza, il menù si dimensiona
     sulla propria opzione più lunga e non si restringe mai. Sulla scheda BalanceTrack 3D
     la tendina "Configurazione" era larga 398px dentro una colonna da 350px e mandava in
     scorrimento orizzontale l'intera pagina. */
  .form-input,.form-select,.form-textarea{font-family:var(--font-body);font-size:14.5px;padding:13px 14px;border:1.5px solid var(--tech-gray);border-radius:var(--radius-sm);background:var(--warm-white);color:var(--graphite);max-width:100%;}
  .form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--orange);}
  .form-textarea{resize:vertical;min-height:120px;font-family:var(--font-body);}
  .form-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--iface-gray);}
  .form-check input{margin-top:3px;}
  @media (max-width:700px){.form-grid{grid-template-columns:1fr;}.form-card{padding:var(--sp-5);}}

  .contact-info{display:flex;flex-direction:column;gap:14px;}
  .contact-info .row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--iface-gray);}
  .contact-info svg{flex:none;margin-top:2px;color:var(--orange-action);}

  /* ===== TEMPLATE 4: PAGINA CONTESTO ===== */
  .ctx-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center;padding-top:var(--sp-6);}
  .ctx-hero-media{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;}
  @media (max-width:1023px){.ctx-hero{grid-template-columns:1fr;gap:var(--sp-6);}.ctx-hero-media{order:-1;aspect-ratio:16/9;}}

  .fn-mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
  .fn-mini{border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-4);display:flex;gap:12px;align-items:flex-start;background:var(--white);}
  .fn-mini .fn-icon{width:40px;height:40px;}
  .fn-mini .fn-icon svg{width:22px;height:22px;}
.fn-mini h4, .fn-mini h3{font-size:15px;margin-bottom:4px;}
  /* Variante a due colonne (usata in /risorse). Era uno stile inline sul singolo
     elemento, quindi la riga sotto non riusciva a riportarlo a una colonna sugli
     schermi stretti: due colonne da 190px su un telefono da 390px facevano
     scorrere lateralmente tutta la pagina. */
  .fn-mini-row-2{grid-template-columns:repeat(2,1fr);}
  @media (max-width:1023px){.fn-mini-row,.fn-mini-row-2{grid-template-columns:1fr;}}

  .dev-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--iface-gray);border:1px solid var(--tech-gray);border-radius:99px;padding:5px 12px;}
  .dev-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);}
  /* Avanzamento di un progetto sulle sette fasi di sviluppo descritte nella stessa
     pagina. Mostrare dove si è arrivati è più credibile di "in sviluppo": si aggiorna
     cambiando un numero, e chi legge vede che il percorso è reale. */
  .dev-fasi{display:flex;gap:5px;margin-top:6px;}
  .dev-fase{width:26px;height:5px;border-radius:99px;background:var(--tech-gray);}
  .dev-fase-fatta{background:var(--orange-action);}
  /* Nota sul marchio di terzi. Non usa .micro perché quella classe è maiuscoletto
     spaziato, pensata per etichette brevi: una frase intera in maiuscolo urla, e una
     precisazione legale deve essere leggibile e discreta, non enfatica. */
  .dev-nota{font-size:12px;line-height:1.45;color:var(--iface-gray);margin:4px 0 0;}

  /* ============================================================
     PAGINA ARRAMPICATA
     Sei componenti dedicati. Il resto della pagina riusa i componenti del sito,
     perché deve avere personalità propria senza sembrare un altro sito.
     ============================================================ */

  /* Segnaposto per un'immagine che ancora non esiste. Deliberatamente evidente:
     un segnaposto discreto verrebbe scambiato per una scelta grafica e resterebbe
     lì per sempre. Dice anche quale fotografia va inserita. */
  .ph-slot{width:100%;height:100%;min-height:180px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;text-align:center;padding:var(--sp-5);
    background:repeating-linear-gradient(45deg,var(--pale-orange),var(--pale-orange) 12px,#fff 12px,#fff 24px);
    border:2px dashed var(--orange);border-radius:var(--radius-md);}
  .ph-slot-tag{font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--orange-action);}
  .ph-slot-desc{font-size:14px;line-height:1.45;color:var(--graphite);max-width:340px;}

  /* 1 · Hero. Su desktop il testo sta sopra la fotografia; su smartphone la
     fotografia sta sopra e il testo sotto, perché il testo sovrapposto a
     un'immagine su schermo stretto non si legge. */
  .hero-climb{position:relative;padding:0;}
  .hero-climb-media{width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--warm-white);}
  .hero-climb-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-climb-body{position:absolute;inset:0;display:flex;align-items:center;
    background:linear-gradient(90deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.45) 45%,rgba(8,8,8,0) 75%);}
  .hero-climb-copy{max-width:620px;display:flex;flex-direction:column;gap:18px;}
  .hero-climb-body .h1,.hero-climb-body .body-l{color:#fff;}
  .hero-climb-body .eyebrow{color:#fff;}
  .hero-climb-body .eyebrow::before{background:#fff;}
  .hero-climb .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-climb .btn-outline{color:#fff;border-color:#fff;}
  /* Nell'hero il testo sta sopra l'immagine: l'etichetta del segnaposto va spostata
     in basso a destra, dove la copy non arriva, altrimenti i due testi si
     sovrappongono e non si legge né l'uno né l'altro. */
  .hero-climb .ph-slot{justify-content:flex-end;align-items:flex-end;text-align:right;border-width:0;}
  .hero-climb .ph-slot-desc{max-width:280px;}

  /* 2 · Blocco narrativo con ritratto e firma. */
  .story-block{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-8);align-items:center;}
  .story-copy{display:flex;flex-direction:column;gap:16px;}
  .story-copy .h2{margin:0;}
  .story-copy p{margin:0;}
  .story-media{margin:0;}
  .story-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-md);display:block;}
  .story-media figcaption{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-3);}
  .story-nome{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);}
  .story-ruolo{font-size:13.5px;color:var(--iface-gray);}

  /* La catena narrativa: testo con connettori disegnati, non un'immagine. Resta
     leggibile, selezionabile e si adatta alla larghezza. */
  .origin-chain{display:flex;align-items:stretch;gap:0;margin-top:var(--sp-8);
    counter-reset:tappa;list-style:none;padding:0;}
  .origin-chain li{flex:1;position:relative;padding:var(--sp-4) var(--sp-5) var(--sp-4) 0;
    border-top:2px solid var(--black);display:flex;flex-direction:column;gap:4px;}
  .chain-k{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);line-height:1.2;}
  .chain-v{font-size:13.5px;line-height:1.4;color:var(--iface-gray);}
  .origin-chain li::before{counter-increment:tappa;content:counter(tappa,decimal-leading-zero);
    display:block;font-size:12px;color:var(--orange-action);margin-bottom:6px;
    font-variant-numeric:tabular-nums;}
  .origin-chain li:not(:last-child)::after{content:"";position:absolute;right:var(--sp-4);top:var(--sp-5);
    width:8px;height:8px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
    transform:rotate(-45deg);}
  /* L'ultima tappa è quella che porta ai prodotti: evidenziarla rende visibile che il
     percorso finisce lì e non è una decorazione. */
  .origin-chain li:last-child{border-top-color:var(--orange-action);}
  .origin-chain li:last-child .chain-k{color:var(--orange-action);}

  /* Riga di credenziale nell'hero: dice chi progetta i tools nella prima schermata,
     che è ciò che distingue Focus3D da un negozio di accessori. */
  .hero-credenziale{display:flex;align-items:center;gap:14px;padding-top:var(--sp-4);
    border-top:1px solid rgba(255,255,255,.28);max-width:520px;}
  .hero-credenziale img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;}
  .hero-credenziale span{font-size:14px;line-height:1.45;color:rgba(255,255,255,.85);}
  .hero-credenziale strong{color:#fff;}

  /* Il problema dell'arrampicatore apre la card, prima del nome del tool. */
  .tool-problema{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.3;
    color:var(--orange-action);margin:0;}

  /* 3 · Righe esigenza → tool. Righe e non card: sei card sarebbero sei blocchi da
     leggere, sei righe si scorrono. */
  .need-list{border-top:1px solid var(--tech-gray);}
  .need-row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);align-items:center;
    padding:var(--sp-5) 0;border-bottom:1px solid var(--tech-gray);
    text-decoration:none;color:inherit;transition:background .15s;}
  .need-row:hover{background:var(--white);}
  .need-testo{font-size:18px;line-height:1.4;color:var(--graphite);}
  .need-tool{display:inline-flex;align-items:center;gap:8px;flex:none;
    font-weight:700;font-size:14.5px;color:var(--orange-action);white-space:nowrap;}
  .need-row:hover .arrow{transform:translateX(3px);}
  .need-tool .arrow{transition:transform .15s ease;}

  /* 4 · Il prodotto in evidenza: foto grande, esigenza, soluzione, azione. */
  .tool-feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center;
    background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-lg);
    overflow:hidden;margin-bottom:var(--sp-7);}
  .tool-feature-media{aspect-ratio:1/1;background:var(--warm-white);}
  .tool-feature-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .tool-feature-body{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
    padding:var(--sp-7) var(--sp-7) var(--sp-7) 0;}
  .tool-feature-body .h2{margin:0;}
  .tool-feature-esigenza{font-family:var(--font-display);font-weight:700;font-size:19px;
    line-height:1.35;color:var(--orange-action);margin:0;}
  .tool-feature-body .body{margin:0;}

  /* Nella griglia del catalogo la descrizione è tagliata a due righe perché è lunga e
     uguale per tutti; qui è la frase che spiega il tool all'arrampicatore e va letta
     intera, altrimenti finisce troncata a metà proprio dove sta il senso. */
  .grid-tools-note .tool-body .body{-webkit-line-clamp:3;}

  /* 5 · Aree editoriali. */
  .area-blocco{margin-top:var(--sp-7);}
  .area-titolo{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--graphite);padding-bottom:var(--sp-3);
    border-bottom:1px solid var(--tech-gray);margin-bottom:var(--sp-5);}

  /* 6 · Banda community: il secondo momento fotografico forte della pagina, serve a
     spezzare il ritmo prima delle sezioni finali. */
  .community-band{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
    background:var(--graphite);border-radius:var(--radius-lg);overflow:hidden;}
  .community-media{min-height:340px;}
  .community-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .community-body{padding:var(--sp-8);display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-content:center;}
  .community-body .h2,.community-body .body-l{color:#fff;margin:0;}
  .community-body .eyebrow{color:#fff;}
  .community-body .eyebrow::before{background:#fff;}

  /* Blocco di apertura del contesto: chi c'è dietro, prima dei prodotti. */
  .ctx-autore{max-width:760px;display:flex;flex-direction:column;gap:14px;}

  /* Firma compatta in apertura: basta a dire chi parla senza rubare spazio al
     contenuto, che è la ragione per cui uno resta sulla pagina. */
  .ctx-firma{display:flex;flex-direction:column;gap:2px;padding-top:var(--sp-4);border-top:1px solid var(--tech-gray);}
  .ctx-firma-nome{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);}
  .ctx-firma-ruolo{font-size:13.5px;color:var(--iface-gray);}
  .ctx-nota{margin-top:var(--sp-5);font-size:13px;line-height:1.5;color:var(--iface-gray);max-width:720px;}

  /* "Quando ti fa male?" — il blocco che deve dare qualcosa di utile in pochi secondi
     a chi arriva con un dito dolorante. È volutamente un confronto a due colonne e non
     un testo: la distinzione fra dolore durante il gesto e dolore da fermo è
     l'informazione più utile che si possa dare, e in forma di paragrafo si perde. */
  .bussola{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  .bussola-col{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5);display:flex;flex-direction:column;gap:8px;}
  .bussola-quando{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--black);line-height:1.15;}
  .bussola-det{margin:0;color:var(--iface-gray);}
  .bussola-freccia{width:2px;height:22px;background:var(--tech-gray);margin:6px 0 2px 9px;position:relative;}
  .bussola-freccia::after{content:"";position:absolute;left:-4px;bottom:-1px;width:10px;height:10px;border-right:2px solid var(--tech-gray);border-bottom:2px solid var(--tech-gray);transform:rotate(45deg);}
  .bussola-tipo{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-action);}
  .bussola-lista{display:flex;flex-wrap:wrap;gap:8px;}
  .bussola-lista li{font-size:14.5px;font-weight:600;color:var(--graphite);background:var(--pale-orange);border-radius:99px;padding:5px 13px;}

  .bussola-extra{margin-top:var(--sp-5);border-top:1px solid var(--tech-gray);}
  .bussola-riga{display:grid;grid-template-columns:210px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--tech-gray);}
  .bussola-k{font-weight:700;font-size:14.5px;color:var(--black);}
  .bussola-v{font-size:14.5px;color:var(--iface-gray);line-height:1.5;}

  /* I cinque parametri del carico: cinque riquadri numerati, non un elenco in prosa. */
  .carico-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
  .carico-item{display:flex;flex-direction:column;gap:6px;padding-top:var(--sp-4);border-top:2px solid var(--black);}
  .carico-n{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--orange-action);}
  .carico-item .small{margin:0;color:var(--iface-gray);}

  /* Schede degli infortuni: stessi tre campi per tutti, così si confrontano a colpo
     d'occhio invece di doverli leggere uno di seguito all'altro. */
  .pat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);}
  .pat-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5);}
.pat-card .h4, .pat-card .h3{margin-bottom:var(--sp-4);}
  .pat-riga{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-3);padding:10px 0;border-top:1px solid var(--tech-gray);}
  .pat-k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-action);padding-top:2px;}
  .pat-v{font-size:14.5px;line-height:1.5;color:var(--iface-gray);}

  @media (max-width:1023px){
    .carico-grid{grid-template-columns:repeat(3,1fr);}
    .pat-grid{grid-template-columns:1fr;}
    /* Sotto il desktop il testo esce da sopra la fotografia e va sotto: sovrapposto
       su schermo stretto non si legge, e il gradiente non basta a salvarlo. */
    .hero-climb-media{aspect-ratio:4/5;max-height:62vh;}
    /* Senza fotografia il riquadro resta basso: un segnaposto alto quanto lo schermo
       spinge il titolo sotto la piega. */
    .hero-climb-media--ph{aspect-ratio:16/9;max-height:200px;}
    /* display:block e non flex: da elemento flesso il .wrap interno non può
       restringersi sotto la parola più lunga del titolo, e a 320px "dell'arrampicatore"
       allargava il blocco oltre lo schermo. Qui il centraggio verticale non serve più,
       perché il testo non sta più sopra la fotografia. */
    .hero-climb-body{position:static;display:block;background:var(--graphite);padding:var(--sp-7) 0;}
    .story-block{grid-template-columns:1fr;gap:var(--sp-6);}
    .story-media{order:-1;max-width:320px;}
    .tool-feature{grid-template-columns:1fr;gap:0;}
    .tool-feature-body{padding:var(--sp-6);}
    .community-band{grid-template-columns:1fr;}
    .community-body{padding:var(--sp-6);}
    .origin-chain{flex-wrap:wrap;}
    .origin-chain li{flex:1 1 30%;}
  }

  @media (max-width:599px){
    /* La catena diventa verticale: una tappa per riga, con la linea a sinistra. */
    .origin-chain{flex-direction:column;gap:0;margin-top:var(--sp-6);}
    .origin-chain li{flex:none;border-top:0;border-left:2px solid var(--black);
      padding:var(--sp-3) 0 var(--sp-3) var(--sp-4);}
    .origin-chain li:last-child{border-top:0;border-left-color:var(--orange-action);}
    .chain-k{font-size:15px;}
    .chain-v{font-size:13px;}
    .origin-chain li:not(:last-child)::after{right:auto;left:-5px;top:auto;bottom:-4px;
      transform:rotate(45deg);}
    /* Nell'hero il fondo diventa pieno e scuro: la riga di credenziale mantiene il
       separatore chiaro perché resta su fondo scuro anche qui. */
    .hero-credenziale{max-width:none;}
    .tool-problema{font-size:13px;}
    .need-row{grid-template-columns:1fr;gap:8px;padding:var(--sp-4) 0;}
    .need-testo{font-size:16px;}
    .tool-feature-esigenza{font-size:17px;}
    .tool-feature-body .btn{width:100%;}
    .community-media{min-height:0;aspect-ratio:4/3;}
    .ph-slot{min-height:150px;padding:var(--sp-4);}
    .ph-slot-desc{font-size:13px;}
  }

  /* Articoli editoriali firmati. Colonna di lettura stretta: la misura giusta di una
     riga di testo continuo è molto minore di quella di una pagina a blocchi. */
  .art-wrap{max-width:720px;}
  /* Documento lungo su schermo grande. La colonna di lettura resta larga quanto
     prima: allungare le righe fino al bordo dello schermo peggiora proprio la
     lettura che si vuole migliorare — oltre gli ottanta caratteri l'occhio fa
     fatica a ritrovare l'inizio della riga dopo. Lo spazio che avanza a destra
     porta invece l'indice delle sezioni, che su una pagina legale di venti
     paragrafi serve piu' di righe piu' larghe.
     Sotto i 1000px non cambia niente: l'indice sparisce e il testo e' quello di
     sempre. */
  .wrap.doc-largo{max-width:1400px;}
  /* La colonna di lettura resta 720 a qualunque larghezza, dentro e fuori dalla
     griglia: è la misura che aveva prima e quella che si legge meglio. */
  .doc-testo{max-width:720px;}
  /* La griglia parte solo quando c'è spazio per la colonna intera più l'indice
     (720 + 280 + margini). Prima di quella soglia stringerebbe il testo per far
     posto all'indice, cioè l'opposto di quello che serve. */
  @media (min-width:1140px){
    .wrap.doc-largo{display:grid;grid-template-columns:minmax(0,720px) minmax(200px,280px);
                    gap:var(--sp-7);align-items:start;}
    .doc-indice{position:sticky;top:calc(var(--header-h-desktop) + 24px);
                border-left:2px solid var(--tech-gray);padding-left:18px;}
    .doc-indice-tit{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.06em;
                    text-transform:uppercase;color:var(--orange-action);}
    .doc-indice ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
    .doc-indice a{font-size:14.5px;line-height:1.45;color:var(--iface-gray);text-decoration:none;}
    .doc-indice a:hover{color:var(--orange-action);}
    /* Il titolo puntato dall'indice non deve finire sotto l'intestazione fissa. */
    .doc-sezione{scroll-margin-top:calc(var(--header-h-desktop) + 20px);}
  }
  @media (max-width:1139px){
    .doc-indice{display:none;}
  }
  .art-sub{color:var(--iface-gray);margin:14px 0 0;}
  .art-byline{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--tech-gray);}
  .art-byline-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);}
  .art-byline-role{font-size:13.5px;color:var(--iface-gray);margin-top:2px;}
  /* Più piccola della qualifica: la data è un'informazione di servizio, non deve
     competere con la firma. */

  /* Programmi di esercizi. Chi li usa tiene il telefono in una mano e lavora
     con l'altra: numeri grandi, un esercizio per blocco, e la dose (serie,
     ripetizioni, tenuta) subito sotto il nome, perche' e' la cosa che si torna
     a controllare a meta' esecuzione. */
  .esercizio{display:grid;grid-template-columns:52px 1fr;gap:var(--sp-4);
             padding-top:var(--sp-6);margin-top:var(--sp-6);border-top:1px solid var(--tech-gray);}
  .esercizio-num{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--orange-action);line-height:1;}
  .esercizio-corpo{min-width:0;display:flex;flex-direction:column;gap:var(--sp-3);}
  .esercizio-dosi{display:flex;flex-wrap:wrap;gap:16px;font-size:15px;color:var(--iface-gray);}
  .esercizio-dosi strong{color:var(--black);font-size:17px;}
  /* La foto tiene le sue proporzioni invece di essere ritagliata in un formato
     fisso: una mano si fotografa come viene, e un ritaglio deciso qui taglia via
     proprio le dita quando lo scatto e' verticale. */
  /* Due viste affiancate della stessa posizione: si leggono insieme, non una
     sotto l'altra, o si perde il confronto che le rende utili. */
  .media-riga{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
  .media-riga > *{flex:1 1 0;min-width:0;}
  /* Le card degli esercizi hanno tutte la stessa larghezza, due per riga, invece
     di dividersi lo spazio in parti uguali: dividendolo, un esercizio con due
     immagini le mostrava grandi il doppio di uno con quattro. La misura e' meta'
     riga meno meta' spazio, cioe' esattamente quella che avevano le due card
     dell'esercizio 1 prima di questa regola. */
  .media-riga > .esercizio-media{flex:0 0 calc(50% - 6px);}
  /* La freccia sta dentro lo spazio fra due card, non accanto: e' larga quanto lo
     spazio e i margini negativi le tolgono i suoi due spazi, cosi' la riga misura
     esattamente quanto senza. Se prendesse un posto suo, le card resterebbero due
     per riga ma la terza e la quarta finirebbero una per riga. */
  /* La freccia e' disegnata, non scritta: il carattere "→" viene da un font di
     ripiego diverso su ogni telefono, ed e' comunque un filo sottile. Il disegno
     e' piu' largo dello spazio che occupa e sborda sul bordo delle due card:
     e' voluto, la progressione si deve vedere da lontano. */
  /* z-index: sbordando sulle card, senza un piano suo la freccia finirebbe
     coperta dallo sfondo di quella che la segue e se ne vedrebbe una scheggia. */
  .media-freccia{flex:0 0 12px;margin:0 -12px;align-self:center;
                 display:flex;justify-content:center;color:var(--orange-action);
                 position:relative;z-index:1;}
  /* max-width:none annulla la regola generale delle immagini: qui il disegno
     deve restare largo 38px anche se lo spazio che lo ospita ne misura 12. */
  .media-freccia svg{flex:none;width:38px;height:38px;max-width:none;}
  /* Fra la seconda e la terza immagine la progressione non passa alla card
     accanto ma alla riga sotto: li' la freccia scende in diagonale verso
     sinistra, dove ricomincia la riga. Sta in una fascia bassa con i margini
     negativi, cosi' sfiora le due file invece di allontanarle. */
  .media-freccia--capo{flex:0 0 100%;height:20px;margin:-4px 0;align-items:center;}
  @media (max-width:599px){
    .media-riga{gap:8px;}
    .media-riga > .esercizio-media{flex:0 0 calc(50% - 4px);}
    .media-freccia{flex:0 0 8px;margin:0 -8px;}
    .media-freccia svg{width:32px;height:32px;}
    .media-freccia--capo{flex:0 0 100%;height:18px;margin:-3px 0;}
  }
  .esercizio-media{border-radius:var(--radius-md);overflow:hidden;max-width:360px;height:auto;}
  /* -webkit-touch-callout blocca il menu "salva immagine" della pressione lunga
     su iOS, dove non passa da contextmenu. Solo sulle figure: il testo resta
     selezionabile e copiabile come su ogni altra pagina. */
  .esercizio-media img,
  .facilitazione-media img{-webkit-touch-callout:none;}
  .esercizio-media img{width:100%;height:auto;object-fit:contain;}
  /* Facilitazioni: stesso esercizio con un appoggio in piu'. Foto piccole e in
     fila, perche' sono alternative fra loro e si guardano a colpo d'occhio. */
  .facilitazioni{border-left:2px solid var(--tech-gray);padding-left:18px;margin-top:var(--sp-2);}
  .facilitazioni-tit{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.06em;
                     text-transform:uppercase;color:var(--orange-action);}
  .facilitazioni-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
                       gap:var(--sp-4);align-items:start;}
  .facilitazione-media{border-radius:var(--radius-md);overflow:hidden;height:auto;}
  .facilitazione .media-riga{margin:0 0 10px;}
  .facilitazione-media img{width:100%;height:auto;object-fit:contain;}
  .facilitazione-nome{margin:0 0 10px;font-weight:700;font-size:15px;color:var(--black);}
  .facilitazione .small{margin:0;}
  .esercizio-passaggi{margin:0;padding-left:20px;list-style:decimal;}
  .esercizio-passaggi li{font-size:17px;line-height:1.6;color:var(--iface-gray);margin-bottom:8px;}
  /* Selezione degli esercizi da stampare. La casella sta nella colonna del numero,
     dove non contende spazio al testo, e l'esercizio escluso resta leggibile ma
     visibilmente spento: chi guarda deve capire cosa finira' nel foglio senza
     doverlo scaricare per verificare. */
  .esercizio-scelta{display:block;margin-top:12px;}
  .esercizio-scelta input{width:20px;height:20px;accent-color:var(--orange-action);cursor:pointer;}
  .esercizio--escluso{opacity:.4;}
  .esercizio--escluso .esercizio-media{filter:grayscale(1);}
  .scelta-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
                gap:var(--sp-3);padding:14px 18px;border:1px solid var(--tech-gray);
                border-radius:var(--radius-md);margin-bottom:var(--sp-4);}
  .scelta-testo{margin:0;font-size:15px;color:var(--iface-gray);}
  .scelta-azioni{display:flex;gap:18px;}
  .scelta-link{background:none;border:0;padding:0;font:inherit;font-size:14.5px;
               color:var(--orange-action);cursor:pointer;text-decoration:underline;}
  /* Percorsi pronti. Sono scorciatoie sulla selezione, non un filtro: cliccarne
     uno mette le caselle come vuole lui, e da li' comanda di nuovo la selezione.
     Per questo restano accesi finche' la scelta e' ancora la loro e si spengono
     da soli appena si tocca una casella a mano. */
  .percorsi{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:var(--sp-4);}
  .percorsi-eti{font-size:13px;font-weight:700;letter-spacing:.06em;
                text-transform:uppercase;color:var(--iface-gray);}
  .percorsi-lista{display:flex;flex-wrap:wrap;gap:8px;}
  .percorso{background:none;border:1px solid var(--tech-gray);border-radius:999px;
            font:inherit;font-size:14px;padding:7px 15px;color:var(--iface-gray);cursor:pointer;
            transition:background .15s,border-color .15s,color .15s;}
  .percorso:hover{border-color:var(--orange-action);color:var(--orange-action);}
  .percorso.is-attiva{background:var(--orange-action);border-color:var(--orange-action);
                      color:#fff;font-weight:600;}
  /* Interruttore delle foto. Due stati visibili insieme e non una casella da
     spuntare: chi guarda deve vedere sia dov'e' sia dove puo' andare, senza
     doverlo dedurre da un'etichetta. */
  .foto-switch{display:flex;align-items:center;gap:14px;margin-bottom:var(--sp-3);}
  .foto-switch-eti{font-size:13px;font-weight:700;letter-spacing:.06em;
                   text-transform:uppercase;color:var(--iface-gray);}
  .foto-switch-opzioni{display:inline-flex;border:1px solid var(--tech-gray);
                       border-radius:999px;overflow:hidden;}
  .foto-opz{background:none;border:0;font:inherit;font-size:14px;padding:7px 16px;
            color:var(--iface-gray);cursor:pointer;}
  .foto-opz + .foto-opz{border-left:1px solid var(--tech-gray);}
  .foto-opz.is-attiva{background:var(--orange-action);color:#fff;font-weight:600;}
  /* Il filtro e' il ripiego: si applica solo dove NON esiste un disegno a linee
     da mettere al posto di quello a colori (le immagini che ce l'hanno portano
     data-bn e vengono scambiate dal JS). Desaturare un disegno ombreggiato da'
     un grigio sporco, non un tratto pulito. */
  .esercizi-bn .esercizio-media img:not([data-bn]),
  .esercizi-bn .facilitazione-media img:not([data-bn]){filter:grayscale(1);}
  @media (max-width:599px){
    .foto-switch{flex-wrap:wrap;gap:8px;}
  }
  .btn--inerte{opacity:.45;pointer-events:none;}
  @media (max-width:599px){
    .esercizio{grid-template-columns:1fr;gap:var(--sp-2);}
    .esercizio-num{font-size:22px;display:flex;align-items:center;gap:14px;}
    .esercizio-scelta{margin-top:0;}
    .esercizio-media{max-width:none;}
  }
  /* Su schermo grande la colonna da 720px lasciava i lati vuoti e la pagina
     diventava lunghissima: tredici esercizi con le immagini sopra il testo sono
     tredici schermate. Qui il contenitore si allarga e le immagini vanno di
     fianco al testo. Solo da 1000px in su: sul telefono resta tutto com'era,
     una cosa sotto l'altra. Il PDF non c'entra, ha il suo impaginatore
     (esercizi_pdf.py) che di queste misure non sa niente. */
  @media (min-width:1000px){
    .art-wrap.esercizi-largo{max-width:1400px;}
    /* Le righe di testo lungo non seguono il contenitore: oltre una certa
       lunghezza l'occhio non ritrova l'inizio della riga dopo. */
    .esercizi-largo .art-sub,
    .esercizi-largo .art-intro,
    .esercizi-largo > .box-note{max-width:820px;}
    /* Un float e non una griglia: i blocchi di testo cambiano da un esercizio
       all'altro (passaggi, attenzione, facilitazioni) e una griglia andrebbe
       dichiarata riga per riga. flow-root tiene il float dentro il suo
       esercizio, cosi' non sborda su quello sotto. */
    .esercizi-largo .esercizio-corpo{display:flow-root;}
    .esercizi-largo .esercizio-corpo > * + *{margin-top:var(--sp-3);}
    .esercizi-largo .esercizio-corpo > .media-riga{float:right;width:46%;
                                                  margin:0 0 var(--sp-3) var(--sp-6);}
    /* Le facilitazioni stanno affiancate e restano della misura di prima: sono
       alternative fra loro, si guardano a colpo d'occhio, e lasciarle crescere
       con il contenitore le faceva diventare piu' grandi delle foto
       dell'esercizio. Due colonne dichiarate e non auto-fit: accanto alle
       immagini dell'esercizio lo spazio si stringe, e auto-fit conta le colonne
       sulla misura massima della traccia, quindi ne trovava una sola e le
       incolonnava. */
    .esercizi-largo .facilitazioni-lista{grid-template-columns:repeat(2,minmax(0,1fr));
                                         max-width:640px;}
  }
  .art-byline-date{font-size:12.5px;color:var(--iface-gray);margin-top:6px;}
  .art-intro{margin:0 0 var(--sp-6);}
  .art-h{margin:var(--sp-7) 0 var(--sp-3);}
  .art-wrap p.body{margin:0 0 var(--sp-4);}
  .art-list{margin:var(--sp-4) 0 var(--sp-5);}
  .art-tools{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--tech-gray);}
  .art-autore{margin-top:var(--sp-8);padding:var(--sp-5);background:var(--pale-orange);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:flex-start;}
  .art-nota{margin-top:var(--sp-5);color:var(--iface-gray);font-style:italic;}
  .art-altri{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--tech-gray);}
  .art-altri .res-grid{grid-template-columns:1fr 1fr;}
  @media (max-width:599px){.art-altri .res-grid{grid-template-columns:1fr;}}
  .dev-intro{max-width:680px;margin-bottom:var(--sp-5);}
  .dev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);}
  .dev-card{border:1px dashed var(--iface-gray);border-radius:var(--radius-md);background:var(--pale-orange);overflow:hidden;display:flex;flex-direction:column;}
  .dev-card-media{aspect-ratio:16/10;}
  .dev-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .dev-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;}
  /* Variante orizzontale: testo a sinistra, immagine a destra, per non lasciare una card
     piccola isolata in un'area vuota quando c'è un solo progetto in sviluppo. */
  .dev-card-horizontal{flex-direction:row;}
  .dev-card-horizontal .dev-card-media{flex:0 0 38%;aspect-ratio:auto;}
  .dev-card-horizontal .dev-card-body{flex:1;justify-content:center;}
  @media (max-width:700px){.dev-card-horizontal{flex-direction:column;}.dev-card-horizontal .dev-card-media{flex:none;aspect-ratio:16/10;}}
  .dev-spec{display:flex;flex-direction:column;gap:6px;font-size:13px;}
  .dev-spec div{display:flex;gap:6px;}
  .dev-spec b{font-weight:600;color:var(--graphite);flex:none;}
  .dev-spec span{color:var(--orange-action);}
  @media (max-width:900px){.dev-grid{grid-template-columns:1fr;}}

  /* Componenti reali della homepage approvata (docs/index.html), che ha un proprio blocco CSS
     indipendente dal prototipo templates.html — estratti da lì per fedeltà esatta (sostituiscono
     un'approssimazione fatta in precedenza per process-strip/value-band/grid-3/res-card, quando
     questa fonte non era ancora stata trovata). */
  .hero{padding-top:var(--sp-8);padding-bottom:var(--sp-9);}
  /* La foto è 4:5 verticale, quindi la sua altezza la decide la larghezza della sua
     colonna: più spazio le si dà, più diventa alta, e il testo accanto sembra perso.
     A 1600px con le proporzioni precedenti l'immagine era alta 841px contro i 427px
     del testo — quasi il doppio. Restringere la colonna destra accorcia la foto e
     allarga il testo con un unico intervento, senza aggiungere una parola. */
  .hero-grid{display:grid;grid-template-columns:1fr 0.92fr;gap:var(--sp-8);align-items:center;}
  /* Cornice quadrata perché quadrata è la sorgente: così la foto si vede intera,
     senza che object-fit:cover ne tagli i lati. Se un giorno la foto tornasse
     verticale, questo valore va cambiato insieme al file. */
  /* height:auto annulla l'height:100% che .hero-media eredita da .photo-ph, sullo
     stesso elemento: quando il testo è più alto della foto quella regola vinceva
     sull'aspect-ratio e allungava il quadrato: 433x525 a 1100px, con i lati
     ritagliati da object-fit. */
  .hero-media{position:relative;aspect-ratio:1/1;height:auto;
              border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--tech-gray);}
  /* Ritmo verticale invece di una spaziatura unica: occhiello e titolo si leggono
     come una cosa sola, mentre le CTA hanno bisogno di stacco per essere un invito
     e non la coda del paragrafo. */
  /* Il tetto tiene il titolo su tre righe invece di due: righe più corte, blocco
     più alto, più presenza accanto a una foto verticale. È scelto stretto quanto
     basta a ottenere le tre righe e non di più, perché ogni pixel in meno qui
     diventa spazio vuoto fra le due colonne sugli schermi larghi. */
  .hero-copy{display:flex;flex-direction:column;gap:0;max-width:680px;}
  .hero-copy .eyebrow{margin-bottom:var(--sp-5);}
  .hero-copy .h1{font-size:63px;margin:0 0 var(--sp-5);}
  /* Misura di riga corta: il sottotitolo resta una frase da leggere in un colpo
     d'occhio anche quando la colonna di testo è larga. */
  .hero-copy .body-l{margin:0;max-width:42ch;}
  /* .hero-ctas è condivisa con innovation-lab, home-program, chi-siamo e la pagina
     arrampicata: lo stacco maggiore vale solo per la hero della homepage, quindi è
     legato a .hero-copy, che esiste solo lì. */
  .hero-ctas{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;}
  .hero-copy .hero-ctas{margin-top:var(--sp-8);}
  @media (min-width:1440px){.hero-copy .h1{font-size:68px;}}
  /* La foto della hero è 4:5 verticale: il contenitore 16/10 usato in precedenza sotto
     i 1023px ne mostrava solo metà altezza. Il quadrato riduce il ritaglio dal 50% al
     20% circa, restando più compatto del 4:5 pieno usato su desktop.
     Il max-height serve solo agli schermi bassi e larghi (tablet in orizzontale, dove
     un quadrato largo quanto il contenuto sarebbe più alto della finestra e spingerebbe
     il titolo sotto la piega): lì la foto si accorcia quel tanto che basta, mentre su
     smartphone e tablet in verticale resta quadrata piena. */
  /* Sotto i 1023px la foto passava sopra al testo (order:-1) e, alta quanto la
     colonna è larga, spingeva titolo e CTA sotto la piega: su tablet le CTA
     finivano a 1234px su una finestra di 1112, su smartphone a 910 su 844. Ora
     l'ordine è quello del documento — occhiello, titolo, sottotitolo, CTA, e poi
     la foto — così il messaggio si legge appena la pagina si apre. */
  @media (max-width:1023px){
    .hero-grid{grid-template-columns:1fr;gap:var(--sp-6);}
    .hero-media{aspect-ratio:1/1;max-height:70vh;max-width:none;margin-left:0;}
    .hero-copy{max-width:none;}
    .hero-copy .h1{font-size:40px;}
    .hero-copy .hero-ctas{margin-top:var(--sp-6);}
  }
  /* Su schermo piccolo lo spazio attorno alla hero costa una fetta di schermata:
     52px sopra l'occhiello e 104px fra la foto e la sezione seguente erano aria
     pensata per il desktop. Ridotti solo qui — sopra i 600px restano invariati. */
  @media (max-width:599px){
    .hero{padding-top:var(--sp-5);padding-bottom:var(--sp-6);}
    .hero-copy .h1{font-size:32px;}
    .hero-ctas{flex-direction:column;align-items:stretch;}
  }

  .position-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start;}
  .position-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-6);}
  .position-col{display:flex;flex-direction:column;gap:8px;padding-top:var(--sp-4);border-top:2px solid var(--black);}
  /* I tre principi sono <details>, ma sul desktop restano sempre aperti e devono
     apparire come un normale blocco di testo: niente triangolino, niente segno più,
     nessun indizio che ci sia qualcosa da aprire. La fisarmonica vera esiste solo
     sotto i 600px. */
  .position-col > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
  .position-col > summary::-webkit-details-marker{display:none;}
  .position-col > summary::marker{content:"";}
  .position-col-icon{display:none;}
  @media (max-width:900px){.position-grid{grid-template-columns:1fr;gap:var(--sp-5);}.position-cols{grid-template-columns:1fr;}}

  .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
  @media (max-width:1023px){.grid-5{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:599px){.grid-5{grid-template-columns:repeat(2,1fr);}.grid-4{grid-template-columns:1fr;}.grid-3{grid-template-columns:1fr;}}

  .fn-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:10px;min-height:168px;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;}
  .fn-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
  .fn-card:hover .fn-icon{background:var(--orange);color:var(--white);}
.fn-card h4, .fn-card h3{font-size:16.5px;}
  .fn-card .link{margin-top:auto;font-size:13.5px;}

  .process-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4);}
  .process-strip-7{grid-template-columns:repeat(7,1fr);}
  .process-step{display:flex;flex-direction:column;gap:10px;border-left:2px solid var(--tech-gray);padding-left:16px;}
  .process-step .num{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--orange);}
  @media (max-width:1023px){.process-strip{grid-template-columns:repeat(3,1fr);row-gap:var(--sp-6);}}
  @media (max-width:599px){.process-strip{grid-template-columns:1fr 1fr;}}

  /* Variante 7 passaggi in due righe (4+3), la seconda centrata, per evitare che l'ultimo
     elemento resti isolato in una griglia sbilanciata su desktop. */
  .process-7-row1{grid-template-columns:repeat(4,1fr);}
  .process-7-row2{grid-template-columns:repeat(3,1fr);max-width:75%;margin:var(--sp-6) auto 0;}
  @media (max-width:1023px){
    .process-7-row1{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6);}
    .process-7-row2{grid-template-columns:repeat(2,1fr);max-width:100%;margin-top:var(--sp-6);row-gap:var(--sp-6);}
  }
  @media (max-width:599px){
    .process-7-row1,.process-7-row2{grid-template-columns:1fr;max-width:100%;row-gap:var(--sp-6);}
    .process-7-row2{margin-top:var(--sp-6);}
  }

  .sol-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;}
  .sol-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
  .sol-media{aspect-ratio:4/3;}
  .sol-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;flex:1;}
  .sol-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-action);}
.sol-body h4, .sol-body h3{font-size:20.5px;}
  .sol-body .body{font-size:16px;flex:1;}
  .sol-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}

  .value-band{background:var(--pale-orange);border-radius:var(--radius-lg);padding:var(--sp-7);}
  .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-6);}
  .value-item{display:flex;flex-direction:column;gap:8px;}
  .value-item .idx{font-family:var(--font-display);font-weight:700;color:var(--orange-action);font-size:13px;}
  @media (max-width:1023px){.value-band{padding:var(--sp-6);}.value-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:599px){.value-grid{grid-template-columns:1fr;}}

  .hp-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--sp-8);align-items:center;background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-lg);padding:var(--sp-7);}
  @media (max-width:1023px){.hp-grid{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6);}}

  .use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
  .use-item{aspect-ratio:3/4;}
  @media (max-width:1023px){.use-grid{grid-template-columns:repeat(2,1fr);}}

  .dark-section{background:var(--black);color:var(--white);}
  .dark-section .h2{color:var(--white);}
  .dark-section .body-l{color:#B9B9B7;}
  .dark-section .body{color:#B9B9B7;}
  .lab-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--sp-8);align-items:center;}
  .lab-note{border:1px solid #2b2b2b;background:#111111;border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-5);font-size:13.5px;color:#B9B9B7;margin-top:var(--sp-5);}
  .lab-note b{color:var(--orange);}
  @media (max-width:1023px){.lab-grid{grid-template-columns:1fr;gap:var(--sp-6);}}

  .founder-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--sp-8);align-items:center;}
  .founder-media{aspect-ratio:1/1;}
  @media (max-width:1023px){.founder-grid{grid-template-columns:1fr;gap:var(--sp-6);}.founder-media{order:-1;aspect-ratio:1/1;}}
  /* Variante con la foto più protagonista (usata in Innovation Lab): più larga del testo e con
     un formato più verticale, solo da desktop in su — sotto i 1024px vale il layout impilato
     standard di .founder-grid/.founder-media qui sopra. */
  @media (min-width:1024px){
    .founder-grid-featured{grid-template-columns:1.15fr .85fr;}
    .founder-media-featured{aspect-ratio:4/5;}
  }

  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
  .res-card{background:var(--white);border:1px solid var(--tech-gray);border-radius:var(--radius-md);padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;transition:box-shadow .18s,border-color .18s,transform .18s;}
  a.res-card:hover{box-shadow:var(--shadow-hover);border-color:var(--orange);transform:translateY(-3px);}
  .res-card-media{aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 4px;}
  .res-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .res-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-action);}
.res-card h4, .res-card h3{font-size:17px;}
  @media (max-width:1023px){.res-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:599px){.res-grid{grid-template-columns:1fr;}}

  .proof-band{border-top:1px solid var(--tech-gray);border-bottom:1px solid var(--tech-gray);padding:var(--sp-7) 0;}
  .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
  .proof-item{display:flex;flex-direction:column;gap:6px;}
  .proof-item .stat{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--black);}
  @media (max-width:1023px){.proof-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6);}}
  @media (max-width:599px){.proof-grid{grid-template-columns:1fr;}}

  .final-cta{background:var(--graphite);border-radius:var(--radius-lg);padding:var(--sp-8);color:var(--white);}
  .final-cta .h2{color:var(--white);}
  .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);margin-top:var(--sp-6);}
  .final-path{border-top:1px solid #3a3a3a;padding-top:var(--sp-5);display:flex;flex-direction:column;gap:14px;}
  @media (max-width:1023px){.final-cta{padding:var(--sp-6);}.final-grid{grid-template-columns:1fr;}}

  .eyebrow.on-dark{color:var(--orange);}
  .eyebrow.on-dark::before{background:var(--orange);}
  .btn-outline.on-dark{color:var(--white);border-color:var(--white);}
  .btn-outline.on-dark:hover{background:var(--white);color:var(--black);}

  /* align-items:stretch: impilando in colonna, le due parti devono prendere tutta la
     larghezza disponibile. Con l'allineamento in alto ereditato dal desktop, invece,
     la colonna delle informazioni si dimensionava sul proprio contenuto: sulla scheda
     BalanceTrack 3D la tendina "Configurazione" (larga quanto l'opzione più lunga,
     "Set completo (Triangolare + Esagonale) — 49,90 €") la portava a 398px dentro uno
     schermo da 390px, facendo scorrere lateralmente tutta la pagina. */
  @media (max-width:1023px){.product-hero{flex-direction:column;align-items:stretch;gap:var(--sp-6);}.product-gallery{flex-basis:auto;width:100%;}}

  /* footer (identico) */
  footer{background:var(--black);color:#B9B9B7;padding:var(--sp-8) 0 var(--sp-5);}
  .footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-6);padding-bottom:var(--sp-7);border-bottom:1px solid #232323;}
  .footer-brand{display:flex;flex-direction:column;gap:14px;max-width:280px;}
  .footer-brand .logo-img{width:118px;}
  .footer-brand .body{color:#8f8f8d;font-size:13.5px;}
  .footer-col h5, .footer-col h2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8f8f8d;margin:0 0 14px;}
  .footer-col ul{display:flex;flex-direction:column;gap:10px;}
  .footer-col a{font-size:14px;color:#d8d8d6;}
  .footer-col a:hover{color:var(--orange);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-5);flex-wrap:wrap;gap:12px;}
  .footer-bottom .micro{color:#6f6f6d;}
  @media (max-width:1023px){.footer-top{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;max-width:none;}}
  @media (max-width:599px){.footer-top{grid-template-columns:1fr;}}

  /* I puntini esistono solo dove esistono i caroselli, cioè su smartphone: js/carousel.js
     li rimuove sopra i 600px, e questa riga li tiene comunque invisibili nell'istante
     fra il rendering della pagina e l'esecuzione dello script. */
  .carousel-dots{display:none;}

  /* ============================================================
     IMPAGINAZIONE SMARTPHONE (<=599px)
     ============================================================
     Sotto i 600px il layout desktop, impilandosi in una sola colonna,
     rendeva la home alta 15,5 schermate: navigabile ma dispersiva.
     Questo blocco la ricompatta a circa metà, senza toccare testi,
     colori, tipografia, gerarchia o ordine dei contenuti — e senza
     alcun effetto su desktop e tablet, che restano invariati.
     È volutamente raccolto in fondo al foglio e in un unico blocco:
     se un intervento non convince, si rimuove la regola corrispondente
     senza rischiare di toccare altro. */
  @media (max-width:599px){

    /* 0. Scala tipografica. I titoli avevano la stessa dimensione del desktop su
       ogni schermo: un .h1 da 50px su un telefono da 390px lascia spazio a circa
       tredici caratteri, quindi bastava una parola più lunga per sfondare il
       layout — "approfondimenti" (/risorse) e "dell'arrampicatore."
       (/contesti/arrampicata) uscivano dallo schermo di 49px e 97px e facevano
       scorrere lateralmente l'intera pagina. La scala qui è ridotta in modo
       proporzionato, mantenendo invariata la gerarchia fra i livelli.
       L'eccezione .hero-copy .h1 aveva già una sua riduzione e resta com'è. */
    .h1{font-size:33px;}
    .h2{font-size:26px;}
    .h3{font-size:21px;}
    .body-l{font-size:18px;}
    .product-info .h1{font-size:30px;}
    /* Rete di sicurezza: una parola singola più larga dello schermo va spezzata,
       non deve poter allargare la pagina. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4{overflow-wrap:break-word;}

    /* 1. Card prodotto della home: da quattro schede impilate (2,8 schermate)
       a una striscia scorribile con lo swipe. Ogni card occupa il 78% della
       larghezza, così il bordo di quella successiva resta visibile e si capisce
       a colpo d'occhio che l'elenco continua. */
    .grid-4{
      display:flex;
      grid-template-columns:none;
      gap:var(--sp-4);
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding-bottom:2px;
    }
    .grid-4::-webkit-scrollbar{display:none;}
    .grid-4 > *{flex:0 0 78%;scroll-snap-align:start;}

    /* Puntini di scorrimento (costruiti da js/carousel.js). Il bordo della scheda
       successiva che sbuca a destra non bastava a far capire che la striscia si
       trascina: i puntini dicono quante schede ci sono e a quale siamo. Sono anche
       toccabili, così chi non prova lo swipe può comunque passare alla successiva. */
    .carousel-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:var(--sp-4);}
    .carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
      background:var(--tech-gray);cursor:pointer;transition:width .18s,background .18s;}
    .carousel-dots button[aria-selected="true"]{width:26px;border-radius:4px;background:var(--orange-action);}

    /* 2. "Cinque aree della funzione della mano": la sezione serve a orientarsi
       in fretta, non a leggere. Su smartphone restano icona, nome e freccia;
       il paragrafo descrittivo è ridondante qui perché la stessa informazione
       è sulla pagina di destinazione. */
    .fn-card{min-height:0;padding:var(--sp-4) var(--sp-3);gap:8px;}
    .fn-card p{display:none;}
    .grid-5{gap:var(--sp-3);}

    /* 3. Elenchi di valori/principi: due colonne invece di una. Sono blocchi
       brevi (numero, titolo, una riga), quindi reggono bene la metà larghezza. */
    .value-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-4);}

    /* 4. Strisce di processo: scorrimento orizzontale come al punto 1. Oltre a
       occupare meno spazio, rende leggibile la sequenza degli step, che in
       colonna verticale si perdeva. */
    .process-strip{
      display:flex;
      grid-template-columns:none;
      gap:var(--sp-4);
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding-bottom:2px;
    }
    .process-strip::-webkit-scrollbar{display:none;}
    .process-strip > *{flex:0 0 64%;scroll-snap-align:start;}

    /* 6. "Come nasce un tool". Sul desktop i tre principi stanno affiancati sotto
       tre righe nere spesse, e si leggono come un'unica affermazione in tre parti.
       Impilandosi su smartphone quel disegno si disfaceva: tre righe nere a tutta
       larghezza, distanti fra loro, sembravano separatori di sezioni diverse invece
       che di tre voci dello stesso elenco, e il blocco diventava un muro di testo.
       Qui diventano un elenco numerato compatto: il numero arancione tiene insieme
       le tre voci, i separatori sottili le distinguono senza spezzare la pagina. */
    .position-grid .body-l{font-size:16.5px;line-height:1.5;}
    .position-cols{counter-reset:principio;gap:0;margin-top:var(--sp-5);}
    .position-col{display:block;border-top:1px solid var(--tech-gray);padding:0;}
    .position-cols .position-col:last-child{border-bottom:1px solid var(--tech-gray);}

    /* La riga toccabile: numero, titolo, segno più. Alta almeno 52px perché sia
       comoda da colpire con il pollice. */
    .position-col > summary{
      display:grid;
      grid-template-columns:26px 1fr auto;
      align-items:center;
      column-gap:var(--sp-4);
      padding:var(--sp-4) 0;
      min-height:52px;
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    .position-col > summary::before{
      counter-increment:principio;
      content:counter(principio,decimal-leading-zero);
      font-family:var(--font-display);
      font-weight:700;
      font-size:15px;
      color:var(--orange-action);
      font-variant-numeric:tabular-nums;
    }
.position-col .h4, .position-col .h3{font-size:17px;}

    /* Segno più che diventa meno quando il pannello è aperto: dice sia che c'è
       qualcosa da aprire, sia in che stato si trova ora. */
    .position-col-icon{display:block;position:relative;width:14px;height:14px;}
    .position-col-icon::before,
    .position-col-icon::after{content:"";position:absolute;background:var(--orange-action);border-radius:1px;}
    .position-col-icon::before{left:0;top:6px;width:14px;height:2px;}
    .position-col-icon::after{left:6px;top:0;width:2px;height:14px;transition:transform .18s,opacity .18s;}
    .position-col[open] .position-col-icon::after{transform:scaleY(0);opacity:0;}

    /* Il testo rientra sotto il titolo, allineato con esso e non con il numero. */
    .position-col > .body{
      margin:0;
      padding:0 0 var(--sp-4) calc(26px + var(--sp-4));
      font-size:15px;
      line-height:1.5;
    }

    /* 5. Ritmo verticale: il respiro fra le sezioni era tarato sul desktop.
       Ridotto qui, dove lo spazio verticale è la risorsa scarsa. */
    section{padding:28px 0;}
    .section-head{margin-bottom:var(--sp-5);}
    .value-band{padding:var(--sp-5);}

    /* Titolo e link della testata di sezione affiancati stavano su una colonna
       strettissima ("Quattro / tools / da cui / iniziare."): su smartphone si impilano. */
    .section-head-split{flex-direction:column;align-items:flex-start;gap:var(--sp-3);}

    /* 7. Cataloghi prodotti: due schede per riga invece di una.
       Una scheda a tutta larghezza occupa più di mezzo schermo, quindi scorrere
       gli undici tools voleva dire attraversare sei schermate e mezzo: si perde
       il senso di quanti siano e non se ne confrontano mai due. Affiancandole si
       vede il catalogo, non una scheda alla volta.
       Nella scheda stretta restano foto, categoria, nome ed eventuale prezzo:
       la descrizione breve sparisce perché a metà larghezza si spezzerebbe in
       cinque righe di due parole, e la stessa frase è la prima cosa che si legge
       aprendo la scheda del prodotto. */
    .grid-tools{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
    .tool-body{padding:10px 12px 12px;gap:3px;}
    .tool-body .body{display:none;}
.tool-body h4, .tool-body h3, .tool-body h2{font-size:14.5px;line-height:1.25;}
    .tool-cat{font-size:10px;letter-spacing:.06em;line-height:1.3;}
    /* "Scopri il tool →" era una riga per scheda su undici schede: la scheda
       intera è già un collegamento, quindi l'invito esplicito è ridondante. */
    .tool-body > .link{display:none;}
    /* Eccezione: dove la riga sotto il nome è un contenuto specifico della pagina e
       non la descrizione generica del catalogo, va letta anche su smartphone. */
    .grid-tools-note .tool-body .body{display:-webkit-box;-webkit-line-clamp:4;font-size:13px;line-height:1.4;}

    /* La bussola resta a due colonne anche su smartphone: il confronto fra i due casi
       è tutto il senso del blocco, e impilandoli si legge come due elenchi separati. */
    .bussola{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
    .bussola-col{padding:var(--sp-4) var(--sp-3);gap:6px;}
    .bussola-quando{font-size:17px;}
    .bussola-det{font-size:12.5px;line-height:1.4;}
    .bussola-tipo{font-size:10.5px;letter-spacing:.06em;}
    .bussola-lista{flex-direction:column;gap:5px;}
    .bussola-lista li{font-size:13px;padding:4px 10px;align-self:flex-start;}
    .bussola-riga{grid-template-columns:1fr;gap:4px;padding:var(--sp-3) 0;}
    .carico-grid{grid-template-columns:1fr 1fr;gap:var(--sp-4);}
    .pat-riga{grid-template-columns:1fr;gap:3px;}
    .pat-k{font-size:10.5px;}
    .pat-v{font-size:14px;}
    .tool-foot{flex-direction:column;align-items:flex-start;gap:4px;margin-top:4px;}
    .price-tag{font-size:11px;}

    /* 8. Documenti prodotto: qui la griglia è la stessa dei cataloghi ma il
       contenuto no — non ci sono foto, solo un nome e un pulsante di download
       identico undici volte. Affiancarli non aiuta; diventano righe di elenco,
       con la sola icona a destra e il nome a sinistra. Il pulsante ripetuto per
       esteso occupava da solo più spazio del titolo che lo giustificava. */
    .grid-docs{grid-template-columns:1fr;gap:0;}
    .grid-docs .doc-card{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      column-gap:var(--sp-3);
      padding:var(--sp-3) 0 !important;
      background:none;
      border:0;
      border-bottom:1px solid var(--tech-gray);
      border-radius:0;
    }
    .grid-docs .doc-card:first-child{border-top:1px solid var(--tech-gray);}
    .grid-docs .doc-card .eyebrow{font-size:10px;letter-spacing:.06em;gap:6px;}
    .grid-docs .doc-card .h3{font-size:16px;line-height:1.3;}
    .grid-docs .doc-action{grid-column:2;grid-row:1 / span 2;margin-top:0 !important;}
    .grid-docs .btn-doc{width:44px;height:44px;padding:0;border-radius:var(--radius-sm);}
    /* Nascosta alla vista ma non agli screen reader: display:none la toglierebbe
       anche a loro. Qui resta comunque l'aria-label sul collegamento. */
    .btn-doc-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

    /* 9. Schede risorse: la foto a tutta larghezza in formato 4:3 valeva da sola
       due terzi di schermata, per tre voci che sono in sostanza tre collegamenti.
       Diventano righe con la miniatura quadrata a sinistra: l'immagine resta come
       riferimento visivo, ma smette di essere il contenuto principale.
       La regola è legata a .res-grid e non a .res-card da sola: la stessa classe è
       riusata altrove (i tre riquadri sui materiali in /risorse) senza immagine, e lì
       la colonna della miniatura resterebbe vuota. */
    .res-grid{grid-template-columns:1fr;gap:var(--sp-3);}
    .res-grid .res-card{
      display:grid;
      grid-template-columns:96px 1fr;
      column-gap:var(--sp-4);
      row-gap:2px;
      align-content:start;
      padding:var(--sp-3);
    }
    .res-grid .res-card-media{
      grid-column:1;
      grid-row:1 / span 4;
      margin:0;
      aspect-ratio:1/1;
      align-self:start;
    }
    .res-grid .res-card > :not(.res-card-media){grid-column:2;}
    .res-grid .res-card .res-cat{font-size:10px;}
.res-grid .res-card .h4, .res-grid .res-card .h3{font-size:16px;line-height:1.3;}
    .res-grid .res-card .small{font-size:13px;line-height:1.45;}
    .res-grid .res-card .link{font-size:13.5px;margin-top:4px !important;}

    /* 10. "Soluzioni correlate" in fondo alla scheda prodotto: sono tre schede
       complete impilate, quindi una coda di una schermata e mezza dopo che la
       pagina si è già conclusa. Diventano un carosello come le card in home:
       stesso gesto e stessi puntini, in un sesto dello spazio. */
    .related-grid{
      display:flex;
      grid-template-columns:none;
      gap:var(--sp-4);
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding-bottom:2px;
    }
    .related-grid::-webkit-scrollbar{display:none;}
    .related-grid > *{flex:0 0 72%;scroll-snap-align:start;}
    /* Nel carosello la scheda è larga: la descrizione ci sta e serve, a differenza
       delle schede affiancate del catalogo. */
    .related-grid .tool-body .body{display:-webkit-box;}
    .related-grid .tool-body > .link{display:inline-flex;}
.related-grid .tool-body h4, .related-grid .tool-body h3{font-size:16.5px;}
    .related-grid .tool-cat{font-size:10.5px;}

    /* 11. Galleria prodotto: le miniature andavano a capo su tre righe, circa 210px
       spesi prima ancora di arrivare al nome del prodotto. Su una sola riga
       scorrevole ne restano visibili quattro e si capisce che ce ne sono altre. */
    .product-gallery-thumbs{
      flex-wrap:nowrap;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      gap:var(--sp-2);
    }
    .product-gallery-thumbs::-webkit-scrollbar{display:none;}
    .product-gallery-thumbs .photo-ph{flex:0 0 78px;min-width:78px;scroll-snap-align:start;}

    /* 12. "Cosa contiene" e "Specifiche tecniche": insieme oltre due schermate di
       elenchi e tabella piazzate a metà pagina, fra il racconto del prodotto e le
       domande frequenti. Sono materiale di consultazione, quindi diventano due
       pannelli chiusi, con lo stesso gesto dei principi in home. */
    /* Impilandosi, i due pannelli devono leggersi come due voci dello stesso elenco:
       lo stacco fra colonne li teneva separati come se fossero sezioni diverse. */
    .two-col-panels{gap:0;}
    .prod-panel{border-top:1px solid var(--tech-gray);}
    .two-col > .prod-panel:last-child{border-bottom:1px solid var(--tech-gray);}
    .prod-panel > summary{padding:var(--sp-4) 0;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .prod-panel > summary .eyebrow{margin:0;}
    .prod-panel > :not(summary):last-child{margin-bottom:var(--sp-4);}
    .prod-panel-icon{display:block;position:relative;width:14px;height:14px;flex:none;}
    .prod-panel-icon::before,
    .prod-panel-icon::after{content:"";position:absolute;background:var(--orange-action);border-radius:1px;}
    .prod-panel-icon::before{left:0;top:6px;width:14px;height:2px;}
    .prod-panel-icon::after{left:6px;top:0;width:2px;height:14px;transition:transform .18s,opacity .18s;}
    .prod-panel[open] .prod-panel-icon::after{transform:scaleY(0);opacity:0;}
    /* La colonna delle etichette al 34% costringeva "Materiale tavola principale" su
       tre righe mentre accanto restava spazio vuoto. */
    .spec-table{font-size:13px;}
    .spec-table th{width:44%;padding:10px 10px 10px 0;}
    .spec-table td{padding:10px 0;}

    /* 13. Carrello: nome, quantità, "Aggiorna" e "Rimuovi" su una riga sola non ci
       stanno in 390px e facevano scorrere la pagina lateralmente. Le azioni vanno
       sotto la descrizione, distribuite sulla larghezza. */
    .cart-line{flex-direction:column;align-items:stretch;gap:var(--sp-3);}
    .cart-line-actions{justify-content:space-between;}
    /* Il riepilogo era largo al massimo 320px e allineato a destra, quindi su
       smartphone restava una fascia vuota a sinistra e il pulsante di pagamento
       finiva spostato invece che a portata di pollice. */
    .cart-totals{max-width:none;}

    /* 14. Schede "Percorsi": l'altezza minima di 220px serve sul desktop a pareggiare
       tre schede affiancate con testi di lunghezza diversa. Impilate, quel vincolo
       aggiunge solo spazio vuoto sotto ciascuna — circa 300px per pagina fra
       /soluzioni, le pagine categoria e /contatti. */
    .path-card{min-height:0;padding:var(--sp-4);}
    .path-card-bg{width:56%;}

    /* Le colonne di una griglia hanno min-width:auto, quindi non possono restringersi
       sotto la larghezza minima del proprio contenuto: bastava un elemento non spezzabile
       per allargare la colonna oltre lo schermo e mandare in overflow orizzontale tutta
       la pagina (succedeva su /risorse e /contesti/arrampicata già prima di questo
       lavoro). min-width:0 permette alla colonna di stare nei limiti. */
    .sol-hero > *,.ctx-hero > *,.hero-grid > *,.position-grid > *,.two-col > *,.hp-grid > *{min-width:0;}
  }