/* Brilho roxo de fundo, bem sutil — dois glows estáticos, sem animação. */
.ambient-bg {
position: fixed;
inset: 0;
z-index: -10;
pointer-events: none;
background:
radial-gradient(85% 65% at 78% 0%, hsl(var(--primary) / 0.45), transparent 75%),
radial-gradient(55% 42% at 78% 12%, hsl(var(--secondary) / 0.3), transparent 70%),
linear-gradient(180deg, hsl(var(--primary) / 0.1), transparent 55%);
}
/* Faixa "mais vendidos" com rolagem contínua pra esquerda */
.marquee-strip {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
height: 2.25rem;
background: hsl(160 84% 39%);
box-shadow: 0 0 20px -4px hsl(160 84% 39% / 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.marquee-strip-track {
display: flex;
width: max-content;
animation: marquee-strip-scroll 16s linear infinite;
}
.marquee-strip-group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0.85rem;
padding-right: 0.85rem;
}
.marquee-strip-group span:not(.marquee-strip-sep) {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.marquee-strip-sep {
font-size: 0.6rem;
color: #fff;
opacity: 0.75;
}
@keyframes marquee-strip-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (min-width: 640px) {
.marquee-strip {
height: 2.5rem;
}
.marquee-strip-group span:not(.marquee-strip-sep) {
font-size: 0.8rem;
}
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
@keyframes fade-in {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
@keyframes fade-out {
from {
background-color: rgba(0, 0, 0, 0.8);
}
to {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes slide-in {
from {
transform: translateX(500px);
}
to {
transform: translateX(0px);
}
}
@keyframes slide-out {
from {
transform: translateX(0px);
}
to {
transform: translateX(500px);
}
}
body.cart-open {
overflow: hidden;
padding-right: var(--scrollbar-width, 0px);
}
#cart-drawer[data-state="open"] {
animation: fade-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
#cart-drawer[data-state="open"] > div {
animation: slide-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] > div {
animation: slide-out 0.4s forwards;
}
.dialog[data-state="open"] {
animation: fade-in 0.4s forwards;
}
.dialog[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
.dialog[data-state="open"] > div {
animation: dialog-in 0.2s forwards;
}
.dialog[data-state="closed"] > div {
animation: dialog-out 0.2s forwards;
}
@keyframes dialog-in {
from {
opacity: 0;
scale: 50%;
}
to {
opacity: 1;
scale: 100%;
}
}
@keyframes dialog-out {
from {
opacity: 1;
scale: 100%;
}
to {
opacity: 0;
scale: 50%;
}
}
/* Animated conic-gradient border glow. Was copy-pasted into a local <style>
block on roleta.html, fidelidade.html, ranking.html, checkout.html,
package.html and account/affiliate.html — centralized here since it's
byte-for-byte identical on every page that has it. */
@property --aff-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card-border-glow {
position: relative;
}
.card-border-glow::before {
content: '';
position: absolute;
inset: 0;
padding: 2.5px;
border-radius: inherit;
background: conic-gradient(from var(--aff-angle),
transparent 3%, hsl(var(--primary)) 25%, transparent 47%,
transparent 53%, hsl(var(--primary)) 75%, transparent 97%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
animation: aff-spin 9s linear infinite;
pointer-events: none;
/* Sem isso o Safari iOS as vezes "pisca"/some a borda no meio da
animacao — forca a camada a ficar sempre na GPU, sem recompor do zero. */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Same glow, green, used on the affiliate program pages (package.html and
affiliate.html) — same dedup as .card-border-glow above. */
.affiliate-scan-line {
position: relative;
}
.affiliate-scan-line::before {
content: '';
position: absolute;
inset: 0;
padding: 2.5px;
border-radius: inherit;
background: conic-gradient(from var(--aff-angle),
transparent 3%, #10b981 25%, transparent 47%,
transparent 53%, #10b981 75%, transparent 97%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
animation: aff-spin 9s linear infinite;
pointer-events: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@keyframes aff-spin {
to {
--aff-angle: 360deg;
}
}
.reveal-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.3s ease, transform 0.3s ease;
transition-delay: var(--delay, 0s);
}
.reveal-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.centralcart-content iframe {
aspect-ratio: 16 / 9;
border-radius: 0.5rem;
width: 100%;
height: auto;
}
.custom-bg-mask {
mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}
@keyframes loading {
0% {
left: -50%;
}
to {
left: 100%;
}
}
.detail-dash {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, hsl(var(--foreground) / 0) 0%);
background-position: center bottom;
background-size: 16px;
background-repeat: repeat-x;
width: 100%;
height: 1px;
}
/* Sidebar categories */
.custom-scrollbar::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.no-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: hsl(var(--primary));
border-radius: 0.25rem;
}
.cat-dropdown {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top;
}
.cat-dropdown:not(.hidden) {
animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
#mobile-categories-dropdown:not(.hidden) {
animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInMobile {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mobile-subcategories:not(.hidden) {
animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInSub {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Sidebar categories */
/* Sakura petals. One canvas instead of dozens of nodes, so it stays cheap.
Sits above content but below the navbar (z-20) and the cart drawer (z-50),
and never eats clicks. */
#sakura-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9;
}
/* Faixa no topo do card de produto. Verde de "entrega automática" (TESTE),
com texto escuro para manter contraste AA sobre o verde. */
.card-strip {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 5px;
height: 26px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
background: hsl(160 84% 39%);
color: #052e16;
box-shadow: 0 0 20px -2px hsl(160 84% 39% / 0.9);
}
@media (min-width: 640px) {
.card-strip {
height: 30px;
font-size: 12px;
}
}
/* Purple glow */
.package {
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
a.package {
border-color: hsl(var(--primary) / 0.5) !important;
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.5),
0 10px 34px -12px hsl(var(--primary) / 0.75);
}
a.package:hover {
border-color: hsl(var(--primary) / 0.8) !important;
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.8),
0 12px 44px -8px hsl(var(--primary) / 0.9);
}
.package .btn-primary {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
hsl(var(--primary));
box-shadow: 0 10px 26px -8px hsl(var(--primary) / 0.85);
}
.package:hover .btn-primary {
box-shadow: 0 14px 34px -8px hsl(var(--primary) / 0.95);
}
.package-price {
font-family: 'Kanit', sans-serif;
color: hsl(160 84% 39%);
text-shadow: 0 0 16px hsl(160 84% 39% / 0.55);
}
/* The native dropdown popup is painted by the OS. Without an explicit
background the options fall back to a white popup, and the inherited
near-white text becomes unreadable. */
select option,
select optgroup {
background-color: rgb(var(--muted-solid));
color: rgb(var(--foreground));
}
/* Hero offer — plain type on the page, deliberately not a card. */
.hero-offer {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
padding: 1.75rem 0;
}
@media (min-width: 900px) {
.hero-offer {
grid-template-columns: 1.1fr 0.9fr;
padding: 3rem 0;
}
}
.hero-offer-title {
font-size: clamp(2.1rem, 5vw, 3.6rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.02em;
}
.hero-offer-highlight {
display: block;
color: #10b981;
}
/* Letters blow in from the left, staggered, as if carried by the wind. */
.hero-offer-title .hero-word {
display: inline-block;
white-space: nowrap;
}
.hero-offer-title .hero-letter {
display: inline-block;
white-space: pre;
opacity: 0;
animation: hero-wind-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i) * 0.028s);
}
@keyframes hero-wind-in {
from {
opacity: 0;
transform: translate3d(-60px, -14px, 0) rotate(-12deg) scale(0.9);
}
60% {
opacity: 1;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0) scale(1);
}
}
/* The rest of the block drifts in just behind the last letter. */
.hero-offer-sub,
.hero-offer-cta,
.hero-offer-art {
opacity: 0;
animation: hero-drift-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Land just after the last letter settles (36 letters × 0.028s ≈ 1s). */
.hero-offer-sub {
animation-delay: 1.05s;
}
.hero-offer-cta {
animation-delay: 1.2s;
}
.hero-offer-art {
animation-delay: 0.4s;
}
@keyframes hero-drift-in {
from {
opacity: 0;
transform: translate3d(-24px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-offer-title .hero-letter,
.hero-offer-sub,
.hero-offer-cta,
.hero-offer-art {
animation: none;
opacity: 1;
}
}
.hero-offer-sub {
max-width: 30rem;
margin-top: 1rem;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.5);
}
.hero-offer-cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.75rem;
padding: 0 1.75rem;
height: 3.25rem;
border-radius: 999px;
background: hsl(var(--primary));
color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 0 32px -6px hsl(var(--primary) / 0.9);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-offer-cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 44px -4px hsl(var(--primary));
}
/* Fanned card stack on the right */
.hero-offer-art {
position: relative;
display: none;
height: 19rem;
}
@media (min-width: 900px) {
.hero-offer-art {
display: block;
}
}
.hero-offer-card {
position: absolute;
top: 50%;
left: 50%;
width: 11rem;
height: 15rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
}
.hero-offer-card-back {
transform: translate(-50%, -50%) rotate(-14deg) translateX(-5.5rem);
opacity: 0.35;
}
.hero-offer-card-mid {
transform: translate(-50%, -50%) rotate(-7deg) translateX(-2.75rem);
opacity: 0.6;
}
.hero-offer-card-front {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
transform: translate(-50%, -50%) rotate(5deg) translateX(1.5rem);
border-color: hsl(var(--primary) / 0.5);
background: linear-gradient(160deg, hsl(var(--primary) / 0.25), rgba(255, 255, 255, 0.03));
box-shadow: 0 20px 60px -20px hsl(var(--primary) / 0.9);
}
.hero-offer-card-badge {
position: absolute;
top: 0.75rem;
padding: 3px 10px;
border-radius: 999px;
background: hsl(var(--primary));
color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
}
.hero-offer-card-count {
font-size: 4rem;
font-weight: 900;
line-height: 1;
color: hsl(var(--primary));
text-shadow: 0 0 30px hsl(var(--primary) / 0.7);
}
.hero-offer-card-text {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
}
/* Pack progress inside the cart drawer */
.pack-progress {
padding: 0.75rem;
margin-bottom: 0.75rem;
border: 1px solid hsl(var(--primary) / 0.25);
border-radius: var(--radius);
background: hsl(var(--primary) / 0.08);
}
.pack-progress[hidden] {
display: none;
}
.pack-progress-bar {
height: 6px;
margin-top: 0.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.pack-progress-fill {
height: 100%;
width: 0;
border-radius: 999px;
background: hsl(var(--primary));
box-shadow: 0 0 12px hsl(var(--primary));
transition: width 0.35s ease;
}
.pack-progress.is-complete {
border-color: hsl(var(--primary) / 0.6);
}
/* Category picker (stylized wordmark cards) */
.category-picker-head {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
.category-picker-line {
flex: 1;
max-width: 200px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.9));
box-shadow: 0 0 8px hsl(var(--primary) / 0.5);
}
.category-picker-line:last-child {
background: linear-gradient(90deg, hsl(var(--primary) / 0.9), transparent);
}
.category-picker-bar {
flex-shrink: 0;
width: 4px;
height: 1.35rem;
border-radius: 999px;
background: hsl(var(--primary));
box-shadow: 0 0 12px hsl(var(--primary) / 0.7);
}
.category-picker-title {
flex-shrink: 0;
font-size: 1.5rem;
font-weight: 700;
white-space: nowrap;
}
.category-picker-card {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
overflow: hidden;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(160deg, hsl(var(--primary) / 0.28), rgba(255, 255, 255, 0.02) 60%);
box-shadow: 0 10px 34px -14px hsl(var(--primary) / 0.6);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s,
box-shadow 0.3s;
}
.category-picker-card:hover {
transform: translateY(-4px);
border-color: hsl(var(--primary) / 0.5);
box-shadow: 0 18px 48px -14px hsl(var(--primary) / 0.75);
}
.category-picker-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.category-picker-glow {
position: absolute;
inset: 0;
background: radial-gradient(120% 100% at 50% 100%, hsl(var(--primary) / 0.45), transparent 70%);
}
.category-picker-name {
position: relative;
z-index: 1;
padding: 0 0.5rem 0.5rem;
font-family: 'Kanit', sans-serif;
font-size: clamp(0.95rem, 3.6vw, 1.3rem);
font-weight: 800;
text-align: center;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.1;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
}
.category-picker-viewall {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: 3rem;
margin-top: 1rem;
padding: 0 1.75rem;
border-radius: 999px;
border: 1.5px solid #10b981;
background: #0a1f14;
color: #10b981;
font-family: inherit;
font-weight: 700;
font-size: 0.9rem;
white-space: nowrap;
transition: background 0.25s, border-color 0.25s;
}
.category-picker-viewall:hover {
background: #0f2b1c;
border-color: #10b981;
}
/* Site menu drawer */
body.site-menu-open {
overflow: hidden;
}
.site-menu[data-state='open'] .site-menu-backdrop {
animation: fade-in 0.22s forwards;
}
.site-menu[data-state='closed'] .site-menu-backdrop {
animation: fade-out 0.22s forwards;
}
.site-menu[data-state='open'] .site-menu-panel {
animation: site-menu-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.site-menu[data-state='closed'] .site-menu-panel {
animation: site-menu-out 0.22s ease-in forwards;
}
.site-menu-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 1.75rem;
}
.site-menu-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem 0.25rem;
font-weight: 600;
font-size: 1rem;
color: rgb(var(--foreground));
transition: opacity 0.2s;
}
.site-menu-item:hover {
opacity: 0.7;
}
.site-menu-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.55);
}
.site-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
color: rgb(var(--foreground));
transition: opacity 0.2s;
}
.site-menu-close:hover {
opacity: 0.7;
}
.site-menu-footer {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid hsl(var(--primary) / 0.3);
}
.site-menu-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.06);
transition: background 0.2s;
}
.site-menu-social-icon:hover {
background: rgba(255, 255, 255, 0.12);
}
.site-menu-copyright {
margin-top: 1rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
}
@keyframes site-menu-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes site-menu-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* Navbar pill */
.navbar-inner {
position: relative;
padding: 0.6rem 1.5rem;
background: rgb(var(--background) / 0.25);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.25rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 6px 24px -8px rgba(0, 0, 0, 0.45);
}
/* Section heading: centered, uppercase, primary, with hairline rules */
.category-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
}
.category-divider::before,
.category-divider::after {
content: '';
flex: 1;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.7));
}
.category-divider::after {
background: linear-gradient(90deg, hsl(var(--primary) / 0.7), transparent);
}
.category-divider h3 {
color: hsl(var(--primary));
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
text-shadow: 0 0 18px hsl(var(--primary) / 0.45);
}
/* Divisor decorativo (onda + gema) entre uma categoria e outra na home.
O PNG tem bastante espaço transparente em cima/embaixo da onda; o frame
com altura fixa + overflow:hidden corta essa sobra, e a margem negativa
compensa o gap que o space-y-12/20 do container-pai injeta. */
.category-divider-frame {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100%;
max-width: 480px;
height: 70px;
margin: -1.25rem auto;
}
.category-divider-img {
display: block;
width: 100%;
height: auto;
flex-shrink: 0;
opacity: 0.9;
pointer-events: none;
user-select: none;
}
@media (min-width: 640px) {
.category-divider-frame {
height: 90px;
margin: -2.25rem auto;
}
}
/* Ornamental divider */
.ornament-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: hsl(var(--primary));
}
.ornament-divider::before,
.ornament-divider::after {
content: '';
flex: 1;
max-width: 260px;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.9));
box-shadow: 0 0 8px hsl(var(--primary) / 0.5);
}
.ornament-divider::after {
background: linear-gradient(90deg, hsl(var(--primary) / 0.9), transparent);
}
.ornament-gem {
display: flex;
flex-shrink: 0;
filter: drop-shadow(0 0 12px hsl(var(--primary) / 0.9));
animation: ornament-pulse 3.5s ease-in-out infinite;
}
.ornament-gem svg {
height: 22px;
width: auto;
}
@keyframes ornament-pulse {
0%,
100% {
opacity: 0.85;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.ornament-gem {
animation: none;
}
}
/* Hero carousel */
.hero-carousel {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* The peek slides are translated past the wrapper and would otherwise
push the page wider than the viewport on small screens. */
overflow: hidden;
}
.hero-carousel-wrapper {
position: relative;
width: 100%;
max-width: 1920px;
aspect-ratio: 1920 / 800;
height: auto;
margin: 0 auto;
perspective: 1200px;
}
.hero-carousel-track {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.hero-carousel-slide {
position: absolute;
inset: 0;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
user-select: none;
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
filter 0.6s ease,
opacity 0.6s ease;
}
.hero-carousel-slide a {
display: block;
width: 100%;
height: 100%;
}
.hero-carousel-slide img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 16px;
pointer-events: none;
transition: transform 0.3s ease-in-out;
}
/* No desktop a caixa do banner (2.4:1) sobra espaco nas bordas com contain,
mostrando a parte borrada/ambiente da propria imagem. cover recorta e
preenche so com a parte nitida. Mobile fica igual (contain), sem mudanca. */
@media (min-width: 1024px) {
.hero-carousel-slide img {
object-fit: cover;
}
/* A imagem real do banner e 1224x404 (~3:1), bem mais "achatada" que a
caixa de 1920:800 (2.4:1) — isso forcava o cover a ampliar e cortar mais
do que devia. Usando a proporcao real, o banner fica no tamanho certo. */
.hero-carousel-wrapper {
aspect-ratio: 1224 / 404;
max-width: 900px;
}
}
.hero-carousel-slide:hover img {
transform: scale(1.05);
}
.slide-active {
transform: translateX(0) translateZ(0) rotateY(0);
opacity: 1;
z-index: 10;
}
.slide-prev {
transform: translateX(-55%) translateZ(-250px) rotateY(35deg);
filter: blur(4px);
opacity: 0.6;
z-index: 5;
}
.slide-next {
transform: translateX(55%) translateZ(-250px) rotateY(-35deg);
filter: blur(4px);
opacity: 0.6;
z-index: 5;
}
.slide-hidden {
transform: translateX(0) translateZ(-500px) rotateY(0);
filter: blur(8px);
opacity: 0;
z-index: 1;
}
.hero-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: all 0.3s;
z-index: 20;
}
.hero-carousel-arrow:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.hero-carousel-arrow.left {
left: -25px;
}
.hero-carousel-arrow.right {
right: -25px;
}
.hero-carousel-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.hero-carousel-dot {
width: 12px;
height: 12px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.hero-carousel-dot.active {
background-color: hsl(var(--primary));
transform: scale(1.3);
}
/* Glow CTA buttons */
.glow-buttons {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
/* Must stay under the sticky navbar (z-20). At 20 it tied with the header
and, coming later in the DOM, painted over it. */
z-index: 1;
}
.button {
/* Derived from the store's theme colours, so the glow follows the dashboard.
Deliberately NOT named --primary: that would shadow the global token and
make hsl(var(--primary)) resolve to itself. */
--btn-glow: hsl(var(--primary));
--btn-1: hsl(var(--primary));
/* Over the black fill, alpha reads as a darker shade of the same hue. */
--btn-2: hsl(var(--primary) / 0.55);
--btn-ink: #fff;
--btn-radius: 14px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-width: 200px;
height: 58px;
padding: 20px;
border: none;
border-radius: var(--btn-radius);
background-color: #000;
color: var(--btn-ink);
font-size: 20px;
font-weight: 600;
cursor: pointer;
z-index: 2;
transition: all 0.3s ease;
text-shadow: 0 0 5px var(--btn-glow), 0 0 10px var(--btn-2);
box-shadow: 0 0 8px var(--btn-glow), 0 0 15px var(--btn-2), inset 0 0 8px var(--btn-1);
}
.button-secondary {
--btn-glow: hsl(var(--secondary));
--btn-1: hsl(var(--secondary));
--btn-2: hsl(var(--secondary) / 0.55);
--btn-ink: #fff;
}
.button:hover {
transform: translateY(-3px);
letter-spacing: 0.5px;
box-shadow: 0 0 12px var(--btn-glow), 0 0 25px var(--btn-2), inset 0 0 12px var(--btn-1);
}
.button:active {
transform: scale(1);
}
/* Border ring */
.button::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--btn-radius);
border: 2.5px solid transparent;
background: linear-gradient(var(--btn-1), var(--btn-2)) padding-box,
linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
z-index: 0;
transition: all 0.4s ease;
}
.button:hover::after {
transform: scale(1.05, 1.1);
box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
/* Coloured inner pill */
.button::before {
content: '';
position: absolute;
inset: 7px 6px 6px 6px;
background: linear-gradient(to top, var(--btn-1), var(--btn-2));
border-radius: 30px;
filter: blur(0.5px);
z-index: 2;
}
.button .outline {
position: absolute;
inset: -2px -3.5px;
border-radius: inherit;
overflow: hidden;
opacity: 0;
z-index: 1;
transition: opacity 0.4s ease;
}
.button .outline::before {
content: '';
position: absolute;
inset: -100%;
background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
animation: btn-spin 2s linear infinite;
animation-play-state: paused;
}
.button:hover .outline {
opacity: 1;
}
.button:hover .outline::before {
animation-play-state: running;
}
.button .state {
position: relative;
display: flex;
padding-left: 29px;
z-index: 2;
}
.button .state p {
display: flex;
align-items: center;
justify-content: center;
}
.button .state .icon {
position: absolute;
left: 0;
top: -4px;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1.25);
transition: all 0.3s ease;
}
.button .state .icon svg {
overflow: visible;
}
/* Per-letter entrance / hover wave.
A letra NUNCA pode depender da animacao pra existir na tela: quem tem "reduzir
movimento" ligado no sistema cai no @media la embaixo, que zera a animacao — com
opacity:0 aqui o botao ficava so com o icone, sem texto. Entao a base e visivel e a
animacao so ACRESCENTA o movimento (o `both` segura o 0% durante o delay do stagger).
O delay fica FORA do atalho de proposito: var() dentro de um shorthand derruba a
declaracao inteira se a variavel falhar; numa longhand, perde-se so o delay. */
.button .state p span {
display: block;
opacity: 1;
animation: btn-letter-slide 0.8s ease both;
animation-delay: calc(var(--i, 0) * 0.03s);
}
.button:hover p span {
animation: btn-wave 0.5s ease forwards;
animation-delay: calc(var(--i, 0) * 0.02s);
}
.button .state--default .icon svg {
animation: btn-land 0.6s ease forwards;
}
.button:hover .state--default .icon {
transform: rotate(45deg) scale(1.25);
}
/* Prefixed so they cannot clash with the sidebar's own slideDown/spin. */
@keyframes btn-neon-glow {
0%,
100% {
box-shadow: 0 0 8px var(--btn-glow), 0 0 15px var(--btn-2), inset 0 0 8px var(--btn-1);
}
50% {
box-shadow: 0 0 12px var(--btn-glow), 0 0 25px var(--btn-2), inset 0 0 12px var(--btn-1);
}
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
@keyframes btn-wave {
30% {
transform: translateY(4px);
}
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(0);
}
}
@keyframes btn-letter-slide {
0% {
opacity: 0;
transform: translateY(-20px) rotate(-90deg);
}
30% {
opacity: 1;
transform: translateY(4px) rotate(0);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0);
}
}
@keyframes btn-land {
from {
transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
opacity: 0;
}
to {
transform: translateX(0) translateY(0) rotate(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.button,
.button .state p span,
.button .state--default .icon svg,
.hero-carousel-slide {
animation: none;
transition: none;
/* Sem isto, matar a animacao das letras deixava o botao so com o icone — mesmo
cuidado que o .hero-letter ja tomava no bloco de reduced-motion dele. */
opacity: 1;
}
}
@media screen and (max-width: 768px) {
.hero-carousel-wrapper {
max-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 1224 / 404;
}
.hero-carousel-arrow {
width: 35px;
height: 35px;
}
.hero-carousel-arrow.left {
left: -5px;
}
.hero-carousel-arrow.right {
right: -5px;
}
.slide-prev {
transform: translateX(-65%) translateZ(-150px) rotateY(40deg);
}
.slide-next {
transform: translateX(65%) translateZ(-150px) rotateY(-40deg);
}
.glow-buttons {
flex-direction: column;
}
.button {
width: 90%;
min-width: 280px;
max-width: 350px;
}
}
@media screen and (max-width: 480px) {
.button {
min-width: 250px;
height: 52px;
padding: 16px;
font-size: 16px;
}
}
/* ============================================================
Upsell nativo CentralCart — identidade Dream Store
Hooks intactos; aparência em --primary/tokens do tema.
============================================================ */
.checkout-order-bump {
padding: 0.95rem;
border: 1px solid hsl(var(--primary) / 0.3);
border-radius: 1rem;
background: radial-gradient(circle at top left, hsl(var(--primary) / 0.06), transparent 70%), rgba(255, 255, 255, 0.02);
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}
.checkout-order-bump:empty {
display: none;
}
.checkout-upsell-section {
padding: 0.1rem 0;
}
.checkout-upsell-section__list {
border-color: hsl(var(--primary) / 0.2);
background: rgba(255, 255, 255, 0.02);
}
.checkout-upsell-item,
.checkout-upsell-alt,
.checkout-upsell-post {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
background: rgba(255, 255, 255, 0.02);
}
.checkout-upsell-item__media,
.checkout-upsell-alt__media,
.checkout-upsell-post__media {
width: 3rem;
height: 3rem;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid hsl(var(--primary) / 0.15);
border-radius: 0.6rem;
background: hsl(var(--background));
}
.checkout-upsell-item__image,
.checkout-upsell-alt__image,
.checkout-upsell-post__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.checkout-upsell-item__body,
.checkout-upsell-post__body {
min-width: 0;
flex: 1 1 auto;
}
.checkout-upsell-item__name,
.checkout-upsell-alt__name,
.checkout-upsell-post__name {
color: hsl(var(--foreground));
font-size: 0.9rem;
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.checkout-upsell-item__price,
.checkout-upsell-alt__price,
.checkout-upsell-post__price {
margin-top: 0.2rem;
color: rgb(var(--muted-foreground));
font-size: 0.8rem;
}
.checkout-upsell-item__actions,
.checkout-upsell-alt__content {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.checkout-upsell-alt {
margin-top: 0.6rem;
flex-direction: column;
align-items: stretch;
border: 1px dashed hsl(var(--primary) / 0.4);
border-radius: 1rem;
background: radial-gradient(circle at top left, hsl(var(--primary) / 0.06), transparent 70%), rgba(255, 255, 255, 0.02);
}
.checkout-upsell-alt__header {
display: flex;
align-items: center;
gap: 0.4rem;
color: hsl(var(--primary));
}
.checkout-upsell-alt__eyebrow {
margin: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.checkout-upsell-alt__content {
justify-content: space-between;
}
.checkout-upsell-alt__details {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.checkout-upsell-post {
border: 1px solid hsl(var(--primary) / 0.15);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.02);
}
/* Controles de quantidade do item de upsell no carrinho
(hook = data-cart-action; aqui só a aparência) */
.cart-quantity {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.55rem;
background: hsl(var(--background));
}
.cart-quantity__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 0.4rem;
color: hsl(var(--foreground));
transition: background-color 0.15s ease;
}
.cart-quantity__button:hover {
background: hsl(var(--primary) / 0.12);
}
.cart-quantity__input {
width: 2rem;
height: 1.6rem;
text-align: center;
background: transparent;
border: 0;
color: hsl(var(--foreground));
font-size: 0.8rem;
}
.cart-remove-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 0.5rem;
color: rgb(var(--muted-foreground));
transition: color 0.15s ease, background-color 0.15s ease;
}
.cart-remove-button:hover {
color: hsl(var(--foreground));
background: hsl(var(--primary) / 0.12);
}
/* Roleta Dream (rewards / code redemption page) */
.roleta-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.roleta-icon-badge {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
border-radius: 999px;
border: 1px solid hsl(var(--primary) / 0.4);
background: radial-gradient(circle, hsl(var(--primary) / 0.25), transparent 70%);
color: hsl(var(--primary));
box-shadow: 0 0 30px -8px hsl(var(--primary) / 0.7);
}
.roleta-icon-badge-sm {
width: 3rem;
height: 3rem;
margin: 0 auto 0.75rem;
}
.roleta-eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: hsl(var(--primary));
}
.roleta-title {
margin-top: 0.5rem;
font-family: 'Kanit', sans-serif;
font-size: clamp(2rem, 6vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.01em;
}
.roleta-title-sm {
margin-top: 0.35rem;
font-family: 'Kanit', sans-serif;
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 800;
letter-spacing: -0.01em;
}
.roleta-lead {
max-width: 34rem;
margin: 0.75rem auto 0;
font-size: 0.9rem;
color: rgb(var(--muted-foreground));
}
.roleta-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid hsl(var(--primary) / 0.3);
background: hsl(var(--primary) / 0.08);
font-size: 0.8rem;
font-weight: 600;
color: hsl(var(--primary));
}
.roleta-pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: hsl(var(--primary));
box-shadow: 0 0 8px hsl(var(--primary));
}
.roleta-card {
padding: 1.5rem;
border-radius: 1.25rem;
border: 1px solid hsl(var(--primary) / 0.25);
background: hsl(var(--primary) / 0.06);
}
.roleta-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
border-radius: 0.85rem;
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
}
.roleta-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: 3rem;
border-radius: 999px;
background: hsl(var(--primary));
color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
font-weight: 800;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 0 28px -8px hsl(var(--primary) / 0.9);
}
.roleta-cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 36px -4px hsl(var(--primary));
}
.roleta-steps {
display: grid;
gap: 0.75rem;
}
.roleta-step {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.roleta-step-number {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
border-radius: 999px;
background: hsl(var(--primary) / 0.18);
color: hsl(var(--primary));
font-weight: 800;
font-size: 0.85rem;
}
.roleta-highlight {
padding: 1px 8px;
border-radius: 999px;
background: hsl(var(--primary) / 0.18);
color: hsl(var(--primary));
font-weight: 700;
}
.roleta-warning {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.9rem 1rem;
border-radius: 1rem;
border: 1px solid rgba(234, 179, 8, 0.25);
background: rgba(234, 179, 8, 0.06);
font-size: 0.8rem;
color: rgba(234, 179, 8, 0.9);
}
.roleta-prize-track {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.5rem;
scroll-snap-type: x mandatory;
}
.roleta-prize-card {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 9.5rem;
height: 9.5rem;
padding: 1rem;
border-radius: 1.1rem;
border: 1px solid hsl(var(--primary) / 0.3);
background: linear-gradient(160deg, hsl(var(--primary) / 0.16), rgba(255, 255, 255, 0.02) 60%);
text-align: center;
scroll-snap-align: start;
}
.roleta-prize-name {
font-size: 0.85rem;
font-weight: 700;
}
.roleta-prize-desc {
font-size: 0.75rem;
color: rgb(var(--muted-foreground));
}
/* Programa Fidelidade (loyalty tiers page) */
.fidelidade-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fidelidade-hero .btn-primary,
.fidelidade-cta .btn-primary {
box-shadow: 0 12px 32px -10px hsl(var(--primary) / 0.85);
}
.fidelidade-hero .btn-outline {
border-color: hsl(var(--primary) / 0.35);
transition: border-color 0.2s, background-color 0.2s;
}
.fidelidade-hero .btn-outline:hover {
border-color: hsl(var(--primary) / 0.65);
}
.fidelidade-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid hsl(var(--primary) / 0.5);
background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--secondary) / 0.12));
box-shadow: 0 0 20px -6px hsl(var(--primary) / 0.8);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: hsl(var(--primary));
}
.fidelidade-card {
position: relative;
padding: 1.75rem 1.5rem;
border-radius: 1.5rem;
border: 1px solid hsl(var(--primary) / 0.35);
background: linear-gradient(165deg, hsl(var(--primary) / 0.16), hsl(var(--secondary) / 0.05) 55%, rgba(255, 255, 255, 0.015));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 28px 70px -32px hsl(var(--primary) / 0.85),
0 0 60px -28px hsl(var(--secondary) / 0.6);
}
.fidelidade-section-title {
text-align: center;
font-family: 'Kanit', sans-serif;
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 800;
}
.fidelidade-track {
display: flex;
align-items: flex-start;
gap: 1.5rem;
overflow-x: auto;
padding: 0.9rem 0.25rem 1rem;
}
.fidelidade-level {
position: relative;
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 4.75rem;
}
/* Linha conectando os níveis, atrás dos círculos */
.fidelidade-level:not(:last-child)::after {
content: '';
position: absolute;
top: 1.5rem;
left: 60%;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.1);
z-index: 0;
}
.fidelidade-level.is-complete:not(:last-child)::after {
background: linear-gradient(90deg, var(--tier), hsl(var(--primary) / 0.4));
}
.fidelidade-level-dot {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
flex-shrink: 0;
border-radius: 999px;
border: 2px solid var(--tier);
background: rgba(255, 255, 255, 0.03);
color: var(--tier);
font-weight: 800;
font-size: 0.9rem;
opacity: 0.55;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fidelidade-level.is-complete .fidelidade-level-dot {
background: var(--tier);
color: rgb(var(--background));
opacity: 1;
box-shadow: 0 6px 16px -6px var(--tier);
}
.fidelidade-level.is-current .fidelidade-level-dot {
background: var(--tier);
color: rgb(var(--background));
opacity: 1;
box-shadow: 0 0 0 4px rgb(var(--background)), 0 0 0 6px var(--tier), 0 0 22px var(--tier);
}
.fidelidade-level-name {
font-size: 0.7rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
color: rgb(var(--muted-foreground));
transition: color 0.3s;
}
.fidelidade-level.is-complete .fidelidade-level-name,
.fidelidade-level.is-current .fidelidade-level-name {
color: hsl(var(--foreground));
font-weight: 800;
}
.fidelidade-level-bronze, .fidelidade-table-badge.fidelidade-level-bronze { --tier: #cd7f32; }
.fidelidade-level-prata, .fidelidade-table-badge.fidelidade-level-prata { --tier: #d9dce0; }
.fidelidade-level-ouro, .fidelidade-table-badge.fidelidade-level-ouro { --tier: #ffd447; }
.fidelidade-level-safira, .fidelidade-table-badge.fidelidade-level-safira { --tier: #3b82f6; }
.fidelidade-level-esmeralda, .fidelidade-table-badge.fidelidade-level-esmeralda { --tier: #10d97e; }
.fidelidade-level-rubi, .fidelidade-table-badge.fidelidade-level-rubi { --tier: #f43f5e; }
.fidelidade-level-diamante, .fidelidade-table-badge.fidelidade-level-diamante { --tier: #5eead4; }
.fidelidade-level-mestre, .fidelidade-table-badge.fidelidade-level-mestre { --tier: #fbbf24; }
.fidelidade-level-lendario, .fidelidade-table-badge.fidelidade-level-lendario { --tier: #fb7a1f; }
.fidelidade-level-supremo, .fidelidade-table-badge.fidelidade-level-supremo { --tier: #b366f7; }
.fidelidade-table {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fidelidade-table-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.9rem;
border-radius: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
transition: background 0.2s, border-color 0.2s;
}
.fidelidade-table-row.is-current {
border-color: var(--tier);
background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 16%, transparent), transparent 60%);
}
.fidelidade-row-main {
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
}
.fidelidade-row-name {
font-weight: 700;
font-size: 0.9rem;
}
.fidelidade-row-tag {
padding: 1px 8px;
border-radius: 999px;
background: var(--tier);
color: rgb(var(--background));
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.fidelidade-row-meta {
display: flex;
align-items: center;
gap: 0.9rem;
flex-shrink: 0;
font-size: 0.8rem;
color: rgb(var(--muted-foreground));
}
.fidelidade-table-badge {
display: flex;
align-items: center;
justify-content: center;
width: 1.85rem;
height: 1.85rem;
flex-shrink: 0;
border-radius: 999px;
border: 2px solid var(--tier);
color: var(--tier);
font-weight: 800;
font-size: 0.75rem;
}
.fidelidade-table-row.is-current .fidelidade-table-badge,
.fidelidade-table-row.is-complete .fidelidade-table-badge {
background: var(--tier);
color: rgb(var(--background));
}
.fidelidade-discount {
min-width: 2.75rem;
text-align: right;
font-weight: 800;
color: hsl(var(--primary));
}
.fidelidade-features {
display: grid;
gap: 0.75rem;
}
@media (min-width: 640px) {
.fidelidade-features {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.fidelidade-feature {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1.1rem;
border-radius: 1rem;
border: 1px solid hsl(var(--primary) / 0.2);
background: linear-gradient(160deg, hsl(var(--primary) / 0.12), rgba(255, 255, 255, 0.02) 65%);
box-shadow: 0 14px 34px -22px hsl(var(--primary) / 0.7);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.fidelidade-feature:hover {
border-color: hsl(var(--primary) / 0.45);
transform: translateY(-3px);
box-shadow: 0 18px 40px -20px hsl(var(--primary) / 0.85);
}
.fidelidade-cta {
padding: 2.25rem 1.5rem;
border-radius: 1.5rem;
border: 1px solid hsl(var(--primary) / 0.4);
background: linear-gradient(160deg, hsl(var(--primary) / 0.22), hsl(var(--secondary) / 0.14));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 30px 70px -34px hsl(var(--primary) / 0.85);
text-align: center;
}
.fidelidade-status-box {
padding: 1.1rem 1.25rem;
border-radius: 1.1rem;
border: 1px solid hsl(var(--primary) / 0.4);
background: linear-gradient(135deg, hsl(var(--primary) / 0.18), hsl(var(--secondary) / 0.1));
box-shadow: 0 16px 40px -24px hsl(var(--primary) / 0.8);
}
.fidelidade-progress-track {
margin-top: 0.85rem;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.fidelidade-progress-fill {
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)));
box-shadow: 0 0 12px hsl(var(--primary) / 0.7);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ranking Semanal de Afiliados — visual neutro, cor só nos pontos essenciais.
Usa rgba(255,255,255,x) em vez de hsl(var(--muted-foreground)) porque essa
variável está definida como triplo RGB (ex: 171 171 171), e lida via hsl()
isso produz uma cor errada/rosada — não é intencional. */
.ranking-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ranking-subtitle {
max-width: 34rem;
margin: 0.75rem auto 0;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
}
.ranking-card {
padding: 1.75rem;
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
}
.ranking-icon-chip {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
border-radius: 0.85rem;
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
}
.ranking-section-title {
text-align: center;
font-family: 'Kanit', sans-serif;
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 700;
}
.ranking-cta {
padding: 2rem 1.5rem;
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
text-align: center;
}
.ranking-countdown {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(249, 115, 22, 0.4);
background: rgba(249, 115, 22, 0.1);
box-shadow: 0 0 14px -4px rgba(249, 115, 22, 0.5);
font-size: 0.85rem;
font-weight: 500;
color: #fdba74;
}
.ranking-countdown strong {
color: #f97316;
font-weight: 700;
}
.ranking-podium {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.ranking-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ranking-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.8rem 1.1rem;
border-radius: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.015);
}
.ranking-row.is-me {
border-color: hsl(var(--primary) / 0.4);
background: hsl(var(--primary) / 0.06);
}
.ranking-row-place-1 {
border-color: rgba(201, 162, 39, 0.35);
background: rgba(201, 162, 39, 0.06);
}
.ranking-row-place-2 {
border-color: rgba(154, 161, 171, 0.3);
}
.ranking-row-place-3 {
border-color: rgba(169, 113, 66, 0.3);
}
.ranking-row-position {
min-width: 2rem;
font-size: 1rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.6);
}
.ranking-row-position-1 {
color: #c9a227;
}
.ranking-row-position-2 {
color: #9aa1ab;
}
.ranking-row-position-3 {
color: #a97142;
}
.ranking-row-name {
flex: 1;
font-weight: 500;
font-size: 1rem;
}
.ranking-row-tag {
margin-left: 0.4rem;
padding: 2px 9px;
border-radius: 999px;
background: hsl(var(--primary));
color: rgb(var(--background));
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
.ranking-row-sales {
flex-shrink: 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
}
/* Roleta Dream — modal com roleta girando */
.roleta-modal {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.roleta-modal-backdrop {
position: absolute;
inset: 0;
border: none;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}
.roleta-modal-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 22rem;
padding: 2rem 1.5rem;
border-radius: 1.5rem;
border: 1px solid hsl(var(--primary) / 0.3);
background: rgb(var(--background));
box-shadow: 0 30px 80px -20px hsl(var(--primary) / 0.6);
text-align: center;
}
.roleta-wheel-wrap {
position: relative;
width: 16rem;
height: 16rem;
padding: 0.6rem;
border-radius: 999px;
background: repeating-conic-gradient(
hsl(var(--primary)) 0deg 8deg,
rgba(255, 255, 255, 0.15) 8deg 16deg
);
box-shadow: 0 0 40px -6px hsl(var(--primary) / 0.7);
}
.roleta-wheel {
position: relative;
width: 100%;
height: 100%;
border-radius: 999px;
border: 3px solid rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 0 0 4px rgb(var(--background));
overflow: hidden;
}
.roleta-wheel-label {
position: absolute;
top: 50%;
left: 50%;
width: 48%;
transform-origin: left center;
padding-left: 16%;
text-align: left;
font-size: 0.68rem;
font-weight: 800;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.roleta-wheel-label.is-flipped {
left: auto;
right: 50%;
width: 48%;
transform-origin: right center;
padding-left: 0;
padding-right: 16%;
text-align: right;
}
.roleta-wheel-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: radial-gradient(circle at 35% 30%, #fff, hsl(var(--primary)) 65%);
color: rgb(var(--background));
box-shadow: 0 0 0 4px rgb(var(--background)), 0 0 18px hsl(var(--primary) / 0.8);
}
.roleta-wheel-pointer {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 0;
height: 0;
border-left: 0.9rem solid transparent;
border-right: 0.9rem solid transparent;
border-top: 1.5rem solid hsl(var(--secondary));
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}
.roleta-wheel-pointer::after {
content: '';
position: absolute;
top: -1.65rem;
left: -0.4rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 999px;
background: hsl(var(--secondary));
box-shadow: 0 0 10px hsl(var(--secondary) / 0.9);
}
.roleta-modal-status {
margin-top: 1.5rem;
font-weight: 700;
color: hsl(var(--primary));
}
.roleta-modal-prize-name {
margin-top: 1.5rem;
font-family: 'Kanit', sans-serif;
font-size: 1.4rem;
font-weight: 800;
color: hsl(var(--primary));
}
.roleta-modal-prize-desc {
margin-top: 0.25rem;
font-size: 0.9rem;
color: rgb(var(--muted-foreground));
}
/* Botão flutuante de suporte via WhatsApp */
.whatsapp-widget {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 40;
}
.whatsapp-widget-button {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
background: #25d366;
color: #fff;
box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6);
transition: transform 0.2s;
}
.whatsapp-widget-button:hover {
transform: scale(1.06);
}
.whatsapp-widget-popup {
position: absolute;
right: 0;
bottom: 4.25rem;
width: 17rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgb(var(--background));
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
overflow: hidden;
}
.whatsapp-widget-popup.hidden {
display: none;
}
.whatsapp-widget-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: rgb(var(--foreground));
font-weight: 700;
font-size: 0.9rem;
}
.whatsapp-widget-popup-header-title {
display: flex;
align-items: center;
gap: 0.5rem;
}
.whatsapp-widget-popup-dot {
width: 0.5rem;
height: 0.5rem;
flex-shrink: 0;
border-radius: 999px;
background: #25d366;
box-shadow: 0 0 6px #25d366;
}
.whatsapp-widget-popup-header button {
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s;
}
.whatsapp-widget-popup-header button:hover {
color: rgb(var(--foreground));
}
.whatsapp-widget-popup-body {
padding: 1rem;
}
.whatsapp-widget-hours-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.5);
}
.whatsapp-widget-hours-value {
margin-top: 0.3rem;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
}
.whatsapp-widget-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
height: 2.75rem;
border-radius: 0.75rem;
background: #25d366;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
transition: opacity 0.2s;
}
.whatsapp-widget-cta:hover {
opacity: 0.9;
}
@media (max-width: 380px) {
.whatsapp-widget-popup {
width: calc(100vw - 2.5rem);
}
}
/* Botões circulares do cabeçalho (menu, busca, carrinho) */
.navbar-icon-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.4) 65%);
border: 1px solid hsl(var(--primary) / 0.35);
color: rgb(var(--foreground) / 0.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -6px 10px -7px rgba(0, 0, 0, 0.6),
0 4px 12px -5px hsl(var(--primary) / 0.55);
transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
}
.navbar-icon-btn:hover {
border-color: hsl(var(--primary) / 0.8);
color: #fff;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -6px 10px -7px rgba(0, 0, 0, 0.6),
0 6px 18px -4px hsl(var(--primary) / 0.85);
}
/* Barra de navegação inferior (mobile) */
@media (max-width: 767px) {
.whatsapp-widget {
bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}
body {
padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
}
.mobile-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
display: flex;
align-items: center;
height: 4.75rem;
padding: 0 0.25rem;
padding-bottom: env(safe-area-inset-bottom, 0px);
border-radius: 1.5rem 1.5rem 0 0;
background: radial-gradient(120% 130% at 50% 0%, hsl(var(--primary) / 0.3), rgba(var(--muted-solid), 0.97) 55%);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1.5px solid hsl(var(--primary) / 0.8);
border-left: 1.5px solid hsl(var(--primary) / 0.4);
border-right: 1.5px solid hsl(var(--primary) / 0.4);
box-shadow: 0 -3px 6px -2px hsl(var(--primary) / 0.25), 0 -10px 22px -12px hsl(var(--primary) / 0.3);
}
@keyframes nav-a-swing { to { --nav-a: 180deg; } }
@keyframes nav-b-swing { to { --nav-b: 180deg; } }
.mobile-bottom-nav-item {
display: flex;
flex: 1 1 0%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
height: 100%;
min-width: 0;
padding: 0 0.1rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
transition: color 0.2s;
}
.mobile-bottom-nav-item:hover,
.mobile-bottom-nav-item:active {
color: #fff;
}
.mobile-bottom-nav-icon-badge {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.45);
color: #fff;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mobile-bottom-nav-item:hover .mobile-bottom-nav-icon-badge,
.mobile-bottom-nav-item:active .mobile-bottom-nav-icon-badge {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px 0 rgba(255, 255, 255, 0.25);
}
.mobile-bottom-nav-discord-icon {
background-color: #fff;
}
.mobile-bottom-nav-center {
position: relative;
display: flex;
flex: 1 1 0%;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
height: 100%;
padding-bottom: 0.6rem;
}
.mobile-bottom-nav-center-btn {
position: absolute;
top: -2rem;
display: flex;
align-items: center;
justify-content: center;
width: 4.25rem;
height: 4.25rem;
flex-shrink: 0;
border-radius: 999px;
overflow: hidden;
background: radial-gradient(circle at 32% 28%, hsl(var(--secondary)), hsl(var(--primary)) 70%);
color: #fff;
border: 3px solid rgba(255, 255, 255, 0.85);
box-shadow:
0 0 0 3px hsl(var(--primary) / 0.2),
0 0 14px 1px hsl(var(--primary) / 0.35),
0 8px 16px -6px rgba(0, 0, 0, 0.6);
transition: transform 0.2s, box-shadow 0.2s;
}
.mobile-bottom-nav-center-btn i {
width: 1.6rem;
height: 1.6rem;
}
.mobile-bottom-nav-center-btn:hover,
.mobile-bottom-nav-center-btn:active {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 0 0 3px hsl(var(--primary) / 0.35),
0 0 20px 3px hsl(var(--primary) / 0.6),
0 8px 16px -6px rgba(0, 0, 0, 0.6);
}
.mobile-bottom-nav-center-label {
color: rgba(255, 255, 255, 0.85);
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
}
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable],.license-key,.centralcart-content,#chat-delivery-container,#chat-delivery-container *,#dialog-chat-expanded,#dialog-chat-expanded *,form,form *{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
#category-picker-grid>a:nth-child(n+9){display:none}
@media (min-width:1024px){
#category-picker-grid>a:nth-child(n+9){display:flex}
#category-picker-grid>a:nth-child(n+17){display:none}
}

/* Busca global independente de rota; evita CSS gerado em tempo de execucao. */
body.king-search-open { overflow: hidden; }
.king-search-overlay { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start; justify-content:center; padding: min(11vh,80px) 12px 24px; }
.king-search-overlay.hidden, .king-search-results.hidden { display:none; }
.king-search-backdrop { position:absolute; inset:0; width:100%; height:100%; background:rgba(0,0,0,.82); backdrop-filter:blur(5px); cursor:default; }
.king-search-panel { position:relative; width:min(100%,660px); max-height:calc(100dvh - 100px); display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid hsl(var(--primary) / .4); border-radius:16px; background:rgb(14,10,20); color:#fafafa; box-shadow:0 25px 90px rgba(0,0,0,.65); }
.king-search-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:18px; font-weight:700; }
.king-search-close { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:10px; }
.king-search-input-wrap { display:flex; align-items:center; gap:8px; border:1px solid hsl(var(--primary) / .55); border-radius:12px; padding:0 12px; background:rgba(255,255,255,.06); }
.king-search-input-wrap input { flex:1; min-width:0; width:100%; height:46px; padding:0; border:0; border-radius:0; background:transparent; color:#fff; outline:none; font-size:16px; }
.king-search-input-wrap input:focus { outline:none; box-shadow:none; }
.king-search-results { min-height:50px; max-height:min(55vh,440px); overflow:auto; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#120e18; }
.king-search-hint { font-size:12px; color:#aaa; }
@media (max-width:640px) { .king-search-overlay { padding-top:52px; } .king-search-panel { padding:16px; max-height:calc(100dvh - 64px); } }

/* Performance: frames remain stable before offscreen category thumbnails enter viewport. */
.category-picker-card { overflow: hidden; }
.category-picker-img { aspect-ratio: 16 / 9; background: #13091c; }
/* Keep native accessibility preference: mobile entry animations are not essential to buying. */
@media (max-width: 767px) {
  .hero-offer-title .hero-letter, .hero-offer-sub, .hero-offer-cta, .hero-offer-art {
    animation: none !important; opacity: 1; filter: none;
  }
}

/* V148: stabilize the offer immediately; remove nonessential initial animations. */
.hero-offer-sub, .hero-offer-cta, .hero-offer-art { opacity: 1; animation: none; }
/* Offscreen testimonials keep one stable row before the optional slider initializes. */
#feedback-slider-1:not([data-initialized]) { display: flex; overflow: hidden; }
#feedback-slider-1:not([data-initialized]) > .keen-slider__slide { flex: 0 0 100%; min-width: 0; }
@media (min-width: 768px) { #feedback-slider-1:not([data-initialized]) > .keen-slider__slide { flex-basis: 50%; } }
@media (min-width: 1025px) { #feedback-slider-1:not([data-initialized]) > .keen-slider__slide { flex-basis: 33.3333%; } }