/* ── Extras da loja: faixa de aviso, mascote (espiadinha, pagamento, entrega, 404) ───────────────── */

/* faixa de aviso no topo (Painel → Aparência) */
.announce { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 46px 9px 16px; text-align: center; font-size: .86rem; font-weight: 500; line-height: 1.35; color: #fff; background: var(--ann, var(--blue)); background: linear-gradient(90deg, var(--ann, var(--blue)), color-mix(in srgb, var(--ann, var(--blue)) 58%, #000)); box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .7); }
.announce .ann-ico { display: inline-flex; flex-shrink: 0; opacity: .95; }
.announce .ann-txt { min-width: 0; overflow-wrap: anywhere; }
.announce .ann-go { flex-shrink: 0; padding: 4px 13px; border-radius: 999px; font-weight: 700; font-size: .78rem; color: #fff; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .35); transition: background .2s; white-space: nowrap; }
.announce .ann-go:hover { background: rgba(255, 255, 255, .36); }
.announce .ann-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #fff; opacity: .8; }
.announce .ann-x:hover { opacity: 1; background: rgba(255, 255, 255, .16); }
@media (max-width: 560px) { .announce { font-size: .8rem; padding: 8px 40px 8px 12px; flex-wrap: wrap; gap: 6px 10px; } .announce .ann-ico { display: none; } }

/* mascote "espiando" de trás da borda da tela */
.mascot-peek { position: fixed; bottom: 0; z-index: 800; width: clamp(118px, 13vw, 184px); pointer-events: none; transform: translateY(104%); transition: transform .75s cubic-bezier(.2, 1.25, .3, 1); will-change: transform; }
.mascot-peek.side-l { left: clamp(8px, 3vw, 44px); }
.mascot-peek.side-r { right: clamp(84px, 9vw, 124px); }
body.has-install .mascot-peek { bottom: 54px; }
.mascot-peek.in { transform: translateY(var(--hide, 38%)); }
.mascot-peek.out { transform: translateY(106%); transition: transform .5s cubic-bezier(.6, 0, .9, .5); }
.mp-img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 -6px 22px rgba(var(--blue-rgb), .6)); -webkit-tap-highlight-color: transparent; }
.mascot-peek.in .mp-img { animation: mpWobble 2.6s ease-in-out .45s infinite; }
.mascot-peek.boop .mp-img { animation: mpBoop .5s ease both; }
@keyframes mpWobble { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.6deg) translateY(-5px); } }
@keyframes mpBoop { 0% { transform: scale(1); } 30% { transform: scale(1.12, .9) rotate(-4deg); } 60% { transform: scale(.96, 1.06) rotate(3deg); } 100% { transform: scale(1); } }
.mp-bubble, .pm-bubble { position: absolute; z-index: 2; max-width: min(230px, 60vw); padding: 9px 13px; border-radius: 16px; background: #fff; color: #0c1330; font-size: .82rem; font-weight: 600; line-height: 1.3; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--blue-rgb), .35); opacity: 0; transform: scale(.7) translateY(8px); transform-origin: 20% 100%; transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.4, .3, 1); pointer-events: none; }
.mp-bubble::after, .pm-bubble::after { content: ''; position: absolute; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.mp-bubble.show, .pm-bubble.show { opacity: 1; transform: none; }
.mascot-peek .mp-bubble { bottom: calc(100% - 2px); width: max-content; }
.mascot-peek.side-l .mp-bubble { left: 58%; } .mascot-peek.side-l .mp-bubble::after { left: 18px; }
.mascot-peek.side-r .mp-bubble { right: 58%; transform-origin: 80% 100%; } .mascot-peek.side-r .mp-bubble::after { right: 18px; }
@media (max-width: 640px) { .mascot-peek { width: 112px; } .mascot-peek.side-r { right: 84px; } .mp-bubble { font-size: .76rem; padding: 8px 11px; } }

/* mascote na tela de pagamento: espia por cima do cartão do PIX */
.pixpay-wrap { position: relative; margin-top: 160px; }
.pay-mascot { position: absolute; right: 18px; bottom: calc(100% - 1px); width: 214px; z-index: 1; pointer-events: none; }
.pm-clip { position: relative; height: 150px; clip-path: inset(-80px -80px 0 -80px); } /* só o fundo é cortado (ele "apoia" no cartão); orelhas e braço nunca */
.pm-clip::before { content: ''; position: absolute; left: 50%; top: 0; width: 170px; height: 170px; margin-left: -85px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--blue-rgb), .5), rgba(var(--cyan-rgb), .1) 42%, transparent 68%); animation: pmAura 3s ease-in-out infinite; pointer-events: none; }
@keyframes pmAura { 50% { transform: scale(1.1); opacity: .7; } }
.pm-follow { position: absolute; left: 0; top: 0; width: 100%; transform: translate(var(--mx, 0px), 0) rotate(var(--mr, 0deg)); transform-origin: 50% 100%; transition: transform .25s ease-out; }
.pm-img { pointer-events: auto; cursor: pointer; width: 100%; height: auto; display: block; transform-origin: 50% 100%; animation: pmEnter 1s cubic-bezier(.2, 1.35, .3, 1) .55s both, pmIdle 3.6s ease-in-out 1.8s infinite; filter: drop-shadow(0 -4px 16px rgba(var(--blue-rgb), .5)); }
@keyframes pmEnter { from { transform: translateY(105%) rotate(6deg); } to { transform: none; } }
@keyframes pmIdle { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(1.4deg); } }
.pm-bubble { right: calc(100% - 8px); bottom: 92px; width: max-content; transform-origin: 90% 100%; }
.pm-bubble::after { right: -5px; bottom: 14px; }
.pay-mascot.cheer .pm-img { animation: pmCheer 1.1s cubic-bezier(.3, 1.4, .4, 1) both, pmIdle 3.6s ease-in-out 1.2s infinite; }
@keyframes pmCheer { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(18px) scale(1.04, .94); } 55% { transform: translateY(-34px) rotate(-6deg) scale(.98, 1.05); } 80% { transform: translateY(2px) rotate(3deg); } 100% { transform: none; } }
.pay-mascot.sad .pm-img { animation: none; transform: translateY(108%); transition: transform .7s ease-in; }
.pm-spark { position: absolute; width: 10px; height: 10px; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 28%, var(--cyan) 30% 60%, transparent 62%); border-radius: 50%; }
.pay-mascot.cheer .pm-spark { animation: pmSpark 1.1s ease-out both; }
.pm-spark:nth-of-type(1) { left: 6%; top: 30%; --dx: -26px; --dy: -34px; } .pm-spark:nth-of-type(2) { left: 22%; top: 8%; --dx: -14px; --dy: -42px; animation-delay: .08s !important; }
.pm-spark:nth-of-type(3) { left: 48%; top: 0; --dx: 0; --dy: -46px; animation-delay: .04s !important; } .pm-spark:nth-of-type(4) { left: 72%; top: 8%; --dx: 16px; --dy: -42px; animation-delay: .1s !important; }
.pm-spark:nth-of-type(5) { left: 90%; top: 30%; --dx: 28px; --dy: -32px; animation-delay: .06s !important; } .pm-spark:nth-of-type(6) { left: 60%; top: 40%; --dx: 22px; --dy: -22px; animation-delay: .14s !important; }
@keyframes pmSpark { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5); } }
@media (max-width: 640px) { .pixpay-wrap { margin-top: 128px; } .pay-mascot { width: 168px; right: 8px; } .pm-clip { height: 118px; } .pm-bubble { font-size: .74rem; padding: 7px 10px; max-width: 150px; bottom: 70px; } }

/* mascote comemorando na faixa "Pedido concluído!" */
.od-done.has-mascot { position: relative; overflow: visible; margin-top: 58px; padding-right: 168px; min-height: 92px; }
.od-done-mascot { position: absolute; right: 12px; bottom: 0; width: 148px; height: auto; pointer-events: none; transform-origin: 50% 100%; animation: pmEnter .9s cubic-bezier(.2, 1.35, .3, 1) .35s both, pmIdle 3.4s ease-in-out 1.4s infinite; filter: drop-shadow(0 -4px 16px rgba(var(--blue-rgb), .5)); }
@media (max-width: 640px) { .od-done.has-mascot { padding-right: 112px; margin-top: 44px; } .od-done-mascot { width: 104px; right: 6px; } }

/* 404 */
.m404 { position: relative; width: min(230px, 62vw); height: auto; margin: -128px auto 6px; pointer-events: none; animation: pmEnter 1s cubic-bezier(.2, 1.35, .3, 1) .3s both, pmIdle 3.6s ease-in-out 1.5s infinite; filter: drop-shadow(0 -4px 18px rgba(var(--blue-rgb), .5)); transform-origin: 50% 100%; }

/* só quando o painel manda respeitar "reduzir movimento" (html.respect-motion): mascote parado e sem espiadinha */
@media (prefers-reduced-motion: reduce) {
  html.respect-motion .mascot-peek { display: none; }
  html.respect-motion .pm-img, html.respect-motion .od-done-mascot, html.respect-motion .m404, html.respect-motion .pm-clip::before, html.respect-motion .pm-spark { animation: none !important; }
  html.respect-motion .pm-follow { transition: none; transform: none; }
}

/* ── Vitrine em "gift cards": a imagem vertical é o próprio quadrante (sem nome embaixo) ───────────── */
.tile.tile-card { padding: 0; background: none; border: 0; border-radius: 18px; display: block; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .85); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.tile.tile-card:hover { border: 0; transform: translateY(-5px); box-shadow: 0 24px 54px -16px rgba(var(--blue-rgb), .75), 0 0 0 1px rgba(var(--blue2-rgb), .55); }
.tile-card .tile-img { aspect-ratio: 600 / 988; border-radius: 18px; background: var(--surface-2); }
.tile-card .tile-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-card:hover .tile-img > img { transform: scale(1.035); }
.tile-card .tile-cart { right: 10px; top: 10px; }
/* cartão montado automaticamente quando o produto ainda não tem imagem de card */
.gc-gen .tile-img { display: flex; flex-direction: column; background: #fff; }
.gc-gen .gc-top { position: relative; flex: 0 0 58%; display: flex; align-items: center; justify-content: center; padding: 22% 10% 8%; text-align: center; color: #fff; background: radial-gradient(120% 90% at 85% 0%, rgba(var(--cyan-rgb), .55), transparent 55%), linear-gradient(160deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 35%, #05070f) 100%); }
.gc-gen .gc-top::before { content: ''; position: absolute; top: 7%; left: 50%; width: 46%; height: 6.5%; margin-left: -23%; border-radius: 999px; background: #fff; }
.gc-gen .gc-top b { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(.95rem, 1.7vw, 1.45rem); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 3px 16px rgba(0, 0, 0, .45); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gc-gen .gc-bot { position: relative; flex: 1; min-height: 0; background: #fff; color: #9aa6c0; display: grid; place-items: center; }
.gc-gen .gc-bot img { position: absolute; left: 50%; top: 50%; height: 74%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); object-fit: cover; border-radius: 22%; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45); }
@media (max-width: 700px) { .tile.tile-card { border-radius: 14px; } .tile-card .tile-img { border-radius: 14px; } .tile-card .tile-cart { width: 34px; height: 34px; right: 6px; top: 6px; } .gc-gen .gc-top b { font-size: clamp(.7rem, 3.4vw, .95rem); } }

/* hover: o card gerado pela loja não pode "dar zoom" no ícone (ele fica centralizado por transform) */
.gc-gen:hover .tile-img img, .gc-gen .tile-img img { transition: none; }
.gc-gen:hover .gc-bot img { transform: translate(-50%, -50%); }
.gc-gen:hover .tile-img::after { transform: translateX(-120%); }

/* faixa de logos colorida (Painel → Aparência → Extras): sem o filtro cinza; um contorno claro ajuda as marcas escuras (Disney+, Star+, discovery+) */
.logo-strip.colored img { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 7px rgba(255, 255, 255, .22)); opacity: .96; }
.logo-strip.colored:hover img { opacity: 1; }

/* balão do WhatsApp (suporte por ticket desligado) */
.fab.fab-wa { background: transparent; box-shadow: none; padding: 0; }
.fab.fab-wa::before { border-color: rgba(37, 211, 102, .75); }
.fab.fab-wa::after { display: none; }
.fab.fab-wa .wa-ico { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
.fab.fab-wa:hover { transform: translateY(-3px) scale(1.08); }
.fab.fab-wa .fab-label { background: #fff; color: #0b3d20; border-color: transparent; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); }


.rev-ava.has-img { padding: 0; overflow: hidden; background: var(--surface-2); }
.rev-ava.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }