/* ============================================================
   Amora Variedades — experiência mobile
   Carregado por último: ajusta e sobrepõe o que for preciso.
   ============================================================ */

/* ---------- botão do menu (só aparece no mobile) ---------- */
.menu-btn {
  display: none; flex: none; width: 46px; height: 46px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--linha); cursor: pointer;
  align-items: center; justify-content: center; color: var(--principal-escuro);
  transition: border-color .2s, transform .2s;
}
.menu-btn .icon { width: 22px; height: 22px; }
.menu-btn:hover { border-color: var(--principal); }
.menu-btn:active { transform: scale(.94); }

/* ---------- painel do menu mobile ---------- */
.menu-overlay {
  position: fixed; inset: 0; background: rgba(54, 45, 37, .5); z-index: 110;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.menu-overlay.aberto { opacity: 1; visibility: visible; }
.menu-mobile {
  position: fixed; top: 0; left: 0; height: 100%; width: min(300px, 84%); z-index: 120;
  background: var(--bg); box-shadow: 20px 0 60px rgba(54, 45, 37, .25);
  transform: translateX(-100%); transition: transform .32s cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; padding: 20px 16px; overflow-y: auto;
}
.menu-mobile.aberto { transform: none; }
.menu-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 14px; border-bottom: 1px solid var(--linha); margin-bottom: 12px; }
.menu-titulo { font-family: var(--titulo); font-size: 1.25rem; color: var(--principal-escuro); font-weight: 700; }
.menu-topo .fechar { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--texto-suave); padding: 0 4px; }
.menu-mobile a {
  display: flex; align-items: center; gap: 12px; padding: 15px 12px; border-radius: 12px;
  text-decoration: none; color: var(--texto); font-weight: 700; font-size: 1.02rem;
  transition: background .2s, color .2s, transform .2s;
}
.menu-mobile a .icon { width: 20px; height: 20px; color: var(--acento); transition: transform .25s; }
.menu-mobile a:hover, .menu-mobile a:active { background: var(--surface-2); color: var(--acento); }
.menu-mobile a:hover .icon { transform: scale(1.15); }
.menu-mobile .menu-whats { margin-top: auto; background: var(--principal); color: #fff; justify-content: center; }
.menu-mobile .menu-whats .icon { color: #fff; }
.menu-mobile .menu-whats:hover { background: var(--principal-escuro); color: #fff; }

/* ============================================================
   ≤ 980px — header compacto com menu
   ============================================================ */
@media (max-width: 980px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; order: 1; }
  .header-in { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .logo { order: 2; margin-right: auto; }
  .acoes-header { order: 3; margin-left: 0; }
  .busca { order: 4; width: 100%; margin-left: 0; }
  .busca input { width: 100%; max-width: none; }

  /* offsets do header mais alto */
  .sidebar { top: 12px; }
  .galeria { position: static; }
  .ajuda-artigo { scroll-margin-top: 150px; }
}

/* ============================================================
   ≤ 860px — layout geral
   ============================================================ */
@media (max-width: 860px) {
  .container { width: min(1180px, 94%); }
  section { padding: 52px 0; }
  .hero { padding: 34px 0 56px; }
  .hero-arte { max-width: 330px; }
  .hero-selo { width: 88px; height: 88px; }
  .hero-selo .miolo .icon { width: 20px; height: 20px; }
  .hero-selo svg text { font-size: 13px; }
  .selos { gap: 12px; }
  .beneficios-wrap { margin-top: -34px; }

  /* catálogo */
  .catalogo { padding: 22px 0 52px; }
  .catalogo-topo { flex-direction: column; align-items: stretch; gap: 12px; }
  .filtro-mobile { width: 100%; justify-content: center; padding: 13px 20px; }
  .ordenar { width: 100%; justify-content: space-between; }
  .catalogo-barra { gap: 10px; }
  .sidebar { padding: 74px 20px 30px; }
  .sidebar-head { position: absolute; top: 18px; left: 20px; right: 20px; }

  /* detalhe */
  .detalhe { gap: 24px; }
  .galeria-principal { min-height: 0; }
  .qtd-add .btn { min-width: 0; flex: 1 1 100%; }
  .thumb { width: 62px; height: 62px; }
  .relacionados { margin-top: 44px; }
}

/* ============================================================
   HERO MOBILE — foto retangular de ponta a ponta, texto por cima
   ============================================================ */
@media (max-width: 860px) {
  .hero {
    position: relative; padding: 0; overflow: hidden;
    min-height: 78vh; min-height: 78svh;
    display: flex; align-items: flex-end;
  }
  .hero::before, .hero::after { display: none; }           /* tira os blobs */
  .hero .container { position: static; width: 100%; display: block; padding: 0; }

  /* a foto vira o fundo, cobrindo tudo */
  .hero-arte {
    position: absolute; inset: 0; z-index: 0;
    max-width: none; margin: 0; aspect-ratio: auto; order: 0;
    opacity: 1 !important; transform: none !important;      /* aparece na hora */
  }
  .hero-foto {
    position: absolute; inset: 0; border-radius: 0; box-shadow: none;
    background: var(--surface-2);
  }
  .hero-slide { border-radius: 0; object-position: center; }
  .hero-selo { display: none; }                             /* selo giratório sai daqui */

  /* véu escuro pra leitura do texto */
  .hero-arte::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top,
      rgba(38, 30, 24, .92) 0%, rgba(38, 30, 24, .72) 34%,
      rgba(38, 30, 24, .34) 62%, rgba(38, 30, 24, .10) 100%);
  }
  .hero-dots { top: 18px; bottom: auto; left: auto; right: 18px; transform: none; z-index: 4; }

  /* texto por cima da imagem */
  .hero-texto { position: relative; z-index: 3; padding: 90px 6% 40px; color: #fff; }
  .hero-texto .eyebrow { color: var(--acento-claro); }
  .hero-texto h1 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .45); margin-bottom: 14px; }
  .hero-texto p.sub { color: rgba(255, 255, 255, .92); max-width: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); margin-bottom: 22px; }

  /* selos viram "chips" de vidro sobre a foto */
  .selos { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .selo {
    font-size: .78rem; color: #fff; margin: 0;
    background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 6px 13px 6px 6px; border-radius: 999px;
  }
  .selo .ic { width: 26px; height: 26px; background: rgba(255, 255, 255, .24); color: #fff; }
  .selo .ic .icon { width: 14px; height: 14px; }
  .selo:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: none; }
  .selo:hover .ic { background: var(--acento); transform: none; }

  /* a barra de benefícios não sobrepõe mais o texto */
  .beneficios-wrap { margin-top: 20px; }
}

/* ============================================================
   ≤ 620px — celular
   ============================================================ */
@media (max-width: 620px) {
  .logo img { height: 62px; }
  .site-footer .logo img { height: 86px; }

  section { padding: 44px 0; }
  .sec-head { margin-bottom: 20px; }
  .hero h1 { line-height: 1.15; }
  .hero p.sub { font-size: 1.02rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }

  /* benefícios: ícone à esquerda, textos à direita */
  .beneficios { grid-template-columns: 1fr; gap: 4px; padding: 14px 12px; }
  .beneficio {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "ic titulo" "ic sub";
    align-items: center; column-gap: 14px; row-gap: 2px; text-align: left; padding: 12px 10px;
  }
  .beneficio .ic { grid-area: ic; width: 46px; height: 46px; }
  .beneficio h4 { grid-area: titulo; }
  .beneficio > span:not(.ic) { grid-area: sub; }
  .beneficio + .beneficio::before { display: none; }

  /* catálogo em 2 colunas — melhor pra navegar no celular */
  .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .produto-corpo { padding: 12px 12px 14px; }
  .produto-corpo .cat { font-size: .66rem; margin-bottom: 2px; }
  .produto-corpo h3 { font-size: .94rem; margin-bottom: 6px; }
  .produto-corpo .preco { font-size: 1.08rem; margin: 0 0 10px; }
  .produto-corpo .add { padding: 10px 8px; font-size: .8rem; gap: 6px; }
  .produto-corpo .add .icon { width: 14px; height: 14px; }
  .card-tags { top: 8px; left: 8px; gap: 4px; }
  .tag-destaque, .tag-vendido, .tag-esgotado { font-size: .6rem; padding: 3px 7px; }
  .fav-btn { width: 32px; height: 32px; top: 8px; right: 8px; }
  .fav-btn .icon { width: 16px; height: 16px; }

  /* passos / feedbacks / faq */
  .passo { padding: 26px 20px; }
  .passo-num { font-size: 2rem; top: 14px; right: 16px; }
  .fb-card { padding: 22px 20px; }
  .faq-lista summary { font-size: .96rem; padding: 14px 0; }
  .cta-band .lado { padding: 34px 24px; }
  .cta-band .cita .lado { padding-top: 10px; }

  /* detalhe */
  .detalhe-info h1 { font-size: 1.55rem; }
  .preco-grande { font-size: 1.7rem; }
  .detalhe-info .desc { font-size: .96rem; }
  .breadcrumb { font-size: .8rem; }

  /* rodapé centralizado */
  .footer-grid { text-align: center; gap: 26px; }
  .fcol-marca .logo { display: inline-flex; }
  .fcol-sobre { margin-left: auto; margin-right: auto; }
  .fcontato { justify-content: center; }
  .fcol a:hover { transform: none; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-pay { justify-content: center; }

  /* ajuda */
  .ajuda-indice a { width: 100%; justify-content: center; }
  .ajuda-cta { padding: 34px 22px; }
}

/* ============================================================
   ≤ 420px — telas bem pequenas
   ============================================================ */
@media (max-width: 420px) {
  .logo img { height: 56px; }
  .produtos-grid { gap: 10px; }
  .produto-corpo h3 { font-size: .88rem; }
  .produto-corpo .add { font-size: .74rem; }
  .drawer { width: 100%; }
  .cupom-box { flex-direction: column; }
  .cupom-box .btn { width: 100%; }
  .hero { min-height: 74vh; min-height: 74svh; }
  .hero-texto { padding: 80px 6% 34px; }
}

/* ============================================================
   Toque: alvos maiores e sem "hover grudado"
   ============================================================ */
@media (hover: none) {
  .produto-card:hover { transform: none; }
  .passo:hover, .fb-card:hover, .beneficio:hover { transform: none; }
  .faq-lista details:hover { transform: none; }
  .colecoes li, .cat-todas, .cat-row, .subcats li { padding-top: 12px; padding-bottom: 12px; }
  .dd-menu li { padding-top: 13px; padding-bottom: 13px; }
}