/* Add custom CSS styles below */ 
/* ---------- Core Web Vitals helpers (mobile first) ---------- */

/* 1) HERO area: reserve space to stop CLS and ensure proper cropping */
:where(.hero, .banner-hero, .main-hero, .hero-slider, [data-section="hero"]) {
  aspect-ratio: 16 / 9;        /* prevents layout jumps while image loads */
  overflow: hidden;
}
:where(.hero img, .banner-hero img, .main-hero img, .hero-slider img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;              /* remove inline-gap from images */
}

/* 2) Header/announcement bars: keep a fixed height to avoid pushing content */
:where(.site-header, .announcement-bar) {
  min-height: 56px;
}

/* 3) Product thumbnails: consistent aspect ratios for smoother grids */
:where(.product-card img, .product-thumb img, .product-item img) {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 4) Defer cost of below-the-fold sections (faster first paint) */
:where(.footer, .newsletter, .recommendations, .more-products) {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px; /* fallback size to avoid jumps */
}

/* 5) Accessibility quick wins */
:where(.btn, .button, .primary-button) { font-weight: 600; }
/* Ensure good contrast in your theme settings (colors not forced here). */

/* 6) Reduce motion for users who prefer it (saves main thread time a bit) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}