/*
 * Jordan / Nike — “Scegli il modello”: stesse identiche classi (Nike = Jordan).
 * Desktop: meno colonne ma riquadri più grandi e testo leggibile.
 * Mobile: 2 colonne, riquadri più grandi e label come Nike.
 */
@media (min-width: 1025px){
  .model-picker-grid{
    grid-template-columns:repeat(6,minmax(110px,1fr)) !important;
    gap:0.65rem !important;
    width:100% !important;
    max-width:min(960px,100%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .model-picker-tile{
    border-radius:0.85rem !important;
    min-height:92px !important;
  }
  .model-picker-label{
    font-size:0.82rem !important;
    line-height:1.2 !important;
    padding-left:0.4rem !important;
    padding-right:0.4rem !important;
    letter-spacing:0.03em !important;
  }
}

@media (max-width:768px){
  .model-picker-grid{
    gap:0.5rem !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .model-picker-tile{
    min-height:0 !important;
    aspect-ratio:1/1 !important;
  }
  .model-picker-label{
    font-size:clamp(0.72rem,3.4vw,0.88rem) !important;
    font-weight:800 !important;
    line-height:1.18 !important;
  }
}

/* Galleria prodotto: mobile una colonna; desktop 2 colonne, immagini leggermente più compatte. */
#image-gallery.image-gallery,
.image-gallery{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
  max-width:100% !important;
  padding:0.5rem !important;
  box-sizing:border-box !important;
}
#image-gallery .gallery-item,
.image-gallery .gallery-item{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:center !important;
}
#image-gallery .gallery-image,
.image-gallery .gallery-image,
#image-gallery img.gallery-image,
.image-gallery img.gallery-image{
  width:100% !important;
  max-width:640px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

@media (min-width: 1025px){
  #image-gallery.image-gallery,
  .image-gallery{
    display:grid !important;
    flex-direction:unset !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0.85rem !important;
    align-items:start !important;
  }
  #image-gallery .gallery-item,
  .image-gallery .gallery-item{
    width:100% !important;
    max-width:100% !important;
  }
  #image-gallery .gallery-image,
  .image-gallery .gallery-image,
  #image-gallery img.gallery-image,
  .image-gallery img.gallery-image{
    max-width:100% !important;
    max-height:min(52vh,420px) !important;
    width:auto !important;
    margin:0 auto !important;
  }
  #image-gallery .gallery-item video.gallery-image,
  .image-gallery .gallery-item video.gallery-image{
    max-height:min(52vh,420px) !important;
    max-width:100% !important;
  }

  /* Solo una foto: non usare la griglia a 2 colonne (resterebbe tutta a sinistra). */
  #image-gallery.image-gallery:has(> .gallery-item:only-child),
  .image-gallery:has(> .gallery-item:only-child){
    grid-template-columns:minmax(0,1fr) !important;
    max-width:min(100%,720px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-items:center !important;
  }
  #image-gallery.image-gallery:has(> .gallery-item:only-child) .gallery-item,
  .image-gallery:has(> .gallery-item:only-child) .gallery-item{
    max-width:min(100%,640px) !important;
  }
}

/* Mobile/tablet: una sola immagine comunque centrata nel contenitore. */
#image-gallery.image-gallery:has(> .gallery-item:only-child) .gallery-item,
.image-gallery:has(> .gallery-item:only-child) .gallery-item{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:min(100%,640px) !important;
}

/* Pagina prodotto: due CTA centrati, stessa pill, testo su una riga dove possibile */
.product-page-more-img-wrap,
.product-page-cta-mobile-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.product-page-more-img-wrap a.contact-button-outline,
.product-page-cta-mobile-wrap a.contact-button-outline{
  max-width:min(96vw,720px) !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
@media (max-width: 768px){
  .product-page-more-img-wrap a.contact-button-outline,
  .product-page-cta-mobile-wrap a.contact-button-outline{
    white-space:normal !important;
    max-width:100% !important;
  }
}

/* Brand / product top bar: must scroll with the page (never stick to viewport). */
.relative.z-20.flex.items-center.justify-between.px-4.pt-4.pb-3.bg-transparent{
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}

/* Desktop only: 3 products per row, same card size (fixed columns, no squeeze). */
@media (min-width: 1025px){
  #product-grid,
  .product-grid{
    grid-template-columns:repeat(3,minmax(245px,245px)) !important;
    justify-content:center !important;
    gap:.6rem !important;
  }
}

/*
 * Griglia prodotti: contain + sfondo — molte schede usano logo orizzontale / Yupoo;
 * con cover in cornice 4:5 sembra "vuoto" o macchia grigia.
 */
.product-card .image-wrapper{
  background:#f3f4f6 !important;
}
.product-card .image-wrapper img{
  transform:none !important;
  object-fit:contain !important;
  object-position:center !important;
}

/*
 * CTA pill: desktop/tablet leggermente più grandi del bundle.
 * Mobile: stesso font / padding / bordo per tutti (come “Cerchi qualcosa…” in home); cambia solo la larghezza in base al testo.
 */
@media (min-width:769px){
  .contact-banner-link.contact-button-outline,
  .brand-page-cta.contact-button-outline,
  .product-page-cta-mobile-wrap a.contact-button-outline{
    font-size:1.0625rem !important;
    padding:.85rem 1.5rem !important;
    line-height:1.3 !important;
  }
}

/* Mobile: revert product cards to base behavior (no custom card scaling). */
@media (max-width: 768px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* App shell: block sideways scroll from wide descendants (iOS still scrolls if inner min-width wins). */
  #root{
    max-width:100% !important;
    overflow-x:clip !important;
  }

  /* Category bar: no fixed 380px min-width; must stay within screen. */
  .category-toggle-container,
  .liquid-glass-strong.category-toggle-container{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* Bundle applica scale(.74/.78) su questi wrap: il bottone in alto restava “rimpicciolito”. Stesso trattamento ovunque. */
  .contact-banner-mobile-wrap,
  .brand-page-cta-mobile-wrap,
  .product-page-cta-mobile-wrap{
    transform:none !important;
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:0 .5rem !important;
    overflow-x:clip !important;
  }

  /* Marca / prodotto (testo lungo su una riga): compatto come prima dell’ultimo ingrandimento. */
  .brand-page-cta.contact-button-outline,
  .product-page-cta-mobile-wrap a.contact-button-outline{
    min-width:0 !important;
    width:max-content !important;
    max-width:calc(100vw - 1.75rem) !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.22 !important;
    padding:.44rem .68rem !important;
    font-size:clamp(0.58rem,2.75vw,0.72rem) !important;
    font-weight:600 !important;
    border-width:1.5px !important;
    word-break:normal !important;
    hyphens:manual !important;
  }

  /* Banner home/brand: stesso font/padding del bottone marca; testo più lungo va a capo (niente overflow). */
  .contact-banner-link.contact-button-outline{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    white-space:normal !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.22 !important;
    padding:.44rem .68rem !important;
    font-size:clamp(0.58rem,2.75vw,0.72rem) !important;
    font-weight:600 !important;
    border-width:1.5px !important;
  }

  /* Less horizontal padding than bundle’s 28px + section px (avoids “peek” scroll). */
  .contact-banner-parent,
  .brand-cta-parent,
  .category-toggle-wrapper.category-toggle-parent{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-x:clip !important;
  }

  .max-w-7xl.mx-auto{
    max-width:100% !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
    box-sizing:border-box !important;
    min-width:0 !important;
  }

  /* Flex column child must shrink horizontally or grid inside can widen past 100%. */
  .min-h-screen .flex-1{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Mobile brand grids: strict anti-overflow layout. */
  #product-grid,
  .product-grid{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.35rem !important;
    padding:.08rem !important;
    overflow-x:hidden !important;
  }

  #product-grid > *,
  .product-grid > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .product-card,
  .product-card-link,
  .product-card-inner{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    transform:none !important;
  }

  /* Mobile: portrait frame; immagine intera visibile (loghi / rettangoli Yupoo). */
  .product-card .image-wrapper{
    aspect-ratio:4/5 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    background:#f3f4f6 !important;
  }

  .product-card .image-wrapper img{
    object-fit:contain !important;
    object-position:center !important;
    width:100% !important;
    height:100% !important;
  }

  .product-card .product-card-footer-inner{
    min-width:0 !important;
    width:100% !important;
  }

  /* Hide 1–4 column stepper on phone (control still defaults to 2 cols in app). */
  .grid-controls-mobile-wrap,
  .mobile-only.flex.items-center.justify-center.gap-3.py-3.px-4{
    display:none !important;
  }
}

/* Strong anti-overflow for tablet grids only (leave phone to mobile block above). */
@media (min-width: 769px) and (max-width: 1024px){
  #product-grid,
  .product-grid{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.45rem !important;
    padding:.12rem !important;
    overflow-x:hidden !important;
  }

  #product-grid > *,
  .product-grid > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .product-card,
  .product-card-link,
  .product-card-inner{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .product-card{
    overflow:hidden !important;
  }

  .product-card-inner{
    transform:none !important;
  }

  .product-card .image-wrapper{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:3/4 !important;
    overflow:hidden !important;
    background:#f3f4f6 !important;
  }

  .product-card .image-wrapper img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
}