.section-title-container {
    margin-bottom: 1.5em
}

.section-title-container .section-title {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.section-title-container .section-title i {
    margin-right: .5em;
    opacity: .6
}

.section-title-container .section-title i.icon-angle-right {
    margin-left: 10px;
    margin-right: 0
}

.section-title-container .section-title span {
    text-transform: uppercase
}

.section-title-container .section-title small {
    font-size: 1em;
    font-weight: 400;
    opacity: .7;
    padding-left: 15px;
    text-transform: none
}

.section-title-container .section-title b {
    background-color: currentColor;
    display: block;
    flex: 1;
    height: 2px;
    opacity: .1
}

.section-title-container .section-title a {
    display: block;
    font-size: .8em;
    margin-left: auto;
    padding-left: 15px
}

.section-title-container .section-title-normal {
    border-bottom: 2px solid #ececec
}

.section-title-container .section-title-normal span {
    border-bottom: 2px solid rgba(0,0,0,.1);
    margin-bottom: -2px;
    margin-right: 15px;
    padding-bottom: 7.5px
}
.section-title-container .section-title-normal b {
    display: none
}
.section-title-container .section-title-center span {
    margin: 0 15px
}
.section-title-container .section-title-bold-center span,.section-title-center span {
    text-align: center
}
.section-title-container .section-title-bold-center small,.section-title-center small {
    display: block;
    padding: 0 15px
}
.section-title-container .section-title-bold span,.section-title-bold-center span {
    border: 2px solid rgba(0,0,0,.1);
    padding: .3em .8em
}

/* ── MIGALHA DE PÃO · Sissi 13/09/2026 ───────────────────────────────
 * Onde o cliente está, em destaque, na home da marca, no departamento
 * e no produto. Antes o componente saía <ul></ul> — presente no HTML
 * e invisível na tela.
 * Vale para TODAS as lojas (motor): a pele da marca só troca a cor.
 */
.migalha{
    padding:14px 0 6px;
}
.migalha-lista{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px 4px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:16px;
    line-height:1.5;
}
.migalha-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:0;
}
.migalha-item > a{
    color:#4b5563;
    text-decoration:none;
    font-weight:600;
    padding:3px 8px;
    border-radius:6px;
    transition:background .15s, color .15s;
}
.migalha-item > a:hover,
.migalha-item > a:focus-visible{
    color:#111827;
    background:#eef1f5;
    text-decoration:none;
}
.migalha-seta{
    color:#b6bcc6;
    font-size:18px;
    line-height:1;
    user-select:none;
}
/* onde o cliente ESTÁ: o item forte da trilha */
.migalha-aqui{
    color:#111827;
    font-weight:800;
    padding:3px 8px;
    max-width:min(560px, 70vw);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (max-width:700px){
    .migalha{ padding:10px 0 4px; }
    .migalha-lista{ font-size:14px; }
    .migalha-aqui{ max-width:100%; white-space:normal; }
    /* no celular a trilha longa vira rolagem horizontal em vez de quebrar a página */
    .migalha-lista{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .migalha-lista::-webkit-scrollbar{ display:none; }
}

/* ── A FICHA EM GAVETAS · Sissi 13/09/2026 ───────────────────────────
 * "As descrições estão um balaio de gato" (Paul, 13/09).
 * O texto já vinha organizado do banco; faltava a tela respeitar isso.
 * Motor: serve as 14 lojas, a pele da marca só troca a cor.
 */
.prodtexto{ color:#374151; font-size:16px; line-height:1.75; }

.fx-p{ margin:0 0 16px; }
.fx-p:last-of-type{ margin-bottom:22px; }

/* o 110V é decisão de compra — não pode ficar no meio do texto miúdo */
.fx-110{
    display:flex; gap:10px; align-items:flex-start;
    margin:0 0 22px; padding:12px 16px;
    background:#fff8e6; border:1px solid #f2d68a; border-left:4px solid #e8a90c;
    border-radius:8px; color:#6b4c00; font-weight:600; font-size:15px; line-height:1.55;
}
.fx-110::before{ content:"⚡"; font-size:17px; line-height:1.4; }

.fx-titulo{
    margin:30px 0 12px; padding-bottom:8px;
    font-size:19px; font-weight:800; color:#111827;
    border-bottom:2px solid #e6e9ee;
}

/* ficha técnica: chave à esquerda, valor à direita, linha zebrada */
.fx-ficha{ margin:0; display:grid; grid-template-columns:minmax(140px,26%) 1fr; }
.fx-ficha > dt{
    margin:0; padding:9px 14px 9px 0;
    font-weight:700; color:#4b5563; font-size:15px;
    border-top:1px solid #eef1f5;
}
.fx-ficha > dd{
    margin:0; padding:9px 0;
    color:#111827; border-top:1px solid #eef1f5;
}
.fx-ficha > dt:first-of-type, .fx-ficha > dd:first-of-type{ border-top:0; }

.fx-itens{ margin:0; padding:0 0 0 18px; list-style:disc; }
.fx-itens > li{ margin:2px 0; }

/* como usar */
.fx-passos{ margin:0; padding:0; list-style:none; counter-reset:none; }
.fx-passos > li{
    display:flex; gap:12px; align-items:flex-start;
    margin:0 0 12px;
}
.fx-n{
    flex:0 0 28px; height:28px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:#111827; color:#fff; font-weight:800; font-size:14px;
}

/* a dica da casa */
.fx-dica{
    margin:24px 0 0; padding:16px 18px;
    background:#f1f7f2; border:1px solid #cfe3d4; border-radius:10px;
}
.fx-dica > strong{ display:block; margin-bottom:6px; color:#14532d; font-size:15px; }
.fx-dica > p{ margin:0; color:#245c37; }

.fx-garantia > dd{ line-height:1.7; }

/* condições de importação: informação de contrato, tom baixo */
.fx-importacao{
    padding:14px 16px; border:1px solid #e6e9ee; border-radius:10px;
    background:#fafbfc; color:#5b6472; font-size:14.5px; line-height:1.65;
}
.fx-importacao > p{ margin:0 0 9px; }
.fx-importacao > p:last-child{ margin:0; }

@media (max-width:700px){
    .fx-ficha{ grid-template-columns:1fr; }
    .fx-ficha > dt{ padding:10px 0 0; border-top:1px solid #eef1f5; }
    .fx-ficha > dd{ padding:2px 0 10px; border-top:0; }
    .fx-ficha > dd:first-of-type{ border-top:0; }
    .fx-titulo{ font-size:17px; }
}

/* subtítulo dentro da ficha (descrições que vêm com seções próprias) */
.fx-sub{
    grid-column:1 / -1;
    margin:18px 0 2px !important; padding:10px 0 4px !important;
    font-size:15px; font-weight:800; color:#111827;
    border-top:1px solid #eef1f5;
}
.fx-ficha > .fx-sub:first-of-type{ margin-top:6px !important; border-top:0; }

/* ── O VÍDEO DO PRODUTO · Sissi 13/09/2026 ──────────────────────────
 * Achado da Ive: "os vídeos não estão funcionando". O endereço existia só
 * no JSON-LD, que o Google lê e o cliente não vê. Fachada: carrega a capa,
 * e o player do YouTube só entra no clique.
 */
.prodvideo{ margin:34px 0 6px; }
.prodvideo > h2{ margin:0 0 14px; font-size:22px; font-weight:800; color:#111827; }
.pvpalco{
    position:relative; width:100%; max-width:760px; aspect-ratio:16/9;
    border-radius:12px; overflow:hidden; cursor:pointer;
    background:#0b0d10; box-shadow:0 2px 14px rgba(17,24,39,.14);
}
.pvpalco > img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s, filter .25s; }
.pvpalco:hover > img, .pvpalco:focus-visible > img{ transform:scale(1.03); filter:brightness(.82); }
.pvpalco > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pvplay{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:72px; height:72px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(17,24,39,.72); color:#fff; font-size:26px; padding-left:5px;
    border:2px solid rgba(255,255,255,.9); transition:background .2s, transform .2s;
}
.pvpalco:hover .pvplay{ background:#d32f2f; transform:translate(-50%,-50%) scale(1.07); }
@media (max-width:700px){ .prodvideo > h2{ font-size:19px; } .pvplay{ width:58px; height:58px; font-size:21px; } }

/* ── ÂNCORA QUE NÃO FICA ATRÁS DO CABEÇALHO · Sissi 13/09/2026 ───────
 * Achado da Ive, pela Clau: "quando ela entra nos vídeos, não cai direto
 * no vídeo". E caía — só que o cabeçalho grudado no topo (83px) mais a
 * barra de departamentos (76px, colada em 70) somam 146px e tapavam o
 * título "Veja em movimento". Quem chega vê o meio da seção anterior e
 * conclui que o link está quebrado.
 *
 * `:target` acerta EXATAMENTE o elemento para onde a URL aponta — serve
 * o #video e qualquer âncora futura da casa, sem lista de nomes.
 */
:target{ scroll-margin-top:160px; }

@media(max-width:900px){
    /* no celular a barra de departamentos não gruda (position:static),
       então sobra só o cabeçalho */
    :target{ scroll-margin-top:120px; }
}

/* ── O PAINEL DA MARCA NO CADASTRO E NO PAGAMENTO · Sissi 13/09/2026 ──
 * Pedido do Paul: "uns banners lindos na ninja durante o cadastro e o
 * pagamento. ninguém faz isso." É a hora em que o cliente hesita.
 */
.cfpainel{
    background:linear-gradient(160deg,#14181f 0%,#20262f 58%,#2b323d 100%);
    color:#fff; border-radius:16px; padding:26px 24px 22px;
    box-shadow:0 14px 40px rgba(17,24,39,.18); overflow:hidden;
}
.cfselo{
    display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.3px;
    text-transform:uppercase; color:#e8b04b; margin-bottom:12px;
}
.cftopo > h2{ margin:0 0 10px; font-size:24px; line-height:1.22; font-weight:800; letter-spacing:-.3px; color:#fff }
.cftopo > p{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:#b9c2cd }

.cffoto{
    border-radius:12px; overflow:hidden; background:#fff;
    margin:0 0 18px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
}
.cffoto > img{ width:100%; height:100%; object-fit:contain; padding:12px }

.cfnums{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 18px }
.cfnums > div{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:11px 10px }
.cfnums b{ display:block; font-size:19px; font-weight:800; line-height:1.1; color:#fff }
.cfnums span{ display:block; margin-top:4px; font-size:10.5px; line-height:1.35; color:#9aa4b2 }

.cflista{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px }
.cflista > li{ font-size:13px; line-height:1.5; color:#aab3bf }
.cflista > li > b{ display:block; color:#fff; font-size:13.5px; font-weight:700; margin-bottom:2px }

.cfzap{
    display:block; text-align:center; padding:11px 14px; border-radius:999px;
    background:#1faa53; color:#fff; font-weight:700; font-size:13.5px; text-decoration:none;
    transition:.15s;
}
.cfzap:hover{ background:#189247; color:#fff; text-decoration:none }

@media(max-width:760px){
    .cfpainel{ padding:20px 18px 18px; border-radius:14px }
    .cftopo > h2{ font-size:20px }
    .cfnums{ grid-template-columns:repeat(3,1fr); gap:7px }
    .cfnums b{ font-size:16px }
    .cffoto{ aspect-ratio:16/9 }
}

/* ── O QUE ACONTECE DEPOIS · no resumo do pagamento · Sissi 13/09/2026 */
.pgtranquilo{ margin-top:20px; padding-top:16px; border-top:1px solid #e6e9ee; display:grid; gap:13px }
.pgt-linha{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.55; color:#5b6472 }
.pgt-linha b{ display:block; color:#111827; font-size:13.5px; margin-bottom:2px }
.pgt-ico{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#eaf5ee; color:#15803d;
          display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800 }