/* Mad Rock Store · catálogo
   Layout: topo grafite fixo (logo, busca, sacola) → faixa de passos → filtros → grade de fichas.
   Tokens da identidade Mad Rock (design system "Mad Rock"). */
:root {
  --rock-red: #D7141A; --rock-red-text: #B8101A; --rock-red-deep: #9E0E13; --on-red: #FFFFFF;
  --ink: #141414; --ink-muted: #55575C; --surface: #F4F1EA; --surface-raised: #FFFFFF;
  --charcoal: #26272B; --line: #D9D4C9; --amp: #F2B705; --ok: #137A4F; --zap: #128C4B;
  --photo: #FFFFFF;
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;
  --sombra: 4px 4px 0 0 #141414;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --rock-red: #E0242A; --rock-red-text: #FF5A5F; --rock-red-deep: #B5161C;
  --ink: #F4F1EA; --ink-muted: #A9ABB0; --surface: #141414; --surface-raised: #1E1F22;
  --charcoal: #0B0B0B; --line: #3A3C42; --ok: #3CCB8A; --photo: #F4F1EA; --sombra: 4px 4px 0 0 #000;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --rock-red: #E0242A; --rock-red-text: #FF5A5F; --rock-red-deep: #B5161C;
  --ink: #F4F1EA; --ink-muted: #A9ABB0; --surface: #141414; --surface-raised: #1E1F22;
  --charcoal: #0B0B0B; --line: #3A3C42; --ok: #3CCB8A; --photo: #F4F1EA; --sombra: 4px 4px 0 0 #000;
  color-scheme: dark }

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--f-body) }
img { max-width: 100%; display: block }
button, input, select { font: inherit; color: inherit }
a { color: var(--rock-red-text) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
:focus-visible { outline: 3px solid var(--amp); outline-offset: 2px }

/* Faixa e topo */
.aviso { background: var(--amp); color: #141414; text-align: center; font: 700 13px/1.3 var(--f-label); letter-spacing: .12em; padding: 7px 16px; padding-top: calc(7px + env(safe-area-inset-top, 0px)) }
.topo { position: sticky; top: 0; z-index: 20; background: #26272B; color: #F4F1EA; border-bottom: 3px solid var(--rock-red) }
.topo-in { display: flex; align-items: center; gap: 16px; padding-block: 10px }
.logo { flex: none }
.logo img { height: 72px; width: auto }
.busca { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: #F4F1EA; color: #55575C; border-radius: var(--r-sm) }
.busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: #141414; font-size: 16px; outline: none }
.busca:focus-within { outline: 3px solid var(--amp); outline-offset: 1px }
.btn-sacola { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 2px solid #F4F1EA; background: transparent; color: #F4F1EA; border-radius: var(--r-md); font: 700 15px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
.badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--rock-red); color: #fff; font: 700 13px/22px var(--f-label); text-align: center }

/* Hero */
.hero { background: #141414; color: #F4F1EA; position: relative; overflow: hidden }
.hero::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: min(18vw, 200px); background:
  linear-gradient(135deg, transparent 0 46%, #141414 46% 54%, transparent 54%) 0 0 / 28px 28px repeat-y, var(--rock-red); opacity: .95;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%) }
.hero-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; padding-block: 36px 32px; padding-right: max(16px, min(20vw, 220px)) }
.hero-txt { flex: 1 1 420px; min-width: 0 }
.eyebrow { margin: 0; font: 700 13px/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--amp) }
h1 { margin: 8px 0 0; font: 400 clamp(40px, 7vw, 76px)/.95 var(--f-display); text-transform: uppercase; text-wrap: balance }
h1 span { color: #FF3B41 }
.hero-sub { margin: 14px 0 0; max-width: 46ch; color: #C9CACE; font-size: 17px }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 0 1 340px; min-width: 0 }
.passos li { display: flex; align-items: center; gap: 12px; font: 600 15px/1.3 var(--f-body); color: #E7E3DA }
.passos b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #F4F1EA; color: #141414; font: 400 18px/1 var(--f-display); border-radius: var(--r-sm) }
.passos em { font-style: normal; color: #FF5A5F }

/* Filtros */
.filtros { background: var(--surface-raised); border-bottom: 1px solid var(--line) }
.filtros-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px }
.chip { flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); font: 700 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink) }
.chip small { font-weight: 600; opacity: .7; margin-left: 4px }
.selects { display: flex; gap: 8px; flex-wrap: wrap }
select { height: 40px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); font: 700 14px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; max-width: 100% }

/* Grade */
main { padding-block: 20px 64px }
.contagem { margin: 0 0 16px; color: var(--ink-muted); font: 600 14px/1.3 var(--f-body); font-variant-numeric: tabular-nums }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, calc(50% - 6px)), 1fr)); gap: 12px }
@media (min-width: 640px) { .grade { gap: 20px } }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 0 }
.card-btn { all: unset; display: flex; flex-direction: column; cursor: pointer; height: 100% }
.card-btn:focus-visible { outline: 3px solid var(--amp); outline-offset: -3px }
.card .foto { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--photo) }
.card .foto img { width: 100%; height: 100%; object-fit: contain }
.card.esg .foto img { opacity: .55; filter: grayscale(.6) }
.faixa { position: absolute; left: 0; top: 10px; padding: 2px 14px 2px 10px; font: 700 12px/18px var(--f-label); letter-spacing: .12em; color: #fff; background: var(--rock-red); clip-path: polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%) }
.faixa.esg { background: #141414; color: #F4F1EA }
.pronta { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; background: var(--ok); color: #fff; font: 700 11px/1.4 var(--f-label); letter-spacing: .1em; border-radius: var(--r-sm) }
.costas { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; background: rgba(20,20,20,.8); color: #F4F1EA; font: 700 11px/1.4 var(--f-label); letter-spacing: .1em; border-radius: var(--r-sm) }
.card .txt { display: grid; gap: 2px; padding: 12px; border-top: 1px solid var(--line); flex: 1; align-content: start }
.card .ref { font: 700 12px/1.2 var(--f-label); letter-spacing: .14em; color: var(--ink-muted) }
.card .nome { font: 600 15px/1.3 var(--f-body); overflow-wrap: anywhere }
.card .preco { margin-top: 6px; font: 700 22px/1 var(--f-label); color: var(--rock-red-text) }
.card .cor { font: 600 13px/1.3 var(--f-body); color: var(--ink-muted) }
@media (prefers-reduced-motion: no-preference) { .card { transition: transform .12s, box-shadow .12s } .card:hover { transform: translate(-2px,-2px); box-shadow: var(--sombra) } }
.vazio { text-align: center; padding: 48px 0; display: grid; gap: 16px; justify-items: center }
.mais { display: flex; margin: 28px auto 0 }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 2px solid transparent; text-decoration: none; font: 700 16px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center }
.btn-zap { background: var(--zap); color: #fff }
.btn-zap:hover { background: #0E7340 }
.btn-zap[aria-disabled="true"] { background: #6B6D72; pointer-events: none }
.btn-sec { background: var(--surface-raised); color: var(--ink); border-color: var(--ink) }
.btn-sec:hover { box-shadow: var(--sombra); transform: translate(-2px,-2px) }
.btn-link { background: none; border: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; padding: 8px; font-size: 14px }

/* WhatsApp flutuante */
.zap-flutuante { position: fixed; z-index: 15; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--zap); color: #fff; box-shadow: var(--sombra) }

/* Ficha do produto */
dialog { color: var(--ink); background: var(--surface-raised); border: 0; padding: 0 }
dialog::backdrop { background: rgba(10,10,10,.72) }
.ficha { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: var(--r-lg); overflow: auto }
.fechar-f { position: sticky; top: 0; height: 0; z-index: 2; display: flex; justify-content: flex-end }
.x { width: 44px; height: 44px; margin: 8px; border: 0; border-radius: 50%; background: #141414; color: #F4F1EA; font-size: 26px; line-height: 1; cursor: pointer }
.ficha-in { display: flex; flex-wrap: wrap }
.ficha-fotos { flex: 1 1 380px; min-width: 0; background: var(--photo); padding: 16px; display: grid; gap: 10px; align-content: start }
.foto-grande { position: relative; aspect-ratio: 1; max-width: 100% }
.foto-grande img { width: 100%; height: 100%; object-fit: contain }
.selo-esg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-12deg); padding: 6px 18px; border: 4px solid var(--rock-red); color: var(--rock-red); font: 400 34px/1 var(--f-display); letter-spacing: .06em; background: rgba(255,255,255,.85) }
.miniaturas { display: flex; gap: 8px }
.miniaturas button { width: 72px; height: 72px; padding: 0; border: 2px solid #D9D4C9; background: #fff; border-radius: var(--r-sm); cursor: pointer }
.miniaturas button[aria-pressed="true"] { border-color: #141414 }
.miniaturas img { width: 100%; height: 100%; object-fit: contain }
.ficha-info { flex: 1 1 340px; min-width: 0; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px }
.f-ref { margin: 0; font: 700 13px/1.2 var(--f-label); letter-spacing: .16em; color: var(--ink-muted) }
.ficha h2 { margin: -6px 0 0; font: 400 clamp(28px, 4vw, 40px)/1.05 var(--f-display); text-transform: uppercase; text-wrap: balance; padding-right: 40px }
.f-meta { margin: 0; color: var(--ink-muted); font-size: 15px }
.f-preco { margin: 0; font: 700 34px/1 var(--f-label); color: var(--rock-red-text) }
.f-preco small { font: 600 15px/1.2 var(--f-body); color: var(--ok) }
.tams { border: 0; margin: 0; padding: 0 }
.tams legend { font: 700 14px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px }
.tams-op { display: flex; flex-wrap: wrap; gap: 8px }
.tam { min-width: 54px; height: 48px; padding: 0 12px; border: 1px solid #8A8D93; background: var(--surface-raised); border-radius: var(--r-sm); font: 700 17px/1 var(--f-label); letter-spacing: .06em; cursor: pointer }
.tam[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink) }
.tam { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px }
.tam small { font: 700 9px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted) }
.tam.tem { border: 2px solid var(--ok) }
.tam.tem small { color: var(--ok) }
.tam[aria-pressed="true"] small { color: inherit }
.tam:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through }
.f-estoque { margin: 0; padding: 10px 12px; border-left: 4px solid var(--ok); background: var(--surface); font-size: 14px; line-height: 1.4 }
.f-estoque.enc { border-left-color: var(--amp) }
.f-desc { margin: 0; color: var(--ink-muted) }
.f-acoes { display: flex; flex-wrap: wrap; gap: 10px }
.f-acoes .btn { flex: 1 1 200px }
.f-aviso { margin: 0; min-height: 1.4em; font-weight: 600; color: var(--ok) }
.f-aviso.erro { color: var(--rock-red-text) }
.f-entrega { margin: 0; padding: 12px; background: var(--surface); border-radius: var(--r-sm); font-size: 14px; color: var(--ink-muted) }

/* Sacola */
.sacola { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(420px, 100vw); display: none; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px) }
.sacola[open] { display: flex }
.sacola-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: #26272B; color: #F4F1EA }
.sacola-cab h2 { margin: 0; font: 400 26px/1 var(--f-display); text-transform: uppercase }
.sacola-lista { list-style: none; margin: 0; padding: 8px 20px; overflow: auto; flex: 1 }
.sacola-lista li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line) }
.sacola-lista img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: var(--r-sm) }
.s-nome { font-weight: 600; line-height: 1.3 }
.s-det { font-size: 14px; color: var(--ink-muted) }
.qtd { display: flex; align-items: center; gap: 4px }
.qtd button { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font-size: 18px; line-height: 1 }
.qtd span { min-width: 20px; text-align: center; font-weight: 600 }
.sacola-vazia { padding: 24px 20px; color: var(--ink-muted) }
.sacola-pe { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 8px }
.s-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 600 }
.s-total strong { font: 700 28px/1 var(--f-label) }
.s-pix { margin: 0; color: var(--ok); font-weight: 600; font-size: 15px }

/* Rodapé */
.rodape { background: #26272B; color: #C9CACE; padding-bottom: 80px }
.rodape-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 32px; padding-block: 40px }
.rodape-in > img { width: 180px; height: 180px }
.rodape h2 { margin: 0 0 6px; font: 700 15px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: #F4F1EA }
.rodape p { margin: 0 0 4px; font-size: 15px }
.rodape a { color: #FF8A8E }
.sel { user-select: all; color: #F4F1EA; font-weight: 600 }

@media (max-width: 560px) {
  .sacola-txt { display: none }
  .logo img { height: 52px }
  .topo-in { gap: 10px; flex-wrap: wrap; justify-content: space-between }
  .busca { order: 3; flex: 1 1 100% }
  .rodape-in > img { width: 150px; height: 150px }
  .hero-in { padding-block: 24px; padding-right: max(16px, 92px) }
  .hero::after { width: 72px }
  .passos { display: none }
  .ficha-info { padding: 20px 16px }
}