@import url('tokens.css');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-weight:600;color:var(--ink);background:var(--white);line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{color:#e0559e}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:.01em}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);border:var(--stroke) solid var(--ink);padding:.7rem 1.2rem;font-family:var(--font-display);z-index:999}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--alt{background:var(--gray-100);border-top:var(--stroke-sm) solid var(--gray-200);border-bottom:var(--stroke-sm) solid var(--gray-200)}
.eyebrow{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:.5rem}
.h2{font-size:2.8rem;margin-bottom:2.4rem}
.lead{font-size:1.15rem;color:var(--gray-600);line-height:1.75;max-width:62ch}
.center{text-align:center}
.mt{margin-top:2.5rem}

/* buttons */
.btn{display:inline-block;font-family:var(--font-display);font-size:1.15rem;padding:.7rem 2rem;border-radius:var(--radius-pill);border:var(--stroke) solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer;text-align:center;line-height:1.2;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hover);color:var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:var(--shadow-sm)}
.btn--primary{background:var(--pink);color:var(--white);border-width:var(--stroke-lg);box-shadow:var(--shadow-lg)}
.btn--primary:hover{color:var(--white)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{color:var(--white)}
.btn--cta{background:var(--yellow);border-color:var(--white);border-width:var(--stroke-lg);box-shadow:5px 5px 0 var(--pink)}
.btn--cta:hover{box-shadow:8px 8px 0 var(--pink)}
.btn--lg{font-size:1.25rem;padding:.85rem 2.4rem}
.btn--sm{font-size:1rem;padding:.45rem 1.3rem}
.btn--block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .75rem;border-radius:var(--radius-pill);border:2px solid var(--ink);line-height:1.4;background:var(--yellow-light);color:#92400E}
.badge--pink{background:var(--pink-light);color:#9D174D}
.badge--mint{background:var(--mint-light);color:#065F46}
.badge--purple{background:var(--purple-light);color:#5B21B6}
.badge--coral{background:var(--coral-light);color:#9A3412}

/* nav */
.nav{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:var(--stroke-lg) solid var(--ink);padding:1rem var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.6rem;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{width:44px;height:44px;border:var(--stroke) solid var(--ink);border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow-sm);flex-shrink:0;background:var(--white)}
.nav__links{display:flex;gap:.3rem;align-items:center}
.nav__links a{font-weight:800;font-size:1rem;color:var(--ink);padding:.45rem 1rem;border-radius:var(--radius-pill);border:var(--stroke-sm) solid transparent;transition:all .15s}
.nav__links a:hover,.nav__links a[aria-current=page]{border-color:var(--ink);background:var(--pink-light);color:var(--ink)}
.nav__toggle{display:none;background:var(--white);border:var(--stroke-sm) solid var(--ink);border-radius:12px;width:44px;height:44px;font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow-sm);line-height:1}
.cart-count:empty{display:none}

/* marquee */
.marquee{background:var(--ink);border-top:var(--stroke-lg) solid var(--ink);border-bottom:var(--stroke-lg) solid var(--ink);padding:.8rem 0;overflow:hidden}
.marquee__track{display:flex;white-space:nowrap;width:max-content;animation:marquee 26s linear infinite;font-family:var(--font-display);font-size:1.1rem;color:var(--white)}
.marquee__item{display:flex;align-items:center;gap:.8rem;padding:0 1.6rem}
.marquee__dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--white);flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;padding:4rem 0 2.5rem}
.hero h1{font-size:4.4rem;margin-bottom:1.4rem}
.hero h1 .accent{color:var(--pink)}
.hero__flag{display:inline-flex;align-items:center;gap:.5rem;background:var(--yellow);border:var(--stroke-sm) solid var(--ink);border-radius:var(--radius-pill);padding:.3rem 1rem;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.4rem;box-shadow:var(--shadow-sm)}
.hero__art{display:grid;place-items:center}
.scatter{position:relative;width:430px;height:430px;max-width:100%}
.scatter::before{content:'';position:absolute;inset:5%;background:var(--pink-light);border-radius:50%;opacity:.55}
.s{position:absolute}
.s img{width:100%;height:auto;animation:float 5s ease-in-out infinite;filter:drop-shadow(4px 4px 0 rgba(28,28,28,.16))}
.s1{width:34%;bottom:4%;left:5%;z-index:3;transform:rotate(-4deg)}
.s2{width:34%;top:4%;left:5%;z-index:2;transform:rotate(-9deg)}
.s3{width:30%;top:6%;right:6%;z-index:2;transform:rotate(8deg)}
.s4{width:30%;bottom:5%;right:6%;z-index:2;transform:rotate(-7deg)}
.s5{width:23%;bottom:3%;left:7%;z-index:2;transform:rotate(10deg)}
.s2 img{animation-delay:.5s}.s3 img{animation-delay:1s}.s4 img{animation-delay:1.5s}.s5 img{animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.btn-row{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin-top:2.2rem}

/* cards */
.card{position:relative;background:var(--white);border:var(--stroke) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.tape{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:56px;height:20px;border-radius:3px;border:2px solid rgba(28,28,28,.3);background:rgba(255,224,74,.55);z-index:5}
.tape--pink{background:rgba(255,107,181,.4)}
.tape--mint{background:rgba(77,223,196,.45)}
.tape--purple{background:rgba(166,108,255,.4)}

.grid{display:grid;gap:2rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* product card */
.sticker{display:block;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.sticker:hover{transform:translate(-3px,-4px) rotate(-.6deg);box-shadow:var(--shadow-hover);color:var(--ink)}
.sticker__art{height:200px;display:grid;place-items:center;border-bottom:var(--stroke) solid var(--ink);background:var(--white);padding:1rem;overflow:hidden;border-radius:25px 25px 0 0}
.sticker__art img{max-height:100%;width:auto}
.sticker__body{padding:1.1rem 1.3rem 1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.sticker__name{display:block;font-family:var(--font-display);font-size:1.25rem;line-height:1.2}
.sticker__price{display:block;font-weight:700;font-size:.95rem;color:var(--gray-400)}
.sticker__price strong{color:var(--pink);font-size:1.05rem}

/* collection card */
.collection{display:block;border:var(--stroke) solid var(--ink);border-radius:var(--radius-lg);padding:2rem 1.5rem 1.6rem;text-align:center;box-shadow:var(--shadow);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.collection:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hover);color:var(--ink)}
.collection__icon{width:80px;height:80px;border:var(--stroke) solid var(--ink);border-radius:50%;display:grid;place-items:center;margin:0 auto 1.1rem;box-shadow:var(--shadow-sm)}
.collection h3{font-size:1.3rem;margin-bottom:.35rem}
.collection p{font-size:.88rem;color:var(--gray-400);line-height:1.5}
.collection .badge{margin-top:.8rem}

/* feature card */
.feature{border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow)}
.feature__icon{width:60px;height:60px;border:var(--stroke) solid var(--ink);border-radius:14px;display:grid;place-items:center;box-shadow:var(--shadow-sm);margin-bottom:1.2rem;font-size:1.6rem}
.feature h3{font-size:1.35rem;margin-bottom:.5rem}
.feature p{font-size:.97rem;color:var(--gray-600);line-height:1.65}

/* stats */
.stats{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1.8rem 0}
.stat{border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:1rem 1.5rem;text-align:center;box-shadow:var(--shadow);background:var(--white)}
.stat b{font-family:var(--font-display);font-size:2rem;color:var(--pink);display:block;line-height:1}
.stat span{font-size:.78rem;font-weight:800;color:var(--gray-400);letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem;display:block}

/* review */
.review{position:relative;background:var(--white);border:var(--stroke) solid var(--ink);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow)}
.review::before{content:'\201C';position:absolute;top:-8px;right:20px;font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--pink-light);pointer-events:none}
.review__stars{display:flex;gap:2px;margin-bottom:.8rem}
.review__stars span{width:18px;height:18px;background:var(--yellow);border:2px solid var(--ink);border-radius:3px;display:grid;place-items:center;font-size:11px;line-height:1}
.review p{font-size:1rem;color:var(--gray-600);line-height:1.7;margin-bottom:1.2rem;font-style:italic}
.review__who{display:flex;align-items:center;gap:.8rem}
.avatar{width:44px;height:44px;border-radius:50%;border:var(--stroke) solid var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-size:1rem;box-shadow:var(--shadow-sm);flex-shrink:0;background:var(--pink-light)}
.review__who b{font-family:var(--font-display);font-weight:400;font-size:1rem;display:block}
.review__who small{font-size:.78rem;color:var(--gray-400);font-weight:700}

/* faq */
.faq{display:flex;flex-direction:column;gap:1rem;max-width:800px;margin:0 auto}
.faq details{border:var(--stroke) solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.faq summary{padding:1.2rem 1.6rem;font-family:var(--font-display);font-size:1.15rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';width:28px;height:28px;border:var(--stroke-sm) solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:900;flex-shrink:0;background:var(--yellow);box-shadow:var(--shadow-sm);transition:transform .2s ease;font-family:var(--font-body)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--pink)}
.faq details>div{padding:1rem 1.6rem 1.2rem;font-size:.97rem;color:var(--gray-600);line-height:1.75;border-top:2px solid var(--gray-200)}
.faq details>div p+p{margin-top:.7rem}

/* forms */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--font-display);font-size:.9rem}
.input,select.input,textarea.input{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--ink);padding:.85rem 1.2rem;border:var(--stroke) solid var(--ink);border-radius:14px;box-shadow:var(--shadow);background:var(--white);width:100%;transition:transform var(--transition),box-shadow var(--transition)}
.input:focus{outline:none;transform:translate(-1px,-1px);box-shadow:var(--shadow-hover)}
textarea.input{min-height:140px;resize:vertical;line-height:1.6}
.input--pill{border-radius:var(--radius-pill)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.85rem;color:var(--gray-400);font-weight:700;margin-top:.5rem}

/* signup band */
.band{background:var(--pink-light);border-top:var(--stroke-lg) solid var(--ink);border-bottom:var(--stroke-lg) solid var(--ink);padding:3.5rem var(--gutter);text-align:center}
.band h2{font-size:2.4rem;margin-bottom:.6rem}
.signup{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;max-width:520px;margin:2rem auto 0}
.signup .input{flex:1;min-width:220px;width:auto}

/* dark cta */
.cta-dark{background:var(--ink);padding:4.5rem var(--gutter);text-align:center}
.cta-dark h2{font-size:3rem;color:var(--white);margin-bottom:1rem}
.cta-dark p{font-size:1.15rem;color:rgba(255,255,255,.7);margin-bottom:2.2rem}
.cta-dark .btn-row{justify-content:center;margin-top:0}

/* page header */
.page-header{position:relative;background:var(--yellow-light);border-bottom:var(--stroke-lg) solid var(--ink);padding:3rem var(--gutter) 2.6rem;overflow:hidden}
.page-header__inner{position:relative;max-width:var(--container);margin:0 auto}
.page-header h1{font-size:2.8rem}
.page-header p{margin-top:.6rem;color:var(--gray-600);max-width:62ch}
.page-header--pink{background:var(--pink-light)}
.page-header--mint{background:var(--mint-light)}
.page-header--purple{background:var(--purple-light)}

/* catalog */
.catalog{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;align-items:start;padding:2.5rem 0 4rem}
.filters{position:sticky;top:96px}
.filters h2{font-size:1.05rem;margin-bottom:.8rem}
.filters__group{margin-bottom:1.8rem;display:flex;flex-direction:column;gap:.5rem}
.pill{text-align:left;font-family:var(--font-body);font-weight:800;font-size:.92rem;padding:.5rem .9rem;border-radius:var(--radius-pill);cursor:pointer;border:var(--stroke-sm) solid var(--ink);background:var(--white);color:var(--ink);transition:all var(--transition)}
.pill[aria-pressed=true]{background:var(--pink);color:var(--white);box-shadow:var(--shadow-sm)}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem;flex-wrap:wrap;gap:1rem}
.toolbar__count{font-weight:800;color:var(--gray-400)}
.sort{display:flex;align-items:center;gap:.6rem}
.sort label{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400)}
.sort select{padding:.5rem 1rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);width:auto;font-size:.92rem;cursor:pointer;border:var(--stroke-sm) solid var(--ink);font-family:var(--font-body);font-weight:800;background:var(--white)}
.empty{padding:4rem 2rem;text-align:center;font-family:var(--font-display);font-size:1.3rem;color:var(--gray-400)}

/* product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;padding:2rem 0 4rem}
.pdp__media{position:sticky;top:96px}
.pdp__frame{height:460px;display:grid;place-items:center;border-radius:var(--radius-lg);border:var(--stroke) solid var(--ink);box-shadow:var(--shadow);background:var(--white);padding:2rem;position:relative}
.pdp__frame img{max-height:100%;width:auto}
.pdp h1{font-size:2.6rem;margin:.8rem 0 .4rem}
.pdp__price{font-weight:700;color:var(--gray-400);font-size:1.05rem;margin-bottom:1.4rem}
.pdp__price strong{color:var(--pink);font-size:1.5rem;font-family:var(--font-display);font-weight:400}
.crumbs{display:flex;gap:.5rem;align-items:center;font-weight:800;font-size:.85rem;color:var(--gray-400);padding-top:2rem}
.crumbs a{color:var(--gray-400)}
.crumbs a:hover{color:var(--ink)}
.opt-label{font-family:var(--font-display);font-size:.95rem;margin-bottom:.7rem}
.opts{display:flex;gap:.7rem;margin-bottom:1.6rem;flex-wrap:wrap}
.opt{font-family:var(--font-body);font-weight:800;font-size:.9rem;cursor:pointer;padding:.6rem 1.1rem;border-radius:16px;border:var(--stroke-sm) solid var(--ink);background:var(--white);transition:all var(--transition)}
.opt[aria-pressed=true]{background:var(--yellow);box-shadow:var(--shadow-sm);transform:translate(-1px,-1px)}
.qty{display:flex;align-items:center;border:var(--stroke-sm) solid var(--ink);border-radius:var(--radius-pill);overflow:hidden;box-shadow:var(--shadow-sm)}
.qty button{width:42px;height:44px;border:none;background:var(--white);font-family:var(--font-display);font-size:1.3rem;cursor:pointer;line-height:1}
.qty button:hover{background:var(--yellow-light)}
.qty span{width:44px;text-align:center;font-family:var(--font-display);font-size:1.1rem}
.buy{display:flex;gap:1.2rem;align-items:center;margin-bottom:1.8rem;flex-wrap:wrap}
.buy .btn{flex:1;min-width:200px}
.specs{display:flex;flex-wrap:wrap;gap:.6rem}

/* prose */
.prose{max-width:70ch;padding:3rem 0 4rem}
.prose h2{font-size:1.7rem;margin:2.2rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.prose p,.prose li{color:var(--gray-600);line-height:1.8;margin-bottom:.9rem}
.prose ul,.prose ol{padding-left:1.4rem;margin-bottom:1rem}
.prose li{margin-bottom:.4rem}
.prose strong{color:var(--ink)}
.prose .updated{font-size:.85rem;color:var(--gray-400);font-weight:700;margin-bottom:2rem}

/* footer */
.footer{background:var(--white);border-top:var(--stroke) solid var(--ink);padding:3rem var(--gutter) 2rem}
.footer__grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer__brand{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.6rem}
.footer__brand span{color:var(--pink)}
.footer p{font-size:.9rem;color:var(--gray-500);line-height:1.6;max-width:34ch}
.footer h4{font-size:1rem;margin-bottom:.8rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer ul a{font-weight:700;font-size:.92rem;color:var(--gray-500)}
.footer ul a:hover{color:var(--ink)}
.footer__base{max-width:var(--container);margin:2.5rem auto 0;padding-top:1.5rem;border-top:2px solid var(--gray-200);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--gray-400);font-weight:700}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:1080px){
  :root{--gutter:2rem}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:3.4rem}
  .hero .btn-row{justify-content:center}
  .hero__art{order:-1}
  .scatter{width:350px;height:350px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .catalog{grid-template-columns:1fr}
  .filters{position:static}
  .filters__group{flex-direction:row;flex-wrap:wrap}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:var(--stroke-lg) solid var(--ink);flex-direction:column;align-items:stretch;padding:1rem 2rem 1.5rem;gap:.4rem}
  .nav__links.open{display:flex}
  .nav__toggle{display:block}
  .nav{position:relative}
  .grid--3{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pdp__media{position:static}
  .h2,.page-header h1{font-size:2.1rem}
  .cta-dark h2{font-size:2.2rem}
}
@media (max-width:600px){
  :root{--gutter:1.4rem;--section-y:3rem}
  .hero h1{font-size:2.7rem}
  .scatter{width:290px;height:290px}
  .grid--4,.grid--2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .stats{gap:.8rem}
  .stat{flex:1;padding:.8rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}