:root {
    --home-content-max: 1440px;
    --home-gutter: 120px;
    /* 25+25 = 50px de espaço visual entre conteúdos de seções adjacentes */
    --home-section-pad-y: 25px;
}

/*
 * Logo do header: CMS usa dxp_layout:columns 6+6 (col2 vazia).
 * A imagem ~280px estourava a coluna (~50%) e gerava rolagem horizontal.
 * Força coluna única + max-width relativo ao pai (nunca 100vw).
 */
c-header webruntime-component-container[slot="logo"] .columns,
c-header webruntime-component-container[slot="logo"] .columns-content {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}

c-header webruntime-component-container[slot="logo"] dxp_layout-column,
c-header webruntime-component-container[slot="logo"] [class*="col-size_"],
c-header webruntime-component-container[slot="logo"] [class*="col-large-size_"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

c-header webruntime-component-container[slot="logo"] dxp_layout-column-spacer,
c-header webruntime-component-container[slot="logo"] .columns > dxp_layout-column:nth-of-type(n + 2),
c-header webruntime-component-container[slot="logo"] .columns > [class*="col-"]:nth-of-type(n + 2) {
    display: none !important;
}

c-header webruntime-component-container[slot="logo"] .column-content,
c-header webruntime-component-container[slot="logo"] .cb-outputRichText-container,
c-header webruntime-component-container[slot="logo"] .cb-outputRichText-container p,
c-header webruntime-component-container[slot="logo"] a {
    overflow: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Brand logo Header — StaticResource prodespBrandLogo (desktop + mobile) */
c-header img[src*="prodespBrandLogo"],
c-header a[href="/"] img,
.logo img,
.logo-content img {
    height: 29px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    c-header img[src*="prodespBrandLogo"],
    c-header a[href="/"] img,
    .logo img,
    .logo-content img {
        height: 24px !important;
        max-width: 100% !important;
    }
}

/* Evita scroll horizontal do breakout 100vw (scrollbar gutter do browser) */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

/* Header sticky — fundo sólido (evita “vazado” do hero atrás do header) */
c-home header,
c-header,
c-header .header-container {
    background-color: var(--prodesp-color-surface, #ffffff);
    max-width: 100%;
}

/*
 * Slot header: utilitários (logout-token, profile-gate, redirect) usam
 * .component-wrapper-spacer. Em ≤64em (1024px) o DXP troca o spacer para
 * --dxp-*-tablet/mobile (~24px) e empurra o brand para baixo.
 */
c-home [slot="header"].component-wrapper-spacer,
.component-wrapper-spacer[slot="header"] {
    --dxp-s-component-wrapper-spacer-size: 0;
    --dxp-s-component-wrapper-spacer-size-mobile: 0;
    --dxp-c-component-wrapper-spacer-size: 0;
    --dxp-c-component-wrapper-spacer-size-tablet: 0;
    --dxp-c-component-wrapper-spacer-size-mobile: 0;
    --dxp-c-l-component-spacer-size: 0;
    --dxp-c-m-component-spacer-size: 0;
    --dxp-c-s-component-spacer-size: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * Header search — lupa à esquerda, fundo branco, ícone sem negrito (Figma / C-001).
 * commerce_builder:searchInput renderiza botão à direita; invertemos o flex
 * e trocamos border-radius/bordas laterais para manter o pill contínuo.
 */
.header-search-input .input-container {
    flex-direction: row-reverse !important;
    background-color: rgb(255, 255, 255) !important;
}

.header-search-input .input-wrapper {
    border-left: none !important;
    border-right: 1px solid rgb(200, 200, 200) !important;
    border-radius: 0 50px 50px 0 !important;
    background-color: rgb(255, 255, 255) !important;
}

.header-search-input input.search-input-with-button {
    border-radius: 0 50px 50px 0 !important;
    padding-left: 4px !important;
    padding-right: 16px !important;
    background-color: rgb(255, 255, 255) !important;
}

.header-search-input .input-search-button {
    border-right: none !important;
    border-left: 1px solid rgb(200, 200, 200) !important;
    border-radius: 50px 0 0 50px !important;
    padding: 8px 8px 8px 16px !important;
    background-color: rgb(255, 255, 255) !important;
    font-weight: 400 !important;
}

/* Lupa Commerce: traço mais fino (sem aspecto bold do SLDS) */
.header-search-input .input-search-button lightning-primitive-icon,
.header-search-input .input-search-button .slds-button__icon,
.header-search-input .input-search-button svg {
    font-weight: 400 !important;
}

.header-search-input .input-search-button svg,
.header-search-input .input-search-button svg path,
.header-search-input .input-search-button svg g {
    stroke-width: 1 !important;
    paint-order: stroke fill;
}

.header-search-input .input-icon-container {
    display: none !important;
}

/* Mobile: busca do header não força overflow horizontal */
@media (max-width: 768px) {
    .header-search-input,
    .header-search-input .input-container,
    .header-search-input .input-wrapper,
    c-header .search,
    c-header [slot="search"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header-search-input input,
    .header-search-input .search-input-with-button {
        min-width: 0 !important;
        max-width: 100% !important;
        text-overflow: ellipsis;
    }
}

/* Seções CMS — pad-y 25px (50px entre seções); gutters 120 */
.home-section {
    max-width: var(--home-content-max);
    margin-inline: auto;
    padding: var(--home-section-pad-y) var(--home-gutter);
    box-sizing: border-box;
}

.home-section-hero {
    position: relative;
    z-index: auto;
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding-top: 24px !important;
    padding-bottom: var(--home-section-pad-y) !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

/* <1440: hero full-bleed — largura total da tela */
@media (max-width: 1439px) {
    .home-section-hero {
        --dxp-s-component-wrapper-spacer-size: 0;
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 16px !important;
        padding-bottom: var(--home-section-pad-y) !important;
    }

    .home-section-hero .comm-layout-column,
    .home-section-hero .cb-section_column,
    .home-section-hero community_layout-column,
    .home-section-hero .slds-col,
    .home-section-hero .columns-content,
    .home-section-hero .column-content {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .home-section-hero .component-wrapper-spacer {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* <768: colado no header (sem gap superior) */
@media (max-width: 767px) {
    .home-section-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .home-section-hero .comm-layout-column,
    .home-section-hero .cb-section_column,
    .home-section-hero community_layout-column,
    .home-section-hero .slds-col,
    .home-section-hero .columns-content,
    .home-section-hero .column-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* FAQ / Dúvidas — container CMS (padrão gov-info); pad-y próprio; sem fundo */
.home-section-faq {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    background-color: transparent !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .home-section-faq {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .home-section-faq {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Tipografia de títulos — Figma Home 60:11518 */
.home-title-lg {
    font-family: var(--prodesp-font-family, 'Rawline', 'Segoe UI', sans-serif) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #000000 !important;
}

.home-title-lg h1,
.home-title-lg h2,
.home-title-lg h3,
.home-title-lg h4,
.home-title-lg h5,
.home-title-lg .dxp-text-heading-small,
.home-title-lg .dxp-text-heading-medium {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.home-title-md {
    font-family: var(--prodesp-font-family, 'Rawline', 'Segoe UI', sans-serif) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #000000 !important;
}

.home-title-md h1,
.home-title-md h2,
.home-title-md h3,
.home-title-md h4,
.home-title-md .dxp-text-heading-small,
.home-title-md .dxp-text-heading-medium {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.home-subtitle {
    font-family: var(--prodesp-font-family, 'Rawline', 'Segoe UI', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    margin-bottom: 0 !important;
}

.home-subtitle p,
.home-subtitle .dxp-text-body-regular {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin-bottom: 0 !important;
}

/* Banners promocionais — Figma Frame 14073; gutters !important (vence tema LWR) — rules-figma-container-gutters */
.home-section--promo-banners {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding-top: var(--home-section-pad-y) !important;
    padding-bottom: var(--home-section-pad-y) !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .home-section--promo-banners {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .home-section--promo-banners {
        padding-top: var(--home-section-pad-y) !important;
        padding-bottom: var(--home-section-pad-y) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.promo-banners {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.promo-banners .columns-content,
.promo-banners .columns {
    width: 100%;
    box-sizing: border-box;
}

.promo-banners .columns {
    display: flex !important;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
}

.promo-banners .column-content {
    width: 100%;
    min-width: 0;
}

.promo-banners dxp_layout-column,
.promo-banners > [class*="col"] {
    flex: 1 1 0;
    min-width: 0;
}

/* Promo/gov banners: arte CMS inteira, altura = proporção da imagem (sem crop cover) */
.prodesp-banner {
    --dxp-c-l-height: auto;
    --dxp-c-m-height: auto;
    --dxp-c-s-height: auto;
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    /* Empresa banner carro/volante ≈ 1002×461 */
    aspect-ratio: 1002 / 461;
    border-radius: 24px;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

.prodesp-banner .bannerWrapper {
    position: absolute !important;
    inset: 0;
}

.prodesp-banner .bannerWrapper,
.prodesp-banner a,
.prodesp-banner .dxp-block-flexible-layout,
.prodesp-banner .dxp-block-flexible-container,
.prodesp-banner .dxp-block-image-host,
.prodesp-banner dxp_content_layout-block-flexible,
.prodesp-banner dxp_content_layout-block-linkable,
.prodesp-banner dxp_content_layout-block-background-image,
.prodesp-banner dxp_content_layout-block-content-region {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 24px;
    overflow: hidden;
    box-sizing: border-box;
}

.prodesp-banner .dxp-block-image-host {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.prodesp-banner img,
.prodesp-banner picture {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 24px;
    object-fit: contain !important;
}

/* As APIs para governo — Figma Frame 14595 (2:6286); gutters !important (vence tema LWR) — rules-figma-container-gutters */
.home-section-gov-info {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding-top: var(--home-section-pad-y) !important;
    padding-bottom: var(--home-section-pad-y) !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .home-section-gov-info {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .home-section-gov-info {
        padding-top: var(--home-section-pad-y) !important;
        padding-bottom: var(--home-section-pad-y) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.home-section-gov-info .prodesp-banner {
    /* Governo Banner ≈ 1920×338 */
    aspect-ratio: 1920 / 338;
    margin-top: 46px;
}

/* ≤768: empilha + gap 24px (esconde spacer DXP que soma ~32px ao gap) */
@media (max-width: 768px) {
    .promo-banners .columns {
        flex-direction: column !important;
        gap: 24px !important;
        row-gap: 24px !important;
    }

    .promo-banners dxp_layout-column-spacer,
    .promo-banners .column-spacer {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    .promo-banners dxp_layout-column,
    .promo-banners > [class*="col"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Carrossel APIs empresas/governo — Figma Frame 14071; gutters !important (vence tema LWR) — rules-figma-container-gutters */
.home-section--api-carousel {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding-top: var(--home-section-pad-y) !important;
    padding-bottom: var(--home-section-pad-y) !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .home-section--api-carousel {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .home-section--api-carousel {
        padding-top: var(--home-section-pad-y) !important;
        padding-bottom: var(--home-section-pad-y) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Categorias empresas/governo — Figma Frame 14072; gutters !important (vence tema LWR) — rules-figma-container-gutters */
.home-section--categories {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding-top: var(--home-section-pad-y) !important;
    padding-bottom: var(--home-section-pad-y) !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .home-section--categories {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .home-section--categories {
        padding-top: var(--home-section-pad-y) !important;
        padding-bottom: var(--home-section-pad-y) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 600px) {
    :root {
        --home-gutter: 16px;
        --home-section-pad-y: 25px;
    }

    .home-title-lg {
        font-size: 24px !important;
    }
}

/* Footer — theme layouts Nova_home / commerceLayout — Figma sp-footer-portal 2:6586 */
/* Zera gutter inline do Commerce footer (var --com-c-footer-spacing-inline-*) */
c-home,
commerce_builder-layout-footer,
.footer {
    --com-c-footer-spacing-inline-start: 0px;
    --com-c-footer-spacing-inline-end: 0px;
    --dxp-c-footer-container-spacing-inline-start: 0px;
    --dxp-c-footer-container-spacing-inline-end: 0px;
}

c-home footer,
commerce_builder-layout-footer footer,
commerce-layout-footer footer,
.footer footer,
footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.footer {
    width: 100% !important;
    max-width: none !important;
    background-color: #000000 !important;
}

.logosColumnFooter {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding: 40px var(--home-gutter) 16px !important;
    box-sizing: border-box;
}

.logosColumnFooter .columns-content,
.logosColumnFooter .columns {
    width: 100%;
    box-sizing: border-box;
}

.logosColumnFooter .columns-content,
.logosColumnFooter .columns {
    display: flex !important;
    flex-direction: row;
    justify-content: center !important;
    align-items: center;
    gap: 48px !important;
}

.logosColumnFooter community_layout-column,
.logosColumnFooter community_layout-column-spacer,
.logosColumnFooter .column-content,
.logosColumnFooter dxp_layout-column,
.logosColumnFooter > [class*="col"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.logosColumnFooter community_layout-column-spacer,
.logosColumnFooter [class*="column-spacer"] {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.logosColumnFooter img {
    height: auto !important;
    max-height: 74px !important;
    width: auto !important;
    margin: 0 !important;
    display: block;
}

.pFooter {
    width: 100% !important;
    max-width: var(--home-content-max) !important;
    margin-inline: auto !important;
    padding: 0 var(--home-gutter) 40px !important;
    text-align: center !important;
    color: #ffffff !important;
    box-sizing: border-box;
}

.pFooter p,
.pFooter .dxp-text-body-small {
    font-family: var(--prodesp-font-family, 'Rawline', 'Segoe UI', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
}

@media (max-width: 1028px) and (min-width: 601px) {
    .logosColumnFooter,
    .pFooter {
        padding-inline: 40px !important;
    }
}

@media (max-width: 600px) {
    .logosColumnFooter {
        padding: 24px 16px 12px !important;
    }

    .logosColumnFooter .columns-content,
    .logosColumnFooter .columns {
        flex-direction: column;
        gap: 16px !important;
    }

    .pFooter {
        padding: 0 16px 16px !important;
    }

    .footer-socials {
        padding: 0 16px 24px !important;
        gap: 12px;
    }

    .footer-social {
        width: 36px;
        height: 36px;
    }
}

/* Footer socials — prints footer-* (5 ícones circulares azuis) */
.footer-socials,
.footer .footer-socials,
community_builder-html-editor .footer-socials {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
    padding: 0 var(--home-gutter) 40px !important;
    max-width: var(--home-content-max);
    margin-inline: auto;
    box-sizing: border-box;
    list-style: none;
}

.footer-social {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: #034ea2 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    flex-shrink: 0;
    font-size: 0 !important;
    line-height: 0 !important;
}

.footer-social--facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14 8.5h2.5V5H14c-2.2 0-4 1.8-4 4v2H7.5v3.5H10V20h3.5v-5.5h2.3l.7-3.5H13.5V9c0-.3.2-.5.5-.5z'/%3E%3C/svg%3E") !important;
}

.footer-social--twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.4-1.2 1.7-2.1-.8.5-1.6.8-2.5 1-1.5-1.6-4.1-1.7-5.7-.2-1 1-1.3 2.4-.8 3.7-3.2-.2-6-1.7-7.9-4.2-1 1.8-.5 4.1 1.2 5.3-.6 0-1.2-.2-1.7-.5 0 1.9 1.3 3.5 3.1 3.9-.5.1-1.1.2-1.6.1.5 1.5 1.9 2.6 3.5 2.6-1.3 1-3 1.6-4.7 1.6H2c1.7 1.1 3.7 1.7 5.8 1.7 7 0 10.8-5.8 10.8-10.8v-.5c.7-.5 1.4-1.2 1.9-1.9L22 5.8z'/%3E%3C/svg%3E") !important;
}

.footer-social--youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.8 15.5v-7l6.2 3.5-6.2 3.5z'/%3E%3C/svg%3E") !important;
}

.footer-social--instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm11 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") !important;
}

.footer-social--tiktok {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14.5 3c.4 2.2 1.8 3.9 4 4.4v3.1c-1.4-.1-2.7-.5-3.9-1.3v5.6c0 3.2-2.6 5.7-5.8 5.7S3 17.9 3 14.8s2.6-5.7 5.8-5.7c.3 0 .6 0 .9.1v3.2c-.3-.1-.6-.2-.9-.2-1.5 0-2.7 1.2-2.7 2.7S6.3 17.5 7.8 17.5s2.7-1.1 2.7-2.6V3h4z'/%3E%3C/svg%3E") !important;
}

.footer commerce_builder-social-links,
.footer .social-links {
    display: flex !important;
    justify-content: center !important;
    padding: 0 var(--home-gutter) 40px !important;
}

.footer commerce_builder-social-links a,
.footer .social-links a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    background: #034ea2 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Breadcrumb full-bleed — PDP / categoria / busca
 * Fundo: 100vw. Conteúdo: container do header (max 1440 + pad 40).
 * Não forçar display/width em .breadcrumb-list (quebra ol em coluna). */
.pdp-section--breadcrumb,
.bg-gray:has(c-breadcrumb-prodesp),
community_layout-section:has(c-breadcrumb-prodesp),
community_layout-section:has(commerce_builder-breadcrumbs) {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 40px !important;
    background-color: #f1f1f1 !important;
    border-bottom: 1px solid #d3d8db !important;
    box-sizing: border-box;
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
}

.pdp-section--breadcrumb .columns,
.pdp-section--breadcrumb .columns-content,
.pdp-section--breadcrumb .comm-layout-column,
.pdp-section--breadcrumb .cb-section_column,
.pdp-section--breadcrumb community_layout-column,
.pdp-section--breadcrumb .slds-col,
.pdp-section--breadcrumb .column-content,
.bg-gray:has(c-breadcrumb-prodesp) .columns,
.bg-gray:has(c-breadcrumb-prodesp) .columns-content,
.bg-gray:has(c-breadcrumb-prodesp) .comm-layout-column,
.bg-gray:has(c-breadcrumb-prodesp) .cb-section_column,
.bg-gray:has(c-breadcrumb-prodesp) community_layout-column,
.bg-gray:has(c-breadcrumb-prodesp) .slds-col,
.bg-gray:has(c-breadcrumb-prodesp) .column-content,
community_layout-section:has(c-breadcrumb-prodesp) .columns,
community_layout-section:has(c-breadcrumb-prodesp) .columns-content,
community_layout-section:has(c-breadcrumb-prodesp) .comm-layout-column,
community_layout-section:has(c-breadcrumb-prodesp) .cb-section_column,
community_layout-section:has(c-breadcrumb-prodesp) community_layout-column,
community_layout-section:has(c-breadcrumb-prodesp) .slds-col,
community_layout-section:has(c-breadcrumb-prodesp) .column-content,
community_layout-section:has(commerce_builder-breadcrumbs) .columns,
community_layout-section:has(commerce_builder-breadcrumbs) .columns-content,
community_layout-section:has(commerce_builder-breadcrumbs) .comm-layout-column,
community_layout-section:has(commerce_builder-breadcrumbs) .cb-section_column,
community_layout-section:has(commerce_builder-breadcrumbs) community_layout-column,
community_layout-section:has(commerce_builder-breadcrumbs) .slds-col,
community_layout-section:has(commerce_builder-breadcrumbs) .column-content {
    max-width: var(--home-content-max) !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Só hosts — nunca ol/li/nav internos (senão o trail empilha) */
.pdp-section--breadcrumb c-breadcrumb-prodesp,
.bg-gray:has(c-breadcrumb-prodesp) c-breadcrumb-prodesp,
community_layout-section:has(c-breadcrumb-prodesp) c-breadcrumb-prodesp,
community_layout-section:has(commerce_builder-breadcrumbs) > .columns-content > community_layout-column > .column-content > commerce_builder-breadcrumbs,
community_layout-section:has(commerce_builder-breadcrumbs) commerce_builder-breadcrumbs.breadcrumb {
    display: block;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
    --dxp-s-link-text-color: #6b7280;
    --dxp-s-link-text-color-hover: #034ea2;
    --dxp-s-link-text-decoration: none;
    --dxp-c-link-text-decoration: none;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Mantém trail do commerce em linha */
community_layout-section:has(commerce_builder-breadcrumbs) .breadcrumb-list,
community_layout-section:has(commerce_builder-breadcrumbs) ol.breadcrumb-list,
community_layout-section:has(commerce_builder-breadcrumbs) .commerce-breadcrumb,
community_layout-section:has(commerce_builder-breadcrumbs) nav.commerce-breadcrumb {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

community_layout-section:has(commerce_builder-breadcrumbs) .breadcrumb-list > li,
community_layout-section:has(commerce_builder-breadcrumbs) ol.breadcrumb-list > li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* Tipografia da busca (commerce builder) */
community_layout-section:has(commerce_builder-breadcrumbs) a,
community_layout-section:has(commerce_builder-breadcrumbs) span,
community_layout-section:has(commerce_builder-breadcrumbs) li {
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Garante que o CSS global do headMarkup não reinsira iconHomeBlue */
.pdp-section--breadcrumb .breadcrumb li:first-child:before,
.pdp-section--breadcrumb .breadcrumb li:first-child::before,
.pdp-section--breadcrumb .breadcrumb li p:before,
.pdp-section--breadcrumb .breadcrumb li p::before,
.bg-gray:has(c-breadcrumb-prodesp) .breadcrumb li:first-child:before,
.bg-gray:has(c-breadcrumb-prodesp) .breadcrumb li:first-child::before,
community_layout-section:has(c-breadcrumb-prodesp) .breadcrumb li:first-child:before,
community_layout-section:has(c-breadcrumb-prodesp) .breadcrumb li:first-child::before {
    content: none !important;
    display: none !important;
}

/* Esconde breadcrumb abaixo de 1028px */
@media (max-width: 1027px) {
    .pdp-section--breadcrumb,
    .bg-gray:has(c-breadcrumb-prodesp),
    community_layout-section:has(c-breadcrumb-prodesp),
    community_layout-section:has(commerce_builder-breadcrumbs) {
        display: none !important;
    }
}

/* PDP — hero full-bleed (escapa maxContentWidth 1440 do theme) */
.pdp-section--hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
}

.pdp-section--hero .comm-layout-column,
.pdp-section--hero .cb-section_column,
.pdp-section--hero community_layout-column,
.pdp-section--hero .slds-col {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * PDP — APIs similares (Figma 2:9623)
 * Mesmo eixo do productDetail (.pd-body): max 1200 centrado.
 * Gutter 40 ≤1450 / 16 ≤600 só em .columns-content (evitar pad duplo na column).
 */
.pdp-section--similares,
community_layout-section:has(c-api-similares) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 40px 0 !important;
    box-sizing: border-box;
}

.pdp-section--similares .columns-content,
.pdp-section--similares .columns,
community_layout-section:has(c-api-similares) .columns-content,
community_layout-section:has(c-api-similares) .columns {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.pdp-section--similares .comm-layout-column,
.pdp-section--similares .cb-section_column,
.pdp-section--similares community_layout-column,
.pdp-section--similares .slds-col,
.pdp-section--similares .column-content,
community_layout-section:has(c-api-similares) .comm-layout-column,
community_layout-section:has(c-api-similares) .cb-section_column,
community_layout-section:has(c-api-similares) community_layout-column,
community_layout-section:has(c-api-similares) .slds-col,
community_layout-section:has(c-api-similares) .column-content {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1450px) {
    .pdp-section--similares .columns-content,
    .pdp-section--similares .columns,
    community_layout-section:has(c-api-similares) .columns-content,
    community_layout-section:has(c-api-similares) .columns {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 600px) {
    .pdp-section--similares,
    community_layout-section:has(c-api-similares) {
        padding: 40px 0 !important;
    }

    .pdp-section--similares .columns-content,
    .pdp-section--similares .columns,
    community_layout-section:has(c-api-similares) .columns-content,
    community_layout-section:has(c-api-similares) .columns {
        /* Figma 93:53305 — gutter 16 */
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/*
 * Tag cleaner vazio no PLP: spacer DXP não pode empurrar o título vs Filtro.
 * Fora do media query para vencer o hook ≤47.9375em do tema.
 */
.search-results .results-container > c-tag-cleaner,
.search-results .results-container > c-tag-cleaner.component-wrapper-spacer {
    --dxp-c-component-wrapper-spacer-size: 0 !important;
    --dxp-c-component-wrapper-spacer-size-mobile: 0 !important;
    --dxp-c-component-wrapper-spacer-size-mob: 0 !important;
    --dxp-s-component-wrapper-spacer-size: 0 !important;
    --dxp-s-component-wrapper-spacer-size-mobile: 0 !important;
    --dxp-c-s-component-spacer-size: 0 !important;
    --dxp-c-component-spacer-size: 0 !important;
    margin: 0 !important;
}

/*
 * Busca / Categoria — ≤768: filtro vira modal (botão no left-container),
 * cards ocupam largura total (sem coluna de sidebar).
 */
@media (max-width: 768px) {
    .search-results .search-container,
    .search-results .content-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        gap: 0 !important;
        position: relative !important;
    }

    .search-results .left-container {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 5 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Modal de filtro aberto: painel abaixo do título; Fechar na title-bar */
    body.prodesp-filtro-modal-open .search-results .left-container {
        z-index: 1200 !important;
    }

    body.prodesp-filtro-modal-open .search-filtro-fechar {
        display: inline-flex !important;
        border: 1px solid #2670e8 !important;
        background: #2670e8 !important;
        background-color: #2670e8 !important;
        color: #ffffff !important;
    }

    /* Botão Fechar do modal de filtro — azul sólido (vence CSS Commerce/LWR) */
    .filtro-close,
    c-checkbox-filter .filtro-close,
    .filtro-root .filtro-close {
        border: 1px solid #2670e8 !important;
        background: #2670e8 !important;
        background-color: #2670e8 !important;
        color: #ffffff !important;
    }

    .filtro-close .filtro-close-icon::before,
    .filtro-close .filtro-close-icon::after,
    c-checkbox-filter .filtro-close-icon::before,
    c-checkbox-filter .filtro-close-icon::after {
        background: #ffffff !important;
    }

    body.prodesp-filtro-modal-open .search-title-bar {
        position: relative !important;
        z-index: 1202 !important;
    }

    .search-results .left-container .plp-filters,
    .search-results .left-container c-builder-search-filters,
    .search-results .left-container c-checkbox-filter {
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }

    .search-results .right-container,
    .search-results .results-container,
    .search-results .results-container c-builder-search-results,
    .search-results .results-container c-search-results,
    .search-results .results-container c-search-product-grid {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * c-tag-cleaner vazio: .component-wrapper-spacer (DXP ≤47.9375em) aplica
     * margin-bottom via CSS vars (~15px) e empurra o título abaixo do Filtro.
     * Zera margin + vars (o seletor DXP ainda aparece no DevTools, mas Computed = 0).
     */
    .search-results .results-container > c-tag-cleaner,
    .search-results .results-container > c-tag-cleaner.component-wrapper-spacer,
    .search-results section.results-container > c-tag-cleaner.component-wrapper-spacer {
        --dxp-c-component-wrapper-spacer-size: 0 !important;
        --dxp-c-component-wrapper-spacer-size-mobile: 0 !important;
        --dxp-c-component-wrapper-spacer-size-mob: 0 !important;
        --dxp-s-component-wrapper-spacer-size: 0 !important;
        --dxp-s-component-wrapper-spacer-size-mobile: 0 !important;
        --dxp-c-s-component-spacer-size: 0 !important;
        --dxp-c-component-spacer-size: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*
     * Título esticado até o Filtro; quebra só quando acabar o espaço.
     * width 100% evita o encolhimento do flex (palavra a palavra).
     */
    .search-results .results-container > dxp_base-text-block,
    .search-results .results-container dxp_base-text-block:has(h4),
    .search-results .search-title-bar {
        display: flex !important;
        align-items: center !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 108px !important;
        box-sizing: border-box !important;
    }

    .search-results .results-container h4,
    .search-results .results-container dxp_base-text-block h4,
    .search-results .search-title {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .search-results .product-grid-container,
    .search-results c-search-product-grid .product-grid-container,
    c-search-product-grid .product-grid-container,
    .search-results ul.product-grid-container {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .search-results .grid-item,
    .search-results c-search-product-card,
    .search-results .card-item,
    .search-results .cardContainerGrid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .search-results c-search-product-card {
        display: flex !important;
        align-items: stretch !important;
    }

    .search-results .cardContainerGrid {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        flex: 1 1 auto !important;
    }

    /* Paginação — centralizada em ≤768 */
    .search-results c-search-paging-control .pagingFooter,
    c-search-paging-control .pagingFooter {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .search-results c-search-paging-control .pagingSummary,
    c-search-paging-control .pagingSummary {
        width: 100% !important;
        justify-content: center !important;
    }

    .search-results c-search-paging-control .pageControlPart,
    c-search-paging-control .pageControlPart {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }
}