*{box-sizing:border-box}
body{margin:0;background:var(--white-dark);color:var(--text-primary)}
button{font:inherit}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
::-webkit-scrollbar{display:none}
textarea{font:inherit}

.app-shell{
  direction:inherit;
  font-family:var(--font-brand);
  max-width:480px;width:100%;margin:0 auto;
  height:100vh;height:100dvh;
  background:var(--surface-page);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}

/* header */
.header{
  position:sticky;top:0;z-index:5;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:var(--surface-page);
  border-bottom:var(--border-hairline);overflow:hidden;
  transition:height var(--dur-slow) var(--ease-standard);
}
.header.scrolled{height:40px}
.logo-box{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:28px;width:140px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

/* header side zones: branch name / points fade out, location / QR fade in */
.header-side{position:relative;display:grid;align-items:center;z-index:1;height:28px;font-family:var(--font-brand);cursor:pointer}
.header-left{justify-items:start}
.header-right{justify-items:end}
.header-side > *{grid-area:1/1;transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard)}
.side-primary{opacity:1;transform:scale(1) translateY(0);white-space:nowrap;font-size:var(--text-small);font-weight:700;color:var(--text-secondary)}
.header-right .side-primary{color:var(--accent-highlight)}
.side-primary.hidden{opacity:0;transform:scale(.8) translateY(-6px);pointer-events:none}
.header-left .side-primary{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.header-right .side-primary{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.pickup-micro{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-secondary);font-weight:700}
.branch-name-header{line-height:1.15;color:var(--at-base)}
.points-value-header{line-height:1.15}
.side-secondary{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--dark-light);
  opacity:0;transform:scale(1.2) translateY(6px);pointer-events:none;border:none;background:transparent;padding:0}
.header-left .side-secondary{color:var(--at-base)}
.side-secondary svg{width:100%;height:100%}
.side-secondary.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.qr-btn{color:var(--in-base)}
.logo-full,.logo-mark{
  position:absolute;
  transition:opacity var(--dur-slow) var(--ease-standard),
             transform var(--dur-slow) var(--ease-standard);
  will-change:opacity,transform;
}
.logo-full{height:26px}
.logo-mark{height:26px}
.logo-full.scrolled{opacity:0;transform:scale(.8) translateY(-6px);pointer-events:none}
.logo-mark:not(.scrolled){opacity:0;transform:scale(1.2) translateY(6px);pointer-events:none}
.logo-mark.scrolled{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.logo-full:not(.scrolled){opacity:1;transform:scale(1) translateY(0)}

/* scroll area */
.scroll-area{flex:1;overflow-y:auto}

.section-pad{padding:20px 20px 4px}
.section-title{font-size:var(--text-h3);font-weight:700;color:var(--text-primary);margin-bottom:14px}

/* hero — fixed-size banner so a bg image/illustration always has a
   predictable safe area to sit in, regardless of which slide is active */
.hero{
  position:relative;min-height:280px;
  background:var(--hero-accent,var(--in-base));color:var(--fixed-light);
  padding-block:28px 20px;padding-inline:20px 16px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background var(--dur-slow) var(--ease-standard);
}
.hero-content{display:flex;flex-direction:column;gap:10px;padding-inline-end:28px}
.hero-tag{font-size:var(--text-micro);font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;opacity:.85}
.hero-title{font-size:var(--text-h2);font-weight:700;line-height:var(--lh-heading);margin:2px 0 0}
.hero-title.dark{color:var(--text-primary);text-align:center}
.hero-title.small{font-size:var(--text-h3);margin:0}
.hero-sub{font-size:var(--text-body);line-height:var(--lh-body);opacity:.92;max-width:220px}
.cta-arrow{width:10px;height:11px;color:var(--hero-accent,var(--in-base));display:inline-flex;transform:rotate(90deg);transition:color var(--dur-slow) var(--ease-standard)}
[dir="rtl"] .cta-arrow{transform:rotate(-90deg)}
.cta-arrow svg{width:100%;height:100%}
.hero-bottom-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
/* vertical dot rail, opposite side from the headline text */
.hero-dots{position:absolute;inset-inline-end:16px;top:28px;bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.hero-dot{width:6px;height:6px;border-radius:var(--radius-full);background:rgba(255,255,255,.45);border:none;padding:0;cursor:pointer;transition:height var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.hero-dot.active{height:18px;background:var(--fixed-light)}

/* buttons (design system Button component) */
.btn{
  font-family:var(--font-brand);font-weight:700;border-radius:0;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:scale(.97)}
.btn-lg{padding:16px 28px;font-size:var(--text-body-lg)}
.btn-primary{background:var(--in-base);color:var(--fixed-light)}
.btn-secondary{background:var(--white-base);color:var(--dark-base);border:1px solid var(--white-dark)}
.btn-hero{padding:8px 14px;height:36px;font-size:var(--text-small);gap:6px;align-self:flex-end;
  background:var(--fixed-light);border-color:var(--fixed-light);color:var(--hero-accent,var(--in-base));
  transition:color var(--dur-slow) var(--ease-standard)}
.btn-full{width:100%;justify-content:center;height:52px}

/* popular */
.popular-row{display:flex;flex-direction:column;gap:16px}
.popular-card{display:flex;flex-direction:column;height:260px;background:var(--surface-card);border:var(--border-hairline);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden}
.popular-img{width:100%;height:70%;flex-shrink:0}
.popular-body{padding:10px 14px;display:flex;flex-direction:column;justify-content:center;flex:1}
.popular-name{font-size:var(--text-small);font-weight:700;color:var(--text-primary);margin-bottom:4px}
.popular-price{font-size:var(--text-small);color:var(--text-secondary)}

/* image placeholder (flat color, per brand: no photography supplied) */
.img-slot{display:flex;align-items:center;justify-content:center;color:var(--fixed-light);font-weight:700;text-align:center;padding:8px;overflow:hidden}
.img-slot span{font-size:var(--text-small);opacity:.95;line-height:var(--lh-body)}
.tone-tea{background:var(--in-base)}
.tone-bakery{background:var(--on-base)}
.tone-goods{background:var(--at-base)}

/* menu */
.menu-header{padding:20px 20px 0}
.menu-title{font-size:var(--text-h2);font-weight:700;color:var(--text-primary);margin-bottom:14px}
.tab-row{
  position:sticky;top:0;z-index:2;
  display:flex;gap:4px;
  padding:0 20px;background:var(--surface-page);
  border-bottom:1px solid var(--white-dark);
}
.tab-btn{padding:10px 16px;border:none;background:transparent;cursor:pointer;font-family:var(--font-brand);font-size:var(--text-body);font-weight:400;color:var(--dark-light);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.tab-btn.active{font-weight:700;color:var(--accent-highlight);border-bottom:2px solid var(--accent-highlight)}
.menu-section-title{padding:20px 20px 4px;font-size:var(--text-h3);font-weight:700;color:var(--text-primary)}

.product-list{display:flex;flex-direction:column}
.product-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:var(--border-hairline)}
.product-row-clickable{display:flex;align-items:center;gap:14px;flex:1;cursor:pointer;min-width:0}
.product-img{width:68px;height:68px;flex-shrink:0}
.product-info{flex:1;min-width:0}
.product-name{font-size:var(--text-body);font-weight:700;color:var(--text-primary)}
.product-desc{font-size:var(--text-small);color:var(--text-secondary);margin:3px 0 6px;line-height:var(--lh-body)}
.product-price{font-size:var(--text-small);font-weight:700;color:var(--accent-highlight)}
.add-btn{font-family:var(--font-brand);font-weight:700;font-size:var(--text-small);padding:8px 16px;border:1px solid var(--accent-highlight);background:transparent;color:var(--accent-highlight);cursor:pointer;flex-shrink:0}

/* cart */
.empty-state{padding:24px 0;color:var(--text-secondary);font-size:var(--text-body)}
.cart-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:var(--border-hairline)}
.cart-line-info{flex:1;min-width:0}
.qty-stepper{display:flex;align-items:center;gap:10px}
.qty-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--white-dark);background:var(--white-base);color:var(--text-primary);font-size:var(--text-body);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-num{min-width:20px;text-align:center;font-weight:700;color:var(--text-primary)}

.cart-footer{position:sticky;bottom:0;background:var(--surface-page);border-top:var(--border-hairline);padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.subtotal-row{display:flex;justify-content:space-between;align-items:baseline}
.subtotal-label{font-size:var(--text-body);color:var(--text-secondary)}
.subtotal-value{font-size:var(--text-h3);font-weight:700;color:var(--text-primary)}

/* checkout */
.checkout-label{font-size:var(--text-small);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--ls-wide);margin:18px 0 8px}
.branch-card{background:var(--surface-card);border:var(--border-hairline);padding:16px}
.branch-name{font-size:var(--text-body);font-weight:700;color:var(--text-primary);margin-bottom:4px}
.link-btn{display:inline-block;margin-top:10px;padding:0;border:none;background:none;cursor:pointer;
  font-family:var(--font-brand);font-size:var(--text-small);font-weight:700;color:var(--in-base);text-decoration:underline}
.branch-list{display:flex;flex-direction:column;gap:10px}
.branch-option{cursor:pointer;transition:border-color var(--dur-base) var(--ease-standard)}
.branch-option.active{border:1px solid var(--accent-highlight)}
.branch-option.active .branch-name{color:var(--accent-highlight)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 16px;border:1px solid var(--white-dark);background:var(--white-base);color:var(--text-primary);font-family:var(--font-brand);font-size:var(--text-small);font-weight:700;cursor:pointer}
.chip.active{border:1px solid var(--accent-highlight);background:var(--accent-highlight);color:var(--fixed-light)}
.pay-list{display:flex;flex-direction:column;gap:12px}
.pay-row{cursor:pointer}

/* radio (design system Radio component) */
.radio{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-brand);font-size:var(--text-body);color:var(--dark-base);cursor:pointer}
.radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--white-dark);display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease-standard)}
.radio-dot.checked{border-color:var(--accent-highlight)}
.radio-dot.checked::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent-highlight)}

/* confirmation */
.confirm-wrap{padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.confirm-check{width:64px;height:64px;border-radius:50%;background:var(--in-base);color:var(--fixed-light);font-size:28px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.confirm-sub{font-size:var(--text-body);color:var(--text-secondary);max-width:320px;line-height:var(--lh-body)}
.confirm-card{width:100%;background:var(--surface-card);border:var(--border-hairline);padding:16px;display:flex;flex-direction:column;gap:10px;margin:10px 0 8px}
.confirm-row{display:flex;justify-content:space-between}
.confirm-val{font-weight:700;color:var(--text-primary);font-size:var(--text-small)}

/* footer dock: cart bar (optional) stacked above the bottom nav */
.footer-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;z-index:6;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}

/* cart bar */
.cart-bar{display:flex;align-items:center;gap:10px;width:100%;border:none;cursor:pointer;
  padding:12px 20px;background:var(--at-base);color:var(--fixed-light);font-family:var(--font-brand);
  border-top:var(--border-hairline);transition:background var(--dur-base) var(--ease-standard)}
.cart-bar-icon{display:flex;width:20px;height:20px;flex-shrink:0}
.cart-bar-icon svg{width:100%;height:100%}
.cart-bar-count{display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--radius-full);background:rgba(255,255,255,0.25);font-size:var(--text-micro);font-weight:700;flex-shrink:0}
.cart-bar-label{flex:1;text-align:start;font-size:var(--text-body);font-weight:700}
.cart-bar-total{font-size:var(--text-body);font-weight:700}

/* bottom nav */
.bottom-nav{display:flex;background:var(--surface-page);border-top:var(--border-hairline)}
.nav-tab{flex:1;border:none;background:transparent;cursor:pointer;padding:0;font-family:var(--font-brand)}
.nav-tab-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 0 12px;background:var(--white-base);color:var(--dark-light);font-size:var(--text-small);font-weight:700;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.nav-tab-box.active{color:var(--accent-highlight)}
.nav-icon{display:flex;width:22px;height:22px}
.nav-icon svg{width:100%;height:100%}
.nav-label{line-height:1}

/* detail sheet */
.overlay-scrim{position:fixed;inset:0;background:rgba(6,6,5,0.4);z-index:9}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;max-height:88vh;overflow-y:auto;background:var(--surface-page);z-index:10;box-shadow:var(--shadow-lg)}
.close-btn{position:absolute;top:14px;inset-inline-start:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;font-size:16px;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--fixed-dark)}
.close-btn svg{width:16px;height:16px}
.detail-img{width:100%;height:220px}
.sheet-body{padding:20px}
.detail-top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.detail-price{font-size:var(--text-h3);font-weight:700;color:var(--accent-highlight)}
.option-list{display:flex;flex-direction:column;gap:12px}
.notes-input{width:100%;min-height:60px;box-sizing:border-box;border:1px solid var(--white-dark);padding:10px;font-family:var(--font-brand);font-size:var(--text-small);color:var(--text-primary);resize:vertical}
.sheet-footer{position:sticky;bottom:0;background:var(--surface-page);border-top:var(--border-hairline);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.add-to-cart-btn{flex:1;justify-content:center;background:var(--accent-highlight)}

/* account */
.account-group{border:var(--border-hairline);margin-bottom:16px}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:14px 16px;border:none;background:none;cursor:pointer;font-family:var(--font-brand);text-align:start}
.account-group .account-row + .account-row{border-top:var(--border-hairline)}
.account-row-switch{cursor:default}
.account-row-label{font-size:var(--text-body);font-weight:500;color:var(--text-primary)}
.account-row-chevron{display:inline-flex;color:var(--text-secondary);width:18px;height:18px;flex-shrink:0}
.account-row-chevron svg{width:100%;height:100%}
[dir="rtl"] .account-row-chevron svg{transform:scaleX(-1)}

/* language toggle: two buttons, active one highlighted */
.lang-toggle{display:flex;flex-shrink:0;background:var(--white-base);border:var(--border-hairline);border-radius:var(--radius-full);padding:2px;gap:2px}
.lang-toggle-btn{border:none;background:transparent;cursor:pointer;padding:5px 12px;white-space:nowrap;
  border-radius:var(--radius-full);font-family:var(--font-brand);font-weight:700;font-size:var(--text-small);
  color:var(--text-secondary);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.lang-toggle-btn.active{background:var(--in-base);color:var(--fixed-light)}
.theme-toggle .lang-toggle-btn{display:flex;align-items:center;justify-content:center;padding:7px;width:32px;height:32px}
.theme-toggle .lang-toggle-btn svg{width:16px;height:16px}
.theme-toggle .lang-toggle-btn.active{background:var(--on-base)}

/* social icons */
.social-row{display:flex;justify-content:center;gap:14px;margin-top:24px}
.social-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--white-dark);background:var(--white-base);
  display:flex;align-items:center;justify-content:center;color:var(--dark-base);cursor:pointer;padding:0}
.social-btn svg{width:18px;height:18px}

/* back link (e.g. order history -> account) */
.back-row{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;margin-bottom:16px;
  color:var(--text-secondary);font-family:var(--font-brand);font-size:var(--text-small);font-weight:700;cursor:pointer}
.back-row svg{width:16px;height:16px}
[dir="rtl"] .back-row svg{transform:scaleX(-1)}

/* loyalty QR / location / info modals share one base card */
.qr-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:340px;width:88%;max-height:80vh;overflow-y:auto;
  background:var(--surface-page);z-index:10;box-shadow:var(--shadow-lg);padding:28px 24px 24px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.qr-modal.location-modal,.qr-modal.info-modal{align-items:stretch;text-align:start}
.qr-title{font-size:var(--text-h3);font-weight:700;color:var(--text-primary)}
.qr-sub{font-size:var(--text-small);color:var(--text-secondary);line-height:var(--lh-body);margin-bottom:10px}
.info-modal-body{margin-bottom:4px}
.contact-detail{font-size:var(--text-small);color:var(--text-primary);font-weight:700;margin-top:6px}
.qr-code{width:180px;height:180px;color:var(--fixed-dark);background:var(--fixed-light);padding:10px;border:var(--border-hairline)}
.qr-code svg{width:100%;height:100%;display:block}
.profile-avatar{width:72px;height:72px;padding:16px;border:none;border-radius:50%;background:var(--white-base);color:var(--dark-light)}
.qr-points-row{width:100%;display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:var(--border-hairline)}