/* Seapeng product two-column fix — child-theme only (sp-product-layout 1.0.3) */
/* Sticky scope = .sp-buy-row only (gallery + summary). Tabs/reviews stay full-width. */

@media (min-width: 769px) {
  /* Buy row: left sticky gallery, right scrolling summary. */
  .single-product.woocommerce div.product div.sp-buy-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
  }
  .single-product.woocommerce div.product div.sp-buy-row div.images.woocommerce-product-gallery {
    float: none;
    flex: 0 0 48%;
    max-width: 48%;
    margin: 0 4% 0 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
  .single-product.woocommerce div.product div.sp-buy-row div.summary {
    float: none;
    flex: 0 0 48%;
    max-width: 48%;
    margin: 0;
    width: auto;
  }
  /* Everything after the buy row: independent full-width rows, never in a flex column. */
  .single-product.woocommerce div.product .woocommerce-tabs,
  .single-product.woocommerce div.product .upsells,
  .single-product.woocommerce div.product .related {
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
    float: none;
  }

  /* Stable gallery box before/while images load (no thin-strip collapse). */
  .single-product .woocommerce-product-gallery .sp-gallery-main.sp-gallery-viewport {
    min-height: 320px;
  }
  /* Insurance: gallery stays visible even if Woo's flexslider hook never fires. */
  .single-product .woocommerce-product-gallery { opacity: 1; }
}

@media (max-width: 768px) {
  /* Stacked, sticky off. */
  .single-product.woocommerce div.product div.sp-buy-row { display: block; }
  .single-product.woocommerce div.product div.sp-buy-row div.images.woocommerce-product-gallery,
  .single-product.woocommerce div.product div.sp-buy-row div.summary {
    float: none;
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
  .single-product.woocommerce div.product .woocommerce-tabs,
  .single-product.woocommerce div.product .upsells,
  .single-product.woocommerce div.product .related {
    width: 100%;
    max-width: 100%;
    clear: both;
  }
  .single-product .woocommerce-product-gallery .sp-gallery-main.sp-gallery-viewport {
    min-height: 240px;
  }
}

@media (prefers-color-scheme: dark) {
  .single-product .woocommerce-product-gallery .sp-gallery-main.sp-gallery-viewport {
    background: #1b2433;
  }
}