/*
  Allegory — PDP gallery modernization.

  Two things this file does, mobile-first:

  1) Hide the theme's arrow buttons on mobile. Modern mobile users swipe — arrows
     are visual clutter and eat into the image frame. Arrows come back at desktop
     where hover + click is the primary interaction.

  2) Render an image counter pill (e.g. "1 / 4") in the top-right of the gallery
     on mobile, plus a floating "Model is 5'11" wearing a size large" bubble in
     the bottom-right when the product metafield is populated.

  The counter's current index is updated by allegory-pdp-gallery.js via Swiper's
  slideChange event.
*/

/* ---------- Hide arrow buttons on mobile ---------- */

@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .product__slider-nav {
    display: none !important;
  }
}

/* ---------- Image counter pill (mobile only) ---------- */

.allegory-gallery-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-body-family, inherit);
  border-radius: 100px;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.allegory-gallery-counter__sep {
  opacity: 0.55;
  margin: 0 1px;
}

/* On desktop, arrows do the navigation signal — hide the counter */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .allegory-gallery-counter {
    display: none;
  }
}

/* Note: the "Model is 5'11" wearing size L" text is now rendered via the theme's
   native Gallery Info setting in the main-product section, not an Allegory overlay.
   Earlier versions injected a floating bubble; that code has been removed. */

/* ---------- Parent container needs to be position: relative ---------- */

/* The theme's .product__media-list-wrapper is where the swiper lives.
   Make sure our overlays anchor correctly to it. */
.product__media-list-wrapper {
  position: relative;
}