:root {
    /*
     * #16 — container acompanha o viewport (pedido operador 2026-08-10):
     *   ≥1920 → 1440
     *   1200–1919 → 1200
     *   948–1199 → 948
     *   <948 → segue mobile/tablet (gutter; max não aperta)
     * Gutter 0 no desktop ≥948 para o conteúdo preencher o container
     * (antes 120px → poço útil 1200 dentro de max 1440).
     */
    --home-content-max: 1200px;
    --home-gutter: 0px;
    /*
     * Pad vertical das seções CMS (soma entre adjacentes = 2× = contentGap).
     * #8: distância entre seções/boxes (categorias ↔ vitrines) = 24px → pad 12.
     * Desktop: 12+12 = 24px entre conteúdos.
     * Mobile: ver ≤768 / ≤600 (pad 24 → gap ~48px; polish — não reverter a 12).
     */
    --home-section-pad-y: 12px;
}

/* ≥1920: container 1440 */
@media (min-width: 1920px) {
    :root {
        --home-content-max: 1440px;
        --home-gutter: 0px;
    }
}

/* 948–1199: container 948 */
@media (max-width: 1199px) and (min-width: 948px) {
    :root {
        --home-content-max: 948px;
        --home-gutter: 0px;
    }
}

/* <948: comportamento anterior (gutter; max alto = viewport decide) */
@media (max-width: 947px) {
    :root {
        --home-content-max: 1440px;
        --home-gutter: 40px;
    }
}

/* ≤768: gutter 16px + pad-y 24px (gap seções ~48px) */
@media (max-width: 768px) {
    :root {
        --home-gutter: 16px;
        --home-section-pad-y: 24px;
    }
}

/*
 * 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%;
}

/*
 * #24003/#9+#15+#16 — menu/header e conteúdo no mesmo --home-content-max.
 * Fundo do header permanece full-bleed; a faixa útil alinha com .home-section.
 * Zera pad 40px do tema em .logo / .header-body (causava desalinhamento).
 */
c-header .logo,
c-header .header-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

c-header .logo-content,
c-header .header-content {
    max-width: var(--home-content-max, 1440px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--home-gutter, 120px) !important;
    padding-right: var(--home-gutter, 120px) !important;
    box-sizing: border-box !important;
}

/*
 * #24003/#18+#22 — Mobile (~375): logo + título (prodespBrandLogo) centralizados.
 * Depois das regras de gutter desktop para vencer padding !important.
 * c-header .logo-content vem com justify-content:flex-start (LWC header).
 *
 * Toolbar ≤768: o tema LWR zera o pad horizontal de .header-content.
 * Aplicamos o gutter em .header-body (vence o zero global acima) e
 * mantemos a busca com flex:1/min-width:0 (width:100% estourava a row).
 */
@media (max-width: 768px) {
    c-header .logo-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: var(--home-gutter, 16px) !important;
        padding-right: var(--home-gutter, 16px) !important;
    }

    /* Gutter no body — o tema força .header-content { padding-inline: 0 } no mobile */
    c-header .header-body {
        padding-left: var(--home-gutter, 16px) !important;
        padding-right: var(--home-gutter, 16px) !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: clip !important;
    }

    c-header .header-body .header-content,
    c-header .header-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Menu + GOV: largura intrínseca; busca: ocupa o resto sem overflow */
    c-header .header-content > webruntime-component-container[slot="nav"],
    c-header .header-content > webruntime-component-container[slot="actions"],
    c-header .header-content c-menu-prodesp,
    c-header .header-content c-menu-prodesp-unificado,
    c-header .header-content c-login-gov-br {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    c-header .header-content > webruntime-component-container[slot="search"],
    c-header .header-content .search,
    c-header .header-content .header-search-input,
    c-header [slot="search"] {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    c-header webruntime-component-container[slot="logo"] .columns,
    c-header webruntime-component-container[slot="logo"] .columns-content,
    c-header webruntime-component-container[slot="logo"] .column-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    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 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    c-header img[src*="prodespBrandLogo"],
    c-header a[href="/"] img,
    c-header .logo img,
    c-header .logo-content img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
 * 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;
    overflow: visible !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 14px 8px 16px !important;
    background-color: rgb(255, 255, 255) !important;
    font-weight: 400 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    min-width: 48px !important;
    position: relative !important;
}

/*
 * Asset /assets/icons/search.svg (viewBox 16×16, path até ~14) corta a borda direita
 * em ~14px. Mantemos o SVG original só para layout/a11y e desenhamos a lupa com margem.
 */
.header-search-input .input-search-button > svg {
    opacity: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Lupa com stroke + viewBox folgado — evita corte da borda direita do asset Commerce 16×16 */
.header-search-input .input-search-button::after {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10.5' cy='10.5' r='6' stroke='%230E519F' stroke-width='2'/%3E%3Cline x1='14.8' y1='14.8' x2='19.5' y2='19.5' stroke='%230E519F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

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

/* Mobile: busca encolhe no flex (não usar width:100% — estoura Menu+GOV) */
@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: auto !important;
        box-sizing: border-box !important;
    }

    .header-search-input .input-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

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

/* Seções CMS — pad-y via --home-section-pad-y; gutters via --home-gutter (#24003/#8/#16) */
.home-section {
    max-width: var(--home-content-max, 1440px) !important;
    margin-inline: auto !important;
    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;
    /* #16 Cleber: poço útil 1440 — sem gutter horizontal no hero (antes 120→conteúdo 1200) */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* #16 — carrosséis / categorias / promo / gov-info: preenchem o container (≥948) */
@media (min-width: 948px) {
    .home-section--api-carousel,
    .home-section--categories,
    .home-section--promo-banners,
    .home-section-gov-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*
 * LOCK #24003 — banner principal (home-section-hero) full-bleed abaixo de 948px.
 * NÃO remover ao ajustar #16 / --home-content-max: abaixo de 948 o hero ocupa
 * a largura toda da viewport (não o poço do container). ≥948 segue --home-content-max.
 * Par LWC: apiCards.css .carousel-wrapper border-radius:0 em ≤947.
 */
@media (max-width: 947px) {
    .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: var(--home-gutter, 40px) !important;
        padding-right: var(--home-gutter, 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: var(--home-gutter, 40px) !important;
        padding-right: var(--home-gutter, 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 — mesmo poço das demais seções (#16 --home-content-max) */
.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: var(--home-gutter, 40px) !important;
        padding-right: var(--home-gutter, 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) {
    /* #24003/#18 — seções + header no mesmo gutter 16
       LOCK: .home-section-hero fica de fora (full-bleed <948). */
    .home-section:not(.home-section-hero),
    .home-section--promo-banners,
    .home-section-gov-info,
    .home-section--api-carousel,
    .home-section--categories,
    .home-section-faq {
        padding-left: var(--home-gutter, 16px) !important;
        padding-right: var(--home-gutter, 16px) !important;
    }

    .home-section-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .promo-banners .columns {
        flex-direction: column !important;
        align-items: stretch !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;
    }

    .promo-banners .column-content,
    .home-section--promo-banners .prodesp-banner,
    .home-section-gov-info .prodesp-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .home-section-gov-info .prodesp-banner {
        margin-top: 24px;
        /* #24003 — Banner Mobile (1028×500) na faixa gov-info; não no hero */
        aspect-ratio: 1028 / 500;
    }

    .home-section-gov-info .prodesp-banner .dxp-block-image-host {
        background-image: url("/sfsites/c/resource/prodespGovInfoBannerMobile") !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #0a1628;
    }

    .home-section-gov-info .prodesp-banner img,
    .home-section-gov-info .prodesp-banner picture {
        opacity: 0 !important;
        pointer-events: none;
    }
}

/* 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: var(--home-gutter, 40px) !important;
        padding-right: var(--home-gutter, 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: var(--home-gutter, 40px) !important;
        padding-right: var(--home-gutter, 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;
        /* Ritmo entre seções: pad 24 → gap ~48px (antes 12 → 24, apertado no mobile) */
        --home-section-pad-y: 24px;
    }

    .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: var(--home-gutter, 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: mesmo eixo do header (max 1440 + --home-gutter).
 * 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 !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;
}

/* Um único nível com gutter (como .logo-content) — evitar pad empilhado em .columns + column */
.pdp-section--breadcrumb .columns-content,
.bg-gray:has(c-breadcrumb-prodesp) .columns-content,
community_layout-section:has(c-breadcrumb-prodesp) .columns-content,
community_layout-section:has(commerce_builder-breadcrumbs) .columns-content {
    max-width: var(--home-content-max) !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !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;
}

.pdp-section--breadcrumb .columns,
.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) .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) .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) .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: none !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: 0 !important;
    margin-right: 0 !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;
}

/* Breadcrumb D+M: seção permanece visível no mobile (opção B — #22) */

/* 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;
    }
}

/*
 * PLP Category / Search — alinhar layout ao container 1440 + gutters do header.
 * Sem isso o .left-container (Filtro) fica “fora” da faixa útil.
 */
.comm-section-container:has(.search-results),
community_layout-section:has(.search-results),
.comm-section-container:has(c-builder-search-results),
community_layout-section:has(c-builder-search-results),
.comm-section-container:has(c-checkbox-filter),
community_layout-section:has(c-checkbox-filter) {
    max-width: var(--home-content-max, 1440px) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-left: var(--home-gutter) !important;
    padding-right: var(--home-gutter) !important;
    box-sizing: border-box !important;
}

.search-results,
.search-results .search-container,
.search-results .content-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .comm-section-container:has(.search-results),
    community_layout-section:has(.search-results),
    .comm-section-container:has(c-builder-search-results),
    community_layout-section:has(c-builder-search-results),
    .comm-section-container:has(c-checkbox-filter),
    community_layout-section:has(c-checkbox-filter) {
        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;
}

/*
 * #016 — PLP categoria: um único título = LWC h2.search-title.
 * Esconde Text Block CMS (H4) e o wrapper DXP que o contém (desktop + mobile).
 */
.search-results .results-container > webruntime-component-container:has(dxp_base-text-block),
.search-results .results-container dxp_base-text-block,
.search-results .results-container dxp_base-text-block h4,
.search-results .results-container h4.textBlock_desktopTabletMobile,
.search-results .results-container h4.textBlock_desktop {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !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 (≤768): o painel já tem header Filtro + Fechar.
     * NÃO elevar search-title-bar / left-container — isso criava stacking context
     * que fazia "APIs para empresas" + Fechar fantasma flutuar sobre a lista.
     */
    body.prodesp-filtro-modal-open .search-results .left-container {
        z-index: auto !important;
    }

    body.prodesp-filtro-modal-open .search-filtro-fechar {
        display: none !important;
    }

    body.prodesp-filtro-modal-open .search-title-bar {
        position: static !important;
        z-index: auto !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;
    }

    .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;
    }

    /*
     * #016 — só o LWC .search-title-bar (não reexibir Text Block CMS).
     * Título esticado até o Filtro; quebra só quando acabar o espaço.
     */
    .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 .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;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Carrinho — ajustes no lightning-combobox (design, 2026-08-10)

   Isto precisa viver aqui, e não no CSS do checkoutsummaryv2: o combobox é
   componente-base e o CSS de um LWC é escopado, não alcançando o interior de um
   componente filho. Só folha global atravessa a fronteira de shadow DOM.
   (Propriedades herdadas, como `color` e `text-align`, atravessam por herança —
   é por isso que a centralização da coluna chega ao texto do combobox.)

   Escopo restrito a c-checkoutsummaryv2 de propósito: as outras telas do site
   ficam intocadas.

   Contexto: o head markup do site declara, na seção "Minha Conta - Minhas APIs",
   duas regras SEM escopo que atingem todo combobox do portal —

       lightning-base-combobox .slds-combobox__input { border: 1px solid #ecebea }
       lightning-base-combobox .slds-listbox span,
       lightning-base-combobox .slds-combobox__input span { color: #0E519F !important }

   A primeira dá a moldura do campo (mantida). A segunda pinta o texto com um
   azul que não existe nos tokens do Portal, e é o que a regra de cor abaixo
   corrige. A causa raiz — regra global sem escopo — segue de pé para as demais
   telas; corrigi-la na origem exigiria regressão visual em todas elas.
   ─────────────────────────────────────────────────────────────────────────── */

c-checkoutsummaryv2 lightning-base-combobox .slds-combobox__input span {
    color: var(--prodesp-color-primary, #034ea2) !important;
}

/* Alinhamento vertical da seta ao texto. Mesmo resultado que o
   `margin-top: -.4375rem` do SLDS, mas independente do tamanho do ícone.
   A borda do campo NÃO é tocada aqui: uma tentativa anterior de zerá-la
   removeu a moldura do combobox — `.slds-combobox__input` é o próprio campo
   visível, não um elemento interno duplicado. */
c-checkoutsummaryv2 lightning-base-combobox .slds-input__icon {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}

/*
 * Painel da lista com a largura do campo.
 *
 * O SLDS define `.slds-dropdown_fluid { min-width: 12rem; width: 100% }`. Os
 * 12rem (192px) são maiores que a coluna "Plano de contratação" (~158px), então
 * o `min-width` ganha do `width: 100%` e o painel estoura o campo — é a sobra
 * de espaço em branco dos dois lados ao abrir a lista.
 *
 * Com min-width em 100%, quem manda é o `width: 100%` do próprio SLDS e o painel
 * passa a ter exatamente a largura do campo. O texto das opções segue
 * centralizado, herdado da coluna, igual ao valor exibido no campo fechado.
 */
c-checkoutsummaryv2 lightning-base-combobox .slds-dropdown {
    min-width: 100%;
}