/* Product page: the pack in the hero, tinted to the flavour. */
.hero-product{min-height:min(78svh,760px);display:grid;align-items:center;background:color-mix(in oklab,var(--c) 14%,white)}
.hero-product .hero-copy{color:var(--ink)}
.hero-product .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-pack{position:relative;height:min(64svh,620px);min-height:380px;display:grid;place-items:center;cursor:grab}
.hero-pack:active{cursor:grabbing}
.pack-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.pack-poster{grid-area:1/1;width:min(70%,460px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.3))}
.webgl .pack-poster{visibility:hidden}
html:not(.webgl) .pack-canvas{display:none}
.pack-cast{position:absolute;width:clamp(80px,12vw,180px);pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.2))}
.pack-cast-0{left:-2%;bottom:6%}
.pack-cast-1{right:-2%;top:4%}
.pack-hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0}
html:not(.webgl) .pack-hint{display:none}

.sizes{display:grid;gap:8px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--paper);box-shadow:var(--shadow-card);justify-self:start}
.seg-btn{display:grid;justify-items:center;gap:1px;padding:8px 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;font-weight:700;font-size:14px;cursor:pointer;line-height:1.1;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.seg-btn small{font-weight:400;font-size:11px;opacity:.8}
.seg-btn.is-on{background:var(--acai);color:var(--cream)}
.jump{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px;font-size:var(--text-small)}
.jump a{opacity:.85;text-underline-offset:4px}

.tagband{background:var(--cream)}
.tag-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tag-copy{display:grid;gap:14px}
.tag-copy h2{font-size:var(--display-section);color:var(--acai)}
.tag-art{position:relative;min-height:280px}
.tag-art img{position:absolute;max-width:60%}
.tag-art-0{left:0;top:0;width:58%}
.tag-art-1{right:0;bottom:0;width:48%}
@media (max-width:860px){.tag-grid{grid-template-columns:1fr}.tag-art{min-height:240px}}

.good .cards .card{background:var(--paper)}
.serve .sec-inner p{max-width:var(--measure)}
.claims{background:var(--cream)}
.related h2{margin-bottom:8px}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pack-card{display:grid;justify-items:center;gap:4px;padding:20px 14px;border-radius:var(--radius-card);background:var(--paper);box-shadow:var(--shadow-card);text-decoration:none;color:inherit;text-align:center;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-out)}
.pack-card img{width:70%;transition:transform .3s var(--ease-out)}
.pack-name{font-weight:700;color:var(--acai)}
.pack-kind{font-size:13px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.pack-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(53,4,87,.35)}.pack-card:hover img{transform:scale(1.06) rotate(-2deg)}}
@media (max-width:860px){.packs{grid-template-columns:1fr 1fr}}
.ctaband{background:var(--acai);color:var(--cream)}
.ctaband h2{color:var(--cream)}
.ctaband .fine{color:var(--cream);opacity:.75}
.ctaband .wrap{display:grid;gap:14px}
@media (max-width:860px){.hero-product .hero-grid{grid-template-columns:1fr}.hero-pack{height:46svh;min-height:300px;order:-1}.pack-poster{width:min(60vw,300px)}}