/* Camada genérica dos temas sazonais (gerada a partir das classes azuis do site).
   Só vale quando um tema que NÃO é o pacote de Natal está no ar: <body class="tema-generico">. */
body.tema-generico{--t-50:color-mix(in srgb,var(--tema) 7%,#fff);--t-100:color-mix(in srgb,var(--tema) 15%,#fff);--t-200:color-mix(in srgb,var(--tema) 30%,#fff);--t-300:color-mix(in srgb,var(--tema) 50%,#fff);--t-400:color-mix(in srgb,var(--tema) 80%,#fff);--t-600:color-mix(in srgb,var(--tema) 88%,#000);--t-700:color-mix(in srgb,var(--tema) 74%,#000);--t-800:color-mix(in srgb,var(--tema) 60%,#000);--t-900:color-mix(in srgb,var(--tema) 46%,#000)}
body.tema-generico .border-sky-100{--tw-border-opacity:1;border-color:var(--t-100)}
body.tema-generico .border-sky-200{--tw-border-opacity:1;border-color:var(--t-200)}
body.tema-generico .border-sky-50{--tw-border-opacity:1;border-color:var(--t-50)}
body.tema-generico .border-sky-500{--tw-border-opacity:1;border-color:var(--tema)}
body.tema-generico .border-sky-600{--tw-border-opacity:1;border-color:var(--t-600)}
body.tema-generico .bg-sky-100{--tw-bg-opacity:1;background-color:var(--t-100)}
body.tema-generico .bg-sky-400{--tw-bg-opacity:1;background-color:var(--t-400)}
body.tema-generico .bg-sky-50{--tw-bg-opacity:1;background-color:var(--t-50)}
body.tema-generico .bg-sky-50\/40{background-color:color-mix(in srgb,var(--t-50) 40%,transparent)}
body.tema-generico .bg-sky-50\/50{background-color:color-mix(in srgb,var(--t-50) 50%,transparent)}
body.tema-generico .bg-sky-500{--tw-bg-opacity:1;background-color:var(--tema)}
body.tema-generico .bg-sky-500\/10{background-color:color-mix(in srgb,var(--tema) 10%,transparent)}
body.tema-generico .bg-sky-600{--tw-bg-opacity:1;background-color:var(--t-600)}
body.tema-generico .bg-sky-700{--tw-bg-opacity:1;background-color:var(--t-700)}
body.tema-generico .bg-sky-800{--tw-bg-opacity:1;background-color:var(--t-800)}
body.tema-generico .bg-sky-900{--tw-bg-opacity:1;background-color:var(--t-900)}
body.tema-generico .from-sky-50{--tw-gradient-from:var(--t-50) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
body.tema-generico .from-sky-600{--tw-gradient-from:var(--t-600) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
body.tema-generico .to-sky-50{--tw-gradient-to:var(--t-50) var(--tw-gradient-to-position)}
body.tema-generico .text-sky-100{--tw-text-opacity:1;color:var(--t-100)}
body.tema-generico .text-sky-300{--tw-text-opacity:1;color:var(--t-300)}
body.tema-generico .text-sky-400{--tw-text-opacity:1;color:var(--t-400)}
body.tema-generico .text-sky-50{--tw-text-opacity:1;color:var(--t-50)}
body.tema-generico .text-sky-500{--tw-text-opacity:1;color:var(--tema)}
body.tema-generico .text-sky-600{--tw-text-opacity:1;color:var(--t-600)}
body.tema-generico .text-sky-700{--tw-text-opacity:1;color:var(--t-700)}
body.tema-generico .accent-sky-600{accent-color:var(--t-600)}
body.tema-generico .shadow-sky-100{--tw-shadow-color:var(--t-100);--tw-shadow:var(--tw-shadow-colored)}
body.tema-generico .shadow-sky-100\/50{--tw-shadow-color:color-mix(in srgb,var(--t-100) 50%,transparent);--tw-shadow:var(--tw-shadow-colored)}
body.tema-generico .shadow-sky-200{--tw-shadow-color:var(--t-200);--tw-shadow:var(--tw-shadow-colored)}
body.tema-generico .shadow-sky-600\/20{--tw-shadow-color:color-mix(in srgb,var(--t-600) 20%,transparent);--tw-shadow:var(--tw-shadow-colored)}
body.tema-generico .hover\:border-sky-400:hover{--tw-border-opacity:1;border-color:var(--t-400)}
body.tema-generico .hover\:border-sky-500\/30:hover{border-color:color-mix(in srgb,var(--tema) 30%,transparent)}
body.tema-generico .hover\:bg-sky-100:hover{--tw-bg-opacity:1;background-color:var(--t-100)}
body.tema-generico .hover\:bg-sky-50:hover{--tw-bg-opacity:1;background-color:var(--t-50)}
body.tema-generico .hover\:bg-sky-500:hover{--tw-bg-opacity:1;background-color:var(--tema)}
body.tema-generico .hover\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:var(--t-600)}
body.tema-generico .hover\:bg-sky-700:hover{--tw-bg-opacity:1;background-color:var(--t-700)}
body.tema-generico .hover\:bg-sky-800:hover{--tw-bg-opacity:1;background-color:var(--t-800)}
body.tema-generico .hover\:bg-sky-900:hover{--tw-bg-opacity:1;background-color:var(--t-900)}
body.tema-generico .hover\:text-sky-500:hover{--tw-text-opacity:1;color:var(--tema)}
body.tema-generico .hover\:text-sky-600:hover{--tw-text-opacity:1;color:var(--t-600)}
body.tema-generico .hover\:text-sky-700:hover{--tw-text-opacity:1;color:var(--t-700)}
body.tema-generico .focus\:border-sky-400:focus{--tw-border-opacity:1;border-color:var(--t-400)}
body.tema-generico .focus\:border-sky-500:focus{--tw-border-opacity:1;border-color:var(--tema)}
body.tema-generico .group:hover .group-hover\:bg-sky-500{--tw-bg-opacity:1;background-color:var(--tema)}
body.tema-generico .group:hover .group-hover\:text-sky-400{--tw-text-opacity:1;color:var(--t-400)}
body.tema-generico .group:hover .group-hover\:text-sky-500{--tw-text-opacity:1;color:var(--tema)}
body.tema-generico .group:hover .group-hover\:text-sky-600{--tw-text-opacity:1;color:var(--t-600)}
body.tema-generico .has-\[\:checked\]\:border-sky-400:has(:checked){--tw-border-opacity:1;border-color:var(--t-400)}
body.tema-generico .has-\[\:checked\]\:bg-sky-50:has(:checked){--tw-bg-opacity:1;background-color:var(--t-50)}
/* componentes do site com azul fixo */
body.tema-generico .chip-opcao input:checked+span{border-color:var(--t-600);background:var(--t-100);color:var(--t-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--tema) 15%,transparent)}
body.tema-generico .chip-opcao:hover span,body.tema-generico .qty-preset:hover{border-color:var(--t-300)}
body.tema-generico .qty-preset.ativo{background:var(--t-600);border-color:var(--t-600)}
body.tema-generico .modern-input:focus{border-color:var(--tema);box-shadow:0 12px 20px -5px color-mix(in srgb,var(--tema) 15%,transparent)}
body.tema-generico .form-input:focus{border-color:var(--tema);box-shadow:0 0 0 4px color-mix(in srgb,var(--tema) 10%,transparent)}
body.tema-generico .footer-link::after{background-color:var(--tema)}
body.tema-generico .footer-link:hover{color:var(--tema)}
body.tema-generico .discount-progress-bar{background:linear-gradient(90deg,var(--tema),#10b981)}
body.tema-generico .thumb-active{border-color:var(--t-400)!important}
body.tema-generico #hamburger-btn.active .line-1,body.tema-generico #hamburger-btn.active .line-3{background-color:var(--tema)}
body.tema-generico header.glass-fixed{border-bottom:3px solid var(--tema)!important}
/* enfeite no logo */
.tema-logo{position:relative;display:inline-block}
.tema-enfeite{position:absolute;width:46px;height:40px;left:-16px;top:-20px;transform:rotate(-18deg);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
#wa-float .tema-enfeite{left:auto;right:-8px;top:-16px;transform:rotate(14deg);width:40px;height:34px}
@media(max-width:768px){.tema-enfeite{width:36px;height:30px;left:-12px;top:-15px}}
/* efeitos */
#tema-efeito{position:fixed;inset:0;pointer-events:none;z-index:9000}
#tema-efeito.desligado{display:none}
#tema-faixa{position:fixed;left:0;right:0;top:0;height:46px;pointer-events:none;z-index:10001;overflow:hidden}
#tema-faixa svg{width:100%;height:46px;display:block}
#tema-faixa .bandeira{transform-origin:top center;animation:tema-balanca 3.2s ease-in-out infinite}
@keyframes tema-balanca{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
#tema-botao{position:fixed;left:16px;bottom:18px;z-index:9998;width:44px;height:44px;border-radius:99px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 8px 20px -6px rgba(0,0,0,.25);font-size:20px;display:grid;place-items:center;cursor:pointer}
body.com-sticky #tema-botao{bottom:92px}
@media(prefers-reduced-motion:reduce){#tema-efeito,#tema-faixa .bandeira{animation:none!important}}
/* ===================== Pacotes completos dos temas ===================== */
body.tema-generico .tema-script,
body.tema-generico h2 .italic,
body.tema-generico .hero-title h1 .tema-script,
body.tema-generico .hero-title h2 .tema-script{font-family:var(--tema-fonte);font-style:normal;letter-spacing:0}
body.tema-generico .hero-title .tema-script{display:inline-block;color:var(--t-200);text-shadow:0 4px 18px rgba(0,0,0,.25)}
body.tema-generico .hero-footer{background:color-mix(in srgb,var(--tema) 30%,#0b1120)!important}
@media (max-width:768px){body.tema-generico .hero-footer{background:color-mix(in srgb,var(--tema) 30%,#0b1120)!important}}
body.tema-generico .hero-progress-bar{background:repeating-linear-gradient(135deg,var(--tema) 0 10px,#fff 10px 20px)!important;background-size:28px 100%!important;animation:tema-listras 1s linear infinite!important}
@keyframes tema-listras{to{background-position:28px 0}}
body.tema-generico .hero-dot.active{background:var(--t-200)}
body.tema-generico .tema-secao-escura{background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--tema) 55%,#0b1120) 0%,color-mix(in srgb,var(--tema) 22%,#05080f) 75%)!important;color:#e2e8f0}
body.tema-generico .tema-secao-escura .bg-slate-800{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
body.tema-generico footer.bg-footer-gradient{background:radial-gradient(circle at top right,color-mix(in srgb,var(--tema) 40%,#0f172a) 0%,#0f172a 100%)}

/* faixa com contagem regressiva logo abaixo do banner */
.tema-contagem{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--tema) 0%,color-mix(in srgb,var(--tema) 78%,#000) 60%,color-mix(in srgb,var(--tema) 55%,#000) 100%);text-shadow:0 1px 2px rgba(0,0,0,.2)}
.tema-contagem::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px)}
.tema-contagem-fundo{position:absolute;inset:0;pointer-events:none}
.tema-contagem-fundo span{position:absolute;font-size:22px;opacity:.22;animation:tema-flutua 5s ease-in-out infinite alternate}
@keyframes tema-flutua{to{transform:translateY(-10px) rotate(12deg)}}
.tema-dias{flex-shrink:0;width:92px;height:92px;border-radius:999px;background:#fff;color:var(--tema);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.35);position:relative;animation:tema-pulsa 2.4s ease-in-out infinite}
.tema-dias b{font-family:var(--tema-fonte);font-size:36px;line-height:1}
.tema-dias small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--t-700)}
.tema-dias-icone b{font-size:42px}
@keyframes tema-pulsa{50%{transform:scale(1.06)}}
.tema-contagem-botao{flex-shrink:0;background:#fff;color:var(--t-700);padding:14px 26px;border-radius:16px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;box-shadow:0 10px 25px -8px rgba(0,0,0,.35);transition:transform .2s}
.tema-contagem-botao:hover{transform:translateY(-2px)}

/* emoji nos cards de produto (como o presente do Natal) */
.tema-card-emoji{position:absolute;right:14px;top:-14px;z-index:30;font-size:30px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));animation:tema-balanca-emoji 3.5s ease-in-out infinite;pointer-events:none}
@keyframes tema-balanca-emoji{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-3px)}}
body.tema-pacote .product-card:hover{border-color:var(--t-200)}

/* decorações do topo */
#tema-topo{position:fixed;left:0;right:0;z-index:10001;pointer-events:none;overflow:hidden}
.tema-varal{display:flex;justify-content:space-around;align-items:flex-start;height:48px;position:relative}
.tema-varal::before{content:'';position:absolute;left:-2%;right:-2%;top:2px;height:24px;border-top:2px solid rgba(120,80,40,.45);border-radius:50%}
.tema-varal span{font-size:22px;margin-top:6px;transform-origin:top center;animation:tema-balanca 3s ease-in-out infinite}
.tema-varal span:nth-child(odd){margin-top:12px;animation-duration:3.6s}
.tema-luzes{display:flex;justify-content:space-around;height:30px;position:relative}
.tema-luzes::before{content:'';position:absolute;left:0;right:0;top:2px;height:14px;border-top:2px solid rgba(0,0,0,.25);border-radius:50%}
.tema-luzes i{width:10px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;margin-top:8px;animation:tema-pisca 1.6s ease-in-out infinite}
.tema-luzes i:nth-child(3n){animation-delay:.5s}.tema-luzes i:nth-child(3n+1){animation-delay:1s}
@keyframes tema-pisca{0%,100%{opacity:1;filter:drop-shadow(0 0 6px currentColor)}50%{opacity:.35;filter:none}}
.tema-serpentinas svg{width:100%;height:54px;display:block}
.tema-serpentinas path{animation:tema-ondula 4s ease-in-out infinite alternate}
@keyframes tema-ondula{to{transform:translateY(3px)}}
.tema-letreiro{background:#0a0a0a;color:#facc15;height:30px;display:flex;align-items:center;overflow:hidden;border-bottom:2px solid #facc15}
.tema-letreiro div{white-space:nowrap;font-family:var(--tema-fonte);letter-spacing:3px;font-size:14px;animation:tema-rola 28s linear infinite;padding-left:100%}
@keyframes tema-rola{to{transform:translateX(-100%)}}

/* desfile que atravessa a tela (como o trenó do Natal) */
#tema-desfile{position:fixed;left:-420px;top:140px;z-index:9001;pointer-events:none;font-size:34px;white-space:nowrap;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));will-change:transform}
#tema-desfile.voa{animation:tema-voa 14s linear forwards}
#tema-desfile.pula span{display:inline-block;animation:tema-pula .6s ease-in-out infinite alternate}
#tema-desfile.pula span:nth-child(2n){animation-delay:.3s}
@keyframes tema-voa{0%{transform:translate(0,0)}25%{transform:translate(calc(25vw + 420px),-25px)}50%{transform:translate(calc(50vw + 420px),12px)}75%{transform:translate(calc(75vw + 420px),-20px)}100%{transform:translate(calc(100vw + 840px),0)}}
@keyframes tema-pula{to{transform:translateY(-14px)}}
@media (max-width:768px){#tema-desfile{font-size:26px;top:110px}.tema-varal span{font-size:17px}.tema-contagem-fundo span{font-size:16px}.tema-dias{width:78px;height:78px}.tema-dias b{font-size:30px}}
@media (prefers-reduced-motion:reduce){#tema-desfile,.tema-varal span,.tema-luzes i,.tema-letreiro div,.tema-card-emoji,.tema-dias,.tema-contagem-fundo span{animation:none!important}}
#tema-topo .bandeira{transform-origin:top center;animation:tema-balanca 3.2s ease-in-out infinite}
