/* Shared shop UI: flat surfaces, clear controls and generous touch targets. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-banner{background:var(--ink);color:var(--paper);font-size:11px;text-align:center;letter-spacing:.04em;padding:7px 20px}
.header{position:sticky;top:0;z-index:25}
html{scroll-padding-top:100px}
.basket-toggle{display:flex;align-items:center;gap:10px;padding:10px 0;background:none;border:0;font-size:14px;font-weight:600;min-height:44px}
.basket-count{min-width:23px;height:23px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:11px;display:grid;place-items:center}
.buy-button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:48px;padding:14px 21px;background:var(--ink);color:var(--paper-card);border:1px solid var(--ink);font:600 14px var(--body);border-radius:3px;transition:transform .2s,background .2s,color .2s}
.buy-button:hover{background:var(--paper-card);color:var(--ink);transform:translateY(-2px)}
.buy-button:active,.buy-button.just-added{transform:scale(.97)}
.buy-button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.product-price{font-size:12px}
.demo-note{font-size:12px;line-height:1.6;color:var(--ink);opacity:.8}
.icon-button{background:none;border:0;font-size:32px;line-height:1;width:44px;height:44px;cursor:pointer}
.drawer-open{overflow:hidden}
.basket-dialog{position:fixed;inset:0 0 0 auto;margin:0;border:0;width:min(520px,100%);height:100dvh;max-height:100dvh;max-width:100%;padding:28px;background:var(--paper-card);color:var(--ink);overflow:auto}
.basket-dialog[open]{display:flex;flex-direction:column;animation:drawer-in .3s both}
.basket-dialog::backdrop{background:#3a241575;backdrop-filter:blur(3px)}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.drawer-heading h2{font-size:34px}
.basket-items{margin:22px 0;flex:1}
.basket-item{display:flex;align-items:flex-start;gap:15px;padding:24px 0;border-top:1px solid #3a241529}
.basket-item img{width:76px;height:95px;object-fit:contain}
.basket-item-info{flex:1}
.basket-item h3{font-size:21px;letter-spacing:-.035em;line-height:1.2}
.basket-item p{font-size:11px;margin:7px 0 12px}
.basket-item>strong{font-size:13px;white-space:nowrap}
.quantity-control{display:inline-flex;border:1px solid #3a241540;align-items:center;vertical-align:middle}
.quantity-control button{width:36px;height:36px;background:none;border:0;font-size:21px}
.quantity-control span{width:32px;text-align:center;font-size:14px}
.quantity-control button:disabled{opacity:.3;cursor:not-allowed}
.remove-item{font-size:11px;background:none;border:0;text-decoration:underline;text-underline-offset:3px;display:block;padding:9px 0}
.totals{margin:0 0 20px}
.totals>div{display:flex;justify-content:space-between;gap:20px;margin:12px 0;font-size:14px}
.totals dd{margin:0}
.totals .total-line{border-top:1px solid #3a24153d;margin-top:18px;padding-top:18px;font-size:19px;font-weight:700}
.checkout-link{display:flex;width:100%;margin-top:20px}
.continue-shopping{width:100%;background:none;border:0;padding:16px;font-size:12px;text-decoration:underline}
.empty-basket{text-align:center;padding:65px 10px}
.empty-basket .icon{width:50px;height:50px;margin:auto auto 25px}
.empty-basket h3{font-size:30px}
.empty-basket p{font-size:14px;margin:20px 0}
.shop-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,18px);background:var(--ink);color:var(--paper);padding:14px 23px;border-radius:4px;max-width:90vw;z-index:60;opacity:0;pointer-events:none;font-size:13px;transition:opacity .2s,transform .2s}
.shop-toast.visible{opacity:1;transform:translate(-50%,0)}
.story-hero{padding:50px var(--gutter) 80px;display:flex;align-items:center;gap:7%;background:var(--paper)}
.story-copy{width:48%}
.breadcrumb{font-size:12px;display:block;margin-bottom:40px;text-decoration:underline;text-underline-offset:4px}
.story-copy h1{font-size:clamp(48px,5.7vw,86px);margin:25px 0}
.story-copy .lede{font-size:20px;max-width:460px;line-height:1.6}
.story-photo{width:45%;aspect-ratio:1;object-fit:cover;border-radius:50% 50% 0 0}
.story-body{display:flex;gap:10%;padding:85px var(--gutter);background:var(--paper-card)}
.story-body article{max-width:700px;flex:1}
.story-body h2{font-size:42px;margin:0 0 26px}
.story-body h3{font-size:26px;margin:32px 0 15px}
.story-body p{font-size:17px;line-height:1.8;margin-bottom:20px}
.story-aside{width:250px;flex-shrink:0;align-self:flex-start}
.story-aside img{width:100%;height:220px;object-fit:contain}
.story-aside h2{font-size:29px}
.story-aside .buy-button{width:100%;margin-top:15px}
.story-sources{border-top:1px solid #3a24152a;padding-top:24px;margin-top:35px;font-size:12px}
.story-sources a{display:block;text-decoration:underline;margin-top:8px;font-size:12px}
.next-story{display:flex;justify-content:space-between;align-items:center;padding:35px var(--gutter);border-top:1px solid #3a24152d;font-size:18px}
.checkout-shell{padding:45px var(--gutter) 90px;max-width:1280px;margin:auto}
.checkout-shell h1{font-size:clamp(43px,5vw,70px);margin:20px 0}
.checkout-steps{display:flex;gap:25px;padding:20px 0 35px;margin:0;list-style:none;font-size:12px}
.checkout-steps li{opacity:.55}
.checkout-steps li[aria-current=step]{opacity:1;text-decoration:underline;text-underline-offset:8px}
.checkout-layout{display:flex;gap:8%;align-items:flex-start}
.checkout-main{flex:1;min-width:0}
.order-summary{width:320px;padding:25px 0;border-top:1px solid #3a241540;position:sticky;top:115px}
.order-summary h2{font-size:25px;margin-bottom:20px}
.order-summary ul{list-style:none;padding:0;margin:0 0 25px}
.order-summary li{font-size:13px;display:flex;justify-content:space-between;margin:12px 0;gap:20px}
.checkout-panel h2{font-size:32px;margin:15px 0 25px}
.checkout-panel[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}
.form-grid .full{grid-column:1/-1}
input,select{width:100%;min-height:48px;padding:11px 12px;border:1px solid #3a241558;background:var(--paper-card);color:var(--ink);border-radius:3px;font:16px var(--body)}
input:focus,select:focus{outline:2px solid var(--ink);outline-offset:2px}
.field-help{font-size:12px;line-height:1.6;font-weight:400}
.form-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:28px}
.form-actions .plain-button,.plain-button{background:none;border:0;text-decoration:underline;font-size:13px;padding:10px 0;min-height:44px}
.status-message{font-size:13px;margin:15px 0;padding:12px 0;border-top:1px solid #3a241533;line-height:1.6}
.status-message:empty{display:none}
.delivery-review{font-size:15px;line-height:1.8;white-space:pre-line;padding:20px 0;border-block:1px solid #3a241533}
.review-note{font-size:13px;margin:20px 0;line-height:1.7}
.payment-options{border:0;padding:0;margin:25px 0}
.payment-options legend{font-size:13px;font-weight:600;margin-bottom:15px}
.payment-options label{display:flex;align-items:center;gap:12px;font-size:14px;margin:12px 0}
.payment-options input{width:18px;min-height:18px;accent-color:var(--ink)}
.receipt{padding:45px 0;max-width:650px}
.receipt h1{font-size:55px;margin:25px 0}
.receipt>p{margin-bottom:22px}
.receipt .receipt-mark{font-size:38px;width:76px;height:76px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
.brand-feature{padding:90px var(--gutter);background:var(--paper-card)}
.brand-feature h2{font-size:clamp(42px,5vw,70px);margin:20px 0 30px}
.brand-feature img{width:100%;height:auto}
.brand-feature figcaption{font-size:11px;margin-top:12px}
.brand-cup{display:flex;align-items:center;gap:7%;background:var(--coconut-bg)}
.brand-cup figure{width:55%}
.brand-cup .brand-copy{flex:1}
.brand-cup p{font-size:16px;line-height:1.8}
.brand-cup h2{font-size:clamp(38px,4.5vw,64px)}
@media(max-width:760px){
 html{scroll-padding-top:86px}.demo-banner{font-size:9px;padding:7px 12px}.header{gap:14px}.basket-toggle{font-size:12px;margin-left:auto;gap:7px}.basket-toggle .icon{width:19px}.basket-count{width:19px;min-width:19px;height:19px}.menu-toggle{padding:10px 0}
 .basket-dialog{padding:22px}.basket-item{gap:9px}.basket-item img{width:55px}.basket-item>strong{font-size:12px}.drawer-heading h2{font-size:30px}
 .story-hero{flex-direction:column;padding-top:25px;gap:35px}.story-copy,.story-photo{width:100%}.story-copy h1{font-size:48px}.story-copy .lede{font-size:17px}.breadcrumb{margin-bottom:30px}.story-body{flex-direction:column;padding-top:60px;gap:40px}.story-body h2{font-size:34px}.story-body p{font-size:15px}.story-aside{width:100%}.story-aside img{height:260px}.next-story{font-size:14px;gap:25px}
 .checkout-shell{padding:25px 24px 65px}.checkout-layout{flex-direction:column;gap:35px}.checkout-main,.order-summary{width:100%}.order-summary{position:static}.checkout-steps{gap:18px;font-size:11px}.form-grid{grid-template-columns:1fr}.checkout-panel h2{font-size:28px}.receipt h1{font-size:43px}
 .brand-feature{padding:65px 24px}.brand-cup{flex-direction:column;gap:30px}.brand-cup figure{width:100%}
}
.brand-feature>p{max-width:660px;line-height:1.75;margin-bottom:30px}
.brand-feature figure{margin:25px 0 35px}
.brand-cup img{width:100%;height:auto}
.order-summary p{display:flex;justify-content:space-between;gap:20px}
.order-summary p.field-help{display:block}
@media(prefers-reduced-motion:reduce){.buy-button,.orchard-row{transition:none}}

/* A floating cream-glass surface; header dimensions stay aligned with the flavour stage. */
.header{background:transparent;border-bottom:0;isolation:isolate}
.header::before{
 content:'';position:absolute;inset:8px 12px;z-index:-1;pointer-events:none;
 border-radius:22px;background:#fff6e9;
 border:1px solid rgba(255,255,255,.72);
 box-shadow:0 5px 22px rgba(58,36,21,.09),inset 0 1px 0 rgba(255,255,255,.65);
}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
 .header::before{
  background:linear-gradient(135deg,rgba(255,246,233,.72),rgba(251,234,210,.48));
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
 }
}
@media(max-width:760px){
 .header::before{inset:6px 8px;border-radius:19px}
 .header .nav{
  top:calc(100% + 2px);left:8px;right:8px;border-radius:19px;
  border:1px solid rgba(255,255,255,.75);background:rgba(255,246,233,.94);
  box-shadow:0 12px 28px rgba(58,36,21,.12);padding:14px 22px 18px;
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
 }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .header::before,.header .nav{background:#fff6e9;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#d8b48a}
}