/* FUIX 2026-10-28 — Galleria PDP definitiva, versione A (miniature laterali).
   Nessun object-fit "cover": la foto non viene mai ritagliata sul prodotto. Nessun ritaglio del vuoto: la fascia e' sempre
   l'intera foto; il lightbox mostra sempre la foto intera. Nessuna libreria (scroll-snap nativo). */


.fxg{position:relative;width:100%;margin:0 0 12px;-webkit-tap-highlight-color:transparent;--fxg-line:#e3e3e3;--fxg-on:#111}
.fxg *,.fxg *::before,.fxg *::after{box-sizing:border-box}
.fxg-main{position:relative;min-width:0}
.fxg-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fff;border-radius:0}
.fxg-track::-webkit-scrollbar{display:none}
.fxg-track:focus-visible{outline:2px solid var(--fxg-on);outline-offset:-2px}
.fxg-slide{flex:0 0 100%;min-width:0;position:relative;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:var(--fxg-ar);cursor:zoom-in}
.images-container .fxg .fxg-img{display:block;width:100%;max-width:none;height:auto;margin:0;padding:0;border:0;transform:translateY(calc(var(--fxg-top) * -1));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@supports not (aspect-ratio:1){.images-container .fxg .fxg-img{transform:none}.fxg-slide{height:auto}}

.fxg .product-flags{position:absolute;top:8px;left:8px;z-index:3;margin:0;padding:0;list-style:none;pointer-events:none}
.fxg-count{position:absolute;right:10px;bottom:10px;z-index:3;padding:4px 10px;border-radius:14px;background:rgba(17,17,17,.74);color:#fff;font:500 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;pointer-events:none;font-variant-numeric:tabular-nums}
.fxg-count b{font-weight:700}
.fxg-zoom{position:absolute;right:6px;top:6px;z-index:3;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#111;box-shadow:0 1px 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* miniature */
.fxg-thumbs{position:relative;min-width:0}
.fxg-thumbs-in{display:flex;gap:6px;overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fxg-thumbs-in::-webkit-scrollbar{display:none}
.fxg-thumb{position:relative;flex:0 0 auto;padding:0;margin:0;border:1px solid var(--fxg-line);border-radius:6px;background:#fff;overflow:hidden;cursor:pointer;opacity:.78;transition:opacity .15s,border-color .15s}
.fxg-thumb img{position:absolute;left:0;top:50%;width:100%;max-width:none;height:auto;transform:translateY(calc(var(--fxg-cy) * -1));pointer-events:none}
.fxg-thumb.is-active{opacity:1;border-color:var(--fxg-on);box-shadow:0 0 0 1px var(--fxg-on)}
.fxg-thumb:focus-visible{outline:2px solid var(--fxg-on);outline-offset:2px}

/* ---------- miniature a sinistra, foto a destra (mobile e desktop) ---------- */
.fxg--a{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:6px;align-items:start}
.fxg--a.fxg--single{display:block}
.fxg--a .fxg-main{grid-column:2;grid-row:1}
.fxg--a .fxg-thumbs{grid-column:1;grid-row:1;align-self:stretch}
.fxg--a .fxg-thumbs-in{position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:column;overflow-x:hidden;overflow-y:auto;gap:6px;padding:0 0 2px}
.fxg--a .fxg-thumb{--tw:52px;width:var(--tw);height:clamp(44px,calc(var(--tw) * var(--fxg-rh) * var(--fxg-band)),66px)}
@media (max-width:767.98px){
  .fxg--a{margin-left:-10px;margin-right:-10px;width:calc(100% + 20px)}
}
@media (min-width:768px){
  .fxg--a{grid-template-columns:72px minmax(0,1fr);column-gap:10px}
  .fxg--a .fxg-thumb{--tw:72px;height:clamp(52px,calc(var(--tw) * var(--fxg-rh) * var(--fxg-band)),90px)}
}

/* ---------- lightbox ---------- */
html.fxg-lb-open,html.fxg-lb-open body{overflow:hidden!important}
.fxg-lb{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483001;background:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.fxg-lb.is-open{opacity:1;visibility:visible;transition:opacity .16s ease}
.fxg-lb-top{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 16px;padding-top:max(6px,env(safe-area-inset-top))}
.fxg-lb-count{font-size:14px;font-variant-numeric:tabular-nums;color:#222}
.fxg-lb-btns{display:flex;gap:4px}
.fxg-lb button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#111;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fxg-lb button:focus-visible{outline:2px solid #111}
.fxg-lb-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fxg-lb-track::-webkit-scrollbar{display:none}
.fxg-lb-slide{flex:0 0 100%;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden}
.fxg-lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none}
.fxg-lb.is-zoomed .fxg-lb-track{overflow-x:hidden}
.fxg-lb.is-zoomed .fxg-lb-slide.is-cur{overflow:auto;display:block;-webkit-overflow-scrolling:touch}
.fxg-lb.is-zoomed .fxg-lb-slide.is-cur img{max-width:none;max-height:none;width:230%;margin:0 auto}
.fxg-lb-prev,.fxg-lb-next{position:absolute!important;top:50%;margin-top:-22px;background:rgba(255,255,255,.88)!important;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.fxg-lb-prev{left:8px}.fxg-lb-next{right:8px}
.fxg-lb.is-first .fxg-lb-prev,.fxg-lb.is-last .fxg-lb-next{display:none}
.fxg-lb.is-single .fxg-lb-count{visibility:hidden}
@media (prefers-reduced-motion:reduce){.fxg-lb,.fxg-thumb{transition:none}}

/* FUIX 2026-10-28 (PDP mobile): brand + titolo sopra la galleria. Solo <768px (colonna singola);
   da 768px brand/titolo stanno gia' in alto accanto alla galleria. Il h1 resta l'unico (nessun duplicato).
   display:contents sul blocco info lascia invariato il DOM; order riporta brand/titolo in testa. */
@media (max-width:767.98px){
  #main .product-container{display:flex;flex-direction:column}
  #main .product-container>[class*="col-form_id-form_15874367062488778"]{display:contents}
  #main .product-container>[class*="col-form_id-form_9367402777406408"]{order:-1}
  #main .product-container>[class*="col-form_id-form_4666379129988496"]{order:99}
  #main .product-container [class*="col-form_id-form_15874367062488778"]>*{padding-left:9px;padding-right:9px}
  #main .product-container .cw-brand{order:-3;margin:0 0 2px;padding-top:2px}
  #main .product-container h1.product-detail-name{order:-2;margin:0 0 10px}
}