/* The Group's editorial palette, with a practical grocery-shopping interface. */
@font-face{font-family:Fragment;src:url('assets/fragment-mono.woff2') format('woff2');font-display:swap}
:root{--orange:#cf3907;--green:#36543a;--ink:#272e23;--muted:#727866;--line:#e0ddcf;--cream:#f4efdf}
body{background:#f6f3e9}.demo-strip{background:#171b14;color:#dacaac}#header{background:#cf3907}.brand{background:transparent}.head-inner{max-width:1480px}.eyebrow{font-family:Fragment,monospace;font-weight:400;letter-spacing:.1em}.primary,.secondary{border-radius:4px;transition:transform .2s,background .2s}.primary:hover,.secondary:hover{transform:translateY(-2px)}
.home-page{max-width:none;padding:0 0 70px}.home-page>.section,.home-page>.promo-row,.home-page>.store-story{max-width:1280px;margin-left:auto;margin-right:auto;width:90%}.hero-market{background:#171b14;color:#eee6d5;border-radius:0;min-height:580px;grid-template-columns:1fr 1fr;gap:5%;padding:64px max(5%,calc((100vw - 1280px)/2));margin-bottom:60px;align-items:center;overflow:hidden}.hero-content{padding:0}.hero-content .eyebrow{color:#c3a47b;font-size:10px}.hero-content h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(45px,5.2vw,76px);line-height:1.02;font-weight:400;letter-spacing:-.055em;margin:24px 0}.hero-content h1 em{color:#c3a47b}.hero-content p{color:#bec4b3;font-size:16px;line-height:1.7}.hero-content .primary{background:#dccaaa;color:#262c20;font-family:Fragment,monospace;font-size:11px;padding:18px 24px}.hero-points{font-family:Fragment,monospace;color:#bbbda8;font-size:9px;gap:18px;margin-top:30px}.hero-photo{background:#a75935;border:1px solid #d79b6860;border-left:10px solid #75432b;padding:27px 25px 35px;border-radius:3px 12px 12px 3px;box-shadow:6px 5px 0 #e3d9bf,11px 9px 0 #aaa18b,20px 30px 48px #0006;transform:perspective(1200px) rotateY(-7deg) rotate(3deg);transition:transform .65s;align-self:center}.hero-photo:hover{transform:perspective(1200px) rotateY(-2deg) rotate(0)}.hero-photo:before{content:'NABHO BAZAAR / THE NEIGHBOURHOOD EDITION';position:static;display:block;background:none;font-family:Fragment,monospace;color:#f4dbc0;font-size:9px;letter-spacing:.06em;line-height:1.7;margin-bottom:25px}.hero-photo img{position:static;display:block;width:100%;height:auto;aspect-ratio:720/321;object-fit:contain;border:6px solid #f1e5cb}.hero-photo>span{position:static;background:transparent;box-shadow:none;border-radius:0;border-top:1px solid #e5bc9180;padding:22px 0 0;margin-top:24px;justify-content:center;color:#f7e5cf;font-family:Fragment,monospace;font-size:10px}.section-title h2,.store-story h2,.promo h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em}.section-title h2{font-size:36px}.section-title{padding-bottom:17px;border-bottom:1px solid #d7d4c4}.section{margin-top:50px;margin-bottom:55px}.category-tile>span{border-radius:5px 14px 14px 5px;border-left:3px solid #0002;box-shadow:3px 3px 0 #d1ccb8}.category-tile strong{font-size:12px}.product{border-radius:6px;background:#fffef9;transition:transform .25s,box-shadow .25s}.product:hover{transform:translateY(-4px);box-shadow:0 12px 25px #32392712}.product-image{background:#f2f0e6;border-radius:4px}.product-name{font-size:14px;line-height:1.5;min-height:42px}.brand-name{font-size:10px;color:#6c7564}.pack{font-size:11px;color:#697363}.add{min-height:40px;background:#f1f5e9;border-radius:4px}.qty{height:40px;border-radius:4px}.qty button{height:38px;min-width:30px}.promo{border-radius:4px;position:relative;border:1px solid #cfc6ab;box-shadow:4px 4px 0 #ddd5be}.promo.green{background:#dde2ce}.promo.peach{background:#ead9bc}.promo h2{font-size:34px}.store-story{border-radius:5px;background:#eae2cd;border-color:#cec5ae;align-items:center}.store-story>img{height:auto;aspect-ratio:720/321;object-fit:contain}.store-story h2{font-size:36px}.store-story>div{padding:40px}.store-story p{color:#626953}#footer{max-width:none;background:#171b14;color:#e8dec9;padding:45px 5%}#footer strong{font-family:Georgia,serif;font-weight:400;font-size:28px}#footer p,#footer small{color:#b7bcaa}#footer a{color:#d4b98f}.category-sidebar{background:#fffcf3}.bill{background:#ece7d6}.card-panel,.order-card{background:#fffef9}.shop-heading h1,.narrow>h1,.profile-head h1{font-family:Georgia,serif;font-weight:400;font-size:44px;letter-spacing:-.045em}.checkout-layout>aside{align-self:start;position:sticky;top:120px}.product-grid .product-image{height:180px}.search{border-radius:5px}.reveal-in{animation:page-rise .65s both}.hero-content{animation:page-rise .8s both}.hero-photo{animation:book-arrive 1s both}@keyframes page-rise{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes book-arrive{from{opacity:0;translate:20px 15px}to{opacity:1;translate:0 0}}
@media(min-width:701px) and (max-width:1050px){.hero-market{gap:6%;min-height:490px;padding-top:45px;padding-bottom:45px}.hero-content h1{font-size:48px}.hero-photo{padding:20px 16px}.hero-points{flex-wrap:wrap}.categories{gap:12px}.product-rail{grid-template-columns:repeat(3,minmax(0,1fr))}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.home-page{padding:0 0 30px}.hero-market{grid-template-columns:1fr;gap:30px;padding:32px 22px 42px;min-height:0;margin-bottom:32px}.hero-content{padding:0}.hero-content .eyebrow{font-size:8px}.hero-content h1{font-size:clamp(41px,11vw,62px);margin:18px 0;line-height:1.04}.hero-content p{font-size:14px;max-width:none;margin-bottom:22px}.hero-content .primary{font-size:11px;min-height:46px;padding:14px 18px}.hero-points{display:none}.hero-photo{width:94%;max-width:430px;margin:auto;padding:18px 16px 20px;border-left-width:7px;transform:perspective(1000px) rotateY(-4deg) rotate(2deg)}.hero-photo:before{background:none;font-size:7px;margin-bottom:15px}.hero-photo img{object-position:center;border-width:4px}.hero-photo>span{font-size:8px;margin-top:15px;padding:13px 0 0;gap:6px}.hero-photo>span svg{width:14px}.home-page>.section,.home-page>.promo-row,.home-page>.store-story{width:calc(100% - 32px)}.section{margin-top:30px;margin-bottom:34px}.section-title h2{font-size:28px}.section-title{padding-bottom:12px}.section-title>a{font-size:11px}.eyebrow{font-size:8px}.category-tile strong{font-size:10px}.categories{gap:17px 10px}.product-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:10px}.product-rail>.product{min-width:0}.product{padding:10px}.product-image{height:145px}.product-name{font-size:13px;min-height:40px}.brand-name{font-size:10px}.pack{font-size:11px}.product-bottom strong{font-size:14px}.add{min-width:62px;font-size:11px;padding:9px 8px}.qty{min-width:76px}.promo-row{display:grid;grid-template-columns:1fr;overflow:visible;gap:16px}.promo{height:180px;padding:24px}.promo h2{font-size:31px}.promo .eyebrow{font-size:8px}.store-story>img{height:auto}.store-story>div{padding:26px}.store-story h2{font-size:31px}.store-story p{font-size:14px}.shop-heading h1,.narrow>h1,.profile-head h1{font-size:35px}.category-sidebar{max-height:calc(100dvh - 220px);overflow-y:auto}.category-sidebar button{font-size:9px;min-height:66px}.product-grid .product-image{height:120px}.product-grid .product-name{font-size:12px;min-height:54px}.product-grid .pack{font-size:10px}.search input{font-size:16px;padding:12px 0}.search{min-width:0}.delivery strong{font-size:11px}.delivery small{font-size:10px}.checkout-layout>aside{position:static}.primary,.secondary{min-height:44px}.cart-item strong{font-size:12px}.cart-item small{font-size:10px}.cart-item>b{font-size:12px}.cart-item .qty{min-width:66px}.form-row{grid-template-columns:1fr}dialog input,dialog select,dialog textarea{font-size:16px}#bottom-nav{background:#fffdf6}#bottom-nav>a{min-height:40px;font-size:10px}#cart-bar{bottom:88px}#footer{padding-bottom:110px}.home-page .product-bottom{flex-wrap:wrap}.head-inner{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Authentication, CRM, Store Manager Desk & Backup */
.grocery-auth-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 16px 50px;border-radius:18px;background:linear-gradient(180deg, #fffcf5 0%, #f6f1e3 100%);margin:10px auto 40px;border:1px solid #e5dfd0;box-shadow:0 10px 30px #00000006}
.grocery-auth-stage.admin-theme{background:linear-gradient(180deg, #1b261f 0%, #111814 100%);color:#f1f5f0;border-color:#2a3a30}
.grocery-badge-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.grocery-badge-item{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:30px;font-size:11px;font-weight:700;letter-spacing:.02em;background:#fff;color:#283626;border:1px solid #d9d5c5;box-shadow:0 3px 10px #00000008;transition:transform .2s ease}
.grocery-badge-item:hover{transform:translateY(-2px)}
.admin-theme .grocery-badge-item{background:#233529;color:#cde0d2;border-color:#3b5643}

.auth-box{width:100%;max-width:440px;margin:0 auto;padding:34px 30px;background:#ffffff;border:1px solid #dfd8c7;border-radius:16px;box-shadow:0 15px 35px #1a2e1d10;transition:transform .25s ease,box-shadow .25s ease;animation:cardRise .5s ease}
.auth-box:hover{transform:translateY(-3px);box-shadow:0 20px 45px #1a2e1d18}
@keyframes cardRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.auth-box h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin-bottom:8px}
.auth-box p{color:var(--muted);font-size:13px;line-height:1.5}
.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px;gap:8px}
.auth-tab{flex:1;padding:12px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;text-align:center;transition:all .2s;background:transparent}
.auth-tab.active{color:var(--green);border-color:var(--green);background:#f2f7ef;border-radius:6px 6px 0 0}

.admin-login-wrap{width:100%;max-width:450px;margin:0 auto;padding:42px 34px;background:#1a231c;border:1px solid #36483c;border-radius:16px;box-shadow:0 20px 45px #00000050;animation:cardRise .5s ease}
.admin-login-wrap h1{font-family:Georgia,serif;font-size:32px;font-weight:400;color:#f3efe5;margin:12px 0 8px}
.admin-login-wrap p.muted{color:#a9b5a8;font-size:13px}
.admin-login-wrap label{color:#dee7dc}
.admin-login-wrap input{background:#233027;color:#fff;border-color:#384d3e}
.admin-login-wrap input:focus{border-color:#659f77;box-shadow:0 0 0 3px #659f7733}
.admin-login-wrap .fine{color:#97a596}
.admin-login-wrap .fine b{color:#ecd6ad}

/* Social & OTP Auth Styles */
.social-divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.05em;margin:18px 0}
.social-divider:before,.social-divider:after{content:'';flex:1;border-bottom:1px solid var(--line)}
.social-divider:not(:empty):before{margin-right:12px}
.social-divider:not(:empty):after{margin-left:12px}
.google-btn-wrap{display:flex;justify-content:center;margin-bottom:16px;min-height:44px}
.otp-digit-group{display:flex;gap:8px;justify-content:center;margin:14px 0}
.otp-input{width:46px;height:54px;font-size:24px;font-weight:700;text-align:center;border:2px solid #cfc8b8;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}
.otp-input:focus{border-color:var(--green);box-shadow:0 0 0 3px #36543a22;outline:none}
.otp-helper{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-top:10px}
.resend-btn{background:none;border:none;color:var(--green);font-weight:700;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.resend-btn[disabled]{opacity:.5;cursor:not-allowed;text-decoration:none}
.test-otp-notice{background:#fdf6e7;border:1px solid #e9d5a1;color:#856404;padding:8px 12px;border-radius:8px;font-size:11px;margin:12px 0;display:flex;align-items:center;gap:6px}

/* Interactive Animated Map Pin */
.delivery-pin{position:relative;width:34px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.delivery-pin .pin-head{width:32px;height:32px;background:var(--orange);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 14px #00000030;border:3px solid #fff;display:flex;align-items:center;justify-content:center;animation:pinDrop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.delivery-pin .pin-icon{transform:rotate(45deg);font-size:15px;line-height:1}
.delivery-pin .pin-shadow{position:absolute;bottom:0;width:16px;height:6px;background:#00000033;border-radius:50%;filter:blur(1px);animation:pinShadow .4s ease}
.delivery-pin .pin-pulse{position:absolute;bottom:-4px;width:36px;height:12px;border-radius:50%;border:2px solid var(--orange);animation:radarPulse 1.8s infinite ease-out;pointer-events:none}
@keyframes pinDrop{0%{transform:translateY(-24px) scale(1.1) rotate(-45deg);opacity:0}100%{transform:translateY(0) scale(1) rotate(-45deg);opacity:1}}
@keyframes pinShadow{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes radarPulse{0%{transform:scale(0.4);opacity:0.9}100%{transform:scale(2.2);opacity:0}}

.geocoded-badge{display:inline-flex;align-items:center;gap:6px;background:#e9f5ed;color:#1e6a32;border:1px solid #c2e5cd;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:600;margin-top:8px}

.auth-hero-banner{text-align:center;position:relative;z-index:2;margin-bottom:24px}
.auth-hero-banner h1{font-family:Georgia,serif;font-size:clamp(32px, 4vw, 42px);font-weight:400;margin:10px 0 8px;letter-spacing:-0.03em}
.auth-hero-banner p{color:#646e5e;font-size:14px;max-width:420px;margin:0 auto}
.admin-theme .auth-hero-banner h1{color:#f7f4ea}
.admin-theme .auth-hero-banner p{color:#a6b6a6}

/* ============================================================
   Login screen — 2026 refresh
   Animated aurora backdrop, glass card, spring motion, 6-box OTP
   Scoped to #groceryCustomerStage so the manager desk is untouched
   ============================================================ */
#groceryCustomerStage{
 position:relative;
 overflow:hidden;
 isolation:isolate;
 padding:72px 22px 80px;
 border-radius:32px;
 border:1px solid #f2e3c9;
 background:
  radial-gradient(1200px 520px at 12% -10%, #fff6e6 0%, transparent 62%),
  radial-gradient(1000px 520px at 92% 108%, #e7f2e7 0%, transparent 58%),
  linear-gradient(165deg, #fff9ec 0%, #ffeed6 46%, #eef4ea 100%);
 box-shadow:0 30px 70px -32px rgba(90,60,25,.35);
}

/* Floating aurora orbs */
#groceryCustomerStage .login-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#groceryCustomerStage .orb{position:absolute;border-radius:50%;filter:blur(58px);opacity:.55;will-change:transform}
#groceryCustomerStage .orb-1{width:400px;height:400px;background:#ffb27a;top:-140px;left:-90px;animation:orbA 19s ease-in-out infinite}
#groceryCustomerStage .orb-2{width:360px;height:360px;background:#8fd0a4;bottom:-130px;right:-80px;animation:orbB 23s ease-in-out infinite}
#groceryCustomerStage .orb-3{width:280px;height:280px;background:#ffd9a0;top:32%;right:14%;opacity:.45;animation:orbC 17s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(60px,40px,0) scale(1.12)}66%{transform:translate3d(-30px,70px,0) scale(.94)}}
@keyframes orbB{0%,100%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(-70px,-50px,0) scale(1.1)}70%{transform:translate3d(30px,-80px,0) scale(.92)}}
@keyframes orbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-50px,40px,0) scale(1.18)}}

#groceryCustomerStage .auth-hero-banner{margin-bottom:30px;animation:heroIn .7s cubic-bezier(.22,1,.36,1) both}
#groceryCustomerStage .auth-hero-banner h1{
 font-family:Georgia,'Times New Roman',serif;
 font-size:clamp(30px,5.2vw,50px);
 font-weight:400;
 letter-spacing:-.035em;
 line-height:1.05;
 margin:0;
 color:#20301f;
 text-shadow:0 2px 24px rgba(255,255,255,.65);
}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Glass card */
#groceryCustomerStage .auth-box{
 position:relative;z-index:2;
 width:100%;max-width:440px;
 margin:0 auto;
 padding:34px 30px 30px;
 background:rgba(255,255,255,.72);
 backdrop-filter:blur(26px) saturate(180%);
 -webkit-backdrop-filter:blur(26px) saturate(180%);
 border:1px solid rgba(255,255,255,.8);
 border-radius:26px;
 box-shadow:
  0 28px 64px -22px rgba(70,45,20,.34),
  0 1px 0 rgba(255,255,255,.9) inset,
  0 -1px 0 rgba(255,255,255,.5) inset;
 animation:cardIn .72s cubic-bezier(.22,1,.36,1) .12s both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Fields */
#groceryCustomerStage .auth-box label{
 display:block;
 font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:#7b6b55;margin:0 0 8px;
}
#groceryCustomerStage .auth-box input[type=tel],
#groceryCustomerStage .auth-box input[type=text],
#groceryCustomerStage .auth-box input[type=number]{
 width:100%;box-sizing:border-box;
 padding:16px 18px;
 font-size:16px;font-weight:500;
 color:#22301f;
 border-radius:15px;
 border:1.5px solid #e6d7bd;
 background:rgba(255,255,255,.78);
 transition:border-color .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,transform .28s,background .28s;
}
#groceryCustomerStage .auth-box input::placeholder{color:#b6a68c;font-weight:400}
#groceryCustomerStage .auth-box input:focus{
 outline:none;
 border-color:#0f6b3d;
 background:#fff;
 transform:translateY(-2px);
 box-shadow:0 0 0 4px rgba(15,107,61,.14),0 14px 32px -14px rgba(15,107,61,.42);
}

/* Primary button — gradient + sheen */
#groceryCustomerStage .primary.full{
 width:100%;height:54px;
 margin-top:18px;
 border:none;border-radius:15px;
 font-size:15px;font-weight:700;letter-spacing:.01em;
 color:#fff;cursor:pointer;
 position:relative;overflow:hidden;
 background:linear-gradient(135deg,#158a4d 0%,#0c5c33 100%);
 box-shadow:0 16px 32px -12px rgba(15,107,61,.58),0 1px 0 rgba(255,255,255,.28) inset;
 transition:transform .3s cubic-bezier(.22,1.25,.36,1),box-shadow .3s,filter .3s;
}
#groceryCustomerStage .primary.full:hover{
 transform:translateY(-2px);
 box-shadow:0 22px 42px -14px rgba(15,107,61,.62);
 filter:saturate(1.08);
}
#groceryCustomerStage .primary.full:active{transform:translateY(0) scale(.985);box-shadow:0 10px 20px -10px rgba(15,107,61,.5)}
#groceryCustomerStage .primary.full::after{
 content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
 transform:skewX(-18deg);
 transition:left .65s cubic-bezier(.22,1,.36,1);
}
#groceryCustomerStage .primary.full:hover::after{left:135%}

/* Divider */
#groceryCustomerStage .social-divider{
 margin:22px 0 18px;
 font-size:10px;font-weight:800;letter-spacing:.16em;
 color:#9a8a72;
}
#groceryCustomerStage .social-divider:before,
#groceryCustomerStage .social-divider:after{border-bottom:1px solid #e2d2b6}

/* Six-box OTP */
#groceryCustomerStage .otp-digit-group{
 display:flex;gap:10px;justify-content:center;
 margin:18px 0 6px;
}
#groceryCustomerStage .otp-box{
 width:50px;height:60px;
 min-width:0;flex:0 1 50px;
 text-align:center;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
 font-size:25px;font-weight:700;
 color:#20301f;
 border-radius:14px;
 border:1.5px solid #e6d7bd;
 background:rgba(255,255,255,.82);
 padding:0!important;
 transition:border-color .22s,box-shadow .22s,transform .22s cubic-bezier(.22,1.25,.36,1),background .22s;
}
#groceryCustomerStage .otp-box:focus{
 outline:none;
 border-color:#0f6b3d;
 background:#fff;
 transform:translateY(-3px) scale(1.05);
 box-shadow:0 0 0 4px rgba(15,107,61,.16),0 14px 26px -12px rgba(15,107,61,.5);
}
#groceryCustomerStage .otp-box.filled{
 border-color:#128248;
 background:linear-gradient(180deg,#f2fbf5,#e4f5ea);
 color:#0b5730;
}
#groceryCustomerStage .otp-box.active{border-color:#0f6b3d}

#groceryCustomerStage .otp-helper{margin-top:16px}
#groceryCustomerStage .test-otp-notice{
 border-radius:12px;border:1px solid #eddcb5;
 background:linear-gradient(180deg,#fff8e8,#fff2d6);
 margin:14px 0 4px;
}


.admin-nav-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;margin:20px 0 25px;border-bottom:1px solid var(--line)}
.admin-nav-btn{padding:10px 16px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;background:#eae5d6;color:#3d4838;transition:all .15s}
.admin-nav-btn.active{background:var(--green);color:#fff}
.admin-nav-btn:hover:not(.active){background:#ded8c5}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:28px}
.kpi-card{background:#fffef9;border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.kpi-card small{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}
.kpi-card strong{font-size:24px;font-family:Manrope,sans-serif;color:var(--ink)}
.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.02em}
.badge.green{background:#e2f0de;color:#1e6a32}
.badge.orange{background:#fde8df;color:#c04011}
.badge.blue{background:#e3f0f7;color:#19618a}
.badge.gray{background:#ebebe8;color:#5a5e58}
.audit-list{display:flex;flex-direction:column;gap:12px}
.audit-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;background:#fffef9;border:1px solid var(--line);border-radius:8px}
.audit-item div strong{font-size:13px;display:block;margin-bottom:2px}
.audit-item div p{font-size:11px;color:var(--muted);margin:0}
.audit-item time{font-size:11px;color:#858f7e;white-space:nowrap}
.backup-card{background:#f5f0e1;border:1px solid #d4c8ad;border-radius:12px;padding:26px;margin-bottom:24px}
.backup-card h3{font-family:Georgia,serif;font-size:22px;margin:0 0 10px}
.backup-card p{font-size:13px;color:#545e4c;margin:0 0 18px;line-height:1.6}
.backup-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.client-chip{display:inline-flex;align-items:center;gap:6px;background:#fff3eb;color:#be3c0e;padding:6px 12px;border-radius:20px;font-weight:700;font-size:11px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kpi-grid{grid-template-columns:1fr}}

.store-announcement{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 4%;background:#1d2920;color:#e8f0e5;font-size:11px;font-weight:600;letter-spacing:.02em}
.store-announcement span{color:#cedacb}
.store-announcement .staff-link{color:#d6bf94;font-size:11px;text-decoration:none;padding:3px 8px;border-radius:4px;background:#2d3e32;transition:background .2s}
.store-announcement .staff-link:hover{background:#3b5041;color:#fff}
@media(max-width:700px){.store-announcement{font-size:9px;padding:8px 12px}.store-announcement span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Head Account Link: same footprint as the Basket button */
.head-account{display:inline-flex!important;align-items:center;text-decoration:none}
.head-account .client-chip,
.head-account .client-chip.guest{
 display:inline-flex;align-items:center;gap:9px;
 padding:13px 16px;
 border-radius:9px;
 font-size:12px;font-weight:700;
 background:#0f6b3d;
 color:#fff;
 border:1px solid #0b5730;
 box-shadow:0 2px 6px #0f6b3d2e;
 transition:background .2s,transform .2s,box-shadow .2s;
 white-space:nowrap;
}
.head-account .client-chip:hover,
.head-account .client-chip.guest:hover{background:#0b5a33;transform:translateY(-1px);box-shadow:0 5px 12px #0f6b3d40}
.head-account .client-chip:active{transform:translateY(0)}
.head-account .client-chip svg{width:15px;height:15px;flex-shrink:0}
.desktop-cart{display:inline-flex!important}

@media(max-width:700px){
 .head-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
 .desktop-cart{padding:8px 12px;font-size:11px}
 .head-account .client-chip,
 .head-account .client-chip.guest{padding:8px 12px;font-size:11px;gap:7px}
}


/* Quick-Commerce Product Gallery & Section Shelves */
.gallery-card{position:relative;background:#fff;border:1px solid #e8e5dc;border-radius:14px;padding:12px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #1c2e2012}
.gallery-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.gallery-select-tag{font-size:9px;font-weight:800;color:#9b4e18;background:#fef4eb;padding:2px 8px;border-radius:4px;letter-spacing:.03em;text-transform:lowercase}
.wishlist-btn{background:rgba(255,255,255,0.92);border:1px solid #e7e2d6;color:#94a3b8;cursor:pointer;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:0 1px 3px rgba(0,0,0,0.06);position:relative;z-index:2}
.wishlist-btn:hover{color:#e11d48;border-color:#fecdd3;background:#fff;transform:scale(1.15);box-shadow:0 4px 10px rgba(225,29,72,0.18)}
.wishlist-btn.active{color:#e11d48 !important;background:#fff1f2 !important;border-color:#fecdd3 !important;box-shadow:0 2px 6px rgba(225,29,72,0.18)}
.wishlist-btn.active svg{fill:#e11d48 !important;stroke:#e11d48 !important}

.pdp-circle-btn[data-action="wishlist"].active{color:#e11d48 !important;background:#fff1f2 !important;border:1px solid #fecdd3 !important;box-shadow:0 2px 8px rgba(225,29,72,0.18)}
.pdp-circle-btn[data-action="wishlist"].active svg{fill:#e11d48 !important;stroke:#e11d48 !important}

.wishlist-btn.heart-pop,
.pdp-circle-btn[data-action="wishlist"].heart-pop{animation:heartPopBounce .48s cubic-bezier(0.175, 0.885, 0.32, 1.275) both}

@keyframes heartPopBounce{
 0%{transform:scale(1);}
 22%{transform:scale(1.45) rotate(-10deg);}
 45%{transform:scale(0.85) rotate(6deg);}
 70%{transform:scale(1.18) rotate(-3deg);}
 88%{transform:scale(0.96) rotate(1deg);}
 100%{transform:scale(1) rotate(0deg);}
}

.wishlist-btn.heart-pop::after,
.pdp-circle-btn[data-action="wishlist"].heart-pop::after{
 content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #e11d48;opacity:.85;pointer-events:none;animation:heartPulseRing .48s ease-out forwards;
}

@keyframes heartPulseRing{
 0%{transform:scale(.7);opacity:.9;}
 100%{transform:scale(1.75);opacity:0;}
}
.gallery-img-wrap{background:#f8f7f2;border-radius:10px;height:140px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:10px}
.gallery-img-wrap img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .25s ease}
.gallery-img-wrap:hover img{transform:scale(1.06)}
.gallery-price-line{display:flex;align-items:baseline;gap:6px;margin:2px 0}
.price-chip{font-family:Manrope,sans-serif;font-size:15px;font-weight:800;color:#183b27}
.gallery-mrp{font-size:11px;color:#9ca3af;text-decoration:line-through}
.gallery-save-tag{display:inline-block;font-size:10px;font-weight:800;color:#15803d;margin-bottom:4px}
.gallery-name{font-size:12px;font-weight:700;color:#222a24;text-align:left;line-height:1.4;margin:2px 0 4px;padding:0;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;border:none;background:none;cursor:pointer}
.gallery-name:hover{color:var(--orange)}
.gallery-pack{font-size:10px;color:#78847b;margin-bottom:8px;display:block}
.gallery-perks{display:flex;flex-direction:column;gap:3px;font-size:9px;color:#6b7280;margin-bottom:12px;padding:6px;background:#f9fafb;border-radius:6px}
.gallery-card-actions{margin-top:auto}
.gallery-card-actions .add{width:100%;border:1.5px solid #e11d48;color:#e11d48;background:#fff;border-radius:8px;font-size:12px;font-weight:800;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;transition:all .15s ease}
.gallery-card-actions .add:hover{background:#fff1f2}
.gallery-card-actions .qty{width:100%;border:1.5px solid #e11d48;background:#fff;color:#e11d48;border-radius:8px;height:36px}
.gallery-card-actions .qty button{color:#e11d48;font-weight:800}

/* Shop Category Shelf Rows */
.shop-sections-container{display:flex;flex-direction:column;gap:34px}
.category-shelf-section{background:#ffffff;border:1px solid #e8e4d8;border-radius:16px;padding:22px;box-shadow:0 3px 12px #00000004}
.shelf-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #f0ede4}
.shelf-header-left{display:flex;align-items:center;gap:10px}
.shelf-indicator{width:10px;height:24px;border-radius:4px;display:inline-block}
.shelf-header-left h3{font-family:Georgia,serif;font-size:20px;font-weight:600;margin:0;color:#202820}
.shelf-count{font-size:11px;color:#859085;font-weight:600;background:#f4f1e8;padding:2px 8px;border-radius:12px}
.shelf-view-all{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--orange);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s}
.shelf-view-all:hover{background:#fdf2ec}
.gallery-shelf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.gallery-shelf-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.gallery-shelf-row{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px;scroll-snap-type:x proximity;margin:0 -10px;padding-left:10px;padding-right:10px}}
@media(max-width:768px){.gallery-shelf-row>.gallery-card{flex:0 0 170px;scroll-snap-align:start}}

/* Zepto Style Full Product Detail Dialog / Screen */
dialog.wide{width:min(680px,calc(100% - 24px));padding:0;border-radius:24px;overflow:hidden;background:#f7f6f0;border:none;box-shadow:0 25px 80px #00000040}
dialog.wide .modal-head{display:none}
.product-detail-container{display:flex;flex-direction:column;max-height:88dvh;overflow-y:auto;scroll-behavior:smooth;padding-bottom:80px;background:#f8f7f2}
.pdp-top-bar{position:sticky;top:0;z-index:20;background:#ffffffea;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #ebe7dc}
.pdp-circle-btn{width:36px;height:36px;border-radius:50%;background:#f3efe4;border:none;cursor:pointer;display:grid;place-items:center;color:#333;transition:background .15s}
.pdp-circle-btn:hover{background:#e8e1cf}
.pdp-mini-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pdp-mini-thumb{width:34px;height:34px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid #e8e3d5}
.pdp-mini-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:240px}
.pdp-mini-title span{font-size:11px;color:#183b27;font-weight:700}
.pdp-mini-title del{font-size:10px;color:#999;margin-left:4px}
.pdp-top-actions{display:flex;gap:8px}

.pdp-hero-gallery{background:#ffffff;padding:24px 20px 16px;text-align:center;border-bottom:1px solid #ece7dc}
.pdp-img-stage{position:relative;display:inline-block;width:100%;max-width:320px;height:240px}
.pdp-main-image{width:100%;height:100%;object-fit:contain}
.pdp-hero-discount{position:absolute;top:0;left:0;background:#15803d;color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px}
.pdp-gallery-dots{display:flex;gap:6px;justify-content:center;margin-top:16px}
.pdp-dot{width:6px;height:6px;border-radius:50%;background:#d8d2c4}
.pdp-dot.active{width:18px;border-radius:10px;background:#2d3a30}

.pdp-card{background:#ffffff;margin:12px 16px 0;padding:18px 20px;border-radius:16px;border:1px solid #ebe6da;box-shadow:0 2px 8px #00000004}
.pdp-core-card{margin-top:12px}
.pdp-brand-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pdp-select-badge{font-size:10px;font-weight:800;color:#78350f;background:#fef3c7;padding:3px 8px;border-radius:4px}
.pdp-brand-name{font-size:11px;font-weight:800;letter-spacing:.05em;color:#78867a;display:inline-block;margin:6px 0 2px}
.pdp-title{font-family:Georgia,serif;font-size:22px;font-weight:500;line-height:1.3;margin:4px 0 6px;color:#18221b}
.pdp-pack-size{font-size:12px;color:#727e74;margin-bottom:14px}
.pdp-price-wrap{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.pdp-prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pdp-price{font-family:Manrope,sans-serif;font-size:26px;font-weight:800;color:#172e21}
.pdp-mrp{font-size:13px;color:#89958c}
.pdp-tax-note{font-size:11px;color:#94a3b8}
.pdp-savings-badge{background:#eef7ee;color:#15803d;border:1px solid #ccebd0;font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px}
.pdp-cashback-strip{display:flex;align-items:center;gap:8px;background:#fdf6e7;border:1px solid #f3e2b9;color:#854d0e;padding:10px 14px;border-radius:10px;font-size:12px}

.pdp-badges-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 16px 0}
.pdp-usp-item{background:#fff;border:1px solid #ebe6da;border-radius:12px;padding:12px 14px;display:flex;align-items:flex-start;gap:12px}
.pdp-usp-icon-wrap{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.pdp-usp-item strong{font-size:12px;display:block;margin-bottom:2px;color:#1d2920}
.pdp-usp-item small{font-size:10px;color:#78867a;line-height:1.4;display:block}

.pdp-section-header{font-family:Georgia,serif;font-size:18px;margin:0 0 12px;color:#1c2920}
.pdp-section-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pdp-serve-badge{font-size:10px;font-weight:700;color:#6b7280;background:#f3f4f6;padding:3px 8px;border-radius:6px}
.pdp-desc-text{font-size:13px;color:#526155;line-height:1.6;margin:0 0 16px}
.pdp-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#faf8f2;border-radius:10px;padding:12px;margin-bottom:14px}
.pdp-meta-cell small{font-size:9px;color:#88948a;font-weight:800;display:block;margin-bottom:4px;letter-spacing:.04em}
.pdp-meta-cell strong{font-size:12px;color:#1e2e22}
.pdp-perks-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pdp-perk-box{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f5f3ec;border-radius:10px}
.pdp-perk-box span{font-size:18px}
.pdp-perk-box strong{font-size:11px;display:block}
.pdp-perk-box small{font-size:9px;color:#7a867c}
.pdp-ingredients{font-size:11px;color:#657368;border-top:1px solid #f0ede4;padding-top:10px}

/* Nutritional breakdown pills & table */
.pdp-nutrition-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pdp-nut-pill{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600}
.pdp-nut-pill.fire{background:#fff1f2;color:#e11d48}
.pdp-nut-pill.protein{background:#f3e8ff;color:#7e22ce}
.pdp-nut-pill.carbs{background:#ecfeff;color:#0e7490}
.pdp-nut-pill.fats{background:#fef9c3;color:#a16207}
.pdp-nutrition-table{display:flex;flex-direction:column;gap:8px}
.pdp-nut-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f3efe6;font-size:12px}
.pdp-nut-row:last-child{border-bottom:none}
.nut-label{color:#64748b}
.nut-value{color:#0f172a}

/* Similar Products Rail */
.pdp-rail-card{padding:18px 16px}
.pdp-rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.pdp-rail-head h3{font-family:Georgia,serif;font-size:18px;margin:0;color:#18221b}
.pdp-rail-sub{font-size:10px;color:#78867a;font-weight:600}
.pdp-horizontal-rail{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px;scroll-snap-type:x proximity}
.pdp-horizontal-rail>.gallery-card{flex:0 0 160px;scroll-snap-align:start}

/* Sticky Bottom Action Bar */
.pdp-sticky-bar{position:fixed;bottom:0;left:0;right:0;background:#ffffff;box-shadow:0 -6px 20px #00000012;padding:12px 20px calc(12px + var(--store-safe-bottom));display:flex;justify-content:space-between;align-items:center;z-index:30}
.pdp-sticky-price strong{font-family:Manrope,sans-serif;font-size:22px;color:#1c2d22;display:block}
.pdp-sticky-price del{font-size:11px;color:#9ca3af}
.pdp-sticky-actions-group{
 display:flex;
 align-items:center;
 gap:8px;
}

.pdp-sticky-action{
 display:flex;
 align-items:center;
}

.sticky-add{min-width:110px;background:#e11d48!important;color:#fff!important;border:none!important;font-size:13px;font-weight:800;border-radius:10px;padding:11px 18px;box-shadow:0 3px 10px #e11d4835;cursor:pointer;white-space:nowrap;transition:all .18s ease}
.sticky-add:hover{background:#be123c!important;transform:translateY(-1px)}
.sticky-qty{min-width:110px;height:42px;border-radius:10px;border:2px solid #e11d48;background:#fff1f2}
.sticky-qty button{font-size:18px;color:#e11d48;font-weight:800}
.sticky-qty span{font-size:14px;color:#e11d48;font-weight:800}

.pdp-btn-basket{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 background:#f5f2e8;
 color:#253d2b;
 border:1.5px solid #d9d2be;
 border-radius:10px;
 padding:10px 14px;
 font-size:12px;
 font-weight:700;
 cursor:pointer;
 transition:all .18s ease;
 white-space:nowrap;
 text-decoration:none!important;
}

.pdp-btn-basket:hover{
 background:#26432b;
 color:#ffffff;
 border-color:#26432b;
 transform:translateY(-1px);
}

.pdp-btn-basket svg{
 width:15px;
 height:15px;
}

.pdp-btn-checkout{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 background:#cf3907;
 color:#ffffff!important;
 border:none;
 border-radius:10px;
 padding:11px 18px;
 font-size:13px;
 font-weight:800;
 cursor:pointer;
 box-shadow:0 3px 12px #cf390740;
 transition:all .18s ease;
 white-space:nowrap;
 text-decoration:none!important;
}

.pdp-btn-checkout:hover{
 background:#e0430e;
 transform:translateY(-1px);
 box-shadow:0 5px 16px #cf390760;
}

.pdp-btn-checkout svg{
 width:13px;
 height:13px;
}

@media(max-width:600px){
 .pdp-sticky-bar{
  padding:10px 12px calc(10px + var(--store-safe-bottom))!important;
  gap:8px;
 }
 .pdp-sticky-price strong{font-size:18px}
 .pdp-sticky-actions-group{gap:5px}
 .sticky-add{min-width:82px;padding:9px 12px;font-size:12px}
 .sticky-qty{min-width:82px;height:38px}
 .sticky-qty button{font-size:16px}
 .sticky-qty span{font-size:13px}
 .pdp-btn-basket{padding:9px 10px;font-size:11px;gap:4px}
 .pdp-btn-checkout{padding:9px 12px;font-size:12px;gap:4px}
}

/* ====================================================================
   Modern Delivery Address & Pin Map Modal
   ==================================================================== */
/* Dialog container enhancements specifically for address modal */
dialog.address-dialog{
 width:min(680px,calc(100% - 24px))!important;
 max-height:88dvh!important;
 max-height:88vh;
 padding:20px 22px!important;
 overflow-y:auto!important;
 overscroll-behavior:contain;
 border-radius:18px!important;
 box-sizing:border-box!important;
}
dialog.address-dialog::-webkit-scrollbar{width:6px}
dialog.address-dialog::-webkit-scrollbar-thumb{background:#00000022;border-radius:10px}

/* ============================================================
   Address picker — same design language as the auth / login screen
   (cream stage, white card, Georgia headings, orange eyebrow)
   ============================================================ */
.modern-address-form{display:flex;flex-direction:column;gap:8px;margin-top:0;width:100%;box-sizing:border-box}

/* One shared panel style for both the map step and the details step */
.addr-panel{
 width:100%;box-sizing:border-box;
 background:#ffffff;
 border:1px solid #dfd8c7;
 border-radius:16px;
 padding:14px 15px;
 box-shadow:0 15px 35px #1a2e1d10;
 display:flex;flex-direction:column;gap:8px;
 animation:cardRise .45s ease both;
}
.addr-panel:nth-child(2){animation-delay:.06s}

.addr-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.addr-panel-title{min-width:0}
.addr-panel-title .eyebrow{color:var(--orange);display:block;margin-bottom:2px}
.addr-panel-title h3{font-family:Georgia,serif;font-weight:400;font-size:19px;line-height:1.2;letter-spacing:-.02em;color:#233a30;margin:0}
.addr-panel-sub{margin:-2px 0 0;font-size:11.5px;color:#646e5e;line-height:1.4}

/* Map Place Search Bar & Dropdown */
.map-search-bar{position:relative;display:flex;align-items:center;background:#f7f5ed;border:1.5px solid #d6cfbe;border-radius:12px;padding:1px 10px;transition:border-color .18s,box-shadow .18s,background .18s;width:100%;box-sizing:border-box}
.map-search-bar:focus-within{background:#ffffff;border-color:var(--green);box-shadow:0 0 0 3px #36543a18}
.map-search-icon{display:inline-flex;align-items:center;justify-content:center;color:#6b7868;margin-right:6px;flex-shrink:0}
.map-search-icon svg{width:15px;height:15px}
.map-search-bar input{flex:1;min-width:0;border:none!important;background:transparent!important;padding:7px 4px!important;font-size:12px;color:#1e2e21;outline:none!important;box-shadow:none!important}
.map-search-clear{background:none;border:none;color:#859283;font-size:18px;font-weight:700;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0}
.map-search-clear:hover{color:#223023}

.map-search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#ffffff;border:1px solid #d4cdbc;border-radius:12px;box-shadow:0 12px 28px #00000026;max-height:200px;overflow-y:auto;z-index:1005}
.map-search-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-bottom:1px solid #f1ece1;cursor:pointer;transition:background .15s ease}
.map-search-item:last-child{border-bottom:none}
.map-search-item:hover{background:#f4f9f4}
.map-search-item.searching,.map-search-item.empty{cursor:default;color:#788677;font-size:12px;padding:12px}
.map-search-item.searching:hover,.map-search-item.empty:hover{background:#fff}
.search-item-icon{font-size:15px;line-height:1;margin-top:2px;flex-shrink:0}
.search-item-info strong{display:block;font-size:12px;font-weight:700;color:#18261b}
.search-item-info small{display:block;font-size:11px;color:#6d7a6c;margin-top:1px;line-height:1.35;word-break:break-word}

.btn-locate-gps{display:inline-flex;align-items:center;gap:5px;background:#e9f5ed;color:#1c6932;border:1.5px solid #a8dcba;border-radius:30px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #1c693214;white-space:nowrap;flex-shrink:0}
.btn-locate-gps:hover{background:#d5edd9;border-color:#1c6932;transform:translateY(-1px);box-shadow:0 4px 10px #1c693225}
.btn-locate-gps svg{width:13px;height:13px}
.gps-pulse{width:7px;height:7px;background:#1c6932;border-radius:50%;display:inline-block;animation:locatePulse 1.6s infinite}
@keyframes locatePulse{0%{transform:scale(0.8);opacity:1}50%{transform:scale(1.4);opacity:0.4}100%{transform:scale(0.8);opacity:1}}

/* Fluid map frame that adjusts cleanly by aspect-ratio */
.map-frame-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;min-height:148px;max-height:196px;border-radius:12px;overflow:hidden;border:1.5px solid #dcd7ca;box-shadow:inset 0 2px 6px #0000000d,0 2px 10px #00000008;box-sizing:border-box}
#addressForm #map{height:100%!important;width:100%!important;border-radius:0!important;border:none!important}

.geo-status-banner{position:absolute;bottom:6px;left:6px;right:6px;background:rgba(255,255,255,0.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #d5cfbf;border-radius:10px;padding:5px 9px;display:flex;align-items:center;gap:6px;font-size:10px;color:#2c3a2f;box-shadow:0 4px 12px #00000018;z-index:999;transition:all .25s ease;pointer-events:none;box-sizing:border-box}
.geo-status-icon{font-size:12px;flex-shrink:0}
.geo-status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}

/* GPS readout — auto-filled from the map, still editable as a fallback */
.coords-row{display:flex;align-items:center;gap:6px;background:#f9f7f2;border-radius:10px;padding:4px 8px;border:1px solid #ece7db;box-sizing:border-box}
.coords-prefix{font-size:8.5px;font-weight:800;letter-spacing:.06em;color:#879284;flex-shrink:0;text-transform:uppercase}
.coords-row input{flex:1;min-width:0;box-sizing:border-box;background:#ffffff;border:1px solid #d2cbbe;border-radius:7px;padding:4px 7px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#243226}
.coords-row input:focus{border-color:#1c6932;outline:none}
.coords-row input::-webkit-outer-spin-button,.coords-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.coords-row input[type=number]{-moz-appearance:textfield}

/* Contact / address fields — tight rhythm, matches auth-box inputs */
.addr-panel label{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#505c4e;display:flex;flex-direction:column;gap:2px;text-transform:uppercase}
.addr-panel input{border:1.5px solid #d6d0c2;border-radius:10px;padding:8px 11px;font-size:12.5px;transition:border-color .15s,box-shadow .15s;background:#fdfcf9;width:100%;box-sizing:border-box}
.addr-panel input:focus{border-color:var(--green);box-shadow:0 0 0 3px #36543a18;background:#fff;outline:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;box-sizing:border-box}

.address-type-selector{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.selector-title{font-size:10px;font-weight:800;letter-spacing:.04em;color:#505c4e;text-transform:uppercase}
.address-tag-pills{display:flex;gap:6px;width:100%;box-sizing:border-box}
.addr-pill{flex:1;min-width:0;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#fff;border:1px solid #d9d5c5;border-radius:30px;font-size:11.5px;font-weight:700;color:#283626;cursor:pointer;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 3px 10px #00000008;box-sizing:border-box}
.addr-pill:hover{transform:translateY(-2px);border-color:#beb7a4}
.addr-pill.active{background:#e7f4eb;border-color:#1c6932;color:#1c6932;box-shadow:0 4px 12px #1c693226}
.addr-pill .pill-icon{font-size:13px;line-height:1}

.address-action-row{display:flex;gap:8px;margin-top:2px;width:100%;box-sizing:border-box}
.btn-adjust{flex:1;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;font-size:12.5px;font-weight:800;border-radius:12px;transition:all .18s ease;cursor:pointer;text-align:center;box-sizing:border-box}
.btn-adjust.primary{background:var(--green);color:#fff;border:none;box-shadow:0 4px 12px #26432b35}
.btn-adjust.primary:hover{background:#1f3623;box-shadow:0 6px 16px #26432b45;transform:translateY(-1px)}
.btn-adjust.secondary{background:#f1eee4;color:#495444;border:1.5px solid #d4cdbe}
.btn-adjust.secondary:hover{background:#e5e1d5;border-color:#bcb4a3}

/* ============================================================
   Customer account — same tokens as the auth screen
   ============================================================ */
.customer-hero{
 display:flex;align-items:center;gap:16px;flex-wrap:wrap;
 background:linear-gradient(180deg,#fffcf5 0%,#f6f1e3 100%);
 border:1px solid #e5dfd0;border-radius:18px;
 padding:20px 22px;margin:0 0 12px;
 box-shadow:0 10px 30px #00000006;
 animation:cardRise .45s ease both;
}
.customer-hero-text{min-width:0;flex:1}
.customer-hero-text .eyebrow{color:var(--orange);display:block;margin-bottom:2px}
.customer-hero-text h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em;line-height:1.15;margin:0;color:#233a30}
.customer-contact{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0;font-size:12px;color:#646e5e}
.customer-contact span{display:inline-flex;align-items:center;gap:5px}

.customer-avatar{
 position:relative;width:76px;height:76px;flex-shrink:0;
 border-radius:50%;overflow:visible;
 box-shadow:0 8px 20px #1a2e1d1c,0 0 0 3px #fff,0 0 0 4.5px #dfd8c7;
 background:#e7f4eb;
}
.customer-avatar.lg{width:88px;height:88px}
.customer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-fallback{
 width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(140deg,#1c6932,#137c48);
 color:#fff;font-family:Georgia,serif;font-size:26px;letter-spacing:.02em;
}
.avatar-edit{
 position:absolute;right:-2px;bottom:-2px;
 width:26px;height:26px;border-radius:50%;
 background:var(--green);color:#fff;border:2px solid #fff;
 display:flex;align-items:center;justify-content:center;cursor:pointer;
 box-shadow:0 3px 8px #1a2e1d2e;transition:transform .18s ease;
}
.avatar-edit:hover{transform:scale(1.1)}
.avatar-edit svg{width:12px;height:12px}

.avatar-upload-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avatar-upload-actions{flex:1;min-width:180px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.avatar-pick{width:auto!important;flex:none;height:36px;font-size:12px;gap:6px;cursor:pointer}
.text-button{background:none;border:none;color:var(--green);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline}

.customer-panel{background:#ffffff;border:1px solid #dfd8c7;border-radius:16px;padding:6px 18px 8px;box-shadow:0 15px 35px #1a2e1d10;animation:cardRise .45s ease .06s both}

.customer-stat-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.customer-stat{flex:1;min-width:110px;background:#f9f7f2;border:1px solid #ece7db;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.customer-stat-value{font-family:Georgia,serif;font-size:22px;line-height:1.1;color:#233a30}
.customer-stat-label{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#788476}

.customer-menu{display:flex;flex-direction:column}
.customer-menu .profile-option{display:flex;align-items:center;gap:13px;padding:15px 2px;border-bottom:1px solid var(--line);text-align:left;width:100%;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;font:inherit;color:inherit;transition:background .18s ease}
.customer-menu .profile-option:last-child{border-bottom:none}
.customer-menu .profile-option:hover{background:#faf8f1}
.customer-menu .profile-option span{flex:1;min-width:0}
.customer-menu .profile-option b{display:block;font-size:13px;font-weight:800;color:#233a30}
.customer-menu .profile-option small{display:block;font-size:11px;color:#788476;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-menu .profile-option svg{width:19px;height:19px;flex-shrink:0;color:#1c6932}
.customer-menu .profile-option.danger svg{color:#c0392b}
.customer-menu .profile-option.danger b{color:#c0392b}
.opt-arrow{flex-shrink:0;color:#b3ab98;font-style:normal;font-size:15px}

/* Mobile Responsiveness for Phones: Zero cutoff, auto fluid aspect-ratio, full padding safety */
@media(max-width:700px){
 dialog.address-dialog{
  width:calc(100% - 16px)!important;
  max-height:92dvh!important;
  max-height:92vh;
  padding:14px 12px!important;
  border-radius:16px!important;
  margin:auto!important;
 }
 dialog.address-dialog .modal-head{margin-bottom:12px}
 dialog.address-dialog .modal-head h2{font-size:17px;letter-spacing:-0.01em}

 .modern-address-form{gap:7px}
 .addr-panel{padding:11px 12px;border-radius:14px;gap:7px}
 .addr-panel-head{gap:8px}
 .addr-panel-title h3{font-size:17px}
 .addr-panel-sub{font-size:11px;margin-top:0}
 .btn-locate-gps{padding:5px 9px;font-size:10px;gap:4px}

 /* Aspect-ratio 16:9 on mobile gives natural proportions without pushing form off-screen */
 .map-frame-wrapper{aspect-ratio:16 / 9;min-height:136px;max-height:176px;border-radius:10px}
 .geo-status-banner{bottom:5px;left:5px;right:5px;padding:4px 7px;font-size:9px}

 .coords-row{padding:3px 6px;gap:5px;border-radius:8px}
 .coords-row input{padding:3px 6px;font-size:10px}
 .coords-prefix{font-size:8px}

 .addr-panel label{font-size:9.5px;gap:2px}
 .addr-panel input{padding:7px 9px;font-size:12px;border-radius:9px}
 .form-row{gap:6px}

 .address-type-selector{gap:4px}
 .address-tag-pills{gap:5px}
 .addr-pill{height:34px;font-size:11px;padding:0 4px;border-radius:30px}

 .address-action-row{flex-direction:column;gap:6px}
 .btn-adjust{width:100%!important;height:40px;font-size:12px}

 .customer-hero{padding:16px;gap:12px;border-radius:16px}
 .customer-avatar{width:62px;height:62px}
 .customer-avatar.lg{width:74px;height:74px}
 .avatar-fallback{font-size:21px}
 .btn-edit-profile{width:100%!important;height:38px;font-size:12px}
 .customer-stat-row{gap:8px;padding:10px 0}
 .customer-stat{padding:8px 10px;min-width:90px}
 .customer-stat-value{font-size:18px}
 .customer-panel{padding:4px 12px 6px}
 .customer-menu .profile-option{padding:13px 2px;gap:11px}

 #groceryCustomerStage{padding:44px 14px 52px;border-radius:24px}
 #groceryCustomerStage .auth-box{padding:26px 18px 22px;border-radius:22px}
 #groceryCustomerStage .auth-hero-banner{margin-bottom:22px}
 #groceryCustomerStage .orb-1{width:260px;height:260px}
 #groceryCustomerStage .orb-2{width:230px;height:230px}
 #groceryCustomerStage .orb-3{width:180px;height:180px}
 #groceryCustomerStage .otp-digit-group{gap:6px}
 #groceryCustomerStage .otp-box{flex:1 1 0;width:auto;height:52px;font-size:21px;border-radius:12px}
 #groceryCustomerStage .primary.full{height:50px;font-size:14px}
}

@media(max-width:400px){
 .addr-panel-head{flex-wrap:wrap}
 .map-frame-wrapper{aspect-ratio:4 / 3;min-height:126px;max-height:162px}
}

/* ====================================================================
   Cohesive Typography & Clean Button Styling (Non-AI, Authentic Feel)
   ==================================================================== */
/* Human, balanced typography */
body{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif!important;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif!important;
 font-weight:700!important;
 letter-spacing:-0.025em!important;
}

.hero-content h1{
 font-family:Georgia,Cambria,"Times New Roman",serif!important;
 font-weight:400!important;
 letter-spacing:-0.035em!important;
}

/* Tighter, balanced margins between sections */
.section{margin:28px 0 32px!important}
.section-title{padding-bottom:10px!important;margin-bottom:14px!important}
.page{padding-top:16px!important}
.narrow>h1{margin-bottom:16px!important;font-size:28px!important}

/* Section action buttons: 'See everything', 'View all', 'Browse store' */
.btn-section-action{
 display:inline-flex;
 align-items:center;
 gap:6px;
 background:#f5f2e8;
 color:#2b4632;
 border:1.5px solid #d9d2be;
 border-radius:24px;
 padding:7px 16px;
 font-size:12px;
 font-weight:700;
 text-decoration:none!important;
 transition:all .18s cubic-bezier(0.16, 1, 0.3, 1);
 box-shadow:0 2px 6px #00000008;
 white-space:nowrap;
 cursor:pointer;
}

.btn-section-action:hover{
 background:#26432b;
 color:#ffffff!important;
 border-color:#26432b;
 transform:translateY(-1px);
 box-shadow:0 4px 12px #26432b30;
}

.btn-section-action svg{
 width:13px;
 height:13px;
 transition:transform .18s ease;
}

.btn-section-action:hover svg{
 transform:translateX(2px);
}

/* Shelf 'View all' action button */
.shelf-view-all{
 display:inline-flex!important;
 align-items:center!important;
 gap:6px!important;
 background:#fff6f1!important;
 color:#cf3907!important;
 border:1.5px solid #fbdacf!important;
 border-radius:20px!important;
 padding:6px 14px!important;
 font-size:11.5px!important;
 font-weight:700!important;
 transition:all .18s ease!important;
 box-shadow:0 2px 6px #cf390710!important;
}

.shelf-view-all:hover{
 background:#cf3907!important;
 color:#ffffff!important;
 border-color:#cf3907!important;
 transform:translateY(-1px)!important;
 box-shadow:0 4px 12px #cf390728!important;
}

/* Dedicated Back Navigation Buttons ('← Back to basket', '← Back to store', '← Continue Shopping') */
.btn-back-nav{
 display:inline-flex;
 align-items:center;
 gap:8px;
 background:#f3efe4;
 color:#324335;
 border:1.5px solid #dcd4c1;
 border-radius:10px;
 padding:8px 16px;
 font-size:12.5px;
 font-weight:700;
 text-decoration:none!important;
 transition:all .18s ease;
 box-shadow:0 2px 6px #0000000a;
}

.btn-back-nav:hover{
 background:#e7e0cf;
 color:#172419;
 border-color:#b8ac95;
 transform:translateX(-2px);
 box-shadow:0 4px 10px #00000014;
}

.back-arrow-icon{
 font-size:15px;
 line-height:1;
 transition:transform .18s ease;
}

.btn-back-nav:hover .back-arrow-icon{
 transform:translateX(-2px);
}

/* Ensure mobile adjusts properly */
@media(max-width:700px){
 .btn-section-action{padding:5px 12px;font-size:11px;gap:4px}
 .btn-back-nav{padding:6px 12px;font-size:11.5px}
 .section{margin:20px 0 24px!important}
 .narrow>h1{font-size:24px!important}
}

/* ====================================================================
   Floating Sticky Cart & Checkout Bar (Always Visible on Cart Addition)
   ==================================================================== */
#cart-bar{
 display:block!important;
 position:fixed!important;
 bottom:20px!important;
 left:50%!important;
 transform:translateX(-50%)!important;
 width:min(620px,calc(100% - 28px))!important;
 z-index:150!important;
 pointer-events:none;
}

#cart-bar:empty{
 display:none!important;
}

.cart-floating-bar{
 pointer-events:auto;
 display:flex;
 align-items:center;
 justify-content:space-between;
 background:#1b2e21;
 color:#ffffff;
 padding:10px 14px;
 border-radius:16px;
 box-shadow:0 12px 32px #00000045,0 2px 8px #00000020;
 border:1.5px solid #36503c;
 animation:cartBarPop .25s cubic-bezier(0.16, 1, 0.3, 1);
 gap:12px;
}

@keyframes cartBarPop{
 from{opacity:0;transform:translateY(14px) scale(0.96)}
 to{opacity:1;transform:translateY(0) scale(1)}
}

.cart-bar-left{
 display:flex;
 flex-direction:column;
 gap:2px;
}

.cart-bar-badge{
 font-size:9.5px;
 font-weight:800;
 letter-spacing:.06em;
 color:#87b792;
 text-transform:uppercase;
}

.cart-bar-total{
 font-size:18px;
 font-weight:800;
 color:#ffffff;
 font-family:monospace;
 line-height:1.1;
}

.cart-bar-actions{
 display:flex;
 align-items:center;
 gap:8px;
}

.btn-cart-view{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:rgba(255,255,255,0.12);
 color:#e5ede6;
 border:1px solid rgba(255,255,255,0.2);
 border-radius:10px;
 padding:8px 14px;
 font-size:12px;
 font-weight:700;
 text-decoration:none!important;
 transition:all .18s ease;
 white-space:nowrap;
}

.btn-cart-view:hover{
 background:rgba(255,255,255,0.22);
 color:#ffffff;
}

.btn-cart-checkout{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 background:#cf3907;
 color:#ffffff!important;
 border:none;
 border-radius:10px;
 padding:9px 18px;
 font-size:13px;
 font-weight:800;
 text-decoration:none!important;
 box-shadow:0 4px 14px #cf390750;
 transition:all .18s ease;
 white-space:nowrap;
}

.btn-cart-checkout:hover{
 background:#e0430e;
 transform:translateY(-1px);
 box-shadow:0 6px 18px #cf390770;
}

.btn-cart-checkout svg{
 width:13px;
 height:13px;
}

/* Mobile bottom nav spacing protection */
@media(max-width:700px){
 #cart-bar{
  bottom:64px!important;
  width:calc(100% - 16px)!important;
 }
 .cart-floating-bar{
  padding:8px 10px;
  border-radius:14px;
  gap:8px;
 }
 .cart-bar-total{font-size:16px}
 .btn-cart-view{padding:7px 10px;font-size:11px}
 .btn-cart-checkout{padding:8px 12px;font-size:12px}
}





/* ═════════════════════════════════════════════════════════════════
   NABHO BAZAAR — LIVELY STOREFRONT SHELVES & ADVERTISING BANNERS
   ═════════════════════════════════════════════════════════════════ */

/* ── Trust & Feature Highlight Ribbon ── */
.shop-features-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #f8f6ed 0%, #fffbf2 50%, #f4f0e2 100%);
  border: 1px solid #e7e2d1;
  border-radius: 14px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-features-strip::-webkit-scrollbar { display: none; }
.shop-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2e4334;
  white-space: nowrap;
}
.shop-feature-item span {
  font-size: 15px;
}

/* ── Top Advertising Banner Showcase ── */
.shop-ad-deck {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.shop-ad-card {
  position: relative;
  border-radius: 16px;
  padding: 22px 24px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  overflow: hidden;
  box-shadow: 0 8px 24px #00000010;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid #ffffff25;
}
.shop-ad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px #00000018;
}
.shop-ad-card.ad-staples {
  background: linear-gradient(135deg, #18432b 0%, #296b44 55%, #3a8a5b 100%);
}
.shop-ad-card.ad-snacks {
  background: linear-gradient(135deg, #99320d 0%, #cf4d1d 55%, #ea6f32 100%);
}
.shop-ad-card.ad-dairy {
  background: linear-gradient(135deg, #0e4047 0%, #176570 55%, #2a8b99 100%);
}
.shop-ad-card.ad-cleaning {
  background: linear-gradient(135deg, #1c3654 0%, #2a5885 55%, #3d79b2 100%);
}
.shop-ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: #ffffff25;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 30px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  width: fit-content;
  border: 1px solid #ffffff30;
}
.shop-ad-content {
  position: relative;
  z-index: 2;
  margin-top: 14px;
}
.shop-ad-card h2, .shop-ad-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 6px 0 8px;
  color: #ffffff;
}
.shop-ad-card.ad-staples h2 {
  font-size: 28px;
}
.shop-ad-card p {
  font-size: 12px;
  line-height: 1.45;
  color: #f1f7f2;
  margin: 0 0 16px;
  max-width: 90%;
  opacity: 0.95;
}
.shop-ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #ffffff;
  color: #1a3224;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 14px #00000020;
  transition: all 0.2s ease;
  width: fit-content;
}
.shop-ad-btn:hover {
  background: #fdfaf0;
  transform: translateX(4px);
  color: #0b1f13;
}
.shop-ad-card.ad-snacks .shop-ad-btn { color: #842704; }
.shop-ad-card.ad-dairy .shop-ad-btn { color: #0a3339; }
.shop-ad-card.ad-cleaning .shop-ad-btn { color: #142a42; }

/* Decorative glow & stickers */
.shop-ad-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #ffffff18;
  filter: blur(25px);
  pointer-events: none;
}
.shop-ad-art-badge {
  position: absolute;
  bottom: -15px;
  right: -10px;
  font-size: 72px;
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  transform: rotate(-10deg);
}

/* ── Modern Top Category Filter Pills & Sort Bar ── */
.shop-cat-pills-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.shop-cat-pills-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.shop-sort-inline {
  flex: none;
}
.sort-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #ffffff;
  border: 1px solid #d9d4c1;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  color: #384236;
  box-shadow: 0 2px 6px #00000008;
  white-space: nowrap;
}
.sort-inline-label span {
  font-size: 11px;
  color: #6c7866;
}
.sort-inline-label select {
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: #1c4e32;
  cursor: pointer;
  outline: none;
  padding: 0;
}

/* ── Seamless Shop Layout: Flush Top Alignment ── */
.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 0;
  padding-top: 0;
}
.category-sidebar {
  margin: 0;
  margin-top: 0 !important;
  align-self: start;
}
.shop-results {
  margin: 0;
  margin-top: 0 !important;
  padding: 0;
}
.shop-sections-container {
  display: grid;
  gap: 20px;
}
.category-shelf-section {
  margin: 0;
  margin-top: 0 !important;
}
.category-shelf-section:first-child {
  margin-top: 0 !important;
}
.shelf-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e8e4d8;
  border-radius: 14px;
  margin-bottom: 16px;
}
.shelf-filter-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  color: #1d3625;
}
.shop-cat-pills-scroll::-webkit-scrollbar { display: none; }
.shop-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid #d9d4c1;
  border-radius: 999px;
  background: #ffffff;
  color: #384236;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px #00000008;
  flex: none;
}
.shop-cat-pill:hover {
  background: #f7f4ea;
  border-color: #a89f86;
  transform: translateY(-1px);
}
.shop-cat-pill.active {
  background: #1c4e32;
  color: #ffffff;
  border-color: #1c4e32;
  box-shadow: 0 4px 14px #1c4e3230;
}
.shop-cat-pill .cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.shop-cat-pill .pill-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #efeade;
  color: #324738;
  font-size: 11px;
  font-weight: 800;
}
.shop-cat-pill.active .pill-count {
  background: #ffffff30;
  color: #ffffff;
}

/* ── Refined Category Sidebar ── */
.category-sidebar {
  border-radius: 14px;
  border: 1px solid #ded9c7;
  overflow: hidden;
  box-shadow: 0 4px 14px #00000006;
}
.category-sidebar button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid #ede8d9;
  background: #fffdf8;
  color: #344033;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.category-sidebar button:last-child {
  border-bottom: none;
}
.category-sidebar button:hover {
  background: #f5f0e1;
  color: #163622;
  padding-left: 17px;
}
.category-sidebar button.active {
  background: #1e5436;
  color: #ffffff;
  font-weight: 800;
}
.category-sidebar button.active svg {
  stroke: #ffffff;
}

/* ── Responsive adjustments for banners ── */
@media (max-width: 1050px) {
  .shop-ad-deck {
    grid-template-columns: 1fr 1fr;
  }
  .shop-ad-card.ad-staples {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .shop-ad-deck {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
  .shop-ad-card {
    padding: 18px 20px;
    min-height: 160px;
  }
  .shop-ad-card h2, .shop-ad-card h3 {
    font-size: 21px;
  }
  .shop-features-strip {
    padding: 10px 14px;
    gap: 16px;
    margin-bottom: 16px;
  }
  .shop-feature-item {
    font-size: 11px;
  }
}


/* ═════════════════════════════════════════════════════════════════
   FRANCHISE OPPORTUNITIES PAGE STYLING
   ═════════════════════════════════════════════════════════════════ */
.franchise-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
.franchise-hero {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(135deg, #183e29 0%, #285e3f 50%, #153824 100%);
  border-radius: 20px;
  color: #ffffff;
  margin-bottom: 35px;
  box-shadow: 0 12px 35px #15382420;
}
.franchise-hero .eyebrow {
  color: #ffcf99;
  font-size: 11px;
  letter-spacing: 0.12em;
  display: inline-block;
  margin-bottom: 12px;
}
.franchise-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #fffef8;
}
.franchise-hero p {
  font-size: 16px;
  color: #dbe7df;
  max-width: 680px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.franchise-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.franchise-hero .primary {
  background: #f7ede0;
  color: #1a3826;
  font-weight: 800;
}
.franchise-hero .secondary {
  background: #ffffff20;
  border-color: #ffffff40;
  color: #ffffff;
}

/* Booklet Embed Card */
.booklet-section {
  background: #ffffff;
  border: 1px solid #e7e2d1;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 35px;
  box-shadow: 0 6px 20px #00000006;
}
.booklet-section-head {
  text-align: center;
  margin-bottom: 20px;
}
.booklet-section-head h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin: 0 0 8px;
  color: #1a3224;
}
.booklet-section-head p {
  color: #6a796e;
  font-size: 14px;
  margin: 0;
}
.canva-smart-embed {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  height: 0;
  padding-top: 141.4286%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fdfbf7;
}
.canva-smart-embed iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
}

/* Package Models Grid */
.franchise-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 35px;
}
.franchise-pkg-card {
  background: #ffffff;
  border: 1px solid #e2ded0;
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px #00000005;
  transition: transform 0.25s, box-shadow 0.25s;
}
.franchise-pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px #00000010;
}
.franchise-pkg-card.featured {
  border-color: #ba4825;
  box-shadow: 0 6px 24px #ba482518;
}
.franchise-pkg-card.selected-tier {
  border-color: #1c4e32 !important;
  box-shadow: 0 0 0 2.5px #1c4e32, 0 12px 30px rgba(28, 78, 50, 0.16) !important;
  transform: translateY(-4px);
}
.franchise-pkg-card.selected-tier .franchise-select-btn {
  background: #1c4e32 !important;
  color: #ffffff !important;
  border-color: #1c4e32 !important;
}
.franchise-pkg-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: #ba4825;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.franchise-pkg-name {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #1a3224;
}
.franchise-pkg-area {
  font-size: 12px;
  color: #6b7a6f;
  margin-bottom: 16px;
}
.franchise-pkg-fee {
  padding: 14px;
  background: #f7f5ed;
  border-radius: 10px;
  margin-bottom: 16px;
}
.franchise-pkg-fee small {
  display: block;
  font-size: 10px;
  color: #7d8b80;
  text-transform: uppercase;
  font-weight: 750;
}
.franchise-pkg-fee strong {
  font-size: 20px;
  color: #1c4e32;
}
.franchise-pkg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
  font-size: 12px;
  color: #3b4d40;
}
.franchise-pkg-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.franchise-pkg-list li span {
  color: #1c4e32;
  font-weight: 800;
}

/* Value Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 35px;
}
.pillar-card {
  background: #ffffff;
  border: 1px solid #e5e1d3;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 3px 12px #00000004;
}
.pillar-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.pillar-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
  color: #1d3625;
}
.pillar-card p {
  font-size: 12px;
  color: #65766a;
  line-height: 1.5;
  margin: 0;
}

/* Visual Proof Gallery */
.franchise-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 35px;
}
.franchise-visual-card {
  background: #ffffff;
  border: 1px solid #e5e1d3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px #00000006;
}
.franchise-visual-card img {
  width: 100%;
  height: auto;
  display: block;
}
.franchise-visual-card div {
  padding: 16px 20px;
}
.franchise-visual-card h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: #1a3224;
}
.franchise-visual-card p {
  font-size: 12px;
  color: #65766a;
  margin: 0;
}

/* Enquiry Form Card */
.franchise-form-card {
  background: linear-gradient(135deg, #fffdf8 0%, #f9f5e9 100%);
  border: 1px solid #dcd4be;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 8px 24px #00000008;
  max-width: 720px;
  margin: 0 auto;
}
.franchise-form-card h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin: 0 0 8px;
  text-align: center;
  color: #183e29;
}
.franchise-form-card p {
  text-align: center;
  color: #6c796e;
  font-size: 13px;
  margin: 0 0 24px;
}
.franchise-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.franchise-form-full {
  grid-column: 1 / -1;
}

/* Franchise Custom Size & Investment Calculator */
.franchise-calc-box {
  background: linear-gradient(145deg, #ffffff 0%, #fcfbf7 100%);
  border: 1.5px solid #dcd4be;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
.calc-header {
  margin-bottom: 24px;
  text-align: center;
}
.calc-header h3 {
  font-family: Georgia, serif;
  font-size: 26px;
  color: #1a3224;
  margin: 6px 0 8px;
}
.calc-header p {
  font-size: 13px;
  color: #617366;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.5;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 24px;
  align-items: stretch;
}
.calc-input-panel {
  background: #f7f5ed;
  border: 1px solid #e5e0cf;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #3d5042;
  font-weight: 700;
  margin-bottom: 12px;
}
.calc-label strong {
  font-size: 22px;
  color: #1c4e32;
  font-family: monospace;
}
.calc-slider {
  width: 100%;
  accent-color: #1c4e32;
  cursor: pointer;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.calc-quick-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.calc-preset-btn {
  flex: 1;
  min-width: 90px;
  background: #ffffff;
  border: 1px solid #d4cdbb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #2b3e30;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.calc-preset-btn:hover, .calc-preset-btn.active {
  background: #1c4e32;
  color: #ffffff;
  border-color: #1c4e32;
}
.calc-tier-badge {
  background: #ffffff;
  border: 1px solid #dfd8c7;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.calc-tier-pill {
  display: inline-block;
  background: #1c4e32;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.calc-tier-badge small {
  display: block;
  font-size: 11px;
  color: #6b7a6f;
}
.calc-output-panel {
  background: #ffffff;
  border: 1px solid #e2ded0;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.calc-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.calc-stat-item {
  background: #faf9f5;
  border: 1px solid #ede9dc;
  border-radius: 10px;
  padding: 12px;
}
.calc-stat-item small {
  display: block;
  font-size: 10px;
  color: #7d8b80;
  text-transform: uppercase;
  font-weight: 750;
  margin-bottom: 4px;
}
.calc-stat-item strong {
  display: block;
  font-size: 17px;
  color: #1a3224;
  margin-bottom: 2px;
}
.calc-stat-item span {
  font-size: 10px;
  color: #8b998e;
}
.calc-total-bar {
  background: linear-gradient(135deg, #f3f0e6 0%, #eae4d2 100%);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.calc-total-left small, .calc-total-right small {
  display: block;
  font-size: 10px;
  color: #637367;
  text-transform: uppercase;
  font-weight: 800;
}
.calc-total-left strong {
  font-size: 20px;
  color: #1c4e32;
}
.calc-total-right {
  text-align: right;
}
.calc-total-right strong {
  font-size: 17px;
  display: block;
}
.calc-royalty-tag {
  display: inline-block;
  background: #256a43;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 3px;
}
.calc-apply-btn {
  font-size: 14px;
  padding: 12px;
  font-weight: 750;
  cursor: pointer;
}

/* Franchise Model Selection in Application Form */
.franchise-model-select-wrap {
  margin-bottom: 20px;
}
.franchise-field-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #2b3e30;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.franchise-model-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.model-pill {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #dcd4be;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.model-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.model-pill.active {
  border-color: #1c4e32;
  background: #f0f7f2;
  box-shadow: 0 0 0 2px #1c4e3220;
}
.model-pill-body strong {
  display: block;
  font-size: 14px;
  color: #1b3826;
  margin-bottom: 2px;
}
.model-pill-body small {
  display: block;
  font-size: 10px;
  color: #637367;
}
.franchise-direct-wa {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #dcd4be;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: #4b5d4f;
  flex-wrap: wrap;
}
.franchise-direct-wa a {
  color: #1c4e32;
  font-weight: 750;
  text-decoration: underline;
}

/* Success modal styles */
.franchise-success-box {
  text-align: center;
  padding: 10px 6px;
}
.franchise-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e6f4ec;
  color: #1c4e32;
  font-size: 28px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 14px rgba(28, 78, 50, 0.15);
}
.franchise-success-box h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: #183e29;
}
.franchise-success-ref {
  display: inline-block;
  background: #f4f1e6;
  border: 1px dashed #c8be9f;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: #1c4e32;
  margin-bottom: 16px;
}
.franchise-summary-card {
  background: #fbfaf6;
  border: 1px solid #e5e0cf;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  text-align: left;
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.franchise-summary-row {
  display: flex;
  justify-content: space-between;
}
.franchise-summary-row span {
  color: #69786c;
}
.franchise-summary-row strong {
  color: #1e3827;
}

@media (max-width: 900px) {
  .franchise-packages { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .franchise-model-pills { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .franchise-visuals { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .franchise-form-grid { grid-template-columns: 1fr; }
  .calc-stats-grid { grid-template-columns: 1fr; }
  .franchise-hero { padding: 32px 18px; }
  .franchise-hero h1 { font-size: 28px; }
}


/* ═════════════════════════════════════════════════════════════════
   PRODUCT MULTI-IMAGE GALLERY (PDP + ADMIN)
   ═════════════════════════════════════════════════════════════════ */
.pdp-gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffffdd;
  border: 1px solid #e2ddd0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  z-index: 3;
  color: #2b3a2f;
  transition: all 0.15s ease;
}
.pdp-gallery-nav-btn:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
}
.pdp-gallery-nav-prev { left: -6px; }
.pdp-gallery-nav-next { right: -6px; }

.pdp-gallery-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.pdp-gallery-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb-item {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 2px solid #e5dfd2;
  background: #fbf9f4;
  padding: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  flex: none;
}
.pdp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pdp-thumb-item.active, .pdp-thumb-item:hover {
  border-color: #1c4e32;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28,78,50,0.18);
}

/* Manager Edit Product Gallery */
.admin-gallery-editor {
  margin-top: 14px;
  padding: 14px;
  background: #fbfbf7;
  border: 1px solid #e5e0d2;
  border-radius: 12px;
}
.admin-gallery-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-gallery-editor-head strong {
  font-size: 13px;
  color: #1a3224;
}
.admin-gallery-editor-head span {
  font-size: 11px;
  color: #728277;
}
.admin-gallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.admin-gallery-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dcd5c3;
  background: #ffffff;
  display: grid;
  place-items: center;
}
.admin-gallery-card img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}
.admin-gallery-card.is-cover {
  border: 2px solid #1c4e32;
}
.admin-gallery-cover-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1c4e32;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}
.admin-gallery-del-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.admin-gallery-cover-btn {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  background: #ffffffdd;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  cursor: pointer;
  text-align: center;
}
.admin-gallery-cover-btn:hover {
  background: #ffffff;
  border-color: #1c4e32;
  color: #1c4e32;
}
.admin-gallery-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed #285b3c;
  border-radius: 9px;
  background: #f4f7f2;
  color: #1c4e32;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  text-align: center;
}
.admin-gallery-upload-btn:hover {
  background: #eaf1e7;
}


/* ── Main PDP Image Smooth Transition ── */
#pdpMainImage {
  transition: opacity 0.15s ease-in-out;
}
.pdp-angle-btn.active span {
  color: #1c4e32;
  font-weight: 800;
}


/* ── Product Card Price & Discount Highlight ── */
.gallery-price-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 4px 0 3px;
  flex-wrap: wrap;
}
.price-chip {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #123e23 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.gallery-mrp {
  font-size: 12px !important;
  color: #8c978e !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}
.gallery-discount-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 850;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: 0.01em;
}
.gallery-save-tag {
  display: inline-flex !important;
  align-items: center;
  font-size: 11px !important;
  font-weight: 850 !important;
  color: #15803d !important;
  background: #eef8f0 !important;
  border: 1px solid #c6ebd0 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  margin: 3px 0 6px !important;
  letter-spacing: 0.02em !important;
}
.product-image .discount, .gallery-card .discount {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #c02b11 0%, #e0441d 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(192, 43, 17, 0.35) !important;
  text-align: center;
}

/* Clean section spacing */
.home-page > .section {
  margin: 32px 0;
}