/* Whimsi static pages: listings (/p/…), shelves and tags. Same look as the homepage: white, 3D stickers, washi tape. */
:root{
  --ink:#262523; --muted:#6B6259; --soft:#4A4540; --line:#EEEAE4; --violet:#6D3FB0; --violet-d:#4C2A85; --purple:#8A5CC7;
  --lilac:#F4EFFC; --teal:#0F766E; --mint:#EAF7F4;
  --holo:linear-gradient(115deg,#FFC9EA 0%,#BFE6FF 20%,#CBFFE0 38%,#FFF1A6 56%,#E2CCFF 76%,#FFC9EA 100%);
  --fd:'Fredoka',system-ui,sans-serif; --fb:'Nunito',system-ui,sans-serif; --fh:'Gaegu','Brush Script MT',cursive;
  --tape-edge:polygon(0 0,100% 0,99.3% 12%,100% 25%,99.4% 38%,100% 50%,99.3% 62%,100% 75%,99.4% 88%,100% 100%,0 100%,.7% 88%,0 75%,.6% 62%,0 50%,.7% 38%,0 25%,.6% 12%);
}
*{box-sizing:border-box}
html,body{background:#FFFFFF}
body{margin:0;color:var(--ink);font-family:var(--fb);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--fd);font-weight:600;margin:0;letter-spacing:0}
a{color:var(--violet)}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.hand{font-family:var(--fh);font-weight:700;font-size:23px;line-height:1;margin:0}
[hidden]{display:none!important}

/* nav: a strip of washi tape */
.nav{position:sticky;top:0;z-index:50;padding:12px 20px 0}
.navwrap{max-width:1240px;margin:0 auto;padding:8px 26px;display:flex;align-items:center;gap:18px;clip-path:var(--tape-edge);
  background:repeating-linear-gradient(-45deg,rgba(63,182,168,.12) 0 10px,rgba(63,182,168,.22) 10px 20px),rgba(245,252,251,.97);
  filter:drop-shadow(0 4px 6px rgba(58,42,26,.10));transform:rotate(-.3deg)}
.navmark{height:42px;width:auto;display:block}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:4px}
.navlinks a{font-weight:700;font-size:15px;color:#2F2C29;text-decoration:none;padding:10px 12px;border-radius:999px}
.navlinks a:hover{background:rgba(255,255,255,.7)}
.navlinks .listbtn{font-family:var(--fd);font-weight:600;font-size:16px;color:#fff;background:var(--violet);border:2px solid #fff;padding:10px 20px;margin-left:6px;box-shadow:0 6px 16px rgba(109,63,176,.28)}
.navlinks .listbtn:hover{background:var(--violet-d)}
@media(max-width:820px){.nav{padding:8px 10px 0}.navwrap{padding:6px 14px}.navlinks a:not(.listbtn){display:none}.navmark{height:34px}.navlinks .listbtn{padding:8px 14px;font-size:14.5px}}

.crumbs{font-size:14px;font-weight:700;color:var(--muted);margin:28px 0 22px}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink)}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:16px;color:#fff;background:var(--violet);border:2px solid transparent;
  border-radius:999px;padding:12px 24px;text-decoration:none;box-shadow:0 6px 16px rgba(109,63,176,.22);transition:transform .15s;margin:0 8px 8px 0;cursor:pointer}
.btn:hover{transform:translateY(-2px);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:#E6E1DA;box-shadow:none}
.btn.ghost:hover{color:var(--ink)}
.btn.ink{background:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.holo{position:relative;overflow:hidden;background:var(--holo);background-size:260% 260%;animation:holo 6s ease-in-out infinite;color:#2E1A55!important;
  border:3px solid #fff;box-shadow:0 10px 24px rgba(138,92,199,.30),0 0 0 1px rgba(138,92,199,.18)}
.holo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%);
  background-size:250% 100%;animation:glintb 3.2s ease-in-out infinite;pointer-events:none}
@keyframes holo{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes glintb{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{font-weight:800;font-size:13.5px;color:#3A3734;background:#F5F3F0;border-radius:999px;padding:6px 13px;text-decoration:none}
a.chip:hover{background:var(--ink);color:#fff}
.act{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:transparent;font-family:var(--fb);font-weight:800;font-size:15px;cursor:pointer;text-decoration:none}
.act svg{width:16px;height:16px}
.act.rate{color:var(--violet)}
.act.share{color:var(--teal)}
.act:hover{text-decoration:underline;text-underline-offset:3px}
.fm{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#F6C23E;font-family:var(--fd);font-weight:600;font-size:12.5px;color:#4A2E00;white-space:nowrap}
.fm svg{width:12px;height:12px}

/* ---------- the listing ---------- */
.listing{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center;margin:0 0 30px}
@media(max-width:860px){.listing{grid-template-columns:1fr;gap:28px}}
.listing .spark{position:absolute;left:-24px;top:-28px;z-index:3;width:58px}
.kicker{margin:0 0 6px;color:var(--c,#1D4ED8)}
.listing h1{font-size:clamp(38px,5vw,54px);line-height:1.05;margin-bottom:10px}
.kind{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15.5px;font-weight:700;color:var(--soft);margin:0 0 14px}
.lede{font-size:19px;line-height:1.55;margin:0 0 18px;max-width:56ch;color:#2F2C29}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:0 0 18px}
.facts div{border-radius:16px;padding:10px 14px}
.facts div:nth-child(1){background:#EAF1FE}.facts div:nth-child(1) dd,.facts div:nth-child(1) dd a{color:#1D4ED8}
.facts div:nth-child(2){background:#F1EAFB}.facts div:nth-child(2) dd{color:#6D28D9}
.facts div:nth-child(3){background:#E3F4EA}.facts div:nth-child(3) dd{color:#166534}
.facts div:nth-child(4){background:#FFF4D6}.facts div:nth-child(4) dd{color:#8A5A00}
.facts div:nth-child(5){background:#FCE6F0}.facts div:nth-child(5) dd{color:#BE185D}
.facts dt{font-size:12px;font-weight:800;color:var(--soft)}
.facts dd{margin:0;font-family:var(--fd);font-weight:600;font-size:16px}
.facts dd a{text-decoration:none}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 4px}
.cta .btn{margin:0}
.cta .btn.holo{font-size:19px;padding:15px 30px}
.small{font-size:13.5px;color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* the holographic sticker frame that holds the screenshot */
.holo-card{--rx:0deg;--ry:0deg;--px:50%;--py:50%;perspective:900px}
.holo-frame{position:relative;display:block;border-radius:30px;padding:8px;background:var(--holo);background-size:220% 220%;background-position:var(--px) var(--py);
  box-shadow:0 24px 50px rgba(109,63,176,.22);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(-1.5deg);transition:transform .3s ease-out,background-position .25s}
.holo-card:hover .holo-frame{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(0deg)}
.holo-face{position:relative;display:block;border-radius:24px;overflow:hidden;background:var(--tint,#F4EFFC);aspect-ratio:16/10}
.holo-face img.shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.holo-face .stk{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-50%)}
.holo-film{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.3;transition:opacity .3s;
  background:linear-gradient(115deg,transparent 15%,rgba(255,150,220,.6) 32%,rgba(140,210,255,.6) 44%,rgba(170,255,200,.6) 56%,rgba(255,236,140,.6) 68%,transparent 85%);
  background-size:250% 250%;background-position:var(--px) var(--py)}
.holo-card:hover .holo-film{opacity:.6}
.holo-glint{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 48%,transparent 56%);animation:glint 5.5s ease-in-out infinite}
@keyframes glint{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
@media(prefers-reduced-motion:reduce){.holo-glint,.holo,.holo::after{animation:none}.holo-frame{transition:none}}

/* shelves and tag pages */
.shelf-head{margin:0 0 30px}
.shelf-head h1{font-size:clamp(32px,4.6vw,48px);line-height:1.1;margin-bottom:10px}
.shelf-head .lede{font-size:18px;color:var(--soft)}
.sect{margin:56px 0}
.sect h2{font-size:32px;margin:0}
.sect .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 20px}
.sect .head a{font-weight:800;font-size:15px}

/* catalogue cards: the whole card opens the app */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
@media(max-width:580px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 28px rgba(38,37,35,.07);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(38,37,35,.12)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:3;transition:opacity .25s ease;
  background:linear-gradient(115deg,transparent 15%,rgba(255,150,220,.30) 32%,rgba(140,210,255,.30) 44%,rgba(170,255,200,.30) 56%,rgba(255,236,140,.30) 68%,transparent 85%);
  background-size:260% 260%;background-position:100% 50%;mix-blend-mode:multiply}
@media(hover:hover) and (pointer:fine){.card:hover::after{opacity:1;animation:sheen 1.6s ease forwards}}
@keyframes sheen{from{background-position:100% 50%}to{background-position:0% 50%}}
.card .open{position:absolute;inset:0;z-index:1;border-radius:inherit}
.card .shot{position:relative;height:168px;background:var(--tint,#F4EFFC);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .shot img.shotimg{width:100%;height:100%;object-fit:cover;object-position:top center}
.card .shot img.stk{width:104px;height:92px;object-fit:contain}
.card .plat{position:absolute;left:12px;bottom:12px;font-weight:800;font-size:12px;background:#fff;color:#3A3734;border-radius:999px;padding:3px 10px}
.card .fm{position:absolute;left:12px;top:12px;font-size:11.5px}
.card .body{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;padding:18px 20px 12px}
.card .name{font-size:20px;line-height:1.2;display:flex;align-items:center;gap:6px}
.card .name svg{width:15px;height:15px;flex:none;color:var(--purple);opacity:.5;transition:opacity .2s,transform .2s}
.card:hover .name svg{opacity:1;transform:translate(2px,-2px)}
.card .by{margin:-4px 0 0;font-size:13.5px;font-weight:700;color:var(--muted)}
.card .what{font-size:15px;line-height:1.5;color:#3A3734;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .labels{display:flex;flex-wrap:wrap;gap:6px}
.card .cat{font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--lbg,#F4EFFC);color:var(--lfg,#4C2A85)}
.card .tag{font-weight:700;font-size:12px;padding:4px 10px;border-radius:999px;background:#F5F3F0;color:var(--soft)}
.card .acts{position:relative;z-index:2;gap:14px;flex-wrap:nowrap;margin-top:auto;padding-top:10px;border-top:1px solid #F2EFEA}
.card .acts .act{font-size:14px;min-height:40px}
.card .price{margin-left:auto;font-family:var(--fd);font-weight:600;font-size:16px}

/* bands */
.band{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:30px 38px;border-radius:28px;background:var(--lilac);margin:64px 0 0}
.band img{width:80px;transform:rotate(-6deg)}
.band div{flex:1 1 320px;min-width:0}
.band h2{font-size:24px}
.band p{margin:4px 0 0;color:var(--soft)}
.band .btn{margin:0}
.empty-shelf{text-align:center;background:#FBF9FE;border:2.5px dashed #CDBDEB;border-radius:24px;padding:46px 24px;max-width:640px;margin:0 auto}
.empty-shelf img{width:72px}
.empty-shelf h2{font-size:24px;margin:8px 0}
.empty-shelf p{color:var(--muted);margin:0 auto 18px;max-width:46ch}

/* footer: a strip of washi tape, pale so the logo reads */
.foot{margin-top:88px;padding:0 20px 28px}
.foot .tape{max-width:1240px;margin:0 auto;padding:30px 44px;display:flex;flex-wrap:wrap;align-items:center;gap:22px;clip-path:var(--tape-edge);
  background:radial-gradient(rgba(240,111,168,.13) 1.8px,transparent 2.3px) 0 0/22px 22px,#FFF9FB;filter:drop-shadow(0 4px 6px rgba(58,42,26,.10));transform:rotate(.3deg)}
.foot .brand{flex:1 1 300px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot p{margin:0;font-size:15px;font-weight:600;color:var(--soft)}
.social{display:flex;flex-wrap:wrap;gap:12px}
.socard{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 8px;background:#fff;border:1px solid #F1DCE6;border-radius:999px;
  text-decoration:none;color:var(--ink);transition:transform .15s}
.socard:hover{transform:translateY(-2px)}
.socard b{font-family:var(--fb);font-weight:800;font-size:14.5px}
.socard>span:last-child{display:none}
.soicon{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0A66C2}
.soicon.wa{background:#25D366}
.soicon svg{width:16px;height:16px}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:999px;box-shadow:0 12px 28px rgba(38,37,35,.25);opacity:0;transition:opacity .3s;pointer-events:none}
@media(max-width:640px){.wrap{padding:0 16px}.foot .tape{padding:26px 22px}.band{padding:24px 22px}}

/* privacy policy (and any other long page of words) */
.legal{max-width:760px;margin:0 auto 72px;display:flex;flex-direction:column;gap:34px}
.legal-head{display:flex;flex-direction:column;gap:10px}
.legal-head .hand{color:var(--violet);font-size:26px}
.legal h1{font-size:clamp(36px,5vw,52px);line-height:1.08;text-wrap:balance}
.legal-date{margin:0;font-size:14.5px;font-weight:700;color:var(--muted)}
.legal .lede{margin:6px 0 0;font-size:18px;color:var(--soft)}
.legal section{display:flex;flex-direction:column;gap:12px}
.legal h2{font-size:28px;line-height:1.2;text-wrap:balance}
.legal h3{font-size:20px;line-height:1.3;margin-top:8px}
.legal p,.legal ul{margin:0;max-width:68ch}
.legal ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.legal li::marker{color:var(--purple)}
.legal-short{position:relative;background:var(--lilac);border-radius:24px;padding:30px 30px 26px}
.legal-short::before{content:"";position:absolute;top:-12px;left:36px;width:120px;height:26px;transform:rotate(-3deg);clip-path:var(--tape-edge);background:rgba(240,111,168,.45)}
.legal-short h2{font-size:24px}
.legal-table{overflow-x:auto;border:2px solid var(--line);border-radius:18px}
.legal-table:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.legal table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line)}
.legal tbody tr:last-child td{border-bottom:0}
.legal th{font-family:var(--fd);font-weight:600;background:#FBFAF8}
.legal td:first-child{font-weight:800;white-space:nowrap}
@media(max-width:640px){.legal-short{padding:24px 20px 20px}.legal h2{font-size:24px}}

/* the homepage header on the privacy page */
.navlinks .globelink{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px}
.navlinks .globelink svg{width:34px;height:34px;display:block}
.navlinks .signlink{font-family:var(--fd);font-weight:600}
@media(max-width:820px){.navlinks a.globelink{display:inline-flex;width:40px;height:40px}.navlinks a.globelink svg{width:30px;height:30px}}

/* footer: Follow [LinkedIn] / Join [WhatsApp], one under the other */
.foot .social{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.socard{justify-content:space-between;min-width:150px;padding:0 8px 0 20px}
.socard b{font-family:var(--fd);font-weight:600;font-size:16px}
.socard>span:last-child{display:flex}
.footsmall{display:flex;flex-wrap:wrap;gap:16px}
.footsmall a{font-weight:800;font-size:14.5px}