body.shop{--bg:#f5f7f7;--panel:#fff;--panel2:#eef3f4;--line:#e3eaeb;--line2:#d3dee0;--ink:#17343c;--soft:#3e565e;--mute:#6c8289;--acc:#0a7fb0;--acc2:#07668e;--on:#fff;--plate:#f7f8f8;--r:14px;--sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;--display:var(--sans);color-scheme:light;background:#f5f7f7}
body.shop .top{background:#fff;border-bottom:1px solid #e3eaeb;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body.shop .top::after{content:none}
body.shop .bn b{font-family:var(--sans);font-weight:600;letter-spacing:0;text-transform:none;font-size:1.2rem}
body.shop .bn small{color:var(--mute);letter-spacing:.16em}
body.shop .nav a{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:0;font-size:.95rem}
body.shop .nav a[aria-current]{background:var(--ink);color:#fff}
body.shop h1,body.shop h2,body.shop h3,body.shop .card b{font-family:var(--sans);font-stretch:normal;font-weight:600;text-transform:none;letter-spacing:0}
body.shop .area{margin:0 0 48px}
body.shop .area h2{font:600 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
body.shop .grid{gap:18px}
body.shop .card{border:1px solid var(--line);box-shadow:0 16px 40px -28px rgba(23,52,60,.45);background:#fff}
body.shop a.card:hover{border-color:#b7c9ce;transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(23,52,60,.4)}
body.shop .plate{background:linear-gradient(135deg,#f4f7f7,#e7eef0)}
body.shop .plate .vial{width:38%;max-width:74px;height:auto;color:var(--acc);opacity:.4}
body.shop .kicker{color:var(--acc)}
body.shop .card .price,body.shop .price{color:var(--ink);font-family:var(--sans);font-stretch:normal;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}
body.shop .card .sub,body.shop .card .meta{color:var(--mute)}
body.shop .perks{background:#fff;border-color:var(--line);color:var(--soft)}
body.shop .perks li::before{background:var(--acc)}
body.shop form input,body.shop form textarea{background:#fff;border-color:var(--line2);border-radius:10px}
.shop form label{display:block;margin:0 0 14px;color:var(--mute);font:700 .64rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.shop form input,.shop form textarea,.shop form select{display:block;width:100%;margin-top:8px;font:600 1.05rem/1.3 var(--sans);color:var(--ink);background:var(--bg);border:2px solid var(--line2);border-radius:4px;padding:14px 16px;outline:0}
.shop form input:focus,.shop form textarea:focus{border-color:var(--acc)}
.shop form textarea{min-height:140px;resize:vertical}
.shop .price{display:block;margin:8px 0 12px;font-family:var(--sans);font-stretch:normal;font-weight:600;font-size:1.85rem;line-height:1.15;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}
.shop .card .price{font-size:2.6rem;margin:16px 0 4px}
.shop .sum{list-style:none;margin:0 0 8px;padding:0}
.shop .sum li,.shop .sumline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.shop .sum b{flex:none;font-family:var(--sans);font-stretch:normal;font-size:1.05rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.shop .payopts{display:grid;gap:12px;margin:8px 0 20px}
.shop .payopts label{display:flex;gap:16px;align-items:center;margin:0;padding:16px 18px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-stretch:normal;font-weight:600;font-size:1rem;line-height:1.3}
.shop .payopts label small{display:block;margin-top:6px;color:var(--mute);font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:0;text-transform:none}
.shop .payopts input{width:1.4rem;height:1.4rem;margin:0;accent-color:var(--acc)}
.shop .payopts label:has(input:checked){border-color:var(--acc);background:var(--panel2)}
.shop .payopts .wideline{display:flex}
@supports selector(:has(a)){.shop .payopts .wideline{display:none}.shop .payopts:has(input[value="evm"]:checked) .wideline{display:flex}}
.shop .card .from{display:block;color:var(--ink);font:600 .9rem/1.35 var(--sans)}
.shop .ship{display:block;margin:4px 0 0;color:var(--mute);font:500 .76rem/1.45 var(--mono)}
.shop .rail .ship{margin:-8px 0 18px}
.shop .rail form .btn.main{display:flex;width:100%;margin:4px 0 0}
.shop .rail form+.ship{margin:18px 0 0}
.shop .off{color:var(--acc);font:700 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.shop .bundles th,.shop .bundles td{vertical-align:middle}
.shop .bundles td small{color:var(--mute);font-size:.8rem}
.shop .bundles form{margin:0;text-align:right}
.shop .btn.mini{flex:none;padding:10px 14px;font-size:.9rem;white-space:nowrap}
.shop .sum li>span small{display:block;margin-top:4px;color:var(--mute);font:500 .8rem var(--mono)}
.shop .totals{margin-top:4px}
.shop .totals li{font-size:1rem}
.shop .totals .grand b{color:var(--ink);font-size:1.35rem}
.shop .edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px;align-items:end}
.shop .edit .btn{grid-column:1/-1;margin-bottom:14px}
@media (max-width:560px){.shop .bundles th{width:auto}.shop .bundles td:nth-child(3){display:none}}
.shop .plate img.photo{object-fit:cover}
.shop .withshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px 44px;align-items:center}
.shop .shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--plate)}
.shop .shot img{display:block;width:100%;max-height:440px;object-fit:contain}
@media (max-width:860px){.shop .withshot{grid-template-columns:1fr}.shop .withshot .shot{order:-1}}
.shop .thumb{width:56px;height:56px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:12px}
.shop form input[type=file]{padding:12px;font:500 .95rem var(--sans)}
.shop .edit .wide{grid-column:1/-1}
/* pulsanti veri (<button>): senza questo il browser ci mette il suo sfondo grigio e il suo bordo */
.shop button.btn{border:0;cursor:pointer;font-family:var(--display)}
.shop .btn.ghost{background:transparent}
.shop form input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:4px;background:var(--panel2);color:var(--ink);font:700 .8rem var(--mono);letter-spacing:.06em;cursor:pointer}
/* carrello, cassa, ordine */
.shop .nav .cartlink small{display:inline-block;min-width:1.5em;margin-left:6px;padding:2px 6px;border-radius:999px;background:var(--acc);color:var(--on);font:700 .7rem/1.2 var(--mono);text-align:center;letter-spacing:0}
.shop .nav .cartlink[aria-current] small{background:var(--on);color:var(--acc)}
.shop .emptybox{max-width:560px;margin:24px auto;padding:36px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.shop .emptybox .btn{margin-top:8px}
.shop .cart{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.shop .cline{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 16px 12px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.shop .cthumb{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:4px;overflow:hidden;background:var(--plate)}
.shop .cthumb img{width:100%;height:100%;object-fit:cover}
.shop .cthumb .mark{width:46px;height:auto}
/* senza foto: lo stesso fondo scuro con luce delle schede, non un riquadro grigio chiaro */
.shop .cthumb:not(:has(img)),.shop .pthumb:not(:has(img)),.shop .preview:not(:has(img)){background:radial-gradient(circle at 50% 46%,rgba(26,210,230,.16),transparent 62%),linear-gradient(160deg,#1c2029,#0d0f13)}
.shop .cthumb .mark .b,.shop .pthumb .mark .b,.shop .preview .mark .b,.shop .card .plate .mark .b{fill:#e9edf2}
.shop .cthumb .mark .p,.shop .pthumb .mark .p,.shop .preview .mark .p,.shop .card .plate .mark .p{fill:var(--acc)}
.shop .cthumb .mark,.shop .pthumb .mark,.shop .preview .mark{opacity:1}
@media (max-width:620px){.shop .card .foot{display:none}}
.shop .cname{min-width:0}
.shop .cname a{color:var(--ink);text-decoration:none}
.shop .cname b{display:block;font:700 condensed 1.35rem/1.1 var(--display);overflow-wrap:anywhere}
.shop .cname small{display:block;margin-top:4px;color:var(--mute);font:500 .78rem var(--mono)}
.shop .cname small.up{color:var(--acc)}
.shop .cname .pill{margin-top:6px}
.shop form.qty{display:inline-flex;align-items:center;margin:0;border:2px solid var(--line2);border-radius:999px}
.shop .qbtn{width:38px;height:38px;border:0;background:transparent;color:var(--ink);font:700 1.25rem/1 var(--sans);cursor:pointer;border-radius:999px}
.shop .qbtn:hover:not(:disabled){background:var(--panel2);color:var(--acc)}
.shop .qbtn:disabled{opacity:.3;cursor:default}
.shop .qty output{min-width:2.2ch;text-align:center;font:700 1rem var(--mono)}
.shop .ctotal{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:700 condensed 1.4rem/1 var(--display);white-space:nowrap}
.shop .ctotal form{margin:0}
.shop .linkbtn{border:0;background:none;padding:0;color:var(--mute);font:600 .76rem var(--mono);text-decoration:underline;cursor:pointer}
.shop .linkbtn:hover{color:#ff9b9b}
.shop .btn.wide{display:flex;width:100%;margin:18px 0 12px}
@media (max-width:980px){.shop .itemsfirst .rail{order:0}}
@media (max-width:620px){.shop .cline{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"t n n" "t q c";gap:10px 12px}
.shop .cthumb{grid-area:t;width:56px;height:56px}.shop .cname{grid-area:n}.shop form.qty{grid-area:q;justify-self:start}.shop .ctotal{grid-area:c}}
.shop .checkout h2,.shop .step h2{margin:0 0 16px;padding:0;border:0;font-size:1.4rem}
.shop .checkout h2:not(:first-child){margin-top:14px}
.shop .step{position:relative;padding-left:76px}
.shop .step .no{position:absolute;left:24px;top:22px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--on);font:700 1rem var(--mono);box-shadow:0 0 0 6px rgba(26,210,230,.12)}
.shop .step h3{margin:20px 0 8px;color:var(--mute);font:700 .7rem/1.4 var(--mono);letter-spacing:.14em}
.shop .amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 8px;font:700 condensed 1.3rem var(--display);color:var(--soft)}
.shop .amount b{font-size:clamp(2.1rem,5vw,3rem);color:var(--acc);font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(26,210,230,.3)}
.shop .addr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.shop .addr code{padding:10px 12px;border-radius:4px;background:var(--bg);border:1px solid var(--line2);font:600 .88rem var(--mono);overflow-wrap:anywhere;color:var(--ink)}
@media (max-width:620px){.shop .step{padding-left:20px;padding-top:66px}.shop .step .no{left:20px;top:20px}}
/* le schede della prima pagina: senza foto, un fondo scuro con luce invece del grigio chiaro */
.shop .card .plate:not(:has(img)){background:radial-gradient(circle at 50% 46%,rgba(26,210,230,.17),transparent 58%),linear-gradient(160deg,#1c2029,#0d0f13)}
.shop .card .plate:not(:has(img)) .mark{width:120px;height:auto;opacity:1;filter:drop-shadow(0 0 22px rgba(26,210,230,.35))}
.shop .card .price{text-shadow:0 0 26px rgba(26,210,230,.28)}
.shop .card .from{display:inline-block;align-self:flex-start;margin:2px 0 4px;padding:3px 8px;border-radius:4px;background:rgba(26,210,230,.1);color:var(--acc);font:700 .78rem/1.4 var(--mono)}
.shop .perks{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:0 0 22px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(90deg,rgba(26,210,230,.07),rgba(255,255,255,.015));color:var(--soft);font:600 .86rem/1.4 var(--sans)}
.shop .perks li{display:flex;align-items:center;gap:10px}
.shop .perks li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--acc);box-shadow:0 0 12px rgba(26,210,230,.8);transform:rotate(45deg)}
.shop .tg a{font:700 condensed 1.25rem/1 var(--display);letter-spacing:.03em;color:var(--acc)}
.shop .support{margin-top:16px}
.shop .support a{color:var(--acc);font-weight:700;white-space:nowrap}
footer .tg{margin-top:8px}
.shop .impt{width:100%}
.shop .impt th{color:var(--mute);font:700 .62rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line2)}
.shop .impt td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.shop .impt td.bad{color:#ff9b9b}
.shop .impt tbody tr:has(.bad){opacity:.75}
.shop .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:620px){.shop .impt{min-width:520px}.shop .pbar{flex-direction:column;align-items:stretch}.shop .pbar .btn{width:100%}}
/* guida al pagamento */
.shop .step p{margin:0 0 10px;color:var(--soft)}
.shop .step p:last-child{margin-bottom:0}
.shop .tip{border-left:3px solid var(--acc)}
.shop .tip h2{margin:0 0 12px;padding:0;border:0;font-size:1.3rem}
.shop .check{list-style:none;counter-reset:c;margin:0;padding:0}
.shop .check li{counter-increment:c;display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);color:var(--soft)}
.shop .check li::before{content:counter(c);flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--panel2);color:var(--acc);font:700 .78rem var(--mono)}
.shop .perks a{color:var(--acc);white-space:nowrap}
body.shop main>.wrap.pad{padding-top:16px;padding-bottom:56px}
.shop form.finder{position:relative;display:flex;align-items:center;margin:0 0 14px}
.shop form.finder input[type=search]{width:100%;height:42px;margin:0;padding:0 36px 0 16px;border:1px solid var(--line2);border-radius:999px;background:#fff;font:500 .95rem/1 var(--sans)}
.shop form.finder button{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.shop form.finder .clear{position:absolute;right:14px;color:var(--mute);text-decoration:none;font-size:1.15rem;line-height:1}
.shop .perks{margin:0 0 12px;padding:10px 14px}
body.shop section.area{padding:0;margin:0 0 28px}
.shop .uses{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:10px 0;background:var(--bg);box-shadow:0 1px 0 var(--line)}
body.shop .area h2{margin:0 0 10px}
body.shop .card .price{font-size:1.2rem;margin:10px 0 0;text-shadow:none;font-stretch:normal}
body.shop .card .foot{display:none}
body.shop .perks li::before{box-shadow:none;border-radius:50%;transform:none}
body.shop .card .plate:not(:has(img)){background:#f3f6f6}
body.shop .card .plate .mark .b{fill:var(--ink)}
body.shop .card .plate .mark .p{fill:var(--acc)}
body.shop .card .plate:not(:has(img)) .mark{width:88px;filter:none}
.shop .use{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font:600 .84rem/1 var(--sans)}
.shop .use small{color:var(--mute);font:600 .75rem/1 var(--sans)}
.shop .use.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.shop .use.on small{color:rgba(255,255,255,.72)}
/* Su telefono la barra categorie fissa non va a capo: una sola riga che scorre di lato, compatta. */
@media (max-width:620px){
.shop .uses{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:8px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shop .uses::-webkit-scrollbar{display:none}
.shop .use{flex:0 0 auto;white-space:nowrap;min-height:38px;padding:0 13px;font-size:.8rem}
}
.shop .use:hover{border-color:var(--acc)}
body.shop footer{background:#fff;color:#3e565e;border-top:1px solid #e3eaeb;padding:32px 0 24px}
body.shop footer h4{color:#17343c;font-family:var(--sans);font-stretch:normal;font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none}
body.shop footer p,body.shop footer li,body.shop footer a{color:#243f48;font-size:1rem}
body.shop footer a:hover{color:#0a7fb0}
body.shop footer .bn b{color:#17343c}
body.shop footer .bn small{color:#0a7fb0}
body.shop footer .mail{margin-top:10px}
body.shop footer .mail a{color:#0a7fb0;font-weight:700}
body.shop footer .legal{margin:22px 0 0;padding-top:16px;border-top:1px solid #e3eaeb;max-width:82ch;color:#243f48;font-size:.95rem;line-height:1.55}
.agebar{position:fixed;z-index:50;left:50%;bottom:16px;transform:translateX(-50%);width:min(420px,calc(100% - 24px));margin:0;padding:14px 16px;background:#fff;color:#17343c;border:1px solid #e3eaeb;border-radius:14px;box-shadow:0 18px 44px -28px rgba(23,52,60,.7)}
.agebar p{margin:0 0 10px;color:#17343c;font:600 .88rem/1.4 "Segoe UI",system-ui,sans-serif}
.agebar p b{color:#0a7fb0}
.ageacts{display:flex;flex-wrap:wrap;gap:8px}
.ageacts .btn{padding:8px 12px;border-radius:10px;font:700 .86rem/1 "Segoe UI",system-ui,sans-serif;cursor:pointer}
.ageacts .btn.main{background:#0a7fb0;color:#fff;border:0}
.ageacts .btn.ghost{background:#fff;color:#17343c;border:1px solid #d3dee0}
body.shop .ageacts .btn.main{padding:8px 12px;font-size:.86rem}
body.shop::before{content:none}
body.shop .pagehead,body.shop .sheethead{background:#fff;background-image:none;border-bottom:1px solid #e3eaeb;color:#17343c}
body.shop .pagehead .wrap{padding-top:28px;padding-bottom:28px}
body.shop .pagehead h1{font-family:var(--sans);font-stretch:normal;font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:600;letter-spacing:0}
body.shop .panel{background:#fff;border:1px solid #e3eaeb;box-shadow:0 12px 32px -26px rgba(23,52,60,.4)}
body.shop .btn.main{background:#0a7fb0;box-shadow:none;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:1rem;padding:12px 18px}
body.shop .btn.main:hover{background:#07668e;transform:none}
body.shop .bundles .off{color:#b42318;font-family:var(--sans);font-stretch:normal;font-weight:700;letter-spacing:0;text-transform:none;font-size:.92rem}
body.shop .ctotal,body.shop .amount,body.shop .amount b,body.shop .cname b,body.shop .pprice,body.shop .pinfo b,body.shop .facts b,body.shop .spec .val{font-family:var(--sans);font-stretch:normal;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}
body.shop .amount b{font-size:1.6rem;color:var(--ink);text-shadow:none}
body.shop .ctotal{font-size:1.05rem}

/* dashboard */
.shop .dtop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:24px}
.shop .dtop h1{margin:0;font-size:clamp(2rem,5vw,3rem)}
.shop .dtop .out{margin:0}
.shop .dash{padding-top:24px}
.shop .dtabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 24px;border-bottom:1px solid var(--line);scrollbar-width:none}
.shop .dtabs a{flex:none;padding:12px 16px;color:var(--mute);text-decoration:none;font:700 condensed 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.07em;border-bottom:3px solid transparent;margin-bottom:-1px}
.shop .dtabs a:hover{color:var(--ink)}
.shop .dtabs a[aria-current]{color:var(--ink);border-bottom-color:var(--acc)}
.shop .dtabs small{display:inline-block;min-width:1.6em;margin-left:6px;padding:2px 6px;border-radius:999px;background:var(--panel2);color:var(--soft);font:700 .7rem/1.2 var(--mono);text-align:center}
.shop .flash{margin:0 0 20px;padding:14px 18px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);font-weight:600}
.shop .flash.ok{border-color:rgba(26,210,230,.5);color:var(--acc)}
.shop .flash.bad{border-color:#7a2e2e;background:#1d1012;color:#ffb4b4}
.shop .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.shop .dhead h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.shop .dhead h2 small{color:var(--mute);font:700 1rem var(--mono)}
.shop .dhead .see{font:700 .8rem var(--mono)}
.shop .empty{padding:28px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--mute)}
.shop .plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.shop .prow{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.shop .pthumb{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:4px;overflow:hidden;background:var(--plate)}
.shop .pthumb img{width:100%;height:100%;object-fit:cover}
.shop .pthumb .mark{width:42px;height:auto}
.shop .pinfo{min-width:0}
.shop .pinfo a{color:var(--ink);text-decoration:none}
.shop .pinfo b{display:block;font:700 condensed 1.35rem/1.1 var(--display);overflow-wrap:anywhere}
.shop .pinfo small,.shop .pprice small{display:block;margin-top:3px;color:var(--mute);font:500 .78rem var(--mono)}
.shop .pprice{text-align:right;font:700 condensed 1.4rem/1 var(--display);color:var(--ink);white-space:nowrap}
.shop .pill{display:inline-block;padding:4px 10px;border-radius:999px;font:700 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line2);color:var(--soft);vertical-align:middle}
.shop .pill.ok{border-color:rgba(26,210,230,.45);color:var(--acc)}
.shop .pill.off{border-color:#7a2e2e;color:#ff9b9b}
.shop .pact{display:flex;gap:8px;align-items:center}
.shop .pact form{margin:0}
.shop .btn.ghost.danger{color:#ff9b9b;box-shadow:inset 0 0 0 2px #5a2626}
.shop .btn.ghost.danger:hover{box-shadow:inset 0 0 0 2px #ff9b9b}
@media (max-width:760px){.shop .prow{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"t i p" "s s s" "a a a";gap:10px 12px}
.shop .pthumb{grid-area:t;width:56px;height:56px}.shop .pinfo{grid-area:i}.shop .pprice{grid-area:p}
.shop .prow>.pill{grid-area:s;justify-self:start}.shop .pact{grid-area:a}.shop .prow .pact>a.btn,.shop .prow .pact>form{flex:1 1 0;min-width:0}.shop .pact .btn{width:100%}}
.shop .pcols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.shop .pcols h3{margin:0 0 16px;font-size:1.3rem}
.shop .two,.shop .three{display:grid;gap:0 12px}
.shop .two{grid-template-columns:1fr 1fr}
.shop .three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop form label small{display:block;margin-top:6px;color:var(--mute);font:500 .7rem var(--mono);letter-spacing:0;text-transform:none}
.shop .seg{display:flex;gap:8px;margin:0 0 14px;padding:0;border:0;min-width:0}
.shop .seg legend{margin:0 0 8px;padding:0;color:var(--mute);font:700 .64rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.shop form .seg label{flex:1;margin:0;position:relative}
.shop .seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.shop .seg span{display:block;padding:13px 14px;border:2px solid var(--line2);border-radius:4px;text-align:center;color:var(--soft);font:700 condensed 1rem/1 var(--display);letter-spacing:.08em;cursor:pointer}
.shop .seg input:checked+span{border-color:var(--acc);color:var(--ink);background:var(--panel2)}
.shop .seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.shop .preview{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;max-height:280px;margin:0 0 14px;border-radius:4px;overflow:hidden;background:var(--plate)}
.shop .preview img{width:100%;height:100%;object-fit:contain}
.shop .preview .mark{width:120px;height:auto}
.shop form label.switch{display:flex;align-items:center;gap:12px;margin:6px 0 0;cursor:pointer;color:var(--ink);font:600 1rem var(--sans);letter-spacing:0;text-transform:none}
.shop form .switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;display:block;width:46px;height:26px;margin:0;padding:0;border:2px solid var(--line2);border-radius:999px;background:var(--bg);cursor:pointer;transition:background .15s,border-color .15s}
.shop form .switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mute);transition:transform .15s,background .15s}
.shop form .switch input:checked{background:var(--acc);border-color:var(--acc)}
.shop form .switch input:checked::after{transform:translateX(20px);background:var(--on)}
.shop form .switch input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.shop .pbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.shop .pbar .btn{flex:none}
.shop .narrow{max-width:640px}
body.shop .trackform{max-width:460px}
body.shop .spacetop{margin-top:1rem}
.shop .hint{margin:-6px 0 16px;color:var(--mute);font-size:.88rem}
.shop .login{max-width:420px;margin:24px auto}
@media (max-width:860px){.shop .pcols{grid-template-columns:1fr}}
@media (max-width:520px){.shop .two,.shop .three{grid-template-columns:1fr}}
.shop .olist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.shop .order{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:var(--r)}
.shop .order.st-paid{border-left-color:var(--acc)}
.shop .order.st-open{border-left-color:#e0b341}
.shop .order.st-cancelled{opacity:.65}
.shop .order header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.shop .order header b{font:700 1rem var(--mono)}
.shop .order time{margin-left:auto;color:var(--mute);font:500 .76rem var(--mono)}
.shop .st-paid .pill.st{border-color:rgba(26,210,230,.45);color:var(--acc)}
.shop .st-open .pill.st{border-color:#6b5520;color:#e0b341}
.shop .oitems{list-style:none;margin:0;padding:0}
.shop .oitems li,.shop .ototal{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.shop .ototal{flex-wrap:wrap;margin:0;border-bottom:0;font-weight:700}
.shop .ototal small{flex-basis:100%;color:var(--mute);font:500 .78rem var(--mono);text-align:right}
.shop .oaddr,.shop .otx,.shop .otrack{margin:10px 0 0;color:var(--soft);font-size:.9rem}
.shop .otrack b{color:var(--ink);font-family:var(--mono)}
.shop .oaddr span{display:block;color:var(--mute);font:700 .62rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.shop .oact{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.shop .oact .otrackin{flex:1 1 160px;min-height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--ink);font:500 .85rem var(--sans)}
.shop .odel{margin:14px 0 0}
.shop .carticon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:auto;border:1px solid var(--line2);border-radius:10px;color:var(--ink);text-decoration:none}
.shop .carticon svg{width:21px;height:21px}
.shop .carticon:hover{border-color:var(--acc);color:var(--acc)}
.shop .carticon[aria-current]{border-color:var(--acc);color:var(--acc);background:rgba(26,210,230,.1)}
.shop .cbadge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--acc);color:var(--on);font:700 .68rem/19px var(--mono);text-align:center}
@media (max-width:620px){.shop .brand{max-width:calc(100% - 184px)}.shop .carticon{width:40px;height:40px}
body.shop .top{position:sticky;top:0;z-index:50}}
.shop .topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.shop .topbar .in{display:flex;gap:10px 26px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:8px 20px}
.shop .topbar span{color:var(--mute);font:600 .72rem var(--sans);letter-spacing:.02em}
.shop .topbar .ro{color:var(--acc)}
@media (max-width:720px){.shop .topbar .in{gap:6px 16px;padding:7px 14px}.shop .topbar span{font-size:.66rem}.shop .topbar span:nth-child(3){display:none}}
.shop .addbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 20px;padding:14px 18px;border:1px solid rgba(26,210,230,.45);border-radius:14px;background:rgba(26,210,230,.1)}
.shop .addbar p{margin:0}
.shop .addbar b{color:var(--acc)}
.shop .addacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
@media (max-width:560px){.shop .addacts{width:100%;margin-left:0}.shop .addacts .btn{flex:1 1 40%}}
.shop .promo{margin:0 0 16px;padding:14px;border:1px dashed var(--line2);border-radius:12px}
.shop .promo label{display:block;margin:0 0 10px}
.shop .promo.on{border-style:solid;border-color:rgba(26,210,230,.45);background:rgba(26,210,230,.08)}
.shop .pgood{margin:0 0 6px;color:var(--acc);font-size:.9rem}
.shop .sumline.off b{color:var(--acc)}
.shop .linkbtn.off{opacity:.55}
.shop .doses{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 18px}
.shop .dlabel{color:var(--mute);font:700 .62rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.shop .dopts{display:flex;gap:8px;flex-wrap:wrap}
.shop .dose{display:inline-block;padding:7px 13px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--soft);font:600 .86rem var(--sans);text-decoration:none}
.shop a.dose:hover{border-color:var(--acc);color:var(--ink)}
.shop .dose.on{border-color:var(--acc);background:rgba(26,210,230,.12);color:var(--acc)}
.shop .card .price em{font:600 .62rem var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.shop .card .price small{display:block;margin:2px 0 0;color:var(--mute);font:600 .66rem var(--sans);letter-spacing:.04em;text-transform:uppercase}
.shop .minord{margin:0 0 14px;color:var(--mute);font-size:.84rem;line-height:1.5}
.shop .ccbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;gap:14px;align-items:center;flex-wrap:wrap;max-width:860px;margin:0 auto;padding:14px 18px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.shop .ccbar p{flex:1 1 280px;margin:0;color:var(--soft);font-size:.9rem;line-height:1.5}
.shop .ccbar b{color:var(--ink)}
.shop .ccacts{display:flex;gap:8px;flex-wrap:wrap}
.shop .ccbox form{margin:12px 0 0}
@media (max-width:560px){.shop .ccbar{left:8px;right:8px;bottom:8px;padding:12px 14px}.shop .ccacts .btn{flex:1 1 44%}}
.shop .chshot{display:block;width:180px;max-width:100%;border-radius:12px;border:1px solid var(--line2);margin:0 0 14px}
.shop .chpost{padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--bg);color:var(--soft);line-height:1.55;font-size:.95rem;overflow-wrap:anywhere}
.shop .chpost b{color:var(--ink)}
.shop .chbtn{margin:10px 0 0;padding:11px 14px;border:1px solid rgba(26,210,230,.45);border-radius:12px;background:rgba(26,210,230,.1);color:var(--acc);font:700 .9rem var(--sans);text-align:center}
.shop .oconf{margin:14px 0 0;padding:12px 14px;border:1px solid #6b2626;border-radius:12px;background:rgba(107,38,38,.12)}
.shop .oconfq{margin:0;font-weight:700}
.shop .oconf .hint{margin:6px 0 0}
.shop .oconfb{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.shop .qalist{display:grid;gap:14px;max-width:760px}
.shop .qa{margin:0}
.shop .qa h2{margin:0 0 8px;font-size:1.12rem}
.shop .qa p{margin:0;color:var(--soft);line-height:1.6}
.shop .about{max-width:760px}
.shop .about p{margin:0 0 14px;color:var(--soft);line-height:1.7;font-size:1.05rem}
.shop .about p:last-child{margin-bottom:0}
/* Hero della prima pagina: banda scura, professionale. */
.shop .hero{background:linear-gradient(155deg,#12303a 0%,#17343c 52%,#1d4656 100%);color:#fff;padding:66px 16px 58px;text-align:center}
.shop .hinner{max-width:720px;margin:0 auto}
.shop .heyebrow{margin:0 0 14px;font:700 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#8fd3e0}
.shop .htitle{margin:0 0 16px;font-family:var(--sans);font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.01em;color:#fff}
.shop .hsub{margin:0 auto 28px;max-width:540px;font-size:1.1rem;line-height:1.6;color:#cfe0e4}
.shop .hero .hcta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:700 1rem var(--sans);text-decoration:none;box-shadow:0 16px 32px -16px rgba(0,0,0,.55);transition:transform .15s,box-shadow .15s}
.shop .hero .hcta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(0,0,0,.6)}
/* Barra dei vantaggi: una riga pulita di badge, centrata. */
.shop .perks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 24px;max-width:1000px;margin:28px auto 36px;padding:16px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 16px 40px -30px rgba(23,52,60,.5);list-style:none}
.shop .perks li{display:flex;align-items:center;gap:9px;margin:0;font-size:.92rem;font-weight:600;color:var(--soft)}
.shop .perks li::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:none;transform:none;flex:none}
.shop .perks li a{color:var(--acc);text-decoration:none;font-weight:700}
@media (max-width:620px){.shop .hero{padding:48px 16px 40px}.shop .perks{gap:8px 16px;padding:14px 16px}}
/* ===== Premium refresh (appended, last-wins) ===== */
/* Product cards: rounded, lifted, premium plate, prominent price */
body.shop .grid{gap:20px}
body.shop a.card{border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(23,52,60,.05);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
body.shop a.card:hover{transform:translateY(-4px);border-color:#bcd0d5;box-shadow:0 26px 52px -30px rgba(23,52,60,.55)}
body.shop .card .plate{border-bottom:1px solid var(--line)}
body.shop .card .plate:not(:has(img)){background:radial-gradient(130% 120% at 50% 0,#f3f8f9,#e6eef0 65%,#dde8ea)}
body.shop .card .plate:not(:has(img)) .mark{width:96px;filter:none}
body.shop .card .kicker{color:var(--acc);font:700 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px}
body.shop .card b{font-size:1.12rem;line-height:1.25;color:var(--ink)}
body.shop .card .sub{color:var(--mute)}
body.shop .card .price{font-size:1.5rem;font-weight:700;margin:10px 0 0;color:var(--ink);text-shadow:none}
body.shop .card .from{display:inline-block;align-self:flex-start;margin:8px 0 0;padding:3px 9px;border-radius:999px;background:rgba(28,109,132,.1);color:var(--acc2);font:700 .74rem/1.4 var(--mono)}
/* Hero: deeper radial, tighter type, trust microline */
body.shop .hero{background:radial-gradient(120% 150% at 50% -30%,#235465 0%,#17343c 46%,#0e2630 100%);padding:78px 16px 66px;border-bottom:1px solid rgba(255,255,255,.06)}
body.shop .htitle{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.015em}
body.shop .hsub{color:#c8dce1}
body.shop .hmicro{margin:22px 0 0;color:#9fc2cb;font:600 .82rem/1.5 var(--mono);letter-spacing:.02em}
body.shop .hero .hcta{box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
/* Trust bar: checkmark badges */
body.shop .perks{box-shadow:0 18px 44px -32px rgba(23,52,60,.6)}
body.shop .perks li{gap:10px;color:var(--soft)}
body.shop .perks li::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:rgba(28,109,132,.12);color:var(--acc);font:700 .72rem/1 var(--sans);box-shadow:none;transform:none}
/* Buttons: confident, slightly rounded, soft lift */
body.shop .btn.main{border-radius:10px;padding:13px 22px;font-weight:700;box-shadow:0 10px 24px -14px rgba(28,109,132,.65)}
body.shop .btn.main:hover{background:#12414f;transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(28,109,132,.75)}
/* Section labels */
body.shop .area h2{color:var(--acc);letter-spacing:.18em}
/* Sticky toolbar: search + category chips pinned together while scrolling */
body.shop .shoptools{position:sticky;top:0;z-index:30;background:var(--bg);padding:12px 0 10px;margin:0 0 14px;box-shadow:0 1px 0 var(--line)}
body.shop .shoptools .finder{margin:0 0 10px}
body.shop .shoptools .uses{position:static;margin:0;padding:0;background:transparent;box-shadow:none}
body.shop .noresults{text-align:center;color:var(--mute);padding:40px 0}
/* How it works */
body.shop .hiw{background:#fff;border-top:1px solid var(--line);margin-top:4px}
body.shop .hiw .wrap{padding:54px 16px 58px}
body.shop .hiwh{margin:0 0 30px;text-align:center;font:700 .78rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
body.shop .hiwsteps{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
body.shop .hiwsteps li{margin:0}
body.shop .hiwsteps .hn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--panel2);color:var(--acc);font:700 1.15rem var(--mono);margin:0 0 14px}
body.shop .hiwsteps h3{margin:0 0 8px;font-size:1.12rem;color:var(--ink)}
body.shop .hiwsteps p{margin:0;color:var(--soft);line-height:1.6}
@media (max-width:720px){body.shop .hiwsteps{grid-template-columns:1fr;gap:18px}}
/* Footer: brand tagline */
body.shop footer .fbrand{max-width:340px}
body.shop footer .ftag{margin:12px 0 0;color:#4a636b;font-size:.92rem;line-height:1.55}
/* Dashboard analytics */
body.shop .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 18px}
body.shop .stat{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px -26px rgba(23,52,60,.4)}
body.shop .stat .sl{display:block;color:var(--mute);font:700 .62rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
body.shop .stat .sv{display:block;margin:8px 0 0;color:var(--ink);font:700 1.9rem/1 var(--sans);font-variant-numeric:tabular-nums}
body.shop .stat .ss{display:block;margin:6px 0 0;color:var(--soft);font:600 .82rem var(--sans)}
body.shop .anchart{margin:0 0 18px}
body.shop .anchart h3,body.shop .toplist+.panel h3{margin:0 0 14px}
body.shop .panel h3{font-size:1.05rem}
body.shop .spark{display:flex;align-items:flex-end;gap:5px;height:120px}
body.shop .spark .bar{flex:1 1 0;min-height:3px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--acc),#2f88a0);opacity:.92}
body.shop .spark .bar:hover{opacity:1}
body.shop .toplist{list-style:none;margin:0;padding:0;counter-reset:tp}
body.shop .toplist li{counter-increment:tp;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
body.shop .toplist li::before{content:counter(tp);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--panel2);color:var(--acc);font:700 .78rem var(--mono)}
body.shop .toplist .tn{color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
body.shop .toplist .tq{color:var(--mute);font:500 .82rem var(--mono);white-space:nowrap}
body.shop .toplist .ts{color:var(--ink);font:700 1rem var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Analytics: section headings, two-column panels, best-effort note */
body.shop .ansub{margin:26px 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line2)}
body.shop .ansub:first-child{margin-top:0}
body.shop .ansub h3{margin:0;color:var(--ink);font:700 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
body.shop .ancols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0 0 18px}
body.shop .ancols .panel{margin:0}
body.shop .anhint{margin:-6px 0 12px;color:var(--mute);font:500 .78rem/1.45 var(--sans)}
/* Reusable guarantees block (product sheet + checkout) */
body.shop .guarantees{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
body.shop .guarantees li{display:flex;align-items:flex-start;gap:9px;color:var(--soft);font:600 .86rem/1.45 var(--sans)}
body.shop .guarantees li::before{content:"\2713";flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(28,109,132,.12);color:var(--acc);font:700 .68rem/1 var(--sans)}
/* Product sheet polish */
body.shop .rail .price{font-size:2.3rem;margin:2px 0 14px}
body.shop .shot{border-radius:16px;box-shadow:0 22px 52px -34px rgba(23,52,60,.6)}
body.shop .sheetmain #what .big{color:var(--soft);line-height:1.7}
body.shop .checkout .editcart{margin:4px 0 0}
/* ===== Site-pro pass (appended, last-wins) ===== */
/* Vantaggi: una griglia di quattro colonne uguali, non un flex che va a capo 3+1. */
body.shop .perks{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:14px 24px;max-width:1120px;padding:18px 24px}
/* blocco, non flex: il badge sta fuori dal testo e il link resta in linea con la frase */
body.shop .perks li{display:block;position:relative;flex:1 1 210px;min-width:0;padding-left:29px;font-size:.88rem;line-height:1.45}
body.shop .perks li::before{position:absolute;left:0;top:1px;margin:0}
body.shop .perks li a{white-space:normal}
@media (max-width:900px){body.shop .perks li{flex:1 1 240px}}
@media (max-width:560px){body.shop .perks{gap:10px}body.shop .perks li{flex:1 1 100%}}
/* Avviso dei 21 anni: stessa forma per i due pulsanti, il "no" piu' discreto. */
.agebar{width:min(460px,calc(100% - 24px));padding:16px 18px}
.agebar p{margin:0 0 12px;font-size:.9rem;line-height:1.5}
.ageacts{gap:10px}
.ageacts .btn,body.shop .ageacts .btn{text-transform:none;letter-spacing:0;padding:10px 16px;border-radius:10px;font:700 .88rem/1 var(--sans)}
.ageacts .btn.ghost{box-shadow:none;border:1px solid #d3dee0;color:var(--mute);font-weight:600}
.ageacts .btn.ghost:hover{box-shadow:none;border-color:#b9c9cc;color:var(--ink)}
/* Hero: piu' compatto, cosi' la prima fila di prodotti si vede senza scorrere. */
body.shop .hero{padding:60px 16px 48px}
body.shop .htitle{font-size:clamp(1.9rem,4.2vw,2.8rem)}
body.shop .hsub{max-width:600px;margin-bottom:26px;font-size:1.06rem}
body.shop .hmicro{margin-top:18px}
@media (max-width:620px){body.shop .hero{padding:42px 16px 34px}}
/* Scheda senza foto: filigrana piccola, non un logo gigante che sembra un errore. */
body.shop .card .plate:not(:has(img)){background:linear-gradient(170deg,#f7fafb,#eaf1f3 70%,#e2ebed)}
body.shop .card .plate:not(:has(img)) .mark{width:54px;opacity:.26}
/* Messa a fuoco da tastiera: visibile sul chiaro e sullo scuro. */
body.shop a:focus-visible,body.shop button:focus-visible,body.shop input:focus-visible,body.shop select:focus-visible,body.shop textarea:focus-visible,body.shop label.menubtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
body.shop .hero a:focus-visible{outline-color:#fff}
/* Fascia qualita' e documentazione: quattro riquadri, fondo chiaro, sopra "How it works". */
body.shop .quality{border-top:1px solid var(--line);background:#fff;padding:52px 0 54px}
body.shop .quality .qh{margin:0 0 6px;color:var(--ink);font:600 1.5rem/1.2 var(--sans);letter-spacing:-.01em}
body.shop .quality .ql{margin:0 0 26px;color:var(--mute);font:500 1rem/1.5 var(--sans)}
body.shop .qgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
body.shop .qgrid li{position:relative;padding:20px 18px 18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fbfdfd,#f4f8f9)}
body.shop .qgrid li::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0 0 12px;border-radius:50%;background:rgba(28,109,132,.12);color:var(--acc);font:700 .82rem/1 var(--sans)}
body.shop .qgrid h3{margin:0 0 6px;color:var(--ink);font:600 1.02rem/1.3 var(--sans)}
body.shop .qgrid p{margin:0;color:var(--soft);font:500 .9rem/1.5 var(--sans)}
@media (max-width:900px){body.shop .qgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){body.shop .quality{padding:38px 0 40px}body.shop .qgrid{grid-template-columns:1fr;gap:12px}}
/* FAQ: la colonna era larga 740px in una pagina da 1440 e lasciava mezza pagina vuota. Centrata. */
body.shop .qalist{max-width:820px;margin:0 auto}
body.shop .qalist+.support{max-width:820px;margin-left:auto;margin-right:auto}
/* Foto dei prodotti: i flaconi sono scatti quadrati, il riquadro era 16/11 e con object-fit:cover
   tagliava sopra e sotto (si vedeva solo la fascia centrale del flacone). Riquadro quadrato e foto
   intera dentro, con un filo d'aria. */
body.shop .card .plate{aspect-ratio:1/1;padding:0;background:#fff}
body.shop .card .plate img.photo{width:100%;height:100%;object-fit:contain}
body.shop a.card:hover .plate img.photo{transform:scale(1.03)}
body.shop .card .plate img.photo{transition:transform .25s ease}
/* Scheda prodotto: la foto piu' grande, sempre intera. */
body.shop .shot{background:#fff;padding:14px}
body.shop .shot img{max-height:none;aspect-ratio:1/1;object-fit:contain}
/* Testata della scheda: testo in alto accanto alla foto, non centrato (lasciava un buco sopra). */
body.shop .withshot{align-items:start}
body.shop .withshot .shot{margin-top:4px}
/* Correlati in fondo alla scheda: stessa griglia del catalogo, fondo chiaro. */
body.shop .also{border-top:1px solid var(--line);background:#fff;padding:46px 0 52px}
body.shop .also h2{margin:0 0 20px;color:var(--ink);font:600 1.3rem/1.2 var(--sans);letter-spacing:-.01em}
body.shop .also .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media (max-width:560px){body.shop .also{padding:34px 0 38px}}
/* Telefono: due colonne di schede, come in ogni negozio. Una sola per riga rendeva le pagine
   lunghissime (la scheda prodotto arrivava a cinquemila pixel) e si vedeva un prodotto per volta. */
@media (max-width:560px){
body.shop .grid,body.shop .also .grid{grid-template-columns:repeat(2,1fr);gap:10px}
body.shop a.card{border-radius:12px}
body.shop .card .body{padding:10px 10px 12px}
body.shop .card b{font-size:.96rem}
body.shop .card .sub,body.shop .card .meta{font-size:.78rem}
body.shop .card .price{font-size:1.2rem}
body.shop .card .from{font-size:.68rem;padding:2px 7px}
}

/* ===== SEO pass (appended, last-wins) ===== */
/* Testata di categoria e di ricerca. Prima queste due pagine arrivavano senza nessun titolo: chi le
   apriva da un motore vedeva solo una griglia di schede, e il motore non sapeva di che parlassero. */
body.shop .cathead{margin:4px 0 22px}
body.shop .cathead h1{margin:0;color:var(--ink);font:600 1.75rem/1.15 var(--sans);letter-spacing:-.015em}
body.shop .cathead p{margin:8px 0 0;max-width:62ch;color:var(--soft);font:500 1rem/1.6 var(--sans)}
@media (max-width:560px){body.shop .cathead{margin:2px 0 16px}body.shop .cathead h1{font-size:1.35rem}
body.shop .cathead p{font-size:.92rem}}
/* Filo di briciole della scheda prodotto: ora ha in mezzo la categoria, che e' un link. */
body.shop .crumbs a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}
body.shop .crumbs a:hover{border-bottom-color:currentColor}
/* Collegamento dalla scheda del flacone alla scheda di riferimento del composto. */
body.shop .refbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 0}
body.shop .refbar span{color:var(--mute);font:700 .64rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
body.shop .refbar a{color:var(--acc);font:600 .95rem/1.3 var(--sans);text-decoration:none;
  border-bottom:1px solid rgba(28,109,132,.35)}
body.shop .refbar a:hover{border-bottom-color:currentColor}
/* Testata della scheda: la foto quadrata da 440px lasciava accanto a se' un rettangolo bianco alto
   duecento pixel. Un filo piu' stretta, e la testata non e' piu' un buco. */
body.shop .withshot{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:24px 40px}
@media (max-width:860px){body.shop .withshot{grid-template-columns:1fr}}
/* Riquadro "disponibile nel negozio" sulle schede di riferimento (tema scuro, foglio style.css). */
.buybox ul{margin:14px 0 18px;padding-left:20px}
.buybox li{margin:0 0 7px;line-height:1.5}
.buybox .hint{opacity:.72;font-size:.9rem;line-height:1.55}

.shop .spark .h0{height:0%}.shop .spark .h5{height:5%}.shop .spark .h10{height:10%}.shop .spark .h15{height:15%}.shop .spark .h20{height:20%}.shop .spark .h25{height:25%}.shop .spark .h30{height:30%}.shop .spark .h35{height:35%}.shop .spark .h40{height:40%}.shop .spark .h45{height:45%}.shop .spark .h50{height:50%}.shop .spark .h55{height:55%}.shop .spark .h60{height:60%}.shop .spark .h65{height:65%}.shop .spark .h70{height:70%}.shop .spark .h75{height:75%}.shop .spark .h80{height:80%}.shop .spark .h85{height:85%}.shop .spark .h90{height:90%}.shop .spark .h95{height:95%}.shop .spark .h100{height:100%}body.shop .shipbar .fill.w0{width:0%}body.shop .shipbar .fill.w5{width:5%}body.shop .shipbar .fill.w10{width:10%}body.shop .shipbar .fill.w15{width:15%}body.shop .shipbar .fill.w20{width:20%}body.shop .shipbar .fill.w25{width:25%}body.shop .shipbar .fill.w30{width:30%}body.shop .shipbar .fill.w35{width:35%}body.shop .shipbar .fill.w40{width:40%}body.shop .shipbar .fill.w45{width:45%}body.shop .shipbar .fill.w50{width:50%}body.shop .shipbar .fill.w55{width:55%}body.shop .shipbar .fill.w60{width:60%}body.shop .shipbar .fill.w65{width:65%}body.shop .shipbar .fill.w70{width:70%}body.shop .shipbar .fill.w75{width:75%}body.shop .shipbar .fill.w80{width:80%}body.shop .shipbar .fill.w85{width:85%}body.shop .shipbar .fill.w90{width:90%}body.shop .shipbar .fill.w95{width:95%}body.shop .shipbar .fill.w100{width:100%}
body.shop .shipmeter{margin:14px 0 0}
body.shop .shipbar{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden}
body.shop .shipbar .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--acc),#2f88a0)}
body.shop .shipmeter .ship{margin:8px 0 0}
body.shop .freeship{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--acc);font:700 .9rem var(--sans)}
body.shop .freeship .tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(28,109,132,.14);font-size:.72rem}
/* Accessibilità: focus visibile da tastiera. E pagina 404 con l'aspetto dello shop. */
body.shop a:focus-visible,body.shop button:focus-visible,body.shop input:focus-visible,body.shop textarea:focus-visible,body.shop select:focus-visible,body.shop .menubtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
body.shop .notfound{max-width:520px;margin:0 auto;padding:48px 0 32px;text-align:center}
body.shop .notfound .code{font:800 3.4rem/1 var(--sans);color:var(--acc);margin:0}
body.shop .notfound h1{margin:8px 0 8px}
body.shop .notfound .lead{color:var(--mute);margin:0 0 24px}
/* Barra di avanzamento dell'ordine (Ordinato -> Pagato -> Spedito) */
body.shop .ordsteps{list-style:none;display:flex;margin:0 0 26px;padding:0}
body.shop .ordsteps li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;color:var(--mute);font:700 .8rem var(--sans);text-align:center}
body.shop .ordsteps li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line2);z-index:0}
body.shop .ordsteps li:first-child::before{display:none}
body.shop .ordsteps .dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel);border:2px solid var(--line2);color:var(--mute)}
body.shop .ordsteps li.done{color:var(--ink)}
body.shop .ordsteps li.done .dot{background:var(--acc);border-color:var(--acc);color:#fff}
body.shop .ordsteps li.active{color:var(--acc)}
body.shop .ordsteps li.active .dot{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 4px rgba(28,109,132,.12)}
body.shop .ordsteps li.done::before,body.shop .ordsteps li.active::before{background:var(--acc)}
body.shop .ordsteps.off{display:block;margin:0 0 20px}
/* Hero premium: testo + badge + doppia CTA + chip di fiducia veritiere, su gradiente testurizzato */
body.shop .hero{position:relative;overflow:hidden;padding:92px 16px 80px;border-bottom:1px solid rgba(255,255,255,.07);background:radial-gradient(1000px 520px at 78% -20%,rgba(74,185,210,.28),transparent 60%),radial-gradient(760px 440px at 8% 125%,rgba(28,109,132,.4),transparent 55%),linear-gradient(160deg,#0c2a33 0%,#143b47 55%,#0e2a34 100%)}
body.shop .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);mask-image:linear-gradient(180deg,#000,transparent 82%)}
body.shop .hinner{position:relative;max-width:780px}
body.shop .heyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px;border:1px solid rgba(143,211,224,.35);border-radius:999px;background:rgba(143,211,224,.08);color:#aee3ee;font:700 .66rem/1 var(--mono);letter-spacing:.2em}
body.shop .heyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fd0bf;box-shadow:0 0 0 3px rgba(95,208,191,.25)}
body.shop .htitle{font-size:clamp(2.1rem,5.2vw,3.5rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 18px}
body.shop .hsub{max-width:560px;font-size:1.12rem;line-height:1.6;color:#cfe3e8;margin:0 auto 30px}
body.shop .hero .hcta{background:#fff;color:var(--ink);box-shadow:0 16px 36px -16px rgba(0,0,0,.6)}
body.shop .hero .hcta:hover{background:#eef5f6}
body.shop .hctas{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:center;margin:0 0 30px}
body.shop .hcta2{display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 8px;color:#cdeaf1;font:700 .98rem var(--sans);text-decoration:none}
body.shop .hcta2:hover{color:#fff}
body.shop .htrust{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0;padding:0}
body.shop .htrust li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:#dceaed;font:600 .82rem var(--sans)}
body.shop .htrust li::before{content:"\2713";color:#5fd0bf;font-size:.78rem;font-weight:700}
@media (max-width:620px){body.shop .hero{padding:56px 16px 44px}body.shop .htrust li{font-size:.76rem;padding:7px 11px}}
/* ===== Telefono: la prima fila di schede (appended, last-wins) ===== */
/* L'hero si prendeva tutto il primo schermo e il primo prodotto arrivava a millequattrocento pixel
   di scorrimento. Stretto di quel tanto che basta perche' le schede si intravedano subito.
   Questo blocco deve restare l'ultimo del foglio: le regole dell'hero stanno piu' sopra e hanno la
   stessa specificita', quindi vince chi e' scritto dopo. */
@media (max-width:620px){
body.shop .hero{padding:34px 16px 30px}
body.shop .heyebrow{margin:0 0 13px;padding:5px 12px}
body.shop .htitle{font-size:1.68rem;line-height:1.14;margin:0 0 12px}
body.shop .hsub{font-size:1rem;line-height:1.5;margin:0 auto 18px}
body.shop .hctas{gap:8px 14px;margin:0 0 16px}
body.shop .hero .hcta{min-height:46px}
body.shop .hcta2{min-height:36px}
body.shop .htrust{gap:7px}
body.shop .htrust li{font-size:.74rem;padding:6px 10px}
body.shop .perks{padding:13px 15px;gap:3px 14px}
body.shop .perks li{padding-left:26px}
body.shop .shoptools{padding-top:10px}
}

/* ===== Guida al pagamento: due binari e la tabella delle reti (appended, last-wins) ===== */
body.shop .pick{background:var(--panel2);border-color:var(--line2)}
body.shop .picklinks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:14px 0 0}
body.shop .picklinks a{color:var(--acc);font:700 .98rem/1.35 var(--sans);text-decoration:none;
  border-bottom:1px solid rgba(28,109,132,.35)}
body.shop .picklinks a:hover{border-bottom-color:currentColor}
body.shop .trackh{margin:40px 0 6px;padding-top:4px;color:var(--ink);font:600 1.45rem/1.2 var(--sans);letter-spacing:-.01em;
  scroll-margin-top:84px}
body.shop .tracklead{margin:0 0 18px;max-width:62ch;color:var(--soft);font:500 1rem/1.6 var(--sans)}
body.shop .nets table{margin:16px 0 0;width:100%}
body.shop .nets th{text-align:left}
/* L'indirizzo del contratto e' quarantadue caratteri: su un telefono deve poter andare a capo,
   altrimenti sfonda la tabella e la pagina scorre di lato. */
body.shop .nets td,body.shop .nets th{vertical-align:top}
body.shop .celllbl{display:none}
body.shop .nets th:nth-child(2){width:48%}
body.shop .addr0x{display:block;padding:6px 9px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);
  font:600 .82rem/1.5 var(--mono);word-break:break-all;color:var(--ink)}
body.shop .warn{margin:18px 0 0;padding:14px 16px;border:1px solid #e0c79a;border-radius:10px;background:#fdf6e7;
  color:#5c4612;font:500 .95rem/1.6 var(--sans)}
body.shop .warn b{display:block;margin:0 0 4px;color:#4a3708}
@media (max-width:620px){
body.shop .trackh{margin:30px 0 6px;font-size:1.22rem}
body.shop .nets table,body.shop .nets thead,body.shop .nets tbody,body.shop .nets tr,body.shop .nets th,body.shop .nets td{display:block}
body.shop .nets thead{display:none}
body.shop .nets tbody tr{padding:12px 0;border-bottom:1px solid var(--line)}
body.shop .nets tbody th{padding:0;font-size:1rem}
body.shop .nets tbody td{padding:4px 0 0}
/* Sul telefono la tabella si impila e le intestazioni spariscono: la riga della commissione
   resterebbe un "ETH" senza spiegazione, quindi l'etichetta torna dentro la cella. */
body.shop .celllbl{display:inline;margin-right:7px;color:var(--mute);font:700 .62rem/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase}
}

/* ===== Pagine di servizio e cassa (appended, last-wins) ===== */
/* 404: il titolo compariva due volte e il titolone andava a capo anche su un monitor largo. */
body.shop .notfound{max-width:560px;margin:0 auto;padding:56px 0 40px;text-align:center}
body.shop .notfound .code{font:800 3rem/1 var(--sans);color:var(--acc);margin:0;letter-spacing:-.02em}
body.shop .notfound h1{margin:6px 0 10px;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;letter-spacing:-.015em}
body.shop .notfound .lead{color:var(--soft);margin:0 0 26px;font-size:1.05rem;line-height:1.6}
body.shop .nfacts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 22px}
body.shop .notfound .support{color:var(--mute)}
@media (max-width:560px){body.shop .notfound{padding:34px 0 28px}body.shop .notfound .code{font-size:2.3rem}}
/* I pulsanti secondari erano rimasti in maiuscolo condensato del tema generato, mentre i principali
   erano passati al carattere normale: "Shop" accanto a "TRACK ORDER" nella stessa riga. Un negozio con
   due stili di pulsante nella stessa pagina non sembra fatto da qualcuno che ci tiene. */
body.shop .btn{font-family:var(--sans);font-stretch:normal;font-weight:700;text-transform:none;letter-spacing:0;
  font-size:1rem;border-radius:10px;padding:12px 18px}
body.shop .btn.mini{padding:9px 13px;font-size:.9rem}
body.shop .btn.ghost{box-shadow:inset 0 0 0 1px var(--line2)}
body.shop .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
/* Dashboard, pagamenti: l'interruttore "accetta anche USDT" era appiccicato all'etichetta del campo
   sotto, arrivata con l'indirizzo EVM. Un modulo dove due righe si toccano sembra rotto. */
body.shop form label.switch{margin:10px 0 20px}
/* Carrello sul telefono: la riga era una griglia a quattro colonne (foto, nome, contatore, totale)
   larga piu' dello schermo, quindi il nome si stringeva a due parole per riga, il contatore finiva
   sotto e la foto restava centrata in mezzo al disordine. Su due righe ci sta tutto. */
@media (max-width:620px){
body.shop .cline{grid-template-columns:60px auto minmax(0,1fr);grid-template-areas:"thumb name name" "qty qty total";
  gap:12px;align-items:start;padding:12px}
body.shop .cline .cthumb{grid-area:thumb;width:60px;height:60px}
body.shop .cline .cname{grid-area:name}
body.shop .cline .cname b{font-size:1.05rem;line-height:1.25}
body.shop .cline form.qty{grid-area:qty;justify-self:start}
body.shop .cline .qbtn{width:34px;height:34px}
body.shop .cline .ctotal{grid-area:total;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:14px;align-self:center;font-size:1.15rem}
}

/* ===== Giro grafico: gerarchia, carattere, dati del composto (appended, last-wins) ===== */

/* Carattere. Prima la pila cominciava da Segoe UI, cioe' dal font di Windows: su Mac e Linux cadeva
   su system-ui comunque, ma per scelta di nessuno. Ora ogni sistema usa la sua faccia migliore, e i
   numeri hanno un carattere loro, perche' su questo sito i numeri sono merce: dosi, pesi molecolari,
   numeri CAS, importi da copiare cifra per cifra. */
body.shop{
  --sans:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;
  --display:var(--sans);
}
body.shop h1,body.shop h2,body.shop h3{text-wrap:balance}
body.shop p,body.shop li{text-wrap:pretty}

/* Gerarchia delle superfici. Ogni blocco della pagina era un riquadro bianco con lo stesso raggio e
   la stessa ombra: con tutto in rilievo, niente e' in rilievo. Resta sollevata la colonna che fa
   agire (prezzo, cassa, pagamento); i pannelli che spiegano diventano piatti, con un filo di bordo. */
body.shop .sheetmain>.panel,body.shop .qa,body.shop .about,body.shop .nets,body.shop .pick,body.shop .tip{
  box-shadow:none;border:1px solid var(--line)}
body.shop .rail>.panel{box-shadow:0 18px 44px -30px rgba(23,52,60,.5)}
/* La numerazione automatica delle sezioni: sulle schede di riferimento e' un documento e ha senso
   (Identificazione 01, Ricerca 02). Sulla scheda di un prodotto numerava "Cos'e'" e "Prezzi a
   quantita'" come se fossero passaggi in ordine, e non lo sono. */
body.shop .sheetmain>.panel>h2::before{content:none;margin:0}

/* Dati di identita' del composto, presi dalla scheda di riferimento. E' la cosa che questo negozio
   puo' mostrare e un negozio qualunque no, quindi e' qui che il disegno alza la voce: etichette in
   monospazio, valori grandi a cifre allineate, un filo d'accento a sinistra. */
/* padding:0 perche' nel tema generato ogni <section> ha ottanta pixel sopra e sotto: giusto per
   le fasce a tutta larghezza della prima pagina, non per un blocco dentro una colonna. */
/* ===== Hero: due colonne, la seconda e' un'etichetta da flacone (appended, last-wins) ===== */
/* Era una colonna di testo centrata su un fondo sfumato: corretta e spoglia. Adesso il testo sta a
   sinistra e a destra c'e' una targa con dentro numeri veri del catalogo — quanti composti ci sono,
   la specifica di purezza, su quante reti si paga, i tempi. Se il catalogo cambia, cambia la targa. */
/* La fascia resta a tutta larghezza, ma il contenuto sta nella stessa colonna del resto della
   pagina (--max meno i 24px di .wrap), altrimenti il titolo parte dal bordo dello schermo mentre la
   barra dei vantaggi sotto comincia molto piu' dentro, e le due cose non si allineano. */
body.shop .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:56px;
  align-items:center;padding:66px max(24px,calc((100% - 1240px)/2 + 24px)) 58px}
body.shop .hero>.hinner,body.shop .hero>.hshop{position:relative;z-index:1}
body.shop .hinner{max-width:620px;margin:0;text-align:left}
body.shop .hsub{margin:0 0 30px}
body.shop .hctas,body.shop .htrust{justify-content:flex-start}
body.shop .htitle{font-size:clamp(2rem,3.6vw,3rem)}

@media (max-width:980px){
body.shop .hero{grid-template-columns:1fr;gap:32px;justify-items:center;
  padding-left:max(24px,calc((100% - 1240px)/2 + 24px));padding-right:max(24px,calc((100% - 1240px)/2 + 24px))}
body.shop .hinner{text-align:center;max-width:620px}
body.shop .hctas,body.shop .htrust{justify-content:center}
body.shop .hshop{width:100%;max-width:420px}
}
@media (max-width:620px){
body.shop .hero{gap:22px;padding:32px 16px 28px}
/* Sul telefono le tre pillole sparicono: la targa qui sotto dice le stesse cose in forma piu' utile
   (purezza come specifica, piu' i numeri), e tenere entrambe spingeva il primo prodotto fuori da due
   schermate di scorrimento. */
body.shop .htrust{display:none}
}

/* ===== Hero: la struttura come filigrana (appended, last-wins) ===== */
/* Il fondo era una trama di puntini: poteva stare sotto qualunque cosa. Adesso e' la struttura di un
   peptide — la stessa immagine che PubChem genera e che sta sulle nostre schede di riferimento,
   servita dal nostro dominio. Invertita diventa un disegno chiaro su fondo scuro; con "screen" il
   bianco della PNG sparisce e restano solo le linee, al sette per cento: una filigrana, non
   un'illustrazione. Chi non sa cos'e' vede una texture; un chimico riconosce una catena peptidica. */
body.shop .hero::before{
  background-image:url(/img/bpc-157.png),url(/img/ghk-cu.png);
  background-repeat:no-repeat,no-repeat;
  background-position:58% 46%,-6% 112%;
  background-size:460px auto,320px auto;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:.085;
  -webkit-mask-image:none;mask-image:none;
}
@media (max-width:980px){body.shop .hero::before{background-position:-18% 24%,112% 96%;
  background-size:420px auto,260px auto;opacity:.07}}
@media (prefers-reduced-motion:no-preference){
body.shop .hstage{animation:platein .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes platein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ===== Barra di ricerca e piede (appended, last-wins) ===== */
/* Il campo di ricerca era una pillola completamente arrotondata accanto alle linguette squadrate
   delle categorie: due forme diverse nella stessa barra. Adesso e' la riga d'intestazione di uno
   schedario — squadrato, con la lente a sinistra e la nota sulla spedizione a destra. */
body.shop .shoptools .finder input[type=search]{height:44px;border-radius:5px;padding-left:40px;
  border-color:var(--line2);font-size:.95rem;background:#fff}
body.shop .findicon{position:absolute;left:13px;width:17px;height:17px;color:var(--mute);pointer-events:none}
body.shop .shoptools .finder input[type=search]:focus{border-color:var(--acc);outline:0;
  box-shadow:0 0 0 3px rgba(28,109,132,.12)}
body.shop .shoptools{padding:14px 0 12px;box-shadow:0 1px 0 var(--line),0 10px 18px -16px rgba(23,52,60,.5)}
/* La nota sulla spedizione stava sopra la barra, staccata da tutto: ora chiude la riga dei reparti. */
body.shop .wrap.pad>.ship{margin:-4px 0 16px;color:var(--mute)}

/* Piede: era una fila di colonne senza gerarchia. Un filo d'accento in cima, le intestazioni in
   monospazio come le etichette del resto del sito, e la nota legale distinta dai link. */
body.shop footer{border-top:3px solid var(--acc);background:#fff}
body.shop footer h4{color:var(--mute);font:700 .62rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 14px}
body.shop footer .fcols a{color:var(--soft);text-decoration:none}
body.shop footer .fcols a:hover{color:var(--acc)}
body.shop footer .ftag{color:var(--mute);font-size:.9rem;line-height:1.6}
/* Il filo sopra la nota legale va messo sotto le colonne, non sul paragrafo: il paragrafo ha la sua
   misura di lettura e il filo si fermava a meta' pagina, come un tratto lasciato a meta'. */
body.shop footer .fcols{padding-bottom:26px;border-bottom:1px solid var(--line)}
body.shop footer .legal{margin:22px 0 0;padding:0;border-top:0;max-width:92ch;
  color:var(--mute);font:500 .78rem/1.65 var(--sans)}

/* ===== Fasce della prima pagina (appended, last-wins) ===== */
/* "Quality and documentation" e "How it works" erano due elenchi puntati su fondo bianco. Stessa
   lingua del resto adesso: etichetta in monospazio sopra, filo di separazione, testo a larghezza
   leggibile. */
body.shop .quality{border-top:1px solid var(--line);background:#fff}
body.shop .qh{margin:0 0 6px;color:var(--ink);font:600 1.45rem/1.2 var(--sans);letter-spacing:-.015em}
body.shop .ql{margin:0 0 26px;max-width:62ch;color:var(--soft);font-size:1.02rem;line-height:1.6}
body.shop .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px 28px;
  margin:0;padding:0;list-style:none}
/* Le quattro voci erano riquadri arrotondati con un bollino di spunta: la riga d'accento in cima
   tagliava gli angoli e sembrava un errore. Qui vanno piatte — non sono oggetti separati, sono le
   quattro colonne di una specifica — quindi via riquadro, sfondo, angoli e bollino. */
body.shop .qgrid li{position:static;padding:14px 0 0;border:0;border-top:2px solid var(--acc);
  border-radius:0;background:none}
body.shop .qgrid li::before{content:none;display:none}
body.shop .qgrid h3{margin:0 0 7px;color:var(--ink);font:600 1rem/1.3 var(--sans);letter-spacing:-.005em}
body.shop .qgrid p{margin:0;color:var(--soft);font-size:.93rem;line-height:1.6}
body.shop .hiw{border-top:1px solid var(--line)}
/* Era centrato e in maiuscolo in monospazio, mentre la fascia sopra ha il titolo a sinistra in tondo:
   due fasce vicine con due voci diverse. */
body.shop .hiwh{margin:0 0 26px;text-align:left;text-transform:none;color:var(--ink);
  font:600 1.45rem/1.2 var(--sans);letter-spacing:-.015em}
/* Le due fasce respiravano ottanta pixel sopra e sotto: con poco testo dentro sembrava pagina vuota. */
body.shop .quality,body.shop .hiw{padding:54px 0 56px}
/* Il .wrap dentro la fascia ci metteva del suo altri cinquanta pixel sopra e sotto, e si sommavano:
   centodieci pixel di vuoto prima del titolo. Lo spazio lo decide la fascia, non il contenitore. */
body.shop .quality>.wrap,body.shop .hiw>.wrap{padding-top:0;padding-bottom:0}
@media (max-width:560px){body.shop .quality,body.shop .hiw{padding:34px 0 36px}}
body.shop .hiwsteps .hn{width:34px;height:34px;border-radius:5px;background:var(--ink);color:#fff;
  font:600 .9rem var(--mono);margin:0 0 13px}
body.shop .hiwsteps h3{font-size:1.02rem;letter-spacing:-.005em}
body.shop .hiwsteps p{font-size:.95rem}
@media (max-width:560px){body.shop .qh,body.shop .hiwh{font-size:1.2rem}body.shop .qgrid{gap:20px}}

/* ===== Catalogo: voce da catalogo clinico (appended, last-wins) ===== */
/* Titolo di reparto: era una scritta minuscola in monospazio accanto alle schede, si perdeva. Adesso
   e' l'intestazione di un capitolo di schedario — nome, quante schede, e un filo che arriva a fine
   colonna. */
body.shop .area{margin:0 0 42px}
body.shop .area>h2{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;padding:0 0 11px;
  border-bottom:1px solid var(--line);color:var(--ink);font:600 1.2rem/1.2 var(--sans);
  letter-spacing:-.012em;text-transform:none}
body.shop .area>h2::after{content:"";flex:1 1 auto}
body.shop .acount{order:3;flex:none;color:var(--mute);font:600 .74rem/1 var(--mono);
  letter-spacing:.1em;font-variant-numeric:tabular-nums}
@media (max-width:560px){body.shop .area{margin:0 0 30px}body.shop .area>h2{font-size:1.05rem;margin:0 0 14px}}

/* Il marchio si chiama "clinical catalog" e il catalogo sembrava un negozio qualunque: angoli
   arrotondati ovunque, un'etichetta "SUPPLEMENT" uguale su ogni scheda, il prezzo gridato. La scheda
   adesso e' costruita come l'etichetta di un flacone: categoria d'uso in testa, nome, descrizione, la
   riga di specifica (formato, contenuto) separata da un filo, prezzo in fondo con le cifre allineate. */
body.shop a.card{border-radius:6px;box-shadow:none;border-color:var(--line)}
body.shop a.card:hover{transform:translateY(-2px);border-color:var(--acc);
  box-shadow:0 18px 40px -28px rgba(23,52,60,.5)}
body.shop .card .plate{border-radius:0;border-bottom:1px solid var(--line)}
body.shop .card .body{display:flex;flex-direction:column;gap:0;padding:14px 15px 13px}
body.shop .card .kicker{margin:0 0 7px;font-size:.6rem;letter-spacing:.18em}
body.shop .card b{margin:0;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
body.shop .card .sub{margin:5px 0 0;font-size:.86rem;line-height:1.5}
/* Riga di specifica: valori in monospazio separati da un divisorio sottile, come su una scheda
   tecnica. Prima era una riga di testo con dei puntini in mezzo. */
body.shop .card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:11px 0 0;
  padding:9px 0 0;border-top:1px solid var(--line);font:600 .72rem/1.5 var(--mono);color:var(--mute)}
body.shop .card .meta .spec+.spec::before{content:"";display:inline-block;width:1px;height:.8em;
  margin-right:10px;vertical-align:-.05em;background:var(--line2)}
body.shop .card .buyline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:auto 0 0;
  padding:11px 0 0}
body.shop .card .price{margin:0;font-size:1.35rem;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums lining-nums}
body.shop .card .from{margin:0;padding:0;border-radius:0;background:none;color:var(--mute);
  font:600 .74rem/1.4 var(--mono)}
/* Le pillole delle categorie: squadrate come le linguette di uno schedario, non come i chip di una app. */
body.shop .uses .use{border-radius:5px;font:600 .88rem/1 var(--sans);letter-spacing:0;padding:10px 14px}
body.shop .uses .use small{font-family:var(--mono);font-size:.7rem}
@media (max-width:560px){
body.shop a.card{border-radius:5px}
body.shop .card .body{padding:11px 11px 12px}
body.shop .card b{font-size:.95rem}
body.shop .card .sub{font-size:.79rem}
body.shop .card .meta{font-size:.66rem;margin:9px 0 0;padding:7px 0 0;gap:0 8px}
body.shop .card .meta .spec+.spec::before{margin-right:8px}
body.shop .card .price{font-size:1.12rem}
body.shop .card .from{font-size:.66rem}
}
body.shop .perks{align-items:flex-start}
/* Riga su chi vende, in coda a Termini e Privacy: c'e' solo se ragione sociale, sede e legge sono
   configurate (vedi legal_entity()). */
body.shop .seller{margin:4px 0 0;padding:16px 18px;border-left:3px solid var(--line2);
  color:var(--soft);font:500 .95rem/1.65 var(--sans)}
body.shop .refwrap{margin:0;padding:0}
body.shop .refh{margin:0 0 12px;color:var(--mute);font:700 .66rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase}
body.shop .refgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
body.shop .refcard{padding:16px 18px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:4px;background:var(--panel)}
body.shop .refname{display:block;color:var(--ink);font:600 1.08rem/1.25 var(--sans);text-decoration:none;
  letter-spacing:-.01em}
body.shop .refname:hover{color:var(--acc)}
body.shop .reffacts{display:grid;gap:7px;margin:12px 0 12px;padding:12px 0 0;border-top:1px solid var(--line)}
body.shop .reffacts>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
body.shop .reffacts dt{flex:none;min-width:9.5ch;color:var(--mute);font:700 .6rem/1.6 var(--mono);
  letter-spacing:.12em;text-transform:uppercase}
body.shop .reffacts dd{margin:0;color:var(--ink);font:600 .98rem/1.4 var(--mono);
  font-variant-numeric:tabular-nums lining-nums}
body.shop .reffacts sub{font-size:.68em;line-height:0}
/* La riga che dice "composto parente": compare solo quando il flacone non e' quella molecola, e
   al posto dei numeri. Sta sotto il nome perche' va letta prima del link. */
body.shop .refnear{margin:6px 0 0;color:var(--mute);font:500 .82rem/1.45 var(--sans)}
body.shop .refmore{color:var(--acc);font:600 .86rem/1 var(--sans);text-decoration:none;
  border-bottom:1px solid rgba(28,109,132,.3)}
body.shop .refmore:hover{border-bottom-color:currentColor}
/* Ritmo della colonna: i blocchi si distanziavano con i margini propri, che fra pannello e sezione
   si sommavano in un buco di ottanta pixel. Una griglia con gap da' la stessa aria a tutti. */
body.shop .sheetmain{display:grid;gap:20px;align-content:start}
body.shop .sheetmain>*{margin:0}
/* Schede dei composti alla stessa altezza, con il link in fondo allineato: una ha il numero CAS e
   l'altra no, e i due link finivano a quote diverse. */
body.shop .refcard{display:flex;flex-direction:column}
body.shop .refcard .refmore{margin-top:auto;align-self:start}
@media (max-width:560px){body.shop .refgrid{grid-template-columns:1fr}
body.shop .refcard{padding:14px 15px 12px}}
/* Cassa sul telefono: il riepilogo sta sopra il modulo (giusto, il totale va visto prima), ma le
   cinque righe delle garanzie spingevano il primo campo a ottocento pixel di scorrimento. */
@media (max-width:980px){
body.shop .checkout ~ .rail .guarantees{margin:14px 0 0;padding:14px 0 0;gap:7px}
body.shop .checkout ~ .rail .guarantees li{gap:8px;font-size:.82rem;line-height:1.38}
body.shop .checkout ~ .rail .guarantees li::before{width:16px;height:16px;font-size:.62rem}
}

/* ── Certificato di analisi ──────────────────────────────────────────────────
   Un documento, non un adesivo: il pannello ha lo stesso bordo dei dati di riferimento, e il
   distintivo sulla cartolina e' la stessa pastiglia delle altre, in verde, perche' qui il verde
   significa "il file c'e'" e non "fidati". */
body.shop .pill.coa{border-color:rgba(26,122,88,.4);background:rgba(26,122,88,.08);color:#1a7a58}
body.shop .card .meta{flex-wrap:wrap}
body.shop .panel.coa .facts{margin:14px 0 0}
body.shop .coalinks{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
body.shop .coalinks .btn{margin:0}
/* La riga del certificato nelle garanzie: resta una voce dell'elenco, ma e' un link e si vede. */
body.shop .guarantees li.haspdf{color:var(--ink)}
body.shop .guarantees li.haspdf::before{background:rgba(26,122,88,.14);color:#1a7a58}
body.shop .guarantees li.haspdf a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
body.shop .guarantees li.haspdf a:hover{color:var(--acc)}
/* La nota sotto la foto: piccola, sopra il fondo chiaro della piastra, mai sopra la foto. */
body.shop .shot figcaption{padding:10px 14px 11px;border-top:1px solid var(--line);background:var(--panel2);color:var(--mute);font:500 .76rem/1.4 var(--sans)}
/* Ricerca per lotto: un campo e un bottone sulla stessa riga, il campo con le cifre allineate. */
body.shop .batchform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;max-width:560px;margin:0 0 24px}
body.shop .batchform label{flex:1 1 220px;margin:0;font:700 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
body.shop .batchform input{font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em}
body.shop .batchform .btn{flex:none;margin:0}
body.shop .verifyresult{margin:0 0 18px;font:700 .95rem/1.4 var(--sans)}
body.shop p.good{color:#1a7a58}
body.shop p.bad{color:#9b2c2c}
body.shop h2.sub{margin:30px 0 14px;font:700 1.05rem/1.3 var(--sans);color:var(--soft)}
body.shop .panel.coafound{margin:0 0 14px}
body.shop .panel.coafound h2{margin:0}
/* Dashboard: il link al certificato caricato, sopra il campo per sostituirlo. */
body.shop .pform .have{margin:0 0 12px;font:600 .88rem/1.4 var(--sans)}
body.shop .pform .have a{color:var(--acc)}
@media (max-width:560px){body.shop .batchform{gap:10px}body.shop .batchform .btn{width:100%}}

/* ── Fascia "controlla un lotto" sulla prima pagina ──────────────────────────
   In alto il campo per cercare un lotto, sotto i certificati veri letti dal database. */
/* Un riquadro blu arrotondato appoggiato sullo sfondo chiaro, gemello della testata: stessi
   margini, stessi angoli, stesso fondo. Sta dopo i prodotti, e lo spazio sotto lo stacca dalla
   sezione bianca "Qualita' e documentazione". Prima era una fascia a tutta
   larghezza attaccata sotto la testata: ai lati spuntavano gli angoli chiari della testata e i
   due blu non combaciavano (proprietario: "lo sfondo e' diverso"). */
body.shop .vband{margin:14px 14px 28px;padding:56px 0;border-radius:26px;color:#fff;overflow:hidden;background:
  radial-gradient(1000px 560px at 70% -12%,rgba(36,184,232,.3),transparent 62%),
  radial-gradient(760px 520px at 4% 118%,rgba(0,128,186,.45),transparent 60%),
  linear-gradient(155deg,#00375a 0%,#004d77 50%,#003b61 100%)}
/* La fascia divide in due il blocco bianco: i due wrap attorno non devono sommare le loro
   spaziature a quelle della fascia. */
body.shop main>.wrap.pad.nobot{padding-bottom:28px}
body.shop main>.wrap.pad.notop{padding-top:28px}
body.shop .vbox{padding:0}
body.shop .vtop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 48px;align-items:end}
body.shop .vbox h2{margin:0 0 14px;color:#fff;font:700 clamp(1.6rem,3vw,2.5rem)/1.15 var(--sans);letter-spacing:-.02em;max-width:22ch}
body.shop .vlead{margin:0;max-width:52ch;color:#c9e2ee;font:400 1rem/1.6 var(--sans)}
body.shop .vform{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
body.shop .vform input{flex:1 1 220px;width:auto;margin:0;padding:13px 16px;border:1px solid rgba(255,255,255,.3);border-radius:12px;
  background:rgba(255,255,255,.07);color:#fff;font:600 1rem/1.3 var(--sans);font-variant-numeric:tabular-nums lining-nums}
body.shop .vform input::placeholder{color:#9cc3d4;font-weight:500}
body.shop .vform input:focus{outline:2px solid #5fd6f2;outline-offset:1px;border-color:transparent}
body.shop .vform .btn{flex:none;margin:0;padding:13px 26px;border-radius:12px;background:#fff;color:#00375a;border-color:#fff}
body.shop .vform .btn:hover{background:#e6f5fb;color:#00375a}
body.shop .vhint{margin:0;color:#9cc3d4;font:400 .84rem/1.5 var(--sans)}
body.shop .vcount{margin:34px 0 14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);color:#5fd6f2;font:700 .95rem/1.2 var(--sans)}
body.shop .vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
body.shop .vgrid li{display:flex;flex-direction:column;min-width:0;padding:20px 18px;border:1px solid rgba(255,255,255,.3);border-radius:14px}
body.shop .vic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0 0 14px;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff}
body.shop .vic svg{width:20px;height:20px}
body.shop .vgrid h3{margin:0 0 6px;font:700 1.02rem/1.3 var(--sans)}
body.shop .vgrid h3 a{color:#fff;text-decoration:none;overflow-wrap:anywhere}
body.shop .vgrid h3 a:hover{text-decoration:underline}
body.shop .vmeta{margin:0 0 14px;color:#c9e2ee;font:400 .88rem/1.5 var(--sans);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
body.shop .vopen{margin-top:auto;color:#5fd6f2;font:700 .88rem/1.35 var(--sans);text-decoration:none}
body.shop .vopen:hover{color:#fff}
body.shop .vopen small{display:block;margin-top:3px;color:#9cc3d4;font:400 .78rem/1.4 var(--sans)}
body.shop .vgo{margin:22px 0 0;text-align:right}
body.shop .vgo a{color:#fff;font:700 .95rem/1.2 var(--sans);text-decoration:none}
body.shop .vgo a:hover{color:#5fd6f2}
/* La terza voce della testata quando un certificato c'e' davvero: un link, non una promessa. */
body.shop .htrust li.go{border-color:rgba(143,211,207,.5);background:rgba(143,211,207,.1)}
body.shop .htrust li.go a{color:#fff;text-decoration:none}
body.shop .htrust li.go a:hover{color:#8fd3cf}
@media (max-width:980px){body.shop .vband{margin:10px 10px 20px;border-radius:20px;padding:44px 0}
  body.shop .vtop{grid-template-columns:1fr}
  body.shop .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sul telefono quattro schede; gli altri certificati sono a un tocco con "Vedi tutti". */
@media (max-width:620px){body.shop .vband{margin:8px 8px 16px;border-radius:16px;padding:32px 0}}
@media (max-width:560px){
  body.shop .vgrid{grid-template-columns:1fr;gap:10px}
  body.shop .vgrid li:nth-child(n+5){display:none}
  body.shop .vgrid li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;padding:16px}
  body.shop .vic{grid-row:1 / span 3;margin:0}
  body.shop .vmeta{margin-bottom:8px}
  body.shop .vform .btn{width:100%}
  body.shop .vgo{text-align:left}}
/* Il dominio del referto: in chiaro accanto al link, perche' il punto e' che NON e' il nostro. */
body.shop .coalinks + .vhost{display:block;margin:10px 0 0;color:var(--mute);font:500 .78rem/1.45 var(--sans)}
body.shop .coalinks + .vhost b{color:var(--soft);font:600 .78rem/1.45 var(--mono);letter-spacing:.02em}
/* ── Analitiche: l'imbuto ────────────────────────────────────────────────────
   Una riga per passo, la barra lunga quanto la quota di chi e' arrivato fin li'. L'ultima riga
   conta ordini e non persone, quindi e' segnata diversamente: la nota sotto lo dice a parole, il
   bordo tratteggiato lo dice a colpo d'occhio. */
body.shop .funnel{list-style:none;margin:6px 0 0;padding:0;counter-reset:f}
body.shop .fstep{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) auto 46px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
body.shop .fstep:last-child{border-bottom:0}
body.shop .fstep.orders{margin-top:4px;border-top:1px dashed var(--line2);border-bottom:0;padding-top:14px}
body.shop .fl{color:var(--soft);font:600 .9rem/1.3 var(--sans)}
body.shop .fbar{display:block;height:10px;border-radius:999px;background:var(--panel2);overflow:hidden}
body.shop .ff{display:block;height:100%;border-radius:999px;background:var(--acc)}
body.shop .fstep.orders .ff{background:#1a7a58}
body.shop .fv{color:var(--ink);font:600 1.05rem/1 var(--sans);font-variant-numeric:tabular-nums lining-nums;text-align:right}
body.shop .fp{color:var(--mute);font:600 .8rem/1 var(--mono);text-align:right}
body.shop .anfunnel .anhint{margin:14px 0 0}
/* La freccia del confronto fra due periodi. */
body.shop .vs{display:inline-block;margin-left:10px;color:var(--mute);font:500 .78rem/1.4 var(--sans);text-transform:none;letter-spacing:0}
body.shop .dl{font:700 .78rem/1.4 var(--mono)}
body.shop .dl.up{color:#1a7a58}
body.shop .dl.down{color:#9b2c2c}
body.shop .dl.flat{color:var(--mute)}
@media (max-width:620px){body.shop .fstep{grid-template-columns:1fr auto 44px;gap:8px 12px}
body.shop .fbar{grid-column:1/-1;grid-row:2}}
/* L'elenco delle analisi di un lotto: una riga per referto, come le voci di un rapporto.
   Etichetta a sinistra, valore misurato al centro, link a destra col suo dominio sotto. */
body.shop .coareps{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
body.shop .coareps li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
body.shop .coareps .rl{color:var(--mute);font:700 .68rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
body.shop .coareps .rv{color:var(--ink);font:600 1rem/1.35 var(--sans);font-variant-numeric:tabular-nums lining-nums}
body.shop .coareps .ro{grid-column:3;text-align:right;color:var(--acc);font:700 .86rem/1.3 var(--sans);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
body.shop .coareps .ro small{display:block;margin-top:3px;color:var(--mute);font:500 .7rem/1.3 var(--mono);letter-spacing:.03em;text-decoration:none}
body.shop .panel.coa .hint{margin:12px 0 0}
@media (max-width:620px){body.shop .coareps li{grid-template-columns:1fr auto}
body.shop .coareps .rl{grid-column:1/-1}
body.shop .coareps .ro{grid-column:2;grid-row:2}}
/* Dashboard, tabella dell'importazione: le analisi tornate per un lotto, una pastiglia per riga. */
body.shop .impt .rep{display:block;color:var(--soft);font:600 .8rem/1.5 var(--sans)}
body.shop .impt .rep b{color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
body.shop .impt select{margin:0;padding:8px 10px;font-size:.9rem}
body.shop .impt td small{color:var(--mute);font:500 .75rem var(--mono)}
body.shop .funnel .ff.w0{width:0%}body.shop .funnel .ff.w5{width:5%}body.shop .funnel .ff.w10{width:10%}body.shop .funnel .ff.w15{width:15%}body.shop .funnel .ff.w20{width:20%}body.shop .funnel .ff.w25{width:25%}body.shop .funnel .ff.w30{width:30%}body.shop .funnel .ff.w35{width:35%}body.shop .funnel .ff.w40{width:40%}body.shop .funnel .ff.w45{width:45%}body.shop .funnel .ff.w50{width:50%}body.shop .funnel .ff.w55{width:55%}body.shop .funnel .ff.w60{width:60%}body.shop .funnel .ff.w65{width:65%}body.shop .funnel .ff.w70{width:70%}body.shop .funnel .ff.w75{width:75%}body.shop .funnel .ff.w80{width:80%}body.shop .funnel .ff.w85{width:85%}body.shop .funnel .ff.w90{width:90%}body.shop .funnel .ff.w95{width:95%}body.shop .funnel .ff.w100{width:100%}
/* ===== Hero: la vetrina comprabile, e il flacone che si inclina (appended, last-wins) ===== */
/* A destra c'era una targa con quattro numeri del catalogo. Adesso c'e' un prodotto vero, con i
   suoi due pulsanti: dei 236 visitatori del mese 67 avevano aperto una scheda, cioe' la prima
   pagina chiedeva di cercare prima di poter comprare. La pedana e' chiara come l'etichetta di un
   flacone, il corpo e' il banco della cassa, e le frecce in fondo cambiano prodotto con un link. */
/* Senza media query questa riga vincerebbe anche sul telefono — e' scritta dopo quella che li'
   mette una colonna sola — e la hero resterebbe a due colonne dentro 414 pixel: la scheda esce
   dallo schermo e tutta la pagina scorre di lato. E' successo davvero, in produzione. */
@media (min-width:981px){body.shop .hero{grid-template-columns:minmax(0,1fr) minmax(0,380px)}}
body.shop .hero>.hinner,body.shop .hero>.hshop{position:relative;z-index:1}
body.shop .hshop{margin:0;border-radius:12px;background:#f7fafb;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.65)}
/* La parola in evidenza nel titolo: stesso peso, colore d'accento chiaro sul fondo scuro. */
body.shop .hem{font-style:normal;color:#8fe3f0}
/* La pedana. `perspective` sta qui e la rotazione sul flacone: cosi' il riquadro resta fermo e
   dentro si muove solo l'oggetto, come quando si gira un flacone in mano. */
body.shop .hstage{display:block;position:relative;padding:20px 20px 8px;text-decoration:none;
  background:linear-gradient(168deg,#fff 0%,#eef4f6 100%);perspective:900px}
body.shop .hsshot{display:block;position:relative;transform-style:preserve-3d;will-change:transform;
  transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg))
            translateY(calc(var(--lift,0) * -7px)) scale(calc(1 + var(--lift,0) * .035));
  transition:transform .18s cubic-bezier(.2,.7,.3,1)}
body.shop .hsshot img,body.shop .hsshot svg{display:block;width:100%;height:210px;margin:0 auto;
  object-fit:contain;filter:drop-shadow(0 18px 22px rgba(12,42,51,.18))}
body.shop .hsshot svg{color:#9fb6bd;padding:18px 0}
/* Il riflesso che segue il cursore: esiste solo dove c'e' un mouse e dove il JavaScript gira. */
body.shop .hsglow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.85),transparent 72%)}
body.shop .hstage.is-live:hover .hsglow{opacity:1}
/* Senza JavaScript il flacone si alza comunque al passaggio: quello e' CSS e non si puo' rompere. */
body.shop .hstage:not(.is-live):hover .hsshot{transform:translateY(-7px) scale(1.035)}
body.shop .hsbody{padding:16px 20px 18px;border-top:1px solid #dbe6e9;background:#f7fafb}
body.shop .hskicker{margin:0 0 5px;color:var(--acc);font:700 .58rem/1 var(--mono);letter-spacing:.17em;
  text-transform:uppercase}
body.shop .hsname{margin:0 0 10px;font:700 1.22rem/1.25 var(--sans);letter-spacing:-.01em}
body.shop .hsname a{color:var(--ink);text-decoration:none}
body.shop .hsname a:hover{color:var(--acc)}
body.shop .hsprice{margin:0;color:var(--ink);font:500 .9rem/1.2 var(--sans)}
body.shop .hsprice b{font:700 1.65rem/1.1 var(--sans);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums}
body.shop .hsprice small{color:#6c8289;font:600 .78rem var(--sans)}
body.shop .hspack{margin:4px 0 0;color:#6c8289;font:600 .82rem/1.4 var(--mono)}
body.shop .hsdoses{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
body.shop .hsdoses .dose{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;
  border:1px solid #cfdde1;border-radius:8px;background:#fff;color:var(--ink);
  font:600 .8rem var(--mono);text-decoration:none}
body.shop .hsdoses .dose:hover{border-color:var(--acc);color:var(--acc)}
body.shop .hsdoses .dose.on{border-color:var(--acc);background:var(--acc);color:#fff}
body.shop .hsbuy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
body.shop .hsbuy .btn{min-height:44px;padding:0 10px;font-size:.92rem}
body.shop .hsfree{margin:10px 0 0;color:#2b6d5f;font:700 .8rem/1.4 var(--sans)}
body.shop .hssee{margin:8px 0 0}
body.shop .hssee a{color:var(--acc);font:700 .82rem/1.4 var(--sans);text-decoration:none;
  border-bottom:1px solid rgba(28,109,132,.3)}
body.shop .hssee a:hover{border-bottom-color:currentColor}
body.shop .hsnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;
  padding:8px 12px;border-top:1px solid #dbe6e9;background:#fff}
body.shop .hsnav a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid #cfdde1;border-radius:9px;color:var(--ink);font-size:1rem;text-decoration:none}
body.shop .hsnav a:hover{border-color:var(--acc);color:var(--acc)}
body.shop .hsnav span{color:#6c8289;font:700 .58rem/1.3 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;text-align:center}
/* Le miniature: quadrati piccoli, quello aperto col filo d'accento. Sono link, quindi hanno un
   bersaglio da dito di 44px anche se la foto dentro e' piu' piccola. */
body.shop .hsthumbs{display:flex;gap:6px;padding:0 12px 12px;background:#fff;overflow-x:auto;
  scrollbar-width:none}
body.shop .hsthumbs::-webkit-scrollbar{display:none}
body.shop .hsthumb{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:3px;border:1px solid #dbe6e9;border-radius:9px;background:#f7fafb}
body.shop .hsthumb img,body.shop .hsthumb svg{display:block;width:100%;height:100%;object-fit:contain}
body.shop .hsthumb svg{color:#9fb6bd}
body.shop .hsthumb:hover{border-color:var(--acc)}
body.shop .hsthumb.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
@media (max-width:980px){body.shop .hshop{width:100%;max-width:420px}}
@media (max-width:620px){
body.shop .hsshot img,body.shop .hsshot svg{height:170px}
body.shop .hsname{font-size:1.12rem}
body.shop .hsprice b{font-size:1.45rem}
body.shop .hsbody{padding:14px 16px 16px}
body.shop .hstage{padding:16px 16px 6px}
}

/* ===== Hero: il prodotto grande, e la cassa su vetro (appended, last-wins) ===== */
/* Guardando la nostra hero accanto a quella dei due concorrenti, la differenza non era il
   contenuto ma la scala: da loro il flacone e' il protagonista — mezzo schermo — e la cassa gli
   galleggia accanto; da noi era una cartolina da duecento pixel dentro una scatola bianca. Qui il
   flacone esce dalla scatola e sta sul fondo della hero, con un alone dietro; la cassa diventa una
   lastra di vetro sopra lo stesso fondo; le miniature portano il nome, perche' sei quadratini con
   lo stesso flacone bianco dentro erano sei quadratini uguali. */
/* La colonna piu' larga solo da tablet in su: una media query non aggiunge peso, e una regola
   scritta dopo senza media query vincerebbe anche sul telefono, dove la hero deve stare in una
   colonna sola. (E' quello che e' successo al primo colpo: la scheda usciva dallo schermo.) */
@media (min-width:981px){body.shop .hero{grid-template-columns:minmax(0,1fr) minmax(0,470px)}}
body.shop .hshop{display:grid;gap:0;margin:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
body.shop .hstage{display:block;position:relative;padding:0;background:none;perspective:1100px;
  text-decoration:none}
/* Le foto del fornitore sono flaconi su fondo bianco, non ritagli trasparenti: appoggiate cosi' sul
   gradiente sarebbero un rettangolo bianco. Una maschera ellittica ne sfuma i bordi, e quello che
   resta e' la luce di un banco fotografico intorno al flacone. */
body.shop .hsshot img,body.shop .hsshot svg{width:100%;height:clamp(210px,23vw,300px);margin:0 auto;
  object-fit:contain;filter:drop-shadow(0 26px 26px rgba(4,22,28,.4))}
body.shop .hsshot img{-webkit-mask-image:radial-gradient(50% 47% at 50% 47%,#000 30%,transparent 80%);
  mask-image:radial-gradient(50% 47% at 50% 47%,#000 30%,transparent 80%)}
body.shop .hsshot svg{color:#9fc6d1;padding:10px 0}
/* L'alone: una luce dietro il flacone, non un riquadro. Segue il cursore quando c'e' il mouse. */
/* Dentro i bordi della pedana: sporgendo anche di due pixel farebbe comparire una barra di
   scorrimento orizzontale sul telefono. La sfumatura si allarga, il riquadro no. */
body.shop .hsglow{position:absolute;inset:0;pointer-events:none;opacity:.55;
  transition:opacity .25s;border-radius:50%;
  background:radial-gradient(72% 64% at var(--gx,50%) var(--gy,46%),rgba(143,227,240,.42),transparent 72%)}
body.shop .hstage.is-live:hover .hsglow{opacity:.95}
/* La cassa: vetro sul gradiente, non una scatola bianca appoggiata sopra. Sale sotto il flacone. */
body.shop .hscard{position:relative;text-align:left;margin:-28px 0 0;padding:16px 20px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.085);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
body.shop .hsbadge{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:5px 11px;
  border-radius:999px;border:1px solid rgba(143,227,240,.35);background:rgba(143,227,240,.1);
  color:#9fe6f2;font:700 .58rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}
body.shop .hsbadge::before{content:"";width:5px;height:5px;border-radius:50%;background:#5fd0bf;
  box-shadow:0 0 0 3px rgba(95,208,191,.25)}
body.shop .hscard .hskicker{margin:0 0 4px;color:#8fd3e0;font:700 .58rem/1 var(--mono);
  letter-spacing:.17em;text-transform:uppercase}
body.shop .hscard .hsname{margin:0 0 10px;font:700 1.3rem/1.22 var(--sans);letter-spacing:-.015em}
body.shop .hscard .hsname a{color:#fff;text-decoration:none}
body.shop .hscard .hsname a:hover{color:#9fe6f2}
body.shop .hscard .hsprice{margin:0;color:#fff;font:500 .9rem/1.2 var(--sans)}
body.shop .hscard .hsprice b{font:700 1.9rem/1.05 var(--sans);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums}
body.shop .hscard .hsprice small{color:#b9d7de;font:600 .8rem var(--sans)}
body.shop .hscard .hspack{margin:5px 0 0;color:#b9d7de;font:600 .82rem/1.4 var(--mono)}
body.shop .hscard .hsdoses{margin:13px 0 0}
body.shop .hscard .hsdoses .dose{min-height:32px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#eaf6f8}
body.shop .hscard .hsdoses .dose:hover{border-color:#8fe3f0;color:#fff}
body.shop .hscard .hsdoses .dose.on{border-color:#8fe3f0;background:#8fe3f0;color:#0c2a33}
body.shop .hscard .hsbuy{margin:15px 0 0}
body.shop .hscard .hsbuy .btn.main{background:#fff;color:var(--ink);border-color:#fff}
body.shop .hscard .hsbuy .btn.main:hover{background:#dff1f5}
body.shop .hscard .hsbuy .btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
body.shop .hscard .hsbuy .btn.ghost:hover{border-color:#fff}
body.shop .hscard .hsfree{margin:11px 0 0;color:#7fe0cd;font:700 .82rem/1.4 var(--sans)}
body.shop .hscard .hssee{margin:7px 0 0}
body.shop .hscard .hssee a{color:#9fe6f2;border-bottom-color:rgba(159,230,242,.35)}
/* Frecce e miniature sul fondo scuro, fuori da ogni scatola. */
body.shop .hsnav{margin:14px 0 0;padding:0;border:0;background:none}
body.shop .hsnav a{width:36px;height:36px;border-color:rgba(255,255,255,.22);color:#eaf6f8;
  background:rgba(255,255,255,.06)}
body.shop .hsnav a:hover{border-color:#8fe3f0;color:#fff}
body.shop .hsnav span{color:#9ec4ce}
body.shop .hsthumbs{gap:8px;margin:10px 0 0;padding:0;background:none}
body.shop .hsthumb{flex-direction:column;gap:3px;width:68px;height:auto;padding:5px 3px 6px;
  border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
body.shop .hsthumb img,body.shop .hsthumb svg{width:40px;height:40px}
body.shop .hsthumb svg{color:#9fc6d1}
body.shop .hstname{display:block;max-width:100%;overflow:hidden;color:#c6dfe5;
  font:600 .56rem/1.25 var(--mono);text-align:center;text-overflow:ellipsis;white-space:nowrap}
body.shop .hsthumb.on{border-color:#8fe3f0;box-shadow:none;background:rgba(143,227,240,.14)}
body.shop .hsthumb.on .hstname{color:#fff}
@media (max-width:980px){
body.shop .hshop{width:100%;max-width:470px}
body.shop .hsshot img,body.shop .hsshot svg{height:250px}
}
@media (max-width:620px){
body.shop .hsshot img,body.shop .hsshot svg{height:190px}
body.shop .hscard{margin-top:-14px;padding:14px 16px 16px}
body.shop .hscard .hsname{font-size:1.16rem}
body.shop .hscard .hsprice b{font-size:1.6rem}
}

/* ===== Hero: il flacone scontornato, grande, come la loro (appended, last-wins) ===== */
/* Messe le due hero una accanto all'altra: da loro il flacone e' alto mezzo schermo, scontornato,
   leggermente girato, e la fascia e' un pannello con gli angoli tondi dentro la pagina. Da noi era
   una foto piccola dentro una nuvola bianca su una fascia che tagliava lo schermo da bordo a bordo.
   Qui: pannello con gli angoli tondi, flacone grande che sborda in basso, scheda piu' larga e con i
   caratteri piu' grandi, miniature leggibili. */
@media (min-width:981px){
body.shop .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px;align-items:center;
  padding:52px max(24px,calc((100% - 1240px)/2 + 24px)) 0}
body.shop .hshop{align-self:end}
}
body.shop .hero{margin:14px 14px 0;border-radius:26px;border-bottom:0;overflow:hidden}
body.shop .htitle{font-size:clamp(2.1rem,4vw,3.3rem)}
/* La pedana: nessun fondo, nessuna maschera. Il flacone sta sul gradiente e sborda in basso, come
   il loro, con la sua ombra di contatto. Fino a quando il ritaglio non e' pronto resta la foto
   intera: se il browser non sa ritagliare, si vede una foto su fondo bianco, non un buco. */
body.shop .hstage{display:block;position:relative;padding:0;background:none;perspective:1200px;
  text-decoration:none;margin:0 0 -24px}
body.shop .hsshot{display:block;position:relative;transform-style:preserve-3d;will-change:transform;
  transform:rotateY(calc(-9deg + var(--rx,0deg))) rotateX(var(--ry,0deg))
            translateY(calc(var(--lift,0) * -8px)) scale(calc(1 + var(--lift,0) * .03));
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
body.shop .hsshot img,body.shop .hsshot canvas{display:block;width:100%;
  height:clamp(290px,30vw,400px);margin:0 auto;object-fit:contain}
/* La foto intera si vede solo finche' il ritaglio non e' pronto (o se il browser non sa
   ritagliare): li' una maschera morbida le toglie gli angoli, cosi' non e' mai un rettangolo
   bianco appoggiato sul gradiente. Col ritaglio pronto la foto esce di scena e la maschera con lei. */
body.shop .hsshot img{-webkit-mask-image:radial-gradient(52% 48% at 50% 48%,#000 34%,transparent 82%);
  mask-image:radial-gradient(52% 48% at 50% 48%,#000 34%,transparent 82%);
  filter:drop-shadow(0 30px 26px rgba(4,22,28,.45))}
body.shop .hsshot svg{display:block;width:100%;height:clamp(240px,26vw,330px);color:#9fc6d1}
/* Col ritaglio pronto: la foto esce di scena e resta il vetro, con l'ombra sotto. */
body.shop .hscut{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  filter:drop-shadow(0 26px 20px rgba(2,16,21,.55))}
/* Il flacone che gira davvero: una tela WebGL sopra il ritaglio, con lo stesso ingombro e la
   stessa ombra. Compare solo quando il disegno e' riuscito; se non compare resta il ritaglio. */
body.shop .hs3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity .5s ease;filter:drop-shadow(0 26px 20px rgba(2,16,21,.55))}
body.shop .hstage.is-3d .hs3d{opacity:1}
body.shop .hstage.is-3d .hscut,body.shop .hstage.is-3d img{opacity:0}
/* Col 3D il riquadro sta fermo: a girare e' il flacone, non la cartolina. */
body.shop .hstage.is-3d .hsshot{transform:none}
/* Con il flacone che gira, l'alone dietro diventava una bolla netta: resta, piu' largo e piu'
   debole, come la luce di un banco e non come un disco. */
body.shop .hstage.is-3d .hsglow{inset:10% -6% 16%;opacity:.3;
  background:radial-gradient(70% 58% at var(--gx,50%) var(--gy,52%),rgba(143,227,240,.34),transparent 76%)}
body.shop .hstage.is-3d.is-live:hover .hsglow{opacity:.5}
body.shop .hstage.is-cut .hscut{opacity:1}
body.shop .hstage.is-cut img{opacity:0}
/* L'alone resta, ma dietro al vetro: adesso e' una luce, non il fondo bianco della foto. */
/* La luce dietro al flacone non e' decorazione: lo scontorno lascia qualche scheggia dell'ombra
   che il flacone getta sul banco, e su un fondo scuro quelle schegge galleggiano. Dentro una luce
   larga diventano quello che erano, cioe' luce intorno a un oggetto. */
body.shop .hsglow{position:absolute;inset:2% -6% 8%;pointer-events:none;opacity:.78;border-radius:50%;
  transition:opacity .25s;
  background:radial-gradient(58% 54% at var(--gx,50%) var(--gy,52%),rgba(188,236,246,.5),
    rgba(143,227,240,.17) 52%,transparent 76%)}
body.shop .hstage.is-live:hover .hsglow{opacity:.9}
/* La cassa: piu' larga, caratteri piu' grandi, come la loro. */
body.shop .hscard{margin:0;padding:20px 22px 20px;border-radius:20px}
body.shop .hscard .hsname{margin:0 0 12px;font-size:1.6rem;line-height:1.18}
body.shop .hscard .hsprice b{font-size:2.15rem}
body.shop .hscard .hsprice small{font-size:.86rem}
body.shop .hscard .hspack{font-size:.86rem}
body.shop .hscard .hsbuy .btn{min-height:48px;font-size:.96rem}
/* Le miniature: piu' grandi e col nome intero. */
body.shop .hsthumbs{gap:9px;margin:12px 0 14px}
body.shop .hsthumb{width:84px;padding:7px 4px 7px}
body.shop .hsthumb img,body.shop .hsthumb svg{width:50px;height:50px}
body.shop .hstname{font-size:.6rem}
@media (max-width:980px){
body.shop .hero{margin:10px 10px 0;border-radius:20px;padding-bottom:4px}
body.shop .hshop{width:100%;max-width:520px}
body.shop .hsshot img,body.shop .hsshot canvas{height:300px}
}
@media (max-width:620px){
body.shop .hero{margin:8px 8px 0;border-radius:16px}
body.shop .hsshot img,body.shop .hsshot canvas{height:240px}
body.shop .hscard{padding:16px 16px 18px}
body.shop .hscard .hsname{font-size:1.3rem}
body.shop .hscard .hsprice b{font-size:1.8rem}
}

/* ===== Hero: tre colonne, il flacone in mezzo (appended, last-wins) ===== */
/* Nella hero del concorrente il prodotto non sta in un angolo: sta in mezzo alla fascia, fra il
   testo e il banco della cassa, ed e' alto quanto la fascia. Qui lo stesso: testo | flacone |
   cassa. Sotto i 1180 px le tre colonne diventano due (testo, poi flacone e cassa affiancati) e
   sotto i 980 una sola. */
@media (min-width:1181px){
body.shop .hero{grid-template-columns:minmax(0,1fr) minmax(300px,440px) minmax(320px,380px);
  gap:16px;align-items:center;padding:34px max(24px,calc((100% - 1320px)/2 + 24px)) 0}
body.shop .hinner{max-width:580px}
/* Il titolo in tre o quattro righe, non in cinque: la colonna del testo e' piu' stretta di quando
   le colonne erano due. */
body.shop .htitle{font-size:clamp(1.95rem,2.8vw,2.7rem)}
/* Il flacone sborda in basso e lo taglia il bordo tondo della fascia, come il loro: un prodotto
   che esce dall'inquadratura sembra piu' grande di quanto non sia. */
body.shop .hstage{align-self:end;margin:0 0 -34px}
body.shop .hsshot img,body.shop .hsshot canvas{height:clamp(320px,34vw,478px)}
body.shop .hshop{align-self:center}
}
@media (min-width:981px) and (max-width:1180px){
body.shop .hero{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
body.shop .hstage{grid-column:2;margin:0 0 -18px}
body.shop .hshop{grid-column:2}
}
/* La luce dietro al flacone: una luce, non un ovale.
   Col bordo della sfumatura che finiva al 76% si vedeva il contorno dell'ellisse, e sembrava un
   alone appiccicato dietro al vetro. Adesso sfuma fino a sparire, e non ha piu' una forma. */
body.shop .hsglow{position:absolute;inset:-12% -18%;border-radius:0;opacity:.6;
  background:radial-gradient(46% 42% at var(--gx,50%) var(--gy,50%),rgba(170,232,244,.38),
    rgba(143,227,240,.1) 46%,rgba(143,227,240,.03) 62%,transparent 78%)}
body.shop .hstage.is-live:hover .hsglow{opacity:.85}
body.shop .hstage.is-3d .hsglow{inset:-12% -18%;opacity:.5}
body.shop .hstage.is-3d.is-live:hover .hsglow{opacity:.72}
/* Il flacone piu' alto, perche' adesso ha una colonna sua. */
body.shop .hsshot img,body.shop .hsshot canvas{height:clamp(300px,32vw,440px)}
body.shop .hscard{margin:0}
@media (max-width:980px){
body.shop .hstage{margin:0 0 -18px}
body.shop .hsshot img,body.shop .hsshot canvas{height:300px}
}
@media (max-width:620px){
body.shop .hsshot img,body.shop .hsshot canvas{height:235px}
}

/* ===== Hero: le tre differenze che restavano (appended, last-wins) ===== */
/* Messe le due hero una accanto all'altra alla stessa larghezza, quello che mancava era: due
   targhette invece di una, l'invito come scheda invece che come pulsante nel vuoto, e nella cassa
   le opzioni con la loro etichetta. */
/* Tutta la colonna di sinistra si stringe: con due targhette, la scheda-invito e le tre pillole
   l'ultima finiva sotto la piega, e una hero che non ci sta in uno schermo non e' una hero. */
body.shop .heyebrow{margin:0 0 6px}
body.shop .htitle{margin:0 0 12px}
body.shop .hsub{margin:0 0 18px}
body.shop .hctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0 0 16px}
body.shop .htrust{gap:8px}
body.shop .heyebrow.two{margin:0 0 12px;border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:#cfe3e8}
body.shop .heyebrow.two::before{background:#8fd3e0;box-shadow:0 0 0 3px rgba(143,211,224,.2)}
/* L'invito: una scheda con dentro due righe e la freccia tonda, non un pulsante solo. */
body.shop .hcard2{display:inline-flex;align-items:center;gap:18px;padding:14px 16px 14px 22px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s}
body.shop .hcard2:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
  transform:translateY(-1px)}
body.shop .hc2t{display:flex;flex-direction:column;gap:3px}
body.shop .hc2t b{color:#fff;font:700 1.06rem/1.2 var(--sans);letter-spacing:-.01em}
body.shop .hc2t small{color:#b9d7de;font:500 .84rem/1.3 var(--sans)}
body.shop .hc2a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:none;border-radius:50%;background:#8fe3f0;color:#0c2a33;font-size:1.2rem;font-weight:700}
body.shop .hcard2:hover .hc2a{background:#fff}
/* Le etichette delle opzioni nella cassa. */
body.shop .hslab{margin:14px 0 6px;color:#9ec4ce;font:700 .56rem/1 var(--mono);letter-spacing:.17em;
  text-transform:uppercase}
body.shop .hscard .hsdoses{margin:0}
@media (max-width:620px){
body.shop .hcard2{width:100%;justify-content:space-between;padding:12px 12px 12px 18px}
body.shop .heyebrow.two{margin-bottom:14px}
}

/* ===== Intestazione a pillola, come la loro (appended, last-wins) ===== */
/* L'ultima differenza di chrome fra le due hero: da loro il menu e' una pillola bianca che
   galleggia sopra la fascia scura, da noi una barra piena da bordo a bordo. La pillola e' anche
   quello che fa sembrare "fatto" il resto. Solo da tablet in su: sul telefono una barra piena e'
   piu' comoda da toccare e non ruba larghezza. */
@media (min-width:981px){
body.shop header.top{position:sticky;top:12px;z-index:60;max-width:1260px;margin:12px auto 0;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -26px rgba(12,42,51,.5)}
body.shop header.top .in{padding:7px 12px 7px 18px;gap:10px;flex-wrap:nowrap}
/* Il menu al centro della pillola, lingue e carrello a destra, come la loro: con tutto spinto a
   destra restava un buco largo mezza barra in mezzo. L'ordine si fa in CSS perche' nel markup il
   carrello viene prima del menu (sul telefono deve stare fuori dall'hamburger). */
body.shop header.top .brand{order:1;flex:none}
body.shop header.top .menubox{order:2;flex:1 1 auto;display:flex;align-items:center;gap:12px;margin:0}
body.shop header.top .nav{margin:0 auto;gap:16px;flex-wrap:nowrap}
body.shop header.top .langs{flex:none;gap:2px}
body.shop header.top .carticon{order:3;flex:none;margin-left:0}
body.shop .topbar{max-width:1320px;margin:10px auto 0;border:1px solid var(--line);
  border-radius:999px;background:var(--panel)}
body.shop .topbar .in{padding:7px 20px}
/* La fascia della hero sale di quel tanto che basta a stare sotto la pillola senza stacchi. */
body.shop .hero{margin-top:10px}
}

/* ===== Hero: il flacone in 3D vero (appended, last-wins) ===== */
/* Il flacone non e' piu' una foto scontornata: vetro e tappo sono disegnati in 3D da hero.js, e
   dalla foto si prende solo l'etichetta. Le foto del fornitore sono vetro su fondo bianco, il
   bianco passa attraverso il vetro, e qualunque ritaglio lasciava un alone chiaro intorno: sul
   fondo scuro sembrava un'immagine ritagliata male. Il vetro disegnato invece e' trasparente
   davvero, e dietro si vede la hero. */
body.shop .hstage{display:block;position:relative;padding:0;margin:0;background:none;perspective:none;
  text-decoration:none;align-self:stretch;animation:none}
body.shop .hsshot,body.shop .hstage:hover .hsshot,body.shop .hstage:not(.is-live):hover .hsshot{
  display:block;position:relative;height:clamp(400px,40vw,580px);transform:none;transition:none;
  will-change:auto}
/* Sul telefono il flacone si gira trascinandolo di lato: al browser resta lo scorrimento in
   verticale, quello orizzontale arriva allo script. */
body.shop .hstage.is-3d{touch-action:pan-y;-webkit-tap-highlight-color:transparent}
body.shop .hsshot canvas.hs3d{position:absolute;inset:0;width:100%;height:100%;filter:none;
  opacity:0;animation:hsin .7s ease forwards}
/* La foto e' il piano B (niente WebGL, o script che non parte): intera, su una pedana chiara, dove
   il vetro su fondo bianco sta bene. Compare dopo un attimo se il 3D non arriva, cosi' chi ha il
   3D non vede prima la foto e poi il cambio. */
body.shop .hsshot img{position:absolute;inset:0;margin:auto;width:min(100%,340px);height:auto;
  aspect-ratio:1/1;object-fit:cover;border-radius:24px;background:#fff;
  -webkit-mask-image:none;mask-image:none;filter:none;
  box-shadow:0 34px 60px -24px rgba(2,14,20,.65),0 0 0 1px rgba(255,255,255,.14);
  opacity:0;animation:hsin .45s ease 1.4s forwards}
body.shop .hsshot svg{position:absolute;inset:0;margin:auto;width:min(100%,300px);height:auto}
body.shop .hstage.is-flat .hsshot img{animation:none;opacity:1}
body.shop .hstage.is-3d .hsshot img{animation:none;opacity:0;visibility:hidden}
@keyframes hsin{to{opacity:1}}
/* Una luce dietro al vetro, larga e senza bordo: attraverso il vetro si vede, ed e' quella che lo
   fa sembrare vetro. */
body.shop .hsglow,body.shop .hstage.is-3d .hsglow{position:absolute;inset:-10% -20%;border-radius:0;
  opacity:.7;pointer-events:none;
  background:radial-gradient(closest-side at var(--gx,52%) var(--gy,48%),rgba(160,230,242,.2),
    rgba(143,227,240,.09) 40%,rgba(143,227,240,.03) 70%,transparent)}
body.shop .hstage.is-live:hover .hsglow,body.shop .hstage.is-3d.is-live:hover .hsglow{opacity:.7}
@media (min-width:1181px){
body.shop .hstage{align-self:stretch;margin:0}
/* Sotto le targhette un po' d'aria: toccavano il bordo tondo della fascia. */
body.shop .hero{padding-bottom:30px}
}
@media (min-width:981px) and (max-width:1180px){
body.shop .hstage{margin:0}
body.shop .hsshot{height:400px}
}
@media (max-width:980px){
/* Sotto i 980 px la hero e' una colonna con gli elementi centrati, che si stringono al loro
   contenuto: la pedana ha dentro solo cose posizionate (la tela, la foto di riserva) e si
   stringeva a zero — sul telefono il flacone non c'era. Larga quanto la colonna. */
body.shop .hstage{margin:0;justify-self:stretch;width:100%;max-width:520px;margin-inline:auto}
body.shop .hsshot,body.shop .hstage:hover .hsshot{height:400px}
}
@media (max-width:620px){
body.shop .hsshot,body.shop .hstage:hover .hsshot{height:340px}
body.shop .hero{gap:14px}
body.shop .hsshot img{width:min(100%,250px)}
}

/* ===== Colori: blu oceano e ciano vivo (appended, last-wins) ===== */
/* Messe accanto, la hero del concorrente e' blu oceano saturo (#00436b ai bordi, #025c80 al centro)
   con accenti ciano vivi; la nostra era un verde-petrolio quasi grigio (#0c2b34, #143a46) con un
   ciano slavato, e sembrava spenta. Qui la stessa famiglia di colori, con i contrasti del testo
   rimisurati: il bianco sulla striscia blu in cima sta sopra 4,5:1 anche a caratteri piccoli. */
body.shop{--ink:#0b2b40;--soft:#34566a;--mute:#5f7d8e;--acc:#0a7fb0;--acc2:#07668e;--line:#e0e9ef;
  --line2:#cddde7;--panel2:#edf4f8;--bg:#f3f7fa;--plate:#f6f9fb;background:#f3f7fa}
body.shop .hero{background:
  radial-gradient(1000px 560px at 70% -12%,rgba(36,184,232,.45),transparent 62%),
  radial-gradient(760px 520px at 4% 118%,rgba(0,128,186,.6),transparent 60%),
  linear-gradient(155deg,#00375a 0%,#004d77 50%,#003b61 100%)}
body.shop .hem{color:#45d3f1}
body.shop .heyebrow{border-color:rgba(110,212,240,.42);background:rgba(70,196,235,.1);color:#c3ecf8}
body.shop .heyebrow::before{background:#2fc6ea;box-shadow:0 0 0 3px rgba(47,198,234,.25)}
body.shop .heyebrow.two{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#d6eef7}
body.shop .heyebrow.two::before{background:#9be6f7;box-shadow:0 0 0 3px rgba(155,230,247,.22)}
body.shop .htrust li{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#e4f3f9}
body.shop .hcard2{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
body.shop .hc2t small{color:#c2e6f2}
body.shop .hc2a{background:#2fc6ea;color:#00314d}
body.shop .hscard{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
body.shop .hsbadge{border-color:rgba(47,198,234,.5);background:rgba(47,198,234,.15);color:#b2eefb}
body.shop .hsbadge::before{background:#2fc6ea;box-shadow:0 0 0 3px rgba(47,198,234,.25)}
body.shop .hslab{color:#a6d8ea}
body.shop .hscard .hsdoses .dose:hover,body.shop .hsnav a:hover{border-color:#2fc6ea;color:#fff}
body.shop .hscard .hsdoses .dose.on{border-color:#2fc6ea;background:#2fc6ea;color:#00314d}
body.shop .hsthumb.on{border-color:#2fc6ea;background:rgba(47,198,234,.16)}
/* La striscia sotto il menu: blu pieno con il testo bianco, come la loro barra in cima, invece
   di una riga grigia su bianco che non si notava. */
body.shop .topbar{background:linear-gradient(90deg,#07709c,#0a7fb0);border-color:transparent}
body.shop .topbar span,body.shop .topbar .ro{color:#fff}
body.shop .nav a[aria-current]{background:var(--acc);color:#fff}

/* ===== Scheda: prezzo a flacone, poi la confezione (appended, last-wins) ===== */
body.shop .rail .price{margin:2px 0 4px}
body.shop .rail .price small{font:600 .95rem var(--sans);color:var(--mute);letter-spacing:0}
body.shop .rail .packprice{margin:0 0 12px;color:var(--ink);font:700 1.02rem/1.3 var(--sans)}

/* ===== Hero: le miniature come schede (appended, last-wins) ===== */
/* Le schede per scegliere il prodotto: nome del composto, dosaggio e prezzo a flacone, niente
   foto (il flacone grande e' al centro). Griglia da tre, tutte intere; quella scelta in ciano. */
body.shop .hsnav{display:flex;justify-content:center;align-items:center;margin:16px 0 9px;padding:0}
body.shop .hsnav span{color:#a6d8ea;font:700 .58rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase}
body.shop .hsthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;
  padding:0;overflow:visible}
body.shop .hsthumb{display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  width:auto;min-width:0;min-height:60px;padding:9px 10px;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;background:rgba(255,255,255,.07);text-decoration:none;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s}
body.shop .hsthumb:hover{border-color:#2fc6ea;background:rgba(255,255,255,.12);transform:translateY(-1px)}
body.shop .hsthumb.on,body.shop .hsthumb.on:hover{border-color:#2fc6ea;background:rgba(47,198,234,.2);
  box-shadow:inset 0 0 0 1px #2fc6ea;cursor:default;transform:none}
body.shop .hstname{display:block;margin:0 0 3px;color:#fff;font:700 .82rem/1.2 var(--sans);
  letter-spacing:0;text-transform:none;text-align:center;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
body.shop .hstmeta{display:block;margin:0;color:#9fe3f5;font:600 .68rem/1.3 var(--sans);
  text-align:center;white-space:normal}
body.shop .hscard[hidden]{display:none}

/* ===== Vetrina: categorie, i piu' visti, il catalogo completo (appended, last-wins) ===== */
body.shop .area.catshelf{margin-top:6px}
body.shop .ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
body.shop .ctile{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 44px 16px 18px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(11,43,64,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
body.shop .ctile:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(10,127,176,.45)}
body.shop .ctile b{font:700 1.02rem/1.25 var(--sans);color:var(--ink)}
body.shop .ctile small{font:700 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
body.shop .ctile span{margin-top:4px;font:500 .84rem/1.35 var(--sans);color:var(--soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
body.shop .ctile i{position:absolute;top:50%;right:16px;width:28px;height:28px;margin-top:-14px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;background:var(--panel2);color:var(--acc);
  font-style:normal;font-weight:700;transition:background .15s,color .15s}
body.shop .ctile:hover i{background:var(--acc);color:#fff}
body.shop .alead{margin:-6px 0 14px;color:var(--mute);font:500 .9rem/1.4 var(--sans)}
body.shop .allrow{display:flex;justify-content:center;margin:26px 0 8px}
body.shop .allbtn{min-height:52px;padding:0 28px;border-radius:999px;font-size:1.02rem}
@media (max-width:620px){
body.shop .ctiles{grid-template-columns:1fr 1fr;gap:8px}
body.shop .ctile{padding:12px 34px 12px 12px}
body.shop .ctile b{font-size:.92rem}
body.shop .ctile span{display:none}
body.shop .ctile i{right:8px;width:24px;height:24px;margin-top:-12px}
body.shop .allbtn{width:100%;justify-content:center}
}

/* ===== Scheda: il flacone in 3D anche qui (appended, last-wins) ===== */
/* Su fondo chiaro, dentro il riquadro della foto: la tela si accende sopra la foto e solo dopo la
   foto sfuma, cosi' non c'e' mai un attimo di riquadro vuoto. */
body.shop .shot[data-tilt]{position:relative}
body.shop .shot.is-3d{touch-action:pan-y;-webkit-tap-highlight-color:transparent}
/* La pedana della hero ha altezza fissa e una foto di riserva in un riquadro: qui no. La scheda
   tiene la foto quadrata com'era, e la tela prende la sua misura. */
body.shop .shot .hsshot{display:block;position:relative;height:auto;border-radius:12px;overflow:hidden;
  transform:none;transition:background .3s}
body.shop .shot .hsshot img{display:block;position:static;inset:auto;margin:0;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:contain;border-radius:0;background:none;box-shadow:none;filter:none;
  visibility:visible;opacity:1;animation:none;transition:opacity .45s ease .55s}
body.shop .shot .hs3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  animation:hsin .7s ease forwards}
body.shop .shot.is-3d .hsshot{background:radial-gradient(70% 62% at 50% 40%,#ffffff 0%,#f2f7fa 60%,#e4eef4 100%)}
body.shop .shot.is-3d .hsshot img{opacity:0}

/* ===== Scheda: l'acquisto in cima, accanto al flacone (appended, last-wins) ===== */
body.shop .sheethead .withshot.buyfirst{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;gap:28px 52px}
body.shop .buyfirst .shot{order:0;margin:0}
body.shop .sheetinfo h1{margin-bottom:6px}
body.shop .sheetinfo .tagline{margin:0 0 14px}
body.shop .sheetinfo .rail{margin:16px 0 0;position:static}
body.shop .sheetinfo .rail>.panel{margin:0;padding:20px 22px}
body.shop .sheetinfo .rail .price{font-size:2.3rem}
body.shop .sheetinfo .facts{margin:16px 0 0}
body.shop .sheetinfo .addbar{margin:14px 0 0}
body.shop .sheetbody{max-width:920px;margin:0 auto}
/* "Aggiungi al carrello" largo come "Compra adesso": due pulsanti uguali uno sotto l'altro. */
body.shop .sheetinfo .rail form .btn.ghost{display:flex;justify-content:center;width:100%;margin:8px 0 0}
@media (max-width:980px){
body.shop .sheethead .withshot.buyfirst{grid-template-columns:1fr;gap:18px}
body.shop .buyfirst .shot{max-width:520px;width:100%;margin:0 auto}
}
/* Sul telefono il pulsante deve stare nel primo schermo: riquadro del flacone piu' basso (4:3, la
   tela prende quella misura), niente filo di briciole (la categoria e' nel link "Shop" e nel menu),
   riquadro d'acquisto piu' compatto. */
@media (max-width:620px){
body.shop .buyfirst .shot .hsshot img{aspect-ratio:4/3}
body.shop .sheetinfo .crumbs{display:none}
body.shop .sheetinfo .eyebrow{margin-bottom:4px}
body.shop .sheetinfo .tagline{margin:0 0 10px}
body.shop .sheetinfo .rail{margin-top:10px}
body.shop .sheetinfo .rail>.panel{padding:16px}
body.shop .sheetinfo .rail .price{font-size:1.9rem}
body.shop .sheetinfo .minord{font-size:.8rem;margin:6px 0 10px}
}

/* ===== Footer: blu scuro, assistenza in evidenza (appended, last-wins) ===== */
body.shop footer{margin-top:56px;padding:0 0 28px;border-top:0;
  background:linear-gradient(180deg,#003a5c 0%,#002a44 100%);color:#cfe3ee}
body.shop footer .fhelp{border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
body.shop footer .fhelpin{display:flex;align-items:center;justify-content:space-between;gap:18px 36px;
  flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
body.shop footer .fhelpt h3{margin:0 0 4px;color:#fff;font:700 1.15rem/1.3 var(--sans)}
body.shop footer .fhelpt p{margin:0;color:#b8d6e3;font:500 .92rem/1.45 var(--sans)}
body.shop footer .fhelpb{display:flex;gap:10px;flex-wrap:wrap}
body.shop footer .fhelpb p{margin:0}
body.shop footer .fhelpb a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  font:700 .92rem/1 var(--sans);text-decoration:none}
body.shop footer .fhelpb .tg a{background:#2fc6ea;color:#00314d}
body.shop footer .fhelpb .tg a:hover{background:#fff}
body.shop footer .fhelpb .mail a{border:1px solid rgba(255,255,255,.3);color:#fff}
body.shop footer .fhelpb .mail a:hover{border-color:#fff}
body.shop footer .fcols{padding-top:34px;gap:28px 40px}
body.shop footer h4{color:#fff;font:700 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 14px}
body.shop footer ul{margin:0;padding:0;list-style:none}
body.shop footer li{margin:0 0 9px}
body.shop footer .fcols li a{color:#cfe3ee;text-decoration:none;font:500 .92rem/1.35 var(--sans)}
body.shop footer .fcols li a:hover{color:#fff;text-decoration:underline}
body.shop footer .fcols{border-bottom:0;padding-bottom:0}
body.shop footer .mark .b{fill:#fff}
body.shop footer .mark .p{fill:#2fc6ea}
body.shop footer .bn b{color:#fff}
body.shop footer .bn small{color:#8fd8ec}
body.shop footer .ftag{color:#a9c9d8}
body.shop footer .fbottom{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  margin:30px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12)}
body.shop footer .fpay{display:flex;align-items:center;gap:8px;margin:0;color:#a9c9d8;font:600 .82rem var(--sans)}
body.shop footer .fpay b{padding:4px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;
  font:700 .74rem/1 var(--mono);letter-spacing:.06em}
body.shop footer .fcopy{margin:0;color:#a9c9d8;font:500 .82rem var(--sans)}
body.shop footer .legal{margin:18px 0 0;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:rgba(0,0,0,.12);color:#9fbccb;font:500 .74rem/1.55 var(--sans);max-width:none}
@media (max-width:620px){
body.shop footer .fhelpin{padding-top:20px;padding-bottom:20px}
body.shop footer .fhelpb{width:100%}
body.shop footer .fhelpb p{flex:1 1 100%}
body.shop footer .fhelpb a{width:100%;justify-content:center}
body.shop footer .fcols{grid-template-columns:1fr 1fr}
body.shop footer .fbrand{grid-column:1/-1}
}

/* ===== Catalogo: ogni cartolina col suo flacone in 3D (appended, last-wins) ===== */
/* La tela si accende sopra la foto, e la foto sfuma solo dopo: mai un riquadro vuoto. */
body.shop .card .plate{position:relative}
body.shop .card .plate canvas.c3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:0;animation:hsin .5s ease forwards}
body.shop .card .plate.is-3d{background:radial-gradient(70% 62% at 50% 40%,#ffffff 0%,#f2f7fa 60%,#e6eff4 100%)}
body.shop .card .plate.is-3d img.photo{opacity:0;transition:opacity .35s ease .3s}
body.shop a.card:hover .plate.is-3d img.photo{transform:none}

/* ===== Footer: Telegram ed email con l'icona (appended, last-wins) ===== */
body.shop footer .fhelpb{display:flex;gap:10px;flex-wrap:wrap}
body.shop footer .fhelpb a.fcta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 12px;
  border-radius:999px;font:700 .95rem/1 var(--sans);text-decoration:none;transition:background .15s,border-color .15s}
body.shop footer .fhelpb a.fcta .ficon{width:26px;height:26px;flex:none}
body.shop footer .fhelpb a.fcta.tg{background:#2fc6ea;color:#00314d}
body.shop footer .fhelpb a.fcta.tg:hover{background:#fff}
body.shop footer .fhelpb a.fcta.mail{border:1px solid rgba(255,255,255,.32);color:#fff;padding-left:16px}
body.shop footer .fhelpb a.fcta.mail .ficon{width:22px;height:22px}
body.shop footer .fhelpb a.fcta.mail:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:620px){
body.shop footer .fhelpb a.fcta{flex:1 1 0;justify-content:center;padding:0 14px}
}

/* ===== Giro 28: vantaggi con le icone, pacchi su telefono, FAQ a fisarmonica (appended, last-wins) ===== */
/* I vantaggi in vetrina: quattro riquadri con l'icona tonda, titolo e una riga. */
body.shop .perks2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1120px;
  margin:28px auto 8px;padding:0;list-style:none}
body.shop .perks2 li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;
  align-items:center;margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 14px 34px -28px rgba(11,43,64,.55)}
body.shop .perks2 .pk{grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(10,127,176,.14),rgba(47,198,234,.18));
  color:var(--acc)}
body.shop .perks2 .pk svg{width:24px;height:24px}
body.shop .perks2 b{align-self:end;color:var(--ink);font:700 .95rem/1.25 var(--sans)}
body.shop .perks2 small{align-self:start;margin-top:2px;color:var(--mute);font:500 .8rem/1.35 var(--sans)}
@media (max-width:980px){body.shop .perks2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){body.shop .perks2{grid-template-columns:1fr;gap:10px;margin-top:20px}
  body.shop .perks2 li{padding:13px 14px}}
/* La striscia in alto sul telefono: una riga sola, i due fatti che decidono un acquisto. */
@media (max-width:720px){
/* In italiano e in tedesco le due frasi non stanno su una riga da 390 px: vanno a capo, centrate,
   invece di allargare la pagina (prima la striscia era larga 420 px e la pagina scorreva di lato). */
body.shop .topbar{overflow:hidden}
body.shop .topbar .in{flex-wrap:wrap;justify-content:center;gap:2px 14px;padding:7px 12px}
body.shop .topbar span{white-space:nowrap}
body.shop .topbar span:nth-child(2),body.shop .topbar .ro{display:none}
body.shop .topbar span:nth-child(3){display:inline}
}
/* Hero: sul telefono una targhetta sola, non due una sotto l'altra. */
@media (max-width:620px){body.shop .heyebrow.two{display:none}}
/* Scheda: disponibilita', categoria cliccabile, caselle dei dati della stessa misura. */
body.shop .rail .stock{display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;color:#12805c;
  font:700 .78rem/1 var(--sans);letter-spacing:.02em}
body.shop .rail .stock::before{content:"";width:8px;height:8px;border-radius:50%;background:#18a874;
  box-shadow:0 0 0 3px rgba(24,168,116,.18)}
body.shop .rail .stock.no{color:#b42318}
body.shop .rail .stock.no::before{background:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.15)}
body.shop .sheetinfo .eyebrow a{color:inherit;text-decoration:none}
body.shop .sheetinfo .eyebrow a:hover{text-decoration:underline}
body.shop .sheetinfo .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
body.shop .sheetinfo .facts li{margin:0;min-width:0}
/* Prezzi a pacchi: la nota sulla spedizione in chiaro, non in monospazio; sul telefono ogni riga
   e' etichetta e prezzo a sinistra, pulsante a destra, e lo sconto va a capo sotto il prezzo. */
body.shop #bundles .bnote{margin:14px 0 0;color:var(--soft);font:500 .86rem/1.45 var(--sans)}
@media (max-width:560px){
body.shop table.bundles,body.shop table.bundles tbody{display:block;width:100%}
body.shop table.bundles tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab btn" "val btn";
  align-items:center;column-gap:12px;row-gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
body.shop table.bundles tr:last-child{border-bottom:0}
body.shop table.bundles th,body.shop table.bundles td{padding:0;border:0;width:auto}
body.shop table.bundles th{grid-area:lab}
body.shop table.bundles td:nth-child(2){grid-area:val}
body.shop table.bundles td:nth-child(3){display:none}
body.shop table.bundles td:nth-child(4){grid-area:btn}
body.shop table.bundles .off{display:block;margin-top:2px}
}
/* FAQ: domande chiuse, si apre quella che serve. */
body.shop .faqlist{gap:10px}
body.shop details.qa{padding:0;overflow:hidden}
body.shop details.qa>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;list-style:none}
body.shop details.qa>summary::-webkit-details-marker{display:none}
body.shop details.qa>summary h2{margin:0;padding:0;border:0;font-size:1.04rem;line-height:1.35}
body.shop details.qa>summary::after{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:rgba(10,127,176,.1);color:var(--acc);font:700 1.15rem/1 var(--sans)}
body.shop details.qa[open]>summary::after{content:"\2212";background:var(--acc);color:#fff}
body.shop details.qa>summary:hover h2{color:var(--acc)}
body.shop details.qa>p{margin:0;padding:0 20px 18px;color:var(--soft);line-height:1.6}
/* Spedizioni su due colonne, Chi siamo al centro come le altre pagine. */
body.shop .qalist.shipgrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
@media (max-width:760px){body.shop .qalist.shipgrid{grid-template-columns:1fr}}
body.shop .panel.about{max-width:820px;margin:0 auto}
/* Il lucchetto sotto i pulsanti d'acquisto. */
body.shop .secure{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 0;color:#12805c;
  font:600 .8rem/1.3 var(--sans);letter-spacing:.01em}
body.shop .secure svg{width:15px;height:15px;flex:none}
/* Sotto i pulsanti la nota sul pagamento aveva margin-top:-8px (.rail .ship), pensato per quando
   veniva subito dopo il modulo: col lucchetto in mezzo le due righe si sovrapponevano. */
body.shop .rail .secure{margin:12px 0 0}
body.shop .rail .secure+.ship{margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--line)}
/* L'ultima casella dei dati, se resta sola, prende tutta la riga. */
body.shop .sheetinfo .facts li:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:621px){body.shop .sheetinfo .facts li:last-child:nth-child(odd){grid-column:auto}}
/* Guida, tabella delle reti sul telefono: impilata, si portava dietro i bordi della tabella da
   computer (linee spezzate sotto ogni nome, bordo esterno a meta'). Ora ogni rete e' un riquadro. */
@media (max-width:620px){
body.shop table.spec.nets{border:0;background:none}
body.shop .nets tbody tr{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
body.shop .nets tbody th,body.shop .nets tbody td{border:0;background:none;width:auto}
body.shop .nets tbody th{margin:0 0 6px;color:var(--ink);font:700 .95rem/1.2 var(--sans);letter-spacing:0;text-transform:none}
body.shop .nets tbody td{padding:6px 0 0;color:var(--ink);font:600 .9rem/1.3 var(--sans)}
}
/* Niente foto prima del flacone 3D. Le foto restano nascoste: compaiono solo se lo script dice
   che il 3D non si fa ("flat", "is-flat"), o da sole dopo tre secondi se lo script non parte
   proprio. Con lo script acceso ("bp3d", "is-wait") la sicurezza a tempo si spegne, e il flacone
   arriva con una dissolvenza sul fondo chiaro: prima si vedeva la foto e poi il cambio. */
body.shop .card .plate img.photo{opacity:0;animation:hsin .35s ease 3s forwards}
body.shop.bp3d .card .plate img.photo{animation:none}
body.shop .card .plate.flat img.photo{opacity:1;animation:none;transition:opacity .3s ease}
body.shop .card .plate.is-3d img.photo{opacity:0;animation:none}
body.shop .card .plate canvas.c3d{opacity:0;animation:hsin .45s ease forwards}
body.shop .shot .hsshot{background:radial-gradient(70% 62% at 50% 40%,#ffffff 0%,#f2f7fa 60%,#e4eef4 100%)}
body.shop .shot .hsshot img{opacity:0;transition:none;animation:hsin .45s ease 2.5s forwards}
body.shop .hstage.is-wait .hsshot img,body.shop .shot.is-wait .hsshot img{animation:none}
body.shop .shot.is-flat .hsshot img{opacity:1;animation:none}
body.shop .shot.is-3d .hsshot img{opacity:0;animation:none}
/* Carrello vuoto: i piu' visti sotto il riquadro. */
body.shop .emptypicks{max-width:1120px;margin:34px auto 0}
body.shop .emptypicks h2{text-align:center}

/* ===== Giro 29: schede del catalogo e categorie sul modello di beyond-peptides (appended, last-wins) ===== */
body.shop .grid{gap:18px}
body.shop a.card{display:flex;flex-direction:column;border:1px solid #e3e8ee;border-radius:16px;background:#fff;
  box-shadow:none;overflow:hidden;transform:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body.shop a.card:hover{transform:translateY(-3px);border-color:#cfdbe3;box-shadow:0 22px 44px -30px rgba(11,43,64,.45)}
body.shop .card .plate{position:relative;aspect-ratio:1/1;margin:0;padding:0;border:0;border-radius:0;background:#f2f4f6}
body.shop .card .plate.is-3d{background:#f2f4f6}
body.shop .card .plate img.photo{width:100%;height:100%;object-fit:contain}
body.shop .card .plate:not(:has(img)){background:#f2f4f6}
body.shop .card .bdgs{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
body.shop .card .bdg{display:inline-block;padding:5px 9px;border-radius:7px;background:#0a7fb0;color:#fff;
  font:700 .72rem/1 var(--sans);letter-spacing:.01em}
body.shop .card .bdg.deal{background:#d0551c}
body.shop .card .bdg.coa{background:#0a7fb0}
body.shop .card .bdg.out{background:#5b6b78}
body.shop .card .pcbody{display:flex;flex-direction:column;gap:4px;padding:14px 18px 16px;background:#f2f4f6;flex:1 0 auto}
body.shop .card .pcdose{color:#0a8fb8;font:500 .8rem/1.3 var(--sans)}
body.shop .card .pcname{color:#14212b;font:600 1.18rem/1.25 var(--sans);letter-spacing:-.01em}
body.shop .card .pcfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 16px;background:#fff}
body.shop .card .pcp{display:flex;flex-direction:column;gap:3px;min-width:0}
body.shop .card .pcprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;color:#14212b}
body.shop .card .pcprice em{font:400 .8rem/1 var(--sans);font-style:normal;color:#5b6b78}
body.shop .card .pcprice b{font:700 1.15rem/1.15 var(--sans);font-variant-numeric:tabular-nums}
body.shop .card .pcprice small{font:400 .8rem/1 var(--sans);color:#5b6b78}
body.shop .card .pcpack{color:#5b6b78;font:400 .76rem/1.3 var(--sans)}
body.shop .card .pcbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  border:1px solid #d5dde4;border-radius:50%;color:#14212b;background:#fff;transition:background .15s,color .15s,border-color .15s}
body.shop .card .pcbtn svg{width:20px;height:20px}
body.shop a.card:hover .pcbtn{background:#0a7fb0;border-color:#0a7fb0;color:#fff}
@media (max-width:620px){
body.shop .grid{gap:10px}
body.shop a.card{border-radius:12px}
body.shop .card .bdgs{top:8px;left:8px;right:8px;gap:4px}
body.shop .card .bdg{padding:4px 6px;font-size:.6rem;border-radius:5px}
body.shop .card .pcbody{padding:10px 11px 11px;gap:3px}
body.shop .card .pcdose{font-size:.68rem}
body.shop .card .pcname{font-size:.98rem}
body.shop .card .pcfoot{padding:10px 11px 11px;gap:6px}
body.shop .card .pcprice b{font-size:1rem}
body.shop .card .pcprice em,body.shop .card .pcprice small{font-size:.66rem}
body.shop .card .pcpack{font-size:.64rem}
body.shop .card .pcbtn{width:34px;height:34px}
body.shop .card .pcbtn svg{width:16px;height:16px}
}
/* Le categorie: riquadri chiari con il flacone, nome e numero sotto. */
body.shop .catshelf .ctiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
body.shop .catshelf .ctile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 0 14px;border:1px solid #e3e8ee;
  border-radius:16px;background:#fff;text-align:center;text-decoration:none;overflow:hidden;box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body.shop .catshelf .ctile:hover{transform:translateY(-3px);border-color:#cfdbe3;box-shadow:0 22px 44px -30px rgba(11,43,64,.45)}
body.shop .catshelf .ctimg{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;margin:0 0 10px;background:#f2f4f6}
body.shop .catshelf .ctimg img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
body.shop .catshelf .ctile:hover .ctimg img{transform:scale(1.04)}
body.shop .catshelf .ctimg .vial{width:38%;height:auto;color:#9fb3c0}
body.shop .catshelf .ctile b{padding:0 10px;color:#14212b;font:600 .98rem/1.25 var(--sans)}
body.shop .catshelf .ctile small{color:#5b6b78;font:400 .78rem/1.2 var(--sans);letter-spacing:0;text-transform:none}
body.shop .catshelf .ctile span:not(.ctimg),body.shop .catshelf .ctile i{display:none}
@media (max-width:1100px){body.shop .catshelf .ctiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){
body.shop .catshelf .ctiles{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;
  scrollbar-width:none}
body.shop .catshelf .ctiles::-webkit-scrollbar{display:none}
body.shop .catshelf .ctile{flex:0 0 132px;scroll-snap-align:start;padding-bottom:11px}
body.shop .catshelf .ctile b{font-size:.86rem}
body.shop .catshelf .ctile small{font-size:.7rem}
}
/* Titolo di sezione a sinistra, "solo ricerca" a destra. */
body.shop .ahead{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
body.shop .ahead h2{margin:0}
body.shop .ahead .aru{margin:0;color:#5b6b78;font:500 .82rem/1.4 var(--sans)}
body.shop .area>.ahead{margin:0 0 18px;padding:0 0 11px;border-bottom:1px solid var(--line)}
body.shop .area>.ahead h2{margin:0;padding:0;border:0;color:var(--ink);font:600 1.2rem/1.2 var(--sans);
  letter-spacing:-.012em;text-transform:none}
body.shop .area>.ahead+.alead{margin:-8px 0 16px}
@media (max-width:560px){body.shop .area>.ahead h2{font-size:1.05rem}body.shop .ahead .aru{font-size:.72rem}}
/* Meno vuoto fra i vantaggi e la ricerca. */
body.shop .perks2{margin-bottom:0}
/* Fra i vantaggi e la ricerca c'erano quasi novanta pixel vuoti. */
body.shop main>.wrap.pad.nobot:has(.perks2){padding-bottom:6px}
body.shop main>.wrap.pad.nobot:has(.perks2)+.wrap.pad.notop{padding-top:14px}
/* Sul telefono i vantaggi stanno in un due per due, senza la seconda riga: quattro riquadri
   uno sotto l'altro erano mezzo schermo prima di vedere un prodotto. */
@media (max-width:560px){
body.shop .perks2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.shop .perks2 li{grid-template-columns:30px 1fr;column-gap:9px;padding:10px 11px;border-radius:12px}
body.shop .perks2 .pk{width:30px;height:30px;border-radius:9px}
body.shop .perks2 .pk svg{width:17px;height:17px}
body.shop .perks2 b{grid-row:1 / span 2;align-self:center;font-size:.76rem;line-height:1.25}
body.shop .perks2 small{display:none}
body.shop .catshelf .ctiles{margin:0 -18px;padding:2px 18px 8px;scroll-padding-left:18px}
}
/* Piede: il lucchetto accanto ai pagamenti. */
body.shop footer .fleft{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
body.shop footer .fssl{display:flex;align-items:center;gap:9px;margin:0;color:#fff}
body.shop footer .fssl svg{width:22px;height:22px;flex:none;color:#fff}
body.shop footer .fssl span{display:flex;flex-direction:column;gap:2px}
body.shop footer .fssl b{font:700 .84rem/1.1 var(--sans)}
body.shop footer .fssl small{color:#b8d3e2;font:500 .76rem/1.1 var(--sans)}

/* ===== Paga con carta: Phantom + Solana Pay (appended, last-wins) ===== */
body.shop .cardpay{border-color:#bfe3f1;background:linear-gradient(180deg,#f3fbfe,#fff 60%)}
body.shop .cpbadges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
body.shop .cpbadges span{display:inline-block;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--ink);font:700 .78rem/1 var(--sans)}
body.shop .cphave{margin:12px 0 0;color:var(--mute);font:500 .86rem/1.4 var(--sans)}
body.shop .cpopen{margin:4px 0 0}
body.shop .cpqr{display:flex;align-items:center;gap:18px;margin:6px 0 0}
body.shop .cpqr .qr{flex:none;width:200px;height:200px;border:1px solid var(--line);border-radius:12px;background:#fff}
body.shop .cpqr .hint{margin:0;max-width:30ch}
body.shop .cpmanual{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}
body.shop .cpmanual>summary{cursor:pointer;color:var(--acc);font:600 .9rem/1.4 var(--sans)}
body.shop .cpmanual[open]>summary{margin-bottom:10px}
/* Il pulsante "paga nel wallet" serve dove c'e' un wallet nel telefono; sul computer il QR. */
@media (hover:hover) and (pointer:fine){body.shop .cpopen,body.shop .cpmob{display:none}}
@media (hover:none){body.shop .cpqr{display:none}}
body.shop .checkout .cocard{margin:10px 0 0;padding:10px 12px;border:1px solid #bfe3f1;border-radius:10px;background:#f3fbfe;
  color:var(--ink)}
body.shop footer .fcard{margin:0;color:#b8d3e2;font:500 .8rem/1.3 var(--sans)}

/* ===== Struttura di beyond-peptides (appended, last-wins) ===== */
/* La striscia in cima, a tutta larghezza, sopra il menu. */
body.shop .topbar{max-width:none;margin:0;border:0;border-radius:0;
  background:linear-gradient(90deg,#055a80 0%,#0a7fb0 50%,#055a80 100%)}
body.shop .topbar .in{max-width:1260px;padding:8px 20px}
body.shop .topbar span,body.shop .topbar .ro{color:#fff}
@media (min-width:981px){body.shop header.top{margin-top:12px}}
/* La lente accanto al carrello. */
body.shop .searchicon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff}
body.shop .searchicon svg{width:20px;height:20px}
body.shop .searchicon:hover{border-color:var(--acc);color:var(--acc)}
@media (min-width:981px){body.shop header.top .searchicon{order:3;border-radius:50%}
  body.shop header.top .carticon{order:4}}
/* Sul telefono: marchio, lente, carrello e menu su una riga sola; il menu e' l'icona a tre righe
   (la parola resta per i lettori di schermo). */
@media (max-width:620px){
body.shop header.top .in{flex-wrap:wrap;align-items:center;gap:8px}
body.shop header.top .brand{flex:1 1 0;max-width:none;min-width:0}
body.shop header.top .brand .bn b{font-size:1.05rem}
body.shop header.top .searchicon,body.shop header.top .carticon{width:42px;height:42px}
body.shop header.top .menubtn{width:42px;height:42px;padding:0;justify-content:center;gap:0;font-size:0;letter-spacing:0;
  border-radius:12px}
body.shop header.top .menubtn::before{width:18px}
body.shop header.top .menubox{flex-basis:100%}
}
/* "Prodotti" con la tendina delle categorie. */
body.shop .navdrop{position:relative;display:flex;align-items:center}
body.shop .navdrop>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
body.shop .navpanel{display:none;position:absolute;top:100%;left:50%;z-index:90;padding-top:14px;transform:translateX(-50%)}
body.shop .navdrop:hover .navpanel,body.shop .navdrop:focus-within .navpanel{display:block}
/* Il contenitore del menu aveva overflow:auto (per scorrere su schermi stretti) e tagliava la tendina. */
@media (min-width:981px){body.shop header.top .nav{overflow:visible}}
body.shop .navin{width:min(560px,92vw);padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 30px 60px -30px rgba(11,43,64,.55)}
body.shop .navin ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:0;padding:0;list-style:none}
body.shop .nav .navin a{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 12px;
  border-radius:9px;background:none;box-shadow:none;color:var(--ink);font:600 .92rem/1.2 var(--sans);
  letter-spacing:0;text-transform:none;white-space:nowrap}
body.shop .nav .navin a:hover{background:#eef6fa;color:var(--acc)}
body.shop .nav .navin a small{color:var(--mute);font:500 .78rem/1 var(--sans)}
body.shop .nav .navin a.navall{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line);border-radius:0;color:var(--acc)}
@media (max-width:620px){
body.shop .menubox .nav .navdrop{display:block;width:100%}
body.shop .menubox .nav .navdrop>a{display:block;width:100%;box-sizing:border-box;text-align:center}
body.shop .navdrop>a::after{display:none}
body.shop .navpanel{display:none !important}
}
/* Home: meno vuoto fra le sezioni, titoli come i loro. */
body.shop .homeflow{padding-top:34px;padding-bottom:10px}
body.shop .catshelf>h2{display:block;margin:0 0 24px;padding:0;border:0;text-align:center;color:var(--ink);
  font:700 clamp(1.45rem,2.4vw,2.05rem)/1.2 var(--sans);letter-spacing:-.015em}
body.shop .catshelf>h2::after{display:none}
body.shop .catshelf{margin:0 0 46px}
/* Le file di prodotti che scorrono di lato. */
body.shop .rowcar{margin:0 0 46px}
body.shop .car{position:relative}
body.shop .cartrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px) / 4);gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px}
body.shop .cartrack::-webkit-scrollbar{display:none}
body.shop .cartrack>.card{scroll-snap-align:start}
body.shop .carbtn{position:absolute;top:36%;z-index:5;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  font:400 2rem/1 var(--sans);cursor:pointer;box-shadow:0 12px 26px -14px rgba(11,43,64,.6);transition:opacity .2s}
body.shop .carbtn span{transform:translateY(-2px)}
body.shop .carbtn[hidden]{display:none}
body.shop .carbtn.prev{left:-20px}
body.shop .carbtn.next{right:-20px}
body.shop .carbtn:disabled{opacity:0;pointer-events:none}
body.shop .carbtn:hover{border-color:var(--acc);color:var(--acc)}
body.shop .carmore{margin:10px 0 0;text-align:right}
body.shop .carmore a{color:var(--acc);font:700 .92rem/1.2 var(--sans);text-decoration:none}
body.shop .carmore a:hover{text-decoration:underline}
@media (max-width:980px){body.shop .cartrack{grid-auto-columns:calc((100% - 36px) / 3)}}
@media (max-width:620px){
body.shop .cartrack{grid-auto-columns:46%;gap:10px;margin:0 -18px;padding:2px 18px 8px;scroll-padding-left:18px}
body.shop .carbtn{display:none !important}
body.shop .rowcar,body.shop .catshelf{margin-bottom:34px}
}
/* La fascia blu: tutto quello che serve sapere prima di comprare. */
body.shop .bxband,body.shop .stband{padding:56px 0;background:radial-gradient(900px 420px at 20% 0%,rgba(47,198,234,.18),transparent 60%),
  linear-gradient(160deg,#00375a 0%,#004d77 100%)}
body.shop .bxbox,body.shop .stbox{padding:clamp(26px,4vw,48px);border:1px solid rgba(255,255,255,.14);border-radius:28px;
  background:rgba(255,255,255,.05)}
body.shop .bxeye{margin:0 0 8px;color:#5fd6f2;font:700 .95rem/1.2 var(--sans)}
body.shop .bxbox>h2,body.shop .stbox>h2{margin:0 0 34px;color:#fff;font:700 clamp(1.6rem,3vw,2.5rem)/1.15 var(--sans);
  letter-spacing:-.02em;max-width:22ch}
body.shop .bxlist{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none}
body.shop .bxlist::before{content:"";position:absolute;top:30px;left:0;right:0;height:1px;background:rgba(255,255,255,.18)}
body.shop .bxlist li{position:relative;text-align:center}
body.shop .bxi{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 0 16px;
  border-radius:50%;background:#003a5c;border:1px solid rgba(255,255,255,.22);color:#fff}
body.shop .bxi svg{width:28px;height:28px}
body.shop .bxlist h3{margin:0 0 8px;color:#fff;font:700 1.08rem/1.3 var(--sans)}
body.shop .bxlist p{margin:0;color:#c9e2ee;font:400 .9rem/1.55 var(--sans)}
@media (max-width:980px){body.shop .bxlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.shop .bxlist::before{display:none}}
@media (max-width:560px){body.shop .bxlist{grid-template-columns:1fr;gap:22px}
  body.shop .bxlist li{display:grid;grid-template-columns:48px 1fr;column-gap:14px;text-align:left}
  body.shop .bxi{grid-row:1 / span 2;width:48px;height:48px;margin:0}
  body.shop .bxi svg{width:22px;height:22px}
  body.shop .bxband,body.shop .stband{padding:34px 0}}
/* Conservazione: cinque passi numerati sulla fascia blu. */
body.shop .stband{margin-top:0}
body.shop .stlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
body.shop .stlist li{padding:20px 18px;border:1px solid rgba(255,255,255,.3);border-radius:14px}
body.shop .stn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0 0 14px;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;font:600 1.1rem/1 var(--sans)}
body.shop .stlist h3{margin:0 0 8px;color:#fff;font:700 1.02rem/1.3 var(--sans)}
body.shop .stlist p{margin:0;color:#c9e2ee;font:400 .88rem/1.55 var(--sans)}
body.shop .stnote{margin:18px 0 0;color:#9fc4d6;font:400 .84rem/1.5 var(--sans)}
@media (max-width:1100px){body.shop .stlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){body.shop .stlist{grid-template-columns:1fr}}
/* Trasparenza: titolo a sinistra, i punti a destra. */
body.shop .quality .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px 56px;align-items:start}
body.shop .quality .qeye{margin:0 0 8px;color:var(--acc);font:700 .95rem/1.2 var(--sans)}
body.shop .quality .qh{margin:0 0 10px;font:700 clamp(1.6rem,3vw,2.4rem)/1.15 var(--sans);letter-spacing:-.02em}
body.shop .quality .qgrid{margin:0}
@media (max-width:820px){body.shop .quality .wrap{grid-template-columns:1fr}}
/* Piede: la striscia di garanzie in cima. */
body.shop footer{padding-top:38px}
body.shop .ftrust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);margin:0 0 34px;padding:0;
  list-style:none;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.04)}
body.shop .ftrust li{display:flex;align-items:center;gap:12px;padding:18px 20px;border-left:1px solid rgba(255,255,255,.12)}
body.shop .ftrust li:first-child{border-left:0}
body.shop .fti{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
body.shop .fti svg{width:21px;height:21px}
body.shop .ftt{display:flex;flex-direction:column;gap:3px;min-width:0}
body.shop .ftt b{color:#fff;font:700 .92rem/1.25 var(--sans)}
body.shop .ftt small{color:#b8d3e2;font:400 .8rem/1.3 var(--sans)}
body.shop .fthelp{flex-wrap:wrap}
body.shop .fthelp .ftt{flex:1 1 160px;min-width:160px}
body.shop .fthelp .fhelpb{display:flex;gap:8px;margin-left:auto;flex:none}
body.shop .fthelp .fcta{padding:9px 14px;font-size:.88rem}
@media (max-width:1100px){body.shop .ftrust{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.shop .ftrust li:nth-child(3){border-left:0}
  body.shop .ftrust li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
@media (max-width:620px){body.shop .ftrust{grid-template-columns:1fr}
  body.shop .ftrust li{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  body.shop .ftrust li:first-child{border-top:0}
  body.shop .fthelp{flex-wrap:wrap}
  body.shop .fthelp .fhelpb{width:100%;margin:4px 0 0}
  body.shop .fthelp .fcta{flex:1 1 0;justify-content:center}}

/* ===== Giro 36: il flacone nuovo anche nelle categorie e nel carrello (appended, last-wins) ===== */
/* Come le cartoline: la foto vecchia non si vede mai prima del 3D; torna solo se il 3D non si fa
   ("flat") o, senza script, dopo tre secondi. */
body.shop .catshelf .ctimg,body.shop .cline .cthumb{position:relative}
body.shop .catshelf .ctimg canvas.c3d,body.shop .cline .cthumb canvas.c3d{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;animation:hsin .45s ease forwards}
body.shop .catshelf .ctimg img.photo,body.shop .cline .cthumb img.photo{opacity:0;animation:hsin .35s ease 3s forwards}
body.shop.bp3d .catshelf .ctimg img.photo,body.shop.bp3d .cline .cthumb img.photo{animation:none}
body.shop .catshelf .ctimg.flat img.photo,body.shop .cline .cthumb.flat img.photo{opacity:1;animation:none;transition:opacity .3s ease}
body.shop .catshelf .ctimg.is-3d img.photo,body.shop .cline .cthumb.is-3d img.photo{opacity:0;animation:none}
body.shop .catshelf .ctile:hover .ctimg.is-3d img{transform:none}
body.shop .cline .cthumb{background:#f2f4f6}

/* ===== Giro 38: trust, shop e schede (appended, last-wins) ===== */
/* Scheda, computer: a sinistra il flacone e sotto le specifiche con i dati del composto; a destra
   l'acquisto, alto quanto le due cose insieme. Telefono: flacone, acquisto, specifiche. */
body.shop .sheethead .withshot.buyfirst{grid-template-areas:"shot info" "side info";grid-template-rows:auto 1fr}
body.shop .sheethead .withshot.buyfirst>.shot{grid-area:shot}
body.shop .sheethead .withshot.buyfirst>.sheetinfo{grid-area:info}
body.shop .sheethead .withshot.buyfirst>.sheetside{grid-area:side}
body.shop .sheetside{display:grid;gap:16px;align-content:start;min-width:0}
body.shop .sheetside .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
body.shop .sheetside .facts li{margin:0;min-width:0}
body.shop .sheetside .refgrid{grid-template-columns:1fr}
body.shop .sheetside .refh{margin:4px 0 8px}
@media (max-width:980px){
body.shop .sheethead .withshot.buyfirst{grid-template-areas:"shot" "info" "side";grid-template-rows:auto}
}
@media (max-width:620px){
body.shop .sheetside .facts li:last-child:nth-child(odd){grid-column:1 / -1}
}
/* La quantita': − e + ai lati del numero, il subtotale a destra. */
body.shop .sheetinfo .rail .qtyrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:2px 0 14px}
body.shop .sheetinfo .rail .qtyrow>label{display:block;width:100%;margin:0;color:var(--mute);
  font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
body.shop .qtyrow .stepper{display:inline-flex;align-items:stretch;border:1px solid #cfdbe3;border-radius:12px;
  background:#fff;overflow:hidden}
body.shop .sheetinfo .rail .qtyrow .stepper input{width:76px;height:48px;margin:0;padding:0 6px;border:0;border-radius:0;
  box-shadow:none;background:transparent;text-align:center;color:var(--ink);font:700 1.1rem/1 var(--sans)}
body.shop .qtyrow.on .stepper input{width:58px;-moz-appearance:textfield;appearance:textfield}
body.shop .qtyrow.on .stepper input::-webkit-inner-spin-button,
body.shop .qtyrow.on .stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body.shop .qtyrow .stp{width:46px;border:0;background:#f2f6f9;color:var(--ink);font:600 1.35rem/1 var(--sans);cursor:pointer}
body.shop .qtyrow .stp:hover:not(:disabled){background:#e2edf3;color:var(--acc)}
body.shop .qtyrow .stp:disabled{color:#b8c4cc;cursor:default}
body.shop .qtyrow .qtotal{margin:0 0 0 auto;color:var(--soft);font:600 .88rem/1.2 var(--sans);text-align:right}
body.shop .qtyrow .qtotal b{display:block;color:var(--ink);font:700 1.15rem/1.2 var(--sans);font-variant-numeric:tabular-nums}
body.shop .qtyrow .qtotal small{display:block;color:#12805c;font:700 .78rem/1.2 var(--sans)}
body.shop .qtyrow .qtotal small:empty{display:none}
/* A chi scrivere, sotto le garanzie. */
body.shop .askus{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
body.shop .askus p{margin:0;color:var(--soft);font:500 .86rem/1.45 var(--sans)}
body.shop .askus b{color:var(--ink)}
body.shop .askus .askb{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
body.shop .askb a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px 0 10px;border:1px solid #cfdbe3;
  border-radius:999px;color:var(--ink);font:700 .85rem/1 var(--sans);text-decoration:none;transition:border-color .15s,color .15s}
body.shop .askb a .ficon{width:20px;height:20px;flex:none}
body.shop .askb a.tg .ficon{color:#2aa3d8}
body.shop .askb a:hover{border-color:var(--acc);color:var(--acc)}
/* Come funziona l'ordine e la conservazione, sulla scheda. */
body.shop .osteps,body.shop .pstore{list-style:none;margin:0;padding:0;display:grid;gap:16px 22px}
body.shop .osteps{grid-template-columns:repeat(3,minmax(0,1fr))}
body.shop .pstore{grid-template-columns:repeat(2,minmax(0,1fr))}
body.shop .osteps li,body.shop .pstore li{display:flex;align-items:flex-start;gap:12px;margin:0}
body.shop .osteps .osn,body.shop .pstore .osn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font:700 .88rem/1 var(--sans)}
body.shop .pstore .osn{width:26px;height:26px;background:rgba(10,127,176,.12);color:var(--acc);font-size:.8rem}
body.shop .osteps h3,body.shop .pstore h3{margin:3px 0 4px;color:var(--ink);font:700 .96rem/1.3 var(--sans)}
body.shop .osteps p,body.shop .pstore p{margin:0;color:var(--soft);font:500 .87rem/1.5 var(--sans)}
body.shop #how .hint{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0}
body.shop #storage .hint{margin:14px 0 0}
@media (max-width:760px){body.shop .osteps,body.shop .pstore{grid-template-columns:1fr}}
/* Lo shop: l'ordinamento, una riga di pillole sotto il titolo (sul telefono scorre di lato). */
body.shop .sorts{display:flex;align-items:center;gap:8px;max-width:100%;margin:-2px 0 18px;overflow-x:auto;
  scrollbar-width:none}
body.shop .sorts::-webkit-scrollbar{display:none}
body.shop .sorts>span{flex:none;margin-right:2px;color:var(--mute);font:700 .66rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase}
body.shop .sorts a{flex:none;padding:8px 13px;border:1px solid #dbe4ea;border-radius:999px;background:#fff;color:var(--ink);
  font:600 .84rem/1 var(--sans);text-decoration:none;white-space:nowrap}
body.shop .sorts a.on{border-color:#0b2b40;background:#0b2b40;color:#fff}
body.shop .sorts a:hover:not(.on){border-color:var(--acc);color:var(--acc)}
/* Sul telefono le pillole vanno a capo: scorrendo di lato quella scelta finiva fuori schermo. */
@media (max-width:620px){
body.shop .sorts{flex-wrap:wrap;overflow:visible;gap:6px}
body.shop .sorts>span{width:100%;margin:0 0 2px}
body.shop .sorts a{padding:7px 11px;font-size:.8rem}
}

/* ===== Giro 39: recensioni (appended, last-wins) ===== */
body.shop .stars{display:inline-flex;gap:1px;line-height:1;vertical-align:middle;white-space:nowrap}
body.shop .stars i{font-style:normal;color:#d5dde2}
body.shop .stars i.on{color:#f2a516}
body.shop .stars i.half{background:linear-gradient(90deg,#f2a516 50%,#d5dde2 50%);-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.shop .pcrate{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:.9rem}
body.shop .pcrate small{color:var(--mute);font:600 .78rem/1 var(--sans)}
body.shop .sheetinfo .rvmini{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;color:var(--ink);
  text-decoration:none;font:700 .92rem/1 var(--sans)}
body.shop .rvmini .stars{font-size:1.05rem}
body.shop .rvmini span:last-child{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body.shop .rvsum{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px 32px;align-items:center;
  margin:0 0 6px;padding:0 0 18px;border-bottom:1px solid var(--line)}
body.shop .rvavg{display:grid;gap:7px;margin:0}
body.shop .rvavg b{color:var(--ink);font:800 2.6rem/1 var(--sans)}
body.shop .rvavg .stars{font-size:1.3rem}
body.shop .rvavg span{color:var(--mute);font:600 .85rem/1.3 var(--sans)}
body.shop .rvbars{display:grid;gap:6px;margin:0;padding:0;list-style:none}
body.shop .rvbars li{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:10px;margin:0;
  color:var(--soft);font:600 .82rem/1 var(--sans)}
body.shop .rvbars .bar{height:8px;border-radius:99px;background:#e6edf1;overflow:hidden}
body.shop .rvbars .fill{display:block;width:0;height:100%;border-radius:99px;background:#f2a516}
body.shop .rvlist{margin:0;padding:0;list-style:none}
body.shop .rvlist li{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
body.shop .rvlist li:last-child{border-bottom:0}
body.shop .rvtop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
body.shop .rvtop b{color:var(--ink);font:700 .98rem/1.3 var(--sans)}
body.shop .rvtop>[itemprop=reviewRating]{display:none}
body.shop .otrack+p .trk{margin-top:2px}
body.shop .rvmeta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;color:var(--mute);font:500 .8rem/1.3 var(--sans)}
body.shop .rvmeta [itemprop=author]{color:var(--ink);font-weight:700}
body.shop .rvver{color:#12805c;font-weight:700}
body.shop .rvbody{margin:0;color:var(--soft);line-height:1.6;overflow-wrap:anywhere}
body.shop .rvreply{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--acc);border-radius:0 10px 10px 0;background:#f4f8fb}
body.shop .rvreply b{display:block;margin:0 0 4px;color:var(--acc);font:700 .8rem/1.2 var(--sans)}
body.shop .rvreply p{margin:0;color:var(--soft);font:500 .88rem/1.5 var(--sans);overflow-wrap:anywhere}
body.shop #reviews>.hint{margin:12px 0 0}
@media (max-width:620px){body.shop .rvsum{grid-template-columns:1fr}}
/* La pagina dell'ordine: il voto. Le stelle sono radio in ordine inverso, colorate col CSS. */
body.shop .rvask .rvform{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
body.shop .rvask .rvfor{margin:0 0 8px;color:var(--ink);font:700 1rem/1.3 var(--sans)}
body.shop .rvask .rvstars{margin:0 0 12px;padding:0;border:0;min-width:0}
body.shop .rvask .rvstars legend{margin:0 0 4px;padding:0;color:var(--mute);font:700 .68rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
body.shop .rvask .rvpick{display:inline-flex;flex-direction:row-reverse;gap:2px}
body.shop .rvask .rvpick input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
body.shop .rvask .rvpick label{display:inline-block;margin:0;padding:0 2px;color:#cfd8de;font-size:2.2rem;line-height:1;
  cursor:pointer;transition:color .1s}
body.shop .rvask .rvpick label:hover,body.shop .rvask .rvpick label:hover~label,
body.shop .rvask .rvpick input:checked~label{color:#f2a516}
body.shop .rvask .rvpick input:focus-visible+label{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
body.shop .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.shop .rvask .rvdone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line)}
/* Il pannello. */
body.shop .rvrules{max-width:780px;margin:0 0 16px}
body.shop .rvadm{margin:0 0 14px}
body.shop .rvadm.pending{border-left:4px solid #f2a516}
body.shop .rvadm.hidden{opacity:.72}
body.shop .rvadmtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
body.shop .rvadmtop small{color:var(--mute)}
body.shop .rvacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
body.shop .rvbars .fill.w0{width:0%}body.shop .rvbars .fill.w5{width:5%}body.shop .rvbars .fill.w10{width:10%}body.shop .rvbars .fill.w15{width:15%}body.shop .rvbars .fill.w20{width:20%}body.shop .rvbars .fill.w25{width:25%}body.shop .rvbars .fill.w30{width:30%}body.shop .rvbars .fill.w35{width:35%}body.shop .rvbars .fill.w40{width:40%}body.shop .rvbars .fill.w45{width:45%}body.shop .rvbars .fill.w50{width:50%}body.shop .rvbars .fill.w55{width:55%}body.shop .rvbars .fill.w60{width:60%}body.shop .rvbars .fill.w65{width:65%}body.shop .rvbars .fill.w70{width:70%}body.shop .rvbars .fill.w75{width:75%}body.shop .rvbars .fill.w80{width:80%}body.shop .rvbars .fill.w85{width:85%}body.shop .rvbars .fill.w90{width:90%}body.shop .rvbars .fill.w95{width:95%}body.shop .rvbars .fill.w100{width:100%}
/* ===== Giro 39b: cassa (appended, last-wins) ===== */
body.shop .checkout .cocard+.hint{margin-top:12px}
body.shop .checkout .coterms{margin:10px 0 14px;font-size:.84rem}
body.shop .checkout .coterms a{color:var(--acc)}
body.shop .rail .askus{margin-top:16px}
/* Il pallino dell'opzione di pagamento non si stringe quando il testo va a capo (USDC · EVM sul telefono). */
body.shop .checkout .pay input[type=radio]{flex:none}

/* ===== Giro 40: certificati in blocco (appended, last-wins) ===== */
body.shop .coazip h3{margin:0 0 6px}
body.shop .coazip .impt{margin:12px 0 0}
body.shop .coazip tr.zno td{color:var(--mute)}
body.shop .coazip tr.zok td:last-child{color:#12805c;font-weight:700}

/* ===== Giro 41: il pagamento si conferma da solo (appended, last-wins) ===== */
body.shop .paywait{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid #bfe3f1;
  border-radius:10px;background:#f3fbfe;color:var(--ink);font:600 .88rem/1.4 var(--sans)}
body.shop .paywait[hidden]{display:none}
body.shop .pwdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(10,127,176,.45);animation:pwpulse 1.6s ease-out infinite}
@keyframes pwpulse{0%{box-shadow:0 0 0 0 rgba(10,127,176,.45)}100%{box-shadow:0 0 0 10px rgba(10,127,176,0)}}
@media (prefers-reduced-motion:reduce){body.shop .pwdot{animation:none}}

/* ===== Giro 42: aggiungi dalla cartolina, garanzia di consegna, acqua (appended, last-wins) ===== */
/* La cornice passa dal link al riquadro che contiene link e pulsante. */
body.shop .cardbox{display:flex;flex-direction:column;min-width:0;border:1px solid #e3e8ee;border-radius:16px;background:#fff;
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body.shop .cardbox:hover{transform:translateY(-3px);border-color:#cfdbe3;box-shadow:0 22px 44px -30px rgba(11,43,64,.45)}
body.shop .cardbox>a.card,body.shop .cardbox>a.card:hover{flex:1 1 auto;border:0;border-radius:0;box-shadow:none;transform:none}
body.shop .cartrack>.cardbox{scroll-snap-align:start}
/* Tornando a una cartolina (#c-...), la barra fissa di ricerca e categorie non deve coprirla. */
body.shop .cardbox{scroll-margin-top:170px}
@media (max-width:620px){body.shop .cardbox{scroll-margin-top:140px}}
body.shop .cardbox form.qadd{margin:0;padding:0 16px 16px}
body.shop .cardbox form.qadd .btn,body.shop .cardbox a.qadd{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;margin:0;font-size:.9rem}
body.shop .cardbox a.qadd{width:auto;margin:0 16px 16px}
body.shop .cardbox .qadd svg{width:18px;height:18px;flex:none}
/* style.css sul telefono da' a ogni .btn flex:1 1 100%: dentro la colonna della cartolina, nelle file
   scorrevoli (altezza fissa), il pulsante si prendeva tutta l'altezza e schiacciava il flacone. */
body.shop .cardbox>.qadd,body.shop .cardbox>form.qadd,body.shop .cardbox form.qadd .btn{flex:none}
body.shop .cardbox>a.card{min-height:0}
body.shop .cardbox .plate{flex:none}
body.shop .cardbox form.qadd .btn:hover,body.shop .cardbox a.qadd:hover{background:#0a7fb0;border-color:#0a7fb0;color:#fff}
@media (max-width:620px){
body.shop .cardbox{border-radius:12px}
body.shop .cardbox form.qadd{padding:0 10px 10px}
body.shop .cardbox a.qadd{margin:0 10px 10px}
body.shop .cardbox form.qadd .btn,body.shop .cardbox a.qadd{min-height:40px;font-size:.82rem;padding:0 8px}
}
/* L'avviso dopo l'aggiunta: in basso, fisso, sparisce da solo dopo qualche secondo. */
body.shop .addtoast{position:fixed;left:50%;bottom:18px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  width:min(560px,calc(100% - 24px));padding:12px 14px 12px 16px;border:1px solid #cfe3ec;border-radius:14px;background:#fff;
  box-shadow:0 24px 48px -20px rgba(11,43,64,.45);transform:translateX(-50%);animation:toastout .4s ease 9s forwards}
body.shop .addtoast p{margin:0;color:var(--ink);font:600 .92rem/1.35 var(--sans)}
body.shop .addtoast p:first-child{flex:1 1 220px;display:flex;align-items:center;gap:8px}
body.shop .addtoast .tick{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:#12805c;color:#fff;font-size:.8rem}
body.shop .addtoast .taacts{display:flex;gap:8px}
@keyframes toastout{to{opacity:0;visibility:hidden;transform:translate(-50%,12px)}}
/* La garanzia di consegna: un link alle condizioni, con lo stesso segno delle altre voci. */
body.shop .guarantees li.glost a{color:inherit;text-decoration:underline;text-decoration-color:rgba(10,127,176,.45);
  text-underline-offset:3px}
body.shop .guarantees li.glost a:hover{color:var(--acc)}
/* L'acqua batteriostatica sotto il riquadro d'acquisto. */
body.shop .sheetinfo .needs{margin:14px 0 0;padding:14px 16px;border:1px dashed #bfd3dd;border-radius:14px;background:#f8fbfd}
body.shop .needs p{margin:0 0 10px;color:var(--soft);font:500 .86rem/1.45 var(--sans)}
body.shop .needs p b{color:var(--ink)}
body.shop .needrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.shop .needrow a{display:flex;flex-direction:column;color:var(--ink);font:700 .95rem/1.3 var(--sans);text-decoration:none}
body.shop .needrow a small{color:var(--mute);font:500 .8rem/1.3 var(--sans)}
body.shop .needrow form{margin:0}

/* ===== Giro 43: la foto delle cartoline solo quando serve (appended, last-wins) ===== */
/* Un'immagine senza src non mostra niente (ne' il testo alternativo ne' l'icona rotta). */
body.shop img.photo[data-src]:not([src]){display:none}

/* ===== Giro 43b: la tabella delle specifiche (appended, last-wins) ===== */
body.shop .sheetside .spech{margin:0 0 -6px;color:var(--ink);font:800 1.05rem/1.2 var(--sans)}
body.shop .sheetside .facts.specs{display:block;margin:0;padding:2px 18px;border:1px solid var(--line);border-radius:14px;
  background:#fff;list-style:none}
body.shop .sheetside .facts.specs li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0;
  padding:11px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;
  color:var(--mute);font:600 .84rem/1.35 var(--sans);letter-spacing:0;text-transform:none}
body.shop .sheetside .facts.specs li:last-child{border-bottom:0}
body.shop .sheetside .facts.specs li::before{content:none}
body.shop .sheetside .facts.specs li b{display:block;margin:0;color:var(--ink);font:700 .92rem/1.35 var(--sans);text-align:right;
  overflow-wrap:anywhere}
body.shop .sheetside .facts.specs li b sub{font-size:.7em;line-height:0}
body.shop .sheetside .refwrap .refcard{padding:12px 16px}
@media (max-width:620px){body.shop .sheetside .facts.specs{padding:2px 14px}
  body.shop .sheetside .facts.specs li:last-child:nth-child(odd){grid-column:auto}}

/* ===== Giro 43c: spedizione e resi; barra d'acquisto sul telefono (appended, last-wins) ===== */
body.shop .srlist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
body.shop .srlist li{position:relative;margin:0;padding:0 0 0 26px;color:var(--soft);font:500 .9rem/1.55 var(--sans)}
body.shop .srlist li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;border-radius:50%;
  background:rgba(10,127,176,.18);box-shadow:inset 0 0 0 2px var(--acc)}
body.shop #returns .hint{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0}
body.shop .buybar{display:none}
@media (max-width:980px){
body.shop .buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #dbe6ec;background:rgba(255,255,255,.97);
  box-shadow:0 -12px 30px -18px rgba(11,43,64,.35);transform:translateY(110%);transition:transform .25s ease}
body.shop .buybar[hidden]{display:none}
body.shop .buybar.on{transform:none}
body.shop .buybar .bbt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
body.shop .buybar .bbt b{overflow:hidden;color:var(--ink);font:700 .9rem/1.25 var(--sans);white-space:nowrap;text-overflow:ellipsis}
body.shop .buybar .bbt small{color:var(--mute);font:600 .78rem/1.3 var(--sans)}
body.shop .buybar form{flex:none;margin:0}
body.shop .buybar .btn{min-height:44px;padding:0 18px;white-space:nowrap}
/* Con la barra in basso, la fine della pagina non le finisce sotto. */
body.shop:has(.buybar.on){padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){body.shop .buybar{transition:none}}

/* ===== Giro 45: da compratore (appended, last-wins) ===== */
/* Le frasi in piccolo (pagamento, spedizione, prezzo a confezione nel carrello) in caratteri
   normali: in monospazio sembravano l'uscita di un programma. Le etichette maiuscole restano. */
body.shop .ship,body.shop .cname small{font-family:var(--sans);font-size:.84rem;line-height:1.5;letter-spacing:0}
/* Il risparmio a pacchi in verde: in rosso sembrava un difetto. */
body.shop .bundles .off{color:#12805c}
/* La ricerca: arrivando dalla lente, il campo non finisce sotto l'intestazione fissa. */
body.shop #find{scroll-margin-top:110px}
/* Il codice sconto chiuso dietro una riga. */
body.shop .promohas{margin:0 0 16px}
body.shop .promohas>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  color:var(--acc);font:600 .92rem/1.4 var(--sans)}
body.shop .promohas>summary::-webkit-details-marker{display:none}
body.shop .promohas>summary::after{content:"+";font-weight:700}
body.shop .promohas[open]>summary::after{content:"\2212"}
body.shop .promohas[open]>summary{margin:0 0 10px}
/* La cassa: il secondo riquadro della colonna (garanzie e contatti). */
body.shop .rail>.coassure{margin-top:14px}
body.shop .coassure .guarantees{margin-top:0;padding-top:0;border-top:0}
@media (max-width:980px){
  /* Sul telefono: riepilogo, modulo, garanzie. La colonna si scioglie e i suoi riquadri prendono
     posto ai lati del modulo. */
  body.shop .checkout ~ .rail{display:contents}
  body.shop .checkout ~ .rail>.panel:first-child{order:-1}
  body.shop .checkout ~ .rail>.coassure{order:1;margin-top:0}
}
/* Home, sul telefono: i cinque passi della conservazione in una lista compatta e non in cinque
   riquadri alti (erano due schermate). */
@media (max-width:620px){
  body.shop .stlist{gap:0}
  body.shop .stlist li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:14px 0;border:0;
    border-top:1px solid rgba(255,255,255,.16);border-radius:0}
  body.shop .stlist li:first-child{border-top:0;padding-top:0}
  body.shop .stn{grid-row:1 / span 2;width:32px;height:32px;margin:0;font-size:.95rem}
  body.shop .stbox>h2{margin-bottom:22px}
}

/* ===== Giro 46: a che cosa serve (aree di ricerca) e "Che cos'e'" piu' ricco (appended, last-wins) ===== */
body.shop .areas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 16px}
body.shop .areas .arlab{flex-basis:100%;margin:0 0 2px;color:var(--mute);font:700 .72rem/1.2 var(--sans);
  letter-spacing:.08em;text-transform:uppercase}
body.shop .areas .ar{display:inline-flex;margin:0;align-items:center;padding:5px 12px;border-radius:999px;
  background:#e6f5fb;color:#075d82;font:600 .86rem/1.2 var(--sans)}
body.shop #what h3{margin:20px 0 6px;color:var(--ink);font:700 1.02rem/1.3 var(--sans)}
body.shop #what h3+p{margin:0}
body.shop #what .inblend{display:grid;gap:12px;margin:0;padding:0;list-style:none}
body.shop #what .inblend li{padding:0 0 0 14px;border-left:3px solid #bfe3f1;color:var(--soft);font:400 .95rem/1.55 var(--sans)}
body.shop #what .inblend b{display:block;margin:0 0 2px;color:var(--ink)}
body.shop #what .rnote{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--mute);
  font:400 .8rem/1.5 var(--sans)}

/* ===== Giro 47: PayPal USD (PYUSD) da PayPal e Venmo (appended, last-wins) ===== */
body.shop .pynet{margin:14px 0 0;padding:10px 12px;border-left:3px solid #d97706;border-radius:8px;
  background:#fff7ed;color:#7c2d12;font:600 .9rem/1.45 var(--sans)}
body.shop .pyopen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0}
body.shop .pyopen span{color:var(--mute);font:600 .88rem/1.3 var(--sans)}

/* ===== Giro 48: l'opzione PayPal / Venmo alla cassa (appended, last-wins) ===== */
body.shop .payopts label.paypy{align-items:flex-start;border-color:#9fd3e6;background:linear-gradient(180deg,#f3fbfe,#fff)}
body.shop .payopts label.paypy input{margin-top:4px}
body.shop .payopts label.paypy:has(input:checked){border-color:var(--acc);background:#eaf7fc;box-shadow:0 0 0 1px var(--acc)}
body.shop .paypy .pyico{display:inline-flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;background:#0a7fb0;color:#fff}
body.shop .paypy .pyico svg{width:22px;height:22px}
body.shop .paypy>span:last-child{font-size:1.08rem}
body.shop .paypy .pychips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-style:normal}
body.shop .paypy .pychips i{padding:3px 10px;border:1px solid #c9dfe8;border-radius:999px;background:#fff;color:var(--ink);
  font:700 .78rem/1.3 var(--sans);font-style:normal;letter-spacing:.01em}

/* ===== Giro 49: PayPal e Venmo piu' in vista (appended, last-wins) ===== */
body.shop .topbar span.py{display:inline;order:-1;font-weight:800}

/* ===== Giro 50: i certificati in vista — scheda, pagina /verify (appended, last-wins) ===== */
/* Sulla scheda, sotto il nome: il certificato prima di scorrere, con il lotto, porta al riquadro. */
body.shop .coachip{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:9px 14px 9px 10px;
  border:1px solid #bfe3d6;border-radius:12px;background:#effaf5;color:#0d5c45;text-decoration:none;max-width:100%}
body.shop .coachip:hover{border-color:#7fcdb0;background:#e3f6ee}
body.shop .coachip svg{flex:none;width:26px;height:26px;color:#14866a}
body.shop .coachip span{display:flex;flex-direction:column;min-width:0}
body.shop .coachip b{font:700 .9rem/1.25 var(--sans);color:#0d5c45}
body.shop .coachip small{margin-top:1px;color:#3f7a68;font:600 .74rem/1.35 var(--mono);letter-spacing:.03em;overflow-wrap:anywhere}
body.shop .coachip i{flex:none;font-style:normal;font-weight:700;color:#14866a}
body.shop #coa{scroll-margin-top:90px}
/* Il certificato nella colonna delle specifiche: stretta, quindi ogni referto su due righe
   (l'etichetta sopra, il risultato e il link sotto), come sul telefono. */
body.shop .sheetside .panel.coa{margin:0}
body.shop .sheetside .panel.coa h2{font-size:1.05rem}
body.shop .sheetside .coareps li{grid-template-columns:minmax(0,1fr) auto}
body.shop .sheetside .coareps .rl{grid-column:1/-1}
body.shop .sheetside .coareps .rv{grid-column:1}
body.shop .sheetside .coareps .ro{grid-column:2;grid-row:2}
/* Lotto e laboratorio come le righe delle Specifiche qui sopra (etichetta a sinistra, valore a
   destra), e le etichette dei referti nello stesso carattere: due riquadri vicini, un disegno. */
body.shop .sheetside .panel.coa .facts{display:block;margin:14px 0 0;padding:2px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;list-style:none}
body.shop .sheetside .panel.coa .facts li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0;
  padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;
  color:var(--mute);font:600 .84rem/1.35 var(--sans);letter-spacing:0;text-transform:none}
body.shop .sheetside .panel.coa .facts li:last-child{border-bottom:0}
body.shop .sheetside .panel.coa .facts li::before{content:none}
body.shop .sheetside .panel.coa .facts li b{display:block;margin:0;color:var(--ink);font:700 .92rem/1.35 var(--sans);text-align:right}
body.shop .sheetside .coareps .rl{color:var(--mute);font:600 .84rem/1.35 var(--sans);letter-spacing:0;text-transform:none}
/* /verify: tutti i certificati in griglia, due colonne dove c'e' posto. */
body.shop .coagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:14px;align-items:start;margin:0 0 18px}
body.shop .coagrid .panel.coafound{margin:0}
/* Contatti: i due canali come due riquadri cliccabili, poi cosa scrivere e dove guardare prima. */
body.shop .ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:0 0 16px}
body.shop .panel.ccard{display:flex;gap:16px;align-items:flex-start;margin:0;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
body.shop .panel.ccard:hover{border-color:#7cc4e0;box-shadow:0 6px 20px rgba(9,60,90,.08)}
body.shop .ccard .cci{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#e6f5fb;color:#0a7cb0}
body.shop .ccard .cci.tg{color:#229ed9}
body.shop .ccard .cci svg{width:26px;height:26px}
body.shop .ccard b{display:block;font:700 1.05rem/1.3 var(--sans)}
body.shop .ccard .ccv{display:block;margin:2px 0 6px;color:#0a6f9e;font:600 .92rem/1.35 var(--mono);overflow-wrap:anywhere}
body.shop .ccard small{display:block;color:var(--mute);font:400 .88rem/1.5 var(--sans)}
body.shop .clinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
body.shop .clinks a{font-weight:600}

/* ===== Giro 51: pagare dalle app — loghi, cassa in due gruppi (appended, last-wins) ===== */
/* Il marchio dell'app in una pastiglia bianca: icona a colori e nome, come i badge "paga con". */
body.shop .plogo{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:#1a2b33;font:700 .8rem/1 var(--sans);white-space:nowrap}
body.shop .plogo svg{width:16px;height:16px;flex:none}
body.shop .plogo svg.wm{width:62px;height:13px}
body.shop .plogo.coin{padding:5px 10px}
/* Sulla scheda, sotto i pulsanti d'acquisto. */
body.shop .paylogos{margin:12px 0 16px;text-align:center}
body.shop .paylogos>p:first-child{margin:0 0 8px;color:var(--mute);font:600 .8rem/1.3 var(--sans)}
body.shop .plogos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
/* Nel piede, sul blu: la pastiglia resta bianca, le monete restano come prima. */
body.shop footer .fpay{flex-wrap:wrap}
body.shop footer .fpay .plogo{border-color:transparent}
/* USDC e USDT nella stessa pastiglia bianca dei marchi: prima erano contorni sul blu, e accanto
   ai badge bianchi sembravano di un altro sito (proprietario). */
body.shop footer .fpay b{padding:5px 10px;border:1px solid transparent;border-radius:8px;background:#fff;color:#1a2b33;
  font:700 .8rem/1 var(--sans);letter-spacing:0}
/* Alla cassa: le app in vista, una per riga, col marchio grande; i portafogli sotto, chiusi. */
body.shop .paygrp{margin:6px 0 8px;color:var(--ink);font:700 .95rem/1.3 var(--sans)}
body.shop .payopts.apps{margin-bottom:14px}
body.shop .payopts label.app{align-items:center;border-color:#9fd3e6;background:linear-gradient(180deg,#f3fbfe,#fff)}
body.shop .payopts label.app:has(input:checked){border-color:var(--acc);background:#eaf7fc;box-shadow:0 0 0 1px var(--acc)}
body.shop .applogos{display:inline-flex;flex:none;gap:4px;align-items:center;justify-content:center;min-width:48px;height:44px;
  padding:0 8px;border:1px solid var(--line);border-radius:12px;background:#fff}
body.shop .applogos svg{width:24px;height:24px}
body.shop .applogos svg.wm{width:52px;height:11px}
body.shop .applogos.big{display:flex;justify-content:flex-start;gap:10px;width:auto;height:auto;margin:0 0 10px;padding:0;border:0;background:none}
body.shop .applogos.big svg{width:34px;height:34px}
body.shop .applogos.big svg.wm{width:110px;height:23px}
body.shop details.paymore{margin:0 0 18px;border:1px solid var(--line);border-radius:10px;background:#fff}
body.shop details.paymore>summary{cursor:pointer;padding:14px 18px;color:var(--ink);font:700 .95rem/1.3 var(--sans);list-style:none}
body.shop details.paymore>summary::-webkit-details-marker{display:none}
body.shop details.paymore>summary::after{content:"+";float:right;color:var(--acc);font-weight:800}
body.shop details.paymore[open]>summary::after{content:"−"}
body.shop details.paymore>.payopts{margin:0 14px 10px}
body.shop details.paymore>.cocard{margin:0 18px 14px}
/* Il QR dell'indirizzo, per Cash App: piccolo, a sinistra, sotto l'indirizzo. */
body.shop .appqr{margin:12px 0 4px}
body.shop .appqr svg{width:150px;height:150px}
body.shop .trackh .plogo{vertical-align:middle;margin-right:6px}
/* Sul telefono il marchio sopra il testo: affiancati, il testo restava in una colonna di tre parole. */
@media (max-width:560px){
body.shop .payopts label.app{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
body.shop .payopts label.app input{grid-row:1 / span 2;align-self:center}
body.shop .payopts label.app .applogos{justify-self:start;height:38px;margin:0 0 8px}
}

/* ===== Giro 52: tutte le fasce blu come riquadri sullo sfondo chiaro (appended, last-wins) ===== */
/* "Tutto quello che serve sapere" e "Come conservare i flaconi" erano un fondo blu a tutta
   larghezza con un secondo riquadro dentro, mentre la testata e i certificati sono riquadri blu
   sul fondo chiaro: due disegni nella stessa pagina (proprietario). Ora sono tutti riquadri gemelli
   della testata: stessi margini, stessi angoli, stesso fondo; dentro niente secondo bordo. Il
   piede resta una fascia blu. */
body.shop .bxband,body.shop .stband{margin:28px 14px;padding:56px 0;border-radius:26px;overflow:hidden;background:
  radial-gradient(1000px 560px at 70% -12%,rgba(36,184,232,.3),transparent 62%),
  radial-gradient(760px 520px at 4% 118%,rgba(0,128,186,.45),transparent 60%),
  linear-gradient(155deg,#00375a 0%,#004d77 50%,#003b61 100%)}
body.shop .bxbox,body.shop .stbox{padding:0;border:0;border-radius:0;background:none}
body.shop .stband{margin-top:28px}
@media (max-width:980px){body.shop .bxband,body.shop .stband{margin:20px 10px;padding:44px 0;border-radius:20px}}
@media (max-width:620px){body.shop .bxband,body.shop .stband{margin:16px 8px;padding:32px 0;border-radius:16px}}

/* ===== Giro 53: da acquirente, sul telefono (appended, last-wins) ===== */
/* "Rimuovi" nel carrello era alto 14 px: troppo piccolo per un dito. Area di tocco da 40 px, il
   testo resta discreto. */
body.shop .cline .ctotal .linkbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
body.shop .cline form.qty{position:relative;z-index:1}
/* La nota accanto all'etichetta del telefono ("solo per il corriere"): in tondo e minuscolo,
   non nel maiuscolo monospazio delle etichette. */
.shop form label small.why{display:inline;margin:0 0 0 6px;font:500 .78rem/1.3 var(--sans);letter-spacing:0;
  text-transform:none;color:var(--mute)}
.shop form.checkout .flash.bad{margin:0 0 16px;padding:12px 16px;border:1px solid #f1b8b8;border-radius:10px;
  background:#fdeeee;color:#8c1d1d;font:600 .95rem/1.4 var(--sans)}
/* La casella del promemoria per la recensione: una frase da leggere, non un'etichetta in maiuscolo. */
.shop form label.optin{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 18px;color:var(--soft);
  font:500 .88rem/1.45 var(--sans);letter-spacing:0;text-transform:none}
.shop form label.optin input{flex:none;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--acc)}

/* ===== Giro 54: scheda prodotto sul modello di beyond-peptides (appended, last-wins) ===== */
/* I pacchi nel riquadro d'acquisto: quattro riquadri due per due, il prezzo totale grande, sotto il
   prezzo a pacco e il risparmio. La scelta si vede col bordo e il fondo, senza script. */
body.shop .rail fieldset.packs{margin:4px 0 14px;padding:0;border:0;min-width:0}
body.shop .rail fieldset.packs legend{margin:0 0 8px;padding:0;color:var(--ink);font:600 .9rem/1.3 var(--sans);
  letter-spacing:0;text-transform:none}
body.shop .pkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.shop .rail form label.pk{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 12px;
  border:1.5px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;
  font:500 .8rem/1.35 var(--sans);letter-spacing:0;text-transform:none;transition:border-color .15s,background .15s}
body.shop .rail form label.pk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
body.shop .pk .pkt{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
body.shop .pk .pkn{font:700 .92rem/1.25 var(--sans);color:var(--ink)}
body.shop .pk .pkp{font:700 .92rem/1.25 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
body.shop .pk small{display:block;color:var(--mute);font:500 .76rem/1.35 var(--sans)}
body.shop .pk small.pks{color:#0f7a4e;font-weight:700}
/* "Spedizione gratis · risparmi $50" sui pacchetti oltre la soglia: una targhetta verde, non una riga in piu'. */
body.shop .pk small.pkfree{display:inline-flex;align-items:center;margin-top:5px;padding:2px 8px;border-radius:999px;
  background:#e3f6ec;color:#0b6b43;font:700 .72rem/1.35 var(--sans)}
body.shop .rail form label.pk:hover{border-color:#9ccbe0}
body.shop .rail form label.pk:has(input:checked){border-color:var(--acc);background:#eef8fc;box-shadow:0 0 0 1px var(--acc)}
body.shop .rail form label.pk:has(input:focus-visible){outline:3px solid #8fd3ee;outline-offset:2px}
/* Prezzo al mg e spedizione, sotto il prezzo: le due cose che si confrontano prima di comprare. */
body.shop .rail .packprice .permg{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;
  background:#e8f6ee;color:#0f7a4e;font:700 .78rem/1.4 var(--sans);vertical-align:1px}
body.shop .rail .shipline{display:flex;flex-wrap:wrap;gap:2px 12px;margin:-4px 0 14px;font:500 .84rem/1.45 var(--sans)}
body.shop .rail .shipline a{color:var(--soft);text-decoration:underline;text-decoration-color:#b9d3dd;text-underline-offset:3px}
body.shop .rail .shipline span{color:#0f7a4e;font-weight:600}
/* Il prezzo al mg sotto ogni dosaggio. */
body.shop .doses .dose{flex-direction:column;align-items:center;line-height:1.15}
body.shop .doses .dose small{display:block;margin-top:2px;font:600 .68rem/1.1 var(--sans);opacity:.75;letter-spacing:0}
/* "Come pagare" nel riquadro d'acquisto: una riga che si apre. */
body.shop .rail details.paynote{margin:10px 0 0}
body.shop .rail details.paynote>summary{cursor:pointer;color:var(--acc);font:600 .86rem/1.4 var(--sans)}
body.shop .rail details.paynote>p{margin:6px 0 0}
/* Le fisarmoniche sotto la scheda. */
body.shop details.panel.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;cursor:pointer;list-style:none}
body.shop details.panel.fold>summary::-webkit-details-marker{display:none}
body.shop details.panel.fold>summary h2{margin:0}
body.shop details.panel.fold>summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translateY(-3px);
  transition:transform .2s ease}
body.shop details.panel.fold[open]>summary{margin-bottom:16px}
body.shop details.panel.fold[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
body.shop details.panel.fold>summary:focus-visible{outline:3px solid #8fd3ee;outline-offset:4px;border-radius:6px}
/* Dopo "Aggiungi": quanti pezzi, il totale, quanto manca alla spedizione gratis. */
body.shop .glance{flex-basis:100%;margin:0}
body.shop .glance>p{margin:0 0 6px;color:var(--soft);font:600 .86rem/1.35 var(--sans)}
body.shop .glance .shipmeter{margin:0}
body.shop .glance .ship{margin:4px 0 0}
body.shop .addbar .glance{margin:8px 0 10px}
/* La barra d'acquisto sul telefono: opaca (sotto si leggeva il piede in trasparenza), prezzo piu'
   grande, e mai sopra la barra dell'eta' o dei cookie. */
@media (max-width:980px){
body.shop .buybar{background:#fff}
body.shop .buybar .bbt b{font-size:.95rem}
body.shop .buybar .bbt small{color:var(--ink);font:700 .9rem/1.3 var(--sans)}
body.shop:has(.agebar) .buybar,body.shop:has(.ccbar) .buybar{display:none}
}
/* Sul telefono la testata della scheda piu' corta: le aree su una riga che scorre, il riassunto su
   due righe al massimo, cosi' prezzo e pulsante salgono verso il primo schermo. */
@media (max-width:620px){
body.shop .sheetinfo .areas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:2px -16px 12px;padding:0 16px}
body.shop .sheetinfo .areas::-webkit-scrollbar{display:none}
body.shop .sheetinfo .areas .arlab{flex-basis:auto;margin:0 4px 0 0;white-space:nowrap}
body.shop .sheetinfo .areas .ar{flex:none;white-space:nowrap}
body.shop .sheetinfo .tagline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Nei pacchi stretti il nome e il totale vanno su due righe, invece di "5 / packs" a capo. */
body.shop .pk .pkt{flex-direction:column;align-items:flex-start;gap:0}
/* I dosaggi (con il prezzo al mg sotto) in una riga che scorre: otto dosaggi su tre righe
   spingevano il prezzo fuori dal primo schermo. */
body.shop .sheetinfo .doses{flex-wrap:wrap;gap:6px}
body.shop .sheetinfo .doses .dlabel{flex-basis:100%}
body.shop .sheetinfo .dopts{flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:calc(100% + 32px);margin:0 -16px;
  padding:2px 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
body.shop .sheetinfo .dopts::-webkit-scrollbar{display:none}
body.shop .sheetinfo .dopts .dose{flex:none;scroll-snap-align:start}
/* Le righe che scorrono non devono allargare la colonna della griglia oltre lo schermo. */
body.shop .sheethead .withshot>*,body.shop .sheetinfo,body.shop .sheetinfo .doses,body.shop .sheetinfo .areas{min-width:0}
}

/* ===== Giro 55: il dosaggio si sceglie sulla cartolina (appended, last-wins) ===== */
/* Il menu dei dosaggi sopra "Aggiungi al carrello", largo quanto la cartolina. flex:none per la
   stessa ragione del pulsante (giro 44): nelle file scorrevoli non deve schiacciare il flacone. */
body.shop .cardbox form.qpick{display:flex;flex-direction:column;gap:8px}
body.shop .cardbox form.qpick select{flex:none;display:block;width:100%;min-height:40px;margin:0;padding:0 34px 0 12px;
  border:1.5px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink);font:600 .85rem/1.2 var(--sans);
  text-overflow:ellipsis;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#0a7fb0 50%),linear-gradient(135deg,#0a7fb0 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
body.shop .cardbox form.qpick select:focus-visible{outline:3px solid #8fd3ee;outline-offset:1px;border-color:var(--acc)}
@media (max-width:620px){body.shop .cardbox form.qpick select{min-height:38px;font-size:.78rem;padding:0 28px 0 9px}}


/* Prima pagina sul telefono: prodotto, prezzo e "Compra adesso" nel primo schermo, come da loro.
   Prima la hero era alta 1.370 px: il prezzo stava a 966 px e "Compra adesso" a 1.158 px, sotto
   titolo, sottotitolo, invito e un flacone da 340 px. Solo CSS: la colonna di testo si scioglie
   (display:contents) e i pezzi si mettono in fila nell'ordine giusto. Sul computer niente cambia. */
@media (max-width:620px){
body.shop .hero .hinner{display:contents}
body.shop .hero .heyebrow{order:1;margin:0}
body.shop .hero .heyebrow.two{display:none}
body.shop .hero .htitle{order:2;margin:0;font-size:1.7rem;line-height:1.12}
body.shop .hero .hstage{order:3;margin:0;padding:0}
body.shop .hero .hsshot,body.shop .hero .hstage:hover .hsshot{height:220px}
body.shop .hero .hshop{order:4}
body.shop .hero .hsub{order:5;margin:6px auto 0;font-size:.95rem}
body.shop .hero .hctas{order:6;margin:0}
body.shop .hero .htrust{order:7}
body.shop .hero{gap:12px;padding-top:24px}
body.shop .hscard .hskicker{display:none}
body.shop .hscard .hspk{display:none}
body.shop .hscard .hsname{margin:0 0 2px}
body.shop .hscard .hsprice{margin:0}
body.shop .hscard .hsdoses{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
  margin-left:-16px;margin-right:-16px;padding:2px 16px 4px}
body.shop .hscard .hsdoses::-webkit-scrollbar{display:none}
body.shop .hscard .hsdoses .dose{flex:none}
body.shop .hshop .hsthumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;
  grid-template-columns:none;margin:0 -16px;padding:2px 16px 6px}
body.shop .hshop .hsthumbs::-webkit-scrollbar{display:none}
body.shop .hshop .hsthumb{flex:0 0 auto;min-width:132px}
}

/* ===== Giro 56: un carattere solo, Inter, servito da noi (appended, last-wins) ===== */
/* Il loro sito usa un carattere unico dappertutto; il nostro usava quello di sistema (diverso su ogni
   telefono) e un monospazio per etichette, pulsanti delle lingue, dosaggi e moduli, che "sembrava
   l'uscita di un programma" (giro 45). Inter, SIL Open Font License, da /fonts/ (la CSP non ammette
   altri domini). Il monospazio resta solo per i codici veri: indirizzi, hash, numeri d'ordine. */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.shop{--sans:"Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --code:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;--mono:var(--sans);font-family:var(--sans)}
body.shop code,body.shop kbd,body.shop samp,body.shop .addr code{font-family:var(--code)}
/* Le etichette piccole in maiuscolo restano maiuscole, ma piu' leggibili nel carattere normale. */
body.shop .heyebrow,body.shop .hsbadge,body.shop .hskicker,body.shop .hslab,body.shop .hsnav,body.shop .dlabel,
body.shop .areas .arlab,body.shop .eyebrow,body.shop footer h4,body.shop .bn small{letter-spacing:.1em;font-weight:700}
body.shop .hspack,body.shop .hsdoses .dose,body.shop .hstname,body.shop .hstmeta,body.shop .langs a,body.shop .crumbs,
body.shop .crumbs a,body.shop .sorts>span{letter-spacing:0}
/* Le etichette dei moduli (cassa, tracking, pannello): in minuscolo e piu' grandi. Erano 10 px in
   monospazio maiuscolo, "NOME / TELEFONO / VIA E NUMERO". */
body.shop form label{color:var(--ink);font:600 .88rem/1.4 var(--sans);letter-spacing:0;text-transform:none}
body.shop .linkbtn{font:600 .8rem var(--sans);letter-spacing:0}
/* Titoli: piu' grandi e stretti, come i loro. */
body.shop h1,body.shop .htitle{letter-spacing:-.02em}
body.shop .area>.ahead h2{font-size:1.5rem;letter-spacing:-.015em}
@media (max-width:560px){body.shop .area>.ahead h2{font-size:1.22rem}}
@media (min-width:1181px){body.shop .htitle{font-size:clamp(2.1rem,3vw,2.9rem)}}
/* La colonna di testo della hero piu' calma, come la loro: le due targhette su una riga, e senza la
   fila di pillole sotto l'invito (purezza e analisi stanno gia' nella sezione Qualita' e nel piede). */
body.shop .heyes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
/* Carrello sul telefono: la barra della spedizione gratis in cima; quella della colonna di destra
   resta per il computer. */
body.shop .cartmeter{display:none}
@media (max-width:620px){
body.shop .cartmeter{display:block;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
body.shop .cartmeter .shipmeter,body.shop .cartmeter .ship{margin:0}
body.shop .cartcols .rail .shipmeter,body.shop .cartcols .rail .freeship{display:none}
}
/* Il pulsante per pagare: piu' alto, con il totale. */
body.shop form.checkout .paybtn{min-height:54px;font-size:1.02rem}
body.shop form.checkout .nextstep{margin:10px 0 0;text-align:center}
body.shop .heyes .heyebrow{margin:0;padding:5px 10px;letter-spacing:.06em}
@media (min-width:621px){body.shop .hinner .htrust{display:none}}
@media (max-width:980px){body.shop .heyes{justify-content:center}}
@media (max-width:620px){body.shop .hero .heyes{order:1;margin:0}}

/* ===== Giro 57: la hero resta nello schermo del telefono (appended, last-wins) ===== */
/* Sul telefono la colonna della hero era larga quanto la fila di pillole piu' lunga: con otto
   dosaggi (5-60 mg) e la striscia "Cambia prodotto" arrivava a 408 px su uno schermo da 390, e
   cartolina, "Aggiungi al carrello" e frase sul pagamento uscivano a destra ("nel mobile non va
   bene", proprietario). Le colonne della hero e di .hshop non crescono piu' col contenuto, i
   dosaggi vanno a capo (si vedono tutti), la striscia dei prodotti scorre fino al bordo. */
@media (max-width:620px){
body.shop .hero,body.shop .hshop{grid-template-columns:minmax(0,1fr)}
body.shop .hero>*,body.shop .hero .hinner>*,body.shop .hshop>*{min-width:0;max-width:100%}
body.shop .hscard .hsdoses{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:2px 0 4px}
body.shop .hshop>.hsthumbs{max-width:none;margin:0 -16px}
}
/* I marchi delle app nel carrello, sopra la frase su come si paga. */
body.shop .cartcols .rail .paylogos{margin:14px 0 12px}

/* ===== Giro 59: lo stesso logo dappertutto (appended, last-wins) ===== */
/* Nel piede il marchio era bianco e azzurro chiaro (#2fc6ea), diverso da quello della testata ("c'e'
   ancora qualche incongruenza con il logo", proprietario). Il marchio blu notte non si legge sul blu
   del piede: sta su una piastrina bianca, con i colori della testata (B #0b2b40, P #0a7fb0). E il
   nome su una riga, come in testata (sul telefono andava a capo: "Buy / Peptides"). */
body.shop footer .fbrand .mark{box-sizing:content-box;padding:7px 10px;border-radius:12px;background:#fff}
body.shop footer .mark .b{fill:#0b2b40}
body.shop footer .mark .p{fill:#0a7fb0}
body.shop footer .bn b{white-space:nowrap}

/* ===== Giro 58: compra per obiettivo e targhette vere (appended, last-wins) ===== */
/* "Le persone comprano il cambiamento e i risultati, ora siamo un catalogo" (proprietario). Sotto la
   hero, un riquadro per obiettivo: icona, nome, cosa si ricerca, i composti piu' guardati, quanti. */
body.shop .area.goals{margin-top:8px}
body.shop .goals .gtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
body.shop .gtile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i t" "i c";gap:2px 14px;
  align-items:start;padding:16px 16px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
body.shop .gtile:hover{border-color:#9fd3e6;box-shadow:0 10px 26px -14px rgba(10,60,90,.35);transform:translateY(-1px)}
body.shop .gtile:focus-visible{border-radius:16px}
body.shop .gtile .gti{grid-area:i;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:#e8f6fb;color:#0a7fb0}
body.shop .gtile .gti svg{width:26px;height:26px}
body.shop .gtile .gtt{grid-area:t;display:flex;flex-direction:column;gap:2px;min-width:0}
body.shop .gtile .gtt b{font:700 1.02rem/1.25 var(--sans);color:var(--ink)}
body.shop .gtile .gtt small{color:var(--soft);font:500 .82rem/1.35 var(--sans)}
body.shop .gtile .gtn{margin-top:4px;color:#0a6f99;font:600 .8rem/1.35 var(--sans)}
body.shop .gtile .gtc{grid-area:c;margin-top:6px;color:var(--mute);font:600 .78rem/1.3 var(--sans)}
body.shop .gtile:hover .gtc{color:#0a7fb0}
@media (max-width:980px){body.shop .goals .gtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.shop .gtile{align-content:start}
/* Sul telefono una lista, come il menu di un'app: icona, nome, i composti, quanti. Nove riquadri
   alti in due colonne facevano quasi due schermate prima dei prodotti. */
@media (max-width:620px){
body.shop .goals .gtiles{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
body.shop .gtile{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i t c";align-items:center;gap:0 12px;
  padding:10px 12px;border-radius:14px}
body.shop .gtile .gti{width:40px;height:40px;border-radius:11px}
body.shop .gtile .gti svg{width:22px;height:22px}
body.shop .gtile .gtt b{font-size:.95rem}
body.shop .gtile .gtt small{display:none}
body.shop .gtile .gtn{margin-top:1px;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.shop .gtile .gtc{margin:0;font-size:.74rem;white-space:nowrap}
body.shop .gtile .gtcn{display:none}   /* sul telefono i nomi dei composti valgono piu' del conto */
}
/* Le targhette: piu' venduto (ordini veri), scelta top (nostra, con la stella), popolare (visite vere).
   Fuori dalle cartoline (scheda, "Inizia da qui") hanno il loro stile; sulle cartoline restano
   quelle di sempre, e si fanno toccare dal mouse perche' il title con la spiegazione si veda. */
body.shop .sbadge .bdg{display:inline-flex;align-items:center;padding:5px 9px;border-radius:7px;
  background:#0a7fb0;color:#fff;font:700 .72rem/1 var(--sans);letter-spacing:0;white-space:nowrap}
body.shop .bdg.best{background:#9a5b00}
body.shop .bdg.pick{background:#0b3d5c}
body.shop .bdg.pop{background:#6a4bc4}
body.shop .bdg.world{background:#0b6e4f}
body.shop .card .bdgs .bdg.best,body.shop .card .bdgs .bdg.pick,body.shop .card .bdgs .bdg.pop,
body.shop .card .bdgs .bdg.world{pointer-events:auto;cursor:help}
/* Sul telefono una targhetta sola sul flacone: con quella del certificato andavano su due righe
   sopra il tappo. Il certificato resta scritto nella scheda. */
@media (max-width:620px){body.shop .card .bdgs .bdg:is(.best,.pick,.pop,.world)~.bdg.coa{display:none}}
/* Nella scheda, sopra il nome: la targhetta e per esteso cosa vuol dire. */
body.shop .sbadge{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
body.shop .sbadge>span:last-child{color:var(--soft);font:500 .82rem/1.35 var(--sans)}
/* La pagina dell'obiettivo: la riga su cosa si ricerca. */
body.shop .cathead p.cpitch{margin:8px 0 0;color:var(--ink);font:600 1.08rem/1.45 var(--sans)}
@media (max-width:620px){body.shop .gtile:focus-visible{border-radius:14px}}

/* ===== Giro 60: il catalogo come la proposta B (appended, last-wins) ===== */
/* "Come sono messi i prodotti nella proposta B mi piace" (proprietario). Il catalogo completo e le
   pagine degli obiettivi: in alto la domanda e la ricerca, poi la barra degli obiettivi ferma sotto
   l'intestazione, e per ogni obiettivo da dove iniziare (due schede grandi) e il resto in righe. */
/* Dove si ferma la barra: sotto l'intestazione, che e' alta in modo diverso secondo la larghezza.
   hero.js la misura e la scrive qui; questi sono i valori di partenza. */
body.shop .bview{--gbtop:67px;--gbbar:92px}
@media (min-width:900px){body.shop .bview{--gbbar:107px}}
@media (min-width:621px) and (max-width:767px){body.shop .bview{--gbtop:152px}}
@media (min-width:768px) and (max-width:999px){body.shop .bview{--gbtop:112px}}
@media (min-width:1000px){body.shop .bview{--gbtop:80px}}
body.shop .gbintro{padding:2px 0 8px}
body.shop .gbintro .cathead{margin:0}
body.shop .cathead p.gbkick{margin:0 0 6px;color:var(--acc);font:700 .72rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
body.shop .gbintro .cathead h1{font:780 1.75rem/1.12 var(--sans);letter-spacing:-.025em}
body.shop .gbintro .gbfind{position:static;z-index:auto;margin:14px 0 0;padding:0;background:none;box-shadow:none}
body.shop .gbintro .gbfind .finder{margin:0}
@media (min-width:900px){
body.shop .gbintro{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding:14px 0 16px}
body.shop .gbintro .cathead h1{font-size:2.6rem}
body.shop .gbintro .gbfind{flex:0 1 400px;min-width:260px;margin:0 0 2px}
}
/* La barra: un bottone per obiettivo, icona e nome corto, il numero dei composti in alto a destra.
   Il fondo arriva ai bordi dello schermo (l'ombra larga, tagliata in alto e in basso). */
body.shop .gbbar{position:sticky;top:var(--gbtop);z-index:40;margin:0;padding:0;background:#f3f7fa;
  box-shadow:0 0 0 100vmax #f3f7fa;clip-path:inset(0 -100vmax);transition:background .2s,box-shadow .2s}
body.shop .gbbar.stuck{background:#fff;box-shadow:0 0 0 100vmax #fff,0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
body.shop .gbtrack{position:relative;display:flex;gap:2px;overflow-x:auto;padding:8px 0 9px;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
body.shop .gbtrack::-webkit-scrollbar{display:none}
body.shop .gbchip{flex:0 0 auto;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 0 2px;
  border-radius:14px;color:var(--ink);text-decoration:none;scroll-snap-align:start}
body.shop .gbci{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);
  border-radius:15px;background:#fff;color:var(--acc);transition:background .18s,border-color .18s,color .18s,transform .18s}
body.shop .gbci svg{width:24px;height:24px}
body.shop .gbci small{position:absolute;top:-7px;right:-9px;min-width:21px;height:19px;padding:0 5px;border:2px solid #f3f7fa;
  border-radius:10px;background:#dfe9f0;color:var(--soft);font:700 .64rem/15px var(--sans);text-align:center}
body.shop .gbbar.stuck .gbci small{border-color:#fff}
body.shop .gbcl{max-width:66px;color:var(--soft);font:600 .72rem/1.2 var(--sans);text-align:center}
body.shop .gbchip.on .gbci{background:var(--ink);border-color:var(--ink);color:#fff}
body.shop .gbchip.on .gbci small{background:var(--acc);color:#fff}
body.shop .gbchip.on .gbcl{color:var(--ink);font-weight:700}
body.shop .gbchip:active .gbci{transform:scale(.95)}
@media (max-width:899px){
body.shop .gbtrack{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
}
@media (min-width:900px){
body.shop .gbtrack{gap:4px;padding:10px 0 12px}
body.shop .gbchip{flex:1 1 0;width:auto;min-width:0;padding:8px 2px 4px}
body.shop .gbci{width:52px;height:52px;border-radius:16px}
body.shop .gbci svg{width:26px;height:26px}
body.shop .gbcl{max-width:none;font-size:.8rem}
body.shop .gbchip:hover .gbci{border-color:var(--acc)}
body.shop .gbchip.on:hover .gbci{border-color:var(--ink)}
}
body.shop .bview .sorts{margin:12px 0 0}
/* Sul telefono l'ordinamento su una riga che scorre: su due righe separava la barra dai prodotti. */
@media (max-width:899px){
body.shop .bview .sorts{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:6px 0 0}
body.shop .bview .sorts>span{width:auto;margin:0 2px 0 0}
body.shop .bview .sorts a{padding:6px 10px;font-size:.76rem}
}
/* Le sezioni: icona, nome, cosa si ricerca; a destra quanti composti, che porta alla pagina. */
body.shop .gbsec{margin:0;padding:26px 0 0;scroll-margin-top:calc(var(--gbtop) + var(--gbbar) - 8px)}
body.shop .gbsec+.gbsec{margin-top:26px;border-top:1px solid var(--line)}
body.shop .gbsec.full{padding-top:6px}
body.shop .gbhead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:start}
body.shop .gbicon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#e6f2f8;color:var(--acc)}
body.shop .gbicon svg{width:24px;height:24px}
body.shop .gbtx h2{margin:1px 0 0;color:var(--ink);font:780 1.4rem/1.2 var(--sans);letter-spacing:-.02em}
body.shop .gbtx p{margin:4px 0 0;color:var(--mute);font:500 .88rem/1.45 var(--sans)}
body.shop .gbcount{grid-column:2;justify-self:start;color:var(--acc);font:650 .8rem/1.3 var(--sans);text-decoration:none}
body.shop .gbcount:hover{text-decoration:underline}
@media (min-width:900px){
body.shop .gbsec{padding-top:40px}
body.shop .gbsec.full{padding-top:10px}
body.shop .gbsec+.gbsec{margin-top:34px}
body.shop .gbhead{grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center}
body.shop .gbicon{width:52px;height:52px;border-radius:16px}
body.shop .gbicon svg{width:28px;height:28px}
body.shop .gbtx h2{font-size:1.75rem}
body.shop .gbtx p{max-width:760px;font-size:.95rem}
body.shop .gbcount{grid-column:auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--soft)}
body.shop .gbcount:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
}
/* "Inizia da qui": due schede grandi. */
body.shop .gbeye{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:18px 0 10px}
body.shop .gbeye span{color:var(--acc);font:750 .75rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase}
body.shop .gbeye small{color:var(--mute);font:500 .78rem/1.3 var(--sans)}
body.shop .gbbigs{display:grid;gap:12px}
body.shop .gbbig{display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-areas:"pic main" "buy buy";gap:12px 14px;
  padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(11,43,64,.04),0 14px 30px -22px rgba(11,43,64,.35);scroll-margin-top:calc(var(--gbtop) + var(--gbbar) + 12px)}
body.shop .gbbig .gbpic{grid-area:pic;position:relative;width:auto;height:auto;aspect-ratio:116/152;border-radius:12px;
  background:radial-gradient(110% 80% at 50% 35%,#fff 0,#edf2f6 75%)}
body.shop .gbmain{grid-area:main;display:flex;flex-direction:column;min-width:0}
body.shop .gbbdgs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 7px}
body.shop .gbbig .bdg,body.shop .gbitem .bdg{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:#0a7fb0;color:#fff;font:650 .69rem/1 var(--sans);letter-spacing:.01em;white-space:nowrap;cursor:help}
body.shop .gbbig .bdg.coa,body.shop .gbitem .bdg.coa{background:#e6f2f8;color:#0a6a93;cursor:default}
body.shop .gbitem .bdg.out{background:#5b6b78;cursor:default}
body.shop .gbbig .bdg.best,body.shop .gbitem .bdg.best{background:#9a5b00}
body.shop .gbbig .bdg.pick,body.shop .gbitem .bdg.pick{background:#0b3d5c}
body.shop .gbbig .bdg.pop,body.shop .gbitem .bdg.pop{background:#6a4bc4}
body.shop .gbbig .bdg.world,body.shop .gbitem .bdg.world{background:#0b6e4f}
body.shop .gbbig h3{margin:0;font:780 1.3rem/1.12 var(--sans);letter-spacing:-.02em}
body.shop .gbbig h3 a{color:var(--ink);text-decoration:none}
body.shop .gbbig h3 a:hover{color:var(--acc)}
body.shop .gbrate{display:flex;align-items:center;gap:4px;margin:4px 0 0;color:var(--mute);font:500 .75rem/1 var(--sans)}
body.shop .gbtag{display:-webkit-box;margin:4px 0 0;overflow:hidden;color:var(--mute);font:500 .84rem/1.38 var(--sans);
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
body.shop .gbdose{margin:6px 0 0;color:var(--soft);font:600 .78rem/1.3 var(--sans)}
body.shop .gbprice{display:flex;flex-direction:column;gap:2px;margin:auto 0 0;padding-top:10px}
body.shop .gbprice .pcprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;color:var(--ink)}
body.shop .gbprice .pcprice em{color:var(--mute);font:500 .78rem/1 var(--sans);font-style:normal}
body.shop .gbprice .pcprice b{font:780 1.45rem/1.1 var(--sans);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
body.shop .gbprice .pcprice small{color:var(--mute);font:500 .78rem/1 var(--sans)}
body.shop .gbprice .pcpack{color:var(--soft);font:500 .78rem/1.3 var(--sans)}
body.shop .gbbuy{grid-area:buy;min-width:0}
body.shop .gbstudy{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#f3f7fa;color:var(--soft);font:500 .84rem/1.48 var(--sans)}
body.shop .gbstudy b{display:block;margin-bottom:3px;color:var(--mute);font:700 .66rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
body.shop .gbareas{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;padding:0;list-style:none}
body.shop .gbareas li{padding:4px 10px;border-radius:999px;background:#e6f2f8;color:#0b5a7d;font:600 .75rem/1.3 var(--sans)}
body.shop .gbbig form.qadd{display:flex;flex-wrap:wrap;gap:8px;margin:0}
body.shop .gbbig form.qpick select{display:block;flex:1 1 140px;width:auto;min-width:0;height:48px;margin:0;padding:0 34px 0 12px;
  border:1px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);font:600 .88rem/1.2 var(--sans);
  text-overflow:ellipsis;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#0a7fb0 50%),linear-gradient(135deg,#0a7fb0 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
body.shop .gbbig form.qpick select:focus-visible{outline:3px solid #8fd3ee;outline-offset:1px;border-color:var(--acc)}
body.shop .gbbig form.qadd .btn{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:8px;height:48px;min-height:0;
  margin:0;padding:0 16px;border:0;border-radius:12px;background:var(--acc);color:#fff;font:700 .9rem/1 var(--sans);white-space:nowrap}
body.shop .gbbig form.qadd .btn:hover{background:var(--acc2)}
body.shop .gbbig form.qadd .btn svg{width:19px;height:19px}
body.shop .gbdet{margin:10px 0 0;text-align:right;font:650 .8rem/1.3 var(--sans)}
body.shop .gbdet a{color:var(--acc);text-decoration:none}
body.shop .gbdet a:hover{text-decoration:underline}
body.shop .gbnote{margin:10px 2px 0;color:#6d8494;font:500 .72rem/1.45 var(--sans)}
@media (min-width:900px){
body.shop .gbeye{margin:22px 0 12px}
body.shop .gbbigs.n2{grid-template-columns:1fr 1fr;gap:16px}
body.shop .gbbig{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"pic main" "pic buy";gap:0 20px;padding:16px}
body.shop .gbbig .gbpic{aspect-ratio:auto;min-height:320px}
body.shop .gbmain{padding-top:2px}
body.shop .gbbig h3{font-size:1.5rem}
body.shop .gbprice{margin:12px 0 14px;padding-top:0}
body.shop .gbbigs.n1 .gbbig{grid-template-columns:220px minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"pic main buy";gap:0 28px;align-items:start}
body.shop .gbbigs.n1 .gbpic{min-height:260px;height:100%}
body.shop .gbbigs.n1 .gbbuy{padding-top:4px}
}
/* Il resto: righe compatte (sul telefono una lista, sullo schermo grande quattro colonne). */
body.shop .gbmore{margin-top:20px}
body.shop .gbmore h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--ink);font:750 .95rem/1.3 var(--sans);letter-spacing:-.01em}
body.shop .gbmore h3 span{padding:1px 8px;border-radius:999px;background:#e1eaf0;color:var(--soft);font:700 .72rem/1.5 var(--sans)}
/* overflow:clip e non hidden: hidden fa della lista un contenitore che scorre, e tornando a una riga
   (#c-...) il browser la allineava in cima allo schermo, sotto la barra, senza il suo margine. */
body.shop .gblist{margin:0;padding:0;overflow:hidden;overflow:clip;border:1px solid var(--line);border-radius:16px;background:#fff;list-style:none}
body.shop .gbitem{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) 42px;
  grid-template-areas:"thumb body add" "thumb price add" "doses doses doses";gap:0 12px;align-items:start;padding:12px;
  border-top:1px solid #e8eff3;scroll-margin-top:calc(var(--gbtop) + var(--gbbar) + 12px)}
body.shop .gbitem:first-child{border-top:0}
body.shop .gbitem:target{box-shadow:inset 0 0 0 2px #8fd3ee}
body.shop .gbitem .gbthumb{grid-area:thumb;position:relative;width:58px;height:70px;border-radius:12px;
  background:radial-gradient(110% 80% at 50% 35%,#fff 0,#edf2f6 75%)}
body.shop .gbibody{grid-area:body;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body.shop .gbiname{color:var(--ink);font:650 .92rem/1.25 var(--sans);letter-spacing:-.005em;text-decoration:none}
body.shop .gbiname:hover{color:var(--acc)}
body.shop .gbidose{margin-top:1px;color:var(--mute);font:500 .75rem/1.35 var(--sans)}
body.shop .gbibd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
body.shop .gbirate{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:.78rem}
body.shop .gbirate small,body.shop .gbrate small{color:var(--mute);font:600 .72rem/1 var(--sans)}
body.shop .gbitem .bdg{height:18px;padding:0 7px;font-size:.63rem}
body.shop .gbiprice{grid-area:price;margin:5px 0 0;line-height:1.25}
body.shop .gbiprice .pcprice{white-space:nowrap;color:var(--ink)}
body.shop .gbiprice .pcprice em{margin-right:3px;color:var(--mute);font:500 .7rem/1 var(--sans);font-style:normal}
body.shop .gbiprice .pcprice b{font:780 .97rem/1.2 var(--sans);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
body.shop .gbiprice .pcprice small{margin-left:3px;color:var(--mute);font:500 .7rem/1 var(--sans)}
body.shop .gbiprice .pcpack{display:block;margin-top:2px;color:var(--soft);font:500 .7rem/1.3 var(--sans)}
/* Il "+": con un dosaggio solo mette nel carrello, con piu' dosaggi apre i dosaggi (una casella
   nascosta e il suo label: niente script). */
body.shop .gbone{grid-area:add;margin:0}
body.shop .gbadd{grid-area:add;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:1px solid #cde0eb;
  border-radius:12px;background:#e6f2f8;color:var(--acc);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
body.shop .gbadd:hover{border-color:var(--acc);background:var(--acc);color:#fff}
body.shop .gbadd svg{width:18px;height:18px;transition:transform .2s}
body.shop .gbtog:checked+.gbadd{border-color:var(--ink);background:var(--ink);color:#fff}
body.shop .gbtog:checked+.gbadd svg{transform:rotate(45deg)}
body.shop .gbtog:focus-visible+.gbadd{outline:3px solid #8fd3ee;outline-offset:1px}
body.shop .gbdoses{grid-area:doses;display:none;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;padding-top:10px;
  border-top:1px dashed var(--line2)}
body.shop .gbtog:checked~.gbdoses{display:flex}
body.shop .gbdoses>span{width:100%;color:var(--mute);font:600 .75rem/1.3 var(--sans)}
body.shop .gbdoses button{display:inline-flex;align-items:baseline;gap:6px;margin:0;padding:7px 11px;border:1px solid var(--line2);
  border-radius:10px;background:#fff;color:var(--ink);font:650 .82rem/1.2 var(--sans);cursor:pointer}
body.shop .gbdoses button small{color:var(--mute);font:500 .75rem/1.2 var(--sans)}
body.shop .gbdoses button:hover{border-color:var(--acc);color:var(--acc)}
body.shop .gbdoses button:disabled{opacity:.5;cursor:not-allowed}
body.shop .gbdoses button:disabled:hover{border-color:var(--line2);color:var(--ink)}
/* "Mostra tutti": le righe ci sono gia', una casella nascosta le apre. La riga a cui si torna dopo
   "Aggiungi" (#c-...) si vede anche a lista chiusa. */
body.shop .gbshow{display:none;align-items:center;justify-content:center;width:100%;height:44px;margin:10px 0 0;padding:0 20px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:700 .88rem/1 var(--sans);cursor:pointer}
body.shop .gbshow:hover{border-color:var(--acc);color:var(--acc)}
body.shop .gbfold:checked~.gbshow .o,body.shop .gbfold:not(:checked)~.gbshow .c{display:none}
body.shop .gbfold:focus-visible~.gbshow{outline:3px solid #8fd3ee;outline-offset:1px}
@media (max-width:899px){
body.shop .gbfold:not(:checked)~.gblist .gbitem:nth-child(n+6):not(:target){display:none}
body.shop .gbshow{display:flex}
}
@media (min-width:900px){
body.shop .gbmore{margin-top:26px}
body.shop .gblist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;overflow:visible;
  border:0;border-radius:0;background:none}
body.shop .gbitem{grid-template-columns:64px minmax(0,1fr) 40px;border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
body.shop .gbitem:first-child{border-top:1px solid var(--line)}
body.shop .gbitem:hover{border-color:#bcd3e1;box-shadow:0 10px 24px -18px rgba(11,43,64,.45)}
body.shop .gbitem .gbthumb{width:64px;height:76px}
body.shop .gbadd{width:40px;height:40px}
body.shop .gbfold:not(:checked)~.gblist .gbitem:nth-child(n+9):not(:target){display:none}
body.shop .gbfold:not(.dm){display:none}
body.shop .gbshow.dm{display:flex;width:max-content;margin:14px auto 0}
}
@media (min-width:900px) and (max-width:1180px){body.shop .gblist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px) and (max-width:1060px){body.shop .gbbig form.qadd select,body.shop .gbbig form.qadd .btn{flex-basis:100%}
body.shop .gbbig form.qadd .btn{min-width:0;height:auto;min-height:48px;padding:8px 12px;white-space:normal;line-height:1.2;text-align:center}}
/* Il flacone in 3D nelle schede grandi e nelle miniature, come nel carrello (giro 36): la foto non
   si vede mai prima del 3D; torna solo se il 3D non si fa ("flat") o, senza script, dopo tre secondi. */
body.shop .gbpic canvas.c3d,body.shop .gbthumb canvas.c3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;opacity:0;animation:hsin .45s ease forwards}
body.shop .gbpic img.photo,body.shop .gbthumb img.photo{width:100%;height:100%;object-fit:cover;opacity:0;animation:hsin .35s ease 3s forwards}
body.shop.bp3d .gbpic img.photo,body.shop.bp3d .gbthumb img.photo{animation:none}
body.shop .gbpic.flat img.photo,body.shop .gbthumb.flat img.photo{opacity:1;animation:none;transition:opacity .3s ease}
body.shop .gbpic.is-3d img.photo,body.shop .gbthumb.is-3d img.photo{opacity:0;animation:none}
@media (prefers-reduced-motion:reduce){body.shop .gbci,body.shop .gbadd,body.shop .gbadd svg,body.shop .gbbar{transition:none}}

/* ===== Giro 61: chi c'e' adesso (appended, last-wins) ===== */
/* Le persone online e quelle delle ultime 24 ore, i numeri veri della dashboard, in una pillola
   ferma in basso: a destra sullo schermo grande, al centro sul telefono. Si fa da parte quando in
   basso c'e' qualcosa da fare (avviso del carrello, eta', cookie, barra "Compra adesso"). */
body.shop .livebox{position:fixed;z-index:45;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;max-width:calc(100% - 24px);margin:0;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.96);color:var(--soft);font:500 .74rem/1.2 var(--sans);white-space:nowrap;
  box-shadow:0 10px 26px -14px rgba(11,43,64,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:help}
body.shop .livebox b{color:var(--ink);font-weight:700}
body.shop .livesep{color:var(--mute)}
body.shop .livedot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#16a34a}
body.shop .livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(22,163,74,.35);animation:livepulse 2s ease-out infinite}
@keyframes livepulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media (min-width:981px){body.shop .livebox{left:auto;right:20px;bottom:20px;transform:none;font-size:.78rem}}
@media (max-width:980px){body.shop .livebox{display:none}body.shop.liveon .livebox{display:flex}}
body.shop:has(.addtoast) .livebox,body.shop:has(.agebar) .livebox,body.shop:has(.ccbar) .livebox{display:none}
@media (max-width:980px){body.shop:has(.buybar.on) .livebox{display:none}}
@media (max-width:980px){body.shop footer{padding-bottom:56px}}
@media (prefers-reduced-motion:reduce){body.shop .livedot::after{animation:none}}

/* ===== Giro 62: il prezzo e' quello della confezione da 10 (appended, last-wins) ===== */
/* "Nei prezzi torniamo a mostrare il pacchetto completo, perche' vendiamo pacchi da 10 non 1 solo, e
   mettiamolo piu' evidente che sono 10 flaconi" (proprietario). La cifra grande e' la confezione;
   sotto un'etichetta "Confezione da 10 flaconi" ben visibile; in piccolo quanto viene un flacone. */
body.shop .pcvials{display:inline-block;align-self:flex-start;width:fit-content;margin:4px 0 1px;padding:3px 8px;border-radius:6px;
  background:#e6f2f8;color:#0a5f86;font:700 .72rem/1.3 var(--sans);letter-spacing:.01em;white-space:nowrap}
body.shop .gbiprice .pcvials{margin:3px 0 0;padding:2px 7px;font-size:.66rem}
body.shop .gbiprice .pcpack{margin-top:3px}
body.shop .rail .pkvials{display:inline-block;margin:6px 0 2px;padding:5px 11px;border-radius:8px;background:#e6f2f8;
  color:#0a5f86;font:700 .86rem/1.3 var(--sans)}
body.shop .hsvials{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.16);
  color:#fff;font-weight:700}
@media (max-width:620px){body.shop .card .pcvials{padding:2px 6px;font-size:.62rem}}

/* ===== Giro 63: la prima pagina e' una vetrina leggera (appended, last-wins) ===== */
/* "La prima pagina piu' semplice, poi lo shop completo" (proprietario): una fila sola di prodotti
   e, in fondo, l'invito allo shop. La hero con la cassa resta ("ripristinala", proprietario). */
body.shop .homego{margin:6px 0 34px;padding:26px 20px 28px;border:1px solid var(--line);border-radius:18px;background:#fff;
  text-align:center}
body.shop .homego h2{margin:0;color:var(--ink);font:780 1.6rem/1.2 var(--sans);letter-spacing:-.02em}
body.shop .homego p{margin:8px auto 18px;max-width:52ch;color:var(--soft);font:500 .98rem/1.5 var(--sans)}
body.shop .homego .btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 26px;border-radius:12px;
  font:700 1rem/1 var(--sans)}
@media (max-width:620px){body.shop .homego{margin-bottom:26px;padding:22px 16px 24px}body.shop .homego h2{font-size:1.35rem}}

/* ===== Giro 64: "Shop" nell'intestazione del telefono (appended, last-wins) ===== */
/* Lo shop era dietro l'hamburger: sul telefono un pulsante blu "Shop" accanto al carrello, su ogni
   pagina. Sotto i 420 px fa posto la lente, che portava comunque allo shop (la ricerca e' in cima). */
body.shop .shoppill{display:none}
@media (max-width:980px){
body.shop header.top .shoppill{display:inline-flex;align-items:center;justify-content:center;flex:none;height:42px;
  margin-left:auto;padding:0 14px;border-radius:12px;background:var(--acc);color:#fff;font:700 .88rem/1 var(--sans);
  text-decoration:none;box-shadow:0 6px 14px -8px rgba(10,127,176,.7)}
body.shop header.top .shoppill[aria-current]{background:var(--ink)}
body.shop header.top .shoppill~.searchicon,body.shop header.top .shoppill~.carticon{margin-left:0}
}
@media (max-width:420px){
body.shop header.top .shoppill{padding:0 12px}
body.shop header.top .searchicon{display:none}
}

/* ===== Giro 65: sul telefono fondo bianco e un ritmo solo fra i blocchi (appended, last-wins) ===== */
/* "Ci sono sezioni grigie invece di bianche nel mobile, e gli spazi non sono coerenti"
   (proprietario). Sul telefono il fondo della pagina e' bianco come le sezioni bianche, e fra un
   blocco e l'altro della prima pagina ci sono sempre 32 px (prima da 24 a 100). */
@media (max-width:980px){
body.shop{background:#fff}
body.shop .gbbar{background:#fff;box-shadow:0 0 0 100vmax #fff}
body.shop .gbci small{border-color:#fff}
body.shop .shoptools,body.shop .uses{background:#fff}
body.shop .quality{border-top:0;padding:0}
body.shop main>.wrap.pad.homeflow{padding-top:24px;padding-bottom:0}
body.shop .homeflow section.area,body.shop .homeflow .homego{margin:0 0 32px}
body.shop .homeflow .area.goals{margin-top:8px}
/* Le fasce blu tengono il loro margine interno (il blu e' loro): lo spazio fra una e l'altra lo
   fanno i margini esterni, 32 px (due margini vicini si sovrappongono, non si sommano). */
body.shop .bxband,body.shop .vband,body.shop .stband{margin-top:32px;margin-bottom:32px}
body.shop .homeflow+.bxband{margin-top:0}
body.shop footer{margin-top:32px}
/* L'ultima tabella, nel piede, come le fasce blu: niente riquadro con il bordo intorno, righe
   separate da un filo, icone tonde. */
body.shop .ftrust{border:0;border-radius:0;background:none}
body.shop .ftrust li{padding:16px 0}
body.shop .ftrust li:first-child{padding-top:4px}
body.shop .fti{width:48px;height:48px;border-radius:50%;background:#003a5c;border:1px solid rgba(255,255,255,.22)}
body.shop .fti svg{width:22px;height:22px}
body.shop .ftt b{font-size:1rem}
body.shop .ftt small{font-size:.86rem;line-height:1.45}
}

/* ===== Giro 66: l'assistente delle domande comuni (appended, last-wins) ===== */
/* Il pulsante in basso a destra apre un pannello con le risposte delle FAQ; il contatore delle
   persone online va al centro, come chiesto in alternativa ("in basso a destra o al centro"). */
body.shop .chatbtn{position:fixed;z-index:46;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:46px;
  margin:0;padding:0 16px 0 13px;border-radius:999px;background:var(--ink);color:#fff;font:700 .88rem/1 var(--sans);
  text-decoration:none;box-shadow:0 12px 28px -12px rgba(11,43,64,.6)}
body.shop .chatbtn svg{width:22px;height:22px}
body.shop .chatbtn[aria-expanded="true"]{background:var(--acc)}
@media (min-width:981px){body.shop .livebox{left:50%;right:auto;transform:translateX(-50%)}}
body.shop .chatpanel{position:fixed;z-index:70;right:20px;bottom:78px;display:flex;flex-direction:column;
  width:min(380px,calc(100vw - 24px));max-height:min(580px,calc(100vh - 110px));overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 24px 60px -20px rgba(11,43,64,.45)}
body.shop .chatpanel[hidden]{display:none}
body.shop .chathead{display:flex;align-items:flex-start;gap:10px;padding:14px 12px 12px 16px;background:var(--ink);color:#fff}
body.shop .chathead p{flex:1 1 auto;margin:0}
body.shop .chathead b{display:block;font:750 1rem/1.25 var(--sans)}
body.shop .chathead small{display:block;margin-top:3px;color:#bcd3e0;font:500 .74rem/1.4 var(--sans)}
body.shop .chatx{flex:none;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.12);
  color:#fff;font:400 1.35rem/1 var(--sans);cursor:pointer}
body.shop .chatlog{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:140px;overflow-y:auto;padding:14px;background:#f6f9fb}
body.shop .chatlog .msg{max-width:90%;margin:0;padding:9px 12px;border-radius:14px;font:500 .86rem/1.45 var(--sans)}
body.shop .chatlog p.msg{white-space:normal}
body.shop .chatlog .msg p{margin:0}
body.shop .chatlog .msg.bot{align-self:flex-start;border:1px solid var(--line);border-bottom-left-radius:4px;background:#fff;color:var(--ink)}
body.shop .chatlog .msg.soft{background:#eef6fa;border-color:#d6e8f1;color:var(--soft);font-size:.8rem}
body.shop .chatlog .msg.user{align-self:flex-end;border-bottom-right-radius:4px;background:var(--acc);color:#fff}
body.shop .chatlog .msg b{display:block;margin-bottom:4px;font-weight:700}
body.shop .chatlog .msg .chattg{margin-top:8px}
body.shop .chatchips{display:flex;flex:none;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--line);scrollbar-width:none}
body.shop .chatchips::-webkit-scrollbar{display:none}
body.shop .chatchip{flex:none;max-width:250px;margin:0;padding:7px 11px;overflow:hidden;border:1px solid var(--line2);border-radius:999px;
  background:#fff;color:var(--ink);font:600 .76rem/1.25 var(--sans);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
body.shop .chatchip:hover{border-color:var(--acc);color:var(--acc)}
body.shop .chatform{display:flex;flex:none;gap:8px;margin:0;padding:10px 12px;border-top:1px solid var(--line)}
body.shop .chatform input[name=q]{flex:1 1 auto;min-width:0;height:42px;margin:0;padding:0 12px;border:1px solid var(--line2);
  border-radius:12px;background:#fff;color:var(--ink);font:500 .9rem/1 var(--sans)}
body.shop .chatform input[name=q]:focus{border-color:var(--acc);outline:0;box-shadow:0 0 0 3px rgba(10,127,176,.16)}
body.shop .chatform button{display:grid;flex:none;place-items:center;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:12px;
  background:var(--acc);color:#fff;cursor:pointer}
body.shop .chatform button svg{width:20px;height:20px}
body.shop .chatfoot{display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:6px 14px 12px;
  font:600 .8rem/1.3 var(--sans)}
body.shop .chattg{display:inline-flex;align-items:center;gap:6px;color:#0a7fb0;text-decoration:none}
body.shop .chattg .ficon{width:18px;height:18px;color:#229ed9}
body.shop .chatall{color:var(--mute);text-decoration:none}
body.shop .chattg:hover,body.shop .chatall:hover{text-decoration:underline}
@media (max-width:980px){
body.shop .chatbtn{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));justify-content:center;width:50px;height:50px;padding:0}
body.shop .chatbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.shop .chatpanel{left:8px;right:8px;bottom:8px;width:auto;max-height:min(80vh,620px)}
body.shop:has(.buybar.on) .chatbtn{bottom:86px}
}
@media (max-width:400px){body.shop.liveon .chatbtn{bottom:58px}}
body.shop:has(.addtoast) .chatbtn,body.shop:has(.agebar) .chatbtn,body.shop:has(.ccbar) .chatbtn{display:none}
@media (prefers-reduced-motion:reduce){body.shop .chatlog{scroll-behavior:auto}}
/* ===== Giro 67: l'assistente piu' chiaro e piu' utile (appended, last-wins) ===== */
/* "E' fatto malissimo l'icona, e rendi il chatbot piu' intuitivo e useful" (proprietario). Il
   pulsante e' il fumetto pieno con i tre puntini, nel blu del sito; il pannello si apre con sei
   argomenti, le risposte hanno il pulsante della pagina che serve e le domande collegate. */
body.shop .chatbtn{gap:9px;height:52px;padding:0 20px 0 15px;background:linear-gradient(135deg,#0a8fc4 0%,#0a7fb0 55%,#07668e 100%);
  box-shadow:0 14px 30px -12px rgba(10,127,176,.75),0 2px 6px rgba(11,43,64,.15);font:700 .92rem/1 var(--sans);--chatdot:#0a7fb0}
body.shop .chatbtn:hover{filter:brightness(1.06)}
body.shop .chatbtn[aria-expanded="true"]{background:var(--ink);--chatdot:var(--ink)}
body.shop .chatbtn .chatico{width:26px;height:26px}
body.shop .chatico{display:block}
body.shop .chathead{align-items:center;padding:12px 12px 12px 14px}
body.shop .chatav{display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#0a7fb0;
  --chatdot:#fff}
body.shop .chatav .chatico{width:24px;height:24px}
body.shop .chattopics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:2px 0 4px}
body.shop .chattopic{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:10px 11px;border:1px solid var(--line2);
  border-radius:12px;background:#fff;color:var(--ink);font:650 .82rem/1.2 var(--sans);text-align:left;text-decoration:none;cursor:pointer;
  transition:border-color .15s,background .15s}
body.shop .chattopic:hover{border-color:var(--acc);background:#f2f9fc}
body.shop .chattopic>span{display:grid;flex:none;place-items:center;width:28px;height:28px;border-radius:8px;background:#e6f2f8;color:#0a7fb0}
body.shop .chattopic>span svg{width:17px;height:17px}
body.shop .chattopic.tg{grid-column:1 / -1;justify-content:center;border-color:#cfe8f4;background:#eef7fc;color:#0a6a93}
body.shop .chattopic.tg>span{background:none;width:auto;height:auto}
body.shop .chattopic.tg .ficon{width:20px;height:20px;color:#229ed9}
body.shop .chatlog .msg.typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
body.shop .chatlog .msg.typing i{width:7px;height:7px;border-radius:50%;background:#9bb8c8;animation:chatdot 1s ease-in-out infinite}
body.shop .chatlog .msg.typing i:nth-child(2){animation-delay:.15s}
body.shop .chatlog .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
body.shop .chatact{display:inline-flex;align-items:center;margin:9px 6px 0 0;padding:7px 11px;border-radius:10px;background:#e6f2f8;
  color:#0a5f86;font:700 .8rem/1.2 var(--sans);text-decoration:none}
body.shop .chatact:hover{background:#d6ebf5}
body.shop .chatlog .chatrelh{margin:0 0 6px;color:var(--mute);font:700 .7rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
body.shop .chatrelq{display:block;width:100%;margin:0 0 6px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:#fff;
  color:var(--ink);font:600 .8rem/1.3 var(--sans);text-align:left;cursor:pointer}
body.shop .chatrelq:hover{border-color:var(--acc);color:var(--acc)}
body.shop .chatprow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n go" "p go";gap:1px 10px;align-items:center;
  margin:8px 0 0;padding:9px 11px;border:1px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none}
body.shop .chatprow:hover{border-color:var(--acc)}
body.shop .chatprow b{grid-area:n;margin:0;font:700 .86rem/1.25 var(--sans)}
body.shop .chatprow small{grid-area:p;color:var(--mute);font:500 .74rem/1.3 var(--sans)}
body.shop .chatprow span{grid-area:go;color:var(--acc);font:700 .78rem/1 var(--sans)}
body.shop .chattease{position:fixed;z-index:46;right:20px;bottom:84px;display:flex;align-items:center;max-width:250px;margin:0;
  border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 16px 34px -16px rgba(11,43,64,.45)}
body.shop .chattease[hidden]{display:none}
body.shop .chatteaseopen{flex:1 1 auto;margin:0;padding:11px 4px 11px 14px;border:0;background:none;color:var(--ink);
  font:600 .84rem/1.35 var(--sans);text-align:left;cursor:pointer}
body.shop .chatteasex{flex:none;width:32px;height:32px;margin:0 4px 0 0;padding:0;border:0;border-radius:8px;background:none;
  color:var(--mute);font:400 1.15rem/1 var(--sans);cursor:pointer}
@media (max-width:980px){
body.shop .chatbtn{width:56px;height:56px;padding:0;gap:0}
body.shop .chatbtn .chatico{width:28px;height:28px}
body.shop .chattease{right:14px;bottom:80px;max-width:min(250px,calc(100vw - 28px))}
body.shop:has(.buybar.on) .chattease{display:none}
}
@media (max-width:400px){body.shop.liveon .chattease{bottom:122px}}
body.shop.chatopen .chattease,body.shop:has(.addtoast) .chattease,body.shop:has(.agebar) .chattease,body.shop:has(.ccbar) .chattease{display:none}
@media (prefers-reduced-motion:reduce){body.shop .chatlog .msg.typing i{animation:none}}
/* Dopo la revisione: il blu del pulsante parte piu' scuro (la scritta "Aiuto" sopra 4.5:1), il
   titolo delle domande collegate nel grigio scuro, gli argomenti ripetuti dopo un saluto in una
   colonna (nel fumetto al 90% due colonne tagliavano "Conservazione"), bersagli piu' comodi. */
body.shop .chatbtn{background:linear-gradient(135deg,#0a7fb0 0%,#08709c 55%,#065f85 100%)}
body.shop .chatlog .msg .chatrelh{margin:0 0 6px;color:var(--soft)}
body.shop .chatlog .msg .chatprow b{margin:0}
body.shop .chatprow small{color:var(--soft)}
body.shop .chatlog .msg .chattopics{grid-template-columns:1fr;margin:10px 0 0}
body.shop .chattopic{overflow-wrap:anywhere}
body.shop .chatact{min-height:36px;padding:8px 12px}
body.shop .chatrelq{min-height:40px}
body.shop .chatteasex{width:40px;height:40px}
body.shop .chatpanel:focus{outline:none}