/* Casa Oud — vitrine noturna: a pagina e grafite, cada frasco e uma janela acesa. */

:root{
  /* superficie sobe de luminancia com a elevacao; tinta perde saturacao */
  --fundo:#0E0F11;
  --sup-1:#16181B;
  --sup-2:#1D2024;
  --linha:#262A2F;
  --linha-forte:#343941;

  --tinta:#EDEAE5;
  --tinta-2:#A3A19C;
  --tinta-3:#6E6C68;

  /* acento unico, quente. maximo 2 aparicoes por tela */
  --acento:#C9913F;
  --acento-tinta:#120E07;

  /* a janela acesa onde o frasco mora */
  --janela:#F3F0EA;

  --r-peq:3px;
  --r-pil:999px;

  /* escala nao-linear */
  --e1:4px; --e2:8px; --e3:16px; --e4:32px; --e5:64px; --e6:128px;

  --ui:"Archivo",system-ui,sans-serif;
  --display:"Instrument Serif",Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fundo);
  color:var(--tinta);
  font:400 15px/1.55 var(--ui);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--acento);color:var(--acento-tinta)}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:30;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--e4);
  padding:var(--e3) var(--e4);
  background:color-mix(in srgb,var(--fundo) 88%,transparent);
  border-bottom:1px solid var(--linha);
  backdrop-filter:saturate(140%) blur(12px);
}
.marca{display:flex;align-items:center;gap:11px;line-height:1}
.marca__sinal{width:auto;height:38px;display:block}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__nome{
  font:400 30px/1 var(--display);
  letter-spacing:.005em;
}
.marca__tag{
  margin-top:5px;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-3);
}

.busca{position:relative;max-width:440px;width:100%}
.busca svg{
  position:absolute;left:12px;top:50%;translate:0 -50%;
  width:17px;height:17px;fill:none;stroke:var(--tinta-3);stroke-width:1.7;
  stroke-linecap:round;
}
.busca input{
  width:100%;padding:11px var(--e3) 11px 36px;
  background:var(--sup-1);
  border:1px solid var(--linha);border-radius:var(--r-peq);
  font-size:14px;
}
.busca input::placeholder{color:var(--tinta-3)}
.busca input:focus{outline:none;border-color:var(--linha-forte);background:var(--sup-2)}
.busca input::-webkit-search-cancel-button{filter:invert(.6)}

.sacola{
  display:flex;align-items:center;gap:var(--e2);
  padding:10px var(--e3);
  border:1px solid var(--linha-forte);border-radius:var(--r-peq);
  font-size:14px;white-space:nowrap;
}
.sacola:hover{border-color:var(--tinta-3)}
.sacola__n{
  min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pil);
  background:var(--sup-2);color:var(--tinta-2);
  font-size:12px;font-weight:600;
}
.sacola--cheia{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta)}
.sacola--cheia .sacola__n{background:rgba(0,0,0,.22);color:inherit}

/* ---------- abertura (assimetrica, eixo a esquerda) ---------- */
.abertura{
  display:flex;align-items:center;
  padding:var(--e4);
  border-bottom:1px solid var(--linha);
}
.abertura--arte{min-height:clamp(320px,31vw,440px)}
.abertura h1{
  font:400 clamp(44px,7.4vw,96px)/.94 var(--display);
  letter-spacing:-.012em;
}
.abertura h1 em{font-style:italic;color:var(--acento)}
.abertura__texto{max-width:min(58ch,62%)}
.abertura__texto p{
  margin-top:var(--e3);
  max-width:62ch;
  font-size:15px;color:var(--tinta-2);
}

/* ---------- corpo ---------- */
.corpo{
  display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:var(--e5);
  padding:var(--e4);
  align-items:start;
}

/* ---------- rail ---------- */
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--e4)}
.rail__fechar{display:none}
.filtro h2{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:600;
  padding-bottom:var(--e2);margin-bottom:var(--e2);
  border-bottom:1px solid var(--linha);
}
.filtro li{list-style:none}
.filtro button{
  display:flex;justify-content:space-between;gap:var(--e2);width:100%;
  padding:5px 0;font-size:14px;color:var(--tinta-2);text-align:left;
}
.filtro button:hover{color:var(--tinta)}
.filtro button i{font-style:normal;font-size:12px;color:var(--tinta-3)}
.filtro button[aria-pressed=true]{color:var(--acento);font-weight:600}
.filtro button[aria-pressed=true] i{color:var(--acento)}
.filtro--rolagem{max-height:238px;overflow:auto;padding-right:var(--e2)}
.filtro--rolagem::-webkit-scrollbar{width:3px}
.filtro--rolagem::-webkit-scrollbar-thumb{background:var(--linha-forte)}

.teto{display:block;font:400 22px/1 var(--display);margin-bottom:var(--e2)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:1px;
  background:var(--linha-forte);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:var(--r-pil);
  background:var(--tinta);cursor:pointer;
}
.limpar{
  align-self:flex-start;font-size:13px;color:var(--tinta-3);
  border-bottom:1px solid var(--linha-forte);padding-bottom:2px;
}
.limpar:hover{color:var(--tinta)}

/* ---------- barra ---------- */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding-bottom:var(--e3);margin-bottom:var(--e3);
  border-bottom:1px solid var(--linha);
}
.barra__filtros{display:none}
.barra__conta{font-size:13px;color:var(--tinta-2)}
.barra__conta b{color:var(--tinta);font-weight:600}
.barra__ordem{display:flex;align-items:center;gap:var(--e2);font-size:13px;color:var(--tinta-3)}
.barra__ordem select{
  background:var(--sup-1);border:1px solid var(--linha);
  border-radius:var(--r-peq);padding:7px 10px;font-size:13px;
}
.barra__ordem select:focus{outline:none;border-color:var(--linha-forte)}

.chips{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e3)}
.chips:empty{display:none}
.chips button{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--linha-forte);border-radius:var(--r-pil);
  font-size:12px;color:var(--tinta-2);
}
.chips button:hover{color:var(--tinta);border-color:var(--tinta-3)}
.chips button::after{content:"\00d7";font-size:14px;line-height:1;color:var(--tinta-3)}

/* ---------- grade ---------- */
.grade{
  display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
}
.item{display:flex;flex-direction:column;gap:10px}
.item__janela{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:var(--janela);border-radius:var(--r-peq);
}
.item__janela img{
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
  transition:scale .5s cubic-bezier(.2,.7,.3,1);
}
.item:hover .item__janela img{scale:1.045}
.item__ml{
  position:absolute;left:0;bottom:0;
  padding:3px 7px;font-size:10px;letter-spacing:.06em;
  background:#14161A;color:var(--tinta-2);
}
.item__marca{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-3);
}
.item__nome{
  font-size:13px;line-height:1.35;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item:hover .item__nome{color:var(--tinta)}
.item__pe{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);margin-top:auto;padding-top:var(--e1)}
.item__preco{font-size:20px;font-weight:600;letter-spacing:-.015em}
.item__add{
  font-size:12px;color:var(--tinta-2);
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.item:hover .item__add{color:var(--tinta);border-bottom-color:var(--linha-forte)}
.item__add--posto{color:var(--acento);border-bottom-color:transparent}

.vazio{padding:var(--e5) 0;color:var(--tinta-2)}
.vazio button{margin-top:var(--e2);border-bottom:1px solid var(--linha-forte);font-size:14px}
.mais{
  display:block;margin:var(--e5) auto 0;padding:11px var(--e4);
  border:1px solid var(--linha-forte);border-radius:var(--r-peq);font-size:14px;
}
.mais:hover{border-color:var(--tinta-3)}

/* ---------- rodape ---------- */
.rodape{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);justify-content:space-between;
  margin-top:var(--e6);padding:var(--e4);
  border-top:1px solid var(--linha);
  font-size:12px;color:var(--tinta-3);
}
.rodape b{color:var(--tinta-2);font-weight:600}

/* ---------- sacola ---------- */
.sacola-painel{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end}
.sacola-painel[hidden]{display:none}
.sacola-painel__fundo{position:absolute;inset:0;background:rgba(6,7,8,.62)}
.sacola-painel__caixa{
  position:relative;display:flex;flex-direction:column;
  width:min(420px,100%);background:var(--sup-1);
  border-left:1px solid var(--linha);
}
.sacola-painel__caixa header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--e3);border-bottom:1px solid var(--linha);
}
.sacola-painel__caixa h2{font:400 24px/1 var(--display)}
.sacola-painel__caixa header button{font-size:13px;color:var(--tinta-3)}
.sacola-painel__caixa header button:hover{color:var(--tinta)}
#painel-itens{list-style:none;flex:1;overflow:auto;padding:var(--e2) var(--e3)}
#painel-itens:empty::after{
  content:"Sacola vazia.";display:block;padding:var(--e4) 0;
  color:var(--tinta-3);font-size:14px;
}
.linha{display:grid;grid-template-columns:52px 1fr auto;gap:var(--e2);
  align-items:center;padding:var(--e2) 0;border-bottom:1px solid var(--linha)}
.linha__img{aspect-ratio:1;background:var(--janela);border-radius:var(--r-peq);overflow:hidden}
.linha__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.linha__nome{font-size:12px;line-height:1.35;color:var(--tinta-2)}
.linha__preco{font-size:13px;font-weight:600;white-space:nowrap}
.linha__qtd{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--tinta-3)}
.linha__qtd button{width:19px;height:19px;border:1px solid var(--linha-forte);border-radius:var(--r-peq);line-height:1}
.linha__qtd button:hover{border-color:var(--tinta-3);color:var(--tinta)}
.sacola-painel__pe{padding:var(--e3);border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:var(--e2)}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total span{font-size:13px;color:var(--tinta-2)}
.total b{font:400 28px/1 var(--display)}
.zap{
  padding:13px;border-radius:var(--r-peq);
  background:var(--acento);color:var(--acento-tinta);
  font-size:14px;font-weight:600;
}
.zap:hover{filter:brightness(1.07)}
.zap:disabled{background:var(--sup-2);color:var(--tinta-3);cursor:not-allowed;filter:none}
.sacola-painel__aviso{font-size:11px;color:var(--tinta-3);text-align:center}
.sacola-painel__aviso:empty{display:none}

/* ---------- respiro pequeno ---------- */
@media (max-width:1040px){
  .corpo{grid-template-columns:1fr;gap:var(--e3)}
  .barra__filtros{display:block;padding:7px 12px;border:1px solid var(--linha-forte);
    border-radius:var(--r-peq);font-size:13px}
  .rail{
    position:fixed;inset:0 0 0 auto;z-index:60;width:min(300px,86%);
    background:var(--sup-1);border-left:1px solid var(--linha);
    padding:var(--e3);overflow:auto;translate:100% 0;transition:translate .22s ease;
  }
  .rail--aberto{translate:0}
  .rail__fechar{display:block;align-self:flex-end;font-size:13px;color:var(--tinta-3)}
  .abertura{padding:var(--e4) var(--e3) var(--e3)}
  .abertura__texto{max-width:none}
  .abertura--arte{min-height:0}
}
@media (max-width:640px){
  .topo,.corpo,.rodape{padding-left:var(--e3);padding-right:var(--e3)}
  .topo{grid-template-columns:1fr auto;row-gap:var(--e2)}
  .busca{grid-column:1/-1;order:3;max-width:none}
  .grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e3) var(--e2)}
}

/* ---------- arte opcional (assets/arte/) ---------- */
.abertura--arte{background:none}
.abertura--arte::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--fundo) 38%,transparent 78%);
}
.abertura{position:relative}
.abertura__texto{position:relative;z-index:1}
.rodape--arte{
  background:var(--faixa) no-repeat center/cover;
  position:relative;
}
.rodape--arte>*{position:relative;z-index:1}
.rodape--arte::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--fundo) 30%,rgba(14,15,17,.82));
}
@media (max-width:1040px){
  .abertura--arte{background-image:none}
  .abertura--arte::after{display:none}
  .capa span{font-size:24px}
}

/* ---------- fileira de marcas ---------- */
.marcas{
  display:flex;gap:var(--e4);
  padding:var(--e3) 62px;
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--linha);
  scroll-behavior:smooth;
}
.marcas::-webkit-scrollbar{display:none}
.marcas:empty{display:none}
.marcas button{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:104px;
}
.marcas figure{
  width:92px;height:92px;padding:9px;
  background:var(--janela);border-radius:var(--r-pil);
  border:2px solid var(--linha-forte);
  transition:border-color .16s ease;
}
.marcas img{
  width:100%;height:100%;object-fit:contain;display:block;
  border-radius:var(--r-pil);mix-blend-mode:multiply;
}
.marcas b{
  font-size:11px;font-weight:400;line-height:1.25;text-align:center;
  color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.marcas button:hover figure{border-color:var(--linha-forte)}
.marcas button:hover b{color:var(--tinta-2)}
.marcas button[aria-pressed=true] figure{border-color:var(--acento)}
.marcas button[aria-pressed=true] b{color:var(--acento)}

@media (max-width:640px){
  .marcas{padding:var(--e3)}
  .marcas button{width:82px}
  .marcas figure{width:72px;height:72px;padding:7px}
}

/* ---------- barra de categorias ---------- */
.menu{
  display:flex;gap:var(--e4);
  padding:0 var(--e4);
  overflow-x:auto;scrollbar-width:none;
  background:var(--sup-1);
  border-bottom:1px solid var(--linha);
}
.menu::-webkit-scrollbar{display:none}
.menu:empty{display:none}
.menu button{
  flex:none;position:relative;
  padding:13px 0;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta-2);white-space:nowrap;
}
.menu button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:transparent;transition:background .16s ease;
}
.menu button:hover{color:var(--tinta)}
.menu button[aria-pressed=true]{color:var(--tinta);font-weight:600}
.menu button[aria-pressed=true]::after{background:var(--acento)}
@media (max-width:640px){
  .menu{padding:0 var(--e3);gap:var(--e3)}
  .menu button{font-size:12px}
}

/* ---------- carrossel de marcas ---------- */
.carrossel{position:relative;border-bottom:1px solid var(--linha)}
.carrossel .marcas{border-bottom:0}
.carrossel__seta{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--sup-2);border:1px solid var(--linha-forte);
  border-radius:var(--r-pil);
  opacity:0;pointer-events:none;transition:opacity .18s ease,border-color .16s ease;
}
.carrossel__seta svg{
  width:18px;height:18px;fill:none;stroke:var(--tinta);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.carrossel__seta--esq{left:10px}
.carrossel__seta--dir{right:10px}
.carrossel__seta--viva{opacity:1;pointer-events:auto}
.carrossel__seta--viva:hover{border-color:var(--acento)}
@media (hover:none){.carrossel__seta{display:none}}

/* ---------- carrossel da abertura ---------- */
.abertura__slides{position:absolute;inset:0;overflow:hidden}
.abertura__slides:empty{display:none}
.abertura__slide{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-position:right center;background-size:auto 100%;
  opacity:0;transition:opacity .9s ease;
}
.abertura__slide--vivo{opacity:1}
.abertura__pontos{
  position:absolute;right:var(--e4);bottom:var(--e3);z-index:2;
  display:flex;gap:var(--e2);
}
.abertura__pontos:empty{display:none}
.abertura__pontos button{
  width:28px;height:3px;border-radius:var(--r-pil);
  background:var(--linha-forte);transition:background .2s ease;
}
.abertura__pontos button:hover{background:var(--tinta-3)}
.abertura__pontos button[aria-selected=true]{background:var(--tinta)}
@media (prefers-reduced-motion:reduce){
  .abertura__slide{transition:none}
}
@media (max-width:1040px){
  /* no celular a foto larga vira bloco em cima do texto, senao so sobraria
     uma tira da imagem e a modelo ficaria fora do quadro */
  .abertura{display:block;padding:0 var(--e3) var(--e4)}
  .abertura__slides{
    position:relative;inset:auto;
    height:clamp(200px,52vw,300px);
    margin:0 calc(var(--e3) * -1) var(--e4);
  }
  .abertura__slide{background-size:cover;background-position:72% center}
  .abertura__pontos{right:var(--e3);bottom:auto;top:clamp(176px,46vw,266px)}
  .abertura--arte::after{display:none}
  .abertura--arte{min-height:0}
}

/* ---------- ficha do produto ---------- */
.ficha{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:var(--e3)}
.ficha[hidden]{display:none}
.ficha__fundo{position:absolute;inset:0;background:rgba(6,7,8,.72);backdrop-filter:blur(2px)}
.ficha__caixa{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--e4);align-items:center;
  width:min(880px,100%);max-height:90vh;overflow:auto;
  padding:var(--e4);
  background:var(--sup-1);border:1px solid var(--linha-forte);border-radius:var(--r-peq);
}
.ficha__x{
  position:absolute;top:var(--e3);right:var(--e3);z-index:2;
  font-size:13px;color:var(--tinta-3);
}
.ficha__x:hover{color:var(--tinta)}
.ficha__janela{
  aspect-ratio:1;background:var(--janela);border-radius:var(--r-peq);overflow:hidden;
}
.ficha__janela img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.ficha__texto{display:flex;flex-direction:column;gap:var(--e2)}
.ficha__marca{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3);
}
.ficha__marca:empty{display:none}
.ficha__nome{font:400 clamp(24px,3vw,34px)/1.12 var(--display);letter-spacing:-.01em}
.ficha__cod{font-size:12px;color:var(--tinta-3)}
.ficha__preco{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:var(--e1)}
.ficha__cats{display:flex;flex-wrap:wrap;gap:6px;margin:var(--e1) 0 var(--e2)}
.ficha__cats button{
  padding:4px 11px;border:1px solid var(--linha-forte);border-radius:var(--r-pil);
  font-size:11px;color:var(--tinta-2);
}
.ficha__cats button:hover{border-color:var(--acento);color:var(--acento)}
.ficha__acao{display:flex;gap:var(--e2);align-items:stretch}
.ficha__qtd{
  display:flex;align-items:center;gap:var(--e2);padding:0 12px;
  border:1px solid var(--linha-forte);border-radius:var(--r-peq);
}
.ficha__qtd button{font-size:17px;color:var(--tinta-2);padding:0 4px;line-height:1}
.ficha__qtd button:hover{color:var(--tinta)}
.ficha__qtd span{min-width:18px;text-align:center;font-weight:600;font-size:14px}
.ficha__add{
  flex:1;padding:13px var(--e3);border-radius:var(--r-peq);
  background:var(--acento);color:var(--acento-tinta);font-size:14px;font-weight:600;
}
.ficha__add:hover{filter:brightness(1.07)}
.ficha__zap{
  padding:11px;border:1px solid var(--linha-forte);border-radius:var(--r-peq);
  font-size:13px;color:var(--tinta-2);
}
.ficha__zap:hover{color:var(--tinta);border-color:var(--tinta-3)}
.item__janela{cursor:pointer}
.item__nome{cursor:pointer}
@media (max-width:720px){
  .ficha__caixa{grid-template-columns:1fr;gap:var(--e3);padding:var(--e3)}
  .ficha__janela{max-height:38vh}
  .ficha__x{top:var(--e2);right:var(--e2)}
}