/* ─── Netseg Product Showcase — Gallery CSS v1.0.2 ───────────────
   !important usados selectivamente para sobrepor estilos do tema WC
   ─────────────────────────────────────────────────────────────── */

:root {
    --nps-radius:     8px;
    --nps-thumb-size: 76px;
    --nps-gap:        10px;
    --nps-accent:     #0d2235;
    --nps-orange:     #f08c00;
    --nps-nav-size:   44px;
    --nps-trans:      0.3s ease;
}

/* ── Reset do wrapper — isolar do tema ──────────────────────────── */
.nps-gallery,
.nps-gallery * {
    box-sizing: border-box !important;
}

.nps-gallery {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    float: none !important;
    clear: both !important;
}

/* Quando em modo padrão (não side-layout), centrar com max-width razoável */
.woocommerce div.product:not(:has(.nps-side-layout)) .nps-gallery {
    max-width: 560px !important;
    margin: 0 auto 24px !important;
}

/* ── Layouts ─────────────────────────────────────────────────────
   thumbs-bottom  → col normal
   thumbs-top     → col invertida (thumbs primeiro)
   thumbs-right   → row normal
   thumbs-left    → row invertida (thumbs primeiro)
────────────────────────────────────────────────────────────────── */

.nps-gallery__layout {
    display: flex !important;
    gap: var(--nps-gap) !important;
}

/* Coluna — imagem em cima, thumbs em baixo */
.nps-gallery__layout--col {
    flex-direction: column !important;
}

/* Coluna invertida — thumbs em cima, imagem em baixo */
.nps-gallery__layout--col-rev {
    flex-direction: column-reverse !important;
}

/* Linha — imagem à esquerda, thumbs à direita */
.nps-gallery__layout--row {
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* Linha invertida — thumbs à esquerda, imagem à direita */
.nps-gallery__layout--row-rev {
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
}

/* Main image — flex grow em modo linha */
.nps-gallery__layout--row    .nps-gallery__main,
.nps-gallery__layout--row-rev .nps-gallery__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Thumbs — coluna em modo linha */
.nps-gallery__layout--row    .nps-gallery__thumbs,
.nps-gallery__layout--row-rev .nps-gallery__thumbs {
    flex-direction: column !important;
    width: calc(var(--nps-thumb-size) + 4px) !important;
    flex-shrink: 0 !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
}

/* ── Main image wrap — QUADRADO ─────────────────────────────────── */
.nps-gallery__main {
    width: 100% !important;
}

.nps-main-wrap {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important;   /* trick ratio 1:1 sem aspect-ratio para compatibilidade */
    overflow: hidden !important;
    border-radius: var(--nps-radius) !important;
    background: #f6f7f7 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

/* ── Slides ─────────────────────────────────────────────────────── */
.nps-slide {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    opacity: 0 !important;
    transition: opacity var(--nps-trans) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.nps-slide--active {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

.nps-main-img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    cursor: pointer !important;
    transition: transform 0.25s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
}
.nps-main-img:hover {
    transform: scale(1.025) !important;
}

/* ── Nav arrows ─────────────────────────────────────────────────── */
.nps-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    width: var(--nps-nav-size) !important;
    height: var(--nps-nav-size) !important;
    background: rgba(13,34,53,.72) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: background var(--nps-trans), opacity var(--nps-trans) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.nps-main-wrap:hover .nps-nav { opacity: 1 !important; }
.nps-nav:hover { background: var(--nps-orange) !important; }
.nps-nav--prev { left: 10px !important; }
.nps-nav--next { right: 10px !important; }

/* ── Dots ──────────────────────────────────────────────────────── */
.nps-dots {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.nps-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(0,0,0,.2) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background var(--nps-trans), transform var(--nps-trans) !important;
    display: inline-block !important;
}
.nps-dot--active {
    background: var(--nps-orange) !important;
    transform: scale(1.35) !important;
}

/* ── Thumbs ─────────────────────────────────────────────────────── */
.nps-gallery__thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.nps-thumb {
    width: var(--nps-thumb-size) !important;
    height: var(--nps-thumb-size) !important;
    padding: 2px !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: #f6f7f7 !important;
    transition: border-color var(--nps-trans), box-shadow var(--nps-trans) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nps-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border: none !important;
}
.nps-thumb--active {
    border-color: var(--nps-orange) !important;
    box-shadow: 0 0 0 2px rgba(240,140,0,.2) !important;
}
.nps-thumb:hover {
    border-color: var(--nps-accent) !important;
}

/* ── Assinatura ─────────────────────────────────────────────────── */
.nps-signature {
    text-align: right !important;
    font-size: 10px !important;
    color: #aaa !important;
    letter-spacing: .08em !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* ── Lightbox ───────────────────────────────────────────────────── */
.nps-lightbox {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
.nps-lightbox.nps-lightbox--open {
    display: flex !important;
}
.nps-lightbox__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.93) !important;
    cursor: zoom-out !important;
}
.nps-lightbox__content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 92vw !important;
    max-height: 92vh !important;
}
.nps-lightbox__img {
    max-width: 80vw !important;
    max-height: 88vh !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.6) !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
}
.nps-lightbox__close {
    position: absolute !important;
    top: -22px !important;
    right: -22px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: background .2s !important;
}
.nps-lightbox__close:hover { background: var(--nps-orange) !important; }
.nps-lightbox__prev,
.nps-lightbox__next {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 30px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background .2s !important;
}
.nps-lightbox__prev:hover,
.nps-lightbox__next:hover { background: var(--nps-orange) !important; }
.nps-lightbox__counter {
    position: absolute !important;
    bottom: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: rgba(255,255,255,.5) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    :root {
        --nps-thumb-size: 58px;
        --nps-nav-size:   36px;
    }
    /* Em mobile, layout row/row-rev colapsa para col */
    .nps-gallery__layout--row,
    .nps-gallery__layout--row-rev {
        flex-direction: column !important;
    }
    .nps-gallery__layout--row    .nps-gallery__thumbs,
    .nps-gallery__layout--row-rev .nps-gallery__thumbs {
        flex-direction: row !important;
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
    }
    .nps-lightbox__prev,
    .nps-lightbox__next { width: 38px !important; height: 38px !important; font-size: 22px !important; }
}

/* ── Layout lado-a-lado (v1.0.4) ────────────────────────────────
   .nps-side-layout envolve [galeria NPS] + [summary WC] em flex.
   O wrapper é injetado diretamente via PHP nos hooks WC, sem
   depender da estrutura do tema.
────────────────────────────────────────────────────────────────── */

/* Wrapper externo — inline style define flex-direction,
   mas o CSS garante reset e containment */
.nps-side-layout {
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* Coluna da galeria dentro do wrapper */
.nps-side-layout__gallery {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Summary do WC dentro do wrapper — primeiro filho que não é .nps-side-layout__gallery */
.nps-side-layout > .summary.entry-summary,
.nps-side-layout > div.summary,
.nps-side-layout > .woocommerce-product-details__short-description,
.nps-side-layout > form.cart,
.nps-side-layout > .product_meta {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/*
 * O WC renderiza o summary com a classe .summary.entry-summary.
 * Garantir que esse elemento também se comporta como flex item.
 */
.nps-side-layout .summary.entry-summary {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Responsive: colapsa para coluna em mobile / tablet ─────────── */
@media (max-width: 900px) {
    .nps-side-layout {
        flex-direction: column !important;
    }
    .nps-side-layout__gallery,
    .nps-side-layout .summary.entry-summary {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Em image-right no mobile: galeria sobe sempre */
    .nps-side-layout--image-right {
        flex-direction: column !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NETSEG PRODUCT SHOWCASE — Loop de produtos (v1.0.5)
   Conceito A: card 1:1, imagem full, badge sobreposto,
   nome a 2 linhas, botão sempre no fundo.
   Override não-invasivo: não altera templates WooCommerce,
   apenas sobrepõe os seletores da loop de produtos.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   NPS GRID — CSS nuclear v1.0.9
   Cobre todos os padrões de tema WooCommerce que interferem
   com a nossa CSS grid (Storefront, Flatsome, OceanWP, Astra,
   Divi, Avada, BeTheme, e temas custom como o da Ideal Pesca).
═══════════════════════════════════════════════════════════════ */

/* Wrapper isolador — garante novo contexto de formatação */
.nps-grid-wrapper {
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

/* ── ul.products: forçar grid em qualquer contexto ─────────── */
.nps-grid-wrapper ul.products,
.nps-grid-wrapper .products,
.woocommerce .nps-grid-wrapper ul.products,
.woocommerce-page .nps-grid-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Anular display:flex de temas */
    flex-wrap: unset !important;
    flex-direction: unset !important;
    /* Anular columns: de temas */
    columns: unset !important;
    column-count: unset !important;
    column-gap: unset !important;
    /* Anular float container */
    overflow: visible !important;
}

/* ── Pseudo-elementos de clearfix no ul ─────────────────────── */
.woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce-page ul.products::before {
    display: none !important;
    content: none !important;
    clear: none !important;
    float: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── li.product: reset TOTAL incluindo .first e .last ───────── */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Manter flex interno da card */
    display: flex !important;
    flex-direction: column !important;
    /* Sem grid-column span */
    grid-column: auto !important;
    grid-row: auto !important;
    /* Não permite que a card cresça fora da coluna */
    align-self: stretch !important;
}

/* ── nth-child de temas: reset total ────────────────────────── */
.woocommerce ul.products li.product:nth-child(n),
.woocommerce-page ul.products li.product:nth-child(n) {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nps-grid-wrapper ul.products,
    .woocommerce .nps-grid-wrapper ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .nps-grid-wrapper ul.products,
    .woocommerce .nps-grid-wrapper ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}


/* ── Card base ──────────────────────────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #fff !important;
    border: 1px solid #e8edf0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    transition: border-color .18s, box-shadow .18s !important;
    position: relative !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: #b8cdd8 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
}

/* ── Área da imagem: quadrado 1:1 ───────────────────────────── */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: opacity .18s !important;
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product:hover a.woocommerce-loop-product__link img {
    opacity: .9 !important;
}

/* Placeholder quando não há imagem */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img.woocommerce-placeholder,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link img.woocommerce-placeholder {
    object-fit: contain !important;
    padding: 20px !important;
    background: #f5f7f9 !important;
}

/* ── Badge sobreposto: categoria + preço ────────────────────── */
.woocommerce ul.products li.product .nps-loop-badge,
.woocommerce-page ul.products li.product .nps-loop-badge {
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 5px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1a3a4a !important;
    backdrop-filter: blur(4px) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    max-width: calc(100% - 18px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.woocommerce ul.products li.product .nps-loop-badge--consult,
.woocommerce-page ul.products li.product .nps-loop-badge--consult {
    background: rgba(250,238,218,.95) !important;
    color: #633806 !important;
    border-color: rgba(186,117,23,.2) !important;
}

/* ── Corpo do card: nome + preço ────────────────────────────── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 12px 4px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #1a2d38 !important;
    /* Clamp a 2 linhas */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(12px * 1.35 * 2) !important;
    flex: 1 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    display: block !important;
    padding: 2px 12px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0a4f72 !important;
    line-height: 1.4 !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount {
    color: #0a4f72 !important;
}

/* Preço "Sob consulta" (vem do NIO_Frontend::price_fallback) */
.woocommerce ul.products li.product .nio-price-quote,
.woocommerce-page ul.products li.product .nio-price-quote {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #ba7517 !important;
}

/* ── Botão: sempre no fundo da card ─────────────────────────── */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .nio-btn,
.woocommerce-page ul.products li.product .nio-btn {
    display: block !important;
    margin: 10px 12px 12px !important;
    padding: 8px 10px !important;
    width: calc(100% - 24px) !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: .02em !important;
    transition: opacity .15s, transform .1s !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce ul.products li.product .nio-btn:hover,
.woocommerce-page ul.products li.product .nio-btn:hover {
    opacity: .88 !important;
    transform: translateY(-1px) !important;
}

/* Botão "Adicionar ao pedido" (escuro) */
.woocommerce ul.products li.product .nio-btn:not(.nio-btn--quote),
.woocommerce-page ul.products li.product .nio-btn:not(.nio-btn--quote),
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .add_to_cart_button {
    background: #1a3a4a !important;
    color: #fff !important;
}

/* Botão "Pedir orçamento" (laranja âmbar) */
.woocommerce ul.products li.product .nio-btn--quote,
.woocommerce-page ul.products li.product .nio-btn--quote {
    background: #e8850a !important;
    color: #fff !important;
}

/* ── Badge WooCommerce "sale" reposicionado ──────────────────── */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    top: 9px !important;
    right: 9px !important;
    left: auto !important;
    margin: 0 !important;
    font-size: 10px !important;
    min-height: unset !important;
    min-width: unset !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    line-height: 1.3 !important;
}


/* ═══════════════════════════════════════════════════════════════
   NPS — Produtos Relacionados, Upsells, Cross-sells (v1.1.0)
   O WC renderiza estas secções com o mesmo ul.products mas
   fora do loop principal — os mesmos estilos da grid aplicam-se.
═══════════════════════════════════════════════════════════════ */

/* Wrapper das secções abaixo do produto */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells {
    clear: both !important;
    width: 100% !important;
    margin-top: 40px !important;
}

/* Títulos das secções */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

/* Grid nas secções de produto relacionado */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products,
.nps-grid-wrapper .related ul.products,
.nps-grid-wrapper .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
    columns: unset !important;
    column-count: unset !important;
}

/* Garantir que os pseudo-elementos não interferem */
.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after,
.woocommerce .upsells ul.products::before,
.woocommerce .upsells ul.products::after {
    display: none !important;
    content: none !important;
}

/* Cards nos relacionados — mesmos estilos do loop principal */
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product,
.woocommerce .cross-sells ul.products li.product,
.woocommerce .related ul.products li.product.first,
.woocommerce .related ul.products li.product.last,
.woocommerce .upsells ul.products li.product.first,
.woocommerce .upsells ul.products li.product.last {
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-column: auto !important;
    background: #fff !important;
    border: 1px solid #e8edf0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

/* Imagem nos relacionados — forçar aspect-ratio e object-fit */
.woocommerce .related ul.products li.product a img,
.woocommerce .upsells ul.products li.product a img,
.woocommerce .cross-sells ul.products li.product a img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    max-height: none !important;
    height: auto !important;
}

/* Link wrapper nos relacionados */
.woocommerce .related ul.products li.product a.woocommerce-loop-product__link,
.woocommerce .upsells ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Título nos relacionados */
.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 12px 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
    margin: 0 !important;
}

/* Preço nos relacionados */
.woocommerce .related ul.products li.product .price,
.woocommerce .upsells ul.products li.product .price {
    display: block !important;
    padding: 2px 12px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Botão nos relacionados */
.woocommerce .related ul.products li.product .button,
.woocommerce .upsells ul.products li.product .button,
.woocommerce .related ul.products li.product .nio-btn,
.woocommerce .upsells ul.products li.product .nio-btn {
    display: block !important;
    margin: 10px 12px 12px !important;
    padding: 8px 10px !important;
    width: calc(100% - 24px) !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
}

/* Responsive relacionados */
@media (max-width: 900px) {
    .woocommerce .related ul.products,
    .woocommerce .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .woocommerce .related ul.products,
    .woocommerce .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
    }
}

/* ── Override: tema WC e Storefront na single product ────────────
   Quando o NPS está activo, o wrapper da galeria nativa é removido
   mas o tema pode aplicar float/width ao contexto. Garantir que
   .nps-gallery e .nps-side-layout ocupam o espaço correcto.
──────────────────────────────────────────────────────────────── */

/* Anular regras comuns de temas (Storefront, Flatsome, etc) */
.woocommerce div.product .nps-gallery,
.woocommerce div.product .nps-side-layout {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
}

/* Em modo padrão (galeria acima do summary), limitar largura */
.woocommerce div.product > .nps-gallery {
    max-width: 560px !important;
    margin: 0 auto 32px !important;
}

/* Forçar que o summary NÃO flutue quando galeria está em modo padrão */
.woocommerce div.product:not(:has(.nps-side-layout)) .entry-summary,
.woocommerce div.product:not(:has(.nps-side-layout)) .summary {
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

/* Garantir que a imagem dentro do nps-main-wrap ocupa 100% */
.nps-gallery .nps-main-wrap {
    width: 100% !important;
    padding-top: 100% !important;
}

/* Thumbnails — mínimo 1 thumb visível para confirmar que a galeria tem mais imagens */
.nps-gallery__thumbs:empty {
    display: none !important;
}