:root{
  /* Fundo e superfícies (do mais escuro ao mais claro) */
  --black: #060506;      /* fundo geral do site */
  --panel: #111012;      /* fundo de cards, faixas (marquee), etc. */
  --panel-2: #17161a;    /* um pouco mais claro que --panel, usado em detalhes */

  /* Linhas divisórias (bordas sutis entre seções) */
  --line: rgba(255,255,255,.09);        /* linha fina padrão */
  --line-strong: rgba(255,255,255,.18); /* linha um pouco mais visível (inputs, etc.) */

  /* Texto */
  --white: #f3f2f4;   /* texto principal sobre fundo escuro */
  --fog: #918f94;     /* texto secundário (descrições, preços, links do menu) */
  --fog-dim: #605e62; /* texto terciário (placeholders, copyright) */

  /* Paleta "holográfica" usada nos gradientes animados (botões de compra) */
  --holo-1: #cfe0ff;
  --holo-2: #dcc9f5;
  --holo-3: #ffd0e6;
  --holo-4: #c8f3e6;
  --holo-5: #cfe0ff;

  /* Cores de status — reservadas para quando os pedidos/etapas 9-11
     forem implementadas (ex: "Pago", "Enviado", "Cancelado") */
  --green: #3ecf8e;
  --blue: #4da3ff;
  --orange: #ffb020;
  --red: #ff5c5c;

  /* Fontes.
     --wordmark só é usada como fallback caso a imagem do logo (PNG)
     não carregue por algum motivo — o logo oficial agora é a imagem
     em /assets/haze-logo.png, não mais texto estilizado. */
  --wordmark: 'Rubik Wet Paint', system-ui;
  --heading: 'Inter', sans-serif;  /* títulos de seção, nav, botões */
  --body: 'Inter', sans-serif;     /* parágrafos */
  --mono: 'Space Mono', monospace; /* preços, tags, labels tipo "etiqueta de roupa" */

  --max: 1280px; /* largura máxima do conteúdo, centralizado na tela */
}


/* =============================================================
   2) RESET BÁSICO E ESTILOS PADRÃO DE TEXTO
============================================================= */

/* box-sizing:border-box faz padding/border não somarem à largura
   definida — evita "quebrar" o layout ao ajustar espaçamentos. */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; } /* rolagem suave ao clicar em links internos (#) */

/* Respeita quem tem "reduzir movimento" ativado no sistema —
   desliga animações/rolagem suave por acessibilidade. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

body{
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased; /* deixa a fonte mais nítida no Mac/iOS */
}

img, svg{ display:block; max-width:100%; } /* imagens nunca "vazam" pra fora do container */
a{ color:inherit; text-decoration:none; }
p{ margin:0; color: var(--fog); }
button{ font-family: var(--body); cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0;
}

/* .wrap = "container" central. Toda seção do site coloca seu
   conteúdo dentro de uma <div class="wrap"> pra manter a mesma
   largura máxima e respiro nas laterais em todas as páginas. */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.mono{ font-family: var(--mono); letter-spacing: .02em; }


/* =============================================================
   3) COMPONENTES REAPROVEITÁVEIS
============================================================= */

/* ---- Logo (imagem) --------------------------------------------------
   O logo oficial é a arte enviada pelo cliente (PNG com fundo
   transparente, em /assets/haze-logo.png). Usamos UMA imagem só,
   redimensionada em CSS pra cada contexto (menu, hero, rodapé) —
   assim, se a arte do logo mudar no futuro, basta trocar o arquivo
   assets/haze-logo.png que todo o site atualiza sozinho. */
.logo-img{ display:block; width:auto; }
.logo-img.nav{ height: 36px; }      /* logo pequeno no menu do topo */
.logo-img.hero{ width: clamp(260px, 34vw, 560px); } /* logo grande no banner */
.logo-img.footer{ height: 34px; }   /* logo pequeno no rodapé */

/* ---- Botões -----------------------------------------------------------
   .btn = botão padrão (contorno). Usado em ações "secundárias"
   como "Shop now" e "Ver todos".
   .btn-holo = botão de destaque com gradiente animado. Reservado
   para ações de COMPRA (adicionar ao carrinho, finalizar pedido),
   pra chamar mais atenção nesses pontos específicos. */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  transition: background .2s ease, color .2s ease;
}
.btn:hover{ background: var(--white); color: var(--black); }

.btn-holo{
  border: none;
  color: #0a0a0a; /* texto escuro pois o fundo do botão é claro/pastel */
  background: linear-gradient(100deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4));
  background-size: 300% auto; /* maior que 100% permite a animação "deslizar" o gradiente */
  animation: holo-shift 6s ease infinite;
}
.btn-holo:hover{ filter: brightness(1.08); }

/* Animação compartilhada: desliza a posição do gradiente de fundo
   da esquerda pra direita e de volta, criando o efeito "holográfico". */
@keyframes holo-shift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ---- Texto com efeito cromado (fallback) -------------------------------
   Não é mais usada para o logo (que agora é imagem), mas fica
   disponível como utilitário — pode ser aplicada em qualquer
   título que precise do mesmo efeito metálico/holográfico. */
.holo-text{
  background: linear-gradient(100deg,
    #8b8f97 0%, #e9edf1 12%, #ffffff 20%, #9aa3ad 30%,
    #c9b6e0 42%, #f0c9db 52%, #a9e0d1 62%,
    #7d838c 72%, #ffffff 82%, #9aa3ad 92%, #8b8f97 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.35);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  animation: holo-shift 10s ease infinite;
}


/* =============================================================
   4) CABEÇALHO (NAV) + MENUS MOBILE
============================================================= */

.nav{
  position: sticky; /* acompanha a rolagem, sempre visível no topo */
  top:0;
  z-index: 100; /* fica acima do resto do conteúdo */
  background: rgba(6,5,6,.86);
  backdrop-filter: blur(10px); /* efeito "vidro fosco" ao rolar a página */
  border-bottom: 1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; }

/* Links de texto do menu (Shop, Sobre, Drops, Contato) — só aparecem
   no desktop; no mobile viram o menu hambúrguer (ver media query abaixo). */
.nav-links{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; font-size: 13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.nav-links a{ display:flex; align-items:center; gap:5px; color: var(--fog); transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active{ color: var(--white); }
.nav-links .chev{ font-size: 10px; opacity:.7; } /* setinha ▾ ao lado de "Shop"/"Sobre" */

/* Ícones do lado direito do menu: moeda, conta, busca (só mobile), carrinho */
.nav-right{ display:flex; align-items:center; gap: 18px; }
.nav-icon-btn{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color: var(--fog); position:relative; }
.nav-icon-btn:hover{ color: var(--white); }
.nav-icon-btn svg{ width:19px; height:19px; }

/* Bolinha com o número de itens no carrinho, sobreposta no ícone da sacola */
.cart-badge{
  position:absolute; top:-6px; right:-8px;
  background: var(--white); color:#000; border-radius:50%;
  width:16px; height:16px; font-size:10px; display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
}

/* Botão hambúrguer (☰) — só fica visível no mobile */
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-burger span{ width:22px; height:2px; background:var(--white); display:block; }

/* Ícone de busca — escondido no desktop, aparece só no mobile
   (no desktop a busca fica dentro da página de Catálogo, não no menu) */
.mobile-search{ display:none; }

/* ---- Regras específicas de MOBILE (telas até 860px de largura) ----
   No celular, o menu do topo fica mais enxuto: escondemos os links
   de texto, o logo (que já aparece grande no hero/conteúdo da página)
   e a seleção de moeda/conta — sobra só busca + carrinho + hambúrguer,
   igual ao mockup de referência. */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav .nav-logo{ display:block; }
  .nav-icon-btn.currency, .nav-icon-btn.account{ display:none; }
  .mobile-search{ display:flex; }
  .nav .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav .cart-link{
    display: none;
  }
}

/* ---- Barra de navegação rápida (só mobile) -------------------------
   Início / Catálogo / Drops / Carrinho / Perfil. Fica dentro do
   cabeçalho (.nav), logo abaixo do logo, e acompanha a rolagem junto
   com ele. Só aparece em telas pequenas (media query abaixo). */
.bottom-nav{
  display:none; /* por padrão escondida; a media query abaixo reativa no mobile */
  justify-content: space-around;
  border-top: 1px solid var(--line);
  padding: 7px 6px 8px;
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size: 10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color: var(--fog); position:relative;
}
.bottom-nav a.active{ color: var(--white); } /* destaca a aba da página atual */
.bottom-nav svg{ width:21px; height:21px; }
.bottom-nav .badge{
  position:absolute; top:-4px; right:6px;
  background: var(--white); color:#000; border-radius:50%;
  width:14px; height:14px; font-size:9px; display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
}
@media (max-width: 860px){
  .bottom-nav{ display:flex; } /* só liga a barra no mobile */
  .nav .wrap{ height: 60px; } /* cabeçalho mais baixo para sobrar tela */
  .hero .wrap{
    grid-template-columns: 1fr;
    gap:40px;
  }
  .hero-media{
    min-height: 420px;
  }
}


/* =============================================================
   5) FAIXA DE AVISOS (MARQUEE)
   -------------------------------------------------------------
   Texto rolando infinitamente (ex: "Frete grátis acima de R$399").
   Funciona duplicando o conteúdo duas vezes no HTML e animando
   -50% da largura — como as duas cópias são idênticas, o loop
   fica "invisível" (sem salto perceptível).
============================================================= */
.marquee{ background: var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; animation: scroll-left 24s linear infinite; }
.marquee-track span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: var(--fog); padding:13px 26px; display:inline-block; }
.marquee-track span::before{ content:'◆ '; color: var(--holo-2); } /* losango antes de cada frase */
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }


/* =============================================================
   6) HERO (BANNER PRINCIPAL DA HOME)
============================================================= */
.hero{ 
  padding: 60px 0 60px; 
  border-bottom: 1px solid var(--line); 
}
.hero .wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
}
.hero-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-media{
  aspect-ratio: 5 / 4;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px){
  .hero .wrap{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero{
    padding: 40px 0;
  }
  .hero .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  
}

/* Tagline abaixo do logo grande ("Streetwear de verdade...") */
.hero-tagline{ max-width: 420px; margin-top: 26px; font-size: 15px; text-transform: uppercase; letter-spacing:.02em; font-weight:600; color: var(--fog); }
.hero-cta{ margin-top: 32px; }
.hero-cta .btn{ padding: 16px 30px; } /* botão um pouco maior no hero do que o padrão */
/* =============================================================
   HERO DINÂMICO
============================================================= */

.hero-grid {

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 50px;

  align-items: center;

}


.hero-copy {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}


.hero-logo {

  width: min(100%, 430px);

  height: auto;

}


.hero-campaign-title {

  display: block;

  margin-top: 24px;

  color: var(--fog-dim);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.hero-media {

  width: 100%;

  min-height: 520px;

  overflow: hidden;

  background: var(--panel);

  border: 1px solid var(--line);

}


/* Carrossel da Home: slides sobrepostos com troca suave */
.hero-carrossel {

  position: relative;

}


.hero-slides {

  position: absolute;

  inset: 0;

  display: block;

  cursor: pointer;

}


.hero-slide {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity .8s ease;

}


.hero-slide.ativo {

  opacity: 1;

}


.hero-slides:focus-visible {

  outline: 2px solid #fff;

  outline-offset: -4px;

}


.hero-dots {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 16px;

  display: flex;

  justify-content: center;

  gap: 10px;

  z-index: 2;

}


.hero-dots[hidden] {

  display: none;

}


.hero-dot {

  width: 28px;

  height: 4px;

  padding: 0;

  border: 0;

  background: rgba(255, 255, 255, .4);

  cursor: pointer;

  transition: background .3s ease, width .3s ease;

}


/* Área de toque maior que o traço visível */
.hero-dot::before {

  content: "";

  display: block;

  margin: -12px 0;

  height: 28px;

}


.hero-dot.ativo {

  width: 44px;

  background: #fff;

}


.hero-dot:focus-visible {

  outline: 2px solid #fff;

  outline-offset: 4px;

}


@media (prefers-reduced-motion: reduce) {

  .hero-slide,
  .hero-dot {

    transition: none;

  }

}


@media (max-width: 860px) {

  .hero-grid {

    grid-template-columns: 1fr;

  }


  .hero-media {

    min-height: 420px;

  }


  .hero-media img {

    min-height: 420px;

  }

}


/* =============================================================
   7) SEÇÕES GENÉRICAS + GRID DE PRODUTOS
============================================================= */

/* Cabeçalho de seção reutilizável: título à esquerda + link
   "Ver todos" à direita (usado em "Drops em destaque", etc.) */
.section{ padding: 90px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(24px, 3vw, 32px); }
.section-head a{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--fog); }
.section-head a:hover{ color: var(--white); }

/* Grid de produtos: 4 colunas no desktop, 2 no tablet, 1 no celular */
.grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 960px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr; } }

.card{ display:flex; flex-direction:column; gap:14px; }

/* Área da "foto" do produto. Hoje usa ilustrações SVG de placeholder
   (silhueta da peça); quando houver fotos reais, troque o <svg> do
   HTML por uma <img> normal — este container já está pronto pra
   receber qualquer um dos dois (aspect-ratio:1/1 mantém o quadrado). */
.card-art{
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 40%, var(--panel-2), var(--black) 78%);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow:hidden;
}
.card-art svg{ width:100%; transition: transform .35s ease; }
.card-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.card:hover .card-art img{
    transform:scale(1.05);
}
.card:hover .card-art svg{ transform: scale(1.05); } /* leve zoom ao passar o mouse */
.card-art .stamp{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-38%);
  font-family: var(--wordmark); font-size: 15px; pointer-events:none;
}
.card-info{ display:flex; flex-direction:column; gap:4px; }
.card-name{ font-size: 13px; font-weight:700; text-transform:uppercase; }
.card-price{ font-family: var(--mono); font-size: 13px; color: var(--fog); }


/* =============================================================
   8) NEWSLETTER
============================================================= */
.newsletter{ border-top:1px solid var(--line); padding: 90px 0; position: relative; overflow:hidden; }
.newsletter-box{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.newsletter h3{ font-size: clamp(24px,3.4vw,36px); max-width: 440px; }
.newsletter p{ margin-top:12px; max-width: 380px; }
.newsletter-form{ display:flex; max-width: 380px; width:100%; border:1px solid var(--line-strong); }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:15px 16px; color:var(--white); font-family: var(--mono); font-size:13px; }
.newsletter-form input::placeholder{ color: var(--fog-dim); }
.newsletter-form button{ width:52px; border:none; background: linear-gradient(100deg, var(--holo-1), var(--holo-2), var(--holo-3)); }


/* =============================================================
   9) RODAPÉ
============================================================= */
.footer{ border-top:1px solid var(--line); padding: 60px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap:40px; padding-bottom:44px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } /* empilha em 2 colunas no mobile */
.footer p{ margin-top:14px; max-width:260px; font-size:13px; }
.footer h4{ font-size:11px; font-weight:700; letter-spacing:.14em; color: var(--fog-dim); margin-bottom:16px; text-transform:uppercase; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13px; }
.footer ul a{ color: var(--fog); }
.footer ul a:hover{ color: var(--white); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11px; color: var(--fog-dim); text-transform:uppercase; letter-spacing:.06em; }


/* =============================================================
   10) CABEÇALHO DE PÁGINA INTERNA (Catálogo, Produto, Sobre)
   -------------------------------------------------------------
   Título grande + trilha de navegação (breadcrumb) usados no
   topo das páginas que não são a Home.
============================================================= */
.page-head{ padding: 44px 0 32px; border-bottom: 1px solid var(--line); }
.page-head h1{ font-size: clamp(32px, 6vw, 56px); }
.breadcrumb{ font-size:12px; color: var(--fog-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:14px; }
.breadcrumb a:hover{ color: var(--white); }


/* =============================================================
   11) CATÁLOGO — BUSCA (mobile) E ABAS DE CATEGORIA
   -------------------------------------------------------------
   .shop-toolbar: barra de busca + botão de filtro, só aparece
   no mobile (no desktop a busca fica reservada pra uma versão
   futura no próprio menu). .category-tabs: "pills" horizontais
   (Todos / Camisetas / Moletons...) — no mobile ficam roláveis
   na horizontal; no desktop escondemos, porque lá quem filtra
   é a sidebar (.filters) mais completa, com múltiplas seleções.
============================================================= */
.shop-toolbar{ display:none; gap: 10px; padding: 20px 0; }
.shop-search{
  flex:1; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); padding: 12px 16px;
  color: var(--fog);
}
.shop-search input{ flex:1; background:none; border:none; color:var(--white); font-size:14px; }
.shop-search input::placeholder{ color: var(--fog-dim); }
.shop-search svg{ width:18px; height:18px; flex-shrink:0; }
.shop-filter-btn{
  display:flex; align-items:center; justify-content:center;
  width: 46px; border:1px solid var(--line-strong); background:none; color: var(--white);
}
.shop-filter-btn svg{ width:18px; height:18px; }

.category-tabs{
  display:flex; gap:10px; overflow-x:auto; padding-bottom: 6px;
  -ms-overflow-style:none; scrollbar-width:none; /* esconde a barra de rolagem, mantém o scroll */
}
.category-tabs::-webkit-scrollbar{ display:none; }
.category-tabs button{
  flex-shrink:0; padding: 9px 18px; border:1px solid var(--line-strong);
  background:none; color: var(--fog); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.category-tabs button.active{ background: var(--white); color:#000; border-color:var(--white); }

@media (max-width: 860px){
  .shop-toolbar{ display:flex; }
  .category-tabs{ display:flex; }
}
@media (min-width: 861px){
  .category-tabs{ display:none; } /* no desktop quem filtra é a sidebar */
}


/* =============================================================
   12) CATÁLOGO — LAYOUT (SIDEBAR DE FILTROS + GRID)
============================================================= */
.catalog-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 0; align-items:start; }
@media (max-width: 860px){ .catalog-layout{ grid-template-columns: 1fr; } }

/* Sidebar de filtros: só aparece no desktop (no mobile o filtro
   vira os .category-tabs + o botão de filtro do .shop-toolbar) */
.filters{ border-right:1px solid var(--line); padding: 36px 28px 36px 0; }
@media (max-width: 860px){
  .filters{ display:none; }
  /* Quando o botão de filtro (mobile) é clicado, script.js adiciona
     a classe "open" aqui, transformando a sidebar num painel de
     tela cheia — só no mobile (no desktop ela já fica sempre visível). */
  .filters.open{
    display:block; position:fixed; inset:0; z-index:200;
    background: var(--black); padding: 90px 28px 100px; overflow-y:auto;
  }
}
.filter-group{ margin-bottom: 30px; }
.filters-head{ display:none; justify-content:space-between; align-items:center; margin-bottom:24px; }
.filters-head button{ background:none; border:1px solid var(--line-strong); color:var(--white); width:32px; height:32px; }
@media (max-width: 860px){ .filters-head{ display:flex; } } /* só faz sentido mostrar quando a sidebar vira painel de tela cheia */
.filter-group h4{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--fog-dim); margin-bottom:14px; }
.filter-opt{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; color: var(--fog); cursor:pointer; }
.filter-opt:hover{ color: var(--white); }
.filter-opt input{ accent-color: var(--holo-2); }
.filter-opt .count{ font-family: var(--mono); font-size:11px; color: var(--fog-dim); }

/* Bolinhas de cor na sidebar (Preto / Cinza / Marinho / etc.) */
.color-opts{ display:flex; gap:10px; }
.color-dot{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line-strong); cursor:pointer; }
.color-dot.active{ border-color: var(--holo-2); }

/* Barra "24 PRODUTOS · ORDENAR" acima do grid */
.catalog-main{ padding: 36px 0 36px 32px; }
@media (max-width: 860px){ .catalog-main{ padding: 0; } }
.catalog-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; font-size:12px; color: var(--fog); text-transform:uppercase; letter-spacing:.05em; }
.catalog-toolbar select{ background: var(--panel); color: var(--white); border:1px solid var(--line-strong); padding:8px 12px; font-size:12px; }
.catalog-main .grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 1080px){ .catalog-main .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .catalog-main .grid{ grid-template-columns: repeat(2,1fr); gap:14px; } }
.card.hidden{ display:none; } /* usado pelo JS de filtro pra esconder produtos fora do filtro atual */

.load-more{ text-align:center; margin-top: 40px; }

/* Botão de favorito (coração) no canto do card do produto */
.card-fav{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(6,5,6,.55); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  border:none; color: var(--white);
}
.card-fav svg{ width:16px; height:16px; }
.card-fav.active svg{ fill: var(--holo-3); stroke: var(--holo-3); }
/* =============================================================
   13) PÁGINA DE PRODUTO
   -------------------------------------------------------------
   Layout em 2 colunas no desktop (galeria à esquerda, infos à
   direita) que empilha em 1 coluna no mobile. Os nomes de classe
   aqui (.size-btn, .swatch, .qty, .js-add-cart, .accordion-*)
   já têm o comportamento de clique pronto em script.js — não é
   preciso escrever JS novo pra essa página, só usar essas classes.
============================================================= */
.product{ padding: 44px 0 100px; }
.product-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 30px; }
@media (max-width: 900px){ .product-layout{ grid-template-columns: 1fr; gap:32px; } }

/* ---- Galeria (imagem grande + miniaturas) ---- */
.product-gallery{
  background: radial-gradient(circle at 50% 40%, var(--panel-2), var(--black) 78%);
  border: 1px solid var(--line);
  aspect-ratio: 1/1.05;
  display:flex; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
}
.product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
}
.product-thumb{
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
  cursor: pointer;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-thumb.active {
  border-color: var(--holo-2);
}

/* ---- Zoom da foto do produto ---- */
.product-gallery.zoomavel {
  cursor: zoom-in;
  touch-action: pan-y;   /* deslizar para o lado troca a foto */
  user-select: none;
}
.product-gallery.zoomavel img {
  transition: transform .2s ease;
}
.product-gallery.lupa img {
  transform: scale(2);
}
.product-zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(6, 5, 6, .7);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.product-zoom-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.product-zoom-btn:hover,
.product-zoom-btn:focus-visible {
  border-color: var(--holo-2);
}

body.zoom-aberto {
  overflow: hidden;
}
.zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: var(--black);
  color: var(--white);
}
.zoom-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.zoom-contador {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--fog);
}
.zoom-acoes {
  display: flex;
  gap: 8px;
}
.zoom-botao,
.zoom-seta {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.zoom-botao:hover,
.zoom-seta:hover,
.zoom-botao:focus-visible,
.zoom-seta:focus-visible {
  border-color: var(--holo-2);
}
.zoom-palco {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
}
.zoom-modal.ampliado .zoom-palco {
  cursor: zoom-out;
}
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
}
.zoom-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
}
.zoom-anterior { left: 16px; }
.zoom-proxima { right: 16px; }
.zoom-miniaturas {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 4px;
  overflow-x: auto;
}
.zoom-miniatura {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  opacity: .6;
  cursor: pointer;
}
.zoom-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zoom-miniatura.ativa {
  border-color: var(--holo-2);
  opacity: 1;
}
.zoom-dica {
  margin: 0;
  padding: 6px 16px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--fog);
}
.zoom-modal.ampliado .zoom-seta,
.zoom-unica .zoom-seta,
.zoom-unica .zoom-miniaturas {
  display: none;
}
@media (max-width: 860px) {
  .zoom-seta { display: none; }   /* no celular, deslize para trocar */
  .zoom-miniaturas { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery.zoomavel img,
  .zoom-img { transition: none !important; }
}
.product-gallery svg{ width:56%; }
.product-thumbs{ display:flex; gap:10px; margin-top:12px; }
.product-thumbs > div{
  width:64px; height:64px; background: var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.product-thumbs > div.active{ border-color: var(--holo-2); }
.product-thumbs svg{ width:58%; }

/* ---- Coluna de informações ---- */
.product-tag{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; background: var(--white); color:#000; padding:4px 9px; margin-bottom:14px;
}
.product-cat{ font-size:12px; color: var(--fog-dim); text-transform:uppercase; letter-spacing:.08em; }
.product-name{ font-size: clamp(26px, 3.4vw, 40px); margin-top:8px; }
.product-price{ font-family: var(--mono); font-size:20px; margin-top:14px; }
.product-installment{ font-size:12px; color: var(--fog-dim); margin-top:4px; }
.product-desc{ margin-top:18px; max-width:420px; font-size:14px; }

.opt-group{ margin-top:28px; }
.opt-label{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--fog); margin-bottom:12px; }
.opt-label a{ color: var(--holo-2); text-transform:none; letter-spacing:0; font-weight:600; }

.swatches{ display:flex; gap:10px; }
.swatch{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line-strong); cursor:pointer; }
.swatch.active{ border-color: var(--holo-2); }

.sizes{ display:flex; gap:9px; flex-wrap:wrap; }
.size-btn{
  min-width:48px; padding:11px 14px; border:1px solid var(--line-strong);
  background:none; color: var(--white); font-family: var(--mono); font-size:13px;
  transition: all .2s ease;
}
.size-btn:hover{ border-color: var(--holo-2); }
.size-btn.active{ background: var(--white); border-color: var(--white); color:#000; }
.size-btn:disabled{ opacity:.3; text-decoration: line-through; cursor:not-allowed; }

.qty-add{ display:flex; gap:14px; margin-top:36px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line-strong); }
.qty button{ background:none; border:none; color:var(--white); width:40px; font-size:16px; }
.qty span{ width:34px; text-align:center; font-family: var(--mono); }
.qty-add .btn-holo{ flex:1; }
.qty-add .wishlist-btn{
  width:52px; border:1px solid var(--line-strong); background:none; color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.qty-add .wishlist-btn svg{ width:18px; height:18px; }
.qty-add .wishlist-btn.active svg{ fill: var(--holo-3); stroke: var(--holo-3); }

/* ---- Tamanho obrigatório (script.js: avisarTamanhoObrigatorio) ------------
   Sem tamanho escolhido o botão fica apagado. Ao clicar mesmo assim,
   ganha uma borda vermelha, os tamanhos ficam destacados e aparece o aviso. */
.js-add-cart[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.4);
}
.js-add-cart[aria-disabled="true"]:hover{ filter:grayscale(.4); }

/* opacity e filter também apagariam a borda: no aviso o botão fica
   nítido e a borda vermelha forte (o clique continua bloqueado) */
.js-add-cart.erro-tamanho,
.js-add-cart.erro-tamanho:hover{
  opacity:1;
  filter:none;
  outline:2px solid var(--red);
  outline-offset:3px;
  box-shadow:0 0 16px rgba(255, 92, 92, .35);
  animation: holo-shift 6s ease infinite, tremer-aviso .35s ease;
}

.sizes.erro-tamanho .size-btn:not(:disabled){ border-color: var(--red); }

.aviso-tamanho{
  display:flex; align-items:center; gap:8px;
  margin-top:12px;
  color: var(--red);
  font-size:13px;
}
.aviso-tamanho::before{
  content:"!";
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none;
  border:1.5px solid currentColor; border-radius:50%;
  font-size:11px; font-weight:700;
}
.aviso-tamanho[hidden]{ display:none; }

@keyframes tremer-aviso{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

@media (prefers-reduced-motion: reduce){
  .js-add-cart.erro-tamanho{ animation: none; }
}

.accordion{ margin-top:44px; border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-head{
  width:100%; background:none; border:none; color:var(--white);
  display:flex; justify-content:space-between; align-items:center; padding:18px 0;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.accordion-head .plus{ color: var(--holo-2); font-size:17px; transition: transform .2s ease; }
.accordion-item.open .accordion-head .plus{ transform: rotate(45deg); }
.accordion-body{ max-height:0; overflow:hidden; transition: max-height .3s ease; font-size:13px; color: var(--fog); }
.accordion-item.open .accordion-body{ max-height:240px; }
.accordion-body-inner{ padding-bottom:18px; }

.related{ padding-top:90px; }

.produto-cor-atual {
  display: block;
  margin-bottom: 10px;

  font-size: 13px;
  font-weight: 600;

  color: var(--white);
}

.swatches {
  display: flex;
  align-items: center;
  gap: 10px;
}

.swatch {
  width: 30px;
  height: 30px;

  padding: 0;

  border-radius: 50%;
  border: 2px solid #555;

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease;
}

.swatch:hover {
  transform: scale(1.08);
}

.swatch.active {
  border-color: var(--holo-2);
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* =============================================================
   SACOLA
============================================================= */

.sacola-page {
  padding: 50px 0 100px;
  min-height: 70vh;
}

.sacola-head {
  margin-bottom: 35px;
}

.sacola-head h1 {
  margin-top: 12px;
  font-size: clamp(32px, 5vw, 58px);
  text-transform: uppercase;
}

.sacola-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 45px;
}

.sacola-itens {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sacola-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 22px;

  padding: 18px;

  background: var(--panel);
  border: 1px solid var(--line);
}

.sacola-item-imagem {
  width: 130px;
  height: 150px;

  background: var(--panel-2);
  overflow: hidden;
}

.sacola-item-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sacola-item-info h3 {
  margin-bottom: 10px;
  font-size: 17px;
  text-transform: uppercase;
}

.sacola-item-info p {
  margin: 5px 0;
  font-size: 13px;
  color: var(--fog);
}

.sacola-item-preco {
  text-align: right;
}

.sacola-item-preco strong {
  display: block;
  white-space: nowrap;
}

.sacola-item-preco small {
  display: block;
  margin-top: 6px;
  color: var(--fog-dim);
}

.sacola-resumo {
  height: fit-content;

  padding: 26px;

  background: var(--panel);
  border: 1px solid var(--line);

  position: sticky;
  top: 100px;
}

.sacola-resumo h2 {
  margin-bottom: 25px;
  text-transform: uppercase;
}

.sacola-resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding: 14px 0;

  border-bottom: 1px solid var(--line);
}

.sacola-total {
  margin-top: 8px;
  font-size: 18px;
}

.sacola-finalizar {
  width: 100%;
  margin-top: 24px;
}

/* -----------------------------------------
   CALCULAR FRETE (sacola-frete.js)
----------------------------------------- */

.sacola-frete {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* O campo de CEP não pode alargar o resumo no celular */
.sacola-layout > * {
  min-width: 0;
}

.sacola-frete[hidden] {
  display: none;
}

.sacola-frete label[for="sacola-cep"] {
  display: block;
  margin-bottom: 10px;

  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fog);
}

.sacola-frete-campo {
  display: flex;
}

.sacola-frete-campo input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;

  background: var(--black);
  border: 1px solid var(--line-strong);
  border-right: 0;

  color: var(--white);
  font: inherit;
  letter-spacing: .04em;
}

.sacola-frete-campo input:focus {
  outline: none;
  border-color: var(--holo-2);
}

.sacola-frete-campo input.campo-erro {
  border-color: var(--red);
}

.sacola-frete-botao {
  padding: 0 16px;

  background: var(--white);
  border: 1px solid var(--white);

  color: var(--black);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.sacola-frete-botao:hover:not(:disabled) {
  background: transparent;
  color: var(--white);
}

.sacola-frete-botao:disabled {
  opacity: .6;
  cursor: wait;
}

.sacola-frete-link {
  display: inline-block;
  margin-top: 8px;

  font-size: 12px;
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sacola-frete-link:hover {
  color: var(--white);
}

.sacola-frete-opcoes {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.sacola-frete-opcoes[hidden] {
  display: none;
}

.sacola-frete-opcao {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  padding: 10px 12px;

  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color .2s ease;
}

.sacola-frete-opcao:has(input:checked) {
  border-color: var(--holo-2);
  background: rgba(220, 201, 245, .05);
}

.sacola-frete-opcao input {
  margin-top: 3px;
  accent-color: var(--holo-2);
}

.sacola-frete-opcao span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.sacola-frete-opcao small {
  color: var(--fog);
  font-size: 12px;
}

.sacola-frete-info {
  margin-top: 12px;
  font-size: 13px;
  color: var(--fog);
}

.sacola-frete-info:empty {
  display: none;
}

.sacola-frete-info.erro {
  color: var(--red);
}

.sacola-continuar {
  display: block;

  margin-top: 18px;

  text-align: center;
  font-size: 12px;
  text-transform: uppercase;

  color: var(--fog);
}

.sacola-vazia {
  padding: 70px 20px;

  text-align: center;

  border: 1px solid var(--line);
  background: var(--panel);
}

.sacola-vazia h2 {
  margin-bottom: 10px;
}

.sacola-vazia p {
  margin-bottom: 25px;
  color: var(--fog);
}

@media (max-width: 850px) {

  .sacola-layout {
    grid-template-columns: 1fr;
  }

  .sacola-resumo {
    position: static;
  }

}

@media (max-width: 560px) {

  .sacola-item {
    grid-template-columns: 90px 1fr;
  }

  .sacola-item-imagem {
    width: 90px;
    height: 110px;
  }

  .sacola-item-preco {
    grid-column: 2;
    text-align: left;
  }

}

.sacola-quantidade {
  display: inline-flex;
  align-items: center;

  margin-top: 12px;

  border: 1px solid var(--line);
}

.sacola-quantidade button {
  width: 34px;
  height: 34px;

  border: 0;
  background: transparent;

  color: var(--white);

  font-size: 18px;
  cursor: pointer;
}

.sacola-quantidade span {
  min-width: 34px;

  text-align: center;

  font-family: var(--mono);
  font-size: 13px;
}

.sacola-quantidade button:hover {
  background: var(--panel-2);
}

.sacola-remover {
  display: block;

  margin-top: 13px;
  padding: 0;

  border: 0;
  background: transparent;

  color: var(--fog-dim);

  font-size: 11px;
  text-transform: uppercase;
  text-decoration: underline;

  cursor: pointer;
}

.sacola-remover:hover {
  color: var(--white);
}
.sacola-quantidade button:disabled {
  opacity: .25;
  cursor: not-allowed;
  background: transparent;
}

.sacola-estoque {
  margin-top: 8px !important;

  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .04em;

  color: var(--fog-dim) !important;
}

/* =============================================================
   CHECKOUT
============================================================= */

.checkout-page {
  padding: 50px 0 100px;
  min-height: 80vh;
}

.checkout-head {
  margin-bottom: 35px;
}

.checkout-head h1 {
  margin-top: 12px;
  font-size: clamp(32px, 5vw, 54px);
  text-transform: uppercase;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 45px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.checkout-bloco {
  padding: 26px;

  background: var(--panel);
  border: 1px solid var(--line);
}

.checkout-bloco h2 {
  margin-bottom: 24px;
  font-size: 18px;
  text-transform: uppercase;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.checkout-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-full {
  grid-column: 1 / -1;
}

.checkout-campo label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fog);
}

.checkout-campo input {
  width: 100%;
  padding: 13px 14px;

  background: var(--black);
  border: 1px solid var(--line-strong);

  color: var(--white);
  font: inherit;
}

.checkout-campo input:focus {
  outline: none;
  border-color: var(--holo-2);
}

.checkout-resumo {
  height: fit-content;

  padding: 26px;

  background: var(--panel);
  border: 1px solid var(--line);

  position: sticky;
  top: 100px;
}

.checkout-resumo h2 {
  margin-bottom: 22px;
  text-transform: uppercase;
}

.checkout-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;

  padding: 12px 0;

  border-bottom: 1px solid var(--line);
}

.checkout-item img {
  width: 60px;
  height: 70px;
  object-fit: cover;

  background: var(--panel-2);
}

.checkout-item h3 {
  font-size: 12px;
  text-transform: uppercase;
}

.checkout-item p {
  margin-top: 5px;
  font-size: 11px;
  color: var(--fog);
}

.checkout-item-preco {
  font-size: 12px;
  white-space: nowrap;
}

.checkout-total-linha {
  display: flex;
  justify-content: space-between;

  padding: 15px 0;

  border-bottom: 1px solid var(--line);
}

.checkout-total {
  font-size: 18px;
}

.checkout-continuar {
  width: 100%;
  margin-top: 24px;
}

@media (max-width: 850px) {

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-resumo {
    position: static;
  }

}

@media (max-width: 560px) {

  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-full {
    grid-column: auto;
  }

}
.checkout-campo input:disabled {
  opacity: .6;
  cursor: wait;
}

.checkout-campo input.campo-erro {
  border-color: #ff4d4d;
}

.checkout-campo input.campo-erro:focus {
  border-color: #ff4d4d;
}

/* =============================================================
   PEDIDO CONFIRMADO
============================================================= */

.pedido-confirmado-page {
  min-height: 75vh;
  padding: 70px 0 110px;

  display: flex;
  align-items: center;
}

.pedido-confirmado-card {
  max-width: 720px;
  margin: 0 auto;

  padding: 45px;

  background: var(--panel);
  border: 1px solid var(--line);

  text-align: center;
}

.pedido-check {
  width: 64px;
  height: 64px;

  margin: 0 auto 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--holo-2);
  border-radius: 50%;

  font-size: 26px;
}

.pedido-eyebrow {
  margin-bottom: 10px;

  color: var(--fog);
  font-size: 11px;

  letter-spacing: .15em;
}

.pedido-confirmado-card h1 {
  font-size: clamp(30px, 5vw, 52px);
  text-transform: uppercase;
}

.pedido-confirmado-texto {
  margin-top: 14px;

  color: var(--fog);
}

.pedido-numero {
  margin: 35px 0;

  padding: 22px;

  background: var(--black);
  border: 1px solid var(--line);
}

.pedido-numero span {
  display: block;

  margin-bottom: 7px;

  color: var(--fog);
  font-size: 11px;

  text-transform: uppercase;
}

.pedido-numero strong {
  font-family: var(--mono);
  font-size: 26px;
}

.pedido-confirmado-info {
  display: grid;
  grid-template-columns: 1fr 1fr;

  text-align: left;

  border-top: 1px solid var(--line);
}

.pedido-confirmado-info > div {
  padding: 18px 10px;

  border-bottom: 1px solid var(--line);
}

.pedido-confirmado-info span {
  display: block;

  margin-bottom: 6px;

  color: var(--fog);
  font-size: 11px;

  text-transform: uppercase;
}

.pedido-confirmado-info strong {
  font-family: var(--mono);
}

.pedido-confirmado-total {
  font-size: 18px;
}

.pedido-pagamento {
  margin-top: 30px;
  padding: 22px;

  text-align: left;

  background: var(--black);
  border: 1px solid var(--line);
}

.pedido-pagamento h2 {
  margin-bottom: 10px;

  font-size: 15px;
  text-transform: uppercase;
}

.pedido-pagamento p {
  color: var(--fog);
  font-size: 13px;
  line-height: 1.6;
}

.pedido-confirmado-acoes {
  margin-top: 30px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 18px;
}

.pedido-voltar {
  color: var(--fog);

  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 560px) {

  .pedido-confirmado-card {
    padding: 30px 20px;
  }

  .pedido-confirmado-info {
    grid-template-columns: 1fr;
  }

}

/* =============================================================
   CONTA DO CLIENTE
   (conta, minha-conta, recuperar/redefinir senha, verificar e-mail)
============================================================= */

.conta-page {
  padding: 50px 0 100px;
  min-height: 80vh;
}

.conta-wrap {
  max-width: 560px;
}

.conta-head {
  margin-bottom: 30px;
}

.conta-head h1 {
  margin-top: 12px;
  font-size: clamp(30px, 5vw, 48px);
  text-transform: uppercase;
}

.conta-head-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.conta-subtitulo,
.conta-texto {
  margin-top: 10px;
  color: var(--fog);
  font-size: 14px;
  line-height: 1.6;
}

.conta-abas {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.conta-aba {
  flex: 1;
  padding: 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fog);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  cursor: pointer;
}

.conta-aba.ativa {
  color: var(--white);
  border-bottom-color: var(--holo-2);
}

.conta-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.conta-form h3 {
  font-size: 15px;
  text-transform: uppercase;
}

.conta-botao {
  justify-content: center;
  width: 100%;
}

.conta-botao-pequeno {
  padding: 11px 18px;
  font-size: 12px;
  width: fit-content;
}

.conta-botao-perigo {
  justify-content: center;
  border-color: var(--red);
  color: var(--red);
}

.conta-botao-perigo:hover {
  background: var(--red);
  color: var(--black);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.conta-link,
.conta-link-botao {
  color: var(--fog);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.conta-link:hover,
.conta-link-botao:hover {
  color: var(--white);
}

.conta-link-botao.perigo {
  color: var(--red);
}

.conta-dica {
  color: var(--fog-dim);
  font-size: 12px;
}

.conta-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--fog);
  line-height: 1.5;
}

.conta-check input {
  margin-top: 3px;
  accent-color: var(--holo-2);
}

.conta-check a {
  color: var(--white);
  text-decoration: underline;
}

.conta-mensagem {
  min-height: 1em;
  color: var(--red);
  font-size: 13px;
  line-height: 1.5;
}

.conta-mensagem:empty {
  display: none;
}

.conta-mensagem.sucesso {
  color: var(--green);
}

.conta-sair {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--fog);
  padding: 10px 18px;
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.conta-sair:hover {
  color: var(--white);
  border-color: var(--white);
}

.conta-aviso {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 176, 32, .4);
  background: rgba(255, 176, 32, .08);
  color: var(--orange);
  font-size: 13px;
}

.conta-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
}

.conta-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: fit-content;
  position: sticky;
  top: 100px;
}

.conta-menu-link {
  padding: 12px 14px;
  color: var(--fog);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-left: 2px solid transparent;
}

.conta-menu-link:hover {
  color: var(--white);
}

.conta-menu-link.ativo {
  color: var(--white);
  border-left-color: var(--holo-2);
  background: var(--panel);
}

.conta-secao {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.conta-secao[hidden] {
  display: none;
}

.conta-secao h2 {
  font-size: 22px;
  text-transform: uppercase;
}

.conta-secao h4 {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--fog);
  letter-spacing: .06em;
}

.conta-secao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.conta-carregando,
.conta-vazio {
  color: var(--fog);
  font-size: 14px;
}

.conta-vazio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  border: 1px dashed var(--line-strong);
}

.conta-pedidos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conta-pedido {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "numero total"
    "data status"
    "itens status";
  gap: 4px 16px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease;
}

.conta-pedido:hover,
.conta-pedido:focus-visible {
  border-color: var(--line-strong);
}

.conta-pedido-numero { grid-area: numero; font-weight: 700; }
.conta-pedido-total { grid-area: total; text-align: right; font-family: var(--mono); }
.conta-pedido-data { grid-area: data; color: var(--fog); font-size: 13px; }
.conta-pedido-itens { grid-area: itens; color: var(--fog); font-size: 13px; }
.conta-pedido .conta-status { grid-area: status; justify-self: end; align-self: center; }

.conta-status {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.conta-status-aguardando_pagamento { color: var(--orange); border-color: rgba(255, 176, 32, .4); }
.conta-status-pago,
.conta-status-entregue { color: var(--green); border-color: rgba(62, 207, 142, .4); }
.conta-status-em_preparacao,
.conta-status-enviado { color: var(--blue); border-color: rgba(77, 163, 255, .4); }
.conta-status-cancelado { color: var(--red); border-color: rgba(255, 92, 92, .4); }

.conta-pedido-detalhe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conta-pedido-detalhe[hidden] {
  display: none;
}

.conta-pedido-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.conta-lista-itens {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conta-lista-itens li,
.conta-totais div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.conta-totais {
  margin-top: 8px;
}

.conta-total {
  font-weight: 700;
  font-size: 16px;
}

.conta-rastreio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .06);
  font-size: 14px;
}

.conta-rastreio a {
  color: var(--blue);
  text-decoration: underline;
}

.conta-historico {
  list-style: none;
  padding: 0 0 0 18px;
  margin: 0;
  border-left: 1px solid var(--line-strong);
}

.conta-historico li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 8px 6px;
  font-size: 14px;
}

.conta-historico li::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--holo-2);
}

.conta-historico span {
  color: var(--fog);
  font-size: 12px;
}

.conta-enderecos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conta-endereco {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.conta-endereco.principal {
  border-color: var(--holo-2);
}

.conta-selo {
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  border: 1px solid var(--holo-2);
  color: var(--holo-2);
}

.conta-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.conta-endereco .conta-acoes {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.conta-perigo {
  border-color: rgba(255, 92, 92, .35);
}

.checkout-campo select,
.checkout-campo textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  color: var(--white);
  font: inherit;
}

.checkout-campo select:focus,
.checkout-campo textarea:focus {
  outline: none;
  border-color: var(--holo-2);
}

:focus-visible {
  outline: 2px solid var(--holo-2);
  outline-offset: 2px;
}

/* Sacola: avisos de estoque e itens indisponíveis */
.sacola-aviso {
  margin: 6px 0;
  color: var(--orange);
  font-size: 12px;
}

.sacola-item-indisponivel {
  opacity: .6;
}

.sacola-item-indisponivel .sacola-aviso {
  color: var(--red);
}

.sacola-finalizar.desativado {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 860px) {

  .conta-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .conta-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
  }

  .conta-menu-link {
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .conta-menu-link.ativo {
    border-bottom-color: var(--holo-2);
    background: none;
  }

  .conta-endereco {
    flex-direction: column;
  }

  .conta-endereco .conta-acoes {
    flex-direction: row;
    align-items: center;
  }
}

/* O atributo hidden sempre vence classes com display definido */
[hidden] {
  display: none !important;
}


/* =============================================================
   CHECKOUT — FRETE, CUPOM E PAGAMENTO
============================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkout-enderecos-salvos {
  margin-bottom: 18px;
}

.checkout-fretes {
  margin-top: 16px;
}

.checkout-fretes[hidden] {
  display: none;
}

.checkout-frete-info {
  margin-top: 16px;
  color: var(--fog);
  font-size: 13px;
}

.checkout-frete-info:empty {
  display: none;
}

.checkout-frete-info.erro {
  color: var(--red);
}

.checkout-pagamentos {
  display: grid;
  gap: 12px;
}

.checkout-pagamento {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color .2s ease;
}

.checkout-pagamento:has(input:checked) {
  border-color: var(--holo-2);
  background: rgba(220, 201, 245, .05);
}

.checkout-pagamento input {
  margin-top: 4px;
  accent-color: var(--holo-2);
}

.checkout-pagamento span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-pagamento small {
  color: var(--fog);
  font-size: 12px;
}

.checkout-cupom {
  display: flex;
  margin-top: 18px;
}

.checkout-cupom input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-right: none;
  color: var(--white);
  font: inherit;
  text-transform: uppercase;
}

.checkout-cupom button {
  padding: 0 16px;
  background: none;
  border: 1px solid var(--white);
  color: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.checkout-cupom button:hover {
  background: var(--white);
  color: var(--black);
}

#checkout-cupom-mensagem {
  margin-top: 8px;
}

.checkout-item-indisponivel {
  opacity: .55;
}

.checkout-seguranca {
  margin-top: 14px;
  color: var(--fog-dim);
  font-size: 11px;
  line-height: 1.5;
}

.checkout-seguranca a {
  text-decoration: underline;
}


/* =============================================================
   PEDIDO — PIX E STATUS
============================================================= */

.pedido-check.pendente {
  color: var(--orange);
  border-color: var(--orange);
}

.pedido-check.cancelado {
  color: var(--red);
  border-color: var(--red);
}

.pedido-qr {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 18px auto;
  background: #fff;
  padding: 10px;
}

.pedido-qr:not([src]) {
  display: none;
}

.pedido-pix-copia {
  display: flex;
  gap: 8px;
  margin: 12px 0 8px;
}

.pedido-pix-copia input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  color: var(--fog);
  font-family: var(--mono);
  font-size: 12px;
}

.pedido-confirmado-historico {
  margin: 28px 0;
  text-align: left;
}


/* =============================================================
   PREÇO PROMOCIONAL
============================================================= */

.preco-original {
  color: var(--fog-dim);
  text-decoration: line-through;
  font-weight: 400;
}

/* Linha "de": preço anterior riscado + "24% OFF" */
.preco-promocao {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
}

.preco-desconto {
  color: var(--fog);
  font-weight: 700;
  letter-spacing: .04em;
}

.product-price .preco-promocao {
  margin-bottom: 4px;
  font-size: 15px;
}

.product-price .preco-atual {
  display: block;
}

/* "Atenção, última peça!" */
.aviso-ultima-peca {
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
}

.aviso-ultima-peca[hidden] {
  display: none;
}

.product-info .aviso-ultima-peca {
  margin: 4px 0 16px;
  font-size: 15px;
}

.selo-promocao {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 8px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.card-art {
  position: relative;
}


/* =============================================================
   CATÁLOGO — BUSCA, FILTROS E ESTADOS
============================================================= */

/* Busca visível também no desktop */
.shop-toolbar.catalogo-busca {
  display: flex;
}

@media (min-width: 861px) {
  .catalogo-busca .shop-filter-btn {
    display: none;
  }
}

.filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtro-chip {
  position: relative;
  cursor: pointer;
}

.filtro-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filtro-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  color: var(--fog);
  font-size: 12px;
}

.filtro-chip input:checked + span {
  border-color: var(--holo-2);
  color: var(--white);
  background: rgba(220, 201, 245, .08);
}

.filtro-chip .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fog-dim);
}

.filtro-chip input:disabled + span {
  opacity: .35;
  cursor: not-allowed;
}

.filtro-chip input:focus-visible + span {
  outline: 2px solid var(--holo-2);
  outline-offset: 2px;
}

.filtro-cor i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}

.filtro-preco {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fog);
}

.filtro-preco input {
  width: 100%;
  padding: 9px 10px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  color: var(--white);
  font: inherit;
  font-size: 13px;
}

#filtros-limpar {
  margin-top: 12px;
}

/* Card como link */
a.card-art {
  display: block;
  color: inherit;
}

a.card-name:hover {
  text-decoration: underline;
}

.selo-esgotado {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .75);
  border: 1px solid var(--line-strong);
  color: var(--fog);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.card-nota {
  color: var(--orange);
  font-size: 12px;
}

.card-nota small {
  color: var(--fog-dim);
}

/* Estados: carregando, vazio, erro */
.estado-vazio,
.estado-erro {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 50px 20px;
  border: 1px dashed var(--line-strong);
  color: var(--fog);
  text-align: center;
}

.estado-erro {
  border-color: rgba(255, 92, 92, .4);
}

.estado-carregando {
  color: var(--fog-dim);
  font-size: 13px;
}

/* Esqueleto enquanto os produtos carregam */
.card-esqueleto .card-art,
.card-esqueleto .card-info span {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.2s ease-in-out infinite;
}

.card-esqueleto .card-info span {
  display: block;
  height: 12px;
  margin-top: 10px;
}

.card-esqueleto .card-info span + span {
  width: 40%;
}

@keyframes esqueleto {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card-esqueleto .card-art,
  .card-esqueleto .card-info span {
    animation: none;
  }
}


/* =============================================================
   PRODUTO — AVALIAÇÕES E RELACIONADOS
============================================================= */

.produto-avaliacoes,
.produto-relacionados {
  padding-top: 60px;
}

.produto-avaliacoes h2 {
  margin-bottom: 24px;
  font-size: 24px;
  text-transform: uppercase;
}

.avaliacoes-resumo {
  display: grid;
  grid-template-columns: 220px minmax(0, 360px);
  gap: 40px;
  align-items: center;
  margin-bottom: 28px;
}

.avaliacoes-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avaliacoes-media strong {
  font-size: 48px;
  line-height: 1;
}

.avaliacoes-media span:last-child {
  color: var(--fog);
  font-size: 13px;
}

.estrelas {
  color: var(--orange);
  letter-spacing: 2px;
}

.avaliacoes-barra {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  gap: 10px;
  align-items: center;
  color: var(--fog);
  font-size: 12px;
}

.avaliacoes-trilho {
  height: 6px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}

.avaliacoes-trilho span {
  display: block;
  height: 100%;
  background: var(--orange);
}

.avaliacoes-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.avaliacao {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.avaliacao-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.avaliacao p {
  margin: 10px 0;
  color: var(--fog);
  line-height: 1.6;
}

.avaliacao small {
  color: var(--fog-dim);
  font-size: 12px;
}

@media (max-width: 700px) {
  .avaliacoes-resumo {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Estrelas clicáveis da avaliação (Minha conta) */
.conta-estrelas {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  border: none;
  padding: 0;
  margin: 0;
}

.conta-estrelas label {
  position: relative;
  cursor: pointer;
  font-size: 28px;
  color: var(--line-strong);
}

.conta-estrelas input {
  position: absolute;
  opacity: 0;
}

/* HTML em ordem 5→1 com row-reverse: aparece 1→5 e "~" pinta as notas menores */
.conta-estrelas label:has(input:checked),
.conta-estrelas label:has(input:checked) ~ label,
.conta-estrelas label:hover,
.conta-estrelas label:hover ~ label {
  color: var(--orange);
}

.conta-estrelas label:has(input:focus-visible) {
  outline: 2px solid var(--holo-2);
  outline-offset: 2px;
}

.conta-campo-texto,
.checkout-campo textarea {
  resize: vertical;
}


/* =============================================================
   PÁGINAS DE TEXTO (privacidade, termos, trocas, sobre, contato)
============================================================= */

.pagina-texto {
  padding: 50px 0 100px;
}

.pagina-texto-wrap {
  max-width: 760px;
}

.pagina-texto h1 {
  margin: 12px 0 8px;
  font-size: clamp(30px, 5vw, 48px);
  text-transform: uppercase;
}

.pagina-texto h2 {
  margin: 36px 0 12px;
  font-size: 18px;
  text-transform: uppercase;
}

.pagina-texto p,
.pagina-texto li {
  color: var(--fog);
  font-size: 15px;
  line-height: 1.75;
}

.pagina-texto ul,
.pagina-texto ol {
  padding-left: 20px;
}

.pagina-texto a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-texto strong {
  color: var(--white);
}

.pagina-atualizacao {
  font-size: 12px !important;
  color: var(--fog-dim) !important;
}

.pagina-destaque {
  font-size: 20px !important;
  color: var(--white) !important;
}

.pagina-texto details {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.pagina-texto summary {
  cursor: pointer;
  font-weight: 600;
}

.contato-canais {
  list-style: none;
  padding: 0 !important;
}


/* =============================================================
   MENU MOBILE (painel lateral do botão ☰)
============================================================= */
.menu-mobile-fundo{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .3s ease;
}
.menu-mobile-fundo.aberto{ opacity: 1; }

.menu-mobile{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 301;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-mobile.aberto{ transform: translateX(0); }

body.menu-mobile-ativo{ overflow: hidden; }

.menu-mobile-topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.menu-mobile-logo img{ height: 32px; width: auto; display: block; }

.menu-mobile-fechar{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
}

.menu-mobile-nav ul{ list-style: none; margin: 0; padding: 0; }

.menu-mobile-nav > ul > li{ border-bottom: 1px solid var(--line); }

.menu-mobile-nav > ul > li > a,
.menu-mobile-secao{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  background: none;
  border: 0;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}

.menu-mobile-seta{
  font-size: 12px;
  color: var(--fog);
  transition: transform .2s ease;
}
.menu-mobile-secao[aria-expanded="true"] .menu-mobile-seta{ transform: rotate(180deg); }

.menu-mobile-sub{ padding: 0 0 10px; }
.menu-mobile-sub[hidden]{ display: none; }

.menu-mobile-sub a,
.menu-mobile-carregando{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px 0 28px;
  color: var(--fog);
  font-size: 14px;
}
.menu-mobile-sub a:hover,
.menu-mobile-sub a:focus-visible{ color: var(--white); }
.menu-mobile-sub .menu-mobile-destaque{ color: var(--white); font-weight: 700; }
.menu-mobile-carregando{ font-size: 13px; }

.menu-mobile a:focus-visible,
.menu-mobile button:focus-visible{
  outline: 2px solid var(--white);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce){
  .menu-mobile, .menu-mobile-fundo, .menu-mobile-seta{ transition: none; }
}


/* =============================================================
   HOME NO CELULAR: BANNER DE TELA CHEIA
   Foto do carrossel ocupando a largura e quase toda a altura
   visível, com slogan e logo no alto e o botão embaixo, por cima
   da foto (referência: banners de marcas de streetwear no mobile).
   Desktop continua com texto ao lado da imagem.
============================================================= */
@media (max-width: 860px){

  .hero{
    padding: 0;
    border-bottom: 0;
  }

  .hero .wrap.hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    max-width: none;
  }

  /* Texto e foto ocupam a mesma célula: o texto fica por cima */
  .hero-grid > .hero-copy,
  .hero-grid > .hero-media{
    grid-area: 1 / 1;
  }

  .hero-media,
  .hero-media.hero-carrossel{
    /* Altura da tela menos o cabeçalho (60px + barra ~56px) */
    height: calc(100svh - 116px);
    min-height: 480px;
    max-height: 860px;
    border: 0;
  }

  .hero-copy{
    position: relative;
    z-index: 2;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 28px 20px 64px;
    /* Sombra só embaixo, para o botão aparecer em qualquer foto */
    background: linear-gradient(to bottom,
      rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%);
    pointer-events: none; /* o toque na foto continua levando ao catálogo */
  }

  /* O banner do celular já traz logo e slogan na arte: aqui fica só o botão */
  .hero-copy .hero-tagline,
  .hero-copy .hero-logo{
    display: none;
  }

  /* Slogan pequeno acima do logo (caso volte a ser exibido) */
  .hero-copy .hero-tagline{
    order: -1;
    margin: 0 0 10px;
    max-width: 300px;
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--white);
  }

  .hero-copy .hero-logo{
    width: min(78%, 340px);
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
  }

  .hero-copy .hero-campaign-title{
    display: none;
  }

  .hero-copy .hero-cta{
    margin-top: auto;
    pointer-events: auto;
  }

  /* Botão claro e arredondado, centralizado embaixo */
  .hero-copy .hero-cta .btn{
    background: var(--white);
    color: #000;
    border-color: var(--white);
    border-radius: 999px;
    padding: 14px 40px;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
  }

  /* Pontos do carrossel acima da borda, abaixo do botão */
  .hero-dots{
    bottom: 22px;
    z-index: 3;
  }
}


/* =============================================================
   CARD DE PRODUTO — SELO "% OFF" E BOTÃO "COMPRAR"
   (script.js: criarCardProduto)
============================================================= */

/* Selo de desconto em pílula no canto da foto ("26% OFF").
   Só existe no HTML quando o produto tem desconto. */
.selo-promocao {
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* O card vira coluna de altura cheia: o botão fica sempre
   alinhado embaixo, mesmo com nomes de tamanhos diferentes */
.grid > .card {
  height: 100%;
}

.card-info {
  flex: 1;
}

/* "Comprar": mesmo gradiente metálico do "Adicionar ao carrinho",
   com bordas arredondadas */
.card-comprar {
  border-radius: 10px;
  justify-content: center;
  width: 100%;
  padding: 12px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
}

.card-comprar[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  animation: none;
}

@media (max-width: 560px) {
  .card-comprar {
    padding: 11px 6px;
    font-size: 11px;
  }

  .selo-promocao {
    top: 8px;
    left: 8px;
    padding: 5px 9px;
    font-size: 10px;
  }
}