/* ===== Thumbnail window: cleaned, non-overlapping final styles =====
   Purpose: make the alternate-thumbnail window match the Additional Information
   quiet glass panel while preventing old hover/mobile rules from fighting it. */
.card .altthumbs-wrap{
  margin-top:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  max-height:210px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
  box-sizing:border-box !important;
  padding:6px 8px !important;

  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010)) !important;
  box-shadow:none !important;
  transition:none !important;
}

.card .altthumbs-wrap:hover,
.card .altthumbs-wrap:active,
.card .altthumbs-wrap:focus,
.card .altthumbs-wrap:focus-within{
  border-color:rgba(255,255,255,.085) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010)) !important;
  box-shadow:none !important;
  outline:none !important;
}

.card .altthumbs{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.card .altthumb{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:block !important;
  min-width:0 !important;
  padding:2px !important;
  cursor:pointer !important;
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.012) !important;
  box-shadow:none !important;
  transition:border-color .12s ease, background .12s ease !important;
}

.card .altthumb:hover,
.card .altthumb:focus-visible{
  border-color:#ffffff !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
  outline:none !important;
}

.card .altthumb:active,
.card .altthumb:focus{
  border-color:rgba(255,255,255,.075) !important;
  background:rgba(255,255,255,.012) !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none !important;
}

.card .altthumb img{
  width:100% !important;
  aspect-ratio:3 / 4 !important;
  height:auto !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.025) !important;
  -webkit-user-drag:none !important;
}

/* The thumbnail currently shown in the main view turns black and white. */
.card .altthumb.is-main-view-selected img{
  filter:grayscale(1) saturate(0) !important;
}

.card .altthumbs .alt-divider,
.card .altthumbs .alt-owner-divider .line,
.card .alt-owner-rule{
  background:rgba(255,255,255,.075) !important;
}

.card .altthumbs .alt-owner-divider{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  margin:8px 0 6px !important;
  opacity:.9 !important;
}

.card .altthumbs .alt-owner-divider .lbl,
.card .alt-owner-label{
  color:rgba(168,172,179,.88) !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}

/* Selected cut: white border only, no layout changes. */
.card .altthumb.is-main-view-selected,
.card .altthumb.is-main-view-selected:hover,
.card .altthumb.is-main-view-selected:active,
.card .altthumb.is-main-view-selected:focus,
.card .altthumb.is-main-view-selected:focus-visible{
  border-color:#ffffff !important;
}

@media (max-width:780px){
  .card .altthumbs-wrap{
    padding:4px !important;
    border-color:rgba(255,255,255,.075) !important;
    background:rgba(255,255,255,.012) !important;
    transition:none !important;
  }

  /* Mobile only: keep the same 3-column thumbnail grid, just reduce spacing slightly. */
  .card .altthumbs{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:3px !important;
  }

  .card .altthumb,
  .card .altthumb:hover,
  .card .altthumb:active,
  .card .altthumb:focus,
  .card .altthumb:focus-visible{
    border-color:rgba(255,255,255,.075) !important;
    background:rgba(255,255,255,.012) !important;
    box-shadow:none !important;
    outline:none !important;
    transform:none !important;
    transition:none !important;
    padding:1px !important;
  }

  .card .altthumb.is-main-view-selected,
  .card .altthumb.is-main-view-selected:hover,
  .card .altthumb.is-main-view-selected:active,
  .card .altthumb.is-main-view-selected:focus,
  .card .altthumb.is-main-view-selected:focus-visible{
    border-color:#ffffff !important;
  }
}