/* 3D motion layer for the interior pages (Products, Order). Everything here is additive and falls back to the normal page. */
:root{--m3-ease:cubic-bezier(.2,.75,.25,1)}
.m3-world{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s}
.interior main,.interior .site-footer{position:relative;z-index:1}

/* ---------- buttons: clean rounded keys with soft 3D depth and cursor tilt ---------- */
.interior .button,.interior .solid,.interior .card-bottom button,.interior .showcase-request,.interior .product-order,.interior .filters button,.interior .brew-tabs button{
 --rx:0deg;--ry:0deg;--lift:0px;
 position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:13px 30px!important;border:0!important;border-radius:14px!important;
 color:#fff3df!important;font-weight:600;letter-spacing:.03em;text-shadow:0 1px 1px #0006;text-decoration:none;cursor:pointer;
 background:linear-gradient(180deg,#d0704a,#a84a2b)!important;
 box-shadow:inset 0 1px 0 #ffffff55,inset 0 -3px 0 #0000003d,0 12px 20px -10px #000c!important;
 transform:perspective(700px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
 transition:transform .25s var(--m3-ease),box-shadow .25s,filter .25s;will-change:transform}
.interior .filters button,.interior .brew-tabs button{min-height:42px;padding:9px 24px!important;border:1px solid #f0c99655!important;border-radius:999px!important;font-size:12.5px;letter-spacing:.04em;text-shadow:none;background:#ffffff0f!important;color:#f0dcc0!important;box-shadow:none!important}
.interior .button:hover,.interior .solid:hover,.interior .card-bottom button:hover,.interior .showcase-request:hover,.interior .product-order:hover{--lift:-3px;filter:brightness(1.08);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -3px 0 #0000003d,0 18px 24px -10px #000e!important}
.interior .filters button:hover,.interior .brew-tabs button:hover{--lift:-2px;border-color:#f0c996aa!important}
.interior .filters button[aria-pressed=true],.interior .filters .selected,.interior .brew-tabs button[aria-pressed=true],.interior .brew-tabs .selected{background:linear-gradient(180deg,#d0704a,#a84a2b)!important;color:#fff3df!important;border-color:#d0704a!important;box-shadow:inset 0 1px 0 #ffffff55,0 8px 14px -8px #000!important}
.interior .button:active,.interior .solid:active,.interior .card-bottom button:active,.interior .showcase-request:active,.interior .filters button:active,.interior .brew-tabs button:active{filter:brightness(.95);transform:perspective(700px) translateY(1px) scale(.97) rotateX(var(--rx)) rotateY(var(--ry))}

/* ---------- hero stage: floating pack and coffee cherries ---------- */
.m3-host{position:relative}
.m3-stage{position:absolute;inset-block:0;inset-inline-end:3%;width:min(36%,430px);display:grid;place-items:center;perspective:1000px;pointer-events:none;z-index:0}
.m3-glow{position:absolute;inset:8% 2%;border-radius:50%;background:radial-gradient(closest-side,#e0864f66,#b8513a22 60%,transparent 76%);filter:blur(14px);animation:m3Glow 5.5s ease-in-out infinite}
.m3-pack{position:relative;width:min(78%,330px);height:auto;filter:drop-shadow(0 32px 32px #000b);transform:translate3d(calc(var(--px,0)*26px),calc(var(--py,0)*14px),0) rotateY(calc(var(--px,0)*18deg)) rotateX(calc(var(--py,0)*-10deg));transition:transform .5s var(--m3-ease);animation:m3Float 8s ease-in-out infinite;will-change:transform}
@keyframes m3Float{0%,100%{translate:0 0;rotate:-1.2deg}50%{translate:0 -14px;rotate:1.2deg}}
@keyframes m3Glow{0%,100%{opacity:.7;scale:.96}50%{opacity:1;scale:1.05}}
.page-intro.m3-host>*:not(.m3-stage):not(.plant-stage-canvas),.intro.m3-host>*:not(.m3-stage):not(.plant-stage-canvas){position:relative;z-index:1}
.page-intro.m3-host>:not(.m3-stage):not(.plant-stage-canvas),.intro.m3-host>:not(.m3-stage):not(.plant-stage-canvas){max-width:min(620px,62%)}

/* ---------- product cards: depth, parallax layers, sheen ---------- */
.interior .cards,.interior .market-grid{perspective:1300px}
.interior .card,.interior .market-card{transform-style:preserve-3d;overflow:visible!important;rotate:var(--ax,0) var(--ay,0) 0 var(--deg,0deg);transition:rotate .45s var(--m3-ease),box-shadow .3s,translate .8s var(--m3-ease),opacity .7s}
.interior .card:hover,.interior .market-card:hover{box-shadow:0 34px 50px -18px #000c,0 0 0 1px #f0c99644}
.interior .card::after,.interior .market-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,25%),#ffffff2e,transparent 62%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.interior .card:hover::after,.interior .market-card:hover::after{opacity:1}
.interior .card .catalog-photo{background:transparent!important;object-fit:contain;height:300px;margin-top:6px;filter:drop-shadow(0 28px 22px #0009);transform:translateZ(80px) translate3d(calc(var(--tx,0)*14px),calc(var(--ty,0)*8px),0);transition:transform .45s var(--m3-ease)!important}
.interior .card:hover .catalog-photo{transform:translateZ(110px) translate3d(calc(var(--tx,0)*18px),calc(var(--ty,0)*10px),0) scale(1.04)}
.interior .card .product-word{transform:translateZ(46px)}
.interior .card .card-top,.interior .card>p,.interior .card .card-bottom{transform:translateZ(22px)}
.interior .card .card-top{overflow:visible}
.interior .market-card .pack{overflow:visible;transform-style:preserve-3d}
.interior .market-card .pack img{filter:drop-shadow(0 26px 22px #0009);transform:translateZ(70px) translate3d(calc(var(--tx,0)*12px),calc(var(--ty,0)*8px),0)}

/* ---------- order tabs: tilt with parallax ---------- */
.interior .order-tabs{perspective:1200px}
.interior .order-tabs a{transform-style:preserve-3d;rotate:var(--ax,0) var(--ay,0) 0 var(--deg,0deg);transition:rotate .45s var(--m3-ease),transform .3s}
.interior .order-tabs a>img{transform:translateZ(40px) translate3d(calc(var(--tx,0)*10px),calc(var(--ty,0)*6px),0);transition:transform .45s var(--m3-ease)}

/* ---------- scroll reveal with depth ---------- */
.m3-rev{opacity:0;transform:perspective(1200px) translate3d(0,46px,-140px) rotateX(9deg);transform-origin:50% 100%;transition:opacity .8s var(--m3-ease),transform 1s var(--m3-ease);transition-delay:var(--m3-d,0ms)}
.m3-rev.m3-in{opacity:1;transform:none}
.interior .faq details{transition:background .3s,transform .3s var(--m3-ease)}
.interior .faq details[open]{transform:translateZ(0) scale(1.01)}

@media(max-width:900px){.m3-stage{position:relative;inset:auto;width:100%;height:240px;margin-top:22px}.m3-pack{width:min(46%,200px)}.page-intro.m3-host>:not(.m3-stage):not(.plant-stage-canvas),.intro.m3-host>:not(.m3-stage):not(.plant-stage-canvas){max-width:none}}
@media(prefers-reduced-motion:reduce){.m3-world{display:none}.m3-pack,.m3-glow{animation:none;transition:none}.m3-rev{opacity:1;transform:none;transition:none}.interior .card,.interior .market-card,.interior .order-tabs a{rotate:none!important}.interior .button,.interior .solid,.interior .card-bottom button,.interior .showcase-request,.interior .filters button,.interior .brew-tabs button{transition:none}}

/* card layout with the buttons: never wider than the column */
.interior{overflow-x:clip}
.interior .cards>.card,.interior .market-grid>.market-card{min-width:0}
.interior .card-bottom{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px}
.interior .card-bottom>span{flex:1 1 100%}
.interior .card-bottom button{min-height:44px;padding:10px 26px;font-size:13px}
.interior .card-bottom button span{font-size:15px}
.interior .showcase-actions{justify-content:flex-start!important;gap:14px}.interior .showcase-request{flex:0 0 auto!important;width:auto!important}

/* =====================================================================
   ORDER PAGE — 3D path cards and the product stage cards
   ===================================================================== */
body.order-page .order-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;perspective:1300px;margin:38px 0 46px;padding-top:26px}
body.order-page .order-tabs a.p3{--p3a:#6a2f1a;--p3b:#26110a;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:340px;padding:0 24px 24px;overflow:visible;
 border:1px solid #f0c9964d;border-radius:28px;background:linear-gradient(165deg,var(--p3a),var(--p3b));color:#fff0d7;text-decoration:none;
 box-shadow:0 30px 44px -24px #000e,inset 0 1px 0 #ffffff26;transform-style:preserve-3d;rotate:var(--ax,0) var(--ay,0) 0 var(--deg,0deg);transition:rotate .45s var(--m3-ease),box-shadow .3s}
body.order-page .order-tabs a.p3-distributor{--p3a:#5a3320;--p3b:#1f1109}body.order-page .order-tabs a.p3-hospitality{--p3a:#6b4a22;--p3b:#27170a}
body.order-page .order-tabs a.p3::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,20%),#ffffff2e,transparent 62%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
body.order-page .order-tabs a.p3:hover::after{opacity:1}
body.order-page .order-tabs a.p3:hover{box-shadow:0 44px 56px -26px #000f,0 0 0 1px #f0c99677,inset 0 1px 0 #ffffff33}
body.order-page .order-tabs a.p3[aria-current=page]{border-color:#f0b36a;box-shadow:0 0 0 1px #f0b36a99,0 0 46px -10px #e0864f88,0 30px 44px -24px #000e}
.p3-art{position:relative;align-self:stretch;height:200px;margin:-26px -4px 8px;display:block;transform-style:preserve-3d;z-index:1}
.p3-glow{position:absolute;inset:16% 10% 4%;border-radius:50%;background:radial-gradient(closest-side,#e8975a80,transparent 72%);filter:blur(12px);animation:m3Glow 5.5s ease-in-out infinite}
.p3-art img{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 26px 22px #000a);transform:translateZ(90px) translate3d(calc(var(--tx,0)*18px),calc(var(--ty,0)*10px),0);transition:transform .45s var(--m3-ease);animation:p3Float 7s ease-in-out infinite}
body.order-page .order-tabs a.p3-hospitality .p3-art img,body.order-page .order-tabs a.p3-distributor .p3-art img{animation-delay:-2.5s}
@keyframes p3Float{0%,100%{translate:0 0;rotate:-1.2deg}50%{translate:0 -12px;rotate:1.2deg}}
.p3-num{position:relative;z-index:1;font:700 12px/1 Arial,sans-serif;letter-spacing:.32em;color:#f0b36a;margin:6px 0 8px}
body.order-page .order-tabs a.p3 strong{position:relative;z-index:1;display:block;font:700 clamp(22px,2.2vw,31px)/1.08 'Barlow Condensed','Arial Narrow',Impact,sans-serif;letter-spacing:.01em;color:#fff3df;max-width:72%;transform:translateZ(36px)}
body.order-page .order-tabs a.p3 small{position:relative;z-index:1;display:block;margin-top:8px;max-width:72%;font-size:13px;line-height:1.5;color:#e4c9aa;transform:translateZ(22px)}
.p3-go{position:absolute;z-index:2;inset-inline-end:22px;bottom:22px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:20px;color:#f8e3c4;
 background:linear-gradient(180deg,#d0704a,#a84a2b);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -3px 0 #0000003d,0 12px 18px -10px #000;transform:translateZ(60px);transition:transform .3s var(--m3-ease)}
body.order-page .order-tabs a.p3:hover .p3-go{transform:translateZ(80px) translateY(-3px) scale(1.06)}

/* product stage cards */
body.order-page #order-showcase.campaign-showcase{background:linear-gradient(170deg,#2b160d,#150a06);border:1px solid #f0c99633;border-radius:30px;box-shadow:0 44px 70px -44px #000}
body.order-page #order-showcase .showcase-track{padding:30px 14px 26px;perspective:1300px}
body.order-page #order-showcase .showcase-card{flex:0 0 332px;background:linear-gradient(165deg,#4c260f,#1b0d07);color:#f6e6cc;border:1px solid #f0c9963d;border-radius:28px;overflow:visible;box-shadow:0 36px 52px -28px #000e,inset 0 1px 0 #ffffff1f;transform-style:preserve-3d;rotate:var(--ax,0) var(--ay,0) 0 var(--deg,0deg);transition:rotate .45s var(--m3-ease),box-shadow .3s,opacity .5s}
body.order-page #order-showcase .showcase-golden{background:linear-gradient(165deg,#4d3a14,#1b1307)}body.order-page #order-showcase .showcase-dark{background:linear-gradient(165deg,#2e1b14,#0f0806)}
body.order-page #order-showcase .showcase-card:hover{transform:none;box-shadow:0 48px 60px -28px #000f,0 0 0 1px #f0c99666}
body.order-page #order-showcase .showcase-scene{height:310px;background:radial-gradient(52% 46% at 50% 66%,#d2784a70,transparent 72%),radial-gradient(70% 26% at 50% 100%,#000a,transparent);border-radius:28px 28px 0 0;overflow:visible;perspective:900px;transform-style:preserve-3d}
body.order-page #order-showcase .showcase-scene::before{content:'';position:absolute;left:14%;right:14%;bottom:20px;height:38px;border-radius:50%;background:radial-gradient(closest-side,#f0b36a77,#e0864f22 62%,transparent);transform:translateZ(8px)}
body.order-page #order-showcase .showcase-scene::after{content:'';position:absolute;left:22%;right:22%;bottom:26px;height:22px;border-radius:50%;border:1px solid #f0c99666;transform:translateZ(12px)}
body.order-page #order-showcase .showcase-product{height:268px;width:180px;left:50%;margin-left:-90px;bottom:34px;filter:drop-shadow(0 32px 24px #000c);transform:translateZ(90px) translate3d(calc(var(--tx,0)*18px),calc(var(--ty,0)*10px),0);transition:transform .45s var(--m3-ease);animation:p3Float 7.5s ease-in-out infinite}
body.order-page #order-showcase .showcase-original-photo{clip-path:none!important;object-fit:contain;filter:none}
body.order-page #order-showcase .showcase-heading{margin:0 0 12px;color:#f6e6cc;text-shadow:none}body.order-page #order-showcase .showcase-heading h3{color:#fff3df;font-size:30px}body.order-page #order-showcase .showcase-blend{color:#f0b36a}body.order-page #order-showcase .showcase-ratio{color:#f0dcc0}
body.order-page #order-showcase .showcase-information{background:transparent;padding:6px 24px 24px;transform:translateZ(30px)}body.order-page #order-showcase .showcase-information:before{display:none}
body.order-page #order-showcase .showcase-description{color:#d8bfa0;min-height:0}
body.order-page #order-showcase .showcase-flavors{display:flex!important;flex-wrap:wrap;gap:7px;margin:0 0 16px;justify-content:flex-start}
body.order-page #order-showcase .showcase-flavors li{flex-direction:row;padding:5px 13px!important;font-size:11px;border-radius:999px!important;color:#f3dcc0!important;background:#ffffff0f!important;border:1px solid #f0c99644;box-shadow:none!important}
body.order-page #order-showcase .showcase-details{border-top:1px solid #f0c99633;color:#e4cdae}body.order-page #order-showcase .showcase-price strong{color:#fff3df}body.order-page #order-showcase .showcase-price span{color:#d9bd9a}
body.order-page #order-showcase .showcase-favorite{min-width:46px;height:46px;border-radius:14px!important;background:#ffffff0f!important;border:1px solid #f0c99655!important;box-shadow:none!important;color:#f0b36a}
body.order-page #order-showcase .showcase-badge{inset-inline-start:auto;inset-inline-end:18px;top:16px;bottom:auto;background:linear-gradient(180deg,#f8dfbd,#e3b684);color:#2a1208;border-radius:999px;box-shadow:0 8px 14px -6px #000a;transform:translateZ(60px)}
body.order-page #order-showcase .showcase-categories button{border-radius:12px!important;background:#ffffff0a!important;border:1px solid #f0c99633!important;color:#e8cfae;box-shadow:none;transition:transform .25s var(--m3-ease),border-color .25s}
body.order-page #order-showcase .showcase-categories button:hover{transform:translateX(4px);border-color:#f0c99688!important}
body.order-page #order-showcase .showcase-categories button[aria-pressed=true]{background:linear-gradient(180deg,#d0704a,#a84a2b)!important;color:#fff3df!important;border-color:#d0704a!important}
.sc-deco{position:absolute;z-index:3;height:auto;pointer-events:none;filter:drop-shadow(0 12px 10px #0009);transform:translateZ(var(--z,60px)) translate3d(calc(var(--tx,0)*var(--d,14)*1px),calc(var(--ty,0)*var(--d,14)*.6px),0);animation:p3Float var(--t,6s) ease-in-out infinite}
.sc-deco.deco-a{width:46px;left:8%;top:38%;--z:70px;--d:-22;--t:5.5s}.sc-deco.deco-d{width:34px;right:12%;bottom:13%;--z:80px;--d:14;--t:5s;animation-delay:-1s}

@media(max-width:900px){body.order-page .order-tabs{grid-template-columns:1fr;gap:34px}body.order-page .order-tabs a.p3{min-height:300px}body.order-page #order-showcase .showcase-card{flex-basis:86%}}
@media(prefers-reduced-motion:reduce){.p3-art img,.p3-glow,.sc-deco,body.order-page #order-showcase .showcase-product{animation:none}body.order-page .order-tabs a.p3,body.order-page #order-showcase .showcase-card{rotate:none!important}}

/* ===== Combined Products + Order page: brew guide and questions ===== */
body.order-page .guide,body.order-page .guide-faq{margin:40px 0;padding:48px 5%;background:var(--glass);border:1px solid #fff0d833;border-radius:22px;backdrop-filter:blur(16px);box-shadow:0 20px 65px #0003;color:#fff1db}
body.order-page .guide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
body.order-page .guide .kicker{color:#f0b36a;font-size:11px;letter-spacing:.26em;margin:0 0 14px}
body.order-page .guide h2,body.order-page .guide-faq h2{font:700 clamp(36px,4.4vw,62px)/1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;color:#fff3df;margin:0 0 16px}
body.order-page .guide-copy p:last-child{color:#dcc3a3;line-height:1.7;max-width:46ch}
body.order-page .guide .brew-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
body.order-page #guide-recipe .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
body.order-page #guide-recipe .stats div{display:flex;flex-direction:column;gap:6px;padding:16px 8px;text-align:center;border-top:1px solid #f0c9964d}
body.order-page #guide-recipe .stats b{font:700 clamp(26px,3vw,40px)/1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;color:#fff3df}
body.order-page #guide-recipe .stats span{font-size:10px;letter-spacing:.22em;color:#f0b36a}
body.order-page #guide-recipe p{color:#dcc3a3;line-height:1.75;margin:0}
body.order-page .guide-faq details{border-top:1px solid #f0c99633;padding:18px 0}
body.order-page .guide-faq summary{cursor:pointer;font-size:18px;font-weight:600;color:#fff3df;list-style:none;display:flex;justify-content:space-between;gap:16px}
body.order-page .guide-faq summary::after{content:'+';color:#f0b36a;font-size:24px;line-height:1;transition:transform .3s}
body.order-page .guide-faq details[open] summary::after{transform:rotate(45deg)}
body.order-page .guide-faq details p{margin:12px 0 0;color:#dcc3a3;line-height:1.75;max-width:70ch}
@media(max-width:860px){body.order-page .guide{grid-template-columns:1fr;gap:26px;padding:34px 22px}body.order-page .guide-faq{padding:34px 22px}}
/* Plant canvas on the hero stage */
.plant-stage-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}