.cyber-products-section .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--cols), 1fr) !important;
    gap: var(--gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    }

/* ==========================================================================
   MODULE: PRODUCT SHOWCASE ENGINE — HOME SPEED V2
   Sprint 4.0.6 — Otimização de Proporções da Vitrine

   PROBLEMA: vitrine usava apenas ~75% da largura disponível.
   CAUSA:    elementor-container: padding 0 20px + gap: 16px = 72px desperdiçados.

   SOLUÇÃO CIRÚRGICA (3 frentes):
   1. elementor-container: padding 20px → 8px (-24px total, +4px/card)
   2. --gap: 16px → 4px (-60px de gaps, +10px/card)
   3. elementor-widget-wrap padding zerado (-20px total, +3.3px/card)
   Total estimado: +17px/card ≈ +11% de largura útil.

   Densidade oficial aprovada pelo Arquiteto:
     Desktop (≥1024px)   → 6 produtos por linha
     Tablet  (768–1023px) → 4 produtos por linha
     Mobile  (<768px)    → 2 produtos por linha

   Princípio de implementação:
   • Nenhuma medida fixa em px para a largura dos cards.
   • CSS Custom Property --cols controla o número de colunas.
   • Largura calculada por: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.1px)
   ========================================================================== */

/* ==========================================================================
   1. SECTION WRAPPER
   ========================================================================== */

.cyber-products-section {
    width: 100% !important;
    padding: 25px 0 !important; /* Reduced from 40px to 25px (15px top/15px bottom = 30px total reduction) */
    box-sizing: border-box !important;
}

/* Seções da Mesa de Vidro (aplicado a todas as vitrines agora) */
.cyber-products-section.cyber-glass-surface {
    margin: 10px auto 40px auto !important;   /* Topo colado, base afastada */
    max-width: 1616px !important;  /* Para não tocar as bordas laterais da tela */
    padding: 30px 10px !important;            
}

/* ==========================================================================
   2. CONTAINER — FRENTE 1: reduz padding lateral 20px → 8px
      Ganho: +24px de largura total da grade (+4px por card).
   ========================================================================== */

.cyber-products-section .elementor-container {
    max-width: 100% !important;               /* Sprint 4.0.6: 1200px → 100% */
    margin: 0 auto !important;
    padding: 0 8px !important;                /* Sprint 4.0.6: 0 20px → 0 8px */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   2b. WIDGET-WRAP — FRENTE 3: zera padding do elementor-column-gap-default
       O Elementor nativo adiciona padding: 10px em .elementor-element-populated.
       Zerado para maximizar a largura da grade.
   ========================================================================== */

.cyber-products-section .elementor-widget-wrap.elementor-element-populated {
    padding: 0 !important;
}

/* ==========================================================================
   3. HEADINGS
   ========================================================================== */

.cyber-products-section .elementor-heading-title.elementor-size-xl,
.cyber-products-section .elementor-heading-title.elementor-size-xxl,
.cyber-products-section .elementor-heading-title,
section.related.products > h2 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 0 0 !important; /* Move it up one line */
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: start !important; /* Encostado à esquerda */
    color: #00cfff !important; /* Cor Cy do logo */
}

/* Also target the widget container to force space reduction */
.cyber-products-section .elementor-widget-heading {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   4. PRODUCTS GRID — FRENTE 2: --gap 16px → 4px
      Ganho: 5 gaps × 12px economizados = 60px distribuídos = +10px por card.

   Fórmula de largura do card (sem medidas fixas):
     width = (100% - (N-1) × gap) / N
     → flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.1px)
   ========================================================================== */

.cyber-products-section .woocommerce {
    width: 100% !important;

    /* Sprint 4.0.6: --gap 16px → 4px */
    --cols: 6;
    --gap: 4px;
}

.cyber-products-section .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--cols), 1fr) !important;
    gap: var(--gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    }

/* Card: largura calculada automaticamente pelo número de colunas */
.cyber-products-section .woocommerce ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ==========================================================================
   5. OVERRIDE POR NÚMERO DE COLUNAS EXPLÍCITO (classe .columns-N)
   ========================================================================== */

.cyber-products-section .woocommerce.columns-3 { --cols: 3; }
.cyber-products-section .woocommerce.columns-4 { --cols: 4; }
.cyber-products-section .woocommerce.columns-5 { --cols: 5; }
.cyber-products-section .woocommerce.columns-6 { --cols: 6; }

/* ==========================================================================
   6. PRODUCT CARD: remove flex legado
   ========================================================================== */

.cyber-products-section ul.products li.product .cyber-product-card {
    width: 100% !important;
    flex: unset !important;
    max-width: none !important;
}

/* ==========================================================================
   7. RESPONSIVIDADE

   Tablet (768px–1023px): 4 colunas (--cols: 4), gap: 6px
   Mobile (<768px):       2 colunas (--cols: 2), gap: 8px
   ========================================================================== */

/* ── Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .cyber-products-section .woocommerce {
        --cols: 4 !important;
        --gap: 6px !important;
    }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
    .cyber-products-section {
        padding: 24px 0 !important;
    }
    
    .cyber-products-section.cyber-glass-surface {
        margin: 5px auto 30px auto !important;
        max-width: calc(100% - 20px) !important;
    }

    .cyber-products-section .elementor-container {
        padding: 0 10px !important;
    }

    .cyber-products-section .woocommerce {
        --cols: 2 !important;
        --gap: 8px !important;
    }

    .cyber-products-section .elementor-heading-title.elementor-size-xl {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    .cyber-products-section .elementor-heading-title.elementor-size-xxl {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }
}

/* FIX: PREVINE COLAPSO DE LARGURA QUANDO CSS DO ELEMENTOR ESTA DESATIVADO */
.cyber-products-section .elementor-container,
.cyber-products-section .elementor-column,
.cyber-products-section .elementor-widget-wrap,
.cyber-products-section .elementor-widget,
.cyber-products-section .elementor-widget-container,
.cyber-products-section .elementor-shortcode {
    width: 100% !important;
    display: block !important;
}