/* ============================================================
   HARP 3D — estilo da LOJA DE PRODUTOS (loja.html)
   Usa as mesmas cores do styles.css
   ============================================================ */

.page-loja{ padding-top:64px }


/* ===================== TOPO DA LOJA ===================== */
.shop-top{ position:relative; overflow:hidden; padding:56px 0 44px; isolation:isolate }
.shop-top .orb-1{ width:420px; height:420px; top:-200px; left:-100px; opacity:.32 }
.shop-top .orb-2{ width:360px; height:360px; top:-140px; right:-100px; opacity:.28 }

.shop-top-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px;
}
.shop-top h1{ font-size:clamp(30px,5.2vw,52px); max-width:16ch }
.shop-top > .wrap > p{ color:var(--dim) }


/* ===================== BARRA DE PESQUISA ===================== */
.search{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; max-width:600px; margin-top:14px;
  padding:5px 6px 5px 18px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.search:focus-within{
  border-color:var(--create); background:rgba(245,255,0,.05);
  box-shadow:0 0 40px -12px rgba(245,255,0,.5);
}
.search-ico{ color:var(--faint); flex:0 0 auto; transition:color .25s }
.search:focus-within .search-ico{ color:var(--create) }
.search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  padding:14px 0; font-size:15px; color:var(--txt);
}
.search input::placeholder{ color:var(--faint) }
.search input::-webkit-search-cancel-button{ display:none }
.search-x{
  flex:0 0 auto; width:36px; height:36px; margin-right:4px; border:0; border-radius:50%;
  background:var(--surface-2); color:var(--dim); cursor:pointer; font-size:13px;
  transition:background .2s, color .2s;
}
.search-x:hover{ background:var(--geek); color:#fff }


/* ===================== ATALHOS RÁPIDOS ===================== */
.quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:6px }
.quick button{
  padding:9px 18px; border-radius:100px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--dim);
  font-family:var(--font-d); font-weight:600; font-size:13.5px;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
}
.quick button:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.25); color:var(--txt) }
.quick button.is-on{ background:var(--create); color:#0A0A0F; border-color:var(--create) }


/* ===================== LAYOUT: FILTROS + PRODUTOS ===================== */
.shop{ padding:10px 0 100px }
.shop-grid{ display:grid; grid-template-columns:258px 1fr; gap:30px; align-items:start }


/* ===================== FILTROS LATERAIS ===================== */
.filters{
  position:sticky; top:84px;
  padding:24px 22px; border-radius:20px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:24px;
}
.filters-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.filters-head h2{ font-size:18px }
.limpar{
  background:none; border:0; cursor:pointer; padding:4px 2px;
  font-size:13px; color:var(--create); text-decoration:underline; transition:opacity .2s;
}
.limpar:hover{ opacity:.7 }

.fgroup{ display:flex; flex-direction:column; gap:9px; padding-top:20px; border-top:1px solid var(--line) }
.fgroup:first-of-type{ padding-top:0; border-top:0 }
.fgroup h3{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:3px }

/* caixinha de marcar */
.check{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14.5px; color:var(--dim); transition:color .2s }
.check:hover{ color:var(--txt) }
.check input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:19px; height:19px; border-radius:6px; cursor:pointer;
  background:var(--bg); border:1.5px solid rgba(255,255,255,.25);
  transition:background .2s, border-color .2s;
}
.check input:checked{ background:var(--create); border-color:var(--create) }
.check input:checked::after{
  content:"✓"; display:grid; place-items:center; height:100%;
  color:#0A0A0F; font-size:12px; font-weight:800;
}
.check span{ flex:1 }
.check i{ font-style:normal; font-size:12px; color:var(--faint) }
.check:has(input:checked){ color:var(--create) }

/* preço */
.preco-val{ font-family:var(--font-d); font-size:22px; font-weight:700; color:var(--create) }
input[type=range]{
  appearance:none; -webkit-appearance:none; width:100%; height:5px; border-radius:100px;
  background:rgba(255,255,255,.12); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--create); border:3px solid var(--bg); cursor:pointer;
  box-shadow:0 0 0 1px var(--create);
}
input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%; background:var(--create);
  border:3px solid var(--bg); cursor:pointer; box-shadow:0 0 0 1px var(--create);
}
.range-legend{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint) }


/* ===================== BARRA DE CIMA DA LISTA ===================== */
.shop-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px;
}
.contagem{ font-size:14px; color:var(--dim) }
.contagem b{ color:var(--create); font-family:var(--font-d) }
.ordenar{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--faint) }
.ordenar select{
  padding:10px 14px; border-radius:100px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--txt); font-size:13.5px;
  transition:border-color .2s;
}
.ordenar select:focus{ outline:none; border-color:var(--create) }


/* ===================== PRODUTOS DE 4 EM 4 ===================== */
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }

.prod{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
  animation:prodIn .4s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes prodIn{ from{ opacity:0; transform:translateY(14px) } }
.prod:hover{ transform:translateY(-6px); border-color:var(--c); box-shadow:0 20px 44px -20px var(--c) }

/* área da foto */
.prod-foto{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(140deg,var(--g1),var(--g2));
}
.prod-foto::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}
.prod-emoji{
  font-size:58px; line-height:1; position:relative; z-index:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.prod-foto > img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1 }
.prod:hover .prod-emoji{ transform:scale(1.15) rotate(-6deg) }

/* etiquetas em cima da foto */
.tag{
  position:absolute; top:10px; z-index:2;
  padding:5px 11px; border-radius:100px;
  font-family:var(--font-d); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.tag-cat{ left:10px; background:rgba(7,7,12,.72); color:var(--c); backdrop-filter:blur(6px) }
.tag-pronto{ right:10px; background:var(--home); color:#052B1C }

/* texto do produto */
.prod-body{ display:flex; flex-direction:column; gap:5px; padding:15px 15px 14px; flex:1 }
.prod-body h3{ font-size:15.5px; line-height:1.25 }
.prod-meta{ font-size:12.5px; color:var(--faint) }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:auto; padding-top:13px }
.prod-preco{ display:flex; flex-direction:column; line-height:1.15 }
.prod-preco small{ font-size:10.5px; color:var(--faint) }
.prod-preco b{ font-family:var(--font-d); font-size:19px; color:var(--c) }
.btn-comprar{
  padding:9px 15px; border-radius:100px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--dim);
  font-family:var(--font-d); font-weight:600; font-size:12.5px;
  transition:background .22s, color .22s, border-color .22s;
}
.prod:hover .btn-comprar{ background:var(--c); color:#0A0A0F; border-color:var(--c) }


/* ===================== NADA ENCONTRADO ===================== */
.vazio{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:74px 24px; text-align:center;
  border-radius:20px; background:var(--surface); border:1px dashed var(--line);
}
.vazio > span{ font-size:44px; opacity:.7 }
.vazio h3{ font-size:21px }
.vazio p{ color:var(--dim); font-size:14.5px }
.vazio .btn{ margin-top:8px }


/* ===================== CONVITE FINAL ===================== */
.nao-achou{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  margin-top:34px; padding:30px 32px; border-radius:20px;
  background:linear-gradient(120deg,rgba(245,255,0,.1),rgba(123,43,255,.1));
  border:1px solid rgba(245,255,0,.22);
}
.nao-achou h3{ font-size:21px; margin-bottom:5px }
.nao-achou p{ color:var(--dim); font-size:14.5px }


/* ===================== BOTÃO DE FILTROS (CELULAR) ===================== */
.filtros-mob{
  display:none; position:fixed; left:50%; bottom:22px; z-index:95;
  transform:translateX(-50%); align-items:center; gap:8px;
  padding:13px 26px; border-radius:100px; cursor:pointer;
  background:var(--create); color:#0A0A0F; border:0;
  font-family:var(--font-d); font-weight:700; font-size:14.5px;
  box-shadow:0 14px 34px -10px rgba(245,255,0,.6);
}


/* ===================== TELAS MENORES ===================== */
@media (max-width:1180px){
  .grid4{ grid-template-columns:repeat(3,1fr) }
}

@media (max-width:900px){
  .shop-grid{ grid-template-columns:1fr }

  /* filtros viram gaveta que sobe */
  .filters{
    position:fixed; inset:auto 0 0 0; top:auto; z-index:120;
    max-height:82vh; overflow-y:auto; border-radius:24px 24px 0 0;
    background:rgba(12,12,20,.98); backdrop-filter:blur(20px);
    transform:translateY(102%); transition:transform .38s cubic-bezier(.22,1,.36,1);
    padding-bottom:96px;
  }
  .filters.is-open{ transform:none }
  .filtros-mob{ display:flex }
  .grid4{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:560px){
  .search input{ font-size:14px }
  .nao-achou{ flex-direction:column; align-items:flex-start }
}

@media (max-width:400px){
  .grid4{ grid-template-columns:1fr }
}