/* =========================================================
   FEATURE: STICKY PRODUCT GALLERY (desktop and larger only)

   WooCommerce/Astra lay the product page out with floats:
   .woocommerce-product-gallery is float:left and .summary is
   float:right, both children of .ast-article-single. Two things
   follow from that, and they drive this whole file:

   1. A floated element cannot be relied on for position:sticky.
   2. .ast-article-single is ~6700px tall because it also holds
      the tabs and the related-products grid, so sticking to it
      would keep the gallery pinned far past the summary.

   So premium-buttons.js wraps ONLY the gallery and the summary
   in .bbpb-pdp-cols and this file turns that wrapper into a
   flex row. The wrapper's height is the taller column (the
   summary), whose last child is the "Guaranteed Safe Checkout"
   fieldset -- so the gallery unpins exactly there and the page
   scrolls normally from that point on, which is the intent.

   Only enqueued when Settings > Digiskyward > Sticky Gallery
   is switched on.
   ========================================================= */

@media (min-width: 1025px) {

  .bbpb-pdp-cols {
    display: flex;
    align-items: flex-start;
    gap: clamp(28px, 3vw, 56px);
  }

  /* Floats off: these are flex items now. Astra sets the widths
     with percentages on the floats, so those are reset too and
     the flex basis below owns the sizing instead. */
  .bbpb-pdp-cols > .woocommerce-product-gallery,
  .bbpb-pdp-cols > .summary {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bbpb-pdp-cols > .woocommerce-product-gallery {
    /* !important is required, not lazy: WooCommerce's own
       woocommerce-grid.css sets position:relative via
       ".woocommerce-js div.product div.images.woocommerce-product-gallery",
       which is (0,4,2) specificity against this rule's (0,2,0),
       so a plain declaration silently loses and the column never
       pins. Verified by reading the matched rules in the browser. */
    position: sticky !important;
    /* The site header is position:relative, not fixed, so this
       only needs to clear a little breathing room -- not a
       header height. */
    top: 24px !important;
    flex: 0 0 48%;
    width: 48% !important;
    max-width: 48% !important;
  }

  .bbpb-pdp-cols > .summary {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  /* A sticky element only works if no ancestor clips or creates
     an unexpected scroll container. Astra's containers are safe,
     but overflow-x on a wrapper would silently kill sticky, so
     this keeps the chain clean. */
  .bbpb-pdp-cols,
  .bbpb-pdp-cols > .summary {
    overflow: visible;
  }
}

/* Below 1025px the columns stack, so the wrapper must behave like
   ordinary block flow and the gallery must never pin. */
@media (max-width: 1024px) {
  .bbpb-pdp-cols {
    display: block;
  }

  .bbpb-pdp-cols > .woocommerce-product-gallery {
    /* !important here too: this has to override the sticky rule
       above, which needed !important to beat WooCommerce. */
    position: static !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Pinning a column while the other scrolls is motion the user did
   not ask for; honour the reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .bbpb-pdp-cols > .woocommerce-product-gallery {
    position: static !important;
  }
}