/*
 * cls-fixes.css — Cumulative Layout Shift fixes for index.html and shop.html
 *
 * Strategy per element:
 *   1. Exclusive-discount popup  → position:fixed so it never pushes page content
 *   2. Product image containers  → explicit aspect-ratio so browser reserves space before images arrive
 *   3. Dynamic product lists     → min-height so the grid doesn't collapse while JS is fetching
 *   4. Blog / insight images     → aspect-ratio reservation
 *   5. Marquee / brand logos     → height already set inline; add contain on the strip
 *   6. Webflow animated items    → will-change keeps them on their own compositor layer
 *   7. Review star icons         → explicit size so 5× tiny images don't reflow
 */

/* ── 1. Exclusive-discount popup ───────────────────────────────────────────
   This element sits at the TOP of .main-wrapper in normal flow.
   Taking it out of flow with position:fixed means it can never push
   the navbar, hero, or any other section downward.                        */
.exclusive-discount {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  /* width/height are already 100% from Webflow; this just pulls it out of flow */
}

/* ── 2. Product image containers ────────────────────────────────────────────
   .product-image-overflow wraps every product card image.
   Reserving a 1:1 space means the card height is stable whether the
   image has loaded or not.                                                  */
.product-image-overflow {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  contain: layout paint;     /* isolate: child image load won't reflow parent */
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 3. Dynamic product list containers ─────────────────────────────────────
   JS clears these with innerHTML="" then re-populates.
   min-height gives the grid a stable floor during that window.             */
.collection-list-product.w-dyn-items {
  min-height: 420px;
  contain: layout;
}

/* Shop page uses .accessories-tab-pane; keep it stable too */
.accessories-tab-pane .collection-list-product.w-dyn-items {
  min-height: 340px;
}

/* ── 4. Blog / insights images ──────────────────────────────────────────────
   16:9 is the ratio used across the blog section.                          */
.blog-main-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ── 5. Marquee brand-logo strip ────────────────────────────────────────────
   The marquee images already have explicit w/h via inline styles.
   contain:layout on the strip prevents the scrolling animation from
   triggering ancestor reflows.                                              */
.choose-marquee {
  contain: layout;
}

/* ── 6. Webflow IX2 animated elements ───────────────────────────────────────
   Elements start at opacity:0 and are faded/transformed in by Webflow JS.
   will-change promotes them to their own compositor layer so the animation
   doesn't trigger layout on siblings.                                       */
[data-w-id][style*="opacity:0"],
[data-w-id][style*="opacity: 0"] {
  will-change: opacity, transform;
}

/* ── 7. Review star icons ───────────────────────────────────────────────────
   Five of these per product card with no explicit size = five micro-reflows. */
.review-star-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* ── 8. Hero section abs image ──────────────────────────────────────────────
   Already position:absolute so no flow impact, but explicit intrinsic size
   prevents a spurious reflow when the image first decodes.                  */
.hero-abs-image {
  aspect-ratio: 4 / 3;
  contain: layout paint;
}

/* ── 9. Navbar ──────────────────────────────────────────────────────────────
   Explicit height prevents the navbar from changing height once fonts load. */
.navbar.w-nav {
  min-height: 80px;
}

/* ── 10. Category tab-pane images (index nav tabs) ──────────────────────── */
.product-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ── 11. Shop page: product grid & filter area ──────────────────────────── */
.shop-products-section,
.shop-grid {
  contain: layout;
}