/* ==========================================================================
   KAN-43 — shared photo gallery (oy-gallery.js): one swipeable strip of product photos
   for the shop menu tiles and rows, the product sheet, product cards and the product page.

   The track is a native scroll-snap strip, so a thumb swipe is the phone's own smooth scroll;
   the script adds dots, thumbnails, autoplay, mouse drag and arrow keys.
     data-fit="cover" (default)  fills its well, cropped like any card photo;
     data-fit="contain"          the whole picture, never cropped: it fills the gallery's box
                                 when the box has a height (product page), otherwise each photo
                                 takes its own height, capped by --oy-gal-max-h (product sheet).
   Knobs: --oy-gal-max-h, --oy-gal-min-h. Brand tokens from oy/app.css, with fallbacks.
   Physical left/right is never used, so the same rules work in Urdu (RTL).
   ========================================================================== */

.oy-gal { position:relative; display:block; width:100%; overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.oy-gal-track { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
.oy-gal-track::-webkit-scrollbar { display:none; }
.oy-gal-track:focus { outline:none; }
.oy-gal-img { flex:0 0 100%; width:100%; min-width:0; height:100%; display:block; scroll-snap-align:start; scroll-snap-stop:always; -webkit-user-drag:none; }

/* cover: a fixed well (cards) */
.oy-gal:not([data-fit="contain"]) { height:100%; }
.oy-gal:not([data-fit="contain"]) .oy-gal-img { object-fit:cover; }

/* contain: the whole picture */
.oy-gal[data-fit="contain"] .oy-gal-track { align-items:center; min-height:var(--oy-gal-min-h, 0px); }
.oy-gal[data-fit="contain"] .oy-gal-img { object-fit:contain; max-height:var(--oy-gal-max-h, none); }

/* A broken photo leaves its slide empty; with none left the gallery steps aside, so an
   initials tile behind it (.oa-img) can show. */
.oy-gal-img.is-broken { visibility:hidden; }
.oy-gal.is-empty { display:none !important; }
.oy-gal:not(.is-empty) + .oa-ini { display:none; }

/* Mouse drag: no snapping while the strip follows the pointer. */
.oy-gal.is-dragging .oy-gal-track { scroll-snap-type:none; cursor:grabbing; }
@media (hover:hover) and (pointer:fine) {
  .oy-gal[data-fit="contain"].is-ready .oy-gal-track { cursor:grab; }
}

/* ---- Dots (made by the script for 2+ photos): centred on the photo's lower edge ---- */
.oy-gal-dots { position:absolute; z-index:1; bottom:8px; inset-inline:0; width:max-content; max-width:calc(100% - 16px); margin-inline:auto; display:flex; align-items:center; gap:4px; padding:4px 6px; overflow:hidden; border-radius:999px; background:rgba(17,24,39,.32); pointer-events:none; }
.oy-gal-dot { flex:0 0 auto; width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.6); transition:width .2s ease, background-color .2s ease; }
.oy-gal-dot.is-on { width:14px; background:#fff; }

/* ---- Prev / next buttons (data-arrows): mouse screens only, shown on hover or focus ---- */
.oy-gal-arrow { position:absolute; z-index:1; top:50%; width:38px; height:38px; margin-top:-19px; display:none; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:var(--oa-ink, #1A1A1A); box-shadow:0 2px 10px rgba(0,0,0,.18); cursor:pointer; opacity:0; transition:opacity .15s; }
.oy-gal-prev { inset-inline-start:10px; }
.oy-gal-next { inset-inline-end:10px; }
[dir="rtl"] .oy-gal-arrow svg { transform:scaleX(-1); }
@media (hover:hover) and (pointer:fine) {
  .oy-gal-arrow { display:flex; }
  .oy-gal:hover .oy-gal-arrow, .oy-gal-arrow:focus-visible { opacity:1; }
}
.oy-gal-arrow:hover { background:#fff; }
.oy-gal-arrow:focus-visible { outline:3px solid var(--oa-lime-600, #8EB82E); outline-offset:2px; }

/* ---- Thumbnails (a strip linked by data-oy-gal-thumbs) ---- */
.oy-gal-thumbs { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.oy-gal-thumbs::-webkit-scrollbar { display:none; }
.oy-gal-thumb { flex:0 0 auto; width:56px; height:56px; padding:0; margin:0; border:2px solid transparent; border-radius:var(--oa-r, 12px); overflow:hidden; background:var(--oa-sunk, #F3F5EF); cursor:pointer; transition:border-color .15s; -webkit-tap-highlight-color:transparent; }
.oy-gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.oy-gal-thumb.is-active, .oy-gal-thumb[aria-current="true"] { border-color:var(--oa-ink, #1A1A1A); }
.oy-gal-thumb:focus-visible { outline:3px solid var(--oa-lime-600, #8EB82E); outline-offset:1px; }

@media (prefers-reduced-motion: reduce) {
  .oy-gal-dot, .oy-gal-arrow, .oy-gal-thumb { transition:none; }
}