/**
 * Product Gallery: front end styles (also loaded in the editor).
 *
 * Same look as the old [purific_product_gallery] shortcode, with the
 * block's own classes. The page grid around it (.pf-product: gallery
 * column + info column) is the template's, in assets/css/style.css.
 * Rules that must beat WordPress's layout resets use two classes
 * (AGENTS.md lesson 8).
 *
 * Options: .is-sticky (sticky beside the info column on desktop),
 * .is-ratio-4-3 / .is-ratio-4-5 (image shape, default square),
 * .has-fit-contain (whole image shown, default fills the frame).
 * Colours: --pf-product-media-bg (behind the main image) and
 * --pf-product-media-thumb-bg (thumbnails), set by render.php from the
 * Styles tab; unset = soft radial fade / light grey.
 * States: .is-selected (thumbnail), .is-active (dot), .is-dragging,
 * .is-single (one image).
 */
.pf-product-media.pf-product-media{
  --pf-product-media-ratio:1/1;
  display:flex;flex-direction:column;gap:var(--pf-s4);
  min-width:0;margin:0;
}
.pf-product-media.is-ratio-4-3{--pf-product-media-ratio:4/3}
.pf-product-media.is-ratio-4-5{--pf-product-media-ratio:4/5}
.pf-product-media.is-sticky{position:sticky;top:calc(var(--pf-header-h) + 24px)}

.pf-product-media.pf-product-media [hidden]{display:none}

/* ---------- main image row ---------- */
.pf-product-media__stage{position:relative;min-width:0}

.pf-product-media__track{
  display:flex;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  border-radius:var(--pf-radius);
  -webkit-overflow-scrolling:touch;
}
.pf-product-media__track::-webkit-scrollbar{display:none}
.pf-product-media__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

.pf-product-media__slide{
  flex:0 0 100%;aspect-ratio:var(--pf-product-media-ratio);
  min-height:0;overflow:hidden;
  scroll-snap-align:center;
  border-radius:var(--pf-radius);
  background:var(--pf-product-media-bg,radial-gradient(circle at 50% 42%,var(--pf-hover),var(--pf-bg) 70%));
  display:grid;place-items:center;
  user-select:none;
}
.pf-product-media__slide *{pointer-events:none}
.pf-product-media .pf-product-media__img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.pf-product-media.has-fit-contain .pf-product-media__img{object-fit:contain}

/* Sale badge, top left over every slide. Frosted light cyan, the same look
   as the product cards' badge (shared/product-card.css). */
.pf-product-media__sale{
  position:absolute;top:var(--pf-s4);left:var(--pf-s4);z-index:2;
  padding:5px 12px;border-radius:var(--pf-radius);
  background:rgba(232,250,255,.92);color:var(--pf-text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:var(--pf-small);font-weight:600;line-height:1.4;letter-spacing:.02em;
  pointer-events:none;
}

/* Arrows: shown on hover (always on touch screens), hidden at the ends. */
.pf-product-media .pf-product-media__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  padding:0;margin:0;border:0;
  background:rgba(0,0,0,.45);color:#ffffff;
  box-shadow:0 1px 6px rgba(0,0,0,.15);
  cursor:pointer;opacity:0;
  transition:opacity .15s var(--pf-ease), background .15s var(--pf-ease);
}
.pf-product-media .pf-product-media__nav[disabled]{display:none}
.pf-product-media__nav:focus-visible{opacity:1;outline:2px solid #ffffff;outline-offset:2px}
.pf-product-media__nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.pf-product-media__nav--prev{left:14px}
.pf-product-media__nav--next{right:14px}
.pf-product-media__stage:hover .pf-product-media__nav{opacity:1}
@media (hover:hover){
  .pf-product-media .pf-product-media__nav:hover{background:rgba(0,0,0,.65)}
}
@media (hover:none){
  .pf-product-media .pf-product-media__nav{opacity:1}
}

/* Dots, frosted pill at the bottom centre. */
.pf-product-media__dots{
  position:absolute;left:50%;bottom:14px;z-index:2;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--pf-s2);
  padding:var(--pf-s2) var(--pf-s3);
  border-radius:999px;
  background:rgba(255,255,255,.01);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  backdrop-filter:blur(8px) saturate(150%);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.pf-product-media .pf-product-media__dot{
  width:8px;height:8px;border-radius:50%;
  padding:0;margin:0;border:0;cursor:pointer;
  background:rgba(23,26,32,.20);
  transition:background .15s var(--pf-ease);
}
.pf-product-media .pf-product-media__dot.is-active{background:rgba(23,26,32,.85)}
.pf-product-media__dot:focus-visible{outline:2px solid var(--pf-text);outline-offset:2px}
@media (hover:hover){
  .pf-product-media .pf-product-media__dot:not(.is-active):hover{background:rgba(23,26,32,.45)}
}

/* ---------- thumbnails ---------- */
.pf-product-media__thumbs{flex:0 0 auto;min-width:0}
.pf-product-media__thumb-track{
  display:flex;gap:var(--pf-s3);
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scrollbar-width:none;cursor:grab;
}
.pf-product-media__thumb-track::-webkit-scrollbar{display:none}
.pf-product-media__thumb-track.is-dragging{cursor:grabbing;scroll-behavior:auto}
.pf-product-media__thumb-track.is-dragging .pf-product-media__thumb{pointer-events:none}

.pf-product-media .pf-product-media__thumb{
  position:relative;
  flex:0 0 calc((100% - 4 * var(--pf-s3)) / 5);
  min-width:56px;aspect-ratio:1/1;
  padding:0;margin:0;border:0;
  border-radius:var(--pf-radius);
  background:var(--pf-product-media-thumb-bg,var(--pf-hover));
  overflow:hidden;cursor:pointer;
  display:grid;place-items:center;
  font-size:var(--pf-tiny);color:var(--pf-text-faint);
  opacity:.55;
  transition:opacity .15s var(--pf-ease);
}
.pf-product-media .pf-product-media__thumb.is-selected{opacity:1}
.pf-product-media__thumb:focus-visible{opacity:1;outline:2px solid var(--pf-text);outline-offset:-2px}
@media (hover:hover){
  .pf-product-media .pf-product-media__thumb:hover{opacity:1}
}
.pf-product-media .pf-product-media__thumb-img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ---------- phones and small tablets: full width, square corners ---------- */
@media (max-width:900px){
  .pf-product-media.pf-product-media{gap:0}
  .pf-product-media.is-sticky{position:static}

  .pf-product-media__track,
  .pf-product-media__slide,
  .pf-product-media .pf-product-media__thumb{border-radius:0}

  .pf-product-media__thumbs{padding:var(--pf-s3) var(--pf-s4) 0}
  .pf-product-media__thumb-track{gap:var(--pf-s2)}
  .pf-product-media .pf-product-media__thumb{flex-basis:calc((100% - 3 * var(--pf-s2)) / 4)}

  .pf-product-media__nav--prev{left:var(--pf-s4)}
  .pf-product-media__nav--next{right:var(--pf-s4)}
  .pf-product-media__dots{bottom:var(--pf-s5)}
}

@media (prefers-reduced-motion:reduce){
  .pf-product-media__thumb-track{scroll-behavior:auto}
  .pf-product-media .pf-product-media__nav,
  .pf-product-media .pf-product-media__dot,
  .pf-product-media .pf-product-media__thumb{transition:none}
}