/* Toque: remove o atraso de ~300ms do duplo-toque em qualquer elemento
   clicável e neutraliza o flash azul/cinza padrão do Android ao tocar —
   já era feito só dentro do match.html; agora vale pras três páginas, já
   que este arquivo é compartilhado. */
a, button, [onclick] {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ── Acessibilidade por teclado (compartilhado nas 3 páginas) ──────────────
   Contorno de foco visível para QUALQUER elemento interativo navegado por
   Tab — inclui divs/cards que só tinham onclick (agora focáveis via
   js/keyboard.js). Cor fixa com fallback porque match.html não define as
   mesmas variáveis de cor do catálogo. :focus-visible só aparece na
   navegação por teclado, não atrapalha o clique com mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[onclick]:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline:2px solid #915E48;
  outline-offset:2px;
  border-radius:4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CABEÇALHO (NAV) — layout compartilhado entre index.html e looks.html
   Estrutura, tamanhos e espaçamentos são idênticos nas duas páginas.
   Apenas as CORES mudam, através das variáveis abaixo definidas no :root
   de cada página (com fallback sensato quando a página não precisa de um
   valor diferente do padrão):

     --nav-idle-bg      fundo do nav no topo, antes de rolar (padrão: transparente)
     --nav-idle-blur    desfoque do nav no topo (padrão: nenhum)
     --nav-idle-border  borda inferior do nav no topo (padrão: transparente)
     --nav-scrolled-bg  fundo do nav após rolar a página (obrigatório)
     --nav-idle-text        cor do nome da loja no topo, antes de rolar
     --nav-idle-text-sub    cor do subtítulo (“Recife”) no topo, antes de rolar
     --nav-idle-link        cor dos links (Coleção/Sobre/Instagram) no topo
     --nav-idle-link-hover  cor dos links no hover, no topo
     --nav-cta-border       cor da borda do botão "Fale Conosco"

   Cor de marca compartilhada (usada onde quer que o botão My Favorite Bags
   apareça preenchido de marrom — hoje em looks.html e match.html):
     --brand-bags-brown        preenchimento/borda do botão
     --brand-bags-brown-hover  preenchimento/borda no hover
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --brand-bags-brown: #653C2B;
  --brand-bags-brown-hover: #915E48;
}
a.brand-bags-fill {
  background:var(--brand-bags-brown);
  border-color:var(--brand-bags-brown);
  color:#F3EFE9;
  box-shadow:0 10px 24px rgba(101,60,43,.18);
}
a.brand-bags-fill svg { stroke:currentColor; }
a.brand-bags-fill:hover {
  background:var(--brand-bags-brown-hover);
  border-color:var(--brand-bags-brown-hover);
  color:#FFFFFF;
}

/* ─── DROPDOWN CUSTOMIZADO DE CATEGORIA (admin) — compartilhado entre
   index.html e looks.html. Substitui o <select> nativo para permitir
   estilizar o hover das opções (impossível via CSS no select nativo).
   Usa as variáveis de cada página: --bg, --text, --rose-dark, --line. ─── */
.csel-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  cursor:pointer; text-align:left;
}
/* Seletor com elemento (button.csel-trigger) para vencer a especificidade de .fi
   independente da ordem de carregamento do CSS na página. */
button.csel-trigger {
  background:var(--rose-dark) !important;
  border-color:var(--rose-dark) !important;
  color:var(--csel-bg, var(--bg2)) !important;
}
.csel-trigger .csel-arrow { flex-shrink:0; transition:transform .2s; color:inherit; }
.csel-trigger.open .csel-arrow { transform:rotate(180deg); }
.csel-popup {
  background:var(--csel-bg, var(--bg2)); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); overflow-y:auto; max-height:220px;
  font-family:'Jost',sans-serif; font-size:13px;
}
.csel-opt {
  padding:9px 12px; color:var(--text); cursor:pointer;
  transition:background .12s, color .12s;
}
.csel-opt:hover { background:color-mix(in srgb, var(--rose-dark) 35%, transparent); color:var(--text); }
.csel-opt.sel { background:color-mix(in srgb, var(--rose-dark) 35%, transparent); color:var(--text); font-weight:700; }

/* ─── LEGENDA DE CATEGORIA (catálogo público) — passar o mouse ou clicar
   mostra uma explicação curta da categoria acima do botão. ────────────────── */
.cat-tip { position:relative; }
.cat-tip::after {
  content:attr(data-desc);
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:220px;
  background:var(--rose-dark); color:#fff; font-size:13px; line-height:1.5;
  padding:8px 12px; border-radius:6px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:20;
}
.cat-tip::before {
  content:''; position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--rose-dark);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:20;
}
.cat-tip:hover::after, .cat-tip:hover::before,
.cat-tip.show-tip::after, .cat-tip.show-tip::before { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── BOTÃO FLUTUANTE DO WHATSAPP — compartilhado entre index.html e looks.html ───
   --wa-bg          cor de fundo do botão
   --wa-shadow-rgb  mesma cor acima, em "r,g,b", usada na sombra
   (cada página define esses dois valores no seu :root; padrão = tom do Bags) */
:root {
  --wa-bg: #8B4A3C;
  --wa-shadow-rgb: 139,74,60;
}
.wa-float {
  position:fixed; bottom:32px; left:67px; z-index:300;
  width:80px; height:80px; background:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* Círculo de fundo removido — só o ícone flutua, sem moldura/sombra. */
  border:none;
  box-shadow:none;
  transition:transform 2.5s var(--ease), opacity .3s;
  opacity:1; /* opacidade do estado padrão (fora do hero) */
}
/* A animação de flutuar (waf) fica no .wa-float-inner (o wrapper em volta do
   SVG), não no .wa-float (o <a> em si) — os dois usam a propriedade
   "transform" e, se ficassem no mesmo elemento, o keyframe do flutuar
   sobrescreveria a cada frame o scale do hover, fazendo o crescimento
   parecer instantâneo mesmo com a transition configurada em 2.5s. Separando
   em elementos diferentes, o <a> cuida só do scale (transition) e o span
   interno cuida só do flutuar (animation), sem disputa entre os dois. */
.wa-float-inner {
  display:flex; align-items:center; justify-content:center;
  animation:waf 3.2s ease-in-out infinite;
}
/* Opacidade/transform do hover agora são controladas via JS (ver "WA HOVER
   FADE" no fim de index.html/looks.html). */
.wa-float:hover {
  transform:scale(1.08);
}
@keyframes waf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
/* Enquanto o botão do WhatsApp está sobre o hero (classe aplicada via JS,
   ver "WA DIM NO HERO" no fim de index.html/looks.html), ele some quase
   por completo, mas com uma respiração de opacidade (não estático) — assim
   que sai do hero (scroll), volta ao normal (perde a classe .wa-dim). O
   flutuar (waf) continua sempre ativo no .wa-float-inner, independente
   deste estado. */
.wa-float.wa-dim {
  animation:waDim 7s ease-in-out infinite;
}
.wa-float.wa-dim:hover { animation:none; opacity:1; }
@keyframes waDim { 0%,100%{opacity:.7} 50%{opacity:1} }
html.reduce-motion .wa-float.wa-dim { animation:none; opacity:.2; }
html.reduce-motion .wa-float-inner { animation:none; }

/* Ícone do WhatsApp (SVG novo, icons/mobile/WhatsApp.svg — viewBox
   1254x1254, bem maior que o anterior de 24x24, por isso o stroke-width
   é proporcionalmente maior aqui): preenchimento em gradiente metálico
   dourado (definido dentro do próprio <svg>, id="waGoldMetal" — presente
   em index.html e looks.html), com contorno num tom sólido mais escuro do
   mesmo dourado pra dar definição/profundidade. Igual nas duas páginas. */
.wa-float svg path {
  fill:url(#waGoldMetal);
  stroke:#6B5220;
  stroke-width:6;
}
.wa-tip {
  position:absolute; left:72px; top:50%; transform:translateY(-50%);
  background:var(--rose-deep); color:#fff;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .6s;
}
.wa-float:hover .wa-tip { opacity:1; }
.wa-float {
  width:80px;
  height:80px;
}
@media(max-width:900px){
  .wa-tip { display:none; }
}
@media(max-width:600px){
  .wa-float { width:80px; height:80px; bottom:20px; left:55px; }
}

nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:28px 64px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--nav-idle-bg, transparent);
  backdrop-filter:var(--nav-idle-blur, none);
  -webkit-backdrop-filter:var(--nav-idle-blur, none);
  border-bottom:1px solid var(--nav-idle-border, transparent);
  transition:background .5s, padding .4s, border-color .5s;
}
nav.s {
  background:var(--nav-scrolled-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:16px 64px;
  border-bottom:1px solid var(--line);
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:14px; }
.nav-mono { width:38px; height:38px; flex-shrink:0; }
.nav-words { display:flex; flex-direction:column; gap:1px; }
.nav-words-main {
  font-family:'Cormorant Garamond',serif;
  font-size:15px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--nav-idle-text); transition:color .4s; line-height:1;
  white-space:nowrap;
}
.nav-words-sub {
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nav-idle-text-sub); transition:color .4s;
}
nav.s .nav-words-main { color:var(--text); }
nav.s .nav-words-sub  { color:var(--text-muted); }

.nav-logo-img { display:block; width:44px; height:44px; object-fit:contain; transition: filter .4s; }
@media(max-width:600px){ .nav-logo-img { width:38px; height:38px; } }

/* Links */
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-right { display:flex; align-items:center; gap:40px; }
.nav-links a {
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nav-idle-link); font-weight:400;
  transition:color .3s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:100%;
  height:1px; background:var(--rose);
  transition:right .4s var(--ease);
}
.nav-links a:hover { color:var(--nav-idle-link-hover); }
.nav-links a:hover::after { right:0; }
nav.s .nav-links a { color:var(--text-muted); }
nav.s .nav-links a:hover { color:var(--text); }

/* CTA "Fale Conosco" */
.nav-cta {
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose); border:1px solid var(--nav-cta-border);
  padding:10px 24px; font-weight:400;
  transition:background .3s, color .3s, border-color .3s;
  white-space:nowrap;
  margin-left:32px; /* afasta o botão dos links anteriores */
}
.nav-cta:hover { background:var(--rose-dark); color:#fff; border-color:var(--rose-dark); }

/* Botão de navegação cruzada (My Favorite Bags ⇄ My Favorite Looks) */
.nav-cross-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:999px;
  border:1.5px solid #B8896F; color:#24343C;
  font-family:'Cormorant Garamond',serif; font-size:12.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  background:#F6F1EC; margin-right:18px;
  transition:background .3s, box-shadow .3s;
}
.nav-cross-btn svg { flex:0 0 auto; }

/* Cabeçalho (Bags/Looks) continua esticado de ponta a ponta (fundo
   incluso) — só o CONTEÚDO (logo, menu, botões) recua pra acompanhar o
   mesmo teto de largura (1400px) do resto do site, crescendo a margem
   interna em vez de encolher a barra inteira numa caixa flutuante.
   Usa #nav (ID) pra não afetar #mobileBottomNav, que é outro <nav>. */
#nav {
  /* Antes somava --page-gutter ao recuo de centralização, ficando mais
     recuado que o limite de 1400px das seções abaixo (hero, catálogo etc,
     que usam max-width:1400px puro, sem gutter extra). Com max() em vez de
     soma, o conteúdo do cabeçalho bate exatamente na mesma linha das
     seções em telas largas, e ainda mantém o gutter mínimo em telas
     estreitas (quando (100vw - 1400px)/2 é menor que o gutter). */
  padding-left:max(var(--page-gutter), (100vw - 1400px) / 2);
  padding-right:max(var(--page-gutter), (100vw - 1400px) / 2);
}

/* ── Responsive hardening (idêntico nas duas páginas) ──────────────────── */
nav {
  gap:clamp(.75rem, 2vw, 2rem);
  padding:clamp(1rem, 2.5vw, 1.75rem) var(--page-gutter);
}
nav.s { padding:clamp(.75rem, 1.8vw, 1rem) var(--page-gutter); }
.nav-logo { min-width:0; min-height:44px; }
.nav-words { min-width:0; }
.nav-words-main {
  font-size:clamp(.85rem, .78rem + .25vw, 1rem);
  letter-spacing:clamp(.11em, .7vw, .2em);
}
.nav-words-sub {
  font-size:clamp(.5625rem, .5625rem + 0vw, .5625rem);
  letter-spacing:clamp(.24em, 1vw, .38em);
}
.nav-links { gap:clamp(1.2rem, 3vw, 2.5rem); }
.nav-right { gap:clamp(1.2rem, 3vw, 2.5rem); }
.nav-links a,
.nav-cta,
.nav-cross-btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-cta {
  padding:clamp(.62rem, 1.2vw, .75rem) clamp(.9rem, 2vw, 1.5rem);
  font-size:clamp(0.8125rem, .68rem + .18vw, .9rem);
}
.nav-cross-btn {
  max-width:min(42vw, 14rem);
  min-width:13.5rem;
  justify-content:center;
  margin-right:clamp(.4rem, 1.4vw, 1.1rem) !important;
  padding:clamp(.55rem, 1vw, .7rem) clamp(.75rem, 1.6vw, 1.1rem) !important;
  font-size:clamp(0.8125rem, .75rem + .2vw, .9rem) !important;
  line-height:1.15;
  white-space:normal;
  text-align:center;
}
@media(max-width:769px){
  .nav-cross-btn { min-width:0; }
}

@media(max-width:430px){
  .nav-logo { gap:.65rem; }
  .nav-logo-img { width:2.25rem; height:2.25rem; }
  .nav-words-main { font-size:.85rem; }
  .nav-words-sub { font-size:.5625rem; }
}

/* ─── CORTINA DE TRANSIÇÃO ENTRE SITES (Bags ⇄ Looks ⇄ Match) ───────────────
   Compartilhada pelas três páginas — ver js/page-transition.js. Começa
   fora da tela (por cima), desce cobrindo tudo ao sair de uma página, e
   na página seguinte continua descendo e sai por baixo, revelando o
   conteúdo novo. */
/* Transição por FADE (sem cortina deslizando): clique → tela funde pra
   tom pérola → troca de página → ainda pérola → funde a logo do site que
   chegou → funde tudo (logo + pérola) de volta, revelando o site. Ver a
   sequência completa (tempos) em js/page-transition.js.
   IMPORTANTE: o container (.page-curtain) NUNCA anima a própria opacidade
   — se ele animasse, a opacidade dele se multiplicaria com a da logo (que
   é filha dele), fazendo os dois sumirem "juntos" mesmo com durações
   diferentes. Por isso o fundo pérola vive num elemento PRÓPRIO
   (.page-curtain-bg), irmão da logo, e cada um tem sua transição/duração
   totalmente independente. */
.page-curtain {
  position:fixed; inset:0; z-index:99999;
  pointer-events:none;
  overflow:hidden;
}
.page-curtain-bg {
  position:absolute; inset:0;
  background:#F7F5F2;
  opacity:0;
  transition:opacity .8s ease; /* fade-IN do fundo, ao clicar (fechando) */
}
.page-curtain.is-closing .page-curtain-bg,
.page-curtain.is-closed .page-curtain-bg {
  opacity:1;
}
.page-curtain.is-closed .page-curtain-bg { transition:none; }
.page-curtain.is-opening .page-curtain-bg {
  opacity:0;
  transition:opacity 5.5s ease; /* fade-OUT do fundo, revelando a página — 5500ms */
}
.page-curtain.is-open .page-curtain-bg {
  opacity:0;
  transition:none;
}
html.reduce-motion .page-curtain-bg { transition:none !important; }

/* Logo centralizada — a opacidade dela é controlada diretamente por JS
   (js/page-transition.js), não por classe, já que ela some/aparece em
   momentos diferentes da cortina em si (só na entrada, não no fechamento).
   Por ser irmã (não filha) do fundo animado, sua transição/duração não
   sofre nenhuma influência da opacidade do fundo. */
.page-curtain-logo {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:auto; max-height:600px; object-fit:contain;
  z-index:1; opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

/* Mobile: logos do Bags e do Looks na cortina — 360px → 180px (mais 50%
   menor), centralizadas na horizontal e deslocadas levemente para cima.
   A logo do Match fica de fora (:not(.is-match-logo)) e mantém o tamanho
   e a posição normais. */
@media(max-width:768px){
  .page-curtain-logo:not(.is-match-logo) {
    width:180px; max-height:180px;
    top:44%; left:50%;
  }
}

/* Logo do Match na cortina: 20% maior — aplicada via classe extra, já
   que .page-curtain-logo é compartilhada entre as três páginas. */
.page-curtain-logo.is-match-logo {
  width:864px; max-height:864px;
}

/* A cortina lateral (deslizante) foi substituída pela transição por fade
   acima — .is-lateral/.is-reverse ainda podem ser adicionadas pelo JS do
   gesto de swipe e do ícone do Match (sem problema, ficam sem efeito
   visual algum agora, já que a cortina não usa mais transform). */

/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO MOBILE — seta+wordmark de swipe da logo (Bags⇄Looks) e barra
   de navegação inferior fixa. Compartilhado entre index.html e looks.html.
   Breakpoint reaproveitado do resto do site (max-width:768px).
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-swipe-hint {
  display:none;
}
@media(max-width:768px){
  .nav-swipe-hint {
    display:inline-flex; align-items:center; gap:5px;
    margin-left:10px; opacity:.4; pointer-events:none;
    white-space:nowrap;
  }
  .nav-swipe-hint .nsh-arrow {
    width:14px; height:14px; flex-shrink:0;
    animation:navSwipeFloat 1.8s ease-in-out infinite;
  }
  .nav-swipe-hint.is-reverse .nsh-arrow { transform:scaleX(-1); }
  .nav-swipe-hint .nsh-label {
    font-size:9px; letter-spacing:.16em; text-transform:uppercase;
    color:inherit;
  }
}
@keyframes navSwipeFloat {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(4px); }
}
.nav-swipe-hint.is-reverse .nsh-arrow { animation-name:navSwipeFloatReverse; }
@keyframes navSwipeFloatReverse {
  0%,100% { transform:translateX(0) scaleX(-1); }
  50% { transform:translateX(-4px) scaleX(-1); }
}
html.reduce-motion .nav-swipe-hint .nsh-arrow { animation:none; }

/* ─── BOTTOM NAV MOBILE ──────────────────────────────────────────────────── */
#mobileBottomNav { display:none; }
@media(max-width:768px){
  #mobileBottomNav {
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; left:0; right:0; bottom:0; z-index:9000;
    height:64px; padding:0 18px;
    background:var(--mbn-bg, #E7E2D9);
    border-top:1px solid rgba(0,0,0,.06);
    box-shadow:0 -4px 18px rgba(0,0,0,.08);
  }
  .mbn-side { display:flex; align-items:center; gap:22px; }
  .mbn-item {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex-shrink:0;
    background:none; border:none; padding:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mbn-icon {
    width:22px; height:22px;
    background-color:var(--mbn-icon, #8A7A63);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
    transition:background-color .25s, transform .2s;
  }
  .mbn-item:active .mbn-icon { transform:scale(.88); }
  #mbnMatch {
    position:relative; top:-16px;
    width:60px; height:60px; border-radius:50%;
    background:var(--mbn-match-bg, #4A2318);
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    animation:mbnMatchPulse 13s 1.1s ease-in-out infinite;
    overflow:hidden;
  }
  .mbn-match-logo {
    width:34px; height:34px; object-fit:contain; display:block;
    pointer-events:none;
  }
  html.reduce-motion #mbnMatch { animation:none; }
}
/* Pulso "chamar atenção" do ícone Match — mesma keyframe usada no
   #matchHeroBtn do desktop (matchGoldGlow), reaproveitada aqui via classe. */
@keyframes mbnMatchPulse {
  0%, 76.92%, 100% { box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(212,175,55,0); }
  88.46% { box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 22px 8px rgba(212,175,55,.6); }
}

/* ─── ESCONDER BOTÕES FLUTUANTES ANTIGOS NO MOBILE ──────────────────────────
   A versão desktop deles continua 100% intacta (drag incluso) — isto só
   os esconde visualmente abaixo do breakpoint mobile do site. */
@media(max-width:768px){
  .wa-float,
  #matchHeroBtn {
    display:none !important;
  }
}