/*
Theme Name:   Astra MasnoonHub Child
Theme URI:    https://masnoonhubexpress.com
Description:  MasnoonHub multi-vendor marketplace — Daraz/AliExpress visual language on Astra parent. Custom header, product cards, single product, shop catalog, homepage. Keeps Astra for the plumbing (template hierarchy, customizer integration) while replacing the visual layer wholesale.
Author:       MasnoonHub
Author URI:   https://masnoonhubexpress.com
Template:     astra
Version:      0.9.132
Text Domain:  astra-masnoonhub-child
*/

/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */
:root {
  /* Brand */
  --mh-primary:        #f57224;   /* Daraz orange — primary CTA */
  --mh-primary-dark:   #d85e0f;
  --mh-secondary:      #1f3b2d;   /* Deep green — MasnoonHub identity */
  --mh-secondary-soft: #2d5641;
  --mh-accent:         #d4a574;   /* Warm amber */
  --mh-sale:           #e63946;   /* Sale red */
  --mh-success:        #2eb872;
  --mh-trust:          #ffa41c;   /* Star orange */

  /* Surfaces */
  --mh-bg-page:        #f5f5f5;
  --mh-bg-card:        #ffffff;
  --mh-bg-soft:        #fafafa;
  --mh-bg-band:        #fff7e6;
  --mh-bg-dark:        #1f3b2d;

  /* Text */
  --mh-text:           #1a1a1a;
  --mh-text-soft:      #5a5a5a;
  --mh-text-muted:     #888;
  --mh-text-on-dark:   #ffffff;
  --mh-text-link:      var(--mh-primary);

  /* Lines */
  --mh-line:           #e6e6e6;
  --mh-line-soft:      #f0f0f0;

  /* Radius */
  --mh-r-sm:           4px;
  --mh-r-md:           8px;
  --mh-r-lg:           14px;

  /* Shadow */
  --mh-shadow-1:       0 1px 3px rgba(0,0,0,0.06);
  --mh-shadow-2:       0 4px 12px rgba(0,0,0,0.08);
  --mh-shadow-3:       0 8px 24px rgba(0,0,0,0.12);

  /* Container */
  --mh-container:      1280px;

  /* Typography */
  --mh-font: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =====================================================================
   GLOBAL RESET — defeat Astra's default look that fights us
   ===================================================================== */
body, body.ast-separate-container {
  background: var(--mh-bg-page) !important;
  font-family: var(--mh-font) !important;
  color: var(--mh-text);
  font-size: 14px;
  line-height: 1.5;
}

.site-content, .ast-container { background: transparent; }

/* Hide Astra's default header so our custom one takes its place */
header.site-header { display: none !important; }

/* Hide page titles on shop / product / cart / dashboard — our designs handle them */
.woocommerce.archive .entry-title,
.woocommerce.archive .page-title,
.woocommerce .ast-archive-title,
.ast-archive-description { display: none !important; }
.single-product .entry-title { /* keep for single product, our override styles it */ }
.page-template-default .entry-title { /* keep for static pages */ }

/* Container width — Astra defaults to 1240 or whatever the customizer says */
.ast-container, .site-content > .ast-container,
.entry-content > .wp-block-group.alignfull { max-width: 100%; }
.mh-wrap, .ast-container > article, .ast-container > main {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 16px;
}

/* Hide Astra sidebar on shop pages — we'll do our own filter rail */
.ast-page-builder-template .post-thumbnail { display: none; }
.woocommerce .widget-area { display: none !important; }
.woocommerce #primary { width: 100% !important; max-width: 100% !important; }

/* Single-Page transparent content area */
.single-product .ast-article-single,
.archive.woocommerce .ast-article-single,
.page-template-default .ast-article-single,
.home .ast-article-single {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Defensive: empty paragraphs from Gutenberg shouldn't space out */
.entry-content > p:empty { display: none; }


/* =====================================================================
   CUSTOM HEADER
   ===================================================================== */
.mh-header {
  background: #fff;
  border-bottom: 1px solid var(--mh-line);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--mh-shadow-1);
}
.mh-header.is-scrolled { box-shadow: var(--mh-shadow-2); }

.mh-header-top {
  background: var(--mh-secondary);
  color: var(--mh-text-on-dark);
  font-size: 12px;
  padding: 6px 0;
}
.mh-header-top-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mh-header-top a { color: var(--mh-text-on-dark); text-decoration: none; opacity: .85; }
.mh-header-top a:hover { opacity: 1; }
.mh-header-top-right { display: flex; gap: 16px; }

.mh-header-main {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.mh-logo {
  display: inline-flex;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--mh-secondary);
  text-decoration: none !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.mh-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}
.mh-logo-text span { color: var(--mh-primary); }

.mh-search {
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 2px solid var(--mh-primary);
  border-radius: var(--mh-r-md);
  overflow: hidden;
  max-width: 720px;
}
.mh-search select {
  border: 0;
  background: #fafafa;
  padding: 0 12px;
  font-size: 13px;
  color: var(--mh-text-soft);
  border-right: 1px solid var(--mh-line);
  cursor: pointer;
  outline: none;
  min-width: 130px;
}
.mh-search input {
  flex: 1;
  border: 0;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.mh-search button {
  background: var(--mh-primary);
  color: #fff;
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mh-search button:hover { background: var(--mh-primary-dark); }

.mh-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mh-header-actions > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  text-decoration: none !important;
  color: var(--mh-text-soft);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--mh-r-md);
  position: relative;
  min-width: 56px;
}
.mh-header-actions > a:hover { background: var(--mh-bg-soft); color: var(--mh-text); }
.mh-header-actions svg, .mh-header-actions .mh-ico { width: 22px; height: 22px; }
.mh-header-actions .mh-cart-count {
  position: absolute;
  top: 2px;
  right: 6px;
  background: var(--mh-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 5px;
}

.mh-header-cats {
  background: #fff;
  border-top: 1px solid var(--mh-line-soft);
  border-bottom: 1px solid var(--mh-line);
}
.mh-header-cats-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mh-header-cats-inner::-webkit-scrollbar { display: none; }
.mh-header-cats-inner a {
  padding: 10px 14px;
  text-decoration: none !important;
  color: var(--mh-text-soft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.mh-header-cats-inner a:hover { color: var(--mh-primary); border-bottom-color: var(--mh-primary); }
.mh-header-cats-inner a.mh-become-vendor {
  margin-left: auto;
  background: var(--mh-secondary);
  color: #fff;
  border-radius: var(--mh-r-md);
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 6px 14px;
  font-weight: 600;
}
.mh-header-cats-inner a.mh-become-vendor:hover { background: var(--mh-secondary-soft); border-bottom-color: transparent; }

@media (max-width: 768px) {
  .mh-header-main { gap: 12px; flex-wrap: wrap; }
  .mh-logo { font-size: 20px; }
  .mh-search { order: 3; flex-basis: 100%; }
  .mh-header-actions > a { padding: 6px 8px; min-width: 44px; }
  .mh-header-actions > a span:not(.mh-cart-count) { display: none; }
  .mh-header-top { display: none; }
}


/* =====================================================================
   HERO BANNER STRIP
   ===================================================================== */
.mh-hero-band {
  background: linear-gradient(135deg, var(--mh-secondary) 0%, var(--mh-secondary-soft) 100%);
  color: #fff;
  padding: 0;
}
.mh-hero-grid {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 32px 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.mh-hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--mh-r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none !important;
  color: #fff;
  min-height: 220px;
  transition: transform .2s, background .2s;
}
.mh-hero-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }
.mh-hero-card-main {
  background: linear-gradient(135deg, rgba(245,114,36,0.95) 0%, rgba(212,165,116,0.85) 100%);
  border: none;
}
.mh-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: .85; margin-bottom: 8px; }
.mh-hero-headline { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 0 0 8px; }
.mh-hero-card-main .mh-hero-headline { font-size: 36px; }
.mh-hero-sub { opacity: .9; font-size: 14px; margin-bottom: 16px; }
.mh-hero-cta {
  display: inline-block;
  background: #fff;
  color: var(--mh-secondary);
  padding: 10px 20px;
  border-radius: var(--mh-r-md);
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
}
.mh-hero-card-main .mh-hero-cta { color: var(--mh-primary-dark); }

@media (max-width: 900px) {
  .mh-hero-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   CATEGORY ICON ROW
   ===================================================================== */
.mh-cat-strip {
  background: #fff;
  border-bottom: 1px solid var(--mh-line);
}
.mh-cat-strip-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.mh-cat-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  text-decoration: none !important;
  color: var(--mh-text-soft);
  border-radius: var(--mh-r-md);
  transition: background .15s;
  text-align: center;
}
.mh-cat-icon:hover { background: var(--mh-bg-soft); color: var(--mh-text); }
.mh-cat-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #fff7e6 0%, #f6e9d8 100%);
}
.mh-cat-icon-attar      .mh-cat-icon-circle { background: linear-gradient(135deg, #fef3e2 0%, #f4ddb8 100%); }
.mh-cat-icon-hijab      .mh-cat-icon-circle { background: linear-gradient(135deg, #fce8f0 0%, #efc1d3 100%); }
.mh-cat-icon-tasbih     .mh-cat-icon-circle { background: linear-gradient(135deg, #e7f3df 0%, #c0d8a9 100%); }
.mh-cat-icon-prayermat  .mh-cat-icon-circle { background: linear-gradient(135deg, #fde4e6 0%, #e8b8bd 100%); }
.mh-cat-icon-books      .mh-cat-icon-circle { background: linear-gradient(135deg, #ece1cf 0%, #c4ad88 100%); }
.mh-cat-icon-deals      .mh-cat-icon-circle { background: linear-gradient(135deg, #ffd6d6 0%, #ff8585 100%); }
.mh-cat-icon-new        .mh-cat-icon-circle { background: linear-gradient(135deg, #e0f0ff 0%, #a3cef1 100%); }
.mh-cat-icon-vendors    .mh-cat-icon-circle { background: linear-gradient(135deg, #f0e9ff 0%, #c5b3eb 100%); }
.mh-cat-icon-label { font-size: 12px; font-weight: 500; }

@media (max-width: 900px) { .mh-cat-strip-inner { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .mh-cat-strip-inner { grid-template-columns: repeat(3, 1fr); } }


/* =====================================================================
   FLASH SALE STRIP
   ===================================================================== */
.mh-flash {
  background: linear-gradient(90deg, var(--mh-sale) 0%, #ff7547 100%);
  margin: 24px 0;
}
.mh-flash-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 20px 16px;
  color: #fff;
}
.mh-flash-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mh-flash-title { font-size: 22px; font-weight: 800; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.mh-flash-timer { display: flex; gap: 4px; align-items: center; font-weight: 700; }
.mh-flash-timer span {
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mh-flash-see {
  margin-left: auto;
  color: #fff;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--mh-r-md);
}
.mh-flash-see:hover { background: rgba(255,255,255,0.15); }
.mh-flash .woocommerce ul.products { background: #fff; border-radius: var(--mh-r-md); padding: 12px !important; }


/* =====================================================================
   PRODUCT CARD — Daraz-shaped
   ===================================================================== */
/* Reset Astra/WC opinions about the product list */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid !important;
  /* Fixed-width tracks with auto-fit so empty columns collapse instead of
     leaving cards stuck at the left when there are fewer items than slots */
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) !important;
  justify-content: center !important;
  gap: 12px !important;
  /* Constrain to container width + center the whole grid on the page */
  max-width: var(--mh-container) !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  list-style: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  ul.products {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
}

.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: var(--mh-r-md) !important;
  box-shadow: var(--mh-shadow-1);
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  transition: box-shadow .15s, transform .15s;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  box-shadow: var(--mh-shadow-2);
  transform: translateY(-1px);
  z-index: 5;
}

/* MH custom card markup (from content-product.php override) */
.mh-card-img-link {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mh-bg-soft);
}
.mh-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.mh-card:hover .mh-card-img { transform: scale(1.05); }

.mh-card-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--mh-sale);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  z-index: 2;
}
.mh-card-featured-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--mh-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mh-card-body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; }

.mh-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--mh-text) !important;
  text-decoration: none !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.mh-card-title:hover { color: var(--mh-primary) !important; }

.mh-card-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mh-price-sale { font-size: 16px; font-weight: 700; color: var(--mh-sale); }
.mh-price-regular { font-size: 12px; color: var(--mh-text-muted); text-decoration: line-through; }

.mh-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mh-text-muted); }
.mh-card-stars {
  display: inline-block;
  position: relative;
  font-size: 12px;
  color: #ddd;
  line-height: 1;
}
.mh-card-stars::before { content: '★★★★★'; }
.mh-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  color: var(--mh-trust);
}
.mh-stars-fill::before { content: '★★★★★'; }
.mh-card-rating-text { font-weight: 600; color: var(--mh-text-soft); }
.mh-card-sold { color: var(--mh-text-muted); }
.mh-card-sold::before { content: '·'; margin-right: 6px; }

.mh-card-vendor {
  font-size: 11px;
  color: var(--mh-text-muted) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-card-vendor:hover { color: var(--mh-primary) !important; text-decoration: underline !important; }
.mh-card-vendor-tag { color: var(--mh-text-muted); margin-right: 4px; }


/* =====================================================================
   HOMEPAGE — Daraz-style section spacing
   ===================================================================== */
body.home .site-content { background: var(--mh-bg-page); }
.mh-section {
  margin: 32px auto;
  max-width: var(--mh-container);
  padding: 0 16px;
}
.mh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--mh-r-md) var(--mh-r-md) 0 0;
  border-bottom: 2px solid var(--mh-primary);
}
.mh-section-title { font-size: 18px; font-weight: 800; color: var(--mh-secondary); margin: 0; }
.mh-section-link { color: var(--mh-primary); text-decoration: none !important; font-weight: 600; font-size: 13px; }
.mh-section-link:hover { color: var(--mh-primary-dark); }

.mh-section-body { background: #fff; padding: 16px; border-radius: 0 0 var(--mh-r-md) var(--mh-r-md); }


/* =====================================================================
   VENDOR SHOWCASE
   ===================================================================== */
.mh-vendors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 700px) { .mh-vendors-grid { grid-template-columns: 1fr; } }
.mh-vendor-card-v2 {
  background: linear-gradient(135deg, var(--mh-bg-card) 0%, var(--mh-bg-soft) 100%);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-md);
  padding: 20px;
  text-decoration: none !important;
  color: var(--mh-text);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow .15s, transform .15s;
}
.mh-vendor-card-v2:hover { box-shadow: var(--mh-shadow-2); transform: translateY(-1px); }
.mh-vendor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--mh-bg-soft);
  border: 2px solid var(--mh-line);
  flex-shrink: 0;
}
.mh-vendor-avatar-attar  { background: linear-gradient(135deg, #fef3e2, #f4ddb8); }
.mh-vendor-avatar-hijab  { background: linear-gradient(135deg, #fce8f0, #efc1d3); }
.mh-vendor-avatar-tasbih { background: linear-gradient(135deg, #e7f3df, #c0d8a9); }
.mh-vendor-name-v2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--mh-secondary); }
.mh-vendor-meta-v2 { font-size: 12px; color: var(--mh-text-soft); margin: 0; }
.mh-vendor-meta-v2 .mh-stars-mini { color: var(--mh-trust); }


/* =====================================================================
   TRUST SIGNALS ROW
   ===================================================================== */
.mh-trust-band {
  background: #fff;
  border-top: 1px solid var(--mh-line);
  margin-top: 32px;
}
.mh-trust-band-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mh-trust-cell { display: flex; align-items: center; gap: 12px; }
.mh-trust-cell-ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: var(--mh-bg-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.mh-trust-cell strong { color: var(--mh-secondary); font-size: 14px; display: block; }
.mh-trust-cell span { color: var(--mh-text-muted); font-size: 12px; }

@media (max-width: 700px) { .mh-trust-band-inner { grid-template-columns: repeat(2, 1fr); } }


/* =====================================================================
   SHOP / CATEGORY PAGE
   ===================================================================== */
.woocommerce.archive .site-content { background: var(--mh-bg-page); padding-top: 16px; }
.woocommerce-breadcrumb {
  max-width: var(--mh-container);
  margin: 0 auto 12px !important;
  padding: 8px 16px !important;
  color: var(--mh-text-muted) !important;
  font-size: 12px !important;
}
.woocommerce-breadcrumb a { color: var(--mh-text-soft) !important; }

.woocommerce-products-header {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 16px 12px;
}
.woocommerce-result-count {
  font-size: 13px;
  color: var(--mh-text-soft);
  margin: 0 !important;
}
.woocommerce-ordering {
  margin: 0 !important;
  float: right;
}
.woocommerce-ordering select {
  padding: 8px 12px;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-md);
  background: #fff;
  font-size: 13px;
}

.woocommerce.archive ul.products {
  max-width: var(--mh-container);
  margin: 0 auto !important;
  padding: 0 16px !important;
}


/* =====================================================================
   SINGLE PRODUCT PAGE
   ===================================================================== */
.single-product .product {
  max-width: var(--mh-container);
  margin: 24px auto;
  padding: 24px;
  background: #fff;
  border-radius: var(--mh-r-md);
  box-shadow: var(--mh-shadow-1);
}
.single-product div.product div.images { width: 45% !important; }
.single-product div.product div.summary { width: 50% !important; }
.single-product .product_title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mh-text) !important;
  margin: 0 0 12px !important;
}
.single-product .price {
  font-size: 28px !important;
  color: var(--mh-sale) !important;
  margin: 12px 0 !important;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.single-product .price del {
  font-size: 16px;
  color: var(--mh-text-muted) !important;
  font-weight: 400;
}
.single-product .price ins {
  text-decoration: none;
  color: var(--mh-sale) !important;
  font-weight: 800 !important;
}
.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px !important;
  font-size: 13px;
}
.single-product .star-rating { font-size: 14px !important; }
.single-product .star-rating span::before { color: var(--mh-trust) !important; }

.single-product form.cart { margin: 20px 0 !important; display: flex; align-items: center; gap: 12px; }
.single-product .quantity input { padding: 10px; border: 1px solid var(--mh-line); border-radius: var(--mh-r-md); width: 60px; text-align: center; }
.single-product button.single_add_to_cart_button {
  background: var(--mh-primary) !important;
  color: #fff !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--mh-r-md) !important;
  border: none !important;
  transition: background .15s;
}
.single-product button.single_add_to_cart_button:hover { background: var(--mh-primary-dark) !important; }

/* Sold by vendor info card */
.mh-sold-by {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--mh-bg-soft);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mh-sold-by-label { font-size: 11px; color: var(--mh-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mh-sold-by-name { font-weight: 700; color: var(--mh-secondary); }
.mh-sold-by-name:hover { color: var(--mh-primary); }
.mh-sold-by-visit {
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--mh-primary);
  color: var(--mh-primary);
  border-radius: var(--mh-r-md);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
}
.mh-sold-by-visit:hover { background: var(--mh-primary); color: #fff; }


/* Trust signals on single product */
.mh-product-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--mh-line);
  border-bottom: 1px solid var(--mh-line);
}
.mh-product-trust-cell { font-size: 11px; color: var(--mh-text-soft); display: flex; align-items: center; gap: 6px; }
.mh-product-trust-cell::before { font-size: 18px; }


/* =====================================================================
   CART / CHECKOUT polish — keep WC defaults but ensure container
   ===================================================================== */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  max-width: var(--mh-container);
  margin: 24px auto !important;
  padding: 24px !important;
  background: #fff;
  border-radius: var(--mh-r-md);
  box-shadow: var(--mh-shadow-1);
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  color: var(--mh-secondary) !important;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--mh-primary) !important;
  color: #fff !important;
  border-radius: var(--mh-r-md) !important;
  font-weight: 600 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--mh-primary-dark) !important; }


/* =====================================================================
   FOOTER tweak
   ===================================================================== */
footer.site-footer { background: var(--mh-secondary) !important; }
footer .ast-small-footer { color: var(--mh-text-on-dark) !important; }


/* =====================================================================
   DOKAN VENDOR DASHBOARD polish
   ===================================================================== */
.dokan-dashboard-wrap { background: var(--mh-bg-page) !important; }
.dokan-dashboard-menu li a:hover,
.dokan-dashboard-menu li.active a { background: var(--mh-secondary) !important; color: #fff !important; }
.dokan-reverse-withdrawal-notice { display: none !important; }


/* =====================================================================
   ACCESSIBILITY + SMALL DETAILS
   ===================================================================== */
*:focus-visible { outline: 2px solid var(--mh-primary); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* =====================================================================
   MOBILE OPTIMIZATIONS — phone-first tightening below 600px / 400px
   ===================================================================== */

/* Prevent horizontal scroll on any viewport (long product titles, wide tables) */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 600px) {
  /* HEADER — main row */
  .mh-header-main { padding: 10px 12px !important; gap: 8px !important; }
  .mh-logo { font-size: 18px !important; }
  .mh-search { gap: 4px; }
  .mh-search select { display: none; } /* reclaim horizontal space */
  .mh-search input[type="text"] { font-size: 14px; padding: 8px 10px; }
  .mh-search button { padding: 8px 10px; font-size: 0; }
  .mh-search button svg { margin: 0; }
  .mh-header-actions > a { padding: 6px 6px; min-width: 36px; }
  .mh-header-actions > a .mh-ico { width: 22px; height: 22px; }

  /* HEADER — category nav strip (already horizontally scrolls, just tighten) */
  .mh-header-cats-inner { padding: 0 12px; gap: 2px; }
  .mh-header-cats-inner a { padding: 8px 10px; font-size: 12px; }
  .mh-header-cats-inner a.mh-become-vendor { margin-left: 8px; padding: 6px 10px; font-size: 11px; }

  /* HERO BAND */
  .mh-hero-grid { padding: 16px 12px; gap: 10px; }
  .mh-hero-card { padding: 20px 16px; min-height: 140px; border-radius: var(--mh-r-md); }
  .mh-hero-headline { font-size: 20px; line-height: 1.2; }
  .mh-hero-card-main .mh-hero-headline { font-size: 22px; }
  .mh-hero-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .mh-hero-sub { font-size: 13px; margin-bottom: 12px; }
  .mh-hero-cta { padding: 8px 14px; font-size: 12px; }

  /* CATEGORY ICON STRIP */
  .mh-cat-strip-inner { padding: 14px 8px; gap: 4px; grid-template-columns: repeat(4, 1fr); }
  .mh-cat-icon-circle { width: 44px; height: 44px; font-size: 22px; }
  .mh-cat-icon-label { font-size: 11px; }
  .mh-cat-icon { padding: 8px 2px; }

  /* FLASH SALE STRIP */
  .mh-flash { margin: 16px 0; }
  .mh-flash-inner { padding: 14px 12px; }
  .mh-flash-title { font-size: 16px; }
  .mh-flash-timer span { padding: 3px 6px; font-size: 12px; min-width: 22px; }
  .mh-flash-see { font-size: 12px; padding: 4px 10px; margin-left: auto; }
  .mh-flash-head { gap: 10px; margin-bottom: 12px; }

  /* SECTION HEADS */
  .mh-section { margin: 16px auto; padding: 0 8px; }
  .mh-section-head { padding: 10px 12px; margin-bottom: 8px; }
  .mh-section-title { font-size: 15px; }
  .mh-section-link { font-size: 12px; }

  /* PRODUCT CARDS (2-col grid kicks in at 600px from earlier rule) */
  .mh-card-body { padding: 8px 8px 10px; gap: 4px; }
  .mh-card-title { font-size: 12px; min-height: 2.5em; }
  .mh-price-sale { font-size: 14px; }
  .mh-price-regular { font-size: 11px; }
  .mh-card-meta { font-size: 10px; gap: 4px; flex-wrap: wrap; }
  .mh-card-discount { font-size: 10px; padding: 2px 5px; top: 6px; left: 6px; }
  .mh-card-vendor { font-size: 10px; }

  /* VENDOR SHOWCASE */
  .mh-vendors-grid { gap: 10px; }
  .mh-vendor-card-v2 { padding: 14px; gap: 12px; }
  .mh-vendor-avatar { width: 52px; height: 52px; font-size: 24px; }
  .mh-vendor-name-v2 { font-size: 14px; }
  .mh-vendor-meta-v2 { font-size: 11px; }

  /* TRUST BAND */
  .mh-trust-band-inner { padding: 16px 12px; gap: 10px; }
  .mh-trust-cell-ico { width: 36px; height: 36px; font-size: 18px; }
  .mh-trust-cell strong { font-size: 12px; }
  .mh-trust-cell span { font-size: 11px; }

  /* SINGLE PRODUCT PAGE */
  .woocommerce div.product .product_title,
  .woocommerce div.product .entry-title { font-size: 18px !important; line-height: 1.3 !important; }
  .woocommerce div.product .price { font-size: 18px !important; }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 0 16px !important; }

  /* SHOP / CATEGORY HEADER */
  .woocommerce-products-header { padding: 0 12px 8px; }
  .woocommerce-result-count, .woocommerce-ordering { font-size: 12px !important; }
  .woocommerce-ordering { float: none !important; margin: 6px 0 12px !important; }
  .woocommerce-ordering select { width: 100%; }

  /* CART / CHECKOUT */
  .woocommerce table.shop_table { font-size: 12px; }
  .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 8px !important; }

  /* DOKAN DASHBOARD */
  .dokan-dashboard-content { padding: 12px !important; }
  .dokan-dashboard-menu { font-size: 13px; }
}

@media (max-width: 400px) {
  /* Very narrow phones — final collapse */
  .mh-cat-strip-inner { grid-template-columns: repeat(3, 1fr); }
  .mh-trust-band-inner { grid-template-columns: 1fr; }
  .mh-trust-cell { padding: 6px 0; }
  .mh-hero-card-main .mh-hero-headline { font-size: 19px; }
  .mh-hero-headline { font-size: 17px; }
  .mh-flash-title { font-size: 14px; }
  .mh-flash-see { font-size: 11px; padding: 3px 8px; }
}

/* Tap targets — minimum 32px touch height on phone for any clickable text */
@media (max-width: 600px) {
  .mh-section-link, .mh-flash-see { min-height: 32px; display: inline-flex; align-items: center; }
}


/* =====================================================================
   MOBILE DENSITY PASS — 2026-05-26
   The earlier 600px pass made layout responsive. This pass kills wasted
   vertical space so the page feels like a marketplace, not a brochure.
   ===================================================================== */

@media (max-width: 600px) {
  /* HERO — much shorter cards, no min-height tyranny */
  .mh-hero-band { padding: 0; }
  .mh-hero-grid { padding: 12px 10px; gap: 8px; }
  .mh-hero-card { padding: 14px 14px; min-height: 0; }
  .mh-hero-card-main { min-height: 120px; }
  .mh-hero-headline { font-size: 16px; margin-bottom: 4px; }
  .mh-hero-card-main .mh-hero-headline { font-size: 18px; }
  .mh-hero-sub { font-size: 12px; margin-bottom: 8px; }
  .mh-hero-eyebrow { font-size: 9px; }
  .mh-hero-cta { padding: 6px 12px; font-size: 11px; }

  /* SECTION SEPARATION — kill big margins */
  .mh-section { margin: 12px auto; }
  .mh-section-head { padding: 8px 12px; margin-bottom: 6px; border-bottom-width: 1px; }
  .mh-section-title { font-size: 14px; }
  .mh-section-link { font-size: 11px; }

  /* CATEGORY ICON STRIP — tighter */
  .mh-cat-strip-inner { padding: 10px 8px; }
  .mh-cat-icon-circle { width: 40px; height: 40px; font-size: 20px; }
  .mh-cat-icon-label { font-size: 10px; }
  .mh-cat-icon { padding: 6px 2px; gap: 4px; }

  /* FLASH SALE STRIP — compact */
  .mh-flash { margin: 12px 0; }
  .mh-flash-inner { padding: 10px 12px; }
  .mh-flash-head { margin-bottom: 0; gap: 8px; }
  .mh-flash-title { font-size: 13px; font-weight: 700; }
  .mh-flash-timer { font-size: 11px; }
  .mh-flash-timer span { padding: 2px 5px; min-width: 20px; }
  .mh-flash-see { font-size: 11px; padding: 3px 8px; }

  /* PRODUCT CARD — denser */
  ul.products { gap: 6px !important; padding: 0 6px !important; }
  .mh-card-body { padding: 6px 6px 8px; }
  .mh-card-title { font-size: 11px; min-height: 2.4em; }
  .mh-price-sale { font-size: 13px; }
  .mh-price-regular { font-size: 10px; }
  .mh-card-discount { font-size: 9px; padding: 2px 4px; }
  .mh-card-meta { font-size: 9px; }
  .mh-card-vendor { font-size: 9px; }

  /* VENDOR SHOWCASE — 2-col on phone, not 1-col */
  .mh-vendors-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mh-vendor-card-v2 { padding: 10px; gap: 8px; flex-direction: column; align-items: flex-start; text-align: left; }
  .mh-vendor-avatar { width: 40px; height: 40px; font-size: 18px; border-width: 1px; }
  .mh-vendor-name-v2 { font-size: 12px; margin-bottom: 2px; }
  .mh-vendor-meta-v2 { font-size: 10px; }

  /* TRUST BAND — keep 2-col, never collapse to 1 */
  .mh-trust-band-inner { padding: 12px 10px; gap: 8px; grid-template-columns: repeat(2, 1fr); }
  .mh-trust-cell { gap: 8px; }
  .mh-trust-cell-ico { width: 28px; height: 28px; font-size: 14px; }
  .mh-trust-cell strong { font-size: 11px; }
  .mh-trust-cell span { font-size: 10px; }

  /* FOOTER — Astra builder footer needs taming */
  .footer-widget-area { padding: 16px 12px !important; }
  .footer-widget-area .widget { margin-bottom: 16px !important; }
  .footer-widget-area h3, .footer-widget-area .widget-title {
    font-size: 13px !important;
    margin: 0 0 8px !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .footer-widget-area p, .footer-widget-area li, .footer-widget-area a {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  .footer-widget-area ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }
  .footer-widget-area li { padding: 2px 0; }
  .ast-footer-copyright, .site-info { font-size: 11px !important; padding: 12px !important; }
}

@media (max-width: 400px) {
  /* Hero: collapse to single short card on very narrow */
  .mh-hero-card { padding: 12px; min-height: 0; }
  .mh-hero-card-main { min-height: 100px; }
  .mh-hero-card-main .mh-hero-headline { font-size: 16px; }
  .mh-hero-headline { font-size: 14px; }

  /* Section internal padding to absolute minimum */
  .mh-section { padding: 0 6px; }
}

/* FOOTER — global polish (not just phone) for the new MasnoonHub widgets */
footer.site-footer .footer-widget-area {
  background: var(--mh-secondary) !important;
  color: var(--mh-text-on-dark) !important;
}
footer.site-footer .footer-widget-area * { color: var(--mh-text-on-dark) !important; }
footer.site-footer .footer-widget-area h3,
footer.site-footer .footer-widget-area .widget-title {
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
footer.site-footer .footer-widget-area a:hover { color: var(--mh-primary) !important; }
footer.site-footer .footer-widget-area ul { padding: 0; margin: 0; list-style: none; }
footer.site-footer .footer-widget-area ul li { padding: 4px 0; }

/* Apply dark green to the WHOLE footer (not per column) so the bg is uniform */
footer.site-footer {
  background: var(--mh-secondary) !important;
  color: var(--mh-text-on-dark) !important;
}
footer.site-footer .footer-widget-area { background: transparent !important; }

/* Equal-width 4-column centered grid for footer columns */
footer.site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  max-width: var(--mh-container) !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
  align-items: start;
}
footer.site-footer .site-primary-footer-wrap { padding: 0 !important; }
footer.site-footer .ast-builder-grid-row-container-inner { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Each footer section column: full cell, left-aligned content with normalized padding */
footer.site-footer .site-footer-primary-section-1,
footer.site-footer .site-footer-primary-section-2,
footer.site-footer .site-footer-primary-section-3,
footer.site-footer .site-footer-primary-section-4 {
  width: auto !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
}

/* Below-footer (copyright + social): center horizontally with proper container */
footer.site-footer .site-below-footer-inner-wrap {
  max-width: var(--mh-container) !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
footer.site-footer .site-below-footer-wrap { padding: 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }

/* Above-footer wrapper (where SALE banner was): collapse it cleanly */
footer.site-footer .site-above-footer-wrap { padding: 0 !important; }
footer.site-footer .site-above-footer-inner-wrap { padding: 0 !important; }
footer.site-footer .ast-footer-html-1:empty { display: none !important; }

/* Mobile footer: stack columns */
@media (max-width: 780px) {
  footer.site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 28px 16px !important;
  }
  footer.site-footer .site-below-footer-inner-wrap {
    flex-direction: column !important;
    text-align: center;
    padding: 14px 16px !important;
  }
}
@media (max-width: 480px) {
  footer.site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* Center items in the trust band (Free delivery / 7-day returns / etc) */
.mh-trust-cell {
  justify-content: center;
  text-align: left;
}


/* =====================================================================
   BURGER BUTTON
   Visible on phones (<900px) — opens the off-canvas drawer.
   ===================================================================== */
.mh-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--mh-r-md);
  color: var(--mh-secondary);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.mh-burger:hover { background: var(--mh-bg-soft); }
.mh-burger:active { background: var(--mh-line); }
.mh-burger svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .mh-burger { display: inline-flex; }
}

/* Sign-up CTA pill in the top utility strip (desktop) */
.mh-header-top-cta {
  background: var(--mh-primary);
  color: #fff !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  opacity: 1 !important;
}
.mh-header-top-cta:hover { background: var(--mh-primary-dark); }

/* "Sign in" header action — same shape as Account, but visually marked as the primary entry point for non-logged-in users */
.mh-header-actions .mh-header-signin {
  color: var(--mh-primary);
  font-weight: 700;
}
.mh-header-actions .mh-header-signin:hover { background: rgba(245,114,36,0.08); color: var(--mh-primary-dark); }


/* =====================================================================
   OFF-CANVAS NAVIGATION DRAWER
   ===================================================================== */

/* Backdrop — full-viewport overlay that closes drawer on tap */
.mh-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 28, 0.55);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 998;
}
.mh-drawer-backdrop.is-open { opacity: 1; }

/* Drawer panel — slides in from the left */
.mh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mh-drawer.is-open {
  transform: translateX(0);
  box-shadow: 8px 0 32px rgba(0,0,0,0.18);
}

/* Lock body scroll while drawer is open */
html.mh-drawer-lock,
html.mh-drawer-lock body { overflow: hidden; }

/* Drawer head */
.mh-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mh-line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
.mh-drawer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  color: var(--mh-secondary);
  font-weight: 800;
  font-size: 15px;
}
.mh-drawer-logo img {
  max-height: 36px;
  width: auto;
  display: block;
}
.mh-drawer-close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--mh-text-soft);
  cursor: pointer;
  border-radius: var(--mh-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mh-drawer-close:hover { background: var(--mh-bg-soft); color: var(--mh-text); }
.mh-drawer-close svg { width: 20px; height: 20px; }

/* Sign-up / Sign-in CTA card at top of drawer (for guests) */
.mh-drawer-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px 6px;
}
.mh-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 12px;
  border-radius: var(--mh-r-md);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  text-align: center;
  transition: background .15s, color .15s;
}
.mh-drawer-btn-primary {
  background: var(--mh-primary);
  color: #fff !important;
}
.mh-drawer-btn-primary:hover { background: var(--mh-primary-dark); }
.mh-drawer-btn-secondary {
  background: #fff;
  color: var(--mh-secondary) !important;
  border: 1.5px solid var(--mh-line);
}
.mh-drawer-btn-secondary:hover { background: var(--mh-bg-soft); border-color: var(--mh-secondary); }
.mh-drawer-cta-note {
  color: var(--mh-text-muted);
  font-size: 11px;
  margin: 0 16px 12px;
  line-height: 1.4;
}

/* Greeting card (for logged-in users) */
.mh-drawer-greeting {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--mh-secondary) 0%, var(--mh-secondary-soft) 100%);
  color: #fff;
}
.mh-drawer-greeting-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.mh-drawer-link-soft { color: rgba(255,255,255,0.85); font-size: 12px; text-decoration: underline; }
.mh-drawer-link-soft:hover { color: #fff; }

/* Drawer nav sections */
.mh-drawer-nav { flex: 1; padding: 8px 0; }
.mh-drawer-section { padding: 12px 0; border-top: 1px solid var(--mh-line-soft); }
.mh-drawer-section:first-child { border-top: 0; }
.mh-drawer-section h4 {
  margin: 0 16px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-text-muted);
}
.mh-drawer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mh-drawer-section li a {
  display: block;
  padding: 10px 16px;
  color: var(--mh-text);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.mh-drawer-section li a:hover {
  background: var(--mh-bg-soft);
  border-left-color: var(--mh-primary);
  color: var(--mh-secondary);
}

/* Drawer foot */
.mh-drawer-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--mh-text-muted);
}


/* ---------------------------------------------------------------------
   Mobile-only refinements for the redesigned header
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .mh-header-main { padding: 8px 10px !important; gap: 8px !important; }

  /* Logo: smaller on phone, image scaled down */
  .mh-logo img { max-height: 36px; }
  .mh-logo .mh-logo-text { font-size: 16px; }

  /* Burger sits left of logo */
  .mh-burger { width: 36px; height: 36px; }
  .mh-burger svg { width: 22px; height: 22px; }

  /* The "Sign in" / "Account" / "Wishlist" labels in header — keep cart, hide others on tightest widths */
  .mh-header-actions > a span:not(.mh-cart-count) { display: none; }
  .mh-header-actions { gap: 0; }
  .mh-header-actions > a { min-width: 36px; padding: 6px 6px; }
}

@media (max-width: 400px) {
  /* On very narrow widths drop the wishlist icon to reclaim space */
  .mh-header-actions > a[title="Wishlist"] { display: none; }
}


/* =====================================================================
   AMAZON-STYLE HEADER — overrides above
   Dark navy main row, slightly lighter secondary nav strip, burger always
   visible (in the cats strip).
   ===================================================================== */
:root {
  --mh-amzn-bg:      #131a2c;   /* main header dark navy */
  --mh-amzn-bg-soft: #232f3e;   /* secondary nav strip */
  --mh-amzn-line:    rgba(255,255,255,0.18);
}

.mh-header-amzn {
  background: var(--mh-amzn-bg);
  color: #fff;
  border-bottom: 0;
}

/* Hide the white top utility strip from the old design (not rendered any more
   by the new template, but kept as a safety override in case other pages still
   call older partials) */
.mh-header-amzn .mh-header-top { display: none; }

/* MAIN ROW */
.mh-header-amzn .mh-header-main {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  color: #fff;
  min-height: 60px;
}

/* Logo */
.mh-header-amzn .mh-logo {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  flex-shrink: 0;
}
.mh-header-amzn .mh-logo:hover { border-color: #fff; }
.mh-header-amzn .mh-logo img {
  max-height: 72px;
  width: auto;
  display: block;
}

/* Deliver-to chip */
.mh-deliver-to {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  padding: 14px 8px 6px;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: 2px;
  flex-shrink: 0;
}
.mh-deliver-to:hover { border-color: #fff; }
.mh-deliver-pin { width: 18px; height: 18px; color: #fff; flex-shrink: 0; margin-bottom: 2px; }
.mh-deliver-text { display: flex; flex-direction: column; line-height: 1.15; }
.mh-deliver-text small { font-size: 11px; color: #cfd6e0; }
.mh-deliver-text strong { font-size: 14px; font-weight: 700; color: #fff; }

/* SEARCH BAR — pill-shaped (Alibaba-style)
   White inner, 2px orange border, rounded gradient button on the right */
.mh-header-amzn .mh-search {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  max-width: none;
  border: 2px solid var(--mh-primary);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  min-width: 200px;
  height: 46px;
  align-self: center;
  padding: 3px;
  transition: box-shadow .15s, border-color .15s;
}
.mh-header-amzn .mh-search:focus-within {
  box-shadow: 0 0 0 4px rgba(245,114,36,0.22);
  border-color: var(--mh-primary-dark);
}
.mh-header-amzn .mh-search select {
  border: 0;
  background: transparent;
  padding: 0 6px 0 16px;
  font-size: 13px;
  color: #555;
  border-right: 1px solid #e6e6e6;
  cursor: pointer;
  min-width: 60px;
  height: 100%;
  outline: none;
  font-weight: 600;
}
.mh-header-amzn .mh-search input {
  flex: 1;
  border: 0;
  padding: 0 14px;
  font-size: 14px;
  background: transparent;
  height: 100%;
  color: #111;
  outline: none;
  min-width: 0;
}
.mh-header-amzn .mh-search input::placeholder { color: #8c8c8c; }
.mh-header-amzn .mh-search button {
  background: linear-gradient(90deg, #ff7a3c 0%, #f57224 100%);
  color: #fff;
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-width: 64px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background .15s, transform .12s;
}
.mh-header-amzn .mh-search button:hover {
  background: linear-gradient(90deg, #ff8a4f 0%, #ff7a3c 100%);
}
.mh-header-amzn .mh-search button:active { transform: scale(0.97); }
.mh-header-amzn .mh-search button svg { width: 16px; height: 16px; color: #fff; }
.mh-search-btn-label { white-space: nowrap; }


/* =====================================================================
   HERO SEARCH SECTION — homepage only
   Renders below the navy header with a centered pill-shaped search bar.
   ===================================================================== */
.mh-hero-search {
  background: #fff;
  padding: 36px 16px 32px;
  border-bottom: 1px solid var(--mh-line);
}
.mh-hero-search-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.mh-hero-search-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--mh-secondary);
  margin: 0 0 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* The pill search bar within the hero — taller + chunkier for a more
   visibly round pill effect at large widths */
.mh-search-hero {
  height: 64px !important;
  border-width: 3px !important;
  border-radius: 9999px !important;
  margin: 0 auto;
  max-width: 680px;
  padding: 5px !important;
  align-self: auto !important;
  flex: 0 1 100% !important;
  order: 0 !important;
}
.mh-search-hero select {
  font-size: 14px !important;
  min-width: 88px !important;
  padding: 0 10px 0 22px !important;
  border-radius: 9999px 0 0 9999px !important;
}
.mh-search-hero input { font-size: 15px !important; padding: 0 18px !important; }
.mh-search-hero button {
  min-width: 110px !important;
  padding: 0 30px !important;
  font-size: 14px !important;
  border-radius: 9999px !important;
}
.mh-search-hero button svg { width: 18px !important; height: 18px !important; }

.mh-hero-search-trust {
  margin-top: 16px;
  font-size: 12px;
  color: var(--mh-text-muted);
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.mh-hero-search-trust .mh-hero-search-dot { color: var(--mh-line); }

/* On the homepage, hide the search in the dark header — the hero search
   replaces it. Header still has logo, deliver-to, lang, account, returns,
   cart on desktop; logo + sign-in + cart on mobile. */
body.home .mh-header-amzn .mh-search:not(.mh-search-hero) { display: none; }

/* When search is hidden on homepage, there's no flex-grow element to push
   the right-side actions (lang, account, returns, cart) to the edge.
   Force them right by anchoring the first one with margin-left: auto. */
body.home .mh-header-amzn .mh-header-main { gap: 14px; }
body.home .mh-header-amzn .mh-amzn-lang { margin-left: auto; }
body.home .mh-header-amzn .mh-deliver-to + .mh-amzn-lang,
body.home .mh-header-amzn .mh-logo + .mh-amzn-lang { margin-left: auto; }

/* Mobile homepage refinements */
@media (max-width: 600px) {
  .mh-hero-search { padding: 20px 12px 18px; }
  .mh-hero-search-title { font-size: 17px; margin-bottom: 14px; line-height: 1.35; }
  .mh-search-hero { height: 54px !important; padding: 4px !important; border-width: 2.5px !important; }
  .mh-search-hero select { font-size: 12px !important; min-width: 60px !important; padding: 0 6px 0 16px !important; }
  .mh-search-hero input { font-size: 13px !important; padding: 0 14px !important; }
  .mh-search-hero button { min-width: 54px !important; padding: 0 14px !important; }
  .mh-search-hero .mh-search-btn-label { display: none; }
  .mh-hero-search-trust { font-size: 11px; }
}

/* Amazon-style action link: 2-line vertical with thin top + strong bottom */
.mh-amzn-link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 8px;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: 2px;
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
}
.mh-amzn-link:hover { border-color: #fff; }
.mh-amzn-link small { font-size: 12px; font-weight: 400; color: #cfd6e0; }
.mh-amzn-link strong { font-size: 14px; font-weight: 700; color: #fff; }
.mh-amzn-caret { font-size: 11px; color: #b9c2cf; }

/* Language toggle: row of flag + EN ▾ */
.mh-amzn-lang {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.mh-amzn-lang .mh-flag { font-size: 18px; line-height: 1; }
.mh-amzn-lang .mh-lang-text { font-size: 13px; font-weight: 700; color: #fff; }

/* Cart: count + icon + label inline */
.mh-amzn-cart {
  display: inline-flex;
  align-items: flex-end;
  padding: 8px 8px;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.mh-amzn-cart:hover { border-color: #fff; }
.mh-amzn-cart-ico { width: 32px; height: 32px; color: #fff; }
.mh-amzn-cart-count {
  position: absolute;
  top: 4px;
  left: 22px;
  background: transparent;
  color: var(--mh-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  min-width: 20px;
  text-align: center;
}
.mh-amzn-cart-label { font-size: 14px; font-weight: 700; color: #fff; padding: 0 2px 2px 4px; }

/* Hide the old action icons in Amazon mode */
.mh-header-amzn .mh-header-actions { display: none; }

/* SECONDARY NAV STRIP */
.mh-header-amzn .mh-header-cats {
  background: var(--mh-amzn-bg-soft);
  border-top: 0;
  border-bottom: 0;
}
.mh-header-amzn .mh-header-cats-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.mh-header-amzn .mh-header-cats-inner::-webkit-scrollbar { display: none; }
.mh-header-amzn .mh-header-cats-inner > * { flex-shrink: 0; }
/* "Sell on MasnoonHub" — let it flow inline instead of being pushed to the
   far right where overflow scroll hides it on phones */
.mh-header-amzn .mh-header-cats-inner a.mh-become-vendor { margin-left: 4px; }
.mh-header-amzn .mh-header-cats-inner a {
  color: #fff !important;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 2px;
  border-bottom: 0;
  white-space: nowrap;
}
.mh-header-amzn .mh-header-cats-inner a:hover {
  color: #fff !important;
  border-color: #fff;
}
.mh-header-amzn .mh-header-cats-inner a.mh-become-vendor {
  margin-left: auto;
  background: transparent;
  font-weight: 700;
  color: var(--mh-primary) !important;
}
.mh-header-amzn .mh-header-cats-inner a.mh-become-vendor:hover {
  background: transparent;
  border-color: var(--mh-primary);
}

/* Burger lives INSIDE the secondary cats strip, visible on ALL widths */
.mh-header-amzn .mh-burger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  width: auto;
  height: auto;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 2px;
}
.mh-header-amzn .mh-burger:hover { border-color: #fff; background: transparent; }
.mh-header-amzn .mh-burger svg { width: 22px; height: 22px; color: #fff; }
.mh-header-amzn .mh-burger span { font-size: 14px; font-weight: 700; }

/* RESPONSIVE — Amazon header on tablet/phone
   Goal: keep logo + burger + search + cart always visible. Collapse
   "Deliver to", "Language", "Account & Lists", and "Returns & Orders"
   labels into the drawer; the right side reduces to just the cart.
   ===================================================================== */

@media (max-width: 1100px) {
  .mh-header-amzn .mh-deliver-to { display: none; }
}
/* Mobile-only compact sign-in icon — hidden on desktop, visible <=900px */
.mh-amzn-mobile-account {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #fff !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.mh-amzn-mobile-account:hover { border-color: #fff; }
.mh-amzn-mobile-ico { width: 24px; height: 24px; }

@media (max-width: 900px) {
  /* Mobile header restructure:
     ROW 1: [Logo] ... [Sign-in icon] [Cart]
     ROW 2: [Search] (wraps to its own row, full-width)
     ROW 3 (.mh-header-cats): [Burger] [Categories...] */
  .mh-header-amzn .mh-header-main {
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 10px;
    gap: 6px;
  }
  /* Logo grows on mobile (the "zoom in" Saif asked for) — flex grows to push
     actions to the right edge. */
  .mh-header-amzn .mh-logo { flex: 1 1 auto; padding: 2px 4px; }
  .mh-header-amzn .mh-logo img { max-height: 64px; }

  /* Hide the desktop 4-column actions (Lang / Account / Returns); their
     functionality is in the drawer (sign-in too). */
  .mh-header-amzn .mh-amzn-link { display: none; }

  /* Mobile sign-in icon visible alongside cart */
  .mh-amzn-mobile-account { display: inline-flex; }

  /* Cart: icon-only, no "Cart" label */
  .mh-header-amzn .mh-amzn-cart { padding: 6px 6px; }
  .mh-header-amzn .mh-amzn-cart-label { display: none; }
  .mh-header-amzn .mh-amzn-cart-ico { width: 28px; height: 28px; }
  .mh-header-amzn .mh-amzn-cart-count { top: 0; left: 18px; font-size: 13px; }

  /* Search wraps to its own row, full width — pill shape preserved */
  .mh-header-amzn .mh-search {
    flex: 1 1 100%;
    order: 99;       /* push past the icons */
    height: 42px;
    margin-top: 4px;
  }
  /* On phone the "Search" word would crowd the bar — show icon-only */
  .mh-header-amzn .mh-search button { min-width: 50px; padding: 0 16px; }
  .mh-search-btn-label { display: none; }

  /* Safety override — old standalone burger if it ever renders */
  .mh-header-amzn > .mh-header-main > .mh-burger { display: none; }
}

@media (max-width: 600px) {
  .mh-header-amzn .mh-header-main { padding: 4px 8px; gap: 4px; }
  .mh-header-amzn .mh-logo { padding: 2px 4px; }
  .mh-header-amzn .mh-logo img { max-height: 58px; }
  .mh-header-amzn .mh-search { height: 40px; padding: 2px; }
  .mh-header-amzn .mh-search select { min-width: 48px; font-size: 11px; padding: 0 4px 0 10px; font-weight: 600; }
  .mh-header-amzn .mh-search input { font-size: 13px; padding: 0 10px; }
  .mh-header-amzn .mh-search button { min-width: 46px; padding: 0 12px; }
  .mh-amzn-mobile-account { width: 36px; height: 36px; }
  .mh-amzn-mobile-ico { width: 22px; height: 22px; }
  .mh-header-amzn .mh-amzn-cart { padding: 4px 4px; }

  /* Cat strip on phone */
  .mh-header-amzn .mh-header-cats-inner { padding: 0 8px; }
  .mh-header-amzn .mh-header-cats-inner a { padding: 8px 8px; font-size: 12px; }
  .mh-header-amzn .mh-burger { padding: 8px 8px; font-size: 13px; }
  .mh-header-amzn .mh-burger span { display: none; }
  .mh-header-amzn .mh-burger svg { width: 22px; height: 22px; }
  .mh-header-amzn .mh-header-cats-inner a.mh-become-vendor { margin-left: 0; }
}


/* =====================================================================
   VENDOR PAGE — /become-a-vendor
   ===================================================================== */

.mh-vendor-hero {
  background: linear-gradient(135deg, var(--mh-secondary) 0%, var(--mh-secondary-soft) 100%);
  color: #fff;
  padding: 56px 16px 64px;
}
.mh-vendor-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mh-vendor-hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.mh-vendor-hero-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.015em;
}
.mh-vendor-hero-title-accent {
  background: linear-gradient(90deg, var(--mh-primary) 0%, var(--mh-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mh-vendor-hero-sub {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 auto 28px;
  max-width: 680px;
  opacity: 0.92;
}
.mh-vendor-hero-cta-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.mh-vendor-hero-cta {
  background: var(--mh-primary);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  transition: background .15s, transform .12s;
}
.mh-vendor-hero-cta:hover { background: var(--mh-primary-dark); transform: translateY(-1px); }
.mh-vendor-hero-cta-soft {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.25);
}
.mh-vendor-hero-cta-soft:hover { background: rgba(255,255,255,0.18); }

/* Band — 4-cell metric row */
.mh-vendor-band {
  background: #fff;
  border-bottom: 1px solid var(--mh-line);
  padding: 28px 16px;
}
.mh-vendor-band-inner {
  max-width: var(--mh-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mh-vendor-band-cell { text-align: center; padding: 8px; }
.mh-vendor-band-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--mh-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.mh-vendor-band-label { font-size: 14px; font-weight: 700; color: var(--mh-secondary); margin-bottom: 4px; }
.mh-vendor-band-note { font-size: 12px; color: var(--mh-text-muted); }

/* Sections */
.mh-vendor-section {
  background: #fff;
  padding: 48px 16px;
}
.mh-vendor-section-alt { background: var(--mh-bg-page); border-top: 1px solid var(--mh-line); }
.mh-vendor-section-inner {
  max-width: 840px;
  margin: 0 auto;
}
.mh-vendor-section-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--mh-secondary);
  margin: 0 0 28px;
  text-align: center;
  letter-spacing: -0.01em;
}
.mh-vendor-section-sub { text-align: center; color: var(--mh-text-muted); margin: -16px 0 28px; font-size: 14px; }

/* 4-step grid */
.mh-vendor-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mh-vendor-step {
  background: #fff;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-lg);
  padding: 24px;
  position: relative;
}
.mh-vendor-step-num {
  position: absolute;
  top: -14px;
  left: 24px;
  width: 32px;
  height: 32px;
  background: var(--mh-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.mh-vendor-step h3 { font-size: 17px; font-weight: 700; color: var(--mh-secondary); margin: 8px 0 8px; }
.mh-vendor-step p { font-size: 14px; line-height: 1.55; color: var(--mh-text-soft); margin: 0; }

/* Form */
.mh-vendor-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  background: var(--mh-bg-page);
}
.mh-vendor-form-row { margin-bottom: 18px; }
.mh-vendor-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.mh-vendor-form-grid .mh-vendor-form-row { margin-bottom: 18px; }
.mh-vendor-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mh-secondary);
  margin-bottom: 6px;
}
.mh-req { color: var(--mh-sale); }
.mh-vendor-form input,
.mh-vendor-form select,
.mh-vendor-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--mh-line);
  border-radius: var(--mh-r-md);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--mh-text);
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
}
.mh-vendor-form input:focus,
.mh-vendor-form select:focus,
.mh-vendor-form textarea:focus {
  border-color: var(--mh-primary);
  box-shadow: 0 0 0 3px rgba(245,114,36,0.15);
  outline: none;
}
.mh-vendor-form textarea { resize: vertical; min-height: 80px; }

.mh-vendor-submit {
  background: var(--mh-primary);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: background .15s, transform .12s;
}
.mh-vendor-submit:hover { background: var(--mh-primary-dark); transform: translateY(-1px); }
.mh-vendor-submit:active { transform: translateY(0); }

.mh-vendor-form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--mh-r-md);
  font-size: 14px;
  text-align: center;
  display: none;
}
.mh-vendor-form-status.is-loading { display: block; background: #f0f0f0; color: var(--mh-text-soft); }
.mh-vendor-form-status.is-success { display: block; background: #e8f5e9; color: #1b5e20; border: 1px solid #4caf50; font-weight: 600; }
.mh-vendor-form-status.is-error   { display: block; background: #fdecea; color: #b71c1c; border: 1px solid #e57373; }

@media (max-width: 700px) {
  .mh-vendor-hero { padding: 36px 16px 44px; }
  .mh-vendor-hero-title { font-size: 28px; }
  .mh-vendor-hero-sub { font-size: 14px; }
  .mh-vendor-band-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mh-vendor-band-num { font-size: 26px; }
  .mh-vendor-steps { grid-template-columns: 1fr; }
  .mh-vendor-section { padding: 36px 16px; }
  .mh-vendor-section-title { font-size: 22px; }
  .mh-vendor-form-grid { grid-template-columns: 1fr; gap: 0; }
}


/* =====================================================================
   v0.8.1 fixes — center product cards, force footer visible, hero polish
   ===================================================================== */

/* Center the content inside every product card on every page */
.woocommerce ul.products li.product.mh-card .mh-card-body,
ul.products li.product.mh-card .mh-card-body {
  align-items: center;
  text-align: center;
}
.mh-card-title { text-align: center; }
.mh-card-price { justify-content: center; }
.mh-card-meta { justify-content: center; }
.mh-card-vendor { text-align: center; align-self: center; }

/* Belt + braces: force the site footer visible everywhere.
   Astra has a per-page "disable footer" toggle that some imports flip on. */
footer.site-footer,
footer.site-footer * { visibility: visible !important; }
footer.site-footer { display: block !important; opacity: 1 !important; }
.site-primary-footer-wrap { display: block !important; }
footer.site-footer .footer-widget-area { display: block !important; }

/* Vendor page hero — kill the bland, add Islamic geometric pattern + visible
   trust signals + bigger badge typography */
.mh-vendor-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 16px 80px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,114,36,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0f2a1f 0%, var(--mh-secondary) 50%, var(--mh-secondary-soft) 100%);
}
/* Islamic-style geometric pattern overlay (CSS-generated, no images needed) */
.mh-vendor-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(245,114,36,0.06) 0, rgba(245,114,36,0.06) 1px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(255,255,255,0.025) 40px, rgba(255,255,255,0.025) 41px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 40px, rgba(255,255,255,0.025) 40px, rgba(255,255,255,0.025) 41px);
  background-size: 60px 60px, 60px 60px, auto, auto;
  pointer-events: none;
  z-index: 0;
}
.mh-vendor-hero-inner { position: relative; z-index: 1; }

/* Eyebrow becomes a more meaningful badge */
.mh-vendor-hero-eyebrow {
  background: linear-gradient(90deg, var(--mh-primary) 0%, #ff9a5a 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 18px;
  box-shadow: 0 4px 16px rgba(245,114,36,0.4);
}

/* Headline upgrade */
.mh-vendor-hero-title { font-size: 46px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 20px; }
.mh-vendor-hero-title-accent {
  background: linear-gradient(90deg, #ff9a5a 0%, var(--mh-primary) 50%, #ffb380 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(245,114,36,0.3);
}
.mh-vendor-hero-sub { font-size: 17px; max-width: 700px; }

/* CTA row — bigger primary CTA */
.mh-vendor-hero-cta { padding: 16px 32px; font-size: 16px; box-shadow: 0 6px 20px rgba(245,114,36,0.35); }
.mh-vendor-hero-cta:hover { box-shadow: 0 8px 28px rgba(245,114,36,0.5); }

/* New: trust-signal row below CTAs */
.mh-vendor-hero-trust {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.mh-vendor-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.mh-vendor-hero-trust .mh-hero-trust-tick { color: var(--mh-success); font-size: 16px; }

/* Floating verification stamp (top right, decorative) */
.mh-vendor-hero-stamp {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  transform: rotate(-12deg);
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
  background: rgba(245,114,36,0.1);
  backdrop-filter: blur(2px);
}
.mh-vendor-hero-stamp strong { font-size: 14px; letter-spacing: 0.06em; color: #fff; display: block; }

@media (max-width: 700px) {
  .mh-vendor-hero { padding: 44px 16px 52px; }
  .mh-vendor-hero-title { font-size: 30px; }
  .mh-vendor-hero-sub { font-size: 15px; }
  .mh-vendor-hero-trust { gap: 12px; font-size: 12px; margin-top: 22px; }
  .mh-vendor-hero-stamp { top: 16px; right: 16px; width: 78px; height: 78px; font-size: 8px; }
  .mh-vendor-hero-stamp strong { font-size: 11px; }
  .mh-vendor-hero-cta { padding: 12px 24px; font-size: 14px; }
}

/* On any page where our custom hero is present, kill the default WP page-title
   and the gray gap so the hero touches the navy category strip directly.
   Uses :has() — works in every modern browser. */
body:has(.mh-vendor-hero) .entry-header,
body:has(.mh-vendor-hero) .ast-archive-description,
body:has(.mh-vendor-hero) .ast-page-header-wrap,
body:has(.mh-vendor-hero) .ast-title-bar-wrap,
body:has(.mh-vendor-hero) header.entry-header,
body:has(.mh-vendor-hero) .entry-title {
  display: none !important;
}
body:has(.mh-vendor-hero) .site-content,
body:has(.mh-vendor-hero) .ast-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100% !important;
}
body:has(.mh-vendor-hero) main.site-main,
body:has(.mh-vendor-hero) main.site-main > article,
body:has(.mh-vendor-hero) main.site-main > article > .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Safety fallback for browsers without :has() — also target by page ID */
body.page-id-7649 .entry-header,
body.page-id-7649 .ast-page-header-wrap,
body.page-id-7649 .entry-title { display: none !important; }
body.page-id-7649 .site-content,
body.page-id-7649 .ast-container { padding-top: 0 !important; max-width: 100% !important; }
body.page-id-7649 main.site-main,
body.page-id-7649 main.site-main > article,
body.page-id-7649 main.site-main > article > .entry-content { margin: 0 !important; padding: 0 !important; }


/* =====================================================================
   v0.8.3 — kill the empty above-footer dark band, force primary footer visible
   ===================================================================== */

/* Collapse the entire above-footer-wrap (where the SALE banner used to be).
   We cleared footer-html-1 in v0.7.8 but the wrap still rendered a colored
   stripe because the dark-green bg sits on the outer wrap, not the content. */
footer.site-footer .site-above-footer-wrap,
footer.site-footer .site-above-footer-inner-wrap,
footer.site-footer .ast-footer-html-1 { display: none !important; }

/* Force the 4-column primary footer + every widget area to render — overrides
   any Astra customizer "disable" or page-meta hide that might be in play. */
footer.site-footer .site-primary-footer-wrap,
footer.site-footer .site-primary-footer-inner-wrap,
footer.site-footer .ast-builder-footer-grid-columns,
footer.site-footer .site-footer-primary-section-1,
footer.site-footer .site-footer-primary-section-2,
footer.site-footer .site-footer-primary-section-3,
footer.site-footer .site-footer-primary-section-4,
footer.site-footer .footer-widget-area,
footer.site-footer .footer-widget-area .widget,
footer.site-footer .footer-widget-area .widget_block,
footer.site-footer .footer-widget-area section.widget {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
}
footer.site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
  display: grid !important;
}

/* Ensure widget H3/P/UL are visible (force white text on dark green bg) */
footer.site-footer .footer-widget-area h3,
footer.site-footer .footer-widget-area .wp-block-heading,
footer.site-footer .footer-widget-area p,
footer.site-footer .footer-widget-area li,
footer.site-footer .footer-widget-area a,
footer.site-footer .footer-widget-area strong {
  display: revert !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}
footer.site-footer .footer-widget-area h3,
footer.site-footer .footer-widget-area .wp-block-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
footer.site-footer .footer-widget-area p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
footer.site-footer .footer-widget-area ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer.site-footer .footer-widget-area li {
  padding: 4px 0 !important;
  font-size: 13px !important;
}
footer.site-footer .footer-widget-area a {
  text-decoration: none !important;
  transition: color .12s;
}
footer.site-footer .footer-widget-area a:hover {
  color: var(--mh-primary) !important;
}


/* =====================================================================
   v0.8.4 — the real footer fix
   Astra references --ast-global-color-5 (= #ffffff in the palette) for the
   footer background via inline CSS. Redefining the variable in footer scope
   makes Astra's own rule resolve to dark green without us fighting it.
   Same trick for text and link colors. Pure variable-override; no specificity
   war required. Works because CSS custom properties resolve at use site.
   ===================================================================== */
footer.site-footer,
footer.site-footer .site-primary-footer-wrap,
footer.site-footer .site-below-footer-wrap,
footer.site-footer .ast-builder-grid-row-container,
footer.site-footer .ast-builder-grid-row-container-inner,
footer.site-footer .ast-builder-footer-grid-columns {
  --ast-global-color-5: #1f3b2d;   /* dark green — was #ffffff in Astra palette */
  --ast-global-color-3: #ffffff;   /* white text — was #333333 */
  --ast-global-color-4: #e6e6e6;   /* light links — was #f5f7f9 */
}
/* Hard fallback in case Astra later renames the variable */
html body footer.site-footer.site-footer {
  background-color: #1f3b2d !important;
  background: #1f3b2d !important;
  color: #ffffff !important;
}