/* ============================================================
   MasnoonHub Express - Vendor Directory (/vendors/)
   Branded replacement for the stock Dokan all-stores listing.
   Everything scoped under .mh-vendors; the full-width fix is
   scoped to body.mh-vendors-page (a plain Astra Page).
   Palette: orange --brand #e0530f + navy #141d33 (no purple).
   ============================================================ */

/* ---- scoped tokens (self-contained, mirror tokens.css) ---- */
.mh-vendors{
  --navy:#141d33; --navy-soft:#283456;
  --brand:#e0530f; --brand-bright:#f26417; --brand-soft:#fdeadf; --brand-ink:#5c2509;
  --trust:#2f6fb0; --trust-soft:#e9f1f9; --star:#f2a31d;
  --green:#1d8a5c; --green-soft:#dcf0e7;
  --ink:#18181d; --ink-2:#56565f; --ink-3:#8d909b; --line:#ececef; --line-2:#f4f4f6;
  --surface:#ffffff; --app-bg:#eceef1;
  --accent:#3a4a86; --accent-soft:#e6e8f4; --accent-ink:#1b2347;
  --font-display:"Spectral","Noto Serif Bengali",Georgia,serif;
  --font-body:"Hanken Grotesk","Noto Sans Bengali",system-ui,sans-serif;
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(20,29,51,.05),0 14px 32px -22px rgba(20,29,51,.32);
  --shadow-pop:0 12px 38px -12px rgba(20,29,51,.4);
}

/* =========================================================
   FULL-WIDTH FIX (the /vendors/ page is a boxed Astra Page
   with a left sidebar + an "All Vendors" page title).
   ========================================================= */
body.mh-vendors-page #secondary{ display:none !important; width:0 !important; }
body.mh-vendors-page .ast-container{ max-width:1280px !important; display:block !important; }
body.mh-vendors-page #primary,
body.mh-vendors-page #main{ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; }
body.mh-vendors-page .entry-header,
body.mh-vendors-page .ast-archive-description,
body.mh-vendors-page .woocommerce-breadcrumb,
body.mh-vendors-page #breadcrumbs{ display:none !important; }
body.mh-vendors-page #content .ast-article-single,
body.mh-vendors-page .ast-article-single,
body.mh-vendors-page #content .entry-content{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
body.mh-vendors-page #content{ padding-top:20px; padding-bottom:48px; }

/* =========================================================
   SHELL
   ========================================================= */
.mh-vendors{ font-family:var(--font-body); color:var(--ink); line-height:1.5; }
.mh-vendors *{ box-sizing:border-box; }
.mh-vendors a{ text-decoration:none; color:inherit; }

/* =========================================================
   HERO
   ========================================================= */
.mhv-hero{
  position:relative; overflow:hidden; border-radius:18px;
  background:
    radial-gradient(70% 130% at 90% 0%, rgba(242,100,23,.20), transparent 56%),
    radial-gradient(80% 130% at 4% 100%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(118deg, #0e1525 0%, var(--navy) 46%, var(--navy-soft) 130%);
  color:#fff;
}
.mhv-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(125deg, rgba(255,255,255,.045) 0 2px, transparent 2px 28px);
}
.mhv-hero__in{ position:relative; z-index:2; padding:clamp(26px,4.4vw,48px) clamp(22px,4vw,52px); max-width:760px; }
.mhv-hero__kicker{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-bright); margin-bottom:12px;
}
.mhv-hero__h{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(28px,4.4vw,44px); margin:0 0 12px; color:#fff;
}
.mhv-hero__sub{ font-size:clamp(14px,1.4vw,16px); line-height:1.6; color:#cdd4e6; margin:0 0 20px; max-width:640px; }
.mhv-hero__pills{ display:flex; flex-wrap:wrap; gap:9px; }
.mhv-pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  padding:7px 13px; border-radius:var(--r-pill); color:#eef1f8;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.mhv-pill svg{ width:15px; height:15px; color:var(--brand-bright); }

/* =========================================================
   TOOLBAR (count + branded sort, replaces purple chrome)
   ========================================================= */
.mhv-toolbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:22px 2px 16px;
}
.mhv-count{ font-size:14px; color:var(--ink-2); }
.mhv-count b{ color:var(--ink); font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }
.mhv-sort{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.mhv-sort label{ font-size:12.5px; font-weight:700; color:var(--ink-3); }
.mhv-sort select{
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink);
  padding:9px 34px 9px 14px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356565f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 13px center;
  -webkit-appearance:none; appearance:none; cursor:pointer; line-height:1;
}
.mhv-sort select:hover{ border-color:var(--ink-3); }

/* =========================================================
   GRID
   ========================================================= */
.mhv-grid-wrap{ margin-top:4px; }
.mhv-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}

/* =========================================================
   CARD
   ========================================================= */
.mhv-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mhv-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }

/* cover: real banner via inline style, else branded navy->accent gradient */
.mhv-card__cover{
  display:block; position:relative; height:122px;
  background:
    radial-gradient(60% 120% at 86% 50%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(118deg, var(--navy) 0%, #283456 52%, var(--accent) 150%);
}
.mhv-card__cover::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 84% 46%, transparent 34%, rgba(255,255,255,.07) 35%, rgba(255,255,255,.07) 37%, transparent 38%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px);
}
.mhv-card__cat{
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(20,29,51,.5); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(3px);
}

/* logo avatar, overlapping the cover bottom-left */
.mhv-card__logo{
  position:absolute; top:90px; left:20px; z-index:3;
  width:64px; height:64px; border-radius:18px; border:3px solid #fff;
  box-shadow:var(--shadow-card); overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(155deg,#fff 0%, var(--accent-soft) 72%, color-mix(in srgb,var(--accent) 22%,#fff) 100%);
}
.mhv-card__logo img{ width:100%; height:100%; object-fit:cover; }
.mhv-card__glyph{ display:grid; place-items:center; color:var(--accent-ink); }
.mhv-card__glyph svg{ width:32px; height:32px; }

.mhv-card__body{ padding:34px 20px 18px; flex:1; }
.mhv-card__name{
  font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); margin:0; line-height:1.2; display:flex; align-items:center; gap:8px;
}
.mhv-card__name a{ color:inherit; }
.mhv-card__name a:hover{ color:var(--brand); }
.mhv-seal{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--trust); display:grid; place-items:center; }
.mhv-seal svg{ width:12px; height:12px; color:#fff; }

.mhv-card__badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.mhv-bdg{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  padding:4px 9px; border-radius:var(--r-pill); white-space:nowrap;
}
.mhv-bdg svg{ width:12px; height:12px; }
.mhv-bdg.verified{ background:var(--trust); color:#fff; }
.mhv-bdg.scholar{ background:var(--green-soft); color:var(--green); border:1px solid color-mix(in srgb,var(--green) 24%,#fff); }

.mhv-card__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin-top:12px; font-size:12.5px; color:var(--ink-2);
}
.mhv-card__meta b{ color:var(--ink); font-weight:800; }
.mhv-stars{ --rating:5; font-size:13px; letter-spacing:1px;
  background:linear-gradient(90deg,var(--star) calc(var(--rating)/5*100%),#dcdce1 calc(var(--rating)/5*100%));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.mhv-rc{ color:var(--ink-3); }
.mhv-new{ background:var(--green-soft); color:var(--green); font-weight:700; font-size:11px; padding:3px 10px; border-radius:var(--r-pill); }
.mhv-dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.mhv-loc{ display:inline-flex; align-items:center; gap:4px; color:var(--ink-3); min-width:0; }
.mhv-loc svg{ width:13px; height:13px; flex:none; }

.mhv-card__stats{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--ink-2);
}
.mhv-stat b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.mhv-stat--cat{
  margin-left:auto; font-weight:700; font-size:11.5px; color:var(--accent-ink);
  background:var(--accent-soft); padding:4px 11px; border-radius:var(--r-pill);
}

.mhv-card__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 14px 14px; height:46px; border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff;
  font-weight:800; font-size:14px; letter-spacing:.01em;
  box-shadow:0 8px 20px -10px rgba(224,83,15,.65); transition:filter .15s ease;
}
.mhv-card__cta svg{ width:17px; height:17px; transition:transform .15s ease; }
.mhv-card__cta:hover{ filter:brightness(1.04); color:#fff; }
.mhv-card:hover .mhv-card__cta svg{ transform:translateX(3px); }

/* =========================================================
   PAGINATION
   ========================================================= */
.mhv-pager{ margin:30px 0 4px; display:flex; justify-content:center; }
.mhv-pager ul{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; }
.mhv-pager a, .mhv-pager span{
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-weight:700; font-size:13.5px; color:var(--ink-2);
}
.mhv-pager a:hover{ border-color:var(--brand); color:var(--brand); }
.mhv-pager .current{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.mhv-empty{ text-align:center; padding:56px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.mhv-empty__orb{ display:inline-grid; place-items:center; width:70px; height:70px; border-radius:22px; margin-bottom:16px;
  background:var(--accent-soft); color:var(--accent-ink); }
.mhv-empty__orb svg{ width:34px; height:34px; }
.mhv-empty h3{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink); margin:0 0 6px; }
.mhv-empty p{ font-size:14px; color:var(--ink-3); margin:0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:640px){
  .mhv-grid{ grid-template-columns:1fr; gap:15px; }
  .mhv-hero{ border-radius:14px; }
  .mhv-toolbar{ margin:18px 2px 14px; }
  .mhv-sort{ margin-left:auto; }
}