/*
 * Synapses Tech — Performance Optimizer
 * Performance & CLS CSS
 * ──────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════
   FIX: Override broken klbtheme base64 font with system font
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'klbtheme';
    src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
    font-display: swap;
    unicode-range: U+0000-00FF;
}
@font-face {
    font-family: 'klbtheme-phone-service';
    src: local('Arial'), local('Helvetica Neue');
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: will-change memory budget exceeded on mobile
   ═══════════════════════════════════════════════════════════════════ */
.products .product,
.product-image-wrap,
.woocommerce-product-gallery,
.entry-content,
.wc-block-grid__product,
[class*="animate"],
[class*="wow"],
[class*="fade"] {
    will-change: auto !important;
}
/* Only keep will-change where truly needed */
.is-animating, .is-loading { will-change: opacity; }

/* ═══════════════════════════════════════════════════════════════════
   CLS: Prevent Cumulative Layout Shifts
   ═══════════════════════════════════════════════════════════════════ */

/* Reserve space for images — prevents reflow when images load */
img { height: auto; display: block; }

/* WooCommerce product grid — fixed aspect ratio to prevent shifts */
.woocommerce ul.products li.product .woocommerce-product-gallery__image,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f8f8f8;
    width: 100%;
}

/* Skeleton loader color while images load */
.woocommerce ul.products li.product img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: syt-skeleton 1.5s ease infinite;
    min-height: 200px;
}

@keyframes syt-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Prevent font swap layout shifts */
body { font-display: swap; }

/* WooCommerce cart fragments — prevent layout shift on load */
.woocommerce-cart-form { min-height: 100px; }
.cart_totals { min-height: 80px; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE: Touch improvements & responsive optimizations
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Larger tap targets */
    .woocommerce ul.products li.product a.button,
    .woocommerce div.product form.cart .button,
    .woocommerce-cart .wc-proceed-to-checkout a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    /* Smooth scrolling */
    html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Product grid mobile optimization */
    .woocommerce ul.products li.product {
        margin-bottom: 1.5em;
    }
}