/* CLS fix + LCP optimalizacia */

/* 1. CE bannery (sampon.jpg, kondiconer.jpg, gel.jpg, curlygirl.png) */
/* Obrazky su 1476x1476 / 1080x1080 = vsetky 1:1 */
figure.home-banner img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

/* 2. Produkt slider - visibility animacia na opacity (composited) */
.slick-slide .first-image,
.slick-slide .second-image {
    transition: opacity 0.35s ease !important;
    visibility: visible !important;
}
.slick-slide .second-image {
    opacity: 0;
}
.slick-slide:hover .first-image {
    opacity: 0;
}
.slick-slide:hover .second-image {
    opacity: 1;
}

/* 3. Produkt LCP - zobrazit prvy slide PRED Slick init */
/* Slick pridava display:none na vsetky slidy okrem aktivneho. */
/* Pred inicializaciou slidera zobrazime prvy obrazok cez CSS. */
.product-cover:not(.slick-initialized) .cover-item:first-child {
    display: block !important;
}
.product-cover:not(.slick-initialized) .cover-item:first-child img {
    display: block !important;
    width: 100%;
    height: auto;
}
.product-cover:not(.slick-initialized) .cover-item:not(:first-child) {
    display: none;
}


/* 4. Cookie banner - znizit vplyv na LCP */
/* Cookie script injektuje velky overlay ktory sa stava LCP elementom. */
/* Nastavime max rozmery aby neprekryl celu stranku. */
#cookiescript_injected {
    contain: layout style;
}