/* ===========================================================================
   PAGINA DA COLECAO
   So o que e exclusivo desta pagina. O resto vem do estilo.css.
   =========================================================================== */

/* ---------- topo da pagina ---------- */
.col-topo{background:var(--ink);color:#E8E1D7;padding:clamp(150px,17vw,220px) 0 clamp(60px,7vw,90px);
  position:relative;overflow:hidden}
.col-topo h1{color:#F2ECE3;max-width:15ch}
.col-topo .lead{margin-top:26px;color:#ADA296}
.col-topo .eyebrow{color:var(--brand)}

/* ---------- filtros ----------
   Texto com risco embaixo, nao botao. Botao arredondado com fundo cinza
   e linguagem de loja de eletronico; aqui a pagina inteira e de luxo. */
.filtros{position:sticky;top:0;z-index:40;background:rgba(248,244,238,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.filtros .wrap{display:flex;align-items:center;gap:clamp(18px,3vw,42px);
  flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.filtros b{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#8E8378;font-weight:400;flex:none}
.f-grupo{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.f-btn{background:none;border:0;cursor:pointer;font-family:inherit;font-weight:300;
  font-size:15px;color:var(--body);padding:5px 0;position:relative;transition:.3s}
.f-btn:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brand-deep);transition:right .4s cubic-bezier(.2,.7,.3,1)}
.f-btn:hover{color:var(--ink)}
.f-btn.on{color:var(--ink)}
.f-btn.on:after{right:0}
.f-conta{margin-left:auto;font-size:13px;color:#8E8378;flex:none}

/* ---------- grade de produtos ---------- */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);
  padding:clamp(50px,7vw,80px) 0 clamp(90px,11vw,140px)}
.card{position:relative;background:transparent;transition:.5s cubic-bezier(.2,.7,.3,1)}
.card.oculto{display:none}

.card-foto{position:relative;overflow:hidden;background:var(--ivory-2);
  aspect-ratio:4/5;margin-bottom:22px}
.card-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-foto img{transform:scale(1.05)}
.card-casa{position:absolute;left:0;top:0;background:var(--ivory);color:var(--ink);
  padding:9px 16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;z-index:2}

/* o botao de escolher: circulo discreto que vira selo laranja */
.escolher{
  position:absolute;right:16px;bottom:16px;z-index:3;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(248,244,238,.92);border:1px solid transparent;
  display:grid;place-items:center;color:var(--ink);
  transition:.4s cubic-bezier(.2,.7,.3,1);backdrop-filter:blur(6px);
}
.escolher svg{transition:.4s}
.escolher:hover{background:var(--ivory);transform:scale(1.06)}
.card.escolhido .escolher{background:var(--brand);color:#fff}
.card.escolhido .escolher .mais{opacity:0;transform:rotate(90deg) scale(.5)}
.escolher .certo{position:absolute;opacity:0;transform:scale(.5)}
.card.escolhido .escolher .certo{opacity:1;transform:none}
.card.escolhido .card-foto{outline:1px solid var(--brand);outline-offset:-1px}

.card h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;
  margin-bottom:8px;line-height:1.2}
.card p{font-size:15px;color:var(--body);line-height:1.6;margin-bottom:14px}
.card .preco{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);padding-top:14px;border-top:1px solid var(--line)}

/* ---------- barra do orcamento ----------
   Sobe de baixo quando o visitante escolhe o primeiro item. */
/* Fica ACIMA da barra de rascunho da SellerForge, senao aquela cobre o botao
   de pedir orcamento e ele nao clica. A altura vem medida no JS, porque a
   barra de rascunho muda de altura no celular. */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink);
  color:#E8E1D7;border-top:1px solid var(--line-dark);
  transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.85,.25,1);
}
.barra.aberta{transform:none}
.barra .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px}
.barra img{height:46px;width:auto;opacity:.85;flex:none}
.barra .resumo b{display:block;font-size:16px;font-weight:400;color:#F2ECE3}
.barra .resumo span{display:block;font-size:13px;color:#A0968C;margin-top:2px}
.barra .acoes{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.limpar{background:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;
  color:#8E8378;text-decoration:underline;text-underline-offset:4px;transition:.3s}
.limpar:hover{color:#E8E1D7}

/* ---------- painel do pedido ---------- */
/* acima da barra do orcamento (100), senao ela fica por cima do painel */
.painel{position:fixed;inset:0;z-index:110;display:none}
.painel.aberto{display:block}
.painel .fundo{position:absolute;inset:0;background:rgba(10,7,5,.62);
  opacity:0;transition:opacity .4s;backdrop-filter:blur(3px)}
.painel.mostrar .fundo{opacity:1}
.painel .folha{
  position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);
  background:var(--ivory);overflow-y:auto;padding:clamp(34px,5vw,54px);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.2,.85,.25,1);
}
.painel.mostrar .folha{transform:none}
.fechar{position:absolute;right:22px;top:22px;background:none;border:0;cursor:pointer;
  width:40px;height:40px;display:grid;place-items:center;color:var(--body);transition:.3s}
.fechar:hover{color:var(--ink);transform:rotate(90deg)}
.painel h2{margin-bottom:10px}
.lista{list-style:none;margin:30px 0;border-top:1px solid var(--line)}
.lista li{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.lista img{width:62px;height:62px;object-fit:cover;flex:none}
.lista .n{flex:1}
.lista b{display:block;font-size:16px;font-weight:400}
.lista span{display:block;font-size:13px;color:#8E8378}
.tirar{background:none;border:0;cursor:pointer;color:#A89C92;font-size:20px;
  line-height:1;padding:6px;transition:.3s}
.tirar:hover{color:var(--brand-deep)}
.total{display:flex;justify-content:space-between;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
.total span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8E8378}
.total b{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:400}
.aviso{font-size:13px;color:#8E8378;line-height:1.6;margin-bottom:30px}

/* o formulario do painel fica em fundo claro, ao contrario do da home */
.painel .campo label{color:#8E8378}
.painel .campo input,.painel .campo select,.painel .campo textarea{
  color:var(--ink);border-bottom-color:var(--line)}
.painel .campo input:focus,.painel .campo select:focus,.painel .campo textarea:focus{
  border-color:var(--brand-deep)}
.painel .campo select option{background:#fff;color:var(--ink)}
.painel form{background:transparent;border:0;padding:0}
.painel .btn{width:100%;justify-content:center}

/* ---------- nada encontrado ---------- */
.vazio{grid-column:1/-1;text-align:center;padding:80px 0;color:#8E8378}
.vazio img{width:76px;margin:0 auto 22px;opacity:.3}

@media(max-width:900px){
  .grade{grid-template-columns:repeat(2,1fr)}
  .f-conta{display:none}
}
@media(max-width:600px){
  .grade{grid-template-columns:1fr;gap:38px}
  .barra .wrap{gap:14px}
  .barra img{display:none}
  .barra .acoes{width:100%}
  .barra .acoes .btn{flex:1;justify-content:center}
  .filtros .wrap{gap:12px}
  .f-grupo{gap:14px}
}

/* ===========================================================================
   A CENA DO FRASCO
   -------------------------------------------------------------------------
   Nao e 3D de verdade e nao precisa ser. O que faz um produto de luxo
   parecer tridimensional numa pagina nao e ele girar - e a LUZ passar por
   cima dele enquanto ele fica parado, e o conjunto reagir de leve ao mouse.
   Girar em 360 graus e linguagem de e-commerce de eletronico.

   Custo disso tudo: 0 KB de biblioteca. So CSS e 15 linhas de JS.
   =========================================================================== */
.cena{
  position:relative;perspective:1300px;
  display:grid;place-items:center;min-height:clamp(360px,46vw,560px);
}
.cena-palco{
  position:relative;width:min(100%,420px);
  transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.cena-foto{
  position:relative;overflow:hidden;border-radius:2px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85), 0 10px 30px -12px rgba(0,0,0,.6);
  transform:translateZ(40px);
}
.cena-foto img{width:100%;display:block;aspect-ratio:47/50;object-fit:cover}

/* a luz que passa: e isto que da a sensacao de vidro */
.cena-foto:after{
  content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;
  background:linear-gradient(100deg,
    rgba(255,246,232,0) 0%,
    rgba(255,246,232,.10) 38%,
    rgba(255,246,232,.30) 50%,
    rgba(255,246,232,.10) 62%,
    rgba(255,246,232,0) 100%);
  transform:rotate(14deg);
  animation:brilho 7s cubic-bezier(.4,0,.5,1) infinite;
  pointer-events:none;
}
@keyframes brilho{
  0%,62%  {left:-70%}
  100%    {left:130%}
}

/* halo quente atras, como luz de vitrine */
.cena-halo{
  position:absolute;inset:-18% -12%;z-index:-1;
  background:radial-gradient(ellipse at 50% 45%,
    rgba(222,96,30,.26) 0%, rgba(222,96,30,.10) 38%, transparent 68%);
  filter:blur(26px);
  animation:pulsa 9s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* o monograma flutuando atras, em outra profundidade */
.cena-marca{
  position:absolute;left:50%;top:46%;width:86%;
  transform:translate(-50%,-50%) translateZ(-90px);
  opacity:.09;pointer-events:none;
}

/* reflexo no chao */
.cena-reflexo{
  position:absolute;left:8%;right:8%;bottom:-9%;height:46px;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.6), transparent 72%);
  filter:blur(14px);transform:translateZ(10px);
}

/* legenda discreta embaixo da cena */
.cena-nota{
  position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#7C7168;white-space:nowrap;
}

@media(hover:none),(prefers-reduced-motion:reduce){
  .cena-palco{transform:none !important}
}
@media(prefers-reduced-motion:reduce){
  .cena-foto:after,.cena-halo{animation:none}
}
@media(max-width:900px){
  .cena{min-height:0;padding-top:14px}
  .cena-palco{width:min(100%,320px)}
  .cena-nota{display:none}
}

/* o topo vira duas colunas para caber a cena */
.col-topo .col-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){
  .col-topo .col-grid{grid-template-columns:1fr;gap:34px}
}