:root{
  --paper:#0d0c0a;      /* torra escura */
  --tile:#fbf9f5;       /* foto de produto continua em tile claro */
  --ink:#f2ece3;
  --mute:#8d857a;
  --rule:#262320;
  --accent:#2f5bd6;     /* azul do seu avatar */
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font:400 15px/1.5 "Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;  /* iOS não pinta o card de cinza no toque */
  text-size-adjust:100%;
}
/* respeita notch e barra inferior do iPhone */
.wrap{
  max-width:var(--wrap);margin:0 auto;
  padding:0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}
.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

header{padding:56px 0 34px;display:grid;gap:16px}
header h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,7vw,4rem);line-height:.98;letter-spacing:-.02em;
}
header h1 em{font-style:italic;color:var(--accent)}
header p{color:var(--mute);max-width:44ch;font-size:14px}
header p:empty{display:none}

nav{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;               /* rolagem com inércia no iOS */
  overscroll-behavior-x:contain;
  padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--paper);z-index:3;
}
nav::-webkit-scrollbar{display:none}
nav button{
  flex:0 0 auto;background:none;cursor:pointer;
  border:1px solid transparent;border-radius:999px;padding:11px 15px;  /* alvo de toque ~44px */
  font:400 13px/1.2 "Archivo",sans-serif;letter-spacing:.04em;color:var(--mute);
  transition:.2s;
}
nav button:hover{color:var(--ink);border-color:var(--rule)}
nav button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* grade com fios: 1px de rule aparece pelos gaps */
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin:44px 0 64px;
}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}

.item{
  position:relative;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;background:var(--paper);
  padding:14px 14px 18px;transition:background .3s ease;
  box-shadow:0 0 0 1px var(--rule); /* fio só em volta das células que existem */
}
.item::after{ /* seta que aparece no hover */
  content:"↗";position:absolute;right:16px;bottom:18px;
  color:var(--accent);opacity:0;transform:translate(-4px,4px);
  transition:opacity .3s ease,transform .3s ease;font-size:14px;
}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* mouse: efeito no hover */
@media (hover:hover){
  .item:hover{background:#151310;box-shadow:0 0 0 1px var(--accent);z-index:2}
  .item:hover::after{opacity:1;transform:none}
}
/* toque: seta sempre visível e feedback ao encostar o dedo */
@media (hover:none){
  .item::after{opacity:.45;transform:none;color:var(--mute)}
  .item:active{background:#151310;box-shadow:0 0 0 1px var(--accent);z-index:2}
  .item:active::after{opacity:1;color:var(--accent)}
  .item:active .shot img{transform:scale(1.04)}
}

.item .num{
  font-size:10px;letter-spacing:.16em;color:var(--mute);
  display:flex;justify-content:space-between;
}
.item .num em{font-style:normal;text-transform:uppercase}
.item .num .ess{color:var(--accent);letter-spacing:.14em}
.item .num .pat{color:var(--mute);letter-spacing:.1em;font-size:8.5px;font-weight:400;opacity:.8}

/* ordenação */
nav select{
  flex:0 0 auto;margin-left:auto;background:none;color:var(--mute);cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:10px 12px;
  font:400 16px/1.2 "Archivo",sans-serif;  /* 16px evita o iOS dar zoom ao abrir */
  -webkit-appearance:none;appearance:none;
}
@media (min-width:760px){nav select{font-size:12px;padding:6px 10px}}
nav select:hover{color:var(--ink)}
nav select option{background:var(--paper);color:var(--ink)}

.total{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding:22px 0 6px;border-top:1px solid var(--rule);
}
.total b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.01em}
.total span{color:var(--mute);font-size:13px}

.item .shot{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--tile);overflow:hidden}
/* textura de grão no tile (ideia do texture card do Cult UI) */
.item .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reveal no scroll (ideia do scroll reveal do Skiper UI) */
.item{opacity:0;transform:translateY(14px)}
.item.on{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.item{opacity:1;transform:none}}
.item .shot img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}

/* faixa isca no topo — primeiro elemento da página */
.isca{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:14px max(20px, env(safe-area-inset-left));font-size:13px;line-height:1.35;
  letter-spacing:.01em;text-align:center;transition:background .25s ease;
}
.isca:active{background:#1c3f9e}
@media (max-width:520px){.isca{font-size:12.5px;gap:6px}}
.isca:hover{background:#1c3f9e;color:#fff}
.isca b{font-weight:500}
.isca span{border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap;opacity:.85}
.cupom-line{font-size:13px;color:var(--ink)}
.cupom-line b{font-weight:700}
/* shift card: só faz sentido com mouse */
@media (hover:hover){
  .item .shot{perspective:900px}
  .item .shot img{transform-style:preserve-3d}
  .item:hover .shot img{transform:scale(1.05) rotateX(6deg) rotateY(-5deg) translateZ(18px)}
}
.item h2{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(16px,4.6vw,19px);line-height:1.18;letter-spacing:-.01em;padding-right:20px;
}
.item .preco{
  font-size:13px;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin-top:auto;
}

footer{border-top:1px solid var(--rule);padding:32px 0 calc(72px + env(safe-area-inset-bottom));display:grid;gap:12px;color:var(--mute);font-size:12px;max-width:58ch}
footer a{color:var(--ink)}