/**
 * Phase 8/18 — Performance / layout stability helpers
 * Additive; does not change visual brand.
 */

/* Offscreen sections: skip paint work until near viewport */
.faq-section,
.blog-preview,
.about-section,
.testimonials,
.products-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Product grid: limit layout/style recalc scope */
.products-grid,
#productsGrid {
  contain: layout style;
}

/* Product card image box stable aspect (CLS) */
.product-card .product-image,
.product-card .product-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Prefer GPU-friendly motion; respect reduced-motion (a11y + battery) */
@media (prefers-reduced-motion: reduce) {
  .preloader,
  .hero-section *,
  .product-card,
  .pp-gallery-main,
  .mobile-nav-menu,
  .pp-order-modal,
  .ai-window {
    animation: none !important;
    transition: none !important;
  }
}

/* Quick-view image box */
.qv-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Product detail main image: avoid layout shift */
#ppMainImage,
.pp-gallery-main img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}