/* ==========================================================================
   Miswak Brasil – produto.css: só o que é da página de produto.
   Depende de base.css. Blocos compartilhados (benefícios, avaliações, passos,
   evento, insta, faq) estão em base.css.
   ========================================================================== */

/* ---------- Trilha (só no desktop) ---------- */
.mw-trilha{display:none}
@media (min-width:900px){
  .mw-trilha{display:block;font-size:13px;color:var(--muted);padding:14px 0 0}
  .mw-trilha ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
  .mw-trilha li+li::before{content:"/";margin-right:6px;color:var(--g200)}
  .mw-trilha a{color:var(--muted);text-decoration:none}
  .mw-trilha a:hover{color:var(--g700)}
}

/* ---------- Produto: galeria + informações ---------- */
.mw-produto{display:grid;gap:18px;padding-bottom:40px}
@media (min-width:900px){
  .mw-produto{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;padding:12px 0 72px}
  .mw-galeria{position:sticky;top:calc(var(--header-h) + 16px)}
}

/* Galeria */
.mw-galeria{margin-inline:calc(var(--gutter) * -1)}
.mw-galeria__palco{position:relative;background:var(--cream)}
.mw-galeria__trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mw-galeria__trilho::-webkit-scrollbar{display:none}
.mw-galeria__slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;margin:0;border:0;padding:0;background:none;cursor:zoom-in;border-radius:0} /* quadrada como na v1; em 390×844 nota, título e preço continuam na primeira tela */
.mw-galeria__slide img{width:100%;height:100%;object-fit:cover}
.mw-galeria__tags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.mw-galeria__contagem{position:absolute;right:12px;bottom:12px;background:rgba(14,59,31,.78);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.mw-galeria__seta{display:none}
.mw-galeria__pontos{display:flex;justify-content:center;gap:8px;padding:8px 0 0}
.mw-galeria__pontos button{position:relative;width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--g200);transition:width .25s ease,background-color .25s ease}
.mw-galeria__pontos button::after{content:"";position:absolute;inset:-10px}
.mw-galeria__pontos button[aria-current="true"]{width:24px;background:var(--g700)}
.mw-galeria__minis{display:none}
@media (min-width:600px){
  .mw-galeria{margin-inline:0}
  .mw-galeria__palco{border-radius:var(--r-lg);overflow:hidden}
  .mw-galeria__slide{aspect-ratio:1/1}
  .mw-galeria__pontos{display:none}
  .mw-galeria__minis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
  .mw-galeria__minis button{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--cream);aspect-ratio:1/1;opacity:.7;transition:opacity .2s,border-color .2s}
  .mw-galeria__minis button:hover{opacity:1}
  .mw-galeria__minis button[aria-current="true"]{border-color:var(--g700);opacity:1}
  .mw-galeria__minis img{width:100%;height:100%;object-fit:cover}
  .mw-galeria__seta{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--g900);box-shadow:var(--shadow-sm)}
  .mw-galeria__seta:hover{background:#fff}
  .mw-galeria__seta--ant{left:12px}
  .mw-galeria__seta--prox{right:12px}
}

/* Informações */
.mw-info{display:grid;gap:18px}
.mw-info__topo{display:grid;gap:10px}
.mw-info__nota{gap:6px;flex-wrap:nowrap;white-space:nowrap;font-size:13.5px}
.mw-info h1{font-size:clamp(28px,7.2vw,38px)}
.mw-info__lead{color:var(--muted);font-size:15px;line-height:1.5}
.mw-info__lead strong{color:var(--ink)}

/* Preço (aparece uma vez só; o botão repete o valor) */
.mw-preco{display:grid;gap:6px}
.mw-preco__linha{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.mw-preco__valor{font-size:34px;font-weight:800;color:var(--g900);letter-spacing:-.02em;line-height:1.05}
.mw-preco__un{font-size:14px;color:var(--muted)}
.mw-preco__un b{color:var(--g700)}
.mw-preco__cmp{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.mw-preco__cmp s{text-decoration-thickness:1.5px}
.mw-preco__pix{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--g800);background:var(--g50);padding:8px 12px 8px 10px;border-radius:10px;justify-self:start;margin-top:4px}
.mw-preco__pix .mw-icon{width:18px;height:18px}

/* Seletor de kits */
.mw-kits{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.mw-kits__legenda{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;padding:0;margin-bottom:4px;font-weight:800;font-size:15px;color:var(--g900)}
.mw-kits__legenda small{font-weight:600;color:var(--muted);font-size:13px;text-align:right}
.mw-kit{position:relative;display:grid;grid-template-columns:22px 52px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r);background:var(--white);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.mw-kit:hover{border-color:var(--g200)}
.mw-kit input{position:absolute;opacity:0;pointer-events:none}
.mw-kit__radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;transition:border-color .2s}
.mw-kit__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--g700);transform:scale(0);transition:transform .2s ease}
.mw-kit__img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--cream)}
.mw-kit__info{display:grid;gap:2px;min-width:0}
.mw-kit__info strong{font-size:16px;line-height:1.25;color:var(--g900)}
.mw-kit__info small{font-size:13px;color:var(--muted);line-height:1.35}
.mw-kit__economia{justify-self:start;margin-top:3px;font-size:12px;font-weight:800;color:var(--g700);background:var(--g100);padding:2px 8px;border-radius:999px;white-space:nowrap}
.mw-kit__preco{text-align:right;display:grid;gap:2px}
.mw-kit__preco strong{font-size:17px;white-space:nowrap;color:var(--g900)}
.mw-kit__preco small{font-size:12px;color:var(--muted);white-space:nowrap}
.mw-kit__faixa{position:absolute;top:-11px;right:14px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--g700);color:#fff;white-space:nowrap}
.mw-kit__faixa--alt{background:var(--y500);color:var(--g900)}
.mw-kit.is-selecionado{border-color:var(--g700);background:var(--g50);box-shadow:0 0 0 4px rgba(0,152,55,.12)}
.mw-kit.is-selecionado .mw-kit__radio{border-color:var(--g700)}
.mw-kit.is-selecionado .mw-kit__radio::after{transform:scale(1)}
.mw-kit:has(input:focus-visible){outline:3px solid var(--y500);outline-offset:2px}
/* "Só quer experimentar?" – 1 unidade como opção discreta do mesmo grupo */
.mw-kit--unidade{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:none;box-shadow:none;font-size:14px;color:var(--muted)}
.mw-kit--unidade:hover{background:var(--g50)}
.mw-kit--unidade .mw-kit__radio{width:18px;height:18px}
.mw-kit--unidade .mw-kit__radio::after{width:8px;height:8px}
.mw-kit--unidade b{color:var(--g700);font-weight:800}
.mw-kit--unidade.is-selecionado{background:var(--g50);color:var(--g900);box-shadow:none;border:0}
@media (max-width:400px){.mw-kit{grid-template-columns:22px 44px minmax(0,1fr) auto;gap:10px;padding:12px}.mw-kit__img{width:44px;height:44px}}
@media (max-width:359.98px){.mw-kit{grid-template-columns:22px minmax(0,1fr) auto}.mw-kit__img{display:none}}

/* Compra */
.mw-compra{display:grid;gap:10px}
.mw-compra .mw-btn--comprar{min-height:56px;font-size:17px}
@media (max-width:400px){.mw-compra .mw-btn--comprar{font-size:16px;padding:0 12px;gap:8px}.mw-compra .mw-btn--comprar .mw-btn__preco::before{margin-right:8px}}
.mw-kit--unidade b{white-space:nowrap}
.mw-compra__garantias{margin-top:2px}

/* Frete */
.mw-frete{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r)}
.mw-frete__rotulo{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--g900)}
.mw-frete__rotulo .mw-icon{color:var(--g500)}
.mw-frete__linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mw-frete .mw-input{letter-spacing:.04em;font-weight:700}
.mw-frete .mw-btn{min-height:50px;padding:0 18px;font-size:15px}
.mw-frete__ajuda{font-size:13px;display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;justify-self:start}
.mw-frete__resultado{display:grid;gap:8px;margin-top:4px}
.mw-frete__opcao{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:var(--g50);font-size:14px}
.mw-frete__opcao strong{color:var(--g900)}
.mw-frete__opcao.is-gratis{background:var(--g100)}
.mw-frete__opcao.is-gratis strong:last-child{color:var(--g700)}
.mw-frete__nota{font-size:12px;color:var(--muted)}
.mw-frete__erro{font-size:13px;font-weight:700;color:var(--erro)}

/* Ajuda pelo WhatsApp */
.mw-ajuda{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:#EAF8EF;text-decoration:none;color:var(--ink);transition:background-color .2s}
.mw-ajuda:hover{background:#DDF3E5}
.mw-ajuda .mw-ajuda__ico{width:44px;height:44px;border-radius:50%;background:var(--wa);display:grid;place-items:center;color:#fff;flex:none}
.mw-ajuda__ico .mw-icon{width:24px;height:24px}
.mw-ajuda strong{display:block;font-size:15px}
.mw-ajuda span{font-size:13px;color:var(--muted)}
.mw-ajuda .mw-ajuda__seta{margin-left:auto;color:var(--g700)}

/* Objeções (acordeões curtos) */
.mw-objecoes summary{font-size:15px}
.mw-objecoes .mw-acordeao__corpo{font-size:14.5px}
.mw-objecoes .mw-btn{justify-self:start}

/* ---------- Faixa de confiança ---------- */
.mw-faixa{background:var(--g900);color:#E4F2E8}
.mw-faixa ul{list-style:none;margin-block:0;padding:14px 0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.mw-faixa ul::-webkit-scrollbar{display:none}
.mw-faixa li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.mw-faixa .mw-icon{color:var(--y500)}
@media (min-width:900px){.mw-faixa ul{justify-content:space-between;padding:18px 0}}

/* ---------- Comparativo ---------- */
.mw-comparativo{max-width:820px;margin-inline:auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.mw-comparativo table{width:100%;border-collapse:collapse;font-size:14px}
.mw-comparativo th,.mw-comparativo td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line)}
.mw-comparativo tr:last-child td{border-bottom:0}
.mw-comparativo th{font-size:13px;font-weight:800;vertical-align:bottom}
.mw-comparativo th:first-child,.mw-comparativo td:first-child{text-align:left;font-weight:700;color:var(--ink)}
.mw-comparativo .col-mw{background:var(--g50);width:26%}
.mw-comparativo thead .col-mw{background:var(--g700);color:#fff}
.mw-comparativo .col-outro{width:26%;color:var(--muted)}
.mw-sim,.mw-nao{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center}
.mw-sim{background:var(--g700);color:#fff}
.mw-nao{background:#F6E3E1;color:var(--erro)}
.mw-sim .mw-icon,.mw-nao .mw-icon{width:16px;height:16px;stroke-width:3}
@media (min-width:600px){.mw-comparativo th,.mw-comparativo td{padding:16px 22px;font-size:15px}}

/* ---------- Sobre: "Dentes mais limpos e brancos" (foto, 4 checks e botão) ---------- */
.mw-sobre{display:grid;gap:32px;align-items:center}
.mw-sobre__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--sand);max-height:520px}
.mw-sobre__media img{width:100%;height:100%;object-fit:cover}
.mw-sobre__selo{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.94);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.mw-sobre__selo img{width:44px;height:auto}
.mw-sobre__selo strong{display:block;font-size:14px;color:var(--g900)}
.mw-sobre__selo span{font-size:12px;color:var(--muted)}
.mw-sobre__texto{display:grid;gap:16px}
.mw-sobre__texto h2{font-size:clamp(28px,6.5vw,42px)}
.mw-sobre__texto>p:not(.mw-eyebrow){color:var(--muted);font-size:17px}
.mw-sobre__texto .mw-btn{justify-self:start;min-width:min(100%,260px)}
.mw-checks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:14px}
.mw-checks li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.mw-checks .mw-checks__tick{width:28px;height:28px;border-radius:50%;background:var(--y500);color:var(--g900);display:grid;place-items:center} /* círculo amarelo da v2; o check fica verde-escuro e grosso para não sumir */
.mw-checks__tick .mw-icon{width:16px;height:16px;stroke:var(--g900);stroke-width:3.5}
.mw-checks strong{display:block;color:var(--g900)}
.mw-checks span{color:var(--muted);font-size:15px}
.mw-secao--escura .mw-checks strong{color:#fff}
.mw-secao--escura .mw-checks span{color:var(--claro)}
@media (min-width:900px){.mw-sobre{grid-template-columns:1fr 1.1fr;gap:72px}}

/* ---------- Origem (números e OMS) ---------- */
.mw-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mw-stat{border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:20px 16px;background:rgba(255,255,255,.04);display:grid;gap:6px;align-content:start}
.mw-stat__num{font-family:var(--ff-head);font-size:clamp(32px,8vw,48px);font-weight:700;color:var(--y500);line-height:1}
.mw-stat__rotulo{font-weight:800;color:#fff;font-size:15px}
.mw-stat p{font-size:13px;line-height:1.5;color:var(--claro)}
.mw-stat a{color:var(--y500);font-weight:700;font-size:13px}
@media (min-width:900px){
  .mw-stats{grid-template-columns:repeat(4,1fr);gap:20px}
  .mw-stat{padding:28px 24px}
}

/* ---------- 10 motivos (os 3 primeiros abertos) ---------- */
.mw-motivos{max-width:980px;margin-inline:auto}
.mw-motivos summary{display:grid;grid-template-columns:42px 1fr 20px;align-items:center;gap:14px;line-height:1.35}
.mw-motivo__ico{width:42px;height:42px;border-radius:12px;background:var(--g100);color:var(--g700);display:grid;place-items:center}
.mw-motivo__ico .mw-icon{width:22px;height:22px}
.mw-motivos summary small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g700);font-weight:800}
.mw-motivos .mw-acordeao__corpo{padding-left:72px}
@media (min-width:900px){.mw-motivos{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- Compra final ---------- */
.mw-final{display:grid;gap:28px;align-items:center}
.mw-final__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--sand)}
.mw-final__media img{width:100%;height:100%;object-fit:cover}
.mw-final__caixa{display:grid;gap:18px}
.mw-final__caixa h2{font-size:clamp(30px,7vw,46px)}
.mw-final__caixa>p:not(.mw-eyebrow){color:var(--claro);font-size:17px}
.mw-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mw-seg button{position:relative;display:grid;gap:2px;min-height:60px;padding:14px 4px 12px;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;text-align:center;transition:border-color .2s,background-color .2s}
.mw-seg button strong{font-size:15px}
.mw-seg button span{font-size:12px;color:var(--claro);white-space:nowrap}
.mw-seg button.is-selecionado{border-color:var(--y500);background:rgba(255,189,60,.12)}
.mw-seg button em{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--y500);color:var(--g900);padding:2px 8px;border-radius:999px;white-space:nowrap}
.mw-final__preco{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mw-final__preco strong{font-size:36px;font-weight:800;color:#fff;letter-spacing:-.02em}
.mw-final__preco span{color:var(--claro);font-size:14px}
.mw-final .mw-selos--linha .mw-selo{color:var(--claro)}
.mw-final .mw-selos--linha .mw-icon{color:var(--y500)}
@media (min-width:900px){.mw-final{grid-template-columns:1fr 1fr;gap:72px}.mw-final__media{aspect-ratio:1/1}}

/* ---------- Barra fixa de compra (só no celular/tablet) ---------- */
.mw-barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(14,59,31,.3);padding:10px var(--gutter) calc(10px + var(--safe-b));transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mw-barra-compra.is-visivel{transform:none}
.mw-barra-compra__inner{display:flex;align-items:center;gap:12px}
.mw-barra-compra img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}
.mw-barra-compra__txt{min-width:0;display:grid;line-height:1.25}
.mw-barra-compra__txt span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-barra-compra__txt strong{font-size:17px;font-weight:800;color:var(--g900)}
.mw-barra-compra .mw-btn{margin-left:auto;min-height:48px;padding:0 20px;white-space:nowrap;flex:none;font-size:15px}
@media (max-width:359.98px){.mw-barra-compra img{display:none}}
@media (min-width:900px){.mw-barra-compra{display:none}}

/* ---------- Lightbox ---------- */
.mw-lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh}
.mw-lightbox::backdrop{background:rgba(14,59,31,.92)}
.mw-lightbox img{max-height:86vh;width:auto;margin-inline:auto;border-radius:16px}
.mw-lightbox button{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--g900);display:grid;place-items:center}