/* Product photo gallery -- the product page's big picture plus a row of
   thumbnails (front, back print, lifestyle). Loaded through
   templates/shop/product_detail.html's {% block head %} only when a product
   has two views or more; never an inline <style> block. The thumbnail swap
   is static/js/product-gallery.js. Bump GALLERY_ASSET_VERSION
   (apps/shop/views.py) with any edit here.

   Colour, radius and focus tokens all come from site.css (--line, --copper,
   --copper-dk, --river, --radius) -- nothing is redefined here. The footprint
   matches the single .product-hero it replaces, so a product page keeps its
   shape whether it has one photo or five. */

.product-gallery {
  max-width: 420px;
  margin-bottom: 1.2rem;
}

/* contain, not the hero's cover: the back print is the reason this gallery
   exists, and a lifestyle shot that is not square must not crop it away. */
.product-gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* One row that scrolls sideways on a phone rather than wrapping under the
   picture. The padding is room for the focus ring, which the scroller would
   otherwise clip. */
.product-gallery-thumbs {
  display: flex;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: .3rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.product-gallery-thumbs li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* 4rem (64px): comfortably over the 44px minimum tap target. The border is
   the same 2px on every thumbnail so marking the current one never shifts
   the row. */
.product-gallery-thumb {
  display: block;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A light tint, so a thumbnail under the pointer never reads as the one that
   is showing (that one is the full --copper-dk below). */
.product-gallery-thumb:hover {
  border-color: color-mix(in srgb, var(--copper) 40%, var(--paper));
}

.product-gallery-thumb[aria-current="true"] {
  border-color: var(--copper-dk);
}

.product-gallery-thumb:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

/* Read out by product-gallery.js ("View 2 of 3: Back: ..."), never shown:
   the picture itself is what a sighted shopper is looking at. */
.product-gallery-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}