/* Sub50 Research Labs 2026 design (from Sub50-Research-Shareable.html), classes prefixed s50- and scoped to html.s50-research */

html.s50-research {
  --ink: #141522;
  --muted: #6f7280;
  --line: #e7e9ef;
  --soft: #f6f7fb;
  --soft-blue: #eef2ff;
  --blue: #5274e5;
  --blue-dark: #3e5fc9;
  --navy: #070b1a;
  --white: #ffffff;
  --shell: 1180px;
  --shadow: 0 16px 45px rgb(24 35 65 / 8%);
}

.s50, .s50 * { box-sizing: border-box; }

html.s50-research { scroll-behavior: smooth; }

html.s50-research body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* the wrapper repeats the body typography: the base css puts Arial on every div, and the mirror's
   WordPress css sets the root font to 10px (its pages need it), so the sizes here are in px, not rem */
.s50 {
  color: var(--ink);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body.menu-open { overflow: hidden; }

.s50 img { display: block; max-width: 100%; }
.s50 a { color: inherit; text-decoration: none; }
.s50 button, .s50 input { font: inherit; }
.s50 button { cursor: pointer; }

.s50-shell {
  width: min(var(--shell), calc(100% - 64px));
  margin-inline: auto;
}

.s50-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s50-skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.s50-skip-link:focus { transform: translateY(0); }

.s50-site-header {
  position: relative;
  z-index: 20;
  background: var(--white);
}

.s50-header-primary {
  min-height: 100px;
  display: grid;
  grid-template-columns: 240px minmax(230px, 1fr) auto auto;
  gap: 34px;
  align-items: center;
}

.s50-brand { display: inline-flex; align-items: center; }
.s50-brand img { width: 218px; max-height: 58px; object-fit: contain; object-position: left center; }

.s50-quick-search {
  max-width: 320px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: #f7f8fb;
  border: 1px solid #f0f1f5;
  border-radius: 999px;
}

.s50-quick-search svg,
.s50-tool-link svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}

.s50-quick-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14.56px;
}

.s50-quick-search input::placeholder { color: #888b96; }

/* ec_live_search appends its results box to the form: open it under the pill, in the
   design's colours (the add-on's own colour settings are blank for this store, so its
   defaults showed grey bars, dark-red chips and invisible button icons) */
.s50-quick-search { position: relative; }
.s50-quick-search:focus-within { border-color: var(--blue); }
.s50 .s50-quick-search input:focus { outline: 0; border: 0; box-shadow: none; }
.s50-quick-search .ec_live_search_result_container { top: calc(100% + 6px); left: 0; margin-top: 0; width: 440px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); filter: none; }
.s50-quick-search .ec_live_search_result_container:empty { display: none; }
.s50-quick-search .ec_live_search_result_sub_container { background: var(--white); }
.s50-quick-search .ec_header { background: var(--soft); border-bottom: 1px solid var(--line); }
.s50-quick-search .ec_live_search_header { margin: 0; padding: 9px 16px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.s50-quick-search .ec_live_search_categories { display: inline-block; padding: 4px 10px; background: var(--soft-blue) !important; color: var(--blue-dark) !important; border-radius: 999px !important; font-size: 12px; text-decoration: none; }
.s50-quick-search .ec_product_box { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.s50-quick-search .ec_product_box:hover,
.s50-quick-search .ec_product_box.ec_product_active { background: var(--soft) !important; }
.s50-quick-search .ec_img_product img { border-radius: 8px; }
.s50-quick-search .search_result_product_name { color: var(--ink) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.s50-quick-search .ec_code_product { color: var(--muted) !important; font-size: 12.5px; }
.s50-quick-search .ec_price_product { color: var(--blue-dark) !important; font-weight: 600; font-size: 14px; }
.s50-quick-search .ec_product_buttons a { color: var(--ink) !important; border-color: var(--line) !important; border-radius: 8px; }
.s50-quick-search .ec_product_buttons svg,
.s50-quick-search .ec_product_buttons svg g,
.s50-quick-search .ec_product_buttons svg path { fill: currentColor; }
.s50-quick-search .ec_product_buttons a:hover { color: var(--blue) !important; }

.s50-made-in-usa,
.s50-account-tools,
.s50-tool-link {
  display: flex;
  align-items: center;
}

.s50-made-in-usa { gap: 11px; white-space: nowrap; font-size: 14.4px; }

.s50-flag-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--white);
  background:
    linear-gradient(to bottom,
      #18396e 0 46%, transparent 46%),
    repeating-linear-gradient(to bottom, #c5394b 0 4px, #fff 4px 8px);
  border-radius: 50%;
  font-size: 11.2px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}

.s50-account-tools { gap: 28px; justify-content: flex-end; }
.s50-tool-link { position: relative; gap: 8px; white-space: nowrap; font-size: 14.72px; }
.s50-tool-link:hover { color: var(--blue); }
.s50-cart-link svg { color: var(--blue); fill: var(--blue); stroke: var(--blue); }

.s50-cart-count {
  position: absolute;
  left: 15px;
  top: -12px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
  font-size: 10.24px;
  line-height: 1;
}

.s50-primary-nav { border-top: 1px solid var(--line); }

.s50-nav-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.5vw, 52px);
}

.s50-nav-inner a {
  font-size: 14.4px;
  white-space: nowrap;
  transition: color .2s ease;
}

.s50-nav-inner a:hover { color: var(--blue); }

.s50-mobile-menu {
  display: none;
  width: 45px;
  height: 45px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--white);
}

/* Phones: search icon in the header row; it opens the quick search as a bar under the logo row */
.s50-search-toggle {
  display: none;
  width: 45px;
  height: 45px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.s50-search-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.s50-search-toggle .s50-icon-close,
.s50-search-toggle[aria-expanded="true"] .s50-icon-search { display: none; }
.s50-search-toggle[aria-expanded="true"] .s50-icon-close { display: block; }

.s50-mobile-menu span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
}

.s50-hero {
  position: relative;
  min-height: 540px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

.s50-hero-image,
.s50-hero-overlay {
  position: absolute;
  inset: 0;
}

.s50-hero-image {
  background-image: url("/design/themes/sub50_website_theme/media/research/hero-bg.webp");
  background-size: cover;
  background-position: center 48%;
  filter: saturate(.55) contrast(1.08) brightness(.7);
  transform: scale(1.03);
}

.s50-hero-overlay {
  background:
    linear-gradient(90deg, rgb(4 8 23 / 98%) 0%, rgb(5 11 31 / 88%) 38%, rgb(9 17 45 / 34%) 68%, rgb(12 24 63 / 12%) 100%),
    linear-gradient(0deg, rgb(16 42 96 / 25%), transparent 55%);
}

.s50-hero-content {
  position: relative;
  z-index: 2;
  padding-block: 82px;
  color: var(--white);
}

.s50-eyebrow {
  margin: 0 0 14px;
  color: #6e92ff;
  font-size: 12.48px;
  font-weight: 700;
  letter-spacing: .055em;
}

.s50-eyebrow-dark { color: var(--blue); }

.s50-hero h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(42.4px, 5vw, 72.8px);
  line-height: .99;
  letter-spacing: -.047em;
  font-weight: 700;
}

.s50-hero-actions,
.s50-why-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.s50-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border: 1px solid transparent;
  font-size: 13.12px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.s50-button:hover { transform: translateY(-1px); }
.s50-button-primary { color: var(--white); background: var(--blue); border-color: var(--blue); }
.s50-button-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.s50-button-outline { color: var(--white); background: transparent; border-color: rgb(255 255 255 / 78%); }
.s50-button-outline:hover { color: var(--ink); background: var(--white); }

.s50-proof-strip {
  color: var(--white);
  background: var(--navy);
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.s50-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.s50-proof-grid article {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 30px;
  border-left: 1px solid rgb(255 255 255 / 12%);
}

.s50-proof-grid article:last-child { border-right: 1px solid rgb(255 255 255 / 12%); }
.s50-proof-grid strong { color: #7898ff; font-size: 21.6px; line-height: 1; letter-spacing: -.025em; }
.s50-proof-grid span { margin-top: 8px; color: rgb(255 255 255 / 72%); font-size: 12.48px; }

.s50-section-pad { padding-block: 84px; }
.s50-featured-section { background: var(--soft); }

.s50-section-title {
  margin: 0 0 42px;
  text-align: center;
  font-size: clamp(27.2px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

.s50-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.s50-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--white);
  box-shadow: 0 8px 24px rgb(33 43 72 / 3%);
}

.s50-product-card[hidden] { display: none; }

.s50-product-visual {
  aspect-ratio: 1 / .92;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef1f4;
}

.s50-product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.s50-product-card:hover .s50-product-visual img { transform: scale(1.025); }

.s50-sale-badge {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 26px;
  padding: 8px 16px;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.s50-product-price {
  min-height: 25px;
  margin: 16px 4px 5px;
  text-align: center;
  font-size: 14.56px;
  font-weight: 500;
}

.s50-product-card h3 {
  min-height: 48px;
  margin: 0 4px 14px;
  text-align: center;
  font-size: 14.88px;
  line-height: 1.38;
  font-weight: 600;
}

.s50-details-link,
.s50-product-action {
  min-height: 42px;
  display: grid;
  place-items: center;
  font-size: 12.32px;
  font-weight: 600;
}

.s50-details-link { margin-top: auto; color: var(--blue); background: #f7f8fc; }
.s50-product-action { width: 100%; margin-top: 9px; border: 0; color: var(--white); background: var(--blue); }
.s50-product-action:hover { background: var(--blue-dark); }
.s50-empty-results { text-align: center; color: var(--muted); }

.s50-usage-section { background: var(--white); }

.s50-usage-layout {
  display: grid;
  grid-template-columns: 70px 260px 1fr;
  gap: 34px;
  align-items: center;
}

.s50-usage-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 50%;
  font-size: 27.2px;
  font-weight: 600;
}

.s50-usage-layout h2,
.s50-why-content h2,
.s50-library-layout h2 {
  margin: 0;
  font-size: clamp(28.8px, 3vw, 42.4px);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.s50-usage-layout p:last-child { margin: 0; color: var(--muted); font-size: 15.04px; }

.s50-why-section {
  min-height: 610px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  background: var(--navy);
}

.s50-why-photo {
  min-height: 520px;
  background:
    linear-gradient(90deg, rgb(5 10 28 / 10%), rgb(5 10 28 / 62%)),
    url("/design/themes/sub50_website_theme/media/research/hero-bg.webp") center / cover no-repeat;
  filter: saturate(.55) contrast(1.05);
}

.s50-why-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 110px);
  color: var(--white);
}

.s50-why-content h2 { max-width: 520px; }

.s50-benefit-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 15%);
}

.s50-benefit-list li {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  font-size: 15.68px;
}

.s50-benefit-list span { color: #7898ff; font-size: 12px; font-weight: 700; }
.s50-why-actions .s50-button-outline { min-width: 140px; }

.s50-quality-section { background: var(--white); }

.s50-quality-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
  margin-bottom: 52px;
}

.s50-quality-heading h2,
.s50-testing-copy h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(32px, 4vw, 53.6px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.s50-quality-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 15.2px;
}

.s50-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.s50-quality-step {
  position: relative;
  min-height: 345px;
  padding: 34px 28px 38px;
  border-left: 1px solid var(--line);
}

.s50-quality-step:last-child { border-right: 1px solid var(--line); }
.s50-quality-step > span { color: var(--blue); font-size: 11.2px; font-weight: 700; }

.s50-quality-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 44px 0 28px;
  color: var(--blue);
  background: var(--soft-blue);
}

.s50-quality-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s50-quality-step h3 { margin: 0 0 13px; font-size: 16.8px; }
.s50-quality-step p { margin: 0; color: var(--muted); font-size: 13.12px; line-height: 1.65; }

.s50-testing-section {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--white);
  background: var(--navy);
}

.s50-testing-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(58px, 8vw, 120px) clamp(34px, 8vw, 120px);
}

.s50-testing-copy > p:not(.s50-eyebrow) {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgb(255 255 255 / 67%);
  font-size: 14.72px;
}

.s50-testing-list { margin: 30px 0 34px; padding: 0; list-style: none; }
.s50-testing-list li { padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 12%); font-size: 14.4px; }
.s50-testing-list li:first-child { border-top: 1px solid rgb(255 255 255 / 12%); }
.s50-testing-list span { margin-right: 13px; color: #7898ff; font-weight: 700; }
.s50-testing-copy .s50-button { align-self: flex-start; }

.s50-testing-visual {
  min-height: 650px;
  display: grid;
  place-items: center;
  padding: 60px;
  background:
    linear-gradient(rgb(32 49 91 / 58%), rgb(32 49 91 / 58%)),
    url("/design/themes/sub50_website_theme/media/research/hero-bg.webp") center / cover no-repeat;
}

.s50-coa-card {
  width: min(450px, 100%);
  padding: 38px;
  color: var(--ink);
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 30px 80px rgb(3 8 26 / 32%);
}

.s50-coa-card-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--blue); font-size: 10.56px; font-weight: 700; letter-spacing: .08em; }
.s50-coa-card-head strong { font-size: 14.4px; }
.s50-coa-card > p { margin: 28px 0 8px; color: var(--blue); font-size: 10.56px; font-weight: 700; letter-spacing: .08em; }
.s50-coa-card h3 { margin: 0 0 25px; font-size: 24.8px; }
.s50-coa-card dl { margin: 0 0 24px; }
.s50-coa-card dl div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12.8px; }
.s50-coa-card dt { color: var(--muted); }
.s50-coa-card dd { margin: 0; font-weight: 600; }
.s50-coa-card small { display: block; color: var(--muted); font-size: 10.88px; line-height: 1.5; }

.s50-library-section { background: var(--soft-blue); }

.s50-library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 70px;
  align-items: center;
}

.s50-library-layout > div { max-width: 720px; }
.s50-library-layout p:not(.s50-eyebrow) { max-width: 650px; margin: 18px 0 0; color: var(--muted); }

.s50-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.s50-report-grid article,
.s50-report-grid .s50-report-card {
  min-height: 180px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 28px;
  background: var(--white);
  border: 1px solid #e2e6f5;
}

.s50-report-grid article > span,
.s50-report-grid .s50-report-card > span { color: var(--blue); font-size: 11.2px; font-weight: 700; }
.s50-report-grid article > b,
.s50-report-grid .s50-report-card > b { color: var(--blue); font-size: 19.2px; font-weight: 400; }
.s50-report-grid p { margin: 0 0 9px; color: var(--blue); font-size: 10.4px; font-weight: 700; letter-spacing: .07em; }
.s50-report-grid h3 { margin: 0 0 28px; font-size: 16px; line-height: 1.4; }
.s50-report-grid small { color: var(--muted); font-size: 11.52px; }

.s50-site-footer { padding: 72px 0 26px; background: var(--white); }

.s50-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 60px;
  padding-bottom: 58px;
}

.s50-footer-brand .s50-brand img { width: 205px; }
.s50-footer-brand p { max-width: 310px; margin: 20px 0 0; color: var(--muted); font-size: 14.08px; }

.s50-footer-grid h2 {
  margin: 0 0 18px;
  font-size: 14.56px;
  font-weight: 600;
}

.s50-footer-grid > div:not(.s50-footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.s50-footer-grid > div:not(.s50-footer-brand) a { color: var(--muted); font-size: 13.28px; }
.s50-footer-grid a:hover { color: var(--blue); }

.s50-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #838691;
  font-size: 11.84px;
}

.s50-footer-bottom p { margin: 0; }

@media (max-width: 1080px) {
  .s50-header-primary { grid-template-columns: 210px 1fr auto; gap: 24px; }
  .s50-made-in-usa { display: none; }
  .s50-nav-inner { gap: 23px; }
  .s50-nav-inner a { font-size: 12.8px; }
  .s50-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s50-product-card h3 { min-height: auto; }
  .s50-quality-grid { grid-template-columns: repeat(2, 1fr); }
  .s50-quality-step:nth-child(2) { border-right: 1px solid var(--line); }
  .s50-quality-step:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 820px) {
  .s50-shell { width: min(100% - 36px, var(--shell)); }
  /* row 1 keeps its height when the search bar opens as row 2 */
  .s50-header-primary { min-height: 78px; grid-template-columns: 1fr auto auto auto; grid-template-rows: 78px; column-gap: 16px; row-gap: 0; }
  .s50-brand img { width: 176px; }
  .s50-quick-search { display: none; }
  .s50-search-toggle { display: inline-flex; }
  /* the open search: a full-width row under logo, icons and menu button */
  .s50-site-header.s50-search-open .s50-quick-search { display: flex; grid-row: 2; grid-column: 1 / -1; max-width: none; margin-bottom: 14px; }
  /* 16px: iPhones zoom the page into any smaller text field */
  .s50-site-header.s50-search-open .s50-quick-search input { font-size: 16px; }
  /* live results as wide as the bar (the add-on's script shifts the box for a field that is hidden when it starts);
     one scroll area, the add-on's list, never taller than the screen allows */
  .s50-quick-search .ec_live_search_result_container { left: 0 !important; right: 0; width: auto !important; margin-left: 0 !important; }
  .s50-quick-search .ec_live_search_result_sub_container { max-height: min(500px, 70vh); }
  /* block 6629 adds a second search box to the menu that searches nothing; the header search replaces it */
  .s50-primary-nav .s50-mobile-tools form { display: none !important; }
  .s50-account-tools .s50-tool-link:first-child { display: none; }
  .s50-account-tools .s50-tool-link span:last-child { display: none; }
  .s50-mobile-menu { display: block; }
  .s50-primary-nav {
    position: fixed;
    inset: 78px 0 auto;
    max-height: calc(100vh - 78px);
    overflow: auto;
    background: var(--white);
    border-top: 1px solid var(--line);
    transform: translateY(-125%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  .s50-primary-nav.is-open,
  .s50-primary-nav.s50-is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .s50-nav-inner { min-height: auto; flex-direction: column; align-items: stretch; gap: 0; padding-block: 14px 24px; }
  .s50-nav-inner a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.2px; }
  .s50-hero { min-height: 500px; }
  .s50-hero-image { background-position: 65% center; }
  .s50-hero-overlay { background: linear-gradient(90deg, rgb(4 8 23 / 96%), rgb(5 11 31 / 74%) 65%, rgb(5 11 31 / 36%)); }
  .s50-hero h1 { font-size: clamp(40.8px, 10vw, 64px); }
  .s50-section-pad { padding-block: 64px; }
  .s50-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .s50-proof-grid article:nth-child(2) { border-right: 1px solid rgb(255 255 255 / 12%); }
  .s50-proof-grid article:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 12%); }
  .s50-usage-layout { grid-template-columns: 58px 1fr; gap: 24px; }
  .s50-usage-layout p:last-child { grid-column: 1 / -1; }
  .s50-why-section { grid-template-columns: 1fr; }
  .s50-why-photo { min-height: 390px; }
  .s50-why-content { padding: 62px 32px; }
  .s50-quality-heading { grid-template-columns: 1fr; gap: 22px; }
  .s50-testing-section { grid-template-columns: 1fr; }
  .s50-testing-visual { min-height: 520px; }
  .s50-library-layout { grid-template-columns: 1fr; gap: 30px; }
  .s50-library-layout .s50-button { justify-self: start; }
  .s50-report-grid { grid-template-columns: 1fr; }
  .s50-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 34px; }
  .s50-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .s50-shell { width: min(100% - 28px, var(--shell)); }
  .s50-header-primary { grid-template-columns: 1fr auto auto auto; column-gap: 10px; }
  .s50-brand img { width: 148px; }
  /* the cart count badge sticks out to the right of the cart icon: keep it off the menu button */
  .s50-account-tools { gap: 12px; margin-right: 8px; }
  .s50-hero { min-height: 520px; }
  .s50-hero-image { background-position: 72% center; }
  .s50-hero-overlay { background: linear-gradient(90deg, rgb(4 8 23 / 97%), rgb(5 11 31 / 78%) 75%, rgb(5 11 31 / 48%)); }
  .s50-hero-content { padding-block: 74px; }
  .s50-hero h1 br { display: none; }
  .s50-hero-actions { flex-direction: column; align-items: stretch; max-width: 270px; }
  .s50-proof-grid { width: 100%; }
  .s50-proof-grid article { min-height: 105px; padding: 20px 18px; }
  .s50-proof-grid strong { font-size: 17.28px; }
  .s50-product-grid { grid-template-columns: 1fr; gap: 16px; }
  .s50-product-card { max-width: 410px; width: 100%; margin-inline: auto; }
  .s50-usage-layout { grid-template-columns: 1fr; }
  .s50-usage-icon { width: 52px; height: 52px; }
  .s50-why-photo { min-height: 330px; }
  .s50-why-content { padding: 54px 24px; }
  .s50-quality-grid { grid-template-columns: 1fr; }
  .s50-quality-step { min-height: auto; padding: 30px 24px 34px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .s50-quality-step:first-child { border-top: 0; }
  .s50-quality-icon { margin: 28px 0 22px; }
  .s50-testing-copy { padding: 58px 24px; }
  .s50-testing-visual { min-height: 450px; padding: 28px 18px; }
  .s50-coa-card { padding: 28px 24px; }
  .s50-library-layout .s50-button { width: 100%; }
  .s50-footer-grid { grid-template-columns: 1fr; }
  .s50-footer-brand { grid-column: auto; }
  .s50-footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

  
/* NicklOne/Responsive base collisions */
.s50 p { padding: 0; }
/* headings: the mirror's WordPress css has ".breakdance h1..h6 { color }", so this needs class specificity */
.s50 h1, .s50 h2, .s50 h3 { color: inherit; font-family: inherit; }
/* the base css gives every div, p, li and a its own dark colour, Arial and size, which breaks the
   inherited white of the dark sections and the Poppins font; :where() keeps these at element
   specificity so every design rule still wins */
:where(.s50) div, :where(.s50) p, :where(.s50) li { color: inherit; font-family: inherit; font-size: inherit; }
:where(.s50) a { font-family: inherit; font-size: inherit; font-weight: inherit; }
.s50 .s50-button-outline { color: var(--white); }
.s50 .s50-button-outline:hover { color: var(--ink); }
.s50 ul { list-style: none; }
.s50 .s50-quick-search input { min-height: 0; height: auto; box-shadow: none; }
.s50 .s50-product-card .ty-price-num, .s50 .s50-product-card .ty-price { font: inherit; color: inherit; }
.s50 .s50-product-visual img { width: 100%; height: 100%; object-fit: cover; }
html.s50-research .tygh-header > .container-fluid, html.s50-research .tygh-content > .container-fluid, html.s50-research .tygh-footer > .container-fluid { padding: 0 !important; max-width: none !important; }
/* the base theme pads the header wrapper by 39px from 768px up (room for its own header widgets); the fixed-width
   layout (.container, layout 300 on sub50research.com) showed it as an empty strip above this header on tablets and desktops */
html.s50-research .tygh-header > div { padding-top: 0; }
html.s50-research .ty-tygh, html.s50-research .ty-helper-container { background: var(--white); }

.s50-report-card { color: inherit; }
.s50-report-card:hover { border-color: var(--blue); }

/* ---- Checkout (on layouts 298/300 the page is block-manager smarty block 6628: the WordPress/Breakdance checkout
   markup wired to the store, not views/checkout/checkout.tpl). Client 2026-10-27 "the checkout view is broken": the WordPress design's grey side panel (.pchk-layout::before)
   was cut off half-way, and the form sections were borderless white boxes on a white page, so their spacing read as
   random gaps. One column of cards beside the sticky order summary. html.brand-route-checkout + !important: the
   block-manager blocks 6628/6629 restyle the same elements with !important. ---- */
html.brand-route-checkout .phox-checkout .pchk-layout::before { display: none !important; }
html.brand-route-checkout .phox-checkout .pchk-layout { gap: 32px; align-items: start; }
html.brand-route-checkout .phox-checkout .pchk-main #customer_details { display: flex; flex-direction: column; gap: 20px; margin: 0 0 20px !important; padding: 0 !important; }
html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-1,
html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-2 { width: 100%; margin: 0; padding: 0; float: none; }
html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-1 > .woocommerce-billing-fields,
html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-2,
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-checkout-review-order-table,
html.brand-route-checkout .phox-checkout .pchk-main #payment {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-shipping-fields,
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-additional-fields { background: transparent !important; padding: 0 !important; margin: 0 !important; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-shipping-fields #ship-to-different-address { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 500; line-height: 1.4; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-shipping-fields #ship-to-different-address label { min-height: 0; gap: 10px; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-shipping-fields #ship-to-different-address label span { font-size: 15px !important; font-weight: 500; line-height: 1.4; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-shipping-fields .shipping_address { margin-top: 16px; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-additional-fields { margin-top: 16px !important; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-additional-fields .form-row { margin-bottom: 0 !important; }
html.brand-route-checkout .phox-checkout .pchk-main #order_review { display: flex; flex-direction: column; gap: 20px; margin: 0 !important; padding: 0 !important; }
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-checkout-review-order-table tr.shipping { padding: 0 !important; background: transparent !important; }
html.brand-route-checkout .phox-checkout .pchk-main .form-row.place-order { margin: 16px 0 0 !important; padding: 0 !important; }
html.brand-route-checkout .phox-checkout .pchk-footer { margin-top: 20px; }
/* WooCommerce leftover: an empty registration-fields wrapper (it reuses .woocommerce-billing-fields) */
html.brand-route-checkout .phox-checkout .wc_user_registration_extra_fields:not(:has(input, select, textarea)) { display: none !important; }
/* the Shipment card only when there is a delivery option to pick (none are set up on sub50research.com) */
html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-checkout-review-order-table:not(:has(input[type="radio"])) { display: none !important; }
html.brand-route-checkout .phox-checkout .pchk-order-summary { background: var(--soft) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
@media (max-width: 640px) {
  html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-1 > .woocommerce-billing-fields,
  html.brand-route-checkout .phox-checkout .pchk-main #customer_details .col-2,
  html.brand-route-checkout .phox-checkout .pchk-main .woocommerce-checkout-review-order-table,
  html.brand-route-checkout .phox-checkout .pchk-main #payment { padding: 20px 18px !important; }
}