/* Home 2: tavolo a tutto schermo da esplorare dall'alto, poi le collezioni in foto. Bianco, inchiostro, niente ombre. */
.sz-h2{--ink:#222;--fog:#a1a19c;--line:#222;--bg:#fff;--soft:#f4f4f2;font-family:Poppins,sans-serif;color:var(--ink);background:var(--bg);width:100vw;margin-left:calc(50% - 50vw);letter-spacing:-.02em}
.sz-h2-page .main-page-wrapper{padding-top:0;background:#fff}
.sz-h2-page .site-content{padding-bottom:0}
.sz-h2-page .content-layout-wrapper{padding-top:0!important;padding-bottom:0!important}
.sz-h2 button{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-transform:none;min-height:0;box-shadow:none}

/* l'intestazione del sito resta, ma trasparente sopra il tavolo finché non si scorre */
.sz-h2-page .whb-header{position:absolute;top:0;left:0;right:0;z-index:30}
.sz-h2-page .whb-header:not(.whb-sticked) .whb-row,.sz-h2-page .whb-header:not(.whb-sticked) .whb-main-header{background:transparent!important}

/* tavolo */
.h2-stage{position:relative;height:var(--h2-h,100svh);min-height:460px;overflow:hidden;background:var(--bg)}
.h2-stage:before{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(#fff 35%,rgba(255,255,255,0));z-index:2;pointer-events:none}
.h2-view{position:absolute;inset:0;cursor:grab;touch-action:none;outline:0;user-select:none;-webkit-user-select:none}
.h2-view.is-drag{cursor:grabbing}
.h2-world{position:absolute;left:0;top:0;width:3200px;height:1800px;transform-origin:0 0;will-change:transform}
.h2-tile{position:absolute;width:3200px;height:1800px}
.sz-h2 .h2-obj{position:absolute!important;display:block!important;transform:rotate(var(--r));opacity:0;transition:opacity .5s ease,filter .5s ease}
.h2-obj img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.h2-obj:hover img,.h2-obj:focus-visible img{transform:scale(1.045)}
.h2-obj__cap{position:absolute;left:50%;top:100%;transform:translate(-50%,calc(6px * var(--k,1))) rotate(calc(var(--r) * -1));white-space:nowrap;font-size:calc(12px * var(--k,1));opacity:0;transition:opacity .3s;pointer-events:none}
.h2-obj:hover .h2-obj__cap,.h2-obj:focus-visible .h2-obj__cap{opacity:1}
.h2-obj:focus-visible{outline:1px solid var(--ink);outline-offset:8px}
.sz-h2 .h2-tag{position:absolute!important;display:flex!important;align-items:baseline;white-space:nowrap;font-size:calc(14px * var(--k,1))!important;line-height:1.2!important;transform:translate(-50%,-50%);transition:opacity .5s}
.h2-tag b{font-weight:500;letter-spacing:-.02em}
.h2-tag:hover b{box-shadow:inset 0 -1px 0 currentColor}
.sz-h2.is-ready .h2-obj{opacity:1;transition:opacity .9s ease var(--d),filter .5s ease}
.sz-h2.is-ready.is-filtered .h2-obj{transition:opacity .5s ease,filter .5s ease}
.sz-h2.is-filtered .h2-obj:not(.is-on),.sz-h2.is-filtered .h2-tag:not(.is-on){opacity:.12;filter:grayscale(1)}
@media (prefers-reduced-motion:reduce){.sz-h2 .h2-obj{opacity:1}.h2-obj img{transition:none}}

/* comandi ai bordi, il centro resta libero */
.h2-ico{display:inline-block;width:11px;height:11px;flex:none}
.h2-ico--fit{border:1px solid currentColor;border-radius:1px;clip-path:polygon(0 0,35% 0,35% 1px,65% 1px,65% 0,100% 0,100% 35%,calc(100% - 1px) 35%,calc(100% - 1px) 65%,100% 65%,100% 100%,65% 100%,65% calc(100% - 1px),35% calc(100% - 1px),35% 100%,0 100%,0 65%,1px 65%,1px 35%,0 35%)}
.h2-bar{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;z-index:3;pointer-events:none;padding:0 16px}
.h2-chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;max-width:100%;padding:1px}
.h2-chips::-webkit-scrollbar{display:none}
.sz-h2 .h2-chip{flex:none;font-size:12px!important;font-weight:500!important;line-height:1.4!important;padding:6px 13px!important;border:1px solid var(--line)!important;border-radius:100px!important;background:var(--bg)!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:-.02em!important;transition:background .2s,color .2s}
.sz-h2 .h2-chip:hover{background:var(--soft)!important}
.sz-h2 .h2-chip.is-on{background:var(--ink)!important;color:#fff!important}
.h2-zoom{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:4px;z-index:4}
.sz-h2 .h2-zoom button{display:flex!important;align-items:center;justify-content:center;width:26px;height:26px;padding:0!important;border:1px solid var(--line);border-radius:100px!important;background:var(--bg);color:var(--ink)!important;font-size:14px;line-height:1}
.sz-h2 .h2-zoom button:hover{background:var(--soft)}
.h2-hint{font-size:11px;color:var(--fog);margin-right:8px}

/* scheda laterale */
.h2-panel{position:absolute;top:96px;right:18px;bottom:66px;width:340px;max-width:calc(100% - 36px);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:16px;z-index:5;display:flex;flex-direction:column;overflow:auto;animation:h2in .35s cubic-bezier(.2,.7,.2,1)}
.h2-panel[hidden]{display:none}
@keyframes h2in{from{opacity:0;transform:translateX(12px)}}
.sz-h2 .h2-panel__x{position:absolute!important;top:10px;right:12px;font-size:22px!important;line-height:1;color:var(--ink)}
.h2-panel__img{flex:1 1 auto;min-height:150px;display:flex;align-items:center;justify-content:center;padding:18px 6px}
.h2-panel__img img{max-width:100%;max-height:260px;object-fit:contain;mix-blend-mode:multiply}
.h2-panel__line{font-size:11px;color:var(--fog);margin:0 0 4px}
.h2-panel__name{font-size:22px;font-weight:300;letter-spacing:-.03em;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.h2-panel__text{font-size:14px;line-height:1.4;margin:0 0 16px}
.h2-panel__acts{display:flex;flex-direction:column;gap:6px;margin:0}
.h2-btn{display:block;text-align:center;font-size:13px;font-weight:500;padding:10px 12px;border:1px solid var(--line);border-radius:3px;color:var(--ink);transition:background .2s,color .2s}
.h2-btn--fill{background:var(--ink);color:#fff}
.h2-btn--fill:hover{background:#000;color:#fff}
.h2-btn--line:hover{background:var(--soft);color:var(--ink)}

/* in evidenza: Tullio e 5Padel in grande, poi i pezzi da scorrere */
.h2-feature{max-width:1500px;margin:0 auto;padding:96px 24px 0}
.h2-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.h2-feat:nth-child(2){margin-top:144px}
.h2-feat__img{display:block;overflow:hidden;aspect-ratio:4/5;margin-bottom:24px;background:var(--soft)}
.h2-feat__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.h2-feat:hover .h2-feat__img img{transform:scale(1.04)}
.h2-feat .h2-cap{margin-bottom:10px}
.h2-feat__h{font-family:Poppins,sans-serif;font-size:clamp(32px,3.6vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1;margin:0 0 18px;color:var(--ink)}
.h2-feat__p{font-size:16px;line-height:1.45;max-width:480px;margin:0 0 24px}
.h2-feat__acts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.h2-feat__acts .h2-btn{padding:10px 18px}
.h2-strip{margin:120px 0 0}
.h2-strip__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.h2-strip__head .h2-cap{margin:0}
.h2-strip__head span{display:flex;gap:4px}
.sz-h2 .h2-strip__head button{display:flex!important;align-items:center;justify-content:center;width:34px;height:34px;padding:0!important;border:1px solid var(--line);border-radius:100px!important;color:var(--ink)!important;font-size:15px}
.sz-h2 .h2-strip__head button:hover{background:var(--soft)}
.h2-strip__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.h2-strip__track::-webkit-scrollbar{display:none}
.h2-pick{flex:0 0 clamp(220px,22vw,320px);scroll-snap-align:start;color:var(--ink)}
.h2-pick:hover{color:var(--ink)}
.h2-pick__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--soft);padding:12%;margin-bottom:12px;overflow:hidden}
.h2-pick__img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.h2-pick:hover .h2-pick__img img{transform:scale(1.06)}
.h2-pick__name{display:block;font-size:15px;line-height:1.3}
.h2-pick__line{display:block;font-size:12px;color:var(--fog)}

/* frase */
.h2-intro{padding:120px 24px 96px;max-width:1500px;margin:0 auto}
.h2-cap{font-size:12px;color:var(--fog);margin:0 0 24px}
.h2-display{font-family:Poppins,sans-serif;font-weight:300;font-size:clamp(54px,9.4vw,140px);line-height:.9;letter-spacing:-.045em;margin:0 0 40px;color:var(--ink)}
.h2-lead{font-size:18px;line-height:1.4;letter-spacing:-.03em;max-width:560px;margin:0 0 0 auto}

/* collezioni: foto grandi, impaginazione libera, nessuna riga */
.h2-colls{max-width:1500px;margin:0 auto;padding:0 24px}
.h2-group{margin:0 0 144px}
.h2-group__h{font-family:Poppins,sans-serif;font-size:clamp(34px,4.4vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1;margin:0 0 48px;color:var(--ink)}
.h2-group__items{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:96px;align-items:start}
.h2-col{display:block;color:var(--ink)}
.h2-col:hover{color:var(--ink)}
.h2-col__img{display:block;overflow:hidden;background:var(--soft)}
.h2-col__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.h2-col:hover .h2-col__img img{transform:scale(1.04)}
.h2-col__name{display:inline-block;margin:18px 0 6px;font-size:28px;font-weight:300;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s}
.h2-col:hover .h2-col__name{background-size:100% 1px}
.h2-col__text{display:block;font-size:14px;line-height:1.4;max-width:420px}
.h2-col__text i{font-style:normal;color:var(--fog)}
.h2-col--xl{grid-column:1 / 8}
.h2-col--xl .h2-col__img{aspect-ratio:4/3}
.h2-col--l{grid-column:9 / 13;margin-top:180px}
.h2-col--l .h2-col__img{aspect-ratio:3/4}
.h2-col--m:nth-child(3){grid-column:2 / 7}
.h2-col--m:nth-child(4){grid-column:8 / 13;margin-top:120px}
.h2-col--m .h2-col__img{aspect-ratio:1}
.h2-col--s{grid-column:span 3}
.h2-col--s:nth-child(even){margin-top:72px}
.h2-col--s .h2-col__img{aspect-ratio:3/4}
.h2-col--w{grid-column:4 / 10}
.h2-col--w .h2-col__img{aspect-ratio:4/5}

.h2-ways{max-width:1500px;margin:0 auto;padding:0 24px 144px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 48px}
.h2-ways__h{width:100%;font-size:12px;color:var(--fog);margin:0 0 12px}
.h2-ways a{font-size:clamp(24px,2.6vw,38px);font-weight:300;letter-spacing:-.04em;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s}
.h2-ways a:hover{background-size:100% 1px;color:var(--ink)}

@media (max-width:1024px){
	.h2-col--xl{grid-column:1 / 13}
	.h2-col--l{grid-column:5 / 13;margin-top:0}
	.h2-col--s{grid-column:span 6}
}
@media (max-width:640px){
	.h2-feature{padding:66px 16px 0}
	.h2-feats{grid-template-columns:1fr;gap:66px}
	.h2-feat:nth-child(2){margin-top:0}
	.h2-strip{margin-top:72px}

	.h2-pick{flex-basis:62vw}
	.h2-bar{bottom:12px;justify-content:flex-start}
	.h2-zoom{bottom:58px;right:12px}
	.h2-hint{display:none}
	.h2-panel{top:auto;bottom:12px;left:12px;right:12px;width:auto;max-width:none;max-height:72%}
	.h2-panel__img{min-height:110px;padding:8px}
	.h2-panel__img img{max-height:150px}
	.h2-intro{padding:72px 16px 66px}
	.h2-lead{margin:0}
	.h2-colls{padding:0 16px}
	.h2-group{margin-bottom:96px}
	.h2-group__h{margin-bottom:28px}
	.h2-group__items{row-gap:48px;column-gap:12px}
	.h2-col--l,.h2-col--m:nth-child(3),.h2-col--m:nth-child(4){grid-column:1 / 13;margin-top:0}
	.h2-col--s{grid-column:span 6}
	.h2-col--s:nth-child(even){margin-top:48px}
	.h2-col--w{grid-column:1 / 13}.h2-col--w .h2-col__img{aspect-ratio:4/5}
	.h2-col__name{font-size:22px;margin-top:12px}
	.h2-ways{padding:0 16px 96px;flex-direction:column;gap:10px}
}
