/* ================================================================
   getecart HOME HUB (index.html) — theme "Ten Store Bazaar"
   Loads after home.css: re-themes the shared hm- components in a
   multi-store palette (violet · pink · orange · sky · emerald) and adds
   the hub-only hb- sections. Every store section takes its own colours.
   ================================================================ */
:root{
  --vb-ink:#1e1b4b; --vb-ink2:#4c4a73; --vb-muted:#8a87a8; --vb-line:#ebe7f7;
  --vb-accent:#7c3aed; --vb-accent2:#f97316; --vb-grad:linear-gradient(120deg,#7c3aed 0%,#db2777 52%,#f97316 100%);
  --vb-cat-bg:linear-gradient(90deg,#f5f3ff,#fdf2f8 35%,#fff7ed 65%,#ecfeff); --vb-cat-ink:#3b2a7a;
  --vb-foot-bg:linear-gradient(150deg,#4c1d95 0%,#7c3aed 45%,#db2777 100%); --vb-foot-accent:#fde047; --vb-wave:#f7f5ff;
  --vb-v1:linear-gradient(135deg,#7c3aed,#db2777); --vb-v2:linear-gradient(135deg,#f97316,#facc15); --vb-v3:linear-gradient(135deg,#0ea5e9,#10b981);
  --vb-font-d:"Urbanist",system-ui,sans-serif; --vb-font-b:"Onest",system-ui,sans-serif;
  --vb-shadow:0 20px 44px rgba(46,16,101,.14); --vb-shadow-sm:0 8px 20px rgba(46,16,101,.07);
  --hb-rainbow:linear-gradient(90deg,#10b981,#0ea5e9,#6366f1,#a855f7,#ec4899,#f97316,#f59e0b);
}
.hb-page{background:#fff}
.hb-page .vb-copy h2,.hb-page .vb-head h2{font-weight:900;letter-spacing:-.035em}
.hb-page .vb-gtext{background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-page .vb-marq{background:var(--hb-rainbow);background-size:200% 100%;animation:hbSlide 18s linear infinite}
@keyframes hbSlide{to{background-position:200% 0}}

/* hero */
.hb-s1{background:radial-gradient(circle at 78% 46%,rgba(236,72,153,.16),transparent 44%),radial-gradient(circle at 92% 90%,rgba(14,165,233,.16),transparent 40%),radial-gradient(circle at 6% 86%,rgba(16,185,129,.14),transparent 40%),radial-gradient(circle at 10% 10%,rgba(124,58,237,.12),transparent 38%),#fdfcff}
.hb-s3{background:radial-gradient(circle at 80% 30%,rgba(220,38,38,.12),transparent 42%),radial-gradient(circle at 70% 90%,rgba(167,139,250,.2),transparent 42%),radial-gradient(circle at 8% 80%,rgba(180,83,9,.12),transparent 40%),#fffdfa}
.hb-trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;min-height:300px}
.hb-trio a{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:3/4;background:var(--g);box-shadow:0 22px 40px -22px rgba(30,27,75,.55);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.3,1.2)}
.hb-trio a.t1{transform:translateY(-18px)}
.hb-trio a:hover{transform:translateY(-8px) rotate(-1deg)}
.hb-trio img{width:100%;height:100%;object-fit:cover;display:block}
.hb-trio span{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.94);color:var(--vb-ink);font-weight:800;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-trio span i{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:12px;background:var(--g)}

/* store tiles: rainbow underline */
.hb-stores-sec{background:linear-gradient(180deg,#faf8ff,#fff)}
.hb-stores-sec .hm-store{position:relative}
.hb-sale-sec{background:#fff}

/* one bag, three speeds */
.hb-speed-sec{padding-block:30px;background:linear-gradient(180deg,#fff,#f8f6ff)}
.hb-speeds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hb-spd{position:relative;overflow:hidden;border-radius:24px;background:#fff;border:1px solid var(--vb-line);padding:16px;box-shadow:var(--vb-shadow-sm)}
.hb-spd::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--g)}
.hb-spd .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hb-spd .hd .ic{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:1.2rem;background:var(--g);box-shadow:0 10px 18px -10px rgba(30,27,75,.5)}
.hb-spd .hd b{display:block;font:800 1.1rem var(--vb-font-d);color:var(--vb-ink)}
.hb-spd .hd small{display:block;font-size:12px;color:var(--vb-ink2);font-weight:600}
.hb-spd .sts{display:flex;flex-wrap:wrap;gap:8px}
.hb-spd .sts a{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:6px 12px 6px 6px;border-radius:14px;background:#f8f7fc;color:var(--vb-ink);text-decoration:none;font-weight:700;font-size:.86rem;transition:transform .2s,background .2s}
.hb-spd .sts a:hover{transform:translateY(-2px);background:#f1eefc}
.hb-spd .sts i{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:.9rem;background:var(--g)}
.hb-spd .sts span{display:flex;flex-direction:column;line-height:1.15}
.hb-spd .sts small{font-size:12px;color:var(--vb-muted);font-weight:600}

/* ---------- store sections: each in its own colours ---------- */
.hb-st{position:relative;overflow:hidden;isolation:isolate;padding-block:34px 36px;background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 7%,#fff) 0%,color-mix(in srgb,var(--c2) 9%,#fff) 100%)}
.hb-st::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;right:-160px;top:-220px;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 22%,transparent),transparent 70%)}
.hb-st.flip::before{right:auto;left:-180px}
.hb-st::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:4px;background:var(--g);opacity:.8}
.hb-st .vb-fv .vb-vx{opacity:.2}
.hb-st-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hb-st-ic{width:58px;height:58px;flex:none;border-radius:19px;display:grid;place-items:center;color:#fff;font-size:1.6rem;background:var(--g);box-shadow:0 16px 28px -14px var(--c1);transition:transform .3s cubic-bezier(.2,.8,.3,1.4)}
.hb-st-ic:hover{transform:rotate(-8deg) scale(1.06);color:#fff}
.hb-st-h .t{flex:1;min-width:0}
.hb-st-h .k{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--c1) 80%,#1e1b4b)}
.hb-st-h h2{margin:2px 0 0;font:900 clamp(1.45rem,2.6vw,2rem)/1.1 var(--vb-font-d);letter-spacing:-.03em;color:var(--vb-ink)}
.hb-st-h p{margin:2px 0 0;color:var(--vb-ink2);font-size:.95rem}
.hb-st-go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;color:#fff;font-weight:800;text-decoration:none;background:var(--g);box-shadow:0 12px 22px -12px var(--c1);transition:transform .2s,box-shadow .2s}
.hb-st-go:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 26px -12px var(--c1)}
.hb-st-go i{transition:transform .2s}.hb-st-go:hover i{transform:translateX(3px)}
.hb-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 12px;margin-bottom:4px}
.hb-chips::-webkit-scrollbar{display:none}
.hb-chips a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--c1) 22%,#fff);color:color-mix(in srgb,var(--c1) 75%,#1e1b4b);font-weight:700;font-size:.86rem;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.hb-chips a small{min-width:22px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--c1) 12%,#fff);font-size:12px;text-align:center}
.hb-chips a:hover{background:var(--g);color:#fff;transform:translateY(-2px)}
.hb-chips a:hover small{background:rgba(255,255,255,.25)}
.hb-st-b{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:stretch}
.hb-st.flip .hb-st-b{grid-template-columns:minmax(0,1fr) 280px}
.hb-st.flip .hb-spot{order:2}
.hb-spot{position:relative;display:flex;flex-direction:column;min-width:0}
.hb-spot-k{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0 0 8px 6px;padding:5px 12px;border-radius:999px;background:var(--g);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 16px -10px var(--c1)}
.hb-spot .lt-card{flex:1}
.hb-st-rail{min-width:0;align-self:center}
.hb-st .hm-rail>.hm-pc{flex-basis:calc((100% - 14px*3)/4)}
.hb-st .vb-add{background:var(--g)}
.hb-st .hm-pc-img .vb-tag{background:var(--g)}
.hb-st .hm-rarr{color:color-mix(in srgb,var(--c1) 80%,#1e1b4b)}

/* ---------- brands with store tabs ---------- */
.hb-brands-sec{padding-block:34px;background:linear-gradient(180deg,#fff,#faf8ff)}
.hb-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 14px;margin-bottom:2px}
.hb-tabs::-webkit-scrollbar{display:none}
.hb-tabs button{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--vb-line);background:#fff;color:var(--vb-ink2);font:700 .88rem var(--vb-font-b);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.hb-tabs button i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;background:var(--g)}
.hb-tabs button small{font-size:12px;color:var(--vb-muted);font-weight:700}
.hb-tabs button:hover{transform:translateY(-2px)}
.hb-tabs button.on{background:var(--g);color:#fff;border-color:transparent;box-shadow:0 10px 20px -12px rgba(46,16,101,.6)}
.hb-tabs button.on i{background:rgba(255,255,255,.25)}
.hb-tabs button.on small{color:rgba(255,255,255,.9)}
.hb-tabs button:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}
.hb-brands{grid-template-columns:repeat(5,minmax(0,1fr))}
.hb-brand{position:relative;overflow:hidden;padding:16px 10px 14px;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--g) 0%,#e9e5f7),#ece8f8) border-box;animation:hbIn .45s both}
.hb-brand .ph{position:absolute;inset:0;z-index:0;opacity:.08;transition:opacity .3s}
.hb-brand .ph img{width:100%;height:100%;object-fit:cover}
.hb-brand:hover .ph{opacity:.16}
.hb-brand .lg,.hb-brand b,.hb-brand small{position:relative;z-index:1}
.hb-brand small{display:inline-flex;align-items:center;gap:4px;font-size:12px}
@keyframes hbIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hb-st .hm-rail>.hm-pc{flex-basis:calc((100% - 14px*2)/3)}
}
@media (max-width:1024px){
  .hb-speeds{grid-template-columns:minmax(0,1fr)}
  .hb-st-b,.hb-st.flip .hb-st-b{grid-template-columns:240px minmax(0,1fr)}
  .hb-st.flip .hb-spot{order:0}
  .hb-st .hm-rail>.hm-pc{flex-basis:calc((100% - 14px)/2)}
  .hb-brands{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .hb-st{padding-block:26px 28px}
  .hb-st-b,.hb-st.flip .hb-st-b{grid-template-columns:minmax(0,1fr);gap:12px}
  .hb-spot .lt-card{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;padding:10px}
  .hb-spot .lt-card .lt-top{grid-column:1/-1}
  .hb-spot .lt-card .lt-img{margin:8px 0 0;aspect-ratio:1}
  .hb-spot .lt-card .lt-b{padding-top:8px}
  .hb-st .hm-rail>.hm-pc{flex-basis:168px}
  .hb-trio{min-height:0;gap:8px}
  .hb-trio a.t1{transform:translateY(-10px)}
  .hb-brands{grid-template-columns:none}
}
@media (max-width:560px){
  .hb-st-h{gap:10px;align-items:flex-start}
  .hb-st-ic{width:46px;height:46px;border-radius:15px;font-size:1.3rem}
  .hb-st-h .k{font-size:12px;letter-spacing:.02em}
  .hb-st-go{align-self:center;padding:9px 12px;border-radius:12px;font-size:.84rem;gap:5px}
  .hb-st-h p{font-size:.9rem}
  .hb-spot .lt-card{grid-template-columns:104px minmax(0,1fr)}
  .hb-spot .lt-tiles b{font-size:.95rem}
  .hb-st .hm-rail>.hm-pc{flex-basis:150px}
  .hb-trio span{font-size:12px;padding:6px 7px;left:5px;right:5px;bottom:5px}
  .hb-trio span i{display:none}
}
@media (max-width:360px){
  .hb-spot .lt-card{grid-template-columns:minmax(0,1fr)}
  .hb-spot .lt-card .lt-img{aspect-ratio:1/.7}
  .hb-st .hm-rail>.hm-pc{flex-basis:140px}
}
@media (prefers-reduced-motion:reduce){
  .hb-page .vb-marq,.hb-brand{animation:none}
}

/* ---------- home-only colourful header: icons sit on white rings so every colour stays visible ---------- */
.hb-page .hd-main{background:linear-gradient(110deg,#5b21b6 0%,#7c3aed 22%,#c026d3 50%,#db2777 74%,#ea580c 100%);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 16px 34px -20px rgba(91,33,182,.7)}
.hb-page .hd-fx{opacity:.35}
.hb-page .hd-wm b{color:#fff}
.hb-page .hd-wm em{background:linear-gradient(90deg,#fde047,#fdba74);-webkit-background-clip:text;background-clip:text}
.hb-page .hd-wm small{color:rgba(255,255,255,.85)}
.hb-page .hd-mark{box-shadow:0 0 0 3px #fff,0 10px 20px -10px rgba(30,27,75,.6)}
.hb-page .hd-ic{box-shadow:0 0 0 3px #fff,0 10px 18px -10px rgba(30,27,75,.55)}
.hb-page .hd-ic .fc-badge{box-shadow:0 0 0 2px #fff}
.hb-page .hd-search{background:#fff;box-shadow:0 10px 24px -16px rgba(30,27,75,.6)}
.hb-page .hd-go{background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 10px 20px -10px rgba(124,58,237,.8)}
.hb-page .hd-me{border-color:transparent;box-shadow:0 8px 18px -12px rgba(30,27,75,.6)}
.hb-page .hd-cart{background:#fff;color:#4c1d95;box-shadow:0 12px 24px -14px rgba(30,27,75,.65)}
.hb-page .hd-cart-ic{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;box-shadow:none}
.hb-page .hd-cart-t small{color:#6b6894}
.hb-page .hd-cart-t b{color:#4c1d95}
.hb-page .fc-catnav{background:linear-gradient(90deg,#f5f3ff,#fdf2f8 35%,#fff7ed 70%,#ecfeff);border-bottom-color:#ebe7f7}
.hb-page .hd-chip{box-shadow:0 6px 14px -12px rgba(46,16,101,.5)}
@media (max-width:768px){
  .hb-page .hd-loc{border-left-color:rgba(255,255,255,.35)}
  .hb-page .hd-loc-t small{color:rgba(255,255,255,.85)}
  .hb-page .hd-loc-t b{color:#fff}
  .hb-page .hd-cart{background:#fff;width:44px;height:44px;box-shadow:0 0 0 3px #fff,0 10px 18px -10px rgba(30,27,75,.55)}
}
.hb-page .hd-av{box-shadow:0 0 0 3px #fff,0 8px 16px -8px rgba(30,27,75,.55)}
/* re-theme shared home blocks away from grocery green */
.hb-page .hm-trust-sec{background:linear-gradient(180deg,#fff,#f6f3ff)}
.hb-page .hm-duo2{background:linear-gradient(180deg,#f6f3ff,#fdf4ff)}
.hb-page .hm-app{background:linear-gradient(125deg,#6d28d9 0%,#a21caf 50%,#ea580c 120%)}
.hb-page .hm-news .vb-btn-p,.hb-page .vb-btn-p{background:var(--vb-grad)}
@media (max-width:420px){
  .hb-st-h .k .o,.hb-st-go .s{display:none}
  .hb-st-h .k{white-space:nowrap}
}