/* Stratum — identidade do Manual da Marca: Orbitron (títulos/preços) + Inter (texto), azul, cantos arredondados, sem sombras pesadas. */
:root {
  --azul-profundo: #1c3a5c; --azul-noturno: #234a70; --azul-medio: #2f5f8c; --azul-claro: #5b92c2; --azul-gelo: #e3eef9;
  --vermelho: #a3302f; --rosado: #fbe9e6;
  --preto: #0b0e13; --tinta: #1b2633; --cinza: #5f6b78; --creme: #fbf8f2; --branco: #fff;
  --linha: #d9e3ee; --ok: #2c7a4b; --raio: 14px;
  --titulo: 'Orbitron', 'Segoe UI', sans-serif; --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--tinta); font: 400 16px/1.55 var(--texto); -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
a { color: var(--azul-medio); }
h1, h2, h3, .t { font-family: var(--titulo); font-weight: 600; color: var(--azul-profundo); line-height: 1.2; margin: 0; letter-spacing: .01em; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--cinza); }
.small { font-size: .85rem; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--azul-profundo); background: var(--azul-profundo); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; transition: background .15s, color .15s; }
.btn:hover { background: var(--azul-noturno); border-color: var(--azul-noturno); }
.btn.ghost { background: transparent; color: var(--azul-profundo); }
.btn.ghost:hover { background: var(--azul-gelo); }
.btn.wa { background: #1f7a4d; border-color: #1f7a4d; }
.btn.wa:hover { background: #18633e; border-color: #18633e; }
.btn.danger { background: transparent; color: var(--vermelho); border-color: var(--vermelho); }
.btn.danger:hover { background: var(--rosado); }
.btn.sm { padding: 6px 14px; min-height: 36px; font-size: .9rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

/* seções */
section { padding: 32px 0; scroll-margin-top: 80px; }
.sec-title { font-size: 1.15rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sec-title::after { content: ''; flex: 1; height: 6px; border-radius: 3px; background: var(--azul-gelo); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.chip { border: 1.5px solid var(--linha); background: var(--branco); border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; font-weight: 500; min-height: 40px; }
.chip[aria-pressed="true"] { background: var(--azul-profundo); color: #fff; border-color: var(--azul-profundo); }

/* posts */
.posts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.post { background: var(--azul-gelo); border-radius: var(--raio); padding: 18px; display: flex; gap: 14px; }
.post img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; }
.post h3 { font-size: .95rem; margin-bottom: 6px; }
.post p { margin: 0; font-size: .92rem; }

/* produtos */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.card .ph { aspect-ratio: 4 / 5; background: repeating-linear-gradient(180deg, var(--azul-gelo) 0 9px, color-mix(in srgb, var(--azul-gelo) 86%, var(--azul-claro)) 9px 18px); position: relative; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; width: 100%; }
.card .ph img.foto { width: 100%; height: 100%; object-fit: cover; }
.card .ph .vazio { width: 34%; opacity: .55; }
.badge { position: absolute; left: 10px; top: 10px; background: var(--vermelho); color: #fff; font: 700 .72rem var(--titulo); padding: 5px 10px; border-radius: 999px; }
.card .info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { font-size: .92rem; }
.card .desc { font-size: .88rem; color: var(--cinza); flex: 1; margin: 0; }
.price { font: 700 1.1rem var(--titulo); color: var(--azul-medio); }
.price s { font: 400 .85rem var(--texto); color: var(--cinza); margin-right: 6px; }
.price.promo { color: var(--vermelho); }
.esgotado { color: var(--vermelho); font-weight: 600; font-size: .85rem; }

/* painéis laterais e modais */
.overlay { position: fixed; inset: 0; background: rgba(11, 14, 19, .55); z-index: 40; display: flex; justify-content: flex-end; }
.overlay.center { justify-content: center; align-items: center; padding: 16px; }
.drawer { background: var(--branco); width: min(440px, 100%); height: 100%; display: flex; flex-direction: column; }
.modal { background: var(--branco); width: min(560px, 100%); max-height: 92vh; border-radius: var(--raio); display: flex; flex-direction: column; overflow: hidden; }
.modal.wide { width: min(760px, 100%); }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.pane-head h2 { font-size: 1.05rem; }
.pane-body { padding: 18px; overflow-y: auto; flex: 1; }
.pane-foot { padding: 14px 18px; border-top: 1px solid var(--linha); background: var(--creme); }
.x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cinza); width: 44px; height: 44px; }

.line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.line .th { width: 56px; height: 56px; border-radius: 10px; background: var(--azul-gelo); flex: none; object-fit: cover; display: grid; place-items: center; }
.line .th img { width: 60%; opacity: .4; }
.line .meta { flex: 1; min-width: 0; }
.line .meta b { display: block; font-size: .93rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--linha); border-radius: 999px; }
.qty button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; border-radius: 999px; }
.qty span { min-width: 24px; text-align: center; font-weight: 600; }
.totals { display: grid; gap: 4px; margin-bottom: 12px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font: 700 1.15rem var(--titulo); color: var(--azul-profundo); }

/* formulários */
label.f { display: block; margin-bottom: 14px; font-weight: 600; font-size: .92rem; }
label.f small { font-weight: 400; color: var(--cinza); display: block; }
.in { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--branco); min-height: 44px; }
.in:focus { border-color: var(--azul-claro); outline: none; }
textarea.in { min-height: 84px; resize: vertical; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--linha); border-radius: 12px; margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.opt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--azul-profundo); }
.opt:has(input:checked) { border-color: var(--azul-medio); background: var(--azul-gelo); }
.opt b { display: block; }
.err { background: var(--rosado); color: var(--vermelho); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: .92rem; }
.okmsg { background: #e6f4ec; color: var(--ok); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: .92rem; }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

/* Pix */
.pix { text-align: center; }
.pix .qr { background: #fff; border: 1.5px solid var(--linha); border-radius: var(--raio); display: inline-block; padding: 10px; margin: 10px 0; }
.pix code { display: block; background: var(--azul-gelo); border-radius: 10px; padding: 10px; font-size: .75rem; word-break: break-all; text-align: left; max-height: 90px; overflow: auto; }
.steps { text-align: left; counter-reset: s; list-style: none; padding: 0; margin: 14px 0; }
.steps li { counter-increment: s; display: flex; gap: 10px; margin-bottom: 8px; }
.steps li::before { content: counter(s); background: var(--azul-profundo); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .75rem var(--titulo); flex: none; }

footer.rodape { background: var(--azul-profundo); color: #cfe0f1; padding: 30px 0; margin-top: 30px; }
footer.rodape a { color: #fff; }
footer.rodape img { height: 34px; }

.demo { background: #fff7d6; color: #5a4b00; text-align: center; font-size: .85rem; padding: 6px 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--azul-profundo); color: #fff; padding: 12px 20px; border-radius: 999px; z-index: 60; font-weight: 500; }

/* ----------------------------- painel admin ----------------------------- */
.adm-top { background: var(--azul-profundo); color: #fff; }
.adm-top .wrap { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.adm-top img { height: 46px; }
.adm-top .t { color: #fff; font-size: 1.05rem; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); line-height: 1.6; }
.tabs { display: flex; gap: 4px; overflow-x: auto; background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 15; padding: 0 16px; }
.tab { border: 0; background: none; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--cinza); border-bottom: 3px solid transparent; white-space: nowrap; min-height: 48px; }
.tab[aria-selected="true"] { color: var(--azul-profundo); border-color: var(--azul-profundo); }
.tab .n { background: var(--vermelho); color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 7px; margin-left: 4px; }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bar h2 { font-size: 1.1rem; }
.box { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; font-size: .92rem; }
.tbl th { background: var(--azul-gelo); color: var(--azul-profundo); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl input.in, .tbl select.in { margin: 0; padding: 7px 9px; min-height: 38px; }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--azul-gelo); color: var(--azul-profundo); }
.pill.off { background: #eee; color: var(--cinza); }
.pill.promo { background: var(--rosado); color: var(--vermelho); }
.pill.ok { background: #e6f4ec; color: var(--ok); }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--azul-gelo); display: block; }
.imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.imgs .im { position: relative; }
.imgs .im img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.imgs .im button { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--vermelho); color: #fff; cursor: pointer; }
.order { border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; margin-bottom: 12px; }
.order summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.order summary::-webkit-details-marker { display: none; }
.order .body { padding: 0 16px 16px; border-top: 1px solid var(--linha); }
.order .body ul { padding-left: 18px; }
.login { max-width: 380px; margin: 12vh auto; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; }
.login img { height: 70px; display: block; margin: 0 auto 18px; }
.switch { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--azul-profundo); }
@media (max-width: 700px) { .hide-sm { display: none; } .tbl th, .tbl td { padding: 8px; } }

/* ---------------------- topo e capa (v2) ---------------------- */
.top { background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 104px; }
.top .brand { display: block; line-height: 0; }
.top img.logo { height: 76px; width: auto; display: block; margin-left: -27px; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a { color: var(--azul-profundo); text-decoration: none; font-weight: 500; padding: 10px 14px; border-radius: 999px; }
.nav a:hover { background: var(--azul-gelo); }
.cart-btn { position: relative; }
.cart-btn .n { background: var(--vermelho); color: #fff; border-radius: 999px; font-size: .75rem; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }
@media (max-width: 720px) { .nav { display: none; } .nav + #open-account { margin-left: 0; } #open-account { margin-left: auto; } .top img.logo { height: 46px; margin-left: -14px; } .top .wrap { min-height: 70px; } }

.hero { background: var(--azul-profundo); color: #fff; padding: 56px 0 0; position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
.hero-txt .eyebrow { font: 600 .75rem var(--titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--azul-claro); margin: 0 0 14px; }
.hero h1 { color: #fff; font-size: clamp(1.7rem, 4.6vw, 3rem); max-width: 16ch; }
.hero .lead { max-width: 52ch; color: #d6e4f3; margin: 16px 0 24px; font-size: 1.05rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.light { background: #fff; color: var(--azul-profundo); border-color: #fff; }
.btn.light:hover { background: var(--azul-gelo); border-color: var(--azul-gelo); }
.btn.outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hero-mark { width: 100%; max-width: 380px; justify-self: end; }
.hero-mark .bars rect { transform-box: fill-box; transform-origin: center; animation: layer .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-mark .bars rect:nth-child(1) { animation-delay: .05s } .hero-mark .bars rect:nth-child(2) { animation-delay: .12s }
.hero-mark .bars rect:nth-child(3) { animation-delay: .19s } .hero-mark .bars rect:nth-child(4) { animation-delay: .26s }
.hero-mark .bars rect:nth-child(5) { animation-delay: .33s } .hero-mark .bars rect:nth-child(6) { animation-delay: .4s }
.hero-mark .bars rect:nth-child(7) { animation-delay: .47s }
@keyframes layer { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-mark .bars rect { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 720px) { .hero { padding-top: 36px; } .hero-in { grid-template-columns: 1fr; } .hero-mark { max-width: 170px; justify-self: start; order: -1; margin-bottom: -6px; } }
.perks { list-style: none; margin: 40px auto 0; padding: 18px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.perks li { display: flex; flex-direction: column; gap: 2px; }
.perks b { font: 600 .8rem var(--titulo); color: #fff; }
.perks span { color: #b9cfe6; font-size: .88rem; }
@media (max-width: 720px) { .perks { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; } .perks li { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; } }

/* filtros */
.filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.filters .chips { flex: 1; min-width: 0; }
.search input { border: 1.5px solid var(--linha); background: #fff; border-radius: 999px; padding: 9px 16px; min-height: 42px; width: 220px; max-width: 100%; }
.search input:focus { border-color: var(--azul-claro); outline: none; }
@media (max-width: 720px) { .search, .search input { width: 100%; } .filters .chips { flex-basis: 100%; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.group-t { grid-column: 1 / -1; margin-top: 14px; font-size: 1rem; display: flex; align-items: baseline; gap: 10px; }
.group-t small { font: 400 .85rem var(--texto); color: var(--cinza); }

/* cards (v2) */
.card { transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--azul-claro); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card .tag { font-size: .72rem; color: var(--azul-medio); background: var(--azul-gelo); padding: 2px 9px; border-radius: 999px; align-self: flex-start; font-weight: 600; }
.card .buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.card .buy .btn { padding: 8px 16px; min-height: 40px; }

/* como pedir */
.how { list-style: none; counter-reset: h; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how li { counter-increment: h; background: var(--azul-gelo); border-radius: var(--raio); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.how li::before { content: counter(h); font: 700 1.6rem var(--titulo); color: var(--azul-claro); }
.how b { font: 600 .95rem var(--titulo); color: var(--azul-profundo); }
.how span { color: var(--tinta); font-size: .93rem; }
@media (max-width: 720px) { .how { grid-template-columns: 1fr; } }
.custom { margin: 18px 0 0; font-weight: 500; }

/* rodapé e barra do carrinho */
.foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
footer.rodape img { height: 76px; margin-left: -27px; }
.cartbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; justify-content: space-between; align-items: center; background: var(--azul-profundo); color: #fff; border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 600; cursor: pointer; min-height: 52px; }
.cartbar b { font-family: var(--titulo); }
@media (max-width: 720px) { .cartbar:not(.hidden) { display: flex; } body { padding-bottom: 76px; } }

/* ------------------- datas comemorativas ------------------- */
/* Família vermelha do manual (para datas comemorativas): troca a paleta inteira pelas mesmas variáveis. */
.pal-red {
  --azul-profundo: #5c1c22; --azul-noturno: #7a2329; --azul-medio: #a3302f; --azul-claro: #d9625a; --azul-gelo: #fbe9e6;
  --linha: #ecd5d1; --vermelho: #a3302f;
}
.pal-red .hero-mark rect:nth-child(1), .pal-red .hero-mark rect:nth-child(7) { fill: #fbe9e6; }
.pal-red .hero-mark rect:nth-child(2), .pal-red .hero-mark rect:nth-child(6) { fill: #f6d3cf; }
.pal-red .hero-mark rect:nth-child(3), .pal-red .hero-mark rect:nth-child(5) { fill: #eeb2ab; }
.pal-red .hero-mark rect:nth-child(4) { fill: #d9625a; }
.pal-red .hero-mark ellipse { fill: #d9625a; }
.pal-red .card .ph .vazio { filter: hue-rotate(150deg); }
.hero { background-image: var(--motif, none); background-size: 90px 90px; }
.announce { background: var(--azul-claro); color: var(--preto); text-align: center; font-weight: 600; font-size: .9rem; padding: 8px 16px; }

/* painel: datas comemorativas */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.theme { background: #fff; border: 2px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.theme.on { border-color: var(--azul-profundo); }

.tprev .t { color: inherit; font-size: .95rem; text-align: center; padding: 0 8px; }
.tinfo { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ajustes mobile */
.toast { white-space: nowrap; max-width: 92vw; }
@media (max-width: 720px) {
  .toast { bottom: 88px; }
  .hero-mark { max-width: 110px; margin-bottom: 0; }
  .hero { padding-bottom: 4px; }
  
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card .info { padding: 10px; }
  .card h3 { font-size: .8rem; }
  .card .desc { font-size: .78rem; }
  .card .buy { flex-direction: column; align-items: stretch; }
  .card .buy .btn { width: 100%; }
  .price { font-size: 1rem; }
}

/* conta */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--azul-gelo); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.seg button { border: 0; background: none; padding: 9px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--azul-medio); min-height: 40px; }
.seg button[aria-selected="true"] { background: var(--azul-profundo); color: #fff; }
.top .wrap { gap: 12px; }
@media (max-width: 720px) { #open-account { padding: 8px 14px; min-height: 40px; } }

/* =================== datas comemorativas v2: cenas, enfeites e efeitos =================== */
.hero-in, .perks { position: relative; z-index: 3; }
.hero-mark .lyr { transform-box: fill-box; transform-origin: center; animation: layer .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.hero-mark.scene { overflow: visible; }
.floaty { animation: floaty 6s ease-in-out 1.6s infinite; }
@keyframes floaty { 50% { transform: translateY(-5px); } }
.tw { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.str { transform-box: fill-box; transform-origin: top center; animation: sway 3.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .28; } }

.countdown { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 9px 18px 9px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font: 600 .82rem var(--titulo); color: #fff; letter-spacing: .02em; }
.countdown::before { content: ''; width: 16px; height: 12px; background: repeating-linear-gradient(180deg, #fff 0 2px, transparent 2px 4px); border-radius: 2px; flex: none; }

/* faixas e enfeites pendurados */
.garland { position: absolute; left: 0; right: 0; top: 0; height: 48px; overflow: hidden; pointer-events: none; z-index: 2; }
.garland-svg { display: block; width: 100%; height: 48px; }
.bulb { animation: bulb 1.9s ease-in-out infinite; }
@keyframes bulb { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.flag { transform-box: fill-box; transform-origin: 50% 0; animation: sway 3s ease-in-out infinite alternate; }
.hangers { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2; pointer-events: none; }
html[data-theme="natal"] .hangers { top: 24px; }
.hang { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: swing var(--dur, 5s) ease-in-out infinite alternate; }
.thread { display: block; width: 1.5px; background: rgba(255,255,255,.6); }
@keyframes swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.hero:has(.hangers) { padding-top: 124px; }
.web { position: absolute; top: 0; pointer-events: none; }
.web.l { left: 0; } .web.r { right: 0; transform: scaleX(-1); }
.spider { position: absolute; top: 0; right: 16%; display: flex; flex-direction: column; align-items: center; animation: drop 7s ease-in-out infinite; }
@keyframes drop { 0%, 100% { transform: translateY(-120px); } 45%, 60% { transform: translateY(-34px); } }

.announce.ticker { overflow: hidden; white-space: nowrap; background: var(--preto); color: #fff; font: 700 .74rem var(--titulo); letter-spacing: .14em; padding: 10px 0; }
.ticker .track { display: inline-block; animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
html[data-theme="halloween"] .hero, html[data-theme="black-friday"] .hero { background-color: var(--preto); }

/* a página inteira muda de leve */
html[data-theme]:not([data-theme=""]) ::selection { background: var(--azul-claro); color: #fff; }
html[data-theme]:not([data-theme=""]) .sec-title::after { height: 16px; border-radius: 0; background: var(--rule-img, none) repeat-x left center / 26px 16px; }
.card .ph::before, .rodape::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--deco-h, 0px); background: var(--deco-img, none) repeat-x left top / var(--deco-size, auto); z-index: 2; pointer-events: none; }
html[data-corner="1"] .card .ph::before { left: auto; width: 54px; height: 54px; background-repeat: no-repeat; background-position: right top; }
html[data-corner="1"] .rodape::before { display: none; }
.rodape { position: relative; }
.card .ph { overflow: hidden; }

/* controles */
#fx-toggle { position: fixed; left: 12px; bottom: 12px; z-index: 25; border: 1.5px solid var(--linha); background: #fff; color: var(--azul-profundo); border-radius: 999px; padding: 8px 14px; font: 600 .78rem var(--texto); cursor: pointer; min-height: 36px; }
#fx-toggle[aria-pressed="false"] { color: var(--cinza); }
@media (max-width: 720px) { body:has(.cartbar:not(.hidden)) #fx-toggle { bottom: 76px; } #fx-toggle { padding: 6px 12px; min-height: 32px; font-size: .72rem; } }
.previewbar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--preto); color: #fff; font-size: .82rem; padding: 8px 18px; border-radius: 999px; white-space: nowrap; }
.previewbar a { color: #fff; margin-left: 8px; }

html.no-fx .hero *, html.no-fx .garland *, html.no-fx .hang, html.no-fx .spider, html.no-fx .ticker .track { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hero *, .garland *, .hang, .spider, .ticker .track { animation: none !important; } }

@media (max-width: 720px) {
  .sm-hide { display: none; }
  .hero:has(.hangers) { padding-top: 104px; }
  .hero-mark.scene { max-width: 130px; }
  .web { width: 90px; }
}

/* painel: miniaturas */
.tprev { height: 132px; display: grid; place-items: center; overflow: hidden; position: relative; }
.tscene svg { width: 124px; height: 124px; display: block; }
.tact { display: flex; gap: 6px; flex-wrap: wrap; }

/* =================== elementos ilustrados das datas =================== */
.hero-art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: end; overflow: visible; }
.ha { position: absolute; display: block; height: auto; animation: print 1.7s steps(22) both, bob 7s ease-in-out 2s infinite; }
.ha.main { width: 74%; left: 13%; top: 14%; animation-delay: .1s, 2s; }
.ha.s1 { width: 40%; right: -2%; top: 0; animation-delay: .7s, 2.6s; }
.ha.s2 { width: 36%; left: -2%; bottom: 0; animation-delay: 1.1s, 3.1s; }
@keyframes print { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bob { 50% { transform: translateY(-7px); } }
.card .ph img.themed { width: 62%; height: auto; opacity: .95; }
.tel { width: 112px; height: 112px; display: block; }
.hang img { display: block; height: auto; }
@media (max-width: 720px) {
  .hero-art { max-width: 230px; justify-self: start; }
  .ha.s2 { display: none; }
}
html.no-fx .ha { animation: none !important; clip-path: none; }
@media (prefers-reduced-motion: reduce) { .ha { animation: none !important; clip-path: none; } }

/* =================== tema escuro (Halloween e Black Friday) =================== */
html.dark {
  color-scheme: dark;
  --creme: #0b0e13; --branco: #121923; --tinta: #e8eef5; --cinza: #9aa7b5; --linha: #243246;
  --azul-profundo: #86b6e0; --azul-noturno: #b2cee9; --azul-medio: #86b6e0; --azul-claro: #5b92c2; --azul-gelo: #1a2431;
}
html.dark.pal-red {
  --linha: #3a2227; --azul-profundo: #d9625a; --azul-noturno: #eeb2ab; --azul-medio: #d9625a; --azul-claro: #d9625a; --azul-gelo: #241619; --vermelho: #a3302f;
}
html.dark .btn:not(.ghost):not(.wa):not(.outline-light):not(.danger) { color: #0b0e13; }
html.dark .btn.ghost { color: var(--azul-profundo); }
html.dark .chip[aria-pressed="true"], html.dark .seg button[aria-selected="true"], html.dark .cartbar, html.dark .toast,
html.dark .steps li::before { color: #0b0e13; }
html.dark .rodape { background: #06080b; }
html.dark .hero { background-color: var(--preto); }
html.dark .price.promo { color: #eeb2ab; }
html.dark .card:hover { border-color: var(--azul-claro); }
html.dark .previewbar { background: #fff; color: #0b0e13; } html.dark .previewbar a { color: #0b0e13; }
html.dark #fx-toggle { background: var(--branco); color: var(--azul-profundo); }
html.dark .demo { background: #3a3210; color: #f2e7a8; }
html.dark .err { background: #3a1f23; color: #f3b3ad; }
html.dark .okmsg { background: #173326; color: #9fe0bd; }

/* cabeçalho: ícones e logo que não encolhe */
.top .brand, .top img.logo { flex: none; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 720px) {
  .top .wrap { gap: 8px; }
  .top img.logo { height: 42px; margin-left: -14px; }
  #open-account, .cart-btn { padding: 0 12px; min-width: 46px; }
  #open-account .lbl, .cart-btn .lbl { display: none; }
  .cart-btn { margin-left: 0; }
}

/* logo: completa no desktop; compacta (sem a assinatura "impressão 3D", ilegível em tamanho pequeno) no celular */
.top img.logo-compact { display: none; }
@media (max-width: 720px) {
  .top img.logo-full { display: none; }
  .top img.logo-compact { display: block; }
  .top .wrap { min-height: 72px; }
}
.nav a { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 721px) {
  .top img.logo { height: 64px; margin-left: -23px; }
  .nav a { padding: 10px 9px; }
  .top .wrap { gap: 12px; }
}

/* rodapé: contatos com ícones */
#contact { display: flex; align-items: center; gap: 12px; }
.ct-label { font: 600 .85rem var(--titulo); color: #fff; letter-spacing: .04em; }
.ct-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); color: #fff; transition: background .15s, color .15s, border-color .15s; }
.ct-ic .ico { width: 24px; height: 24px; }
.ct-ic:hover { background: #fff; color: var(--azul-profundo); border-color: #fff; }

/* aviso de pedido aguardando pagamento */
.pending { background: var(--azul-profundo); color: #fff; font-size: .92rem; }
.pending .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.pending .pact { display: inline-flex; align-items: center; gap: 6px; }
.pending .x { color: #fff; width: 36px; height: 36px; }
html.dark .pending { background: var(--azul-gelo); color: var(--tinta); }
html.dark .pending .x { color: var(--tinta); }

/* rodapé: link legal */
.rodape .legal { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: .88rem; }
.rodape .legal a { color: #cfe0f1; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin: 0 0 14px; font-weight: 400; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--azul-profundo); flex: none; }