/**
 * CLS Fix - Cumulative Layout Shift Optimizations
 * Replaces visibility transitions with opacity + pointer-events
 * for better performance and reduced layout shifts
 */

/* ========================================
   FANCYBOX FIXES
   ======================================== */

/* Fancybox Caption, Infobar, Toolbar - Hidden state */
.fancybox-caption,
.fancybox-infobar,
.fancybox-toolbar,
.fancybox-navigation .fancybox-button {
    opacity: 0;
    pointer-events: none;
    visibility: visible !important;
    /* Override original visibility */
    transition: opacity .25s ease !important;
}

/* Fancybox Caption, Infobar, Toolbar - Visible state */
.fancybox-show-caption .fancybox-caption,
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar,
.fancybox-show-nav .fancybox-navigation .fancybox-button {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .25s ease !important;
}

/* ========================================
   BOOTSTRAP COLLAPSING FIX
   ======================================== */

.collapsing {
    transition-property: height, opacity !important;
    transition-duration: .35s !important;
    transition-timing-function: ease !important;
}

/* ========================================
   WOOCOMMERCE PRODUCT LINKS
   ======================================== */

/* Product links and pseudo-elements */
.woocommerce-LoopProduct-link,
.woocommerce-LoopProduct-link::before,
.woocommerce-LoopProduct-link::after,
.Product-link,
.Product-link::before,
.Product-link::after {
    visibility: visible !important;
}

/* Product area hover effects */
.object1 .area_photo a.woocommerce-LoopProduct-link::before,
.object1 .area_photo a.woocommerce-LoopProduct-link::after {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    visibility: visible !important;
}

/* ========================================
   WISHLIST BUTTONS
   ======================================== */

.iconic-ww-button,
.iconic-ww-button.iconic-ww-button--add-to-wishlist {
    visibility: visible !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* ========================================
   BUTTONS & LINKS
   ======================================== */

.secondary_btn,
.lien_section,
a[href*="collections"],
a[href*="product"] {
    visibility: visible !important;
}

/* ========================================
   AOS (Animate On Scroll) ELEMENTS
   ======================================== */

/* Base AOS styles - only using composite properties */
[data-aos] {
    visibility: visible !important;
    pointer-events: auto;
    transition-property: opacity, transform !important;
    transition-duration: 600ms !important;
    transition-timing-function: ease-out !important;
}

/* Initial state for fade-up animation */
[data-aos="fade-up"] {
    opacity: 1;
    transform: translateY(0);
}

/* Before animation starts */
[data-aos="fade-up"]:not(.aos-animate):not(.show-content) {
    opacity: 0;
    transform: translateY(30px);
}

/* When animation is triggered */
[data-aos="fade-up"].aos-animate,
[data-aos="fade-up"].show-content {
    opacity: 1;
    transform: translateY(0);
}

/* Other AOS animation variants using only composite properties */
[data-aos="fade"] {
    opacity: 1;
}

[data-aos="fade"]:not(.aos-animate) {
    opacity: 0;
}

[data-aos="fade-down"]:not(.aos-animate) {
    opacity: 0;
    transform: translateY(-30px);
}

[data-aos="fade-left"]:not(.aos-animate) {
    opacity: 0;
    transform: translateX(30px);
}

[data-aos="fade-right"]:not(.aos-animate) {
    opacity: 0;
    transform: translateX(-30px);
}

[data-aos="zoom-in"]:not(.aos-animate) {
    opacity: 0;
    transform: scale(0.8);
}

[data-aos="zoom-out"]:not(.aos-animate) {
    opacity: 0;
    transform: scale(1.2);
}

/* Ensure AOS elements use only composite properties */
.bloc_collection[data-aos],
[data-aos="fade-up"] {
    visibility: visible !important;
}

/* Transition content class used by custom animation */
.transition-content {
    transition: opacity 0.6s ease, transform 0.6s ease !important;
    visibility: visible !important;
}

.transition-content:not(.show-content) {
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
}

.transition-content.show-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ========================================
   IMAGES WITH LAZY LOADING
   ======================================== */

img.attachment-woocommerce_thumbnail,
img.bloccollectiongrandephoto {
    visibility: visible !important;
}

/* ========================================
   KLAVIYO POPUP
   ======================================== */

.kl-private-reset-css-Xuajs1,
div[data-testid="POPUP"] {
    visibility: visible !important;
}

/* Hidden state for popups/modals */
.kl-private-reset-css-Xuajs1:not(.klaviyo-fadeinup) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.kl-private-reset-css-Xuajs1.klaviyo-fadeinup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* ========================================
   PERFORMANCE HINTS
   ======================================== */

/* Hint browser about properties that will change */
.bloc_collection[data-aos],
.transition-content,
.fancybox-caption,
.fancybox-toolbar,
.iconic-ww-button {
    will-change: opacity, transform;
}

/* Remove will-change after animation to free resources */
.show-content,
.fancybox-show-caption .fancybox-caption,
.fancybox-show-toolbar .fancybox-toolbar {
    will-change: auto;
}

/* ========================================
   SLIDER OPTIMIZATIONS
   ======================================== */

/* Ensure sliders don't cause layout shifts */
.slider,
.slideshow_alertes {
    visibility: visible !important;
}

/* Banner Important - Reserve space */
.banner_important {
    visibility: visible !important;
}

/* When banner is hidden via JS, use opacity */
.banner_important[style*="display: none"] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* ========================================
   PRODUCT SLIDER CLS FIX (Slick)
   ======================================== */

/* OPTION 1: Reserve minimum height for product slider */
.slideshowproducts,
.products.slideshowproducts {
    min-height: 450px !important;
    contain: layout style !important;
    /* Improve layout containment */
}

.slideshowproducts .slick-track {
    display: flex !important;
    align-items: flex-start !important;
}

.slideshowproducts .slick-list {
    overflow: hidden !important;
}

/* OPTION 2: Aspect-ratio for product images */
.slideshowproducts img.attachment-woocommerce_thumbnail,
.slideshowproducts .area_photo img {
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* OPTION 4: Pre-define slide widths to prevent Slick recalculation */
.slideshowproducts .product {
    width: 183px !important;
}

/* ========================================
   HEADER FIXES - Prevent CLS
   ======================================== */

/* Fix header height to prevent layout shift */
.header,
div.header {
    min-height: 80px !important;
    height: auto !important;
    transition: transform 0.3s ease !important;
    transition-property: transform, opacity !important;
}

/* Sticky/Fixed header - use transform instead of top */
#clone_header,
.sticky.fixed,
div#clone_header.sticky.fixed {
    position: fixed !important;
    top: 0 !important;
    transform: translateY(0) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    will-change: transform !important;
}

/* Hidden state for sticky header */
#clone_header.hidden,
.sticky.fixed.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   KLAVIYO POPUP - Maximum specificity
   ======================================== */

/* Force visibility on Klaviyo popup with maximum specificity */
div[data-testid="POPUP"],
div.needsclick.kl-private-reset-css-Xuajs1,
.kl-private-reset-css-Xuajs1[style*="flex"],
div.kl-private-reset-css-Xuajs1[data-testid] {
    visibility: visible !important;
    transition-property: opacity, transform !important;
}

/* Klaviyo animation states */
.klaviyo-fadeinup,
div.klaviyo-fadeinup,
.kl-private-reset-css-Xuajs1.klaviyo-fadeinup {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

/* Klaviyo hidden state */
.kl-private-reset-css-Xuajs1:not(.klaviyo-fadeinup) {
    visibility: visible !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    min-width: 183px !important;
    max-width: 183px !important;
    display: inline-block !important;
}

.slideshowproducts .slick-slide {
    width: 183px !important;
    min-width: 183px !important;
}

/* Prevent inline styles from overriding during initialization */
.slideshowproducts .slick-slide[style*="width"] {
    width: 183px !important;
}

/* Fix for cloned slides (Slick duplicates) */
.slideshowproducts .slick-slide.slick-cloned {
    width: 183px !important;
}

/* Container stability */
.slideshowproducts .object1 {
    width: 100% !important;
    display: block !important;
}

/* Prevent layout shifts on Quick View buttons */
.slideshowproducts .iconic-wqv-button {
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.slideshowproducts .slick-slide:hover .iconic-wqv-button {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.slideshowproducts {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    contain: layout style !important;
}

.slideshowproducts .slick-list {
    display: flex !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
}

.home iframe {
    width: 1px;
    height: 1px;
}

#featured,
section#featured,
.section__featured-home {
    width: 100% !important;
    height: auto !important;
    min-height: 500px !important; /* o la altura real que quieras reservar */
    overflow: hidden !important;  /* importante con slick-track gigante */
}

#featured.section__featured--home .container_products{
  min-height: 500px;  /* pon la altura real aproximada del slider */
  overflow: hidden;
}
#featured.section__featured--home .container_products{ visibility: hidden; }
#featured.section__featured--home .container_products.slick-initialized{ visibility: visible; }
html, body { overflow-x: hidden; }