/* ============================================================
   MasnoonHub Express - Vendor Storefront chrome (Component 07)
   Ported from the v7 "Vendor Storefront" board (vendor-store.css),
   adapted to live inside the real site chrome. Everything scoped
   under .mh-store. The product cards reuse assets/woo-catalog.css
   (the .mh-catalog wrapper); this file only styles store chrome.
   ============================================================ */

/* ---- scoped tokens (self-contained, board values) ---- */
.mh-store{
  --navy:#141d33; --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 -20px rgba(20,29,51,.3);
  --shadow-pop:0 12px 38px -12px rgba(20,29,51,.4);
}

/* =========================================================
   FULL-WIDTH FIX (store page is an Astra boxed/sidebar page)
   ========================================================= */
body.dokan-store #secondary{ display:none !important; width:0 !important; }
body.dokan-store .dokan-store-sidebar,
body.dokan-store .dokan-store-wrap > aside{ display:none !important; }
body.dokan-store .ast-container{ max-width:1240px !important; display:block !important; }
body.dokan-store #primary,
body.dokan-store #main{ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; }
body.dokan-store .entry-header,
body.dokan-store .ast-archive-description,
body.dokan-store .woocommerce-breadcrumb,
body.dokan-store #breadcrumbs,
body.dokan-store .dokan-store-wrap > .dokan-ajax-store-search{ display:none !important; }
body.dokan-store #content .ast-article-single,
body.dokan-store .ast-article-single{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
body.dokan-store #content{ padding-top:18px; padding-bottom:46px; }

/* =========================================================
   STORE SHELL
   ========================================================= */
.mh-store{
  font-family:var(--font-body); color:var(--ink); line-height:1.5;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-card);
}
.mh-store *{ box-sizing:border-box; }

/* ---- header: cover ---- */
.dsh{ position:relative; }
.dsh__cover{
  height:172px; position:relative; overflow:hidden;
  background:
    radial-gradient(60% 120% at 88% 50%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(80% 130% at 6% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(118deg, var(--navy) 0%, #283456 50%, var(--accent) 140%);
}
.dsh__cover::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, rgba(20,29,51,0) 58%, rgba(20,29,51,.28));
}
/* faint concentric motif on the right for depth */
.dsh__cover::before{
  content:""; position:absolute; right:5%; top:50%; width:230px; height:230px;
  transform:translateY(-50%); border-radius:50%; opacity:.5;
  background:
    radial-gradient(circle, transparent 36%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.08) 39%, transparent 40%),
    radial-gradient(circle, transparent 54%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.06) 57%, transparent 58%);
}

/* ---- header: identity bar ----
   align-items:flex-start so the name always sits BELOW the cover (only the
   avatar is pulled up to overlap it). This stays readable even when the badge
   row wraps on narrow widths. */
.dsh__bar{ display:flex; align-items:flex-start; gap:20px; padding:0 30px 4px; position:relative; z-index:3; }
.dsh__avatar{
  width:112px; height:112px; flex:none; border-radius:24px; border:4px solid #fff;
  box-shadow:var(--shadow-card); overflow:hidden; display:grid; place-items:center; margin-top:-56px;
  background:linear-gradient(155deg, #fff 0%, var(--accent-soft) 70%, color-mix(in srgb,var(--accent) 22%,#fff) 100%);
}
.dsh__avatar img{ width:100%; height:100%; object-fit:cover; }
.dsh__glyph{ display:grid; place-items:center; color:var(--accent-ink); }
.dsh__glyph svg{ width:54px; height:54px; }
.dsh__id{ flex:1; min-width:0; padding-top:16px; }
.dsh__name{
  font-family:var(--font-display); font-weight:700; font-size:27px; letter-spacing:-.01em;
  color:var(--ink); margin:0; display:flex; align-items:center; gap:9px; line-height:1.12;
}
.sh__seal{ flex:none; width:23px; height:23px; border-radius:50%; background:var(--trust); display:grid; place-items:center; }
.sh__seal svg{ width:14px; height:14px; color:#fff; }
.dsh__meta{ display:flex; align-items:center; gap:9px; margin-top:7px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); }
.dsh__meta b{ color:var(--ink); font-weight:800; }
.dsh__meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.dsh__meta .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; }
.dsh__meta .newpill{ background:var(--green-soft); color:var(--green); font-weight:700; font-size:11.5px; padding:3px 10px; border-radius:var(--r-pill); }
.dsh__meta .sh__pin{ display:inline-flex; align-items:center; gap:4px; color:var(--ink-3); }
.dsh__meta .sh__pin svg{ width:13px; height:13px; }
.vbadge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.vbadge svg{ width:13px; height:13px; }
.vbadge.verified{ background:var(--trust); color:#fff; box-shadow:0 4px 10px -4px rgba(47,111,176,.7); }
.vbadge.mufti{ background:var(--trust-soft); color:var(--trust); border:1px solid color-mix(in srgb,var(--trust) 26%,#fff); }

.dsh__act{ flex:none; display:flex; gap:10px; align-self:center; padding-top:10px; }
.dsh__act button{ font-family:var(--font-body); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.btn-follow{ display:flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 22px; border:0; border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff; font-weight:800; font-size:14px;
  box-shadow:0 8px 20px -8px rgba(224,83,15,.6); }
.btn-follow svg{ width:17px; height:17px; }
.btn-chat{ display:flex; align-items:center; gap:7px; height:46px; padding:0 18px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:#fff; color:var(--ink); font-weight:700; font-size:14px; }
.btn-chat svg{ width:17px; height:17px; }

/* ---- stats ---- */
.dstats{ display:flex; gap:0; padding:18px 30px 0; flex-wrap:wrap; }
.dstat{ padding-right:28px; margin-right:28px; border-right:1px solid var(--line); }
.dstat:last-child{ border-right:0; }
.dstat b{ display:block; font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.dstat span{ font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }

/* ---- trust band ---- */
.mhs-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:18px 30px 4px; }
.tcard{ display:flex; flex-direction:column; gap:6px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.tcard .ti{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; }
.tcard .ti svg{ width:17px; height:17px; }
.tcard .ti.t-trust{ background:var(--trust-soft); color:var(--trust); }
.tcard .ti.t-green{ background:var(--green-soft); color:var(--green); }
.tcard .ti.t-brand{ background:var(--brand-soft); color:var(--brand); }
.tcard b{ font-size:13px; font-weight:700; color:var(--ink); }
.tcard span{ font-size:11.5px; color:var(--ink-3); line-height:1.3; }

/* ---- tabs ---- */
.dtabs{ display:flex; gap:6px; padding:18px 30px 0; border-bottom:1px solid var(--line); margin-top:16px; overflow-x:auto; scrollbar-width:none; }
.dtabs::-webkit-scrollbar{ display:none; }
.dtab{ border:0; background:transparent; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink-3);
  padding:11px 4px 14px; margin-right:18px; cursor:pointer; position:relative; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.dtab .pip{ color:var(--ink-3); font-weight:600; font-size:12px; margin-left:4px; font-variant-numeric:tabular-nums; }
.dtab.on{ color:var(--ink); } .dtab.on .pip{ color:var(--brand); }
.dtab::after{ content:""; position:absolute; left:0; right:18px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.dtab.on::after{ transform:scaleX(1); }
/* neutralise any global button :focus background; keep a clean keyboard ring */
.mh-store .dtab:focus,
.mh-store .dtab:active{ outline:none !important; background:transparent !important; box-shadow:none !important; }
.mh-store .dtab:focus-visible{ box-shadow:0 0 0 3px var(--brand-soft) !important; border-radius:6px; }

/* ---- panels ---- */
.dpanel{ display:none; }
.dpanel.on{ display:block; }

/* ---- products toolbar ---- */
.desk-toolbar{ display:flex; align-items:center; gap:14px; padding:16px 30px 2px; flex-wrap:wrap; }
.desk-toolbar .cnt{ font-size:13.5px; color:var(--ink-2); } .desk-toolbar .cnt b{ color:var(--ink); font-weight:800; }
.desk-toolbar .toolnote{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--green);
  background:var(--green-soft); padding:6px 12px; border-radius:var(--r-pill); }
.desk-toolbar .toolnote svg{ width:15px; height:15px; }

/* product grid lives inside .mh-catalog (woo-catalog.css). Give it store padding. */
.mh-store .mh-catalog{ padding:12px 24px 8px; }
.mh-store .mh-catalog ul.products{ margin:0 !important; }
.mh-store-pager{ padding:14px 24px 30px; }
.mh-store-pager .paging-navigation{ border:0; margin:0; padding:0; }
.mh-store-pager .pager{ display:none; }
.mh-store-pager .dokan-pagination-container{ margin:0; }
.mh-store-pager .dokan-pagination{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.mh-store-pager .dokan-pagination li{ margin:0; padding:0; }
.mh-store-pager .dokan-pagination li a{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink);
  font-family:var(--font-body); font-weight:700; font-size:13.5px; text-decoration:none; transition:.14s ease;
}
.mh-store-pager .dokan-pagination li a:hover{ border-color:var(--brand); color:var(--brand); }
.mh-store-pager .dokan-pagination li.active a{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mh-store-pager .dokan-pagination li.disabled a{ opacity:.4; pointer-events:none; }

/* empty state */
.mh-store-empty{ text-align:center; padding:48px 30px 56px; }
.mh-store-empty .orb{ width:84px; height:84px; margin:0 auto 18px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.mh-store-empty .orb svg{ width:38px; height:38px; }
.mh-store-empty h3{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:0 0 6px; }
.mh-store-empty p{ font-size:14px; color:var(--ink-2); margin:0; }

/* =========================================================
   ABOUT
   ========================================================= */
.dabout{ padding:30px 40px 38px; }
.dabout__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start; max-width:1000px; }
.dabout__kicker{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.dabout__h{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.14; letter-spacing:-.015em; margin:12px 0 18px; color:var(--ink); }
.dabout__h em{ font-style:italic; color:var(--accent-ink); }
.dabout p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin:0 0 15px; }
.dabout p b{ color:var(--ink); font-weight:700; }
.dabout__pull{ margin:8px 0 0; padding:16px 20px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 var(--r-md) var(--r-md) 0; }
.dabout__pull p{ font-family:var(--font-display); font-style:italic; font-size:18px; line-height:1.45; color:var(--accent-ink); margin:0; }
.dabout__side{ display:flex; flex-direction:column; gap:16px; }
.certbox{ padding:16px 17px; border:1.5px solid color-mix(in srgb,var(--trust) 28%,#fff); border-radius:var(--r-lg); background:linear-gradient(135deg,var(--trust-soft),#fff); }
.certbox .ch{ display:flex; align-items:center; gap:11px; }
.certbox .ch .bdg{ width:40px; height:40px; flex:none; border-radius:11px; background:var(--trust); display:grid; place-items:center; color:#fff; box-shadow:0 4px 10px -3px rgba(47,111,176,.6); }
.certbox .ch .bdg svg{ width:22px; height:22px; }
.certbox .ch b{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }
.certbox .ch span{ display:block; font-size:11.5px; color:var(--trust); font-weight:700; margin-top:1px; }
.certbox p{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.contactcard{ padding:15px 17px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; display:flex; flex-direction:column; gap:9px; }
.contactcard b{ font-size:13px; font-weight:800; color:var(--ink); }
.contactcard a,.contactcard .loc{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); text-decoration:none; font-weight:600; }
.contactcard a:hover{ color:var(--brand); }
.contactcard svg{ width:15px; height:15px; color:var(--ink-3); flex:none; }

/* =========================================================
   POLICIES
   ========================================================= */
.dpol{ padding:24px 40px 38px; display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1000px; }
.dpol .guarantee{ grid-column:1 / -1; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.pcard__h{ display:flex; align-items:center; gap:11px; padding:14px 15px; }
.pcard__h .pi{ width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; }
.pcard__h .pi svg{ width:19px; height:19px; }
.pcard__h .pi.p-brand{ background:var(--brand-soft); color:var(--brand); }
.pcard__h .pi.p-green{ background:var(--green-soft); color:var(--green); }
.pcard__h .pi.p-trust{ background:var(--trust-soft); color:var(--trust); }
.pcard__h b{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }
.pcard__h span{ display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:1px; }
.pcard__b{ padding:0 15px 15px; border-top:1px solid var(--line-2); }
.pcard__b dl{ margin:0; }
.pcard__b .prow{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.pcard__b .prow:last-child{ border-bottom:0; }
.pcard__b .prow dt{ flex:none; width:118px; color:var(--ink-3); font-weight:600; }
.pcard__b .prow dd{ flex:1; margin:0; color:var(--ink); font-weight:500; line-height:1.5; }
.pcard__b .prow dd b{ font-weight:800; }
.guarantee{ background:linear-gradient(135deg,var(--green-soft),#fff); border-color:color-mix(in srgb,var(--green) 26%,#fff); }
.guarantee .pcard__h b{ color:var(--green); }
.guarantee .gnote{ padding:0 15px 15px; }
.guarantee .gnote p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0; }
.guarantee .gnote p b{ color:var(--ink); font-weight:700; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .dabout__grid{ grid-template-columns:1fr; gap:24px; }
  .dabout{ padding:26px 24px 32px; }
  .dpol{ padding:20px 24px 32px; }
}
@media (max-width:768px){
  .mh-store{ border-radius:14px; }
  .dsh__cover{ height:120px; }
  .dsh__bar{ flex-wrap:wrap; gap:10px 12px; padding:0 16px 4px; }
  .dsh__avatar{ width:80px; height:80px; border-radius:18px; margin-top:-44px; }
  .dsh__glyph svg{ width:40px; height:40px; }
  .dsh__id{ flex-basis:100%; order:3; padding-top:6px; }
  .dsh__name{ font-size:21px; }
  .dsh__act{ flex-basis:100%; order:4; align-self:stretch; padding-top:2px; }
  .dsh__act .btn-follow{ flex:1; }
  .dstats{ padding:16px 16px 0; gap:0; }
  .dstat{ padding-right:16px; margin-right:16px; }
  .dstat b{ font-size:16px; } .dstat span{ font-size:10px; }
  .mhs-trust{ grid-template-columns:repeat(2,1fr); padding:16px 16px 2px; }
  .dtabs{ padding:16px 16px 0; }
  .desk-toolbar{ padding:14px 16px 2px; }
  .desk-toolbar .toolnote{ margin-left:0; }
  .mh-store .mh-catalog{ padding:10px 14px 6px; }
  .mh-store-pager{ padding:6px 14px 22px; }
  .dabout{ padding:22px 18px 28px; }
  .dabout__h{ font-size:25px; }
  .dpol{ grid-template-columns:1fr; padding:18px 16px 28px; }
}
@media (max-width:420px){
  .dstats{ display:grid; grid-template-columns:1fr 1fr; gap:10px 0; }
  .dstat{ border-right:0; padding-right:0; margin-right:0; }
}