/* Performance optimizations for faster loading */

/* Images load immediately for faster performance */

/* Optimize font loading */
@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

/* Reduce paint complexity */
.product-card {
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimize animations */
.product-card:hover {
    transform: translateZ(0) translateY(-8px) scale(1.02);
}

/* Critical CSS inlining for faster initial render */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
}

.col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding: 0 15px;
}

/* Optimize image rendering for immediate loading */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Reduce reflows */
.product-title {
    min-height: 1.2em;
}

.product-price {
    min-height: 2em;
}

/* Additional performance optimizations for index.php */
.prebuilt-card,
.hot-deals-card,
.category-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hardware acceleration for smooth scrolling */
.prebuilt-section,
.categories-section,
.hot-deals-section {
    contain: layout style paint;
}

/* Optimize loading states */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

/* Reduce layout shifts */
.prebuilt-image-container {
    aspect-ratio: 3/2;
    contain: layout style paint;
}

.deal-image {
    aspect-ratio: 1/1;
    contain: layout style paint;
}

/* Critical font optimization */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
}