/*
Theme Name: Woodmart Child - Dripsteezy
Theme URI: https://dripsteezy.com
Description: Child theme do Woodmart para customizações Dripsteezy
Author: Dripsteezy
Author URI: https://dripsteezy.com
Template: woodmart
Version: 1.0.0
*/

/* Custom styles podem ser adicionados aqui ou no custom.css do Woodmart */

/* Fix: Load More loader visível sem estar em loading state */
.wd-load-more-loader {
    display: none !important;
}
.wd-load-more.loading + .wd-load-more-loader {
    display: inline-flex !important;
}
.wd-load-more.loading {
    display: none !important;
}

/* Fix: Carousel de produtos colado na borda do container (desktop) */
@media (min-width: 1025px) {
    .wd-products-element .wd-carousel {
        margin-inline: 0;
    }
}

/* Fix: Skip links visíveis sem focus */
.wd-skip-links {
    inset-inline-start: -1000em !important;
}
.wd-skip-links:focus-within {
    inset-inline-start: 10px !important;
}

/* =====================================================
   FIX CLS (Cumulative Layout Shift) - PageSpeed
   ===================================================== */

/* 1) Flag images: forçar tamanho explícito para evitar layout shift */
img.dpr-flag {
    width: 16px !important;
    height: 12px !important;
    display: inline-block;
    vertical-align: middle;
}

/* 2) Product gallery: reservar espaço sem distorcer imagens */
.single-product .woocommerce-product-gallery__image img,
.single-product .wd-carousel-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
.single-product .woocommerce-product-gallery__image,
.single-product .wd-carousel-item {
    overflow: hidden;
}
/* Reservar aspect-ratio no CONTAINER (não na imagem) para evitar CLS */
.single-product .woocommerce-product-gallery__image {
    aspect-ratio: 3 / 2;
}

/* 3) Variation form: reservar min-height para evitar salto ao renderizar botões */
.single-product .entry-summary .variations_form.cart {
    min-height: 180px;
}
@media (max-width: 768px) {
    .single-product .entry-summary .variations_form.cart {
        min-height: 120px; /* Mobile: espaço reservado menor */
        display: block;
    }
}

/* 11) Payment methods image: aspect-ratio para CLS */
.payment-methods-banner img {
    aspect-ratio: 450 / 30;
}

/* 4) Container do product summary: estabilizar layout */
.single-product .product-image-summary > .container,
.single-product .summary-inner,
.single-product .product-summary-wrap {
    contain: layout style;
}

/* 5) Preço (.wd-price-outside): reservar espaço quando preço carrega fora do form */
.single-product .entry-summary .price {
    min-height: 1.6em;
}

/* 6) Pagination do slider: dimensões explícitas para evitar reflow */
.woocommerce-product-gallery .wd-nav-pagin-item {
    width: 10px;
    height: 10px;
    display: inline-block;
}

/* 7) Add to cart button area: reservar espaço */
.single-product .woocommerce-variation-add-to-cart {
    min-height: 56px;
}

/* 8) Custom size selector: SSR renders in PHP, min-height as safety net */
.single-product .custom-size-selector {
    min-height: 100px;
    contain: layout style;
}

/* 9) Bloquear layout shift de imagens com wd-lazy-fade durante carregamento */
.single-product img.wd-lazy-fade:not(.wd-loaded) {
    opacity: 0;
}
.single-product img.wd-lazy-fade.wd-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 10) Review cards: estabilizar container */
.dpr-grid {
    contain: content;
}
.dpr-card {
    contain: layout style;
}