/* ============================================================
   IMPÉRIO DELAS — Catálogo
   Proposta de redesign comercial · validação executiva

   Princípio: reduzir, organizar, valorizar o produto.
   A fotografia é o elemento principal; tudo que não ajuda a
   descobrir uma peça ou a fechar o pedido foi removido.
   Escrito mobile-first.
   ============================================================ */

/* ---------- Tokens ---------- */
/* Paleta "Vitrine Rosa": o rosa #D6194B do logotipo é a cor da loja.
   Ele é a capa, o botão de comprar, a faixa do WhatsApp e o preço.
   O fundo é um branco levemente rosado — bege brigaria com o rosa.
   Toda a cor do site sai daqui; o painel (css/admin.css) herda
   pelos aliases mais abaixo. */
:root{
  /* base */
  --paper:      #FDF8F8;
  --paper-2:    #F7EAEE;
  --tint:       #F2D5DC;   /* fundo de foto ausente / categoria */
  --photo-bg:   #F5F0E9;   /* papel neutro atrás das fotos — a peça pousa nele, sem rosa */
  --card:       #FFFFFF;

  /* texto */
  --ink:        #2B1219;
  --ink-2:      #614449;
  --muted:      #866C71;

  /* marca */
  /* Um rosa só em todo o sistema. É o rosa do logotipo (#D6194B) com
     cinco pontos a menos de luz: mesmo matiz (344°), mesma saturação.
     Ganha contraste onde há texto branco por cima — de 5,1 para 6,2 —
     sem deixar de ser o rosa da marca. */
  --wine:       #BF1643;   /* preço, links, detalhes */
  --wine-dark:  #A4123A;

  /* ação */
  --cta:        #BF1643;
  --cta-hover:  #A4123A;
  --cta-ink:    #FFFFFF;

  /* blocos de marca */
  --band:       #BF1643;   /* faixa do WhatsApp */
  --band-ink:   #FFFFFF;   /* título sobre o rosa */
  --band-ink-2: #FDE4EA;   /* apoio sobre o rosa — hierarquia por cor, não por transparência */
  --hero-empty: #BF1643;   /* capa quando não há banner cadastrado */
  --chip-on:    #BF1643;   /* cor/tamanho selecionado */
  --chip-on-ink:#FFFFFF;

  /* véu sobre foto (hero, categoria) — no tom da marca, não cinza */
  --scrim:      92,14,42;

  --rule:       rgba(43,18,25,.14);
  --rule-soft:  rgba(43,18,25,.07);
  --wa:         #25D366;
  --wa-dark:    #1DA851;

  /* aliases para o painel administrativo (css/admin.css) */
  --plum:var(--ink); --rose:var(--wine); --rose-deep:var(--wine-dark);
  --blush:var(--paper); --blush-2:var(--paper-2); --coral:var(--wine);
  --coral-soft:var(--tint); --gold:var(--muted); --line:var(--rule);
  --line-soft:var(--rule-soft); --ink-deep:var(--ink);
  --ivory:var(--paper); --ivory-2:var(--paper-2);

  --shadow-sm:none;
  --shadow-md:0 2px 18px rgba(var(--scrim),.07);
  --shadow-lg:0 20px 50px rgba(var(--scrim),.20);

  /* raio discreto: controles têm 2px, imagens não têm */
  --r-sm:2px; --r-md:2px; --r-lg:2px; --r-pill:2px;

  --ff-display:"Fraunces", Georgia, serif;
  --ff-body:"Jost", system-ui, -apple-system, sans-serif;

  --wrap:1200px;
  --header-h:58px;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--paper);
  font-weight:400; line-height:1.6;
  /* Sem 'antialiased': ele afina o traço e é justamente sobre o rosa,
     em texto claro, que a letra fina começa a vibrar e cansar. */
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:16px; color:var(--ink); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }

.wrap{ width:min(var(--wrap), 100% - 2rem); margin-inline:auto; }
@media (min-width:900px){ .wrap{ width:min(var(--wrap), 100% - 4rem); } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* título de seção — um só padrão em toda a página */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  margin-bottom:var(--s3);
}
.sec-title{
  font-family:var(--ff-display); font-weight:400; font-size:1.4rem;
  letter-spacing:-.01em; color:var(--ink); line-height:1.1;
}
@media (min-width:760px){ .sec-title{ font-size:1.75rem; } }
.sec-link{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.sec-link:hover{ color:var(--wine); }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.header-bar{ min-height:var(--header-h); display:flex; align-items:center; gap:var(--s2); }
.brand .wordmark{
  font-family:var(--ff-display); font-weight:500; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
@media (min-width:760px){ .brand .wordmark{ font-size:1.3rem; } }

/* navegação por categorias — só no desktop */
.header-nav{ display:none; }
@media (min-width:900px){
  .header-nav{ display:flex; gap:var(--s3); margin-left:var(--s4); }
  .header-nav button{
    font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
    padding:.2rem 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
  }
  .header-nav button:hover{ color:var(--ink); }
  .header-nav button.active{ color:var(--ink); border-bottom-color:var(--wine); }
}

.header-actions{ display:flex; align-items:center; gap:var(--s1); margin-left:auto; }
.icon-btn{
  position:relative; width:42px; height:42px; display:grid; place-items:center;
  color:var(--ink); transition:color .18s;
}
.icon-btn:hover{ color:var(--wine); }
.icon-btn svg{ width:21px; height:21px; }
.cart-count{
  position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px;
  background:var(--wine); color:var(--paper); border-radius:99px;
  font-size:.6rem; font-weight:600; display:grid; place-items:center;
}
.cart-count:empty, .cart-count[data-count="0"]{ display:none; }
@media (min-width:900px){ #menuBtn{ display:none; } }

/* busca */
.search-row{ padding:0 0 var(--s2); }
@media (min-width:900px){ .search-row{ display:none; } }

/* No celular a busca ocupa uma faixa inteira do cabeçalho. Ao rolar para
   baixo ela se recolhe e devolve esse espaço às peças; volta sozinha
   quando a tela retorna ao topo. */
@media (max-width:899px){
  .search-row{
    overflow:hidden; max-height:72px; opacity:1;
    transition:max-height .24s ease, opacity .16s ease, padding-bottom .24s ease;
  }
  .site-header.busca-oculta .search-row{
    max-height:0; opacity:0; padding-bottom:0;
  }
}
@media (prefers-reduced-motion:reduce){
  .search-row{ transition:none; }
}
.header-search{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:.6rem .8rem; background:var(--card);
}
.header-search svg{ width:16px; height:16px; color:var(--muted); flex-shrink:0; }
.header-search input{ border:none; background:none; flex:1; font-size:16px; outline:none; -webkit-appearance:none; appearance:none; transform:none; }
.header-search input::placeholder{ color:var(--muted); }
.header-search-desk{ display:none; }
@media (min-width:900px){
  .header-search-desk{ display:flex; width:200px; margin-left:var(--s3); }
}

/* menu mobile de categorias */
.menu-sheet{
  position:fixed; inset:0; z-index:95; background:var(--paper);
  transform:translateY(-100%); visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
  display:flex; flex-direction:column; padding:var(--s2);
}
.menu-sheet.open{ transform:translateY(0); visibility:visible; }
/* no desktop a navegação vive no cabeçalho; a folha não existe */
@media (min-width:900px){ .menu-sheet{ display:none; } }
.menu-head{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.menu-list{ display:flex; flex-direction:column; padding-top:var(--s2); }
.menu-list button{
  text-align:left; font-family:var(--ff-display); font-size:1.5rem; font-weight:400;
  padding:var(--s2) 0; border-bottom:1px solid var(--rule-soft); color:var(--ink);
}
/* a porta do painel fecha o menu: discreta, sem competir com as
   categorias, mas a um toque do topo em vez de no fim da página */
.menu-painel{
  align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem;
  margin-top:var(--s3); min-height:44px; padding:.55rem 1rem;
  border:1px solid var(--rule); border-radius:99px;
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  transition:color .2s, border-color .2s, background .2s;
}
.menu-painel:hover, .menu-painel:focus-visible{ color:var(--wine); border-color:var(--wine); background:var(--tint); }
.menu-painel svg{ width:15px; height:15px; flex-shrink:0; }

/* ============================================================
   HERO — campanha, a fotografia manda
   ============================================================ */
.hero{ position:relative; }
.hero-slide{
  position:relative; min-height:51vh; display:flex; align-items:flex-end;
  background:var(--tint); overflow:hidden;
}
@media (min-width:760px){ .hero-slide{ min-height:63vh; } }
/* o palco das fotos. No celular cobre a faixa inteira — a caixa ali é
   quase quadrada e a foto aparece quase toda. */
.hero-palco{ position:absolute; inset:0; overflow:hidden; }
/* duas fotos empilhadas: a troca é dissolução, não corte */
.hero-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease;
}
.hero-foto.on{ opacity:1; }
.hero-slide.no-img .hero-foto{ display:none; }
/* o texto some e volta junto com a foto */
.hero-in{ transition:opacity .24s ease; }
.hero-in.trocando{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .hero-foto, .hero-in{ transition:none; }
}
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--scrim),.62), rgba(var(--scrim),.08) 55%);
}
.hero-slide.no-img{ background:var(--hero-empty); min-height:52vh; }
.hero-slide.no-img::after{ background:none; }
@media (min-width:760px){ .hero-slide.no-img{ min-height:62vh; } }
.hero-in{ position:relative; z-index:2; padding:var(--s4) 0 var(--s5); width:100%; }
.hero h1{
  font-family:var(--ff-display); font-weight:400; color:#fff;
  font-size:clamp(2rem,7vw,3.4rem); line-height:1.05; letter-spacing:-.02em;
  max-width:14ch;
}
.hero p{ color:#fff; font-size:1rem; margin-top:var(--s1); max-width:32ch; }
.hero .btn{ margin-top:var(--s3); }

/* setas e pontos do banner: as mesmas peças da galeria da peça, só
   acomodadas — o texto da campanha ocupa a faixa de baixo */
.hero .gal-seta, .hero .gal-pontos{ z-index:3; }
.hero .gal-seta{ top:38%; }
@media (min-width:760px){ .hero .gal-seta{ top:50%; } }
.hero .gal-pontos{ bottom:1rem; }
@media (min-width:760px){ .hero .gal-pontos{ bottom:1.4rem; } }
.hero-slide.tem-mais .hero-in{ padding-bottom:calc(var(--s5) + .6rem); }

/* ------------------------------------------------------------
   O BANNER NO COMPUTADOR
   A arte ocupa a faixa inteira, como no celular. Para isso a campanha
   tem duas artes: uma deitada, que entra aqui, e uma quadrada, que
   entra no celular. Sem as duas, uma das formas cortaria a arte pela
   metade — a faixa tem 3,2:1 no computador e 1:1 no celular.
   ------------------------------------------------------------ */
@media (min-width:900px){
  /* em tela larga as setas acompanham a coluna do texto, em vez de
     ficarem perdidas na borda */
  .hero .gal-prev{ left:max(1rem, calc((100% - var(--wrap)) / 2 - 3.2rem)); right:auto; }
  .hero .gal-next{ right:max(1rem, calc((100% - var(--wrap)) / 2 - 3.2rem)); }
}

/* ============================================================
   CATEGORIAS — visuais, não uma fileira de botões
   ============================================================ */
.section{ padding:var(--s5) 0 0; }
/* As categorias vivem numa faixa de uma linha só que corre para o lado.
   No celular a próxima fica espiando na borda — é o que diz à cliente
   que há mais coisa ali. Nunca quebra em duas linhas. */
.faixa{ position:relative; }
.cat-grid{
  display:flex; gap:var(--s2); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-inline:1rem;
  scrollbar-width:none; overscroll-behavior-x:contain;
  margin-inline:-1rem; padding-inline:1rem; padding-bottom:.2rem;
  -webkit-overflow-scrolling:touch;
  /* só o gesto para os lados pertence à faixa — o de cima para baixo
     é da página, nunca os dois juntos balançando o trilho */
  touch-action:pan-x;
}
.cat-grid::-webkit-scrollbar{ display:none; }
.cat-grid.arrastando{ scroll-snap-type:none; cursor:grabbing; }
.cat-grid.arrastando *{ user-select:none; }

.cat-tile{
  display:flex; flex-direction:column; gap:.6rem;
  cursor:pointer; text-align:left; background:none; border:0;
  flex:0 0 58%; scroll-snap-align:start;
}
@media (min-width:520px){ .cat-tile{ flex-basis:38%; } }
@media (min-width:760px){
  .cat-grid{ gap:var(--s3); margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
  .cat-tile{ flex-basis:calc((100% - 3 * var(--s3)) / 4); }
}
/* a foto pousa num papel neutro — nunca mais o rosa do tint por trás
   do recorte transparente — com moldura fina e sombra de chão, como
   numa prancha de lookbook */
.cat-tile .ph{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--photo-bg);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
  transition:box-shadow .3s, transform .15s;
}
.cat-tile .ph::before{
  content:""; position:absolute; left:10%; right:10%; bottom:7%; height:16%;
  background:radial-gradient(closest-side, rgba(43,18,25,.14), transparent 72%);
}
.cat-tile:hover .ph{ box-shadow:inset 0 0 0 1px var(--rule), 0 10px 24px -14px rgba(43,18,25,.4); }
.cat-tile img{
  width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.25,1);
  /* a foto não é um objeto solto: sem isso dá para "pegar" e arrastar
     a imagem para fora do lugar, por cima do gesto do trilho */
  -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; user-select:none;
}
.cat-tile:hover img{ transform:scale(1.06); }
.cat-tile:active .ph{ transform:scale(.975); }
/* índice abaixo da foto: numeral discreto + nome em itálico, como
   a legenda de uma peça de lookbook — não mais escrito sobre a imagem */
.cat-index{ display:flex; align-items:baseline; gap:.55rem; padding-left:.05rem; }
.cat-index-n{
  font-family:var(--ff-body); font-size:.68rem; font-weight:500;
  letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums;
}
.cat-index-name{
  position:relative; font-family:var(--ff-display); font-style:italic;
  font-size:1.05rem; font-weight:400; color:var(--ink); transition:color .25s;
}
@media (min-width:760px){ .cat-index-name{ font-size:1.15rem; } }
/* o traço cresce por baixo do nome quando a cliente encosta na peça */
.cat-index-name::after{
  content:""; position:absolute; left:0; right:100%; bottom:-.22rem; height:1px;
  background:var(--wine); transition:right .35s cubic-bezier(.2,.8,.25,1);
}
.cat-tile:hover .cat-index-name, .cat-tile:focus-visible .cat-index-name{ color:var(--wine); }
.cat-tile:hover .cat-index-name::after, .cat-tile:focus-visible .cat-index-name::after{ right:0; }

/* fio de progresso: acompanha o quanto da faixa já passou.
   Serve às categorias e aos trilhos de peças — uma linguagem só. */
.faixa-prog{
  height:2px; margin-top:.85rem; border-radius:99px;
  background:var(--rule-soft); display:none; overflow:hidden;
}
.faixa-prog.on{ display:block; }
.faixa-prog i{
  display:block; height:100%; width:30%; border-radius:99px;
  background:var(--wine); transition:transform .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .cat-tile, .cat-tile img, .cat-tile span, .cat-tile span::after, .faixa-prog i{ transition:none; }
}

/* ============================================================
   PRODUTOS
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s2); }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); gap:var(--s4) var(--s3); } }
@media (min-width:1080px){ .grid{ grid-template-columns:repeat(4,1fr); } }

/* trilho horizontal no mobile para as vitrines da home */
.rail{
  display:flex; gap:var(--s2); overflow-x:auto; scroll-snap-type:x mandatory;
  /* sem isto o encaixe cola a primeira peça na borda da tela e engole a
     margem: a linha do trilho tem de nascer alinhada com o título */
  scroll-padding-inline:1rem;
  scrollbar-width:none; overscroll-behavior-x:contain;
   -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  padding-bottom:var(--s1); margin-inline:-1rem; padding-left:1rem; padding-right:2rem;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.arrastando{ scroll-snap-type:none; cursor:grabbing; }
.rail.arrastando *{ user-select:none; }
.rail .card{ flex:0 0 62%; scroll-snap-align:start; }
@media (min-width:620px){ .rail .card{ flex-basis:36%; } }
@media (min-width:1080px){
  .rail{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
    margin-inline:0; padding-inline:0; scroll-padding-inline:0;
  }
  .rail .card{ flex:none; }

  /* O trilho que carrega a loja inteira NUNCA vira grade: ele existe
     para ser arrastado até o fim. Vira grade só o trilho curto, de
     quatro peças, onde a grade cabe. */
  .rail.rail-todos{
    display:flex; gap:var(--s2);
    margin-inline:-1rem; padding-inline:1rem; scroll-padding-inline:1rem;
  }
  /* pouco mais de quatro à vista: a quinta espiando diz que há mais */
  .rail.rail-todos .card{ flex:0 0 22.5%; }
}

/* min-width:0 é o que permite o cartão encolher: sem isso a linha de
   cores em nowrap vira o piso da coluna e estoura a grade no celular */
.card{
  display:flex; flex-direction:column; min-width:0;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
@media (hover:hover){
  .card:hover{ transform:translateY(-3px); }
  .card:hover .card-media{ box-shadow:inset 0 0 0 1px var(--rule), 0 10px 28px -12px rgba(43,18,25,.42); }
}
.card-media{ transition:box-shadow .3s; }
@media (prefers-reduced-motion:reduce){ .card, .card-media, .card-media img{ transition:none; } }
/* a foto pousa num papel neutro — nunca mais o rosa do tint por trás
   do recorte transparente — com moldura fina e sombra de chão, como
   numa prancha de lookbook */
.card-media{
  position:relative; aspect-ratio:4/5; background:var(--photo-bg);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
  overflow:hidden; cursor:pointer; margin-bottom:.7rem;
}
.card-media::before{
  content:""; position:absolute; left:10%; right:10%; bottom:7%; height:16%;
  background:radial-gradient(closest-side, rgba(43,18,25,.14), transparent 72%);
}
.card-media img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .5s ease;
  /* a foto não é um objeto solto: sem isso dá para "pegar" e arrastar
     a imagem para fora do lugar, por cima do gesto do trilho */
  -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; user-select:none;
}
.card:hover .card-media img{ transform:scale(1.04); }
/* segunda foto da peça: some por baixo, some por cima quando a cliente
   encosta o cursor — só existe quando a peça tem mais de uma foto */
.card-media .foto-b{ position:absolute; inset:0; opacity:0; }
@media (hover:hover){
  .card:hover .card-media .foto-b{ opacity:1; }
  .card:hover .card-media .foto-a{ opacity:0; }
}
.card-tag{
  position:absolute; top:.55rem; left:.55rem; z-index:2;
  background:var(--paper); color:var(--wine);
  font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .5rem;
}
/* ------------------------------------------------------------
   O cartão tem sempre a mesma altura, tenha a peça três tamanhos
   ou dez cores. Cada área ganha altura reservada e o botão fica
   colado embaixo, para a grade terminar na mesma linha.
   ------------------------------------------------------------ */
.card-name{
  font-family:var(--ff-display); font-size:1rem; font-weight:400;
  line-height:1.25; color:var(--ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(2 * 1.25em);
}
.card-price{ font-size:.95rem; font-weight:600; color:var(--wine); margin-top:.15rem; font-variant-numeric:tabular-nums; }
.card-meta{
  font-size:.75rem; color:var(--muted); margin-top:.25rem; line-height:1.5;
  min-height:calc(2 * 1.5em);   /* duas linhas reservadas: cores e tamanhos */
}
/* cores numa linha, tamanhos noutra: são coisas diferentes.
   Muitas opções não empurram o cartão — a lista completa está
   na peça e na nuvem de escolha. */
.card-meta span{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; max-width:100%;
}
/* a bolinha da cor: leitura visual mais rápida que o nome escrito */
.card-meta span i{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:.22rem; vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(43,18,25,.2);
}
.card .btn{ margin-top:auto; }   /* o botão desce até a base do cartão */
.grid > .card, .rail > .card{ height:100%; }
.card .btn{ margin-top:.7rem; width:100%; font-size:.78rem; letter-spacing:.05em; padding:.85rem .6rem; }
@media (min-width:760px){ .card .btn{ font-size:.82rem; letter-spacing:.07em; } }

/* ============================================================
   BOTÕES — um estilo por função
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  /* Maiúscula pequena com muito espaçamento sobre fundo saturado é o
     caso mais difícil de ler que existe. Sobe o corpo, fecha um pouco
     o espaçamento e mantém o peso. */
  font-size:.82rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:.85rem 1.3rem; border-radius:var(--r-sm); line-height:1;
  min-height:44px; transition:background .18s, color .18s, border-color .18s;
}
.btn svg{ width:15px; height:15px; }
.btn-primary{ background:var(--cta); color:var(--cta-ink); }
.btn-primary:hover{ background:var(--cta-hover); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-light:hover{ background:#fff; }
.btn-wa{ background:var(--wa); color:#0A2E17; }
.btn-wa:hover{ background:var(--wa-dark); color:#fff; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.empty-state{ grid-column:1/-1; padding:var(--s5) 0; color:var(--muted); max-width:44ch; }
.empty-state h3{ font-family:var(--ff-display); font-size:1.3rem; color:var(--ink); margin-bottom:.3rem; font-weight:400; }

/* ============================================================
   WHATSAPP — um bloco, um convite
   ============================================================ */
.wa-block{ margin-top:var(--s6); background:var(--band); color:var(--band-ink); }
.wa-in{ padding:var(--s5) 0; display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
@media (min-width:760px){
  .wa-in{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s4); }
}
.wa-block h2{ font-family:var(--ff-display); font-weight:400; font-size:1.5rem; line-height:1.15; max-width:18ch; }
.wa-block p{ font-size:.92rem; color:var(--band-ink-2); margin-top:.45rem; max-width:36ch; }

/* ============================================================
   RODAPÉ — o mínimo
   ============================================================ */
.site-footer{ padding:var(--s5) 0 var(--s4); border-top:1px solid var(--rule); margin-top:var(--s6); }
.wa-block + .site-footer{ margin-top:0; border-top:none; }
.foot-brand{ font-family:var(--ff-display); font-size:1.15rem; font-weight:500; }
.foot-line{ font-size:.85rem; color:var(--muted); margin-top:.3rem; }
.foot-links{ display:flex; gap:var(--s2); margin-top:var(--s2); }
.foot-links a{ font-size:.85rem; color:var(--ink-2); border-bottom:1px solid var(--rule); padding-bottom:1px; }
.foot-links a:hover{ color:var(--wine); border-color:var(--wine); }
.foot-bottom{
  margin-top:var(--s4); font-size:.72rem; color:var(--muted);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap;
  /* o selo do WhatsApp mora fixo neste canto de baixo à direita e passa
     por cima de tudo que estiver embaixo dele. Esta folga é a faixa que
     ele ocupa: sem ela, a porta do painel fica literalmente inclicável. */
  padding-right:calc(56px + var(--s2) + var(--s1));
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (min-width:760px){ .foot-bottom{ padding-right:calc(62px + var(--s3) + var(--s1)); } }
/* a porta do painel é usada todo dia por quem toca a loja: merece alvo
   de dedo de verdade, não um link de 34 × 18 px encolhido num canto */
.foot-painel{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  padding:.5rem .95rem; border:1px solid var(--rule); border-radius:99px;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:var(--paper);
  transition:color .2s, border-color .2s, background .2s;
}
.foot-painel:hover{ color:var(--wine); border-color:var(--wine); background:var(--tint); }
.foot-painel svg{ width:14px; height:14px; flex-shrink:0; }

/* ============================================================
   FORMA DE RECEBIMENTO — retirada ou entrega
   ============================================================ */
.receb-opcoes{ display:grid; gap:.5rem; grid-template-columns:1fr; margin-top:.15rem; }
@media (min-width:420px){ .receb-opcoes{ grid-template-columns:1fr 1fr; } }
.receb-opcao{
  display:flex; align-items:center; gap:.6rem; text-align:left; width:100%;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
  padding:.75rem .85rem; border-radius:var(--r-sm); min-height:56px;
  transition:border-color .18s, background .18s;
}
.receb-opcao:hover{ border-color:var(--ink); }
.receb-marca{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--rule);
  flex:0 0 auto; position:relative; transition:border-color .18s;
}
.receb-opcao.ativa{ border-color:var(--cta); background:var(--paper-2); }
.receb-opcao.ativa .receb-marca{ border-color:var(--cta); border-width:2px; }
.receb-opcao.ativa .receb-marca::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--cta);
}
.receb-texto{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.receb-texto b{ font-weight:500; font-size:.92rem; }
.receb-texto i{ font-style:normal; font-size:.75rem; color:var(--muted); margin-top:.1rem; }
.field.invalid .receb-opcao{ border-color:var(--wine); }

/* ============================================================
   NUVEM DE ESCOLHA — tamanho e cor na hora de adicionar
   No computador é um balão ancorado no botão; no celular sobe
   como uma folha pelo rodapé, que é onde o polegar alcança.
   ============================================================ */
.nuvem{
  position:fixed; z-index:100; display:none;
  width:min(20rem, calc(100vw - 2rem));
  background:var(--card); border:1px solid var(--rule);
  box-shadow:var(--shadow-lg); padding:1.15rem 1.15rem 1.15rem;
}
.nuvem.aberta{ display:block; }
.nuvem-fechar{ position:absolute; top:.45rem; right:.45rem; }
.nuvem-eyebrow{
  display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding-right:2rem;
}
.nuvem-titulo{
  font-family:var(--ff-display); font-weight:400; font-size:1.05rem; line-height:1.2;
  margin-top:.15rem; padding-right:2rem;
}
.nuvem-grupo{ margin-top:.9rem; }
.nuvem-grupo .field-label{ margin-bottom:.4rem; }
.nuvem-opcoes{ display:flex; flex-wrap:wrap; gap:.4rem; }
.nuvem #nuvemAdd{ margin-top:1.1rem; }
.nuvem #nuvemAdd:disabled{ opacity:.55; cursor:not-allowed; }

/* no celular: folha pelo rodapé */
.nuvem.folha{
  left:0; right:0; bottom:0; top:auto; width:100%;
  border-left:none; border-right:none; border-bottom:none;
  padding-bottom:calc(1.15rem + env(safe-area-inset-bottom));
}

/* ============================================================
   OVERLAY · GAVETA · MODAL
   ============================================================ */
.overlay{
  position:fixed; inset:0; background:rgba(var(--scrim),.5); z-index:80;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.overlay.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(430px,100%);
  background:var(--paper); z-index:90; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule);
}
.drawer-head h2{ font-family:var(--ff-display); font-size:1.15rem; font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.drawer-body{ flex:1; overflow-y:auto; padding:var(--s2) var(--s3); }
.drawer-foot{ padding:var(--s3); border-top:1px solid var(--rule); background:var(--paper); }
.close-btn{ width:42px; height:42px; display:grid; place-items:center; color:var(--muted); }
.close-btn:hover{ color:var(--ink); }
.close-btn svg{ width:20px; height:20px; }

/* item do pedido */
.cart-item{ display:flex; gap:var(--s2); padding:var(--s2) 0; border-bottom:1px solid var(--rule-soft); }
.cart-item:last-child{ border-bottom:none; }
.cart-item img{ width:68px; height:85px; object-fit:cover; background:var(--tint); flex-shrink:0; }
.ci-info{ flex:1; min-width:0; }
.ci-name{ font-family:var(--ff-display); font-size:.98rem; font-weight:400; line-height:1.2; }
.ci-meta{ font-size:.75rem; color:var(--muted); margin:.15rem 0 .35rem; }
.ci-price{ font-size:.9rem; font-weight:600; color:var(--wine); }
.ci-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; gap:var(--s1); }
.ci-remove{ font-size:.75rem; color:var(--muted); }
.ci-remove:hover{ color:var(--wine); }

.stepper{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:var(--r-sm); }
.stepper button{ width:36px; height:36px; display:grid; place-items:center; color:var(--ink); font-size:1rem; }
.stepper button:hover{ background:var(--paper-2); }
.stepper span{ min-width:34px; text-align:center; font-size:.9rem; font-weight:600; }

.cart-empty{ padding:var(--s5) 0; color:var(--muted); text-align:center; }
.cart-empty h3{ font-family:var(--ff-display); font-size:1.2rem; color:var(--ink); margin-bottom:.3rem; font-weight:400; }

.cart-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:var(--s2); margin-bottom:var(--s2); border-bottom:1px solid var(--rule);
}
.cart-total .lbl{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cart-total .val{ font-family:var(--ff-display); font-size:1.4rem; font-weight:500; color:var(--wine); font-variant-numeric:tabular-nums; }
.estimate-note{ font-size:.72rem; color:var(--muted); margin-top:.7rem; text-align:center; }
.cart-tools{ display:flex; justify-content:flex-end; margin-bottom:var(--s1); }
.link-btn{ font-size:.75rem; color:var(--muted); }
.link-btn:hover{ color:var(--wine); }

/* ============================================================
   PÁGINA DO PRODUTO (modal)
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:90; display:grid; place-items:end center;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
@media (min-width:760px){ .modal{ place-items:center; padding:var(--s3); } }
.modal.open{ opacity:1; visibility:visible; }
.modal-card{
  background:var(--paper); width:100%; max-height:94dvh; overflow-y:auto;
  position:relative; transform:translateY(20px); transition:transform .28s;
}
@media (min-width:760px){
  .modal-card{ width:min(980px,100%); max-height:90dvh; display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden; }
}
.modal.open .modal-card{ transform:none; }
.modal-close{
  position:absolute; top:.6rem; right:.6rem; z-index:5;
  background:var(--paper); border-radius:99px;
}

.gallery{ background:var(--tint); }
@media (min-width:760px){ .gallery{ overflow-y:auto; } }
.gallery-main{ position:relative; aspect-ratio:4/5; touch-action:pan-y; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }

/* Setas e pontos só aparecem quando a peça tem mais de uma foto —
   a classe .tem-mais é ligada pelo app ao abrir a peça.
   Discretos de propósito: a foto é que tem de aparecer. */
.gal-seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  display:none; place-items:center; z-index:2;
  background:rgba(var(--scrim),.26); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s, transform .12s;
}
.tem-mais .gal-seta{ display:grid; }
.gal-seta svg{
  width:22px; height:22px; stroke-width:1.5;
  filter:drop-shadow(0 1px 3px rgba(43,18,25,.45));
}
.gal-seta:hover{ background:rgba(var(--scrim),.42); }
.gal-seta:active{ transform:translateY(-50%) scale(.92); }
.gal-prev{ left:.5rem; }
.gal-next{ right:.5rem; }

/* um ponto por foto; o cheio é a que está à vista */
.gal-pontos{
  position:absolute; left:0; right:0; bottom:.75rem; z-index:2;
  display:none; justify-content:center; align-items:center; gap:.38rem;
  pointer-events:none;
}
.tem-mais .gal-pontos{ display:flex; }
.gal-ponto{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.5);
  /* o anel fino segura o ponto também sobre foto clara */
  box-shadow:0 0 0 1px rgba(43,18,25,.22), 0 1px 3px rgba(43,18,25,.35);
  transition:background .2s, transform .2s;
}
.gal-ponto.active{ background:rgba(255,255,255,.98); transform:scale(1.25); }

.gallery-thumbs{ display:flex; gap:.4rem; padding:.5rem; overflow-x:auto; scrollbar-width:none; }
.gallery-thumbs::-webkit-scrollbar{ display:none; }
.gallery-thumbs img{
  width:54px; height:67px; object-fit:cover; cursor:pointer; opacity:.6;
  border:2px solid transparent; flex-shrink:0; transition:opacity .18s, border-color .18s;
}
.gallery-thumbs img:hover{ opacity:.85; }
.gallery-thumbs img.active{ opacity:1; border-color:var(--wine); }

/* Aviso na vitrine: esta peça tem mais fotos lá dentro.
   Mesma linguagem dos pontos da galeria, em tamanho de cartão. */
.card-pontos{
  position:absolute; left:0; right:0; bottom:.5rem; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:.28rem;
  pointer-events:none;
}
.card-pontos i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(43,18,25,.2), 0 1px 2px rgba(43,18,25,.3);
}
.card-pontos i.on{ background:rgba(255,255,255,.98); }

.modal-info{ padding:var(--s3); }
@media (min-width:760px){ .modal-info{ padding:var(--s4); overflow-y:auto; } }
.modal-cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.modal-info h2{
  font-family:var(--ff-display); font-size:1.6rem; font-weight:400;
  line-height:1.14; margin:.3rem 0 .4rem; letter-spacing:-.01em;
}
.modal-price{ font-size:1.3rem; font-weight:600; color:var(--wine); font-variant-numeric:tabular-nums; }
.field-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:var(--s3) 0 .5rem; display:block; }
.size-options{ display:flex; flex-wrap:wrap; gap:.45rem; }
.size-chip{
  min-width:46px; min-height:44px; padding:.6rem .8rem; border:1px solid var(--rule);
  border-radius:var(--r-sm); background:var(--card); font-size:.85rem; color:var(--ink);
  transition:border-color .18s, background .18s;
}
.size-chip:hover{ border-color:var(--ink); }
.size-chip.active{ background:var(--chip-on); color:var(--chip-on-ink); border-color:var(--chip-on); }
.size-chip.color-chip{ display:inline-flex; align-items:center; gap:.4rem; text-transform:capitalize; }
.size-chip.color-chip i{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:0 0 auto; }
.size-chip.color-chip.active i{ border-color:rgba(255,255,255,.5); }
/* tamanho que não existe na cor escolhida: cinza, riscado e sem clique */
.size-chip.indisponivel,
.size-chip:disabled{
  color:var(--muted); background:var(--paper-2); border-color:var(--rule-soft);
  cursor:not-allowed; position:relative; opacity:.85;
}
.size-chip.indisponivel:hover, .size-chip:disabled:hover{ border-color:var(--rule-soft); }
.size-chip.indisponivel::after{
  content:""; position:absolute; left:12%; right:12%; top:50%;
  height:1px; background:var(--muted); opacity:.55; transform:rotate(-12deg);
}
.size-chip.color-chip.indisponivel i{ filter:grayscale(1); opacity:.5; }
.modal-desc{ font-size:.86rem; color:var(--ink-2); line-height:1.6; margin-top:var(--s3); }
.qty-row{ margin-top:.4rem; }
.modal-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:var(--s3); }

/* ============================================================
   ESQUELETO
   ============================================================ */
.skeleton{
  background:linear-gradient(90deg, var(--paper-2) 25%, var(--tint) 37%, var(--paper-2) 63%);
  background-size:400% 100%; animation:sk 1.4s ease-in-out infinite;
}
@keyframes sk{ from{ background-position:100% 0; } to{ background-position:0 0; } }
.sk-hero{ min-height:62vh; }
@media (min-width:760px){ .sk-hero{ min-height:74vh; } }
.sk-photo{ aspect-ratio:4/5; margin-bottom:.7rem; }
.sk-line{ height:11px; margin-bottom:.45rem; }
.sk-line.short{ width:50%; }
@media (prefers-reduced-motion:reduce){ .skeleton{ animation:none; } }

/* ---------- WhatsApp flutuante ----------
   Sempre à mão, no canto onde o polegar já espera encontrar — mas
   abaixo de qualquer véu, balão ou nuvem que se abra por cima. */
/* o selo: a marca oficial do WhatsApp em branco, num disco da cor da
   casa — o vinho da loja, não o verde de fábrica */
.wa-float{
  position:fixed; right:var(--s2); bottom:calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  z-index:70; width:56px; height:56px; display:grid; place-items:center;
  background:var(--wine); color:#fff; border-radius:50%;
  box-shadow:0 6px 20px -4px rgba(43,18,25,.4);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ background:var(--wine-dark); transform:translateY(-2px); box-shadow:0 10px 26px -4px rgba(43,18,25,.48); }
.wa-float:active{ transform:scale(.95); }
@media (min-width:760px){
  .wa-float{ right:var(--s3); bottom:calc(var(--s3) + env(safe-area-inset-bottom, 0px)); width:62px; height:62px; }
  .wa-float svg{ width:33px; height:33px; }
}
@media (prefers-reduced-motion:reduce){ .wa-float{ transition:none; } }

/* ============================================================
   MODO SEXY SHOP
   Não é outro site: é o MESMO catálogo trocando de atmosfera.
   Todo o desenho já lê estas variáveis, então o cabeçalho, o
   carrinho, a página da peça e o checkout escurecem junto —
   sem uma linha de código duplicada.
   ============================================================ */
:root[data-modo="sexyshop"]{
  color-scheme:dark;

  --paper:#120A0D;        /* preto com viés vermelho, nunca cinza neutro */
  --paper-2:#1C1013;
  --tint:#241016;
  --photo-bg:#1C1013;
  --card:#1C1013;

  --ink:#F3E7E9;          /* seda */
  --ink-2:#CBB4B8;
  --muted:#A08B90;

  --wine:#E0335F;         /* o rosa da casa erguido para ler no escuro */
  --wine-dark:#B2214A;
  --cta:#E0335F;
  --cta-hover:#B2214A;
  --cta-ink:#FFFFFF;

  --band:#2A1018;
  --band-ink:#F3E7E9;
  --band-ink-2:#D9C3A9;
  --hero-empty:#2A1018;
  --chip-on:#E0335F;
  --chip-on-ink:#FFFFFF;

  --scrim:9,5,7;
  --rule:rgba(243,231,233,.14);
  --rule-soft:rgba(243,231,233,.07);
  --line-soft:rgba(243,231,233,.07);
  --ivory:#1C1013;
  --plum:#2A1018;
  --blush:#241016;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px -8px rgba(0,0,0,.7);
  --shadow-lg:0 18px 50px -20px rgba(0,0,0,.85);
}
:root[data-modo="sexyshop"] body{ background:var(--paper); color:var(--ink); }

/* a marca do cabeçalho ganha o ar da área, sem trocar de lugar */
:root[data-modo="sexyshop"] .brand .wordmark::after{
  content:" · Sexy Shop";
  color:var(--wine); letter-spacing:.02em;
}
:root[data-modo="sexyshop"] .site-header{
  background:rgba(18,10,13,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
:root[data-modo="sexyshop"] .header-search{ background:rgba(243,231,233,.04); }
/* Em 320px o sufixo da marca empurrava o carrinho para fora da tela.
   Abaixo de 380px ele sai: o fundo escuro já diz onde a cliente está. */
@media (max-width:379px){
  :root[data-modo="sexyshop"] .brand .wordmark::after{ display:none; }
}

/* a entrada na área, no menu e no cabeçalho */
.ss-porta{ color:var(--wine) !important; letter-spacing:.12em !important; }
.ss-porta::before{ content:"◆"; font-size:.6em; margin-right:.45em; vertical-align:.15em; }

/* ---------- véu: a passagem entre os dois modos ---------- */
.ss-veu{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(120% 80% at 50% 45%, #3A121F, #120A0D 62%);
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
}
.ss-veu.on{ opacity:1; visibility:visible; }
.ss-veu span{
  font-family:var(--ff-display); font-weight:400; color:#F3E7E9;
  font-size:1.5rem; letter-spacing:.42em; text-indent:.42em;
}
@media (prefers-reduced-motion:reduce){ .ss-veu{ transition:none; } }

/* ---------- portão de maioridade ---------- */
.ss-gate{
  position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:var(--s2);
  background:rgba(9,5,7,.72);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.ss-gate.open{ opacity:1; visibility:visible; }
.ss-gate-card{
  width:min(22rem, 100%); background:var(--card); border:1px solid var(--rule);
  box-shadow:var(--shadow-lg); padding:var(--s3); text-align:center;
}
.ss-gate-card h2{ font-family:var(--ff-display); font-weight:400; font-size:1.25rem; color:var(--ink); margin-bottom:.5rem; }
.ss-gate-card p{ font-size:.85rem; color:var(--muted); line-height:1.5; margin-bottom:var(--s3); }
.ss-gate-acoes{ display:flex; flex-direction:column; gap:.6rem; }

/* ---------- hero da área ---------- */
.ss-hero{
  position:relative; padding:var(--s5) 0 var(--s4); text-align:center;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(224,51,95,.16), transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(58,18,31,.75), transparent 70%);
}
.ss-hero::after{
  content:""; position:absolute; left:50%; bottom:0; width:min(560px, 80%); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(224,51,95,.3), transparent);
}
.ss-hero .wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.ss-eyebrow{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:#D9C3A9; }
.ss-titulo{
  font-family:var(--ff-display); font-weight:400; color:var(--ink);
  font-size:clamp(2.3rem, 12vw, 4.4rem); line-height:1;
  letter-spacing:.16em; text-indent:.16em; text-wrap:balance;
}
.ss-linha{ color:var(--muted); font-size:.95rem; max-width:34ch; text-wrap:balance; }
.ss-hero .btn{ margin-top:var(--s1); min-width:190px; }


/* ---------- chips de categoria da área ---------- */
#ssChips{ gap:.5rem; }
#ssChips .ss-chip{
  flex:0 0 auto; scroll-snap-align:start; min-height:44px;
  padding:.6rem 1.05rem; border-radius:99px;
  border:1px solid var(--rule-soft); background:rgba(243,231,233,.03);
  color:var(--muted); font-size:.78rem; letter-spacing:.05em; white-space:nowrap;
  transition:border-color .25s, color .25s, background .25s;
}
#ssChips .ss-chip:hover{ color:var(--ink); border-color:var(--rule); }
#ssChips .ss-chip.on{ background:var(--wine); border-color:var(--wine); color:#fff; }

/* ---------- rodapé da área ---------- */
:root[data-modo="sexyshop"] .wa-block{ background:#2A1018; }
:root[data-modo="sexyshop"] .site-footer{ background:var(--paper-2); }

/* a porta da área na faixa de categorias: escura no claro, marcada —
   a foto some, entra o convite; o resto do cat-tile (índice abaixo)
   é o mesmo dos outros ladrilhos */
.cat-tile.ss-tile .ph{
  background:
    radial-gradient(85% 65% at 50% 30%, rgba(224,51,95,.28), transparent 62%),
    linear-gradient(160deg, #241016, #120A0D);
}
.cat-tile.ss-tile .ph::before{ display:none; }
/* Com capa cadastrada, a porta mostra a FOTO.
   A primeira versão disto escurecia a foto a ponto de apagá-la: medido
   com a mesma imagem nos oito ladrilhos, a porta ficava 75% mais escura
   que as vizinhas, e a peça sumia. Escurecer era o jeito errado de
   dizer "esta é outra área" — quem sobe uma capa quer que a capa
   apareça. O que marca a porta agora é a COR e a LETRA, não a sombra:
   um véu vinho só no pé (onde a legenda pousa, como numa prancha de
   lookbook), um fio vinho na moldura, e o nome em versal vinho que já
   existia. A foto fica legível, e a porta continua sendo a porta. */
.cat-tile.ss-tile.com-foto .ph img{ filter:saturate(1.04); }
/* Com foto, o FUNDO da porta volta a ser o mesmo papel neutro dos
   outros ladrilhos. Sem isto, o gradiente escuro da porta ficava atrás
   da imagem: numa foto com recorte transparente (PNG), a peça pousava
   no preto enquanto as vizinhas pousavam no creme — exatamente a
   divergência de fundo. E a sombra de chão, que a porta escondia,
   volta junto: é ela que faz a peça pousar no papel. */
.cat-tile.ss-tile.com-foto .ph{
  background:var(--photo-bg);
  box-shadow:inset 0 0 0 1px rgba(191,22,67,.42);
}
.cat-tile.ss-tile.com-foto .ph::before{ display:block; }
.cat-tile.ss-tile.com-foto .ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* o nome fica ABAIXO da foto, então este véu não tem trabalho de
     legibilidade: é só marca. Por isso é o vinho da casa, leve, e
     não um cinza escuro — que na foto clara lia como sujeira. */
  background:linear-gradient(to top, rgba(191,22,67,.24), rgba(191,22,67,.06) 40%, transparent 72%);
}
.cat-tile.ss-tile.com-foto:hover .ph{
  box-shadow:inset 0 0 0 1px rgba(191,22,67,.75), 0 10px 24px -14px rgba(92,14,42,.45);
}
.cat-tile.ss-tile .cat-index-n{ color:var(--wine); }
.cat-tile.ss-tile .cat-index-name{
  color:var(--wine); letter-spacing:.1em; text-transform:uppercase; font-size:.9rem;
}

/* ---------- toast ---------- */
.toast-wrap{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:120;
  display:flex; flex-direction:column; gap:.4rem; align-items:center; pointer-events:none;
  width:calc(100% - 2rem); max-width:24rem;
}
.toast{
  background:var(--ink); color:var(--paper); padding:.8rem 1.1rem; border-radius:var(--r-sm);
  font-size:.85rem; display:flex; align-items:center; gap:.5rem; width:100%;
  animation:tIn .28s ease, tOut .28s ease 2.5s forwards;
}
.toast svg{ width:16px; height:16px; flex-shrink:0; }
@keyframes tIn{ from{ opacity:0; transform:translateY(10px); } }
@keyframes tOut{ to{ opacity:0; transform:translateY(10px); } }

/* ---------- formulário do pedido ---------- */
.checkout-form .field{ margin-bottom:var(--s2); }
.checkout-form label{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.3rem; }
.checkout-form input, .checkout-form textarea{
  width:100%; padding:.8rem; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--card); outline:none; transition:border-color .18s;
}
.checkout-form input:focus, .checkout-form textarea:focus{ border-color:var(--ink); }
.checkout-form textarea{ resize:vertical; min-height:64px; }
.back-link{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--muted); margin-bottom:var(--s2); }
.back-link:hover{ color:var(--ink); }
.field-error{ color:var(--wine); font-size:.74rem; margin-top:.25rem; display:none; }
.field.invalid .field-error{ display:block; }
.field.invalid input{ border-color:var(--wine); }

:focus-visible{ outline:2px solid var(--wine); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Oculta texto e botão do banner */
.hero-in{
  display:none !important;
}

/* Plano B do checkout: quando o navegador bloqueia a abertura do
   WhatsApp, a cliente precisa de um link para tocar — senão o pedido
   simplesmente evapora e a loja nunca fica sabendo. */
.saida-whats{
  border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--tint); padding:var(--s2); margin-bottom:var(--s2);
}
.saida-whats p{ font-size:.85rem; color:var(--ink-2); margin-bottom:.7rem; line-height:1.45; }