/* ══════════════════════════════════════════════════════════════════
   WK-MOBILE-GALLERY.CSS
   Self-contained styles for the new mobile-only PDP gallery
   (template-parts/product/mobile-gallery.php).

   Loaded LAST (after main.css, woocommerce.css, wk-fixes.css) and
   scoped entirely to the `wk-mgal*` namespace, which is not used
   anywhere else in this theme — so nothing here can be overridden by,
   or conflict with, any earlier stylesheet, and nothing earlier can
   paint on top of it either.
   ══════════════════════════════════════════════════════════════════ */

/* ── Breakpoint switch ───────────────────────────────────────────
   Desktop/tablet: keep showing the original gallery unchanged.
   Mobile: hide the original gallery, show this one instead.       */
.wk-gallery-legacy {
  display: flex;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}
.wk-mgal { display: none; }

@media (max-width: 767px) {
  .wk-gallery-legacy { display: none !important; }
  .wk-mgal { display: block !important; }
}

/* ── Wrapper ──────────────────────────────────────────────────────
   isolation:isolate opens a new stacking context: every z-index used
   inside .wk-mgal is only ever compared against other elements
   inside .wk-mgal, never against unrelated fixed/absolute elements
   elsewhere in the theme (menus, drawers, popups, etc.) — so none of
   those can ever be painted on top of the product photo again,
   regardless of whatever z-index value they carry.               */
.wk-mgal {
  position: relative;
  isolation: isolate;
  z-index: 0;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #fff !important;
}

/* ── Track: native horizontal scroll + CSS scroll-snap ───────────
   No JS transform math, no computed track width, nothing that can
   desync — the browser owns the swipe entirely, which also removes
   any chance of a neighbouring slide bleeding into view.          */
.wk-mgal__track {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #fff !important;
}
.wk-mgal__track::-webkit-scrollbar { display: none; height: 0; width: 0; }

.wk-mgal__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-2, #F5F1EC) !important;
}
/* Defensive reset: guarantee nothing can ever paint a scrim over the
   photo, regardless of where a stray overlay rule might come from. */
.wk-mgal__slide::before,
.wk-mgal__slide::after,
.wk-mgal__track::before,
.wk-mgal__track::after,
.wk-mgal::before,
.wk-mgal::after {
  content: none !important;
  display: none !important;
}

.wk-mgal__img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  /* Guaranteed full, untinted brightness — no filter, no dimming
     opacity, no blend mode, no glass/blur effect, ever. */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Sale badge ───────────────────────────────────────────────── */
.wk-mgal__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--sale, #B91C1C);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 3px;
  line-height: 1.4;
}

/* ── Counter "1 / 4" ──────────────────────────────────────────── */
.wk-mgal__counter {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink, #111) !important;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  line-height: 1.4;
}
/* When both a sale badge and counter are present, drop the counter
   to avoid overlapping the badge — the dots already show position. */
.wk-mgal__badge ~ .wk-mgal__counter { display: none; }

/* ── Dots ─────────────────────────────────────────────────────── */
.wk-mgal__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.wk-mgal__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  pointer-events: auto;
  cursor: pointer;
  transition: background .15s, width .15s;
}
.wk-mgal__dot.is-active {
  background: #fff !important;
  width: 16px;
  border-radius: 3px;
}

/* ── Expand (fullscreen) button ───────────────────────────────── */
.wk-mgal__expand {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink, #111) !important;
  cursor: pointer;
}

/* ── Rating badge ─────────────────────────────────────────────── */
.wk-mgal__rating {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.94) !important;
  color: var(--ink, #111) !important;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.wk-mgal__rating svg { fill: var(--accent, #6B1E3E); stroke: var(--accent, #6B1E3E); flex-shrink: 0; }
.wk-mgal__rating em { font-style: normal; color: var(--ink-mute, #8A7A6A); font-weight: 500; }
/* If dots are present at the bottom too, keep the rating badge above them */
.wk-mgal__dots ~ .wk-mgal__rating { bottom: 30px; }

/* ── Wishlist + Share (top-right) ─────────────────────────────── */
.wk-mgal__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wk-mgal__actions .wk-wl-btn,
.wk-mgal__share {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink, #111) !important;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.wk-mgal__actions .wk-wl-btn .wk-wl-label { display: none; }
.wk-mgal__actions .wk-wl-btn.is-in-wishlist,
.wk-mgal__actions .wk-wl-btn.is-wished {
  color: var(--accent, #6B1E3E) !important;
}
.wk-mgal__actions .wk-wl-btn.is-in-wishlist svg,
.wk-mgal__actions .wk-wl-btn.is-wished svg {
  fill: var(--accent, #6B1E3E);
  stroke: var(--accent, #6B1E3E);
}

/* ── Fullscreen viewer (opened by the expand button) ─────────────
   Deliberately a clean white background, not a dark scrim — a dark
   full-screen backdrop behind the enlarged photo is exactly the kind
   of "black screen over the picture" this whole gallery exists to
   avoid, so the viewer never uses one. Built with a maximum inline
   z-index at creation time (see wk-mobile-gallery.js) so it can never
   be covered by any other element on the page either.             */
.wk-mgal-lightbox {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-mgal-lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wk-mgal-lightbox__track::-webkit-scrollbar { display: none; }
.wk-mgal-lightbox__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
}
.wk-mgal-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.wk-mgal-lightbox__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.06) !important;
  color: #222 !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.wk-mgal-lightbox__counter {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  font-weight: 600;
}

/* Desktop/tablet never sees the mobile gallery or its lightbox. */
@media (min-width: 768px) {
  .wk-mgal, .wk-mgal-lightbox { display: none !important; }
}