/* ==========================================================
   HELLA BOUTIQUE — vitrine
   ========================================================== */

/* ---------------- Cabeçalho ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,239,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(235,227,220,.9);
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1.1rem;
}
.topo-marca{ display:flex; align-items:center; gap:.6rem; }
.topo-marca img{ width:32px; height:32px; border-radius:10px; object-fit:cover; }
.topo-marca span{ font-weight:800; font-size:1.02rem; letter-spacing:.04em; }

.btn-sacola{
  position:relative; background:none; border:none; cursor:pointer;
  color:var(--tinta); padding:.45rem .2rem;
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--fonte); font-size:.92rem; font-weight:600; letter-spacing:-.01em;
  min-height:44px;
}
.contador{
  min-width:21px; height:21px; background:var(--rose); color:#fff;
  font-size:.74rem; font-weight:700; border-radius:99px;
  display:grid; place-items:center; padding:0 6px; font-variant-numeric:tabular-nums;
}

/* ---------------- Abertura ---------------- */
.capa{
  text-align:center; padding:2.4rem 1.3rem 1.8rem;
  max-width:640px; margin:0 auto;
}
.capa img{
  width:min(200px,52vw); margin:0 auto .9rem;
  border-radius:24px;
}
.capa .aviso-vitrine{
  font-size:1.06rem; line-height:1.5; color:var(--tinta);
  max-width:26rem; margin:0 auto; font-weight:500; letter-spacing:-.015em;
}
.capa .pagamento{
  margin-top:1.15rem; display:inline-block;
  background:var(--rose-cl); color:var(--rose-esc);
  padding:.5rem 1.05rem; border-radius:99px;
  font-size:.85rem; font-weight:600; letter-spacing:-.01em;
}

/* ---------------- Filtros ---------------- */
.filtros{
  display:flex; gap:.5rem; overflow-x:auto;
  padding:.35rem 1.1rem 1rem; scrollbar-width:none;
  max-width:1180px; margin:0 auto;
}
.filtros::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; background:var(--papel);
  border:1px solid var(--linha-forte); color:var(--tinta-suave);
  font-family:var(--fonte); font-size:.88rem; font-weight:500; letter-spacing:-.01em;
  padding:.5rem 1.05rem; border-radius:99px; cursor:pointer;
  transition:all var(--transicao); white-space:nowrap;
  min-height:42px; display:inline-flex; align-items:center;
}
.chip:hover{ border-color:var(--rose); color:var(--rose-esc); }
.chip[aria-pressed="true"]{
  background:var(--tinta); border-color:var(--tinta); color:#fff;
}

/* ---------------- Grade ---------------- */
.grade{
  display:grid; gap:1rem .8rem; padding:.4rem 1.1rem 6rem;
  grid-template-columns:repeat(2,1fr);
  max-width:1180px; margin:0 auto;
}
@media (min-width:640px){ .grade{ grid-template-columns:repeat(3,1fr); gap:1.5rem 1.1rem; } }
@media (min-width:980px){ .grade{ grid-template-columns:repeat(4,1fr); } }

.peca{
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  font-family:var(--fonte); color:inherit; display:flex; flex-direction:column; height:100%;
}
.peca-foto{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--raio); background:var(--papel);
  border:1px solid var(--linha);
  transition:box-shadow var(--transicao);
}
.peca-foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.peca:hover .peca-foto{ box-shadow:var(--sombra-md); }
.peca:hover .peca-foto img{ transform:scale(1.045); }
.peca-foto .sem-foto{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:2.2rem; font-weight:800; color:var(--rose-cl);
  background:var(--areia-clara);
}
.tarja{
  position:absolute; top:.6rem; left:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:-.01em;
  padding:.26rem .6rem; border-radius:99px;
  background:var(--rose); color:#fff;
  box-shadow:0 2px 8px rgba(44,37,33,.18);
}
.tarja.esgotado{ background:rgba(44,37,33,.88); }
.tarja.novidade{ background:var(--papel); color:var(--tinta); }

.peca-info{ padding:.65rem .15rem 0; }
.peca-nome{
  font-size:.95rem; font-weight:600; letter-spacing:-.015em;
  line-height:1.32; margin:0 0 .3rem; color:var(--tinta);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.64em;
}
.peca-preco{ display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
.preco-de{ font-size:.82rem; color:#A8998F; text-decoration:line-through; }
.preco-por{
  font-size:1.02rem; font-weight:700; letter-spacing:-.025em;
  color:var(--tinta); font-variant-numeric:tabular-nums;
}
.peca.promo .preco-por{ color:var(--rose-esc); }
.peca-tams{ margin-top:.28rem; font-size:.79rem; color:var(--tinta-suave); }

/* ---------------- Barra fixa da sacola ---------------- */
.barra-sacola{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:60; width:min(92vw,430px);
  display:flex; align-items:center; gap:.85rem;
  background:var(--tinta); color:#fff; border:none; cursor:pointer;
  padding:.85rem 1rem .85rem 1.25rem; border-radius:99px;
  box-shadow:0 10px 34px -8px rgba(44,37,33,.5);
  font-family:var(--fonte); font-size:.95rem;
  animation:sobeBarra 260ms cubic-bezier(.22,.61,.36,1);
}
@keyframes sobeBarra{ from{opacity:0;transform:translate(-50%,14px);} to{opacity:1;transform:translate(-50%,0);} }
.barra-sacola .bs-qtd{ font-weight:500; opacity:.72; }
.barra-sacola .bs-total{ font-weight:700; font-variant-numeric:tabular-nums; margin-left:auto; }
.barra-sacola .bs-cta{
  background:var(--rose); padding:.42rem .9rem; border-radius:99px;
  font-weight:600; font-size:.88rem;
}

/* ---------------- Painéis ---------------- */
.painel{ position:fixed; inset:0; z-index:100; display:none; }
.painel[aberto]{ display:block; }
.painel-fundo{
  position:absolute; inset:0; background:rgba(44,37,33,.42);
  backdrop-filter:blur(3px); animation:apaga 200ms ease-out;
}
@keyframes apaga{ from{opacity:0;} to{opacity:1;} }
.painel-corpo{
  position:absolute; right:0; top:0; bottom:0; width:min(460px,100%);
  background:var(--areia-clara); display:flex; flex-direction:column;
  box-shadow:-14px 0 44px -18px rgba(44,37,33,.4);
  animation:entra 280ms cubic-bezier(.22,.61,.36,1);
}
@keyframes entra{ from{ transform:translateX(30px); opacity:0; } to{ transform:none; opacity:1; } }
.painel-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-bottom:1px solid var(--linha); flex:0 0 auto;
  background:var(--areia-clara);
}
.painel-topo h2{ font-size:1.12rem; font-weight:700; }
.fechar{
  background:var(--papel); border:1px solid var(--linha); border-radius:99px;
  width:32px; height:32px; font-size:1.15rem; line-height:1;
  color:var(--tinta-suave); cursor:pointer; display:grid; place-items:center;
  transition:all var(--transicao);
}
.fechar:hover{ border-color:var(--rose); color:var(--rose-esc); }
.painel-rolagem{ flex:1 1 auto; overflow-y:auto; padding:1.2rem; }
.painel-rodape{
  flex:0 0 auto; padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha); background:var(--papel);
}

/* ---------------- Detalhe ---------------- */
.galeria{
  display:flex; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-bottom:1.1rem; scrollbar-width:none;
}
.galeria::-webkit-scrollbar{ display:none; }
.galeria img{
  flex:0 0 100%; scroll-snap-align:center; aspect-ratio:3/4;
  object-fit:cover; border-radius:var(--raio); border:1px solid var(--linha);
}
.detalhe-preco{ display:flex; align-items:baseline; gap:.65rem; margin:.45rem 0 .2rem; }
.detalhe-preco .preco-por{ font-size:1.7rem; letter-spacing:-.035em; }
.economia{
  display:inline-block; font-size:.83rem; font-weight:600; color:var(--verde);
  background:rgba(63,122,85,.1); padding:.25rem .65rem; border-radius:99px;
}
.descricao{
  color:var(--tinta-suave); white-space:pre-line; line-height:1.6;
  margin:1rem 0 1.3rem; font-size:.95rem;
}

.tamanhos{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.tam{
  min-width:56px; padding:.55rem .8rem; background:var(--papel);
  border:1px solid var(--linha-forte); border-radius:var(--raio-sm); cursor:pointer;
  font-family:var(--fonte); font-size:.92rem; font-weight:500; color:var(--tinta);
  transition:all var(--transicao); text-align:center;
}
.tam:hover:not(:disabled){ border-color:var(--rose); }
.tam[aria-pressed="true"]{
  border-color:var(--tinta); background:var(--tinta); color:#fff;
}
.tam:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.tam small{ display:block; font-size:.68rem; font-weight:400; opacity:.72; margin-top:1px; }

.qtd{ display:flex; align-items:center; gap:.2rem; margin-bottom:1.2rem;
      background:var(--papel); border:1px solid var(--linha-forte);
      border-radius:99px; padding:.25rem; width:fit-content; }
.qtd button{
  width:36px; height:36px; border:none; background:none; border-radius:99px;
  color:var(--tinta); font-size:1.2rem; cursor:pointer;
  transition:background var(--transicao);
}
.qtd button:hover{ background:var(--areia); }
.qtd span{ min-width:2.4ch; text-align:center; font-weight:600;
           font-variant-numeric:tabular-nums; }

/* ---------------- Sacola ---------------- */
.item-sacola{
  display:grid; grid-template-columns:64px 1fr auto; gap:.85rem;
  padding:.9rem 0; border-bottom:1px solid var(--linha); align-items:center;
}
.item-sacola img{ width:64px; aspect-ratio:3/4; object-fit:cover;
                  border-radius:var(--raio-sm); border:1px solid var(--linha); }
.item-sacola .vazio-foto{ width:64px; aspect-ratio:3/4; background:var(--areia);
                          border-radius:var(--raio-sm); }
.item-sacola h4{ margin:0 0 .15rem; font-size:.96rem; font-weight:600; letter-spacing:-.015em; }
.item-sacola .meta{ font-size:.83rem; color:var(--tinta-suave); }
.remover{
  background:none; border:none; color:var(--tinta-suave); cursor:pointer;
  font-size:.85rem; font-weight:500; padding:.3rem; border-radius:6px;
  transition:color var(--transicao);
}
.remover:hover{ color:var(--alerta); }

.totais{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; }
.totais strong{ font-size:1.5rem; font-weight:700; letter-spacing:-.035em;
                color:var(--tinta); font-variant-numeric:tabular-nums; }

.rodape-loja{
  text-align:center; padding:2.2rem 1rem 7rem;
  border-top:1px solid var(--linha); color:var(--tinta-suave); font-size:.85rem;
}
.rodape-loja p{ margin:.25rem 0; }
.rodape-loja a{ color:var(--tinta-suave); text-decoration:underline; text-underline-offset:3px; }
.linha-ref{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
            margin:0 0 .5rem; font-size:.83rem; color:var(--tinta-suave); }
.ref-peca{
  display:inline-block; font-weight:700; font-size:.79rem; letter-spacing:.03em;
  color:var(--rose-esc); background:var(--rose-cl);
  padding:.2rem .55rem; border-radius:6px;
}
.ref-peca.pequena{ font-size:.72rem; padding:.1rem .4rem; }