/* ==========================================================
   ALLIBABA CONVENIÊNCIA — FOLHA DE ESTILOS
   Este arquivo é vinculado ao index.html via <link rel="stylesheet">
   ========================================================== */

:root{
  --color-dark:#0F0F11;
  --color-gold:#FFC700;
  --color-blue:#2381f5;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', Arial, sans-serif;
  background-color:var(--color-dark);
  color:#fff;
}

h1,h2,h3,h4,.font-display{
  font-family:'Poppins', Arial, sans-serif;
}

.text-gold{ color:var(--color-gold); }
.bg-gold{ background-color:var(--color-gold); }
.border-gold{ border-color:var(--color-gold); }
.text-royal{ color:var(--color-blue); }
.bg-royal{ background-color:var(--color-blue); }
.border-royal{ border-color:var(--color-blue); }

/* Custom scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#0F0F11; }
::-webkit-scrollbar-thumb{ background:var(--color-gold); border-radius:10px; }

/* Hero background pattern */
.hero-bg{
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,199,0,0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(26,86,219,0.25) 0%, transparent 45%),
    linear-gradient(180deg, #0F0F11 0%, #000000 100%);
}

/* ----------------------------------------------------------
   IMAGEM DO HERO
   assets/images/hero.jpg e 1600x1200 (4:3). A caixa usa a mesma
   proporcao, entao a foto aparece INTEIRA, com as bordas visiveis,
   em qualquer tela — sem recorte no celular nem no PC.
   object-fit:contain mantem isso valido mesmo se a foto for trocada
   por outra de proporcao diferente.
   BACKEND EDIT: trocou a foto e quer outra proporcao? ajuste o
   aspect-ratio abaixo (ex.: 16/9, 3/2).
---------------------------------------------------------- */
.hero-media{
  aspect-ratio:4/3;
  width:100%;
  background:#141418;
}
.hero-media img{
  object-fit:contain;
  display:block;
}

.badge-pulse{ animation:pulse-glow 2.4s ease-in-out infinite; }
@keyframes pulse-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,199,0,0.5); }
  50%{ box-shadow:0 0 0 8px rgba(255,199,0,0); }
}

.filter-btn.active{
  background-color:var(--color-gold);
  color:#0F0F11;
  border-color:var(--color-gold);
}

/* ----------------------------------------------------------
   CAIXA DA FOTO DO PRODUTO
   As fotos de assets/images/produtos/ sao 800x800 (quadradas).
   A caixa usa a mesma proporcao 1:1, entao a foto aparece INTEIRA,
   com as bordas visiveis, sem nenhum recorte.
   object-fit:contain garante que isso continue valendo mesmo se
   voce trocar por uma foto de outra proporcao (ela cabe inteira,
   apenas sobrando um pouco de fundo nas laterais).
   BACKEND EDIT: para cards mais baixos, troque aspect-ratio para
   4/3 ou 3/2 — a foto continua sem corte.
---------------------------------------------------------- */
.product-media{
  aspect-ratio:1/1;
  width:100%;
  background:#141418;
}
.product-media img{
  object-fit:contain;
  display:block;
}

.product-card{
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(255,199,0,0.15);
  border-color: var(--color-gold);
}

/* Preco sempre em UMA linha so */
.preco-produto{ white-space:nowrap; }

/* O carrinho so existe no celular (ver media query mais abaixo) */
.icone-carrinho{ display:none; width:1.25rem; height:1.25rem; }

/* ==========================================================
   PRODUTOS EM DESTAQUE — CARROSSEL 3D NO CELULAR
   Ate 639px a grade vira um trilho horizontal com efeito 3D
   (estilo coverflow): o card central fica de frente e os vizinhos
   giram, afastam e escurecem. A partir de 640px — o breakpoint
   "sm" do Tailwind — tudo volta a ser exatamente a grade de cards
   do desktop, sem nenhuma alteracao.
   As medidas em vw sao o que permite o primeiro e o ultimo card
   alcancarem o centro da tela.
   ========================================================== */
@media (max-width:639.98px){
  #productGrid{
    display:flex;
    position:relative;        /* ancora offsetLeft dos cards ao trilho */
    gap:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* calc(50% - metade do card - margem) centraliza o 1o e o ultimo card
       com exatidao, sobrando as bordas dos vizinhos a mostra. */
    padding:1.5rem calc(50% - 28.5vw) 2.5rem;
  }
  #productGrid::-webkit-scrollbar{ display:none; }

  #productGrid .product-card{
    flex:0 0 54vw;
    margin-inline:1.5vw;
    scroll-snap-align:center;
    transform-origin:center center;
    backface-visibility:hidden;
    transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
    will-change:transform,opacity;
  }
  /* em tela de toque nao ha hover: evita brigar com o transform 3D */
  #productGrid .product-card:hover{
    box-shadow:none;
    border-color:rgba(255,255,255,.1);
  }

  /* BOTAO DE PEDIDO NO CELULAR: vira so o carrinho, liberando espaco
     para o preco caber numa linha unica. */
  #productGrid .rotulo-encomendar{ display:none; }
  #productGrid .icone-carrinho{ display:block; }
  #productGrid .btn-encomendar{
    gap:0;
    padding:.625rem;          /* alvo de toque de 40x40px */
    flex:0 0 auto;
  }
  /* O preco acompanha a largura do card para nunca quebrar em duas linhas */
  #productGrid .preco-produto{
    font-size:clamp(.95rem, 4.6vw, 1.25rem);
    min-width:0;
  }
}

/* Quem pediu menos animacao no sistema: sem deslize suave */
@media (max-width:639.98px) and (prefers-reduced-motion:reduce){
  #productGrid{ scroll-behavior:auto; }
  #productGrid .product-card{ transition:none; }
}

.nav-link{ position:relative; }
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:2px;
  background:var(--color-gold);
  transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }

.fade-in-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.fade-in-up.visible{
  opacity:1;
  transform:translateY(0);
}

.whatsapp-float{ animation: float-bounce 2.6s ease-in-out infinite; }
@keyframes float-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.gradient-text{
  background:linear-gradient(90deg, #FFC700, #FFDE59);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mvv-card{ transition: transform .3s ease, border-color .3s ease; }
.mvv-card:hover{ transform: translateY(-6px); }

.store-card{ transition: border-color .3s ease, transform .3s ease; }
.store-card:hover{ transform: translateY(-4px); }

/* ==========================================================
   CARROSSEL "SOBRE NÓS" (100% CSS + JS vanilla, sem libs externas)
   ========================================================== */
.carousel{
  position:relative;
  user-select:none;
  /* As fotos de assets/images/sobre/ sao 1400x875 (16:10). Usar a mesma
     proporcao aqui faz a foto caber INTEIRA, sem corte, em qualquer tela.
     BACKEND EDIT: se voce trocar as fotos por outras com proporcao
     diferente, ajuste este valor (ex.: 4/3, 3/2) para continuar sem corte. */
  aspect-ratio:16/10;
  width:100%;
}
.carousel-track{
  display:flex;
  height:100%;
  transition: transform .7s ease-in-out;
  will-change: transform;
}
.carousel-slide{
  /* flex:0 0 100% fixa a base em 100% do carrossel. Sem isso o slide
     adota a largura do CONTEUDO (altura x proporcao da foto) e vaza
     para fora do container. max-width e min-width fecham o cerco. */
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  min-width:0;
  height:100%;
  position:relative;
  overflow:hidden;
}
.carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.carousel-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.25rem 1.5rem;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-size:.85rem;
  font-weight:600;
  color:#fff;
}
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:9999px;
  background:rgba(15,15,17,0.6);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
  backdrop-filter: blur(4px);
  transition: background .3s ease, border-color .3s ease;
  z-index:5;
}
.carousel-btn:hover{
  background:var(--color-gold);
  border-color:var(--color-gold);
  color:#0F0F11;
}
.carousel-btn.prev{ left:14px; }
.carousel-btn.next{ right:14px; }

.carousel-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}
.carousel-dot{
  width:9px;
  height:9px;
  border-radius:9999px;
  background:rgba(255,255,255,0.4);
  border:none;
  cursor:pointer;
  padding:0;
  transition: background .3s ease, transform .3s ease;
}
.carousel-dot.active{
  background:var(--color-gold);
  transform:scale(1.3);
}