/* Shared standalone-product image gallery — used by every single-product
   page with more than one photo (Business Balloon Columns, Number Towers,
   and any future standalone product) instead of each page hand-rolling its
   own gallery CSS. Two independent pieces:

   1. .pg-scroll — the horizontal, swipeable/scrollable image row used at
      every width BELOW the desktop hero+thumbs breakpoint (mobile and
      "narrow desktop"/tablet). Images sit in one row, never wrap, and the
      row scrolls instead. Below 720px it's touch-swipe only (hidden
      scrollbar); from 720px up to the desktop breakpoint it gets a
      visible, draggable scrollbar — the same functional/visual pattern as
      the Helium bouquet-size slider (.bouquet-sets-scroll in css/lux.css),
      reproduced here for images only (no product name/price/qty content).

   2. .pg-desktop-main — caps the desktop hero image's size so tall
      (portrait, ~900px) product photos no longer force the customer to
      scroll the page just to see the whole image. Each page still defines
      its own two-column grid/thumbnail-strip layout (that part isn't
      duplicated three times in the same way, and every page's grid
      breakpoint differs slightly) — this class only bounds the hero image
      box itself, which is the actual "too large" element.
*/

.pg-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  gap: 0.5rem;
  scrollbar-width: none;
}
.pg-scroll::-webkit-scrollbar {
  display: none;
}

.pg-item {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
  margin: 0;
}

/* Narrow desktop / tablet (720px up to the page's own desktop breakpoint,
   normally 960px) — same visible, draggable scrollbar treatment as the
   Helium slider (css/lux.css .apex-lux.page-helium .bouquet-sets-scroll),
   applied here to image-only galleries. */
@media (min-width: 720px) {
  .pg-scroll {
    scroll-behavior: smooth;
    cursor: grab;
    scrollbar-width: auto;
    scrollbar-color: var(--lux-accent, #7a1528) var(--lux-bg, #f6eef0);
    padding-bottom: 0.85rem;
  }
  .pg-scroll::-webkit-scrollbar {
    display: block;
    height: 10px;
  }
  .pg-scroll::-webkit-scrollbar-track {
    background: var(--lux-bg, #f6eef0);
    border-radius: 6px;
  }
  .pg-scroll::-webkit-scrollbar-thumb {
    background: var(--lux-accent, #7a1528);
    border-radius: 6px;
  }
  .pg-scroll:active {
    cursor: grabbing;
  }
  .pg-item {
    width: 160px;
  }
}

/* Desktop hero image — bounded size so tall/portrait photos fit the
   viewport without extra page scrolling. Pages apply this class on their
   existing hero-image element alongside their own layout CSS. */
.pg-desktop-main {
  max-width: 24rem;
  margin: 0 auto;
}

/* ── Mobile hero-image height cap (shared, standalone-product primary
   image) ──────────────────────────────────────────────────────────────
   Root cause fixed here: a standalone product with a single, tall/portrait
   supplied photo (e.g. Helium Cascade Bouquet's 640x905 source) had no
   viewport-relative height ceiling on its mobile hero container — only a
   fixed source aspect-ratio — so it rendered at ~57% of a 375x812 mobile
   viewport (462px), pushing Step 1/2 configuration far down the page. The
   approved reference (Helium Ceiling Balloons, a landscape 4:3 photo)
   naturally renders at ~27% of the same viewport (221px) purely because
   its source happens to be landscape, not because of any explicit cap —
   so there was nothing here to inherit consistently.
   This class gives every standalone-product mobile hero container the
   same explicit cap regardless of source aspect ratio: object-fit:contain
   inside a bounded box lets a portrait photo shrink to fit height (and
   letterbox left/right) instead of dictating the container's height from
   its own aspect-ratio. 34vh sits just above Ceiling Balloons' own
   measured ~27vh so the approved reference is not touched by this rule,
   while a portrait source like Cascade is capped well below its previous
   57vh. Apply directly to the element that currently carries the
   page-local aspect-ratio (e.g. .cascade-gallery__main,
   .ceiling-gallery__main) — this does not replace that per-page
   aspect-ratio/background rule, it only adds the missing height ceiling on
   top of it, so no per-product override is needed beyond adding the
   class. Single-image products must use this exact same class as
   multi-image products' primary image — never a bigger, product-specific
   cap just because thumbnails are absent. Capped up to 959px (not just
   <720px) to match the site's established mobile/tablet-vs-desktop
   breakpoint (960px — see the Desktop Hover-to-Zoom Rule and every
   .col-gallery-desktop/.nt-gallery-desktop swap at
   `@media (min-width: 960px)`): a tablet-width viewport (e.g. 768px) is
   still "mobile layout" site-wide below 960px, and was measured uncapped
   at 61.9vh for Cascade before this widening — worse than the 375px case. */
@media (max-width: 959px) {
  .pg-hero-cap {
    max-height: 34vh;
    width: auto;
    max-width: 100%;
  }
  .pg-hero-cap img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
}