/* ====== Base & tokens ====== */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #141418;
  --muted:#6b7280;
  --primary:#e11d48;
  --primary-2:#c21740;
  --ring: rgba(225,29,72,.25);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --container: min(1120px, 100% - clamp(16px, 4vw, 40px));
  --space: clamp(14px, 2.6vw, 24px);
  --gradient: radial-gradient(900px 500px at 10% -10%, #ffe3eb 0, transparent 60%),
              radial-gradient(900px 500px at 95% 0%, #ffe7f0 0, transparent 60%),
              linear-gradient(#fff, #fff);
}

[data-theme="dark"]{
  --bg:#0b0b0c;
  --surface:#121316;
  --text:#f5f6f7;
  --muted:#a0a6b0;
  --primary:#ef436d;
  --primary-2:#cf2351;
  --ring: rgba(239,67,109,.25);
  --shadow: 0 12px 34px rgba(0,0,0,.45);
  --gradient: radial-gradient(900px 500px at 10% -10%, #221018 0, transparent 60%),
              radial-gradient(900px 500px at 95% 0%, #1c0f19 0, transparent 60%),
              linear-gradient(#0b0b0c,#0b0b0c);
}

/* ====== Reset/Primitivos ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  background:var(--gradient); color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: 124px; /* altura aproximada da navbar */
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px dashed var(--primary); outline-offset:3px}

.container{width:var(--container); margin-inline:auto}

.btn{
  display:inline-flex; gap:.6rem; align-items:center; justify-content:center; cursor:pointer;
  padding:.9rem 1.1rem; border-radius:999px; border:1px solid transparent; font-weight:600; transition:.18s ease
}
.btn-primary{
  background:var(--primary); color:#fff; box-shadow:0 10px 22px var(--ring)
}
.btn-primary:hover{transform:translateY(-1px); background:var(--primary-2)}
.btn-ghost{
  background:transparent;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent)
}

.field{
  flex:1 1 240px;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  background:#fff; border-radius:999px; padding:.8rem 1rem
}
[data-theme="dark"] .field{background:#fff}

.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:999px;
  background:color-mix(in oklab, #fff 70%, transparent);
  border:1px solid color-mix(in oklab, #fff 80%, transparent);
  backdrop-filter:blur(6px)
}
[data-theme="dark"] .chip{
  background:color-mix(in oklab, #000 40%, transparent);
  border-color: color-mix(in oklab, #fff 12%, transparent)
}

/* ====== Navbar / Drawer ====== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  backdrop-filter: saturate(1.1) blur(10px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--surface) 88%, transparent),
    transparent
  );
  border-bottom: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; padding:.7rem 0
}
.brand img{ height: clamp(36px, 7.5vw, 72px); }
.nav-links{display:flex; gap:.6rem; align-items:center}
.nav-actions{display:flex; gap:.5rem; align-items:center}
.icon-btn{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:999px;
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  transition:.18s ease;
  /* NOVO: todos os ícones usam a cor de texto atual */
  color: var(--text);
}

/* 🔍 container da busca que expande a partir da lupa */
.nav-search{
  display:flex;
  align-items:center;
  height:42px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  overflow:hidden;
  width:42px;           /* começa só como uma bolinha (igual à lupa) */
  padding:0;            /* sem padding quando fechado */
  transition:
    width .22s ease,
    padding .18s ease,
    background .18s ease,
    border-color .18s ease;
}

/* quando abre, vira uma pílula com campo de texto */
.nav-search.open{
  width:min(260px, 72vw);
  padding:0 .6rem;
}

/* dentro do container, a lupa vira só o ícone (sem o fundo extra) */
.nav-search .icon-btn{
  width:42px;
  height:42px;
  border:none;
  background:transparent;
  box-shadow:none;
}

/* campo de texto “escondido” quando fechado */
.nav-search input[type="search"]{
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:.85rem;
  width:100%;
  opacity:0;
  pointer-events:none;
  padding:0;
  transform:translateX(6px);
  transition:opacity .18s ease, transform .18s ease;
}

.nav-search input[type="search"]::placeholder{
  color:color-mix(in oklab, var(--muted) 65%, transparent);
}

/* quando abre, o input aparece e fica clicável */
.nav-search.open input[type="search"]{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

/* Barra de coleções (TAGs) logo abaixo do menu principal */
.nav-tags-bar{
  padding: 0 0 .35rem;
  display:flex;
  justify-content:center;   /* centraliza o conteúdo dentro do container */
}

.nav-tags{
  display:flex;
  align-items:center;
  justify-content:center;   /* garante que os chips fiquem centralizados */
  gap:.4rem;
  overflow-x:auto;
  padding:.25rem 0 .1rem;
}



/* Deixa as tags um pouquinho menores que as categorias */
.nav-tags .chip{
  font-size:.8rem;
}

/* Opcional: esconder no mobile se ficar carregado demais
@media (max-width: 880px){
  .nav-tags-bar{
    display:none;
  }
}
*/





/* NOVO: força os SVGs (lupa, carrinho, coração, etc.) a usarem essa cor */
.icon-btn svg{
  stroke: currentColor;
  /* se algum tiver fill, isso evita ele ficar chapado e “sumir” */
  fill: none;
}

/* NOVO: melhora o contraste do fundo dos ícones no dark */
[data-theme="dark"] .icon-btn{
  background: color-mix(in oklab, #000 45%, transparent);
  border-color: color-mix(in oklab, #fff 12%, transparent);
}


/* Botão de tema: lua/sol */
#themeToggle{
  color: var(--text); /* garante que o ícone sempre use a cor do texto */
}

/* Tamanho padrão dos ícones */
#themeToggle .icon-moon,
#themeToggle .icon-sun{
  width:20px;
  height:20px;
}

/* Padrão: tema CLARO -> mostra LUA, esconde SOL */
#themeToggle .icon-moon{ display:block; }
#themeToggle .icon-sun{ display:none; }

/* Tema ESCURO -> mostra SOL, esconde LUA */
[data-theme="dark"] #themeToggle .icon-moon{ display:none; }
[data-theme="dark"] #themeToggle .icon-sun{ display:block; }


.icon-btn:hover{transform:translateY(-1px)}
.menu-btn{display:none}
@media (max-width: 880px){
  .nav-links{display:none}
  .menu-btn{display:grid}
}

.drawer{
  position:fixed; inset:0 0 0 auto;
  width:min(86vw, 360px);
  translate:100% 0;
  transition:translate .24s ease;
  background:var(--surface);
  box-shadow:-10px 0 30px rgba(0,0,0,.18); z-index:70;
  padding:20px; display:flex; flex-direction:column; gap:.7rem
}
.drawer.open{translate:0 0}
body.menu-open{overflow:hidden}

/* ====== Hero ====== */
header{
  scroll-margin-top:80px;
}

.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:var(--space);
  align-items:center;
  padding:clamp(20px, 6vw, 56px) 0;
}

/* Empilha no mobile */
@media (max-width:980px){
  .hero{
    grid-template-columns:1fr;
    gap:clamp(18px, 4vw, 24px);
  }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  background:var(--surface);
}

.hero h1{
  font-size:clamp(1.7rem, 4.6vw, 3.1rem);
  line-height:1.1;
  margin:.6rem 0 .4rem;
  letter-spacing:-.015em;
}

.hero p{
  color:var(--muted);
  max-width:60ch;
}

.cta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.8rem;
}

/* ====== HERO MEDIA ====== */
.hero-media{
  position:relative;
}

.hero-media .media-wrap{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);

  width:100%;
  max-width:630px;       /* limita no desktop */
  aspect-ratio:2 / 1;    /* formato “vertical chique” */
  margin-left:auto;      /* encosta à direita no desktop */
}

/* vídeo + imagem ocupando tudo */
.hero-media .media-wrap .bgvid,
.hero-media .media-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-media .media-wrap .bgvid{
  z-index:0;
  pointer-events:none;
  transform:translateZ(0);
}

.hero-media .media-wrap img{
  z-index:1;
}

/* pílulas embaixo do vídeo */
.pill-row{
  position:absolute;
  inset:auto auto -14px 10px;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  z-index:3;
}

/* Centraliza o vídeo quando empilha */
@media (max-width:980px){
  .hero-media .media-wrap{
    margin:0 auto;
  }
}

/* No mobile bem pequeno as pílulas descem */
@media (max-width:560px){
  .pill-row{
    position:static;
    margin-top:.6rem;
  }
}


/* ====== Sections / Controles ====== */
.section{padding: clamp(14px, 3vw, 24px) 0}
.section h2{
  font-size:clamp(1.3rem, 3vw, 2rem);
  margin: 0 0 .6rem
}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; flex-wrap:wrap
}
.section-head .controls{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap
}

.section-head .search-box{
  position:relative;
  min-width:min(260px, 100%);
}

.section-head .search-box input[type="search"]{
  width:100%;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface);
  color:var(--text);
  font:inherit;
}

.section-head .search-box input[type="search"]::placeholder{
  color:color-mix(in oklab, var(--muted) 70%, transparent);
}

/* ====== Toolbar de categoria (filtros + ordenação) ====== */
.category-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin: .2rem 0 1rem;
  flex-wrap:wrap;
}

.category-count{
  font-size:.9rem;
  color:var(--muted);
}

.category-controls{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  font-size:.85rem;
}

.category-control{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .65rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface);
}

.category-control input[type="checkbox"]{
  width:16px;
  height:16px;
}

.category-control select{
  border:0;
  background:transparent;
  font:inherit;
  padding:0;
  outline:none;
  cursor:pointer;
}

@media (max-width:640px){
  .category-toolbar{
    align-items:flex-start;
  }
  .category-controls{
    justify-content:flex-start;
  }
}


/* Botão "Ver todos" abaixo dos cards */
.section-foot{
  margin-top: .9rem;
  display: flex;
  justify-content: center;  /* centraliza abaixo da grade */
}

/* Se um dia quiser alinhar à direita, é só trocar para:
.section-foot{
  justify-content: flex-end;
}
*/



/* ====== Grid de cards ====== */
.grid{
  display:grid;
  gap:clamp(12px, 2.4vw, 20px);
  --col-min: clamp(180px, 28vw, 260px);
  grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
}
.grid.grid-std{
  --col-min: clamp(200px, 24vw, 260px);
}

/* ====== Filtros de categoria ====== */

.category-layout{
  display:grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap:clamp(14px, 3vw, 24px);
  align-items:flex-start;
}

@media (max-width: 900px){
  .category-layout{
    grid-template-columns: minmax(0, 1fr);
  }
}

.category-filters{
  position:sticky;
  top:90px;
  align-self:flex-start;
  background:var(--surface);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:.9rem 1rem;
  font-size:.9rem;
}

.category-filters h2{
  margin:.1rem 0 .6rem;
  font-size:1rem;
}

/* Botão "Filtros" para mobile */
.category-filters-toggle{
  display:none; /* só aparece no mobile */
  margin-bottom:.75rem;
  padding:.4rem .75rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface);
  font-size:.85rem;
  cursor:pointer;
  align-items:center;
  gap:.35rem;
}

.category-filters-toggle svg{
  flex-shrink:0;
}

/* Comportamento responsivo dos filtros */
@media (max-width: 900px){
  .category-filters-toggle{
    display:inline-flex;
  }

  .category-filters{
    display:none;       /* escondido por padrão no mobile */
  }

  .category-filters.is-open{
    display:block;      /* mostra quando tiver a classe is-open */
    margin-bottom:.75rem;
  }
}


.filter-group{
  margin-bottom:.75rem;
  border-top:1px solid color-mix(in oklab, var(--text) 6%, transparent);
  padding-top:.6rem;
}

.filter-group:first-of-type{
  border-top:0;
  padding-top:0;
}

.filter-group-title{
  font-weight:600;
  font-size:.9rem;
  margin-bottom:.35rem;
}

.filter-list{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.filter-pill{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface);
  cursor:pointer;
  font-size:.82rem;
}

.filter-pill input{
  accent-color:var(--primary);
}

.filter-pill-active{
  background:color-mix(in oklab, var(--primary) 12%, transparent);
  border-color:var(--primary);
}

.category-filters .filter-reset{
  margin-top:.4rem;
  font-size:.8rem;
  background:none;
  border:0;
  padding:0;
  color:var(--primary);
  cursor:pointer;
  text-decoration:underline;
}


.tabs{display:flex; flex-wrap:wrap; gap:.5rem}
.tab{
  padding:.55rem .9rem; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface);
  cursor:pointer
}
.tab.active{
  background:var(--text); color:var(--bg)
}

/* Tabs sempre com texto na cor do tema */
.tabs .tab{
  color: var(--text);
}

/* Tema escuro: tabs com mais contraste */
[data-theme="dark"] .tabs .tab{
  background: color-mix(in oklab, #000 40%, transparent);
  border-color: color-mix(in oklab, #fff 18%, transparent);
  color: var(--text);
}

/* Tab ativa no dark: destaque em rosa */
[data-theme="dark"] .tabs .tab.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Links de categoria no menu (estado ativo) */
.nav-links .chip.active,
.nav-tags .chip.active{
  background: var(--text);
  color: var(--bg);
  border-color: color-mix(in oklab, var(--text) 15%, transparent);
}

[data-theme="dark"] .nav-links .chip.active,
[data-theme="dark"] .nav-tags .chip.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}



/* ====== Product Card ====== */
.card{
  background:var(--surface); border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column
}
.px{padding-inline:.9rem}

.product .photo{
  position:relative;
}

/* ====== Detalhe do produto (product.html) ====== */

#productDetail .photo{
  padding:1rem;
}

/* área principal da imagem grande */
#productDetail .product-gallery-main{
  border-radius:18px;
  overflow:hidden;
  background:#f3f4f6;
}

[data-theme="dark"] #productDetail .product-gallery-main{
  background:#111827;
}

#productDetail .product-gallery-main img{
  width:100%;
  display:block;
  object-fit:cover;
  max-height:520px;
}

/* faixa de miniaturas */
#productDetail .product-gallery-thumbs{
  margin-top:.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}

#productDetail .product-gallery-thumb{
  border:0;
  padding:0;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  outline:2px solid transparent;
  outline-offset:2px;
}

#productDetail .product-gallery-thumb img{
  width:60px;
  height:60px;
  display:block;
  object-fit:cover;
}

/* miniatura selecionada / hover */
#productDetail .product-gallery-thumb.active{
  outline-color:var(--primary);
}

#productDetail .product-gallery-thumb:not(.active):hover{
  outline-color:color-mix(in oklab, var(--primary) 40%, transparent);
}


/* Área da imagem do card – tamanho fixo */
.product .carousel{
  position:relative;
  overflow:hidden;
  border-radius:18px 18px 0 0;
  /* Define o tamanho do "card de imagem": sempre mesma proporção */
  aspect-ratio: 4 / 5;
}

/* As duas imagens empilhadas uma em cima da outra */
.product .carousel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: opacity .35s ease, transform .35s ease;
}

/* Estado normal: mostra a principal, esconde a de hover */
.product .carousel img.img-main{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

.product .carousel img.img-hover{
  opacity:0;
  transform:scale(1.05); /* leve zoom pra dar efeito quando entra */
  z-index:2;
}

/* Quando passa o mouse no card: troca as imagens */
.product.card:hover .carousel img.img-main,
.product:hover .carousel img.img-main{
  opacity:0;
  transform:scale(1.05);
}

.product.card:hover .carousel img.img-hover,
.product:hover .carousel img.img-hover{
  opacity:1;
  transform:scale(1);
}

/* Se sobrar algum HTML antigo de dot/arrows, esconde */
.product .carousel .dotbar,
.product .carousel .nav-arrow{
  display:none !important;
}


.badge{
  position:absolute; top:.6rem; left:.6rem; font-size:.78rem; z-index:4
}
.fav{
  position:absolute; top:.6rem; right:.6rem; z-index:4
}

/* Botão de favorito (coração) */
.icon-btn.fav{
  /* tira a borda forte e usa um fundo translúcido */
  border: 0;
  background: color-mix(in oklab, #fff 70%, transparent);
}

/* No dark, fundo escuro translúcido pra destacar o coração claro */
[data-theme="dark"] .icon-btn.fav{
  background: color-mix(in oklab, #000 60%, transparent);
}


.product .info{
  padding:.85rem .9rem;
  display:flex; flex-direction:column; gap:.4rem
}
.title{font-weight:600; margin:0 0 .25rem; font-size:1rem}
.price{
  color:var(--primary); font-weight:700;
  display:flex; gap:.4rem; align-items:center
}
.price del{color:var(--muted); font-weight:500}
.discount{font-size:.78rem; color:#16a34a; font-weight:700}
.actions{display:flex; gap:.5rem; margin-top:auto}
.actions .btn{flex:1; padding:.7rem .9rem}

/* ====== Banner (vídeo + imagem fallback) ====== */
.banner{
  position:relative; isolation:isolate;
  border-radius:22px; overflow:hidden;
  margin:clamp(20px, 5vw, 48px) 0;
  aspect-ratio: 16 / 9;
}

.banner > video.bgvid,
.banner > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
}

.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 95%);
  pointer-events:none; mix-blend-mode:multiply; z-index:1;
}

.banner .content{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end;
  padding:clamp(14px, 3.2vw, 32px);
  padding-bottom:clamp(14px, 5vw, 40px)
}

.banner .glass{
  background:color-mix(in oklab, #fff 65%, transparent);
  border:1px solid color-mix(in oklab, #fff 75%, transparent);
  border-radius:18px; backdrop-filter:blur(8px);
  padding:clamp(12px, 2.2vw, 22px);
  max-width:min(520px, 92%)
}
[data-theme="dark"] .banner .glass{
  background:color-mix(in oklab, #000 45%, transparent);
  border-color: color-mix(in oklab, #fff 12%, transparent)
}

/* ====== Benefícios ====== */
.benefits{
  display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.8rem
}
.benefit{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .7rem; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--surface)
}

/* ====== Newsletter + Footer ====== */
.newsletter{
  display:grid; grid-template-columns: 1.2fr .8fr;
  align-items:center; gap:.9rem;
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  border-radius:20px;
  padding:clamp(14px, 2.4vw, 22px)
}
@media (max-width:880px){
  .newsletter{grid-template-columns:1fr}
}

footer{
  padding: clamp(24px, 4vw, 60px) 0;
  color: var(--muted);
}

.site-footer{
  margin-top: clamp(24px, 5vw, 60px);
  background: var(--surface);
  border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}

/* Layout geral */

.foot-top{
  display: grid;
  /* 3 colunas: marca (mais larga) + ajuda + contato/pagamento */
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: clamp(16px, 2.8vw, 32px);
  align-items: flex-start;
}


.foot-col{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.foot-col-brand{
  max-width: 320px;
}

.foot-bottom{
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.foot-bottom-left{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Títulos e textos */

.foot-title{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
}

.foot-text{
  font-size: .9rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--text) 55%, var(--muted));
  margin: .25rem 0 .5rem;
}

.foot-legal{
  font-size: .78rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--muted) 85%, var(--text));
}

.foot-legal-secondary{
  opacity: .9;
}

.foot-dot{
  margin: 0 .35rem;
}

/* Listas */

.foot-links,
.foot-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.foot-links a{
  font-size: .9rem;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color .2s ease, transform .2s ease;
}

.foot-links a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width .2s ease;
}

.foot-links a:hover{
  color: var(--text);
  transform: translateX(2px);
}

.foot-links a:hover::after{
  width: 100%;
}

/* Contato */

.foot-contact li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .65rem;
  align-items: flex-start;
  font-size: .9rem;
}

.foot-contact-ico{
  font-size: .9rem;
  line-height: 1.2;
}

.foot-contact a{
  text-decoration: none;
  color: var(--muted);
}

.foot-contact a:hover{
  color: var(--text);
}

/* Selos / badges */

.foot-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: .25rem 0 .75rem;
  list-style: none;
}

.foot-badges li{
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
  white-space: nowrap;
}

/* Social */

.foot-social{
  display: flex;
  gap: .55rem;
  margin-top: .25rem;
}

.sbtn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.sbtn svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.sbtn:hover{
  transform: translateY(-1px);
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, var(--bg));
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

/* Pagamentos */

.foot-payments-wrap{
  margin-top: .75rem;
}

.foot-payments-label{
  display: block;
  font-size: .78rem;
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: color-mix(in oklab, var(--muted) 80%, var(--text));
}

.payments{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin:.3rem 0 0;
  padding:0;
  list-style:none;
}

.pm-ico{
  height:22px;
  display:block;
}

/* Links legais do rodapé */

.legal-links{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-links a{
  font-size: .78rem;
  text-decoration: none;
  color: color-mix(in oklab, var(--muted) 90%, var(--text));
}

.legal-links a:hover{
  color: var(--text);
}

/* Responsivo */

@media (max-width: 1024px){
  .foot-top{
    /* 2 colunas abaixo de 1024px */
    grid-template-columns: 1fr 1fr;
  }

  /* Marca ocupa a linha inteira, e as outras duas colunas ficam embaixo */
  .foot-col-brand{
    grid-column: 1 / -1;
    max-width: none;
  }
}


@media (max-width: 768px){
  .foot-top{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  .foot-top{
    grid-template-columns: 1fr;
  }

  .foot-bottom{
    align-items: flex-start;
  }
}


/* ====== Carrinho ====== */

.cart-layout{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap:clamp(14px, 3vw, 24px);
  align-items:flex-start;
}

@media (max-width: 900px){
  .cart-layout{
    grid-template-columns: minmax(0, 1fr);
  }
}

.cart-items{
  display:grid;
  gap:clamp(10px, 1.8vw, 14px);
}

.cart-item{
  flex-direction:row;
  align-items:stretch;
  padding:.8rem .9rem;
  gap:.8rem;
}

.cart-item-main{
  display:flex;
  gap:.7rem;
  flex:1;
}

.cart-thumb{
  width:84px;
  height:84px;
  border-radius:12px;
  overflow:hidden;
  background:#f3f4f6;
  flex-shrink:0;
}
[data-theme="dark"] .cart-thumb{
  background:#111827;
}
.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cart-info{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.cart-info h2{
  font-size:.98rem;
  margin:0;
}
.cart-unit{
  margin:0;
  font-size:.88rem;
  color:var(--muted);
}
.cart-unit span{
  font-size:.8rem;
  opacity:.9;
}
.cart-stock{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
}

.cart-remove{
  margin-top:.2rem;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  font-size:.8rem;
  text-decoration:underline;
  cursor:pointer;
  align-self:flex-start;
}

.cart-item-side{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  min-width:120px;
  gap:.35rem;
}

.qty-control{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
}
.qty-btn{
  width:26px;
  height:26px;
  border-radius:999px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
}
.qty-value{
  min-width:26px;
  text-align:center;
  font-size:.9rem;
}

.cart-line{
  font-weight:700;
  color:var(--primary);
  font-size:.95rem;
}

/* Resumo */
.cart-summary{
  padding:1rem;
  position:sticky;
  top:90px;
}
@media (max-width: 900px){
  .cart-summary{
    position:static;
  }
}
.cart-summary h2{
  margin:.1rem 0 .6rem;
  font-size:1.1rem;
}
.cart-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.35rem;
  font-size:.9rem;
}
.cart-summary-row strong{
  font-size:.98rem;
}

.cart-cep{
  flex:1;                 /* ocupa toda a largura disponível na linha */
  display:flex;
  flex-direction:column;  /* campo em cima, botão embaixo */
  align-items:stretch;
  gap:.35rem;
}


/* CEP + CPF exatamente com o mesmo tamanho visual */
.cart-cep-input,
.cart-cpf-input{
  flex:1 1 0;
  min-width:0;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  padding:.55rem .9rem;
  font-size:.95rem;
  background:#ffffff;
  color:var(--text);
  height:42px;
  line-height:1.2;
}

/* No tema escuro deixa o fundo clarinho e o texto escuro */
[data-theme="dark"] .cart-cep-input,
[data-theme="dark"] .cart-cpf-input{
  background:#f9fafb;
  color:#111827;
}

/* Placeholder visível */
.cart-cep-input::placeholder,
.cart-cpf-input::placeholder{
  color:#9ca3af;
  opacity:1;
}

/* Destaque de foco */
.cart-cep-input:focus-visible,
.cart-cpf-input:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Botão "Calcular" alinhado na mesma altura do input */
.cart-cep-btn{
  white-space:nowrap;
  padding:0 1rem;
  font-size:.85rem;
  height:42px;
  border-radius:999px;
}


.cart-summary-total span{
  font-weight:600;
}
.cart-summary-total strong{
  font-size:1.02rem;
}


.cart-tip{
  margin:.6rem 0 .8rem;
  font-size:.85rem;
  color:var(--muted);
}
.cart-tip strong{
  color:var(--primary);
}

.cart-summary .btn{
  width:100%;
  margin-top:.35rem;
}

/* Estado vazio */
.cart-empty{
  text-align:center;
  padding:1.4rem 1rem;
}

/* ====== Meus pedidos ====== */

.orders-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.order-card{
  padding:1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.order-actions{
  margin-top:.45rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
}

.order-tracking{
  color:var(--muted);
}

.order-track-btn{
  padding:.35rem .9rem;
  font-size:.8rem;
}

@media (max-width: 640px){
  .order-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
  }
}


.order-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0.75rem;
  border-bottom:1px solid rgba(148, 163, 184, .25);
  padding-bottom:0.5rem;
}

.order-head > div:first-child{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.order-code{
  font-weight:600;
  font-size:.95rem;
}

.order-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .7rem;
  border-radius:999px;
  font-size:.75rem;
  background:rgba(225,29,72,.06);
  color:var(--primary);
}

/* Cores por status (Meus pedidos) */

/* Aguardando pagamento / em análise */
.order-status--pending,
.order-status--in-process,
.order-status--in-mediation,
.order-status--authorized{
  background:rgba(245,158,11,.10); /* laranja claro */
  color:#b45309;
}

/* Pago / em preparação / enviado / entregue */
.order-status--paid,
.order-status--approved,
.order-status--processing,
.order-status--separating,
.order-status--shipped,
.order-status--delivered{
  background:rgba(16,185,129,.12); /* verde claro */
  color:#047857;
}

/* Pagamento não concluído / expirado / cancelado */
.order-status--failed,
.order-status--rejected,
.order-status--expired,
.order-status--canceled,
.order-status--cancelled{
  background:rgba(239,68,68,.10); /* vermelho claro */
  color:#b91c1c;
}

/* Reembolso / chargeback */
.order-status--refunded,
.order-status--charged-back{
  background:rgba(59,130,246,.10); /* azul */
  color:#1d4ed8;
}


.order-meta{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  font-size:.8rem;
  color:var(--muted);
  text-align:right;
}

.order-body{
  padding-top:0.25rem;
}

.order-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.order-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
  padding:.3rem 0;
  border-bottom:1px dashed rgba(148, 163, 184, .3);
}

.order-item:last-child{
  border-bottom:none;
}

.order-item strong{
  font-size:.9rem;
}

.order-item small{
  font-size:.8rem;
  color:var(--muted);
}

.order-item-values{
  text-align:right;
  font-size:.85rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.order-item-values span{
  color:var(--muted);
}

.order-item-values strong{
  font-weight:600;
}

.order-foot{
  border-top:1px solid rgba(148, 163, 184, .25);
  padding-top:.5rem;
  margin-top:.25rem;
}

.order-actions{
  margin-top:.45rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
}

.order-tracking{
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.order-tracking strong{
  color:var(--text);
}

.order-tracking small{
  font-size:.75rem;
}

.order-track-btn{
  padding:.35rem .9rem;
  font-size:.8rem;
}

@media (max-width: 640px){
  .order-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
  }
}


/* Mobile: quebra melhor o cabeçalho do pedido */
@media (max-width: 640px){
  .order-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .order-meta{
    text-align:left;
    flex-direction:row;
    flex-wrap:wrap;
    gap:.4rem;
  }
}

.order-item-main{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}

.order-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(148,163,184,.18);
}

.order-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.order-item-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}



/* ====== Ajustes extras para tema escuro ====== */

/* Garante texto legível no tema escuro */
[data-theme="dark"] body{
  background:var(--gradient);
  color:var(--text);
}

/* Cabeçalhos e parágrafos */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p{
  color:var(--text);
}

/* Cartões principais (produto, carrinho vazio etc.) */
[data-theme="dark"] .card,
[data-theme="dark"] .drawer{
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* Botões em destaque */
[data-theme="dark"] .btn-primary{
  background:var(--primary);
  color:#fff;
}
[data-theme="dark"] .btn-ghost{
  color:var(--text);
}

/* Páginas internas específicas */
[data-theme="dark"] #productDetail,
[data-theme="dark"] #cartPage{
  color:var(--text);
}
[data-theme="dark"] #cartPage header p{
  color:var(--muted);
}


/* ====== Toast ====== */
.toast{
  position:fixed;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg);
  padding:.7rem .9rem; border-radius:12px;
  display:none; z-index:90
}
.toast.show{
  display:block;
  animation:fade 2.2s ease both
}
@keyframes fade{
  0%{opacity:0; transform:translate(-50%, 8px)}
  10%{opacity:1; transform:translate(-50%, 0)}
  90%{opacity:1}
  100%{opacity:0; transform:translate(-50%, 8px)}
}

/* ====== Vídeo: estados e acessibilidade ====== */
.bgvid.video-error{
  display:none !important;
}

@media (prefers-reduced-motion: reduce){
  .bgvid{ display:none !important; }
}

@media (max-width: 980px){
  .hero{
    gap: 18px;
    padding: 24px 0 32px;
  }

  .hero-media .media-wrap{
    margin: 0 auto;   /* centraliza quando estiver em 1 coluna */
    max-width: 100%;  /* garante largura total do container */
  }
}

@media (max-width: 600px){
  .hero h1{
    font-size:clamp(1.7rem, 7vw, 2.4rem);
  }
}

.nav-tags-bar.is-empty{
  display:none;
}

/* ===== Auth / Perfil ===== */

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  min-width: 220px;
  padding: 0.75rem;
  z-index: 40;
}

.nav-actions {
  position: relative; /* garante contexto pro dropdown */
}

.profile-dropdown-header {
  margin-bottom: 0.5rem;
}
.profile-dropdown-header span {
  font-weight: 600;
}
.profile-dropdown-header small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.profile-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
}
.profile-dropdown-item:hover {
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}

/* ===== Modal auth ===== */

/* garante que o hidden realmente esconda o modal */
.modal-backdrop[hidden] {
  display: none !important;
}

/* visual do backdrop quando estiver visível */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;              /* só funciona quando NÃO tem hidden */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  z-index: 60;
  padding: 1.5rem;
}


.modal {
  width: min(500px, 92vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .3);
  padding: 1.3rem 1.4rem 1.4rem;
  position: relative;
}

.modal-title {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}

.auth-tabs {
  display: inline-flex;
  gap: .4rem;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border-radius: 999px;
  padding: .2rem;
  margin-bottom: .9rem;
}
.auth-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .9rem;
  cursor: pointer;
  color: var(--muted);
}
.auth-tab.is-active {
  background: var(--primary);
  color: #fff;
}

.auth-form {
  display: none;
  display: none;
  display: none;
  /* a gente liga via classe abaixo */
}
.auth-form.auth-form--active {
  display: grid;
  gap: .6rem;
}

.field-group {
  display: grid;
  gap: .2rem;
}
.field-group label {
  font-size: .85rem;
}

.field-row {
  display: grid;
  gap: .6rem;
}
@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.check-lgpd {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .8rem;
  color: var(--muted);
}
.check-lgpd input {
  margin-top: .15rem;
}

/* Ajuda */
.w-full {
  width: 100%;
}

/* ====== Minha conta / Meus dados ====== */

.account-header{
  margin-bottom: 1.5rem;
}

.account-layout{
  display: grid;
  gap: clamp(1rem, 3vw, 1.8rem);
}

@media (min-width: 900px){
  .account-layout{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr);
  }
}

.account-card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
}

.account-card h2{
  margin: 0 0 .75rem;
  font-size: 1.1rem;
}

.account-form{
  display: grid;
  gap: .75rem;
}

.account-card label{
  font-size: .85rem;
  font-weight: 500;
}

.account-card input{
  width: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  padding: .5rem .6rem;
  font: inherit;
  background: var(--surface);
}

.account-card small.helper{
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--muted);
}

.account-address-empty{
  font-size: .85rem;
  color: var(--muted);
}

.account-actions{
  margin-top: .75rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ====== Cookie banner ====== */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: .75rem;
  z-index: 60;
  pointer-events: none; /* só o card interno recebe clique */
}

.cookie-banner-inner {
  pointer-events: auto;
  width: min(520px, 100%);
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .75rem;
  font-size: .86rem;
}

[data-theme="dark"] .cookie-banner-inner {
  background: #111217;
}

.cookie-banner-text p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.cookie-banner--hidden {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

@media (max-width: 600px) {
  .cookie-banner-inner {
    width: 100%;
    padding: .9rem .9rem 1rem;
  }

  .cookie-banner-actions {
    justify-content: stretch;
  }

  .cookie-banner-actions .btn {
    flex: 1 1 120px;
  }
}

/* ====== Página de contato ====== */

#contactPage{
  padding-block: clamp(20px, 4vw, 32px);
}

#contactPage > header{
  max-width: 640px;
}

#contactPage > header h1{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  margin: .2rem 0 .4rem;
}

#contactPage > header p{
  font-size: .95rem;
  color: var(--muted);
}

/* grid principal */
.contact-grid{
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 24px);
  align-items: flex-start;
}

/* cards da página de contato */
#contactPage .card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.3rem;
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
}

/* formulário */
#contactForm{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

#contactForm .field-group{
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

#contactForm label{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in oklab, var(--text) 80%, transparent);
}

#contactForm input,
#contactForm select,
#contactForm textarea{
  width: 100%;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent);
  padding: .6rem .9rem;
  font-size: .92rem;
  background: #fff;
  color: var(--text);
}

#contactForm textarea{
  border-radius: 18px;
  min-height: 120px;
  resize: vertical;
}

[data-theme="dark"] #contactForm input,
[data-theme="dark"] #contactForm select,
[data-theme="dark"] #contactForm textarea{
  background:#f9fafb;
  color:#111827;
}

/* turnstile alinhado */
#contactForm .cf-turnstile{
  transform: scale(.95);
  transform-origin: left top;
}

/* rodapé do form */
#contactFeedback{
  min-height: 1.1rem;
}

/* cartão de atendimento da direita */
#contactPage aside.card h2{
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--muted);
}

#contactPage .foot-contact li{
  align-items: flex-start;
  gap: .6rem;
}

#contactPage .foot-contact-ico{
  width: 1.5rem;
  text-align: center;
}

/* responsivo */
@media (max-width: 880px){
  .contact-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px){
  #contactPage .card{
    padding: 1.1rem 1.1rem 1rem;
  }
}
/* ====== Página de Dúvidas Frequentes ====== */

.faq-page{
  max-width: 960px;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 36px);
}

.faq-header{
  max-width: 640px;
}

.faq-header h1{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  margin: .2rem 0 .4rem;
}

.faq-header p{
  font-size: .95rem;
  color: var(--muted);
}

.faq-header a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* tags / categorias */
.faq-tags{
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.faq-tag{
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  padding: .4rem .9rem;
  font-size: .8rem;
  background: color-mix(in oklab, #fff 92%, var(--primary) 8%);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

.faq-tag.is-active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* lista de perguntas */
.faq-list{
  margin-top: 1.4rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in oklab, var(--text) 4%, transparent);
  overflow: hidden;
}

.faq-item + .faq-item{
  border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
}

.faq-question{
  width: 100%;
  text-align: left;
  padding: .95rem 1.1rem;
  font-size: .92rem;
  font-weight: 500;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
}

.faq-question span:first-child{
  flex: 1;
}

.faq-icon{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after{
  content: "";
  position: absolute;
  background: color-mix(in oklab, var(--text) 80%, transparent);
  border-radius: 999px;
  transition: transform .18s ease, opacity .18s ease;
}

.faq-icon::before{
  width: 10px;
  height: 2px;
}

.faq-icon::after{
  width: 2px;
  height: 10px;
}

/* estado aberto: vira um "–" */
.faq-item.is-open .faq-icon::after{
  transform: scaleY(0);
  opacity: 0;
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  padding: 0 1.1rem;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  transition: max-height .22s ease, padding-bottom .18s ease;
}

.faq-item.is-open .faq-answer{
  max-height: 400px; /* suficiente para respostas maiores */
  padding-bottom: .9rem;
}

.faq-answer p{
  margin: .45rem 0;
}

.faq-answer a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* responsivo */
@media (max-width: 640px){
  .faq-page{
    padding-block: 20px;
  }

  .faq-question{
    padding-inline: .9rem;
  }

  .faq-answer{
    padding-inline: .9rem;
  }

  .faq-tags{
    gap: .4rem;
  }

  .faq-tag{
    font-size: .78rem;
    padding: .36rem .7rem;
  }
}

/* ====== Página de Rastreio ====== */

.track-page{
  max-width: 960px;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 36px);
}

.track-header{
  max-width: 640px;
}

.track-header h1{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  margin: .2rem 0 .4rem;
}

.track-header p{
  font-size: .95rem;
  color: var(--muted);
}

.track-header strong{
  font-weight: 600;
}

/* layout dos cards */
.track-grid{
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 24px);
  align-items: flex-start;
}

.track-page .card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.3rem;
  border: 1px solid color-mix(in oklab, var(--text) 4%, transparent);
}

/* card principal */
.track-card h2{
  margin: 0 0 .4rem;
  font-size: 1rem;
}

.track-intro{
  margin: 0 0 .9rem;
  font-size: .88rem;
  color: var(--muted);
}

.track-intro code{
  background: rgba(15,23,42,.06);
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .78rem;
}

/* formulário */
.track-form{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.track-form .field-group{
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.track-form label{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in oklab, var(--text) 80%, transparent);
}

.track-form input{
  width: 100%;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent);
  padding: .65rem .9rem;
  font-size: .94rem;
  background:#fff;
  color: var(--text);
}

[data-theme="dark"] .track-form input{
  background:#f9fafb;
  color:#111827;
}

.track-feedback{
  min-height: 1.1rem;
  margin: .25rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}

.track-small{
  margin: .3rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}

/* card de ajuda */
.track-help h2{
  margin: 0 0 .6rem;
  font-size: .96rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

.track-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  font-size: .86rem;
  color: var(--muted);
}

.track-list strong{
  color: var(--text);
}

.track-list a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* responsivo */
@media (max-width: 880px){
  .track-grid{
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 640px){
  .track-page .card{
    padding: 1.1rem 1.1rem 1rem;
  }
}

/* ====== Página de Trocas e Devoluções ====== */

.returns-page{
  max-width: 960px;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 36px);
}

.returns-header{
  max-width: 640px;
}

.returns-header h1{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  margin: .2rem 0 .4rem;
}

.returns-header p{
  font-size: .95rem;
  color: var(--muted);
}

/* resumo rápido */
.returns-summary{
  margin-top: 1.6rem;
}

.returns-summary-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 18px);
}

.returns-summary-card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in oklab, var(--text) 4%, transparent);
  padding: 1rem 1rem .9rem;
  font-size: .88rem;
}

.returns-summary-card h2{
  margin: 0 0 .35rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

.returns-summary-card p{
  margin: 0;
}

.returns-summary-card strong{
  font-weight: 600;
}

.returns-summary .returns-note{
  margin: .7rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}

/* seções principais */
.returns-section{
  margin-top: 2rem;
}

.returns-section h2{
  margin: 0 0 .4rem;
  font-size: 1.05rem;
}

.returns-section h3{
  margin: .4rem 0 .2rem;
  font-size: .9rem;
}

.returns-section p{
  margin: .2rem 0 .4rem;
  font-size: .9rem;
  color: color-mix(in oklab, var(--text) 80%, transparent);
}

/* layout lado a lado */
.returns-split{
  margin-top: .6rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 20px);
}

/* listas */
.returns-list{
  margin: .1rem 0 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--muted);
}

.returns-list li + li{
  margin-top: .25rem;
}

/* tabela simples de frete */
.returns-table{
  margin-top: .9rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  font-size: .86rem;
}

.returns-table-row{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 0;
}

.returns-table-row > div{
  padding: .6rem .8rem;
  border-top: 1px solid color-mix(in oklab, var(--text) 4%, transparent);
}

.returns-table-head{
  background: color-mix(in oklab, #f9fafb 80%, var(--primary) 20%);
  font-weight: 600;
}

.returns-table-head > div{
  border-top: none;
}

/* passo a passo */
.returns-steps{
  margin-bottom: .5rem;
}

.returns-step-list{
  margin: .6rem 0 0;
  padding-left: 1.2rem;
  font-size: .88rem;
  color: var(--muted);
}

.returns-step-list li + li{
  margin-top: .4rem;
}

.returns-step-list code{
  background: rgba(15,23,42,.06);
  padding: .05rem .35rem;
  border-radius: 999px;
  font-size: .78rem;
}

/* chamada final */
.returns-cta{
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: color-mix(in oklab, #f9fafb 85%, var(--primary) 15%);
  font-size: .88rem;
  color: color-mix(in oklab, var(--text) 90%, transparent);
}

.returns-cta .btn-link{
  display: inline-block;
  margin-top: .25rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* responsivo */
@media (max-width: 880px){
  .returns-summary-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .returns-split{
    grid-template-columns: minmax(0, 1fr);
  }
  .returns-table-row{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px){
  .returns-page{
    padding-block: 20px;
  }
}

/* ====== HERO PARALLAX (vídeo full-width com sobreposição ao rolar) ====== */

.hero-parallax{
  position: relative;
  isolation: isolate;
  height: min(100vh, 640px);   /* ocupa o topo inteiro da tela, mas sem exagerar em monitores gigantes */
  min-height: 420px;
  overflow: hidden;
  scroll-margin-top: 80px;     /* ancora certinho quando clicar em #topo */
}

/* Fundo (vídeo / imagem) com efeito tipo parallax */
.hero-parallax-media{
  position: fixed;   /* truquezinho pra dar a sensação de fundo “preso” */
  inset: 0;
  z-index: -2;       /* fica atrás do conteúdo do site */
  overflow: hidden;
}

.hero-parallax-media .bgvid,
.hero-parallax-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Camada opcional: figura da modelo por cima do vídeo, mas atrás do texto */
.hero-parallax-media .hero-figure{
  position: absolute;
  right: clamp(0px, 6vw, 48px);
  bottom: 0;
  height: 115%;
  max-width: min(50%, 420px);
  object-fit: contain;
}

/* some a figura no mobile se ficar pesado/estranho */
@media (max-width: 768px){
  .hero-parallax-media .hero-figure{
    display: none;
  }
}

/* Gradiente por cima do vídeo pra garantir leitura do texto */
.hero-parallax-gradient{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.15) 35%,
      rgba(0,0,0,.85) 100%
    );
  mix-blend-mode: multiply;
}

/* Conteúdo centralizado dentro do container */
.hero-parallax-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Tipografia do hero (variação do que você já tinha) */
.hero-parallax .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  background:color-mix(in oklab, var(--surface) 85%, transparent);
}

.hero-parallax h1{
  font-size:clamp(1.9rem, 4.8vw, 3.3rem);
  line-height:1.08;
  margin:.6rem 0 .45rem;
  letter-spacing:-.02em;
}

.hero-parallax p{
  color:var(--muted);
  max-width:60ch;
}

/* CTA + benefícios no topo */
.hero-parallax .cta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}

/* Usa seus benefits, mas com cara de hero */
.hero-parallax .hero-benefits{
  margin-top:.9rem;
}

.hero-parallax .hero-benefits .benefit{
  background: color-mix(in oklab, #000 60%, transparent);
  color: #f9fafb;
  border-color: color-mix(in oklab, #fff 18%, transparent);
}

/* Responsivo: no mobile a gente simplifica o parallax pra não judia do aparelho */
@media (max-width: 768px){
  .hero-parallax{
    height:auto;
    min-height:0;
    padding: clamp(20px, 6vw, 32px) 0 32px;
  }

  .hero-parallax-media{
    position:absolute;   /* vira um fundo “normal” */
  }

  .hero-parallax-inner{
    padding-top: 20px;
  }
}

/* Acessibilidade: quem prefere menos movimento não vê vídeo rodando */
@media (prefers-reduced-motion: reduce){
  .hero-parallax-media .bgvid{
    display:none !important;
  }
}

/* ===== HERO HOME – vídeo só no topo ===== */

.hero-home {
  position: relative;
  min-height: clamp(380px, 65vh, 520px); /* faixa de topo, tipo MedicalLaudos */
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

/* bloco que segura vídeo/imagem */
.hero-home .hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* wrapper onde o JS injeta vídeo/imagem */
.hero-home #heroDynamic.hero-dynamic {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* vídeo/imagem sempre cobrindo a faixa */
.hero-home #heroDynamic video,
.hero-home #heroDynamic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateY(var(--hero-parallax, 0px)); /* paralaxe leve */
  will-change: transform;
  filter: brightness(0.9) contrast(1.05);
}

/* overlay geral: faixa escura na esquerda + brilho à direita */
.hero-home .hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* faixa escura da esquerda onde fica o conteúdo */
    linear-gradient(
      90deg,
      rgba(15,23,42,0.96) 0%,
      rgba(15,23,42,0.92) 32%,
      rgba(15,23,42,0.70) 55%,
      rgba(15,23,42,0.20) 78%,
      rgba(15,23,42,0.00) 100%
    ),
    /* brilho leve do lado direito pra não ficar morto */
    radial-gradient(circle at 80% 10%, rgba(251,113,133,0.28), transparent 60%);
}

/* Conteúdo em cima do fundo */
.hero-home .hero-content {
  position: relative;
  max-width: 640px;
  padding-block: clamp(3rem, 8vh, 5rem);
  z-index: 1; /* fica acima da mancha (::before) */
}

/* Mancha orgânica atrás do texto (garante contraste sem cara de card) */
.hero-home .hero-content::before {
  content: '';
  position: absolute;
  inset: -28% 35% 8% -25%; /* mais cheia na esquerda, some na direita */
  background:
    radial-gradient(
      circle at 0% 20%,
      rgba(15,23,42,0.98) 0%,
      rgba(15,23,42,0.82) 32%,
      rgba(15,23,42,0.0) 70%
    );
  filter: blur(10px);
  opacity: 0.98;
  pointer-events: none;
  z-index: -1;
}

.hero-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: 0.75rem;
}

.hero-home h1 {
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.hero-subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  color: rgba(255,255,255,.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* sombra suave no texto pra ler em qualquer vídeo */
.hero-kicker,
.hero-home h1,
.hero-subtitle {
  text-shadow: 0 0 18px rgba(0,0,0,0.7);
}

/* Mobile */
@media (max-width: 768px) {
  .hero-home {
    min-height: 380px;
  }

  .hero-home .hero-content {
    padding-block: 3rem 2.5rem;
  }

  /* ajusta a mancha pro mobile */
  .hero-home .hero-content::before {
    inset: -22% -8% 6% -8%;
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(15,23,42,0.98) 0%,
        rgba(15,23,42,0.84) 38%,
        rgba(15,23,42,0.0) 72%
      );
    filter: blur(12px);
  }

  .hero-home h1 {
    font-size: clamp(1.7rem, 5.2vw, 2.1rem);
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }
}

/* Esconde menu de categorias e barra de tags no mobile,
   porque agora elas vão ficar só dentro do hambúrguer */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-tags-bar {
    display: none;
  }
}

/* Estilinho básico para os blocos dentro do drawer */
.drawer-section {
  margin-top: 1rem;
}

.drawer-title {
  margin: 0 0 .4rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Links que vão ser clonados pro drawer */
.drawer-section a {
  display: block;
  padding: .35rem 0;
  font-size: .95rem;
}