/* Homepage only. Keep the original storefront's product/account ownership.
   Important font declarations intentionally override the immutable 20261007
   readability sheet; do not edit that deployed asset or the React runtime. */
.rx-site p,
.rx-site dd {
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.rx-site .rx-hero-copy h1 {
  /* Keep long translated words readable instead of stranding one letter. */
  hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
}
.rx-site .rx-hero.is-collection-slide .rx-hero-copy h1,
.rx-site .rx-hero.is-category-slide .rx-hero-copy h1 {
  /* Use the copy column's width, not the legacy 470/500px inner cap. */
  max-width: 100%;
}
.rx-site .rx-hero-copy-main > p {
  /* Balance multi-line copy so Chinese subtitles do not leave a tiny tail. */
  text-wrap: balance;
  word-break: normal;
  line-break: strict;
}
.rx-site .rx-hero-copy-main:lang(zh-CN) > p {
  /* These subtitles list short product terms separated by spaced middots. */
  word-break: keep-all;
  overflow-wrap: normal;
}
.rx-site dt,
.rx-site .rx-footer-contact > p b {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.rx-site .rx-product-copy > p {
  display: block;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.rx-site .rx-product-copy h3 {
  font-size: 18px !important;
  line-height: 1.45 !important;
  min-height: 0;
  overflow-wrap: anywhere;
}
.rx-site .rx-product-copy {
  padding: 20px;
}
.rx-site .rx-card-bottom > span,
.rx-site .rx-hero-meta span,
.rx-site .rx-category-link {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.rx-site .rx-hero-meta span {
  /* Each mobile statistic is a narrow column. Keep long localized words
     within their own column instead of painting over the next statistic. */
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.rx-site .rx-hero-meta strong {
  /* Counts and the RFQ abbreviation stay on one line even when their
     description needs to wrap within a flex column. */
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .rx-site .rx-hero-meta span {
    /* Put the description below its count instead of leaving it a sliver
       of the tablet copy column. Keep all three statistics visible. */
    flex-direction: column;
    gap: 2px;
  }
}
.rx-site .rx-footer-company,
.rx-site .rx-factory-card figcaption span {
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.rx-site .rx-footer-grid h3,
.rx-site .rx-service-strip h3 {
  font-size: 18px;
  line-height: 1.45;
}
.rx-site .rx-footer-grid > div:not(.rx-footer-brand) > a,
.rx-site .rx-footer-grid > div:not(.rx-footer-brand) > button,
.rx-site .rx-promo-back a,
.rx-site .rx-promo-back button {
  font-size: 14px !important;
  line-height: 1.6;
  min-height: 44px;
  overflow-wrap: anywhere;
}
.rx-site .rx-promo-tile {
  min-height: 400px !important;
}
.rx-site .rx-promo-front h2,
.rx-site .rx-promo-back h2 {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.25;
}
.rx-site .rx-promo-back p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset !important;
}
.rx-site .rx-hero-carousel-buttons > button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.rx-site .rx-hero-dots,
.rx-site .rx-hero-count {
  height: 44px;
}
.rx-site .rx-hero-dots button,
.rx-site .rx-hero-dots button.is-active {
  width: 44px;
  height: 44px;
}
.rx-site .rx-hero-dots button.is-active span {
  width: 36px;
}
.rx-site .rx-hero-category-list {
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
}
.rx-site .rx-hero-category-main {
  height: auto;
  min-height: 94px;
}
.rx-site .rx-hero-category-copy strong,
.rx-site .rx-hero-category-copy small {
  /* Prefer language-aware word breaks, with a fallback for long compounds. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.rx-site .rx-hero-category-copy strong {
  font-size: 16px;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
}
.rx-site .rx-hero-category-copy small {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.rx-site .rx-hero-category-count,
.rx-site .rx-hero-category-heading small {
  font-size: 12px;
  line-height: 1.5;
}
.rx-site .rx-hero-visual-label {
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 601px) {
  .rx-site .rx-hero-carousel-controls {
    /* The fixed tools stay on the physical right in both LTR and RTL. */
    box-sizing: border-box;
    padding-right: 56px;
  }
  .rx-site .rx-hero-meta:lang(ar) {
    /* RTL metrics start at the physical right, where the fixed dock sits. */
    box-sizing: border-box;
    padding-right: 56px;
  }
}
@media (min-width: 761px) {
  .rx-site .rx-hero-visual-label {
    /* RTL keeps its more-specific legacy left anchor; the LTR label needs
       a clear physical-right margin when it scrolls beside the fixed dock. */
    right: 56px;
    /* Keep even multi-line labels above the carousel's largest legacy
       bottom offset (94px) plus its 44px controls and a 18px gap. */
    bottom: 156px;
  }
  .rx-site .rx-hero-copy-main:lang(ar),
  .rx-site .rx-hero-actions:lang(ar) {
    /* The dock is fixed on the right above the legacy 760px breakpoint.
       Reserve space for RTL headings, subtitles and actions as well as metrics. */
    box-sizing: border-box;
    padding-right: 56px;
  }
}
@media (max-width: 760px) {
  .rx-site .rx-hero-carousel-controls {
    /* The copy already reserves a lower hero area. Give the two-row mobile
       controls their own band above the full, potentially wrapped label. */
    bottom: 148px;
  }
}
@media (max-width: 1100px) and (min-width: 601px) {
  .rx-site .rx-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .rx-site .rx-product-grid,
  .rx-site .rx-service-strip,
  .rx-site .rx-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rx-site .rx-featured-copy dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .rx-site .rx-hero-carousel-controls {
    width: calc(100% - 32px);
    max-width: 320px;
  }
  .rx-site .rx-hero-carousel-buttons {
    display: grid;
    grid-template-columns: 44px minmax(60px, 1fr) 44px 44px;
    gap: 4px;
    width: 100%;
  }
  .rx-site .rx-hero-carousel-buttons > button:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .rx-site .rx-hero-count {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }
  .rx-site .rx-hero-carousel-buttons > button:nth-last-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .rx-site .rx-hero-carousel-buttons > button:last-child {
    grid-column: 4;
    grid-row: 1;
  }
  .rx-site .rx-hero-dots {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 4px;
    padding-inline: 4px;
    height: 48px;
  }
  .rx-site .rx-hero-dots button,
  .rx-site .rx-hero-dots button.is-active {
    width: 100%;
  }
}