/* Brasfaiber — CSS do modal de produto. Externalizado de functions.php (era inline ~20KB em TODA pagina). Modal so abre via JS ao clicar produto, nunca above-the-fold -> carregado deferido. 16/mai/2026 */
/* === MODAL de produto: redesign B2B industrial premium v5 — WEG/Atlas Copco/Festo (abr 2026) === */
/* Backdrop neutro escuro */
.product-modal{background:rgba(15,23,42,.75)!important}

/* Garantir Roboto (identidade do site) em TUDO dentro do modal */
.product-modal,.product-modal *{font-family:'Roboto','Roboto Fallback',Arial,Helvetica,sans-serif!important}

/* Modal body: 960px, cantos quase retos, datasheet feel */
.product-modal .product-modl-body{
    max-width:960px!important;padding:0!important;
    border-radius:4px!important;
    height:auto!important;max-height:90vh!important;
    top:5vh!important;margin-bottom:0!important;
    box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
    overflow:hidden!important;overflow-y:auto!important;
    border:0!important;
    scrollbar-width:thin!important;scrollbar-color:#cbd5e1 transparent!important
}
.product-modal .product-modl-body::-webkit-scrollbar{width:6px}
.product-modal .product-modl-body::-webkit-scrollbar-track{background:transparent}
.product-modal .product-modl-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:0}
.product-modal .product-modl-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}
@media(min-width:1400px){.product-modal .product-modl-body{max-width:1040px!important}}
@media(max-width:991px){.product-modal .product-modl-body{border-radius:4px!important;max-height:94vh!important;top:3vh!important}}
@media(max-width:575px){.product-modal .product-modl-body{border-radius:0!important;max-height:100vh!important;top:0!important;height:100%!important}}

/* Barra accent topo: 3px azul sólido (estilo WEG) */
.product-modal .product-modl-body::before{
    content:""!important;display:block!important;
    height:3px!important;width:100%!important;
    background:#10557e!important;
    position:sticky!important;top:0!important;z-index:5!important
}

/* Botão X: position:fixed grudado na borda direita do modal, zerar transform legado e float */
.product-modal .close-product{
    font-size:1.5rem!important;line-height:1!important;font-weight:400!important;
    width:40px!important;height:40px!important;padding:0!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:50%!important;
    background:#fff!important;color:#0a3651!important;border:1px solid #e5e7eb!important;
    position:fixed!important;
    top:max(18px,calc(4vh + 14px))!important;
    right:max(14px,calc(50vw - 572px))!important;
    left:auto!important;bottom:auto!important;float:none!important;
    transform:none!important;
    z-index:9999!important;cursor:pointer!important;
    transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;
    box-shadow:0 4px 12px rgba(0,0,0,.12)!important
}
.product-modal .close-product:hover{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important;box-shadow:0 6px 16px rgba(220,38,38,.35)!important}
@media(max-width:991px){.product-modal .close-product{top:max(14px,calc(2vh + 10px))!important;right:14px!important;width:38px!important;height:38px!important}}
@media(max-width:575px){.product-modal .close-product{top:12px!important;right:12px!important;width:36px!important;height:36px!important;font-size:1.3rem!important}}

/* Header: eyebrow "BRASFAIBER" + título + linha azul (estilo WEG datasheet) */
.product-modal .modal__header{
    margin:0!important;padding:28px 40px 20px!important;
    border-bottom:2px solid #10557e!important;text-align:left!important;
    background:#fff!important;max-width:100%!important;
    position:relative!important
}
.product-modal .modal__header::before{
    content:"BRASFAIBER · VENTILAÇÃO INDUSTRIAL"!important;
    display:block!important;
    color:#94a3b8!important;font-size:10px!important;letter-spacing:1.2px!important;
    font-weight:600!important;margin-bottom:8px!important;text-transform:uppercase!important
}
.product-modal .modal__header h2{
    font-size:1.4rem!important;line-height:1.25!important;margin:0!important;
    color:#0a3651!important;font-weight:700!important;letter-spacing:-.3px!important;
    text-align:left!important;padding-right:60px!important
}
@media(max-width:767px){
    .product-modal .modal__header{padding:20px 18px 14px 18px!important}
    .product-modal .modal__header::before{font-size:9px!important;letter-spacing:1.5px!important;margin-bottom:6px!important}
    .product-modal .modal__header h2{font-size:1.05rem!important;line-height:1.3!important;padding-right:48px!important}
}

/* Hero row: galeria + descrição lado a lado, padding moderado, alinhamento topo */
.product-modal .product-modl-body>.row.align-items-center,.product-modal .product-modl-body .row.align-items-md-center{
    align-items:flex-start!important;
    margin:0!important;padding:24px 40px 28px!important;
    background:#fff!important
}
@media(max-width:767px){
    .product-modal .product-modl-body>.row.align-items-center,.product-modal .product-modl-body .row.align-items-md-center{padding:18px!important}
}

/* Galeria: card sharp corners, datasheet style */
.product-modal .galery-slider,.product-modal .galery-slider.swiper{
    overflow:hidden!important;width:100%!important;
    max-width:420px!important;margin:0!important
}
.product-modal .galery-slider .swiper-slide{
    width:100%!important;max-width:100%!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    height:auto!important;min-height:0!important
}
.product-modal .galery-slider .swiper-slide img,.product-modal .galery-slider .swiper-slide picture,.product-modal .galery-slider .swiper-slide picture img{
    width:auto!important;max-width:100%!important;
    height:auto!important;max-height:280px!important;
    object-fit:contain!important;margin:0 auto;
    filter:none!important
}
.product-modal .galery__swiper-card{
    padding:28px!important;border:1px solid #e5e7eb!important;border-radius:4px!important;
    background:#fff!important;
    width:100%!important;min-height:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important
}
@media(max-width:767px){
    .product-modal .galery-slider{max-width:100%!important}
    .product-modal .galery-slider .swiper-slide img{max-height:32vh!important}
    .product-modal .galery__swiper-card{padding:20px!important}
}

/* Setas e dots */
.product-modal .swiper-button-next_custom,.product-modal .swiper-button-prev_custom{width:34px!important;height:34px!important;background:#fff!important;border-radius:50%!important;box-shadow:0 2px 8px rgba(0,0,0,.1)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.product-modal .swiper-pagination{margin-top:14px!important}

/* Descrição (col-md-5): centralizada VERTICALMENTE contra a foto, botão HORIZONTALMENTE centralizado embaixo */
.product-modal .col-md-5{
    padding-left:32px!important;
    display:flex!important;flex-direction:column!important;
    justify-content:center!important;align-self:stretch!important
}
@media(max-width:767px){
    .product-modal .col-md-5{padding-left:0!important;margin-top:18px!important;justify-content:flex-start!important}
}
.product-modal .col-md-5 .post-content{font-size:14.5px!important;line-height:1.65!important;color:#475569!important;margin:0 0 18px!important;text-align:left!important}
.product-modal .col-md-5 .post-content p{margin:0 0 10px 0!important}
.product-modal .col-md-5 .post-content p:last-child{margin-bottom:0!important}
/* Container do botão: HORIZONTALMENTE CENTRALIZADO */
.product-modal .col-md-5 .d-md-flex,.product-modal .col-md-5 .mt-30{
    margin-top:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important
}

/* Botão CTA principal: industrial, com seta */
.product-modal .button.addProduct,.product-modal .button__2025.button--fill-blue{
    background:#10557e!important;color:#fff!important;
    padding:12px 24px!important;font-size:13px!important;font-weight:600!important;
    border-radius:3px!important;border:0!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    transition:background .2s ease,box-shadow .2s ease!important;cursor:pointer!important;text-decoration:none!important;
    letter-spacing:.8px!important;text-transform:uppercase!important;
    gap:8px!important
}
.product-modal .button.addProduct::after{
    content:"→"!important;font-size:14px!important;line-height:1!important;font-weight:400!important
}
.product-modal .button.addProduct:hover{background:#0a3651!important;box-shadow:0 4px 12px rgba(16,85,126,.25)!important}

/* Section row (info-blocks): padding-top moderado antes do "01" */
.product-modal .row.no-gutters:not(.align-items-center):not(.align-items-md-center){
    margin:0!important;padding:8px 40px 28px!important;background:#fff!important
}
@media(max-width:767px){.product-modal .row.no-gutters:not(.align-items-center):not(.align-items-md-center){padding:6px 22px 24px!important}}

/* Section dividers: respiro tanto ACIMA quanto ABAIXO da linha divisora */
.product-modal .row.no-gutters:not(.align-items-center):not(.align-items-md-center){counter-reset:section!important}
.product-modal .info-block{margin:0!important;padding-top:22px!important;padding-bottom:18px!important;border-top:1px solid #e5e7eb!important;counter-increment:section!important}
.product-modal .info-block:first-of-type{padding-top:0!important;border-top:0!important}
.product-modal .info-block:last-of-type{padding-bottom:0!important}
@media(max-width:767px){.product-modal .info-block{padding-top:20px!important;padding-bottom:16px!important}}

/* Cabeçalho seção: NÚMERO + TÍTULO (estilo Festo/WEG) — maior que body, hierarquia clara */
.product-modal .info-block-title{
    background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;
    margin:0 0 18px 0!important;
    font-size:18px!important;color:#0a3651!important;
    display:flex!important;align-items:center!important;gap:16px!important;
    text-transform:uppercase!important;letter-spacing:.5px!important;font-weight:700!important;
    line-height:1.2!important
}
.product-modal .info-block-title::before{
    content:"0" counter(section)!important;
    color:#10557e!important;font-size:18px!important;font-weight:700!important;
    background:transparent!important;
    padding:0 16px 0 0!important;
    border:0!important;
    border-right:2px solid #10557e!important;
    letter-spacing:0!important;
    width:auto!important;height:auto!important;
    display:inline-block!important;border-radius:0!important
}
.product-modal .info-block-title .text-box{background:transparent!important;padding:0!important;font-weight:700!important}
.product-modal .info-block-title .line{display:none!important}
@media(max-width:767px){
    .product-modal .info-block-title{font-size:16px!important;margin-bottom:14px!important}
    .product-modal .info-block-title::before{font-size:16px!important;padding-right:12px!important}
    .product-modal .info-block{margin-bottom:28px!important;padding-top:22px!important}
}

/* Conteúdo: tipografia legível, hierarquia clara (headings > body) */
.product-modal .post-content{font-size:14px!important;line-height:1.65!important;color:#475569!important;text-align:left!important}
.product-modal .post-content p{margin:0 0 12px!important;text-align:left!important;font-size:14px!important}
.product-modal .post-content p:last-child{margin-bottom:0!important}
.product-modal .post-content ul,.product-modal .post-content ol{margin:8px 0 14px!important;padding-left:22px!important;text-align:left!important;font-size:14px!important}
.product-modal .post-content li{margin-bottom:5px!important;text-align:left!important;line-height:1.6!important;font-size:14px!important}
.product-modal .post-content li::marker{color:#94a3b8!important}
@media(max-width:767px){
    .product-modal .post-content,.product-modal .post-content p,.product-modal .post-content li{font-size:13px!important}
}

/* Sub-headings dentro do conteúdo (Fabricação, Hélice, Acabamento, etc): MAIORES que o body */
.product-modal .post-content h2{font-size:19px!important;font-weight:700!important;color:#0a3651!important;margin:24px 0 10px!important;line-height:1.3!important;text-align:left!important;text-transform:none!important;letter-spacing:0!important}
.product-modal .post-content h3{font-size:17px!important;font-weight:700!important;color:#0a3651!important;margin:22px 0 10px!important;line-height:1.3!important;text-align:left!important;text-transform:none!important;letter-spacing:0!important}
.product-modal .post-content h4{font-size:15.5px!important;font-weight:700!important;color:#10557e!important;margin:20px 0 8px!important;line-height:1.3!important;text-align:left!important;text-transform:none!important;letter-spacing:0!important}
.product-modal .post-content h5,.product-modal .post-content h6{font-size:14px!important;font-weight:700!important;color:#10557e!important;margin:18px 0 6px!important;line-height:1.35!important;text-align:left!important;text-transform:uppercase!important;letter-spacing:.5px!important}
.product-modal .post-content h2:first-child,.product-modal .post-content h3:first-child,.product-modal .post-content h4:first-child,.product-modal .post-content h5:first-child,.product-modal .post-content h6:first-child{margin-top:0!important}
@media(max-width:767px){
    .product-modal .post-content{font-size:14.5px!important}
    .product-modal .post-content h2{font-size:18px!important}
    .product-modal .post-content h3{font-size:16.5px!important}
    .product-modal .post-content h4{font-size:15px!important}
    .product-modal .post-content h5,.product-modal .post-content h6{font-size:13.5px!important}
}

/* OPCIONAIS: grid no desktop, scroll horizontal no mobile (economiza espaço) */
.product-modal .info-block .post-content{display:block!important}
.product-modal .info-block .product-instance,.product-modal .info-block .product-grid-card{
    padding:14px 12px!important;min-height:0!important;
    background:#fafbfc!important;border-radius:8px!important;
    border:1px solid #e5e7eb!important;
    transition:border-color .2s ease,box-shadow .2s ease!important;
    cursor:pointer!important
}
.product-modal .info-block .product-instance:hover{
    border-color:#10557e!important;
    box-shadow:0 4px 12px rgba(16,85,126,.1)!important
}
.product-modal .info-block .product-instance img,.product-modal .info-block .product-grid-card img{
    height:78px!important;max-height:78px!important;width:auto!important;max-width:100%!important;
    object-fit:contain!important;margin:0 auto!important;display:block!important
}
.product-modal .info-block .product-instance h3,.product-modal .info-block .product-grid-card h3{
    font-size:11.5px!important;margin:8px 0 0!important;line-height:1.3!important;
    font-weight:600!important;text-align:center!important;color:#475569!important
}
/* Mobile: scroll horizontal nos cards opcionais (snap) — economiza muito espaço vertical */
@media(max-width:767px){
    .product-modal .info-block:has(.product-instance) .post-content,
    .product-modal .info-block:has(.product-grid-card) .post-content{
        display:flex!important;
        gap:10px!important;
        overflow-x:auto!important;overflow-y:hidden!important;
        scroll-snap-type:x mandatory!important;
        -webkit-overflow-scrolling:touch!important;
        padding:4px 18px 12px!important;
        margin:0 -18px!important;
        scrollbar-width:thin!important
    }
    .product-modal .info-block:has(.product-instance) .post-content::-webkit-scrollbar,
    .product-modal .info-block:has(.product-grid-card) .post-content::-webkit-scrollbar{height:4px}
    .product-modal .info-block:has(.product-instance) .post-content::-webkit-scrollbar-thumb,
    .product-modal .info-block:has(.product-grid-card) .post-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
    .product-modal .info-block .product-instance,.product-modal .info-block .product-grid-card{
        flex:0 0 130px!important;
        scroll-snap-align:start!important;
        padding:10px 8px!important
    }
    .product-modal .info-block .product-instance img,.product-modal .info-block .product-grid-card img{height:60px!important;max-height:60px!important}
    .product-modal .info-block .product-instance h3,.product-modal .info-block .product-grid-card h3{font-size:10.5px!important;margin:6px 0 0!important}
}

/* Tabela: datasheet style WEG/Festo — sharp corners, header bar dark, valores tabular */
.product-modal .post-content table,.product-modal .info-block table{
    width:100%!important;border-collapse:separate!important;border-spacing:0!important;
    margin:0!important;font-size:13px!important;
    border-radius:0!important;overflow:hidden!important;
    border:1px solid #e5e7eb!important;border-top:2px solid #0a3651!important;
    font-feature-settings:"tnum"!important;font-variant-numeric:tabular-nums!important
}
.product-modal .post-content table tr,.product-modal .info-block table tr{background:#fff!important}
.product-modal .post-content table tr:nth-child(even),.product-modal .info-block table tr:nth-child(even){background:#fafbfc!important}
.product-modal .post-content table td,.product-modal .post-content table th,.product-modal .info-block table td,.product-modal .info-block table th{
    padding:11px 16px!important;line-height:1.5!important;vertical-align:middle!important;
    font-size:13px!important;border:0!important;border-bottom:1px solid #f1f5f9!important;color:#0a3651!important
}
.product-modal .post-content table tr:last-child td,.product-modal .info-block table tr:last-child td{border-bottom:0!important}
.product-modal .post-content table td:first-child,.product-modal .info-block table td:first-child{
    font-weight:700!important;color:#475569!important;
    font-size:10.5px!important;letter-spacing:1px!important;text-transform:uppercase!important;
    width:32%!important;background:#f8fafc!important;
    border-right:1px solid #e5e7eb!important
}
.product-modal .post-content table td:last-child,.product-modal .info-block table td:last-child{
    font-weight:500!important;color:#0a3651!important;font-size:13px!important
}
@media(max-width:767px){
    .product-modal .post-content table td,.product-modal .info-block table td{padding:9px 10px!important;font-size:12px!important}
    .product-modal .post-content table td:first-child,.product-modal .info-block table td:first-child{font-size:9.5px!important;width:38%!important;padding:9px 8px!important;letter-spacing:.8px!important}
    .product-modal .post-content table td:last-child,.product-modal .info-block table td:last-child{font-size:12px!important}
}

/* Footer: dark navy com trust badges + CTA branco (estilo Atlas Copco) */
.product-modal .row.no-gutters>.col-12:last-child{
    background:#fff!important;
    margin:0!important;padding:28px 40px 32px!important;
    border:1px solid #10557e!important;
    border-radius:8px!important;
    position:relative!important;
    text-align:center!important
}
/* Container do botão no footer: centralizar horizontalmente */
.product-modal .row.no-gutters>.col-12:last-child .d-md-flex,
.product-modal .row.no-gutters>.col-12:last-child .mt-30{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    text-align:center!important
}
@media(max-width:767px){.product-modal .row.no-gutters>.col-12:last-child{padding:22px 18px!important}}
/* Trust badges row no topo do footer */
.product-modal .row.no-gutters>.col-12:last-child::before{
    content:"40+ ANOS · FABRICAÇÃO PRÓPRIA · ENTREGA NACIONAL · SUPORTE TÉCNICO ESPECIALIZADO"!important;
    display:block!important;
    color:#10557e!important;font-size:11px!important;letter-spacing:1px!important;
    text-align:center!important;margin-bottom:18px!important;font-weight:600!important;
    padding-bottom:18px!important;border-bottom:1px solid rgba(16,85,126,.18)!important;
    white-space:normal!important
}
@media(max-width:767px){.product-modal .row.no-gutters>.col-12:last-child::before{font-size:9.5px!important;letter-spacing:.6px!important;margin-bottom:14px!important;padding-bottom:14px!important}}
/* Botão CTA no footer: branco, square, premium feel */
.product-modal .row.no-gutters>.col-12:last-child .button.addProduct{
    background:#10557e!important;color:#fff!important;
    padding:14px 36px!important;font-size:13px!important;font-weight:600!important;
    border-radius:3px!important;border:0!important;
    letter-spacing:.8px!important;text-transform:uppercase!important
}
.product-modal .row.no-gutters>.col-12:last-child .button.addProduct::after{content:"→"!important;font-size:14px!important}
.product-modal .row.no-gutters>.col-12:last-child .button.addProduct:hover{
    background:#0a3651!important;color:#fff!important
}

/* Esconder botão intermediário */
.product-modal .row.no-gutters>.col-12:not(.info-block):not(:last-child){display:none!important}
.product-modal .mt-30{margin-top:18px!important;text-align:center!important}