/**
 * DRIPSTEEZY - CSS Otimizado para Nova Estrutura
 * Usa CSS Grid/Flexbox order ao invés de JavaScript
 * Zero reflows, zero layout thrashing
 */

/* ===================================
   DESKTOP - Estrutura Padrão
   =================================== */

.dripsteezy-optimized-layout {
    width: 100%;
}

/* Breadcrumb wrapper */
.dripsteezy-breadcrumb-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 10px;
}

.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb {
    font-size: 15px;
    font-weight: 400;
    color: #666;
}

.dripsteezy-wishlist-top {
    display: flex;
    align-items: center;
}

/* Esconder último "/" e título do produto no breadcrumb */
.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb > span:last-child,
.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb > a:last-child,
.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb .breadcrumb-last,
.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb > strong {
    display: none;
}

.dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb .delimiter:last-of-type {
    display: none;
}

/* Última subcategoria em negrito (desktop) */
@media (min-width: 769px) {
    .dripsteezy-breadcrumb-wrapper .woocommerce-breadcrumb a:nth-last-child(2) {
        font-weight: 700 !important;
    }
}

/* Desktop - esconder mobile header, mostrar desktop only */
@media (min-width: 769px) {
    .dripsteezy-mobile-header,
    .dripsteezy-mobile-header-title {
        display: none !important;
    }
    
    .dripsteezy-views-counter-mobile {
        display: none !important;
    }
    
    .dripsteezy-desktop-only {
        display: block !important;
    }
    
    /* Padding interno nas imagens da galeria */
    .product-images .wd-carousel-item img,
    .product-images figure.woocommerce-product-gallery__image img {
        padding: 15px !important;
        box-sizing: border-box !important;
    }
}

/* Mobile - esconder desktop only */
@media (max-width: 768px) {
    .dripsteezy-desktop-only {
        display: none !important;
    }
}

/* ===================================
   MOBILE - Reorganização via CSS Order
   =================================== */

@media (max-width: 768px) {
    /* Container principal como flexbox */
    .product-image-summary {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Ordem dos elementos no mobile:
       1. Breadcrumb (já está fora)
       2. Mobile Header (title)
       3. Galeria wrapper
       4. Views Counter
       5. Summary (não afetado, está fora)
    */
    
    /* Mobile header com botões Explore/Brand */
    .dripsteezy-mobile-header {
        order: 1;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
    }
    
    /* Mobile header só com título - sem padding lateral */
    .dripsteezy-mobile-header-title {
        order: 1;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
    }
    
    .product-images-wrapper,
    .product-image-summary-inner {
        order: 2;
    }
    
    .dripsteezy-views-counter-mobile {
        order: 3;
        padding: 10px 15px !important;
        margin: 0 !important;
        font-size: 14px;
        color: #666;
    }
    
    /* Mobile header - título com fonte customizada */
    .dripsteezy-mobile-header-title .product_title {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin: 5px 0 6px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        font-family: inherit !important;
    }
    
    /* Esconder brand/reviews/title duplicados no summary */
    .summary-inner .wd-product-brands,
    .summary-inner .woocommerce-product-rating,
    .summary-inner .product_title,
    .single-product .summary-inner .dripsteezy-brand-reviews-row {
        display: none !important;
    }
    
    /* Esconder reviews originais no desktop (usamos os customizados) */
    .single-product .summary .woocommerce-product-rating {
        display: none !important;
    }
    
    /* Views counter styling */
    .dripsteezy-views-counter-mobile .view-icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin-right: 4px;
    }
    
    /* Esconder views counter do breadcrumb no mobile */
    .dripsteezy-breadcrumb-wrapper .wd-visits-count {
        display: none !important;
    }
}

/* ===================================
   Brand (Explore) - Texto simples
   =================================== */

/* Linha Explore/Brand + Reviews - padding global */
.dripsteezy-brand-reviews-row {
    padding: 0 15px !important;
}

.dripsteezy-brand-only {
    margin: 5px 0 10px 0;
}

.explore-brand-link {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
}

.explore-brand-link:hover {
    opacity: 0.7;
}

.explore-text-small {
    color: #666;
}

.brand-name-text {
    font-weight: 600;
    color: #000;
}

/* ===================================
   Summary Inner
   =================================== */

.summary-inner {
    position: relative;
}

/* ===================================
   Views Counter Icon
   =================================== */

.dripsteezy-views-counter-mobile .view-icon,
.dripsteezy-breadcrumb-wrapper .view-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 4px;
}

/* ===================================
   Compatibilidade com CSS Existente
   =================================== */

/* Manter estilos de galeria, carousel, etc do custom.css */
/* O custom.css existente continuará funcionando */

/* ===================================
   CORREÇÃO - Layout de Reviews
   Sobrescreve custom.css
   =================================== */

.single-product #reviews {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.single-product #reviews .woocommerce-Reviews {
    width: 100% !important;
}

.single-product #reviews #comments {
    width: 100% !important;
    padding: 0 15px !important;
}

.single-product #reviews #review_form_wrapper {
    width: 100% !important;
    padding: 0 15px !important;
}

.single-product #reviews .comment-form-rating {
    display: block !important;
    margin: 15px 0 !important;
}

.single-product #reviews .comment-form-comment {
    width: 100% !important;
}

.single-product #reviews .comment-form-author,
.single-product #reviews .comment-form-email {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

.single-product #reviews .form-submit {
    width: 100% !important;
    text-align: left !important;
}

.single-product #reviews textarea,
.single-product #reviews input[type="text"],
.single-product #reviews input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.single-product #reviews .comment-text {
    width: 100% !important;
    padding: 15px !important;
}

.single-product #reviews .star-rating {
    display: inline-block !important;
}

/* Limpar floats */
.single-product #reviews::after,
.single-product #reviews .comment-form::after {
    content: "";
    display: table;
    clear: both;
}