/* KAN-43 — product photo galleries outside the shop menu: the small product cards
   (deals rail, search, favourites, "popular with your order") and the product page.
   The gallery itself (track, dots, thumbnails, swipe, autoplay) is oy-gallery.css + oy-gallery.js;
   this file only fits it into those two places. Uses the app tokens from oy/app.css. */

/* ---------------------------------------------------------------- cards */
/* A card's photos fill its square tile and sit above the stretched name link (z-index 1),
   so a thumb swipes them instead of hitting the link. .oa-pc-gal is a link to the item too,
   so a plain tap still opens it. Badge, heart and "+" stay on top. */
.oa-pc-img--gal > .oa-pc-gal {
  position: absolute; inset: 0; z-index: 2; display: block;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.oa-pc-img--gal > .oa-pc-gal > .oy-gal { width: 100%; height: 100%; }
.oa-pc .oa-pc-img--gal > .oa-pc-badge,
.oa-pc .oa-pc-img--gal > .oa-pc-wish,
.oa-pc .oa-pc-img--gal > .oa-pc-add { z-index: 3; }
/* The initials tile waits underneath: hidden while the photos load, back if every one fails
   (the gallery then hides itself). Browsers without :has() just show it until the photos land. */
.oa-pc-img--gal > .oa-pc-gal:has(> .oy-gal:not(.is-empty)) + .oa-ini { visibility: hidden; }

/* --------------------------------------------------------- product page */
/* The stage keeps the page's square photo well; the photos sit inside it whole (data-fit="contain"). */
.oy-pd2-thumb--gal > .oy-gal { position: absolute; inset: 0; width: 100%; height: 100%; }
.oy-pd2-thumb--gal > .oy-pd2-wish { z-index: 3; }

/* Thumbnails under the big photo (look: oy-gallery.css). Padding keeps the focus ring inside the strip. */
.oy-pd2-gthumbs { margin-top: -4px; padding: 4px; }
.oy-pd2-gthumbs .oy-gal-thumb { width: 60px; height: 60px; }
@media (min-width: 600px) {
  .oy-pd2-gthumbs .oy-gal-thumb { width: 68px; height: 68px; }
}