/* TOPACIFY shared header/footer, extracted from the approved homepage.
 * Load after style.css and commerce.css, before topacify-home.css.
 * Only site-shell components are selected; main/product layout is untouched.
 * The source cascade and media-query ordering are retained intentionally.
 */

/* Keep homepage palette and spacing local to the shell. The existing
 * .sb-container rule has a 1280px cap; --tp-max is not used to widen it.
 */
body.sb-b2b .sb-header,
body.sb-b2b .sb-footer,
body.sb-b2b .sb-dialog {
  --tp-paper: #fff;
  --tp-canvas: #fcfaf6;
  --tp-warm: #f2eee6;
  --tp-ink: #2d3428;
  --tp-muted: #66695e;
  --tp-olive: #303d29;
  --tp-olive-hover: #25311f;
  --tp-sand: #aa8c55;
  --tp-link: #896e40;
  --tp-line: #e1ddd3;
  --tp-gutter: 48px;
  --tp-max: 1280px;
  --sb-canvas: var(--tp-canvas);
  --sb-ink: var(--tp-ink);
  --sb-muted: var(--tp-muted);
  --sb-accent: var(--tp-olive);
  --sb-accent-hover: var(--tp-olive-hover);
  --sb-border: var(--tp-line);
  --sb-max: var(--tp-max);
  --sb-gutter: var(--tp-gutter);
}

body.sb-b2b .sb-header,
body.sb-b2b .sb-dialog { color: var(--sb-ink); }

@media (min-width: 981px) {
  body.sb-b2b .sb-header,
  body.sb-b2b .sb-footer,
  body.sb-b2b .sb-dialog { --tp-max: 1328px; }
}
@media (max-width: 1100px) {
  body.sb-b2b .sb-header,
  body.sb-b2b .sb-footer,
  body.sb-b2b .sb-dialog { --tp-gutter: 32px; }
}
@media (max-width: 767px) {
  body.sb-b2b .sb-header,
  body.sb-b2b .sb-footer,
  body.sb-b2b .sb-dialog { --tp-gutter: 20px; }
}
@media (max-width: 360px) {
  body.sb-b2b .sb-header,
  body.sb-b2b .sb-footer,
  body.sb-b2b .sb-dialog { --tp-gutter: 16px; }
}

/* Header/footer refinements in the same order as the approved homepage. */
body.sb-b2b .sb-header { background: var(--tp-canvas); border-block-end: 1px solid var(--tp-line); }

body.sb-b2b .sb-topline { padding-block: 5px; border-block-end: 1px solid var(--tp-line); background: var(--tp-canvas); color: var(--tp-muted); font-size: 11px; line-height: 1.8; }

body.sb-b2b .sb-header .sb-header-row { display: grid; grid-template-columns: minmax(160px, 210px) minmax(180px, 1fr) auto; align-items: center; gap: 32px; min-block-size: 84px; padding-block: 12px; }

body.sb-b2b .sb-header .tp-brand { display: flex; align-items: center; min-inline-size: 0; min-block-size: 44px; max-inline-size: 100%; padding: 0; text-decoration: none; }

body.sb-b2b .sb-header .tp-logo { display: block; inline-size: 166px; block-size: auto; max-inline-size: 100%; max-block-size: 62px; margin: 0; object-fit: contain; }

body.sb-b2b .sb-header .sb-header-search { display: flex; align-items: center; inline-size: 100%; max-inline-size: 540px; min-inline-size: 0; margin: 0; border: 1px solid var(--tp-line); border-radius: 4px; background: var(--tp-paper); }

body.sb-b2b .sb-header .sb-header-search input[type="search"] { flex: 1 1 auto; inline-size: 100%; min-inline-size: 0; block-size: 46px; padding: 10px 16px; border: 0; background: transparent; color: var(--tp-ink); font-family: var(--sb-body-font); font-size: 12px; box-shadow: none; }

body.sb-b2b .sb-header .sb-header-search button { display: grid; flex: 0 0 46px; place-items: center; inline-size: 46px; min-block-size: 46px; padding: 10px; border: 0; background: transparent; color: var(--tp-olive); }

body.sb-b2b .sb-header-actions { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }

body.sb-b2b .sb-header-basket .misbaha-rfq-basket-link { min-block-size: 44px; border-radius: 4px; border-color: var(--tp-olive); background: var(--tp-olive); font-size: 12px; }

body.sb-b2b .sb-navigation-row { background: var(--tp-canvas); border-block-start: 1px solid var(--tp-line); }

body.sb-b2b .sb-navigation-row > .sb-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-block-size: 48px; }

body.sb-b2b .sb-header .sb-desktop-nav { gap: 28px; }

body.sb-b2b .sb-header .sb-nav a { font-size: 13px; }

body.sb-b2b .sb-nav-help { color: var(--tp-muted); font-size: 12px; }

body.sb-b2b .sb-footer { padding-block: 0; background: #303c2b; }

body.sb-b2b .sb-footer-inquiry { display: none; }

body.sb-b2b .sb-footer-grid { gap: 40px; padding-block: 48px 36px; }

body.sb-b2b .sb-footer .sb-wordmark { margin-block-end: 14px; color: #fff; font-size: 32px; }

body.sb-b2b .sb-footer .tp-logo { inline-size: 150px; block-size: auto; max-inline-size: 100%; object-fit: contain; }

body.sb-b2b .sb-footer p,
body.sb-b2b .sb-footer li,
body.sb-b2b .sb-footer-currency { color: #d9ddd2; font-size: 13px; }

body.sb-b2b .sb-footer h2 { margin-block-end: 15px; color: #fff; font-size: 15px; }

body.sb-b2b .sb-footer-bottom { border-block-start-color: #ffffff24; padding-block: 20px; }

body.sb-b2b .sb-footer-bottom p,
body.sb-b2b .sb-footer-bottom a { font-size: 11px; }

@media (max-width: 1100px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: 160px minmax(140px, 1fr) auto; gap: 20px; }

  body.sb-b2b .sb-header .sb-desktop-nav { gap: 20px; }

  body.sb-b2b .sb-nav-help { max-inline-size: 200px; }
}

@media (max-width: 980px) {
  body.sb-b2b .sb-header .sb-desktop-nav,
  body.sb-b2b .sb-header .sb-navigation-row { display: none; }

  body.sb-b2b .sb-header .sb-menu-button { display: inline-grid; }

  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: minmax(150px, .8fr) minmax(150px, 1fr) auto; gap: 16px; }

  body.sb-b2b .sb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 767px) {
  body.sb-b2b .sb-topline { font-size: 10px; }

  body.sb-b2b .sb-topline > .sb-container { gap: 8px 16px; flex-wrap: wrap; }

  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-block-size: 76px; padding-block: 14px; }

  body.sb-b2b .sb-header .tp-logo { inline-size: 140px; max-block-size: 52px; }

  body.sb-b2b .sb-header .sb-header-search { grid-column: 1 / -1; grid-row: 2; max-inline-size: none; }

  body.sb-b2b .sb-header-actions { gap: 6px; }

  body.sb-b2b .sb-header .sb-icon-button { min-inline-size: 38px; min-block-size: 44px; padding-inline: 6px; }

  body.sb-b2b .sb-header-basket { min-inline-size: 0; }

  body.sb-b2b .sb-header-basket .misbaha-rfq-basket-link { gap: 6px; min-block-size: 44px; max-inline-size: 156px; padding: 8px 10px; font-size: 11px; white-space: normal; }

  body.sb-b2b .sb-header-basket .misbaha-rfq-basket-count { flex: 0 0 auto; min-inline-size: 20px; block-size: 20px; font-size: 10px; }

  body.sb-b2b .sb-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px 28px; }

  body.sb-b2b .sb-footer-grid > * { min-inline-size: 0; }

  body.sb-b2b .sb-footer-bottom { align-items: start; flex-direction: column; gap: 8px; }
}

@media (max-width: 360px) {
  body.sb-b2b .sb-header .tp-logo { inline-size: 118px; }

  body.sb-b2b .sb-header-basket .misbaha-rfq-basket-link { max-inline-size: 136px; padding-inline: 8px; font-size: 10px; }
}

body.sb-b2b .sb-topline { display: none; }

body.sb-b2b .sb-header .sb-header-row { direction: ltr; grid-template-columns: 170px minmax(0, 1fr) minmax(240px, 390px); min-block-size: 74px; }

body.sb-b2b .sb-header .tp-brand { grid-column: 1; grid-row: 1; justify-self: start; }

body.sb-b2b .sb-header .sb-header-search { direction: rtl; grid-column: 3; grid-row: 1; justify-self: end; }

body.sb-b2b .sb-header .sb-header-actions { direction: rtl; grid-column: 2; grid-row: 1; justify-self: center; }

body.sb-b2b .sb-navigation-row > .sb-container { min-block-size: 42px; }

body.sb-b2b .sb-footer { background: var(--tp-olive); }

body.sb-b2b .sb-footer-grid { padding-block: 42px 32px; }

@media (max-width: 1100px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: 150px minmax(0, 1fr) minmax(210px, 330px); gap: 20px; }
}

@media (max-width: 980px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: 145px minmax(0, 1fr) minmax(200px, 300px); gap: 16px; }
}

@media (max-width: 767px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }

  body.sb-b2b .sb-header .sb-header-actions { grid-column: 2; grid-row: 1; justify-self: end; }

  body.sb-b2b .sb-header .sb-header-search { grid-column: 1 / -1; grid-row: 2; inline-size: 100%; max-inline-size: none; }
}

body.sb-b2b .sb-header .tp-brand-text,
body.sb-b2b .sb-footer .tp-brand-text { display: block; font-family: "Arial Narrow", Arial, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: -1.8px; line-height: 1; }

body.sb-b2b .sb-footer .tp-brand-text { font-size: 34px; color: #f6f4e9; }

@media (min-width: 981px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: 150px minmax(0, 1fr) minmax(220px, 340px); gap: 30px; min-block-size: 80px; }

  body.sb-b2b .sb-header .sb-desktop-nav { display: flex; direction: rtl; grid-column: 2; grid-row: 1; justify-content: center; gap: clamp(16px, 2vw, 28px); }

  body.sb-b2b .sb-header .sb-desktop-nav a { font-size: 13px; white-space: nowrap; }

  body.sb-b2b .sb-header .sb-header-actions { display: none; }
}

@media (max-width: 980px) {
  body.sb-b2b .sb-header .sb-desktop-nav { display: none; }
}

@media (min-width: 981px) {
  body.sb-b2b .sb-footer-grid { direction: ltr; grid-template-columns: 1.35fr 1fr 1fr 1fr; }

  body.sb-b2b .sb-footer-grid > div { direction: rtl; grid-row: 1; }

  body.sb-b2b .sb-footer-grid > div:nth-child(1) { grid-column: 1; text-align: left; }

  body.sb-b2b .sb-footer-grid > div:nth-child(2) { grid-column: 4; }

  body.sb-b2b .sb-footer-grid > div:nth-child(3) { grid-column: 3; }

  body.sb-b2b .sb-footer-grid > div:nth-child(4) { grid-column: 2; }
}

@media (max-width: 767px) {
  body.sb-b2b .sb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }

  body.sb-b2b .sb-footer-grid > .sb-footer-brand,
  body.sb-b2b .sb-footer-grid > div:last-child { grid-column: 1 / -1; }

  body.sb-b2b .sb-footer-grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }

  body.sb-b2b .sb-footer-grid > div:last-child li { margin: 0; }
}

@media (min-width: 981px) and (max-width: 1100px) {
  body.sb-b2b .sb-header .sb-header-row { grid-template-columns: 130px minmax(0, 1fr) 250px; gap: 20px; }

  body.sb-b2b .sb-header .sb-desktop-nav { gap: 16px; }

  body.sb-b2b .sb-header .sb-desktop-nav a { font-size: 12px; }
}

/* Mobile/search dialogs are siblings of the header. Keep their local palette
 * and existing native-dialog geometry identical on home and interior pages.
 */
body.sb-b2b .sb-dialog {
  inline-size: min(680px, calc(100vw - 40px));
  max-inline-size: none;
  max-block-size: calc(100dvh - 40px);
  padding: 28px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: var(--sb-canvas);
  color: var(--sb-ink);
  box-shadow: 0 24px 80px #292c2433;
}
body.sb-b2b .sb-dialog::backdrop { background: #191d1973; backdrop-filter: blur(3px); }
body.sb-b2b .sb-dialog .sb-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: 22px; }
body.sb-b2b .sb-dialog .sb-dialog-head h2 { margin: 0; font-size: 28px; }
body.sb-b2b .sb-dialog .sb-dialog-head .sb-icon-button { font-size: 30px; font-family: Arial, sans-serif; }
body.sb-b2b .sb-dialog .sb-search-form { display: flex; gap: 12px; }
body.sb-b2b .sb-dialog .sb-search-form input[type="search"] { flex: 1; min-inline-size: 0; block-size: 50px; padding-inline: 15px; border: 1px solid var(--sb-border); border-radius: 6px; font-size: 16px; font-family: var(--sb-body-font); }
body.sb-b2b .sb-dialog .sb-mobile-nav { display: flex; flex-direction: column; }
body.sb-b2b .sb-dialog .sb-mobile-nav > a:not(.sb-button) { display: block; padding-block: 15px; border-block-end: 1px solid var(--sb-border); text-decoration: none; }
body.sb-b2b .sb-dialog .sb-mobile-nav > a[aria-current="page"] { color: var(--sb-accent); font-weight: 600; }
body.sb-b2b .sb-dialog .sb-mobile-nav .sb-button { margin-block-start: 24px; }
@media (max-width: 560px) {
  body.sb-b2b .sb-dialog { padding: 22px; }
  body.sb-b2b .sb-dialog .sb-search-form { flex-direction: column; }
  body.sb-b2b .sb-dialog .sb-search-form input[type="search"] { flex: none; }
}

/* User-approved black TOPACIFY mark, shared by every page. */
body.sb-b2b .sb-header .tp-site-logo,
body.sb-b2b .sb-footer .tp-site-logo,
body.sb-b2b .sb-dialog .tp-site-logo {
  display: block;
  inline-size: 150px;
  block-size: auto;
  max-inline-size: 100%;
  margin: 0;
  object-fit: contain;
  filter: brightness(0);
}
body.sb-b2b .sb-footer .sb-wordmark.tp-footer-logo {
  display: inline-flex;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 8px 12px;
  background: #fcfaf6;
  border-radius: 2px;
  line-height: 1;
}
body.sb-b2b .sb-dialog .tp-site-logo { inline-size: 140px; }
@media (max-width: 767px) {
  body.sb-b2b .sb-header .tp-site-logo { inline-size: 140px; }
}
@media (max-width: 360px) {
  body.sb-b2b .sb-header .tp-site-logo { inline-size: 118px; }
}