/* Dannyfoz · prévia · ideia: a arara de novidades com cabides que balançam ao arrastar */
:root {
  --papel: #efebe3;
  --papel-2: #e4ddcf;
  --tinta: #161514;
  --tinta-2: #57524b;
  --petroleo: #1f4e55;
  --petroleo-2: #173c41;
  --vinho: #6b1f2a;
  --linha: rgb(22 21 20 / .18);
  --foco: #1f4e55;

  --f-display: "Bodoni Moda", "Didot", Georgia, serif;
  --f-texto: "Instrument Sans", system-ui, sans-serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --t-xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --t-hero: clamp(3rem, 1.2rem + 7.4vw, 8rem);

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --e-16: 4rem; --e-24: 6rem;
  --margem: clamp(1rem, .5rem + 2.5vw, 3rem);

  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --ease-mola: cubic-bezier(.34, 1.5, .64, 1);
  --d-rapida: 160ms;
  --d-media: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-m)/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; font-style: normal; margin: 0; line-height: 1.02; letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.pular { position: absolute; left: var(--margem); top: -4rem; background: var(--tinta); color: var(--papel); padding: var(--e-2) var(--e-4); z-index: 50; }
.pular:focus { top: var(--e-2); }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-6);
  padding: var(--e-3) var(--margem);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; margin-right: auto; }
.marca-nome { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; }
.marca-sub { font-size: .5625rem; letter-spacing: .5em; text-transform: uppercase; margin-top: .25rem; padding-left: .5em; }
.topo-nav { display: none; gap: var(--e-6); }
.topo-nav a { text-decoration: none; font-size: var(--t-s); white-space: nowrap; }
.topo-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sacola-btn {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-4);
  border: 1px solid var(--tinta); border-radius: 999px; background: transparent;
  font-size: var(--t-s); cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-rapida) var(--ease-saida), color var(--d-rapida) var(--ease-saida);
}
.sacola-btn:hover { background: var(--tinta); color: var(--papel); }
.sacola-conta {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--vinho); color: #fbf9f5; font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}
.sacola-conta.pulsa { animation: pulsa 420ms var(--ease-mola); }
@keyframes pulsa { 40% { transform: scale(1.3); } }

@media (min-width: 760px) { .topo-nav { display: flex; } }

/* hero */
.hero { padding: var(--e-12) 0 var(--e-8); }
.hero-texto { padding: 0 var(--margem); display: grid; gap: var(--e-6); }
.hero h1 { font-size: var(--t-hero); max-width: 11ch; font-weight: 400; }
.hero-sub { max-width: 42ch; color: var(--tinta-2); font-size: var(--t-m); }
@media (min-width: 900px) {
  .hero-texto { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
  .hero-sub { padding-bottom: .9rem; }
}

.arara { position: relative; margin-top: var(--e-12); }
.arara::before { /* o cano da arara */
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 3px;
  background: linear-gradient(var(--tinta), var(--tinta-2));
  border-radius: 2px; z-index: 1; pointer-events: none;
}
.arara-trilho {
  display: flex; gap: clamp(.75rem, 2vw, 1.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 var(--margem) var(--e-4);
  scrollbar-width: none; cursor: grab;
  list-style: none; margin: 0;
}
.arara-trilho::-webkit-scrollbar { display: none; }
.arara-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.arara-trilho:focus-visible { outline-offset: -2px; }
.peca {
  flex: 0 0 auto; width: min(64vw, 300px);
  scroll-snap-align: start; scroll-margin-left: var(--margem);
  transform-origin: 50% 2px;
  transform: rotate(var(--sway, 0deg));
  transition: transform 700ms var(--ease-mola);
}
.arrastando .peca { transition: transform 120ms linear; }
.peca-cabide { display: block; width: 46%; height: auto; aspect-ratio: 100 / 40; margin: 0 auto -2px; color: var(--tinta); }
.peca-botao { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.peca-foto { display: block; background: var(--papel-2); aspect-ratio: 3 / 4; overflow: hidden; }
.peca-foto img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: transform 600ms var(--ease-saida); }
.peca-botao:hover .peca-foto img { transform: scale(1.03); }
.peca-legenda { display: flex; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-3); font-size: var(--t-s); }
.peca-legenda span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arara-dica { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--margem) 0; font-size: var(--t-xs); color: var(--tinta-2); }
.arara-dica-linha { width: 2.5rem; height: 1px; background: currentColor; }

/* catálogo */
.catalogo { padding: var(--e-16) var(--margem) var(--e-16); border-top: 1px solid var(--linha); }
.cat-cabeca { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); }
.cat-cabeca h2 { font-size: var(--t-xl); }
.aviso { font-size: var(--t-xs); color: var(--tinta-2); max-width: 52ch; }
@media (min-width: 900px) { .cat-cabeca { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

.filtros { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margem) * -1) var(--e-8); padding: 2px var(--margem); }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--e-4);
  border: 1px solid var(--linha); border-radius: 999px; background: transparent; cursor: pointer;
  font-size: var(--t-s); white-space: nowrap;
  transition: border-color var(--d-rapida) var(--ease-saida), background-color var(--d-rapida) var(--ease-saida);
}
.filtro:hover { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: #fbf9f5; }
.filtro small { font-size: var(--t-xs); opacity: .75; margin-left: .25rem; font-variant-numeric: tabular-nums; }

.grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8) var(--e-4); }
.grade li:nth-child(even) { margin-top: var(--e-12); }
.grade li[hidden] { display: none; }
@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-12) var(--e-6); }
  .grade li:nth-child(even) { margin-top: 0; }
  .grade li:nth-child(4n+2), .grade li:nth-child(4n+4) { margin-top: var(--e-16); }
}
.item { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.item-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--papel-2); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transition: transform 600ms var(--ease-saida); }
.item:hover .item-foto img { transform: scale(calc(var(--z, 1) * 1.04)); }
.item-nome { display: block; margin-top: var(--e-3); font-size: var(--t-s); }
.item-preco { display: block; font-size: var(--t-s); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.item-marca { color: var(--petroleo); }

/* história */
.historia { background: var(--petroleo-2); color: #f3efe7; padding: var(--e-16) var(--margem); display: grid; gap: var(--e-8); overflow: hidden; }
.hist-anos { display: flex; flex-direction: column; font-family: var(--f-display); font-size: clamp(5rem, 1rem + 20vw, 15rem); line-height: .82; letter-spacing: -.03em; }
.hist-anos span:last-child { color: transparent; -webkit-text-stroke: 1px rgb(243 239 231 / .7); padding-left: .6em; }
.hist-texto { display: grid; gap: var(--e-4); max-width: 46ch; align-self: end; }
.hist-texto h2 { font-size: var(--t-l); margin-bottom: var(--e-2); }
.hist-texto p { color: rgb(243 239 231 / .86); }
@media (min-width: 900px) { .historia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding-block: var(--e-24); } }

/* loja */
.loja { padding: var(--e-16) var(--margem); display: grid; gap: var(--e-8); }
.loja h2 { font-size: var(--t-xl); }
.loja-dados { font-style: normal; display: grid; gap: var(--e-6); }
.loja-end { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.2; }
.loja-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.loja-links li { border-bottom: 1px solid var(--linha); }
.loja-links a { display: flex; align-items: center; min-height: 56px; text-decoration: none; transition: color var(--d-rapida) var(--ease-saida), padding var(--d-rapida) var(--ease-saida); }
.loja-links a:hover { color: var(--vinho); }
.loja-obs { font-size: var(--t-xs); color: var(--tinta-2); }
@media (min-width: 900px) { .loja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.rodape { padding: var(--e-8) var(--margem) calc(var(--e-8) + 4.5rem); border-top: 1px solid var(--linha); font-size: var(--t-xs); color: var(--tinta-2); }
@media (min-width: 760px) { .rodape { padding-bottom: var(--e-8); } }

/* botão principal */
.botao {
  width: 100%; min-height: 52px; padding: 0 var(--e-6);
  border: 0; border-radius: 999px; background: var(--petroleo); color: #fbf9f5; cursor: pointer;
  font-weight: 500; font-size: var(--t-m);
  transition: background-color var(--d-rapida) var(--ease-saida), transform var(--d-rapida) var(--ease-saida);
}
.botao:hover { background: var(--petroleo-2); }
.botao:active { transform: translateY(1px); }
.fechar { min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--linha); border-radius: 999px; background: var(--papel); cursor: pointer; font-size: var(--t-s); }
.fechar:hover { border-color: var(--tinta); }
.erro { color: var(--vinho); font-size: var(--t-s); min-height: 1.4em; }

/* diálogos */
dialog { border: 0; padding: 0; color: var(--tinta); background: var(--papel); max-width: none; max-height: none; }
dialog::backdrop { background: rgb(22 21 20 / .45); }
.ficha[open], .sacola[open] { animation: sobe var(--d-media) var(--ease-saida); }
@keyframes sobe { from { transform: translateY(24px); opacity: 0; } }

.ficha { width: 100%; height: 100%; margin: 0; overflow-y: auto; }
.ficha-fechar-form { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: var(--e-3); z-index: 2; height: 0; overflow: visible; }
.ficha-foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--papel-2); max-height: 50vh; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-corpo { padding: var(--e-6) var(--margem) var(--e-8); display: grid; gap: var(--e-4); }
.ficha h3 { font-size: var(--t-l); }
.ficha-preco { font-size: var(--t-m); font-variant-numeric: tabular-nums; }
.opcoes { border: 0; padding: 0; margin: 0; }
.opcoes legend { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e-2); padding: 0; }
.cores, .tamanhos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cor {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--papel);
}
.cor[aria-checked="true"] { border: 2px solid var(--tinta); }
.tam {
  min-width: 48px; min-height: 44px; padding: 0 var(--e-3);
  border: 1px solid var(--linha); background: transparent; cursor: pointer; font-size: var(--t-s);
}
.tam:hover { border-color: var(--tinta); }
.tam[aria-checked="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
@media (min-width: 760px) {
  .ficha { width: min(920px, 92vw); height: auto; max-height: 90vh; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .ficha[open] { display: grid; }
  .ficha-fechar-form { position: absolute; right: 0; top: 0; height: auto; }
  .ficha-foto { max-height: 90vh; aspect-ratio: auto; }
  .ficha-corpo { align-content: center; padding: var(--e-12) var(--e-8); overflow-y: auto; }
}

.sacola { width: min(440px, 100%); height: 100%; margin: 0 0 0 auto; display: none; flex-direction: column; }
.sacola[open] { display: flex; animation-name: entra; }
@keyframes entra { from { transform: translateX(32px); opacity: 0; } }
.sacola-topo { display: flex; align-items: center; justify-content: space-between; padding: var(--e-4) var(--margem); border-bottom: 1px solid var(--linha); }
.sacola-topo h3 { font-size: var(--t-l); }
.sacola-lista { list-style: none; margin: 0; padding: 0 var(--margem); overflow-y: auto; flex: 1; }
.linha { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); }
.linha-foto { display: block; width: 72px; height: 96px; overflow: hidden; background: var(--papel-2); }
.linha img { width: 72px; height: 96px; object-fit: cover; }
.linha-info { display: grid; gap: var(--e-1); font-size: var(--t-s); align-content: start; }
.linha-info small { color: var(--tinta-2); font-size: var(--t-xs); }
.linha-acoes { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.qtd { width: 36px; height: 36px; border: 1px solid var(--linha); background: transparent; cursor: pointer; }
.qtd:hover { border-color: var(--tinta); }
.linha-acoes output { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.remover { margin-left: auto; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--t-xs); color: var(--tinta-2); min-height: 36px; }
.sacola-vazia { padding: var(--e-8) var(--margem); color: var(--tinta-2); }
.pedido { padding: var(--e-4) var(--margem) var(--e-6); border-top: 1px solid var(--linha); display: grid; gap: var(--e-3); background: var(--papel); }
.sacola-total { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.campo { display: grid; gap: var(--e-1); font-size: var(--t-s); }
.campo input { min-height: 46px; padding: 0 var(--e-3); border: 1px solid var(--tinta-2); background: #fbf9f5; font: inherit; font-size: 1rem; border-radius: 0; }
.entrega { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); font-size: var(--t-s); }
.entrega legend { padding: 0; margin-bottom: var(--e-2); color: var(--tinta-2); }
.entrega label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; }
.entrega input { accent-color: var(--petroleo); width: 18px; height: 18px; }
.pedido[hidden] { display: none; }
.wa-link { text-align: center; font-size: var(--t-s); padding: var(--e-2); }

/* barra da sacola no celular */
@media (max-width: 759px) {
  .sacola-btn { position: fixed; left: 50%; bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--tinta); color: var(--papel); border-color: var(--tinta); min-height: 52px; padding: 0 var(--e-6); z-index: 30; box-shadow: 0 8px 24px rgb(22 21 20 / .22); }
  .sacola-btn:hover { background: var(--tinta); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .peca { transform: none !important; }
}