/* Ding House · estilos base do site */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #FAF8F4; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #2F2C28; -webkit-tap-highlight-color: rgba(78, 90, 61, 0.15); }
a:hover { color: #4E5A3D; }
img, video { max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #4E5A3D; outline-offset: 3px; }
footer a:focus-visible, .dark a:focus-visible { outline-color: #FAF8F4; }
[id] { scroll-margin-top: 16px; }

/* Botões que já estão escuros mantêm a cor do texto no hover */
a.btn-solid:hover { color: #FAF8F4; opacity: 0.92; }
a.btn-light:hover { color: #2F2C28; opacity: 0.92; }
footer a:hover { color: #FAF8F4; }

/* Perguntas frequentes (sem JavaScript) */
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 16px; font-weight: 600; color: #2F2C28; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .sign { flex: none; font-size: 22px; font-weight: 400; line-height: 1; color: #4E5A3D; }
.faq .sign::after { content: "+"; }
.faq details[open] .sign::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; color: #4A443D; max-width: 40em; }

/* Tabela com rolagem lateral */
.scroll-x { -webkit-overflow-scrolling: touch; }
.scroll-hint { display: none; }

/* Barra fixa de compra (só no celular, nas páginas de produto) */
.buybar { display: none; }

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .sec { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ===== Celular ===== */
@media (max-width: 640px) {
  .px { padding-left: 16px !important; padding-right: 16px !important; }
  .sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sec-hero { padding-top: 40px !important; padding-bottom: 56px !important; }
  .stack { gap: 40px !important; }

  /* Cabeçalho compacto: logo em cima, menu numa linha que rola de lado se precisar */
  .topbar { font-size: 11px !important; padding: 8px 16px !important; }
  .hdr { padding-top: 14px !important; padding-bottom: 10px !important; gap: 8px !important; flex-direction: column; align-items: flex-start !important; }
  .hdr .logo { font-size: 26px !important; }
  .nav { gap: 0 18px !important; font-size: 14px !important; }
  .nav a { display: inline-flex; align-items: center; min-height: 40px; }

  .box { padding: 32px 20px !important; }
  .card { padding: 20px !important; }
  .full { align-self: stretch !important; justify-content: center; width: 100%; }
  .cta-col { flex: 1 1 100% !important; }
  .lead { font-size: 17px !important; }
  .scroll-hint { display: block; font-size: 13px; color: #6A6258; margin: 0; }

  /* Galeria do produto */
  .thumbs { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .thumbs::-webkit-scrollbar { display: none; }
  .thumb { flex: none; width: 68px !important; height: 85px !important; }
  .size-btn { flex: 1 1 0; min-width: 0 !important; }

  /* Vídeo das funções: centralizado no celular */
  .video-box { flex: 0 0 auto !important; width: min(240px, 70vw); margin: 0 auto; }

  /* Rodapé em coluna */
  .foot-cols { gap: 28px 40px !important; }
  .foot-cols a { min-height: 32px; display: inline-flex; align-items: center; }

  /* Barra fixa de compra */
  .buybar { display: flex; font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 248, 244, 0.97); border-top: 1px solid #E3DACB; box-shadow: 0 -4px 16px rgba(47, 44, 40, 0.06); transform: translateY(0); transition: transform 0.2s ease; }
  .buybar.is-hidden { transform: translateY(110%); }
  .buybar a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; font-family: inherit; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 2px; }
  .has-buybar { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .buybar { transition: none; }
}