/* ═══════════════════════════════════════════════════════════════
   NUNU — Brand-true design system · Light + Dark · v5
   Orange (#FF8800) brand · Warm glass surfaces · Spring physics
═══════════════════════════════════════════════════════════════ */

@font-face { font-family:"Ubuntu"; src:url("./fonts/Ubuntu-Regular.ttf") format("truetype"); font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:"Ubuntu"; src:url("./fonts/Ubuntu-Bold.ttf")    format("truetype"); font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:"Ubuntu"; src:url("./fonts/Ubuntu-Italic.ttf")  format("truetype"); font-weight:400; font-style:italic; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ═══════════════════════════════════════════════════════════════
   TOKENS — Light mode (default)
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand (Nunu orange, from logo) ── */
  --brand:       #FF8800;
  --brand-d:     #E06500;
  --brand-l:     #FFAA33;
  --brand-ll:    #FFD080;
  --brand-dim:   rgba(255,136,0,.11);
  --brand-dim2:  rgba(255,136,0,.06);
  --brand-glow:  rgba(255,136,0,.50);
  --brand-glow2: rgba(255,136,0,.22);

  /* ── Accent palette ── */
  --green:       #22C55E; --green-d:#16A34A; --green-dim:rgba(34,197,94,.12); --green-glow:rgba(34,197,94,.38);
  --amber:       #F59E0B; --amber-dim:rgba(245,158,11,.14); --amber-glow:rgba(245,158,11,.40);
  --red:         #EF4444; --red-dim:rgba(239,68,68,.12);    --red-glow:rgba(239,68,68,.35);
  --info:        #3B82F6; --info-dim:rgba(59,130,246,.10);

  /* ── Semantic ── */
  --primary:  var(--brand);
  --primary-d:var(--brand-d);
  --accent:   var(--amber);
  --danger:   var(--red);
  --danger-dim: var(--red-dim);

  /* ── Light surfaces ── */
  --bg:          #FFFBF7;
  --bg-2:        #FFF4E8;
  --surface:     #FFFFFF;
  --surface-2:   rgba(255,251,247,.95);
  --surface-3:   rgba(255,244,232,.90);
  --glass:       rgba(255,255,255,.78);
  --glass-2:     rgba(255,251,247,.60);
  --border:      rgba(255,136,0,.18);
  --border-soft: rgba(255,136,0,.09);
  --line:        rgba(0,0,0,.06);

  /* ── Light text ── */
  --text:   #1A0800;
  --text-2: #4A2000;
  --muted:  #8A5A2A;
  --muted-2:#C4904A;

  /* ── Light shadows (warm-tinted) ── */
  --s0:  none;
  --s1:  0 1px 4px rgba(160,80,0,.07);
  --s2:  0 4px 16px rgba(160,80,0,.10), 0 1px 4px rgba(160,80,0,.06);
  --s3:  0 8px 32px rgba(160,80,0,.13), 0 2px 8px rgba(160,80,0,.08);
  --s4:  0 16px 56px rgba(160,80,0,.16), 0 4px 14px rgba(160,80,0,.09);
  --s-brand: 0 8px 28px var(--brand-glow);
  --s-green: 0 8px 20px var(--green-glow);
  --s-amber: 0 8px 28px var(--amber-glow);
  --s-3d:    0 20px 56px rgba(160,80,0,.20), 0 6px 20px rgba(160,80,0,.10);

  /* ── Radius ── */
  --r0:0; --r1:6px; --r2:10px; --r3:16px; --r4:22px; --r5:30px; --r6:40px; --rf:999px;

  /* ── Motion ── */
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --bounce: cubic-bezier(.22,.68,0,1.5);
  --fast:.12s; --base:.22s; --slow:.38s;

  /* ── Layout ── */
  --nav-h: 76px; --hdr-h: 64px;
  --persp: 1000px;
}

/* ========================================================================== */
/* NUNU CITY EDITION — crisp product experience · 2026-07                     */
/* ========================================================================== */
:root{
  --brand:#ff6d62;--brand-d:#e9544b;--brand-l:#ff9289;--brand-ll:#ffd2ce;
  --brand-dim:rgba(255,109,98,.12);--brand-dim2:rgba(255,109,98,.06);--brand-glow:rgba(255,109,98,.34);--brand-glow2:rgba(255,109,98,.16);
  --green:#39c989;--green-d:#1ca56b;--green-dim:rgba(57,201,137,.12);--amber:#ffd76e;--orange:#ff9f5b;--info:#55c9f3;
  --bg:#e8edfb;--bg-2:#f0f3fc;--surface:#ffffff;--surface-2:rgba(255,255,255,.86);--surface-3:#f4f6fc;--glass:rgba(255,255,255,.82);--glass-2:rgba(255,255,255,.62);
  --border:rgba(16,22,47,.13);--border-soft:rgba(16,22,47,.08);--line:rgba(16,22,47,.08);
  --text:#10162f;--text-2:#343d5e;--muted:#6b738c;--muted-2:#9aa2b7;
  --s1:0 2px 8px rgba(16,22,47,.06);--s2:0 10px 28px rgba(16,22,47,.08);--s3:0 22px 60px rgba(16,22,47,.12);--s4:0 35px 90px rgba(16,22,47,.16);--s-brand:0 15px 35px var(--brand-glow);--s-3d:0 30px 80px rgba(16,22,47,.18);
  --r1:7px;--r2:11px;--r3:16px;--r4:22px;--r5:28px;--r6:36px;--nav-h:78px;
}
[data-theme="dark"]{--bg:#090e21;--bg-2:#0e1530;--surface:#151d3c;--surface-2:rgba(21,29,60,.9);--surface-3:#1b254a;--glass:rgba(18,26,55,.88);--glass-2:rgba(25,35,70,.76);--border:rgba(255,255,255,.13);--border-soft:rgba(255,255,255,.08);--line:rgba(255,255,255,.08);--text:#f7f8ff;--text-2:#dbe0f4;--muted:#9da7c2;--muted-2:#69738f}
html,body{background:var(--bg)}body{perspective:none;background:radial-gradient(circle at 10% -10%,rgba(85,201,243,.22),transparent 31%),radial-gradient(circle at 100% 30%,rgba(255,109,98,.15),transparent 29%),var(--bg)}
.app-shell{left:50%;width:min(100%,1440px);background:var(--bg-2);box-shadow:0 0 0 1px var(--border),0 30px 100px rgba(16,22,47,.2);transform:translateX(-50%)}.ambient-bg{opacity:.35}.view{padding-bottom:calc(var(--nav-h) + 30px);scrollbar-width:thin;scrollbar-color:var(--brand) transparent}.view::-webkit-scrollbar{width:5px}.view::-webkit-scrollbar-thumb{border-radius:9px;background:var(--brand)}

/* Calm, memorable loader instead of a visual effects wall. */
.boot-loader{gap:18px;background:var(--text)}.boot-canvas,.boot-grid,.boot-aurora,.boot-rings{display:none!important}.boot-visual{width:150px;height:150px}.boot-center{top:50%;left:50%;width:128px;height:128px;transform:translate(-50%,-50%)!important}.boot-logo-wrap{width:112px;height:112px;border:1px solid rgba(255,255,255,.12);background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.32);animation:city-logo 1.8s ease-in-out infinite}.boot-pulse-ring{border-color:rgba(85,201,243,.28)}.boot-name{font-size:2.2rem;letter-spacing:-.06em}.boot-tag{color:rgba(255,255,255,.48);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.boot-progress{width:min(220px,55vw)}.boot-progress-fill{background:linear-gradient(90deg,var(--brand),var(--amber),var(--info))}@keyframes city-logo{50%{transform:translateY(-7px);box-shadow:0 32px 85px rgba(0,0,0,.4)}}

/* Authentication */
.auth-view{display:grid;grid-template-columns:1.08fr .92fr;background:var(--bg-2)}.auth-hero{min-height:100vh;padding:clamp(40px,7vw,100px);border-radius:0 42px 42px 0;background:var(--text);overflow:hidden}.auth-hero:before{background:radial-gradient(circle at 82% 12%,rgba(85,201,243,.35),transparent 30%),radial-gradient(circle at 10% 90%,rgba(255,109,98,.38),transparent 35%)}.auth-hero-bg{background-image:radial-gradient(rgba(255,255,255,.16) .8px,transparent .8px);background-size:18px 18px;opacity:.45}.auth-hero-body{max-width:650px}.auth-brand{margin-bottom:16vh}.auth-brand-logo{width:56px;height:56px;padding:7px;border-radius:16px;background:#fff}.auth-brand span{font-size:1.25rem;text-shadow:none}.auth-hero-title{font-size:clamp(4rem,7.5vw,8rem);line-height:.82;letter-spacing:-.08em;text-shadow:none}.auth-hero-sub{max-width:500px;color:rgba(255,255,255,.58);font-size:1rem}.auth-features{display:grid;grid-template-columns:1fr 1fr}.auth-feat{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.06)}.auth-panel{padding:clamp(20px,6vw,90px);background:transparent}.auth-card{width:min(520px,100%);padding:34px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--s3);backdrop-filter:none}.auth-tabs{padding:5px;border-radius:14px;background:var(--surface-3)}.auth-tab{border-radius:10px}.auth-tab--active{color:#fff;background:var(--text);box-shadow:none}.field-label{color:var(--muted);font-size:.7rem;letter-spacing:.03em}.field-input,.sort-select{border:1px solid var(--border);border-radius:13px;background:var(--surface-3)}.field-input:focus{border-color:var(--info);box-shadow:0 0 0 4px rgba(85,201,243,.12)}.btn--primary{color:#fff!important;background:var(--text)!important;box-shadow:0 14px 30px rgba(16,22,47,.18)!important}.auth-back-btn{top:24px;left:24px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1)}

/* Discovery home */
.home-header{position:sticky;z-index:45;top:0;display:grid;grid-template-columns:auto minmax(280px,560px) auto;align-items:center;gap:22px;padding:14px clamp(18px,4vw,56px);border-bottom:1px solid var(--border);background:rgba(240,243,252,.84);box-shadow:none;backdrop-filter:blur(22px)}[data-theme="dark"] .home-header{background:rgba(14,21,48,.86)}.home-topbar{display:contents}.home-brand-logo{width:43px;height:43px;padding:5px;border-radius:13px;background:#fff;filter:none;box-shadow:var(--s1)}.home-search-bar{grid-column:2;grid-row:1;height:50px;margin:0;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:none}.home-search-bar:focus-within{border-color:var(--info);box-shadow:0 0 0 4px rgba(85,201,243,.1)}.home-topbar-actions{grid-column:3;gap:6px}.icon-btn,.language-switch{border:1px solid var(--border);background:var(--surface)}.scan-btn{color:#fff!important;background:var(--text)!important}.language-option--active{color:#fff;background:var(--text)}
.discovery-hero{display:grid;grid-template-columns:1.02fr .98fr;max-width:1320px;min-height:510px;margin:28px auto 18px;padding:clamp(35px,5vw,72px);border-radius:34px;color:#fff;background:var(--text);box-shadow:0 30px 80px rgba(16,22,47,.18);overflow:hidden}.discovery-hero:before{background:radial-gradient(circle at 88% 0,rgba(85,201,243,.38),transparent 31%),radial-gradient(circle at 4% 100%,rgba(255,109,98,.36),transparent 35%)}.discovery-copy{z-index:3;align-self:center;max-width:650px}.hero-kicker{color:rgba(255,255,255,.65)}.hero-live-dot{background:var(--brand);box-shadow:0 0 0 5px rgba(255,109,98,.14)}.discovery-copy h1{max-width:650px;margin:18px 0;font-size:clamp(3.4rem,6vw,6.7rem);line-height:.84;letter-spacing:-.075em}.discovery-copy p{max-width:520px;color:rgba(255,255,255,.58);font-size:1rem;line-height:1.65}.hero-action{border-radius:14px}.hero-action--primary{color:var(--text);background:var(--amber)}.hero-action--glass{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07)}.hero-visual{min-height:360px}.hero-market-card{width:min(340px,90%);border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(255,255,255,.07);box-shadow:0 30px 65px rgba(0,0,0,.24);backdrop-filter:blur(18px);transform:rotate(2deg)}.hero-market-label{color:var(--info)}.hero-market-pin{color:var(--text);background:var(--amber)}.hero-market-icon--orange{background:#ffada8}.hero-market-icon--green{background:#b8f1d0}.hero-market-icon--gold{background:#ffe191}.hero-avatar-stack i{border-color:var(--text);color:var(--text);background:#fff}.hero-float-chip{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.08)}.hero-float-chip strong{color:var(--amber)}.trust-strip{grid-column:1/-1;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.map-container{max-width:1320px;height:360px;margin:0 auto 18px;border:8px solid var(--surface);border-radius:28px;box-shadow:var(--s2);overflow:hidden}.map-recenter-btn{right:17px;bottom:17px;width:48px;height:48px;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--surface);box-shadow:var(--s2)}.leaflet-control-zoom a{color:var(--text)!important;background:var(--surface)!important}
.shops-panel{max-width:1320px;margin:auto;padding:25px 0 40px}.shops-panel-head{margin:0 4px 22px}.shops-panel-title{font-size:clamp(1.5rem,2.5vw,2.3rem);letter-spacing:-.04em}.shops-count{border:1px solid var(--border);color:var(--muted);background:var(--surface)}.shops-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.shop-card{position:relative;display:grid;grid-template-columns:72px 1fr auto;min-height:118px;padding:18px;border:1px solid var(--border);border-radius:21px;background:var(--surface);box-shadow:var(--s1);backdrop-filter:none}.shop-card:before{top:auto;right:18px;bottom:14px;left:18px;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--brand),var(--amber),var(--info));opacity:0}.shop-card:hover{border-color:rgba(255,109,98,.35);box-shadow:var(--s3);transform:translateY(-7px)}.shop-card-logo{width:66px;height:66px;border:1px solid var(--border);border-radius:17px;color:#fff;background:var(--text);box-shadow:none}.shop-card:hover .shop-card-logo{box-shadow:none;transform:rotate(-2deg) scale(1.04)}.shop-card-name{font-size:1rem}.shop-type-badge{color:var(--brand-d);background:var(--brand-dim)}.shop-dist{color:var(--muted)}

/* Storefront and product discovery */
.shop-hero{min-height:330px;border-radius:0 0 38px 38px;background:var(--text);box-shadow:0 24px 60px rgba(16,22,47,.2)}.shop-hero:before{background:radial-gradient(circle at 70% 20%,rgba(85,201,243,.35),transparent 32%),radial-gradient(circle at 15% 90%,rgba(255,109,98,.32),transparent 36%),radial-gradient(rgba(255,255,255,.13) .7px,transparent .7px);background-size:auto,auto,18px 18px}.shop-logo-hero{width:90px;height:90px;border:7px solid rgba(255,255,255,.13);border-radius:24px;color:var(--text);background:#fff}.shop-hero-name{font-size:clamp(2.6rem,6vw,5.3rem);letter-spacing:-.07em}.shop-hero-address{color:rgba(255,255,255,.6)}.shop-hero-back-btn,.shop-hero-cart-btn{top:20px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08)}.shop-tabs{position:sticky;z-index:30;top:0;max-width:1100px;margin:18px auto;padding:6px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2);box-shadow:var(--s2);backdrop-filter:blur(20px)}.shop-tab{border-radius:11px;color:var(--muted)}.shop-tab--active{color:#fff;background:var(--text);box-shadow:none}.shop-tab-content{max-width:1200px;margin:auto}.categories-bar{padding:10px 4px}.cat-chip{border:1px solid var(--border);color:var(--muted);background:var(--surface)}.cat-chip--active{border-color:var(--brand);color:#fff;background:var(--brand)}.products-toolbar{padding:12px 4px}.product-search-wrap,.sort-select{border-color:var(--border);background:var(--surface)}.products-grid,.services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:10px 4px 40px}.product-card,.service-card{border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--s1);backdrop-filter:none}.product-card:hover,.service-card:hover{border-color:rgba(255,109,98,.4);box-shadow:var(--s3);transform:translateY(-8px)}.product-img{aspect-ratio:1/.8;border-radius:18px 18px 0 0;background:var(--surface-3)}.product-body{padding:16px}.product-name{font-size:.93rem}.product-price,.service-price{color:var(--text)!important;font-size:1.05rem}.product-cat{color:var(--muted)}.product-add-btn,.service-book-btn{border:0;border-radius:11px;color:#fff!important;background:var(--text)!important;box-shadow:none!important}.product-add-btn:hover,.service-book-btn:hover{background:var(--brand)!important}.product-qty-ctrl{border-radius:11px;background:var(--surface-3)}.qty-btn{color:var(--brand)}.cart-fab{right:max(22px,calc((100vw - 1380px)/2));bottom:105px;color:#fff;background:var(--brand);box-shadow:var(--s-brand)}

/* Account, navigation and transactional surfaces */
.simple-header{position:sticky;z-index:20;top:0;min-height:76px;padding:14px clamp(18px,4vw,56px);border-bottom:1px solid var(--border);background:var(--glass);backdrop-filter:blur(20px)}.simple-header h1{font-size:1.25rem}.profile-body{max-width:900px;margin:auto;padding:28px 18px}.profile-card,.reviews-summary-card,.review-form-card,.contact-card,.contact-info-card{border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--s2);backdrop-filter:none}.profile-avatar{color:#fff;background:linear-gradient(145deg,var(--brand),#7b6fea);box-shadow:var(--s-brand)}.profile-tabs{border:1px solid var(--border);border-radius:16px;background:var(--surface)}.profile-tab--active{color:#fff;background:var(--text)}
.bottom-nav{left:50%;bottom:16px;width:min(560px,calc(100% - 28px));height:68px;padding:7px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 18px 50px rgba(16,22,47,.2);backdrop-filter:blur(22px);transform:translateX(-50%)}[data-theme="dark"] .bottom-nav{border-color:var(--border);background:rgba(21,29,60,.9)}.nav-item{border-radius:15px;color:var(--muted)}.nav-item--active{color:#fff;background:var(--text)}.nav-scan-btn{width:52px;height:52px;border:5px solid var(--surface);color:var(--text);background:var(--amber);box-shadow:0 10px 24px rgba(16,22,47,.18)}
.cart-overlay,.modal-overlay{background:rgba(8,13,31,.58);backdrop-filter:blur(8px)}.cart-drawer{width:min(470px,100%);border-left:1px solid var(--border);background:var(--surface);box-shadow:-30px 0 80px rgba(16,22,47,.22);backdrop-filter:none}.drawer-header,.cart-footer,.modal-header{border-color:var(--border);background:var(--surface)}.cart-item{border:1px solid var(--border);border-radius:16px;background:var(--surface-3)}.cart-total-row strong{color:var(--text)}.modal{border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--s4)}.scanner-overlay{background:var(--text)}.scan-frame{border-color:var(--info)}.scan-line{background:linear-gradient(90deg,transparent,var(--brand),transparent)}.top-notice{left:50%;width:min(520px,calc(100% - 30px));border-radius:14px;transform:translateX(-50%)}

@media(max-width:1050px){.app-shell{width:100%;box-shadow:none}.home-header{grid-template-columns:auto 1fr}.home-search-bar{grid-column:1/-1;grid-row:2}.home-topbar-actions{grid-column:2}.discovery-hero{margin:18px;grid-template-columns:1fr}.hero-visual{min-height:310px}.shops-panel{padding-inline:18px}.shops-list{grid-template-columns:repeat(2,1fr)}.products-grid,.services-grid{grid-template-columns:repeat(3,1fr);padding-inline:14px}.shop-tabs,.shop-tab-content{margin-inline:14px}.auth-view{grid-template-columns:1fr}.auth-hero{display:none}.auth-panel{min-height:100vh}.auth-back-btn{color:var(--text);border-color:var(--border);background:var(--surface)}}
@media(max-width:680px){.home-header{gap:10px;padding:11px 12px}.home-brand-logo{width:39px;height:39px}.language-switch,#trackBtn{display:none}.icon-btn{width:40px;height:40px}.discovery-hero{display:block;min-height:auto;margin:10px;padding:32px 22px;border-radius:25px}.discovery-copy h1{font-size:3.75rem}.discovery-actions{align-items:stretch;flex-direction:column}.hero-action{justify-content:center}.hero-visual{min-height:300px;margin-top:20px}.hero-market-card{width:270px}.trust-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}.map-container{height:270px;margin:10px;border-width:5px;border-radius:22px}.shops-panel{padding:20px 10px}.shops-list{grid-template-columns:1fr}.shop-card{grid-template-columns:64px 1fr auto}.shop-card-logo{width:58px;height:58px}.shop-hero{min-height:290px;border-radius:0 0 28px 28px}.shop-hero-name{font-size:3rem}.shop-tabs{overflow-x:auto;justify-content:flex-start}.shop-tab{flex:0 0 auto;padding-inline:14px}.products-grid,.services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:8px 9px 30px}.product-card{border-radius:17px}.product-img{border-radius:15px 15px 0 0}.product-body{padding:11px}.product-name{font-size:.8rem}.product-price{font-size:.88rem}.product-add-btn{font-size:.68rem}.bottom-nav{bottom:8px;width:calc(100% - 16px)}.auth-panel{padding:70px 14px 20px}.auth-card{padding:22px;border-radius:22px}.modal{align-self:end;width:100%;max-height:92vh;border-radius:26px 26px 0 0}.profile-body{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.boot-logo-wrap{animation:none}.product-card,.shop-card,.service-card{transition:none}}

/* ═══════════════════════════════════════════════════════════════
   TOKENS — Dark mode overrides
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0F0600;
  --bg-2:        #1A0B00;
  --surface:     rgba(26,10,2,.92);
  --surface-2:   rgba(34,14,4,.82);
  --surface-3:   rgba(44,18,6,.78);
  --glass:       rgba(20,8,0,.68);
  --glass-2:     rgba(15,6,0,.50);
  --border:      rgba(255,136,0,.22);
  --border-soft: rgba(255,136,0,.10);
  --line:        rgba(255,255,255,.06);

  --text:   #FFF2E4;
  --text-2: #D4944A;
  --muted:  #8A5A2A;
  --muted-2:#3A1E06;

  --s1: 0 2px 8px rgba(0,0,0,.55);
  --s2: 0 4px 16px rgba(0,0,0,.60), 0 1px 4px rgba(0,0,0,.35);
  --s3: 0 8px 32px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35);
  --s4: 0 16px 56px rgba(0,0,0,.70), 0 4px 16px rgba(0,0,0,.40);
  --s-3d: 0 24px 64px rgba(0,0,0,.70), 0 8px 24px rgba(0,0,0,.40);
}

html, body { height:100%; overflow:hidden; }
body {
  font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
  perspective:var(--persp);
  transition:background .35s var(--ease), color .35s var(--ease);
}

.hidden { display:none !important; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }
.scroll-y { overflow-y:auto; -webkit-overflow-scrolling:touch; }


/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════════ */
@keyframes shimmer        { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes spin           { to{transform:rotate(360deg)} }
@keyframes orbit-cw       { to{transform:rotate( 360deg)} }
@keyframes orbit-ccw      { to{transform:rotate(-360deg)} }
@keyframes aurora-a       { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(70px,50px) scale(1.22)} }
@keyframes aurora-b       { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-55px,-35px) scale(1.18)} }
@keyframes aurora-c       { 0%{transform:scale(1) rotate(0deg)} 100%{transform:scale(1.3) rotate(20deg)} }
@keyframes orb-drift-a    { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(90px,60px) scale(1.25)} }
@keyframes orb-drift-b    { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-65px,-45px) scale(1.20)} }
@keyframes orb-drift-c    { 0%{transform:translate(0,0) scale(1) rotate(0deg)} 100%{transform:translate(-40px,55px) scale(1.15) rotate(20deg)} }
@keyframes pulse-expand   { 0%{transform:scale(.38);opacity:.9} 100%{transform:scale(3.5);opacity:0} }
@keyframes logo-breathe   {
  0%,100%{transform:scale(1);   box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 70px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.22)}
  50%    {transform:scale(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 90px var(--brand-glow),0 0 100px rgba(255,136,0,.20),inset 0 1px 0 rgba(255,255,255,.30)}
}
@keyframes char-in        { from{opacity:0;transform:translateY(22px) rotateX(55deg);filter:blur(8px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes tag-slide      { from{opacity:0;transform:translateY(10px);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes progress-fill  { 0%{width:0%;opacity:0} 4%{opacity:1} 80%{width:82%} 100%{width:89%} }
@keyframes grid-pan       { from{background-position:0 0} to{background-position:44px 44px} }
@keyframes card-in        { from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:none} }
@keyframes card-rise      { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }
@keyframes view-in        { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes slide-down     { from{transform:translateY(-100%);opacity:0} to{transform:none;opacity:1} }
@keyframes fade-in        { from{opacity:0} to{opacity:1} }
@keyframes slide-from-right{ from{transform:translateX(100%)} to{transform:none} }
@keyframes modal-up       { from{transform:translateY(100%);opacity:0} to{transform:none;opacity:1} }
@keyframes badge-pop      { from{transform:scale(0)} to{transform:scale(1)} }
@keyframes success-pop    { from{transform:scale(0) rotate(-15deg);opacity:0} to{transform:none;opacity:1} }
@keyframes tab-fade-in    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes ripple-out     { to{transform:scale(4);opacity:0} }
@keyframes scan-sweep     { 0%{top:4px} 50%{top:calc(100% - 6px)} 100%{top:4px} }
@keyframes hero-shimmer   { 0%{opacity:0;transform:translateX(-100%)} 50%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }

/* Nunu 2026 brand refresh: glass spectrum */
:root{
  --brand:#1E88FF;
  --brand-d:#126ED0;
  --brand-l:#54A7FF;
  --brand-ll:#B9DDFF;
  --brand-dim:rgba(30,136,255,.13);
  --brand-dim2:rgba(30,136,255,.07);
  --brand-glow:rgba(30,136,255,.44);
  --brand-glow2:rgba(30,136,255,.22);
  --green:#62D84E;
  --green-d:#43B833;
  --green-dim:rgba(98,216,78,.14);
  --green-glow:rgba(98,216,78,.4);
  --amber:#FFD54A;
  --amber-dim:rgba(255,213,74,.16);
  --amber-glow:rgba(255,213,74,.38);
  --orange:#FF8A1F;
  --orange-dim:rgba(255,138,31,.14);
  --bg:#071426;
  --bg-2:#0d213a;
  --surface:rgba(255,255,255,.9);
  --surface-2:rgba(255,255,255,.72);
  --surface-3:rgba(255,255,255,.52);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.36);
  --border:rgba(30,136,255,.22);
  --border-soft:rgba(255,255,255,.14);
  --text:#071426;
  --text-2:#16365c;
  --muted:#60758d;
  --muted-2:#8ca0b6;
  --s-brand:0 12px 34px var(--brand-glow);
  --s-green:0 10px 26px var(--green-glow);
  --s-amber:0 10px 28px var(--amber-glow);
}

[data-theme="dark"]{
  --bg:#030b16;
  --bg-2:#071426;
  --surface:rgba(9,24,43,.9);
  --surface-2:rgba(10,31,55,.78);
  --surface-3:rgba(13,43,72,.7);
  --glass:rgba(9,24,43,.68);
  --glass-2:rgba(9,24,43,.42);
  --border:rgba(84,167,255,.24);
  --border-soft:rgba(255,255,255,.09);
  --text:#f7fbff;
  --text-2:#d7eaff;
  --muted:#91abc8;
  --muted-2:#5f7894;
}

body{
  background:
    radial-gradient(circle at 12% 0,rgba(30,136,255,.2),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(255,213,74,.16),transparent 28%),
    radial-gradient(circle at 72% 84%,rgba(98,216,78,.15),transparent 32%),
    var(--bg);
}

.app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.08),transparent 34%,rgba(255,255,255,.05)),
    radial-gradient(circle at 50% -20%,rgba(30,136,255,.18),transparent 44%);
}

.home-hero,
.auth-card,
.drawer,
.modal-card,
.shop-card,
.product-card,
.service-card,
.profile-card,
.cart-drawer,
.orders-panel,
.map-panel,
.search-panel{
  border-color:var(--border-soft);
  background:linear-gradient(145deg,var(--surface-2),var(--glass-2));
  backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 22px 70px rgba(3,11,22,.18),inset 0 1px 0 rgba(255,255,255,.22);
}

.btn--primary,
.product-add-btn,
.service-book-btn,
.scan-btn:hover{
  color:#061426 !important;
  background:linear-gradient(135deg,var(--amber),#FF8A1F 52%,var(--green)) !important;
  box-shadow:0 14px 34px rgba(255,138,31,.22),0 0 34px rgba(98,216,78,.12) !important;
}

.product-price,
.service-price,
.cart-item-price,
.order-total-price{
  color:var(--brand) !important;
}

.hero-market-icon--orange{background:var(--orange);color:#061426}
.hero-market-icon--green{background:var(--green);color:#061426}
.top-notice.success{background:linear-gradient(90deg,var(--green),#9AF08C);color:#061426}


/* ─── Utilities ── */
.shimmer {
  background:linear-gradient(90deg,rgba(255,136,0,.04) 25%,rgba(255,136,0,.12) 50%,rgba(255,136,0,.04) 75%);
  background-size:200% 100%; animation:shimmer 1.8s ease-in-out infinite;
}
[data-theme="dark"] .shimmer {
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
}
.spinner {
  width:32px; height:32px; border-radius:50%; margin:0 auto 12px;
  border:3px solid var(--brand-dim); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
.ripple-dot {
  position:absolute; border-radius:50%;
  background:rgba(255,136,0,.20);
  transform:scale(0); pointer-events:none;
  animation:ripple-out .55s var(--ease);
}


/* ═══════════════════════════════════════════════════════════════
   BOOT LOADER — warm brand cinematic · interactive · v2
═══════════════════════════════════════════════════════════════ */
.boot-loader {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 90% 90% at 50% 42%, #2a0e00 0%, #160700 55%, #080200 100%);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  overflow:hidden; gap:0;
}
.boot-loader.fading { opacity:0; transform:scale(1.07); pointer-events:none; }

.boot-canvas { position:absolute; inset:0; z-index:0; }

.boot-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,136,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,136,0,.05) 1px,transparent 1px);
  background-size:44px 44px;
  animation:grid-pan 5s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,transparent 28%,black 100%);
  mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,transparent 28%,black 100%);
}

.boot-aurora { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.boot-aurora-blob {
  position:absolute; border-radius:50%; filter:blur(100px);
  will-change:transform; transition:transform .55s var(--ease);
}
.boot-aurora-blob--1 { width:720px;height:720px;opacity:.22;background:radial-gradient(circle,#FF8800 0%,transparent 65%);top:-200px;left:-200px;animation:orb-drift-a 18s ease-in-out infinite alternate; }
.boot-aurora-blob--2 { width:620px;height:620px;opacity:.14;background:radial-gradient(circle,#FFAA00 0%,transparent 65%);bottom:-160px;right:-160px;animation:orb-drift-b 24s ease-in-out infinite alternate; }
.boot-aurora-blob--3 { width:520px;height:520px;opacity:.10;background:radial-gradient(circle,#FF4500 0%,transparent 65%);top:38%;left:52%;animation:orb-drift-c 15s ease-in-out infinite alternate; }
.boot-aurora-blob--4 { width:420px;height:420px;opacity:.09;background:radial-gradient(circle,#22C55E 0%,transparent 65%);bottom:8%;left:-60px;animation:aurora-a 20s ease-in-out infinite alternate; }

.boot-visual { position:relative; z-index:4; flex-shrink:0; width:300px; height:300px; }
@media(max-width:360px){ .boot-visual{width:260px;height:260px} }

.boot-rings { position:absolute; inset:0; }
.boot-ring { position:absolute; border-radius:50%; top:50%; left:50%; }
.boot-ring::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,200,100,.06); }

.boot-ring--outer { width:296px;height:296px;margin-left:-148px;margin-top:-148px;animation:orbit-ccw 11s linear infinite; }
.boot-ring--mid   { width:202px;height:202px;margin-left:-101px;margin-top:-101px;animation:orbit-cw  6.8s linear infinite; }
.boot-ring--inner { width:126px;height:126px;margin-left:-63px; margin-top:-63px; animation:orbit-ccw 3.6s linear infinite; }

.boot-rdot { display:block; border-radius:50%; position:absolute; top:50%; left:50%; transform-origin:0 0; }

/* Outer ring: orange→gold→green comet trail */
.boot-rdot--o1  {width:9px;height:9px;background:#FF8800;box-shadow:0 0 10px #FF8800;transform:rotate(0deg)   translateX(141px) translateY(-4.5px);opacity:.95}
.boot-rdot--o2  {width:9px;height:9px;background:#FF9A1A;box-shadow:0 0 9px  #FF9A1A;transform:rotate(30deg)  translateX(141px) translateY(-4.5px);opacity:.88}
.boot-rdot--o3  {width:8px;height:8px;background:#FFAA33;box-shadow:0 0 8px  #FFAA33;transform:rotate(60deg)  translateX(141px) translateY(-4px);  opacity:.78}
.boot-rdot--o4  {width:8px;height:8px;background:#FFCC44;box-shadow:0 0 9px  #FFCC44;transform:rotate(90deg)  translateX(141px) translateY(-4px);  opacity:.68}
.boot-rdot--o5  {width:7px;height:7px;background:#FFD95A;box-shadow:0 0 7px  #FFD95A;transform:rotate(120deg) translateX(141px) translateY(-3.5px);opacity:.56}
.boot-rdot--o6  {width:8px;height:8px;background:#22C55E;box-shadow:0 0 9px  #22C55E;transform:rotate(150deg) translateX(141px) translateY(-4px);  opacity:.46}
.boot-rdot--o7  {width:8px;height:8px;background:#16A34A;box-shadow:0 0 10px #16A34A;transform:rotate(180deg) translateX(141px) translateY(-4px);  opacity:.38}
.boot-rdot--o8  {width:7px;height:7px;background:#FF6B35;box-shadow:0 0 7px  #FF6B35;transform:rotate(210deg) translateX(141px) translateY(-3.5px);opacity:.28}
.boot-rdot--o9  {width:7px;height:7px;background:#FF4500;box-shadow:0 0 9px  #FF4500;transform:rotate(240deg) translateX(141px) translateY(-3.5px);opacity:.20}
.boot-rdot--o10 {width:6px;height:6px;background:#F59E0B;box-shadow:0 0 6px  #F59E0B;transform:rotate(270deg) translateX(141px) translateY(-3px);  opacity:.14}
.boot-rdot--o11 {width:6px;height:6px;background:#FF8800;box-shadow:0 0 5px  #FF8800;transform:rotate(300deg) translateX(141px) translateY(-3px);  opacity:.08}
.boot-rdot--o12 {width:5px;height:5px;background:#FF8800;box-shadow:0 0 4px  #FF8800;transform:rotate(330deg) translateX(141px) translateY(-2.5px);opacity:.03}

/* Mid ring: vivid orange + green accents */
.boot-rdot--m1 {width:11px;height:11px;background:#FF8800;box-shadow:0 0 13px #FF8800;transform:rotate(0deg)   translateX(96px) translateY(-5.5px);opacity:.92}
.boot-rdot--m2 {width:9px; height:9px; background:#22C55E;box-shadow:0 0 11px #22C55E;transform:rotate(60deg)  translateX(96px) translateY(-4.5px);opacity:.75}
.boot-rdot--m3 {width:11px;height:11px;background:#F59E0B;box-shadow:0 0 13px #F59E0B;transform:rotate(120deg) translateX(96px) translateY(-5.5px);opacity:.60}
.boot-rdot--m4 {width:9px; height:9px; background:#FF4500;box-shadow:0 0 11px #FF4500;transform:rotate(180deg) translateX(96px) translateY(-4.5px);opacity:.46}
.boot-rdot--m5 {width:8px; height:8px; background:#FFCC44;box-shadow:0 0 9px  #FFCC44;transform:rotate(240deg) translateX(96px) translateY(-4px);  opacity:.30}
.boot-rdot--m6 {width:7px; height:7px; background:#FF8800;box-shadow:0 0 8px  #FF8800;transform:rotate(300deg) translateX(96px) translateY(-3.5px);opacity:.14}

/* Inner ring: white sparks + orange */
.boot-rdot--i1 {width:6px;height:6px;background:#fff;    box-shadow:0 0 10px rgba(255,255,255,.9);transform:rotate(0deg)   translateX(57px) translateY(-3px);  opacity:.95}
.boot-rdot--i2 {width:5px;height:5px;background:#FF8800; box-shadow:0 0 9px  #FF8800;             transform:rotate(90deg)  translateX(57px) translateY(-2.5px);opacity:.75}
.boot-rdot--i3 {width:5px;height:5px;background:#fff;    box-shadow:0 0 8px  rgba(255,255,255,.7);transform:rotate(180deg) translateX(57px) translateY(-2.5px);opacity:.50}
.boot-rdot--i4 {width:4px;height:4px;background:#22C55E; box-shadow:0 0 7px  #22C55E;             transform:rotate(270deg) translateX(57px) translateY(-2px);  opacity:.28}

.boot-center {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:5; display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--ease);
}
.boot-pulse-ring {
  position:absolute; border-radius:50%; pointer-events:none;
  width:152px; height:152px;
  border:1.5px solid rgba(255,136,0,.58);
  animation:pulse-expand 2.6s ease-out infinite;
}
.boot-pulse-ring--1 { animation-delay:0s; }
.boot-pulse-ring--2 { animation-delay:.87s;  border-color:rgba(34,197,94,.45); }
.boot-pulse-ring--3 { animation-delay:1.74s; border-color:rgba(245,158,11,.38); }
.boot-pulse-ring--tap {
  animation:pulse-expand .75s ease-out forwards !important;
  animation-delay:0s !important;
  border-color:rgba(255,255,255,.75);
}

.boot-logo-wrap {
  position:relative; z-index:1; cursor:pointer;
  width:140px; height:140px; border-radius:36px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(24px);
  animation:logo-breathe 3.6s ease-in-out infinite;
  user-select:none;
}
.boot-logo-wrap:active { transform:scale(.94) !important; transition:transform .1s; }
.boot-logo-img { width:96px; height:96px; object-fit:contain; pointer-events:none; }

.boot-text { position:relative; z-index:4; text-align:center; margin-top:28px; flex-shrink:0; }
.boot-name {
  font-size:3rem; font-weight:700; color:#fff; letter-spacing:-.5px;
  display:inline-block; line-height:1;
  text-shadow:0 0 40px var(--brand-glow),0 0 80px rgba(255,136,0,.25);
}
.boot-char { display:inline-block; animation:char-in .55s var(--spring) calc(.28s + var(--i) * .09s) both; }
.boot-tag  { font-size:.88rem; color:rgba(255,200,100,.55); letter-spacing:.9px; margin-top:8px; animation:tag-slide .65s var(--ease) .75s both; }

.boot-progress { position:relative; z-index:4; margin-top:38px; width:180px; flex-shrink:0; }
.boot-progress-track { height:2px; background:rgba(255,255,255,.08); border-radius:var(--rf); overflow:hidden; }
.boot-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-l),var(--green));
  border-radius:var(--rf);
  box-shadow:0 0 10px var(--brand-glow),0 0 20px rgba(255,136,0,.3);
  animation:progress-fill 2.1s ease-out forwards;
  transition:width .45s var(--ease);
}

/* Logo reuse sizes */
.auth-brand-logo { width:36px;height:36px;object-fit:contain; }
.home-brand-logo  { width:32px;height:32px;object-fit:contain; }
.bnav-logo        { width:26px;height:26px;object-fit:contain; }
.scanner-logo     { width:26px;height:26px;object-fit:contain; }
.drawer-logo      { width:26px;height:26px;object-fit:contain; }
.success-logo     { width:56px;height:56px;object-fit:contain; margin-bottom:6px; }


/* ═══════════════════════════════════════════════════════════════
   AMBIENT AURORA (in-app, warm orange tinted)
═══════════════════════════════════════════════════════════════ */
.ambient-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.amb-orb { position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.amb-orb--1 { width:680px;height:680px;background:var(--brand);  opacity:.035;top:-15%;left:-20%;animation:orb-drift-a 22s ease-in-out infinite alternate; }
.amb-orb--2 { width:560px;height:560px;background:var(--green); opacity:.030;bottom:0;right:-15%;animation:orb-drift-b 28s ease-in-out infinite alternate; }
.amb-orb--3 { width:440px;height:440px;background:var(--amber); opacity:.025;top:38%;left:48%;animation:orb-drift-c 20s ease-in-out infinite alternate; }

[data-theme="dark"] .amb-orb--1 { opacity:.055; }
[data-theme="dark"] .amb-orb--2 { opacity:.045; }
[data-theme="dark"] .amb-orb--3 { opacity:.040; }


/* ═══════════════════════════════════════════════════════════════
   AUTH VIEW
═══════════════════════════════════════════════════════════════ */
.auth-view { position:fixed; inset:0; display:flex; flex-direction:column; overflow-y:auto; z-index:100; }
@media(min-width:768px){ .auth-view{ flex-direction:row } }

.auth-hero {
  position:relative;
  background:linear-gradient(155deg, #FF8800 0%, #CC5500 45%, #0F0600 100%);
  padding:56px 32px 44px; min-height:300px; overflow:hidden;
}
@media(min-width:768px){ .auth-hero{ flex:1; min-height:100vh; padding:80px 60px } }
.auth-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 70% at 80% 20%,rgba(255,200,80,.18) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 10% 90%,rgba(34,197,94,.10) 0%,transparent 70%);
}
.auth-hero-bg {
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:28px 28px;
}
.auth-hero-body { position:relative; z-index:1; }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:40px; }
.auth-brand span { font-size:1.7rem; font-weight:700; color:#fff; text-shadow:0 1px 16px rgba(255,80,0,.5); }
.auth-hero-title { font-size:3rem; font-weight:700; color:#fff; line-height:1.1; margin-bottom:16px; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.auth-hero-sub   { font-size:1rem; color:rgba(255,255,255,.72); margin-bottom:36px; max-width:360px; line-height:1.6; }
.auth-features   { display:flex; flex-direction:column; gap:10px; }
.auth-feat {
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.90); font-size:.9rem;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r2); padding:11px 16px; backdrop-filter:blur(8px);
  transition:all var(--base) var(--ease);
}
.auth-feat:hover { background:rgba(255,255,255,.18); transform:translateX(4px); }
.auth-feat-icon { font-size:1.2rem; flex-shrink:0; }

.auth-panel {
  background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:36px 20px;
}
@media(min-width:768px){ .auth-panel{ flex:0 0 440px; min-height:100vh; padding:80px 48px } }

.auth-card {
  width:100%; max-width:400px;
  background:var(--surface); border-radius:var(--r5); padding:32px 28px;
  border:1px solid var(--border-soft);
  box-shadow:var(--s4),0 0 0 1px var(--brand-dim);
  animation:card-rise .6s var(--spring) both;
}

.auth-tabs {
  display:flex; background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r3); padding:4px; margin-bottom:28px; gap:4px;
}
.auth-tab {
  flex:1; padding:10px 0; border-radius:var(--r2);
  font-size:.9rem; font-weight:700; color:var(--muted);
  transition:all var(--base) var(--spring);
}
.auth-tab--active {
  background:var(--brand); color:#fff;
  box-shadow:var(--s-brand); transform:scale(1.02);
}

.auth-form { display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.field-wrap  { position:relative; }
.field-input {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--border); border-radius:var(--r2);
  font-size:.95rem; background:var(--bg); color:var(--text);
  transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),background var(--base) var(--ease);
  outline:none;
}
.field-input::placeholder { color:var(--muted); }
.field-input:focus { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--brand-dim); }
.field-wrap .field-input { padding-right:46px; }
.field-eye { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); transition:color var(--fast); }
.field-eye:hover { color:var(--brand); }
.field-textarea { resize:vertical; min-height:80px; }
.required { color:var(--red); }

.auth-notice {
  padding:12px 14px; border-radius:var(--r2); font-size:.85rem; font-weight:500;
  background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,.22);
}
.auth-notice.success { background:var(--green-dim); color:var(--green-d); border-color:rgba(34,197,94,.25); }

.auth-back-btn {
  position:absolute; top:18px; left:18px; z-index:10;
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--rf); padding:7px 16px 7px 10px; font-size:.82rem; font-weight:600;
  backdrop-filter:blur(12px); transition:all var(--base) var(--spring);
}
.auth-back-btn:hover { background:rgba(255,255,255,.24); transform:translateX(-2px); }

.auth-guest { text-align:center; margin-top:14px; font-size:.85rem; color:var(--muted); }
.link-btn { color:var(--brand); font-weight:700; cursor:pointer; background:none; border:none; font:inherit; transition:opacity var(--fast); }
.link-btn:hover { opacity:.72; }


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:var(--r3);
  font-size:.96rem; font-weight:700; letter-spacing:.01em;
  transition:all var(--base) var(--spring); cursor:pointer; border:none;
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(.96) translateY(1px); }

.btn--primary {
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-d) 100%);
  color:#fff; box-shadow:var(--s-brand),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover { filter:brightness(1.10); transform:translateY(-2px); box-shadow:0 14px 36px var(--brand-glow); }
.btn--primary:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }
.btn--outline { background:var(--brand-dim); border:1.5px solid var(--border); color:var(--text-2); }
.btn--outline:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-dim2); }
.btn--full    { width:100%; }
.btn--sm      { padding:9px 16px; font-size:.84rem; border-radius:var(--r2); }
.btn--danger  { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,.25); }
.btn--danger:hover { background:var(--red); color:#fff; }

.icon-btn {
  width:40px; height:40px; border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
}
.icon-btn:hover { background:var(--brand-dim); color:var(--brand); transform:scale(1.1); }
.icon-btn--light { color:rgba(255,255,255,.88); }
.icon-btn--light:hover { background:rgba(255,255,255,.18); color:#fff; transform:scale(1.1); }
.scan-btn { background:rgba(34,197,94,.12); color:var(--green) !important; border-radius:var(--r2); }
.scan-btn:hover { background:var(--green); color:#fff !important; }

.theme-toggle-btn { color:var(--muted); }
.theme-toggle-btn:hover { background:var(--brand-dim); color:var(--brand); transform:scale(1.1) rotate(15deg); }

.language-switch {
  display:flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--border); border-radius:var(--rf);
  background:var(--brand-dim2);
}
.language-option {
  min-width:34px; height:30px; padding:0 8px; border-radius:var(--rf);
  color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.05em;
  transition:all var(--base) var(--spring);
}
.language-option:hover { color:var(--brand); }
.language-option--active {
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-d));
  box-shadow:0 4px 12px var(--brand-glow2);
}


/* ═══════════════════════════════════════════════════════════════
   APP SHELL + VIEWS
═══════════════════════════════════════════════════════════════ */
.app-shell { position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); transition:background .35s var(--ease); }
.view { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--nav-h); scroll-behavior:smooth; }
.view:not(.hidden) { animation:view-in .3s var(--spring) both; }

/* Top notice */
.top-notice {
  padding:11px 20px; font-size:.85rem; font-weight:600; text-align:center; position:relative; z-index:50;
  background:linear-gradient(90deg,var(--brand),var(--brand-l)); color:#fff;
  animation:slide-down .35s var(--spring);
}
.top-notice.danger  { background:linear-gradient(90deg,#EF4444,#F87171); }
.top-notice.info    { background:linear-gradient(90deg,#3B82F6,#60A5FA); }
.top-notice.warning { background:linear-gradient(90deg,var(--amber),var(--brand-ll)); color:#1a0800; }
.top-notice.success { background:linear-gradient(90deg,var(--green),#4ADE80); color:#052010; }


/* ═══════════════════════════════════════════════════════════════
   HOME HEADER — redesigned compact topbar
═══════════════════════════════════════════════════════════════ */
.home-header {
  position:sticky; top:0; z-index:20;
  padding:10px 14px 12px;
  background:var(--surface-2); backdrop-filter:blur(28px) saturate(1.8);
  -webkit-backdrop-filter:blur(28px) saturate(1.8);
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 2px 20px rgba(160,80,0,.08);
  transition:background .35s var(--ease);
}
.home-topbar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.home-brand { display:flex; align-items:center; gap:0; }
.home-brand-logo { filter:drop-shadow(0 2px 6px var(--brand-glow2)); transition:transform var(--base) var(--spring); }
.home-brand-logo:hover { transform:scale(1.1) rotate(-4deg); }
.home-topbar-actions { display:flex; gap:2px; }

/* Search bar */
.home-search-bar {
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--rf); padding:10px 16px;
  box-shadow:var(--s1),inset 0 1px 0 rgba(255,255,255,.5);
  transition:all var(--base) var(--ease);
}
[data-theme="dark"] .home-search-bar { box-shadow:var(--s1),inset 0 1px 0 rgba(255,255,255,.04); }
.home-search-bar:focus-within {
  border-color:var(--brand); background:var(--surface);
  box-shadow:0 0 0 4px var(--brand-dim),var(--s-brand);
}
.search-icon { flex-shrink:0; color:var(--muted); transition:color var(--fast); }
.home-search-bar:focus-within .search-icon { color:var(--brand); }
.search-input { flex:1; border:none; background:transparent; outline:none; font-size:.92rem; color:var(--text); }
.search-input::placeholder { color:var(--muted); }
.search-clear { color:var(--muted); transition:color var(--fast); font-size:.82rem; }
.search-clear:hover { color:var(--red); }

.discovery-hero {
  position:relative; margin:14px; min-height:340px; padding:36px 36px 82px;
  border-radius:34px; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); align-items:center; gap:30px;
  color:#fff; background:
    radial-gradient(circle at 86% 12%,rgba(255,211,128,.28),transparent 23%),
    radial-gradient(circle at 8% 100%,rgba(34,197,94,.18),transparent 32%),
    linear-gradient(132deg,#1e0b02 0%,#5d2105 44%,#c84c00 78%,#ff850f 100%);
  box-shadow:0 24px 70px rgba(126,48,0,.3),inset 0 1px 0 rgba(255,255,255,.13);
}
.discovery-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.23;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:36px 36px; mask-image:linear-gradient(90deg,#000,transparent 88%);
}
.discovery-hero::after {
  content:""; position:absolute; width:300px; height:300px; right:-120px; top:-140px; z-index:-1;
  border-radius:50%; border:70px solid rgba(255,255,255,.045);
}
.discovery-copy { position:relative; z-index:2; max-width:650px; align-self:center; }
.hero-kicker {
  display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid rgba(255,255,255,.2);
  border-radius:var(--rf); background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.hero-live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#6dde3b; box-shadow:0 0 0 4px rgba(109,222,59,.13),0 0 14px rgba(109,222,59,.8); animation:hero-live 2s ease-in-out infinite; }
@keyframes hero-live { 50%{ opacity:.55; transform:scale(.78) } }
.discovery-copy h1 { max-width:620px; margin:17px 0 12px; font-size:clamp(2rem,4.4vw,3.8rem); line-height:.96; letter-spacing:-.05em; text-wrap:balance; }
.discovery-copy p { max-width:560px; color:rgba(255,255,255,.76); font-size:clamp(.9rem,1.3vw,1.02rem); line-height:1.58; }
.discovery-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }
.hero-action {
  min-height:48px; padding:0 19px; border-radius:var(--rf); display:inline-flex;
  align-items:center; justify-content:center; gap:9px; font-size:.82rem; font-weight:700;
  transition:transform var(--base) var(--spring),box-shadow var(--base) var(--ease),background var(--base);
}
.hero-action:hover { transform:translateY(-3px); }
.hero-action:active { transform:translateY(0) scale(.97); }
.hero-action:focus-visible { outline:3px solid rgba(255,255,255,.72); outline-offset:3px; }
.hero-action--primary { color:#5b2100; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.hero-action--glass { color:#fff; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(12px); }
.hero-action--glass:hover { background:rgba(255,255,255,.18); }
.hero-visual { position:relative; min-height:240px; z-index:2; display:grid; place-items:center; }
.hero-halo { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14); animation:orbit-cw 24s linear infinite; }
.hero-halo--one { width:310px; height:310px; }
.hero-halo--two { width:230px; height:230px; border-style:dashed; animation-direction:reverse; animation-duration:18s; }
.hero-market-card {
  position:relative; width:min(100%,310px); padding:17px; border:1px solid rgba(255,255,255,.2);
  border-radius:24px; background:rgba(24,8,1,.58); backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:0 25px 50px rgba(24,5,0,.34),inset 0 1px 0 rgba(255,255,255,.13);
  transform:rotate(1.5deg); transition:transform .45s var(--spring),box-shadow .35s var(--ease);
}
.discovery-hero:hover .hero-market-card { transform:rotate(0) translateY(-4px); box-shadow:0 32px 65px rgba(24,5,0,.42),inset 0 1px 0 rgba(255,255,255,.16); }
.hero-market-head,.hero-market-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-market-head > div { display:flex; flex-direction:column; gap:2px; }
.hero-market-label { color:#ffc879; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.hero-market-head strong { font-size:.92rem; }
.hero-market-pin { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#7a2b00; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.hero-market-list { display:grid; gap:7px; margin:15px 0; }
.hero-market-list > span { min-height:45px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; padding:7px 9px; border-radius:14px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.06); }
.hero-market-list b { font-size:.76rem; }
.hero-market-list small { color:rgba(255,255,255,.55); font-size:.62rem; }
.hero-market-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; font-size:.58rem; font-style:normal; font-weight:700; }
.hero-market-icon--orange { color:#6a2600; background:#ffb056; }
.hero-market-icon--green { color:#073b1d; background:#76e89d; }
.hero-market-icon--gold { color:#513700; background:#ffdc69; }
.hero-market-footer { padding-top:11px; border-top:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.62); font-size:.61rem; }
.hero-avatar-stack { display:flex; padding-left:6px; }
.hero-avatar-stack i { width:23px; height:23px; margin-left:-6px; display:grid; place-items:center; border-radius:50%; border:2px solid #562005; color:#5b2100; background:#fff1dd; font-size:.55rem; font-style:normal; font-weight:700; }
.hero-float-chip { position:absolute; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.21); border-radius:13px; background:rgba(255,255,255,.14); backdrop-filter:blur(15px); box-shadow:0 12px 28px rgba(0,0,0,.2); font-size:.6rem; }
.hero-float-chip strong { color:#ffd27e; font-size:.78rem; }
.hero-float-chip--rating { top:3px; right:-3px; }
.hero-float-chip--delivery { bottom:5px; left:-7px; }
.trust-strip { position:absolute; left:36px; right:36px; bottom:22px; z-index:3; display:flex; align-items:center; gap:9px; }
.trust-strip > span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:var(--rf); color:rgba(255,255,255,.74); background:rgba(255,255,255,.07); font-size:.66rem; }
.trust-strip svg { color:#ffd08a; flex-shrink:0; }

@media(max-width:820px) {
  .discovery-hero { grid-template-columns:1fr; min-height:0; padding:28px 24px 76px; gap:25px; }
  .discovery-copy { max-width:none; }
  .hero-visual { min-height:225px; }
  .hero-market-card { width:min(100%,350px); }
  .hero-float-chip--rating { right:max(0px,calc(50% - 195px)); }
  .hero-float-chip--delivery { left:max(0px,calc(50% - 195px)); }
}
@media(max-width:520px) {
  .discovery-hero { margin:10px; padding:23px 18px 20px; border-radius:26px; gap:22px; }
  .discovery-copy h1 { margin-top:14px; font-size:clamp(1.85rem,10vw,2.55rem); }
  .discovery-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-action { min-width:0; padding:0 12px; font-size:.76rem; }
  .hero-visual { min-height:207px; }
  .hero-halo--one { width:245px; height:245px; }
  .hero-halo--two { width:190px; height:190px; }
  .hero-market-card { padding:14px; border-radius:20px; transform:none; }
  .hero-float-chip { display:none; }
  .trust-strip { position:relative; left:auto; right:auto; bottom:auto; margin-top:-5px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
  .trust-strip > span { min-height:52px; padding:7px 5px; flex-direction:column; justify-content:center; text-align:center; border-radius:13px; font-size:.58rem; }
}
@media(min-width:980px) {
  #homeView { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); grid-template-rows:auto auto 1fr; column-gap:18px; padding:0 22px var(--nav-h); }
  #homeView.hidden { display:none; }
  #homeView .home-header { grid-column:1/-1; margin:0 -22px; padding-left:28px; padding-right:28px; }
  #homeView .discovery-hero { grid-column:1/-1; margin:22px 0 0; min-height:350px; padding:40px 42px 82px; }
  #homeView .trust-strip { left:42px; right:42px; bottom:24px; }
  #homeView .map-container { grid-column:1; grid-row:3; height:calc(100vh - 500px); min-height:350px; margin-top:18px; border:1px solid var(--border); border-radius:28px; box-shadow:var(--s3); }
  #homeView .shops-panel { grid-column:2; grid-row:3; min-height:0; overflow-y:auto; padding:18px 0 100px; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ─── Map ── */
.map-container { height:260px; position:relative; flex-shrink:0; border-bottom:1px solid var(--border-soft); overflow:hidden; }
@media(min-width:480px){ .map-container{ height:310px } }
@media(min-width:768px){ .map-container{ height:380px } }
#map { height:100%; width:100%; }

[data-theme="dark"] .leaflet-tile-pane { filter:brightness(.68) saturate(.70) contrast(.90); }

.map-container::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:80px; z-index:5; pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
}

.map-recenter-btn {
  position:absolute; bottom:20px; right:14px; z-index:10;
  width:42px; height:42px; border-radius:var(--rf);
  background:var(--surface); backdrop-filter:blur(12px);
  border:1.5px solid var(--border); box-shadow:var(--s3);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
  transition:all var(--base) var(--spring);
}
.map-recenter-btn:hover { transform:scale(1.14); box-shadow:var(--s-brand); background:var(--brand); color:#fff; }
.map-recenter-btn:active { transform:scale(.96); }


/* ─── Shops Panel ── */
.shops-panel { padding:18px 14px 8px; }
.shops-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.shops-panel-title { font-size:1.1rem; font-weight:700; color:var(--text); }
.shops-count {
  font-size:.74rem; font-weight:700; color:var(--brand);
  background:var(--brand-dim); border:1px solid rgba(255,136,0,.22);
  padding:3px 12px; border-radius:var(--rf);
}
.shops-list { display:flex; flex-direction:column; gap:10px; }
.shops-empty { text-align:center; padding:56px 24px; color:var(--muted); }
.shops-empty svg { margin:0 auto 14px; display:block; color:var(--border); }
.shops-empty p { font-size:.9rem; line-height:1.5; }

/* ── Shop card ── */
.shop-card {
  background:var(--surface); border-radius:var(--r4);
  border:1px solid var(--border-soft);
  padding:14px 16px; display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:all var(--base) var(--spring);
  box-shadow:var(--s2); position:relative; overflow:hidden;
  animation:card-in .4s var(--spring) both;
}
/* Brand accent left stripe */
.shop-card::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:3px; border-radius:0 var(--rf) var(--rf) 0;
  background:linear-gradient(to bottom,var(--brand),var(--brand-l));
  opacity:0; transition:opacity var(--base) var(--ease);
}
.shop-card:hover { transform:translateY(-4px); box-shadow:var(--s-3d); border-color:rgba(255,136,0,.30); }
.shop-card:hover::before { opacity:1; }
.shop-card:active { transform:scale(.97) translateY(1px); }

.shop-card:nth-child(1){animation-delay:.04s} .shop-card:nth-child(2){animation-delay:.08s}
.shop-card:nth-child(3){animation-delay:.12s} .shop-card:nth-child(4){animation-delay:.16s}
.shop-card:nth-child(5){animation-delay:.20s} .shop-card:nth-child(6){animation-delay:.24s}

.shop-card-logo {
  width:56px; height:56px; border-radius:var(--r3); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border:2px solid rgba(255,136,0,.15);
  box-shadow:0 4px 12px var(--brand-glow2);
  transition:all var(--base) var(--ease);
}
.shop-card:hover .shop-card-logo { box-shadow:0 6px 20px var(--brand-glow); transform:scale(1.05); }
.shop-card-logo img { width:100%; height:100%; object-fit:cover; }

.shop-card-body { flex:1; min-width:0; }
.shop-card-name { font-weight:700; font-size:.97rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.shop-card-addr { font-size:.78rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-card-meta { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.shop-type-badge {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  background:var(--brand-dim); color:var(--brand-d); border:1px solid rgba(255,136,0,.22);
  padding:2px 8px; border-radius:var(--r1);
}
.shop-dist { font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:3px; }
.shop-card-arrow { color:var(--muted-2); flex-shrink:0; transition:all var(--base) var(--spring); }
.shop-card:hover .shop-card-arrow { color:var(--brand); transform:translateX(5px); }

/* Skeleton cards */
.shop-card-skeleton {
  background:var(--surface); border-radius:var(--r4); border:1px solid var(--border-soft);
  padding:14px 16px; display:flex; align-items:center; gap:14px;
}
.sk-logo { width:56px; height:56px; border-radius:var(--r3); flex-shrink:0; background:var(--brand-dim); }
.sk-body { flex:1; display:flex; flex-direction:column; gap:8px; }
.sk-line  { height:12px; border-radius:var(--rf); background:var(--brand-dim); }
.sk-line-short{width:55%} .sk-line-med{width:78%} .sk-line-xs{width:38%;height:10px}


/* ═══════════════════════════════════════════════════════════════
   SHOP HERO — cinematic banner (replaces old shop-header)
═══════════════════════════════════════════════════════════════ */
.shop-hero {
  position:relative; height:210px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(155deg, #FF8800 0%, #CC5500 50%, #0F0600 100%);
  display:flex; align-items:flex-end;
}
[data-theme="dark"] .shop-hero { background:linear-gradient(155deg, #CC5500 0%, #7A2A00 45%, #0F0600 100%); }

/* Shimmer sweep over hero */
.shop-hero::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  animation:hero-shimmer 4s ease-in-out 1.5s infinite;
  pointer-events:none;
}

.shop-hero-back-btn {
  position:absolute; top:14px; left:14px; z-index:5;
  width:38px; height:38px; border-radius:var(--r2);
  background:rgba(0,0,0,.30); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:all var(--base) var(--spring);
}
.shop-hero-back-btn:hover { background:rgba(0,0,0,.50); transform:scale(1.08) translateX(-1px); }
.shop-hero-back-btn:active { transform:scale(.94); }

.shop-hero-cart-btn {
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px; border-radius:var(--r2);
  background:rgba(0,0,0,.30); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:all var(--base) var(--spring);
}
.shop-hero-cart-btn:hover { background:rgba(0,0,0,.50); transform:scale(1.08); }

/* Center body: logo + name + address */
.shop-hero-body {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:14px;
  z-index:3;
}
.shop-logo-hero {
  width:72px; height:72px; border-radius:var(--r4); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.15); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.30);
  box-shadow:0 8px 30px rgba(0,0,0,.30); margin-bottom:10px;
}
.shop-logo-hero img { width:100%; height:100%; object-fit:cover; }
.shop-hero-name {
  font-size:1.25rem; font-weight:700; color:#fff; text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.40);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90%;
}
.shop-hero-address {
  font-size:.78rem; color:rgba(255,255,255,.72); margin-top:3px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:85%;
}

/* Keep backward compat for old .shop-header if JS adds elements directly */
.shop-header {
  position:sticky; top:0; z-index:20;
  background:var(--surface-2); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-soft);
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 16px rgba(160,80,0,.08);
}
.back-btn {
  width:38px; height:38px; border-radius:var(--r2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
}
.back-btn:hover { background:var(--brand-dim); color:var(--brand); transform:scale(1.1) translateX(-1px); }
.back-btn:active { transform:scale(.94); }
.shop-header-info { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.shop-logo {
  width:42px; height:42px; border-radius:var(--r2); flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:1rem;
  border:1px solid rgba(255,136,0,.22); box-shadow:0 3px 10px var(--brand-glow2);
}
.shop-logo img { width:100%; height:100%; object-fit:cover; }
.shop-name    { font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.shop-address { font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cart-icon-btn { position:relative; }
.cart-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--brand); color:#fff; border-radius:var(--rf);
  font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px var(--brand-glow); animation:badge-pop .3s var(--spring);
}

/* Tagline */
.shop-tagline {
  background:linear-gradient(90deg,var(--brand-dim),rgba(255,136,0,.04));
  border-bottom:1px solid var(--border-soft);
  color:var(--brand-d); padding:8px 20px; font-size:.84rem; font-weight:600; text-align:center;
}
.shop-tagline:empty { display:none; }


/* ─── Categories bar ── */
.categories-bar {
  display:flex; gap:8px; overflow-x:auto; padding:12px 14px;
  scrollbar-width:none; border-bottom:1px solid var(--border-soft);
  background:var(--surface-2); backdrop-filter:blur(16px);
  position:sticky; top:0; z-index:10;
}
.categories-bar::-webkit-scrollbar { display:none; }
.cat-chip {
  flex-shrink:0; padding:7px 16px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--rf); font-size:.82rem; font-weight:700; color:var(--muted);
  transition:all var(--base) var(--spring); white-space:nowrap;
}
.cat-chip:hover { border-color:rgba(255,136,0,.4); color:var(--brand); transform:translateY(-2px); }
.cat-chip--active {
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-color:transparent; color:#fff;
  box-shadow:var(--s-brand); transform:translateY(-2px);
}

/* ─── Products toolbar ── */
.products-toolbar {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--border-soft);
  background:var(--surface-3);
}
.product-search-wrap {
  flex:1; display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r2); padding:9px 12px;
  transition:all var(--base) var(--ease);
}
.product-search-wrap:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-dim); }
.product-search { flex:1; border:none; background:transparent; outline:none; font-size:.88rem; color:var(--text); }
.product-search::placeholder { color:var(--muted); }
.sort-select {
  flex-shrink:0; border:1.5px solid var(--border); border-radius:var(--r2);
  padding:9px 10px; font-size:.82rem; background:var(--surface); color:var(--text);
  outline:none; cursor:pointer; transition:border-color var(--base) var(--ease);
}
.sort-select:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-dim); }
.sort-select option { background:var(--bg); }

/* ─── Products grid ── */
.products-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:14px; }
@media(min-width:500px){ .products-grid{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px){ .products-grid{ grid-template-columns:repeat(4,1fr) } }
.products-loading { grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--muted); font-size:.9rem; }

/* Product card */
.product-card {
  background:var(--surface); border-radius:var(--r3);
  border:1px solid var(--border-soft); overflow:hidden;
  box-shadow:var(--s2); position:relative;
  transition:all var(--base) var(--spring); display:flex; flex-direction:column;
  animation:card-in .4s var(--spring) both;
}
.product-card:hover {
  box-shadow:var(--s-3d),0 0 0 1.5px rgba(255,136,0,.25);
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(255,136,0,.25);
}
.product-card:active { transform:scale(.97) translateY(1px); }

.product-img {
  width:100%; aspect-ratio:1;
  background:linear-gradient(135deg,var(--brand-dim),var(--bg-2));
  overflow:hidden; position:relative;
}
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.product-card:hover .product-img img { transform:scale(1.10); }
.product-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:var(--border);
}
.out-of-stock-label {
  position:absolute; top:8px; left:8px;
  background:var(--red); color:#fff; font-size:.65rem; font-weight:700;
  padding:2px 8px; border-radius:var(--r1); text-transform:uppercase; letter-spacing:.5px;
  box-shadow:0 2px 8px var(--red-glow);
}

.product-body { padding:10px 10px 8px; flex:1; display:flex; flex-direction:column; gap:3px; }
.product-name  { font-size:.86rem; font-weight:700; line-height:1.3; color:var(--text); }
.product-price { font-size:.97rem; font-weight:700; color:var(--brand); }
.product-cat   { font-size:.69rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

.product-add-btn {
  margin-top:auto; padding:9px 0;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff; border-radius:var(--r1); font-size:.82rem; font-weight:700;
  text-align:center; letter-spacing:.01em;
  box-shadow:0 4px 14px var(--green-glow);
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
}
.product-add-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px var(--green-glow); filter:brightness(1.08); }
.product-add-btn:active { transform:scale(.96); }
.product-add-btn:disabled { background:var(--border-soft); color:var(--muted); cursor:not-allowed; box-shadow:none; }

.product-qty-ctrl {
  margin-top:auto; display:flex; align-items:center; gap:4px;
  background:var(--green-dim); border:1px solid rgba(34,197,94,.22); border-radius:var(--r1); padding:5px;
}
.qty-btn {
  width:28px; height:28px; border-radius:var(--r1); flex-shrink:0;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
  transition:all var(--base) var(--spring); overflow:hidden; position:relative;
}
.qty-btn:hover { background:var(--green-d); transform:scale(1.14); }
.qty-btn:active { transform:scale(.92); }
.qty-val { flex:1; text-align:center; font-weight:700; font-size:.86rem; color:var(--green-d); }

/* Pagination */
.products-pagination { display:flex; justify-content:center; gap:8px; padding:16px; }
.page-btn {
  padding:9px 20px; border-radius:var(--r2); font-size:.85rem; font-weight:700;
  background:var(--surface); border:1.5px solid var(--border); color:var(--muted);
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
}
.page-btn:hover,.page-btn--active {
  background:var(--brand); border-color:transparent; color:#fff;
  box-shadow:var(--s-brand); transform:translateY(-2px);
}
.page-btn:active { transform:scale(.96); }
.page-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }

/* Cart FAB */
.cart-fab {
  position:fixed; bottom:calc(var(--nav-h) + 16px); right:16px; z-index:30;
  width:60px; height:60px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff; box-shadow:var(--s-brand),0 0 0 1px rgba(255,136,0,.2);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--base) var(--spring); overflow:hidden;
}
.cart-fab:hover { transform:scale(1.14) translateY(-3px); box-shadow:0 18px 40px var(--brand-glow); }
.cart-fab:active { transform:scale(.95); }
.cart-fab-count {
  position:absolute; top:-5px; right:-5px;
  min-width:22px; height:22px; padding:0 5px;
  background:#fff; color:var(--brand); border-radius:var(--rf);
  font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); animation:badge-pop .3s var(--spring);
}


/* ═══════════════════════════════════════════════════════════════
   SHOP TABS
═══════════════════════════════════════════════════════════════ */
.shop-tabs {
  display:flex; background:var(--surface-2); backdrop-filter:blur(16px);
  border-bottom:1.5px solid var(--border-soft);
  position:sticky; top:0; z-index:15; padding:4px 8px; gap:4px;
  overflow-x:auto; scrollbar-width:none;
}
.shop-tabs::-webkit-scrollbar { display:none; }
.shop-tab {
  flex:1; min-width:max-content; padding:11px 8px; font-size:.83rem; font-weight:700; color:var(--muted);
  text-align:center; transition:all var(--base) var(--spring);
  border-radius:var(--r2); position:relative; letter-spacing:.3px;
}
.shop-tab:hover { color:var(--brand); background:var(--brand-dim); }
.shop-tab--active {
  color:var(--brand); background:var(--brand-dim);
  box-shadow:0 0 0 1px rgba(255,136,0,.22);
}
.shop-tab--active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:2.5px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  border-radius:var(--rf) var(--rf) 0 0;
  box-shadow:0 -2px 10px var(--brand-glow);
}
.shop-tab-content { animation:tab-fade-in .35s var(--spring) both; }


/* ═══════════════════════════════════════════════════════════════
   PROFILE VIEW
═══════════════════════════════════════════════════════════════ */
.simple-header {
  padding:16px 18px; border-bottom:1px solid var(--border-soft);
  background:var(--surface-2); backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 12px rgba(160,80,0,.06);
}
.simple-header h1 { font-size:1.1rem; font-weight:700; color:var(--text); }
.profile-body { padding:18px 14px; }
.profile-card {
  background:var(--surface); border-radius:var(--r5); border:1px solid var(--border-soft);
  padding:24px 20px; box-shadow:var(--s3); margin-bottom:16px; position:relative; overflow:hidden;
  transition:transform var(--base) var(--spring),box-shadow var(--base) var(--ease);
}
.profile-card:hover { transform:translateY(-2px); box-shadow:var(--s4); }
.profile-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:90px;
  background:linear-gradient(135deg,rgba(255,136,0,.12),rgba(245,158,11,.06));
}
.profile-avatar {
  position:relative; z-index:1;
  width:72px; height:72px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700; margin:0 auto 14px;
  border:3px solid var(--surface); box-shadow:var(--s-brand);
}
.profile-name  { text-align:center; font-size:1.15rem; font-weight:700; color:var(--text); }
.profile-email { text-align:center; font-size:.84rem; color:var(--muted); margin-top:3px; }
.profile-actions { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.section-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:12px; }


/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV — floating pill redesign
═══════════════════════════════════════════════════════════════ */
.bottom-nav {
  height:var(--nav-h);
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:0 16px calc(env(safe-area-inset-bottom) + 8px) 16px;
  pointer-events:none;
  /* Soft background fade, not the pill itself */
  background:linear-gradient(to top,var(--bg) 55%,transparent);
}
.bnav-inner {
  pointer-events:all;
  display:flex; align-items:center;
  background:var(--surface); backdrop-filter:blur(28px) saturate(1.8);
  -webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid var(--border-soft);
  border-radius:var(--r6);
  padding:6px 10px;
  box-shadow:var(--s4),0 0 0 1px var(--brand-dim);
  gap:0; width:100%; max-width:340px;
  position:relative;
}
[data-theme="dark"] .bnav-inner { background:rgba(22,9,0,.92); }

.bnav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--muted); font-size:.58rem; font-weight:700;
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
  letter-spacing:.5px; text-transform:uppercase; padding:8px 4px;
  border-radius:var(--r4); min-width:0;
}
.bnav-btn:hover { color:var(--brand); }
.bnav-btn--active {
  color:var(--brand);
  background:var(--brand-dim);
}
.bnav-btn--active::before {
  content:''; position:absolute; top:0; left:20%; right:20%; height:2.5px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  border-radius:0 0 var(--rf) var(--rf);
  box-shadow:0 0 10px var(--brand-glow);
}
.bnav-btn img,.bnav-btn svg { transition:all var(--base) var(--spring); }
.bnav-btn--active img,.bnav-btn--active svg {
  transform:scale(1.18);
  filter:drop-shadow(0 0 6px var(--brand-glow));
}

/* Elevated scan button (center, hero) */
.bnav-btn--scan {
  flex:0 0 64px; position:relative;
  padding:0; height:64px; margin:-14px 0;
  overflow:visible; background:none !important;
}
.bnav-btn--scan .bnav-scan-pill {
  width:54px; height:54px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--s-brand),0 0 0 2px rgba(255,136,0,.15);
  transition:all var(--base) var(--spring); position:relative; overflow:hidden;
}
.bnav-btn--scan:hover .bnav-scan-pill { transform:scale(1.10) translateY(-2px); box-shadow:0 12px 28px var(--brand-glow); }
.bnav-btn--scan:active .bnav-scan-pill { transform:scale(.94); }
.bnav-btn--scan span { font-size:.58rem; font-weight:700; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; margin-top:4px; }

.bnav-badge {
  position:absolute; top:4px; left:50%; margin-left:4px;
  min-width:16px; height:16px; padding:0 3px;
  background:var(--brand); color:#fff; border-radius:var(--rf);
  font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px var(--brand-glow); animation:badge-pop .3s var(--spring);
}


/* ═══════════════════════════════════════════════════════════════
   CART DRAWER
═══════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.40); backdrop-filter:blur(4px);
  animation:fade-in .25s var(--ease);
}
.cart-drawer {
  position:fixed; right:0; top:0; bottom:0; z-index:70;
  width:min(100vw,430px);
  background:var(--surface); backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  box-shadow:-12px 0 48px rgba(160,80,0,.20),0 0 0 1px var(--border-soft);
  animation:slide-from-right .32s var(--spring);
  border-left:1px solid var(--border-soft);
}
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border-soft);
  background:var(--surface-2);
}
.drawer-brand { display:flex; align-items:center; gap:8px; }
.drawer-header h2 { font-size:1.12rem; font-weight:700; color:var(--text); }
.cart-items { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.cart-empty { text-align:center; padding:52px 24px; color:var(--muted); }
.cart-empty svg { margin:0 auto 14px; display:block; color:var(--border); }
.cart-shop-divider { padding:8px 4px 4px; margin-top:4px; }
.cart-shop-label {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--brand); background:var(--brand-dim); border:1px solid rgba(255,136,0,.2);
  padding:3px 10px; border-radius:var(--rf);
}

.cart-item {
  display:flex; gap:10px; align-items:center;
  background:var(--bg); border-radius:var(--r3);
  border:1px solid var(--border-soft); padding:11px 13px;
  transition:all var(--base) var(--ease); animation:card-in .28s var(--spring) both;
}
.cart-item:hover { border-color:rgba(255,136,0,.22); box-shadow:var(--s2); }
.cart-item-img {
  width:56px; height:56px; border-radius:var(--r2); flex-shrink:0;
  background:var(--brand-dim); overflow:hidden; border:1px solid var(--border);
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-body { flex:1; min-width:0; }
.cart-item-name  { font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.cart-item-price { font-size:.82rem; color:var(--brand); font-weight:700; margin-top:3px; }
.cart-item-ctrl  { display:flex; align-items:center; gap:7px; margin-top:7px; }
.ci-qty-btn {
  width:27px; height:27px; border-radius:var(--r1);
  background:var(--brand-dim); color:var(--brand-d);
  display:flex; align-items:center; justify-content:center; font-size:.94rem; font-weight:700;
  transition:all var(--base) var(--spring); overflow:hidden; position:relative;
}
.ci-qty-btn:hover { background:var(--brand); color:#fff; transform:scale(1.12); }
.ci-qty-btn:active { transform:scale(.92); }
.ci-qty-val { flex:1; text-align:center; font-weight:700; font-size:.86rem; }
.cart-item-remove { margin-left:auto; color:var(--red); font-size:.74rem; opacity:.6; transition:opacity var(--fast); }
.cart-item-remove:hover { opacity:1; }

.cart-footer {
  padding:16px 20px; border-top:1px solid var(--border-soft); background:var(--surface-2);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:.95rem; color:var(--text-2); }
.cart-total-row strong { font-size:1.35rem; color:var(--brand); font-weight:700; }


/* ═══════════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.40); backdrop-filter:blur(5px); }
.modal {
  position:fixed; inset:0; z-index:90;
  background:var(--bg); overflow-y:auto; animation:modal-up .38s var(--spring);
}
.modal-header {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border-soft);
  background:var(--surface-2); backdrop-filter:blur(20px);
  position:sticky; top:0; z-index:5;
}
.modal-header h2 { font-size:1rem; font-weight:700; color:var(--text); }
.modal-body { padding:20px 16px; display:flex; flex-direction:column; gap:20px; }
.modal-close {
  width:32px; height:32px; border-radius:var(--r2); margin-left:auto; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--border-soft); color:var(--muted); font-size:1rem;
  transition:all var(--fast) var(--spring);
}
.modal-close:hover { background:var(--red-dim); color:var(--red); }

.checkout-summary {
  background:var(--surface); border-radius:var(--r3); border:1px solid var(--border-soft);
  padding:16px; box-shadow:var(--s2);
}
.checkout-summary-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:12px; }
.checkout-item {
  display:flex; justify-content:space-between; font-size:.88rem; padding:5px 0;
  border-bottom:1px solid var(--line); color:var(--text-2);
}
.checkout-item:last-of-type { border-bottom:none; }
.checkout-total { display:flex; justify-content:space-between; font-weight:700; padding-top:10px; margin-top:4px; font-size:1rem; color:var(--text); }
.checkout-total span:last-child { color:var(--brand); }

/* Success modal */
.success-body {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:52px 28px; text-align:center; gap:12px;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,136,0,.07),transparent 60%);
}
.success-icon {
  width:92px; height:92px; border-radius:var(--rf);
  background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(255,136,0,.10));
  border:2px solid rgba(34,197,94,.3);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; box-shadow:0 0 40px rgba(34,197,94,.18),var(--s3);
  animation:success-pop .55s var(--bounce) both;
}
.success-body h2 { font-size:1.7rem; font-weight:700; color:var(--text); }
.success-body p  { color:var(--muted); max-width:300px; line-height:1.6; }
.success-details {
  background:var(--surface); border-radius:var(--r3); border:1px solid var(--border-soft);
  padding:16px; width:100%; max-width:340px; text-align:left; font-size:.88rem; box-shadow:var(--s2);
}
.success-details p {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--line); color:var(--text-2);
}
.success-details p:last-child { border-bottom:none; }
.success-details strong { color:var(--brand); font-weight:700; }


/* ═══════════════════════════════════════════════════════════════
   QR SCANNER
═══════════════════════════════════════════════════════════════ */
.scanner-overlay { position:fixed; inset:0; z-index:200; background:#000; display:flex; flex-direction:column; }
.scanner-header {
  display:flex; align-items:center; gap:12px;
  padding:18px; color:#fff; font-weight:700; font-size:.95rem;
  background:linear-gradient(to bottom,rgba(0,0,0,.80),transparent);
}
.scanner-viewport { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
#scanVideo { width:100%; height:100%; object-fit:cover; }
.scanner-viewport::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,transparent 36%,rgba(0,0,0,.65) 100%);
}
.scan-frame {
  position:absolute; width:240px; height:240px; z-index:2; pointer-events:none;
  filter:drop-shadow(0 0 28px rgba(255,136,0,.8));
}
.scan-corner { position:absolute; width:30px; height:30px; border-color:var(--brand); border-style:solid; border-width:0; }
.scan-corner--tl{top:0;left:0;border-top-width:3px;border-left-width:3px;border-radius:4px 0 0 0}
.scan-corner--tr{top:0;right:0;border-top-width:3px;border-right-width:3px;border-radius:0 4px 0 0}
.scan-corner--bl{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 4px}
.scan-corner--br{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 4px 0}
.scan-line {
  position:absolute; left:4px; right:4px; height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-l),transparent);
  border-radius:var(--rf); box-shadow:0 0 16px var(--brand-glow);
  animation:scan-sweep 2.2s ease-in-out infinite;
}
.scan-hint {
  position:absolute; bottom:40px; z-index:2;
  color:rgba(255,255,255,.9); font-size:.86rem;
  background:rgba(0,0,0,.55); backdrop-filter:blur(12px);
  padding:8px 20px; border-radius:var(--rf); border:1px solid rgba(255,255,255,.14);
}
.scanner-status { padding:16px 22px; text-align:center; color:rgba(255,255,255,.88); font-size:.9rem; background:linear-gradient(to top,rgba(0,0,0,.75),transparent); min-height:62px; }


/* ═══════════════════════════════════════════════════════════════
   LEAFLET overrides
═══════════════════════════════════════════════════════════════ */
.leaflet-marker-icon {
  filter:drop-shadow(0 4px 10px rgba(255,136,0,.6));
  transition:filter var(--base) var(--ease),transform var(--base) var(--spring);
}
.leaflet-marker-icon:hover { filter:drop-shadow(0 8px 22px rgba(255,136,0,.9)); transform:translateY(-3px) scale(1.12); }
.leaflet-popup-content-wrapper {
  border-radius:var(--r3) !important; box-shadow:var(--s4) !important;
  border:1px solid var(--border) !important; overflow:hidden;
  background:var(--surface) !important; color:var(--text) !important;
}
.leaflet-popup-content { font-size:.9rem; font-family:"Ubuntu",sans-serif; padding:4px 0; color:var(--text); }
.leaflet-popup-content strong { color:var(--brand); font-weight:700; display:block; margin-bottom:4px; }
.leaflet-popup-tip-container .leaflet-popup-tip { background:var(--surface) !important; }
.map-popup-btn {
  display:block; width:100%; margin-top:10px; padding:9px 14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff; border-radius:var(--r2); font-size:.8rem; font-weight:700;
  border:none; cursor:pointer; letter-spacing:.01em;
  box-shadow:var(--s-brand); transition:all var(--base) var(--spring);
}
.map-popup-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.leaflet-control-zoom a { background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; }
.leaflet-control-zoom a:hover { background:var(--brand) !important; color:#fff !important; }
.leaflet-control-attribution { background:var(--surface-2) !important; color:var(--muted) !important; }
.leaflet-control-attribution a { color:var(--brand) !important; }


/* ═══════════════════════════════════════════════════════════════
   REVIEWS + MESSAGING + CONTACT
═══════════════════════════════════════════════════════════════ */
.reviews-summary-card {
  background:var(--surface); border-radius:var(--r4); border:1px solid var(--border-soft);
  margin:16px; padding:20px; display:flex; flex-direction:column; align-items:center;
  gap:12px; box-shadow:var(--s2); text-align:center;
}
.rating-big { display:flex; flex-direction:column; align-items:center; gap:4px; }
.rating-avg { font-size:3.2rem; font-weight:700; color:var(--text); line-height:1; }
.rating-stars { display:flex; gap:3px; color:var(--border); font-size:1.3rem; }
.rating-stars .filled { color:var(--amber); text-shadow:0 0 8px var(--amber-glow); }
.rating-count { font-size:.82rem; color:var(--muted); font-weight:500; }

.rating-distribution { width:100%; max-width:280px; display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.dist-row { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--text-2); }
.dist-star { width:12px; color:var(--amber); }
.dist-bar-bg { flex:1; height:8px; background:var(--bg-2); border-radius:var(--rf); overflow:hidden; }
.dist-bar-fill { height:100%; background:linear-gradient(90deg,var(--amber),var(--brand-l)); border-radius:var(--rf); width:0%; transition:width .9s var(--spring); }
.dist-count { min-width:24px; text-align:right; color:var(--muted); }

.review-form-card,.contact-card,.contact-info-card {
  background:var(--surface); border-radius:var(--r4); border:1px solid var(--border-soft);
  margin:16px; padding:20px; box-shadow:var(--s3);
}
.card-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:14px; border-left:3px solid var(--brand); padding-left:8px; }
.contact-desc { font-size:.84rem; color:var(--muted); line-height:1.5; margin-bottom:16px; }

.star-rating-picker { display:flex; gap:6px; font-size:2.2rem; color:var(--border); user-select:none; cursor:pointer; margin:4px 0; }
.star-picker-icon { transition:transform var(--fast) var(--spring),color var(--fast) var(--ease); }
.star-picker-icon:hover { transform:scale(1.22); }
.star-picker-icon.active { color:var(--amber); text-shadow:0 0 12px var(--amber-glow); transform:scale(1.1); }
.review-form-actions { display:flex; gap:10px; margin-top:6px; }

.reviews-list { display:flex; flex-direction:column; gap:12px; padding:0 16px 24px; }
.review-card {
  background:var(--surface); border-radius:var(--r3); border:1px solid var(--border-soft);
  padding:16px; display:flex; gap:14px; box-shadow:var(--s2);
  animation:card-in .4s var(--spring) both;
  transition:all var(--base) var(--spring);
}
.review-card:hover { border-color:rgba(255,136,0,.18); transform:translateY(-1px); }
.review-card-avatar {
  width:42px; height:42px; border-radius:var(--rf);
  background:linear-gradient(135deg,var(--brand-dim),rgba(245,158,11,.10));
  color:var(--brand); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid var(--border);
}
.review-card-body { flex:1; min-width:0; }
.review-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
.review-card-name { font-weight:700; font-size:.92rem; color:var(--text); }
.review-card-date { font-size:.74rem; color:var(--muted); }
.review-card-stars { display:flex; gap:2px; color:var(--amber); font-size:.8rem; margin-bottom:6px; }
.review-card-comment { font-size:.86rem; color:var(--text-2); line-height:1.55; word-break:break-word; }

.contact-info-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.contact-info-item:last-child { border-bottom:none; }
.info-icon { font-size:1.3rem; width:32px; height:32px; border-radius:var(--r2); background:var(--brand-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-label { font-size:.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.info-value { font-size:.9rem; font-weight:500; color:var(--text-2); margin-top:2px; word-break:break-all; }


/* ═══════════════════════════════════════════════════════════════
   PROFILE TABS + ORDERS + ADDRESSES + PAYMENTS
═══════════════════════════════════════════════════════════════ */
.profile-tab-content { animation:tab-fade-in .35s var(--spring) both; }
.orders-list { display:flex; flex-direction:column; gap:14px; padding:0 16px 24px; }
.order-card {
  background:var(--surface); border-radius:var(--r4); border:1px solid var(--border-soft);
  padding:16px; box-shadow:var(--s2); display:flex; flex-direction:column; gap:12px;
  transition:all var(--base) var(--spring); animation:card-in .4s var(--spring) both;
}
.order-card:hover { transform:translateY(-2px); box-shadow:var(--s3); border-color:rgba(255,136,0,.20); }
.order-card-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:8px; }
.order-shop-title { font-weight:700; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:8px; }
.order-shop-logo { width:24px; height:24px; border-radius:var(--r1); object-fit:cover; }
.order-status-badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 10px; border-radius:var(--rf); }
.order-status--pending    { background:rgba(245,158,11,.14); color:var(--amber); }
.order-status--completed  { background:var(--green-dim); color:var(--green-d); }
.order-status--cancelled,.order-status--failed { background:var(--red-dim); color:var(--red); }
.order-status--processing { background:var(--brand-dim); color:var(--brand); }
.order-items-summary { display:flex; flex-direction:column; gap:4px; font-size:.84rem; color:var(--text-2); }
.order-item-row { display:flex; justify-content:space-between; }
.order-card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:8px; font-size:.8rem; color:var(--muted); }
.order-total-price { font-size:.98rem; font-weight:700; color:var(--brand); }

.address-card {
  background:var(--surface); border-radius:var(--r3); border:1px solid var(--border-soft);
  padding:16px; box-shadow:var(--s2); display:flex; flex-direction:column; gap:8px;
  position:relative; transition:all var(--base) var(--spring);
}
.address-card:hover { border-color:rgba(255,136,0,.22); box-shadow:var(--s3); }
.address-card-header { display:flex; justify-content:space-between; align-items:center; }
.address-label { font-weight:700; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:6px; }
.address-default-badge { font-size:.64rem; font-weight:700; background:var(--brand-dim); color:var(--brand-d); padding:2px 8px; border-radius:var(--rf); border:1px solid rgba(255,136,0,.22); }
.address-details { font-size:.85rem; color:var(--text-2); line-height:1.45; }
.address-card-actions { display:flex; gap:12px; margin-top:4px; }
.address-action-btn { font-size:.78rem; font-weight:700; color:var(--muted); cursor:pointer; transition:color var(--fast); }
.address-action-btn:hover { color:var(--brand); }
.address-action-btn--delete:hover { color:var(--red); }

.payment-card {
  border-radius:var(--r4); padding:18px; color:#fff; box-shadow:var(--s3);
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:140px; position:relative; overflow:hidden;
  transition:all var(--base) var(--spring); border:1px solid rgba(255,255,255,.08);
}
.payment-card:hover { transform:translateY(-4px); box-shadow:var(--s-3d); }
.payment-card--Visa       { background:linear-gradient(135deg,#0d1424,#202d5a); }
.payment-card--Mastercard { background:linear-gradient(135deg,#2c1214,#5a2023); }
.payment-card--Amex       { background:linear-gradient(135deg,#0e292d,#1e4d54); }
.payment-card--M-Pesa     { background:linear-gradient(135deg,#005000,#008f00); }
.payment-card--Tigo       { background:linear-gradient(135deg,#021a40,#063d8c); }
.payment-card--Airtel     { background:linear-gradient(135deg,#5c0202,#b80505); }
.payment-card--Default    { background:linear-gradient(135deg,#CC5500,#FF8800); }
.payment-card-chip { width:32px; height:24px; background:rgba(255,255,255,.25); border-radius:4px; position:relative; }
.payment-card-chip::before { content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.4); border-radius:2px; }
.payment-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
.payment-card-provider { font-weight:800; font-size:1.1rem; letter-spacing:.5px; }
.payment-card-number { font-family:monospace; font-size:1.05rem; letter-spacing:1.5px; margin:18px 0 8px; }
.payment-card-bottom { display:flex; justify-content:space-between; align-items:flex-end; font-size:.76rem; text-transform:uppercase; opacity:.88; }
.payment-card-label { font-size:.56rem; opacity:.7; margin-bottom:2px; }
.payment-card-delete-btn { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.12); color:#fff; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:all var(--fast); }
.payment-card-delete-btn:hover { background:var(--red); transform:scale(1.1); }
.payment-card-default-indicator { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:.62rem; font-weight:700; background:rgba(255,255,255,.18); padding:2px 10px; border-radius:var(--rf); border:1px solid rgba(255,255,255,.2); }


/* ═══════════════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:16px; }
.service-card {
  background:var(--surface); border-radius:var(--r3); border:1px solid var(--border-soft);
  box-shadow:var(--s2); display:flex; flex-direction:column; padding:16px;
  transition:all var(--base) var(--spring); animation:card-in .4s var(--spring) both;
}
.service-card:hover { box-shadow:var(--s-3d),0 0 0 1.5px rgba(255,136,0,.22); transform:translateY(-4px); border-color:rgba(255,136,0,.22); }
.service-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:8px; }
.service-name { font-size:1rem; font-weight:700; color:var(--text); }
.service-period-badge { font-size:.65rem; font-weight:700; text-transform:uppercase; background:var(--brand-dim); color:var(--brand-d); padding:2px 8px; border-radius:var(--r1); }
.service-description { font-size:.82rem; color:var(--text-2); line-height:1.4; margin-bottom:16px; flex:1; }
.service-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; border-top:1px solid var(--line); padding-top:12px; }
.service-price { font-size:1.1rem; font-weight:700; color:var(--brand); }
.service-book-btn {
  padding:8px 16px; background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff; border-radius:var(--r1); font-size:.8rem; font-weight:700;
  box-shadow:0 4px 14px var(--green-glow); transition:all var(--base) var(--spring);
  position:relative; overflow:hidden;
}
.service-book-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--green-glow); }
.service-book-btn:active { transform:scale(.96); }

/* Ads widgets */
.ads-widget { border-radius:var(--r3); overflow:hidden; border:1px solid var(--border-soft); background:var(--surface); box-shadow:var(--s1); }
.ads-widget img { width:100%; display:block; border-radius:inherit; }

/* Track view */
.track-results { padding:16px; }

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE — sun/moon icons
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .icon-moon { display:none; }
[data-theme="dark"]  .icon-sun  { display:none; }

/* ── Dark mode header tints ── */
[data-theme="dark"] .home-header    { background:rgba(20,8,0,.92); }
[data-theme="dark"] .shop-hero      { background:linear-gradient(155deg,#CC5500 0%,#7A2A00 45%,#0F0600 100%); }
[data-theme="dark"] .categories-bar { background:rgba(22,9,0,.88); }
[data-theme="dark"] .products-toolbar { background:rgba(22,9,0,.80); }
[data-theme="dark"] .shop-tabs      { background:rgba(20,8,0,.88); }
[data-theme="dark"] .simple-header  { background:rgba(20,8,0,.92); }
[data-theme="dark"] .modal-header   { background:rgba(20,8,0,.92); }
[data-theme="dark"] .cart-drawer    { background:rgba(22,9,0,.96); }
[data-theme="dark"] .drawer-header  { background:rgba(15,6,0,.80); }
[data-theme="dark"] .cart-footer    { background:rgba(15,6,0,.80); }
[data-theme="dark"] .auth-panel     { background:linear-gradient(160deg,#0F0600 0%,#1A0B00 100%); }
[data-theme="dark"] .auth-card      { background:rgba(26,10,2,.92); }

/* ── Dark mode shop hero sticky tabs top offset ── */
.shop-hero ~ .shop-tabs,.shop-hero ~ .shop-tagline ~ .shop-tabs { top:0; }

/* Final cascade: Nunu blue/green/orange glass app skin */
:root{
  --brand:#1E88FF;
  --brand-d:#126ED0;
  --brand-l:#54A7FF;
  --brand-dim:rgba(30,136,255,.13);
  --brand-glow:rgba(30,136,255,.44);
  --green:#62D84E;
  --green-d:#43B833;
  --green-dim:rgba(98,216,78,.14);
  --green-glow:rgba(98,216,78,.4);
  --amber:#FFD54A;
  --orange:#FF8A1F;
}

body{
  background:
    radial-gradient(circle at 12% 0,rgba(30,136,255,.2),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(255,213,74,.16),transparent 28%),
    radial-gradient(circle at 72% 84%,rgba(98,216,78,.15),transparent 32%),
    var(--bg);
}

.home-hero,
.auth-card,
.shop-card,
.product-card,
.service-card,
.profile-card,
.cart-drawer,
.drawer,
.modal-card,
.ads-widget{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(145deg,var(--surface-2),var(--glass-2));
  backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 22px 70px rgba(3,11,22,.16),inset 0 1px 0 rgba(255,255,255,.2);
}

.btn--primary,
.product-add-btn,
.service-book-btn,
.scan-btn:hover{
  color:#061426 !important;
  background:linear-gradient(135deg,var(--amber),var(--orange) 52%,var(--green)) !important;
  box-shadow:0 14px 34px rgba(255,138,31,.22),0 0 34px rgba(98,216,78,.12) !important;
}

.product-price,
.service-price,
.cart-item-price,
.order-total-price{
  color:var(--brand) !important;
}

.hero-market-icon--orange{background:var(--orange);color:#061426}
.hero-market-icon--green{background:var(--green);color:#061426}
.service-card:hover,
.product-card:hover{
  border-color:rgba(30,136,255,.3);
  box-shadow:var(--s-3d),0 0 34px rgba(30,136,255,.12);
}

[data-theme="dark"] .home-header,
[data-theme="dark"] .simple-header,
[data-theme="dark"] .modal-header{
  background:rgba(3,11,22,.86);
  backdrop-filter:blur(22px) saturate(1.3);
}