/* PAHM — PRODUCT MEDIA FINAL SYSTEM
   Single source of truth for all product media.
   Never crop product photography. Never assume a fixed source ratio.
   The display box is responsive; the image is always fully contained. */

.product-image,
.product-modal .modal-image,
.product-modal .modal-gallery,
.product-modal .modal-main-image {
  box-sizing:border-box!important;
}

/* Catalog cards: consistent grid, full garment visible. */
.product-image{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:3/4!important;
  overflow:hidden!important;
  background:#f3f1ed!important;
}
.product-image>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  background:#f3f1ed!important;
}
.product-card:hover .product-image>img{transform:none!important}

/* Product modal: the viewport is the constraint, never the source image. */
.product-modal .modal-image{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  background:#f3f1ed!important;
}
.product-modal .modal-gallery{
  width:100%!important;
  min-width:0!important;
  background:#f3f1ed!important;
}
.product-modal .modal-main-image{
  position:relative!important;
  width:100%!important;
  height:min(72vh,760px)!important;
  min-height:0!important;
  max-height:72vh!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f3f1ed!important;
}
.product-modal .modal-main-image>img,
.product-modal .modal-main-image img#modalImg,
.product-modal .modal-main-image img#finalGalleryImg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  background:#f3f1ed!important;
}

/* Navigation must sit over the display box, not change image sizing. */
.product-modal .modal-main-image .gallery-nav,
.product-modal .modal-main-image .final-prev,
.product-modal .modal-main-image .final-next{
  z-index:3!important;
}
.product-modal .gallery-nav{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
.product-modal .gallery-nav button{pointer-events:auto!important}

/* Thumbnails always preserve their own boxes; they never affect the hero image. */
.product-modal .gallery-thumbs{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:9px 12px 8px!important;
  background:#faf8f4!important;
  scrollbar-width:none!important;
}
.product-modal .gallery-thumbs::-webkit-scrollbar{display:none!important}
.product-modal .gallery-thumb{
  flex:0 0 64px!important;
  width:64px!important;
  height:82px!important;
  min-width:64px!important;
  min-height:82px!important;
  padding:0!important;
  overflow:hidden!important;
  background:#f3f1ed!important;
}
.product-modal .gallery-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

/* Product modal itself remains scrollable so the product details are never hidden. */
.product-modal{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-width:0!important;
  min-height:0!important;
}

@media(max-width:900px){
  .product-modal{
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .product-modal .modal-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .product-modal .modal-gallery{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  .product-modal .modal-main-image{
    width:100%!important;
    height:min(64dvh,680px)!important;
    min-height:420px!important;
    max-height:64dvh!important;
    aspect-ratio:auto!important;
  }
  .product-modal .modal-main-image>img,
  .product-modal .modal-main-image img#modalImg,
  .product-modal .modal-main-image img#finalGalleryImg{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  .product-modal .gallery-controls{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    min-height:42px!important;
    background:#faf8f4!important;
  }
  .product-modal .gallery-thumbs{
    min-height:88px!important;
    padding:7px 12px 11px!important;
  }
  .product-modal .modal-info{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    background:#faf8f4!important;
  }
  .product-modal .modal-close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:30!important;
  }

  /* Cards also use contain, so a newly uploaded portrait/landscape asset cannot crop. */
  .product-image{
    aspect-ratio:3/4!important;
    height:auto!important;
  }
  .product-image>img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}

@media(max-width:420px){
  .product-modal .modal-main-image{
    height:min(62dvh,620px)!important;
    max-height:62dvh!important;
    min-height:400px!important;
  }
  .product-modal .gallery-thumb{
    flex-basis:56px!important;
    width:56px!important;
    height:70px!important;
    min-width:56px!important;
    min-height:70px!important;
  }
}