/* ========================================================================
   PERFORMANCE OPTIMIZATIONS
   - GPU acceleration for animations
   - Reduced repaints/reflows
   - Optimized rendering
======================================================================== */

/* GPU acceleration for smooth animations */
.slick-slider,
.slick-track,
.slick-slide {
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Optimize image rendering */
img.optimized-image,
img.lazy,
.pdp-image-slide img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* Reduce layout thrashing on hover states */
.colour-img-wrp,
.button,
.pdp-accordion-section > h3 {
	will-change: auto;
}

.colour-img-wrp:hover,
.button:hover,
.pdp-accordion-section > h3:hover {
	will-change: transform;
}

/* Optimize modal animations */
.modal.fade .modal-dialog {
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Contain layout shifts */
.pdp-image-gallery,
.pdp-action-area,
.pdp-accordion-wrapper {
	contain: layout style;
}

/* Optimize font rendering */
body,
.pdp-product-title,
.pdp-product-description {
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Reduce paint areas for fixed elements */
.sticky-cta-bar,
.pdp-breadcrumbs {
	contain: layout paint;
}

/* Optimize transitions - use transform instead of position */
.swatch-selection-error {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Prevent unnecessary repaints on scroll */
.pdp-optimized-image {
	contain: layout;
}

/* Hardware acceleration for carousels */
.slick-product-images-slider-v2,
.slick-customer-photos-slider,
.slick-product-also-like-mini {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}

/* Optimize calculator interactions */
.calculator-wrapper input,
.calculator-wrapper select {
	will-change: auto;
}

.calculator-wrapper input:focus,
.calculator-wrapper select:focus {
	will-change: contents;
}

/* Reduce composite layers */
/* .pdp-accordion-content {
	contain: content;
} */

/* Optimize badge rendering */
.pdp-badge,
.product-badge {
	contain: layout style paint;
	transform: translateZ(0);
}
