.topo { background: var(--marca); color: #fff; position: sticky; top: 0; z-index: 20; }
.topo-in { max-width: 1100px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo h1 { font-size: 28px; letter-spacing: 1px; }
.slogan { font-size: 13px; opacity: .85; }
.carrinho-btn { position: relative; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.bolha { position: absolute; top: -2px; right: -2px; background: var(--ouro); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }

.faixa { background: linear-gradient(180deg, var(--marca), color-mix(in srgb, var(--marca) 70%, #000) ); color: #fff; padding-bottom: 18px; }
.faixa-in { max-width: 1100px; margin: 0 auto; padding: 4px 16px 0; }
.selo { text-align: center; color: #f1dcc0; font-size: 13px; letter-spacing: 1px; margin: 4px 0 12px; }
.filtros input { border: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.chip { flex: none; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; padding: 7px 14px; border-radius: 99px; font: inherit; font-size: 14px; cursor: pointer; }
.chip.ativo { background: #fff; color: var(--marca); border-color: #fff; font-weight: 600; }

.vitrine { max-width: 1100px; margin: 0 auto; padding: 18px 16px 30px; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitrine .vazio { grid-column: 1 / -1; }

.prod { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--sombra); }
.prod .foto { aspect-ratio: 1; background: #f3ece9; display: grid; place-items: center; overflow: hidden; position: relative; }
.prod .foto img { width: 100%; height: 100%; object-fit: cover; }
.prod .foto .sem { font-family: "Cormorant Garamond", serif; font-size: 40px; color: var(--ouro); }
.prod .tag { position: absolute; top: 8px; left: 8px; }
.prod .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod .nome { font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 700; line-height: 1.15; }
.prod .marca { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }
.prod .preco { font-weight: 700; color: var(--marca); margin-top: auto; padding-top: 6px; font-size: 16px; }
.prod.esgotado { opacity: .6; }

.det-foto { aspect-ratio: 1; border-radius: var(--raio); overflow: hidden; background: #f3ece9; margin-bottom: 14px; }
.det-foto img { width: 100%; height: 100%; object-fit: cover; }
.notas { display: grid; gap: 8px; margin: 12px 0; }
.notas div { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; }
.notas b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ouro); }

.item-car { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.item-car img, .item-car .mini { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #f3ece9; flex: none; }
.qtd { display: flex; align-items: center; gap: 6px; }
.qtd button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--linha); background: #fff; font-size: 17px; cursor: pointer; }
.total-linha { display: flex; justify-content: space-between; font-size: 18px; padding: 14px 0 4px; }
.pix-box { text-align: center; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-top: 14px; display: grid; gap: 8px; justify-items: center; }
.qr img, .qr canvas { margin: 0 auto; }

.rodape { text-align: center; padding: 24px 16px 40px; color: var(--suave); font-size: 14px; display: grid; gap: 6px; }