/* ═══════════════════════════════════════════════════════════════════════════
   COREVERSE V74 — CATALOG: SWIPE GALLERY + MOBILE PAGINATION

   Fixes two reported mobile problems.

   1. COLLECTION DETAILS WERE PUSHED OFF SCREEN
      `.catalog-dialog--editorial .catalog-dialog__visual` was
      `min-height: min(680px, 76vh)`. On a 844px-tall phone that reserves 641px
      for the image alone, so the name, price and story started below the fold —
      and because each cover has its own aspect ratio, exactly how far below
      varied per collection. That is the "UI overlapping / can't see the name
      and price" report.

      The media area is now a FIXED-height box (a percentage of the viewport,
      not of the image), so the copy underneath always begins at the same place
      whatever shape the cover happens to be. Images are `object-fit: contain`
      so nothing is cropped and tall posters are shown whole.

   2. THE PAGE SELECTOR WAS MISSING ON PHONES
      `.catalog-lace__frame` is locked to `aspect-ratio: 1440/2560` on mobile,
      so its height cannot grow with its content, and the section around it is
      `overflow: hidden`. Measured on a 390×844 viewport the content ran 87px
      past the frame — almost exactly the height of the pagination bar, which
      was therefore clipped away. It survived on desktop because the 16/9 frame
      there has room to spare.

      On mobile the frame now sizes to its content and the decorative lace
      stretches with it, so the pager can never be cut off again.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════ SWIPE GALLERY (all viewports) ═════════════════════ */

.catalog-dialog__visual{position:relative}

.cv-gallery{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}
.cv-gallery::-webkit-scrollbar{display:none}
.cv-gallery:focus-visible{outline:2px solid #17171a;outline-offset:-3px}

.cv-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#fff,#e9eaed);
}
/* `contain` rather than `cover`: a collection cover is artwork, and cropping it
   to fill a fixed box would hide the design the customer is choosing. */
.cv-slide img,
.cv-slide video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* ── dots ──
   Anchored TOP-LEFT, not bottom-centre. A video slide draws native controls
   across the bottom of the frame; dots sitting there would overlap the
   scrubber and swallow taps meant for it. */
.cv-dots{
  position:absolute;
  left:10px;
  top:10px;
  z-index:3;
  display:flex;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(12,12,15,.42);
}
.cv-dots button{
  width:7px;height:7px;padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background .18s ease,scale .18s ease;
}
.cv-dots button.is-on{background:#fff;scale:1.35}

/* ── counter ── */
.cv-count{
  position:absolute;
  right:10px;top:56px;
  z-index:3;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(12,12,15,.5);
  color:#fff;
  font:700 11px/1.4 "Ekkamai Vibe","Ekkamai New",system-ui,sans-serif;
  letter-spacing:.06em;
}

/* ── arrows (pointer devices only; touch users swipe) ── */
.cv-arrow{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:3;
  width:38px;height:38px;
  display:none;
  place-items:center;
  border:1px solid rgba(20,20,25,.12);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#17171a;
  font:400 20px/1 system-ui,sans-serif;
}
.cv-arrow--prev{left:10px}
.cv-arrow--next{right:10px}
/* Shown on wide viewports rather than gated purely on `hover:hover` — some
   touch-capable laptops and every headless/automated browser report a coarse
   pointer, which would hide the only non-swipe way to move between slides. */
@media (min-width:901px){
  .cv-arrow{display:grid}
}

.catalog-thumb__play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);
  pointer-events:none;
}

/* ══════════════════════════ MOBILE / TABLET ═══════════════════════════════ */
@media (max-width:900px){

  /* ── Dialog: cap the media so the copy is always on screen ────────────────
     The dialog itself scrolls; what matters is that the name and price sit
     within the first screenful for every collection. */
  .catalog-dialog--editorial .catalog-dialog__visual,
  .catalog-dialog__visual{
    min-height:0 !important;
    height:38vh;
    max-height:340px;
  }
  .catalog-dialog__gallery{grid-template-rows:auto auto}
  .catalog-dialog__thumbs{padding:8px}
  .catalog-dialog__thumbs button{width:56px;height:56px}
  .catalog-dialog__copy{padding:18px 18px 24px}
  .catalog-dialog__copy h2{margin:2px 0 4px;font-size:22px;line-height:1.25}
  .catalog-dialog__price{font-size:18px;font-weight:700}

  /* Close button needs to clear the media and stay tappable. */
  /* Close moves to the RIGHT edge: the dots now own the top-left corner. */
  .catalog-dialog__close{
    top:8px;right:8px;left:auto;
    z-index:5;
    width:38px;height:38px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(20,20,25,.14);
    border-radius:50%;
    color:#17171a;
  }

  .cv-dots{top:8px;left:8px}
  .cv-slide img,.cv-slide video{padding:6px}
}

@media (max-width:700px){
  /* ── Catalog frame: let it grow so nothing is clipped ─────────────────── */
  .collections.catalog-lace{overflow:visible}
  .catalog-lace__frame{
    aspect-ratio:auto;
    height:auto;
    min-height:0;
    padding:15% 8% 12%;
  }
  /* The lace border is a background image; stretching it to the box keeps the
     frame drawn around whatever height the content ends up needing. */
  .catalog-lace__frame::before{background-size:100% 100%}

  .catalog-lace .collections__grid{
    height:auto;
    min-height:0;
    grid-template-rows:auto auto;
  }
  .catalog-lace .col-card{height:auto}
  .catalog-lace .col-card__media{aspect-ratio:1;height:auto}

  /* ── Pager: solid, high contrast, comfortably tappable ────────────────── */
  .catalog-pagination{
    position:relative;
    z-index:4;
    width:auto;
    max-width:100%;
    min-height:44px;
    margin:16px auto 0;
    padding:5px 8px;
    gap:4px;
    border:1px solid rgba(20,20,25,.1);
    border-radius:999px;
    background:#fff;
    box-shadow:0 10px 26px -14px rgba(20,22,30,.35);
    flex-wrap:wrap;
  }
  .catalog-pagination button{
    min-width:38px;
    height:38px;
    padding-inline:8px;
    border-radius:999px;
    color:#141419;
    /* system font: the display face has no arrow glyphs, and Ekkamai's
       punctuation map is unreliable — see the typography stylesheet. */
    font:700 15px/1 system-ui,sans-serif;
  }
  .catalog-pagination button.is-on{background:#141419;color:#fff}
  .catalog-pagination button:disabled{opacity:.3}
}