.dt-radio{flex:none; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.42); position:relative; background:transparent; transition:.12s}
  .sel > .dt-radio{border-color:var(--link)}
  .sel > .dt-radio:after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sel-dot)}
  .dt-svc{position:relative}
  .dt-svc > .dt-radio{position:absolute; top:9px; right:9px; width:18px; height:18px}
  .dt-pay > .dt-radio{width:18px; height:18px}
  .dt-opts{display:flex; flex-direction:column; gap:8px}
  .dt-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; appearance:none; cursor:pointer; padding:13px 15px; border-radius:12px; border:1.5px solid var(--glass-bd); background:rgba(255,255,255,.05); transition:.12s}
  .dt-opt.sel{border-color:rgba(112,98,255,.6); background:rgba(112,98,255,.14)}
  .dt-opt-main{flex:1; min-width:0}
  .dt-opt-n{font:700 14px var(--font); color:#fff; line-height:1.2}
  @keyframes bppulse{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.012)}100%{transform:translateX(-50%) scale(1)}}
  
  .boxswitch{display:flex; align-items:center; gap:8px; margin:2px 0 12px}
  .boxswitch > span{font:600 11.5px var(--font); color:var(--on-dark-mut)}
  .bsw{display:inline-flex; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:2px}
  .bsw button{appearance:none; border:none; background:none; color:var(--on-dark-mut); font:700 12px var(--font); padding:6px 13px; border-radius:999px; cursor:pointer}
  .bsw button.on{background:var(--primary); color:#fff}
  
  .boxbar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px; z-index:40; min-height:62px; display:flex; align-items:center; gap:11px; background:rgba(17,22,43,.96); backdrop-filter:blur(18px) saturate(140%); border-top:1px solid rgba(255,255,255,.12); border-radius:18px 18px 0 0; padding:11px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -10px 34px rgba(0,0,0,.5); cursor:pointer}
  .boxbar.pulse{animation:bppulse .5s ease}
  .boxbar.style-v3{flex-direction:column; align-items:stretch; gap:8px}
  .bx-row{display:flex; align-items:center; gap:11px}
  .bx-meta{flex:1; min-width:0; color:#fff; display:flex; flex-direction:column; gap:2px}
  .bx-stat{font:800 13.5px var(--font)}
  .bx-stat.ok{color:var(--ok-dark)} .bx-stat.warn{color:#FFCF6B}
  .bx-cnt{font:600 12px var(--font); color:var(--on-dark-mut)}
  .bx-see{font:600 12px var(--font); color:var(--link)}
  .bx-col3{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none}
  .bx-tot{font:800 18px var(--font-display); color:#fff; white-space:nowrap}
  /* Pallino accanto al totale: spiega che quel prezzo e' del box, non di una cassa.
     Il ::after allarga l'area toccabile a 44px senza spostare la grafica. */
  .bx-tot-i{position:relative; appearance:none; border:none; cursor:pointer; vertical-align:middle; margin-left:5px; width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; font:800 11px/17px var(--font)}
  .bx-tot-i::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:transparent}
  .bx-tot-i:active{background:rgba(255,255,255,.34)}
  .dec{font-size:.58em; vertical-align:.44em; font-weight:700; margin-left:1px}
  .bx-cta{appearance:none; border:1px solid var(--cta-bd); background:var(--cta-bg); color:var(--cta-ink); font:700 14px var(--font); padding:9px 18px; border-radius:11px; cursor:pointer; flex:none; white-space:nowrap}
  .bx-cta:disabled{opacity:1; background:var(--dis-bg); color:var(--dis-ink); box-shadow:none}
  .bx-cta.off{opacity:1; background:var(--dis-bg); color:var(--dis-ink); box-shadow:none; cursor:pointer}
  .bx-cta.big{padding:13px 22px; font-size:15px; box-shadow:0 8px 20px var(--cta-glow), var(--cta-hi); position:relative; overflow:hidden; animation:ctaPop .32s ease, ctaNudge 3s ease-in-out 1.2s infinite}
  .bx-cta.big::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-14deg); animation:ctaShine 2.8s ease-in-out 1s infinite; pointer-events:none}
  @keyframes ctaShine{0%{transform:translateX(-160%) skewX(-14deg)}32%{transform:translateX(320%) skewX(-14deg)}100%{transform:translateX(320%) skewX(-14deg)}}
  .bx-arr{display:inline-block; margin-left:3px; font-weight:900}
  @keyframes ctaPop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
  @keyframes ctaNudge{0%,80%,100%{transform:scale(1) rotate(0)}84%{transform:scale(1.06) rotate(-2deg)}88%{transform:scale(1.06) rotate(2deg)}92%{transform:scale(1.04) rotate(-1.2deg)}96%{transform:scale(1.02) rotate(0)}}
  
  
  .bx-row{flex-wrap:wrap}                       
  .boxbar:not(.style-v3){flex-wrap:wrap}        
  .bx-urge{order:-1; flex-basis:100%; width:100%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:-1px 0 1px; padding:6px 12px; border-radius:9px; line-height:1.2; text-align:center;
    font:600 12px var(--font); color:var(--on-dark-mut);
    background:color-mix(in srgb, var(--danger) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--danger) 32%, transparent)}
  .bx-urge-ico{flex:none; color:#FF6B6B; display:block}
  .bx-urge-txt{min-width:0}
  
  .bx-timer-val{color:#FF6B6B; font:800 12.5px var(--font); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; animation:bxUrgePulse 1.6s ease-in-out infinite}
  @keyframes bxUrgePulse{0%,100%{opacity:1}50%{opacity:.58}}
  
  
  .bx-urge.ending{color:#FFD7D7; background:color-mix(in srgb, var(--danger) 22%, transparent); border-color:color-mix(in srgb, var(--danger) 50%, transparent)}
  .bx-urge.ending .bx-urge-ico{color:#FF8A8A}
  .bx-urge.ending .bx-timer-val{color:#FF8A8A; animation:bxUrgeBlink 1s ease-in-out infinite}
  @keyframes bxUrgeBlink{0%,100%{opacity:1}50%{opacity:.45}}
  @supports not (background:color-mix(in srgb, red 10%, transparent)){
    .bx-urge{background:rgba(220,38,38,.14); border-color:rgba(220,38,38,.32)}
    .bx-urge.ending{background:rgba(220,38,38,.22); border-color:rgba(220,38,38,.5)}
  }
  .box-toast{position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(10px); z-index:60; background:rgba(17,22,43,.97); color:#fff; font:700 13px var(--font); padding:11px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); opacity:0; pointer-events:none; transition:.26s ease; white-space:nowrap}
  .box-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  
  .bx-slots{display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr; gap:3px; background:rgba(255,255,255,.08); border-radius:7px; padding:4px; flex:none}
  .bx-dot{width:14px; height:16px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden}
  .bx-dot.full{background:#fff}
  .bx-dot img{width:100%; height:100%; object-fit:contain; display:block}
  
  .bx-cratesrow{display:flex; align-items:stretch; gap:8px}
  .bx-cratesrow .bx-crates{flex:1; min-width:0}
  .bx-undo{flex:none; align-self:stretch; width:40px; border-radius:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
  .bx-undo:active{background:rgba(255,255,255,.16)}
  .bx-crates{position:relative; display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scroll-behavior:smooth; scrollbar-width:none}
  .bx-crates::-webkit-scrollbar{display:none}
  .bx-crate{flex:none; display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr; gap:3px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:5px}
  .bx-crate.act{border-color:var(--link); box-shadow:0 0 0 2px rgba(112,98,255,.3)}
  .bx-slot{width:15px; height:18px; border-radius:3px; background:rgba(255,255,255,.13); overflow:hidden}
  .bx-slot.full{background:#fff}
  .bx-slot img{width:100%; height:100%; object-fit:contain; display:block}
  
  .dscrim{position:fixed; inset:0; z-index:48; background:rgba(8,11,22,.5); opacity:0; pointer-events:none; transition:opacity .26s ease}
  .dscrim.show{opacity:1; pointer-events:auto}
  .dsheet{position:fixed; left:50%; transform:translate(-50%,102%); bottom:0; width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0; z-index:49; height:95%; max-height:95%; display:flex; flex-direction:column; visibility:hidden; transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s}
  .dsheet.open{transform:translate(-50%,0); visibility:visible; transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s}
  .d-head{flex:none; padding:6px 16px 10px; border-bottom:1px solid var(--subtle)}
  /* var(--card) e non #fff: il foglio del box diventa scuro ridefinendo le variabili,
     e un bianco scritto a mano restava fuori da quella regola — meta' foglio bianca */
  .d-foot{flex:none; padding:6px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--card)}
  .d-grab{width:42px; height:4px; border-radius:3px; background:var(--border-strong); margin:4px auto 9px; cursor:pointer}
  
  .d-x{display:none; position:absolute; top:10px; right:12px; z-index:3; appearance:none; border:none; background:transparent; cursor:pointer; font:300 30px/1 var(--font); color:#8a93a3; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; padding:0; transition:var(--motion)}
  .d-x:hover{background:rgba(15,23,42,.07); color:#16284A}
  .d-h{font:800 16px var(--font-display); color:var(--text); margin-bottom:3px}
  .d-miss{font:700 13.5px var(--font); margin-bottom:9px}
  .d-miss.ok{color:var(--success)} .d-miss.warn{color:#C2410C}
  .dm-crates{position:relative; display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .dm-crates::-webkit-scrollbar{display:none}
  .dm-crate{flex:none; display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr; gap:4px; background:var(--subtle); border:1px solid var(--border); border-radius:9px; padding:6px}
  .dm-crate.act{border-color:var(--sel); box-shadow:0 0 0 2px var(--sel-fill)}
  .dm-slot{width:20px; height:25px; border-radius:4px; background:#fff; border:1px dashed var(--border-strong); overflow:hidden}
  .dm-slot.full{border:1px solid var(--border); box-shadow:inset 0 -2px 4px rgba(0,0,0,.08)}
  .dm-slot img{width:100%; height:100%; object-fit:contain; display:block}
  .d-cta{appearance:none; border:1px solid var(--cta-bd); cursor:pointer; width:100%; font:800 15px var(--font); color:var(--cta-ink); background:var(--cta-bg); border-radius:13px; padding:13px; box-shadow:0 6px 16px var(--cta-glow), var(--cta-hi)}
  
  .ci-list{flex:1 1 auto; min-height:48px; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 16px}
  .ci{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--subtle)}
  .ci-img{width:36px; height:46px; object-fit:contain; flex:none; background:#f4f6fb; border-radius:7px; padding:2px}
  .ci-mid{flex:1; min-width:0}
  .ci-name{font:700 14px var(--font); color:var(--text)}
  .ci-sub{font:500 11.5px var(--font); color:var(--muted)}
  .ci-line{font:600 11.5px var(--font); margin-top:1px}
  .ci-line.incl{color:var(--success)}
  .ci-line.prem{color:var(--accent)}
  .ci-qty{display:flex; align-items:center; gap:9px; flex:none}
  .qbtn{appearance:none; border:1px solid var(--border); background:var(--subtle); width:36px; height:36px; border-radius:50%; font:700 15px/1 var(--font); color:var(--primary); cursor:pointer; display:flex; align-items:center; justify-content:center}
  .ci-qty b{min-width:14px; text-align:center; font:700 15px var(--font); color:var(--text)}
  
  .ci-x{appearance:none; flex:none; width:30px; height:30px; border-radius:50%; border:1px solid rgba(226,75,74,.5); background:transparent; color:#E24B4A; font:700 17px/1 var(--font); cursor:pointer; display:flex; align-items:center; justify-content:center}
  .ci-x:active{background:rgba(226,75,74,.12)}
  .coupon{margin:13px 0 2px}
  .coupon-row{display:flex; align-items:center; gap:8px; background:var(--subtle); border:1px solid var(--border); border-radius:12px; padding:6px 8px 6px 12px}
  .coupon-ico{font-size:15px}
  .coupon-row input{flex:1; border:none; background:none; font:600 14px var(--font); color:var(--text); outline:none; text-transform:uppercase}
  .coupon-row input::placeholder{text-transform:none; color:var(--placeholder); font-weight:500}
  .coupon-btn{appearance:none; border:1px solid var(--ghost-bd); background:var(--ghost-bg); color:#fff; font:700 14px var(--font); padding:9px 16px; border-radius:11px; cursor:pointer}
  .coupon-msg{font:600 12px var(--font); margin-top:6px}
  .coupon-msg.ok{color:var(--success)} .coupon-msg.err{color:var(--danger)} .coupon-msg.info{color:var(--muted)}
  .cr-block{margin-top:12px; border-top:1px solid var(--border); padding-top:10px}
  .cr{display:flex; justify-content:space-between; align-items:center; font:600 14px var(--font); color:var(--text-2); padding:5px 0}
  .cr-i{appearance:none; border:none; width:15px; height:15px; border-radius:50%; background:var(--success); color:#fff; font:700 10px/15px var(--font); cursor:pointer; vertical-align:middle; margin-left:3px}
  .cr-tot{font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--text); border-top:1px solid var(--border); margin-top:6px; padding-top:10px}
  .cr-disc{color:var(--success); font-weight:700}
  .cr-disc .cr-i{background:var(--success)}
  .cr-free{color:var(--success); font-weight:800}
  
  .tot-old{text-decoration:line-through; opacity:.5; font-weight:600; font-size:.78em; margin-right:5px}
  .tot-new{color:var(--danger)}
  .cauz-note{font:500 12px var(--font); color:var(--muted); background:var(--subtle); border-radius:10px; padding:9px 11px; margin-top:10px; line-height:1.45}
  .d-addr{display:flex; align-items:center; gap:8px; background:var(--subtle); border:1px solid var(--border); border-radius:11px; padding:9px 11px; margin-top:12px}
  .d-addr-ic{flex:none; font-size:14px}
  .d-addr-tx{flex:1; min-width:0; font:600 12.5px var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .d-addr-edit{flex:none; appearance:none; border:none; background:none; color:var(--primary); font:700 12.5px var(--font); cursor:pointer; padding:3px 4px; text-decoration:underline}
  .cart-empty{color:var(--muted); text-align:center; padding:18px}
  .ph{color:var(--on-dark); text-align:center; padding:50px 12px; animation:rise 480ms var(--spring) both}
  .ph .em{font-size:40px; margin-bottom:14px}
  .ph h2{font-family:var(--font-display); font-size:22px; margin-bottom:8px}
  .ph p{color:var(--on-dark-mut); font-size:14.5px; margin-bottom:22px}
  .back{display:inline-flex; align-items:center; gap:6px; appearance:none; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); padding:9px 16px; border-radius:var(--pill); font:600 13.5px var(--font); cursor:pointer; margin-bottom:4px}
  .ph .back{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); padding:12px 22px; border-radius:var(--pill); font:600 14px var(--font); cursor:pointer}
  .undertext{text-align:center; color:var(--on-dark-mut); font-size:13px; margin-top:20px}
  .undertext a{color:var(--link); font-weight:600; text-decoration:none; cursor:pointer}

  
  .v3h{position:relative}
  .v3h-hero{position:relative; overflow:hidden; margin:0 -16px; padding:22px 20px 16px; background:var(--bg-deep)}
  .v3h-glow{display:none}
  
  .v3h-bubbles{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none}
  .v3h-bubbles b{position:absolute; bottom:-24px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(120,213,223,.22) 55%, rgba(120,213,223,0) 72%); box-shadow:inset 0 0 5px rgba(255,255,255,.35); animation:bubbleRise linear infinite}
  @keyframes bubbleRise{0%{transform:translateY(0) scale(.85); opacity:0} 12%{opacity:.6} 82%{opacity:.4} 100%{transform:translateY(-540px) scale(1.1); opacity:0}}
  /* niente bianco puro nella home: i toni --home-ink-* e il perche' sono in fondo al file.
     Nel tema chiaro questi colori sono ridefiniti scuri piu' sotto. */
  .v3h-rating{position:relative; z-index:2; display:inline-flex; flex-wrap:wrap; align-items:center; gap:7px; font:700 11.5px var(--font); color:var(--home-ink-1); cursor:pointer}
  .v3h-rating .v3h-stars{color:#FFD24A; letter-spacing:1px}
  .v3h-eyebrow{position:relative; z-index:2; margin-top:17px; font:700 11px var(--font); letter-spacing:.26em; text-transform:uppercase; color:var(--link); display:flex; align-items:center; gap:10px}
  .v3h-eyebrow::before{content:""; width:24px; height:1px; background:var(--sky); flex:none}
  .v3h-eyebrow.ctr{justify-content:center}
  .v3h-h1{position:relative; z-index:2; margin-top:16px; font:800 clamp(36px,9.6vw,44px)/1.04 var(--font-display); letter-spacing:-.02em; color:var(--home-ink-1)}
  /* il titolo e' tutto di un colore, in entrambi i temi (Marco, 25/9/2026): la seconda
     riga era sfumata dall'azzurro al viola, lo stesso azzurro del pulsante subito
     sotto, e i due si confondevano. */
  .v3h-h1 em{font-style:normal; color:inherit}
  .v3h-price{position:relative; z-index:2; margin-top:14px; display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap; white-space:nowrap; font:600 12px var(--font); color:rgba(255,255,255,.7)}
  .v3h-price s{font:800 20px var(--font-display); color:rgba(255,255,255,.5); text-decoration-thickness:2px}
  .v3h-price b{font:900 24px var(--font-display); letter-spacing:-.02em; background:linear-gradient(100deg,#78D5DF 0%,#62ADFF 55%,#7062FF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
  .v3h-price .tail{font:600 11.5px var(--font); color:rgba(255,255,255,.7); overflow:hidden; text-overflow:ellipsis}
  .v3h-bullets{position:relative; z-index:2; margin-top:15px; list-style:none; display:flex; flex-direction:column; gap:9px; max-width:330px}
  .v3h-bullets li{display:flex; align-items:flex-start; gap:9px; font:500 14px/1.35 var(--font); color:rgba(255,255,255,.84)}
  .v3h-bullets li::before{content:"✓"; flex:none; color:var(--sky); font:900 14px/1.35 var(--font)}
  
  .v3h-start{position:sticky; top:10px; z-index:20; margin-top:16px; background:var(--bg-deep); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:14px; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.55); transition:transform var(--motion), border-color var(--motion)}
  .v3h-start:hover{border-color:rgba(112,98,255,.45)}
  .v3h-start:active{transform:scale(.992)}
  .v3h-start-head{display:flex; align-items:center; gap:10px; margin-bottom:11px}
  .v3h-start-lab{font:700 14px var(--font); color:var(--home-ink-1)}
  .v3h-search{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:6px 6px 6px 14px; transition:border-color var(--motion)}
  .v3h-search:focus-within{border-color:rgba(112,98,255,.6)}
  .v3h-search-ic{flex:none; color:var(--link); display:flex}
  .v3h-search input{flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font:600 15px var(--font); padding:10px 0}
  .v3h-search input::placeholder{color:rgba(255,255,255,.62); font-weight:500}
  .v3h-go{width:100%; margin-top:12px; padding:17px 18px; border-radius:14px; border:1px solid var(--cta-bd); cursor:pointer; position:relative; overflow:hidden; background:var(--cta-bg); display:flex; align-items:center; justify-content:center; gap:9px; color:var(--cta-ink); font:800 17px var(--font); box-shadow:0 10px 24px var(--cta-glow), var(--cta-hi); animation:ctaNudge 3s ease-in-out 1.2s infinite}
  .v3h-go svg{width:20px; height:20px}
  .v3h-go::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-14deg); animation:ctaShine 2.8s ease-in-out 1s infinite; pointer-events:none}
  .v3h-go svg{flex:none}
  /* il bicchiere d'acqua prima di "Verifica", in cima e in fondo (Marco, 25/9/2026): solo
     colori del marchio, acqua con la sfumatura del logo (#62ADFF -> #7062FF). Nel tema chiaro
     il contorno diventa bianco come la freccia (regola piu' sotto), l'acqua resta senza bordo. */
  .v3h-go .cta-bicchiere, .v3h-final-cta .cta-bicchiere{width:24px; height:24px; flex:none}
  .v3h-fakeph{font:500 15px var(--font); color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .v3h-caret{flex:none; width:2px; height:19px; border-radius:1px; background:var(--sel-dot); animation:v3hblink 1.1s steps(1,end) infinite}
  @keyframes v3hblink{0%,49%{opacity:1}50%,100%{opacity:0}}
  .v3h-hint{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:11px; font:600 12px var(--font); color:rgba(255,255,255,.74); white-space:nowrap}
  .v3h-hint svg{flex:none; color:var(--link)}
  .v3h-start .sugg-list{margin-top:9px}
  .v3h-start #addrstatus:not(:empty){margin-top:9px}
  
  .v3h-sec{margin-top:30px}
  .v3h-hero + .v3h-sec{margin-top:16px}
  
  /* dentro c'e' l'h1 con la sola parola chiave, e le etichette in una riga a parte:
     lo stile resta sul contenitore, cosi' a schermo la riga e' identica a prima */
  .v3h-eyebrow2{display:flex; align-items:center; gap:0; font:700 11px var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--link); margin:0 0 13px}
  .v3h-eyebrow2 h1{margin:0; font:inherit; letter-spacing:inherit; color:inherit}
  .v3h-eyebrow2 .v3h-etichette{margin-left:.4em}
  .v3h-eyebrow2::before{content:""; width:24px; height:1px; background:var(--sky); flex:none; margin-right:10px}
  .v3h-brands{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .v3h-brand-track{display:flex; width:max-content; animation:v3hmarquee 32s linear infinite}
  .v3h-brand-track:hover{animation-play-state:paused}
  
  .v3h-brand-item{flex:none; height:50px; min-width:64px; margin-right:26px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .18s ease, opacity .18s ease}
  .v3h-brand-item:hover{transform:translateY(-2px)}
  .v3h-brand-item:focus-visible{outline:2px solid var(--link); outline-offset:4px; border-radius:8px}
  
  .v3h-brand-item img{height:28px; width:auto; max-width:116px; object-fit:contain; display:block;
    filter:grayscale(1) invert(1) brightness(1.45) contrast(1.1); mix-blend-mode:screen}
  .v3h-brand-text{color:rgba(255,255,255,.92); font:800 15px var(--font-display); letter-spacing:-.01em}
  @keyframes v3hmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .v3h-h2{font:800 30px/1.08 var(--font-display); letter-spacing:-.02em; color:#fff; margin:14px 0 22px}
  
  .v3h-values{margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:22px 16px}
  .v3h-val{position:relative; padding:0}
  .v3h-vic{flex:none; display:inline-flex; align-items:center; margin-bottom:10px; color:var(--sky)}
  .v3h-vic svg{width:30px; height:30px}
  .v3h-vt{font:800 15px var(--font-display); letter-spacing:-.01em; color:#fff; margin-bottom:4px}
  .v3h-vd{font:500 12.5px/1.45 var(--font); color:rgba(255,255,255,.72)}
  
  .v3h-photo{position:relative; margin-top:30px; border-radius:24px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; box-shadow:var(--sh-float)}
    
  .v3h-photo>picture{display:contents}
  .v3h-photo>img,
  .v3h-photo>picture>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .v3h-photo-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,32,0) 30%,rgba(11,16,32,.90) 100%)}
  .v3h-photo-body{position:relative; z-index:2; padding:20px}
  .v3h-photo-h{font:800 23px/1.12 var(--font-display); letter-spacing:-.01em; color:#fff}
  .v3h-photo-p{margin-top:8px; font:500 13px/1.45 var(--font); color:rgba(255,255,255,.85)}
  
  .v3h-steps{display:flex; flex-direction:column; position:relative}
  .v3h-steps::before{content:""; position:absolute; left:21px; top:26px; bottom:26px; width:2px; background:linear-gradient(180deg,var(--primary),var(--accent),var(--aqua))}
  .v3h-step{display:flex; gap:18px; align-items:flex-start; padding:14px 0; position:relative}
  .v3h-step-n{flex:none; width:44px; height:44px; border-radius:50%; background:var(--bg-deep); display:grid; place-items:center; font:900 25px var(--font-display); color:var(--sky); z-index:2}
  .v3h-step-t{font:800 18px var(--font-display); letter-spacing:-.01em; color:#fff}
  .v3h-step-p{font:500 13.5px/1.45 var(--font); color:rgba(255,255,255,.64); margin-top:3px; max-width:250px}
  
  .v3h-van{position:relative; margin-top:30px; border-radius:24px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; box-shadow:var(--sh-float)}
  .v3h-van>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .v3h-van-grad{position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,18,36,.5) 0%,transparent 38%,rgba(11,16,32,.96) 100%)}
  .v3h-van-c{position:relative; z-index:2; padding:20px}
  .v3h-van-h{font:800 26px/1.1 var(--font-display); letter-spacing:-.02em; color:#fff; max-width:280px}
  .v3h-van-p{margin-top:10px; font:500 13.5px/1.45 var(--font); color:rgba(255,255,255,.76); max-width:290px}
  
  .v3h-proof{position:relative; overflow:hidden; margin-top:26px; padding:18px 20px; text-align:center; background:transparent}
  .v3h-proof::after{display:none}
  .v3h-proof-big{position:relative; font:900 42px var(--font-display); letter-spacing:-.04em; line-height:1; color:#fff}
  .v3h-proof-sub{position:relative; margin-top:9px; font:600 13.5px var(--font); color:rgba(255,255,255,.92)}
  .v3h-proof-rate{position:relative; display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:6px}
  .v3h-proof-rate b{font:800 17px var(--font); color:#fff}
  .v3h-proof-stars{color:#FFD24A; font-size:15px; letter-spacing:2px}
  
  .v3h-final{position:relative; overflow:hidden; margin-top:34px; padding:30px 20px 30px; text-align:center; background:transparent}
  .v3h-final-glow{display:none}
  .v3h-final-logo{position:relative; z-index:2; height:30px; width:auto; margin:0 auto 12px; display:block; opacity:.95}
  .v3h-final-h{position:relative; z-index:2; font:800 34px/1.08 var(--font-display); letter-spacing:-.02em; color:#fff}
  .v3h-final-h em{font-style:normal; background:linear-gradient(100deg,var(--aqua),#8B7CFF); -webkit-background-clip:text; background-clip:text; color:transparent}
  .v3h-final-p{position:relative; z-index:2; margin:14px auto 0; font:500 14.5px/1.5 var(--font); color:rgba(255,255,255,.74); max-width:290px}
  .v3h-final-cta{position:relative; z-index:2; overflow:hidden; margin-top:22px; width:100%; border:1px solid var(--cta-bd); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; padding:17px; border-radius:16px; font:800 16px var(--font); color:var(--cta-ink); background:var(--cta-bg); box-shadow:0 14px 32px var(--cta-glow), var(--cta-hi); animation:ctaNudge 3s ease-in-out 1.2s infinite}
  .v3h-final-cta svg{flex:none; position:relative; z-index:1}
  .v3h-final-cta::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-14deg); animation:ctaShine 2.8s ease-in-out 1s infinite; pointer-events:none}
  /* il dato sta su una riga sua: si legge anche a chi scorre senza fermarsi */
  .v3h-final-citta{position:relative; z-index:2; margin:14px 0 0; font:500 13.5px var(--font); color:rgba(255,255,255,.72)}
  /* niente ciano qui sotto: e' il colore del pulsante e i due si confondono */
  .v3h-final-citta b{color:#fff; font-weight:800}
  .v3h-final-note{position:relative; z-index:2; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; font:600 12px var(--font); color:rgba(255,255,255,.55)}
  .v3h-final-note svg{flex:none}
  .v3h-login{text-align:center; color:var(--on-dark-mut); font-size:13px; margin-top:22px}
  
  .v3h-faq{margin-top:34px; transform:translateZ(0)}
  .v3h-faq-list{display:flex; flex-direction:column; gap:10px; margin-top:4px}
  .v3h-faq-item{background:#10172E; border:1px solid rgba(255,255,255,.12); border-radius:14px}
  .v3h-faq-item.open{border-color:rgba(98,173,255,.5); background:#13203B}
  .v3h-faq-q{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; appearance:none; -webkit-appearance:none; background:transparent; border:none; cursor:pointer; padding:15px 16px; font:700 14.5px/1.35 var(--font-display); color:#fff; -webkit-tap-highlight-color:transparent}
  .v3h-faq-q > span:first-child{flex:1; min-width:0}
  .v3h-faq-ic{flex:none; color:var(--sky); transition:transform .25s ease; display:inline-flex}
  .v3h-faq-item.open .v3h-faq-ic{transform:rotate(180deg)}
  .v3h-faq-a{display:none; padding:0 16px 16px; font:500 13px/1.6 var(--font); color:rgba(255,255,255,.74)}
  .v3h-faq-item.open .v3h-faq-a{display:block}
  .v3h-faq-a a{color:var(--sky); text-decoration:none; font-weight:700}
  
  
  
  .rv-head{text-align:center; margin:4px 0 6px}
  .rv-score{font:900 38px var(--font-display); color:var(--text); line-height:1}
  .rv-stars{color:#9A6300; font-size:17px; letter-spacing:2px; margin-top:4px}
  .rv-sub{font:600 12.5px var(--font); color:var(--muted); margin-top:4px}
  .rv-list{max-height:58vh; overflow-y:auto; margin-top:12px; display:flex; flex-direction:column; gap:11px}
  .rv-item{border:1px solid var(--border); border-radius:14px; padding:13px 14px; background:var(--subtle)}
  .rv-item .s{color:#9A6300; font-size:12px; letter-spacing:1px}
  .rv-item .t{font:500 13px/1.45 var(--font); color:var(--text); margin:5px 0 7px}
  .rv-item .a{font:700 12px var(--font); color:var(--text-2)}
  .ct-quick{display:flex; gap:9px; margin:6px 0 14px}
  .ct-quick a{flex:1; text-align:center; font:700 13px var(--font); text-decoration:none; padding:12px; border-radius:12px; border:1px solid var(--border); color:var(--text)}
  .ct-field{display:block; margin-bottom:11px}
  .ct-field span{display:block; font:700 12px var(--font); color:var(--text-2); margin-bottom:5px}
  .ct-field input,.ct-field textarea{width:100%; box-sizing:border-box; font:500 14.5px var(--font); color:var(--text); padding:12px 13px; border:1.5px solid var(--border); border-radius:12px; background:#fff}
  .ct-field textarea{min-height:88px; resize:vertical}
  .ct-field .ct-hint{display:block; font:500 11.5px/1.4 var(--font); color:var(--muted); margin-top:5px}
  .ct-ok{display:none; text-align:center; font:600 13.5px/1.5 var(--font); color:var(--success); padding:10px 0}
  .ct-err{display:none; text-align:center; font:600 13.5px/1.5 var(--font); color:var(--danger, #b91c1c); padding:10px 0}
  .ct-nota{margin:8px 0 0; text-align:center; font:500 11.5px/1.45 var(--font); color:var(--muted)}
  .ct-nota a{color:var(--link); text-decoration:underline}
  .v3h-login a{color:var(--link); font-weight:700; text-decoration:none; cursor:pointer}
  
  .v3h-figno{display:none}
  .v3h-h2 em{font-style:normal; background:linear-gradient(100deg,var(--aqua),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
  
  .v3h-start .sugg{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
  .v3h-start .sugg:hover{background:rgba(255,255,255,.14); border-color:rgba(112,98,255,.55)}
  .v3h-start .sugg .m{color:#fff}
  .v3h-start .sugg .s{color:rgba(255,255,255,.72)}
  .v3h-start .sugg .pin{background:rgba(112,98,255,.16); color:var(--link)}
  .v3h-start .sugg-head{color:rgba(255,255,255,.62)}
  
  @media (forced-colors:active){ .v3h-h1 em,.v3h-h2 em,.v3h-final-h em,.v3h-proof-big{-webkit-text-fill-color:currentColor; color:CanvasText; background:none} }

  .overlay{position:fixed; inset:0; z-index:50; background:rgba(8,11,22,.62); backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; visibility:hidden; transition:opacity 280ms ease, visibility 0s linear 280ms;}
  .overlay.open{opacity:1; pointer-events:auto; visibility:visible; transition:opacity 280ms ease, visibility 0s}
  .modal{width:100%; max-width:480px; background:var(--card); border-radius:24px 24px 0 0; padding:8px 20px calc(26px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform 360ms var(--spring); box-shadow:0 -8px 40px rgba(11,16,32,.4); position:relative;}
  .overlay.open .modal{transform:none}
  @media(min-width:520px){.overlay{align-items:center}.modal{border-radius:24px; margin:0 16px}}
  .grab{width:40px; height:4px; border-radius:4px; background:var(--border-strong); margin:8px auto 14px}
  .modal h2{font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:4px}
  .modal .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px}
  .modal label{display:block; font:600 12.5px var(--font); color:var(--text-2); margin:0 0 6px 2px}
  .modal .field.plain{margin-bottom:12px}
  .modal .cta{margin-top:6px}
  .modal .err{background:var(--danger-soft); color:#842029; font:600 13px var(--font); padding:11px 13px; border-radius:var(--r-md); margin-bottom:12px; display:none}
  .modal .alt{text-align:center; color:var(--muted); font-size:13px; margin-top:16px}
  /* i link della finestra di accesso nel colore dei link del marchio (Marco, 25/9/2026): era
     --primary #2563EB, un blu fuori palette e a 3,5:1 sul fondo scuro. --link e' l'azzurro del
     logo #62ADFF nel tema scuro (7,6:1) e #1B3A93 nel chiaro, su bianco (10:1) */
  .modal .alt a{color:var(--link); font-weight:600; cursor:pointer; text-decoration:none}
  .xclose{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1}

  /* --- "Il box va a multipli" (#boxRuleOverlay) ---
     La cassetta disegnata qui non e' quella della barra in basso: li' sta su fondo
     scuro, qui su una card bianca (in tutti e due i temi), quindi ha colori suoi. */
  .brule-viz{margin:4px 0 16px; text-align:center}
  .brule-crate{display:inline-grid; grid-auto-flow:column; grid-template-rows:1fr 1fr; gap:6px; padding:10px; border-radius:14px; background:var(--subtle); border:1.5px solid var(--border)}
  .brule-slot{width:26px; height:34px; border-radius:6px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; color:var(--primary)}
  .brule-slot svg{width:11px; height:20px; fill:currentColor; opacity:.75}
  .brule-cap{margin-top:8px; font:700 12px var(--font); color:var(--muted)}
  .brule-serie{font:500 14.5px var(--font); line-height:1.55; text-align:center; padding:12px 14px; border-radius:14px; background:var(--success-soft); color:#0a5c3c}
  .brule-serie b{font-weight:800}
  .brule-note{margin-top:14px; font:500 13.5px var(--font); color:var(--muted); line-height:1.55; text-align:center}

  /* --- "Il prezzo e' quello del box" (#prezzoInfoOverlay) --- */
  .pinfo-amount{display:flex; flex-direction:column; align-items:center; gap:2px; margin:2px 0 16px; padding:14px; border-radius:16px; background:var(--subtle); border:1.5px solid var(--border)}
  .pinfo-eur{font:800 30px var(--font-display); color:var(--text)}
  .pinfo-eur .dec{font-size:.58em; vertical-align:.44em; font-weight:700; margin-left:1px}
  .pinfo-lab{font:700 12px var(--font); color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
  .pinfo-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
  .pinfo-list li{display:flex; gap:10px; align-items:flex-start; font:500 13.5px var(--font); color:var(--text-2); line-height:1.5}
  .pinfo-list b{color:var(--text); font-weight:700}
  .pinfo-ic{flex:none; width:24px; text-align:center; font-size:15px; line-height:1.4}
  .pinfo-foot{margin-top:14px; font:600 12.5px var(--font); color:var(--muted); text-align:center}
  
  .bx-deliv-i, .cr-i{position:relative}
  .xclose::after, .bx-deliv-i::after, .cr-i::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:transparent; pointer-events:auto}
  .bx-deliv-i{cursor:pointer}
  .pac-container{display:none !important} 

  
  
  html[data-theme="light"]{
    --bg-deep:#E7ECF3; --bg-deep-alt:#DCE3EC; --accent-dark:#CAD4E0;
    --on-dark:#16284A; --on-dark-mut:rgba(15,23,42,.82);
    --glass:#FFFFFF; --glass-bd:rgba(15,23,42,.12); --glass-blur:none;
    --fill-soft:rgba(15,23,42,.05); --fill-press:rgba(15,23,42,.10);
    --link:#1B3A93; --sky:#3B82F6;
    --cta-bg:linear-gradient(180deg,#5247B0 0%,#4A3FB0 55%,#3F359A 100%); --cta-ink:#FFFFFF; --cta-glow:rgba(74,63,176,.36); --cta-bd:rgba(255,255,255,.34);
    --dis-bg:rgba(15,23,42,.06); --dis-ink:#434E60;
    --ok-dark:#16A34A; --warn-dark:#B45309; --danger-dark:#DC2626;
    --sh-card:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
    --sh-float:0 12px 32px rgba(16,24,40,.14);
    --sh-glow:0 0 30px rgba(112,98,255,.22);
    /* Tre livelli invece di un bianco solo (Marco, 25/9/2026: "i bianchi degli sfondi danno a
       tutti i blocchi la stessa importanza"): bianco pieno e sollevato solo dove si decide
       (riquadro dell'indirizzo, carrello); --liv2 per il contenuto (schede della home e delle
       acque), un filo sopra il fondo; solo il contorno --liv3-bd per il resto. --acc-blu e' il
       blu del logo (#62ADFF) scurito per reggere sul chiaro: prende il posto del verde-petrolio,
       che non e' nella palette. */
    --liv2:#F4F7FB; --liv2-bd:rgba(15,23,42,.10); --liv2-sh:0 1px 3px rgba(16,24,40,.07);
    --liv3-bd:rgba(15,23,42,.16); --cerca-bg:#F8FAFC; --acc-blu:#206DC5;
    color-scheme:light;
  }
  html[data-theme="light"] body{ background:var(--bg-deep); color:var(--text); }
  html[data-theme="light"] .v3h-go svg path,
  html[data-theme="light"] .v3h-final-cta svg path{ stroke:#FFFFFF }
  html[data-theme="light"] .cta-bicchiere .acqua{ stroke:none }
  
  html[data-theme="light"] body{ color:var(--text); background:#E7ECF3; }
  html[data-theme="light"] .stage{ background:#E7ECF3; }
  html[data-theme="light"] .brand .tag{ color:#384455; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] .btn-login{ border:1px solid rgba(15,23,42,.12); background:#FFFFFF; color:#16284A; backdrop-filter:none; }
  html[data-theme="light"] .btn-login:hover{ background:#F2F6FB; }
  html[data-theme="light"] .btn-call{ border:1px solid rgba(15,23,42,.12); background:#FFFFFF; color:#16284A; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html[data-theme="light"] .btn-call:hover{ background:#F2F6FB; }
  html[data-theme="light"] .btn-call-dot{ border:2px solid #E7ECF3; }
  html[data-theme="light"] .hero{ color:#16284A; }
  html[data-theme="light"] .hero h1 .grad{ background:linear-gradient(100deg,#0EA5B7,#7062FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  html[data-theme="light"] .hero p{ color:#384455; }
  html[data-theme="light"] #addrOverlay .modal{ box-shadow:0 18px 50px rgba(16,24,40,.16); background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid rgba(15,23,42,.12); border-top:none; color:#16284A; }
  html[data-theme="light"] #addrOverlay .modal h2{ color:#16284A; }
  html[data-theme="light"] #addrOverlay .modal .sub{ color:#384455; }
  html[data-theme="light"] #addrOverlay .xclose{ color:#434E60; }
  html[data-theme="light"] #addrOverlay .search .ico{ color:#1B3A93; }
  html[data-theme="light"] #addrOverlay .search input{ background:#FFFFFF; border:1px solid rgba(15,23,42,.12); color:#16284A; box-shadow:none; }
  html[data-theme="light"] #addrOverlay .search input::placeholder{ color:#434E60; }
  html[data-theme="light"] #addrOverlay .search input:focus{ border-color:rgba(112,98,255,.6); box-shadow:0 0 0 4px rgba(112,98,255,.14); }
  html[data-theme="light"] #addrOverlay #addrstatus{ color:#384455; }
  html[data-theme="light"] #addrOverlay .sugg{ background:#FFFFFF; border-color:rgba(15,23,42,.12); }
  html[data-theme="light"] #addrOverlay .sugg:hover{ background:#F2F6FB; border-color:rgba(112,98,255,.55); }
  html[data-theme="light"] #addrOverlay .sugg .m{ color:#16284A; }
  html[data-theme="light"] #addrOverlay .sugg .s{ color:#384455; }
  html[data-theme="light"] #addrOverlay .sugg .pin{ background:#ECEAFF; color:#1B3A93; }
  html[data-theme="light"] #addrOverlay .sugg-head{ color:#434E60; }
  html[data-theme="light"] .civ-ask{ background:#FFFFFF; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] .civ-ask-t{ color:#16284A; }
  html[data-theme="light"] .civ-ask-s{ color:#384455; }
  html[data-theme="light"] .civ-ask-row input{ color:#16284A; background:#FFFFFF; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] .civ-ask-row input:focus{ border-color:rgba(112,98,255,.6); box-shadow:0 0 0 3px rgba(112,98,255,.14); }
  html[data-theme="light"] .celebrate-card{ background:#FFFFFF; box-shadow:0 16px 44px rgba(16,24,40,.16), 0 0 36px rgba(124,231,173,.35); }
  /* Col tema chiaro la modale di accesso torna com'era: foglio bianco e testi scuri.
     Sta qui accanto alle sorelle, ma la versione scura e' in v3-base.css. */
  html[data-theme="light"] #loginOverlay .modal{ background:#FFFFFF; color:#111827; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] #loginOverlay .modal h2{ color:#111827; }
  html[data-theme="light"] #loginOverlay .modal .sub,
  html[data-theme="light"] #loginOverlay .modal label,
  html[data-theme="light"] #loginOverlay .modal .alt{ color:#4B5563; }
  html[data-theme="light"] #loginOverlay .modal .xclose{ color:#6B7280; }
  html[data-theme="light"] #loginOverlay .modal .grab{ background:#D1D5DB; }
  /* Col tema chiaro i campi vanno rivestiti per forza: la regola scura in v3-base.css e'
     piu' specifica di `.field.plain input` e vincerebbe anche qui, lasciando un campo
     bianco all'8% su una modale bianca - cioe' invisibile. Sono i valori di sempre. */
  html[data-theme="light"] #loginOverlay .modal .field.plain input{ background:var(--subtle); border:1.5px solid var(--border); color:#111827; }
  html[data-theme="light"] #loginOverlay .modal .field.plain input::placeholder{ color:var(--placeholder); }
  html[data-theme="light"] #loginOverlay .modal .field.plain input:focus{ border-color:var(--primary); background:#FFFFFF; box-shadow:0 0 0 3px rgba(37,99,235,.14); }
  html[data-theme="light"] #loginOverlay .modal input:-webkit-autofill,
  html[data-theme="light"] #loginOverlay .modal input:-webkit-autofill:hover,
  html[data-theme="light"] #loginOverlay .modal input:-webkit-autofill:focus{
    -webkit-text-fill-color:#111827;
    -webkit-box-shadow:0 0 0 1000px var(--subtle) inset;
    caret-color:#111827;
  }

  html[data-theme="light"] #filtersOverlay .modal, html[data-theme="light"] #roFiltersOverlay .modal{ background:#FFFFFF; color:#16284A; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] #filtersOverlay .modal h2, html[data-theme="light"] #roFiltersOverlay .modal h2{ color:#16284A; }
  html[data-theme="light"] #filtersOverlay .xclose, html[data-theme="light"] #roFiltersOverlay .xclose{ color:#434E60; }
  html[data-theme="light"] #filtersOverlay .flab, html[data-theme="light"] #roFiltersOverlay .flab{ color:#434E60; }
  html[data-theme="light"] #filtersOverlay .fselfull, html[data-theme="light"] #roFiltersOverlay .fselfull{ background:#FFFFFF; border:1.5px solid rgba(15,23,42,.12); color:#16284A; }
  html[data-theme="light"] #chemOverlay .modal{ background:#FFFFFF; color:#16284A; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] #chemOverlay h2{ color:#16284A; }
  html[data-theme="light"] #chemOverlay .xclose{ color:#434E60; }
  html[data-theme="light"] #chemOverlay .sub{ color:#384455; }
  html[data-theme="light"] #chemOverlay .chemtable .cc{ border-bottom-color:rgba(15,23,42,.12); }
  html[data-theme="light"] #chemOverlay .chemtable .ccl{ color:#384455; }
  html[data-theme="light"] #chemOverlay .chemtable .ccv{ color:#16284A; }
  html[data-theme="light"] #chemOverlay .chemtable .ccv i{ color:#434E60; }
  html[data-theme="light"] .steps .step .dot{ background:#FFFFFF; color:#384455; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] .step .dot{ background:#FFFFFF; color:#384455; border:1px solid rgba(15,23,42,.12); }
  html[data-theme="light"] .step .lbl{ color:#384455; }
  html[data-theme="light"] .step .bar{ background:rgba(15,23,42,.12); }
  html[data-theme="light"] .step.active .dot{ background:#FFFFFF; color:var(--primary-dark); }
  html[data-theme="light"] .step.active .lbl{ color:#16284A; }
  html[data-theme="light"] .sheet{ background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid rgba(15,23,42,.12); box-shadow:0 12px 32px rgba(16,24,40,.16); color:#16284A; }
  html[data-theme="light"] .map-toggle{ border:1px solid rgba(15,23,42,.12); background:#FFFFFF; color:#16284A; box-shadow:0 4px 12px rgba(16,24,40,.10); }
  html[data-theme="light"] .sheet .sub{color:#434E60}
  html[data-theme="light"] .sheet .addrline{color:#16284A}
  html[data-theme="light"] .sheet .field.plain input{background:#FFFFFF; border:1px solid rgba(15,23,42,.12); color:#16284A}
  html[data-theme="light"] .sheet .field.plain input::placeholder{color:#434E60}
  html[data-theme="light"] .sheet .field.plain input:focus{border-color:rgba(112,98,255,.6); background:#F2F6FB; box-shadow:0 0 0 3px rgba(112,98,255,.14)}
  html[data-theme="light"] .sheet .cov.ok{background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.30); color:#0a7a52}
  html[data-theme="light"] .sheet .cov.no{background:rgba(220,38,38,.10); border:1px solid rgba(220,38,38,.30); color:#b91c1c}
  html[data-theme="light"] .sheet .cov.load{background:#F2F6FB; color:#434E60}
  html[data-theme="light"] .sheet .cov.warn{background:rgba(240,195,109,.16); border:1px solid rgba(240,195,109,.40); color:#8a6d1f}
  html[data-theme="light"] .sheet .mapcap{color:#434E60}
  html[data-theme="light"] .sheet .mapcap b{color:#16284A}
  html[data-theme="light"] .sec-title .count{color:#434E60}
  html[data-theme="light"] .skel{background:linear-gradient(90deg,#E7ECF3,#F2F6FB,#E7ECF3); background-size:200% 100%}
  html[data-theme="light"] .filters{background:#E7ECF3}
  html[data-theme="light"] .filters::after{background:linear-gradient(180deg, rgba(16,24,40,.12), transparent); opacity:0; transition:opacity .18s ease}
  html[data-theme="light"] .filters.stuck::after{opacity:1}
  html[data-theme="light"] .search2 svg{color:#434E60}
  html[data-theme="light"] .search2 input{color:#16284A; border:1.5px solid rgba(15,23,42,.12); background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none}
  html[data-theme="light"] .search2 input::placeholder{color:#434E60}
  html[data-theme="light"] .search2 input:focus{box-shadow:0 0 0 3px rgba(112,98,255,.2)}
  html[data-theme="light"] .fsugg{background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 16px 36px rgba(16,24,40,.16)}
  html[data-theme="light"] .fsugg-row{border-bottom:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .fsugg-row:active{background:#F2F6FB}
  html[data-theme="light"] .fsugg-ic.emoji{background:#F2F6FB}
  html[data-theme="light"] .fsugg-n{color:#16284A}
  html[data-theme="light"] .fsugg-h{color:#434E60}
  html[data-theme="light"] .ftok{color:#16284A}
  html[data-theme="light"] .ftok-clear:active{background:#F2F6FB}
  html[data-theme="light"] .ftok-clear{-webkit-backdrop-filter:none; backdrop-filter:none}
  html[data-theme="light"] .fsel{border:1px solid rgba(15,23,42,.12); background:#FFFFFF}
  html[data-theme="light"] .fsel.on{color:#16284A}
  html[data-theme="light"] .fbtn{border:1px solid rgba(15,23,42,.12); background:#FFFFFF}
  html[data-theme="light"] .fbtn.on{color:#16284A}
  html[data-theme="light"] .fcount{color:#FFFFFF}
  html[data-theme="light"] .qf{border:1px solid rgba(15,23,42,.12); background:#FFFFFF}
  html[data-theme="light"] .qf.on{color:#16284A}
  html[data-theme="light"] .fsort{border:1px solid rgba(15,23,42,.12); background:#FFFFFF}
  html[data-theme="light"] .fsort.on{color:#16284A}
  html[data-theme="light"] .sec-i{border:1px solid rgba(15,23,42,.12); background:#FFFFFF; color:#16284A}
  html[data-theme="light"] .bx-tot-i{background:rgba(15,23,42,.14); color:#16284A}
  html[data-theme="light"] .bx-tot-i:active{background:rgba(15,23,42,.24)}
  html[data-theme="light"] .flab{color:#384455}
  html[data-theme="light"] .wcard{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 4px 16px rgba(16,24,40,.10)}
  
  html[data-theme="light"] .wcard .wbrand{color:#16284A}
  html[data-theme="light"] .wcard .wmeta .tag{color:#384455; background:#F2F6FB}
  html[data-theme="light"] .wcard .wfmt{color:#384455}
  html[data-theme="light"] .wcard .wfmt b{color:#16284A}
  html[data-theme="light"] .wchem{border:1px solid rgba(15,23,42,.12); background:#FFFFFF}
  html[data-theme="light"] .wchem .cc{border-bottom:1px dotted rgba(15,23,42,.12)}
  html[data-theme="light"] .wchem .ccl{color:#434E60}
  html[data-theme="light"] .wchem .ccv{color:#16284A}
  html[data-theme="light"] .wchem .ccv i{color:#434E60}
  html[data-theme="light"] .wchem-na{color:#434E60}
  html[data-theme="light"] .wchem-more{color:#7062FF}
  html[data-theme="light"] .wprice .pval{color:#16284A}
  html[data-theme="light"] .wprice .plab{color:#434E60}
  html[data-theme="light"] .addbtn{background:#ECEAFF; border-color:rgba(112,98,255,.55); color:#3E348F}
  html[data-theme="light"] .addbtn.added{background:#0A5028; color:#FFFFFF; border-color:transparent}
  html[data-theme="light"] .wcontact{-webkit-backdrop-filter:none; backdrop-filter:none}
  html[data-theme="light"] .wcontact-h{color:#16284A}
  html[data-theme="light"] .wcontact-p{color:#384455}
  html[data-theme="light"] .card-step .qbtn{color:#16284A}
  html[data-theme="light"] .card-step b{color:#16284A}
  html[data-theme="light"] .bx-deliv{color:#434E60}
  html[data-theme="light"] .bx-deliv-i{border:1px solid #434E60}
  html[data-theme="light"] .enudge{background:rgba(16,24,40,.16); -webkit-backdrop-filter:none; backdrop-filter:none}
  html[data-theme="light"] .enudge-card{box-shadow:0 20px 54px rgba(16,24,40,.16)}
  html[data-theme="light"] .dlv-h{color:#16284A}
  html[data-theme="light"] .dlv-onreq{-webkit-backdrop-filter:none; backdrop-filter:none}
  html[data-theme="light"] .dlv-onreq-p{color:#384455}
  html[data-theme="light"] .cs-group-title{color:#434E60}
  html[data-theme="light"] .cs-group-hint{color:#434E60}
  html[data-theme="light"] .cs-day{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 4px 16px rgba(16,24,40,.10)}
  html[data-theme="light"] .cs-cal{background:#F2F6FB; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .cs-cal-dow{color:#434E60}
  html[data-theme="light"] .cs-cal-num{color:#16284A}
  html[data-theme="light"] .cs-tag.free{color:#33905D; background:#E7F0FD}
  html[data-theme="light"] .cs-tag.fee{color:#16284A; background:#F2F6FB}
  html[data-theme="light"] .cs-day.selected{border-color:rgba(112,98,255,.55); background:#FFFFFF; box-shadow:0 0 0 1px rgba(112,98,255,.35), 0 10px 26px rgba(16,24,40,.10)}
  html[data-theme="light"] .cs-day.selected .cs-cal-dow, html[data-theme="light"] .cs-day.selected .cs-cal-mon{color:#384455}
  html[data-theme="light"] .cs-day.selected .cs-cal-num{color:#16284A}
  /* "tra N giorni" del giorno scelto: la regola di base lo fa bianco per il fondo scuro,
     ma qui il fondo e' bianco e la scritta spariva (contrasto 1:1). Per ora solo nell'area;
     html[data-no-aaa] la spegne (vedi v3-area.css). */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .cs-day.selected .cs-rel{color:var(--on-dark-mut)}
  html[data-theme="light"] .cs-slots{background:#F2F6FB}
  html[data-theme="light"] .cs-slot{background:#FFFFFF}
  html[data-theme="light"] .cs-radio{border-color:#434E60}
  html[data-theme="light"] .cs-slot-name{color:#16284A}
  html[data-theme="light"] .cs-slot-note{color:#33905D}
  html[data-theme="light"] .cs-slot-price{color:#16284A}
  html[data-theme="light"] .cs-slot-price.free{color:#33905D} html[data-theme="light"] .cs-slot-price.fee{color:#16284A}
  html[data-theme="light"] .cs-unit{color:#434E60}
  html[data-theme="light"] .cs-slot.active{border-color:rgba(112,98,255,.6); background:#ECEAFF}
  html[data-theme="light"] .cs-slot.active .cs-slot-name{color:#16284A}
  html[data-theme="light"] .dlv-bar{background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid rgba(15,23,42,.12); box-shadow:0 -10px 34px rgba(16,24,40,.16)}
  html[data-theme="light"] .dlv-grab{background:rgba(15,23,42,.12)}
  html[data-theme="light"] .dlv-bar-l{color:#16284A}
  html[data-theme="light"] .dlv-bar-tot{color:#16284A}
  html[data-theme="light"] .dt-recap-row b{color:#16284A}
  html[data-theme="light"] .dt-card{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 4px 16px rgba(16,24,40,.10)}
  html[data-theme="light"] .dt-lbl i{color:#434E60}
  html[data-theme="light"] .dt-in{color:#16284A; background:#FFFFFF}
  html[data-theme="light"] .dt-in::placeholder{color:#434E60}
  html[data-theme="light"] .dt-tabs{background:#FFFFFF}
  html[data-theme="light"] .dt-tab{color:#384455}
  html[data-theme="light"] .dt-tab.on{background:#F2F6FB; color:#16284A}
  html[data-theme="light"] .dt-toggle{color:#384455}
  html[data-theme="light"] .dt-pay{background:#FFFFFF; color:#16284A}
  html[data-theme="light"] .dt-pay.sel{border-color:rgba(112,98,255,.6); background:#ECEAFF}
  html[data-theme="light"] .dt-paynote{color:#434E60; background:#F2F6FB}
  html[data-theme="light"] .dt-card{border:1.5px solid rgba(112,98,255,.35); background:#ECEAFF}
  html[data-theme="light"] .dt-acc{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 4px 16px rgba(16,24,40,.10)}
  html[data-theme="light"] .dt-acc-no{background:#F2F6FB; color:#16284A}
  html[data-theme="light"] .dt-acc-t{color:#16284A}
  html[data-theme="light"] .dt-svc{background:#FFFFFF}
  html[data-theme="light"] .dt-svc.sel{border-color:rgba(112,98,255,.6); background:#ECEAFF}
  html[data-theme="light"] .dt-svc-n{color:#16284A}
  html[data-theme="light"] .dt-svc-p.free{color:#33905D} html[data-theme="light"] .dt-svc-p.fee{color:#16284A}
  html[data-theme="light"] .dt-radio{border-color:#434E60}
  html[data-theme="light"] .dt-opt{background:#FFFFFF}
  html[data-theme="light"] .dt-opt.sel{border-color:rgba(112,98,255,.6); background:#ECEAFF}
  html[data-theme="light"] .dt-opt-n{color:#16284A}
  html[data-theme="light"] .bsw{background:#FFFFFF; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .bsw button.on{color:#FFFFFF}
  html[data-theme="light"] .boxbar{background:#FFFFFF; backdrop-filter:none; -webkit-backdrop-filter:none; border-top:1px solid rgba(15,23,42,.10); box-shadow:0 -6px 18px rgba(16,24,40,.07)}
  html[data-theme="light"] .wtaste{background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#16284A; border:1px solid rgba(15,23,42,.10)}
  html[data-theme="light"] .bx-meta{color:#16284A}
  html[data-theme="light"] .bx-tot{color:#16284A}
  html[data-theme="light"] .box-toast{background:#FFFFFF; color:#16284A; box-shadow:0 8px 24px rgba(16,24,40,.16); border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .bx-slots{background:#F2F6FB}
  html[data-theme="light"] .bx-dot{background:#D9E1EC}
  html[data-theme="light"] .bx-dot.full{background:#434E60}
  html[data-theme="light"] .bx-undo{background:#FFFFFF; border:1px solid rgba(15,23,42,.12); color:#16284A}
  html[data-theme="light"] .bx-undo:active{background:#F2F6FB}
  html[data-theme="light"] .bx-crate{background:#FFFFFF; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .bx-crate.act{border-color:#4A3FB0; box-shadow:0 0 0 2px rgba(74,63,176,.22)}
  html[data-theme="light"] .bx-slot{background:#D9E1EC}
  html[data-theme="light"] .bx-slot.full{background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}
  html[data-theme="light"] .back{background:#FFFFFF; color:#16284A; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .ph .back{background:#FFFFFF; color:#16284A; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .v3h-hero{background:#E7ECF3}
  html[data-theme="light"] .v3h-rating{color:#16284A}
  html[data-theme="light"] .v3h-h1{color:#16284A}
  html[data-theme="light"] .v3h-price{color:#384455}
  html[data-theme="light"] .v3h-price s{color:#434E60}
  html[data-theme="light"] .v3h-price b{background:linear-gradient(100deg,var(--acc-blu) 0%,#1B3A93 55%,#7062FF 100%); -webkit-background-clip:text; background-clip:text}
  html[data-theme="light"] .v3h-price .tail{color:#384455}
  html[data-theme="light"] .v3h-bullets li{color:#384455}
  html[data-theme="light"] .v3h-start{background:#FFFFFF; border:1px solid rgba(15,23,42,.12); box-shadow:0 12px 30px rgba(16,24,40,.16)}
  html[data-theme="light"] .v3h-start-lab{color:#16284A}
  html[data-theme="light"] .v3h-search{background:#FFFFFF; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .v3h-search input{color:#16284A}
  html[data-theme="light"] .v3h-search input::placeholder{color:#434E60}
  html[data-theme="light"] .v3h-fakeph{color:#434E60}
  html[data-theme="light"] .v3h-hint{color:#384455}
  
  /* Nel chiaro le marche nei loro colori (Marco, 25/9: "sono piu' belli"): i loghi hanno lo sfondo
     trasparente, quindi niente filtro ne' fusione. Il grigio uniforme serve solo allo scuro. */
  html[data-theme="light"] .v3h-brand-item img{filter:none; mix-blend-mode:normal; opacity:1}
  html[data-theme="light"] .v3h-brand-text{color:#16284A}
  html[data-theme="light"] .v3h-h2{color:#16284A}
  html[data-theme="light"] .v3h-vt{color:#16284A}
  html[data-theme="light"] .v3h-vd{color:#384455}
  html[data-theme="light"] .v3h-photo-h{color:#fff}
  html[data-theme="light"] .v3h-photo-p{color:rgba(255,255,255,.86)}
  html[data-theme="light"] .v3h-step-t{color:#16284A}
  html[data-theme="light"] .v3h-step-p{color:#434E60}
  html[data-theme="light"] .v3h-van{box-shadow:0 10px 30px rgba(16,24,40,.16)}
  html[data-theme="light"] .v3h-van-h{color:#fff}
  html[data-theme="light"] .v3h-van-p{color:rgba(255,255,255,.86)}
  html[data-theme="light"] .v3h-proof-big{color:#16284A}
  html[data-theme="light"] .v3h-proof-sub{color:#384455}
  html[data-theme="light"] .v3h-proof-rate b{color:#16284A}
  html[data-theme="light"] .v3h-final-h{color:#16284A}
  html[data-theme="light"] .v3h-final-h em{background:linear-gradient(100deg,#0EA5B7,#5B4BE0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  html[data-theme="light"] .v3h-final-p{color:#384455}
  html[data-theme="light"] .v3h-final-citta{color:#434E60}
  html[data-theme="light"] .hp-rev-q{color:#384455}
  html[data-theme="light"] .hp-rev-slider{border-top-color:rgba(15,23,42,.12)}
  html[data-theme="light"] .hp-rev-link{color:var(--link) !important}
  /* stelle nell'oro dello scuro: scurite per il contrasto diventavano ocra e marrone, e Marco le
     trovava strane (25/9/2026). Il voto accanto e' scritto in numeri, le stelle sono decoro */
  html[data-theme="light"] .hp-rev .st{color:#F5B301}
  /* di giorno il ciano su fondo chiaro sparisce: serve la versione scura */
  html[data-theme="light"] .v3h-final-citta b{color:#16284A}
  html[data-theme="light"] .v3h-final-note{color:#434E60}
  html[data-theme="light"] .v3h-faq-item{background:#FFFFFF; border:1px solid rgba(15,23,42,.12)}
  html[data-theme="light"] .v3h-faq-item.open{border-color:rgba(98,173,255,.5); background:#E7F0FD}
  html[data-theme="light"] .v3h-faq-q{color:#16284A}
  html[data-theme="light"] .v3h-faq-a{color:#384455}
  html[data-theme="light"] .v3h-h2 em{background:linear-gradient(100deg,var(--acc-blu),#5B4BE0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  html[data-theme="light"] .v3h-start .sugg{background:#FFFFFF; border-color:rgba(15,23,42,.12)}
  html[data-theme="light"] .v3h-start .sugg:hover{background:#F2F6FB; border-color:rgba(112,98,255,.55)}
  html[data-theme="light"] .v3h-start .sugg .m{color:#16284A}
  html[data-theme="light"] .v3h-start .sugg .s{color:#384455}
  html[data-theme="light"] .v3h-start .sugg .pin{background:#ECEAFF}
  html[data-theme="light"] .v3h-start .sugg-head{color:#434E60}
  html[data-theme="light"] .overlay{background:rgba(8,11,22,.62)}
  html[data-theme="light"] .modal{box-shadow:0 -8px 40px rgba(16,24,40,.16)}
  
  html[data-theme="light"] .v3h-stars{ color:#F5B301 }
  html[data-theme="light"] .v3h-proof-stars{ color:#F5B301 }
  
  
  
  .wcard .addbtn,.wcard .qbtn,.v3h-faq-q,.wchem-more{scroll-margin-bottom:120px; scroll-margin-top:66px}
  .cs-day-row,.cs-slot,.dt-acc-head,.dt-next,.dt-confirm,.bx-cta,.dlv-cta{scroll-margin-bottom:132px; scroll-margin-top:12px}
  
  .wcontact-btn{background:#0E5A30}
  
  .cs-day.selected .cs-cal{background:#4A3FB0; border-color:#4A3FB0}
  .cs-day.selected .cs-cal-dow,.cs-day.selected .cs-cal-mon,.cs-day.selected .cs-cal-num,
  html[data-theme="light"] .cs-day.selected .cs-cal-dow,html[data-theme="light"] .cs-day.selected .cs-cal-mon,html[data-theme="light"] .cs-day.selected .cs-cal-num{color:#fff}
  
  html:not([data-theme="light"]) .cs-radio,html:not([data-theme="light"]) .dt-radio{border-color:rgba(255,255,255,.62)}
  html:not([data-theme="light"]) .dt-in,html:not([data-theme="light"]) .cs-slot,html:not([data-theme="light"]) .dt-opt,html:not([data-theme="light"]) .dt-pay{border-color:rgba(255,255,255,.34)}
  html:not([data-theme="light"]) .v3h-foot-col h3,html:not([data-theme="light"]) .v3h-foot-col h4,html:not([data-theme="light"]) .v3h-foot-pay .lab{color:rgba(255,255,255,.72)}
  html:not([data-theme="light"]) .v3h-legal{color:rgba(255,255,255,.62)}
  html:not([data-theme="light"]) .v3h-seo{color:rgba(255,255,255,.68)}
  
  html[data-theme="light"] .wchem-more{color:#3E348F}
  html[data-theme="light"] .pval-new{color:#0A5028}
  html[data-theme="light"] .wprice .pval s{color:#434E60}
  html[data-theme="light"] .bx-stat.warn{color:#B45309}
  html[data-theme="light"] .cs-slot-price.free,html[data-theme="light"] .dt-svc-p.free,html[data-theme="light"] .cs-tag.free,html[data-theme="light"] .cs-slot-note{color:#0A5028}
  html[data-theme="light"] .dt-tab.on{box-shadow:inset 0 0 0 1.5px #1B3A93; color:#1B3A93}
  html[data-theme="light"] .cs-radio,html[data-theme="light"] .dt-radio{border-color:#7A8597}
  html[data-theme="light"] .dt-in,html[data-theme="light"] .cs-slot,html[data-theme="light"] .dt-opt,html[data-theme="light"] .dt-pay{border-color:rgba(15,23,42,.30)}
  
  .bx-timer-val,.bx-urge.ending .bx-timer-val{animation:none !important}
  html[data-theme="light"] .bx-urge .bx-timer-val,html[data-theme="light"] .bx-urge.ending .bx-timer-val{color:#A0111A}
  
  html[data-theme="light"] .wprice .pval-old{opacity:1; color:#434E60}
  
  html[data-theme="light"] .bx-stat.ok{color:#0A5028}
  html:not([data-theme="light"]) .cs-unit{color:rgba(255,255,255,.82)}
  
  
  html:not([data-theme="light"]) .v3h-fakeph{color:rgba(255,255,255,.82)}
  html:not([data-theme="light"]) .v3h-final-note{color:rgba(255,255,255,.74)}
  html:not([data-theme="light"]) .v3h-foot-desc{color:rgba(255,255,255,.74)}
  html:not([data-theme="light"]) .v3h-biz-eyebrow{color:#9BC8FF}
  html:not([data-theme="light"]) .wchem-more{color:#8FC4FF}
  html:not([data-theme="light"]) .bx-timer-val,html:not([data-theme="light"]) .bx-urge.ending .bx-timer-val{color:#FF9090}
  html:not([data-theme="light"]) .wchem .ccv i,html:not([data-theme="light"]) #chemOverlay .chemtable .ccv i{color:rgba(255,255,255,.78)}
  
  .btn-call{width:44px; height:44px}
  .btn-login{min-height:44px}
  .addbtn{min-height:44px}
  .qf,.fbtn{min-height:44px}
  .fsel{min-height:44px}
  .card-step .qbtn,.qbtn{width:44px; height:44px}
  .bx-undo{width:44px}
  
  .dt-hint{display:block; font:600 11px var(--font); color:var(--on-dark-mut); margin-top:5px}
  .dt-fld-err{display:block; font:700 11.5px var(--font); color:#FF9090; margin-top:5px}
  .dt-in[aria-invalid="true"]{border-color:#FF9090}
  html[data-theme="light"] .dt-fld-err{color:#A0111A}
  html[data-theme="light"] .dt-in[aria-invalid="true"]{border-color:#A0111A}
  
  

.dt-known{background:rgba(98,173,255,.10); border:1px solid rgba(98,173,255,.28); border-radius:14px;
  padding:13px 14px; margin-bottom:14px}
.dt-known.light{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10)}
.dt-known-t{font:800 14.5px var(--font-display,var(--font)); color:#fff; margin-bottom:5px}
.dt-known-s{font:600 12.8px var(--font); color:var(--on-dark-mut); line-height:1.5}
.dt-known-s b{color:#fff}
.dt-known-b{display:block; width:100%; margin-top:11px; min-height:44px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(98,173,255,.5); background:rgba(98,173,255,.18); color:#cfe4ff;
  font:700 13.5px var(--font)}
.dt-known-b:active{transform:scale(.98)}
.dt-known-link{background:none; border:none; padding:0; cursor:pointer; color:var(--link);
  font:700 12.8px var(--font); text-decoration:underline}

.dt-known.warn{background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.34)}
.dt-known.warn .dt-known-b{border-color:rgba(240,169,74,.5); background:rgba(240,169,74,.18); color:#ffe0b8}
.dt-known.ok{background:rgba(61,220,154,.10); border-color:rgba(61,220,154,.26)}

.v3h-start{position:static}

.v3h{--hp-vicino:16px; --hp-legato:24px; --hp-sezione:40px}
.v3h-hero{padding-bottom:0}          

.v3h > .v3h-start{margin-top:calc(var(--hp-legato) - 4px)}
.v3h > .hp-guar{margin-top:var(--hp-legato)}
/* il voto sotto il riquadro del pulsante, centrato come la scritta del pulsante; alto
   44 px perche' si tocca (apre le recensioni) proprio accanto al pulsante */
.v3h > .v3h-rating{display:flex; justify-content:center; width:fit-content; min-height:44px; margin:4px auto 0}
.v3h > .v3h-sec,
.v3h > .hp-cards,
.v3h > .hp-slider,
.v3h > .hp-rev,
.v3h > .v3h-final{margin-top:var(--hp-sezione)}
/* Da telefono gli spazi VISIBILI fra i blocchi del primo schermo (testata, titolo,
   descrizione, garanzie, riquadro, stelle, marche) sono tutti di circa 28 px (Marco,
   25/9/2026: "alza il titolo verso il logo, spazi piu' o meno uguali per avere armonia").
   I margini sono diversi fra loro perche' compensano l'aria che non si vede (interlinea,
   il riquadro alto 44 px delle stelle): misurati sui pixel, non sulle scatole.
   Sta DOPO le regole generali qui sopra, altrimenti non le batte. */
@media (max-width: 1023.98px){
  .v3h-hero{padding-top:11px}
  .v3h-hero .v3h-h1{margin-top:0}
  .v3h > .hp-guar{margin-top:21px}
  .v3h > .v3h-start{margin-top:25px}
  .v3h > .v3h-rating{margin-top:11px}
  .v3h > .v3h-sec{margin-top:10px}
}

/* il congedo sta dentro il blocco finale, sopra la fotografia: vedi .v3h-final */
.v3h > .v3h-foot{padding-top:var(--hp-sezione)}

.v3h > .v3h-theme{padding-top:var(--hp-legato); padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* la descrizione un po' piu' grande (era 15,5), per staccarla dalle garanzie subito sotto
   (Marco, 25/9/2026); righe bilanciate, cosi' non resta una parola sola in fondo */
.hp-sub{font:500 17px/1.55 var(--font); color:var(--home-ink-2); margin:14px 0 0; max-width:34ch; text-wrap:balance}

.hp-guar{display:flex; flex-direction:column; gap:10px}
.hp-guar span{display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--font); color:var(--home-ink-2)}
.hp-guar svg{color:#78D5DF; flex:none}
/* il fulmine in fondo alla garanzia del riordino (Marco, 25/9/2026): un filo piu' grande del testo */
.hp-guar .hp-guar-emo{font-size:15px; line-height:1}

.hp-cards{display:flex; flex-direction:column; gap:var(--hp-vicino)}
.hp-card{border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(255,255,255,.04);
  overflow:hidden; transition:border-color .2s ease, background .2s ease}
.hp-card.open{border-color:rgba(120,213,223,.42); background:rgba(120,213,223,.06)}
/* aperta, la scheda si porta in cima allo schermo (hpToggle): un filo d'aria sopra */
.hp-card{scroll-margin-top:12px}
.hp-q{width:100%; display:flex; align-items:center; gap:12px; padding:18px 16px; background:none; border:0;
  text-align:left; cursor:pointer; color:#fff}
.hp-ic{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:rgba(120,213,223,.14); color:#78D5DF}
.hp-qt{font:700 15px var(--font); color:#fff}
.hp-qs{display:block; font:500 12.5px var(--font); color:rgba(255,255,255,.78); margin-top:3px}
.hp-chev{margin-left:auto; color:rgba(255,255,255,.7); transition:transform .24s ease; flex:none}
.hp-card.open .hp-chev{transform:rotate(180deg)}
.hp-a{max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.hp-card.open .hp-a{max-height:1400px}

.hp-in{padding:2px 16px 20px; font:400 14.5px/1.72 var(--font); color:rgba(255,255,255,.85)}
/* i link dentro le schede: senza href non sarebbero ne' riconoscibili ne' cliccabili a vista */
.hp-in a{color:#8FE3EC; font-weight:600; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(143,227,236,.45); cursor:pointer}
.hp-in a:hover{text-decoration-color:#8FE3EC}
html[data-theme="light"] .hp-in a{color:#0A5F6B; text-decoration-color:rgba(10,95,107,.45)}
html[data-theme="light"] .hp-in a:hover{text-decoration-color:#0A5F6B}
.hp-in b{color:#fff}
.hp-steps{display:flex; flex-direction:column; gap:var(--hp-vicino); margin-bottom:6px}
.hp-step{display:flex; gap:12px; align-items:flex-start}
.hp-step-n{width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(120,213,223,.16); color:#78D5DF; font:800 12px var(--font)}
.hp-li{display:flex; gap:10px; align-items:flex-start; margin-top:var(--hp-vicino)}
.hp-li svg{color:#78D5DF; flex:none; margin-top:3px}

.hp-h{margin:0; font:inherit}
.hp-faq-q{font:700 14.5px/1.72 var(--font); color:#fff; margin:22px 0 0}
.hp-faq-q:first-child{margin-top:0}
.hp-faq-a{margin-top:6px}
.hp-price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.hp-price-big{font:800 30px var(--font); color:#fff}
.hp-price-tail{font:600 13px var(--font); color:rgba(255,255,255,.8)}

.hp-track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
.hp-track::-webkit-scrollbar{display:none}
.hp-track > .v3h-photo{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; margin-top:0}
.hp-dots{display:flex; gap:7px; justify-content:center; margin-top:var(--hp-vicino)}
.hp-dot{width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.28);
  cursor:pointer; transition:width .25s ease, background .25s ease}
.hp-dot.on{width:22px; background:#78D5DF}
.hp-frec{display:none}
.ft-ass-ic{display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; border-radius:50%;
  background:rgba(120,213,223,.14); color:#8FE3EC; border:1px solid rgba(120,213,223,.30)}
.ft-ass-ic svg{width:20px; height:20px}
.ft-ass-info{display:flex; align-items:center; gap:12px}
.ft-canali a svg{display:none}

/* voto, voce di un cliente e invito a leggerne altre: un blocco solo, tutto
   cliccabile. Separati non si parlavano; insieme il voto da' la scala e la
   citazione da' il motivo */
.hp-rev{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:18px 16px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10)}
.hp-rev-top{display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap}
.hp-rev b{color:#fff; font:800 14px var(--font)}
.hp-rev span{font:500 12.5px var(--font); color:rgba(255,255,255,.82)}
.hp-rev .st{color:#F5B301; letter-spacing:1px}
/* una recensione lunga era un muro di testo che nessuno finiva: tre voci da un
   concetto ciascuno, scorribili col dito. I pallini dicono quante sono */
.hp-rev-slider{width:100%; padding-top:12px; border-top:1px solid rgba(255,255,255,.10)}
.hp-rev-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.hp-rev-track::-webkit-scrollbar{display:none}
/* le tre citazioni non sono lunghe uguali: centrate in verticale non ballano
   quando si passa dalla piu' lunga alla piu' corta */
.hp-rev-q{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; min-height:4.9em;
  margin:0; padding:0 4px; font:400 13.5px/1.62 var(--font); color:rgba(255,255,255,.85)}
.hp-rev .hp-dots{margin-top:10px}
/* non e' piu' cliccabile tutto il riquadro (dentro c'e' uno slider da sfogliare):
   il collegamento si prende un'area comoda da toccare, senza allargare il blocco */
.hp-rev-link{border:0; background:none; cursor:pointer; padding:8px 12px; margin:-8px -12px;
  font:700 12.5px var(--font) !important; color:#8FE3EC !important}

/* l'invito finale poggia su una fotografia invece che sul nero: da' profondita'
   e chiude la pagina con una scena invece che con un riquadro vuoto. Il blocco
   esce dai margini e prende tutta la larghezza, e la foto sfuma sopra e sotto
   nel fondo pagina - senza righe nette, cosi' e' l'immagine stessa a staccare.
   25/9/2026: la foto e' lo still life di sera a bordo piscina (bottiglia di vetro,
   bicchieri, il riflesso nei colori del logo), scelto da Marco nella proposta:
   inquadrata sul tavolo (parte bassa) e all'80% di luce invece del 50% */
.v3h-final{margin-inline:-16px; padding:44px 24px 40px}
.v3h-final-bg{position:absolute; inset:0; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%)}
.v3h-final-bg picture{display:contents}
.v3h-final-bg img{width:100%; height:100%; display:block; object-fit:cover; object-position:center 100%;
  filter:brightness(.8)}
/* il velo e' quello che tiene il testo leggibile: la foto resta visibile ma
   non arriva mai a contendere il bianco del titolo e del bottone. L'ombra ovale al
   centro sta solo sotto le scritte: con la foto all'80% il sottotitolo scendeva a 4,5:1,
   cosi' tutti i testi restano sopra 7:1 e i lati della foto restano luminosi (25/9) */
.v3h-final-bg::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 48% 62% at 50% 55%, rgba(11,16,32,.64) 0, rgba(11,16,32,.44) 55%, rgba(11,16,32,0) 100%), linear-gradient(180deg, rgba(11,16,32,.80) 0, rgba(11,16,32,.52) 46%, rgba(11,16,32,.84) 100%)}
.v3h-final .v3h-login{position:relative; z-index:2; margin-top:18px}
/* Tema chiaro (25/9/2026, Marco: "nel chiaro questa foto non mi piace, generiamone una ad hoc"):
   la stessa terrazza DI GIORNO. Foto chiara, velo chiaro e testo scuro (valgono i colori scuri
   del chiaro definiti piu' su); la foto torna a sfumare nel fondo, perche' ora e' chiara anche lei.
   Due <picture> in index.html: si carica solo quella del tema attivo (l'altra e' display:none, lazy). */
.v3h-final-bg picture.fin-chiaro{display:none}
html[data-theme="light"] .v3h-final-bg picture.fin-scuro{display:none}
html[data-theme="light"] .v3h-final-bg picture.fin-chiaro{display:contents}
html[data-theme="light"] .v3h-final-bg img{filter:none}
/* da telefono le righe prendono quasi tutta la larghezza: l'ovale chiaro e' largo quanto il blocco */
html[data-theme="light"] .v3h-final-bg::after{background:radial-gradient(ellipse var(--fin-ovale, 92% 64%) at 50% 55%, rgba(247,249,252,.90) 0, rgba(247,249,252,.78) 55%, rgba(247,249,252,0) 100%), linear-gradient(180deg, rgba(247,249,252,.55) 0, rgba(247,249,252,.40) 46%, rgba(247,249,252,.60) 100%)}
/* sopra una foto i grigi medi del chiaro non bastano: qui i testi sono piu' scuri */
html[data-theme="light"] .v3h-final-p, html[data-theme="light"] .v3h-final-citta, html[data-theme="light"] .v3h-final .v3h-login{color:#243049}
html[data-theme="light"] .v3h-final .v3h-login a{color:#3B2FA0}
/* la seconda riga del titolo dello stesso colore della prima, come nello scuro (Marco, 25/9) */
html[data-theme="light"] .v3h-final-h em{background:none; -webkit-text-fill-color:currentColor; color:inherit}
/* Nel tema chiaro, da telefono, piu' aria dentro al blocco: sopra, sotto, ai lati e fra gli
   elementi (Marco, 25/9/2026: "dai piu' aria dentro al contenuto"). Senza la sfumatura tutto
   il margine resta visibile, quindi sopra e sotto bastano meno pixel di prima (88/84) per
   avere piu' spazio vero intorno al logo e ad "Accedi". */
@media (max-width: 1023.98px){
  html[data-theme="light"] .v3h-final{padding:72px 36px 68px}
  html[data-theme="light"] .v3h-final-logo{margin-bottom:20px}
  html[data-theme="light"] .v3h-final-p{margin-top:18px}
  html[data-theme="light"] .v3h-final-cta{margin-top:32px}
  html[data-theme="light"] .v3h-final-citta{margin-top:22px}
  html[data-theme="light"] .v3h-final .v3h-login{margin-top:24px}
}

.hp-bar{position:fixed; left:50%; transform:translateX(-50%) translateY(120%); bottom:0; width:100%;
  max-width:480px; z-index:50; display:flex; gap:10px; align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--bg-deep); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 -10px 30px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.hp-bar.show{transform:translateX(-50%) translateY(0)}
.hp-bar-t{font:700 13px var(--font); color:#fff; line-height:1.25}
.hp-bar-t small{display:block; font:500 11.5px var(--font); color:rgba(255,255,255,.82)}
.hp-bar-cta{margin-left:auto; flex:none; border:0; border-radius:12px; padding:12px 18px; cursor:pointer;
  background:linear-gradient(180deg,#8FE3EC,#5FC8D6); color:#0B1020; font:800 14px var(--font)}

html[data-theme="light"] .hp-card{background:var(--liv2); border:1px solid var(--liv2-bd); box-shadow:var(--liv2-sh)}
html[data-theme="light"] .hp-card.open{background:#FFFFFF; border-color:rgba(32,109,197,.30); box-shadow:0 8px 24px rgba(16,24,40,.08)}
html[data-theme="light"] .hp-q{color:#16284A}
html[data-theme="light"] .hp-qt{color:#16284A}
html[data-theme="light"] .hp-ic{background:rgba(98,173,255,.18); color:var(--acc-blu)}
html[data-theme="light"] .hp-in b,
html[data-theme="light"] .hp-faq-q,
html[data-theme="light"] .hp-price-big{color:#16284A}

html[data-theme="light"] .hp-step-n{background:rgba(98,173,255,.18); color:#1B3A93}
html[data-theme="light"] .hp-li svg,
html[data-theme="light"] .hp-guar svg{color:var(--acc-blu)}
html[data-theme="light"] .hp-dot{background:rgba(15,23,42,.22)}
html[data-theme="light"] .hp-dot.on{background:var(--acc-blu)}
html[data-theme="light"] .hp-rev{background:transparent; border:1px solid var(--liv3-bd)}
html[data-theme="light"] .hp-rev b{color:#16284A}
html[data-theme="light"] .hp-bar{background:#FFFFFF; border-top:1px solid rgba(15,23,42,.12);
  box-shadow:0 -10px 30px rgba(16,24,40,.16)}
html[data-theme="light"] .hp-bar-t{color:#16284A}
/* di giorno la barra e' bianca: l'azzurro del pulsante ci stava sopra a 1,5-2:1 e quasi
   spariva (per distinguere un pulsante dal fondo serve almeno 3:1). Prende il viola dei
   pulsanti del tema chiaro: 7,3-9,6:1 sulla barra, scritta bianca idem. */
html[data-theme="light"] .hp-bar-cta{background:var(--cta-bg); color:var(--cta-ink)}
html[data-theme="light"] .hp-sub,
html[data-theme="light"] .hp-guar span,
html[data-theme="light"] .hp-qs,
html[data-theme="light"] .hp-in,
html[data-theme="light"] .hp-price-tail,
html[data-theme="light"] .hp-rev span,
html[data-theme="light"] .hp-bar-t small{color:#434E60}
html[data-theme="light"] .hp-chev{color:#5B6472}


.ft{margin-top:var(--hp-sezione); padding:32px 20px 0;
  border-top:1px solid rgba(255,255,255,.10); font:400 13px/1.6 var(--font); color:rgba(255,255,255,.8)}
/* Mappa del sito e parte finale stanno in una fascia a se', con un fondo appena diverso,
   staccata da logo e assistenza (Marco, 25/9/2026). Da bordo a bordo: -36 px = 16 del
   contenitore + 20 del piede. In fondo tiene l'aria per la barra fissa del telefono. */
.ft-info{margin:32px -36px 0; padding:24px 36px calc(104px + env(safe-area-inset-bottom));
  background:var(--bg-deep-alt); border-top:1px solid rgba(255,255,255,.10)}
/* nel chiaro la fascia e' piu' CHIARA della pagina: col grigio piu' scuro (--bg-deep-alt) i
   testi piccoli #434E60 scendevano da 7,0 a 6,5:1; cosi' salgono a 7,8 */
html[data-theme="light"] .ft-info{background:#F3F6FA; border-top:1px solid rgba(15,23,42,.12)}
.ft-alto{display:flex; flex-direction:column; gap:10px}
.ft-logo{height:27px; width:auto; display:block; opacity:.95; align-self:flex-start}
.ft-claim{margin:0; max-width:34ch; color:rgba(255,255,255,.8)}

.ft-assistenza{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:24px; padding:16px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10)}
.ft-eti{display:block; font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.ft-tel{display:block; margin-top:5px; font:800 19px var(--font); color:#fff; text-decoration:none; letter-spacing:-.01em}
.ft-orari{display:block; margin-top:2px; font:500 12.5px var(--font); color:rgba(255,255,255,.72)}
.ft-canali{display:flex; gap:8px}
.ft-canali a{padding:9px 14px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06); color:#fff; font:700 12.5px var(--font); text-decoration:none}
.ft-canali a:hover{background:rgba(255,255,255,.12)}

.ft-mappa{display:grid; grid-template-columns:1fr 1fr; gap:26px 16px}
.ft-mappa h2{margin:0 0 10px; font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.ft-mappa a{display:block; padding:4px 0; color:rgba(255,255,255,.86); text-decoration:none; cursor:pointer}
.ft-mappa a:hover{text-decoration:underline}
.ft-mappa .ft-tutte{margin-top:4px; color:#8FE3EC; font-weight:600}
.ft-catalogo{display:block; margin:0; font:500 11px/1.5 var(--font); color:rgba(255,255,255,.74)}

.ft-basso{margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center}
.ft-legale-link{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px}
.ft-legale-link a{color:rgba(255,255,255,.8); text-decoration:none; font:500 12.5px var(--font)}
.ft-legale-link a:hover{text-decoration:underline}
.ft-pagamenti{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  color:rgba(255,255,255,.78)}
.ft-pagamenti svg{height:17px; width:auto}
.ft-tema{margin-top:4px; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; cursor:pointer;
  border-radius:var(--pill); border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86); font:600 12.5px var(--font)}
.ft-tema:hover{background:rgba(255,255,255,.12)}
.ft-societa{margin:0; font:400 11.5px/1.6 var(--font); color:rgba(255,255,255,.74); max-width:44ch}
.ft-marchi{margin:0; font:400 11px/1.55 var(--font); color:rgba(255,255,255,.74); max-width:46ch}
/* da telefono la fascia della mappa e dei dati legali e' piu' compatta (Marco, 25/9/2026):
   meno aria fra voci e gruppi, caratteri un filo piu' piccoli. I link restano alti almeno
   24 px, il minimo per toccarli senza sbagliare. */
@media (max-width: 1023.98px){
  /* le quattro colonne della mappa diventano un nastro da scorrere col dito, una colonna
     alla volta, con la successiva che spunta a destra per far capire che ce ne sono altre
     (Marco, 25/9/2026). Solo CSS, niente JavaScript: i link restano tutti nella pagina e
     Google li legge come prima. Per prima la colonna "Fontilio" (quarta su computer). */
  .ft-mappa{display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:36px; scrollbar-width:none;
    margin-inline:-36px; padding-inline:36px}
  .ft-mappa::-webkit-scrollbar{display:none}
  .ft-mappa > div{flex:0 0 78%; scroll-snap-align:start}
  .ft-mappa > div:nth-child(4){order:-1}
  .ft-mappa h2{margin-bottom:6px}
  .ft-mappa a{padding:3px 0; font-size:12.5px; line-height:1.45}
  .ft-mappa .ft-tutte{margin-top:2px}
  .ft-basso{margin-top:18px; padding-top:16px; gap:12px}
  .ft-legale-link{gap:4px 12px}
  .ft-legale-link a{font-size:12px}
  .ft-pagamenti{gap:12px}
  .ft-pagamenti svg{height:15px}
  /* dati della societa', marchi e data del catalogo a 10 px (Marco: "ancora piu' piccolo");
     non di meno: sotto diventa faticoso per chi ha piu' di 60 anni. Contrasto 8,6:1 */
  .ft-societa{font-size:10px; line-height:1.5; max-width:none; text-wrap:balance}
  .ft-marchi{font-size:10px; line-height:1.45; max-width:none; text-wrap:balance}
  .ft-catalogo{font-size:10px}
  .ft-tema{margin-top:0}
}

html[data-theme="light"] .ft{border-top:1px solid rgba(15,23,42,.12); color:#434E60}
html[data-theme="light"] .ft-claim{color:#434E60}
html[data-theme="light"] .ft-assistenza{background:transparent; border:1px solid var(--liv3-bd)}
html[data-theme="light"] .ft-eti,
html[data-theme="light"] .ft-orari,
html[data-theme="light"] .ft-mappa h2{color:#434E60}
html[data-theme="light"] .ft-tel{color:#16284A}
html[data-theme="light"] .ft-canali a{background:transparent; border:1px solid var(--liv3-bd); color:#16284A}
html[data-theme="light"] .ft-mappa a{color:#16284A}
html[data-theme="light"] .ft-mappa .ft-tutte{color:var(--link)}
html[data-theme="light"] .ft-catalogo,
html[data-theme="light"] .ft-marchi,
html[data-theme="light"] .ft-societa,
html[data-theme="light"] .ft-pagamenti{color:#434E60}
html[data-theme="light"] .ft-legale-link a{color:#434E60}
html[data-theme="light"] .ft-basso{border-top:1px solid rgba(15,23,42,.12)}
html[data-theme="light"] .ft-tema{background:transparent; border:1px solid var(--liv3-bd); color:#16284A}

/* =====================================================================
   HOME v3, TEMA SCURO: NIENTE BIANCO PURO (Marco, 25/9/2026)
   Prima il primo schermo ("quel bianco sparato non mi piace"), poi tutta la
   pagina ("applica questo colore di testo a tutto il testo della v3 versione
   scura"), tenendo i livelli che c'erano: nelle schede a fisarmonica il titolo
   resta piu' chiaro della riga sotto. Tre toni, contrasto sul fondo #0B1020:
     --home-ink-1  #DCE4F0  titoli e testi forti       (era bianco pieno)    14,9:1
     --home-ink-2  #C3CEDF  testi                       (era bianco 78-86%)   12,1:1
     --home-ink-3  #A9B5C8  note, etichette, diciture   (era bianco 55-74%)    9,2:1
   Non cambiano: link e accenti colorati, scritte su fondi pieni (pulsanti)
   e tutto il tema chiaro. Il resto dell'app (ordine, area clienti) non e'
   toccato.
   ===================================================================== */
:root{--home-ink-1:#DCE4F0; --home-ink-2:#C3CEDF; --home-ink-3:#A9B5C8}

html:not([data-theme="light"]) .app:has(.v3h) .btn-login,
html:not([data-theme="light"]) .app:has(.v3h) .btn-call,
html:not([data-theme="light"]) .v3h-brand-text,
html:not([data-theme="light"]) .v3h-photo-h,
html:not([data-theme="light"]) .hp-qt,
html:not([data-theme="light"]) .hp-cards b,
html:not([data-theme="light"]) .hp-rev b,
html:not([data-theme="light"]) .v3h-final-h,
html:not([data-theme="light"]) .v3h-final-citta b,
html:not([data-theme="light"]) .ft-tel,
html:not([data-theme="light"]) .ft-canali a,
html:not([data-theme="light"]) .hp-bar-t,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .modal,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .modal h2,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .search input,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .sugg .m{color:var(--home-ink-1)}

/* la seconda riga del titolo in fondo, come quella in cima: stesso colore del resto */
html:not([data-theme="light"]) .v3h-final-h em{background:none; color:inherit}

html:not([data-theme="light"]) .v3h-photo-p,
html:not([data-theme="light"]) .v3h-final-p,
html:not([data-theme="light"]) .v3h-final-citta,
html:not([data-theme="light"]) .hp-in,
html:not([data-theme="light"]) .hp-rev-top span:not(.st),
html:not([data-theme="light"]) .hp-rev-q,
html:not([data-theme="light"]) .v3h-final .v3h-login,
html:not([data-theme="light"]) .v3h-fakeph,
html:not([data-theme="light"]) .hp-bar-t small,
html:not([data-theme="light"]) .ft-claim,
html:not([data-theme="light"]) .ft-mappa a:not(.ft-tutte),
html:not([data-theme="light"]) .ft-legale-link a,
html:not([data-theme="light"]) .ft-pagamenti,
html:not([data-theme="light"]) .ft-tema,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .modal .sub,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay #addrstatus{color:var(--home-ink-2)}

/* nelle schede a fisarmonica la riga sotto il titolo resta distante dal titolo quanto
   prima (bianco pieno contro bianco al 78%): terzo tono, non secondo */
html:not([data-theme="light"]) .hp-qs,
html:not([data-theme="light"]) .ft-eti,
html:not([data-theme="light"]) .ft-orari,
html:not([data-theme="light"]) .ft-mappa h2,
html:not([data-theme="light"]) .ft-catalogo,
html:not([data-theme="light"]) .ft-societa,
html:not([data-theme="light"]) .ft-marchi,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .xclose,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .sugg .s,
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .sugg-head{color:var(--home-ink-3)}
html:not([data-theme="light"]) body:has(.v3h) #addrOverlay .search input::placeholder{color:var(--home-ink-3)}

/* Sulle foto il testo meno bianco perdeva contrasto (misurato sul pixel di fondo piu'
   chiaro: didascalia 5,1 -> 4,0; "Attivi in piu' di" 5,7 -> 4,4, sotto il minimo).
   Per questo le righe del blocco finale stanno al secondo tono e non al terzo, e i
   veli sulle foto scuriscono un po' di piu' dove c'e' il testo. */
html:not([data-theme="light"]) .v3h-photo-shade{background:linear-gradient(180deg,rgba(11,16,32,0) 28%,rgba(11,16,32,.66) 58%,rgba(11,16,32,.92) 100%)}
html:not([data-theme="light"]) .v3h-final-bg::after{background:radial-gradient(ellipse 48% 62% at 50% 55%, rgba(11,16,32,.64) 0, rgba(11,16,32,.44) 55%, rgba(11,16,32,0) 100%), linear-gradient(180deg, rgba(11,16,32,.80) 0, rgba(11,16,32,.60) 46%, rgba(11,16,32,.86) 100%)}
/* sotto il pulsante in fondo, la riga "Attivi in piu' di 150 citta'" cade nell'alone azzurro
   del pulsante (e' lui il fondo piu' chiaro, non la foto): alone un po' piu' tenue */
html:not([data-theme="light"]) .v3h-final-cta{box-shadow:0 14px 32px rgba(120,213,223,.26), var(--cta-hi)}

/* =====================================================================
   TEMA CHIARO, PERCORSO D'ORDINE: i tre livelli (vedi --liv2 nelle variabili del chiaro).
   Il carrello resta bianco pieno e sollevato; le schede delle acque scendono a --liv2 con un
   bordo e un'ombra appena accennati (Marco: "troppo uguali allo sfondo, stacco leggermente
   maggiore"); filtri, ordinamento e pulsanti in alto hanno solo il contorno, e il filtro attivo
   prende il viola della selezione. Il campo di ricerca appena sotto il bianco puro (Marco).
   Il bordo delle schede non si tocca: da computer il passaggio del mouse lo colora.
   L'area clienti resta com'e': ha la sua verifica di contrasto (AAA).
   ===================================================================== */
html[data-theme="light"]:not([data-vista^="/area"]) .wcard{background:var(--liv2); box-shadow:var(--liv2-sh)}
html[data-theme="light"]:not([data-vista^="/area"]) .wchem{background:transparent; border-color:var(--liv3-bd)}
html[data-theme="light"]:not([data-vista^="/area"]) .search2 input{background:var(--cerca-bg)}
html[data-theme="light"]:not([data-vista^="/area"]) .qf,
html[data-theme="light"]:not([data-vista^="/area"]) .fsort,
html[data-theme="light"]:not([data-vista^="/area"]) .fbtn,
html[data-theme="light"]:not([data-vista^="/area"]) .sec-i,
html[data-theme="light"]:not([data-vista^="/area"]) .btn-login,
html[data-theme="light"]:not([data-vista^="/area"]) .btn-call{background:transparent; border-color:var(--liv3-bd)}
html[data-theme="light"]:not([data-vista^="/area"]) .qf.on,
html[data-theme="light"]:not([data-vista^="/area"]) .fsort.on,
html[data-theme="light"]:not([data-vista^="/area"]) .fbtn.on{background:var(--sel-fill); border-color:var(--sel-bd)}
html[data-theme="light"]:not([data-vista^="/area"]) .btn-login:hover,
html[data-theme="light"]:not([data-vista^="/area"]) .btn-call:hover{background:rgba(255,255,255,.6)}