@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&display=swap";:root{--ink:#211713;--cream:#fff4dc;--paper:#fffaf0;--orange:#ff7a1a;--pink:#ff4fa3;--lime:#c7ff4d;--blue:#60d7ff;--brown:#8f5730;--muted:#7c6456;--line:#21171329;--shadow:0 30px 80px #2117132e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% 15%, #ff4fa338, transparent 26rem), radial-gradient(circle at 85% 8%, #60d7ff40, transparent 24rem), radial-gradient(circle at 55% 85%, #c7ff4d33, transparent 28rem), var(--cream);margin:0;font-family:Inter,sans-serif;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}.noise{pointer-events:none;opacity:.17;z-index:30;mix-blend-mode:multiply;background-image:linear-gradient(90deg,#ffffff0f 1px,#0000 1px),linear-gradient(#ffffff0f 1px,#0000 1px);background-size:18px 18px;position:fixed;inset:0}.blob{aspect-ratio:1;filter:blur(4px);opacity:.42;pointer-events:none;z-index:-1;border-radius:40% 60% 70% 30%/40% 40% 60% 50%;width:22rem;animation:10s ease-in-out infinite alternate morph;position:fixed}.blob-one{background:var(--pink);top:22rem;left:-8rem}.blob-two{background:var(--blue);animation-delay:-3s;bottom:10rem;right:-9rem}.topbar{justify-content:space-between;align-items:center;width:min(1180px,100% - 2rem);margin:0 auto;padding:1.25rem 0;display:flex}.brand-mark,.cart-pill,.hero-button,.filter,.checkout-button{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);color:var(--ink);background:var(--paper);text-decoration:none;transition:transform .18s,box-shadow .18s}.brand-mark:hover,.cart-pill:hover,.hero-button:hover,.filter:hover,.checkout-button:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.brand-mark{text-transform:uppercase;letter-spacing:-.04em;border-radius:999px;padding:.7rem 1rem;font-weight:900}.cart-pill{border-radius:999px;align-items:center;gap:.7rem;padding:.65rem .85rem .65rem 1rem;font-weight:900;display:inline-flex}.cart-pill strong{min-width:2rem;height:2rem;color:var(--paper);background:var(--ink);border-radius:50%;place-items:center;display:grid}.hero{min-height:92vh}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3rem;width:min(1180px,100% - 2rem);margin:0 auto;padding:4rem 0 5rem;display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--brown);margin:0 0 .75rem;font-size:.78rem;font-weight:900}h1,h2,h3{letter-spacing:-.08em;margin:0;font-family:Archivo Black,sans-serif;line-height:.88}h1{text-transform:uppercase;max-width:8ch;text-shadow:6px 6px 0 var(--pink), 12px 12px 0 var(--blue);font-size:clamp(5rem,16vw,13rem)}.tagline{max-width:42rem;color:var(--muted);margin:2rem 0 0;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.65}.hero-actions{flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;display:flex}.hero-button{background:var(--lime);border-radius:999px;padding:1rem 1.25rem;font-weight:950;display:inline-flex}.hero-note{color:var(--brown);font-weight:900}.hero-art{place-items:center;min-height:34rem;display:grid;position:relative}.mega-mug{aspect-ratio:1;border:3px solid var(--ink);background:radial-gradient(circle at 30% 25%, #ffffffb3, transparent 10rem), linear-gradient(135deg, var(--orange), var(--pink));width:min(24rem,82vw);box-shadow:14px 14px 0 var(--ink), 28px 28px 0 var(--blue);border-radius:44% 56% 49% 51%/60% 41% 59% 40%;place-items:center;animation:5s ease-in-out infinite wobble;display:grid;position:relative}.cup{filter:drop-shadow(8px 8px #21171333);font-size:10rem}.steam{border-left:5px solid var(--paper);transform-origin:bottom;opacity:.8;border-radius:999px;width:1.1rem;height:5rem;animation:2s ease-in-out infinite steam;position:absolute;top:4rem}.s1{left:7rem}.s2{animation-delay:.3s;left:11rem}.s3{animation-delay:.6s;left:15rem}.orbit{border:2px dashed #21171373;border-radius:50%;animation:20s linear infinite spin;position:absolute}.orbit-one{aspect-ratio:1;width:30rem}.orbit-two{aspect-ratio:1;width:22rem;animation-direction:reverse}.floating-label{border:2px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;border-radius:999px;margin:0;padding:.7rem .95rem;font-size:.8rem;font-weight:950;animation:3.5s ease-in-out infinite floaty;position:absolute}.label-one{background:var(--lime);top:5rem;left:1rem}.label-two{background:var(--blue);animation-delay:-1s;top:11rem;right:0}.label-three{background:var(--pink);color:var(--paper);animation-delay:-2s;bottom:5rem;left:4rem}.marquee{border-block:3px solid var(--ink);background:var(--ink);color:var(--paper);overflow:hidden}.marquee div{width:max-content;animation:18s linear infinite marquee;display:flex}.marquee span{text-transform:uppercase;letter-spacing:-.05em;padding:1rem 1.75rem;font-family:Archivo Black,sans-serif;font-size:clamp(1.4rem,4vw,3rem)}.marquee span:nth-child(2n){color:var(--lime)}.shop-head{text-align:center;width:min(1180px,100% - 2rem);margin:0 auto;padding:5rem 0 2rem}.shop-head h2{text-transform:uppercase;font-size:clamp(3rem,9vw,7rem)}.filters{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem;display:flex}.filter{border-radius:999px;padding:.75rem 1rem;font-weight:950}.filter.active{background:var(--orange);color:var(--paper)}.shop-grid{grid-template-columns:repeat(12,1fr);gap:1.2rem;width:min(1180px,100% - 2rem);margin:0 auto 6rem;display:grid}.item{--rx:0deg;--ry:0deg;--accent:var(--orange);border:3px solid var(--ink);background:var(--paper);min-height:100%;box-shadow:10px 10px 0 var(--ink);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));border-radius:2rem;flex-direction:column;grid-column:span 4;transition:opacity .25s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.item:first-child,.item:nth-child(5){grid-column:span 5}.item:nth-child(2),.item:nth-child(8){grid-column:span 7}.item:hover{box-shadow:15px 15px 0 var(--ink)}.item.hidden{display:none}.product-image-wrap{border-bottom:3px solid var(--ink);background:var(--accent);position:relative;overflow:hidden}.product-image-wrap:before{content:"";z-index:1;mix-blend-mode:soft-light;background-color:#0000;background-image:linear-gradient(45deg,#ffffff24 25%,#0000 25%),linear-gradient(-45deg,#ffffff24 25%,#0000 25%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:26px 26px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0}.product-image{z-index:0;object-fit:cover;width:100%;height:21rem;transition:transform .5s,filter .5s;display:block;position:relative;transform:scale(1.02)}.item:hover .product-image{filter:saturate(1.22)contrast(1.05);transform:scale(1.12)rotate(1deg)}.product-badge{z-index:2;border:2px solid var(--ink);background:var(--lime);box-shadow:4px 4px 0 var(--ink);text-transform:uppercase;border-radius:999px;padding:.55rem .75rem;font-size:.72rem;font-weight:950;position:absolute;top:1rem;left:1rem}.card-body{flex-direction:column;flex:1;padding:1.25rem;display:flex}.card-top{justify-content:space-between;align-items:start;gap:1rem;display:flex}.card-body h3{text-transform:uppercase;font-size:clamp(2rem,4vw,3.2rem)}.price{border:2px solid var(--ink);background:var(--accent);box-shadow:4px 4px 0 var(--ink);white-space:nowrap;border-radius:999px;flex:none;margin:0;padding:.45rem .65rem;font-weight:950}.description{color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:1rem 0;line-height:1.6;display:-webkit-box;overflow:hidden}.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:auto;display:grid}.controls label{text-transform:uppercase;letter-spacing:.09em;color:var(--brown);gap:.35rem;font-size:.72rem;font-weight:950;display:grid}select,input{border:2px solid var(--ink);width:100%;min-height:2.85rem;color:var(--ink);background:#fff;border-radius:.9rem;outline:none;padding:.65rem .8rem;font-weight:800}select:focus,input:focus{box-shadow:0 0 0 4px #ff7a1a47}.add-button{isolation:isolate;border:3px solid var(--ink);background:var(--ink);width:100%;color:var(--paper);text-transform:uppercase;border-radius:1.1rem;margin-top:1rem;padding:1rem;font-weight:950;position:relative;overflow:hidden}.add-button:before{content:"";z-index:-1;background:linear-gradient(90deg, var(--pink), var(--orange), var(--lime), var(--blue));transition:transform .35s;position:absolute;inset:0;transform:translate(-100%)}.add-button:hover:before{transform:translate(0)}.add-button:hover{color:var(--ink)}.cart-drawer{z-index:40;opacity:0;pointer-events:none;background:#21171361;justify-items:end;transition:opacity .25s;display:grid;position:fixed;inset:0}.cart-drawer.open{opacity:1;pointer-events:auto}.cart-panel{border-left:3px solid var(--ink);background:var(--cream);width:min(430px,100%);height:100%;padding:1.25rem;transition:transform .3s;overflow-y:auto;transform:translate(100%)}.cart-drawer.open .cart-panel{transform:translate(0)}.cart-head{border-bottom:3px solid var(--ink);justify-content:space-between;align-items:start;gap:1rem;padding-bottom:1rem;display:flex}.cart-head h2{font-size:3.6rem}.close-cart{aspect-ratio:1;border:3px solid var(--ink);background:var(--pink);width:3rem;color:var(--paper);box-shadow:4px 4px 0 var(--ink);border-radius:50%;font-size:2rem;font-weight:900;line-height:1}.cart-items{gap:.75rem;padding:1rem 0;display:grid}.empty-cart{color:var(--muted);font-weight:800}.cart-item{border:2px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);border-radius:1rem;padding:.9rem}.cart-item strong{font-size:1.05rem;display:block}.cart-item span{color:var(--muted);margin-top:.25rem;font-size:.9rem;line-height:1.4;display:block}.cart-total{border-top:3px solid var(--ink);justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;font-size:1.25rem;font-weight:950;display:flex}.checkout-button{background:var(--lime);text-transform:uppercase;border-radius:1rem;width:100%;margin-top:1rem;padding:1rem;font-weight:950}.toast{z-index:60;border:3px solid var(--ink);background:var(--lime);box-shadow:6px 6px 0 var(--ink);border-radius:999px;padding:.85rem 1rem;font-weight:950;transition:transform .25s;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%,160%)}.toast.show{transform:translate(-50%)}.bean{z-index:70;pointer-events:none;font-size:1.35rem;animation:.8s ease-out forwards bean-pop;position:fixed}.reveal{opacity:0;transform:translateY(28px)rotate(-1deg)}.reveal.visible{opacity:1;transition:opacity .55s,transform .55s;transform:translateY(0)rotate(0)}@keyframes morph{to{border-radius:70% 30% 42% 58%/40% 65% 35% 60%;transform:rotate(18deg)scale(1.08)}}@keyframes wobble{0%,to{transform:rotate(-4deg)scale(1)}50%{transform:rotate(4deg)scale(1.04)}}@keyframes steam{0%,to{opacity:.25;transform:translateY(0)rotate(8deg)}50%{opacity:.9;transform:translateY(-1.2rem)rotate(-8deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floaty{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-.85rem)rotate(3deg)}}@keyframes marquee{to{transform:translate(-50%)}}@keyframes bean-pop{to{transform:translate(var(--x), var(--y)) rotate(680deg) scale(0);opacity:0}}@media (width<=900px){.hero-grid{grid-template-columns:1fr;padding-top:2rem}.hero-art{min-height:25rem}.mega-mug{width:min(19rem,78vw)}.cup{font-size:7rem}.shop-grid{grid-template-columns:1fr}.item,.item:first-child,.item:nth-child(2),.item:nth-child(5),.item:nth-child(8){grid-column:auto}}@media (width<=560px){h1{text-shadow:4px 4px 0 var(--pink), 8px 8px 0 var(--blue)}.controls{grid-template-columns:1fr}.product-image{height:17rem}.floating-label,.orbit{display:none}}.page-enter-active,.page-leave-active{transition:opacity .35s,transform .35s}.page-enter-from{opacity:0;transform:translateY(16px)}.page-leave-to{opacity:0;transform:translateY(-12px)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}