/* Cabeçalho e animações partilhados (index.html e loja.html) */

/* ── Cabeçalho ── */
.nav { transition: box-shadow 0.3s ease, background 0.3s ease; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(22,14,7,0.28); }
.nav-links { gap: 2.4rem; }
.nav-links > li > a { padding: 0.4rem 0; }
.nav-submenu ul { box-shadow: 0 14px 32px rgba(22,14,7,0.35); border-radius: 2px; }
.nav-submenu a { font-size: 0.72rem !important; }
.nav-dropdown:hover > a, .nav-dropdown:focus-within > a { color: var(--terra-light); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-actions .lang-toggle { margin-left: 0; }
.nav-burger { background: none; border: none; }

/* Ícone do carrinho (criado por js/loja.js) */
.nav-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 4px; cursor: pointer; color: var(--cream-200);
  transition: color 0.2s;
}
.nav-cart-btn:hover { color: var(--terra-light); }
.nav-cart-btn svg { width: 22px; height: 22px; }
.nav-cart-btn .cart-count {
  position: absolute; top: -5px; right: -9px; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  background: var(--terra); color: var(--cream-100); border-radius: 999px;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center;
}
.nav-cart-btn .cart-count[data-zero] { display: none; }

/* Menu do telemóvel agrupado */
.mobile-menu { gap: 0.1rem !important; max-height: calc(100vh - 68px); overflow-y: auto; }
.mobile-menu .mobile-group {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terra-light); margin: 1rem 0 0.2rem;
}
.mobile-menu .mobile-group:first-child { margin-top: 0; }
.mobile-menu a { padding: 0.55rem 0 0.55rem 0.9rem !important; border-bottom: 1px solid rgba(196,168,130,0.08) !important; }
.mobile-menu a.mobile-single { padding-left: 0 !important; margin-top: 1rem; border-bottom: none !important; font-weight: 500; }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
}

/* ── Aparecer ao fazer scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Imagens aparecem suavemente quando acabam de carregar ── */
img.lazy-img { opacity: 0; transition: opacity 0.7s ease; }
img.lazy-img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, img.lazy-img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Nome no topo da página inicial, com a letra do logótipo (desenho em quatro-belhas-nome.svg) ── */
.hero-wordmark {
  display: block;
  width: clamp(280px, 31vw, 460px);
  aspect-ratio: 255.64 / 38.75;
  margin: 0 auto;
  background-color: var(--cream-100);
  -webkit-mask: url("../quatro-belhas-nome.svg") center / contain no-repeat;
          mask: url("../quatro-belhas-nome.svg") center / contain no-repeat;
}
@media (max-width: 900px) {
  .hero-wordmark { width: clamp(240px, 78vw, 380px); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Nome "Quatro Belhas" com a letra do logótipo no cabeçalho e no rodapé ── */
.logo-nome {
  display: block;
  aspect-ratio: 255.64 / 38.75;
  background-color: currentColor;
  -webkit-mask: url("../quatro-belhas-nome.svg") left center / contain no-repeat;
          mask: url("../quatro-belhas-nome.svg") left center / contain no-repeat;
}
.nav-logo-name.logo-nome { height: 21px; margin-bottom: 3px; }
.footer-logo-name.logo-nome { height: 19px; margin-bottom: 3px; }