/* Pretty Pointless: palette sampled from the logo */
:root{
  /* Neon palette sampled from assets/logo.png */
  --pink:#F956CB; --pink-deep:#E4239A; --orchid:#CC64EE; --violet:#A665ED; --sky:#3BB6F9; --cyan:#0BCBF4; --aqua:#20E4D9; --mint:#19F5BF;
  --outline:#2C1C73;                      /* logo letter outline */
  /* Lighter neon stops used under dark text (all >= 5.7:1 with --ink) */
  --btn-pink:#FF7AD9; --btn-violet:#B98AF5; --btn-cyan:#44D6F7;
  --pink-soft:#FFE3F6; --lilac-soft:#F1E6FF; --mint-soft:#D9FFF2; --cyan-soft:#DDF6FF; --yellow:#FFF1A8;
  --ink:#2B2140; --ink-2:#5E5475; --line:#EFE4F5; --bg:#FFF7FC; --card:#FFFFFF;
  --grad:linear-gradient(120deg,var(--pink) 0%,var(--violet) 38%,var(--cyan) 72%,var(--mint) 100%);
  --grad-btn:linear-gradient(110deg,var(--btn-pink) 0%,var(--btn-violet) 45%,var(--btn-cyan) 80%,var(--mint) 100%);
  --grad-soft:linear-gradient(135deg,#FFE8F7 0%,#F2E8FF 40%,#E1F8FF 75%,#DEFFF4 100%);
  --glow-pink:0 0 18px rgba(249,86,203,.45); --glow-cyan:0 0 22px rgba(11,203,244,.35);
  --shadow:0 10px 30px -12px rgba(76,40,130,.28),0 2px 6px rgba(76,40,130,.08);
  --shadow-lg:0 22px 44px -16px rgba(76,40,130,.38),0 0 26px -6px rgba(249,86,203,.35),0 0 32px -10px rgba(11,203,244,.35);
  --radius:28px; --radius-sm:16px;
  --head:"Fredoka","Baloo 2","Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:12px;z-index:100}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:12px}

/* Stickers & buttons */
.sticker{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:600;font-size:.85rem;
  padding:6px 14px;border-radius:999px;background:#fff;color:var(--ink);border:2.5px solid #fff;
  box-shadow:0 4px 0 rgba(44,28,115,.16),0 8px 18px -6px rgba(76,40,130,.35);white-space:nowrap}
.sticker-pink{background:var(--pink-soft);border-color:#FFC4EC} .sticker-lilac{background:var(--lilac-soft);border-color:#DCC6FF}
.sticker-mint{background:var(--mint-soft);border-color:#A8F7DF} .sticker-yellow{background:var(--yellow);border-color:#FFE27A}
.sticker-cyan{background:var(--cyan-soft);border-color:#A6E9FB}

.btn{--b:var(--grad-btn);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;
  font-size:1rem;text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:12px 22px;color:var(--ink);
  background:var(--b);background-size:160% 100%;background-position:0 0;
  box-shadow:0 4px 0 rgba(44,28,115,.22),0 10px 22px -10px rgba(76,40,130,.5),var(--glow-pink);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s,background-position .4s}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background-position:100% 0;box-shadow:0 7px 0 rgba(44,28,115,.2),0 16px 26px -12px rgba(76,40,130,.55),0 0 22px rgba(249,86,203,.55),0 0 34px rgba(11,203,244,.45)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(44,28,115,.22)}
.btn-wa{border:2.5px solid #fff}
.btn-ghost{background:#fff;border:2.5px solid #E4D2FF;box-shadow:0 4px 0 rgba(44,28,115,.12),0 10px 22px -12px rgba(76,40,130,.4)}
.btn-ghost:hover{box-shadow:0 7px 0 rgba(44,28,115,.12),0 0 20px rgba(166,101,237,.45)}
.btn-sm{padding:8px 16px;font-size:.95rem}
.btn-lg{padding:14px 26px;font-size:1.06rem}
.btn-block{width:100%}
.wa-ico{width:1.55em;height:1.55em;flex:none;color:#1C9E57;background:#fff;border-radius:50%;padding:3px;box-shadow:0 1px 0 rgba(44,28,115,.2)}
.btn-ghost .wa-ico{box-shadow:none;padding:0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,247,252,.82);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:16px;height:90px}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none}
.brand-logo{height:56px;width:auto;filter:drop-shadow(0 2px 6px rgba(166,101,237,.25))}
/* Slogan under the logo */
.slogan{display:block;font-family:var(--head);font-weight:600;font-size:.84rem;line-height:1.15;letter-spacing:.01em;color:var(--outline);white-space:nowrap}
.slogan::before,.slogan::after{content:"\2726";display:inline-block;margin:0 .45em;color:var(--pink);font-size:.8em;text-shadow:0 0 6px rgba(249,86,203,.8);vertical-align:.08em}
.slogan::after{color:var(--cyan);text-shadow:0 0 6px rgba(11,203,244,.8)}
.slogan-hl{background:linear-gradient(90deg,var(--pink-deep),#8E4BE0 55%,#0891B8);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
  filter:drop-shadow(0 0 5px rgba(249,86,203,.35))}
.slogan-footer{font-size:1rem;color:#fff;white-space:normal;margin:-2px 0 14px!important}
.slogan-footer .slogan-hl{background:linear-gradient(90deg,#FF8FE0,#C9A2FF 50%,#6FE6FF);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 8px rgba(249,86,203,.6))}
.slogan-footer::before,.slogan-footer::after{margin:0 .5em 0 0}
.slogan-footer::after{margin:0 0 0 .5em}
.nav{margin-left:auto;display:flex;gap:6px}
.nav a{text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;color:var(--ink-2);transition:background .2s,color .2s}
.nav a:hover{background:var(--lilac-soft);color:var(--ink)}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:56px 0 72px}
.blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.38;pointer-events:none}
.blob-1{width:380px;height:380px;background:var(--pink);top:-120px;left:-100px}
.blob-2{width:420px;height:420px;background:var(--violet);top:30%;right:-140px}
.blob-3{width:320px;height:320px;background:var(--mint);bottom:-160px;left:35%}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-kicker{margin-bottom:18px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:700}
.grad-text{background:linear-gradient(90deg,var(--pink-deep),#8E4BE0 50%,#0891B8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tagline{font-family:var(--head);font-weight:600;font-size:clamp(1.1rem,2vw,1.35rem);margin:0 0 10px}
.hero-sub{color:var(--ink-2);max-width:34em;margin:0 0 24px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.collection-pills{display:flex;flex-wrap:wrap;gap:10px}
.collection-pill{font:700 .92rem var(--body);border:2px dashed var(--pink);background:rgba(255,255,255,.7);color:var(--ink);
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:transform .2s}
.collection-pill.holiday{border-color:var(--aqua)}
.collection-pill:hover{transform:rotate(-2deg) scale(1.04);box-shadow:var(--glow-pink)}
.collection-pill.holiday:hover{box-shadow:var(--glow-cyan)}
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.hero-glow{position:absolute;left:50%;top:50%;width:min(520px,100%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,214,120,.55) 0 9%,transparent 24%),
    radial-gradient(circle at 34% 44%,rgba(249,86,203,.55),transparent 55%),
    radial-gradient(circle at 68% 40%,rgba(11,203,244,.5),transparent 55%),
    radial-gradient(circle at 50% 72%,rgba(166,101,237,.55),transparent 60%);filter:blur(28px);animation:glow 5s ease-in-out infinite}
.hero-candle-wrap{position:relative;display:block}
.hero-candle{position:relative;width:auto;height:auto;max-height:470px;max-width:100%;margin-inline:auto;
  filter:drop-shadow(0 18px 22px rgba(44,28,115,.35)) drop-shadow(0 0 18px rgba(249,86,203,.35));animation:bob 6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.06}}
.hero-art .sticker{position:absolute;font-size:.95rem}
.float-a{top:6%;left:4%;transform:rotate(-8deg);animation:bob 5s ease-in-out infinite .4s}
.float-b{bottom:8%;left:0;transform:rotate(5deg);animation:bob 5.5s ease-in-out infinite 1s}
.float-c{top:14%;right:0;transform:rotate(7deg);animation:bob 6.5s ease-in-out infinite .2s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* Marquee */
.marquee-wrap{overflow:hidden;margin-top:-40px;padding:22px 0;position:relative;z-index:2}
.marquee{background:var(--ink);box-shadow:0 0 0 3px rgba(249,86,203,.25),0 10px 30px -10px rgba(76,40,130,.6);color:#fff;overflow:hidden;padding:12px 0;transform:rotate(-1.2deg) scaleX(1.03)}
.marquee-track{display:flex;gap:36px;width:max-content;animation:scroll 32s linear infinite;font-family:var(--head);font-weight:600;letter-spacing:.02em}
.marquee-track span:nth-child(4n+1){color:var(--pink);text-shadow:0 0 10px rgba(249,86,203,.7)} .marquee-track span:nth-child(4n+2){color:#C9A2FF;text-shadow:0 0 10px rgba(166,101,237,.7)}
.marquee-track span:nth-child(4n+3){color:var(--cyan);text-shadow:0 0 10px rgba(11,203,244,.7)} .marquee-track span:nth-child(4n){color:var(--mint);text-shadow:0 0 10px rgba(25,245,191,.6)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:72px 0}
.section-tint{background:var(--grad-soft)}
.section-head{text-align:center;margin-bottom:28px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.section-head p{color:var(--ink-2);margin:0}

/* Filters */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px}
.chip{font:700 .95rem var(--body);padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s,box-shadow .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--btn-violet);box-shadow:0 0 16px rgba(166,101,237,.35)}
.chip[aria-pressed="true"]{background:var(--grad-btn);border-color:#fff;box-shadow:0 4px 0 rgba(44,28,115,.18),0 8px 18px -8px rgba(76,40,130,.5),var(--glow-pink)}
.result-count{text-align:center;color:var(--ink-2);font-weight:600;font-size:.92rem;margin:4px 0 26px}

/* Grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  border:1px solid var(--line);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s;animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
.card[hidden]{display:none}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-lg);border-color:#F4C8EE}
.card:hover .badge{animation:wiggle .6s ease-in-out}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes wiggle{0%,100%{rotate:6deg}25%{rotate:-6deg}50%{rotate:10deg}75%{rotate:-2deg}}
.photo{position:relative;aspect-ratio:1/1;margin:10px 10px 0;border-radius:calc(var(--radius) - 8px);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.fit-contain{background:radial-gradient(circle at 50% 45%,rgba(255,214,120,.45),transparent 30%),linear-gradient(135deg,#FFD3F1 0%,#E3D2FF 50%,#C9F3FF 100%)}
.photo.fit-contain img{object-fit:contain;padding:14px;filter:drop-shadow(0 10px 14px rgba(44,28,115,.3))}
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
.placeholder::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.7),transparent 45%),
  radial-gradient(circle at 80% 85%,rgba(255,255,255,.45),transparent 40%)}
.ph-name{position:relative;font-family:var(--head);font-weight:700;font-size:1.4rem;color:#fff;line-height:1.2;max-width:14em;
  text-shadow:2px 0 0 var(--outline),-2px 0 0 var(--outline),0 2px 0 var(--outline),0 -2px 0 var(--outline),1.5px 1.5px 0 var(--outline),-1.5px 1.5px 0 var(--outline),
  1.5px -1.5px 0 var(--outline),-1.5px -1.5px 0 var(--outline),0 0 14px rgba(249,86,203,.55),0 5px 10px rgba(44,28,115,.35)}
.ph-note{position:relative;font-size:.85rem;font-weight:800;letter-spacing:.02em;color:var(--ink);
  background:rgba(255,255,255,.75);padding:5px 12px;border-radius:999px}
.badge{position:absolute;top:12px;right:12px;rotate:6deg;font-size:.8rem;padding:4px 12px;text-transform:uppercase;letter-spacing:.04em}
.card-body{display:flex;flex-direction:column;gap:10px;padding:16px 20px 20px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--lilac-soft);color:#6B2FB8}
.tag:nth-child(2){background:var(--mint-soft);color:#0B7A5E}
.card-title{font-size:1.2rem;margin:2px 0 0}
.desc{margin:0;color:var(--ink-2);font-size:.95rem}
.colors .label{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:6px}
.swatches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.swatches li{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:3px 10px 3px 4px;border:1.5px solid var(--line);border-radius:999px}
.dot{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(62,56,66,.18)}
.custom-note{margin:8px 0 0;font-size:.82rem;font-weight:700;color:#A43BD1}
.buy-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.price{margin:0;font-family:var(--head);font-weight:700;font-size:1.6rem}
.price .cur{font-size:.95rem;color:var(--ink-2);font-weight:600}
.addon-note{font-size:.78rem;font-weight:800;color:var(--ink-2);background:var(--yellow);padding:3px 10px;border-radius:999px}
.license{margin:2px 0 0;font-size:.78rem;color:var(--ink-2);text-align:center}
.license a{font-weight:800;color:#7B2FD6}

/* Steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);position:relative;border:1px solid var(--line);transition:transform .25s}
.step:nth-child(1){rotate:-1deg} .step:nth-child(3){rotate:1deg}
.step:hover{transform:translateY(-4px)}
.step-num{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--grad);font-family:var(--head);
  font-weight:700;font-size:1.5rem;border:3px solid #fff;box-shadow:0 4px 0 rgba(44,28,115,.18),var(--glow-pink);margin-bottom:14px;rotate:-6deg;color:var(--ink)}
.step h3{font-size:1.25rem}
.step p{margin:0;color:var(--ink-2)}

/* Delivery */
.delivery-card{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:#fff;border-radius:var(--radius);
  padding:28px 32px;box-shadow:var(--shadow);border:2px dashed var(--btn-violet)}
.delivery-card h2{font-size:1.8rem;margin-bottom:.25em}
.delivery-card p{margin:0 0 6px}
.delivery-emoji{font-size:2.4rem;width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:var(--grad-soft);rotate:-6deg}
.muted{color:var(--ink-2);font-size:.92rem}

/* Footer */
.site-footer{background:var(--ink);color:#EDE8F0;padding:48px 0 110px;margin-top:20px}
.footer-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.footer-logo{width:220px;height:auto;margin-bottom:12px;filter:drop-shadow(0 0 16px rgba(249,86,203,.35))}
.site-footer p{margin:0 0 10px;font-size:.92rem}
.site-footer a{color:#fff;font-weight:700;text-decoration-color:var(--pink);text-underline-offset:3px}
.site-footer a:hover{color:#FFB8EC;text-shadow:0 0 10px rgba(249,86,203,.7)}
.license-line{font-weight:600}
.copyright{opacity:.7;margin-top:18px!important}

/* Floating WhatsApp */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);border:3px solid #fff;color:#1C9E57;
  box-shadow:0 6px 0 rgba(44,28,115,.2),0 14px 28px -8px rgba(76,40,130,.6);transition:transform .2s cubic-bezier(.3,1.6,.5,1);animation:pulse 2.8s ease-in-out infinite}
.wa-float svg{width:40px;height:40px;background:#fff;border-radius:50%;padding:5px}
.wa-float:hover{transform:scale(1.08) rotate(-8deg)}
@keyframes pulse{0%,100%{box-shadow:0 6px 0 rgba(44,28,115,.2),0 0 0 0 rgba(249,86,203,.55),0 0 18px rgba(11,203,244,.45)}50%{box-shadow:0 6px 0 rgba(44,28,115,.2),0 0 0 12px rgba(249,86,203,0),0 0 26px rgba(11,203,244,.6)}}
.noscript{text-align:center;font-weight:700}

/* Mobile first tweaks */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero-art{min-height:260px;order:-1}
  .hero-candle{max-height:380px}
  .steps{grid-template-columns:1fr}
  .step:nth-child(n){rotate:0deg}
  .delivery-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav{display:none}
  .header-inner{justify-content:space-between;height:70px}
  .brand-logo{height:42px}
  .brand .slogan{font-size:.6rem}
  .brand .slogan::before,.brand .slogan::after{margin:0 .3em}
  .hero{padding:28px 0 56px}
  .hero-art{min-height:230px;padding:26px 0}
  .hero-candle{max-height:320px}
  .hero-glow{width:340px}
  .float-a{top:0;left:2%} .float-c{top:4%;right:2%} .float-b{bottom:0;left:4%}
  .hero-art .sticker{font-size:.8rem;padding:5px 11px}
  .hero-ctas .btn{flex:1 1 100%}
  .section{padding:56px 0}
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px 16px 10px;margin-inline:-16px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none;scroll-snap-align:start}
  .grid{grid-template-columns:1fr;gap:20px}
  .photo{aspect-ratio:4/3}
  .delivery-card{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}