/* Customer website */
body { background: var(--surface); }
.boot { min-height: 100vh; display: grid; place-items: center; animation: fade 1s ease infinite alternate; }
@keyframes fade { from { opacity: .4; } }

/* ---------- Top bar ---------- */
.c-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.c-top-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 64px; }
.c-nav { display: flex; gap: 2px; }
.c-nav a { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.c-nav a:hover { color: var(--navy); }
.c-nav a.active { background: var(--navy-50); color: var(--navy); }
.store-pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); max-width: 300px; transition: border-color .15s, box-shadow .15s; }
.store-pill:hover { border-color: var(--navy-200); box-shadow: var(--sh-1); }
.store-pill .avatar { width: 32px; height: 32px; }
.store-pill .t { min-width: 0; text-align: left; line-height: 1.15; }
.store-pill b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-pill small { display: block; font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.store-pill > svg { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--navy); flex-shrink: 0; transition: border-color .15s; }
.icon-btn:hover { border-color: var(--navy-200); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn .badge-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px; background: var(--navy); color: #fff; border: 2px solid #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.icon-btn.bump { animation: bump .35s var(--ease); }
@keyframes bump { 50% { transform: scale(1.12); } }
.me-btn { border: 0; background: transparent; padding: 0; border-radius: 50%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 110px; }
.narrow { max-width: 680px; margin: 0 auto; }

/* ---------- Store hero ---------- */
.s-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 32px 32px; isolation: isolate; box-shadow: var(--sh-2); }
.s-hero::before, .s-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); z-index: -1; }
.s-hero::before { width: 520px; height: 520px; right: -170px; top: -260px; background: rgba(255,255,255,.035); }
.s-hero::after { width: 380px; height: 380px; right: -120px; top: -130px; background: rgba(255,255,255,.03); }
.s-hero .eyebrow { color: rgba(255,255,255,.7); margin-bottom: 10px; }
.s-hero h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.045em; max-width: 760px; }
.s-hero .lead { color: rgba(255,255,255,.8); font-size: 16px; margin-top: 10px; max-width: 560px; line-height: 1.55; }
.s-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.h-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 500; white-space: nowrap; }
.h-chip svg { width: 15px; height: 15px; }
.h-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.h-chip.closed .dot { background: #F87171; box-shadow: 0 0 0 3px rgba(248,113,113,.25); }

.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 34px 0 14px; }
.shop-head h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.035em; }
.shop-head p { color: var(--muted); margin-top: 4px; font-size: 14.5px; }
.shop-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.shop-tools .input-icon { flex: 1; min-width: 220px; max-width: 360px; }
.shop-tools .input { height: 42px; border-radius: 999px; background: var(--canvas); border-color: transparent; }
.shop-tools .input:focus { background: #fff; }
.shop-tools .chips { flex: 1 1 100%; }
.shop-tools .chip { height: 36px; padding: 0 15px; font-size: 13.5px; }

/* ---------- Product cards ---------- */
.p-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.p-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; transition: box-shadow .2s var(--ease), border-color .2s; min-width: 0; }
.p-card:hover { box-shadow: var(--sh-2); border-color: transparent; }
.p-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; margin-bottom: 12px; }
.p-icon svg { width: 30px; height: 30px; }
.p-card .tag { align-self: flex-start; font-size: 10px; padding: 3px 7px; }
.p-name { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 9px 0 2px; font-family: var(--font); }
.p-meta { color: var(--muted-2); font-size: 13px; }
.p-meta.low { color: var(--amber); }
.p-meta.out { color: var(--red); }
.p-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-price { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--navy-800); letter-spacing: -0.03em; }
.add-btn { width: 42px; height: 42px; border-radius: 13px; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .15s, transform .1s; }
.add-btn:hover:not(:disabled) { background: var(--navy-600); }
.add-btn:active:not(:disabled) { transform: scale(.93); }
.add-btn:disabled { background: #CBCEDB; cursor: not-allowed; }
.add-btn svg { width: 20px; height: 20px; }
.stepper { display: inline-flex; align-items: center; height: 42px; padding: 3px; border-radius: 13px; background: var(--navy); color: #fff; }
.stepper button { width: 30px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: grid; place-items: center; }
.stepper button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper button svg { width: 16px; height: 16px; }
.stepper .q { min-width: 20px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.stepper.soft { background: var(--navy-50); color: var(--navy); height: 38px; border-radius: 11px; }
.stepper.soft button { height: 32px; width: 30px; border-radius: 9px; }
.stepper.soft button:hover:not(:disabled) { background: rgba(11,20,112,.08); }

/* ---------- Stores ---------- */
.st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.st-card:hover { box-shadow: var(--sh-2); border-color: transparent; }
.st-card.active { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-50); }
.st-card .avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; background: var(--navy); color: #fff; font-family: var(--display); }
.st-card h3 { font-size: 16px; letter-spacing: -0.015em; font-family: var(--font); font-weight: 700; }
.st-card .addr { color: var(--muted); font-size: 13px; margin-top: 2px; }
.st-card .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-card .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.find { display: flex; gap: 10px; margin-bottom: 14px; }
.find .input-icon { flex: 1; }
.find .input { height: 46px; border-radius: 14px; font-size: 15.5px; }
.onboard { text-align: center; max-width: 600px; margin: 6px auto 28px; }
.onboard .empty-icon { margin: 0 auto 14px; width: 64px; height: 64px; }
.onboard h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.045em; }
.onboard p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 0; text-align: left; }
.steps3 div { background: var(--canvas); border-radius: var(--r); padding: 12px 14px; font-size: 13px; color: var(--muted); }
.steps3 b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }

/* ---------- Basket & checkout ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.summary { position: sticky; top: 84px; }
.line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.line:last-child { border-bottom: 0; }
.line .p-icon { width: 46px; height: 46px; border-radius: 13px; margin: 0; flex-shrink: 0; }
.line .p-icon svg { width: 22px; height: 22px; }
.line-info { flex: 1; min-width: 0; }
.line-info b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-info small { color: var(--muted-2); font-size: 12.5px; }
.line-amt { font-weight: 700; min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--ink-2); font-size: 14.5px; }
.sum-row.total { font-size: 17px; font-weight: 700; color: var(--ink); padding-top: 10px; }
.sum-row.dues { color: var(--amber); font-size: 13.5px; }
.pay-opt { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--navy); border-radius: 16px; padding: 16px; background: var(--navy-50); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 6px solid var(--navy); background: #fff; flex-shrink: 0; margin-top: 2px; }
.pay-opt b { font-size: 15.5px; display: block; }
.pay-opt span { color: var(--muted); font-size: 13.5px; }
.back { margin-bottom: 16px; }
.co-card { padding: clamp(18px, 3.5vw, 32px); }
.co-title { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.045em; }
.choose-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.co-h { font-size: 16px; letter-spacing: -0.015em; margin: 26px 0 10px; font-family: var(--font); font-weight: 700; }

/* Delivery slots */
.day-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.day-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14.5px; text-align: left; transition: border-color .15s, background .15s; }
.day-tabs button small { font-weight: 500; font-size: 12px; color: var(--muted-2); }
.day-tabs button.active { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.slot { height: 42px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: all .12s; white-space: nowrap; }
.slot:hover { border-color: var(--navy-200); color: var(--navy); }
.slot.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.slot-empty { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 13px; background: var(--canvas); }
.slot-empty svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.slot-empty b { display: block; }
.slot-empty span { color: var(--muted); font-size: 13.5px; }
.chosen { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--muted-2); margin-bottom: 10px; text-align: center; }
.chosen.on { color: var(--green); }
.chosen svg { width: 18px; height: 18px; flex-shrink: 0; }
.addr-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--canvas-2); }
.addr-box > svg { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; margin-top: 2px; }
.addr-box b { display: block; font-size: 14.5px; }
.addr-box span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.addr-box .addr-phone { color: var(--ink-2); font-weight: 600; margin-top: 6px; }

/* ---------- Orders ---------- */
.rewards { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: linear-gradient(135deg, var(--navy) 0%, #1B2799 100%); color: #fff; margin-bottom: 18px; }
.rewards .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.12); display: grid; place-items: center; flex-shrink: 0; }
.rewards .ic svg { width: 20px; height: 20px; }
.rewards b { font-family: var(--display); font-size: 22px; letter-spacing: -0.03em; display: block; line-height: 1.1; }
.rewards span { color: rgba(255,255,255,.72); font-size: 13px; }
.fulfil-line { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; background: var(--blue-bg); margin-bottom: 10px; }
.fulfil-line svg { width: 19px; height: 19px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.fulfil-line b { display: block; font-size: 14px; }
.fulfil-line span { font-size: 13px; color: var(--muted); }
.nocode { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--green-bg); color: var(--green); font-size: 13.5px; font-weight: 600; }
.nocode svg { width: 16px; height: 16px; }
.cancel-note { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; background: var(--red-bg); margin-top: 10px; }
.cancel-note svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.cancel-note b { display: block; font-size: 13.5px; color: #8E2219; }
.cancel-note span { display: block; font-size: 13px; color: #8E2219; opacity: .85; }

.account-card { display: flex; align-items: center; gap: 16px; }
.addr-wrap { min-height: 100vh; background: var(--canvas); padding: 40px 16px; }
.addr-card { max-width: 560px; margin: 0 auto; }

/* ---------- Sign-in: mobile number ---------- */
.phone-input { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color .15s, box-shadow .15s; overflow: hidden; }
.phone-input:focus-within { border-color: var(--navy-400); box-shadow: 0 0 0 4px rgba(90,100,200,.14); }
.phone-input .cc { display: grid; place-items: center; padding: 0 12px; background: var(--canvas); color: var(--ink-2); font-weight: 600; border-right: 1px solid var(--line); font-size: 15px; }
.phone-input .input { border: 0; box-shadow: none !important; border-radius: 0; letter-spacing: .04em; font-size: 16px; }
.phone-input .input.invalid { color: var(--red); }
.g-lock { position: relative; }
.g-lock-note { display: none; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.g-lock-note svg { width: 15px; height: 15px; }
.g-lock.locked .g-btn-slot { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.g-lock.locked .g-lock-note { display: flex; }


/* ---------- Order confirmed (Google Pay style, Zeu navy) ---------- */
.celebrate { position: fixed; inset: 0; z-index: 80; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; animation: cb-bg .3s ease both; }
.celebrate.out { opacity: 0; transition: opacity .25s; }
@keyframes cb-bg { from { opacity: 0; } }
.cb-stage { position: relative; width: 200px; height: 200px; display: grid; place-items: center; animation: cb-rise .5s cubic-bezier(.2,.8,.2,1) 1.25s both; }
.cb-circle { position: relative; z-index: 3; width: 112px; height: 112px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; box-shadow: 0 18px 40px -12px rgba(11,20,112,.55); animation: cb-pop .55s cubic-bezier(.2,1.6,.4,1) .1s both; }
.cb-circle svg { width: 62px; height: 62px; }
.cb-check { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cb-draw .38s ease-out .55s forwards; }
.cb-ring { position: absolute; inset: 44px; border-radius: 50%; border: 3px solid var(--navy-400); opacity: 0; animation: cb-ripple 1.1s ease-out .55s both; }
.cb-ring.r2 { border-color: var(--navy-200); animation-delay: .75s; }
.cb-ring.r3 { border-color: var(--navy-100); animation-delay: .95s; }
.cb-burst { position: absolute; inset: 0; z-index: 2; }
.cb-burst i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--c); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: cb-fly .8s cubic-bezier(.1,.8,.3,1) .6s both; }
.cb-burst i:nth-child(even) { width: 6px; height: 6px; margin: -3px; border-radius: 2px; }
.cb-text { margin-top: 8px; animation: cb-up .45s ease-out 1.35s both; }
.cb-amount { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; color: var(--navy-800); }
.cb-text h2 { font-size: 22px; margin-top: 4px; }
.cb-text p { color: var(--muted); margin-top: 8px; max-width: 360px; font-size: 15px; }
.cb-actions { width: 100%; max-width: 340px; margin-top: 28px; animation: cb-up .45s ease-out 1.6s both; }
/* Delivered / collected: the same moment in Google Pay green. */
.celebrate.green { --gp-green: #1E8E3E; --gp-green-dark: #0D652D; background: radial-gradient(circle at 50% 38%, #E6F4EA 0%, #fff 55%); }
.celebrate.green .cb-circle { background: var(--gp-green); box-shadow: 0 18px 40px -12px rgba(30,142,62,.55); }
.celebrate.green .cb-ring { border-color: #34A853; }
.celebrate.green .cb-ring.r2 { border-color: #81C995; }
.celebrate.green .cb-ring.r3 { border-color: #CEEAD6; }
.celebrate.green .cb-amount { color: var(--gp-green-dark); }
.celebrate.green .cb-actions .btn-primary { background: var(--gp-green); border-color: var(--gp-green); }
.celebrate.green .cb-actions .btn-primary:hover { background: var(--gp-green-dark); }
.celebrate.green .cb-circle::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(52,168,83,.16); z-index: -1; animation: cb-halo 1.6s ease-out .5s both; }
@keyframes cb-halo { 0% { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes cb-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }
@keyframes cb-ripple { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cb-fly { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.6); } }
@keyframes cb-rise { from { transform: translateY(40px); } to { transform: translateY(0); } }
@keyframes cb-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Rewards page ---------- */
.rw-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 24px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2B3BC4 0%, transparent 55%), linear-gradient(135deg, var(--navy) 0%, #141F8F 100%); box-shadow: 0 18px 40px -22px rgba(11,20,112,.7); }
.rw-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 36px rgba(255,255,255,.04); }
.rw-hero-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; margin-bottom: 18px; }
.rw-hero-ic svg { width: 22px; height: 22px; }
.rw-hero-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rw-hero-amt { font-family: var(--display); font-size: 46px; letter-spacing: -0.04em; line-height: 1.05; margin-top: 4px; }
.rw-hero-sub { font-size: 14px; color: rgba(255,255,255,.75); margin-top: 4px; }
.rw-hero-pending { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 600; position: relative; z-index: 1; }
.rw-hero-pending svg { width: 15px; height: 15px; }
.rw-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rw-how > div { background: var(--surface, #fff); border: 1px solid var(--line, #E6E8F0); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.rw-how-n { width: 28px; height: 28px; border-radius: 9px; background: var(--navy-50); color: var(--navy); font-weight: 800; font-size: 13px; display: grid; place-items: center; margin-bottom: 6px; }
.rw-how b { font-size: 15px; letter-spacing: -0.01em; }
.rw-how span:not(.rw-how-n) { font-size: 13px; color: var(--muted); line-height: 1.45; }
.rw-list { padding: 4px 0; }
.rw-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: inherit; text-decoration: none; }
.rw-row + .rw-row { border-top: 1px solid var(--line, #E6E8F0); }
.rw-row:hover { background: var(--navy-50); }
.rw-row b { display: block; font-size: 14.5px; }
.rw-row .grow span { font-size: 12.5px; color: var(--muted); }
.rw-ic { width: 38px; height: 38px; border-radius: 12px; background: #E6F4EA; color: var(--gp-green, #1E8E3E); display: grid; place-items: center; flex-shrink: 0; }
.rw-ic.wait { background: var(--navy-50); color: var(--navy); }
.rw-ic svg { width: 19px; height: 19px; }
.rw-amt { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--gp-green, #1E8E3E); white-space: nowrap; }
.rw-amt.wait { color: var(--muted); }

/* ---------- Responsive ---------- */
.tabbar.c-tabbar { display: none; }
@media (max-width: 1100px) { .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 760px) {
  .c-top-inner { height: 56px; padding: 0 12px; gap: 8px; }
  .c-top .brand-name { display: none; }
  .c-nav { display: none; }
  .store-pill { max-width: none; flex: 1; min-width: 0; height: 40px; }
  .store-pill .t { flex: 1; }
  .store-pill .avatar { width: 28px; height: 28px; font-size: 11px; }
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .me-btn { display: none; }
  .tabbar.c-tabbar { display: flex; }
  .wrap { padding: 12px 12px 96px; }
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: 24px; }
  .rw-hero { padding: 20px; border-radius: 20px; }
  .rw-hero-amt { font-size: 38px; }
  .rw-hero-ic { margin-bottom: 14px; }
  .rw-how { grid-template-columns: 1fr; gap: 8px; }
  .rw-how > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 2px; padding: 13px 14px; border-radius: 15px; }
  .rw-how-n { grid-row: span 2; margin: 0; }

  .s-hero { padding: 18px 18px 20px; border-radius: 20px; }
  .s-hero .eyebrow { font-size: 10.5px; margin-bottom: 6px; }
  .s-hero h1 { font-size: 26px; }
  .s-hero .lead { font-size: 13.5px; margin-top: 6px; }
  .s-hero-meta { gap: 6px; margin-top: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .s-hero-meta::-webkit-scrollbar { display: none; }
  .h-chip { height: 28px; padding: 0 10px; font-size: 12px; }

  .shop-head { margin: 20px 0 10px; }
  .shop-head h2 { font-size: 20px; }
  .shop-head p { font-size: 13px; }
  .shop-head > span { display: none; }
  .shop-tools { gap: 10px; margin-bottom: 12px; }
  .shop-tools .input-icon { max-width: none; min-width: 0; flex: 1 1 100%; }
  .shop-tools .input { height: 40px; font-size: 14.5px; }
  .shop-tools .chips { margin: 0 -12px; padding: 2px 12px; }
  .shop-tools .chip { height: 32px; padding: 0 12px; font-size: 13px; }

  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .p-card { padding: 11px; border-radius: 15px; }
  .p-card .tag { display: none; }
  .p-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 6px; }
  .p-icon svg { width: 21px; height: 21px; }
  .p-name { font-size: 14px; margin: 2px 0 1px; }
  .p-meta { font-size: 11.5px; }
  .p-foot { padding-top: 10px; gap: 6px; }
  .p-price { font-size: 15.5px; }
  .add-btn { width: 34px; height: 34px; border-radius: 10px; }
  .add-btn svg { width: 17px; height: 17px; }
  .stepper { height: 34px; border-radius: 10px; padding: 2px; }
  .stepper button { width: 24px; height: 30px; border-radius: 8px; }
  .stepper button svg { width: 14px; height: 14px; }
  .stepper .q { min-width: 14px; font-size: 13px; }

  .st-list { grid-template-columns: 1fr; gap: 10px; }
  .st-card { padding: 13px; gap: 12px; border-radius: 15px; }
  .st-card .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
  .st-card h3 { font-size: 15px; }
  .st-card .addr { font-size: 12.5px; }
  .find .input { height: 44px; font-size: 15px; }
  .onboard h1 { font-size: 24px; }
  .onboard p { font-size: 14.5px; }
  .onboard .empty-icon { width: 54px; height: 54px; }
  .steps3 { grid-template-columns: 1fr; gap: 6px; margin-top: 16px; }
  .steps3 div { padding: 10px 12px; }

  .back { margin-bottom: 12px; --h: 38px; }
  .co-h { margin-top: 20px; font-size: 15px; }
  .pay-opt { padding: 13px; gap: 12px; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 230px; }
  .slot { font-size: 12.5px; height: 40px; padding: 0 4px; letter-spacing: -0.01em; }
  .day-tabs button { padding: 9px 11px; font-size: 14px; }
  .line { padding: 11px 0; gap: 10px; }
  .line .p-icon { width: 38px; height: 38px; }
  .line .p-icon svg { width: 19px; height: 19px; }
  .line-amt { min-width: 60px; font-size: 13.5px; }

  .order { padding: 13px; border-radius: 15px; }
  .order-top { margin-bottom: 10px; }
  .order-id { font-size: 12px; }
  .order-meta { font-size: 12px; }
  .item-row { font-size: 13.5px; padding: 3px 0; }
  .item-row .r { font-size: 13px; }
  .order-foot { margin-top: 10px; padding-top: 10px; }
  .order-total { font-size: 17px; }
  .tracker { margin-bottom: 12px; }
  .tracker .s { font-size: 10.5px; }
  .code-box { padding: 7px 11px; }
  .code-box b { font-size: 18px; }
  .rewards { padding: 12px 14px; border-radius: 15px; }
  .rewards b { font-size: 19px; }
  .rewards .ic { width: 36px; height: 36px; }

  .stats .stat { padding: 13px; }
  .stats .stat-value { font-size: 20px; }


  .cb-stage { width: 170px; height: 170px; }
  .cb-circle { width: 96px; height: 96px; }
  .cb-amount { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-check { stroke-dashoffset: 0; }
}

/* ---------- Delivery time dropdown ---------- */
.slot-select-wrap { position: relative; }
.slot-select-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--navy); pointer-events: none; }
.slot-select { height: 50px; padding-left: 42px; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }

/* ---------- Order list rows ---------- */
a.order-link { display: block; color: inherit; transition: box-shadow .15s, border-color .15s; }
a.order-link:hover { border-color: var(--navy-200); box-shadow: var(--sh-2); }
.ol-row { display: flex; align-items: center; gap: 12px; }
.ol-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.ol-ic.del { background: var(--blue-bg); color: var(--blue); }
.ol-ic svg { width: 20px; height: 20px; }
.ol-row b { display: block; font-size: 14.5px; }
.ol-row span { font-size: 13px; color: var(--muted); }
.ol-amt { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.ol-chev svg { width: 18px; height: 18px; color: var(--muted-2); }

/* ---------- Current order page ---------- */
.op { display: flex; flex-direction: column; gap: 14px; }
.op-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px; background: var(--navy); color: #fff; isolation: isolate; box-shadow: var(--sh-2); }
.op-hero::after { content: ""; position: absolute; right: -90px; top: -110px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.05); z-index: -1; }
.op-hero .badge { background: rgba(255,255,255,.14); color: #fff; }
.op-hero h1 { font-size: clamp(26px, 4.4vw, 36px); letter-spacing: -0.04em; margin-top: 14px; }
.op-hero > p { color: rgba(255,255,255,.78); margin-top: 6px; font-size: 15px; }
.op-hero.st-completed { background: linear-gradient(135deg, #0B5E43 0%, #12805C 100%); }
.op-hero.st-cancelled { background: #3A3D4E; }
.op-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.75); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; animation: pulse 1.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 50% { opacity: .35; } }
.op-when { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.1); }
.op-when svg { width: 22px; height: 22px; flex-shrink: 0; }
.op-when span { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.op-when b { font-size: 17px; }
.op-code { margin-top: 18px; padding: 14px; border-radius: 14px; background: #fff; color: var(--ink); text-align: center; }
.op-code span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.op-code b { display: block; font-family: var(--mono); font-size: 36px; letter-spacing: .35em; color: var(--navy); margin-top: 2px; padding-left: .35em; }
.op-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: #A7F3D0; }
.op-note svg { width: 16px; height: 16px; }
.notif-ask { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--navy-50); border: 1px solid var(--navy-100); }
.notif-ask b { display: block; font-size: 14.5px; }
.notif-ask span:not(.notif-ic) { font-size: 13px; color: var(--muted); }
.notif-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.notif-ic svg { width: 19px; height: 19px; }

/* ---------- Order scenes: packing, out for delivery, ready for pickup ---------- */
.scene { margin: 14px -22px -4px; height: 150px; overflow: hidden; }
.sc { display: block; width: 100%; height: 100%; }
.sc * { transform-box: fill-box; }
/* scooter */
.sc-city path { fill: rgba(255,255,255,.07); }
.sc-city { animation: sc-slide 14s linear infinite; }
.sc-road { stroke: rgba(255,255,255,.28); stroke-width: 2; }
.sc-dashes rect { fill: rgba(255,255,255,.35); }
.sc-dashes { animation: sc-dash .45s linear infinite; }
.sc-speed line { stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-linecap: round; animation: sc-whoosh .7s linear infinite; }
.sc-speed line:nth-child(2) { animation-delay: .25s; }
.sc-speed line:nth-child(3) { animation-delay: .45s; }
.sc-puffs circle { fill: rgba(255,255,255,.35); animation: sc-puff 1s ease-out infinite; }
.sc-puffs circle:nth-child(2) { animation-delay: .5s; }
.sc-shadow { fill: rgba(0,0,0,.28); animation: sc-shadow .36s ease-in-out infinite alternate; transform-origin: center; }
.sc-bike { animation: sc-bob .36s ease-in-out infinite alternate; }
.sc-box { fill: #C9CDEF; }
.sc-box-lid { stroke: rgba(11,20,112,.25); stroke-width: 2; }
.sc-box-z { font: 800 15px var(--display); fill: var(--navy); }
.sc-body { fill: #fff; }
.sc-guard { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.sc-seat { fill: #5A64C8; }
.sc-bar { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.sc-light { fill: #FFE7A3; }
.sc-beam { fill: rgba(255,231,163,.18); animation: sc-beam 1.2s ease-in-out infinite alternate; }
.sc-leg { fill: none; stroke: #2B3BC4; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sc-torso { stroke: #7C86E0; stroke-width: 15; stroke-linecap: round; }
.sc-arm { stroke: #7C86E0; stroke-width: 7; stroke-linecap: round; }
.sc-hand { fill: #F3CFA9; }
.sc-helmet { fill: #fff; }
.sc-visor { fill: var(--navy); }
.sc-rider { animation: sc-lean 2.4s ease-in-out infinite; transform-origin: 140px 74px; transform-box: view-box; }
.sc-wheel circle { fill: var(--navy-800, #070D4F); stroke: #fff; stroke-width: 4; }
.sc-wheel path { stroke: rgba(255,255,255,.7); stroke-width: 2; }
.sc-wheel { transform-origin: center; animation: sc-spin .5s linear infinite; }
@keyframes sc-slide { to { transform: translateX(-320px); } }
@keyframes sc-dash { to { transform: translateX(-40px); } }
@keyframes sc-whoosh { 0% { transform: translateX(30px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-40px); opacity: 0; } }
@keyframes sc-puff { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(-26px, -8px) scale(1.8); opacity: 0; } }
@keyframes sc-bob { to { transform: translateY(-2px); } }
@keyframes sc-shadow { to { transform: scaleX(.93); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-beam { to { opacity: .4; } }
@keyframes sc-lean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
/* shop counter */
.sh-wall { fill: rgba(255,255,255,.05); }
.sh-line { stroke: rgba(255,255,255,.18); stroke-width: 2; }
.sh-item { fill: rgba(255,255,255,.12); }
.aw-a { fill: #fff; }
.aw-b { fill: #C9CDEF; }
.sh-counter { fill: #fff; }
.sh-front { fill: rgba(255,255,255,.1); }
.sh-bagbody { fill: #C9CDEF; }
.sh-handle { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.sh-z { font: 800 22px var(--display); fill: var(--navy); }
.it-a { fill: #fff; } .it-b { fill: #A5B4FC; } .it-c { fill: #FDE7B0; }
.it-line { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; fill: none; }
.sh-drop g { opacity: 0; animation: sh-drop 2.4s cubic-bezier(.5,0,.8,.4) infinite; }
.sh-drop .d2 { animation-delay: .8s; }
.sh-drop .d3 { animation-delay: 1.6s; }
.is-packing .sh-bag { animation: sh-catch 0.8s ease-out infinite; transform-origin: 160px 106px; transform-box: view-box; }
@keyframes sh-drop { 0% { transform: translateY(30px); opacity: 0; } 15% { transform: translateY(32px); opacity: 1; } 50% { transform: translateY(66px); opacity: 1; } 56%, 100% { transform: translateY(74px); opacity: 0; } }
@keyframes sh-catch { 0%, 40%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .96); } 62% { transform: scale(.98, 1.02); } }
.is-ready .sh-bag { animation: sh-hop 1.8s cubic-bezier(.3,1.4,.5,1) infinite; transform-origin: 160px 106px; transform-box: view-box; }
.sh-pulse { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; transform-origin: center; animation: sh-pulse 1.8s ease-out infinite; }
.sh-tick circle { fill: #fff; }
.sh-tick path { fill: none; stroke: var(--navy); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-tick { transform-origin: center; animation: sh-tick .6s cubic-bezier(.2,1.6,.4,1) .2s both; }
.sh-spark path { fill: #fff; transform-origin: center; animation: sh-twinkle 1.6s ease-in-out infinite; }
.sh-spark path:nth-child(2) { animation-delay: .5s; }
.sh-spark path:nth-child(3) { animation-delay: 1s; }
@keyframes sh-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(0) scale(1.03, .97); } }
@keyframes sh-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sh-tick { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sh-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc *, .sc { animation: none !important; } .sh-drop { display: none; } }
.op-card { padding: 16px 18px; }
.op-place { display: flex; gap: 12px; align-items: flex-start; }
.op-place b { display: block; font-size: 15px; margin: 2px 0; }
.op-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.op-rewards { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, var(--navy-50) 0%, #fff 100%); border: 1px solid var(--navy-100); }
.op-rewards .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--navy); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.op-rewards .ic svg { width: 22px; height: 22px; }
.op-rewards b { display: block; font-family: var(--display); font-size: 26px; letter-spacing: -0.03em; color: var(--navy-800); line-height: 1.15; }
.op-rewards span { font-size: 13.5px; color: var(--muted); }
.op-actions { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.op-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) {
  .op { gap: 10px; }
  .op-hero { padding: 18px; border-radius: 20px; }
  .scene { margin: 10px -18px -2px; height: 128px; }
  .op-hero h1 { font-size: 24px; margin-top: 12px; }
  .op-hero > p { font-size: 14px; }
  .op-code b { font-size: 30px; }
  .op-card { padding: 14px; }
  .op-rewards { padding: 14px; border-radius: 16px; }
  .op-rewards b { font-size: 22px; }
  .op-links { grid-template-columns: 1fr; }
  .ol-amt { font-size: 15px; }
  .ol-ic { width: 36px; height: 36px; }
}

/* ---------- Order page header row ---------- */
.op-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.op-top-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---------- Waiting for the shop to accept (1-minute navy ring) ---------- */

/* ---------- Sticky cart bar (shop page) ---------- */
.cartbar-wrap { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 25; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; transform: translateY(140%); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.1), opacity .2s; }
.cartbar-wrap.on { transform: none; opacity: 1; }
.cartbar { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(11,20,112,.55); }
.cartbar:hover { background: var(--navy-600); }
.cartbar-ic { position: relative; display: grid; place-items: center; }
.cartbar-ic svg { width: 18px; height: 18px; }
.cartbar-n { position: absolute; top: -7px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }
.cartbar-t { margin-left: 2px; }
.cartbar-amt { padding-left: 9px; border-left: 1px solid rgba(255,255,255,.25); font-variant-numeric: tabular-nums; }
.cartbar > svg { width: 16px; height: 16px; margin-left: -3px; opacity: .8; }
#view:has(.cartbar-wrap.on) { padding-bottom: 100px; }
@media (max-width: 760px) {
  .cartbar-wrap { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 0 10px; }
  #view:has(.cartbar-wrap.on) { padding-bottom: 150px; }
}

/* ---------- Bill ---------- */
.bill .sum-row.save { color: var(--green); font-weight: 600; }
.bill .sum-row.fee span:first-child { color: var(--ink-2); }
.fee-free { display: inline-flex; align-items: center; gap: 8px; }
.fee-zero { font-variant-numeric: tabular-nums; color: var(--muted-2); font-size: 14px; }
.fee-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.bill-save { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, var(--green-bg), #F3FBF6); border: 1px dashed #9AD7B6; color: #0B5E43; font-size: 13.5px; }
.bill-save svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }
.bill-save b { font-weight: 800; }

/* ---------- Home delivery minimum ---------- */
.min-note { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.min-note b { color: var(--ink); }
.min-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 8px; }
.min-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy-400), var(--navy)); transition: width .3s; }
/* Basket: home-delivery minimum at the top, and the pickup / delivery choice */
.dl-goal { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; background: var(--navy-50); border: 1px solid var(--navy-100); color: var(--ink-2); font-size: 14px; }
.dl-goal > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--navy); }
.dl-goal b { color: var(--ink); }
.dl-goal .min-bar { margin-top: 8px; background: var(--surface); }
.dl-goal.done { background: var(--green-bg); border-color: transparent; }
.dl-goal.done > svg { color: var(--green); }
.order-choice { margin-top: 20px; }
.order-btns { display: grid; gap: 10px; }
.order-note { margin-top: 8px; }
@media (max-width: 1000px) {
  /* Fixed above the tab bar, so both choices show without scrolling */
  .order-choice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(15,18,34,.35); }
  .order-choice .choose-label { display: none; }
  .order-btns { grid-template-columns: 1fr 1fr; }
  .order-btns .btn { height: 48px; padding: 0 10px; font-size: 15px; }
  .order-note { margin-top: 6px; }
  #view:has(.has-order-bar) { padding-bottom: 120px; }
}
@media (max-width: 760px) {
  .order-choice { bottom: calc(64px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  #view:has(.has-order-bar) { padding-bottom: 200px; }
}

/* ---------- Rewards (own section at the bottom) ---------- */
.rw-section { margin-top: 22px; }
.rw-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.rw-head h3 { font-size: 18px; letter-spacing: -0.02em; }
.rw-head a { color: var(--navy); font-weight: 600; }
.op-rewards strong { color: var(--navy-800); }

/* Pack-size dropdown on product cards (same product, several weights) */
.size-dd { position: relative; margin: 6px 0 2px; }
.size-btn { display: flex; align-items: center; gap: 6px; width: 100%; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.size-btn-t { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.size-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: transform .2s var(--ease); }
.size-btn:hover { border-color: var(--navy-200); background: var(--surface); }
.size-btn:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
.size-dd.open .size-btn { border-color: var(--navy); background: var(--surface); box-shadow: 0 0 0 3px var(--navy-100); }
.size-dd.open .size-btn svg { transform: rotate(180deg); color: var(--navy); }
.size-menu[hidden] { display: none; }
.size-pop { position: fixed; z-index: 80; display: grid; gap: 4px; padding: 8px; max-height: min(320px, 60vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); animation: size-in .14s var(--ease); transform-origin: top center; }
.size-pop.up { transform-origin: bottom center; }
@keyframes size-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.size-pop.up { animation-name: size-in-up; }
@keyframes size-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.size-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* A light hover; only the chosen size gets a (soft) fill */
.size-opt:hover { background: color-mix(in srgb, var(--navy-50) 55%, transparent); }
.size-opt:focus-visible { outline: 2px solid var(--navy-200); outline-offset: -2px; }
.size-opt.on { background: color-mix(in srgb, var(--navy-50) 70%, transparent); color: var(--navy); }
.size-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.size-opt-t b { font-size: 14px; font-weight: 700; }
.size-opt-t small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.size-opt-p { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.size-opt-ck { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--navy); visibility: hidden; }
.size-opt-ck svg { width: 16px; height: 16px; }
.size-opt.on .size-opt-ck { visibility: visible; }
.size-opt[data-out] .size-opt-t b, .size-opt[data-out] .size-opt-p { color: var(--muted-2); }
@media (max-width: 600px) { .size-btn { height: 34px; font-size: 12.5px; padding: 0 8px 0 10px; border-radius: 11px; } }
@media (prefers-reduced-motion: reduce) { .size-pop { animation: none; } .size-btn svg { transition: none; } }

/* Product image on cards and basket lines */
.p-img { aspect-ratio: 4 / 3; margin: -4px -4px 12px; border-radius: 14px; background: var(--canvas); display: grid; place-items: center; padding: 8px; overflow: hidden; }
.p-img .p-art { width: auto; height: 100%; max-width: 100%; }
.line .p-icon.thumb { background: var(--canvas); padding: 3px; }
.line .p-icon.thumb svg { width: 100%; height: 100%; }
@media (max-width: 600px) { .p-img { margin: -2px -2px 8px; border-radius: 11px; padding: 6px; } .line .p-icon.thumb svg { width: 100%; height: 100%; } }
.p-img { position: relative; }
.p-img .p-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Saved addresses (Account, delivery checkout) */
.addr-list { display: flex; flex-direction: column; gap: 10px; }
.addr-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.addr-list.pick .addr-row { cursor: pointer; }
.addr-row.picked { border-color: var(--navy); background: var(--navy-50); box-shadow: 0 0 0 1px var(--navy) inset; }
.addr-row input[type=radio] { width: 18px; height: 18px; accent-color: var(--navy); margin: 3px 0 0; flex-shrink: 0; }
.addr-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.addr-row.picked .addr-ic { background: #fff; }
.addr-ic svg { width: 19px; height: 19px; }
.addr-row b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.addr-row b .badge { font-size: 10.5px; height: 20px; }
.addr-row span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.addr-row .addr-for { color: var(--ink-2); font-weight: 600; margin-top: 4px; }
.addr-acts { display: flex; gap: 2px; flex-shrink: 0; }
.addr-acts svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .addr-row { padding: 11px 12px; } .addr-acts .btn { padding: 0 8px; } }

/* First-order offer */
.fo-banner { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 12px 16px; border-radius: 16px; background: linear-gradient(90deg, var(--green-bg), #F3FBF6); border: 1px dashed #9AD7B6; color: #0B5E43; }
.fo-banner svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); }
.fo-banner b { display: block; font-size: 15px; }
.fo-banner span { display: block; font-size: 13px; opacity: .85; }
.bill-nudge { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #FFF8E6; border: 1px dashed #F0C36B; color: #7A5200; font-size: 13.5px; }
.bill-nudge svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Product cards open the product page */
.p-card[data-open] { cursor: pointer; }
.p-name a { color: inherit; text-decoration: none; }
.p-name a:hover { color: var(--navy); }
.p-card a.p-img { text-decoration: none; color: inherit; }

/* Product page */
.pd-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--navy); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.pd-back svg { width: 18px; height: 18px; }
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.pd-img { position: relative; aspect-ratio: 1; border-radius: 18px; background: var(--canvas); display: grid; place-items: center; padding: 18px; overflow: hidden; }
.pd-img:has(.p-photo) { background: #fff; }
.pd-img > svg, .pd-img > img { width: 100%; height: 100%; }
.pd-img .p-photo { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; }
.pd-off { position: absolute; top: 14px; left: 14px; background: var(--green); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.pd-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-info .tag { align-self: flex-start; }
.pd-name { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.02em; line-height: 1.15; }
.pd-unit { color: var(--muted); font-size: 16px; margin-top: -4px; }
.pd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pd-price b { font-size: 30px; letter-spacing: -0.02em; }
.pd-price s { color: var(--muted-2); font-size: 15px; }
.pd-save { color: #0B5E43; background: var(--green-bg); font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 999px; }
.pd-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.pd-size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-size { display: flex; flex-direction: column; min-width: 92px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface); }
.pd-size b { font-size: 15px; }
.pd-size span { font-size: 13px; color: var(--muted); }
.pd-size i { font-style: normal; font-size: 11.5px; color: var(--navy); font-weight: 600; }
.pd-size.on { border-color: var(--navy); background: var(--navy-50); box-shadow: 0 0 0 1px var(--navy) inset; }
.pd-size.oos { opacity: .6; }
.pd-stock { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #0B5E43; }
.pd-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pd-stock.low { color: #8A5A00; } .pd-stock.low .dot { background: #E0A100; }
.pd-stock.out { color: var(--red, #B42318); } .pd-stock.out .dot { background: var(--red, #B42318); }
.pd-buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pd-add { min-width: 220px; }
.stepper.lg { height: 50px; border-radius: 14px; }
.stepper.lg button { width: 44px; height: 44px; }
.stepper.lg .q { min-width: 40px; font-size: 17px; }
.pd-facts { list-style: none; padding: 14px 0 0; margin: 6px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-2); }
.pd-facts li { display: flex; gap: 10px; align-items: flex-start; }
.pd-facts svg { width: 18px; height: 18px; color: var(--navy); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 760px) {
  .pd { grid-template-columns: 1fr; gap: 16px; padding: 14px; border-radius: 20px; }
  .pd-img { aspect-ratio: 4 / 3; }
  .pd-buy > * { flex: 1; }
  .pd-add { min-width: 0; }
}
/* The address icon is a span too: keep it a centred tile, not a line of text */
.addr-row .addr-ic { display: grid; place-items: center; margin-top: 0; color: var(--navy); }

/* ---------- Weekly rewards: goals and scratch cards ---------- */
.wr-hero { position: relative; overflow: hidden; padding: 24px; border-radius: 26px; color: #fff; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, #2B3BC4 0%, transparent 55%), linear-gradient(135deg, var(--navy) 0%, #141F8F 100%); box-shadow: 0 18px 40px -22px rgba(11,20,112,.7); }
.wr-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 38px rgba(255,255,255,.04); z-index: -1; }
.wr-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wr-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.wr-range { display: block; font-family: var(--display); font-size: 26px; letter-spacing: -0.03em; margin-top: 2px; }
.wr-left { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 600; white-space: nowrap; }
.wr-left svg { width: 15px; height: 15px; }
.wr-lead { margin: 10px 0 18px; color: rgba(255,255,255,.82); font-size: 15px; }
.wr-lead b { color: #fff; }

.wr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wr-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.wr-tile.done { background: rgba(43,182,115,.18); border-color: rgba(43,182,115,.45); }
.wr-tile-top { display: flex; align-items: center; gap: 8px; }
.wr-ic { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex-shrink: 0; }
.wr-ic svg { width: 16px; height: 16px; }
.wr-title { font-weight: 700; font-size: 14px; flex: 1; }
.wr-tick { width: 24px; height: 24px; border-radius: 50%; background: #2BB673; color: #fff; display: grid; place-items: center; }
.wr-tick svg { width: 14px; height: 14px; }
.wr-val { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; }
.wr-val small { font-family: var(--font); font-size: 14px; font-weight: 500; opacity: .7; letter-spacing: 0; }
.wr-sub { font-size: 13px; color: rgba(255,255,255,.75); }
.wr-tile.done .wr-sub { color: #9BF0C4; font-weight: 600; }
.wr-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin: 4px 0 2px; }
.wr-bar span { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, #7F8BFF, #FFFFFF); transition: width .6s var(--ease); }
.wr-tile.done .wr-bar span { background: linear-gradient(90deg, #2BB673, #9BF0C4); }
.wr-pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 2px; }
.wr-pill { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); }
.wr-pill.on { background: #fff; }
.wr-tile.done .wr-pill.on { background: #2BB673; }
.wr-pill i { position: absolute; top: 13px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.wr-tile.visits .wr-sub { margin-top: 12px; }

/* The small version under checkout and order pages, on a light card */
.wr-tiles.mini .wr-tile { background: var(--surface); border-color: var(--line); color: var(--ink); padding: 14px; }
.wr-tiles.mini .wr-tile.done { background: var(--green-bg); border-color: transparent; }
.wr-tiles.mini .wr-ic { background: var(--navy-50); color: var(--navy); }
.wr-tiles.mini .wr-val { font-size: 22px; }
.wr-tiles.mini .wr-sub { color: var(--muted); }
.wr-tiles.mini .wr-tile.done .wr-sub { color: var(--green); }
.wr-tiles.mini .wr-bar, .wr-tiles.mini .wr-pill { background: var(--line-2); }
.wr-tiles.mini .wr-bar span { background: linear-gradient(90deg, var(--navy-400), var(--navy)); }
.wr-tiles.mini .wr-pill.on { background: var(--navy); }
.wr-tiles.mini .wr-tile.visits .wr-sub { margin-top: 0; }

/* Scratch cards */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sc { position: relative; display: flex; flex-direction: column; gap: 10px; -webkit-user-select: none; user-select: none; }
.sc-prize, .sc-ticket { position: relative; height: 170px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; overflow: hidden; }
.sc-prize { background: radial-gradient(circle at 50% 40%, #FFF6D6 0%, #FFE7A3 100%); color: #5B3B00; }
.sc-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.sc-amt { font-family: var(--display); font-size: 44px; letter-spacing: -0.04em; line-height: 1.05; margin: 2px 0; }
.sc-off { font-size: 13px; font-weight: 600; }
.sc-foil { position: absolute; left: 0; top: 0; width: 100%; height: 170px; border-radius: 20px; cursor: grab; touch-action: none; box-shadow: 0 10px 24px -14px rgba(11,20,112,.55); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sc-foil:active { cursor: grabbing; }
.sc-foil:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.sc-foil.gone { opacity: 0; transform: scale(1.04); pointer-events: none; }
.sc.won .sc-prize { animation: sc-pop .5s var(--ease); }
@keyframes sc-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.sc-cap { display: flex; flex-direction: column; padding: 0 4px; }
.sc-cap b { font-size: 14px; }
.sc-cap span { font-size: 12.5px; color: var(--muted); }

/* A revealed card: a ticket with punched edges */
.sc-ticket { background: linear-gradient(135deg, var(--navy) 0%, #2B3BC4 100%); color: #fff; gap: 2px;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.sc-ticket .sc-off { opacity: .85; }
.sc-use { margin-top: 10px; background: #fff !important; color: var(--navy) !important; }
.sc-exp { font-size: 11.5px; margin-top: 6px; opacity: .75; color: inherit; }
.sc-used .sc-ticket, .sc-expired .sc-ticket { background: var(--line-2); color: var(--muted); }
.sc-grid.past .sc-ticket { height: 120px; }
.sc-grid.past .sc-amt { font-size: 32px; }

.sc-confetti { position: absolute; left: 50%; top: 80px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.sc-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: sc-burst 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes sc-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 160px)) rotate(var(--r)); } }

.wr-empty p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Choosing a scratch card at checkout */
.vp { margin-bottom: 18px; }
.vp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.vp-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--navy-200); background: var(--navy-50); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.vp-card:hover:not(:disabled) { border-color: var(--navy); }
.vp-card.on { border-style: solid; border-color: var(--navy); background: var(--surface); box-shadow: 0 0 0 3px var(--navy-100); }
.vp-card:disabled { opacity: .55; cursor: not-allowed; }
.vp-amt { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--navy); line-height: 1; white-space: nowrap; }
.vp-amt small { font-family: var(--font); font-size: 12px; font-weight: 600; margin-left: 3px; }
.vp-txt { flex: 1; display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }
.vp-txt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.vp-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--navy-200); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.vp-check svg { width: 13px; height: 13px; }
.vp-card.on .vp-check { background: var(--navy); border-color: var(--navy); color: #fff; }
.vp-hint { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border-radius: 14px; background: var(--amber-bg); color: var(--amber); font-size: 14px; font-weight: 600; text-decoration: none; }
.vp-hint svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 760px) {
  .wr-hero { padding: 18px; border-radius: 22px; }
  .wr-range { font-size: 21px; }
  .wr-tiles { gap: 8px; }
  .wr-tile { padding: 13px; border-radius: 16px; }
  .wr-val { font-size: 22px; }
  .wr-val small { font-size: 12px; }
  .wr-title { font-size: 13px; }
  .wr-sub { font-size: 12px; }
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-prize, .sc-ticket, .sc-foil { height: 150px; }
  .sc-amt { font-size: 36px; }
}
@media (max-width: 380px) {
  .wr-tiles { grid-template-columns: 1fr; }
  .sc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sc-confetti { display: none; } .sc.won .sc-prize { animation: none; } }