@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Bungee&display=swap');
:root{--pink:#f4a6be;--yellow:#f4de3f;--red:#ef573f;--red-deep:#a92b24;--aqua:#a9dcd5;--purple:#5a4ac7;--purple-deep:#392878;--ink:#18382f;--paper:#faf3e8;--line:2px solid var(--ink);--logo:"Bungee",sans-serif;--display:"Bricolage Grotesque",sans-serif;--body:"Asap",sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.5 var(--body);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow)}img{display:block;max-width:100%}.site{width:min(100%,1600px);margin:auto;border-inline:var(--line)}
.header{height:104px;padding:0 clamp(18px,3vw,48px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:var(--line);position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(9px)}.lockup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:max-content}.logo{font:400 clamp(2rem,3.2vw,3.35rem)/.85 var(--logo);letter-spacing:-.02em}.tagline{font:700 .7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep)}.menu{display:flex;gap:24px;font:700 .86rem/1 var(--display)}.menu a,.header-meta a{min-height:44px;display:flex;align-items:center}.header-meta{justify-self:end;display:flex;align-items:center;gap:14px;font:700 .8rem/1 var(--display)}.cart-chip,.pill{border:var(--line);border-radius:99px;padding:11px 16px;background:var(--yellow);font:700 .78rem/1 var(--display);text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease)}.cart-chip:hover,.pill:hover{transform:translateY(-2px) rotate(1deg)}
.page-hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:600px;border-bottom:var(--line)}.hero-copy{padding:clamp(40px,7vw,110px);display:flex;flex-direction:column;justify-content:space-between}.hero-copy h1,.display{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.86;text-wrap:balance;margin:0}.hero-copy h1{font-size:clamp(4rem,9vw,9rem)}.hero-copy p{max-width:36ch;font-size:clamp(1.2rem,1.7vw,1.55rem);text-wrap:pretty}.hero-media{border-left:var(--line);min-height:520px;position:relative;overflow:hidden;display:grid;place-items:center}.hero-media img{width:110%;max-width:none;mix-blend-mode:multiply}.pink{background:var(--pink)}.yellow{background:var(--yellow)}.aqua{background:var(--aqua)}.red{background:var(--red)}.purple{background:var(--purple);color:var(--paper)}.paper{background:var(--paper)}
.eyebrow{font:700 .76rem/1.1 var(--display);letter-spacing:.12em;text-transform:uppercase}.section{padding:clamp(48px,7vw,110px);border-bottom:var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:48px}.section h2{font:700 clamp(2.8rem,6vw,6.5rem)/.88 var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}.section-head p{max-width:36ch;margin:0}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--line);border-left:var(--line)}.card{border-right:var(--line);border-bottom:var(--line);min-width:0}.card-media{aspect-ratio:1.2;display:grid;place-items:center;overflow:hidden;border-bottom:var(--line);position:relative}.card-media:before{content:"";position:absolute;width:68%;aspect-ratio:1;border-radius:50%;background:var(--paper);opacity:.72}.card-media img{width:110%;max-width:none;position:relative;z-index:1;mix-blend-mode:multiply;transition:transform .6s var(--ease)}.card:hover img{transform:rotate(3deg) scale(1.06)}.card-copy{padding:24px}.card h2,.card h3{font:700 clamp(1.7rem,2.5vw,2.7rem)/.95 var(--display);letter-spacing:-.025em;margin:0}.meta-row{display:flex;justify-content:space-between;gap:16px;font:700 .8rem/1 var(--display);text-transform:uppercase}.card p{font-size:1rem;min-height:3em}.actions{display:flex;gap:10px;flex-wrap:wrap}.button{min-height:46px;border:var(--line);border-radius:99px;padding:12px 18px;background:var(--paper);font:700 .78rem/1 var(--display);text-transform:uppercase;cursor:pointer;transition:transform .18s var(--ease),background .18s}.button:hover{transform:translateY(-2px);background:var(--yellow)}.button.primary{background:var(--yellow)}.button.dark{background:var(--ink);color:var(--paper)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}.filter[aria-pressed=true]{background:var(--ink);color:var(--paper)}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--line);border-left:var(--line)}.fact{padding:24px;border-right:var(--line);border-bottom:var(--line)}.fact span{display:block;font:700 .72rem/1 var(--display);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.fact strong{font:700 1.25rem/1.1 var(--display)}
.split{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--line)}.split>div,.split>figure{margin:0;padding:clamp(44px,7vw,100px);min-height:520px}.split>figure{border-left:var(--line);display:grid;place-items:center;overflow:hidden}.split figure img{width:115%;max-width:none;mix-blend-mode:multiply}.prose{max-width:760px}.prose h2{font:700 clamp(2.5rem,5vw,5rem)/.9 var(--display);letter-spacing:-.035em}.prose p{font-size:1.2rem}.rules{border-top:var(--line)}.rule{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:24px 0;border-bottom:var(--line)}.rule strong{font:700 clamp(1.2rem,2vw,1.8rem)/1.1 var(--display)}
.product-layout{display:grid;grid-template-columns:1.05fr .95fr;border-bottom:var(--line)}.product-gallery{background:var(--aqua);min-height:720px;display:grid;place-items:center;overflow:hidden}.product-gallery img{width:110%;max-width:none;mix-blend-mode:multiply}.product-panel{padding:clamp(36px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.product-panel h1{font:700 clamp(3.2rem,7vw,7rem)/.86 var(--display);letter-spacing:-.045em;margin:.2em 0}.price-lg{font:700 1.35rem/1 var(--display)}.taste{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.taste span{border:1.5px solid currentColor;border-radius:99px;padding:7px 10px;font:700 .7rem/1 var(--display);text-transform:uppercase}.quantity{display:flex;align-items:center;border:var(--line);border-radius:99px;width:max-content;overflow:hidden}.quantity button{width:46px;height:46px;border:0;background:var(--paper);cursor:pointer}.quantity output{min-width:42px;text-align:center;font:700 .9rem/1 var(--display)}
.cart-layout{display:grid;grid-template-columns:1fr 420px;gap:0;border-bottom:var(--line)}.cart-list{padding:clamp(30px,5vw,72px)}.cart-row{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;padding:20px 0;border-bottom:var(--line)}.cart-row img{width:130px;height:100px;object-fit:cover;mix-blend-mode:multiply}.summary{padding:42px;background:var(--yellow);border-left:var(--line)}.summary-line{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid currentColor}.summary-line.total{font:700 1.35rem/1 var(--display)}.empty{text-align:center;padding:80px 20px}.progress{height:10px;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--red);transform-origin:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font:700 .75rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em}.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{width:100%;min-height:52px;border:var(--line);background:var(--paper);padding:13px}.field input[type=radio],.field input[type=checkbox]{width:20px;height:20px;margin-right:10px;vertical-align:middle;accent-color:var(--purple)}.field textarea{min-height:150px;resize:vertical}.notice{padding:18px;border:var(--line);background:var(--yellow);font-weight:700}.accordion{border-top:var(--line)}details{border-bottom:var(--line);padding:0}summary{cursor:pointer;list-style:none;padding:24px 0;font:700 clamp(1.1rem,2vw,1.5rem)/1.2 var(--display)}details p{max-width:70ch;margin:0 0 26px}.footer{padding:40px clamp(20px,4vw,56px);display:flex;justify-content:space-between;align-items:end;background:var(--ink);color:var(--paper)}.footer .logo{font-size:clamp(2.8rem,7vw,7rem)}.footer .tagline{color:var(--yellow);font-size:.9rem}.toast{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--ink);color:var(--paper);border:2px solid var(--paper);padding:15px 18px;font:700 .78rem/1 var(--display);text-transform:uppercase;transform:translateY(140%);opacity:0;transition:.3s var(--ease)}.toast.show{transform:none;opacity:1}.hidden{display:none!important}
@media(max-width:900px){.header{grid-template-columns:1fr auto}.menu{display:none}.page-hero,.product-layout,.split,.cart-layout{grid-template-columns:1fr}.hero-media,.split>figure,.summary{border-left:0;border-top:var(--line)}.grid-3{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.cart-row{grid-template-columns:100px 1fr}.cart-row>:last-child{grid-column:2}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(max-width:560px){body{font-size:1rem}.header{height:92px;padding-inline:14px}.logo{font-size:1.9rem}.tagline{font-size:.56rem}.header-meta>a:first-child{display:none}.page-hero{min-height:0}.hero-copy{min-height:560px}.hero-copy h1{font-size:3.8rem}.hero-media{min-height:420px}.section-head{display:block}.section-head p{margin-top:24px}.facts{grid-template-columns:1fr}.footer{display:block}.footer small{display:block;margin-top:24px}.cart-row{grid-template-columns:1fr}.cart-row img{width:100%;height:auto}.cart-row>:last-child{grid-column:auto}.product-gallery{min-height:430px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.brand-logo{display:block;width:auto;height:auto;object-fit:contain}.header .brand-logo{width:clamp(160px,17vw,220px);max-height:72px}.footer .brand-logo{width:clamp(230px,31vw,430px);background:var(--paper);padding:10px 14px;border-radius:10px}@media(max-width:560px){.header .brand-logo{width:142px;max-height:66px}}
