/*
 * Shared shell contract for the approved Peptides Bio reference set.
 *
 * This file is presentation-only.  It intentionally leaves the PHP content,
 * links, translation hooks, metadata and structured data untouched.  It is
 * loaded after the legacy stylesheet and page-specific reference sheets so
 * the shared notice/footer do not inherit the old dark editorial experiment.
 */

:root {
  --shell-navy: #031534;
  --shell-ink: #0b2148;
  --shell-muted: #657590;
  --shell-blue: #145cf2;
  --shell-sky: #f2f6ff;
  --shell-line: #dbe4f1;
}

/* The legacy stylesheet paints the document root burgundy. During the
 * existing page-out fade the body briefly becomes transparent, exposing
 * that root color between routes. Keep the transition, but give it the same
 * white canvas as the approved shell so no burgundy flash appears. */
html {
  background: #fff !important;
}

body:not(.home) {
  background: #fff !important;
}

/* Research-use notice: keep the existing text and link, but give the bar the
   same blue, icon-led geometry shown in the approved desktop/mobile masters. */
.site-shell > .notice,
body > .notice,
.notice {
  position: relative !important;
  inset: auto !important;
  z-index: 120 !important;
  display: flex !important;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 9px max(24px, calc((100% - 1280px) / 2));
  overflow: hidden;
  background: var(--shell-blue) !important;
  border: 0 !important;
  color: #fff !important;
  text-align: left;
  font: 600 11px/16px Inter, Arial, sans-serif;
  letter-spacing: .01em;
}

.notice-leading {
  display: flex !important;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  color: inherit !important;
  white-space: normal;
}

.master-ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.notice-leading > .master-ui-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* Dashicons is not guaranteed to be enqueued on the public site.  Preserve
   the semantic span and draw the tiny information glyph with CSS instead. */
.notice-leading > .dashicons {
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.notice-leading > .dashicons::before {
  color: #fff;
  content: "i";
  font: 700 11px/16px Arial, sans-serif;
}

.notice-leading > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: inherit !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-more {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
}

.notice-more:hover,
.notice-more:focus-visible { color: #fff !important; text-decoration: underline; }

.notice-more > .dashicons {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.notice-more > .master-ui-icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

.notice-more > .dashicons::before {
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  color: #fff;
  content: "";
  transform: translate(-2px, 2px) rotate(45deg);
}

/* White information footer.  The contact column is retained when configured
   in the existing settings; no company data is removed or rewritten. */
.site-footer,
body.home .site-footer {
  width: 100%;
  margin: 0;
  padding: 48px 0 0 !important;
  border-top: 1px solid var(--shell-line) !important;
  background: #fff !important;
  color: var(--shell-muted) !important;
}

.site-footer .footer-grid {
  display: grid !important;
  width: min(1240px, calc(100% - 96px));
  max-width: 1240px;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: start;
  gap: clamp(28px, 3vw, 48px);
  grid-template-columns: minmax(250px, 1.28fr) repeat(3, minmax(120px, .76fr));
}

.site-footer .footer-grid.footer-grid--with-contact {
  grid-template-columns: minmax(240px, 1.22fr) repeat(3, minmax(116px, .7fr)) minmax(190px, 1fr);
}

.site-footer .footer-grid > div,
.site-footer .footer-contact {
  min-width: 0;
}

.site-footer .brand,
.site-footer .brand-name,
.site-footer h3,
.site-footer .footer-contact strong {
  color: var(--shell-ink) !important;
}

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-footer .brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  object-fit: contain;
}

.site-footer .brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}

.site-footer .footer-custom-copy,
.site-footer p {
  color: var(--shell-muted) !important;
  font-size: 13px;
  line-height: 1.62;
}

.site-footer .footer-grid > div:first-child > .footer-custom-copy {
  max-width: 320px;
  margin: 17px 0 0;
}

.site-footer h3 {
  margin: 3px 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.site-footer .footer-links {
  display: grid;
  gap: 9px;
}

.site-footer .footer-links a,
.site-footer .footer-contact,
.site-footer .footer-contact span,
.site-footer .footer-contact a {
  color: var(--shell-muted) !important;
  font-size: 13px;
  line-height: 1.55;
}

.site-footer .footer-links a,
.site-footer .footer-contact a { text-decoration: none; }

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible,
.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible {
  color: var(--shell-blue) !important;
}

.site-footer .footer-contact {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-top: 3px;
  font-style: normal;
}

.site-footer .footer-contact h3 { margin-bottom: 2px; }
.site-footer .footer-contact strong { font-size: 13px; font-weight: 700; }

/* The legal copy is one continuous navy band.  The two existing blocks remain
   separate in the DOM so translation hooks and settings still work, but their
   backgrounds and borders now join into the narrow master-style bar. */
.site-footer .site-research-notice {
  display: grid;
  width: min(1240px, calc(100% - 96px));
  max-width: 1240px;
  min-height: 0;
  margin: 40px auto 0 !important;
  padding: 12px 0 !important;
  align-items: center;
  gap: 20px;
  grid-template-columns: minmax(170px, .24fr) minmax(0, 1fr);
  border: 0 !important;
  background: var(--shell-navy) !important;
  box-shadow: 0 0 0 100vmax var(--shell-navy) !important;
  clip-path: inset(0 -100vmax) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 11px;
  line-height: 1.5;
}

.site-footer .site-research-notice strong {
  color: #fff !important;
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer .site-research-notice .footer-custom-copy {
  color: rgba(255,255,255,.76) !important;
  font-size: 11px;
  line-height: 1.5;
}

.site-footer .footer-bottom {
  display: flex;
  width: min(1240px, calc(100% - 96px));
  max-width: 1240px;
  min-height: 44px;
  margin: 0 auto !important;
  padding: 11px 0 !important;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  border: 0 !important;
  border-top: 1px solid rgba(185,201,227,.22) !important;
  background: var(--shell-navy) !important;
  box-shadow: 0 0 0 100vmax var(--shell-navy) !important;
  clip-path: inset(0 -100vmax) !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 11px;
  line-height: 1.45;
}

.site-footer .footer-bottom .footer-custom-copy,
.site-footer .footer-bottom > span { color: rgba(255,255,255,.72) !important; font-size: 11px; }
.site-footer .footer-bottom > span:first-child { order: 2; }
.site-footer .footer-bottom > span:last-child { order: 1; margin-right: auto; }

.back-to-top {
  border-color: #9ab6dc;
  background: var(--shell-navy);
  box-shadow: 0 10px 26px rgba(7,26,52,.22);
  color: #fff;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--shell-blue);
  background: var(--shell-blue);
  color: #fff;
}

@media (max-width: 980px) {
  .site-footer .footer-grid.footer-grid--with-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer .footer-grid--with-contact > div:first-child { grid-column: 1 / -1; }
  .site-footer .footer-grid--with-contact .footer-contact { grid-column: span 2; }
}

@media (max-width: 760px) {
  .notice {
    gap: 12px;
    min-height: 40px;
    padding: 9px 16px;
    font-size: 10px;
    line-height: 15px;
  }

  .notice-leading > span:last-child {
    white-space: normal;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .notice-more { font-size: 10px; }

  .site-footer { padding-top: 40px !important; }
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid--with-contact {
    width: min(100% - 32px, 560px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .site-footer .footer-grid > div:first-child { grid-column: 1 / -1; }
  .site-footer .footer-grid--with-contact .footer-contact { grid-column: 1 / -1; }
  .site-footer .site-research-notice,
  .site-footer .footer-bottom {
    width: min(100% - 32px, 560px);
  }

  .site-footer .site-research-notice {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 32px !important;
    padding: 12px 0 !important;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0 !important;
  }
}

/* Catalogue mobile guardrail.  This shared sheet loads after the catalogue
   layer, so a legacy sidebar width cannot win at narrow browser widths or
   under zoom.  It is presentation-only; filter controls and values remain
   unchanged. */
@media (max-width: 700px) {
  body:has(.page-hero-catalog) .catalog-shell,
  body:has(.page-hero-catalog) .catalog-tools,
  body:has(.page-hero-catalog) .catalog-tools label,
  body:has(.page-hero-catalog) .catalog-tools > button,
  body:has(.page-hero-catalog) .catalog-search-control,
  body:has(.page-hero-catalog) .catalog-tools input,
  body:has(.page-hero-catalog) .catalog-tools select,
  body:has(.page-hero-catalog) .catalog-clear {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body:has(.page-hero-catalog) .catalog-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  body:has(.page-hero-catalog) .catalog-tools {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Final master-scale adjustment: the supplied reference uses a compact mark
   beside the 17px wordmark.  Geometry only; navigation data remains intact. */
@media (min-width: 761px) {
  .site-header .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}

/* Mobile navigation: preserve the existing toggle and links, but keep the
 * three-line control above the old decorative pseudo-element.  The previous
 * white panel obscured the icon on navy product-page headers. */
@media (max-width: 760px) {
  .site-header .mobile-nav-toggle,
  body.home .site-header .mobile-nav-toggle {
    position: relative !important;
    isolation: isolate;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    cursor: pointer;
  }

  .site-header .mobile-nav-toggle::before,
  body.home .site-header .mobile-nav-toggle::before {
    z-index: 0;
    inset: 5px 0 !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,.04) !important;
    pointer-events: none;
  }

  .site-header .mobile-nav-toggle > span,
  body.home .site-header .mobile-nav-toggle > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .site-header .mobile-nav-toggle i,
  body.home .site-header .mobile-nav-toggle i {
    z-index: 1;
    width: 16px !important;
    color: currentColor !important;
  }

  .site-header .mobile-nav-toggle i,
  .site-header .mobile-nav-toggle i::before,
  .site-header .mobile-nav-toggle i::after,
  body.home .site-header .mobile-nav-toggle i,
  body.home .site-header .mobile-nav-toggle i::before,
  body.home .site-header .mobile-nav-toggle i::after {
    background: currentColor !important;
  }

  .site-header .main-nav,
  body.home .site-header .main-nav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 120 !important;
    width: min(300px, calc(100vw - 32px)) !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(159,188,242,.36) !important;
    border-radius: 4px !important;
    background: #061a3b !important;
    box-shadow: 0 16px 34px rgba(3,21,52,.28) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - 132px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .site-menu-open .site-header .main-nav,
  .site-menu-open body.home .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .site-header .main-nav > a,
  body.home .site-header .main-nav > a,
  .site-header .main-nav .quote-link,
  body.home .site-header .main-nav .quote-link {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 2px !important;
    color: #fff !important;
  }

  .site-header .main-nav > a:hover,
  .site-header .main-nav > a:focus-visible,
  body.home .site-header .main-nav > a:hover,
  body.home .site-header .main-nav > a:focus-visible {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid--with-contact {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 0;
  }

  .site-footer .footer-grid > div,
  .site-footer .footer-grid > div:not(:first-child),
  .site-footer .footer-contact {
    padding: 20px 0;
    border-top: 1px solid var(--shell-line);
  }

  .site-footer .footer-grid > div:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .site-footer .site-research-notice,
  .site-footer .footer-bottom { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer a,
  .notice-more,
  .back-to-top { transition: none !important; }
}

/* Static-page alignment: keep the existing page markup and policy/quote
   content intact, while moving these low-frequency pages into the approved
   white-surface / navy-heading / cobalt-action system. */
body.page-id-14 .page-hero,
body.privacy-policy .page-hero,
body.page-id-20 .page-hero {
  min-height: 312px;
  padding: 78px 0 60px;
  background: var(--shell-navy) !important;
  color: #fff;
}

body.page-id-14 .page-hero .content-wrap,
body.privacy-policy .page-hero .content-wrap,
body.page-id-20 .page-hero .content-wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

body.page-id-14 .page-hero .page-hero-copy,
body.privacy-policy .page-hero .page-hero-copy,
body.page-id-20 .page-hero .page-hero-copy {
  max-width: 760px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-id-14 .page-hero .eyebrow,
body.privacy-policy .page-hero .eyebrow,
body.page-id-20 .page-hero .eyebrow {
  margin-bottom: 16px;
  color: #a9c9ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

body.page-id-14 .page-hero h1,
body.privacy-policy .page-hero h1,
body.page-id-20 .page-hero h1 {
  max-width: 760px;
  color: #fff;
  font-family: Italiana, Georgia, serif;
  font-size: clamp(50px, 5.9vw, 78px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .98;
  text-shadow: none;
}

body.page-id-14 .page-hero p:not(.eyebrow),
body.privacy-policy .page-hero p:not(.eyebrow),
body.page-id-20 .page-hero p:not(.eyebrow) {
  max-width: 610px;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.65;
  text-shadow: none;
}

body.page-id-14 .page-hero-status,
body.privacy-policy .page-hero-status,
body.page-id-20 .page-hero-status {
  min-width: 188px;
  border: 1px solid rgba(169,201,255,.48);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  color: #dbeaff;
  box-shadow: none;
}

body.page-id-14 .page-hero-status b,
body.privacy-policy .page-hero-status b,
body.page-id-20 .page-hero-status b { color: #fff; }

body.page-id-14 .page-hero-status .status-dot,
body.privacy-policy .page-hero-status .status-dot,
body.page-id-20 .page-hero-status .status-dot { background: #76a7ff; box-shadow: none; }

body.page-id-14 .secondary-section,
body.privacy-policy .secondary-section,
body.page-id-20 .secondary-section {
  padding: 64px 0 92px;
  background: #fff !important;
  color: var(--shell-ink);
}

body.page-id-14 .secondary-section::before,
body.privacy-policy .secondary-section::before,
body.page-id-20 .secondary-section::before { display: none; }

body.page-id-14 .content-narrow { width: min(1040px, calc(100% - 64px)); }

body.privacy-policy .content-narrow,
body.page-id-20 .content-narrow { width: min(920px, calc(100% - 64px)); }

body.privacy-policy .content-narrow,
body.page-id-20 .content-narrow,
body.page-id-14 .content-narrow { color: var(--shell-ink); }

body.privacy-policy .content-narrow > p:first-child,
body.page-id-20 .content-narrow > p:first-child,
body.page-id-14 .content-narrow > p:first-child {
  margin: 0 0 42px;
  padding: 24px 28px;
  border: 1px solid var(--shell-line);
  border-left: 3px solid var(--shell-blue);
  background: var(--shell-sky);
  color: #1c3967;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.68;
}

body.privacy-policy .content-narrow h2,
body.page-id-20 .content-narrow h2 {
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--shell-line);
  color: var(--shell-ink);
  font-family: Italiana, Georgia, serif;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}

body.privacy-policy .content-narrow p,
body.privacy-policy .content-narrow li,
body.page-id-20 .content-narrow p,
body.page-id-20 .content-narrow li {
  color: #40546f;
  font-size: 15px;
  line-height: 1.75;
}

body.privacy-policy .content-narrow ul,
body.privacy-policy .content-narrow ol,
body.page-id-20 .content-narrow ul,
body.page-id-20 .content-narrow ol { padding-left: 22px; }

body.privacy-policy .content-narrow a,
body.page-id-20 .content-narrow a { color: var(--shell-blue); text-underline-offset: 3px; }

body.page-id-14 .quote-shell {
  overflow: hidden;
  border: 1px solid var(--shell-line);
  background: #fff;
  box-shadow: 0 16px 36px rgba(11,33,72,.07);
}

body.page-id-14 .quote-workspace-head {
  padding: 36px 48px;
  border: 0;
  background: var(--shell-navy);
  color: #fff;
}

body.page-id-14 .quote-workspace-head .drawer-kicker,
body.page-id-14 .quote-workspace-head p { color: #a9c9ff; }

body.page-id-14 .quote-workspace-head h2 {
  color: #fff;
  font-family: Italiana, Georgia, serif;
  font-size: clamp(42px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

body.page-id-14 .quote-workspace-head > div:first-child > p:last-child,
body.page-id-14 .quote-workspace-head .quote-workspace-copy { color: rgba(255,255,255,.76); }

body.page-id-14 .quote-workspace-count {
  border-color: rgba(169,201,255,.38);
  color: #dbeaff;
}

body.page-id-14 .quote-workspace-count strong { color: #fff; }

body.page-id-14 .quote-empty {
  padding: clamp(56px, 7vw, 86px) 24px;
  border: 0;
  border-top: 1px solid var(--shell-line);
  background: var(--shell-sky);
  box-shadow: none;
}

body.page-id-14 .quote-empty-mark {
  border-color: #9bc1ff;
  background: #fff;
}

body.page-id-14 .quote-empty h3 {
  color: var(--shell-ink);
  font-family: Italiana, Georgia, serif;
  font-size: clamp(33px, 4vw, 48px);
  font-weight: 400;
}

body.page-id-14 .quote-empty p,
body.page-id-14 .quote-status { color: #526782; }

body.page-id-14 .quote-records,
body.page-id-14 .quote-notes-panel,
body.page-id-14 .lead-capture {
  border-color: var(--shell-line);
  background: #fff;
  box-shadow: none;
}

body.page-id-14 .quote-notes-panel,
body.page-id-14 .lead-capture { background: var(--shell-sky); }

body.page-id-14 .quote-notes-panel h3,
body.page-id-14 .lead-capture h3 { color: var(--shell-ink); }

body.page-id-14 .quote-notes-panel p,
body.page-id-14 .lead-capture p,
body.page-id-14 .lead-form label,
body.page-id-14 .lead-form-status { color: #526782; }

body.page-id-14 .quote-table { border-color: var(--shell-line); background: #fff; }

body.page-id-14 .quote-table th,
body.page-id-14 .quote-table td { border-color: var(--shell-line); color: #425671; }

body.page-id-14 .quote-table th { color: #5b6f8b; }

body.page-id-14 .lead-form input,
body.page-id-14 .lead-form textarea,
body.page-id-14 .quote-form input,
body.page-id-14 .quote-form textarea {
  border-color: #cbd9eb;
  border-radius: 2px;
  background: #fff;
  color: var(--shell-ink);
}

body.page-id-14 .lead-form input:focus,
body.page-id-14 .lead-form textarea:focus,
body.page-id-14 .quote-form input:focus,
body.page-id-14 .quote-form textarea:focus {
  border-color: var(--shell-blue);
  box-shadow: 0 0 0 3px rgba(20,92,242,.14);
}

body.page-id-14 .button-primary,
body.page-id-14 .quote-empty .button-dark,
body.page-id-14 .quote-actions .button-dark {
  border-color: var(--shell-blue);
  background: var(--shell-blue);
  color: #fff;
}

body.page-id-14 .button-primary:hover,
body.page-id-14 .button-primary:focus-visible,
body.page-id-14 .quote-empty .button-dark:hover,
body.page-id-14 .quote-empty .button-dark:focus-visible,
body.page-id-14 .quote-actions .button-dark:hover,
body.page-id-14 .quote-actions .button-dark:focus-visible {
  border-color: #0e48be;
  background: #0e48be;
  color: #fff;
}

body.page-id-14 .button-light,
body.page-id-14 .quote-actions .button-light {
  border-color: #b8c9df;
  background: #fff;
  color: var(--shell-ink);
}

body.page-id-14 .button-light:hover,
body.page-id-14 .button-light:focus-visible,
body.page-id-14 .quote-actions .button-light:hover,
body.page-id-14 .quote-actions .button-light:focus-visible {
  border-color: var(--shell-blue);
  background: var(--shell-sky);
  color: var(--shell-blue);
}

body.page-id-14 .quote-empty .button,
body.page-id-14 .quote-actions .button,
body.page-id-14 .lead-form-actions .button { min-height: 44px; }

@media (max-width: 720px) {
  body.page-id-14 .page-hero,
  body.privacy-policy .page-hero,
  body.page-id-20 .page-hero {
    min-height: 254px;
    padding: 56px 0 46px;
  }

  body.page-id-14 .page-hero .content-wrap,
  body.privacy-policy .page-hero .content-wrap,
  body.page-id-20 .page-hero .content-wrap {
    align-items: start;
    flex-direction: column;
    gap: 22px;
  }

  body.page-id-14 .page-hero h1,
  body.privacy-policy .page-hero h1,
  body.page-id-20 .page-hero h1 { font-size: clamp(42px, 13vw, 54px); }

  body.page-id-14 .page-hero-status,
  body.privacy-policy .page-hero-status,
  body.page-id-20 .page-hero-status { width: 100%; min-width: 0; }

  body.page-id-14 .secondary-section,
  body.privacy-policy .secondary-section,
  body.page-id-20 .secondary-section { padding: 38px 0 64px; }

  body.page-id-14 .content-narrow,
  body.privacy-policy .content-narrow,
  body.page-id-20 .content-narrow { width: calc(100% - 32px); }

  body.privacy-policy .content-narrow > p:first-child,
  body.page-id-20 .content-narrow > p:first-child,
  body.page-id-14 .content-narrow > p:first-child {
    margin-bottom: 32px;
    padding: 19px 18px;
    font-size: 14px;
  }

  body.privacy-policy .content-narrow h2,
  body.page-id-20 .content-narrow h2 {
    margin-top: 36px;
    padding-top: 22px;
    font-size: clamp(29px, 9vw, 36px);
  }

  body.privacy-policy .content-narrow p,
  body.privacy-policy .content-narrow li,
  body.page-id-20 .content-narrow p,
  body.page-id-20 .content-narrow li { font-size: 14px; }

  body.page-id-14 .quote-workspace-head { padding: 28px 20px; }
  body.page-id-14 .quote-workspace-head h2 { font-size: 42px; }
  body.page-id-14 .quote-workspace-count { width: 100%; }
  body.page-id-14 .quote-empty { padding: 54px 20px; }
  body.page-id-14 .quote-records { overflow-x: auto; }
  body.page-id-14 .quote-notes-panel,
  body.page-id-14 .lead-capture { padding: 24px 20px; }
}

body.privacy-policy .content-narrow > .wp-block-pullquote,
body.page-id-20 .content-narrow > .wp-block-pullquote {
  margin: 0 0 42px;
  padding: 25px 28px;
  border: 1px solid var(--shell-line);
  border-left: 3px solid var(--shell-blue);
  background: var(--shell-sky);
  text-align: left;
}

body.privacy-policy .content-narrow > .wp-block-pullquote blockquote,
body.page-id-20 .content-narrow > .wp-block-pullquote blockquote { margin: 0; }

body.privacy-policy .content-narrow > .wp-block-pullquote p,
body.page-id-20 .content-narrow > .wp-block-pullquote p {
  margin: 0;
  color: #1c3967;
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.68;
}

@media (max-width: 720px) {
  body.privacy-policy .content-narrow > .wp-block-pullquote,
  body.page-id-20 .content-narrow > .wp-block-pullquote {
    margin-bottom: 32px;
    padding: 19px 18px;
  }

  body.privacy-policy .content-narrow > .wp-block-pullquote p,
  body.page-id-20 .content-narrow > .wp-block-pullquote p { font-size: 14px; }
}

/*
 * Approved-master shell calibration.
 *
 * The content, navigation URLs, translation controls and all SEO-bearing PHP
 * stay untouched.  This final presentation-only layer deliberately wins over
 * the older experimental header rules in style.css.
 */
.site-shell > .notice,
body > .notice,
.notice {
  min-height: 36px;
  height: 36px;
  padding: 0 max(54px, calc((100% - 1280px) / 2));
  gap: 18px;
  font: 600 10px/16px Inter, Arial, sans-serif;
}

.notice-leading { gap: 8px; }
.notice-leading > .master-ui-icon,
.notice-leading > .dashicons {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px;
}
.notice-leading > .dashicons::before { font-size: 10px; line-height: 14px; }
.notice-more { gap: 6px; font-size: 10px; }

.site-header {
  min-height: 68px !important;
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid #dbe4f1 !important;
  box-shadow: none !important;
  color: var(--shell-ink) !important;
}

.site-header .nav-wrap,
body.home .site-header .nav-wrap {
  display: flex !important;
  width: min(1280px, calc(100% - 108px)) !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(12px, 1.35vw, 22px) !important;
}

.site-header .brand,
body.home .site-header .brand {
  display: inline-flex !important;
  min-width: 0;
  flex: 0 0 auto !important;
  align-items: center;
  gap: 8px;
  color: var(--shell-ink) !important;
}

.site-header .brand-mark,
body.home .site-header .brand-mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
}

.site-header .brand-name,
body.home .site-header .brand-name {
  color: var(--shell-ink) !important;
  font-family: Manrope, Inter, Arial, sans-serif;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}

@media (min-width: 761px) {
  .site-header .mobile-nav-toggle { display: none !important; }

  .site-header .main-nav,
  body.home .site-header .main-nav {
    display: flex !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: clamp(12px, 1.35vw, 20px) !important;
    overflow: visible !important;
    font-size: clamp(10px, .85vw, 12px) !important;
  }

  .site-header .main-nav > a,
  body.home .site-header .main-nav > a {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 0 !important;
    align-items: center;
    color: var(--shell-ink) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
}

.site-header .main-nav > a:hover,
.site-header .main-nav > a:focus-visible { color: var(--shell-blue) !important; }

.site-header .quote-link,
body.home .site-header .quote-link {
  display: inline-flex !important;
  box-sizing: border-box;
  width: 104px;
  min-width: 104px !important;
  height: 38px;
  min-height: 38px !important;
  padding: 0 10px !important;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  border: 1px solid var(--shell-blue) !important;
  border-radius: 4px !important;
  background: var(--shell-blue) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: clamp(9px, .74vw, 11px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.site-header .quote-link:hover,
.site-header .quote-link:focus-visible {
  border-color: #0e48be !important;
  background: #0e48be !important;
  color: #fff !important;
}

.site-header .quote-count {
  display: inline-grid;
  width: 17px;
  height: 17px;
  min-width: 17px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff !important;
  font-size: 9px;
  line-height: 1;
}

.site-header .language-switcher,
body.home .site-header .language-switcher {
  display: inline-flex !important;
  box-sizing: border-box;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 7px 0 8px !important;
  align-items: center;
  gap: 5px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--shell-ink) !important;
}

.site-header .language-switcher-icon,
body.home .site-header .language-switcher-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  color: currentColor !important;
}

.site-header .language-switcher select,
body.home .site-header .language-switcher select {
  box-sizing: border-box;
  width: calc(100% - 19px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 14px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: currentColor !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* The selected masters use a navy masthead on the brand-led pages, and a
   white masthead for the product catalogue and the lower-frequency pages. */
body.home .site-header,
body.page-id-15 .site-header,
body.single-product .site-header,
body.post-type-archive-pl_guide .site-header {
  background: var(--shell-navy) !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

body.home .site-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  pointer-events: auto !important;
}

body.home .site-header .main-nav > a,
body.page-id-15 .site-header .main-nav > a,
body.single-product .site-header .main-nav > a,
body.post-type-archive-pl_guide .site-header .main-nav > a,
body.home .site-header .brand,
body.home .site-header .brand-name,
body.page-id-15 .site-header .brand,
body.page-id-15 .site-header .brand-name,
body.single-product .site-header .brand,
body.single-product .site-header .brand-name,
body.post-type-archive-pl_guide .site-header .brand,
body.post-type-archive-pl_guide .site-header .brand-name {
  color: #fff !important;
}

body.home .site-header .language-switcher,
body.page-id-15 .site-header .language-switcher,
body.single-product .site-header .language-switcher,
body.post-type-archive-pl_guide .site-header .language-switcher {
  border-color: rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

body.home .site-header .language-switcher select,
body.page-id-15 .site-header .language-switcher select,
body.single-product .site-header .language-switcher select,
body.post-type-archive-pl_guide .site-header .language-switcher select { color: #fff !important; }

/* The white footer and its navy legal bar share the same 1280px master grid
   as the masthead.  Existing company/contact text remains in place. */
.site-footer .footer-grid,
.site-footer .site-research-notice,
.site-footer .footer-bottom {
  width: min(1280px, calc(100% - 108px)) !important;
  max-width: 1280px !important;
}

@media (max-width: 760px) {
  .site-shell > .notice,
  body > .notice,
  .notice {
    min-height: 44px;
    height: auto;
    padding: 7px 16px;
    gap: 10px;
    font-size: 9px;
    line-height: 14px;
  }

  .notice-leading { gap: 7px; }
  .notice-leading > span:last-child { white-space: normal; }
  .notice-more { gap: 4px; font-size: 9px; }

  .site-header,
  body.home .site-header {
    min-height: 64px !important;
  }

  .site-header .nav-wrap,
  body.home .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    height: 64px !important;
    min-height: 64px !important;
    gap: 8px !important;
  }

  .site-header .brand-mark,
  body.home .site-header .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .site-header .brand-name,
  body.home .site-header .brand-name { font-size: 15px !important; }

  .site-header .mobile-nav-toggle,
  body.home .site-header .mobile-nav-toggle {
    display: inline-flex !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
  }

  .site-footer .footer-grid,
  .site-footer .site-research-notice,
  .site-footer .footer-bottom {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
  }
}

/*
 * Approved master rhythm lock (presentation only).
 * The reference screens use a compact 36/68 shell, a 1280px content rail,
 * and small rectangular controls.  Keep page-specific colour variants in
 * their own sheets; this block only fixes shared geometry and type rhythm.
 */
:root {
  --shell-container: 1280px;
  --shell-gutter: 48px;
}

.notice {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 max(24px, calc((100% - var(--shell-container)) / 2)) !important;
  align-items: center !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.site-header {
  height: 68px !important;
  min-height: 68px !important;
}

.site-header .nav-wrap,
body.home .site-header .nav-wrap {
  width: min(var(--shell-container), calc(100% - (var(--shell-gutter) * 2))) !important;
  height: 68px !important;
  min-height: 68px !important;
  margin-inline: auto !important;
  gap: 28px !important;
}

.site-header .brand {
  flex: 0 0 auto;
  gap: 10px !important;
}

.site-header .brand-mark {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 8px !important;
}

.site-header .brand-name {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}

.site-header .main-nav {
  height: 68px !important;
  margin-left: auto !important;
  gap: clamp(18px, 2vw, 28px) !important;
  align-items: stretch !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.site-header .main-nav > a {
  min-height: 68px !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative;
  white-space: nowrap;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.site-header .main-nav > a::after {
  bottom: 0 !important;
  height: 2px !important;
}

.site-header .quote-link {
  min-width: 104px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 3px !important;
  align-self: center !important;
  justify-content: center !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.site-header .quote-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}

.site-header .language-switcher {
  width: 108px !important;
  min-width: 108px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  align-self: center !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
}

.site-header .language-switcher select {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.site-header .language-switcher .language-switcher-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

/* Large desktop screens made the persistent navigation and utility copy read
 * smaller than the approved content scale. Increase only at wide viewports so
 * the compact tablet navigation and mobile menu retain their existing fit. */
@media (min-width:1200px) {
  .site-notice { font-size:12px !important; }
  .site-header .main-nav { font-size:13px !important; }
  .site-header .quote-link,
  .site-header .language-switcher select { font-size:12px !important; }
}

.site-footer .footer-grid,
.site-footer .site-research-notice,
.site-footer .footer-bottom {
  width: min(var(--shell-container), calc(100% - (var(--shell-gutter) * 2))) !important;
  max-width: var(--shell-container) !important;
}

@media (max-width: 760px) {
  .notice {
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 16px !important;
    font-size: 10px !important;
  }

  .site-header,
  .site-header .nav-wrap,
  body.home .site-header .nav-wrap {
    height: 64px !important;
    min-height: 64px !important;
  }

  .site-header .nav-wrap,
  body.home .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    gap: 12px !important;
  }

  .site-header .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .site-header .brand-name { font-size: 16px !important; }

  .site-header .main-nav {
    height: auto !important;
    gap: 2px !important;
  }

  .site-header .main-nav > a { min-height: 38px !important; }

  .site-header .quote-link {
    min-width: 96px !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  .site-header .language-switcher {
    width: 104px !important;
    min-width: 104px !important;
    height: 38px !important;
  }

  .site-footer .footer-grid,
  .site-footer .site-research-notice,
  .site-footer .footer-bottom {
    width: calc(100% - 32px) !important;
  }
}

/* Final precedence: match the compact reference logo at desktop widths. */
@media (min-width: 761px) {
  .site-header .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}

/* Final mobile-menu precedence.  The legacy stylesheet hides every link after
 * Home with a more specific selector below 820px; reopen those same existing
 * links only while the menu is expanded. */
@media (max-width: 760px) {
  html.site-menu-open .site-header .main-nav {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(38px, auto) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - 132px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.site-menu-open .site-header .main-nav > a,
  html.site-menu-open .site-header .main-nav > a:not(:first-child) {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
  }
}

/* The quote label is localized.  A fixed 104px desktop button clips the
   Spanish label (and can overlap the preceding navigation item), so preserve
   the master minimum while allowing the existing label/count to size itself. */
@media (min-width: 761px) {
  .site-header .quote-link,
  body.home .site-header .quote-link {
    width: auto !important;
    min-width: 104px !important;
  }
}

/* These pages use the light master masthead.  The shared mobile toggle was
   forced white for the navy page variants, which made the same control
   disappear against a white header.  Keep the existing menu behavior and
   switch only its contrast treatment on known light-header surfaces. */
@media (max-width: 760px) {
  body.woocommerce-shop .site-header .mobile-nav-toggle,
  body:has(.contact-brief-wrap) .site-header .mobile-nav-toggle,
  body:has(main.faq-page) .site-header .mobile-nav-toggle,
  body:has(.quote-shell) .site-header .mobile-nav-toggle,
  body:has(main.refund-returns-page) .site-header .mobile-nav-toggle,
  body:has(main.research-guide-page) .site-header .mobile-nav-toggle {
    color: var(--shell-ink) !important;
  }

  body.woocommerce-shop .site-header .mobile-nav-toggle::before,
  body:has(.contact-brief-wrap) .site-header .mobile-nav-toggle::before,
  body:has(main.faq-page) .site-header .mobile-nav-toggle::before,
  body:has(.quote-shell) .site-header .mobile-nav-toggle::before,
  body:has(main.refund-returns-page) .site-header .mobile-nav-toggle::before,
  body:has(main.research-guide-page) .site-header .mobile-nav-toggle::before {
    border-color: rgba(11, 33, 72, .26) !important;
    background: rgba(11, 33, 72, .03) !important;
  }

  /* Light-page header rules correctly use navy links while the header is
     closed, but those rules must not leak into the navy mobile flyout.
     This affects presentation only: the existing links, routes and menu
     interaction stay exactly as they are. */
  html.site-menu-open .site-header .main-nav > a,
  html.site-menu-open .site-header .main-nav > a:first-child,
  html.site-menu-open .site-header .main-nav > a:not(:first-child),
  html.site-menu-open .site-header .main-nav > a:hover,
  html.site-menu-open .site-header .main-nav > a:focus-visible {
    color: #fff !important;
  }
}

/* Our navy three-line icon uses an important background for contrast; remove
 * only the centre stroke when the existing toggle switches to its close state. */
@media (max-width: 760px) {
  html.site-menu-open .site-header .mobile-nav-toggle i,
  html.site-menu-open body.home .site-header .mobile-nav-toggle i {
    background: transparent !important;
  }
}

/* Refund-and-returns is WordPress-managed policy copy.  Keep the stored
 * heading structure and content untouched, but give this one route the same
 * approved light policy surface as the other static records.  The semantic
 * page hook is intentionally based on its stable slug instead of a database
 * page ID, so the visual treatment survives a local-to-production migration. */
main.refund-returns-page {
  background: #fff !important;
  color: var(--shell-ink);
}

main.refund-returns-page .page-hero {
  min-height: 312px;
  padding: 78px 0 60px;
  background: var(--shell-navy) !important;
  color: #fff;
}

main.refund-returns-page .page-hero .content-wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

main.refund-returns-page .page-hero .page-hero-copy {
  max-width: 760px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

main.refund-returns-page .page-hero .eyebrow {
  margin-bottom: 16px;
  color: #a9c9ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

main.refund-returns-page .page-hero h1 {
  max-width: 760px;
  color: #fff;
  font-family: Italiana, Georgia, serif;
  font-size: clamp(50px, 5.9vw, 78px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .98;
  text-shadow: none;
}

main.refund-returns-page .page-hero-status {
  min-width: 188px;
  border: 1px solid rgba(169,201,255,.48);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  color: #dbeaff;
  box-shadow: none;
}

main.refund-returns-page .page-hero-status b { color: #fff; }

main.refund-returns-page .page-hero-status .status-dot {
  background: #76a7ff;
  box-shadow: none;
}

main.refund-returns-page .secondary-section {
  padding: 64px 0 92px;
  background: #fff !important;
  color: var(--shell-ink);
}

main.refund-returns-page .secondary-section::before { display: none; }

main.refund-returns-page .content-narrow {
  width: min(920px, calc(100% - 64px));
  color: var(--shell-ink);
}

main.refund-returns-page .content-narrow > p:first-child {
  margin: 0 0 42px;
  padding: 24px 28px;
  border: 1px solid var(--shell-line);
  border-left: 3px solid var(--shell-blue);
  background: var(--shell-sky);
  color: #1c3967;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.68;
}

main.refund-returns-page .content-narrow h2 {
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--shell-line);
  color: var(--shell-ink);
  font-family: Italiana, Georgia, serif;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}

main.refund-returns-page .content-narrow h3 {
  margin: 26px 0 10px;
  color: #1c3967;
  font-family: Manrope, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

main.refund-returns-page .content-narrow p,
main.refund-returns-page .content-narrow li {
  color: #40546f;
  font-size: 16px;
  line-height: 1.75;
}

main.refund-returns-page .content-narrow ul,
main.refund-returns-page .content-narrow ol { padding-left: 22px; }

main.refund-returns-page .content-narrow li::marker { color: var(--shell-blue); }

main.refund-returns-page .content-narrow a {
  color: var(--shell-blue);
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  main.refund-returns-page .page-hero {
    min-height: 254px;
    padding: 56px 0 46px;
  }

  main.refund-returns-page .page-hero .content-wrap {
    align-items: start;
    flex-direction: column;
    gap: 22px;
  }

  main.refund-returns-page .page-hero h1 { font-size: clamp(42px, 13vw, 54px); }

  main.refund-returns-page .page-hero-status {
    width: 100%;
    min-width: 0;
  }

  main.refund-returns-page .secondary-section { padding: 38px 0 64px; }

  main.refund-returns-page .content-narrow { width: calc(100% - 32px); }

  main.refund-returns-page .content-narrow > p:first-child {
    margin-bottom: 32px;
    padding: 19px 18px;
    font-size: 16px;
  }

  main.refund-returns-page .content-narrow h2 {
    margin-top: 36px;
    padding-top: 22px;
    font-size: clamp(29px, 9vw, 36px);
  }

  main.refund-returns-page .content-narrow h3 { font-size: 17px; }
  main.refund-returns-page .content-narrow p,
  main.refund-returns-page .content-narrow li { font-size: 16px; }
}

/* Quote-list presentation uses a slug-derived hook so the existing empty,
 * populated and form states keep their master colors after database/page-ID
 * changes.  The inquiry data, button routes and JavaScript state are not
 * altered here. */
main.quote-page .quote-shell {
  color: var(--shell-ink);
}

main.quote-page .quote-empty {
  padding: clamp(48px, 5vw, 68px) 24px;
  color: var(--shell-ink);
}

/* The quote script controls empty/populated state with the native `hidden`
 * attribute.  A legacy `.quote-empty { display:grid }` rule otherwise wins
 * over the browser default and leaves the empty panel visible behind a real
 * quote list.  Keep the existing markup and state logic; only honor it. */
main.quote-page [data-quote-empty][hidden],
main.quote-page [data-quote-content][hidden] {
  display: none !important;
}

/* Populated quote lists remain a light, readable record surface.  These
 * selectors deliberately override only legacy dark-editorial colors that
 * were still attached to populated rows and lead-capture copy. */
main.quote-page .quote-workspace-body {
  border-color: var(--shell-line);
  background: #fff;
}

main.quote-page .quote-shell .quote-table td:first-child strong {
  color: var(--shell-ink);
}

main.quote-page .quote-shell .quote-table input[type="number"] {
  border-color: #cbd9eb;
  background: #fff;
  color: var(--shell-ink);
}

main.quote-page .quote-shell .lead-capture {
  border-color: var(--shell-line);
  background: var(--shell-sky);
  color: var(--shell-ink);
}

main.quote-page .quote-shell .lead-capture h3,
main.quote-page .quote-shell .lead-capture label {
  color: var(--shell-ink);
}

main.quote-page .quote-shell .lead-capture p {
  /* `--shell-muted` falls just below AA on the pale-blue panel. */
  color: #5a6a85;
}

main.quote-page .quote-actions {
  border-color: var(--shell-navy);
  background: var(--shell-navy);
}

main.quote-page .quote-status {
  color: rgba(255,255,255,.78);
}

main.quote-page .quote-empty-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-color: #9bc1ff;
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
}

main.quote-page .quote-empty-mark::before {
  position: absolute;
  width: 14px;
  height: 18px;
  border: 1.5px solid var(--shell-blue);
  border-radius: 1px;
  content: "";
}

main.quote-page .quote-empty-mark::after {
  position: absolute;
  width: 8px;
  height: 1.5px;
  background: var(--shell-blue);
  box-shadow: 0 4px 0 var(--shell-blue);
  content: "";
  transform: translateY(2px);
}

main.quote-page .quote-empty .button-dark {
  border-color: var(--shell-blue) !important;
  background: var(--shell-blue) !important;
  color: #fff !important;
}

main.quote-page .quote-empty .button-dark:hover,
main.quote-page .quote-empty .button-dark:focus-visible {
  border-color: #0e48be !important;
  background: #0e48be !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  main.quote-page .quote-empty { padding: 42px 20px; }
}

/* On a phone, the desktop quote table clipped quantity, price and removal
 * controls outside its fixed-width scroll area. Keep the same table markup
 * and JS state, but present each selected material as a readable record. */
@media (max-width: 720px) {
  main.quote-page .quote-records { overflow: visible; }
  main.quote-page .quote-shell .quote-table { width: 100%; min-width: 0; border-collapse: collapse; }
  main.quote-page .quote-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  main.quote-page .quote-table,
  main.quote-page .quote-table tbody,
  main.quote-page .quote-table tr,
  main.quote-page .quote-table td { display: block; width: 100%; box-sizing: border-box; }
  main.quote-page .quote-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 18px 20px;
    border: 0;
    border-bottom: 1px solid var(--shell-line);
  }
  main.quote-page .quote-table td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px 0 !important;
    border: 0 !important;
    color: var(--shell-ink) !important;
    font-size: 14px !important;
    line-height: 1.4;
  }
  main.quote-page .quote-table td::before {
    content: attr(data-quote-label);
    color: #5a6a85;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  main.quote-page .quote-table td:nth-child(1),
  main.quote-page .quote-table td:nth-child(2),
  main.quote-page .quote-table td:nth-child(5) { grid-column: 1 / -1; }
  main.quote-page .quote-table td:first-child { padding-top: 0 !important; }
  main.quote-page .quote-table td:first-child strong { font-size: 16px; line-height: 1.3; }
  main.quote-page .quote-table td:nth-child(2) { color: #5a6a85 !important; overflow-wrap: anywhere; }
  main.quote-page .quote-table td:nth-child(3),
  main.quote-page .quote-table td:nth-child(4) { grid-template-columns: 54px minmax(0, 1fr); }
  main.quote-page .quote-table td:nth-child(3)::before,
  main.quote-page .quote-table td:nth-child(4)::before { font-size: 9px; }
  main.quote-page .quote-table td:nth-child(5) { grid-template-columns: 1fr; padding: 12px 0 0 !important; }
  main.quote-page .quote-table td:nth-child(5)::before { display: none; }
  main.quote-page .quote-table td:nth-child(5) .button {
    width: 100%;
    min-height: 42px;
    border: 1px solid #b7cbed !important;
    background: #fff !important;
    color: var(--shell-blue) !important;
    font-size: 13px;
  }
  main.quote-page .quote-table td:nth-child(5) .button:hover,
  main.quote-page .quote-table td:nth-child(5) .button:focus-visible { background: #f5f9ff !important; }
  main.quote-page .quote-table input[type="number"] { width: 100%; min-height: 42px; box-sizing: border-box; }
}

/* Keep the approved display face on the two secondary-page heroes whose
 * local rules were otherwise overridden by the legacy site-wide heading. */
html body:has(main.quote-page) .page-hero .page-hero-copy h1,
html body:has(main.refund-returns-page) .page-hero .page-hero-copy h1 {
  font-family: Italiana, Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
}

/* Preserve the existing notice text in the DOM, while using the approved
 * two-line compact treatment so its bar stays on the 44px shell rhythm. */
@media (max-width: 760px) {
  .notice-leading > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* The fixed auxiliary control overlaps cards and gallery media across
   * multiple mobile routes. Native scrolling remains available on phones. */
  .back-to-top { display: none !important; }
}

/* Keep the existing legal wording intact, but avoid sub-body-sized text on
 * phone screens where this notice is read at arm's length. */
@media (max-width: 720px) {
  html body:not(.home) .site-footer .site-research-notice,
  html body:not(.home) .site-footer .site-research-notice .footer-custom-copy,
  html body:not(.home) .site-footer .footer-bottom {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  html body:not(.home) .site-footer .site-research-notice strong {
    font-size: 11px !important;
  }
}

/* Shared quotation drawer parity.
 * This is intentionally presentation-only: quote items, URLs, translation
 * hooks, drawer behaviour and form fields keep their existing DOM/data. */
html body .quote-drawer {
  background: #fff !important;
  border-left-color: var(--shell-line) !important;
  box-shadow: -18px 0 44px rgba(11, 33, 72, .18) !important;
  color: var(--shell-ink) !important;
  font-family: Manrope, Arial, sans-serif !important;
}

html body .drawer-backdrop {
  background: rgba(3, 21, 52, .42) !important;
  backdrop-filter: blur(5px);
}

html body .quote-drawer-head,
html body .quote-drawer-foot {
  border-color: var(--shell-line) !important;
}

html body .drawer-kicker,
html body .drawer-full-link {
  color: var(--shell-blue) !important;
}

html body .quote-drawer h2 {
  color: var(--shell-ink) !important;
  font-family: Italiana, Georgia, serif !important;
  font-size: clamp(27px, 2vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
}

html body .drawer-close {
  display: inline-grid;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  place-items: center;
  border-color: #b9cae6 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--shell-ink) !important;
}

html body .drawer-close:hover,
html body .drawer-close:focus-visible {
  border-color: var(--shell-blue) !important;
  background: #f2f6ff !important;
  color: var(--shell-blue) !important;
  box-shadow: 0 0 0 3px rgba(20, 92, 242, .14) !important;
}

html body .drawer-empty,
html body .drawer-item {
  border-color: var(--shell-line) !important;
  background: #f7faff !important;
  color: var(--shell-muted) !important;
}

html body .drawer-item-copy strong,
html body .drawer-item-controls > span {
  color: var(--shell-ink) !important;
}

html body .drawer-item-copy small,
html body .drawer-status {
  color: var(--shell-muted) !important;
}

html body .drawer-item-controls > button:not(.drawer-remove),
html body .drawer-note textarea {
  border-color: #b9cae6 !important;
  background: #fff !important;
  color: var(--shell-ink) !important;
}

html body .drawer-note {
  color: #38527b !important;
}

html body .drawer-note textarea:focus-visible {
  border-color: var(--shell-blue) !important;
  box-shadow: 0 0 0 3px rgba(20, 92, 242, .14) !important;
}

html body .drawer-whatsapp {
  border-color: var(--shell-blue) !important;
  background: var(--shell-blue) !important;
  color: #fff !important;
}

html body .drawer-clear,
html body .drawer-remove {
  color: #a63f4c !important;
}

/* The quote drawer can appear on archive/product pages as well as the
 * dedicated quote page. Keep its buyer form on the same light shell in every
 * context; fields, validation hooks and submitted data remain unchanged. */
html body .quote-drawer .lead-capture {
  margin:22px 0 0 !important;
  padding:18px !important;
  border:1px solid var(--shell-line) !important;
  border-radius:4px !important;
  background:var(--shell-sky) !important;
  color:#526782 !important;
  box-shadow:none !important;
}

html body .quote-drawer .lead-capture-head h3 {
  color:var(--shell-ink) !important;
}

html body .quote-drawer .lead-capture-head p,
html body .quote-drawer .lead-form label,
html body .quote-drawer .lead-form-status {
  color:#526782 !important;
}

html body .quote-drawer .lead-form label em {
  color:var(--shell-blue) !important;
}

html body .quote-drawer .lead-form input,
html body .quote-drawer .lead-form textarea {
  border-color:#cbd9eb !important;
  border-radius:4px !important;
  background:#fff !important;
  color:var(--shell-ink) !important;
}

html body .quote-drawer .lead-form input:focus,
html body .quote-drawer .lead-form textarea:focus {
  border-color:var(--shell-blue) !important;
  box-shadow:0 0 0 3px rgba(20,92,242,.14) !important;
}

@media (max-width: 760px) {
  html body .site-header .main-nav .quote-link,
  html body.home .site-header .main-nav .quote-link {
    min-height: 44px !important;
    height: 44px !important;
  }

  /* The research-use notice remains the same existing text/link; it is just
   * large enough to read at the 390px reference viewport. */
  html body .notice {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  html body .notice-more {
    font-size: 10px !important;
  }
}

/* Legal-page heading parity. These selectors intentionally exceed the legacy
 * secondary-page rule without changing any page title, status text or markup. */
html body.page-id-14 .page-hero .page-hero-copy h1,
html body.privacy-policy .page-hero .page-hero-copy h1,
html body.page-id-20 .page-hero .page-hero-copy h1 {
  font-family: Italiana, Georgia, serif !important;
  font-weight: 400 !important;
}

html body.page-id-14 .page-hero-status,
html body.privacy-policy .page-hero-status,
html body.page-id-20 .page-hero-status {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body.page-id-14 .page-hero-status span,
html body.privacy-policy .page-hero-status span,
html body.page-id-20 .page-hero-status span,
html body.page-id-14 .page-hero-status b,
html body.privacy-policy .page-hero-status b,
html body.page-id-20 .page-hero-status b {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* The research-use notice keeps the same source text and destination. Keep
 * the approved 36px desktop / 44px compact rhythm: applying the mobile touch
 * target globally had made desktop bars 44px tall and let the compact bar
 * expand beyond its master height. */
@media (max-width: 760px) {
  html body .notice {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
  }

  html body .notice-more {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 4px;
  }
}

/* The supplied brand mark contains a white orbit. On the light master
 * masthead that orbit disappears into the page, so retain the same asset and
 * give it a compact navy field only on the header variants that are light by
 * default. This is presentation-only and keeps the existing brand link,
 * image source and accessibility attributes unchanged. */
html body:not(.home):not(.page-id-15):not(.single-product):not(.post-type-archive-pl_guide) .site-header .brand-mark {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Content-driven tablet menu: at 761–800px the translated navigation labels,
 * quote control and language picker cannot share one row without the first
 * link intruding into the brand mark. Reuse the existing mobile menu pattern
 * for this narrow band only; links, labels, destinations and crawlable source
 * markup remain unchanged. */
@media (min-width: 761px) and (max-width: 800px) {
  .site-header,
  body.home .site-header {
    min-height: 64px !important;
    height: 64px !important;
  }

  .site-header .nav-wrap,
  body.home .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    height: 64px !important;
    min-height: 64px !important;
    gap: 8px !important;
  }

  .site-header .brand-mark,
  body.home .site-header .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .site-header .brand-name,
  body.home .site-header .brand-name { font-size: 16px !important; }

  .site-header .mobile-nav-toggle,
  body.home .site-header .mobile-nav-toggle {
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .main-nav,
  body.home .site-header .main-nav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 120 !important;
    width: min(286px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 4px !important;
    background: rgba(3, 26, 67, .98) !important;
    box-shadow: 0 18px 38px rgba(4, 18, 45, .24) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.site-menu-open .site-header .main-nav,
  html.site-menu-open body.home .site-header .main-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    max-height: calc(100svh - 132px) !important;
  }

  html.site-menu-open .site-header .main-nav > a,
  html.site-menu-open body.home .site-header .main-nav > a,
  html.site-menu-open .site-header .main-nav .quote-link,
  html.site-menu-open body.home .site-header .main-nav .quote-link {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    color: #fff !important;
  }

  .site-header .mobile-nav-toggle,
  body.home .site-header .mobile-nav-toggle { color: #fff !important; }
}

/* Last-cascade mobile catalogue guard. Keep every filter label and control on
   the same inset rail even when another page sheet or zoom rule loads later. */
@media (max-width: 700px) {
  html body:has(.page-hero-catalog) .catalog-tools {
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  html body:has(.page-hero-catalog) .catalog-tools label,
  html body:has(.page-hero-catalog) .catalog-tools label > span:first-child,
  html body:has(.page-hero-catalog) .catalog-search-control,
  html body:has(.page-hero-catalog) .catalog-tools input,
  html body:has(.page-hero-catalog) .catalog-tools select,
  html body:has(.page-hero-catalog) .catalog-clear {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* A browser zoom level or device scale can leave a physically narrow page with
   a CSS viewport above 700px. Keep the catalogue controls in the single-column
   flow through 900px so that narrow screenshots never expose the desktop
   sidebar. Product records, URLs, and crawlable metadata are unchanged. */
@media (max-width: 900px) {
  html body:has(.page-hero-catalog) .catalog-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body:has(.page-hero-catalog) .catalog-tools {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 24px !important;
    border: 1px solid var(--catalog-rule) !important;
  }

  html body:has(.page-hero-catalog) .catalog-tools label,
  html body:has(.page-hero-catalog) .catalog-tools label > span:first-child,
  html body:has(.page-hero-catalog) .catalog-search-control,
  html body:has(.page-hero-catalog) .catalog-tools input,
  html body:has(.page-hero-catalog) .catalog-tools select,
  html body:has(.page-hero-catalog) .catalog-clear {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body:has(.page-hero-catalog) .catalog-result {
    margin: 16px 0 8px !important;
  }

  html body:has(.page-hero-catalog) .product-grid.peptide-product-grid {
    grid-column: auto !important;
  }

  html body:has(.page-hero-catalog) .catalog-empty {
    grid-column: auto !important;
  }
}