:root{--bg:oklch(.975 .018 85);--fg:oklch(.25 .03 50);--card:#fff;--primary:oklch(.52 .09 55);--primary-fg:oklch(.99 .01 85);--secondary:oklch(.88 .17 95);--muted:oklch(.94 .025 80);--muted-fg:oklch(.48 .03 55);--border:oklch(.88 .03 75);--ink:oklch(.2 .01 60);--danger:oklch(.577 .245 27.3);--display:"Fredoka","Hind Siliguri",sans-serif;--sans:"Hind Siliguri","Fredoka",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.5}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0}
h2{text-align:center;font-size:2.25rem}
.container{max-width:72rem;margin:0 auto;padding:0 1.25rem}.narrow{max-width:56rem}
.section{padding:4rem 0}.container.section{padding:4rem 1.25rem}
.center{text-align:center}.muted{color:var(--muted-fg)}.small{font-size:.875rem}.primary{color:var(--primary)}
.topbar{background:var(--ink);color:var(--primary-fg);text-align:center;padding:.5rem;font-size:.875rem;font-weight:500}
.header{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem}
.logo{height:2.5rem;width:auto}
.pill{display:inline-block;background:var(--primary);color:var(--primary-fg);border:0;border-radius:999px;padding:.5rem 1.25rem;font-family:var(--display);font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem}
.dots{background-image:radial-gradient(color-mix(in oklab,var(--primary) 18%,transparent) 1.5px,transparent 1.5px);background-size:22px 22px}
.hero{display:grid;gap:2.5rem;align-items:center;padding-top:3rem;padding-bottom:3rem}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;padding-top:5rem;padding-bottom:5rem}}
.badge{display:inline-block;background:var(--secondary);border-radius:999px;padding:.25rem 1rem;font-family:var(--display);font-weight:600;font-size:.875rem}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.wiggle{animation:wiggle 2.4s ease-in-out infinite}
.hero h1{margin-top:1.25rem;font-size:3rem;line-height:1.2}@media(min-width:768px){.hero h1{font-size:3.75rem}}
.lead{margin-top:1.25rem;font-size:1.125rem;color:var(--muted-fg)}
.price-tag{margin-top:1.5rem;display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;border:2px solid var(--ink);background:var(--card);border-radius:1.5rem;padding:.75rem 1.25rem}
.price{font-family:var(--display);font-size:2.25rem;font-weight:700;color:var(--primary)}
.old{padding-bottom:.25rem;font-size:1.125rem;color:var(--muted-fg);text-decoration:line-through}
.save{margin-bottom:.25rem;background:var(--secondary);border-radius:999px;padding:.1rem .75rem;font-family:var(--display);font-weight:700;font-size:.875rem}
.note{width:100%;font-size:.875rem;color:var(--muted-fg)}
.row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:2px solid var(--ink);background:var(--secondary);color:var(--fg);border-radius:999px;padding:1rem 2rem;font-family:var(--display);font-size:1.125rem;font-weight:700;box-shadow:0 6px 0 0 var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}.cta:active{transform:translateY(4px);box-shadow:none}.cta:disabled{opacity:.6}
.cta.full{width:100%}
.main-img{overflow:hidden;border-radius:2rem;border:4px solid var(--card);background:var(--card);box-shadow:0 20px 50px -20px color-mix(in oklab,var(--primary) 45%,transparent)}
.main-img img{aspect-ratio:1;width:100%;object-fit:cover}
.thumbs{margin-top:1rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}
.thumb{padding:0;overflow:hidden;border-radius:.75rem;border:2px solid transparent;background:none;cursor:pointer}.thumb.active{border-color:var(--primary)}
.thumb img{aspect-ratio:1;width:100%;object-fit:cover}
.features{margin-top:2.5rem;display:grid;gap:1.25rem}@media(min-width:640px){.features{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{border:2px solid var(--border);background:var(--card);border-radius:1.5rem;padding:1.5rem;text-align:center}
.feature .icon{font-size:2.25rem}.feature h3{margin-top:.75rem;font-size:1.25rem}.feature p{margin:.5rem 0 0;color:var(--muted-fg)}
.muted-bg{background:var(--muted)}
.showcase{margin:2.5rem 0;display:grid;gap:1.5rem}@media(min-width:768px){.showcase{grid-template-columns:1fr 1fr}}
.showcase img{border-radius:1.5rem;box-shadow:0 20px 50px -20px color-mix(in oklab,var(--primary) 45%,transparent)}
.table-wrap{margin-top:2rem;overflow:hidden;border:2px solid var(--ink);border-radius:1.5rem;background:var(--card)}
table{width:100%;border-collapse:collapse;text-align:center}
thead{background:var(--primary);color:var(--primary-fg);font-family:var(--display)}
th,td{padding:1rem}tbody tr:nth-child(even){background:var(--muted)}td.b{font-family:var(--display);font-weight:700}
.finder{margin-top:2rem;border:2px dashed var(--primary);border-radius:1.5rem;background:var(--card);padding:1.5rem}
.finder h3{font-size:1.4rem}.finder-grid{display:grid;gap:.75rem;margin:1rem 0}@media(min-width:640px){.finder-grid{grid-template-columns:repeat(3,1fr)}}
.finder label{font-size:.875rem;font-weight:600;display:flex;flex-direction:column;gap:.25rem}
input,select{width:100%;border:2px solid var(--border);background:var(--bg);border-radius:1rem;padding:.75rem 1rem;font:inherit;color:inherit;outline:none}
input:focus,select:focus{border-color:var(--primary)}
.result{margin-top:1rem;background:var(--secondary);border-radius:1rem;padding:1rem}
.form-wrap{max-width:42rem}
.card{border:2px solid var(--ink);background:var(--card);border-radius:2rem;padding:1.5rem;box-shadow:0 6px 0 0 var(--ink)}@media(min-width:768px){.card{padding:2.5rem}}
.card h2{font-size:1.875rem}
.order{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.label{margin:0;font-family:var(--display);font-weight:600}
.choices{display:grid;gap:.5rem;margin-top:-.5rem}.c4{grid-template-columns:repeat(4,1fr)}.c2{grid-template-columns:1fr 1fr}.c5{grid-template-columns:repeat(3,1fr)}@media(min-width:640px){.c5{grid-template-columns:repeat(5,1fr)}}
.choice{border:2px solid var(--border);background:none;border-radius:.75rem;padding:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;cursor:pointer;color:inherit}
.choice.on{border-color:var(--primary);background:var(--primary);color:var(--primary-fg)}
.qty{display:flex;align-items:center;gap:.75rem}.qty button{width:2.5rem;height:2.5rem;border-radius:999px;border:2px solid var(--border);background:none;font-weight:700;font-size:1.1rem;cursor:pointer}.qty b{width:1.5rem;text-align:center}
.summary{background:var(--muted);border-radius:1rem;padding:1rem}.summary>div{display:flex;justify-content:space-between;margin:.25rem 0}
.summary .total{border-top:2px solid var(--border);padding-top:.5rem;font-family:var(--display);font-size:1.25rem;font-weight:700}
.err{color:var(--danger);font-size:.875rem;margin:0}
.thanks{margin-top:2rem;background:var(--secondary);border-radius:1rem;padding:1.5rem;text-align:center}.thanks .big{font-family:var(--display);font-size:1.25rem;font-weight:700}.thanks a{color:var(--primary);font-weight:600}
[hidden]{display:none!important}
.footer{background:var(--ink);color:var(--primary-fg);text-align:center;padding:2.5rem 1rem}
.flogo{margin:0 auto;height:2.5rem;width:auto;background:var(--card);border-radius:.5rem;padding:.25rem .75rem}
.links{margin-top:1rem;display:flex;justify-content:center;gap:1.5rem;font-family:var(--display)}.links a{text-decoration:none}.links a:hover{color:var(--secondary)}
.copy{margin-top:1rem;font-size:.875rem;opacity:.7}
