/* GOOII theme styles. Palette, mascot, logo and case are switched by data attributes on <html> (see inc/options.php). */
/* Layout: "everything is goo". Glossy jelly surfaces and tinted soft shadows instead of outlines, gumball and blob
   shapes, sections that drip into each other, bubbly mixed-case display type. The Goo mascots and product art keep
   their ink outlines, like stickers dropped onto candy. */
:root{
  --white:#FFFFFF;
  --display:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --ui:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",sans-serif;

  --soft:0 22px 40px -20px color-mix(in srgb,var(--ink) 45%,transparent);
  --soft-sm:0 10px 22px -12px color-mix(in srgb,var(--ink) 50%,transparent);
  --gloss:inset 0 5px 0 rgba(255,255,255,.42),inset 0 -6px 0 color-mix(in srgb,var(--ink) 14%,transparent);
  --gloss-sm:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 color-mix(in srgb,var(--ink) 14%,transparent);
  --blush:#FF8FB1;   /* New Goo blush and tongue, the same pink in every theme */
  --wash-mint:color-mix(in srgb,var(--mint) 40%,var(--paper));
  --wash-lime:color-mix(in srgb,var(--lime) 32%,var(--paper));

  /* small drip tile (cart drawer, heading highlights): a scalloped edge with drips of different lengths */
  --drip-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56'%3E%3Cpath d='M0 0H240V14H222C214.8 14 215.18 23.5 214.5 29.5A4.5 4.5 0 0 1 205.5 29.5C204.82 23.5 205.2 14 198 14H184C175.2 14 176 19 168 19C160 19 160.8 14 152 14H140C130.4 14 130.9 33.2 130 44A6 6 0 0 1 118 44C117.1 33.2 117.6 14 108 14H94C83 14 84 20 74 20C64 20 65 14 54 14H42C33.6 14 33.75 28.6 33 37A5 5 0 0 1 23 37C22.25 28.6 22.4 14 14 14H0Z'/%3E%3C/svg%3E");

  /* section edges: one long, irregular stretch of goo: wavy sags and drips that are widest at the band and taper to a soft tip */
  --drip-mask-lg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 120'%3E%3Cpath d='M0 0H840V24H813C796.2 24 795.35 44.4 794 57A9 9 0 0 1 776 57C774.65 44.4 773.8 24 757 24H742C725.5 24 727 35 712 35C697 35 698.5 24 682 24H675C663 24 663.05 32.4 662 39A7 7 0 0 1 648 39C646.95 32.4 647 24 635 24H622C608.8 24 605 38.3 605 52.6C605 58.76 606 61.07 606 68A8 8 0 0 1 590 68C590 61.07 591 58.76 591 52.6C591 38.3 587.2 24 574 24H560C543.5 24 545 32 530 32C515 32 516.5 24 500 24H496C475.6 24 474.65 55 473 73A11 11 0 0 1 451 73C449.35 55 448.4 24 428 24H420C406.8 24 408 30 396 30C384 30 385.2 24 372 24H366C349.5 24 351 34 336 34C321 34 322.5 24 306 24H300C286.8 24 287.2 35.6 286 44A8 8 0 0 1 270 44C268.8 35.6 269.2 24 256 24H241C226.7 24 223 44.35 223 64.7C223 74.22 224.5 77.79 224.5 88.5A9.5 9.5 0 0 1 205.5 88.5C205.5 77.79 207 74.22 207 64.7C207 44.35 203.3 24 189 24H174C160.8 24 162 33 150 33C138 33 139.2 24 126 24H122C104 24 102.35 47.2 101 61A9 9 0 0 1 83 61C81.65 47.2 80 24 62 24H60C43.5 24 45 31 30 31C15 31 16.5 24 0 24H0Z'/%3E%3C/svg%3E");
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
:root,[data-palette="lime"]{--paper:#EEF8E4;--card:#FBFFF5;--ink:#123B28;--ink-soft:#456B55;--moss:#2E7A4B;--slime:#74D46A;--lime:#CDF05C;--mint:#A9E9C8}
[data-palette="emerald"]{--paper:#E0F9EC;--card:#F6FFFA;--ink:#043A2A;--ink-soft:#2B6A54;--moss:#087A52;--slime:#1CCB85;--lime:#3BEEA4;--mint:#E4F865}
[data-palette="jade"]{--paper:#DDF8F4;--card:#F4FFFD;--ink:#033A3A;--ink-soft:#2A6866;--moss:#087570;--slime:#14C4AE;--lime:#31EAD3;--mint:#A8F79F}
[data-palette="kelly"]{--paper:#E4FAE2;--card:#F7FFF6;--ink:#083A12;--ink-soft:#366A40;--moss:#13792A;--slime:#33C443;--lime:#5DE85D;--mint:#8FEFE3}
[data-palette="toxic"]{--paper:#E8FFEB;--card:#FAFFFA;--ink:#022E10;--ink-soft:#2D6240;--moss:#0B7A31;--slime:#20DD58;--lime:#46FF7D;--mint:#EEFF47}
[data-palette="watermelon"]{--paper:#E9F9EC;--card:#FCFFFC;--ink:#0B3A1F;--ink-soft:#3E6A50;--moss:#187A3B;--slime:#38CF62;--lime:#66EA7C;--mint:#FFA6C1}
[data-palette="apple"]{--paper:#EEFAE2;--card:#FCFFF8;--ink:#143A0B;--ink-soft:#46693A;--moss:#3A7A15;--slime:#78D72C;--lime:#A6F43E;--mint:#FF9F94}
[data-palette="alien"]{--paper:#ECFAEA;--card:#FBFFFA;--ink:#0D3318;--ink-soft:#3E6148;--moss:#1F7A2E;--slime:#48D748;--lime:#86FF5A;--mint:#CDB6FF}
[data-palette="kiwi"]{--paper:#F2F9E2;--card:#FDFFF7;--ink:#1F390C;--ink-soft:#4F673E;--moss:#4A7A19;--slime:#86C935;--lime:#9DE34B;--mint:#FFD54F}
[data-palette="seafoam"]{--paper:#E2F7F3;--card:#F7FFFD;--ink:#053832;--ink-soft:#2F6660;--moss:#0D766A;--slime:#2AC89D;--lime:#5EF0C4;--mint:#A3D5FF}
/* Blue themes: bright candy-wrapper blues with navy ink and a contrasting second colour */
[data-palette="electric"]{--paper:#E5F3FF;--card:#FAFDFF;--ink:#06204A;--ink-soft:#36557F;--moss:#0B5CC9;--slime:#3A9BFF;--lime:#5CD3FF;--mint:#FFD64A}
[data-palette="blueraz"]{--paper:#EAF0FF;--card:#FCFDFF;--ink:#10184A;--ink-soft:#44507F;--moss:#2643C9;--slime:#5B8CFF;--lime:#4FA8FF;--mint:#FF8FD0}
[data-palette="arctic"]{--paper:#E6FAFF;--card:#FAFEFF;--ink:#052C3D;--ink-soft:#2F6072;--moss:#0B6E8E;--slime:#22C3E6;--lime:#5BE3FF;--mint:#C8B6FF}
[data-palette="cobalt"]{--paper:#E3EAFF;--card:#FBFCFF;--ink:#0A1640;--ink-soft:#3E4C7E;--moss:#1E3AB8;--slime:#5C7CFF;--lime:#6E9BFF;--mint:#FFB65C}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;margin:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
svg{max-width:100%}
:focus-visible{outline:3px solid var(--moss);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 18px;background:var(--lime);border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.bubbles{background-image:
  radial-gradient(circle at 18% 24%,color-mix(in srgb,var(--slime) 16%,transparent) 0 7px,transparent 8px),
  radial-gradient(circle at 72% 58%,color-mix(in srgb,var(--slime) 12%,transparent) 0 12px,transparent 13px),
  radial-gradient(circle at 42% 88%,color-mix(in srgb,var(--slime) 14%,transparent) 0 4px,transparent 5px),
  radial-gradient(circle at 90% 12%,color-mix(in srgb,var(--slime) 10%,transparent) 0 5px,transparent 6px);
  background-size:260px 260px}

/* ---------- icons, illustrations, shared motion ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:16px;height:16px}
.ao{stroke:var(--ink);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.fk{fill:var(--ink)}.fl{fill:var(--lime)}.fg{fill:var(--slime)}.fm{fill:var(--mint)}.fw{fill:var(--white)}.fd{fill:var(--moss)}.fn{fill:none}
.ns{stroke:none}.thin{stroke-width:2.5}
.ring-text{font-family:var(--ui);font-weight:600;font-size:10.5px;fill:var(--lime)}
.tone-mint{background-color:var(--mint)}
.tone-lime{background-color:var(--lime)}
.tone-slime{background-color:var(--slime)}
.tone-paper{background-color:var(--paper)}
.tone-moss{background-color:var(--moss);color:var(--white)}
@keyframes jelly{0%,100%{transform:scale(1,1)}25%{transform:scale(1.1,.9)}45%{transform:scale(.94,1.06)}65%{transform:scale(1.04,.96)}85%{transform:scale(.99,1.01)}}
@keyframes morph{0%,100%{border-radius:62% 38% 46% 54%/55% 45% 55% 45%}33%{border-radius:42% 58% 60% 40%/45% 58% 42% 55%}66%{border-radius:55% 45% 38% 62%/60% 40% 60% 40%}}
@keyframes float{50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes bob{50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wobble{50%{transform:translateY(-8px) rotate(-3deg)}}

/* dripping edge: hangs off the bottom of its section in that section's colour */
.drip{position:absolute;left:0;right:0;top:calc(100% - 2px);height:120px;background:var(--drip,var(--paper));
  -webkit-mask:var(--drip-mask-lg) repeat-x var(--drip-x,0px) 0/840px 120px;mask:var(--drip-mask-lg) repeat-x var(--drip-x,0px) 0/840px 120px;pointer-events:none;z-index:3}
.after-drip{padding-top:clamp(132px,14vw,168px)}
.drip--wash{--drip:var(--wash-mint);--drip-x:0px}
.drip--lime{--drip:var(--wash-lime);--drip-x:-300px}
.drip--ink{--drip:var(--ink);--drip-x:-560px}

/* goo highlight: a jelly blob behind a word, with drips running off it */
.goo-hl{position:relative;display:inline-block;padding:0 .16em;isolation:isolate;color:var(--ink)}
.goo-hl::before{content:"";position:absolute;inset:.08em 0 .04em;background:var(--hl,var(--lime));border-radius:.42em .55em .38em .5em;box-shadow:inset 0 .07em 0 rgba(255,255,255,.45);z-index:-1}
.goo-hl::after{content:"";position:absolute;left:5%;right:5%;top:calc(100% - .2em);height:.42em;background:var(--hl,var(--lime));-webkit-mask:var(--drip-mask) no-repeat center top/100% 100%;mask:var(--drip-mask) no-repeat center top/100% 100%;z-index:-1}

/* ---------- announcement + header ---------- */
.announce{background:var(--ink);color:var(--card);font-size:14px;font-weight:500}
.announce-in{display:flex;justify-content:center;align-items:center;gap:6px 12px;flex-wrap:wrap;padding-block:8px;text-align:center}
.announce b{color:var(--lime);font-weight:600}
.announce .ic{color:var(--lime)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--card);box-shadow:0 10px 26px -20px color-mix(in srgb,var(--ink) 55%,transparent)}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:10px}
.head-nav{display:flex;align-items:center;gap:2px}
.nav-link{font-weight:600;font-size:16px;text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .15s}
.nav-link:hover{background:var(--wash-lime)}
.head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--paper);transition:background .15s}
.icon-btn:hover{background:var(--wash-lime);animation:jelly .6s}
.menu-btn{display:none}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.lg{display:none}
:root:not([data-logo]) .lg-classic,[data-logo="classic"] .lg-classic{display:flex}
[data-logo="melt"] .lg-melt,[data-logo="googly"] .lg-googly,[data-logo="badge"] .lg-badge,[data-logo="gmark"] .lg-gmark{display:block}
/* lowercase "gooii" or capital-G "Gooii": every logo has both, the case switch hides one */
:root[data-case="cap"] .lg.lc,:root:not([data-case="cap"]) .lg.uc{display:none}
:root[data-case="cap"] .wc-lc,:root:not([data-case="cap"]) .wc-uc{display:none}
.lg-classic{align-items:center;gap:8px}
.logo-goo{width:48px;height:48px;overflow:visible}
.lg-melt{height:58px;width:auto;overflow:visible}
.lg-googly{height:50px;width:auto;overflow:visible}
.lg-badge{height:54px;width:auto;overflow:visible;filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--ink) 20%,transparent))}
.lg-word{font-family:var(--display);font-size:54px;fill:var(--ink)}
.melt-drip{fill:var(--ink)}
.gl-white{fill:var(--white);stroke:var(--ink);stroke-width:7}
.gl-eye{transform-box:fill-box;transform-origin:center;animation:blink 6s 2s infinite}
.gl-pupil{animation:glance 7s ease-in-out infinite}
@keyframes glance{0%,38%,100%{transform:none}44%,62%{transform:translate(-9px,-2px)}68%,80%{transform:translate(-2px,3px)}}
.bd-blob{fill:url(#g2fill);stroke:var(--moss);stroke-width:3;stroke-linejoin:round}
.bd-word{font-size:44px}
.lg-gmark{height:58px;width:auto;overflow:visible;filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--ink) 20%,transparent))}
.gm-blob{fill:url(#g2fill);stroke:var(--moss);stroke-width:3;stroke-linejoin:round}
.gm-word{font-size:50px}
.logo:hover .lg:not(.lg-classic){animation:jelly .6s}
.logo:hover .logo-goo{animation:jelly .6s}
.logo-word{font-family:var(--display);font-size:40px;line-height:1;color:var(--ink)}
.cart-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.cart-ic{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--lime);box-shadow:var(--gloss-sm),var(--soft-sm)}
.cart-count{position:absolute;top:-6px;left:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:12px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.cart-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.cart-txt small{font-size:12px;font-weight:500;color:var(--ink-soft)}
.cart-txt b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.bump .cart-ic,.bump.tab-cart .ic{animation:jelly .6s}
.mobile-menu{background:var(--card)}

/* ---------- shared bits ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 30px;border:0;border-radius:999px;background:var(--lime);color:var(--ink);font-family:var(--ui);font-weight:600;font-size:18px;text-decoration:none;box-shadow:var(--gloss),var(--soft-sm);transition:transform .15s}
.btn:hover{animation:jelly .65s}
.btn:active{transform:scale(.96)}
.btn--ghost{background:var(--card)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;font-size:14px;box-shadow:var(--soft-sm)}
.pill--mint{background:var(--mint)}
.pill--lime{background:var(--lime)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;padding-block:clamp(48px,6vw,84px) 36px;overflow:hidden}
.hero::before{content:"";position:absolute;width:640px;height:640px;right:-180px;top:-200px;border-radius:50%;background:var(--wash-lime);z-index:-1}
.hero::after{content:"";position:absolute;width:300px;height:300px;left:-120px;bottom:-140px;border-radius:50%;background:var(--wash-mint);z-index:-1}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,64px);align-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease}
.hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;min-width:0}
.hero-title{font-size:clamp(3.2rem,7.4vw,6.4rem);line-height:.94}
.hero-lede{margin:0;max-width:32rem;font-size:19px;color:var(--ink-soft)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:5px 13px;border-radius:999px;background:var(--wash-mint);font-weight:500;font-size:14px}
.hero-art{position:relative;display:grid;place-items:center;padding:clamp(16px,3vw,36px);min-width:0}
.blob{position:relative;width:min(100%,460px);aspect-ratio:1;display:grid;place-items:center;border-radius:62% 38% 46% 54%/55% 45% 55% 45%;box-shadow:inset 0 -22px 0 color-mix(in srgb,var(--ink) 10%,transparent),inset 0 18px 0 rgba(255,255,255,.35),var(--soft);animation:morph 10s ease-in-out infinite}
.blob .art{width:62%;height:auto;aspect-ratio:1;overflow:visible;animation:float 4s ease-in-out infinite}
.badge-goo{position:absolute;top:4%;left:2%;width:29%;max-width:132px;aspect-ratio:1;z-index:2;filter:drop-shadow(0 10px 12px color-mix(in srgb,var(--ink) 28%,transparent))}
.badge-goo .ring{display:block;width:100%;height:100%;animation:spin 24s linear infinite}
.badge-goo .goo{position:absolute;left:27%;top:25%;width:46%;height:46%;overflow:visible}
.bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 16%,transparent 18%),color-mix(in srgb,var(--mint) 75%,transparent);box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--ink) 10%,transparent);animation:bob 5s ease-in-out infinite}
.bub--a{width:48px;height:48px;top:6%;right:9%}
.bub--b{width:26px;height:26px;bottom:16%;right:3%;animation-delay:-1.6s}
.bub--c{width:18px;height:18px;bottom:6%;left:16%;animation-delay:-3.2s}
.dots{display:flex;justify-content:center;gap:10px;margin-top:30px}
.dot{width:14px;height:14px;border-radius:999px;border:0;padding:0;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:width .35s cubic-bezier(.3,1.6,.5,1),background .2s}
.dot[aria-pressed="true"]{width:40px;background:var(--ink)}

/* ---------- ticker ---------- */
.ticker-wrap{position:relative;z-index:4;overflow-x:clip;padding-top:12px}
.ticker{position:relative;width:110%;margin-left:-5%;background:var(--lime);transform:rotate(-1.6deg);box-shadow:var(--gloss)}
.ticker-clip{overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.tgroup{display:flex;align-items:center;gap:26px;padding-right:26px;padding-block:15px}
.tgroup span{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);white-space:nowrap;line-height:1}
.tgroup .ic{width:22px;height:22px;color:var(--moss)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(88px,10vw,124px) clamp(64px,8vw,100px);scroll-margin-top:80px}
.sec--wash{background-color:var(--wash-mint)}
.sec--lime{background-color:var(--wash-lime)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head > div{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:46rem;min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.sec-title{font-size:clamp(2.4rem,5vw,4rem)}
.sec-sub{margin:0;color:var(--ink-soft);font-size:18px;max-width:38rem}
.link-more{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border:0;border-radius:999px;background:var(--card);font-weight:600;text-decoration:none;box-shadow:var(--soft-sm)}
.link-more:hover{animation:jelly .6s}

/* categories: gumballs */
.cat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2.4vw,30px)}
.cat{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:center;min-width:0}
.cat-ball{position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -14px 0 color-mix(in srgb,var(--ink) 12%,transparent),inset 0 12px 0 rgba(255,255,255,.3),var(--soft)}
.cat-ball::after{content:"";position:absolute;top:11%;left:19%;width:24%;height:14%;border-radius:50%;background:rgba(255,255,255,.6);transform:rotate(-28deg)}
.cat .art{position:relative;z-index:1;width:60%;height:auto;aspect-ratio:1;overflow:visible;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cat:hover .cat-ball{animation:jelly .65s}
.cat:hover .art{transform:rotate(-8deg) scale(1.06)}
.cat-name{font-family:var(--display);font-size:clamp(18px,1.9vw,23px);line-height:1;margin-top:6px}
.cat-count{font-size:14px;font-weight:500;color:var(--ink-soft)}

/* menu */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.fchip{flex:none;padding:9px 16px;border:0;border-radius:999px;background:var(--card);font-weight:600;font-size:15px;box-shadow:var(--soft-sm);transition:background .15s}
.fchip:hover{background:var(--paper)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--lime)}
.fchip small{font-size:12px;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.fchip--type{background:var(--lime)}
.search{display:flex;align-items:center;gap:8px;padding:0 18px;height:50px;border-radius:999px;background:var(--card);box-shadow:inset 0 2px 6px color-mix(in srgb,var(--ink) 12%,transparent);min-width:0;flex:0 1 300px}
.search input{border:0;background:none;font:inherit;font-weight:500;color:var(--ink);width:100%;min-width:0;outline:none}
.search input::placeholder{color:var(--ink-soft)}
.search:focus-within{outline:3px solid var(--moss);outline-offset:3px}
.result-line{margin:0 0 22px;font-weight:500;color:var(--ink-soft);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:32px;padding:10px;box-shadow:var(--soft);min-width:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.card:hover{transform:translateY(-6px)}
.card-art{position:relative;display:grid;place-items:center;aspect-ratio:1/.86;border-radius:24px;overflow:hidden;box-shadow:inset 0 -10px 0 color-mix(in srgb,var(--ink) 9%,transparent),inset 0 8px 0 rgba(255,255,255,.3)}
.card-art::before{content:"";position:absolute;left:24%;right:24%;bottom:11%;height:11%;border-radius:50%;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.card-art .art{position:relative;width:56%;height:auto;aspect-ratio:1;overflow:visible;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card:hover .card-art .art{transform:translateY(-8px) rotate(-6deg) scale(1.05)}
.badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--card);color:var(--ink);box-shadow:var(--soft-sm)}
.badge--top{background:var(--ink);color:var(--lime)}
.badge--staff{background:var(--lime)}
.badge--low{background:var(--moss);color:var(--white)}
.card-body{display:flex;flex-direction:column;gap:9px;padding:14px 10px 8px;flex:1}
.card-cat{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
.card-name{font-size:24px;line-height:1.04}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.type{padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600}
.type--indica{background:var(--moss);color:var(--white)}
.type--sativa{background:var(--lime)}
.type--hybrid{background:var(--mint)}
.thc{font-size:14px;font-weight:500;color:var(--ink-soft)}
.rating{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.stars{display:inline-flex;gap:1px}
.ic.star{width:15px;height:15px;fill:var(--slime);stroke:none}
.opts{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.opt span{display:block;padding:5px 12px;border-radius:999px;font-size:14px;font-weight:500;background:var(--paper);transition:background .15s}
.opt:hover span{background:var(--wash-mint)}
.opt input:checked + span{background:var(--ink);color:var(--lime);font-weight:600}
.opt input:focus-visible + span{outline:3px solid var(--moss);outline-offset:2px}
.card-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .price{font-family:var(--display);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.add{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--lime);font-weight:600;font-size:16px;box-shadow:var(--gloss-sm),var(--soft-sm)}
.add .long{display:none}
.add:hover{animation:jelly .6s}
.add:active{transform:scale(.94)}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 16px;text-align:center}
.empty svg{width:120px;height:120px;overflow:visible}
.empty p{margin:0;font-weight:600;font-size:19px}

/* vibe tiles */
.mood-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mood{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;padding:28px 28px 26px;border:0;border-radius:48px 30px 52px 34px;box-shadow:var(--gloss),var(--soft);min-height:290px;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.mood:hover{transform:translateY(-6px) rotate(-.6deg)}
.mood--indica{background-color:var(--moss);color:var(--white)}
.mood--hybrid{background-color:var(--mint)}
.mood--sativa{background-color:var(--slime)}
.mood h3{font-size:clamp(2rem,3.4vw,2.8rem)}
.mood p{margin:0;font-size:17px;max-width:21ch}
.mood-go{position:relative;z-index:2;margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;padding:8px 16px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:var(--soft-sm)}
/* Vibe-tile mascots act out their vibe on hover or keyboard focus (and when scrolled into view on touch screens, via .play) */
.mood-goo{position:absolute;right:-8px;bottom:-14px;width:140px;height:140px;overflow:visible;transform:rotate(-8deg);transition:transform .25s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .mood-goo{transform:rotate(-2deg)}

/* indica: yawns, melts into the couch, snores */
.goo-indica .melt{transform-origin:66px 112px}
.mood--indica .mood-goo{bottom:-4px}
.goo-indica .mouth,.goo-indica .z{transform-box:fill-box;transform-origin:center}
.goo-indica .z2{transform:translate(10px,-12px) scale(1.3)}
.goo-indica .z3{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-indica .melt{animation:pancake 3.6s cubic-bezier(.45,0,.25,1) forwards,pancakeBreathe 2.8s 3.6s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-indica .mouth{animation:yawn 1.3s ease-in-out,snore 2.6s 1.3s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-indica .z{animation:zpancake 2.4s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-indica .z2{animation-delay:-.8s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-indica .z3{animation-delay:-1.6s}
@keyframes melt{to{transform:scale(1.16,.8)}}
@keyframes pancake{0%{transform:none}25%{transform:scale(1.12,.84)}100%{transform:scale(1.45,.36)}}
@keyframes pancakeBreathe{0%,100%{transform:scale(1.45,.36)}50%{transform:scale(1.5,.33)}}
@keyframes zpancake{0%{opacity:0;transform:translate(-4px,46px) scale(.6)}20%,80%{opacity:1}100%{opacity:0;transform:translate(16px,4px) scale(1.4) rotate(12deg)}}
@keyframes breathe{0%,100%{transform:scale(1.16,.8)}50%{transform:scale(1.21,.76)}}
@keyframes yawn{0%,100%{transform:none}35%,70%{transform:scale(1.7,2.8)}}
@keyframes snore{0%,100%{transform:none}50%{transform:scale(1.35,1.6)}}
@keyframes zfloat{0%{opacity:0;transform:translate(0,0) scale(.6)}20%,80%{opacity:1}100%{opacity:0;transform:translate(18px,-34px) scale(1.5) rotate(12deg)}}

/* hybrid: hops, pops an arm up and waves, blinks */
.goo-hybrid .hop{transform-origin:60px 112px}
.goo-hybrid .arm{transform-origin:94px 64px;transform:rotate(-150deg)}
.goo-hybrid .eyes{transform-box:fill-box;transform-origin:center}
.goo-hybrid .pupils{transition:transform .25s}
.goo-hybrid .smile,.goo-hybrid .grin{transition:opacity .15s}
.goo-hybrid .grin{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .hop{animation:hop .7s ease-out}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .arm{animation:armUp .35s ease-out forwards,wave .8s .35s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .eyes{animation:blink 2.4s .5s infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .pupils{transform:translate(2px,-3px)}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .smile{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .grin{opacity:1}
@keyframes hop{18%{transform:scale(1.1,.88)}45%{transform:translateY(-12px) scale(.94,1.07)}72%{transform:scale(1.06,.94)}}
@keyframes armUp{from{transform:rotate(-150deg)}to{transform:rotate(25deg)}}
@keyframes wave{0%,100%{transform:rotate(25deg)}50%{transform:rotate(62deg)}}
@keyframes blink{0%,40%,48%,100%{transform:none}44%{transform:scaleY(.1)}}

/* sativa: bounces off the walls, flails, eyes buzzing */
.goo-sativa .bounce{transform-origin:60px 112px}
.goo-sativa .arm-l{transform-origin:24px 58px}
.goo-sativa .arm-r{transform-origin:96px 58px}
.goo-sativa .mouth{transform-box:fill-box;transform-origin:50% 0}
.goo-sativa .tw{transform-box:fill-box;transform-origin:center}
.goo-sativa .tw3,.goo-sativa .tw4,.goo-sativa .lines{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .bounce{animation:boing .5s cubic-bezier(.3,0,.3,1) infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .arm-l{animation:flailL .22s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .arm-r{animation:flailR .22s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .pupils{animation:jitter .3s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .mouth{animation:yell .25s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .lines{animation:flash .18s linear infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .tw{animation:twinkle .9s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .tw2{animation-delay:-.3s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .tw3{animation-delay:-.6s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-sativa .tw4{animation-delay:-.45s}
@keyframes boing{0%,100%{transform:scale(1.12,.86)}45%,55%{transform:translateY(-16px) scale(.93,1.08)}}
@keyframes flailL{from{transform:rotate(-22deg)}to{transform:rotate(26deg)}}
@keyframes flailR{from{transform:rotate(22deg)}to{transform:rotate(-26deg)}}
@keyframes jitter{0%,100%{transform:none}25%{transform:translate(1.6px,-1.2px)}50%{transform:translate(-1.6px,1px)}75%{transform:translate(1px,1.6px)}}
@keyframes yell{to{transform:scaleY(1.22)}}
@keyframes flash{from{opacity:1}to{opacity:.2}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.5)}50%{opacity:1;transform:scale(1.35) rotate(90deg)}}

/* Goo (classic shape, remastered) and Drip (glossy droplet with a curl, sitting in a puddle) share one finish:
   gradient jelly body, soft moss rim instead of an ink outline, shine, inner bubbles, pink blush. Goo is the default. */
.m-og,.m-drip,.m-wob{display:none}
[data-mascot="classic"] .m-og,[data-mascot="drip"] .m-drip,[data-mascot="wobble"] .m-wob{display:revert}
[data-mascot="classic"] .m-goo,[data-mascot="drip"] .m-goo,[data-mascot="wobble"] .m-goo{display:none}
.g2s0{stop-color:color-mix(in srgb,var(--lime) 50%,#fff)}
.g2s1{stop-color:var(--lime)}
.g2s2{stop-color:var(--slime)}
.g2b{fill:url(#g2fill);stroke:var(--moss);stroke-width:3;stroke-linejoin:round}
.g2curl-o{fill:none;stroke:var(--moss);stroke-width:10;stroke-linecap:round}
.g2curl{fill:none;stroke:color-mix(in srgb,var(--lime) 70%,#fff);stroke-width:4.5;stroke-linecap:round}
.g2blush{fill:var(--blush);opacity:.55}
.g2tongue{fill:var(--blush)}
.g2gloss{fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:round;opacity:.75}
.g2dot{fill:var(--white);opacity:.8}
.g2bub{fill:var(--white);opacity:.4}
.g2line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.g2z{stroke-width:2.5}
.g2snot{fill:color-mix(in srgb,var(--mint) 45%,#fff);stroke:var(--white);stroke-width:1.5;opacity:.85}
.g2spark{fill:var(--lime);stroke:var(--moss);stroke-width:1.5;stroke-linejoin:round}
.g3eye{fill:var(--white);stroke:var(--moss);stroke-width:2}
.mood-goo{filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--ink) 22%,transparent))}

/* New Goo, indica: sinks into its puddle and snores a bubble */
.g2-indica .melt{transform-origin:60px 112px}
.g2-indica .z{transform-box:fill-box;transform-origin:center}
.g2-indica .z2{transform:translate(10px,-12px) scale(1.3)}
.g2-indica .z3{opacity:0}
.g2-indica .snot{transform-box:fill-box;transform-origin:0% 60%;transform:scale(.6)}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-indica .melt{animation:melt 1.3s ease-in-out forwards,breathe 2.6s 1.3s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-indica .snot{animation:snot 2.6s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-indica .z{animation:zfloat 2.1s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-indica .z2{animation-delay:-.7s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-indica .z3{animation-delay:-1.4s}
@keyframes snot{0%,100%{transform:scale(.6)}50%{transform:scale(1.8)}}

/* New Goo, hybrid: hops, its curl boings, an arm pops out to wave */
.g2-hybrid .hop{transform-origin:60px 112px}
.g2-hybrid .curl{transform-origin:59px 24px}
.g2-hybrid .arm{transform-origin:90px 78px;transform:rotate(35deg)}
.g2-hybrid .eyes{transform-box:fill-box;transform-origin:center}
.g2-hybrid .smile,.g2-hybrid .grin{transition:opacity .15s}
.g2-hybrid .grin{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .hop{animation:hop .7s ease-out}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .curl{animation:curlBoing .9s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .arm{animation:arm2Up .35s ease-out forwards,wave2 .8s .35s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .eyes{animation:blink 2.4s .5s infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .smile{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .grin{opacity:1}
@keyframes curlBoing{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg)}65%{transform:rotate(12deg)}}
@keyframes arm2Up{from{transform:rotate(35deg)}to{transform:rotate(-55deg)}}
@keyframes wave2{0%,100%{transform:rotate(-55deg)}50%{transform:rotate(-72deg)}}

/* New Goo, sativa: curl springs, arms flail, eyes turn into spinning stars */
.g2-sativa .bounce{transform-origin:60px 112px}
.g2-sativa .curl{transform-origin:60px 24px}
.g2-sativa .arm-l{transform-origin:26px 66px}
.g2-sativa .arm-r{transform-origin:94px 66px}
.g2-sativa .eye-star,.g2-sativa .tw{transform-box:fill-box;transform-origin:center}
.g2-sativa .mouth{transform-box:fill-box;transform-origin:50% 0}
.g2-sativa .tw3,.g2-sativa .tw4,.g2-sativa .lines{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .bounce{animation:boing .5s cubic-bezier(.3,0,.3,1) infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .curl{animation:spring .25s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .arm-l{animation:flailL .22s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .arm-r{animation:flailR .22s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .eye-star{animation:starSpin .7s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .mouth{animation:yell .25s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .lines{animation:flash .18s linear infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .tw{animation:twinkle .9s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .tw2{animation-delay:-.3s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .tw3{animation-delay:-.6s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-sativa .tw4{animation-delay:-.45s}
@keyframes spring{from{transform:scaleY(.75) rotate(-12deg)}to{transform:scaleY(1.25) rotate(12deg)}}
@keyframes starSpin{to{transform:rotate(360deg) scale(1.15)}}

/* Wobble: a sour-sugared jelly cube with a cannabis sprout on its head */
.w4stem{fill:none;stroke:var(--moss);stroke-width:3;stroke-linecap:round}
.w4leaf{fill:var(--slime);stroke:var(--moss);stroke-width:2}
.w4top{fill:var(--white);opacity:.3}
.w4sug{fill:var(--white);opacity:.75}
.w4mouth{stroke-width:2.6}

/* Wobble, indica: rocks, flops over onto its side, breathes there */
.w4-indica .flop{transform-origin:22px 106px}
.w4-indica .breath{transform-origin:60px 106px}
.w4-indica .z{transform-box:fill-box;transform-origin:center}
.w4-indica .z2{transform:translate(8px,-12px) scale(1.3)}
.w4-indica .z3{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-indica .flop{animation:flop 2.6s cubic-bezier(.5,0,.3,1) forwards}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-indica .breath{animation:breathe2 2.6s 2.6s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-indica .z{animation:zfloat 2.2s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-indica .z2{animation-delay:-.73s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-indica .z3{animation-delay:-1.46s}
@keyframes flop{0%{transform:none}18%{transform:rotate(7deg)}40%{transform:rotate(-10deg)}72%{transform:rotate(-86deg)}80%{transform:rotate(-78deg)}88%{transform:rotate(-87deg)}100%{transform:rotate(-84deg)}}
@keyframes breathe2{0%,100%{transform:none}50%{transform:scale(1.04,.95)}}

/* Wobble, hybrid: hops with a jello jiggle on landing, sprout bobs, waves */
.w4-hybrid .hop{transform-origin:60px 106px}
.w4-hybrid .sprout{transform-origin:60px 31px}
.w4-hybrid .arm{transform-origin:94px 64px;transform:rotate(-160deg)}
.w4-hybrid .eyes{transform-box:fill-box;transform-origin:center}
.w4-hybrid .smile,.w4-hybrid .grin{transition:opacity .15s}
.w4-hybrid .grin{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .hop{animation:hopJiggle .9s ease-out}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .sprout{animation:curlBoing .9s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .arm{animation:arm4Up .35s ease-out forwards,wave .8s .35s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .eyes{animation:blink 2.4s .5s infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .smile{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .grin{opacity:1}
@keyframes arm4Up{from{transform:rotate(-160deg)}to{transform:rotate(25deg)}}
@keyframes hopJiggle{18%{transform:scale(1.1,.88)}40%{transform:translateY(-12px) scale(.94,1.07)}62%{transform:scale(1.08,.92) skewX(5deg)}74%{transform:skewX(-4deg)}86%{transform:skewX(2deg)}}

/* Wobble, sativa: jiggles like jello while bouncing, sprout spins like a propeller, eyes go > < */
.w4-sativa .bounce,.w4-sativa .jiggle{transform-origin:60px 106px}
.w4-sativa .prop{transform-origin:60px 31px}
.w4-sativa .mouth{transform-box:fill-box;transform-origin:50% 0}
.w4-sativa .tw{transform-box:fill-box;transform-origin:center}
.w4-sativa .eyes-calm,.w4-sativa .eyes-xx{transition:opacity .1s}
.w4-sativa .eyes-xx,.w4-sativa .tw3,.w4-sativa .tw4,.w4-sativa .lines{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .bounce{animation:boing .5s cubic-bezier(.3,0,.3,1) infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .jiggle{animation:jello .25s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .prop{animation:propeller .18s linear infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .eyes-calm{opacity:0}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .eyes-xx{opacity:1}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .mouth{animation:yell .25s ease-in-out infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .lines{animation:flash .18s linear infinite alternate}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .tw{animation:twinkle .9s ease-in-out infinite}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .tw2{animation-delay:-.3s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .tw3{animation-delay:-.6s}
:is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-sativa .tw4{animation-delay:-.45s}
@keyframes jello{from{transform:skewX(-7deg)}to{transform:skewX(7deg)}}
@keyframes propeller{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}

/* about */
.intro{margin:0;max-width:40rem;font-size:clamp(21px,2.4vw,28px);font-weight:500;line-height:1.4}
.intro mark{background:var(--card);color:var(--ink);padding:.02em .3em;border-radius:.5em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro-sub{margin:16px 0 0;font-size:18px;color:var(--ink-soft)}
.stats{list-style:none;margin:44px 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(12px,2.6vw,32px)}
.stat{position:relative;display:grid;place-items:center;align-content:center;text-align:center;width:min(var(--s,170px),42vw);aspect-ratio:1;border-radius:50%;padding:14px;box-shadow:inset 0 -12px 0 color-mix(in srgb,var(--ink) 10%,transparent),inset 0 10px 0 rgba(255,255,255,.35),var(--soft);animation:bob 6s ease-in-out infinite}
.stat:nth-child(2){animation-delay:-1.5s}.stat:nth-child(3){animation-delay:-3s}.stat:nth-child(4){animation-delay:-4.5s}
.stat::after{content:"";position:absolute;top:12%;left:20%;width:22%;height:12%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-28deg)}
.stat b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,32px);line-height:1}
.stat span{font-size:13px;font-weight:600;max-width:12ch;line-height:1.25;margin-top:6px}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.reason{padding:24px;background:var(--card);border-radius:30px;box-shadow:var(--soft)}
.drop-ic{display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:var(--lime);box-shadow:var(--gloss-sm)}
.drop-ic .ic{transform:rotate(45deg)}
.reason h3{font-size:22px;line-height:1.1;margin-bottom:8px}
.reason p{margin:0;font-size:16px;color:var(--ink-soft)}

/* club */
.club{background-color:var(--ink);color:var(--card)}
.club-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rise{position:absolute;bottom:-60px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35) 0 16%,transparent 18%),color-mix(in srgb,var(--lime) 22%,transparent);animation:rise 11s linear infinite}
@keyframes rise{0%{transform:translateY(0)}100%{transform:translateY(-760px);opacity:0}}
.club-in{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center}
.club-blob{width:min(100%,380px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;background:var(--mint);border-radius:58% 42% 50% 50%/50% 55% 45% 50%;box-shadow:inset 0 -18px 0 color-mix(in srgb,var(--ink) 14%,transparent),inset 0 16px 0 rgba(255,255,255,.4);animation:morph 10s ease-in-out infinite}
.club-blob svg{width:70%;height:70%;overflow:visible;animation:wobble 4s ease-in-out infinite}
.club-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.club h2{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1}
.club p{margin:0;font-size:19px;max-width:34rem;opacity:.9}
.club .eyebrow{color:var(--lime)}
.points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.points li{display:flex;align-items:baseline;gap:8px;padding:10px 18px;border-radius:999px;background:color-mix(in srgb,var(--card) 10%,transparent);font-size:15px}
.points b{font-family:var(--display);font-weight:400;color:var(--lime);font-size:21px}
.club .btn--ghost{background:color-mix(in srgb,var(--card) 14%,transparent);color:var(--card);box-shadow:none}

/* faq */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start}
.faq-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:sticky;top:110px}
.faq-goo{width:150px;height:150px;overflow:visible;transform:rotate(-10deg);margin-top:10px}
.faq{display:flex;flex-direction:column;gap:12px;min-width:0}
.faq details{background:var(--card);border-radius:26px;box-shadow:var(--soft-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);box-shadow:var(--gloss-sm);font-weight:600;font-size:24px;line-height:1;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 22px 22px;color:var(--ink-soft);max-width:62ch}

/* newsletter */
.news-sec{padding-top:clamp(70px,8vw,96px)}
.news{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;padding:clamp(28px,5vw,56px);background:var(--mint);border-radius:56px 40px 60px 44px;box-shadow:var(--gloss),var(--soft)}
.news-goo{position:absolute;right:56px;top:-66px;width:104px;height:104px;z-index:-1;overflow:visible}
.news h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.news p{margin:14px 0 0;font-size:18px}
.news-form{display:flex;gap:12px;flex-wrap:wrap}
.news-form input{flex:1 1 220px;min-width:0;height:58px;padding:0 22px;border:0;border-radius:999px;font:inherit;font-weight:500;background:var(--card);color:var(--ink);box-shadow:inset 0 2px 6px color-mix(in srgb,var(--ink) 14%,transparent)}

/* footer */
.foot{position:relative;background:var(--ink);color:var(--card);padding-block:96px 120px;overflow:hidden}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.foot-brand svg{width:64px;height:64px;overflow:visible}
.foot h3{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;opacity:.88}
.foot a:hover{color:var(--lime);opacity:1}
.foot-blurb{margin:12px 0 0;max-width:30ch;opacity:.85}
.foot-mega{grid-column:1/-1;position:relative;margin-top:28px;font-family:var(--display);font-size:clamp(5.5rem,24vw,18rem);line-height:.78;color:var(--lime)}
.foot-base{grid-column:1/-1;margin-top:56px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:14px;opacity:.8}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);z-index:60;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .25s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100%);background:var(--card);border-radius:32px 0 0 32px;box-shadow:-20px 0 50px -20px color-mix(in srgb,var(--ink) 50%,transparent);display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .45s cubic-bezier(.3,1.25,.5,1),visibility 0s .45s;padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.3,1.25,.5,1)}
.drawer-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top,0px)) 22px 18px;background:var(--lime);border-radius:32px 0 0 0}
.drawer-head > .drip{--drip:var(--lime);height:30px;-webkit-mask:var(--drip-mask) repeat-x 0 0/128px 30px;mask:var(--drip-mask) repeat-x 0 0/128px 30px}
.drawer-head h2{font-size:32px}
.drawer-head .icon-btn{background:color-mix(in srgb,var(--card) 70%,transparent)}
.ship{padding:36px 22px 16px}
.ship p{margin:0 0 10px;font-weight:500;font-size:15px}
.ship-bar{height:16px;border-radius:999px;background:var(--paper);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--ink) 16%,transparent);overflow:hidden}
.ship-bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--slime);box-shadow:inset 0 3px 0 rgba(255,255,255,.4);transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.lines{list-style:none;margin:0;padding:4px 22px;overflow:auto;flex:1}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 14%,transparent)}
.line-art{width:64px;height:64px;border-radius:22px 18px 24px 16px;display:grid;place-items:center;box-shadow:var(--gloss-sm)}
.line-art .art{width:74%;height:74%;overflow:visible}
.line-name{margin:0;font-weight:600;line-height:1.2}
.line-opt{margin:2px 0 8px;font-size:14px;color:var(--ink-soft)}
.qty{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--paper)}
.qty button{width:30px;height:30px;border:0;border-radius:50%;background:var(--card);font-weight:600;font-size:17px;line-height:1;box-shadow:var(--soft-sm)}
.qty button:hover{background:var(--lime)}
.qty span{min-width:26px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.line-end{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.line-end b{font-weight:600;font-variant-numeric:tabular-nums}
.line-x{border:0;background:none;padding:6px;border-radius:50%;color:var(--ink-soft)}
.line-x:hover{color:var(--ink);background:var(--paper)}
.drawer-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.drawer-empty svg{width:120px;height:120px;overflow:visible}
.drawer-empty p{margin:0;font-weight:600;font-size:19px}
.drawer-foot{padding:18px 22px 22px;background:var(--paper);border-radius:28px 0 0 0}
.subtotal{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:18px}
.subtotal b{font-family:var(--display);font-size:32px;font-weight:400;font-variant-numeric:tabular-nums}
.fine{margin:4px 0 14px;font-size:14px;color:var(--ink-soft)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:80;transform:translate(-50%,160%);visibility:hidden;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 22px;border-radius:999px;background:var(--ink);color:var(--card);box-shadow:var(--soft);font-weight:500;font-size:16px;transition:transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s .4s}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.toast button{flex:none;border:0;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:600;font-size:14px;padding:9px 14px;box-shadow:var(--gloss-sm)}
.toast span{min-width:0}

/* phone tab bar */
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:959px){
  .menu-btn{display:inline-grid}
  .head-nav .nav-link{display:none}
  .cart-txt{display:none}
  .slide{grid-template-columns:minmax(0,1fr);gap:4px}
  .hero-art{order:-1;padding:12px 12px 20px}
  .blob{width:min(70%,320px)}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mood-grid,.reasons{grid-template-columns:minmax(0,1fr)}
  .mood{min-height:230px}
  .club-in,.faq-layout,.news{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .faq-goo{display:none}
  .club-blob{width:min(64%,280px)}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand,.foot-mega{grid-column:1/-1}
}
@media (max-width:719px){
  .drip{height:84px;-webkit-mask-size:588px 84px;mask-size:588px 84px}
  .after-drip{padding-top:112px}
  .head-actions .hide-sm{display:none}
  .logo-word{font-size:32px}
  .logo-goo{width:40px;height:40px}
  .lg-melt{height:48px}
  .lg-googly{height:42px}
  .lg-badge{height:46px}
  .lg-gmark{height:50px}
  .announce{font-size:12.5px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px -16px color-mix(in srgb,var(--ink) 50%,transparent);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 10px;border:0;background:none;font-size:12px;font-weight:600;text-decoration:none;color:var(--ink)}
  .tab-count{position:absolute;top:4px;left:calc(50% + 4px);min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--lime);font-size:11px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
  body{padding-bottom:70px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .news-goo{right:28px;width:88px;height:88px;top:-56px}
}
@media (max-width:559px){
  .hero-title{font-size:clamp(2.7rem,13vw,3.8rem)}
  .hero-lede{font-size:17px}
  .btn{min-height:54px;padding:10px 24px;font-size:17px}
  .btn-row{gap:10px}
  .filters{flex-wrap:nowrap;overflow-x:auto;width:100%;padding:4px 4px 14px 2px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .search{flex:1 1 100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:24px;padding:6px}
  .card-art{border-radius:19px}
  .card-body{padding:10px 6px 6px;gap:7px}
  .card-name{font-size:19px}
  .card-foot{flex-direction:column;align-items:stretch;gap:8px}
  .add{height:44px;font-size:15px}
  .opt span{padding:4px 9px;font-size:13px}
  .card .price{font-size:24px}
  .badge{font-size:11px;top:8px;left:8px;padding:3px 9px}
  .ic.star{width:12px;height:12px}
  .rating{font-size:12.5px;gap:4px}
  .type{font-size:12px;padding:1px 8px}
  .cat-name{font-size:16px}
  .cat-count{font-size:12.5px}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gl-eye,.gl-pupil,.logo:hover .lg,.blob,.blob .art,.bub,.badge-goo .ring,.ticker-track,.stat,.rise,.club-blob,.club-blob svg{animation:none}
  .btn:hover,.add:hover,.icon-btn:hover,.cat:hover .cat-ball,.link-more:hover,.logo:hover .logo-goo,.palette-toggle:hover,.bump .cart-ic,.bump.tab-cart .ic{animation:none}
  .slide{transition:none}
  .mood-goo,.mood-goo *{animation:none!important;transition:none!important}
  :is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .goo-hybrid .arm{transform:rotate(25deg)}
  :is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .g2-hybrid .arm{transform:rotate(-55deg)}
  :is(.mood:is(:hover,:focus-visible,.play),.vibe-card:is(:hover,.play)) .w4-hybrid .arm{transform:rotate(25deg)}
}

/* product photos (cut-outs) float with a soft shadow wherever drawn art would sit */
.photo{object-fit:contain;filter:drop-shadow(0 14px 14px color-mix(in srgb,var(--ink) 30%,transparent))}
.card-art{text-decoration:none;color:inherit}
.card-art .photo{width:76%}
.card-name a{color:inherit;text-decoration:none}
.card-name a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--lime);text-underline-offset:4px}
.blob .photo{width:76%}
.line-art .photo{width:88%;height:88%;filter:none}

/* ---------- product page ---------- */
.pdp{padding-block:28px 40px;scroll-margin-top:90px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font-size:15px;font-weight:500;color:var(--ink-soft)}
.crumbs a{color:var(--ink);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:start}
.pdp-media{position:sticky;top:96px;min-width:0}
.pdp-stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:52px 38px 56px 42px;overflow:hidden;cursor:zoom-in;box-shadow:inset 0 -22px 0 color-mix(in srgb,var(--ink) 10%,transparent),inset 0 18px 0 rgba(255,255,255,.35),var(--soft)}
.pdp-stage:disabled{cursor:default}
.pdp-stage::before{content:"";position:absolute;left:26%;right:26%;bottom:10%;height:8%;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent);filter:blur(4px)}
.pdp-stage .badge{top:20px;left:20px;font-size:14px}
.pdp-photo{position:relative;width:80%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 22px 22px color-mix(in srgb,var(--ink) 35%,transparent));animation:float 6s ease-in-out infinite;transition:transform .5s cubic-bezier(.3,1.2,.5,1)}
.pdp-art{position:relative;width:62%;height:auto;aspect-ratio:1;overflow:visible;animation:float 5s ease-in-out infinite}
.pdp-stage.zoom{cursor:zoom-out}
.pdp-stage.zoom .pdp-photo{animation:none;transform:scale(2.1)}
.pdp-thumbs{display:flex;gap:12px;margin-top:16px}
.thumb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ink-soft)}
.thumb-pic{display:grid;place-items:center;width:84px;aspect-ratio:1;border-radius:24px;overflow:hidden;box-shadow:var(--gloss-sm),var(--soft-sm);transition:transform .2s}
.thumb-pic img{width:84%;height:84%;object-fit:contain}
.thumb--zoom .thumb-pic img{transform:scale(2.1)}
.thumb[aria-pressed="true"]{color:var(--ink)}
.thumb[aria-pressed="true"] .thumb-pic{outline:3px solid var(--ink);outline-offset:3px}
.thumb:hover .thumb-pic{transform:translateY(-3px)}
.pdp-info{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.pdp-title{font-size:clamp(3rem,6vw,5rem);line-height:.95}
.pdp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pdp-meta .type{font-size:14px;padding:4px 12px}
.stat-pill{padding:5px 14px;border-radius:999px;background:var(--card);box-shadow:var(--soft-sm);font-size:15px;font-weight:600}
.pdp-meta .rating{text-decoration:none;color:var(--ink-soft)}
.pdp-lede{margin:0;max-width:34rem;font-size:19px;color:var(--ink-soft)}
.sizes{width:100%;margin:0;padding:0;border:0;min-width:0}
.sizes legend{padding:0;margin-bottom:10px;font-weight:600;font-size:16px}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.size{position:relative}
.size input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.size > span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 8px 11px;border-radius:22px;background:var(--card);box-shadow:var(--soft-sm);font-size:15px;font-weight:600;transition:background .15s,transform .15s}
.size b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.size small{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.size:hover > span{transform:translateY(-2px)}
.size input:checked + span{background:var(--ink);color:var(--card)}
.size input:checked + span small{color:var(--lime)}
.size input:focus-visible + span{outline:3px solid var(--moss);outline-offset:3px}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;width:100%}
.qty--lg{padding:5px}
.qty--lg button{width:42px;height:42px;font-size:22px}
.qty--lg span{min-width:38px;font-size:19px}
.pdp-price{font-family:var(--display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.btn--xl{flex:1 1 220px;min-height:64px;font-size:20px}
.pdp-note{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px 18px;border-radius:20px;background:var(--wash-mint);font-weight:500}
.pdp-note .ic{color:var(--moss)}
.pdp-perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pdp-perks li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--card);box-shadow:var(--soft-sm);font-size:14px;font-weight:600}
.pdp-perks .ic{color:var(--moss)}
.pdp-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:64px}
.pdp-card{position:relative;padding:26px;background:var(--card);border-radius:34px;box-shadow:var(--soft);min-width:0}
.pdp-card h2{font-size:30px;margin-bottom:18px}
.vibe-mascot{position:absolute;top:-62px;right:2px;width:124px;height:124px;pointer-events:none}
.vibe-mascot .mood-goo{top:0;left:0;right:auto;bottom:auto;width:100%;height:100%}
.meters{display:grid;gap:14px}
.meter{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;font-weight:600}
.meter-bar{height:18px;border-radius:999px;background:var(--paper);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--ink) 14%,transparent);overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:999px;background:var(--slime);box-shadow:inset 0 4px 0 rgba(255,255,255,.4);transform-origin:left;animation:fillIn 1s cubic-bezier(.3,1.25,.5,1) both}
.meter:nth-child(2) i{animation-delay:.08s}.meter:nth-child(3) i{animation-delay:.16s}.meter:nth-child(4) i{animation-delay:.24s}
@keyframes fillIn{from{transform:scaleX(0)}}
.terps{list-style:none;margin:0;padding:0}
.terp{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 12%,transparent)}
.terp:last-child{border-bottom:0}
.terp b{display:block;font-weight:600}
.terp small{color:var(--ink-soft);font-size:14px}
.terp-dot{width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:var(--gloss-sm)}
.t1 .terp-dot{background:var(--slime)}.t2 .terp-dot{background:var(--mint)}
.terp-pct{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums}
.lab-big{display:flex;gap:14px;margin-bottom:16px}
.lab-bub{display:grid;place-items:center;align-content:center;width:100px;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 -8px 0 color-mix(in srgb,var(--ink) 10%,transparent),inset 0 7px 0 rgba(255,255,255,.35),var(--soft-sm)}
.lab-bub b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1}
.lab-bub span{font-size:13px;font-weight:600}
.lab-list{display:grid;gap:8px;margin:0}
.lab-list div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 12%,transparent)}
.lab-list div:last-child{border-bottom:0;padding-bottom:0}
.lab-list dt{color:var(--ink-soft);font-weight:500}
.lab-list dd{margin:0;font-weight:600;text-align:right}
.pdp-reviews,.pdp-related{margin-top:72px}
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-bottom:24px}
.rev-score{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--card);box-shadow:var(--soft-sm)}
.rev-score b{font-family:var(--display);font-weight:400;font-size:28px}
.rev-score small{color:var(--ink-soft);font-size:14px}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rev{padding:22px;background:var(--card);border-radius:28px;box-shadow:var(--soft-sm)}
.rev-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mint);font-family:var(--display);font-size:18px}
.rev-tag{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--paper);color:var(--ink-soft);font-size:12px;font-weight:600}
.rev p{margin:0;font-size:16px}
.ic.star--off{fill:color-mix(in srgb,var(--ink) 14%,transparent)}
.pdp-related .sec-title{margin-bottom:28px}
@media (max-width:959px){
  .pdp-grid,.pdp-details,.rev-grid{grid-template-columns:minmax(0,1fr)}
  .pdp-media{position:static}
  .pdp-stage{max-width:520px;margin-inline:auto}
  .pdp-thumbs{justify-content:center}
  .pdp-details{gap:44px}
}
@media (max-width:559px){
  .pdp-title{font-size:clamp(2.6rem,12vw,3.4rem)}
  .size-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp-price{font-size:36px}
  .btn--xl{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .pdp-photo,.pdp-art,.meter-bar i{animation:none}
}

/* product page: long description */
.pdp-about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:80px}
.about-main{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.about-body{max-width:42rem;max-height:330px;overflow:hidden;-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent)}
.about-body.open{max-height:none;-webkit-mask:none;mask:none}
.about-body h3{margin:24px 0 6px;font-family:var(--ui);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink)}
.about-body h3:first-child{margin-top:4px}
.about-body p{margin:0;font-size:17.5px;line-height:1.7;color:var(--ink-soft)}
.read-more{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;background:var(--card);box-shadow:var(--soft-sm);font-weight:600}
.read-more:hover{animation:jelly .6s}
.read-more .ic{transform:rotate(180deg);transition:transform .2s}
.read-more[aria-expanded="true"] .ic{transform:none}
.about-glance{position:sticky;top:110px}
.about-glance h3{font-size:28px;margin-bottom:16px}
.glance{display:grid;gap:10px;margin:0}
.glance div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 12%,transparent)}
.glance div:last-child{border-bottom:0;padding-bottom:0}
.glance dt{color:var(--ink-soft);font-weight:500}
.glance dd{margin:0;font-weight:600;text-align:right}
@media (max-width:959px){
  .pdp-about{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .about-glance{position:static}
}
@media (prefers-reduced-motion:reduce){.read-more:hover{animation:none}}