/* Home product card (02/11). Night-v2 rules use !important on ids and tags, hence the html:root body prefix. */
html:root body .na-hp{background:#151416;padding:clamp(72px,9vw,150px) 20px clamp(80px,10vw,160px);display:grid;justify-items:center}
html:root body .na-hp-card{width:min(100%,clamp(320px,30vw,460px))}
html:root body .na-hp-media{position:relative;aspect-ratio:4/5;background:#e7e6e2;overflow:hidden}
html:root body .na-hp-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:pointer}
html:root body .na-hp-track::-webkit-scrollbar{display:none}
html:root body .na-hp-slide{position:relative;flex:0 0 100%;height:100%;margin:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
html:root body .na-hp-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
html:root body .na-hp-dots{position:absolute;left:12px;right:12px;bottom:6px;display:flex;gap:4px;z-index:2}
html:root body .na-hp-dot{flex:1;height:18px;padding:0;border:0;background:none;display:grid;align-items:center;cursor:pointer}
html:root body .na-hp-dot span{position:relative;display:block;height:1px;overflow:hidden}
html:root body .na-hp-dot i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left}
html:root body .na-hp-track{transition:opacity .2s}
html:root body .na-hp-track.is-wrapping{opacity:0}
html:root body .na-hp-info{padding-top:18px;color:var(--v2-ink,#f2f0e9)}
html:root body .na-hp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
html:root body .na-hp-row h2{margin:0!important;font-size:16px!important;line-height:1.2!important;font-weight:500!important;letter-spacing:.02em!important}
html:root body .na-hp-price{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
html:root body .na-hp-sub{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px!important;color:var(--v2-mid,#8a8a87)!important}
html:root body .na-hp-swatch{width:9px;height:9px;background:#151416;box-shadow:0 0 0 1px rgba(242,240,233,.45)}
html:root body .na-hp-status{margin-top:14px;padding-top:14px;border-top:1px solid var(--v2-line,rgba(242,240,233,.14));font-size:11px!important;color:var(--v2-mid,#8a8a87)!important}
html:root body .na-hp-status time{color:var(--v2-ink,#f2f0e9);font-variant-numeric:tabular-nums;margin-left:4px}
html:root body .na-hp-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 0 8px}
html:root body .na-hp-size{height:40px!important;min-height:0!important;padding:0!important;border:1px solid rgba(242,240,233,.24)!important;background:none!important;color:var(--v2-ink,#f2f0e9)!important;font-size:12px!important;transition:border-color .15s,background-color .15s,color .15s}
html:root body .na-hp-size:hover{border-color:var(--v2-ink,#f2f0e9)!important}
html:root body .na-hp-size.selected{background:var(--v2-ink,#f2f0e9)!important;color:#151416!important;border-color:var(--v2-ink,#f2f0e9)!important}
html:root body .na-hp-sizes-note{margin:16px 0 8px;font-size:11px!important;color:var(--v2-mid,#8a8a87)!important}
html:root body .na-hp-buy{width:100%;height:48px!important;min-height:0!important;border:0!important;background:var(--v2-ink,#f2f0e9)!important;color:#151416!important;font-size:12px!important;font-weight:500!important;cursor:pointer;transition:scale .15s ease-out}
html:root body .na-hp-buy:active{scale:.98}
html:root body .na-hp-more{display:table;margin:16px auto 0;font-size:11px!important;color:var(--v2-ink,#f2f0e9)!important;text-decoration:underline;text-underline-offset:4px}
html:root body .na-hp-more:hover{color:#e3352b!important}
@media (max-width:760px){html:root body .na-hp{padding:56px 16px 72px}html:root body .na-hp-card{width:100%}}
html:root body :is(.na-hp-sub,.na-hp-status,.na-hp-sizes-note,.na-hp-more,.na-hp-buy),html:root body .na-hp-status time{text-transform:uppercase!important;letter-spacing:.02em!important}
html:root body .na-hp-price{font-size:16px!important}
/* Packshots: cut-outs sit on the card ground with air around them */
html:root body .na-hp-slide.is-pack{background:var(--hp-ground,#0c0c0c)}
html:root body .na-hp-slide.is-pack img{object-fit:contain;padding:6% 4%;box-sizing:border-box}
html:root body .na-hp-media:has(.na-hp-slide.is-pack){background:var(--hp-ground,#0c0c0c)}
html:root body .na-hp-media{--hp-ground:#0c0c0c}
html:root.hp-grey body .na-hp-media{--hp-ground:#e7e6e2}
html:root body .na-hp-media .na-hp-dot span{background:rgba(242,240,233,.25)}
html:root body .na-hp-media .na-hp-dot i{background:#f2f0e9}
html:root.hp-grey body .na-hp-media .na-hp-dot span{background:rgba(0,0,0,.22)}
html:root.hp-grey body .na-hp-media .na-hp-dot i{background:#151416}
html:root body :is(.na-hp-sub,.na-hp-status,.na-hp-status time,.na-hp-sizes-note,.na-hp-more,.na-hp-buy,#na-x){text-transform:uppercase!important;letter-spacing:.02em!important}
/* The stamp, small, top right of the photo, as on a letter */
html:root body .na-hp-stamp{position:absolute;z-index:2;top:14px;right:14px;width:15%;height:auto;rotate:4deg;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
/* 02/11 sera, Ale: niente card piccola centrata né barrette da storie IG.
   Foto grande a sinistra, informazioni a destra, miniature per scegliere la foto. */
html:root body .na-hp-count{position:absolute;z-index:2;left:16px;bottom:14px;font-size:12px;color:var(--v2-ink,#f2f0e9);font-variant-numeric:tabular-nums;letter-spacing:.02em;pointer-events:none}
html:root.hp-grey body .na-hp-count{color:#151416}
html:root body .na-hp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
html:root body .na-hp-thumbs .na-hp-dot{height:auto;aspect-ratio:4/5;padding:0;border:0;background:var(--hp-ground,#0c0c0c);overflow:hidden;opacity:.45;outline:1px solid transparent;outline-offset:-1px;transition:opacity .15s,outline-color .15s}
html:root body .na-hp-thumbs .na-hp-dot img{width:100%;height:100%;object-fit:cover;display:block}
html:root body .na-hp-thumbs .na-hp-dot.is-pack img{object-fit:contain;padding:8%;box-sizing:border-box}
html:root body .na-hp-thumbs .na-hp-dot.is-on{opacity:1;outline-color:var(--v2-ink,#f2f0e9)}
@media (hover:hover){html:root body .na-hp-thumbs .na-hp-dot:hover{opacity:1}}
html:root body .na-hp{display:block;padding:clamp(56px,7vw,120px) 0 clamp(72px,9vw,140px)}
html:root body .na-hp-card{width:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center;padding:0 clamp(20px,3vw,48px);box-sizing:border-box}
html:root body .na-hp-media{aspect-ratio:auto;height:min(88svh,calc((100vw - 96px) * .58 * 1.25));min-height:520px}
html:root body .na-hp-info{padding-top:0;max-width:440px}
html:root body .na-hp-row h2{font-size:clamp(22px,2.2vw,32px)!important}
html:root body .na-hp-price{font-size:clamp(18px,1.6vw,22px)!important}
html:root body .na-hp-more{margin-left:0}
@media (max-width:899px){
 html:root body .na-hp{padding:0 0 72px}
 html:root body .na-hp-card{grid-template-columns:1fr;gap:20px;padding:0}
 html:root body .na-hp-media{height:auto;min-height:0;aspect-ratio:4/5}
 html:root body .na-hp-info{max-width:none;padding:0 16px}
 html:root body .na-hp-thumbs{display:none}
}
/* 03/11, Ale: more premium and in line with the rest of the site. Same layout as the Emission
   product page: photo flush on the left half at full height, info on the right with its type. */
html:root body .na-hp{padding:0!important;border-top:.5px solid rgba(242,240,233,.1)}
html:root body .na-hp-card{max-width:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
html:root body .na-hp-media{height:calc(100svh - 56px);min-height:620px;max-height:1100px;aspect-ratio:auto}
html:root body .na-hp-slide.stamp img{object-position:46% 60%}
html:root body .na-hp-info{max-width:none;padding:clamp(40px,6vh,64px) clamp(32px,3.2vw,54px);display:flex;flex-direction:column;justify-content:center;align-items:stretch}
html:root body .na-hp-info>*{max-width:560px}
html:root body :is(.na-hp-kicker,#na-x){margin:0 0 28px!important;font-size:13px!important;color:var(--v2-mid,#8a8a87)!important;text-transform:uppercase!important;letter-spacing:.02em!important;font-family:var(--v2-mono)!important}
html:root body .na-hp-info h2{margin:0!important;font-size:40px!important;line-height:1.1!important;font-weight:700!important;letter-spacing:.02em!important}
html:root body .na-hp-info .na-hp-price{margin:8px 0 0!important;font-size:14px!important;font-weight:500!important;color:rgba(242,240,233,.6)!important}
html:root body .na-hp-sub{margin-top:36px!important;padding-top:20px;border-top:.5px solid rgba(242,240,233,.14)}
html:root body .na-hp-status{margin-top:10px!important;padding-top:0!important;border-top:0!important}
html:root body .na-hp-sizes{margin:32px 0 10px}
html:root body .na-hp-sizes-note{margin:32px 0 10px}
html:root body .na-hp-more{margin:20px 0 0!important}
html:root body .na-hp-thumbs{grid-template-columns:repeat(4,64px);gap:8px;margin:56px 0 0}
html:root body .na-hp-thumbs .na-hp-dot{opacity:.4}
html:root body .na-hp-count{left:20px;bottom:18px}
@media (max-width:899px){
 html:root body .na-hp-card{grid-template-columns:1fr}
 html:root body .na-hp-media{height:auto;min-height:0;max-height:none;aspect-ratio:4/5}
 html:root body .na-hp-info{padding:28px 16px 64px}
 html:root body .na-hp-info h2{font-size:32px!important}
}
/* 03/11: no photo counter; air between the card and the scene that follows. */
html:root body .na-hp{padding-bottom:clamp(64px,8vw,128px)!important}
@media (max-width:899px){html:root body .na-hp{padding-bottom:48px!important}}
/* Ale: the gap below the card is the same gutter as between the split photos. */
html:root body .na-hp{padding-bottom:var(--split-gap,12px)!important}
@media (max-width:899px){html:root body .na-hp{padding-bottom:var(--split-gap,12px)!important}}
/* 03/11 pomeriggio, Ale: no XS; the 4 sizes line up with the 4 photos, one column each. */
html:root body .na-hp-sizes,html:root body .na-hp-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html:root body .na-hp-thumbs{margin:0 0 16px}
html:root body .na-hp-thumbs .na-hp-dot{width:100%}
html:root body .na-hp-media{--hp-ground:#1b1a1c}
html:root body .na-hp-sizes.is-note .na-hp-size{display:grid;place-items:center;color:var(--v2-mid,#8a8a87)!important;border-color:rgba(242,240,233,.12)!important;cursor:default}