/* =====================================================================
   Product photo gallery — 2026.09.08

   The product page used to show one photograph. It now shows every picture
   the product has: the featured shot cut out onto the dark stage, the extra
   angles, and anything the owner adds in WooCommerce. A strip of thumbnails
   sits under the stage; arrows and a swipe move through them.

   The stage, the main photo panel and its is-cut / is-plain states are
   defined in mmi-home.css. Nothing here redefines them — this file only adds
   the thumbnail strip, the arrows and the counter, so it can be removed
   without leaving a mark.

   Loaded on every MMI page because the cards on the home and shop pages use
   the same cutouts; the rules below are scoped so they cost nothing there.
   ===================================================================== */

/* The stage and its thumbnail strip share the grid column. */
.mmi-page .product-stage-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.mmi-page .product-stage-col .product-stage{width:100%}

/* A photo swap fades rather than blinks. */
.mmi-page .product-stage .product-main-photo img{transition:opacity .18s ease}
.mmi-page .product-stage .product-main-photo.is-swapping img{opacity:.3}

/* The stage must not change height between photos. The panel keeps its
   square aspect-ratio only while nothing in flow is taller than it, and a
   portrait picture at height:100% inside an auto-sized grid row is exactly
   that — the panel stretched to the picture and the whole column jumped.
   Taking the picture out of flow makes the square definite; object-fit then
   frames every angle the same way, on the stage and on the lit shelf alike. */
.mmi-page .product-stage .product-main-photo[class*="is-"] > img{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  width:100%;height:100%;max-height:100%;
  box-sizing:border-box;
}

/* Arrows sit on the stage, not the photo, so they clear the cutout. */
.mmi-page .gallery-arrow{
  position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:38px;height:38px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(9,9,18,.64);color:#fff;
  display:grid;place-items:center;cursor:pointer;opacity:.78;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .2s ease,border-color .2s ease,background .2s ease;
}
.mmi-page .gallery-arrow.prev{inset-inline-start:14px}
.mmi-page .gallery-arrow.next{inset-inline-end:14px}
.mmi-page .gallery-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .mmi-page .gallery-arrow svg{transform:scaleX(-1)}
.mmi-page .gallery-arrow:hover,
.mmi-page .gallery-arrow:focus-visible{
  opacity:1;background:rgba(9,9,18,.88);
  border-color:rgba(var(--accent-rgb,79,216,224),.7);
}
.mmi-page .gallery-arrow:focus-visible{outline:2px solid var(--cyan,#4fd8e0);outline-offset:2px}

/* "2 / 5" in the corner opposite the badge. */
.mmi-page .gallery-count{
  position:absolute;z-index:3;top:18px;inset-inline-end:18px;
  padding:5px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);background:rgba(9,9,18,.55);
  color:var(--muted,#9a97b3);font-size:9px;font-weight:800;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  /* "1 / 6" reads the same way in Arabic; left to the bidi algorithm it came out as "6 / 1". */
  direction:ltr;unicode-bidi:isolate;
}

/* The strip. Scrolls sideways on a phone rather than wrapping under the buy buttons. */
.mmi-page .product-thumbs{
  display:flex;gap:10px;padding:4px 2px 6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.mmi-page .product-thumbs::-webkit-scrollbar{height:5px}
.mmi-page .product-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.mmi-page .product-thumb{
  flex:0 0 auto;width:74px;height:74px;padding:0;
  border-radius:16px;border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 50% 46%,rgba(var(--accent-rgb,79,216,224),.22),transparent 68%),
    linear-gradient(160deg,#1b1533,#0d0d16);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;
  scroll-snap-align:center;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.mmi-page .product-thumb img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
/* A picture nobody has cut out keeps the light plate, as it does on the stage. */
.mmi-page .product-thumb.is-plain{background:#fff}
.mmi-page .product-thumb.is-plain img{mix-blend-mode:multiply}
.mmi-page .product-thumb:hover{border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.mmi-page .product-thumb.is-active{
  border-color:rgba(var(--accent-rgb,79,216,224),.85);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb,79,216,224),.3),0 0 20px -6px rgba(var(--accent-rgb,79,216,224),.9);
}
.mmi-page .product-thumb:focus-visible{outline:2px solid var(--cyan,#4fd8e0);outline-offset:2px}

@media (max-width:620px){
  .mmi-page .product-stage-col{gap:10px}
  .mmi-page .product-thumb{width:60px;height:60px;border-radius:13px}
  .mmi-page .product-thumb img{padding:6px}
  .mmi-page .gallery-arrow{width:32px;height:32px}
  .mmi-page .gallery-arrow.prev{inset-inline-start:10px}
  .mmi-page .gallery-arrow.next{inset-inline-end:10px}
  .mmi-page .gallery-count{top:12px;inset-inline-end:12px}
}

@media (prefers-reduced-motion:reduce){
  .mmi-page .product-stage .product-main-photo img,
  .mmi-page .product-thumb,
  .mmi-page .gallery-arrow{transition:none}
}