/* Pantopia PWA — ported from the approved mobile design. */

/* Fonts are served by the app itself (wwwroot/assets/fonts, SIL Open Font License): Apfel Grotezk for headings, Inter for text. */
@font-face{font-family:Apfel;src:url('/assets/fonts/ApfelGrotezk-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-latin.woff2') format('woff2');font-display:swap;font-weight:400 600;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');font-display:swap;font-weight:400 600;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-cyrillic.woff2') format('woff2');font-display:swap;font-weight:400 600;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--brown:#60362f;--ink:#35231d;--cream:#e9dfd3;--paper:#f8f4ee;--muted:#bca18a;--line:#ffffff29;--ease:cubic-bezier(.22,1,.36,1);--display:Apfel,Arial,sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{background:var(--brown)}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--cream);color:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),background-color .2s,opacity .2s}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #dcb894;outline-offset:3px}
button:active{transform:scale(.97)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1:focus{outline:none}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:-.04em}
h1{font-size:42px;line-height:1.02}h2{font-size:31px;line-height:1.05}h3{font-size:24px;line-height:1.1}
img{display:block;max-width:100%;object-fit:cover}
.ico{width:1em;height:1em;font-size:21px;pointer-events:none;vertical-align:middle;flex-shrink:0;display:inline-block}

/* Boot splash while WebAssembly starts (no prerendering). */
.boot{position:fixed;inset:0;display:grid;place-content:center;gap:22px;background:var(--brown);color:var(--paper);z-index:100;text-align:center}
.boot-mark{font:58px var(--display);letter-spacing:-.06em}
.boot-line{width:120px;height:2px;background:#ffffff22;border-radius:2px;overflow:hidden;margin:auto}
.boot-line span{display:block;height:100%;width:40%;background:var(--cream);animation:bootLine 1.1s ease-in-out infinite}
body:has(.app-root) .boot{display:none}
@keyframes bootLine{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.screen-loading{min-height:60vh;display:grid;place-items:center}
.screen-loading span{width:28px;height:28px;border-radius:50%;border:2px solid #ffffff30;border-top-color:var(--cream);animation:spin .8s linear infinite}
.light .screen-loading span{border-color:#60362f25;border-top-color:var(--brown)}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(100deg,#ffffff0c 30%,#ffffff1c 50%,#ffffff0c 70%);background-size:300% 100%;animation:shimmer 1.4s infinite;border-radius:18px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

.app-frame{height:100dvh;width:100%;max-width:480px;margin:auto;position:relative;isolation:isolate;overflow:hidden;padding-top:var(--safe-top);background:radial-gradient(ellipse at 95% 15%,#92644b80,transparent 50%),radial-gradient(ellipse at 10% 85%,#a16f4b45,transparent 55%),var(--brown);transition:background-color .55s ease}
.app-frame:before{content:"";position:absolute;top:0;left:0;right:0;height:var(--safe-top);background:var(--brown);z-index:50;pointer-events:none}
.app-screen{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;position:relative;padding-bottom:calc(108px + var(--safe-bottom));touch-action:pan-y}
.app-screen::-webkit-scrollbar,.scrollrow::-webkit-scrollbar{display:none}
.app-screen.product-screen,.app-screen.auth-screen,.app-screen.pass-screen{padding-bottom:0}
.app-screen.has-cart:not(.product-screen):not(.auth-screen):not(.pass-screen){padding-bottom:calc(166px + var(--safe-bottom))}
.app-screen.light{background:var(--paper);color:var(--ink)}
.app-screen img{-webkit-user-drag:none;user-select:none}
.pad{padding-inline:20px}.section{padding:28px 20px 0}
.row{display:flex;align-items:center;gap:12px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:grid;gap:12px}
.eyebrow{font-size:9px;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;font-weight:500}
.muted{opacity:.65}.small{font-size:11px;line-height:1.65}.body-copy{font-size:13px;line-height:1.75}
.glass{background:linear-gradient(130deg,#ffffff1c,#ffffff08);border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff24;backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.topbar{height:87px;padding:24px 20px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:3}
.topbar h2{font-size:23px;letter-spacing:-.025em}
.circle{width:42px;height:42px;border:1px solid #ffffff38;border-radius:50%;display:grid;place-items:center;flex:none;background:#ffffff0c}
.circle.solid{background:var(--paper);color:var(--brown);border-color:var(--paper)}
.circle img.plus{width:40px;height:40px}
.light .circle{border-color:#60362f26;background:#60362f05}
.logo-mark{width:23px;height:44px;object-fit:contain;flex:none}
.logo-round{width:34px;height:34px;border-radius:50%}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.primary{min-height:52px;width:100%;padding:14px 20px;border-radius:99px;background:var(--paper);color:var(--brown);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;gap:14px}
.primary.brown{background:var(--brown);color:var(--paper)}
.primary.loading{opacity:.7;pointer-events:none}
.secondary{min-height:46px;border:1px solid var(--line);padding:12px 18px;border-radius:99px;font-size:12px;width:100%;display:flex;align-items:center;justify-content:center}
.light .secondary,.sheet .secondary{border-color:#60362f30}
.textbtn{font-size:11px;min-height:42px;text-decoration:underline;text-underline-offset:5px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid currentColor;border-radius:99px;font-size:8px;letter-spacing:.045em;line-height:1.3;white-space:nowrap}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:17px}
.section-heading h2{font-size:27px;max-width:76%}
.section-heading .textbtn{white-space:nowrap;font-size:10px}
.rule{height:1px;background:currentColor;opacity:.14;margin:22px 0}
.note{font-size:10px;line-height:1.65;opacity:.65}.light .note{opacity:.7}
.error-note{font-size:11px;line-height:1.6;padding:12px 14px;border-radius:14px;background:#b3212112;border:1px solid #b3212133;margin:12px 0}

/* Menu */
.categorybar{display:flex;gap:21px;overflow:auto;white-space:nowrap;padding:15px 20px 16px;position:sticky;top:0;z-index:4;background:var(--brown);scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
.categorybar::-webkit-scrollbar{display:none}
.categorybar button{font-size:12px;min-height:30px;padding:0;opacity:.57;position:relative;flex:none}
.categorybar button.active{opacity:1}
.categorybar button.active:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--cream);animation:underlineIn .24s ease-out}
.scrollrow{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 5px}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-card{position:relative;min-width:0;border-radius:18px;overflow:hidden;padding:13px 12px;background:linear-gradient(145deg,#ffffff0c,#ffffff03);border:1px solid var(--line);text-align:left;display:flex;flex-direction:column;min-height:226px}
.product-card:has(button:active){border-color:#fff7}
.scrollrow .product-card{flex:0 0 164px;scroll-snap-align:start}
.product-open{width:100%;padding:0;text-align:center;display:block}
.product-art{height:130px;width:100%;object-fit:contain;margin:0 0 11px;padding:5px;transition:transform .6s var(--ease)}
.product-art.placeholder{display:grid;place-items:center;color:#ffffff40}
.product-art.placeholder .ico{font-size:44px}
.product-card:hover .product-art{transform:translateY(-3px)}
.product-card h3{font:500 12px/1.4 Inter;letter-spacing:-.015em;min-height:34px;margin-bottom:12px}
.product-card .card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500}
.product-card .add{width:34px;height:34px;display:grid;place-items:center;background:var(--paper);color:var(--brown);border-radius:50%}
.product-card.unavailable{opacity:.55}
.stock-badge{position:absolute;top:10px;left:10px;z-index:1;padding:4px 8px;border-radius:99px;font-size:9px;font-weight:600;letter-spacing:.04em;background:#ffffff1a;border:1px solid #ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stock-badge.low{background:var(--paper);color:var(--brown);border-color:var(--paper)}
.feature-photo{position:relative;border-radius:21px;overflow:hidden;display:block;width:100%;height:278px;text-align:left}
.feature-photo>img{position:absolute;inset:0;width:100%;height:100%}
.feature-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#35231dbb,transparent 70%)}
.feature-caption{position:absolute;z-index:1;bottom:23px;left:22px;right:22px;color:white}
.feature-caption h2{font-size:33px;margin:8px 0}
.feature-caption .between{margin-top:13px}
.feature-price{font-size:16px;font-weight:500}
.feature-plus{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--brown)}
.feature-photo.combo-feature{height:250px;margin-bottom:20px}
.combo-feature>img{object-position:center 48%}
.combo-feature .feature-caption h2{font-size:32px}
.combo-feature:after{background:linear-gradient(0deg,#30211dbb,transparent 70%)}
.category-feature{aspect-ratio:4/3;height:auto;min-height:240px;margin-bottom:20px}
.category-feature>img{object-fit:cover;object-position:center}
.category-feature .feature-caption{inset:auto 20px 19px}
.category-feature .feature-caption h2{max-width:56%;font-size:29px;line-height:1.04}
.category-feature .feature-caption .eyebrow{font-size:8px;letter-spacing:.09em;max-width:53%;display:block}
.category-feature .feature-caption .small{font-size:10px;max-width:82%;text-align:left;line-height:1.4}
.category-feature:after{background:linear-gradient(0deg,#2c180db0,transparent 52%),linear-gradient(90deg,#2c180d35,transparent 62%)}
.mini-club{display:flex;justify-content:space-between;align-items:center;border-radius:18px;padding:15px 18px;text-align:left;width:100%}
.mini-club strong{font:22px var(--display);display:block;margin:7px 0;font-weight:400}
.mini-club .eyebrow{font-size:8px}.mini-club .small{font-size:10px}
.home-membership{padding-top:20px;padding-bottom:0}
.home-section{padding-top:0;padding-bottom:0;margin-top:28px}
.home-section .section-heading{margin:0 0 16px;align-items:center}
.home-section .feature-photo{margin:0}
.home-section.home-pass{padding-bottom:22px}
.home-sections>.home-pass:first-child{margin-top:17px}
.home-pass .pass-feature{margin-top:0}
.home-banner{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:21px;margin-bottom:13px}
.feature-rail>.feature-photo{flex:0 0 86%;scroll-snap-align:start}
.morning-grid{row-gap:13px}.menu-collection{row-gap:12px}
.menu-collection>.menu-insert,.menu-collection>.pass-feature-compact{margin:8px 0}
.menu-insert{position:relative;grid-column:1/-1;isolation:isolate;display:block;width:100%;height:218px;margin:9px 0;border-radius:23px;overflow:hidden;text-align:left;background:#6c422c;color:var(--paper)}
.menu-insert>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .65s var(--ease)}
.menu-insert:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#301b0d75,transparent 75%),linear-gradient(0deg,#29170cab,transparent 67%)}
.insert-copy{height:100%;padding:22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.insert-copy .eyebrow{max-width:75%;font-size:8px;letter-spacing:.12em}
.insert-copy h3{font-size:31px;line-height:1.02;white-space:pre-line;margin:11px 0 17px;max-width:78%;text-wrap:balance}
.insert-copy>div{display:flex;align-items:center;justify-content:space-between;width:100%;gap:13px}
.insert-copy>div>span{font-size:10px;line-height:1.4;max-width:80%}
.insert-copy i{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--paper);color:var(--brown);flex:none}
.insert-copy i .ico{font-size:19px}
.insert-box>img{object-position:center 43%}.insert-bakes>img{object-position:center 57%}.insert-place>img{object-position:50% 52%}
.insert-place:after,.insert-box:after,.insert-bakes:after{background:linear-gradient(0deg,#291b15c9,transparent 100%)}
.location-button{text-align:left}
.location-button span{display:block;font-size:10px;line-height:1.5}
.bottom-nav{position:absolute;z-index:12;bottom:calc(10px + var(--safe-bottom));left:14px;right:14px;height:68px;display:flex;justify-content:space-around;align-items:center;border-radius:30px;background:linear-gradient(120deg,#67483af0,#442c25ed);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid #ffffff40;box-shadow:0 10px 30px #291b1540;color:var(--cream)}
.bottom-nav a{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:58px;height:54px;font-size:8px;opacity:.6;border-radius:22px}
.bottom-nav a.active{background:#fff1;opacity:1}
.bottom-nav a.active .ico{animation:navSettle .32s var(--ease)}
.bottom-nav .ico{font-size:22px}
.cart-peek{position:absolute;bottom:calc(90px + var(--safe-bottom));left:20px;right:20px;z-index:11;display:flex;justify-content:space-between;align-items:center;background:#f8f4eee8;color:var(--brown);padding:8px 9px 8px 18px;border-radius:99px;backdrop-filter:blur(20px);box-shadow:0 6px 24px #32181033;font-size:12px;animation:bagRise .3s var(--ease)}
.cart-peek>span:last-child{padding:11px 15px;background:#fff;border-radius:100px;display:flex;align-items:center;gap:6px}
/* Today's order on its way: sits above the navigation like the bag, dark while baking, bright once ready. */
.app-screen.has-order:not(.product-screen):not(.auth-screen):not(.pass-screen){padding-bottom:calc(166px + var(--safe-bottom))}
.app-screen.has-order.has-cart:not(.product-screen):not(.auth-screen):not(.pass-screen){padding-bottom:calc(232px + var(--safe-bottom))}
.order-peek{position:absolute;bottom:calc(90px + var(--safe-bottom));left:20px;right:20px;z-index:11;display:flex;align-items:center;gap:12px;overflow:hidden;padding:8px 9px 8px 18px;border-radius:99px;color:var(--paper);background:linear-gradient(120deg,#7a5242ee,#4a2f27f2);border:1px solid #ffffff3d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 #ffffff24,0 6px 24px #3218104d;animation:bagRise .3s var(--ease);transition:background .5s ease,color .5s ease}
.order-peek.above-bag{bottom:calc(156px + var(--safe-bottom))}
.order-peek-dot{position:relative;width:8px;height:8px;border-radius:50%;flex:none;background:#e9b98f}
.order-peek-dot:after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:orderPulse 1.8s ease-out infinite}
.order-peek-text{flex:1;min-width:0;display:grid;gap:3px}
.order-peek-text strong{font-size:12px;font-weight:600;line-height:1.2}
.order-peek-text small{font-size:9px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-peek-time{flex:none;padding:11px 15px;border-radius:100px;display:flex;align-items:center;gap:6px;font-size:12px;background:var(--paper);color:var(--brown)}
.order-peek-time .ico{font-size:16px}
.order-peek-progress{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:#ffffff1f;overflow:hidden}
.order-peek-progress i{display:block;height:100%;border-radius:inherit;background:#e9b98f;transition:width .6s var(--ease)}
.order-peek.ready{background:#f8f4eef2;color:var(--brown);border-color:#fff;box-shadow:0 0 0 0 #f8f4ee80,0 6px 24px #32181040;animation:bagRise .3s var(--ease),orderReady 2.4s ease-out .3s 3}
.order-peek.ready .order-peek-dot{background:#4f8a5b}
.order-peek.ready .order-peek-time{background:var(--brown);color:var(--paper)}
.order-peek.ready .order-peek-progress{background:#60362f18}.order-peek.ready .order-peek-progress i{background:var(--brown)}
@keyframes orderPulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
@keyframes orderReady{0%{box-shadow:0 0 0 0 #f8f4ee99,0 6px 24px #32181040}100%{box-shadow:0 0 0 14px #f8f4ee00,0 6px 24px #32181040}}
.empty{padding:55px 20px;text-align:center}
.empty>.ico{font-size:30px}
.empty h2{margin:18px 0 14px}
.empty .primary{margin-top:25px}
.offline-banner{position:absolute;z-index:40;top:calc(8px + var(--safe-top));left:50%;transform:translateX(-50%);background:var(--paper);color:var(--brown);border-radius:99px;padding:7px 13px;font-size:10px;display:flex;gap:6px;align-items:center;box-shadow:0 6px 20px #0002}
.offline-banner .ico{font-size:14px}

/* Product */
.product-full{min-height:100%;position:relative;isolation:isolate;display:flex;flex-direction:column}
.product-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-3;object-fit:cover;object-position:center;animation:imageIn .8s var(--ease)}
.product-full:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#39211999,transparent 43%,#39211930)}
.product-full .topbar{padding-top:24px;height:82px;align-items:center}
.product-title{text-align:center;font-size:25px;line-height:1.08;padding:0 50px}
.nutrition{display:flex;justify-content:center;gap:14px;text-align:center;padding:16px 20px 0}
.nutrition strong{font-size:12px;font-weight:500;display:flex;justify-content:center;align-items:baseline;line-height:1.2}
.nutrition em{font-style:normal}.nutrition em.unit{margin-left:.25em}
/* Numbers that roll to their new value, digit by digit, like a counter. */
.roll-number{display:inline-flex;font-variant-numeric:tabular-nums}
.roll-digit{display:inline-block;height:1.2em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);animation:rollAppear .45s var(--ease)}
.roll-strip{display:block;transform:translateY(calc(var(--d) * -10%));transition:transform .8s cubic-bezier(.22,1,.36,1) calc(var(--p) * 50ms)}
.roll-strip span{display:block;height:1.2em;line-height:1.2em;text-align:center}
@keyframes rollAppear{from{opacity:0;transform:translateY(-35%)}to{opacity:1;transform:none}}
.nutrition>div>span{font-size:8px;opacity:.68;display:block;margin-top:4px}
.product-space{flex:1;min-height:240px;position:relative;display:grid;place-items:center}
.product-tools{margin-top:auto;padding-bottom:22px;position:relative;z-index:2}
.option-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:5px 20px 13px}
.option-tile{min-width:0;height:111px;padding:8px 4px 12px;border-radius:18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:linear-gradient(145deg,#fff2,#9b68452b)}
.option-tile>span:not(.ingredient-none){font-size:10px}
.option-tile small{font-size:8px;opacity:.75;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.option-ingredient{height:48px;width:48px;object-fit:contain;filter:drop-shadow(0 4px 6px #39211920)}
.ingredient-none{display:grid;place-items:center;opacity:.85}
.option-ingredient.ingredient-none{height:44px;width:44px;border:1px solid #ffffff66;border-radius:50%;margin:2px}
.ingredient-none .ico{font-size:22px}
.purchase-row{display:flex;gap:9px;margin:0 20px}
.sizes{display:flex;align-items:center;justify-content:space-around;flex:1;padding:5px;border-radius:40px;height:55px}
.sizes button{height:43px;min-width:42px;border-radius:30px;font-size:12px;display:grid;align-content:center;gap:2px}
.sizes button.active{background:var(--paper);color:var(--brown)}
.sizes small{font-size:8px}
.purchase-row .sizes:not(.qty){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;flex:1.12;height:62px;padding:5px;border-radius:19px;min-width:0}
.sizes:not(.qty) button{min-width:0;width:100%;height:50px;border-radius:13px;font-size:13px;line-height:1;gap:5px;padding:5px 1px}
.sizes:not(.qty) small{font-size:8px;line-height:1.1;white-space:nowrap;opacity:.7}
.sizes:not(.qty) button.active{box-shadow:0 3px 10px #29180c12}
.buy-button{border-radius:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:48%;padding:7px 7px 7px 19px;font-size:14px;font-weight:500}
.purchase-row:has(.sizes:not(.qty)) .buy-button{width:auto;flex:1;min-width:0}
.buy-button .plus{width:40px;height:40px}
.buy-button .plus-fallback{width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--brown);display:grid;place-items:center}
.buy-button.added{animation:addedPulse .42s ease}
.product-desc{font-size:11px;line-height:1.6;padding:10px 22px 19px;text-align:center}
.stock-note{margin:-9px 22px 14px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.stock-note.low{opacity:1}
.qty{display:flex;align-items:center;justify-content:space-around;gap:10px}
.qty .circle{width:33px;height:33px}.qty span{font-size:12px}
.custom-summary{font-size:10px;text-align:center;margin:0 22px 4px;opacity:.85}
.save-usual{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 10px;padding:4px 10px;font-size:10px;line-height:1.2}
.save-usual .ico{font-size:14px}
.product-editorial{background:#653a22}
.product-editorial .product-bg{height:calc(100% - 64px);width:100%;object-position:center 51%;mask-image:linear-gradient(#000 83%,transparent 100%);-webkit-mask-image:linear-gradient(#000 83%,transparent 100%)}
.product-editorial:after{background:linear-gradient(0deg,#382115a6,transparent 37%,transparent 74%,#38211550)}
.product-heading{text-align:center;padding:0 21px;position:relative;z-index:1}
.product-heading .eyebrow{font-size:8px;letter-spacing:.13em;opacity:.85}
.product-heading .product-title{padding:0;max-width:330px;margin:9px auto 0;font-size:29px;line-height:1.03;text-wrap:balance;text-shadow:0 2px 20px #4c260840}
.product-editorial .product-space{min-height:245px}
.product-editorial.is-food .product-tools{padding-top:30px}
.product-editorial .product-tools{background:linear-gradient(0deg,#39211942,transparent);padding-bottom:max(22px,env(safe-area-inset-bottom))}
.product-editorial .product-desc{max-width:390px;margin:auto;text-shadow:0 1px 10px #38211599}
.product-editorial .topbar{height:76px;padding-top:20px}
.product-editorial .topbar h2{font-size:19px}
.product-editorial.no-photo{background:radial-gradient(ellipse at 75% 38%,#ad7a4c45,transparent 65%),var(--brown)}
.product-menu-art{width:min(88%,360px);max-height:48dvh;object-fit:contain;filter:drop-shadow(0 18px 18px #28141035)}

/* Sheets */
.sheet-shade{position:absolute;inset:0;background:#22161070;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:30;display:flex;align-items:flex-end;animation:fadeIn .25s}
.sheet{width:100%;max-height:91%;overflow-y:auto;border-radius:30px 30px 0 0;padding:12px 22px 25px;padding-bottom:max(25px,var(--safe-bottom));color:var(--ink);background:linear-gradient(135deg,#f8f4eef5,#e9dfd3ed);backdrop-filter:blur(32px);border:1px solid #fff9;box-shadow:0 -20px 60px #25171033;animation:sheetIn .55s var(--ease);scrollbar-width:none}
.sheet-handle{height:24px;width:100%;margin:-12px 0 4px;position:relative;flex:none}
.sheet-handle:before{content:'';position:absolute;width:35px;height:4px;border-radius:4px;background:#60362f30;top:10px;left:calc(50% - 17.5px)}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.sheet-heading h2{font-size:29px}
.sheet .circle{border-color:#60362f25;background:#fff5}
.choice-list{display:grid;gap:8px;margin:18px 0}
.choice{border:1px solid #60362f25;border-radius:15px;padding:14px;min-height:54px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;width:100%}
.choice.selected{background:var(--brown);color:var(--paper);border-color:var(--brown)}
.choice span small{display:block;font-size:9px;opacity:.65;margin-top:4px}
.choice .radio{width:17px;height:17px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none}
.choice.selected .radio:after{content:'';background:currentColor;width:7px;height:7px;border-radius:50%}
.sheet .primary{margin-top:18px}
.sheet .note{margin-top:12px}
.sheet input{width:100%;min-height:53px;border:1px solid #60362f25;border-radius:14px;background:#fff5;padding:12px 14px;color:var(--ink);outline:0}
.sheet input:focus-visible{outline:2px solid #b3866c;outline-offset:3px}
.field{display:block;font-size:10px;margin:16px 0 8px}
.ingredient-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:21px 0 0}
.ingredient-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ingredient-choice{min-width:0;min-height:155px;border:1px solid #60362f22;border-radius:20px;background:#d5c5b24d;padding:13px 7px 11px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.ingredient-choice.selected{background:#fffc;border-color:var(--brown);box-shadow:0 5px 18px #60362f0c}
.ingredient-thumb{width:66px;height:62px;object-fit:contain;margin-bottom:8px;flex:none}
.ingredient-thumb.ingredient-none{border:1px solid #60362f30;border-radius:50%;width:56px;height:56px;margin:3px 0 11px}
.ingredient-label{font-size:11px;line-height:1.3;text-align:center;min-height:15px}
.ingredient-choice small{font-size:9px;opacity:.6;margin-top:4px}
.ingredient-check{margin-top:auto;padding-top:11px}
.ingredient-check .ico{font-size:18px}
.ingredient-choice.selected .ingredient-check{color:var(--brown)}
.ingredient-sheet .sheet-heading h2{font-size:28px}
.ingredient-sheet .body-copy{font-size:12px}
.ingredient-sheet .note{font-size:9px}
.ingredient-sheet .primary{margin-top:20px}
.toast{position:absolute;z-index:60;left:22px;right:22px;top:calc(18px + var(--safe-top));background:var(--paper);color:var(--brown);padding:15px 18px;border-radius:18px;font-size:12px;line-height:1.5;box-shadow:0 10px 40px #0003;opacity:0;transform:translateY(-20px);pointer-events:none;transition:all .4s var(--ease)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.product-toast{top:calc(82px + var(--safe-top));left:64px;right:64px;padding:10px 13px;font-size:10px;text-align:center;border-radius:14px;transform:translateY(-8px)}
.toast.product-toast.show{transform:translateY(0)}

/* Bag & orders */
.segments{display:flex;gap:4px;border:1px solid var(--line);border-radius:100px;padding:5px}
.segments button{min-height:39px;padding:8px 13px;flex:1;border-radius:100px;font-size:11px;opacity:.65}
.segments button.active{background:var(--paper);color:var(--brown);opacity:1}
.light .segments,.sheet .segments{border-color:#60362f2b}
.light .segments button.active,.sheet .segments button.active{background:var(--brown);color:var(--paper)}
.cart-item{border-radius:18px;display:flex;gap:12px;padding:14px;margin-top:13px;border:1px solid var(--line);align-items:center}
.cart-item img{width:77px;height:84px;object-fit:contain}
.cart-item .item-content{flex:1;min-width:0}
.cart-item h3{font:500 12px/1.5 Inter;letter-spacing:0}
.cart-item small{font-size:9px;opacity:.65;display:block;margin:5px 0 10px}
/* − 2 + as one pill: the number keeps its width, so the buttons line up from row to row, and the icons sit inside their circles. */
.cart-item .qty{gap:0;padding:3px;border-radius:99px;background:#ffffff10;border:1px solid var(--line);flex:none}
.cart-item .qty .circle{width:28px;height:28px;border:0}
.cart-item .qty .circle .ico{font-size:14px}
.cart-item .qty .circle:disabled{opacity:.35}
.cart-item .qty span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-weight:500}
.cart-item .item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.item-remove{width:26px;height:26px;margin:-4px -6px 0 0;border-radius:50%;display:grid;place-items:center;flex:none;opacity:.6;transition:opacity .2s ease,background .2s ease}
.item-remove:hover,.item-remove:focus-visible{opacity:1;background:#ffffff14}
.item-remove .ico{font-size:15px}
.cart-item .price{font-size:12px}
.cart-checkout{margin:28px 20px 0}
.total-row{font-size:13px;padding:13px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line)}
.pickup-row{display:flex;justify-content:space-between;align-items:center;border-radius:99px;padding:17px 19px;width:100%;font-size:12px;margin:14px 0}
.order-confirm{padding:80px 23px 24px;min-height:100%;display:flex;flex-direction:column;position:relative;isolation:isolate}
.order-confirm>img{position:absolute;inset:0;z-index:-2;height:100%;width:100%}
.order-confirm:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#35231db0,#35231d20)}
.order-confirm h1{font-size:43px;margin:28px 0 15px}
.order-stat{padding:25px;border-radius:25px;background:var(--paper);color:var(--brown);margin-top:10px}
.order-stat strong{display:block;font:49px var(--display);margin-top:11px;font-weight:400}
.order-confirm .bottom-actions{margin-top:auto;padding-top:40px}
.order-confirm>.circle{position:absolute;right:20px;top:23px}
.order-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:16px}
.order-progress span{height:4px;border-radius:4px;background:#60362f22}
.order-progress span.done{background:var(--brown)}
.order-progress-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;font-size:8px;margin-top:7px;opacity:.75}
.history-item{padding:20px 0;border-bottom:1px solid var(--line);font-size:12px}
.history-item small{font-size:9px;opacity:.65;display:block;margin-top:6px}
.light .history-item{border-color:#60362f25}
.history-item h3{font-size:22px}
.language-switch{display:flex;align-items:center;justify-content:center;gap:4px;margin:14px auto 0;padding:4px 4px 4px 12px;border:1px solid #60362f25;border-radius:99px;width:max-content;font-size:11px}
.language-switch .ico{width:15px;height:15px;opacity:.7;margin-right:4px}
.language-switch button{padding:7px 12px;border-radius:99px;opacity:.7}
.language-switch button.active{background:var(--brown);color:var(--paper);opacity:1}
.order-times{display:flex;gap:22px;margin-top:12px}
.order-times span{display:flex;flex-direction:column;gap:3px;font-size:15px;font-variant-numeric:tabular-nums}
.pinned-orders{margin:4px 0 14px}
.pinned-order{border-radius:22px;padding:16px 16px 14px;margin-bottom:10px}
.pinned-order .eyebrow{font-size:8px;opacity:.8}
.pinned-order .circle{width:34px;height:34px}
.pinned-order .circle .ico{width:15px;height:15px}
.pinned-order p{font-size:13px;line-height:1.5;margin:6px 0 14px}
.pin-toggle{display:inline-flex;align-items:center;gap:5px}
.pin-toggle .ico{width:13px;height:13px}
.order-times i{font-style:normal;font-size:8px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.status-chip{display:inline-flex;font-size:9px;letter-spacing:.06em;padding:5px 9px;border-radius:99px;border:1px solid currentColor;opacity:.85;text-transform:uppercase}

/* Club */
.club-hero{position:relative;isolation:isolate;min-height:460px;padding:0 20px 27px;display:flex;flex-direction:column;color:var(--paper)}
.club-hero>img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-position:center 36%}
.club-hero:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#35231dc0,#35231d10 70%)}
.club-hero .topbar{padding-inline:0}
.club-hero h1{font-size:45px;margin:auto 0 21px}
.member-card{aspect-ratio:1.586;border-radius:23px;padding:21px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px 0 #fff5,0 14px 30px #27170d20;background:linear-gradient(120deg,#ffffff30,#ffffff0d);border:1px solid #ffffff6b;backdrop-filter:blur(23px);-webkit-backdrop-filter:blur(23px);color:var(--paper)}
.member-card:after{position:absolute;inset:-100% -70%;content:'';pointer-events:none;background:linear-gradient(115deg,transparent 45%,#fff2 50%,transparent 55%);animation:cardShine 7s ease-in-out infinite}
.member-card .display{font-size:50px;line-height:1}
.member-card .card-brand{font-size:10px;letter-spacing:.09em}
.member-card .card-brand img{width:26px;height:26px}
.member-card small{font-size:8px;opacity:.7;display:block;margin-top:5px}
.member-card .card-foot{border-top:1px solid #ffffff35;padding-top:11px;font-size:8px;letter-spacing:.09em;display:flex;justify-content:space-between}
.progress-track{height:4px;border-radius:9px;background:#60362f22;overflow:hidden;margin:13px 0}
.progress-track span{display:block;height:100%;background:var(--brown);border-radius:9px;animation:progressIn 1.1s var(--ease);transform-origin:left}
.member-progress{padding:22px 20px;border-bottom:1px solid #60362f25}
.member-progress strong{font-size:13px;font-weight:500}
.member-progress small{font-size:10px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.quick-grid a,.quick-grid button{padding:16px 6px;border:1px solid #60362f29;border-radius:16px;display:grid;gap:10px;justify-items:center;font-size:9px}
.quick-grid .ico{font-size:22px}
.perk{margin-bottom:17px;border:1px solid #60362f28;border-radius:20px;overflow:hidden;text-align:left;width:100%;background:transparent;display:block}
.perk>img{width:100%;height:190px}
.perk-copy{padding:20px}
.perk-copy h3{font-size:28px;margin:9px 0}
.perk-copy p{font-size:11px;line-height:1.6;opacity:.65}
.perk-copy .between{margin-top:18px;font-size:11px}
.perk-small{display:grid;grid-template-columns:105px 1fr;min-height:142px}
.perk-small>img{height:100%;min-height:142px}
.perk-small .perk-copy{padding:18px 16px}
.perk-small h3{font-size:24px}
.event-card{border-radius:20px;overflow:hidden;border:1px solid #60362f26;margin-bottom:18px;position:relative}
.event-card>a>img,.event-card img.cover{width:100%;height:242px}
.event-card-copy{padding:19px}
.event-card h3{font-size:29px;margin:8px 0 14px}
.event-card .date-tag{position:absolute;top:14px;left:14px;background:#f8f4eedb;backdrop-filter:blur(16px);border-radius:13px;padding:10px 13px;text-align:center;color:var(--brown)}
.date-tag strong{font:27px var(--display);display:block;font-weight:400}
.date-tag span{font-size:8px;letter-spacing:.12em}
.event-card .save{position:absolute;right:13px;top:13px;background:#f8f4eedb;color:var(--brown)}
.event-card-copy .between{font-size:10px}
.filterrow{display:flex;gap:8px;overflow:auto;white-space:nowrap;padding-bottom:15px;scrollbar-width:none}
.filterrow button{border:1px solid #60362f30;border-radius:99px;font-size:10px;padding:10px 15px;min-height:37px;flex:none}
.filterrow button.active{background:var(--brown);color:var(--paper)}
.event-gallery{height:330px;position:relative}
.event-gallery>img{height:100%;width:100%}
.event-gallery .gallery-buttons{position:absolute;bottom:15px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;color:white}
.gallery-buttons .circle{background:#60362f55;backdrop-filter:blur(15px);border-color:#ffffff38}
.gallery-count{font-size:10px;background:#60362f77;backdrop-filter:blur(20px);border:1px solid #fff5;border-radius:99px;padding:9px 13px}
.photo-thumbs{display:flex;gap:7px;margin-top:16px}
.photo-thumbs button{flex:1;height:49px;min-width:0;border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;opacity:.5}
.photo-thumbs button.active{border-color:var(--brown);opacity:1}
.photo-thumbs img{width:100%;height:100%}
.event-facts{display:grid;grid-template-columns:1.3fr 1fr .6fr;border-block:1px solid #60362f25;padding:15px 0;margin:20px 0;font-size:11px;gap:10px}
.event-facts small{font-size:9px;display:block;opacity:.55;margin-top:5px}
.event-detail h1{font-size:38px;margin-top:11px}
.detail-tabs{display:flex;gap:20px;border-bottom:1px solid #60362f25;margin-top:18px}
.detail-tabs button{font-size:11px;padding:14px 0;opacity:.55;border-bottom:2px solid transparent}
.detail-tabs button.active{border-color:var(--brown);opacity:1}
.tab-panel{padding:19px 0;min-height:150px;font-size:12px;line-height:1.7}
.timeline{display:grid;grid-template-columns:42px 1fr;gap:12px;font-size:11px;margin-bottom:11px}
.timeline time{opacity:.6}
.confirmed{padding:15px;border:1px solid #60362f33;background:#60362f06;border-radius:14px;font-size:12px;margin:4px 0 20px}
.plan-card{border:1px solid #60362f25;border-radius:18px;overflow:hidden;margin-top:15px}
.plan-card img{height:175px;width:100%}
.plan-card>div{padding:18px}
.plan-card h3{font-size:27px;margin:9px 0}
.plan-card .between a,.plan-card .between button{font-size:10px;text-decoration:underline;padding:12px 0}
.vote-card{padding:0;overflow:hidden;border:1px solid #60362f25;border-radius:19px;text-align:left;width:100%;margin:12px 0;display:block}
.vote-card img{height:214px;width:100%;object-fit:cover}
.vote-card>div{padding:18px}
.vote-card h3{font-size:25px}
.vote-card.selected{border:2px solid var(--brown)}

/* You */
.profile-hero{height:385px;position:relative;display:flex;flex-direction:column;justify-content:space-between;text-align:center;isolation:isolate}
.profile-hero>img{position:absolute;inset:0;z-index:-3;height:100%;width:100%;object-position:center 28%}
.profile-hero:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,var(--brown),transparent 70%)}
.profile-hero h1{font-size:37px}
.profile-hero p{margin:9px 0 25px;font-size:11px}
.profile-card{margin-top:-2px}

/* Members' own photos */
.m-avatar{--avatar-size:38px;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;flex:none;object-fit:cover;object-position:center;background:var(--paper)}
.m-avatar-initials{display:grid;place-items:center;color:var(--brown);font:calc(var(--avatar-size) * .4) / 1 var(--display);letter-spacing:-.03em;background:radial-gradient(circle at 30% 25%,#fff,var(--paper) 45%,#e6d6c4);user-select:none}
/* No photo (or nobody signed in): the Pantopia mark, brown on paper — like the boot screen and the member card. */
.m-avatar-logo{display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,var(--paper) 45%,#e6d6c4)}
.m-avatar-logo i{display:block;height:56%;aspect-ratio:20.68/40;background:var(--brown);-webkit-mask:url('/assets/media/logo-mark.svg') center/contain no-repeat;mask:url('/assets/media/logo-mark.svg') center/contain no-repeat}
.profile-hero.brand:after{display:none}
/* Sits on the app's own background and fades into it, so the page carries on without a seam. */
.profile-brand{position:absolute;inset:0;z-index:-3;overflow:hidden;background:radial-gradient(circle at 50% 44%,#a0705a,transparent 58%);-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.profile-brand-pattern{position:absolute;left:50%;top:0;width:393px;height:852px;max-width:none;transform:translateX(-50%);pointer-events:none}
.profile-brand-mark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);border-radius:50%;animation:brandIn .9s var(--ease) both;transition:transform .2s var(--ease)}
.profile-brand-mark:active{transform:translate(-50%,-50%) scale(.96)}
.profile-brand-mark .m-avatar{box-shadow:0 0 0 10px #ffffff14,0 0 0 24px #ffffff0a,0 26px 60px #2517104d}
.profile-brand-camera{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brown);color:var(--paper);box-shadow:0 0 0 3px var(--paper)}
.profile-brand-camera .ico{font-size:16px}
@keyframes brandIn{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}}
.profile-hero.own{height:auto;aspect-ratio:1;min-height:385px}
.profile-hero.own>img{object-position:center;animation:heroIn .8s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.04)}}
.hero-actions{gap:10px}
.hero-actions .circle{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:#ffffff14}
.avatar-stage{display:grid;place-items:center;padding:8px 0 4px}
.avatar-crop{position:relative;width:min(300px,100%);aspect-ratio:1;border-radius:26px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 80% 15%,#92644b,transparent 60%),var(--brown);box-shadow:0 22px 50px #2517102e;touch-action:none;outline:0;user-select:none}
.avatar-crop>canvas,.avatar-crop>img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.avatar-crop>canvas{opacity:0;transition:opacity .35s ease}
.avatar-crop.picked>canvas{opacity:1}
.avatar-crop:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--brown),transparent 70%);pointer-events:none}
.avatar-crop.picked{cursor:grab}.avatar-crop.picked:active{cursor:grabbing}
.avatar-crop:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 5px #b3866c,0 22px 50px #2517102e}
.avatar-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--paper);z-index:-1}
.avatar-placeholder .m-avatar{box-shadow:0 0 0 5px #ffffff26}
.avatar-placeholder .ico{font-size:18px;opacity:.75}
.avatar-guide{position:absolute;inset:1px;border-radius:50%;border:1px dashed #ffffffa6;pointer-events:none;opacity:0;transition:opacity .35s ease}
.avatar-crop.picked .avatar-guide{opacity:1}
.avatar-crop .avatar-name{position:absolute;left:12px;right:12px;bottom:18px;text-align:center;color:var(--paper);font:27px/1.05 var(--display);letter-spacing:-.04em;pointer-events:none}
.avatar-opening{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:12px;font-size:11px;color:var(--paper);background:#3a221ccc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .25s}
.avatar-opening .spinner{width:26px;height:26px;border-radius:50%;border:2px solid #ffffff30;border-top-color:var(--cream);animation:spin .8s linear infinite}
.avatar-zoom{display:flex;align-items:center;gap:12px;margin:18px 6px 0;color:var(--brown)}
.avatar-zoom.hidden{display:none}
.avatar-zoom .ico{font-size:22px;opacity:.7}.avatar-zoom .small-ico{font-size:14px}
.avatar-zoom input{flex:1;accent-color:var(--brown);min-height:0;padding:0;border:0;background:none}
.avatar-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.avatar-sheet .primary{cursor:pointer}
.avatar-secondary{margin-top:10px;cursor:pointer;color:var(--ink)}
.pass-member .who{display:flex;align-items:center;gap:9px}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
.stat{padding:15px 8px;text-align:center;border-radius:16px}
.stat img{width:55px;height:65px;margin:auto;object-fit:contain}
.stat strong{font:29px var(--display);display:block;margin:5px 0;font-weight:400}
.stat span{font-size:9px;opacity:.65}
.setting-row{width:100%;text-align:left;display:flex;align-items:center;gap:13px;padding:19px 0;border-bottom:1px solid var(--line);font-size:12px}
.setting-row>span{flex:1}
.light .setting-row{border-color:#60362f25}
.setting-row small{display:block;font-size:10px;opacity:.6;margin-top:5px}
.usual-card{margin-top:20px;border-radius:21px;padding:18px}
.usual-top{display:flex;align-items:center;gap:16px}
.usual-top>img{width:57px;height:88px;object-fit:contain}
.usual-top>div{min-width:0;flex:1}
.usual-top h3{font-size:23px;margin:8px 0 6px}
.usual-top .small{font-size:10px;line-height:1.5;display:block}
.usual-actions{display:flex;justify-content:space-between;gap:15px;margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}
.usual-actions .textbtn{font-size:11px;display:flex;align-items:center;gap:9px;padding:0 0 4px}
.usual-actions .ico{font-size:17px}
.usual-picker h3{font-size:21px;margin:22px 0 9px}
.usual-choice{display:flex;align-items:center;gap:14px;width:100%;padding:10px 0;border-top:1px solid #60362f20;text-align:left}
.usual-choice>img{height:58px;width:53px;object-fit:contain}
.usual-choice>span{flex:1;font-size:12px}
.usual-choice small{display:block;margin-top:5px;opacity:.6;font-size:10px}
.usual-choice>.ico{font-size:18px}
.reward-balance{border-radius:24px;background:var(--paper);color:var(--brown);padding:24px;margin:12px 20px 25px}
.reward-balance strong{font:48px var(--display);margin-right:10px;font-weight:400}
.reward-balance .small{opacity:.6}
.voucher{margin:10px 20px;border-radius:25px;overflow:hidden;background:var(--paper);color:var(--brown);text-align:center}
.voucher .voucher-photo{height:230px;width:100%;object-fit:cover}
.voucher .qr{padding:20px;border-top:2px dashed #60362f25;position:relative}
.voucher .qr:before,.voucher .qr:after{content:'';width:26px;height:26px;background:var(--brown);position:absolute;top:-14px;border-radius:50%}
.voucher .qr:before{left:-13px}.voucher .qr:after{right:-13px}
.qr img{width:200px;height:200px;object-fit:contain;margin:5px auto 17px}
.qr p{font-size:10px;line-height:1.6}
.member-pass{background:var(--paper);color:var(--brown);border-radius:24px;margin:18px 0 14px;padding:20px;box-shadow:inset 0 1px 0 #fff9,0 10px 30px #35231d12}
.member-pass>header{display:flex;align-items:center;justify-content:space-between}
.member-pass>header>div{display:flex;align-items:center;gap:10px}
.member-pass .logo-round{width:24px;height:24px}
.member-pass .eyebrow{font-size:8px;letter-spacing:.13em}
.pass-dot{width:6px;height:6px;background:#9d7d54;border-radius:50%;box-shadow:0 0 0 5px #b9945c14}
.pass-intro{text-align:center;padding:22px 0 9px}
.pass-intro h2{font-size:26px}
.pass-intro p{font-size:10px;opacity:.62;margin-top:7px}
.qr-frame{position:relative;margin:8px auto 17px;width:min(228px,100%);aspect-ratio:1}
.qr-frame .branded-qr{height:100%;width:100%;object-fit:contain;padding:10px}
.scan-corner{position:absolute;width:18px;height:18px;border-color:#b89571;border-style:solid;border-width:0;pointer-events:none}
.scan-corner.tl{left:0;top:0;border-top-width:1px;border-left-width:1px;border-top-left-radius:7px}
.scan-corner.tr{right:0;top:0;border-top-width:1px;border-right-width:1px;border-top-right-radius:7px}
.scan-corner.bl{left:0;bottom:0;border-bottom-width:1px;border-left-width:1px;border-bottom-left-radius:7px}
.scan-corner.br{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px;border-bottom-right-radius:7px}
.event-ticket .pass-intro .eyebrow{display:block;margin-bottom:8px;opacity:.6}
.event-ticket .pass-intro p{font-size:12px}
.ticket-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px dashed #60362f30;border-bottom:1px dashed #60362f30;margin:12px 0 16px;font:18px var(--display)}
.ticket-facts>div{padding:12px 0}
.ticket-facts>div+div{border-left:1px dashed #60362f30;padding-left:14px}
.ticket-facts small{display:block;font:500 8px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:4px}
.event-ticket.used .qr-frame{opacity:.45}
.ticket-in{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;margin:-6px 0 14px}
.pass-member{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #60362f18;padding-top:16px;font-size:10px}
.pass-member span:last-child{opacity:.65}
.member-pass footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed #60362f30;margin:17px -20px -20px;padding:14px 20px;background:#60362f04;border-radius:0 0 24px 24px}
.member-pass footer>span:last-child{font-size:8px;opacity:.55}
.member-actions{margin-top:5px}

/* Cafés */
.cafes-arch{width:238px;height:318px;object-fit:cover;border-radius:140px;margin:25px auto 23px;border:1px solid #ffffff3c;padding:6px}
.cafe-switch{display:flex;justify-content:center;align-items:center;gap:20px;text-align:center}
.cafe-switch h2{font-size:25px}
.cafe-switch .circle{width:32px;height:32px}
.cafe-switch small{display:block;margin-top:8px;font-size:10px}
.dots{display:flex;gap:7px;justify-content:center;margin:17px}
.dots button{width:6px;height:6px;padding:0;border-radius:50%;background:#ffffff55}
.dots button.active{background:var(--paper)}
.info-panel{padding:18px;border-radius:18px;margin:18px 0;font-size:12px;line-height:1.7}
.info-panel h3{margin-bottom:10px}
.app-frame[data-palette="stone"]{--brown:#595955;--ink:#30312e;--cream:#e4e2dc;--paper:#f7f5f0;background:radial-gradient(ellipse at 48% 0%,#dedfdde8,transparent 76%),linear-gradient(145deg,#a6a7a4,#494a48);color:var(--paper)}
.app-frame[data-palette="stone"] .bottom-nav{background:linear-gradient(120deg,#696a67ed,#424340f0)}
.app-frame[data-palette="stone"] .member-card{background:linear-gradient(120deg,#fff4,#ffffff12)}
.app-frame[data-palette="stone"] .sheet{background:linear-gradient(135deg,#f7f5f0f5,#deded8f2)}
.app-frame[data-palette="stone"] .ingredient-choice{background:#a1a19c20}
.app-frame[data-palette="stone"] .ingredient-choice.selected{background:#fff9}
.app-frame[data-palette="stone"] .cafes-arch{box-shadow:0 12px 35px #30312e15}

/* Welcome & sign in */
.welcome{position:relative;isolation:isolate;min-height:100%;padding:42px 20px 24px;display:flex;flex-direction:column;text-align:center}
.welcome>img{position:absolute;inset:0;z-index:-2;height:100%;width:100%;object-position:center}
.welcome:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#35231d55,transparent 45%,#35231d66)}
.welcome h1{font-size:49px;line-height:.9;margin:17px 0}
.welcome-sheet{margin-top:auto;background:#f8f4eef2;color:var(--brown);padding:23px 20px;border-radius:26px;backdrop-filter:blur(22px)}
.welcome-sheet h2{font-size:30px}
.welcome-sheet>p{font-size:11px;margin:10px 0 21px;opacity:.7}
.welcome-sheet .primary{margin-top:10px}
.welcome-sheet .textbtn{width:100%}
.auth{min-height:100%;display:flex;flex-direction:column;position:relative;isolation:isolate}
.auth-pattern{position:absolute;inset:0;z-index:-1;width:393px;height:852px;max-width:none;pointer-events:none}
.auth-brand{padding:10px 30px 25px;font:47px var(--display);letter-spacing:-.04em}
.auth-body{margin-top:auto;border-radius:31px 31px 0 0;padding:22px 20px;padding-bottom:max(22px,var(--safe-bottom));background:linear-gradient(140deg,#e9dfd3b8,#e9dfd3ed);color:var(--ink);border:1px solid #ffffff55;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
.auth-body h2{text-align:center;margin:0 0 17px;font-size:31px}
.auth-body input{display:block;border:1px solid #60362f26;border-radius:16px;min-height:49px;padding:12px 15px;background:#ffffff25;color:var(--ink);width:100%;font-size:13px}
.auth-body input::placeholder{color:#60362fb0}
.auth-body label{font-size:10px;display:block;color:var(--ink);margin:12px 0 6px}
.auth-body .primary{margin-top:20px}
.auth-body .textbtn{color:var(--brown);width:100%;margin-top:7px}
.auth-body .segments{margin-bottom:15px;border-color:#60362f25}
.auth-body .segments .active{background:var(--brown);color:var(--paper)}
.social-caption{display:flex;align-items:center;gap:12px;color:var(--brown);font-size:9px;opacity:.6;margin:17px 20px 12px}
.social-caption:before,.social-caption:after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}
.social-row{display:flex;justify-content:center;gap:15px}
.social-btn{width:43px;height:43px;border-radius:50%;background:#f8f4eebb;border:1px solid #fff6;display:grid;place-items:center;color:var(--brown);font-weight:600;font-size:15px}
.social-btn img{max-width:none}

/* Club welcome */
.intro-shade{align-items:center;padding:16px}
.intro{width:100%;height:min(720px,calc(100dvh - 44px));max-height:100%;border-radius:26px;overflow:hidden;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:38% 62%;position:relative;animation:sheetIn .6s var(--ease)}
.intro-img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.intro .intro-close{position:absolute;top:12px;right:12px;z-index:2;background:#f8f4eedb;color:var(--brown)}
.intro-content{padding:22px;display:flex;flex-direction:column;min-height:0}
.intro-content h2{font-size:35px;margin:15px 0 12px;line-height:.97}
.intro-content p{font-size:11px;line-height:1.7;opacity:.7}
.intro-progress{display:flex;gap:5px;width:90px;margin-bottom:13px}
.intro-progress span{height:3px;background:#60362f20;flex:1;border-radius:5px}
.intro-progress .active{background:var(--brown)}
.intro-bottom{margin-top:auto;padding-top:16px}
.intro-content .textbtn{width:100%;font-size:9px;min-height:27px;margin-top:5px}
.intro-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px;font-size:10px;line-height:1.5}
.intro-list div{padding-top:11px;border-top:1px solid #60362f25}
.intro-list .ico{display:block;font-size:20px;margin-bottom:6px}

/* Croissant Pass */
.pass-feature{width:100%;height:auto;border-radius:24px;overflow:hidden;text-align:left;display:block;margin-top:17px;background:#4d2d25;border:1px solid #ffffff1f;grid-column:1/-1}
.pass-feature>img{display:block;position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pass-feature-copy{padding:20px 22px 19px;background:linear-gradient(120deg,#764b3e,#56332a)}
.pass-feature-copy>.eyebrow{font-size:8px;letter-spacing:.14em;color:#e2cbb5}
.pass-feature h1,.pass-feature h2{font-size:35px;line-height:1.02;margin:10px 0 16px;letter-spacing:-.045em}
.pass-feature-copy>div{display:flex;justify-content:space-between;align-items:center;gap:15px}
.pass-feature-copy>div>span{font-size:11px;line-height:1.4;color:#e9dbce}
.pass-feature i{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--brown);flex:none}
.pass-feature-compact{margin:9px 0}
.pass-feature-compact h2{font-size:30px}
.pass-feature-compact .pass-feature-copy{padding:18px 20px}
.app-screen.pass-screen{background:#3e251c}
.croissant-pass-page{padding-bottom:152px}
.pass-hero{position:relative;height:425px;isolation:isolate}
.pass-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%;z-index:-2}
.pass-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#3e251c 0%,#3e251c12 58%,#3e251c55);z-index:-1}
.pass-topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 0}
.pass-brand{display:flex;align-items:center;gap:9px}
.pass-brand .logo-mark{height:30px;width:18px}
.pass-brand>span{font-size:10px;letter-spacing:.15em}
.pass-topbar .circle{background:#321b1655;backdrop-filter:blur(12px)}
.pass-title{position:absolute;bottom:11px;left:22px;right:22px;text-align:center}
.pass-title .eyebrow{font-size:8px;color:#e6c8a9}
.pass-title h1{font-size:43px;line-height:1.02;margin:8px 0 6px}
.pass-title p{font-size:13px;opacity:.8}
.pass-content{padding:0 20px}
.pass-selector{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #fff3;border-radius:19px;padding:5px;gap:4px;margin:22px 0 17px;background:#fff08}
.pass-selector button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:58px;border-radius:14px;padding:8px 2px}
.pass-selector strong{font-size:12px;font-weight:500}
.pass-selector span{font-size:9px;opacity:.6}
.pass-selector button.selected{background:var(--paper);color:var(--brown);box-shadow:0 3px 12px #0001}
.pass-plan-intro{text-align:center}
.pass-plan-intro .eyebrow{font-size:8px;color:#d7b58f}
.pass-plan-intro p{font-size:11px;opacity:.7;margin-top:5px}
.pass-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:25px 0 10px}
.pass-benefits>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.pass-benefits i{width:45px;height:45px;border:1px solid #ffffff24;background:#ffffff09;display:grid;place-items:center;border-radius:50%;margin-bottom:11px}
.pass-benefits strong{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.03em}
.pass-benefits span{font-size:9px;opacity:.66;margin-top:5px;line-height:1.5}
.pass-benefits s{display:block;opacity:.7}
.pass-daily-note{font-size:8px;text-align:center;opacity:.55;margin-top:12px}
.pass-included{margin-top:29px}
.pass-included .section-heading{align-items:flex-start;gap:12px;margin-bottom:13px}
.pass-included h2,.pass-how h2{font-size:25px}
.pass-included .eyebrow{font-size:7px;max-width:67px;text-align:right;line-height:1.6}
.pass-product{display:flex;align-items:center;border-radius:20px;padding:15px 13px;gap:11px}
.pass-product>img{height:80px;width:79px;object-fit:contain}
.pass-product>div{flex:1;min-width:0}
.pass-product h3{font-size:22px;margin-bottom:7px}
.pass-product p{font-size:10px;line-height:1.65;opacity:.67}
.pass-product span{display:block;font-size:9px;margin-top:9px;color:#dfc09e}
.pass-product>i{align-self:flex-start;color:#dfc09e}
.pass-product>i .ico{font-size:17px}
.pass-how{margin-top:32px}
.pass-how>header{margin-bottom:16px}
.pass-how>header .eyebrow{font-size:7px;letter-spacing:.15em;color:#cbae91}
.pass-how h2{font-size:29px;margin-top:8px}
.pass-ritual-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;list-style:none;margin:0}
.pass-ritual-grid>li{min-width:0;padding:17px 16px;border:1px solid #f5e6d528;border-radius:20px;background:linear-gradient(130deg,#ffffff0d,#ffffff03)}
.ritual-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ritual-step-top i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#d5ad821c;color:#e7c49d}
.ritual-step-top i .ico{font-size:19px}
.ritual-step-top>span{font:14px var(--display);color:#c7a88a}
.pass-ritual-grid h3{font:24px/1.04 var(--display);letter-spacing:-.035em;color:var(--paper);margin:0 0 10px}
.pass-ritual-grid p{font-size:10px;line-height:1.6;color:#d4c1b2}
.pass-ritual-grid>li.ritual-enjoy{grid-column:1/-1;background:linear-gradient(115deg,#eadbc5,#d8c0a3);color:#4c3027;display:flex;align-items:center;gap:8px;position:relative;overflow:hidden;padding:21px 17px}
.ritual-enjoy>div{flex:1;min-width:0}
.ritual-enjoy .eyebrow{font-size:7px;color:#745443;letter-spacing:.13em;display:block;margin-bottom:12px}
.ritual-enjoy h3{font-size:25px;color:#4c3027}
.ritual-enjoy p{color:#725546;max-width:185px}
.ritual-croissant{width:93px;height:102px;object-fit:contain;flex:none;transform:rotate(-13deg)}
.pass-faq{border-block:1px solid #fff2;padding:17px 0;margin-top:29px}
.pass-faq summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;list-style:none;min-height:28px}
.pass-faq summary::-webkit-details-marker{display:none}
.pass-faq summary .ico{font-size:17px;transition:transform .2s}
.pass-faq[open] summary .ico{transform:rotate(45deg)}
.pass-faq p{font-size:10px;line-height:1.8;color:#d5c4b9;padding-top:14px}
.pass-proposal{font-size:9px;line-height:1.7;opacity:.55;margin:18px 0 6px}
.pass-dock{position:absolute;z-index:8;left:0;right:0;bottom:0;padding:15px 20px calc(13px + var(--safe-bottom));background:linear-gradient(145deg,#50372eed,#30201cf7);border-top:1px solid #ffffff28;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;grid-template-columns:1fr 1.25fr;column-gap:12px;align-items:center}
.pass-dock-price strong{display:block;font:28px var(--display);letter-spacing:-.03em;line-height:1;font-weight:400}
.pass-dock-price span{display:block;margin-top:7px;font-size:9px;color:#d3b9a3;line-height:1.4}
.pass-dock .primary{font-size:11px;padding:14px 15px;min-height:51px;gap:7px}
.pass-dock .primary .ico{font-size:17px}
.pass-dock-note{grid-column:1/-1;text-align:center;font-size:7px;letter-spacing:.13em;opacity:.6;margin-top:12px}
.pass-wallet{border-radius:23px;padding:20px;margin-top:28px}
.pass-wallet .circle{width:34px;height:34px}
.pass-wallet-balance{display:flex;align-items:center;gap:16px;margin:14px 0 19px}
.pass-wallet-balance>strong{font:63px var(--display);line-height:1;letter-spacing:-.04em;font-weight:400}
.pass-wallet-balance h2{font-size:23px}
.pass-wallet-balance div>span{display:block;font-size:10px;opacity:.65;margin-top:6px}
.pass-stamps{display:flex;flex-wrap:wrap;gap:6px}
.pass-stamps>span{width:calc((100% - 24px)/5);aspect-ratio:1.2;display:grid;place-items:center;border-radius:13px;border:1px dashed #e1c1a15a;color:#deb99266}
.pass-stamps>span.used{background:#eadbc9;color:#634738;border:1px solid #eadbc9}
.pass-stamps.daily-stamps>span{width:calc((100% - 36px)/7);aspect-ratio:1;font-size:10px}
.pass-stamps.daily-stamps .ico{font-size:14px}
.pass-wallet-dates{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #fff2;margin-top:20px;padding-top:13px;font-size:8px;line-height:1.5;opacity:.7}
.pass-wallet-dates>span:last-child{white-space:nowrap}
.pass-pending{font-size:10px;line-height:1.65;margin-top:15px;color:#ddc9b6}
.pass-pending .ico{font-size:13px;margin-right:5px}
.pass-review-art{height:150px;border-radius:17px;overflow:hidden;margin:4px 0 20px}
.pass-review-art img{width:100%;height:100%;object-position:50% 58%}
.pass-review-title{font-size:32px;margin-top:9px}
.pass-review-row{display:flex;justify-content:space-between;gap:15px;padding:18px 0;border-bottom:1px solid #60362f20;margin-bottom:15px;font-size:11px;align-items:center}
.pass-review-row strong{font:28px var(--display);font-weight:400}
.pass-replace-note{background:#60362f0b;border:1px solid #60362f1a;border-radius:12px;padding:12px;font-size:11px;line-height:1.6;margin:15px 0}
.pass-review-sheet .primary{margin-top:22px}
.pass-use-list{margin:15px 0 25px}
.pass-use-list>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #60362f20;font-size:11px}

/* Time wheels */
.time-sheet .sheet-heading{margin-bottom:13px}
.time-sheet .sheet-heading h2{font-size:31px;max-width:245px}
.time-sheet .body-copy{font-size:12px;margin:17px 0 0}
.time-location{display:flex;align-items:center;gap:6px;font-size:10px;color:#60362fa6}
.time-location .ico{font-size:14px}
.time-location>span{margin-left:auto;font-size:9px;opacity:.65}
.time-wheel-card{position:relative;margin:22px 0 10px;border:1px solid #60362f17;border-radius:23px;background:linear-gradient(145deg,#fff9,#fff3);padding:17px 27px 12px;overflow:hidden}
.wheel-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:8px;letter-spacing:.16em;color:#60362f99;margin-bottom:8px}
.time-wheels{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
.time-wheel{height:220px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain;padding-block:88px;box-sizing:border-box;mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);outline:none;touch-action:pan-y}
.time-wheel::-webkit-scrollbar{display:none}
.wheel-number{height:44px;min-height:44px;width:100%;padding:0;border:0;display:block;font:31px/44px var(--display);color:#60362f68;scroll-snap-align:center;background:transparent;transition:color .1s,scale .15s}
.wheel-number.selected{color:var(--brown);scale:1.13}
.wheel-number:active{transform:none}
.wheel-selection{position:absolute;top:125px;left:17px;right:17px;height:44px;border:1px solid #60362f19;border-radius:13px;background:#60362f0c;pointer-events:none}
.wheel-colon{position:absolute;top:125px;left:50%;transform:translateX(-50%);font:28px/44px var(--display);color:var(--brown);pointer-events:none}
.time-wheel:focus-visible{border-radius:12px;outline:2px solid #9a715b;outline-offset:-3px}
.wheel-hint{font-size:10px;text-align:center;opacity:.5;margin:7px 0 20px}
.time-preview{text-align:center;font-size:9px!important;max-width:270px;margin:13px auto 0!important}
.sheet.time-sheet .primary{margin-top:0}
.reservation-time .time-wheel-card{margin-top:7px}

/* Desktop: only the app itself, in a phone-sized frame in the middle of the screen. */
.preview-label{font-size:9px;line-height:1.7;opacity:.5;text-align:center;padding:24px 20px 0}
@media(min-width:720px){
  .stage{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--cream)}
  .app-frame{height:min(852px,calc(100dvh - 48px));width:393px;min-width:393px;max-width:393px;margin:0;border-radius:34px;box-shadow:0 24px 90px #35231d2b,0 0 0 1px #60362f30}
  .intro{height:calc(100% - 16px)}.intro-content h2{font-size:32px}.intro-shade{padding:12px}.intro-content{padding:20px}
}
@media(max-height:710px){
  .product-space{min-height:170px}.product-title{font-size:23px}.nutrition{padding-top:12px}.option-tile{height:88px}
  .intro-content h2{font-size:28px;margin:7px 0 9px}.intro-content{padding:17px}.intro-list{gap:7px;margin-top:10px;font-size:9px}.intro-bottom{padding-top:9px}.intro-content p{font-size:10px}.intro-content .primary{min-height:43px;padding:12px 16px}.intro-progress{margin-bottom:8px}
  .product-editorial .product-space{min-height:160px}.product-heading .product-title{font-size:26px}.product-editorial .topbar{height:68px;padding-top:16px}.option-tile{height:97px}.option-ingredient{height:38px;width:38px}.ingredient-choice{min-height:142px;padding-top:9px}.ingredient-thumb{height:51px;margin-bottom:6px}
}
@media(max-height:660px){
  .time-sheet .sheet-heading h2{font-size:27px}.time-sheet .time-wheel{height:132px;padding-block:44px}.time-sheet .wheel-selection,.time-sheet .wheel-colon{top:81px}
  .pass-hero{height:345px}.pass-title h1{font-size:36px}.pass-review-art{height:95px;margin-bottom:13px}
}
@media(max-width:350px){
  .section,.pad{padding-inline:16px}.product-grid{gap:9px}.product-card{padding:10px}.product-art{height:111px}.product-card h3{font-size:11px}.section-heading h2{font-size:24px}
  .option-row{padding-inline:16px;gap:6px}.ingredient-grid{gap:7px}.pass-content{padding-inline:16px}.pass-title h1{font-size:36px}.pass-dock{padding-inline:16px}
  .menu-insert{height:205px}.insert-copy{padding:18px}.insert-copy h3{font-size:28px}
}

@keyframes pageIn{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes imageIn{from{opacity:.5;scale:1.035}to{opacity:1;scale:1}}
@keyframes sheetIn{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes progressIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cardShine{0%,25%{transform:translateX(-60%)}65%,100%{transform:translateX(60%)}}
@keyframes navSettle{from{transform:translateY(3px) scale(.9)}to{transform:none}}
@keyframes underlineIn{from{transform:scaleX(.25);opacity:.3}to{transform:scaleX(1);opacity:1}}
@keyframes bagRise{from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes addedPulse{50%{transform:scale(.96);background:#ffffff35}}
.app-screen>.page{animation:pageIn .42s var(--ease);min-height:100%;display:flex;flex-direction:column}
.app-screen>.page>.welcome,.app-screen>.page>.auth,.app-screen>.page>.order-confirm,.app-screen>.page>.product-full{flex:1 0 auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wheel-number.selected{scale:1}button:active{transform:none}}

#blazor-error-ui{color-scheme:light only;background:var(--paper);color:var(--brown);bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);box-sizing:border-box;display:none;left:0;padding:.8rem 1.25rem;position:fixed;width:100%;z-index:1000;font-size:12px}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.6rem}
#blazor-error-ui .reload{text-decoration:underline}

/* Club news by email: a line of copy and an on/off switch, saved the moment it's flipped. */
.news-pref{display:flex;align-items:center;gap:16px;padding:18px;border-radius:18px;border:1px solid var(--line);margin:18px 0}
.light .news-pref{border-color:#60362f25}
.news-pref h3{font:500 14px/1.4 Inter;letter-spacing:0;margin-bottom:6px}
.news-pref p{font-size:11px;line-height:1.6;opacity:.7}
.news-pref.events-news{margin:0 0 22px;background:#60362f0a}
.switch{position:relative;flex:none;width:48px;height:28px;border-radius:99px;background:#60362f33;transition:background .25s var(--ease)}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 2px 6px #2517102e;transition:transform .25s var(--ease)}
.switch.on{background:var(--brown)}
.switch.on span{transform:translateX(20px)}
.switch:disabled{opacity:.6}
.switch:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* Stories: round covers under the menu's header, opening into full-screen slides over the whole phone. */
.story-rail{display:flex;gap:13px;overflow-x:auto;padding:2px 20px 4px;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
.story-rail::-webkit-scrollbar{display:none}
.story-bubble{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0}
.story-ring{display:block;width:64px;height:64px;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,var(--paper),#d9b48f,var(--muted),#f3dcc0,var(--paper));transition:transform .2s var(--ease),background .3s}
.story-ring img{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--brown);background:#ffffff14}
.story-bubble.seen .story-ring{background:#ffffff2e}
.story-bubble:active{transform:none}.story-bubble:active .story-ring{transform:scale(.93)}
.story-name{max-width:100%;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-bubble.seen .story-name{opacity:.6}
.story-shade{position:absolute;inset:0;z-index:35;display:flex;background:#140c09;outline:0}
.story-shade.opening{animation:storyIn .34s var(--ease)}
.story-shade:not(.opening) .story{animation:storySwap .38s var(--ease)}
.story-shade.back .story{animation-name:storySwapBack}
.story-viewer{position:relative;flex:1;display:flex;min-height:0}
.story{position:relative;flex:1;overflow:hidden;isolation:isolate;background:#2a1912;color:var(--paper);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.story:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#1b0f0b99,#1b0f0b00 24%,#1b0f0b00 42%,#1b0f0bc4 72%,#1b0f0bed)}
.story-photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;animation:imageIn .7s var(--ease)}
.story-top{position:absolute;z-index:2;top:0;left:0;right:0;padding:calc(10px + var(--safe-top)) 12px 0}
.story-progress{display:flex;gap:4px}
.story-progress span{flex:1;height:2.5px;border-radius:2px;background:#f8f4ee47;overflow:hidden}
.story-progress i{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.story-progress .done i{transform:none}
.story-progress .half i{transform:scaleX(.45)}
.story-progress .running i{animation:storyBar linear forwards}
.story.paused .story-progress .running i{animation-play-state:paused}
.story-head{display:flex;align-items:center;gap:9px;min-height:40px;margin-top:10px}
.story-head img{width:32px;height:32px;border-radius:50%;border:1px solid #f8f4ee70}
.story-head strong{flex:1;min-width:0;font-size:12px;font-weight:600;text-shadow:0 1px 10px #0006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-close{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#1b0f0b3d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.story-taps{position:absolute;inset:0;z-index:1;display:flex}
.story-taps button{flex:1;touch-action:none;cursor:default}
.story-taps button:first-child{flex:0 0 32%}
.story-taps button:active{transform:none}
.story-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 22px calc(28px + var(--safe-bottom));pointer-events:none;animation:storyCopy .55s var(--ease) both}
.story-copy .eyebrow{display:block;margin-bottom:11px;opacity:.85}
.story-copy h2{font-size:40px;line-height:.98;text-wrap:balance;text-shadow:0 2px 24px #1b0f0b55}
.story-copy p{max-width:34ch;margin-top:13px;font-size:13px;line-height:1.55;opacity:.9}
.story-link{pointer-events:auto;display:flex;align-items:center;gap:12px;margin-top:22px;padding:8px 8px 8px 10px;border-radius:24px}
.story-link:active{transform:scale(.98)}
.story-link img{width:50px;height:50px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 10px #0004)}
.story-link-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:#f8f4ee22}
.story-link>span:not(.story-link-icon){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.story-link small{font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.story-link small.story-when{font-size:10px;letter-spacing:0;text-transform:none}
.story-link strong{font:20px/1.05 var(--display);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-link em{font-style:normal;font-size:12px;opacity:.85;white-space:nowrap}
.story-link i{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--brown)}
.story-preload{display:none}
@keyframes storyIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes storySwap{from{opacity:.4;transform:translateX(9%) scale(.97)}to{opacity:1;transform:none}}
@keyframes storySwapBack{from{opacity:.4;transform:translateX(-9%) scale(.97)}to{opacity:1;transform:none}}
@keyframes storyBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes storyCopy{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.story-progress .running i{transform:none;opacity:.6}}

/* An order item by item: handed over, still to come or cancelled (and why). */
.order-items{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid #60362f1f}
.order-items li{padding:12px 0;border-bottom:1px solid #60362f1f;font-size:13px}
.order-items li small{display:block;font-size:10px;opacity:.6;margin-top:3px}
.order-items li.cancelled>.between>span:first-child{text-decoration:line-through;opacity:.6}
.item-states{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.item-state{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:9.5px;letter-spacing:.02em;background:#60362f0f}
.item-state .ico{font-size:11px}
.item-state.handed{background:#2f6b4518;color:#2f6b45}
.item-state.cancelled{background:#a3322a14;color:#a3322a}
.item-reason{margin-top:6px;font-size:11px;line-height:1.5;opacity:.8}
.order-sum{margin-top:12px;font-size:13px}
.order-sum strong{font:24px var(--display);margin:0;display:inline}
.order-sum.muted{opacity:.6}
.order-refund{display:flex;gap:7px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:14px;background:#2f6b4512;color:#2f6b45;font-size:11px;line-height:1.5}
.order-refund .ico{font-size:14px}
.history-lines{list-style:none;margin:12px 0 0;padding:0;font-size:13px;line-height:1.6}
.history-lines li.cancelled .history-name{text-decoration:line-through;opacity:.55}
.history-lines li small{margin-top:0;font-size:10px;opacity:.7}
.history-item a.textbtn{display:inline-flex;align-items:center}
.history-reason{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:11px;opacity:.75}
.history-reason .ico{font-size:13px}
.history-item s.was{font:12px Inter,sans-serif;opacity:.5;margin-left:8px}
.status-chip.cancelled{opacity:.6}
.order-notice .eyebrow{opacity:.6}
.notice-items{list-style:none;margin:16px 0 4px;padding:0;border-top:1px solid #60362f1f}
.notice-items li{padding:12px 0;border-bottom:1px solid #60362f1f;font-size:13px}
.notice-items strong{font-weight:600}
.notice-items small{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:11px;line-height:1.5;opacity:.75}
.notice-items small .ico{font-size:13px;margin-top:1px}
.notice-money{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12px;line-height:1.5}
.notice-money .ico{font-size:15px;opacity:.7}

/* Allergens: a little square with the first two letters; dashed when it's only possibly there. */
.allergen-code{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;background:var(--brown);color:var(--paper);font:600 10px/1 Inter,Arial,sans-serif;letter-spacing:.02em}
.allergen-code.may{background:transparent;color:var(--brown);border:1.5px dashed currentColor;box-sizing:border-box}
.allergens{margin-top:20px}
.allergens .eyebrow,.sheet .eyebrow{opacity:.6}
.allergen-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.allergen-list li{display:flex;align-items:center;gap:9px;font-size:13px}
.allergen-traces{margin-top:14px;font-size:11px;line-height:1.5;opacity:.7}