/* ============================================================
   Performance fixes (PageSpeed): composited animation + CLS
   Loaded AFTER critical-bundle.min.css so these rules win the
   cascade. No visual/design changes — same colors, sizes,
   timing and fonts as before, just implemented in a way that
   the browser can run on the compositor / without reflow.
   ============================================================ */

/* ---- Fix 1: "Avoid non-composited animations" (loader-ripple) ----
   Original animation changed top/left/width/height every frame,
   which forces layout on the main thread. This version keeps the
   box size/position static and only animates transform + opacity,
   which the browser can run on the compositor thread. Visually
   identical ripple effect. */
[class~=page-preloader] [class~=loader] div {
  top: 4px;
  left: 4px;
  width: 72px;
  height: 72px;
  transform-origin: center center;
  animation-name: loader-ripple-composited;
  will-change: transform, opacity;
}

@keyframes loader-ripple-composited {
  0%, 4.9% {
    transform: scale(0);
    opacity: 0;
  }
  5% {
    transform: scale(.02);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ---- Fix 2: "Layout shift culprits" caused by the AkkoStd web font ----
   AkkoStd loads with font-display:swap, so when it finishes
   downloading the page text reflows because the fallback font has
   different character widths/line height. This size-matched
   fallback (built from AkkoStd's real font metrics) makes the
   temporary system-font text occupy the same space as AkkoStd, so
   swapping in the real font no longer shifts the layout. */
@font-face {
  font-family: 'AkkoStd Fallback';
  src: local('Arial');
  size-adjust: 116%;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 20%;
}

[class~=h2],[class~=h4],[class~=h3],[class~=h1],
body,
h2,[class~=h5],[class~=h6],h1,
h3,
h4,
h5,
h6,
[class~=newsletter-popup] [class~=newsletter-container] [class~=newsletter-form] [class~=newsletter-title] [class~=title],
[class~=site-navigation] ul>li[class~=level-0]>a,
[class~=block-product-cats] [class~=item-product-cat-content] [class~=product-cat-content-info] [class~=item-title],
[class~=block-intro][class~=layout-2] [class~=intro-title],
[class~=block-intro][class~=layout-2] [class~=intro-text],
[class~=block-product-cats][class~=layout-3] [class~=item-product-cat-content] [class~=product-cat-content-info] [class~=item-title],
[class~=block-product-cats][class~=layout-5] [class~=item-product-cat-content] [class~=product-cat-content-info] [class~=item-title],
[class~=block-testimonial][class~=layout-2] [class~=testimonial-content] [class~=item] [class~=testimonial-excerpt],
.block-contact-info .info-item .item-tilte h2,
.products-list.grid .product-wapper .products-content h3.product-title,
.shop-details .product-tabs .nav-tabs .nav-item a,
[class~=post-details] [class~=post-content] blockquote h2 {
  font-family: 'AkkoStd', 'AkkoStd Fallback', sans-serif;
}