/* ===================================================================
   Everyday Coffee — Desktop Performance Overlay
   Load AFTER ecommerce_a.css
   Purpose:
   - Reduce main-thread work from animations & transitions
   - Avoid forced reflows during hovers/scroll
   - Improve initial render with content-visibility & intrinsic sizing
   - Keep visual result the same (except toned down motion)
   =================================================================== */

/* 1) Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2) Only run hover effects on devices that actually hover */
@media (hover: hover) and (pointer: fine) {
  /* Smooth but lightweight hover on promo banners (your file scales .banner .bg) */
  .store-promo .banner .bg {
    transition: transform .25s ease;       /* replaces all vendor-prefixed transitions */
    will-change: transform;                 /* allocate compositor layer on demand */
  }
  .store-promo .banner:hover .bg {
    transform: scale3d(1.05, 1.05, 1);     /* slightly gentler than 1.1 to reduce GPU cost */
  }
}
/* On touch devices, don’t scale at all (avoids layout jank) */
@media (hover: none) {
  .store-promo .banner .bg { transform: none !important; }
}

/* 3) Contain complex, offscreen sections so they don’t hurt first paint */
.store-product,
.store-testimonials,
.store-promo,
.cart-total,
#checkout {
  content-visibility: auto;                 /* skip work for offscreen content */
  contain-intrinsic-size: 800px;            /* reserve space to avoid CLS (adjust if needed) */
}
/* If some sections are usually shorter, you can fine-tune per block */
.store-testimonials { contain-intrinsic-size: 500px; }
.store-promo        { contain-intrinsic-size: 300px; }

/* 4) Avoid layout thrash from icon/image sizing */
.store-product a .img-fluid,
.store-testimonials .quote .author img,
.cart-product .cart-img img {
  height: auto;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 5) Trim heavy animations to a single, modern declaration (no old prefixes) */
.customFadeInUp,
.fadeInScaleDown,
.stripey,
[class*="animate-"] {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
}

/* 6) Reduce frequently-triggered transitions to property-focused ones */
.cart-product .remove,
.store-promo .banner .bg {
  transition-property: transform, opacity;  /* avoid transitioning all properties */
}

/* 7) Prevent reflow from focus outlines on mouse click (accessibility-friendly) */
:focus:not(:focus-visible) {
  outline: none;
}

/* 8) Typography rendering stability (match your Open Sans usage) */
html { text-rendering: optimizeLegibility; }
body { -webkit-text-size-adjust: 100%; }

/* 9) Minor paint optimizations on common animated containers */
.slider-component,
.slider-component .pic,
.index-slider-header,
.brand-section .brand-box a img {
  contain: layout paint;                    /* limit layout/paint scope */
}

/* 10) Saner defaults on large, frequently reflowing lists/sliders */
.slick-default .slick-list {
  will-change: transform;
}

/* 11) Safer default for large background images */
.store-promo .banner .bg {
  background-position: center;
  background-size: cover;
}

/* 12) Keep price & name text from jittering (font metrics differences) */
.store-product .info .name,
.store-product .info .price {
  line-height: 1.25;
}

/* 13) Reduce composite work on shadows where possible */
.product-box .img-part,
.cart-bottom,
.save-card-section .card-box {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* 14) Make long lists scroll smoother */
.element-menu ul,
.category-section .category-slide,
.brand-section .slick-default .slick-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}