@font-face{font-family:SideB;src:url('assets/side-b.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:SideB,Arial,sans-serif;color:#fff1d9;background:#c8220c;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}button{color:inherit}a{color:inherit;text-decoration:none}.hero{height:100svh;min-height:640px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 49% 12%,#ef3617 0,transparent 62%),linear-gradient(125deg,#c6210b,#df2a10 53%,#b61c09)}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.4' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.header{position:absolute;top:0;left:0;width:100%;z-index:10;padding:23px 4.15%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:900;letter-spacing:-1.7px;line-height:1}.brand-mark{width:23px;height:32px}.header nav{display:flex;gap:38px;position:absolute;left:50%;transform:translateX(-50%)}.header button{background:none;border:0;padding:10px 0;font-size:14px;font-weight:500}.header nav button{position:relative}.header nav button:after{content:"";position:absolute;bottom:3px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.header nav button:hover:after{transform:scaleX(1)}.scene{position:absolute;inset:0;perspective:1300px}.background-word{position:absolute;left:1.8%;width:96.4%;top:38%;height:38%;z-index:1;animation:word-appear 1.5s cubic-bezier(.2,.7,.2,1) both}.background-word svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}.background-word text{font-family:SideB,Arial,sans-serif;font-weight:900;font-size:270px;letter-spacing:-11px}.bag-position{position:absolute;z-index:3;width:25%;aspect-ratio:460/740;--angle:0deg;--delay:0s;--entry-x:0px;--entry-y:-100vh;--spin:-35deg}.bag-motion{width:100%;height:100%;transform:rotate(var(--angle));filter:drop-shadow(-28px 35px 10px #46050070)}.pouch{position:relative;width:100%;height:100%;transform:none}.pouch img{display:block;width:100%;height:100%;object-fit:fill}.pouch-brand{position:absolute;left:8%;top:40%;width:78%;text-align:center;white-space:nowrap;font-size:clamp(24px,4.5vw,88px);line-height:1;font-weight:900;letter-spacing:-.08em;transform:rotate(1deg);color:#fff0d5}.cream .pouch-brand{color:#531c1c}.dark{left:12%;top:-7%;width:23%;--angle:32deg;--entry-x:-25vw;--entry-y:-80vh;--spin:-85deg;--delay:.15s}.cream{left:35%;top:12%;width:24%;--angle:15deg;--entry-x:0vw;--entry-y:-100vh;--spin:35deg;--delay:.4s;z-index:4}.upper-red{left:68%;top:-7%;width:23%;--angle:-53deg;--entry-x:50vw;--entry-y:-60vh;--spin:35deg;--delay:.28s}.lower-red{left:64%;top:57%;width:24%;--angle:34deg;--entry-x:25vw;--entry-y:80vh;--spin:95deg;--delay:.6s;z-index:5}.hero-footer{position:absolute;bottom:4.3%;left:4.15%;right:4.15%;z-index:6;border-top:1px solid #fff0dba8;padding-top:24px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;animation:footer-appear 1s .7s both}.footer-main,.roast-note{pointer-events:auto}h1{font-size:clamp(16px,1.65vw,25px);font-weight:500;letter-spacing:-.035em;margin:0 0 14px}.shop-button{border:0;background:#fff3df;color:#4f171b;padding:14px 19px;font-size:13px;font-weight:700;letter-spacing:1.3px;min-height:44px;display:flex;gap:24px;align-items:center;transition:background .25s,transform .25s}.shop-button:hover{background:#fff;transform:translateY(-3px)}.shop-button span{font-size:20px;line-height:14px}.roast-note{font-size:11px;font-weight:600;letter-spacing:1.8px;line-height:1.85;text-align:right;margin:0}
@keyframes word-appear{from{opacity:0;transform:translateY(30px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes footer-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
dialog{border:0;padding:42px;width:min(540px,calc(100% - 32px));max-height:85svh;color:#4f171b;background:#fff3df;box-shadow:0 30px 100px #42090066}dialog::backdrop{background:#35040080;backdrop-filter:blur(7px)}.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px;width:40px;height:40px}dialog h2{font-size:32px;font-weight:900;letter-spacing:-1.5px;margin:0 0 25px}dialog p{line-height:1.7;font-size:16px}.product-row{padding:18px 0;border-bottom:1px solid #4f171b30;display:flex;align-items:center;justify-content:space-between;gap:16px}.product-row strong{display:block;font-size:17px}.product-row small{display:block;margin-top:6px;font-size:12px}.product-row button,.dialog-button{border:1px solid #4f171b;background:#4f171b;color:#fff3df;padding:12px 15px;font-size:14px}.dialog-note{font-size:13px!important;opacity:.8}.empty-bag{padding:25px 0}.total{font-weight:700}.dialog-button{margin-top:14px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.bag-motion{transform:rotate(var(--angle))}.pouch{transform:none!important}}


/* Brand artwork traced from the supplied PNG, including its original letterforms. */
.brand img{display:block;width:132px;height:auto}
.background-word{background:currentColor;mask:url('assets/wordmark.svg') center / 100% 100% no-repeat;-webkit-mask:url('assets/wordmark.svg') center / 100% 100% no-repeat}
.pouch-brand{display:block;height:auto;aspect-ratio:704/169;background:currentColor;mask:url('assets/wordmark.svg') center / 100% 100% no-repeat;-webkit-mask:url('assets/wordmark.svg') center / 100% 100% no-repeat}
@media(max-width:600px){.brand img{width:115px}}

/* Compact 250 g pack proportions and intentionally separated compositions. */
.bag-position{aspect-ratio:1/1.42}
.dark{left:13%;top:5%;width:min(19vw,29vh)}
.cream{left:38%;top:17%;width:min(20vw,31vh)}
.upper-red{left:69%;top:6%;width:min(18.5vw,28vh)}
.lower-red{left:65%;top:52%;width:min(19vw,29vh)}
.pouch-brand{left:14%;top:42%;width:65%;transform:rotate(1deg);max-width:65%}
.background-word{left:2%;width:96%;top:40%;height:32%}
.bag-motion{filter:drop-shadow(-17px 23px 7px #46050070)}
@media(max-width:900px) and (min-width:601px){
 .dark{left:9%;top:14%;width:24%}
 .cream{left:36%;top:27%;width:27%}
 .upper-red{left:67%;top:17%;width:23%}
 .lower-red{left:66%;top:57%;width:24%}
 .background-word{top:43%;height:24%}
 .header nav{gap:24px}
}
@media(max-width:600px){
 .hero{min-height:680px;max-height:1050px}
 .header{padding:20px 5%;align-items:flex-start}
 .brand img{width:110px}
 .header nav{top:72px;left:5%;width:90%;transform:none;justify-content:center;gap:30px}
 .header button{font-size:13px;min-height:44px}
 .bag-link{margin-top:-8px}
 .dark{left:7%;top:21%;width:30%;--angle:24deg}
 .upper-red{left:63%;top:23%;width:28%;--angle:-35deg}
 .cream{left:35%;top:34%;width:34%;--angle:12deg}
 .lower-red{left:65%;top:61%;width:29%;--angle:28deg}
 .background-word{left:2%;width:96%;top:43%;height:18%}
 .pouch-brand{left:14%;top:42%;width:65%}
 .bag-motion{filter:drop-shadow(-10px 16px 5px #46050060)}
 .hero-footer{left:5%;right:5%;bottom:4%;padding-top:18px;align-items:flex-end}
 h1{font-size:16px;max-width:240px;line-height:1.5;margin-bottom:13px}
 .shop-button{font-size:11px;padding:12px 14px;gap:20px}
 .roast-note{font-size:9px;letter-spacing:.65px;line-height:1.7;max-width:112px}
 dialog{padding:38px 24px}
 .product-row strong{font-size:15px}
}
@media(max-width:360px){.roast-note{max-width:85px;font-size:8px}h1{max-width:190px}.header nav{gap:24px}}
@media(max-height:550px) and (min-width:601px){.hero{min-height:480px}.header{padding-top:12px}.hero-footer{bottom:4%;padding-top:12px}.dark{top:8%}.upper-red{top:10%}}

/* Larger desktop packs; approved phone and tablet layouts stay unchanged. */
@media(min-width:901px){
 .dark{width:min(22vw,34vh)}
 .cream{width:min(23vw,36vh)}
 .upper-red{width:min(21.5vw,33vh)}
 .lower-red{width:min(22vw,34vh)}
}

/* Cast shadows follow the moving silhouette in a consistent light direction. */
.bag-motion{filter:none}
.bag-position{filter:drop-shadow(-24px 32px 8px #4308008c) drop-shadow(-47px 55px 17px #43080045)}
@media(min-width:901px){
 .upper-red{--angle:-53deg}
 .upper-red .pouch{transform:perspective(900px) rotateX(28deg) rotateY(-18deg);transform-origin:center}
}
@media(max-width:600px){
 .bag-position{filter:drop-shadow(-12px 17px 5px #43080080) drop-shadow(-21px 29px 10px #43080038)}
}

/* Actual font-rendered text, with no traced lettering or image masks. */
.background-word,.pouch-brand{background:none;mask:none;-webkit-mask:none}
.background-word svg,.pouch-brand svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.background-word text,.pouch-brand text{font-family:SideB,Arial,sans-serif;font-weight:800;font-size:285px;letter-spacing:-7px}

/* The desktop floor pose uses the reference side gusset and a projected front. */
.floor-pouch{display:none}
.floor-face{position:relative;width:100px;height:180px;transform-origin:0 0;overflow:hidden;background:#c72013}
.floor-face img{position:absolute;left:-6%;top:-1%;width:115%;height:102%;max-width:none}
.floor-face span{position:absolute;left:10%;top:42%;width:78%;font:800 18px/1 SideB,Arial,sans-serif;letter-spacing:-.9px;color:#fff0d5;white-space:nowrap}
@media(min-width:901px){
 .upper-red{left:62%;top:2%;width:min(29vw,46vh);aspect-ratio:255/230;--angle:0deg}
 .upper-red .pouch{display:none}
 .floor-pouch{display:block;width:100%;height:100%;overflow:visible}
 .bag-position{filter:drop-shadow(-28px 29px 3px #42060088) drop-shadow(-65px 58px 5px #42060055)}
}
/* A separate line sits below the bag layer; footer controls retain their layer. */
.hero-footer{border-top:0}
.hero-divider{position:absolute;left:4.15%;right:4.15%;height:1px;background:#fff0dba8;z-index:2;pointer-events:none}

/* Both faces share the same flexible paper-pouch silhouette as the other bags. */
.floor-face{position:absolute;left:0;top:0;overflow:visible;background:none}
.floor-face img{left:0;top:0;width:100%;height:100%;object-fit:fill}
.floor-depth{position:absolute;inset:0;transform:translate(-3px,11px);filter:brightness(.48) saturate(1.15)}

/* Folded pouch with physical front/side/base planes, viewed from above. */
@media(min-width:901px){
 .upper-red{left:65%;top:6%;width:min(25vw,39vh);aspect-ratio:1/1.42;--angle:-48deg}
 .floor-pouch{position:relative;perspective:1100px;overflow:visible}
 .pack-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(51deg) rotateY(-12deg)}
 .pack-front{position:absolute;inset:0;transform:translateZ(24px);backface-visibility:hidden}
 .pack-front>img{width:100%;height:100%;display:block}
 .pack-front .pouch-brand{left:14%;top:42%;width:65%}
 .pack-side{position:absolute;top:3%;height:94%;width:46px;background-image:linear-gradient(90deg,#42060088,transparent 48%,#41030066),url('assets/sunroom-clean.webp');background-size:100% 100%,900% 100%;background-position:center,right center;backface-visibility:hidden}
 .pack-left{left:4%;transform-origin:left center;transform:translateZ(24px) rotateY(90deg);clip-path:polygon(0 0,100% 3%,100% 96%,0 100%)}
 .pack-right{right:5%;transform-origin:right center;transform:translateZ(24px) rotateY(-90deg);clip-path:polygon(0 3%,100% 0,100% 100%,0 96%)}
 .pack-base{position:absolute;left:4%;bottom:3%;width:91%;height:46px;transform-origin:center bottom;transform:translateZ(24px) rotateX(90deg);background:linear-gradient(12deg,#640e06,#bf2616 48%,#7c1109 51%,#a7190b);clip-path:polygon(2% 0,98% 0,100% 100%,0 100%)}
}

@media(min-width:901px){
 .upper-red{left:62%;top:1%;width:min(28vw,43vh);--angle:-48deg}
 .pack-3d{transform:rotateX(64deg) rotateY(-8deg)}
 .pack-front{transform:translateZ(15px)}
 .pack-side{width:28px}
 .pack-left{transform:translateZ(15px) rotateY(90deg)}
 .pack-right{transform:translateZ(15px) rotateY(-90deg)}
 .pack-base{height:28px;transform:translateZ(15px) rotateX(90deg);background:linear-gradient(12deg,#510a05,#871309 48%,#540b06 51%,#761006)}
}

/* Use the reference photograph itself; no simulated or warped bag geometry. */
@media(min-width:901px){
 .upper-red{left:61.6%;top:0%;width:29.65%;aspect-ratio:255/230;--angle:0deg}
 .reference-pouch{display:block;width:100%;height:100%;perspective:none;overflow:visible}
}

.reference-print{position:absolute;left:0;top:0;width:100px;height:180px;transform-origin:0 0;overflow:hidden;background:#c62216}
.reference-print>img{position:absolute;left:-7%;top:-9%;width:119%;height:116%;max-width:none;object-fit:fill}
.reference-print .pouch-brand{left:10%;top:40%;width:76%;max-width:76%;height:auto;aspect-ratio:704/169;transform:none}

/* Same pouch artwork and print proportions on both visible surfaces. */
.reference-print{background:none;overflow:visible}
.reference-print>img{left:0;top:0;width:100%;height:100%}
.reference-print .pouch-brand{left:14%;top:42%;width:65%;max-width:65%}
.matching-gusset{position:absolute;left:0;top:0;width:30px;height:180px;transform-origin:0 0;background-image:linear-gradient(90deg,#46080045,#46080010),url('assets/sunroom-clean.webp');background-size:100% 100%,830% 100%;background-position:center,right center;clip-path:polygon(0 1%,90% 3%,100% 96%,0 99%);filter:brightness(.64)}

/* Right-side lighting: expose only the shaded left gusset of the lying pack. */
:root,.hero{background:#CA220D}
.reference-print{overflow:hidden}
.reference-print>img{left:-4%;width:121%;height:100%;top:0}
.matching-gusset{filter:brightness(.52);background-image:linear-gradient(90deg,#35060066,#46080022),url('assets/sunroom-clean.webp')}

/* Generated left-gusset view with photographic depth, no constructed box faces. */
@media(min-width:901px){
 .upper-red{left:65%;top:-3%;width:min(25vw,39vh);aspect-ratio:2/3;--angle:-48deg}
 .generated-left-pouch{position:relative;display:block;width:100%;height:100%;perspective:none;overflow:visible}
 .generated-left-pouch>img{display:block;width:100%;height:100%;object-fit:contain}
 .generated-left-pouch .pouch-brand{left:27%;top:39%;width:45%;max-width:45%;transform:rotate(-16deg);transform-origin:center}
}
/* Single cast silhouette plus tight contact shading avoids detached shadow copies. */
.bag-position{filter:drop-shadow(-13px 18px 4px #39060099)}
.pouch>img,.generated-left-pouch>img{filter:drop-shadow(-1px 2px 1px #35050090)}
@media(max-width:600px){.bag-position{filter:drop-shadow(-8px 11px 3px #39060099)}}

/* Match the other 250 g packs' dimensions; only the visible gusset differs. */
@media(min-width:901px){
 .upper-red{left:66%;top:5%;width:min(22vw,34vh);aspect-ratio:1/1.42;--angle:-48deg}
 .generated-left-pouch>img{object-fit:fill}
}

@media(min-width:901px){
 .upper-red{left:65%;top:-4%;width:min(23vw,35vh);aspect-ratio:1/1.42;--angle:-35deg}
}

/* Align print with the center of the upward-facing panel. */
@media(min-width:901px){
 .generated-left-pouch .pouch-brand{left:29%;top:40%;width:47%;max-width:47%;transform:rotate(-14deg)}
}
/* One coherent sunlight direction and connected cast shadows on the red surface. */
.bag-position{filter:url(#sun-shadow)}
.pouch>img,.generated-left-pouch>img{filter:drop-shadow(-2px 3px 1px #35050080)}
@media(max-width:600px){.bag-position{filter:url(#sun-shadow-mobile)}}

/* Compact lockup: symbol and visible letter height are equal across devices. */
.brand{display:flex;align-items:center;gap:6px;letter-spacing:0;min-height:30px}
.brand .header-symbol{width:18px;height:22px;object-fit:fill}
.header-name{font:800 30px/1 SideB,Arial,sans-serif;letter-spacing:-1.4px}
@media(max-width:600px){
 .brand .header-symbol{width:16px;height:19px}
 .header-name{font-size:26px;letter-spacing:-1.2px}
}
/* Directional illumination uses the same top-right light on every screen. */
.hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,#fff0cd18 0%,#ffddac08 38%,transparent 72%)}
.background-word{animation:none}
.brand-reveal-slice{transform-box:view-box;transform-origin:50% 100%;animation:brand-unfold 1.45s cubic-bezier(.16,1,.3,1) var(--reveal-delay) both}
@keyframes brand-unfold{
 0%{opacity:0;transform:translate(35px,var(--rise-distance,300px)) skewX(-14deg) scaleY(.65)}
 25%{opacity:1}
 100%{opacity:1;transform:translate(0,0) skewX(0deg) scaleY(1)}
}
@media(prefers-reduced-motion:reduce){.brand-reveal-slice{animation:none;transform:none;opacity:1}}


/* Hide the rising lettering below the divider on every viewport. */
.background-word{clip-path:polygon(-100% -100vh,200% -100vh,200% var(--reveal-floor,100%),-100% var(--reveal-floor,100%))}

.brand-measure{visibility:hidden}

/* Share the mobile bag pose on tablets; keep the desktop floor pose separate. */
@media(max-width:900px){
 .upper-red{--angle:-35deg}
 .upper-red .pouch-brand{left:12%}
}

/* Header lockup and outlined store controls. */
.header{gap:24px}
.header-name{font-size:32px;letter-spacing:-.45px}
.header nav{position:static;transform:none;justify-content:center;gap:clamp(18px,2.7vw,38px)}
.header-actions{display:flex;align-items:center;flex-shrink:0}
.header .icon-button{position:relative;display:grid;place-items:center;width:54px;height:36px;padding:0}
.icon-button+.icon-button{border-left:1px solid #fff1d94d}
.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;right:2px;top:-3px;font-size:10px;min-width:14px;text-align:center}
.cart-count:empty,.cart-count[data-empty="true"]{display:none}
.search-label{display:block;font-size:13px;margin-bottom:10px}
.coffee-search{width:100%;border:1px solid #4f171b60;background:transparent;padding:13px;color:inherit;font:inherit;border-radius:0}
.coffee-search:focus{outline:2px solid #4f171b;outline-offset:2px}
@media(min-width:901px){.generated-left-pouch .pouch-brand{top:37%}}
@media(max-width:900px){
 .header nav{position:absolute;top:72px;left:5%;width:90%;gap:clamp(14px,3vw,30px);transform:none}
}
@media(max-width:600px){
 .header{gap:10px;align-items:center}
 .header-name{font-size:27px;letter-spacing:-.4px}
 .header .icon-button{width:44px;height:44px}
 .header nav button{font-size:12px}
 .header-actions{margin-right:-8px}
}
@media(max-width:360px){
 .header{gap:4px}
 .header .icon-button{width:40px}
 .header nav{gap:14px}
 .header nav button{font-size:11px}
}

/* Desktop navigation rolls to its second line while a small arrow turns in. */
.header nav{gap:0}
.header nav button{padding:9px clamp(12px,1.65vw,24px);overflow:hidden;line-height:20px;isolation:isolate}
.header nav button+button{border-left:1px solid #fff1d94d}
.header nav button:after{content:'↗';left:auto;right:4px;bottom:9px;width:auto;height:auto;background:none;opacity:0;transform:translate(-5px,9px) rotate(-45deg);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s}
.nav-window{display:block;height:20px;overflow:hidden}
.nav-roll{display:block;position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav-roll:after{content:attr(data-label);position:absolute;left:0;top:100%;white-space:nowrap;font-weight:700}
.header nav button:is(:hover,:focus-visible) .nav-roll{transform:translateY(-100%)}
.header nav button:is(:hover,:focus-visible):after{opacity:1;transform:translate(0,0) rotate(0deg)}
.header .menu-toggle{display:none}
.menu-mark{width:24px;height:24px;position:relative;display:block}
.menu-mark i{position:absolute;background:currentColor;right:0;border-radius:2px;transform-origin:center;transition:width .3s,transform .4s cubic-bezier(.2,.8,.2,1),opacity .2s}
.menu-mark i:nth-child(1){top:7px;width:24px;height:1.7px}
.menu-mark i:nth-child(2){top:15px;width:16px;height:1.7px}
.menu-mark i:nth-child(3){top:14.5px;left:0;right:auto;width:3px;height:3px;border-radius:50%}
.menu-toggle:hover .menu-mark i:nth-child(2){width:20px}
.menu-toggle:hover .menu-mark i:nth-child(3){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-mark i:nth-child(1),.menu-close .menu-mark i:nth-child(1){width:24px;transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-mark i:nth-child(2),.menu-close .menu-mark i:nth-child(2){width:24px;transform:translateY(-4px) rotate(-45deg)}
.menu-toggle[aria-expanded="true"] .menu-mark i:nth-child(3),.menu-close .menu-mark i:nth-child(3){opacity:0;transform:scale(0)}
body.menu-open{overflow:hidden}
.store-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:24px 32px 30px;background:#fff1d9;color:#531c1c;overflow-x:hidden;overflow-y:auto;box-shadow:-15px 0 70px #35050020}
.store-menu[open]{display:flex;flex-direction:column;animation:menu-unfold .48s cubic-bezier(.22,1,.36,1) both}
.store-menu::backdrop{background:#3a090a70;backdrop-filter:blur(4px);animation:menu-dim .35s both}
.store-menu.is-closing::backdrop{animation:menu-dim .28s reverse both}
.menu-top{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:14px;font-weight:800;letter-spacing:-.3px}
.menu-close{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;transition:opacity .2s}
.menu-close:hover{opacity:.55}
.store-menu:not(.is-closing) .menu-close .menu-mark i:nth-child(1){animation:close-stroke-a .45s cubic-bezier(.22,1,.36,1) both}
.store-menu:not(.is-closing) .menu-close .menu-mark i:nth-child(2){animation:close-stroke-b .45s cubic-bezier(.22,1,.36,1) both}
.store-menu.is-closing .menu-close .menu-mark i:nth-child(1){transform:none}
.store-menu.is-closing .menu-close .menu-mark i:nth-child(2){width:16px;transform:none}
.menu-links{display:flex;flex-direction:column;margin:clamp(35px,7vh,65px) 0 30px}
.menu-links button{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px;width:100%;padding:21px 0;border:0;border-bottom:1px solid #531c1c20;background:none;font-size:28px;font-weight:550;letter-spacing:-1px;line-height:1.3;transition:color .25s}
.store-menu[open] .menu-links button{animation:menu-link-in .4s cubic-bezier(.22,1,.36,1) calc(.08s + var(--item)*.04s) both}
.menu-links b{font-weight:400;font-size:22px;opacity:0;transform:translateX(-8px);transition:transform .25s,opacity .25s}
.menu-links button:is(:hover,:focus-visible){color:#ca220d}
.menu-links button:is(:hover,:focus-visible) b{opacity:1;transform:translateX(0)}
.menu-bag-count{font-size:13px;letter-spacing:0;vertical-align:middle}
.menu-signoff{margin-top:auto;flex-shrink:0;padding-top:30px;font-size:11px;line-height:1.5;letter-spacing:.3px;color:#531c1c99}
@keyframes menu-unfold{from{transform:translateX(24px);clip-path:inset(0 0 0 100%)}to{transform:translateX(0);clip-path:inset(0 0 0 0)}}
@keyframes menu-link-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes menu-dim{from{background:#3a090a00;backdrop-filter:blur(0)}to{background:#3a090a70;backdrop-filter:blur(4px)}}
@keyframes close-stroke-a{from{transform:none}to{transform:translateY(4px) rotate(45deg)}}
@keyframes close-stroke-b{from{width:16px;transform:none}to{width:24px;transform:translateY(-4px) rotate(-45deg)}}
@media(max-width:900px){
 .header nav,.header .desktop-bag{display:none}
 .header .menu-toggle{display:grid}
 .header .menu-toggle{border-left:1px solid #fff1d94d}
}
@media(max-width:360px){
 .store-menu{padding:20px 24px}
 .menu-links button{font-size:27px;padding:16px 0}
 .shop-button{letter-spacing:.7px;gap:12px;padding:12px}
}
@media(prefers-reduced-motion:reduce){.store-menu[open],.store-menu[open] .menu-links button,.store-menu::backdrop{animation:none}.nav-roll,.menu-mark i{transition:none}}


/* Consistent letter spacing while retaining the SIDE B typeface. */
.header nav button,.menu-links button,.shop-button{letter-spacing:.08em}
.menu-top,.menu-signoff,.menu-bag-count{letter-spacing:.06em}
.hero-footer h1{letter-spacing:.025em}
.roast-note{font-family:SideB,Arial,sans-serif;font-weight:500;letter-spacing:.025em;text-transform:none;font-size:clamp(13px,1.15vw,17px);line-height:1.5}
@media(max-width:600px){.roast-note{font-size:11px}}
@media(max-width:360px){.roast-note{font-size:10px}.shop-button{letter-spacing:.06em}}

/* Rolling navigation stays; its decorative hover arrow is removed. */
.header nav button:after{content:none}
/* Each CTA word completes the same roll with a small sequential offset. */
.shop-button{overflow:hidden}
.shop-button .cta-copy{display:flex;align-items:center;gap:.35em;font:inherit;letter-spacing:inherit;line-height:1.25}
.shop-button .cta-word{display:block;overflow:hidden;font:inherit;letter-spacing:inherit;line-height:1.25}
.shop-button .cta-roll{position:relative;display:block;font:inherit;letter-spacing:inherit;line-height:1.25}
.cta-roll:after{content:attr(data-word);position:absolute;left:0;top:100%;white-space:nowrap}
.shop-button:is(:hover,:focus-visible) .cta-roll{animation:cta-word-roll .45s cubic-bezier(.2,.8,.2,1) calc(var(--word)*.085s) both}
.shop-button .cta-arrow{display:block;flex-shrink:0;width:20px;height:20px;font-size:20px;line-height:20px}
.shop-button .cta-arrow>span{display:block;font-size:20px;line-height:20px}
.shop-button:is(:hover,:focus-visible) .cta-arrow>span{animation:cta-arrow-return .7s cubic-bezier(.25,.7,.3,1) both}
@keyframes cta-word-roll{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes cta-arrow-return{0%{transform:translate(0,0);opacity:1}40%{transform:translate(24px,-30px);opacity:0}41%{transform:translate(-18px,34px);opacity:0}55%{opacity:1}100%{transform:translate(0,0);opacity:1}}
@media(min-width:901px){.generated-left-pouch{width:108%;left:-4%}}
@media(prefers-reduced-motion:reduce){.shop-button:is(:hover,:focus-visible) .cta-roll,.shop-button:is(:hover,:focus-visible) .cta-arrow>span{animation:none;transform:none}}

/* Square search field expands left from its existing header icon. */
.expandable-search{position:relative;z-index:2}
.header-search-form{position:absolute;top:50%;right:0;height:44px;width:var(--search-width,280px);transform:translateY(-50%);display:flex;align-items:center;padding-right:54px;background:#fff1d9;color:#531c1c;border:1px solid #fff1d9;border-radius:0;box-shadow:-8px 10px 24px #35050030;clip-path:inset(0 0 0 100%);opacity:0;visibility:hidden;transition:clip-path .4s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .4s}
.expandable-search.is-open .header-search-form{clip-path:inset(0);opacity:1;visibility:visible}
.header-search-form input{min-width:0;width:100%;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:500 13px SideB,Arial,sans-serif;padding:10px 0;letter-spacing:.025em}
.header-search-form input::-webkit-search-cancel-button{display:none}
.header .header-search-form button{width:36px;flex-shrink:0;height:42px;padding:0;font-size:20px;color:#531c1c}
.search-toggle{z-index:1;transition:color .25s}
.search-x{display:none;font-size:27px;line-height:1;font-weight:400}
.expandable-search.is-open .search-toggle{color:#531c1c}
.expandable-search.is-open .search-toggle svg{display:none}
.expandable-search.is-open .search-x{display:block}
.expandable-search+.icon-button{border-left:1px solid #fff1d94d}
.header .icon-button[data-panel="account"] svg{transform-origin:center 70%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.header .icon-button[data-panel="account"]:is(:hover,:focus-visible) svg{animation:account-greet .65s ease-in-out}
.header .desktop-bag:is(:hover,:focus-visible) svg{animation:bag-swing .7s cubic-bezier(.2,.8,.2,1);transform-origin:50% 15%}
@keyframes account-greet{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-3px) rotate(-9deg)}65%{transform:translateY(-2px) rotate(7deg)}}
@keyframes bag-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) translateY(-2px)}55%{transform:rotate(10deg) translateY(-2px)}80%{transform:rotate(-4deg)}}
@media(max-width:600px){.header-search-form{padding-right:44px}.header-search-form input{font-size:12px}}
@media(prefers-reduced-motion:reduce){.header-search-form{transition:none}.header .icon-button:is(:hover,:focus-visible) svg{animation:none}}

/* Keep the expanded search clear of the logo at every header width. */
.header-search-form{height:40px}
.header .header-search-form button{height:38px}
.expandable-search.search-below .header-search-form{top:calc(100% + 10px);transform:none;padding-right:34px}
.expandable-search.search-below.is-open .search-toggle{color:inherit}
.expandable-search.search-below .header-search-form input{padding-right:8px}
@media(max-width:600px){
 .header-search-form{height:38px}
 .header .header-search-form button{height:36px;width:30px}
 .header-search-form input{font-size:12px}
 .expandable-search.search-below .header-search-form{padding-right:10px}
}
.header-search-form button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.expandable-search.search-below .header-search-form{left:var(--search-left);right:auto;height:48px;padding:0 12px;clip-path:none;box-shadow:0 8px 20px #35050020;transition:opacity .2s,visibility .2s}
.expandable-search.search-below .header-search-form input{font-size:16px;line-height:24px;padding:12px 8px;-webkit-appearance:none}
.header .expandable-search.search-below .header-search-form button{height:44px;width:36px;min-height:44px}
/* One font-independent brand layer per bag; do not flash original labels on load. */
.hero .pouch-brand{background:currentColor;mask:url('assets/wordmark.svg') center/100% 100% no-repeat;-webkit-mask:url('assets/wordmark.svg') center/100% 100% no-repeat}
.hero:not(.artwork-ready) .bag-motion{visibility:hidden}
/* Avoid WebKit clipping rotated children to an SVG filter's original bounds. */
@media(max-width:900px){
 .hero .scene{perspective:none}
 .hero .bag-position{filter:none;overflow:visible}
 .hero .bag-motion{overflow:visible;filter:none;position:relative;isolation:isolate}
 .hero .bag-motion:before{content:'';position:absolute;inset:1% -9% -9% -16%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 46% 53%,#39060060 15%,#39060030 48%,transparent 72%)}
 .hero .pouch,.hero .generated-left-pouch{overflow:visible}
 .hero .pouch>img,.hero .generated-left-pouch>img{filter:none}
}
/* Shared popup palette. */
dialog{background:#f8f2e8;color:#111;box-shadow:0 25px 80px #74201040}
dialog::backdrop{background:#76200e66;backdrop-filter:blur(7px)}
dialog .product-row{border-color:#1112}
dialog .product-row button,dialog .dialog-button{background:#ca220d;color:#fff1d9;border-color:#ca220d;transition:background .2s,transform .2s}
dialog .product-row button:hover,dialog .dialog-button:hover{background:#e33419;transform:translateY(-2px)}
dialog .close{color:#ca220d}
dialog input{color:#111;border-color:#1114}