/* ═══════════════════════════════════════════════
   BERGSHED v2 — abertura com a logo + loja direto ao ponto
   Carregar DEPOIS de css/style.css
   Precisa do arquivo images/logo-bs.png
   ═══════════════════════════════════════════════ */

/* ─── ORDEM DA PÁGINA ───────────────────────────
   logo em tela cheia → produtos → marcas → números → vender → contato */
body { display: flex; flex-direction: column; }
.hero            { order: 1; }
#produtos        { order: 2; }
.marquee-section { order: 3; }
#marcas          { order: 4; }
.stats-bar       { order: 5; }
#vender          { order: 6; }
#contato         { order: 7; }
.footer          { order: 8; }

/* ─── MENU DO TOPO: só busca e carrinho, à direita ─── */
.nav-logo { display: none !important; }
.nav-actions { margin-left: auto; }
.nav-menu,
.hamburger,
.mobile-menu { display: none !important; }

/* ─── SEM A FAIXA DOURADA DO TOPO (frete grátis etc.) ─── */
.announcement-bar { display: none !important; }
.navbar { top: 0 !important; }

/* ─── ABERTURA: tela preta com a logo BS ──────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 70px 20px 0;
}
.hero-bg { background: #000 !important; }   /* preto liso */
.hero-bg::before { display: none; }         /* sem o padrão de estrelinhas */

/* esconde o texto antigo do banner */
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-actions { display: none; }

/* a logo (entra pelo CSS, sem mexer no HTML) */
.hero-content { position: relative; }
.hero-content::before {
  content: "";
  display: block;
  width: clamp(110px, 16vw, 170px);
  aspect-ratio: 400 / 572;
  margin: 0 auto;
  background: url("../images/logo-bs.png") center / contain no-repeat;
}

/* brilho: uma faixa de luz passa pela logo, como reflexo no metal */
.hero-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(110px, 16vw, 170px);
  aspect-ratio: 400 / 572;
  pointer-events: none;
  -webkit-mask: url("../images/logo-bs.png") center / contain no-repeat;
          mask: url("../images/logo-bs.png") center / contain no-repeat;
  background: linear-gradient(105deg,
    transparent 0%, transparent 40%,
    rgba(255, 250, 235, 0.25) 45%,
    rgba(255, 252, 240, 1) 50%,
    rgba(255, 250, 235, 0.25) 55%,
    transparent 60%, transparent 100%) no-repeat;
  background-size: 300% 100%;
  mix-blend-mode: screen;
  animation: v2-brilho 4s ease-in-out infinite;
}
@keyframes v2-brilho {
  0%   { background-position: 100% 0; }
  55%  { background-position: 0% 0; }   /* a luz atravessa em ~2 s… */
  100% { background-position: 0% 0; }   /* …e espera ~2 s até a próxima */
}
@media (prefers-reduced-motion: reduce) {
  .hero-content::after { animation: none; display: none; }
}

/* ─── COLEÇÃO ─────────────────────────────────── */
#produtos { padding-top: 40px; }
#produtos .section-header { display: none; }
#produtos .filters { margin-bottom: 24px; }
.products-grid { grid-template-columns: repeat(4, 1fr); }

/* cards um pouco mais baixos, para a peça caber inteira na tela */
.product-image-wrap { aspect-ratio: 4 / 5; }      /* antes 3 / 4 */
.product-info  { padding: 12px 16px; }            /* antes 20px */
.product-brand { margin-bottom: 4px; }
.product-name  { margin-bottom: 2px; }
.product-size  { margin-bottom: 6px; }

@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── CELULAR ─────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 70px 16px 0; }
  #produtos { padding: 24px 12px 60px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
}

/* ─── SEÇÃO "VESTUÁRIO" (prévia, no estilo "Novidades") ─── */
.v2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.v2-head::after {               /* traço dourado sob o título */
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 35%;
  height: 1px;
  background: var(--gold);
}
.v2-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  color: var(--white);
  margin: 0 0 10px;
}
.v2-all {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.v2-all:hover { color: var(--gold); }

/* prévia: as 16 primeiras peças até clicar em "Ver todas" */
.products-grid:not(.show-all) > :nth-child(n+17) { display: none; }

@media (max-width: 768px) {
  .v2-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .v2-head::after { width: 50%; }
}

/* ─── MENU "PEÇAS" NO TOPO: painel com Categorias e Marcas ─── */
.v2-nav-esq { display: flex; align-items: center; gap: 40px; }
.v2-nav-esq .v2-menu-btn { white-space: nowrap; }
@media (max-width: 768px) {
  /* celular: as 4 abas menores; se não couberem, deslizam para o lado */
  .v2-nav-esq { gap: 16px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; margin-right: 12px; }
  .v2-nav-esq::-webkit-scrollbar { display: none; }
  .v2-nav-esq .v2-menu-btn { font-size: 10px; letter-spacing: 1.4px; }
}
.v2-menu { position: static; }          /* o painel se posiciona pela barra do topo */
.v2-menu-btn {
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.v2-menu-btn:hover,
.v2-menu.open .v2-menu-btn { color: var(--gold); }
.v2-menu-seta { transition: transform 0.25s ease; }
.v2-menu.open .v2-menu-seta { transform: rotate(180deg); }

.v2-painel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  gap: 90px;
  padding: 44px 40px 52px;
  background: #000;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 1001;
}
.v2-menu.open .v2-painel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.v2-col { min-width: 170px; }
.v2-col-titulo {
  margin: 0 0 22px;
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.v2-col ul { list-style: none; margin: 0; padding: 0; }
.v2-col li + li { margin-top: 4px; }
.v2-col button {
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.v2-col button:hover { color: var(--gold); transform: translateX(4px); }
.v2-col .v2-mais {               /* "Mais marcas..." */
  margin-top: 6px;
  color: var(--gray);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-hover);
}

@media (max-width: 768px) {
  .v2-painel { gap: 36px; padding: 28px 20px 36px; }
  .v2-col { min-width: 0; flex: 1; }
  .v2-col button { font-size: 14px; }
}

/* ─── SEM O BOTÃO FLUTUANTE DO WHATSAPP ───────────
   O WhatsApp continua no rodapé (aba "Fale conosco") */
.whatsapp-float { display: none !important; }

/* ─── INSTAGRAM: sem as fotos, só o título e o botão "Ver @bergshed no Instagram" ─── */
.behold-wrap { display: none !important; }
#contato .section-header { margin-bottom: 32px; }

/* ─── CORREÇÕES DA COMPRA ─────────────────────────
   o aviso (toast) some da tela mas ficava por cima do botão
   "Finalizar pedido" e bloqueava o clique */
.toast { pointer-events: none; }
/* telas baixas: a ficha da peça rola até o botão "Adicionar ao carrinho" */
.modal-content { max-height: 90vh; max-height: 90svh; }