:root {
  --rosa: #ECAAC0;        /* rosa do fundo do logo */
  --rosa-claro: #FBEAF0;
  --rosa-fundo: #FFF7FA;
  --magenta: #E0157D;     /* rosa dos lábios / "Pink" */
  --magenta-escuro: #B80F65;
  --preto: #141014;
  --texto: #2A1F25;
  --cinza: #7A6B73;
  --linha: #F1DCE5;
  --verde: #1FA855;
  --raio: 16px;
  --sombra: 0 6px 20px rgba(224, 21, 125, .10);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--rosa-fundo);
  color: var(--texto);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; font-size: 16px; /* evita zoom no iPhone */ }
[hidden] { display: none !important; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 247, 250, .94);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  padding: calc(8px + env(safe-area-inset-top)) 10px 10px;
  border-bottom: 1px solid var(--linha);
}
.barra-topo { display: flex; align-items: center; gap: 2px; max-width: 960px; margin: 0 auto; }
.icone {
  position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none;
  display: grid; place-items: center; color: var(--preto); text-decoration: none;
}
.icone svg, .g-item svg, .g-link svg, .pb svg, .vantagens svg, .painel-bloco > svg, .rodape svg, .bloco-insta svg, .ver-insta svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.icone:active { background: var(--rosa-claro); }
.badge {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--magenta); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--rosa-fundo);
}
.marca {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; background: none; padding: 2px 4px; border-radius: 14px; text-align: left;
}
.marca:active { background: var(--rosa-claro); }
.logo { width: 42px; height: 42px; border-radius: 50%; box-shadow: var(--sombra); flex: none; }
.marca-txt { display: flex; flex-direction: column; min-width: 0; }
.nome-loja { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--preto); white-space: nowrap; }
.status { margin: 1px 0 0; font-size: 12px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca .status::after { content: " ›"; font-weight: 700; color: var(--magenta); }
.status .bolinha { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.status.aberto .bolinha { background: var(--verde); }
.status.fechado .bolinha { background: #C9B3BE; }

.busca {
  display: flex; align-items: center; gap: 8px; max-width: 940px;
  margin: 8px auto 0; padding: 0 14px; height: 44px;
  background: #fff; border: 1px solid var(--linha); border-radius: 12px;
}
.busca svg { width: 18px; height: 18px; fill: none; stroke: var(--cinza); stroke-width: 2; stroke-linecap: round; flex: none; }
.busca input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: var(--texto); }

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 10px; padding: 2px 16px 4px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; font-size: 14px; font-weight: 600; color: var(--texto);
}
.chip[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.chips.sub { margin-top: -4px; }
.chips.sub .chip { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; }
.chips.sub .chip[aria-pressed="true"] { background: #FCE4EE; border-color: var(--magenta); color: var(--magenta); }
.linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.linha-topo .contador { margin: 0; }
.ordenar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cinza); }
.ordenar select { height: 32px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); font: inherit; font-size: 13px; }

/* ---------- Grade de produtos ---------- */
main { max-width: 960px; margin: 0 auto; padding: 14px 16px; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grade { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid #F6E6ED;
}
.card .foto { aspect-ratio: 1; display: block; width: 100%; border: 0; padding: 0; background: var(--rosa-claro); }
.card .foto svg, .card .foto img, .detalhe .foto svg, .detalhe .foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card .info-prod { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .nome { font-size: 14px; line-height: 1.25; margin: 0; font-weight: 600; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .linha-preco { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.preco { font-weight: 800; font-size: 16px; color: var(--preto); }
.esgotado .foto { filter: grayscale(.7); opacity: .6; }
.selo {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 999px; background: rgba(20,16,20,.78); color: #fff;
}

.btn-add {
  width: 36px; height: 36px; border-radius: 50%; border: 0; flex: none;
  background: var(--magenta); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.btn-add:disabled { background: #E7D6DE; }
.stepper { display: inline-flex; align-items: center; background: var(--rosa-claro); border-radius: 999px; height: 36px; }
.stepper button { width: 34px; height: 36px; border: 0; background: none; font-size: 20px; font-weight: 700; color: var(--magenta); }
.stepper button:disabled { color: #D9C3CD; }
.stepper span { min-width: 18px; text-align: center; font-weight: 700; font-size: 15px; }

.vazio { text-align: center; color: var(--cinza); padding: 40px 0; }
.contador { margin: 0 0 10px; font-size: 13px; color: var(--cinza); }
.mais-produtos { display: block; margin: 18px auto 0; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--linha); background: #fff; font-weight: 700; color: var(--magenta); }
.preco small { font-size: 11px; font-weight: 600; color: var(--cinza); }
.selo-op { background: rgba(224, 21, 125, .9); }
.btn-add.com-qtd { font-size: 15px; font-weight: 800; }

/* escolha de cor/tom no detalhe */
.rotulo-op { margin: 8px 0 8px; font-size: 13px; color: var(--cinza); }
.rotulo-op b { color: var(--texto); }
.variacoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; max-height: 210px; overflow-y: auto; }
.var {
  min-height: 38px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--linha);
  background: #fff; font-size: 13.5px; font-weight: 600; text-align: left; display: inline-flex; align-items: center; gap: 6px;
}
.var.ativa { border-color: var(--magenta); background: var(--rosa-claro); color: var(--magenta); }
.var:disabled { opacity: .45; text-decoration: line-through; }
.var-q { background: var(--magenta); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; display: inline-grid; place-items: center; }
.card .foto img, .detalhe .foto img { object-fit: contain; background: #fff; }
.sprite { display: block; width: 100%; height: 100%; background-color: #fff; background-repeat: no-repeat; }

/* ---------- Barra do carrinho ---------- */
.barra-carrinho {
  position: fixed; z-index: 20; left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 18px; border: 0; border-radius: 18px;
  background: var(--preto); color: #fff; font-size: 16px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(20,16,20,.3);
  animation: sobe .25s ease-out;
}
.barra-carrinho strong { margin-left: auto; }
.qtd-badge { background: var(--magenta); border-radius: 999px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; font-size: 14px; }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } }

/* ---------- Folha (carrinho / checkout) ---------- */
.fundo { position: fixed; inset: 0; z-index: 30; background: rgba(20,16,20,.42); animation: aparece .2s; }
@keyframes aparece { from { opacity: 0; } }
.folha {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  max-width: 600px; margin: 0 auto; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  animation: sobeFolha .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sobeFolha { from { transform: translateY(100%); } }
.alca { width: 40px; height: 5px; border-radius: 3px; background: #E8D5DE; margin: 0 auto 6px; }
.folha-topo { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; position: sticky; top: -8px; background: #fff; z-index: 1; }
.folha-topo h2 { margin: 0; font-size: 20px; flex: 1; }
.fechar, .voltar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--rosa-claro); font-size: 16px; }
.voltar { font-size: 26px; line-height: 1; padding-bottom: 3px; }

.lista-carrinho { list-style: none; margin: 0; padding: 0; }
.lista-carrinho li { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-carrinho .mini { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--rosa-claro); }
.lista-carrinho .mini svg, .lista-carrinho .mini img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lista-carrinho .n { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.25; }
.lista-carrinho .p { font-size: 13px; color: var(--cinza); margin: 0; }
.lista-carrinho .dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.resumo { margin: 14px 0; display: grid; gap: 6px; font-size: 15px; }
.resumo > div { display: flex; justify-content: space-between; }
.resumo .total { font-size: 18px; padding-top: 8px; border-top: 1px dashed var(--linha); }
.resumo .total strong { color: var(--magenta); }

.btn-primario, .btn-whats, .btn-secundario {
  width: 100%; height: 54px; border-radius: 16px; border: 0; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
}
.btn-primario { background: var(--magenta); color: #fff; }
.btn-primario:active { background: var(--magenta-escuro); }
.btn-whats { background: #25D366; color: #fff; margin-top: 4px; }
.btn-whats svg { width: 22px; height: 22px; fill: #fff; }
.btn-secundario { background: var(--rosa-claro); color: var(--magenta); margin-bottom: 10px; }

/* ---------- Formulário ---------- */
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
legend { font-weight: 800; font-size: 15px; margin-bottom: 10px; padding: 0; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cinza); margin-bottom: 10px; }
.campo input, .campo textarea {
  width: 100%; border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; background: #fff; color: var(--texto);
  outline: none; resize: vertical;
}
.campo input:focus, .campo textarea:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(224,21,125,.12); }
.campo input.invalido { border-color: #D12B4B; }
.erro { color: #D12B4B; font-weight: 600; }
.aviso {
  display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--cinza);
  background: var(--rosa-claro); padding: 10px 12px; border-radius: 12px; margin: 2px 0 0;
}
.aviso::before { content: "🔒"; }
.dica { font-size: 12.5px; color: var(--cinza); margin: 8px 0 0; }

.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; flex-wrap: wrap;
  min-height: 52px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--linha);
  font-weight: 700; font-size: 15px; background: #fff;
}
.opcao span em { font-style: normal; font-size: 11px; background: var(--verde); color: #fff; padding: 2px 6px; border-radius: 6px; }
.opcao span em:empty { display: none; }
.opcao input:checked + span { border-color: var(--magenta); background: var(--rosa-claro); color: var(--magenta); }
.opcao input:focus-visible + span { box-shadow: 0 0 0 3px rgba(224,21,125,.25); }
fieldset.faltando .opcao span { border-color: #E7A1B3; }

.info { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--rosa-fundo); border: 1px solid var(--linha); font-size: 13.5px; line-height: 1.45; }
.info p { margin: 0; }
.horarios { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; }
.horarios li { display: flex; justify-content: space-between; }
.horarios li.hoje { font-weight: 800; color: var(--magenta); }

/* ---------- Enviado ---------- */
.enviado { text-align: center; padding: 18px 4px 4px; }
.enviado .ok { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; background: #25D366; color: #fff; font-size: 34px; display: grid; place-items: center; }
.enviado h2 { margin: 0 0 6px; }
.enviado p { color: var(--cinza); margin: 0 0 14px; line-height: 1.45; }
.enviado .btn-whats { margin-bottom: 10px; }

/* ---------- Detalhe do produto ---------- */
.detalhe {
  border: 0; padding: 0; border-radius: 22px; width: min(92vw, 440px); max-height: 90dvh;
  overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.detalhe::backdrop { background: rgba(20,16,20,.45); }
.detalhe .foto { aspect-ratio: 1; position: relative; background: var(--rosa-claro); }
.detalhe .fechar { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.9); }
.detalhe .corpo { padding: 16px 18px 18px; }
.detalhe .cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.detalhe h3 { margin: 4px 0 6px; font-size: 20px; }
.detalhe .desc { color: var(--cinza); margin: 0 0 6px; line-height: 1.45; font-size: 14.5px; }
.detalhe .sku { font-size: 12px; color: #A895A0; margin: 0 0 14px; }
.detalhe .acoes { display: flex; align-items: center; gap: 12px; }
.detalhe .acoes .preco { font-size: 22px; }
.detalhe .acoes .btn-primario { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom));
  background: var(--preto); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: aparece .2s;
  max-width: calc(100vw - 32px);
}

/* ---------- Preços: de/por, Pix, parcelas, faixa de desconto ---------- */
.card .de, .precos-det .de { font-size: 12px; color: var(--cinza); }
.card .de { margin-bottom: -4px; }
.card .formas-card { display: flex; flex-direction: column; gap: 1px; margin-top: -2px; }
.pix { font-size: 12px; color: var(--verde); font-weight: 700; }
.parc { font-size: 12px; color: var(--cinza); }
.faixa { position: absolute; top: 0; right: 0; width: 86px; height: 86px; overflow: hidden; pointer-events: none; z-index: 1; }
.faixa span {
  position: absolute; top: 17px; right: -30px; width: 130px; transform: rotate(45deg);
  background: var(--magenta); color: #fff; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 0; box-shadow: 0 2px 6px rgba(184, 15, 101, .35);
}
.precos-det { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.precos-det .de { width: 100%; }
.precos-det .preco { font-size: 24px; }
.precos-det .pct { background: var(--magenta); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.formas { font-size: 13px; color: var(--cinza); margin: 6px 0 0; line-height: 1.45; }
.formas b { color: var(--verde); }

/* ---------- Página inicial ---------- */
.vantagens { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vantagens li, .vantagens button {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  font-size: 11.5px; line-height: 1.25; color: var(--cinza);
}
.vantagens li { background: #fff; border: 1px solid #F6E6ED; border-radius: 14px; padding: 10px 6px; }
.vantagens button { border: 0; background: none; padding: 0; width: 100%; }
.vantagens svg { width: 26px; height: 26px; color: var(--magenta); }
.vantagens b { display: block; font-size: 13px; color: var(--preto); }

.secao { margin-bottom: 22px; }
.secao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.secao-topo h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--preto); }
.secao-topo p { margin: 2px 0 0; font-size: 13px; color: var(--cinza); }
.secao-todos { margin: 6px 0 12px; }
.setas { display: none; gap: 6px; }
.setas button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; font-size: 20px; line-height: 1; color: var(--magenta); }
@media (hover: hover) and (min-width: 640px) { .setas { display: flex; } }

.circulos { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.circulos::-webkit-scrollbar { display: none; }
.circulo {
  flex: none; width: 74px; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--texto); line-height: 1.2; text-align: center;
}
.circulo .bola {
  width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 2px var(--rosa), 0 0 0 4px #fff, 0 4px 12px rgba(224,21,125,.12); margin-top: 4px;
}
.circulo .bola img, .circulo .bola .sprite, .circulo .bola svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px 6px; scroll-padding: 16px;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
@media (min-width: 640px) { .trilho { grid-auto-columns: 190px; } }

/* Vídeos "Na pele" */
.trilho-videos { grid-auto-columns: 200px; }
.video-card { background: #fff; border-radius: var(--raio); overflow: hidden; border: 1px solid #F6E6ED; display: flex; flex-direction: column; }
.video-box { position: relative; aspect-ratio: 4 / 5; background: var(--rosa-claro); cursor: pointer; }
.video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tit {
  position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.92); color: var(--magenta);
  font-size: 11.5px; font-weight: 800; padding: 4px 8px; border-radius: 999px;
}
.video-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(20,16,20,.45); display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .2s;
}
.video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-box.pausado .video-play { opacity: 1; }
.video-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.video-info .nome { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preco-v { margin: 0 0 4px; font-size: 15px; }
.preco-v s { font-size: 12px; color: var(--cinza); }
.btn-ver { margin-top: auto; height: 38px; border-radius: 12px; border: 0; background: var(--magenta); color: #fff; font-weight: 700; font-size: 14px; }
.ver-insta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--magenta); text-decoration: none; white-space: nowrap; }
.ver-insta svg { width: 18px; height: 18px; }

/* ---------- Rodapé ---------- */
.rodape { max-width: 960px; margin: 26px auto 0; padding: 0 16px 24px; }
.bloco-insta {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #E0157D, #F06AA0 55%, #F7A15A); box-shadow: 0 8px 22px rgba(224,21,125,.22);
}
.bloco-insta svg { width: 34px; height: 34px; stroke-width: 1.6; }
.bloco-insta > span { display: flex; flex-direction: column; font-size: 14px; }
.bloco-insta b { font-size: 15.5px; }
.rodape-loja { text-align: center; font-size: 13px; color: var(--cinza); line-height: 1.5; margin-top: 16px; }
.rodape-loja p { margin: 0 0 4px; }
.rodape-links { display: flex; justify-content: center; gap: 18px; margin-top: 8px !important; }
.rodape-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--magenta); font-weight: 700; text-decoration: none; }
.rodape-links svg { width: 18px; height: 18px; }

/* ---------- Menu lateral ---------- */
.gaveta {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(84vw, 340px);
  background: #FFF0F5; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(14px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
  border-radius: 0 26px 26px 0; box-shadow: 10px 0 40px rgba(20,16,20,.18);
  animation: entraEsq .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes entraEsq { from { transform: translateX(-100%); } }
#fundoMenu { z-index: 39; }
.gaveta-topo { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px 18px; }
.gaveta-topo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gaveta-topo b { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.gaveta .fechar { background: #fff; flex: none; }
.g-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 12px 22px; font-size: 18px; font-weight: 600; color: var(--magenta);
}
.g-item:active, .g-subs button:active, .g-link:active { background: rgba(224,21,125,.08); }
.g-cat .g-item svg { margin-left: auto; width: 20px; height: 20px; transition: transform .2s; }
.g-item[aria-expanded="true"] svg { transform: rotate(90deg); }
.g-sacola { font-size: 15px; color: var(--texto); margin-bottom: 4px; }
.g-sacola svg { color: var(--magenta); }
.g-sacola .badge { position: static; margin-left: 2px; box-shadow: none; }
.g-destaque::after { content: "%"; margin-left: 2px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.g-lista { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 6px 0; }
.g-subs { padding: 0 0 8px 22px; display: grid; }
.g-subs button { border: 0; background: none; text-align: left; padding: 9px 16px; font-size: 15px; color: var(--texto); border-left: 2px solid var(--rosa); }
.g-subs button:first-child { font-weight: 700; color: var(--magenta); }
.g-rodape { padding: 10px 0 0; display: grid; }
.g-link { display: flex; align-items: center; gap: 10px; padding: 11px 22px; border: 0; background: none; text-align: left; font-size: 15px; color: var(--texto); text-decoration: none; }
.g-link svg { width: 20px; height: 20px; color: var(--magenta); }

/* ---------- Painel da loja ---------- */
.painel {
  border: 0; padding: 0 0 env(safe-area-inset-bottom); margin: auto auto 0; width: 100%; max-width: 520px; max-height: 92dvh;
  border-radius: 22px 22px 0 0; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.2);
}
@media (min-width: 640px) { .painel { margin: auto; border-radius: 22px; } }
.painel[open] { animation: sobeFolha .28s cubic-bezier(.2,.8,.2,1); }
.painel::backdrop { background: rgba(20,16,20,.45); }
.painel-topo { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; background: linear-gradient(180deg, var(--rosa-claro), #fff); }
.painel-topo .logo { width: 58px; height: 58px; }
.painel-topo > div { flex: 1; min-width: 0; }
.painel-topo h2 { margin: 0; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.painel-bloco { display: flex; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linha); font-size: 14px; line-height: 1.45; }
.painel-bloco > svg { color: var(--magenta); margin-top: 1px; }
.painel-bloco > div { flex: 1; }
.painel-bloco p { margin: 2px 0 0; }
.painel-bloco .horarios { margin-top: 6px; }
.painel-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 18px 18px; }
.pb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px;
  border-radius: 16px; text-decoration: none; font-size: 13px; font-weight: 700; color: #fff;
}
.pb-mapa { background: var(--preto); }
.pb-whats { background: #25D366; }
.pb-insta { background: linear-gradient(135deg, #E0157D, #F7A15A); }

/* ---------- Galeria no detalhe ---------- */
.detalhe .foto { overflow: hidden; background: #fff; }
.slides { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; background: #fff; }
.slide > img, .slide > .sprite, .slide > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.slide .ph { position: absolute; inset: 0; }
.slide .ph img, .slide .ph .sprite, .slide .ph svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pontos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(20,16,20,.22); transition: all .2s; }
.pontos span.ativo { background: var(--magenta); width: 18px; border-radius: 4px; }
.detalhe .fechar { z-index: 2; }
.detalhe .faixa { right: auto; left: 0; }
.detalhe .faixa span { right: auto; left: -30px; transform: rotate(-45deg); }
.fechar:focus:not(:focus-visible) { outline: none; }

/* ---------- Carrinho: esvaziar ---------- */
.esvaziar { display: block; margin: 10px 0 0 auto; border: 0; background: none; color: var(--cinza); font-size: 13px; font-weight: 600; text-decoration: underline; padding: 6px 0; }
.esvaziar.confirmar { color: #D12B4B; text-decoration: none; font-weight: 800; }
.resumo .formas { margin: 2px 0 0; text-align: right; }
.opcao span em.em-cartao { background: var(--preto); }

/* ---------- "Falta pouco" para a próxima faixa de parcelas ---------- */
.falta { margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--rosa-claro); border: 1px solid #F6D3E1; }
.falta p { margin: 0; font-size: 14px; line-height: 1.35; }
.falta b { color: var(--magenta-escuro); }
.falta.ok { background: #EAF7EF; border-color: #CDEBD8; }
.falta.ok b { color: var(--verde); }
.falta-barra { height: 8px; border-radius: 99px; background: #fff; margin-top: 9px; overflow: hidden; }
.falta-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rosa), var(--magenta)); transition: width .35s; }
.falta-sug { margin: 12px 0 8px !important; font-weight: 800; font-size: 14px; }
.trilho-falta { margin: 0 -14px; padding: 2px 14px 4px; scroll-padding: 14px; grid-auto-columns: 148px; }
.trilho-falta .card { background: #fff; }
#faltaCheckout .falta { margin-top: 10px; }
#passoCarrinho #irCheckout { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin-top: 12px; box-shadow: 0 -10px 16px 4px #fff; z-index: 2; }

/* ============================================================
   Layout novo (13/11/2026): barra de categorias, cartões, tom
   ============================================================ */
/* Barra de categorias no topo */
.barra-cats {
  display: flex; align-items: center; gap: 4px; max-width: 960px; margin: 8px auto 0;
  overflow-x: auto; scrollbar-width: none; padding: 2px 2px 0;
}
.barra-cats::-webkit-scrollbar { display: none; }
.bc {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px;
  border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 700; color: var(--texto); white-space: nowrap;
}
.bc svg { width: 21px; height: 21px; fill: none; stroke: var(--magenta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bc[aria-current="true"] { background: var(--rosa-claro); color: var(--magenta); }
.bc:active { background: var(--rosa-claro); }

/* Botão "descubra seu tom" */
.btn-tom {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--magenta), #F0609E); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(224, 21, 125, .28);
}
.btn-tom svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn-tom:active { transform: scale(.97); }
.tom-det {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--rosa-claro); font-size: 13.5px; font-weight: 600;
}

/* Vantagens: 4 itens */
.vantagens { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .vantagens { grid-template-columns: repeat(4, 1fr); } }
.vantagens li { flex-direction: row; text-align: left; padding: 10px 12px; gap: 10px; }
.vantagens button { flex-direction: row; text-align: left; gap: 10px; }
.vantagens svg { width: 28px; height: 28px; }

/* "navegue pelas principais categorias" */
.titulo-duplo { margin: 4px 0 14px; text-align: center; font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--magenta); letter-spacing: -.01em; }
.titulo-duplo span { display: block; font-size: 19px; font-weight: 500; color: var(--texto); }
.trilho-cats { grid-auto-columns: 150px; gap: 12px; padding-bottom: 8px; }
@media (min-width: 640px) { .trilho-cats { grid-auto-columns: 180px; } }
.cartao-cat {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 0; background: none; padding: 0; color: var(--texto);
}
.cc-foto { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--rosa); box-shadow: 0 8px 18px rgba(184, 15, 101, .18); }
.cc-foto img, .cc-foto .sprite { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-prod { display: block; height: 104px; width: 100px; margin-top: -78px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(20, 16, 20, .25)); }
.cc-prod .sprite { background-color: transparent; }
@media (min-width: 640px) { .cc-prod { height: 124px; width: 120px; margin-top: -92px; } }
.cartao-cat:not(:has(.cc-prod)) .cc-foto { margin-bottom: 10px; }
.cartao-cat b { margin-top: 6px; font-size: 19px; font-weight: 800; color: var(--magenta); line-height: 1.1; }
.cartao-cat small { margin-top: 3px; font-size: 12.5px; color: var(--cinza); line-height: 1.3; }
.cartao-cat:active .cc-foto { transform: scale(.98); }

/* Voltar ao início (em categoria/busca) */
.voltar-inicio {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; margin: 0 0 10px;
  border: 1px solid var(--linha); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--magenta);
}
.voltar-inicio svg, .det-inicio svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.det-inicio {
  position: absolute; z-index: 2; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 2px;
  height: 36px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 13.5px; font-weight: 700; color: var(--magenta);
}
.link-inicio { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--magenta); }

/* Descrição no detalhe */
.desc-det { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); }
.desc-det h4 { margin: 0 0 6px; font-size: 16px; color: var(--magenta); }
.desc-det p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--texto); }

/* Checkout: dados, nascimento e aviso LGPD */
.campo .para { font-weight: 500; color: #A895A0; }
.campo input:disabled { background: #F6EEF2; color: #B8A8B0; }
.marcar { display: flex; gap: 10px; align-items: flex-start; margin: -2px 0 12px; font-size: 13.5px; color: var(--texto); line-height: 1.35; cursor: pointer; }
.marcar input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--magenta); }
.aviso-lgpd { display: block; font-size: 12.5px; }
.aviso-lgpd::before { content: none; }
.aviso-lgpd > b:first-child::before { content: "🔒 "; }
.aviso-lgpd p { margin: 6px 0 0; }

/* As categorias agora ficam na barra do topo; aqui só as subcategorias */
#categorias { display: none; }
.detalhe .foto .det-inicio svg { width: 18px; height: 18px; }

/* Bloco "descubra seu tom" (página inicial, abaixo das categorias) */
.bloco-tom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(120deg, #fff 0%, var(--rosa-claro) 100%); border: 1px solid #F6D3E1;
  box-shadow: 0 8px 20px rgba(224, 21, 125, .08);
}
.bt-txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; }
.bt-txt b { font-size: 17px; color: var(--magenta); }
.bt-txt span { font-size: 13.5px; color: var(--cinza); line-height: 1.35; }
.bloco-tom .btn-tom { height: 44px; padding: 0 20px; font-size: 15px; }
.bloco-tom .btn-tom svg { animation: brilha 2.4s ease-in-out infinite; }
@keyframes brilha { 50% { transform: scale(1.18) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .bloco-tom .btn-tom svg { animation: none; } }