/* TRS: show every colour of a product in one compact grid (no long scrolling).
   Works on any page where colour photos use the "all-images" class: polos, hoodies, t-shirts, oversized. */
.elementor-widget-wrap:has(> .all-images),
.trs-colour-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  align-content: start;
}
.elementor-widget-wrap:has(> .all-images) > :not(.all-images),
.trs-colour-grid > :not(.all-images) { grid-column: 1 / -1; }
.elementor-widget-wrap:has(> .all-images) > .all-images,
.trs-colour-grid > .all-images {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  cursor: zoom-in;
}
.all-images .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
.all-images img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #c4c4c4;
  display: block;
}
/* hide the old thumbnail/switcher column if a page has one */
.elementor-widget-wrap:has(> .all-images) ~ .trs-old-thumbs { display: none !important; }
@media (max-width: 767px) {
  .elementor-widget-wrap:has(> .all-images),
  .trs-colour-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
}
/* tap a colour to see it large */
.trs-zoom { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.trs-zoom img { max-width: min(92vw, 640px); max-height: 88vh; border-radius: 10px; background: #fff; }
/* hide the old small-thumbnail strip on colour pages (it repeats the same colours) */
body:has(.all-images) .elementor-widget-wrap:has(> .elementor-widget__width-initial.elementor-widget-image:not(.all-images) + .elementor-widget__width-initial.elementor-widget-image:not(.all-images)) > .elementor-widget__width-initial.elementor-widget-image:not(.all-images),
.trs-hide { display: none !important; }