/* C20, round 1 (1 Nov 2026): the black storefront. Black, yellow and white, like the store's counter; pink only in the
   lettering's «Girls». Headings in Barlow Semi Condensed, text in Nunito Sans; the hero's lettering is his logo widened by
   ChatGPT on the founder's ask (fotos/chatgpt, checked letter by letter). */
@font-face { font-family: 'Barlow Semi Condensed'; src: url('fontes/BarlowSemiCondensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('fontes/BarlowSemiCondensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fontes/NunitoSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fontes/NunitoSans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --preto: #0e0e0f;
  --grafite: #1d1d20;
  --amarelo: #f2d41c;
  --rosa: #e07a8c;
  --branco: #ffffff;
  --cinza: #f3f2ee;
  --linha: #dddbd4;
  --tinta: #111113;
  --tinta-suave: #4b4b50;
  --verde-zap: #1d7a46;
  --lado: 16px;
  --topo: 60px;
  --titulo: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.folha-aberta { overflow: hidden; }
body { margin: 0; background: var(--branco); color: var(--tinta); font-family: var(--texto); font-size: 1rem; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--preto); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amarelo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id], .passo { scroll-margin-top: calc(var(--topo) + 8px); }


.envolve { max-width: 72rem; margin: 0 auto; padding-left: var(--lado); padding-right: var(--lado); }

/* Header: black, sticky, with the bag */
.topo { position: sticky; top: 0; z-index: 20; background: var(--preto); color: var(--branco); border-bottom: 3px solid var(--amarelo); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--topo); }
.topo-marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; text-decoration: none; }
.topo-marca img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.topo-nome { font-family: var(--titulo); font-weight: 600; font-size: clamp(1.0625rem, 4.6vw, 1.25rem); line-height: 1.15; overflow-wrap: anywhere; display: grid; }
.topo-sub { font-family: var(--texto); font-weight: 400; font-size: 1rem; color: #d6d6d6; }
.topo-sacola { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 6px; background: var(--amarelo); color: var(--preto); text-decoration: none; font-family: var(--titulo); font-weight: 700; font-size: 1.0625rem; flex: none; }
.icone { flex: none; }
.conta { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 999px; background: var(--preto); color: var(--amarelo); font-size: 1rem; line-height: 1; }
@media (max-width: 22.4em) { .topo-sacola-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Hero: her photo fills it on phones; the lettering, the line and the button sit on a dark fade */
.capa { position: relative; display: grid; align-content: end; min-height: clamp(470px, calc(100svh - 104px), 540px); background: var(--preto); color: var(--branco); overflow: hidden; isolation: isolate; }
.capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 14%; z-index: -2; }
.capa-texto { padding: 92px var(--lado) 34px; min-width: 0; background: linear-gradient(180deg, rgba(14, 14, 15, 0) 0, rgba(14, 14, 15, .7) 46px, var(--preto) 88px); }
/* Round 3 (search): the <h1> holds the lettering, whose alt names the store, its trade and town; the slogan is a <p>
   that keeps the old <h1>'s look */
.capa .marca { margin: 0; line-height: 0; }
.capa-slogan { margin: 12px 0 0; font-family: var(--titulo); font-weight: 600; font-size: clamp(1.375rem, 6.4vw, 1.75rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; overflow-wrap: anywhere; }
.capa-onde { margin-top: 4px; font-weight: 700; color: var(--amarelo); }
.capa .botao { margin-top: 16px; }

/* The lettering: his logo widened (a picture with a transparent background; alt="": the header names the store) */
.letreiro { display: block; width: min(100%, 340px); height: auto; }

/* Buttons */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; max-width: 100%; overflow-wrap: anywhere; padding: 10px 24px; border-radius: 4px; font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; }
.botao-amarelo { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); }
.botao-preto { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.botao-largo { width: 100%; }

/* The wavy edge: his store's white wall, scallops rising into the yellow of the counter */
.onda { height: 34px; background: var(--amarelo); position: relative; }
.onda::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: radial-gradient(circle at 50% 100%, var(--branco) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }

/* Sections and titles */
.secao { padding: 36px 0; }
.titulo { font-size: clamp(1.75rem, 8vw, 2.25rem); text-transform: uppercase; letter-spacing: .03em; }
.titulo::after { content: ''; display: block; width: 52px; height: 6px; margin-top: 8px; background: var(--amarelo); }
.secao-intro { margin-top: 12px; color: var(--tinta-suave); max-width: 40rem; }

/* How to buy */
.como { padding-top: 22px; padding-bottom: 8px; }
/* Room above «Novidades» for the sticky header, so a jump or a scroll to the catalog shows its title (envio.cjs's
   second screen and video need it) */
.pecas { padding-top: 72px; }
/* Round 2 (design review r11): a jump to the catalog lands 36 px higher, so after «Ver as novidades» the first «+»
   clears the floating button; the title still sits 41 px below the sticky header (32 + 72 = 104 px from the top) */
#pecas { scroll-margin-top: 32px; }
.passos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: 14px 10px; }
.passos li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.passo-n { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--amarelo); color: var(--preto); font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; }
.como-nota { margin-top: 16px; text-align: center; color: var(--tinta-suave); }

/* The highlight circles (filters), like his Instagram highlights */
.destaques { display: none; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 20px; }
.js .destaques { display: flex; }
.destaque { display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; cursor: pointer; }
.destaque-foto { display: block; width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: var(--linha); }
.destaque-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--branco); }
.destaque-nome { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.destaque[aria-pressed="true"] .destaque-foto { background: var(--amarelo); box-shadow: 0 0 0 2px var(--preto); }
.destaque[aria-pressed="true"] .destaque-nome { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--amarelo); text-underline-offset: 4px; }
.destaque:focus-visible { box-shadow: none; outline-offset: 4px; }

/* The catalog: two columns of tall cards */
.grade { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); }
.peca { position: relative; min-width: 0; display: flex; flex-direction: column; }
.peca-foto { position: relative; border-radius: 6px; overflow: hidden; background: var(--cinza); }
.peca-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.peca-nome { font-family: var(--texto); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; margin-top: 8px; text-wrap: pretty; }
.peca-abrir { display: flex; align-items: flex-start; width: 100%; min-height: max(44px, 2.5em); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
a.peca-abrir { text-decoration: none; }
.peca-abrir::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.peca-abrir:focus-visible { box-shadow: none; outline: none; }
.peca-abrir:focus-visible::after { outline: 3px solid var(--preto); outline-offset: 3px; box-shadow: 0 0 0 7px var(--amarelo); border-radius: 6px; }
.pontos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ponto { display: inline-block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); flex: none; }
.peca-preco { margin-top: 6px; font-weight: 700; font-size: 1.0625rem; }
.selo, .etiqueta-esgotada { pointer-events: none; }
.selo { position: absolute; left: 8px; top: 8px; z-index: 2; background: var(--amarelo); color: var(--preto); font-family: var(--titulo); font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; padding: 4px 8px; border-radius: 3px; }
/* Round 2: «Tirar dúvida» under each piece (its WhatsApp message names the piece), lined up at the cards' foot */
/* (design review r11: ink words with a green underline and a green icon, so eleven links don't outshout the names) */
.peca-duvida { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 4px; color: var(--tinta); font-weight: 700; line-height: 1.2; text-decoration: underline; text-decoration-color: var(--verde-zap); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.peca-duvida .icone-zap { flex: none; color: var(--verde-zap); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The «+»: a tick box that puts the piece in the bag */
.chip.chip-mais { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.chip.chip-mais > span { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; border: 0; background: var(--branco); color: var(--preto); box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.chip.chip-mais > span::before { content: '+'; content: '+' / ''; font-family: var(--titulo); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.chip.chip-mais input:checked + span { background: var(--amarelo); border-color: transparent; }
.chip.chip-mais input:checked + span::before { content: '✓'; content: '✓' / ''; font-size: 1.375rem; }
.chip.chip-mais input:checked + span::after { content: none; }
.chip.chip-mais input:focus-visible + span { outline: 3px solid var(--preto); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amarelo); }
html:not(.js) .chip-mais { display: none; }
.esgotada .peca-foto img { opacity: .5; filter: grayscale(.4); }
.esgotada .chip-mais { display: none; }
.etiqueta-esgotada { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; background: var(--preto); color: var(--branco); text-align: center; font-family: var(--titulo); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; }

/* The help card, last in the grid */
.peca-ajuda { background: var(--preto); color: var(--branco); border-radius: 6px; padding: 18px 14px 14px; justify-content: space-between; gap: 10px; min-height: 12rem; }
.ajuda-titulo { font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.15; color: var(--amarelo); }
.ajuda-texto { flex: 1; }
.peca-ajuda .botao { width: 100%; padding-left: 10px; padding-right: 10px; }

/* Chips (the bag's choices) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.chip > span { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 48px; padding: 9px 14px; border: 1.5px solid var(--linha); border-radius: 6px; background: var(--branco); font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.chip input:checked + span { border-color: var(--preto); background: #fff8cf; box-shadow: inset 0 0 0 1px var(--preto); }
.chip input:checked + span::after { content: '✓'; content: '✓' / ''; position: absolute; top: -9px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--preto); color: var(--amarelo); font-size: 13px; line-height: 20px; text-align: center; font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--preto); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amarelo); }
.chip input:disabled + span { opacity: .55; text-decoration: line-through; }
.chip-ajuda > span { border-style: solid; }

/* The bag */
.sacola { background: var(--cinza); }
.sacola-caixa { max-width: 40rem; margin: 0 auto; background: var(--branco); border-radius: 8px; border-top: 6px solid var(--preto); padding: 22px var(--lado) 24px; box-shadow: 0 1px 0 var(--linha); }
.sacola-vazia { margin-top: 14px; padding: 14px; border: 1.5px dashed var(--linha); border-radius: 6px; color: var(--tinta-suave); }
.itens { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.item-foto { display: block; width: 72px; height: 90px; border-radius: 4px; overflow: hidden; background: var(--cinza); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.item-corpo { min-width: 0; }
.item-nome { font-weight: 700; overflow-wrap: anywhere; }
.item-preco { white-space: nowrap; }
.item-cores { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.item-cores legend { padding: 0; margin-bottom: 6px; color: var(--tinta-suave); font-size: 1rem; }
.chip-cor > span { padding: 8px 12px 8px 10px; }
.tirar { margin-top: 10px; min-height: 44px; padding: 8px 14px; border-radius: 6px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer; }
.grupo-ajuda { margin-top: 14px; }
.passo { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.passo legend, .campo-rotulo { display: flex; gap: 10px; align-items: center; padding: 0; margin-bottom: 10px; font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.passo .passo-n, .campo-rotulo .passo-n { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
.campo { display: block; }
.campo input { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; border: 1.5px solid var(--tinta-suave); border-radius: 6px; background: var(--branco); color: var(--tinta); }
.caixa-bairro { margin-top: 14px; }
.caixa-bairro .campo-rotulo { font-size: 1.0625rem; }
.mensagem { margin-top: 22px; background: var(--cinza); border-left: 4px solid var(--amarelo); border-radius: 4px; padding: 14px; }
.mensagem-rotulo { font-weight: 700; font-size: 1rem; color: var(--tinta-suave); }
.mensagem p[data-previa] { margin-top: 4px; overflow-wrap: anywhere; }
.botao-enviar { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; width: 100%; padding: 12px 16px; border-radius: 6px; background: var(--verde-zap); color: var(--branco); font-family: var(--titulo); font-weight: 700; font-size: 1.1875rem; letter-spacing: .03em; text-decoration: none; text-align: center; }
.envio-nota { margin-top: 10px; font-size: 1rem; color: var(--tinta-suave); }

/* Instagram */
.insta { background: var(--preto); color: var(--branco); }
.insta-cabeca { display: flex; align-items: center; gap: 14px; }
.insta-cabeca img { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--amarelo); }
.titulo-insta { font-size: clamp(1.5rem, 6.6vw, 1.875rem); text-transform: uppercase; letter-spacing: .03em; }
.insta-arroba { color: var(--amarelo); font-weight: 700; overflow-wrap: anywhere; }
.insta-grade { margin: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.insta-grade img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.etiqueta { display: inline-block; background: var(--amarelo); color: var(--preto); font-family: var(--titulo); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; margin-bottom: 12px; }

/* Footer */
/* Round 2: the footer's foot keeps room for the fixed bottom row (the bag bar and the floating button); sacola.js
   measures that row into --fixos whatever its height (a filled bag, 200 % text), so the room is black footer */
.rodape { background: var(--preto); color: var(--branco); padding: 30px 0 calc(var(--fixos, 56px) + 32px); border-top: 6px solid var(--amarelo); }
.rodape .envolve { display: grid; gap: 10px; }
.rodape-nome { font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--amarelo); text-underline-offset: 4px; }
.rodape-credito { font-size: 1rem; }
.credito { display: inline-flex; align-items: center; min-height: 44px; color: #cfcfcf; text-underline-offset: 4px; }
.rodape :focus-visible, .insta :focus-visible, .capa :focus-visible, .topo :focus-visible, .peca-ajuda :focus-visible { outline-color: var(--amarelo); box-shadow: none; }

/* Fixed at the bottom (round 2): the bag bar, while the bag has pieces and is out of view, and beside it the floating
   WhatsApp button, which hides while the bag (with its own WhatsApp button) is on screen */
/* (design review r11: when the bar can't keep 14rem beside the button, at 320 px or with large text, the button moves
   above a full-width bar instead of squeezing it) */
.fixos { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 10px; pointer-events: none; }
.fixos > * { pointer-events: auto; }
.barra-sacola { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px; border-radius: 8px; background: var(--preto); color: var(--branco); text-decoration: none; font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); border: 2px solid var(--amarelo); }
.zap { flex: none; margin-left: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--verde-zap); color: var(--branco); border: 2px solid var(--branco); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: opacity .2s ease, visibility .2s; }
.zap .icone-zap { width: 30px; height: 30px; }
.zap:focus-visible { box-shadow: 0 0 0 6px var(--amarelo); }
.sacola-a-vista .zap { opacity: 0; visibility: hidden; }
.barra-ver { margin-left: auto; color: var(--amarelo); white-space: normal; text-align: right; }
.barra-sacola.pulo { animation: pulo .5s ease; }
@keyframes pulo { 40% { transform: translateY(-6px); } }
/* (no body padding for the bar: the footer keeps the room, in black; see .rodape) */
.barra-sacola:focus-visible { outline-color: var(--amarelo); box-shadow: none; }

/* The panel of one piece (a dialog): the photo zooms onto the colour she taps */
.folha { padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 94svh; background: var(--branco); color: var(--tinta); border-radius: 14px 14px 0 0; overflow: auto; overscroll-behavior: contain; }
.folha::backdrop { background: rgba(14, 14, 15, .66); }
.folha[open] { animation: subir .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.folha-caixa { position: relative; padding: 0 0 20px; }
.folha-fechar { position: absolute; right: 10px; top: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--preto); color: var(--branco); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.folha-fechar:focus-visible { outline-color: var(--amarelo); box-shadow: none; }
.folha-foto { position: relative; margin: 0 auto; width: 100%; aspect-ratio: var(--ar, .9); max-width: calc(50svh * var(--ar, .9)); overflow: hidden; background: var(--cinza); }
.folha-foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.folha-info { padding: 16px var(--lado) 0; }
.folha-nome { font-size: 1.625rem; padding-right: 8px; }
.folha-preco { margin-top: 4px; font-weight: 700; font-size: 1.125rem; }
.folha-rotulo { margin-top: 12px; font-weight: 700; }
.folha-cores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.amostra { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--tinta); font: inherit; cursor: pointer; }
.amostra .ponto { width: 26px; height: 26px; }
.amostra[aria-pressed="true"] { border-color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); background: #fff8cf; font-weight: 700; }
.folha-tamanhos { margin-top: 10px; color: var(--tinta-suave); }
.folha-erro { margin-top: 10px; color: #a3122a; font-weight: 700; }
.folha .botao-largo { margin-top: 16px; }
.botao-duvida { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 16px; border-radius: 6px; border: 2px solid var(--verde-zap); background: var(--branco); color: var(--verde-zap); font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.botao-duvida .icone-zap { flex: none; }
.botao-texto { display: block; margin: 8px auto 0; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--tinta); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.folha-nota { margin-top: 8px; color: var(--tinta-suave); text-align: center; }

/* The panel demo page */
.painel-pagina main { padding: 24px 0 48px; }
.painel-pagina .envolve-estreito { max-width: 36rem; margin: 0 auto; padding-left: var(--lado); padding-right: var(--lado); }
.painel-pagina h1 { font-size: 2rem; text-transform: uppercase; letter-spacing: .02em; }
.painel-pagina h1 + .nota { margin-top: 6px; }
.painel-aviso { background: #fff8cf; border-left: 5px solid var(--preto); padding: 10px 12px; border-radius: 4px; margin: 14px 0; }
.tela[hidden] { display: none; }
.cartao-entrar { margin-top: 18px; display: grid; gap: 14px; border: 1px solid var(--linha); border-top: 6px solid var(--preto); border-radius: 8px; padding: 18px var(--lado); }
.cartao-entrar .campo-rotulo, .form-peca .campo-rotulo, .form-peca .passo legend { font-size: 1.125rem; }
.botao-largo { min-height: 52px; border-radius: 6px; border: 2px solid var(--preto); background: var(--preto); color: var(--branco); font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; padding: 10px 16px; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; }
.botao-claro { background: var(--branco); color: var(--preto); }
.link-painel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-weight: 700; text-underline-offset: 3px; }
.nota { color: var(--tinta-suave); font-size: 1rem; }
.lista-painel { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.item-painel { display: grid; grid-template-columns: 64px 1fr; gap: 12px; border: 1px solid var(--linha); border-radius: 8px; padding: 10px; min-width: 0; }
.item-painel img { width: 64px; height: 80px; border-radius: 4px; object-fit: cover; }
.item-painel-corpo { min-width: 0; }
.item-painel-nome { font-weight: 700; overflow-wrap: anywhere; }
.item-painel-estado { color: var(--tinta-suave); font-size: 1rem; }
.item-painel-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mini-foto { position: relative; display: inline-flex; align-items: center; }
.mini-foto input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mini-foto:focus-within { outline: 3px solid var(--preto); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amarelo); }
.item-painel-aviso { margin-top: 4px; font-weight: 700; }
.item-painel-aviso:empty { display: none; }
.acoes { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.mini { min-height: 44px; padding: 8px 14px; border-radius: 6px; border: 1.5px solid var(--tinta-suave); background: var(--branco); color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer; }
a.mini { display: inline-flex; align-items: center; text-decoration: none; }
.mini[data-zerar] { border-style: dashed; }
.item-painel.removida { background: var(--cinza); border-style: dashed; }
.item-painel.removida img { filter: grayscale(1); opacity: .6; }
.item-painel.removida .item-painel-estado { color: #a3122a; font-weight: 700; }
.item-painel.esgotada { border: 2px dashed var(--preto); }
.item-painel.esgotada .item-painel-estado { color: var(--tinta); font-weight: 700; }
.form-peca { display: grid; gap: 18px; margin-top: 12px; }
.form-peca .passo { margin-top: 0; }
.foto-escolha { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 180px; border: 2px dashed var(--tinta-suave); border-radius: 8px; text-align: center; padding: 16px; background: var(--cinza); }
.foto-escolha input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.foto-escolha:focus-within { outline: 3px solid var(--preto); outline-offset: 3px; box-shadow: 0 0 0 7px var(--amarelo); }
.foto-escolha img { width: 160px; height: 200px; object-fit: cover; border-radius: 6px; }
.foto-escolha-texto { font-weight: 700; }
.erro { color: #a3122a; font-weight: 700; }
.pronto-foto { width: 160px; height: 200px; object-fit: cover; border-radius: 6px; margin: 16px 0; }

@media (min-width: 30em) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
}
@media (min-width: 48em) {
  :root { --lado: 40px; }
  .secao { padding: 56px 0; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 30px 20px; }
  .insta-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .insta .envolve { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; }
  .insta-grade { grid-column: 1 / -1; grid-row: 2; }
  .insta .botao { grid-column: 2; grid-row: 1; }
  .folha { margin: auto; width: min(58rem, calc(100% - 48px)); max-height: min(92svh, 46rem); border-radius: 12px; }
  .folha-caixa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; padding: 0; }
  .folha-foto { margin: 0; max-width: none; }
  .folha-info { padding: 56px 28px 28px; }
}
@media (min-width: 64em) {
  .capa { grid-template-columns: minmax(0, 1fr) 520px; align-content: stretch; min-height: 640px; }
  .capa-foto { position: static; grid-column: 2; grid-row: 1; width: 520px; height: 100%; min-height: 640px; max-height: 760px; object-position: 50% 20%; z-index: 0; }
  .capa-texto { background: none; }
  .capa-texto { grid-column: 1; grid-row: 1; align-self: center; padding: 48px 48px 48px max(40px, calc((100vw - 72rem) / 2 + 40px)); background: none; }
  .letreiro { width: min(100%, 540px); }
  .capa-slogan { font-size: 2.25rem; margin-top: 22px; }
  .capa .botao { margin-top: 26px; }
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .destaques { justify-content: flex-start; }
  .passos { max-width: 52rem; }
  .passos li { justify-items: start; text-align: left; }
  .como-nota { text-align: left; }
  .como .titulo, .como-nota { max-width: 52rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .folha-foto img, .item-foto img { transition: none; }
  .folha[open], .barra-sacola.pulo { animation: none; }
  .zap { transition: none; }
}

/* ---------- Round 3: the live site (5 Nov 2026) ---------- */
/* A piece's own page, /peca/<id>-<slug>/: the photo, the name, the colours, the way to the bag and to WhatsApp */
.trilha { background: var(--cinza); border-bottom: 1px solid var(--linha); }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 0; margin-bottom: 0; font-size: 1rem; }
.trilha li { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; }
.trilha li + li::before { content: '›'; margin-right: 8px; color: var(--tinta-suave); }
.trilha a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }
.trilha [aria-current] { color: var(--tinta-suave); overflow-wrap: anywhere; }
.peca-pagina { padding-top: 22px; }
.peca-pagina-grade { display: grid; gap: 20px; }
.peca-pagina-foto { margin: 0; border-radius: 8px; overflow: hidden; background: var(--cinza); max-width: 32rem; }
.peca-pagina-foto img { width: 100%; height: auto; }
.peca-pagina.esgotada .peca-pagina-foto img { opacity: .5; filter: grayscale(.4); }
.peca-pagina-info { display: grid; gap: 10px; align-content: start; min-width: 0; max-width: 32rem; }
.peca-pagina-info .titulo { font-size: clamp(1.75rem, 7vw, 2.25rem); }
.peca-pagina-preco { font-weight: 700; font-size: 1.375rem; }
.peca-pagina-esgotada { justify-self: start; background: var(--preto); color: var(--branco); font-family: var(--titulo); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.peca-pagina-rotulo { font-weight: 700; margin-top: 4px; }
.peca-pagina-cores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.peca-pagina-cores li { display: inline-flex; align-items: center; gap: 8px; }
.peca-pagina-nota { color: var(--tinta-suave); }
.peca-pagina-info .botao { width: 100%; margin-top: 8px; }
.peca-pagina-info .botao-duvida { margin-top: 0; }
.mais-novidades { background: var(--cinza); }
.mais-pecas { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.mais-pecas a { display: grid; gap: 6px; color: var(--tinta); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.mais-pecas img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--branco); }
.mais-pecas a:hover span, .mais-pecas a:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.erro-pagina { padding: 56px 0 72px; }
.erro-pagina p { margin-top: 12px; }
.erro-pagina .botao { margin-top: 20px; }
@media (min-width: 48em) {
  .peca-pagina-grade { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); align-items: start; gap: 40px; }
  .mais-pecas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The live panel: messages, the list's states, the photo being replaced, the password form */
.painel-msg { margin: 14px 0; padding: 10px 12px; border-radius: 4px; background: #e8f5ec; border-left: 5px solid var(--verde-zap); font-weight: 700; }
.painel-msg.falha { background: #fdecef; border-left-color: #a3122a; color: #7d0d20; }
.painel-msg:empty { display: none; }
.carregando { color: var(--tinta-suave); margin-top: 16px; }
.item-painel.nova-agora { border-color: var(--verde-zap); border-width: 2px; }
.mini[disabled], .botao-largo[disabled] { opacity: .55; cursor: progress; }
.mini-link { display: inline-flex; align-items: center; text-decoration: none; }
.foto-atual { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linha); border-radius: 8px; padding: 10px; }
.foto-atual img { width: 64px; height: 80px; object-fit: cover; border-radius: 4px; flex: none; }
.chip-propria span { font-style: normal; }
.form-senha { display: grid; gap: 14px; margin-top: 12px; }
.contagem { color: var(--tinta-suave); font-size: 1rem; margin-top: 10px; }
.painel-pagina .tela > [data-nova] { margin-top: 14px; }
/* Final review r1: the title a screen change focuses gets no ring (it is not a control); the breadcrumb's links are
   44 px tall; a short page (the 404) keeps the footer at the foot */
.tela > h1:focus { outline: none; box-shadow: none; }
.trilha a { display: inline-flex; align-items: center; min-height: 44px; }
.erro-pagina { min-height: 52svh; }
.painel-iniciando { margin-top: 24px; color: var(--tinta-suave); }