/* Shared product-gallery rail: square tiles, centred when short, scrollable when long. */
#detail .brillo-gallery .brillo-thumbs,
#detail .brillo-gallery .exclusive-photo-thumbs,
#detail .brillo-gallery .exclusive-photo-thumbs[data-layout="full"],
#detail .brillo-gallery .exclusive-photo-thumbs[data-layout="scroll"]{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:safe center;
  gap:8px;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:16px auto 0;
  padding:0 0 8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
#detail .brillo-gallery .gallery-carousel .brillo-thumbs{margin:0}
#detail .brillo-gallery .brillo-thumbs[hidden],
#detail .brillo-gallery .exclusive-photo-thumbs[hidden]{display:none}
#detail .brillo-gallery .brillo-thumbs > button,
#detail .brillo-gallery .exclusive-photo-thumbs > button,
#detail .brillo-gallery .exclusive-photo-thumbs[data-layout="full"] > button,
#detail .brillo-gallery .exclusive-photo-thumbs[data-layout="scroll"] > button{
  display:flex;
  flex:0 0 112px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:112px;
  height:112px;
  min-width:112px;
  min-height:112px;
  padding:6px;
  scroll-snap-align:center;
}
#detail .brillo-gallery .brillo-thumbs > button > img,
#detail .brillo-gallery .brillo-thumbs > button > svg,
#detail .brillo-gallery .exclusive-photo-thumbs > button > img{
  display:block;
  flex:0 1 72px;
  width:100%;
  height:72px;
  min-height:0;
  object-fit:contain;
}
#detail .brillo-gallery .brillo-thumbs > button > span,
#detail .brillo-gallery .exclusive-photo-thumbs > button > span{
  display:block;
  max-width:100%;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
}
@media(max-width:800px){
  #detail .brillo-gallery .brillo-thumbs,
  #detail .brillo-gallery .exclusive-photo-thumbs{margin-top:10px}
  #detail .brillo-gallery .brillo-thumbs > button,
  #detail .brillo-gallery .exclusive-photo-thumbs > button,
  #detail .brillo-gallery .exclusive-photo-thumbs[data-layout="full"] > button,
  #detail .brillo-gallery .exclusive-photo-thumbs[data-layout="scroll"] > button{
    flex-basis:92px;
    width:92px;
    height:92px;
    min-width:92px;
    min-height:92px;
    padding:5px;
  }
  #detail .brillo-gallery .brillo-thumbs > button > img,
  #detail .brillo-gallery .brillo-thumbs > button > svg,
  #detail .brillo-gallery .exclusive-photo-thumbs > button > img{
    flex-basis:56px;
    height:56px;
  }
}

/* Full-screen navigation follows the fixed photo frame, not image intrinsic size. */
.brillo-zoom.brillo-zoom.exclusive-zoom .exclusive-zoom-stage .zoom-content:has(>img){
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:0;
}
.brillo-zoom.brillo-zoom.exclusive-zoom .exclusive-zoom-stage .zoom-content > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}
@media(max-width:800px){
  .brillo-zoom.brillo-zoom.exclusive-zoom .exclusive-zoom-stage .zoom-content:has(>img){
    height:calc(100% - 56px);
  }
}
.catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation,
.catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls{
  box-sizing:border-box;
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  transform:none;
  background:transparent;
  z-index:2;
  pointer-events:none;
}
.catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > button,
.catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  pointer-events:auto;
}
.catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > button:first-child,
.catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > button:first-child{left:8px;right:auto}
.catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > button:last-child,
.catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > button:last-child{right:8px;left:auto}
.catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > span,
.catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > span{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
}
@media(max-width:800px){
  .catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation,
  .catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls{
    position:static;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:52px;
    margin:4px 0 0;
    padding:0 4px;
    pointer-events:auto;
  }
  .catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > button,
  .catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > button,
  .catalog-collection #detail .brillo-zoom:not(.exclusive-zoom) .zoom-navigation > span,
  .catalog-kaws #detail .brillo-zoom.exclusive-zoom .exclusive-zoom-stage .exclusive-zoom-controls > span{
    position:static;
    inset:auto;
    transform:none;
  }
}

/* BIG MOON uses original photographs in a fixed square frame. */
#detail .brillo-gallery.big-moon-gallery .brillo-main-photo > img,
#detail .brillo-gallery.big-moon-gallery .exclusive-photo-thumbs > button > img,
.catalog-kaws .brillo-zoom.exclusive-zoom.big-moon-zoom .exclusive-zoom-stage img{
  object-fit:cover;
  object-position:center;
  background:#071925;
  transform:none;
}
#detail .brillo-gallery.big-moon-gallery .brillo-main-photo > img[src$="/4-original.jpg"],
#detail .brillo-gallery.big-moon-gallery .exclusive-photo-thumbs > button > img[src$="/4-original.jpg"],
.catalog-kaws .brillo-zoom.exclusive-zoom.big-moon-zoom .exclusive-zoom-stage img[src$="/4-original.jpg"]{
  object-fit:contain;
}

/* A definite square frame avoids percentage-height loops on narrow screens. */
#detail .brillo-layout{
  min-width:0;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
#detail .brillo-gallery,
#detail .brillo-buy,
#detail .brillo-main-photo,
#detail .collection-photo-stage,
#detail .exclusive-photo-stage{min-width:0;max-width:100%}
.catalog-collection #detail .brillo-main-photo{
  box-sizing:border-box;
  position:relative;
  width:100%;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
}
.catalog-collection #detail .brillo-main-photo .kaws-photo{
  box-sizing:border-box;
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  padding:0;
}
.catalog-collection #detail .brillo-main-photo .collection-photo{
  width:100%;
  height:100%;
  min-width:0;
}
.catalog-collection #detail .brillo-main-photo .collection-photo > img,
.catalog-collection #detail .brillo-main-photo .collection-photo > svg{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
@media(max-width:800px){
  #detail .brillo-layout{grid-template-columns:minmax(0,1fr)}
}

/* Anchor arrows to the photo edges; keep the counter independent of them. */
.catalog-collection #detail .collection-photo-stage .gallery-main-nav,
.catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls{
  box-sizing:border-box;
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  pointer-events:none;
}
.catalog-collection #detail .collection-photo-stage .gallery-main-nav > button,
.catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  pointer-events:auto;
}
.catalog-collection #detail .collection-photo-stage .gallery-main-nav > button:first-child,
.catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > button:first-child{left:8px;right:auto}
.catalog-collection #detail .collection-photo-stage .gallery-main-nav > button:last-child,
.catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > button:last-child{right:8px;left:auto}
.catalog-collection #detail .collection-photo-stage .gallery-main-nav > span,
.catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > span{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
}
@media(max-width:800px){
  .catalog-collection #detail .collection-photo-stage .gallery-main-nav,
  .catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls{
    position:static;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:52px;
    margin:4px 0 0;
    padding:0 4px;
    pointer-events:auto;
  }
  .catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls{
    position:absolute;
    top:100%;
    bottom:auto;
  }
  .catalog-collection #detail .collection-photo-stage .gallery-main-nav > button,
  .catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > button,
  .catalog-collection #detail .collection-photo-stage .gallery-main-nav > span,
  .catalog-kaws #detail .exclusive-photo-gallery .exclusive-photo-stage .exclusive-photo-controls > span{
    position:static;
    inset:auto;
    transform:none;
  }
}
