/**
 * Wholesale panel.
 *
 * Written with logical properties (inline-start/end) so it coexists with
 * Flatsome's RTL sheet rather than fighting it.
 *
 * Below 900px the catalogue table becomes one card per product. The obvious
 * objection is that a wholesaler's job here is comparing figures across
 * products, and cards break a column comparison — which is true, and is why the
 * table is kept intact on every larger screen. But a phone cannot show nine
 * numeric columns at a legible size whatever the layout, and the alternative
 * that was actually in place — every cell as its own label:value row — produced
 * eleven rows per product, so twenty products ran past two hundred rows.
 *
 * The card therefore regroups the same cells into four bands in the order the
 * screen is used: identify the product, glance at the prices, set a quantity,
 * check the result. Placement is driven by each cell's own `msh-cell--*` class
 * rather than by its position, because the three margin columns are absent for
 * customers who are not shown profit and any nth-child rule would shift by
 * three.
 */

.msh-panel--b2b {
  max-width: 1320px;
  margin-inline: auto;
  padding: 24px 18px 120px;
}

/* ============================================================ entry doorway */
/*
 * P8.34-R7-R5 canonical B2B public-entry owner.
 * Fixes:
 * - mobile viewport fits without outer page scroll
 * - auth card compressed for real phone viewport
 * - desktop bottom 3 benefit items fully equalized
 * - benefit labels lighter weight
 * - benefit design simplified to a single frame
 */

body.msh-wholesale-body--public.msh-wholesale-entry-body {
  min-height: 100svh;
  margin: 0;
  background: #f6efe3 !important;
  font-family: inherit;
}

body.msh-wholesale-entry-body .msh-public-shell {
  min-height: 100svh;
  display: block;
  padding: 0 0 84px;
  background: transparent !important;
}

body.msh-wholesale-entry-body .msh-public-shell .msh-panel--b2b {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

body.msh-wholesale-entry-body .msh-panel--b2b::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry {
  direction: ltr;
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 43%) minmax(0, 57%);
  align-items: center;
  width: 100%;
  min-height: calc(100svh - 84px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    #f6efe3
    url("/wp-content/uploads/mashoouf-b2b/mashoouf-b2b-raw-desktop.webp")
    center center / cover no-repeat;
  box-shadow: none;
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual {
  grid-column: 2;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 28px 6vw 30px 4vw;
  text-align: center;
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 430px);
  transform: translateY(-1%);
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-logo {
  display: block;
  width: clamp(155px, 12vw, 198px);
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 6px 13px rgba(0,0,0,.11));
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-title {
  margin: 0;
  color: #d7b56d;
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 950;
  line-height: 1.4;
  text-shadow: 0 3px 10px rgba(0,0,0,.14);
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-subtitle {
  position: relative;
  margin: 9px 0 0;
  padding-inline: 46px;
  color: #ead7a5;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 750;
  line-height: 1.7;
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-subtitle::before,
body.msh-wholesale-entry-body .msh-b2b-entry__visual-subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: #d7b56d;
}

body.msh-wholesale-entry-body .msh-b2b-entry__visual-subtitle::before { inset-inline-start: 0; }
body.msh-wholesale-entry-body .msh-b2b-entry__visual-subtitle::after { inset-inline-end: 0; }
body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile { display: none; }

body.msh-wholesale-entry-body .msh-b2b-entry__content {
  grid-column: 1;
  grid-row: 1;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 26px 3vw;
  background: transparent;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card {
  width: min(100%, 396px);
  margin: 0 auto;
  padding: 22px 20px 18px;
  border: 1px solid rgba(182,138,58,.32);
  border-radius: 22px;
  background: rgba(255,252,246,.975);
  box-shadow: 0 14px 36px rgba(23,63,42,.085);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: right;
}

body.msh-wholesale-entry-body .msh-b2b-entry__eyebrow {
  display: table;
  min-width: 116px;
  margin: 0 auto 12px;
  padding: 7px 18px;
  border: 1px solid #d6aa58;
  border-radius: 999px;
  color: #9a6816;
  background: #fbf4e7;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

body.msh-wholesale-entry-body .msh-b2b-entry__title {
  max-width: 340px;
  margin: 0 auto 10px;
  color: #0f5137;
  font-size: clamp(23px, 1.8vw, 29px);
  font-weight: 950;
  line-height: 1.45;
  text-align: center;
}

body.msh-wholesale-entry-body .msh-b2b-entry__lead {
  max-width: 320px;
  margin: 0 auto 16px;
  color: #5f6863;
  font-size: 11.5px;
  line-height: 1.9;
  text-align: center;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth {
  width: 100%;
  margin: 0;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__title,
body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__subtitle,
body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__test {
  display: none !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__notice,
body.msh-wholesale-entry-body .msh-b2b-entry__card [class*="notice"] {
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 10.8px !important;
  line-height: 1.75 !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field { margin-bottom: 10px; }

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__label {
  display: block;
  margin-bottom: 6px;
  color: #0f5137;
  font-size: 11.5px;
  font-weight: 900;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__phone-wrap,
body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__input {
  border-radius: 11px;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__input {
  min-height: 46px;
  border: 1px solid #d9c29a;
  background: #fff;
  color: #4c4f4d;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(23,63,42,.04);
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__input:focus {
  border-color: #b68a3a;
  box-shadow: 0 0 0 3px rgba(182,138,58,.11);
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border: 1px solid #b68a3a;
  border-radius: 11px;
  background: #075b39;
  color: #fff;
  box-shadow: 0 7px 16px rgba(7,91,57,.13);
  font-size: 13px;
  font-weight: 900;
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit::after {
  content: "←";
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-52%);
}

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit:hover { background: #064c31; }

body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__security {
  margin-top: 10px;
  color: #6d756f;
  font-size: 10.2px;
  line-height: 1.8;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefits {
  direction: rtl;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid #dfd2bd;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
  color: #30493b;
  font-size: 9.6px !important;
  font-weight: 560;
  line-height: 1.55;
  text-align: center !important;
}


body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon {
  flex: 0 0 auto;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.msh-wholesale-entry-body .msh-b2b-entry__note { display: none !important; }

@media (max-width: 1120px) and (min-width: 901px) {
  body.msh-wholesale-entry-body .msh-b2b-entry {
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%);
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__content { padding: 22px 2.2vw; }
  body.msh-wholesale-entry-body .msh-b2b-entry__card { width: min(100%, 382px); padding: 20px 18px 18px; }
  body.msh-wholesale-entry-body .msh-b2b-entry__visual-logo { width: 176px; }
}

@media (max-width: 900px) {



  body.msh-wholesale-entry-body .msh-b2b-entry {
    flex-direction: column;
    background:
      #f6efe3
      url("/wp-content/uploads/mashoouf-b2b/mashoouf-b2b-raw-mobile.webp")
      center top / 100% auto no-repeat;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual {
    direction: rtl;
    display: flex;
    flex: 0 0 182px;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual-inner {
    width: 100%;
    transform: none;
  }


  body.msh-wholesale-entry-body .msh-b2b-entry__visual-desktop { display: none; }
  body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile { display: block; }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile .msh-b2b-entry__visual-subtitle {
    margin-top: 0;
    padding-inline: 0;
    color: #d7b56d;
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0,0,0,.15);
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile .msh-b2b-entry__visual-subtitle::before,
  body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile .msh-b2b-entry__visual-subtitle::after {
    display: none;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__content {
    flex: 1 1 auto;
    margin: 0;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card {
    background: rgba(255,252,246,.98);
    box-shadow: 0 14px 34px rgba(23,63,42,.09);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }






  body.msh-wholesale-entry-body .msh-b2b-entry__benefits {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
    padding: 4px 2px 2px !important;
    font-size: 7.8px !important;
    line-height: 1.35;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit > *:not(.msh-b2b-entry__benefit-icon) {
    min-height: 2.35em;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon {
    margin-bottom: 4px !important;
  }

}

@media (max-width: 390px) {
  body.msh-wholesale-entry-body .msh-b2b-entry__visual {
    flex-basis: 168px;
  }


  body.msh-wholesale-entry-body .msh-b2b-entry__card {
    margin-top: -14px;
    border-radius: 20px;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__title {
    max-width: 270px;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__lead {
    max-width: 280px;
    font-size: 10px;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__input { min-height: 42px; }
  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit { min-height: 44px; }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
    font-size: 7.7px !important;
  }
}

/* --- P8.34-R7-R5 override start --- */
/*
 * Fixes:
 * - mobile card fits above the fixed bottom navigation without clipping the lower benefits
 * - mobile page stays one-screen without outer page scroll
 * - desktop benefit items are equal-height and use one frame only
 * - benefit labels are lighter and visually balanced
 */
body.msh-wholesale-entry-body .msh-b2b-entry__benefits {
  align-items: stretch !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 96px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e5dac8 !important;
  border-radius: 14px !important;
  background: #fffaf1 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit > *:not(.msh-b2b-entry__benefit-icon) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 8px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #30493b !important;
  font-size: 9.5px !important;
  font-weight: 520 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 12px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #0d5a3b !important;
  background: #f4ead8 !important;
  box-shadow: none !important;
}

body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon svg {
  width: 20px !important;
  height: 20px !important;
}

@media (min-width: 901px) {
  body.msh-wholesale-entry-body .msh-b2b-entry__benefits {
    gap: 12px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
    min-height: 100px !important;
  }
}

@media (max-width: 900px) {
  body.msh-wholesale-body--public.msh-wholesale-entry-body {
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
  }

  body.msh-wholesale-entry-body .msh-public-shell {
    height: calc(100svh - 84px);
    min-height: calc(100svh - 84px);
    padding-bottom: 84px;
    overflow: hidden;
  }

  body.msh-wholesale-entry-body .msh-public-shell .msh-panel--b2b {
    height: 100%;
    min-height: 0;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: 140px minmax(0,1fr) !important;
    height: calc(100svh - 84px) !important;
    min-height: calc(100svh - 84px) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 140px !important;
    min-height: 140px !important;
    padding: 14px 12px 4px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual-logo {
    width: 112px !important;
    margin-bottom: 6px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual-mobile .msh-b2b-entry__visual-subtitle {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px 8px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card {
    width: min(100%, 382px) !important;
    height: 100% !important;
    max-height: none !important;
    margin: -8px auto 0 !important;
    padding: 12px 12px 10px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__eyebrow {
    min-width: 98px !important;
    margin-bottom: 8px !important;
    padding: 5px 12px !important;
    font-size: 9.5px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__title {
    max-width: 270px !important;
    margin-bottom: 6px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__lead {
    max-width: 270px !important;
    margin-bottom: 9px !important;
    font-size: 9.6px !important;
    line-height: 1.6 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__notice,
  body.msh-wholesale-entry-body .msh-b2b-entry__card [class*="notice"] {
    margin-bottom: 6px !important;
    padding: 6px 8px !important;
    font-size: 8.9px !important;
    line-height: 1.55 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field {
    margin-bottom: 6px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__label {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__input {
    min-height: 40px !important;
    font-size: 12px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit {
    min-height: 42px !important;
    margin-top: 0 !important;
    font-size: 12.2px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__submit::after {
    inset-inline-end: 12px !important;
    font-size: 17px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-auth__security {
    margin-top: 6px !important;
    font-size: 8.7px !important;
    line-height: 1.45 !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefits {
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 5px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
    min-height: 58px !important;
    border-radius: 12px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 6px 0 4px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit > *:not(.msh-b2b-entry__benefit-icon) {
    padding: 0 3px 6px !important;
    font-size: 8.4px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  /* P8.34-R14-R2 secure badge vertical center */
  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__phone-wrap {
    position: relative !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card .msh-field__phone-wrap > i:nth-child(2) {
    position: absolute !important;
    inset-block-start: 50% !important;
    inset-block-end: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin-block: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
  }

}

@media (max-width: 390px) {
  body.msh-wholesale-entry-body .msh-b2b-entry {
    grid-template-rows: 134px minmax(0,1fr) !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__visual {
    height: 134px !important;
    min-height: 134px !important;
    padding-top: 12px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__content {
    padding: 0 6px 6px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__card {
    width: 100% !important;
    padding: 10px 10px 8px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__title {
    font-size: 15px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit {
    min-height: 54px !important;
  }

  body.msh-wholesale-entry-body .msh-b2b-entry__benefit > *:not(.msh-b2b-entry__benefit-icon) {
    font-size: 8.2px !important;
  }
}
/* --- P8.34-R7-R5 override end --- */
/* =================================================================== banner */

.msh-b2b__banner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #e8c86a;
  border-radius: 12px;
  background: #fdf6e3;
}

.msh-b2b__banner strong {
  display: block;
  margin-bottom: 4px;
  color: #7a5b06;
}

.msh-b2b__banner p {
  margin: 0;
  color: #8a6d1f;
  font-size: 0.83rem;
  line-height: 1.9;
}

.msh-b2b__banner--pending {
  border-color: var(--msh-line);
  background: var(--msh-surface-2);
}

.msh-b2b__banner--pending strong,
.msh-b2b__banner--pending p {
  color: var(--msh-muted);
}

.msh-b2b__banner-cta {
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 9px;
  background: var(--msh-brand);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

/* ================================================================== toolbar */

.msh-b2b__toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--msh-line);
  border-radius: 12px;
  background: var(--msh-surface);
}

.msh-b2b__search {
  flex: 1 1 240px;
  height: 44px;
  padding-inline: 14px;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
  font-size: 0.9rem;
}

.msh-b2b__filter {
  height: 44px;
  padding-inline: 12px;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
}

.msh-b2b__search:focus,
.msh-b2b__filter:focus {
  border-color: var(--msh-brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.14);
  outline: none;
}

.msh-b2b__toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--msh-muted);
  cursor: pointer;
}

/* ============================================================= filter sheet */

/*
 * On a wide screen the sheet is not a sheet at all: its contents sit inline in
 * the toolbar exactly as they used to, and the trigger button is hidden. Only
 * below 900px does it become a panel that rises from the bottom edge.
 */
.msh-b2b__filters {
  display: contents;
}

.msh-b2b__filter-trigger,
.msh-b2b__sheet-grip,
.msh-b2b__sheet-head,
.msh-b2b__sheet-foot,
.msh-b2b__sheet-veil {
  display: none;
}

.msh-b2b__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 10px;
  background: var(--msh-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .msh-b2b__filter-trigger {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    min-height: 48px;
    padding-inline: 16px;
    border: 1.5px solid var(--msh-line);
    border-radius: 10px;
    background: var(--msh-surface);
    color: var(--msh-ink);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
  }

  .msh-b2b__filter-trigger.is-active {
    border-color: var(--msh-brand);
    color: var(--msh-brand-dark);
  }

  /* ---- the sheet itself ---- */

  .msh-b2b__filters {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 82vh;
    overflow-y: auto;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-start-start-radius: 22px;
    border-start-end-radius: 22px;
    background: var(--msh-surface);
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.22);
    /* Parked off-screen rather than hidden, so it can slide rather than blink. */
    transform: translateY(102%);
    visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.26s;
  }

  .msh-b2b__filters.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .msh-b2b__sheet-grip {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 4px;
    border-radius: 2px;
    background: var(--msh-line);
  }

  .msh-b2b__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.02rem;
  }

  .msh-b2b__sheet-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--msh-surface-2);
    color: var(--msh-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .msh-b2b__filters .msh-b2b__filter {
    width: 100%;
    height: 52px;
  }

  /* Checkboxes become full-width rows: a bare 13px box is not a touch target. */
  .msh-b2b__filters .msh-b2b__toggle {
    justify-content: space-between;
    min-height: 52px;
    padding-inline: 15px;
    border: 1.5px solid var(--msh-line);
    border-radius: 10px;
    color: var(--msh-ink);
    font-size: 0.94rem;
    font-weight: 700;
  }

  .msh-b2b__filters .msh-b2b__toggle input {
    width: 22px;
    height: 22px;
    accent-color: var(--msh-brand);
  }

  .msh-b2b__filters .msh-b2b__toggle:has(input:checked) {
    border-color: var(--msh-brand);
    background: rgba(31, 122, 77, 0.05);
  }

  .msh-b2b__sheet-foot {
    display: flex;
    gap: 10px;
    padding-block-start: 4px;
  }

  .msh-b2b__sheet-reset,
  .msh-b2b__sheet-apply {
    min-height: 52px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
  }

  .msh-b2b__sheet-reset {
    flex: 0 0 38%;
    border: 1.5px solid var(--msh-line);
    background: var(--msh-surface);
    color: var(--msh-muted);
  }

  .msh-b2b__sheet-apply {
    flex: 1 1 auto;
    border: 0;
    background: var(--msh-brand);
    color: #fff;
  }

  .msh-b2b__sheet-veil {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
  }

  .msh-b2b__sheet-veil[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msh-b2b__filters {
    transition: none;
  }
}

/* ==================================================================== table */

.msh-b2b__group {
  margin-bottom: 30px;
}

.msh-b2b__group-title {
  margin: 0 0 12px;
  padding-inline-start: 11px;
  border-inline-start: 4px solid var(--msh-brand);
  font-size: 1.02rem;
  font-weight: 800;
}

.msh-b2b__table {
  width: 100%;
  border: 1px solid var(--msh-line);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.msh-b2b__table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding: 12px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.msh-b2b__table thead th.msh-col-name {
  text-align: start;
}

.msh-b2b__table td {
  padding: 12px 10px;
  border-top: 1px solid var(--msh-line);
  text-align: center;
  font-size: 0.87rem;
  vertical-align: middle;
}

.msh-b2b__row[hidden] {
  display: none;
}

.msh-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.msh-b2b__final {
  font-weight: 800;
  color: var(--msh-brand-dark);
}

.msh-negative {
  color: var(--msh-danger);
}

.msh-b2b__product {
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: start;
}

.msh-b2b__product img {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
}

.msh-b2b__name {
  display: block;
  font-weight: 700;
  line-height: 1.7;
}

.msh-b2b__sku {
  display: block;
  color: var(--msh-muted);
  font-size: 0.74rem;
  direction: ltr;
  text-align: start;
}

.msh-b2b__stock {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
}

.msh-b2b__stock--inquire {
  background: #fdf3d4;
  color: #7a5b06;
}

.msh-b2b__stock--out {
  background: rgba(192, 57, 43, 0.1);
  color: var(--msh-danger);
}

/* Quantity stepper */
.msh-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
  overflow: hidden;
}

.msh-qty__btn {
  width: 34px;
  height: 40px;
  border: 0;
  background: var(--msh-surface-2);
  color: var(--msh-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.msh-qty__btn:hover {
  background: var(--msh-line);
}

.msh-qty__input {
  width: 56px;
  height: 40px;
  border: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

.msh-qty__input:focus {
  outline: 2px solid var(--msh-brand);
  outline-offset: -2px;
}

.msh-b2b__catalog {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--msh-line);
  border-radius: 7px;
  color: var(--msh-muted);
  font-size: 0.76rem;
  text-decoration: none;
  white-space: nowrap;
}

.msh-b2b__catalog:hover {
  border-color: var(--msh-brand);
  color: var(--msh-brand);
}

/* Next-tier prompt */
.msh-b2b__hint td {
  padding: 8px 12px;
  border-top: 0;
  background: rgba(31, 122, 77, 0.06);
  color: var(--msh-brand-dark);
  font-size: 0.78rem;
  text-align: start;
}

.msh-b2b__disclaimer,
.msh-b2b__empty {
  margin: 16px 0 0;
  color: var(--msh-muted);
  font-size: 0.79rem;
  line-height: 2;
}

/* ============================================================== stat tiles */

/*
 * Four figures and one progress bar, above the catalogue.
 *
 * They are laid out on a four-column grid that collapses to two on narrow
 * screens rather than to one: these numbers are read against each other —
 * total against weight, saving against total — and a single column turns that
 * comparison into scrolling.
 *
 * The goal bar spans the full grid on both layouts because it is a sentence,
 * and a sentence in a quarter-width column wraps to four lines.
 */
.msh-b2b__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.msh-b2b__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--msh-line);
  border-radius: 12px;
  background: var(--msh-surface);
}

.msh-b2b__stat-label {
  color: var(--msh-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.msh-b2b__stat-value {
  color: var(--msh-muted);
  font-size: 0.76rem;
}

.msh-b2b__stat-value strong {
  margin-inline-end: 3px;
  color: var(--msh-ink);
  font-size: 1.12rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/*
 * The two tiles that answer "what will this cost me" and "what did I save"
 * only take on colour once there is something in the basket. Four coloured
 * zeros are a decoration; two coloured figures are information.
 */
.msh-b2b__stats.is-live .msh-b2b__stat--total {
  border-color: rgba(31, 122, 77, 0.4);
  background: rgba(31, 122, 77, 0.05);
}

.msh-b2b__stats.is-live .msh-b2b__stat--total strong,
.msh-b2b__stats.is-live .msh-b2b__stat--saved strong {
  color: var(--msh-brand-dark);
}

.msh-b2b__goal {
  grid-column: 1 / -1;
  padding: 12px 15px;
  border: 1px solid rgba(31, 122, 77, 0.28);
  border-radius: 12px;
  background: rgba(31, 122, 77, 0.05);
}

.msh-b2b__goal-text {
  margin-bottom: 9px;
  color: var(--msh-brand-dark);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.9;
}

.msh-b2b__goal-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(31, 122, 77, 0.16);
  overflow: hidden;
}

.msh-b2b__goal-bar {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--msh-brand);
  transition: width 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .msh-b2b__goal-bar {
    transition: none;
  }
}

/* ================================================================== summary */

.msh-b2b-summary {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 13px 22px;
  border-block-start: 1px solid var(--msh-line);
  background: var(--msh-surface);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.09);
}

.msh-b2b-summary__figures {
  display: flex;
  gap: 22px;
  font-size: 0.87rem;
  color: var(--msh-muted);
}

.msh-b2b-summary__figures strong {
  color: var(--msh-ink);
  font-variant-numeric: tabular-nums;
}

.msh-b2b-summary__profit strong {
  color: var(--msh-brand-dark);
}

.msh-b2b-summary__cta {
  height: 46px;
  padding-inline: 26px;
  border: 0;
  border-radius: 9px;
  background: var(--msh-brand);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.msh-b2b-summary__cta:disabled {
  background: var(--msh-line);
  color: var(--msh-muted);
  cursor: not-allowed;
}

/* =================================================================== mobile */

/*
 * Touch sizing and iOS zoom, applied at every width.
 *
 * Safari zooms the whole page whenever a focused field is under 16px, which is
 * the single most obvious sign that a panel is a website rather than an app. The
 * fields below are therefore never smaller than 16px on a touch device, and
 * every control clears the 44px minimum that both Apple and Material specify
 * for a thumb.
 */
@media (hover: none) and (pointer: coarse) {
  .msh-b2b__search,
  .msh-b2b__filter,
  .msh-qty__input,
  .msh-b2b-form__grid input,
  .msh-b2b-form__grid select,
  .msh-b2b-form__grid textarea {
    font-size: 16px;
  }

  .msh-qty__btn {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .msh-qty__input {
    width: 62px;
    height: 46px;
  }

  .msh-b2b-nav__link {
    padding: 12px 18px;
  }
}

@media (max-width: 900px) {
  .msh-panel--b2b {
    padding-inline: 12px;
    /* Room for the fixed summary bar, plus the iPhone home indicator. */
    padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- tabs: one scrolling strip rather than a wrapping block ---- */

  .msh-b2b-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .msh-b2b-nav::-webkit-scrollbar {
    display: none;
  }

  .msh-b2b-nav__link {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* ---- account identity ---- */

  .msh-b2b-account__logout {
    /* Full width on its own line: a 44px target beats a tidy row. */
    flex: 1 0 100%;
    min-height: 44px;
    line-height: 28px;
    text-align: center;
  }

  /* ---- stat tiles ---- */

  .msh-b2b__stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .msh-b2b__stat {
    padding: 11px 12px;
    gap: 3px;
  }

  .msh-b2b__stat-value strong {
    font-size: 1.02rem;
  }

  .msh-b2b__goal {
    padding: 11px 13px;
  }

  .msh-b2b__goal-text {
    font-size: 0.79rem;
  }

  /* ---- toolbar ---- */

  .msh-b2b__toolbar {
    gap: 10px;
    padding: 12px;
  }

  .msh-b2b__search {
    flex: 1 1 100%;
    height: 48px;
  }

  .msh-b2b__filter {
    flex: 1 1 100%;
    height: 48px;
  }

  /* ---------------------------------------------------- table becomes cards */

  .msh-b2b__table thead {
    display: none;
  }

  .msh-b2b__table,
  .msh-b2b__table tbody,
  .msh-b2b__table tr,
  .msh-b2b__table td {
    display: block;
    width: 100%;
  }

  /* The table's own frame would draw a box around the whole stack of cards. */
  .msh-b2b__table {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .msh-b2b__row {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--msh-line);
    border-radius: 16px;
    background: var(--msh-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .msh-b2b__row td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-top: 0;
    text-align: end;
  }

  /* Each figure labels itself, since the header row is gone. */
  .msh-b2b__row td[data-title]::before {
    content: attr(data-title);
    flex-shrink: 0;
    color: var(--msh-muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-align: start;
  }

  .msh-b2b__row td.msh-col-name {
    display: block;
    padding-block: 0 12px;
    border-bottom: 1px solid var(--msh-line);
  }

  .msh-b2b__row td.msh-col-name::before {
    content: none;
  }

  /* ------------------------------------------- catalogue card, restructured */

  /*
   * Eleven stacked label:value rows per product is a wall of text on a phone —
   * twenty products came to more than two hundred rows of scrolling. The same
   * cells are regrouped here into four bands that match how the screen is
   * actually used: identify the product, glance at the prices, set a quantity,
   * then check the result.
   *
   * Grid areas are driven by the cells' own classes rather than by their
   * position, because the three profit columns disappear for customers who are
   * not shown margin and every nth-child rule would shift by three.
   */
  [data-msh-catalog] .msh-b2b__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'name    name'
      'meta    meta'
      'qty     final'
      'profit  profit'
      'actions actions';
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  [data-msh-catalog] .msh-b2b__row > td {
    padding: 0;
    border: 0;
  }

  /* Band 1 — who this is. */
  [data-msh-catalog] .msh-col-name {
    grid-area: name;
    padding: 14px !important;
    border-bottom: 1px solid var(--msh-line) !important;
  }

  /* Band 2 — unit, consumer price and base price on one quiet line. */
  [data-msh-catalog] .msh-cell--unit,
  [data-msh-catalog] .msh-cell--consumer,
  [data-msh-catalog] .msh-cell--base {
    grid-area: meta;
    display: inline-flex !important;
    width: auto;
    gap: 5px;
    padding: 10px 0 !important;
    font-size: 0.83rem;
  }

  [data-msh-catalog] .msh-cell--unit {
    padding-inline-start: 14px !important;
  }

  [data-msh-catalog] .msh-cell--base {
    padding-inline-end: 14px !important;
  }

  /* Separators between the three meta figures, not after the last. */
  [data-msh-catalog] .msh-cell--unit::after,
  [data-msh-catalog] .msh-cell--consumer::after {
    content: '·';
    margin-inline-start: 5px;
    color: var(--msh-line);
  }

  [data-msh-catalog] .msh-cell--unit::before,
  [data-msh-catalog] .msh-cell--consumer::before,
  [data-msh-catalog] .msh-cell--base::before {
    font-size: 0.76rem;
  }

  /* Band 3 — the action. Tinted so the thumb knows where to go. */
  [data-msh-catalog] .msh-cell--qty {
    grid-area: qty;
    justify-content: flex-start;
    padding: 12px 14px !important;
    border-block-start: 1px solid var(--msh-line) !important;
    background: var(--msh-surface-2);
  }

  [data-msh-catalog] .msh-cell--qty::before {
    content: none;
  }

  [data-msh-catalog] .msh-cell--final {
    grid-area: final;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    padding: 12px 14px !important;
    border-block-start: 1px solid var(--msh-line) !important;
    background: var(--msh-surface-2);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
  }

  [data-msh-catalog] .msh-cell--final::before {
    font-size: 0.72rem;
    font-weight: 400;
  }

  /*
   * Discount rides along with the final price instead of taking a row of its
   * own, and stays out of the way at zero — a "٠٪ تخفیف" line on every
   * untouched product is noise.
   */
  [data-msh-catalog] .msh-cell--discount {
    grid-area: final;
    align-self: start;
    justify-content: flex-end;
    padding: 0 14px !important;
    margin-block-start: -2px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--msh-brand);
    pointer-events: none;
  }

  [data-msh-catalog] .msh-cell--discount::before {
    content: none;
  }

  [data-msh-catalog] .msh-cell--discount:not(.is-live) {
    display: none !important;
  }

  /* Band 4 — margin, in a single strip. */
  [data-msh-catalog] .msh-cell--profit {
    grid-area: profit;
    display: inline-flex !important;
    width: auto;
    gap: 5px;
    padding: 9px 0 !important;
    border-block-start: 1px solid var(--msh-line) !important;
    font-size: 0.8rem;
    color: var(--msh-brand-dark);
  }

  [data-msh-catalog] .msh-cell--profit:first-of-type {
    padding-inline-start: 14px !important;
  }

  [data-msh-catalog] .msh-cell--profit-line {
    padding-inline-end: 14px !important;
    font-weight: 700;
  }

  [data-msh-catalog] .msh-cell--profit::before {
    font-size: 0.74rem;
  }

  [data-msh-catalog] .msh-cell--actions {
    grid-area: actions;
  }

  [data-msh-catalog] .msh-cell--actions:empty {
    display: none !important;
  }

  [data-msh-catalog] .msh-cell--actions:not(:empty) {
    justify-content: center;
    padding: 10px 14px !important;
    border-block-start: 1px solid var(--msh-line) !important;
  }

  /* A card with a quantity on it is the one the customer is working on. */
  [data-msh-catalog] .msh-b2b__row.is-selected {
    border-color: var(--msh-brand);
    box-shadow: 0 0 0 1px var(--msh-brand), 0 4px 14px rgba(31, 122, 77, 0.1);
  }

  .msh-b2b__group-title {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    padding-block: 10px;
    /* Opaque: a translucent heading lets card edges show through as it sticks. */
    background: var(--msh-surface-2);
  }

  /* ------------------------------------------------------------ summary bar */

  .msh-b2b-summary {
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.12);
  }

  .msh-b2b-summary__figures {
    gap: 14px;
    width: 100%;
    font-size: 0.84rem;
  }

  .msh-b2b-summary__cta {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }

  /* ------------------------------------------------------- single order page */

  .msh-b2b-order__actions {
    width: 100%;
  }

  .msh-b2b-order__actions > a {
    flex: 1 1 auto;
    text-align: center;
  }

  .msh-b2b-order__progress {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Honour a reduced-motion preference for the transitions above. */
@media (prefers-reduced-motion: reduce) {
  .msh-b2b__row,
  .msh-b2b-nav__link,
  .msh-b2b-order__btn {
    transition: none !important;
  }
}

/* The doorway CTA is a button for a visitor and a link for a signed-in account
   with no phone profile; both need to look identical. */
a.msh-b2b-entry__cta {
  display: block;
  line-height: 52px;
  text-align: center;
  text-decoration: none;
}

.msh-b2b-entry__notice {
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #e8c86a;
  border-radius: 10px;
  background: #fdf6e3;
  color: #7a5b06;
  font-size: 0.82rem;
  line-height: 2;
  text-align: start;
}
/* ======================================================== account identity */

/*
 * The line above the tabs: who is signed in, and the way out.
 *
 * Deliberately quiet — no border, muted type — because it is a reference, not
 * a destination. It answers a question the customer only asks occasionally,
 * and on a machine shared by an office it is the answer that stops a tonne of
 * rice being ordered on a colleague's account.
 */
.msh-b2b-account {
  flex-wrap: wrap;
}

.msh-b2b-account__who {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.msh-b2b-account__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(31, 122, 77, 0.1);
  color: var(--msh-brand-dark);
  font-size: 1rem;
  font-weight: 800;
}

.msh-b2b-account__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.msh-b2b-account__meta strong {
  overflow: hidden;
  color: var(--msh-ink);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msh-b2b-account__meta small {
  color: var(--msh-muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.msh-b2b-account__logout {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid var(--msh-line);
  border-radius: 9px;
  color: var(--msh-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.msh-b2b-account__logout:hover {
  border-color: var(--msh-danger);
  color: var(--msh-danger);
}

/* ============================================ panel navigation, forms, cart */

.msh-b2b-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border: 1px solid var(--msh-line);
}

.msh-b2b-nav__link {
  padding: 9px 16px;
  color: var(--msh-muted);
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
}

.msh-b2b-nav__link.is-active {
  color: #fff;
}

.msh-b2b-form__title {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 800;
}

.msh-b2b-form__intro {
  margin: -8px 0 18px;
  color: var(--msh-muted);
  font-size: 0.84rem;
  line-height: 1.9;
}

.msh-b2b-form__ok,
.msh-b2b-form__warn {
  margin-bottom: 18px;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.9;
}

.msh-b2b-form__ok {
  border: 1px solid rgba(31, 122, 77, 0.4);
  background: rgba(31, 122, 77, 0.08);
  color: var(--msh-brand-dark);
}

.msh-b2b-form__warn {
  border: 1px solid #e8c86a;
  background: #fdf6e3;
  color: #7a5b06;
}

.msh-b2b-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
}

.msh-b2b-form__wide,
.msh-b2b-form__actions {
  grid-column: 1 / -1;
}

.msh-b2b-form__grid label span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
  font-weight: 600;
}

.msh-b2b-form__grid input,
.msh-b2b-form__grid select,
.msh-b2b-form__grid textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
  font-size: 0.92rem;
  font-family: inherit;
}

.msh-b2b-form__grid input:focus,
.msh-b2b-form__grid select:focus,
.msh-b2b-form__grid textarea:focus {
  border-color: var(--msh-brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.14);
  outline: none;
}

.msh-b2b-form__grid input[readonly] {
  background: var(--msh-surface-2);
  color: var(--msh-muted);
}

.msh-b2b-form__grid small {
  display: block;
  margin-top: 5px;
  color: var(--msh-muted);
  font-size: 0.74rem;
}

.msh-b2b-form__actions button {
  height: 50px;
  padding-inline: 30px;
  border: 0;
  border-radius: 9px;
  background: var(--msh-brand);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.msh-b2b-form__note {
  margin-top: 16px;
  color: var(--msh-muted);
  font-size: 0.82rem;
  line-height: 2;
}

/* Totals */
.msh-b2b-totals {
  max-width: 420px;
  margin: 22px 0 0 auto;
  margin-inline: auto 0;
  padding: 20px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
}

.msh-b2b-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--msh-line);
  font-size: 0.88rem;
  color: var(--msh-muted);
}

.msh-b2b-totals__row strong {
  color: var(--msh-ink);
  font-variant-numeric: tabular-nums;
}

.msh-b2b-totals__row--note strong {
  color: var(--msh-muted);
  font-weight: 400;
  font-size: 0.82rem;
}

.msh-b2b-totals__row--grand {
  border-bottom: 0;
  padding-top: 14px;
  font-size: 1.05rem;
}

.msh-b2b-totals__row--grand strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.msh-b2b-totals__row--profit {
  border-bottom: 0;
  border-top: 1px solid var(--msh-line);
}

.msh-b2b-totals__row--profit strong {
  color: var(--msh-brand-dark);
}

.msh-b2b__remove {
  border: 0;
  background: none;
  color: var(--msh-danger);
  font-size: 0.8rem;
  cursor: pointer;
}

.msh-b2b-cart__note {
  display: block;
  max-width: 640px;
  margin: 22px 0;
}

.msh-b2b-cart__note span {
  display: block;
  margin-bottom: 7px;
  font-size: 0.85rem;
  font-weight: 600;
}

.msh-b2b-cart__note textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
  font-family: inherit;
}

.msh-b2b-cart__error {
  margin: 0 0 14px;
  padding: 12px 15px;
  border-radius: 9px;
  background: rgba(192, 57, 43, 0.08);
  color: var(--msh-danger);
  font-size: 0.85rem;
}

/* Order progress dots */
.msh-steps {
  display: inline-flex;
  gap: 5px;
}

.msh-steps__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--msh-line);
}

.msh-steps__dot.is-done {
  background: var(--msh-brand);
}
/* The panel tabs sit at the start edge (right, in RTL) rather than filling the
   bar: they read as navigation that way, not as a toolbar. */
.msh-b2b-nav {
  justify-content: flex-start;
}

/* Profit figures are the reason this panel exists — they get the accent colour
   wherever they appear, and only turn red when a margin is actually negative. */
.msh-b2b__table [data-msh-profit-unit],
.msh-b2b__table [data-msh-profit-line],
.msh-b2b-summary__profit strong {
  color: var(--msh-brand-dark);
  font-weight: 800;
}

.msh-b2b__table [data-msh-profit-unit].msh-negative,
.msh-b2b__table [data-msh-profit-line].msh-negative {
  color: var(--msh-danger);
}
/* A selected row is visually distinct from the price list around it. */


/* Unselected rows keep their indicative unit price but in a quieter tone. */
.msh-b2b__row:not(.is-selected) .msh-b2b__final {
  color: var(--msh-muted);
  font-weight: 600;
}

.msh-b2b-catalog__error {
  inset-block-end: 84px;
  margin: 12px 0;
}
/* ================================================================ bank cards */

.msh-bank-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.msh-bank {
  padding: 18px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
}

.msh-bank__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--msh-line);
}

.msh-bank__head span {
  color: var(--msh-muted);
  font-size: 0.83rem;
}

.msh-bank__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.msh-bank__label {
  flex-shrink: 0;
  color: var(--msh-muted);
  font-size: 0.78rem;
}

.msh-bank__value {
  flex: 1;
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--msh-ink);
}

.msh-bank__copy {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--msh-line);
  border-radius: 7px;
  background: var(--msh-surface-2);
  font-size: 0.76rem;
  cursor: pointer;
}

.msh-bank__copy:hover {
  border-color: var(--msh-brand);
  color: var(--msh-brand);
}

.msh-b2b-form__grid input[type='file'] {
  padding: 10px;
  background: var(--msh-surface-2);
}

.msh-status--pending  { background: #fdf3d4; color: #7a5b06; }
.msh-status--approved { background: rgba(31, 122, 77, 0.12); color: var(--msh-brand-dark); }
.msh-status--rejected { background: rgba(192, 57, 43, 0.1); color: var(--msh-danger); }
/* -------------------------------------------------- single order (customer) */

.msh-b2b-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.msh-b2b-order__head .msh-b2b-form__title {
  margin-bottom: 4px;
}

.msh-b2b-order__date {
  margin: 0;
  color: var(--msh-muted);
  font-size: 0.86rem;
}

.msh-b2b-order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.msh-b2b-order__btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--msh-line);
  border-radius: 8px;
  background: var(--msh-surface-2);
  color: var(--msh-ink);
  font-size: 0.84rem;
  text-decoration: none;
}

.msh-b2b-order__btn:hover {
  border-color: var(--msh-brand);
  color: var(--msh-brand);
}

.msh-b2b-order__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 26px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface-2);
}

.msh-b2b-order__status {
  font-weight: 600;
  color: var(--msh-brand-dark);
}

.msh-b2b-order__section {
  margin: 30px 0 12px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--msh-ink);
}

.msh-b2b-order__off {
  display: block;
  margin-top: 2px;
  color: var(--msh-brand);
  font-size: 0.74rem;
}

/* Address and freight sit side by side on a desktop, stack on a phone. */
.msh-b2b-order__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.msh-b2b-order__card {
  padding: 18px 20px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
}

.msh-b2b-order__card .msh-b2b-order__section {
  margin-top: 0;
}

.msh-b2b-order__addr {
  margin: 0 0 10px;
  line-height: 1.9;
}

.msh-b2b-order__meta {
  margin: 0 0 4px;
  color: var(--msh-muted);
  font-size: 0.83rem;
}

.msh-b2b-order__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0;
}

.msh-b2b-order__dl dt {
  color: var(--msh-muted);
  font-size: 0.82rem;
}

.msh-b2b-order__dl dd {
  margin: 0;
  font-size: 0.9rem;
}

.msh-b2b-order__reason {
  display: block;
  margin-top: 4px;
  color: var(--msh-danger);
  font-size: 0.76rem;
}

.msh-b2b-order__note {
  padding: 14px 18px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface-2);
  line-height: 1.9;
}

/* Settled balance reads as resolved, not as an outstanding figure. */
.msh-b2b-totals__row.is-settled strong {
  color: var(--msh-brand);
}

/* Order number in the history table. */
.msh-b2b__link {
  color: var(--msh-brand-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.msh-b2b__link:hover {
  color: var(--msh-brand);
  border-bottom-color: currentColor;
}

/* ============================================== reorder + inline notices */

.msh-cell--order-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.msh-cell--order-actions form {
  margin: 0;
}

.msh-b2b__reorder {
  padding: 9px 15px;
  border: 1.5px solid var(--msh-line);
  border-radius: 9px;
  background: var(--msh-surface);
  color: var(--msh-ink);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.msh-b2b__reorder:hover {
  border-color: var(--msh-brand);
  color: var(--msh-brand-dark);
}

.msh-b2b__notice {
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 0.87rem;
  line-height: 2;
}

.msh-b2b__notice--ok {
  border: 1px solid rgba(31, 122, 77, 0.3);
  background: rgba(31, 122, 77, 0.07);
  color: var(--msh-brand-dark);
}

.msh-b2b__notice--warn {
  border: 1px solid #e8c86a;
  background: #fdf6e3;
  color: #7a5b06;
}

.msh-b2b__notice strong {
  display: block;
  margin-block-start: 3px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .msh-cell--order-actions {
    justify-content: space-between;
  }

  .msh-b2b__reorder {
    min-height: 44px;
  }
}

/* ====================================================== v2 premium interface */

.msh-panel--b2b {
  width: min(1440px, calc(100% - 32px));
  margin: 28px auto 56px;
  color: var(--msh-ink);
}

.msh-panel--b2b::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #f7f3ea;
}

.msh-b2b-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid var(--msh-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 34px rgba(32, 55, 42, 0.07);
}

.msh-b2b-account__tools { display: flex; align-items: center; gap: 10px; }
.msh-b2b-account__switch {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--msh-gold);
  border-radius: 11px;
  color: var(--msh-brand);
  font-size: .83rem;
  font-weight: 800;
  text-decoration: none;
}

.msh-b2b-account__menu { display: none; }

.msh-b2b-nav {
  padding: 7px;
  border-color: var(--msh-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(32, 55, 42, .05);
}

.msh-b2b-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 10px;
}

.msh-b2b-nav__link.is-active {
  background: var(--msh-brand);
  box-shadow: 0 7px 18px rgba(23, 63, 42, .18);
}

.msh-b2b__group-title { color: var(--msh-brand); }
.msh-b2b__group-title::before { background: var(--msh-gold); }
.msh-b2b__table { border-color: var(--msh-line); border-radius: 16px; background: #fff; }
.msh-b2b__table thead th { background: #fbf8f1; color: #5e685f; }
.msh-b2b__row.is-selected { background: rgba(215, 181, 109, .11); }
.msh-b2b__row.is-selected .msh-qty { border-color: var(--msh-gold); }

.msh-access-state {
  width: min(620px, 100%);
  margin: 8vh auto;
  padding: 44px;
  border: 1px solid var(--msh-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(32, 55, 42, .1);
  text-align: center;
}

.msh-access-state__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(182, 138, 58, .12);
  color: var(--msh-gold);
  font-size: 1.5rem;
  font-weight: 900;
}

.msh-access-state h1 { margin: 0 0 12px; color: var(--msh-brand); font-size: 1.45rem; }
.msh-access-state p { color: var(--msh-muted); line-height: 2; }
.msh-access-state__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.msh-btn { min-height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.msh-btn--primary { background: var(--msh-brand); color: #fff; }
.msh-btn--secondary { border: 1px solid var(--msh-line); color: var(--msh-brand); background: #fff; }

.msh-application-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--msh-line);
  border-radius: 16px;
  background: #fff;
}
.msh-application-head span, .msh-application-head strong { display: block; }
.msh-application-head span { color: var(--msh-gold); font-size: .78rem; font-weight: 800; }
.msh-application-head strong { margin-top: 3px; color: var(--msh-brand); }
.msh-application-head a { color: var(--msh-muted); text-decoration: none; }

.msh-panel-drawer { display: none; }

@media (max-width: 900px) {
  .msh-panel--b2b { width: min(100% - 20px, 680px); margin-top: 12px; padding-bottom: 82px; }
  .msh-b2b-account { position: sticky; top: 8px; z-index: 40; padding: 11px 12px; border-radius: 15px; }
  .msh-b2b-account__avatar { width: 40px; height: 40px; }
  .msh-b2b-account__meta small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .msh-b2b-account__switch { display: none; }
  .msh-b2b-account__menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--msh-line);
    border-radius: 11px;
    background: var(--msh-surface-2);
    color: var(--msh-brand);
    font: inherit;
    font-weight: 800;
  }
  .msh-b2b-nav { display: none; }
.msh-access-state { margin: 30px auto; padding: 30px 20px; }
  .msh-access-state__actions { flex-direction: column; }
  .msh-access-state__actions .msh-btn { justify-content: center; }

  .msh-panel-drawer { display: block; position: fixed; inset: 0; z-index: 100002; pointer-events: none; visibility: hidden; }
  .msh-panel-drawer.is-open { pointer-events: auto; visibility: visible; }
  .msh-panel-drawer__veil { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(20, 35, 27, .5); opacity: 0; transition: opacity .22s ease; backdrop-filter: blur(3px); }
  .msh-panel-drawer.is-open .msh-panel-drawer__veil { opacity: 1; }
  .msh-panel-drawer__sheet {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    padding: 18px;
    background: #fffdf8;
    box-shadow: 20px 0 60px rgba(20, 35, 27, .2);
    transform: translateX(110%);
    transition: transform .25s ease;
  }
  [dir='ltr'] .msh-panel-drawer__sheet { transform: translateX(-110%); }
  .msh-panel-drawer.is-open .msh-panel-drawer__sheet { transform: translateX(0); }
  .msh-panel-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--msh-line); }
  .msh-panel-drawer__head > button { width: 38px; height: 38px; border: 1px solid var(--msh-line); border-radius: 11px; background: #fff; color: var(--msh-muted); font-size: 1.4rem; }
  .msh-panel-drawer__nav { display: grid; gap: 7px; margin-top: 18px; }
  .msh-panel-drawer__nav a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: 12px; color: var(--msh-ink); font-weight: 750; text-decoration: none; }
  .msh-panel-drawer__nav a.is-active { background: var(--msh-brand); color: #fff; }
  .msh-panel-drawer__foot { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--msh-line); }
  .msh-panel-drawer__foot a { min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 11px; font-weight: 800; text-decoration: none; }
  .msh-panel-drawer__retail { border: 1px solid var(--msh-gold); color: var(--msh-brand); }
  .msh-panel-drawer__logout { color: #a13d34; background: #fff4f2; }
  body.msh-panel-menu-open { overflow: hidden; }
}

/* ========================================================================
 * 2.1 standalone partner application
 * The wholesale area is an application, not a themed WordPress page. These
 * rules deliberately live at the end of the bundle so Flatsome cannot turn
 * its sidebar, cards and form controls back into shop-page components.
 * ===================================================================== */

body.msh-wholesale-body--app {
  margin: 0 !important;
  min-height: 100vh;
  overflow-x: hidden;
  background: #f8f5ee !important;
  color: #183629;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

body.msh-wholesale-body--app *,
body.msh-wholesale-body--app *::before,
body.msh-wholesale-body--app *::after { box-sizing: border-box; }

.msh-app-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 282px;
  direction: ltr;
  background: #f8f5ee;
}

.msh-app-main { grid-column: 1; min-width: 0; direction: rtl; }
.msh-app-content { width: min(1450px, 100%); margin: 0 auto; padding: 24px 30px 72px; }

.msh-app-topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 30px;
  border-bottom: 1px solid #e8dfd2;
  background: rgba(255, 253, 249, .88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 80;
}

.msh-app-topbar__title { display: grid; line-height: 1.6; }
.msh-app-topbar__title strong { color: #0d4c34; font-size: 1.28rem; font-weight: 900; }
.msh-app-topbar__title span { color: #7b807b; font-size: .78rem; }
.msh-app-topbar__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.msh-app-approved { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid #b9d8c7; border-radius: 999px; background: #eff8f2; color: #17603f; font-size: .76rem; font-weight: 800; }
.msh-app-approved i { width: 8px; height: 8px; border-radius: 50%; background: #198754; box-shadow: 0 0 0 4px rgba(25,135,84,.1); }
.msh-app-retail-link { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid #d0a44e; border-radius: 11px; color: #175039 !important; background: #fff; font-weight: 800; text-decoration: none !important; }
.msh-app-menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid #e4dacc; border-radius: 11px; background: #fff; }
.msh-app-menu-button span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #174b34; }

.msh-app-sidebar { grid-column: 2; grid-row: 1; min-width: 0; z-index: 100; direction: rtl; }
.msh-app-sidebar__veil { display: none; }
.msh-app-sidebar__sheet {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 17px 18px;
  border-inline-start: 1px solid #e7ddce;
  background: rgba(255, 253, 249, .97);
  box-shadow: -10px 0 32px rgba(45, 54, 47, .035);
}

.msh-app-brand { min-height: 76px;    padding: 0 8px 17px; border-bottom: 1px solid #eee5d9; }
.msh-app-brand__mark { width: 53px; height: 53px; color: #bd8e2e; flex: 0 0 auto; }
.msh-app-brand__mark svg { display: block; width: 100%; height: 100%; }
.msh-app-brand > div:nth-child(2) { display: grid; }
.msh-app-brand strong { color: #0d4b33; font-size: 1.38rem; font-weight: 900; line-height: 1.35; }
.msh-app-brand span { color: #9b7832; font-size: .76rem; font-weight: 800; }
.msh-app-brand > button { display: none; margin-inline-start: auto; width: 36px; height: 36px; border: 0; border-radius: 9px; background: #f4eee5; color: #6f746f; font-size: 1.4rem; }

.msh-app-nav { display: grid; gap: 6px; margin-top: 22px; }
.msh-app-nav a,
.msh-app-nav__secondary,
.msh-app-logout { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 11px; color: #3e4942 !important; font-weight: 800; text-decoration: none !important; transition: .18s ease; }
.msh-app-nav a svg,
.msh-app-nav__secondary svg,
.msh-app-logout svg { width: 23px; height: 23px; flex: 0 0 auto; }
.msh-app-nav a:hover { background: #f3eee5; color: #0c5035 !important; }
.msh-app-nav a.is-active { background: #0e5137; color: #fff !important; box-shadow: 0 11px 24px rgba(8, 70, 44, .18); }
.msh-app-nav a.is-active::after { content: ''; width: 3px; height: 24px; margin-inline-start: auto; border-radius: 3px; background: #d4a846; }
.msh-app-sidebar__lower { display: grid; gap: 5px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eee5d9; }
.msh-app-nav__secondary { min-height: 43px; padding-inline: 10px; color: #59625c !important; font-size: .77rem; }
.msh-app-nav__secondary:hover { color: #0e5538 !important; }
.msh-app-nav__secondary svg { width: 20px; height: 20px; }
.msh-app-support-call span { display: grid; gap: 1px; }
.msh-app-support-call small { color: #b1842f; font-size: .68rem; font-weight: 900; letter-spacing: .03em; }
.msh-app-support-call{width:100%;border:0;background:transparent;font:inherit;text-align:right;cursor:pointer}
.msh-app-partner-card { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #e9dece; border-radius: 13px; background: #fbf7f0; }
.msh-app-partner-card__avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #0e5337; color: #fff; font-weight: 900; }
.msh-app-partner-card div { min-width: 0; display: grid; }
.msh-app-partner-card strong { overflow: hidden; color: #1a3e2d; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.msh-app-partner-card small { color: #858983; font-size: .69rem; text-align: right; }
.msh-app-logout { min-height: 42px; padding-inline: 10px; color: #a94c43 !important; font-size: .76rem; }
.msh-app-logout svg { width: 20px; height: 20px; }

/* page heads and universal app surfaces */
.msh-page-heading,
.msh-dashboard-hello { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.msh-page-heading span,
.msh-dashboard-hello__eyebrow { display: block; margin-bottom: 3px; color: #b4852c; font-size: .77rem; font-weight: 900; }
.msh-page-heading h1,
.msh-dashboard-hello h1 { margin: 0; color: #123e2c; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.55; }
.msh-page-heading p,
.msh-dashboard-hello p { margin: 3px 0 0; color: #727a74; font-size: .84rem; }
.msh-dashboard-hello__cta,
.msh-solid-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 19px; border: 0; border-radius: 11px; background: #0f5739; box-shadow: 0 10px 22px rgba(9,72,46,.18); color: #fff !important; font-weight: 900; text-decoration: none !important; }
.msh-dashboard-hello__cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.msh-outline-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid #b99a5f; border-radius: 10px; background: #fff; color: #175039 !important; font-size: .78rem; font-weight: 900; text-decoration: none !important; }

.msh-dashboard-alert { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; padding: 13px 16px; border: 1px solid #e3c687; border-radius: 12px; background: #fff8e9; }
.msh-dashboard-alert div { display: grid; }
.msh-dashboard-alert strong { color: #76550f; }
.msh-dashboard-alert span { color: #947940; font-size: .75rem; }
.msh-dashboard-alert a { padding: 7px 13px; border-radius: 9px; background: #c29030; color: #fff !important; font-size: .76rem; font-weight: 900; text-decoration: none !important; }

/* dashboard */
.msh-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.msh-dashboard-stats article { min-width: 0; min-height: 116px; display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid #e7ded1; border-radius: 15px; background: rgba(255,255,255,.88); box-shadow: 0 7px 23px rgba(43,54,46,.04); }
.msh-dashboard-stat__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; border-radius: 50%; font-size: 1.15rem; font-weight: 900; line-height: 0; }
.msh-dashboard-stat__icon.is-green { background: #edf7f1; color: #0c6742; }
.msh-dashboard-stat__icon.is-gold { background: #fbf2df; color: #bd8420; }
.msh-dashboard-stat__icon svg { display: block; width: 24px; height: 24px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msh-dashboard-stats article div { min-width: 0; display: grid; gap: 6px; }
.msh-dashboard-stats small { color: #68716b; font-size: .77rem; }
.msh-dashboard-stats strong { color: #0e4c33; font-size: 1.16rem; font-weight: 900; line-height: 1.4; white-space: nowrap; }
.msh-dashboard-stats em { color: #666f69; font-size: .68rem; font-style: normal; font-weight: 500; }
.msh-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 16px; margin-bottom: 16px; }
.msh-dashboard-card { min-width: 0; padding: 18px; border: 1px solid #e7ded1; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 7px 23px rgba(43,54,46,.035); }
.msh-dashboard-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.msh-dashboard-card__head > div { display: flex; align-items: center; gap: 9px; }
.msh-dashboard-card__head h2 { margin: 0; color: #153d2d; font-size: 1rem; font-weight: 900; }
.msh-dashboard-card__head > a { color: #9d7427 !important; font-size: .75rem; font-weight: 800; text-decoration: none !important; }
.msh-dashboard-card__icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #f9f1e2; color: #bd8420; font-weight: 900; }
.msh-latest-order { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 13px; border-radius: 11px; background: #faf7f1; }
.msh-latest-order div { display: grid; gap: 3px; }
.msh-latest-order span { color: #7a807b; font-size: .7rem; }
.msh-latest-order strong { color: #183b2c; font-size: .83rem; }
.msh-status-pill { width: max-content; padding: 3px 9px; border: 1px solid #c7ddcf; border-radius: 999px; background: #eff8f2; color: #14613f; font-size: .68rem; }
.msh-order-track { display: flex; align-items: flex-start; margin: 24px 0 18px; }
.msh-order-track > div { position: relative; flex: 1; display: grid; justify-items: center; gap: 6px; color: #9a9e99; font-size: .66rem; text-align: center; }
.msh-order-track > div:not(:last-child)::after { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 1px; background: #ddd9d0; z-index: 0; }
.msh-order-track i { width: 27px; height: 27px; display: grid; place-items: center; z-index: 1; border: 1px solid #d6d6d1; border-radius: 50%; background: #fff; color: #fff; font-style: normal; }
.msh-order-track .is-done { color: #2f493d; }
.msh-order-track .is-done i { border-color: #c39435; background: #c39435; }
.msh-order-track .is-done:not(:last-child)::after { background: #c39435; }
.msh-store-info { display: grid; grid-template-columns: max-content 1fr; gap: 9px 15px; margin: 0 0 16px; padding: 13px; border-radius: 11px; background: #faf7f1; }
.msh-store-info dt { color: #858985; font-size: .7rem; }
.msh-store-info dd { margin: 0; color: #273f33; font-size: .76rem; font-weight: 750; }
.msh-dashboard-empty { min-height: 175px; display: grid; place-items: center; align-content: center; text-align: center; }
.msh-dashboard-empty p { margin: 4px 0 10px; color: #777e78; }
.msh-dashboard-empty a { color: #a67722 !important; font-weight: 900; }
.msh-quick-order { margin-bottom: 16px; }
.msh-quick-products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.msh-quick-products article { min-width: 0; padding: 11px; border: 1px solid #e9e0d4; border-radius: 12px; background: #fffdfa; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.msh-quick-products article:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,58,43,.08); }
.msh-quick-product__image { height: 78px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 9px; background: #f6f2ea; overflow: hidden; }
.msh-quick-product__image img { width: 100%; height: 100%; object-fit: contain; }
.msh-quick-product__image span { color: #b68a3a; font-size: 1.5rem; font-weight: 900; }
.msh-quick-products h3 { min-height: 38px; margin: 0; overflow: hidden; color: #254132; font-size: .74rem; font-weight: 900; line-height: 1.65; }
.msh-quick-products p { margin: 5px 0 8px; color: #6d746f; font-size: .64rem; }
.msh-quick-products a { min-height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: #0f5739; color: #fff !important; font-size: .65rem; font-weight: 900; text-decoration: none !important; }
.msh-dashboard-grid--bottom { grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr); }
.msh-recent-orders { display: grid; }
.msh-recent-orders > a { min-height: 56px; display: grid; grid-template-columns: 1.2fr .8fr 1fr; align-items: center; gap: 10px; padding: 8px 5px; border-top: 1px solid #eee6da; color: inherit !important; text-decoration: none !important; }
.msh-recent-orders > a:first-child { border-top: 0; }
.msh-recent-orders span { display: grid; }
.msh-recent-orders strong { color: #1f3f30; font-size: .76rem; }
.msh-recent-orders small { color: #8b908c; font-size: .65rem; }
.msh-recent-orders b { width: max-content; padding: 3px 8px; border-radius: 999px; background: #eff7f2; color: #1d6545; font-size: .65rem; }
.msh-recent-orders em { color: #2f493c; font-size: .73rem; font-style: normal; font-weight: 800; text-align: left; }
.msh-support-card { display: flex; flex-direction: column; }
.msh-support-card p { color: #727973; font-size: .77rem; line-height: 2; }
.msh-support-card .msh-solid-button { margin-top: auto; }
.msh-support-card .msh-outline-button { margin-top: 8px; }

/* modern catalogue */
.msh-catalog-page .msh-b2b__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.msh-catalog-page .msh-b2b__stat { min-height: 92px; display: grid; align-content: center; gap: 5px; padding: 14px 16px; border: 1px solid #e7ded1; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(43,54,46,.03); }
.msh-catalog-page .msh-b2b__stat-label { color: #727a74; font-size: .72rem; }
.msh-catalog-page .msh-b2b__stat-value { color: #17472f; }
.msh-catalog-page .msh-b2b__stat-value strong { font-size: 1.05rem; }
.msh-catalog-page .msh-b2b__goal { grid-column: 1 / -1; padding: 10px 14px; border: 1px solid #d9e9df; border-radius: 10px; background: #f2f8f4; }
.msh-catalog-page .msh-b2b__goal-text { margin-bottom: 6px; color: #2b5a43; font-size: .71rem; }
.msh-catalog-page .msh-b2b__toolbar { min-height: 64px; display: flex; align-items: center; margin-bottom: 22px; padding: 10px 12px; border: 1px solid #e7ded1; border-radius: 13px; background: #fff; }
.msh-catalog-page .msh-b2b__filters { display: flex; align-items: center; gap: 14px; width: 100%; }
.msh-catalog-page .msh-b2b__filter { width: min(320px, 100%); min-height: 42px; margin: 0; border: 1px solid #dfd6c8; border-radius: 9px; background: #fbf9f5; }
.msh-catalog-page .msh-b2b__toggle { display: flex; align-items: center; gap: 8px; margin: 0; color: #536159; font-size: .78rem; }
.msh-catalog-page .msh-b2b__sheet-head,
.msh-catalog-page .msh-b2b__sheet-foot,
.msh-catalog-page .msh-b2b__filter-trigger { display: none; }
.msh-catalog-group__head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 11px; }
.msh-catalog-group__head > div { display: flex; align-items: center; gap: 9px; }
.msh-catalog-group__head i { width: 4px; height: 25px; border-radius: 4px; background: #b88a32; }
.msh-catalog-group__head h2 { margin: 0; color: #0d4e34; font-size: 1.1rem; font-weight: 900; }
.msh-catalog-group__head > span { color: #8b8f8b; font-size: .7rem; }
.msh-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.msh-product-card { min-width: 0; padding: 14px; border: 1px solid #e6dccf; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(43,54,46,.035); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.msh-product-card:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(32,55,42,.08); }
.msh-product-card.is-selected { border-color: #c49536; box-shadow: 0 0 0 2px rgba(196,149,54,.1), 0 13px 28px rgba(32,55,42,.08); }
.msh-product-card__top { min-height: 91px; display: flex; align-items: center; gap: 11px; }
.msh-product-card__image { width: 78px; height: 78px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 11px; background: #f7f3ec; }
.msh-product-card__image img { width: 100%; height: 100%; object-fit: contain; }
.msh-product-card__image span { color: #bd8e2e; font-size: 1.6rem; font-weight: 900; }
.msh-product-card__identity { min-width: 0; display: grid; align-content: center; }
.msh-product-card__identity h3 { margin: 0; overflow: hidden; color: #1b3d2d; font-size: .9rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.msh-product-card__identity small { color: #969993; font-size: .63rem; text-align: right; }
.msh-product-card > .msh-b2b__stock { margin-inline-start: auto; align-self: flex-start; font-size: .58rem; }
.msh-product-card__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; padding: 10px; border-radius: 10px; background: #faf7f1; }
.msh-product-card__prices div { display: grid; gap: 3px; }
.msh-product-card__prices span { color: #858a85; font-size: .63rem; }
.msh-product-card__prices del { color: #8f928e; font-size: .72rem; }
.msh-product-card__prices strong { color: #0e5135; font-size: .82rem; white-space: nowrap; }
.msh-product-card__buy { display: flex;  justify-content: space-between;  }
.msh-product-card .msh-qty { width: min(190px, 65%); height: 43px; border: 1px solid #ddd5c9; border-radius: 9px; overflow: hidden; }
.msh-product-card .msh-qty__input {   border-block: 0; border-color: #e8e1d6;  }
.msh-product-card .msh-cell--discount { opacity: 0; padding: 5px 8px; border-radius: 8px; background: #eff8f2; color: #167047; font-size: .65rem; font-weight: 900; }
.msh-product-card .msh-cell--discount.is-live { opacity: 1; }
.msh-product-card__foot { min-height: 32px; display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #eee7dc; }
.msh-product-card__foot small { color: #8a8e89; font-size: .61rem; }
.msh-product-card__foot > a { margin-inline-start: auto; color: #9a7124 !important; font-size: .61rem; font-weight: 800; text-decoration: none !important; }
.msh-product-card__profit { width: 100%; color: #47705b; font-size: .62rem; }
.msh-product-hint { grid-column: 1 / -1; margin-top: -5px; padding: 8px 12px; border: 1px solid #dbe9df; border-radius: 9px; background: #f3f9f5; color: #315945; font-size: .68rem; }
.msh-b2b-catalog__error { position: fixed; right: 312px; bottom: 92px; z-index: 91; max-width: 620px; padding: 12px 15px; border: 1px solid #efb4ae; border-radius: 10px; background: #fff0ee; color: #a34137; box-shadow: 0 10px 25px rgba(80,30,25,.12); }
body.msh-wholesale-body--app .msh-b2b-summary { right: 282px; z-index: 90; padding-inline: 30px; border-top: 1px solid #dfd5c7; background: rgba(255,253,249,.96); backdrop-filter: blur(14px); }

/* existing cart/order/profile screens inside the new shell */
body.msh-wholesale-body--app .msh-b2b-form__title { margin: 0 0 20px; color: #123e2c; font-size: 1.48rem; font-weight: 900; }
body.msh-wholesale-body--app .msh-b2b-form,
body.msh-wholesale-body--app .msh-b2b-cart,
body.msh-wholesale-body--app .msh-b2b-orders,
body.msh-wholesale-body--app .msh-b2b-order,
body.msh-wholesale-body--app .msh-b2b-pay { max-width: 1280px; margin: 0 auto; }
body.msh-wholesale-body--app .msh-b2b__table { overflow: hidden; border: 1px solid #e5dbcd; border-radius: 14px; background: #fff; box-shadow: 0 7px 23px rgba(43,54,46,.035); }
body.msh-wholesale-body--app .msh-b2b__table thead th { height: 49px; border-color: #eee5d9; background: #faf7f1; color: #5c675f; font-size: .72rem; }
body.msh-wholesale-body--app .msh-b2b__table td { border-color: #eee7dd; color: #3e4b43; font-size: .76rem; }
body.msh-wholesale-body--app .msh-b2b-totals,
body.msh-wholesale-body--app .msh-b2b-order__card,
body.msh-wholesale-body--app .msh-bank,
body.msh-wholesale-body--app .msh-b2b-form__grid { border: 1px solid #e5dbcd; border-radius: 14px; background: #fff; box-shadow: 0 7px 23px rgba(43,54,46,.035); }
body.msh-wholesale-body--app .msh-b2b-form__grid { padding: 20px; }
body.msh-wholesale-body--app .msh-b2b-form__grid input,
body.msh-wholesale-body--app .msh-b2b-form__grid select,
body.msh-wholesale-body--app .msh-b2b-form__grid textarea { border: 1px solid #ded5c9; border-radius: 9px; background: #fdfcf9; box-shadow: none; }
body.msh-wholesale-body--app .msh-b2b-form__grid input:focus,
body.msh-wholesale-body--app .msh-b2b-form__grid select:focus,
body.msh-wholesale-body--app .msh-b2b-form__grid textarea:focus { border-color: #b98a31; box-shadow: 0 0 0 3px rgba(185,138,49,.1); }
body.msh-wholesale-body--app .msh-b2b-form__actions button,
body.msh-wholesale-body--app .msh-b2b-summary__cta { border: 0; border-radius: 10px; background: #0f5739; color: #fff; font-weight: 900; }

body.msh-wholesale-body--public { margin: 0; min-height: 100vh; background: #f8f5ee; font-family: Tahoma, Arial, sans-serif; }
.msh-public-shell { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.msh-public-shell .msh-panel--b2b { width: min(760px, 100%); padding: 0; }

@media (max-width: 1180px) {
  .msh-app-shell { grid-template-columns: minmax(0, 1fr) 250px; }
  .msh-app-content { padding-inline: 20px; }
  .msh-app-sidebar__sheet { padding-inline: 13px; }
  .msh-quick-products { grid-template-columns: repeat(3, 1fr); }
  .msh-product-grid { grid-template-columns: repeat(2, 1fr); }
  body.msh-wholesale-body--app .msh-b2b-summary { right: 250px; padding-inline: 20px; }
  .msh-b2b-catalog__error { right: 275px; }
}

@media (max-width: 900px) {
  .msh-app-shell { display: block; }
  .msh-app-content { padding: 18px 13px 90px; }
  .msh-app-topbar { min-height: 70px; padding: 11px 13px; }
  .msh-app-topbar__title span,
  .msh-app-approved,
  .msh-app-retail-link { display: none; }
  .msh-app-menu-button { display: block; }
  .msh-app-sidebar { position: fixed; inset: 0; z-index: 100002; pointer-events: none; visibility: hidden; }
  .msh-app-sidebar.is-open { pointer-events: auto; visibility: visible; }
  .msh-app-sidebar__veil { position: absolute; inset: 0; display: block; width: 100%; border: 0; background: rgba(12,37,25,.52); opacity: 0; backdrop-filter: blur(3px); transition: opacity .22s ease; }
  .msh-app-sidebar.is-open .msh-app-sidebar__veil { opacity: 1; }
  .msh-app-sidebar__sheet { position: absolute; inset-block: 0; right: 0; width: min(88vw, 330px);  transform: translateX(110%); transition: transform .24s ease; }
  .msh-app-sidebar.is-open .msh-app-sidebar__sheet { transform: translateX(0); }
  .msh-app-brand > button { display: block; }
  .msh-dashboard-hello,
  .msh-page-heading { align-items: flex-start; flex-direction: column; }
  .msh-dashboard-hello__cta { width: 100%; }
  .msh-dashboard-stats,
  .msh-catalog-page .msh-b2b__stats { grid-template-columns: repeat(2, 1fr); }
  .msh-dashboard-grid,
  .msh-dashboard-grid--bottom { grid-template-columns: 1fr; }
  .msh-catalog-page .msh-b2b__filters { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 100004; display: grid; padding: 18px; border: 1px solid #e1d7c9; border-radius: 18px; background: #fff; box-shadow: 0 18px 55px rgba(24,46,34,.2); transform: translateY(130%); transition: transform .22s ease; }
  .msh-catalog-page .msh-b2b__filters.is-open { transform: translateY(0); }
  .msh-catalog-page .msh-b2b__filter-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #ded4c6; border-radius: 10px; background: #faf7f1; color: #194a35; font-weight: 900; }
  .msh-catalog-page .msh-b2b__sheet-head,
  .msh-catalog-page .msh-b2b__sheet-foot { display: flex; align-items: center; justify-content: space-between; }
  .msh-catalog-page .msh-b2b__sheet-close { border: 0; background: transparent; font-size: 1.4rem; }
  .msh-catalog-page .msh-b2b__sheet-foot button { min-height: 40px; padding: 0 14px; border-radius: 9px; }
  .msh-catalog-page .msh-b2b__sheet-apply { border: 0; background: #0f5739; color: #fff; }
  .msh-catalog-page .msh-b2b__sheet-reset { border: 1px solid #ded4c6; background: #fff; }
  body.msh-wholesale-body--app .msh-b2b-summary { right: 0; padding: 10px 13px; }
  .msh-b2b-catalog__error { right: 13px; left: 13px; bottom: 105px; max-width: none; }
}

@media (max-width: 640px) {
  .msh-app-topbar__title strong { font-size: 1rem; }
  .msh-dashboard-hello h1,
  .msh-page-heading h1 { font-size: 1.35rem; }
  .msh-dashboard-alert { align-items: flex-start; flex-direction: column; }
  .msh-dashboard-stats,
  .msh-catalog-page .msh-b2b__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .msh-dashboard-stats article { min-height: 94px; padding: 11px; gap: 9px; }
  .msh-dashboard-stat__icon { width: 42px; height: 42px; }
  .msh-dashboard-stats strong { font-size: .91rem; }
  .msh-latest-order { grid-template-columns: 1fr; }
  .msh-order-track > div span { display: none; }
  .msh-quick-products { grid-template-columns: repeat(2, 1fr); }
  .msh-product-grid { grid-template-columns: 1fr; }
  .msh-product-card__prices { grid-template-columns: 1fr 1fr; }
  .msh-recent-orders > a { grid-template-columns: 1fr auto; }
  .msh-recent-orders em { grid-column: 1 / -1; text-align: right; }
  body.msh-wholesale-body--app .msh-b2b-form__grid { padding: 13px; }
}

.msh-dashboard-actions { margin-bottom: 16px; }
.msh-dashboard-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.msh-dashboard-action-grid > a { min-height: 86px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e6ddcf; border-radius: 12px; background: #fffdfa; color: #244333 !important; text-decoration: none !important; transition: .18s ease; }
.msh-dashboard-action-grid > a:hover { transform: translateY(-2px); border-color: #c69a43; box-shadow: 0 10px 24px rgba(32,55,42,.07); }
.msh-dashboard-action-grid > a > b { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #edf7f1; color: #0e593a; font-size: 1.1rem; }
.msh-dashboard-action-grid span { display: grid; }
.msh-dashboard-action-grid strong { font-size: .82rem; }
.msh-dashboard-action-grid small { color: #808681; font-size: .68rem; }

@media (max-width: 640px) {
  .msh-dashboard-action-grid { grid-template-columns: 1fr; }
}

/* The dedicated B2B entry is intentionally wider than the application form. */
.msh-wholesale-entry-body .msh-public-shell .msh-panel--b2b {
  width: min(1120px, 100%);
}

/* ==========================================================================
   MASHOOUF CANONICAL B2B PANEL UI
   ========================================================================== */
.msh-b2b{
	--msh-b2b-green:#0f4a34;
	--msh-b2b-gold:#b68a3a;
	--msh-b2b-line:#e8dfd0;
}
.msh-b2b :where(.msh-dashboard-hello,.msh-dashboard-card,.msh-b2b__stat,.msh-product-card){
	border:1px solid var(--msh-b2b-line)!important;
	border-radius:16px!important;
	background:#fff!important;
	box-shadow:none!important;
}
.msh-b2b .msh-product-card{
	overflow:hidden;
}
.msh-b2b :where(.msh-b2b__goal,[data-msh-goal]){
	position:relative;
	display:grid!important;
	gap:9px!important;
	margin:14px 0!important;
	padding:14px 16px!important;
	border:1px solid #d8e7dc!important;
	border-radius:15px!important;
	background:#f1f7f2!important;
	color:#254438!important;
	font-weight:800!important;
}
.msh-b2b :where(.msh-b2b__goal,[data-msh-goal])::before{
	content:"تا تخفیف بعدی";
	display:block;
	color:var(--msh-b2b-green);
	font-size:12px;
	font-weight:950;
}
.msh-b2b :where(.msh-b2b__goal-track,.msh-b2b__goal-progress,progress,[role="progressbar"]){
	width:100%!important;
	height:10px!important;
	min-height:10px!important;
	overflow:hidden!important;
	border:0!important;
	border-radius:999px!important;
	background:#dce9df!important;
}
.msh-b2b :where(.msh-b2b__goal-bar,.msh-b2b__goal-progress>*,progress::-webkit-progress-value){
	border-radius:999px!important;
	background:var(--msh-b2b-green)!important;
}
.msh-b2b table{
	max-width:100%;
}
@media(max-width:820px){
	body.mshmfn-has-nav :where(.msh-b2b,.msh-b2b-order,.msh-b2b-orders,.msh-b2b-payment,.msh-cart-page){
		padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))!important;
	}
	body.mshmfn-has-nav .msh-b2b-summary{
		bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
		z-index:35!important;
	}
	.msh-b2b,
	.msh-b2b-order,
	.msh-b2b-orders{
		overflow-x:hidden!important;
	}
	.msh-b2b :where(.msh-table-wrap,.msh-b2b-table-wrap,.msh-order-table-wrap){
		width:100%!important;
		max-width:100%!important;
		overflow-x:auto!important;
		-webkit-overflow-scrolling:touch;
	}
	.msh-b2b table{
		width:100%!important;
		max-width:100%!important;
		table-layout:fixed!important;
	}
	.msh-b2b th,
	.msh-b2b td{
		white-space:normal!important;
		overflow-wrap:anywhere!important;
		word-break:normal!important;
		padding:10px 8px!important;
	}
	.msh-b2b :where(.msh-b2b__goal,[data-msh-goal]){
		margin:10px 0 14px!important;
		padding:12px 13px!important;
	}
}

/* Product-owned tier progress: pricing values still come from the existing quote engine. */
.msh-product-tier{
	display:grid;
	gap:7px;
	margin-top:12px;
	padding:11px 12px;
	border:1px solid #dbe7dd;
	border-radius:11px;
	background:#f5f8f4;
	color:#315444;
}
.msh-product-tier[hidden]{display:none!important}
.msh-product-tier__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	font-size:.66rem;
}
.msh-product-tier__head strong{color:#164b34;font-size:.7rem}
.msh-product-tier__head span{color:#6d796f;white-space:nowrap}
.msh-product-tier__track{
	height:7px;
	overflow:hidden;
	border-radius:999px;
	background:#dce7df;
}
.msh-product-tier__track span{
	display:block;
	height:100%;
	border-radius:inherit;
	background:#0f5739;
	transition:width .2s ease;
}
.msh-product-tier>small{color:#536d5f;font-size:.64rem;line-height:1.7}

/* MASHOOUF B2B BRAND SAFETY */

/* ==========================================================================
   MASHOOUF B2B DRAWER SITE LOGO
   ========================================================================== */
.msh-app-brand{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) 42px!important;
	align-items:center!important;
	gap:12px!important;
}
.msh-app-brand__identity{
	display:flex!important;
	align-items:center!important;
	min-width:0;
}
.msh-app-brand__logo{
	display:flex!important;
	align-items:center!important;
	justify-content:flex-start!important;
	min-width:0;
	max-width:185px;
	padding:0!important;
	border:0!important;
	background:transparent!important;
	text-decoration:none!important;
}
.msh-app-brand__logo-img{
	display:block!important;
	width:auto!important;
	height:auto!important;
	max-width:100%!important;
	max-height:54px!important;
	object-fit:contain!important;
	object-position:right center!important;
}
.msh-app-brand__subtitle{
	flex:0 0 auto;
	color:#b68a3a!important;
	font-size:11px!important;
	font-weight:850!important;
	white-space:nowrap;
}
.msh-app-brand>[data-msh-panel-close]{
	justify-self:end!important;
}
@media(max-width:820px){
	.msh-app-brand{
		grid-template-columns:minmax(0,1fr) 42px!important;
		padding:15px 16px 13px!important;
	}
	.msh-app-brand__identity{gap:9px!important}
	.msh-app-brand__logo{max-width:158px}
	.msh-app-brand__logo-img{max-height:46px!important}
	.msh-app-brand__subtitle{font-size:10px!important}
}

/* ==========================================================================
   MASHOOUF B2B RESPONSIVE UX CORRECTIONS
   Drawer safety, compact product cards, and stable desktop app chrome.
   ========================================================================== */

/* Desktop: keep the application rail and the fixed order summary in one
 * coordinate system so neither visually detaches while the document scrolls. */
@media (min-width: 901px) {
  .msh-app-shell {
    display: block;
    min-height: 100vh;
    padding-right: 282px;
    direction: rtl;
  }
  .msh-app-main {
    width: 100%;
    min-width: 0;
    direction: rtl;
  }
  .msh-app-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 282px;
    height: 100dvh;
    z-index: 100;
  }
  .msh-app-sidebar__sheet {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.msh-wholesale-body--app .msh-b2b-summary {
    right: 282px;
    left: 0;
    width: auto;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .msh-app-shell { padding-right: 250px; }
  .msh-app-sidebar { width: 250px; }
  body.msh-wholesale-body--app .msh-b2b-summary { right: 250px; }
}

/* The brand block is now logo-only; no redundant orange panel label. */
.msh-app-brand__identity { gap: 0 !important; }

@media (max-width: 900px) {
  /* Native header drawer must remain fully usable above the global mobile nav. */
  .msh-app-sidebar__sheet {
    height: 100dvh;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .msh-app-brand {
    min-height: 78px !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    gap: 12px !important;
  }

  .msh-app-brand > [data-msh-panel-close] {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: end !important;
    border: 1px solid #ded4c6 !important;
    border-radius: 50% !important;
    background: #f8f4ec !important;
    color: #65706a !important;
    box-shadow: none !important;
    font: 700 26px/1 Arial, sans-serif !important;
    text-align: center !important;
  }

  .msh-app-sidebar__lower {
    padding-bottom: 8px;
  }

  /* Product identity now owns the unused horizontal space instead of leaving
   * a large empty patch beside the image. */
  .msh-product-card {
    padding: 14px 14px 12px;
  }
  .msh-product-card__top {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 0;
    gap: 13px;
    align-items: center;
  }
  .msh-product-card__image {
    width: 92px;
    height: 92px;
    border-radius: 12px;
  }
  .msh-product-card__identity {
    width: 100%;
    min-width: 0;
    align-content: center;
  }
  .msh-product-card__identity h3 {
    font-size: 1rem;
    white-space: normal;
    line-height: 1.6;
  }
  .msh-product-card__identity small { font-size: .68rem; }
  .msh-product-card__unit { margin-top: 6px; font-size: .68rem; }
  .msh-product-card__prices {
    margin: 10px 0 8px;
    padding: 10px 12px;
  }
  .msh-product-card__buy {
    justify-content: flex-start;
    min-height: 46px;
  }
  .msh-product-card .msh-qty {
    width: min(100%, 330px);
    max-width: 100%;
    margin-inline-start: auto;
  }
  .msh-product-card .msh-cell--discount {
    display: none;
    opacity: 1;
  }
  .msh-product-card .msh-cell--discount.is-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .msh-product-tier {
    margin-top: 10px;
    padding: 10px 11px;
  }
  .msh-product-card__foot {
    min-height: 0;
    margin-top: 10px;
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .msh-product-card__profit {
    width: auto;
    margin-inline-start: auto;
  }
}

@media (max-width: 560px) {
  .msh-product-card__top {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 11px;
  }
  .msh-product-card__image {
    width: 84px;
    height: 84px;
  }
  .msh-product-card__prices strong { font-size: .88rem; }
  .msh-product-card .msh-qty { width: 100%; }
}


/* ========================================================================== 
   B2B FINAL DESKTOP SCROLL + PAYMENT RHYTHM
   Keep document scrolling primary; the fixed sidebar must not trap the wheel.
   ========================================================================== */
@media (min-width: 901px) {
  body.msh-wholesale-body--app {
    overflow-y: visible !important;
  }
  body.msh-wholesale-body--app .msh-app-main,
  body.msh-wholesale-body--app .msh-app-content {
    overflow: visible !important;
  }
  body.msh-wholesale-body--app .msh-app-sidebar__sheet {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y;
  }
}

/* Payment sections need a clear visual break after totals/cards. */
body.msh-wholesale-body--app .msh-b2b-pay > .msh-b2b__group-title {
  margin-top: 30px;
  margin-bottom: 14px;
}
body.msh-wholesale-body--app .msh-b2b-pay > .msh-b2b-totals + .msh-b2b__group-title {
  margin-top: 34px;
}

@media (max-width: 900px) {
  body.msh-wholesale-body--app .msh-b2b-pay > .msh-b2b__group-title {
    margin-top: 24px;
    margin-bottom: 12px;
  }
}

/* ========================================================================== 
   B2B CATALOG INFORMATION DENSITY — STAGE 8
   Packaging, quantity context, gift progress and a denser sticky summary.
   ========================================================================== */
.msh-catalog-group__identity{display:grid!important;gap:4px;min-width:0}
.msh-catalog-group__identity>div{display:flex;align-items:center;gap:9px}
.msh-catalog-group__identity>small{padding-inline-start:13px;color:#858d87;font-size:.64rem;line-height:1.6}
.msh-product-card__unit{max-width:100%;width:max-content;margin-top:6px;padding:4px 8px;border:1px solid #e5ded2;border-radius:8px;background:#f8f4ed;color:#5f6a64;font-size:.66rem;font-weight:750;line-height:1.5;white-space:normal}
.msh-product-card__qty-area{display:grid;gap:5px;flex:1;min-width:0}
.msh-product-card__qty-label{display:flex;align-items:center;gap:4px;color:#69746e;line-height:1.5}
.msh-product-card__qty-label strong{color:#0e5135;font-weight:900}
.msh-product-card__qty-label em{color:#7c837f;font-style:normal;font-weight:700}
.msh-product-gift{display:grid;gap:7px;margin-top:10px;border-radius:11px;}
.msh-product-gift[hidden]{display:none!important}
.msh-product-gift__head{display:flex;align-items:center;justify-content:space-between;font-size:.66rem}
.msh-product-gift__head span{white-space:nowrap}
.msh-product-gift__track{overflow:hidden;border-radius:999px;}
.msh-product-gift__track span{display:block;height:100%;border-radius:inherit;transition:width .2s ease}
.msh-b2b-summary__figures{flex-wrap:wrap;row-gap:5px}
.msh-b2b-summary__figures>span{white-space:nowrap}

@media (max-width:900px){
  .msh-catalog-group__identity>small{padding-inline-start:0;font-size:.68rem}
  .msh-product-card__buy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .msh-product-card__qty-label{font-size:.7rem}
  .msh-product-card__qty-label strong{font-size:.78rem}
  .msh-product-card__unit{font-size:.7rem}
}

@media (max-width:560px){
  .msh-product-card__buy{grid-template-columns:1fr}
  .msh-product-card .msh-cell--discount.is-live{justify-self:start}
  .msh-product-tier,.msh-product-gift{margin-top:9px}
  .msh-b2b-summary__figures{gap:4px 10px}
}

/* ========================================================================== 
   B2B CATALOG DENSITY + NO-CONSUMER-PRICE POLISH — STAGE 9
   ========================================================================== */
.msh-product-card__prices em{color:#969c97;font-size:.76rem;font-style:normal;font-weight:700}
.msh-product-card__buy{gap:12px;align-items:end}
.msh-product-card__qty-area .msh-qty{border-color:#ded5c7;}
.msh-product-card__qty-label{font-size:.61rem}
.msh-product-card__qty-label strong{font-size:.69rem}
.msh-product-card__foot small{line-height:1.8;white-space:normal}

@media (max-width:900px){
  .msh-product-card__qty-area{max-width:none}
  .msh-product-card__qty-area .msh-qty{max-width:180px}
}

@media (max-width:560px){
}

/* ========================================================================== 
   B2B QUANTITY CONTROL — STAGE 10
   Compact three-part stepper: minus / value / plus without oversized side cells.
   ========================================================================== */
.msh-product-card__qty-area{max-width:150px}
.msh-product-card__qty-area .msh-qty{
  width:132px!important;
  max-width:132px!important;
  height:36px!important;
  display:grid!important;
  grid-template-columns:34px 64px 34px;
  align-items:stretch;
  margin-inline-start:auto;
  border:1px solid #d9d0c3;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  box-shadow:none;
}
.msh-product-card .msh-qty__btn{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:0!important;
  border-radius:0!important;
  background:#f5f1e9!important;
  color:#0e5135!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1!important;
}
.msh-product-card .msh-qty__input{
  width:64px!important;
  min-width:64px!important;
  max-width:64px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 4px!important;
  border:0!important;
  border-inline:1px solid #e7dfd3!important;
  border-radius:0!important;
  background:#fff!important;
  color:#24372f!important;
  text-align:center!important;
  font-size:.82rem!important;
  font-weight:850!important;
  box-shadow:none!important;
}
.msh-product-card .msh-qty__btn:hover,
.msh-product-card .msh-qty__btn:focus{background:#ebe4d8!important}

@media (hover:none) and (pointer:coarse){
  .msh-product-card__qty-area{max-width:158px}
  .msh-product-card__qty-area .msh-qty{width:150px!important;max-width:150px!important;height:44px!important;grid-template-columns:42px 66px 42px}
  .msh-product-card .msh-qty__btn{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;font-size:20px!important}
  .msh-product-card .msh-qty__input{width:66px!important;min-width:66px!important;max-width:66px!important;height:42px!important;min-height:42px!important;font-size:16px!important}
}

@media (max-width:560px){
  .msh-product-card__qty-area{max-width:158px}
  .msh-product-card__qty-area .msh-qty{width:150px!important;max-width:150px!important}
}

/* ========================================================================== 
   STAGE 15 — GIFT RUNTIME / ORDER SNAPSHOT
   ========================================================================== */
.msh-gift-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:7px;padding:4px 9px;border:1px solid #cfe1d4;border-radius:999px;background:#eef7f1;color:#0f5a3b;font-size:.68rem;font-weight:800;line-height:1.35}
.msh-gift-badge::before{content:"+";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#dcefe2;color:#0f5a3b;font-size:.72rem;font-weight:900}
.msh-gift-note{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 18px;padding:12px 14px;border:1px solid #d3e4d7;border-radius:13px;background:#f2f8f4;color:#234a38}
.msh-gift-note strong{font-size:.79rem;color:#0e5135}.msh-gift-note span{font-size:.68rem;color:#64736b;line-height:1.8}
@media(max-width:640px){.msh-gift-note{display:block}.msh-gift-note span{display:block;margin-top:4px}.msh-gift-badge{font-size:.64rem}}

/* ========================================================================== 
   STAGE 15C — GIFT CARD CONTRAST / VISUAL PRIORITY
   Keeps gift logic untouched; only improves readability in catalogue cards.
   ========================================================================== */
.msh-product-gift{
  position:relative;
  padding:11px 12px 12px!important;
  border:1px solid #d8b45f!important;
  border-inline-start:4px solid #b88a2d!important;
  background:#fff7e6!important;
  color:#3f4a43!important;
  box-shadow:0 4px 14px rgba(92,76,44,.07)!important;
}
.msh-product-gift__head{
  gap:10px!important;
  min-height:24px;
}
.msh-product-gift__head strong{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 8px;
  border-radius:999px;
  background:#f3e2b7;
  color:#684a09!important;
  font-size:.72rem!important;
  font-weight:900!important;
}
.msh-product-gift__head span{
  color:#435149!important;
  font-weight:800!important;
}
.msh-product-gift__track{
  height:8px!important;
  border:1px solid #e0d0a9;
  background:#eee3ca!important;
  box-shadow:inset 0 1px 2px rgba(75,58,25,.08);
}
.msh-product-gift__track span{
  min-width:4px;
  background:#b88a2d!important;
  box-shadow:0 0 0 1px rgba(126,91,22,.08);
}
.msh-product-gift>small{
  color:#514d42!important;
  font-size:.66rem!important;
  font-weight:650;
  line-height:1.75!important;
}
@media(max-width:560px){
  .msh-product-gift{padding:10px 11px!important;border-inline-start-width:3px!important}
  .msh-product-gift__head strong{font-size:.68rem!important}
  .msh-product-gift>small{font-size:.63rem!important}
}