:root{
  --p:       #6b21a8;
  --p-dark:  #4a1572;
  --p-deep:  #2d0a5e;
  --p-mid:   #8b5cf6;
  --p-light: #ede9fe;
  --p-pale:  #f5f3ff;
  --teal:    #0d9488;
  --teal-l:  #ccfbf1;
  --amber:   #b45309;
  --amber-l: #fef3c7;
  --white:   #ffffff;
  --bg:      #f4f2f9;
  --border:  #e4dff0;
  --ink:     #1a0f2e;
  --muted:   #6e6283;
  --subtle:  #a499b8;
  --gold:    #f59e0b;
}

html{scroll-behavior:smooth}

/* ══ HERO ══ */
.hero{
  background: var(--color-grad);
  padding:68px 60px 0;
  position:relative;
  overflow:hidden
}
.hero::before{
  content:'';position:absolute;top:-120px;right:-80px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,181,253,.18) 0%,transparent 65%);
  pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:160px;
  background:radial-gradient(ellipse 80% 60% at 50% 120%,rgba(196,181,253,.12) 0%,transparent 70%);
  pointer-events:none
}
.g{position:absolute;pointer-events:none}
.g1{top:22px;left:5%;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-radius:4px;transform:rotate(20deg)}
.g2{top:70px;left:18%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.g3{top:38px;right:34%;width:14px;height:14px;border:2px solid rgba(255,255,255,.14);transform:rotate(45deg)}
.g4{top:130px;left:4%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g5{top:50px;right:13%;width:12px;height:12px;border:2px solid rgba(255,255,255,.16);transform:rotate(15deg)}
.g6{bottom:110px;right:6%;width:15px;height:15px;border:2px solid rgba(255,255,255,.12);border-radius:4px;transform:rotate(30deg)}
.g7{top:100px;right:27%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g8{bottom:140px;left:28%;width:10px;height:10px;border:2px solid rgba(255,255,255,.1);transform:rotate(25deg)}

.hero-inner{max-width: 80vw;margin:0 auto;text-align:center;position:relative;z-index:1;/* padding-bottom:60px; */}
.h-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:5px 18px 5px 10px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:22px
}
.h-badge-dot{width:6px;height:6px;border-radius:50%;background:#c4b5fd;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(1.7)}}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(36px,5vw,58px);font-weight:800;
  color:#fff;letter-spacing:-2.5px;line-height:1.02;margin-bottom:16px
}
.hero h1 em{font-style:normal;color:#c4b5fd}
.hero-sub{font-size:16px;color:rgba(255,255,255,.55);line-height:1.85;max-width:460px;margin:0 auto 36px}

.hero-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hp{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 18px;color: white;}
.hp svg{width:13px;height:13px;fill:none;stroke:#c4b5fd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hp span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82)}
.hp strong{font-family:'Space Grotesk',sans-serif;color:#fff;font-weight:800}

.hero-wave{line-height:0;margin-top:-1px}
.hero-wave svg{display:block;width:100%}

/* ══ STICKY BAR ══ */
.bar{z-index:2;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:0 1px 20px rgba(107,33,168,.07)}
.bar-inner{max-width:1180px;margin:0 auto;padding:0 5vw;height:66px;display:flex;align-items:center;gap:14px;flex-wrap: wrap;}
.tabs{display:flex;background: var(--color-bg);border-radius:12px;padding:3px;gap:2px;flex-shrink:0}
.tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;font-size: 15px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .18s;white-space:nowrap}
.tab svg{width:13px;height:13px;flex-shrink:0}
.tab:hover{color:var(--p)}
.tab.active{background:var(--white);color:var(--p);box-shadow:0 2px 10px rgba(107,33,168,.12)}
.tab-badge{font-size:11px;font-weight:700;background:var(--p-light);color:var(--p);padding:2px 7px;border-radius:100px}
.tab.active .tab-badge{background:var(--p);color:#fff}
.search-box{flex:1;max-width:320px;margin-left:auto;position:relative}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--subtle);pointer-events:none}
.search-input{width:100%;height: 40px !important;padding: 0 12px 0 36px !important;border: 1.5px solid var(--border) !important;border-radius: 10px !important;font-family:'Space Grotesk',sans-serif;font-size:.83rem;color:var(--ink);background:#f4f2f9;outline:none;transition:all .18s}
.search-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(107,33,168,.09);background:var(--white)}
.search-input::placeholder{color:var(--subtle);opacity:.65}
.city-select{width: auto;height:40px;padding:0 10px;border: 1px solid var(--color-bg-7border);border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size: 14px;color:var(--ink);background: var(--color-bg);cursor:pointer;outline:none;min-width:130px}
.city-select:focus{border-color:var(--p)}
.bar-count{font-size: 15px;font-weight:500;color:var(--muted);white-space:nowrap;flex-shrink:0}
.bar-count strong{color:var(--p);font-weight:700}

/* ══ CATEGORY STRIP ══ */
.cats{max-width:1180px;margin:26px auto 0;padding:0 5vw;display:flex;gap:6px;flex-wrap:wrap}
.cat{width: auto;display:flex;align-items:center;gap:5px;padding:6px 13px;border-radius:100px;font-size: 15px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:all .18s;white-space:nowrap}
.cat svg{width:12px;height:12px;flex-shrink:0}
.cat:hover{border-color:var(--p);color:var(--p);background:var(--p-pale)}
.cat.active{background: var(--color-grad,);color:#fff;border-color:var(--p)}

/* ══ MAIN ══ */
.main{max-width:1180px;margin:0 auto;padding:28px 5vw 100px}
.results-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.results-label{font-size:14px;font-weight:500;color:var(--muted)}
.results-label strong{color:var(--ink)}
.partners-main ul, .partners-main ol, .partners-main ul li, .partners-main ol li{margin:0;}
/* view toggle */
.view-toggle{display:flex;gap:3px;background: var(--color-bg);border-radius:9px;padding:3px}
.vbtn{width:32px;height:32px;border-radius:7px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .18s}
.vbtn svg{width:15px;height:15px;flex-shrink:0}
.vbtn:hover{color:var(--p)}
.vbtn.active{background:var(--white);color: var(--color-primary);box-shadow:0 1px 6px rgba(107,33,168,.12)}

/* ══ GRID VIEW ══ */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.brand-grid .brow { display: none !important; }

.gcard{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  display:flex;flex-direction:column;
  animation:fadeUp .3s ease both;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
  position:relative;
}
.gcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(107,33,168,.11);border-color:#cfc0e8}

/* top accent bar */
.gcard-bar{height:3px;background:linear-gradient(90deg,var(--p-dark),var(--p-mid));flex-shrink:0}
.gcard.is-online .gcard-bar{background:linear-gradient(90deg,var(--teal),#34d399)}
.gcard.is-both   .gcard-bar{background:linear-gradient(90deg,var(--p),var(--teal))}

.gcard-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;flex:1}

/* header */
.gcard-head{display:flex;align-items:center;gap:12px}
.gav{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:-.02em;
}
.gmeta{flex:1;min-width:0}
.gname{font-size: 14px;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtags{display:flex;gap:4px;flex-wrap:wrap}

/* divider */
.gcard-div{height:1px;background:var(--border)}

/* location area */
.gcard-locs{display:flex;flex-direction:column;gap:8px;flex:1}

/* city chips inside grid card */
.gcard .city-cloud{display:flex;flex-wrap:wrap;gap:5px}

/* grid loc blocks stacked */
.gloc-block{display:flex;flex-direction:column;gap:3px}
.gloc-city{
  font-size: 14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--p-dark);
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:1px;
}
.gloc-city svg{width:9px;height:9px;color:var(--p);opacity:.7;flex-shrink:0}
.gloc-addrs{display:flex;flex-direction:column;gap:2px;padding-left:14px}
.gloc-addr{font-size: 14px;color:var(--muted);line-height:1.4;display:flex;align-items:baseline;gap:5px}
.gloc-addr::before{content:'·';color:var(--subtle);flex-shrink:0}

/* grid web button — full width subtle row at bottom */
.gcard-foot{
  padding:10px 18px 14px;
  border-top:1px solid var(--border);
  margin-top:auto;
}
.gweb{
  display:flex;
  gap:8px;
  text-decoration:none;
  transition:opacity .18s;
  align-items: center;
}
.gweb:hover{opacity:.75}
.gweb-ico{
  width:26px;height:26px;border-radius:7px;
  background:var(--p-pale);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .18s;
}
.gweb:hover .gweb-ico{background:var(--p-light)}
.gweb-ico svg{width:12px;height:12px;color:var(--p)}
.gweb-text{display:flex;flex-direction:column;gap:0}
.gweb-label{font-size: 12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);line-height: 1.5rem;}
.gweb-domain{font-size: 15px;font-weight:600;color:var(--p);line-height: 1.5rem;}

/* ══ ROW LIST ══ */
.brand-list{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(107,33,168,.06);
}
.brand-list .gcard { display: none !important; }

/* ── EACH ROW ── */
.brow{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items: self-start;
  gap:0;
  padding:0;
  border-bottom:1px solid var(--border);
  transition:background .15s;
  animation:fadeUp .3s ease both;
  position:relative;
}
.brow:last-child{border-bottom:none}
.brow:hover{background:#faf8fe}

/* left colour pip */
.brow::before{
  content:'';
  position:absolute;left:0;top:25%;bottom:25%;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--p);
}
.brow.is-online::before{background:var(--teal)}
.brow.is-both::before{background:linear-gradient(180deg,var(--p),var(--teal))}

/* ── AVATAR CELL ── */
.brow-av{
  display:flex;align-items:center;justify-content:center;
  padding:16px 0 16px 20px;
}
.av{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight:700;
  letter-spacing:-.02em;
  flex-shrink:0;
}
.av-a,.av-b,.av-c{background: var(--color-bg);color: var(--color-primary);}
.av-d,.av-e,.av-f{background:#dbeafe;color:#1e40af}
.av-g,.av-h,.av-i{background:#d1fae5;color:#065f46}
.av-j,.av-k,.av-l{background:#fce7f3;color:#831843}
.av-m,.av-n,.av-o{background:#ffedd5;color:#7c2d12}
.av-p,.av-q,.av-r{background:#ccfbf1;color:#134e4a}
.av-s,.av-t,.av-u{background:#f3e8ff;color:#581c87}
.av-v,.av-w,.av-x{background:#fef9c3;color:#713f12}
.av-y,.av-z      {background:#fce7f3;color:#831843}

/* ── MIDDLE CONTENT ── */
.brow-mid{
  padding:14px 16px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

/* brand identity row */
.brow-identity{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brow-name{font-size: 15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow-tags{display:flex;gap:4px}
.tag{font-size: 10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:100px}
.tag-instore{background:var(--amber-l);color:var(--amber)}
.tag-online {background:var(--teal-l); color:var(--teal)}

/* location line — horizontal compact */
.brow-locs{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 0}

/* city chips */
.city-cloud{display:flex;flex-wrap:wrap;gap:5px}
.cc{
  font-size: 12px;
  font-weight:500;
  color:var(--muted);
  background: var(--color-bg);
  border: 1px solid var(--color-bg-border);
  border-radius:6px;
  padding:2px 8px;
  white-space:nowrap;
}

/* structured loc: city label + addresses inline */
.loc-group{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  gap:3px 6px;
}
.loc-city-badge{
  font-size: 10px;
  font-weight:700;
  letter-spacing: .07em;
  text-transform:uppercase;
  color: var(--color-primary);
  background: var(--color-bg);
  border-radius:5px;
  padding:2px 7px;
  white-space:nowrap;
  flex-shrink:0;
}
.loc-addrs{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center}
.loc-a{
  font-size: 10px;
  color:var(--muted);
  line-height:1.4;
  display:flex;
  align-items:center;
  gap:4px;
}
.loc-a::before{content:'·';color:var(--subtle);font-size:16px}
.loc-sep{width:1px;height:12px;background:var(--border);align-self:center}

/* ── RIGHT CELL: website ── */
.brow-right{
  padding:14px 20px 14px 12px;
  display:flex;align-items:center;
  flex-shrink:0;
}

.web-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  background: var(--color-bg);
  border: 1px solid var(--color-bg-border);
  border-radius:11px;
  padding:8px 13px;
  transition:all .18s;
  white-space:nowrap;
}
.web-btn:hover{background:var(--p-pale);border-color:var(--p-light)}
.web-btn-ico{
  width:28px;
  height:28px;
  border-radius:8px;
  background: var(--color-bg-border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .18s;
}
.web-btn:hover .web-btn-ico{background:var(--p);color: white;}
.web-btn-ico svg{width:13px;height:13px;color: var(--color-primary);transition:color .18s}
.web-btn:hover .web-btn-ico svg{color:#fff}
.web-btn-text{display:flex;flex-direction:column;gap:0}
.web-eyebrow{font-size: 10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);line-height: 2rem;}
.web-domain{font-size: 12px;font-weight:600;color: var(--color-primary);line-height: 2rem;}

/* also-online badge for instore brands */
.also-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-l);
  border:1px solid rgba(13,148,136,.2);
  border-radius:100px;padding:4px 10px;
  text-decoration:none;white-space:nowrap;
  transition:all .18s;
}
.also-pill:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.also-pill svg{width:11px;height:11px}

/* ── EMPTY ── */
.empty{text-align:center;padding:80px 24px;background:var(--white);border-radius:20px}
.empty svg{width:44px;height:44px;color:var(--border);margin-bottom:14px}
.empty h3{/* font-size:1.05rem; */font-weight:700;color:var(--ink);margin-bottom:6px}
.empty p{/* font-size:.85rem; */color:var(--muted)}

/* ── ANIM ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════
   RESPONSIVE
══════════════════════ */

/* ── Laptop (≤1200px) ── */
@media(max-width:1200px){
  .bar-inner{padding:0 4vw}
  .cats,.main{padding-left:4vw;padding-right:4vw}
  /* .hero{padding:52px 4vw 104px} */
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* ── Small Laptop / Large Tablet (≤1024px) ── */
@media(max-width:1024px){
  /* .hero{padding:44px 4vw 96px} */
  .hero-title{font-size:clamp(116px,4vw,3rem)}
  .bar-inner{gap:10px}
  /* Compress bar: hide count, shrink city select */
  .bar-count{/* display:none; */}
  .city-select{min-width:110px}
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  /* Row view: hide website column on smaller laptops */
  .brow-right{display:none}
  .brow{grid-template-columns:52px 1fr}
}

/* ── Tablet (≤860px) ── */
@media(max-width:860px){
  /* .hero{padding:38px 5vw 88px} */
  .hero-sub{/* font-size:.88rem; */}
  .hero-chips{gap:7px}
  .hchip{font-size:.72rem;padding:6px 13px}

  /* Sticky bar: wrap into two rows */
  .bar-inner{
    flex-wrap:wrap;
    height:auto;
    padding:10px 5vw;
    gap:8px;
  }
  /* Row 1: tabs + city select */
  .tabs{flex:1}
  .city-select{/* display:none; */} /* moved into filter chip on small screens */
  .bar-count{/* display:none; */}
  /* Row 2: search takes full width */
  .search-box{
    order:3;
    width:100%;
    max-width:100%;
    margin-left:0;
  }

  /* Category strip */
  .cats{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .cats::-webkit-scrollbar{display:none}

  /* Grid cards */
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

  /* Row items: hide website right cell */
  .brow{grid-template-columns:48px 1fr}
  .brow-right{display:none}
  .brow-mid{padding:12px 14px 12px 12px}
}

/* ── Large Mobile / Phablet (≤640px) ── */
@media(max-width:640px){
  .hero{padding:32px 5vw 80px}
  .hero-title{font-size:clamp(1.7rem,6vw,29px)}
  .hero-sub{/* font-size:.84rem; */max-width:100%}
  .hero-chips{gap:6px}
  .hchip{font-size:.68rem;padding:5px 11px;gap:5px}

  /* Bar: tabs go full width */
  .bar-inner{padding:10px 4vw;gap:8px}
  .tabs{width:100%}
  .tab{flex:1;justify-content:center;/* font-size:.74rem; */padding:7px 8px}
  .tab svg{display:none} /* hide icons to save space */

  /* Main padding tighter */
  .cats,.main{padding-left:4vw;padding-right:4vw}
  .cats{gap:5px}
  .cat{/* font-size:.68rem; */padding:5px 11px}

  /* Results row */
  .results-label{/* font-size:.73rem; */}

  /* Grid: 2 columns */
  .brand-grid{gap:9px}
  .gcard-body{padding:14px 14px 12px;gap:10px}
  .gname{/* font-size:.88rem; */}
  .gav{width:38px;height:38px;border-radius:10px;/* font-size:.8rem; */}

  /* Row list: tighter */
  .brow-av{padding:12px 0 12px 14px}
  .av{width:34px;height:34px;border-radius:9px;/* font-size:.76rem; */}
  .brow-mid{padding:11px 12px 11px 10px;gap:6px}
  .brow-name{/* font-size:.86rem; */}
  .loc-a,.gloc-addr{/* font-size:.72rem; */}
  .cc{/* font-size:.68rem; */}
}

/* ── Mobile (≤480px) ── */
@media(max-width:480px){
  .hero{padding:28px 4vw 72px}
  .hero-title{font-size:1.65rem}
  .hero-chips{flex-direction:column;align-items:center;gap:6px}
  .hchip{width:fit-content}

  .bar-inner{padding:8px 4vw;gap:7px}
  .tab{/* font-size:.7rem; */padding:6px 6px}
  .tab-badge{display:none} /* hide counts on very small screens */
  .search-input{font-size:14px}

  .cats,.main{padding-left:3vw;padding-right:3vw}
  .cat{/* font-size:.64rem; */padding:4px 9px;gap:4px}
  .cat svg{display:none}

  /* Grid: keep 2 cols but very compact */
  .brand-grid{gap:8px}
  .gcard-body{padding:12px 12px 10px;gap:8px}
  .gname{/* font-size:.82rem; */}
  .gav{width:34px;height:34px;/* font-size:.74rem; */}
  .gtags{gap:3px}
  .tag{/* font-size:.52rem; */padding:1px 5px}
  .gcard-foot{padding:8px 12px 11px}
  .gweb-domain{/* font-size:.72rem; */}

  /* Row list */
  .brow-av{padding:11px 0 11px 12px}
  .av{width:30px;height:30px;border-radius:8px;/* font-size:.7rem; */}
  .brow-mid{padding:10px 12px 10px 9px}a
  .brow-name{/* font-size:.82rem; */}
  .brow-identity{gap:7px}
  .brow-locs{gap:4px}
  .loc-a,.gloc-addr{/* font-size:.7rem; */}
  .loc-city-badge{font-size:11px}
  .gloc-city{font-size:11px}

  .brand-list{border-radius:16px}
}
@media(max-width: 600px){
  .search-box{
    width: 100%;
    display: contents;
  }
}
/* ── Small Mobile (≤380px) ── */
/* a */