/* Medical gauze adaptation: keep the original site design and video hero.
  Scoped rules cover gauze figures and the user-approved homepage typography. */
.gauze-applications {
  padding: clamp(30px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(245,249,252,.97), rgba(241,247,251,.94)),
    url("assets/gauze-hero.jpg") center / cover no-repeat;
}
.gauze-applications .gauze-application-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.gauze-applications .gauze-application-image {
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
}
.gauze-applications .gauze-application-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #e7f1f7;
}
.gauze-applications .gauze-application-image figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.gauze-applications .gauze-application-copy { min-width: 0; }
.gauze-applications .section-kicker { margin: 0 0 9px; }
.gauze-applications h2 {
  margin: 0 0 19px;
  max-width: 520px;
  color: var(--blue);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 720;
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: pretty;
}
.gauze-applications .application-list { display: grid; gap: 13px; }
.gauze-applications .application-list article {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.gauze-applications .application-list h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
}
.gauze-applications .application-list p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.gauze-applications .application-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .gauze-applications { padding-block: 28px; }
  .gauze-applications .gauze-application-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .gauze-applications .gauze-application-image { max-width: 430px; }
  .gauze-applications h2 {
    max-width: none;
    margin-bottom: 16px;
    font-size: 1.28rem;
    line-height: 1.26;
  }
  .gauze-applications .application-list h3 { font-size: .95rem; }
  .gauze-applications .application-list p { font-size: .9rem; }
}

/* A consistent, uncropped 3:2 image treatment for mesh and sample guidance. */
.gauze-detail-figure {
  display: block;
  width: 100%;
  max-width: 490px;
  margin: 22px 0 0;
}
.gauze-detail-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #edf2f5;
}
.gauze-detail-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}
.gauze-inquiry-layout { align-items: start; }
.gauze-inquiry-layout .factory-whatsapp a {
  direction: ltr;
  unicode-bidi: isolate;
}
@media (max-width: 860px) {
  .gauze-detail-figure {
    max-width: 430px;
    margin-top: 20px;
  }
}

/* 2026-09-11: product first; retain the established headline scale and video. */
html[data-site="medical-gauze"] #top {
  scroll-margin-top: 6rem;
}
html[data-site="medical-gauze"][lang] .hero #hero-title {
  display: block;
  order: 1;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.16;
  text-wrap: balance;
}
html[data-site="medical-gauze"][lang] .hero .hero-subtitle {
  order: 2;
  max-width: 100%;
  margin: 0 0 16px;
  font-size: clamp(1.1rem, 1.45vw, 1.25rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
}
html[data-site="medical-gauze"][lang] .hero .hero-text {
  max-width: 32rem;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.55;
  text-wrap: pretty;
}
html[data-site="medical-gauze"][lang] .hero .hero-origin-note {
  width: 100%;
  max-width: 32rem;
  margin-top: 0;
  padding-top: 12px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
html[data-site="medical-gauze"][lang] .hero .hero-actions .button {
  min-height: 40px;
  font-size: .875rem;
  line-height: 1.3;
}
@media (max-width: 640px) {
  html[data-site="medical-gauze"][lang] .hero .hero-copy {
    width: min(100%, 320px);
    max-width: 320px;
  }
  html[data-site="medical-gauze"][lang] .hero #hero-title {
    margin-bottom: 7px;
    line-height: 1.2;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-subtitle {
    margin-bottom: 12px;
    font-size: .9375rem;
    line-height: 1.35;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-text {
    margin-bottom: 12px;
    line-height: 1.5;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-origin-note {
    padding-top: 9px;
    font-size: .78rem;
    line-height: 1.4;
  }
}

/* English hero: a clear white / ice-blue hierarchy over the original video. */
html[data-site="medical-gauze"][lang="en"] .hero .hero-copy {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-copy::before {
  background: radial-gradient(ellipse at 24% 48%,
    rgba(3, 18, 31, .82) 0%, rgba(3, 18, 31, .66) 48%,
    rgba(3, 18, 31, .2) 72%, transparent 88%);
}
html[data-site="medical-gauze"][lang="en"] .hero #hero-title {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(2rem, 2.75vw, 2.5rem);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -.018em;
  opacity: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
html[data-site="medical-gauze"][lang="en"] .hero #hero-title .hero-title-product-name {
  max-width: 14ch;
  text-wrap: balance;
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-subtitle {
  margin: 0 0 18px;
  color: #bfe7f5;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-text {
  order: 3;
  max-width: 28rem;
  margin: 0 0 18px;
  color: #e2eaf0;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.6;
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-performance-note {
  order: 4;
  max-width: 32rem;
  margin: 0;
  color: #ffffff;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-origin-note {
  display: block;
  order: 5;
  margin: 0;
  padding: 0;
  border: 0;
  color: #c5d3df;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
html[data-site="medical-gauze"][lang="en"] .hero .hero-actions {
  margin-top: 20px;
}
@media (max-width: 640px) {
  html[data-site="medical-gauze"][lang="en"] .hero .hero-copy {
    width: min(100%, 360px);
    max-width: 360px;
  }
  html[data-site="medical-gauze"][lang="en"] .hero #hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2rem);
    line-height: 1.12;
    margin-bottom: 12px;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-subtitle {
    margin-bottom: 18px;
    font-size: .9375rem;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-text {
    margin-bottom: 16px;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-performance-note {
    max-width: 21rem;
    font-size: .875rem;
    text-wrap: balance;
  }
}

/* V33: a restrained fabric-context marker belongs only to the static poster. */
html[data-site="medical-gauze"] .hero > .hero-gauze-marker {
  position: absolute;
  top: clamp(30px, 3vw, 44px);
  right: clamp(24px, 3.2vw, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: #1b6862;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 650ms ease, visibility 0s linear;
}
html[data-site="medical-gauze"] .hero-gauze-marker > img {
  display: block;
  flex: 0 0 auto;
  width: 46px;
  height: 40px;
  margin: 0;
}
html[data-site="medical-gauze"] .hero-gauze-marker-copy {
  display: grid;
  gap: 2px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .01em;
}
html[data-site="medical-gauze"] .hero-gauze-marker-copy > span:last-child {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
html[data-site="medical-gauze"] .hero:has(.hero-video.is-video-visible) > .hero-gauze-marker {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 650ms;
}
html[data-site="medical-gauze"][dir="rtl"] .hero-gauze-marker-copy {
  direction: rtl;
}
@media (max-width: 1200px) {
  html[data-site="medical-gauze"] .hero > .hero-gauze-marker {
    top: 12px;
    right: clamp(18px, 5vw, 60px);
    gap: 7px;
  }
  html[data-site="medical-gauze"] .hero-gauze-marker > img {
    width: 32px;
    height: 28px;
  }
  html[data-site="medical-gauze"] .hero-gauze-marker-copy {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
  }
  html[data-site="medical-gauze"] .hero-gauze-marker-copy > span:last-child {
    font-size: inherit;
    letter-spacing: inherit;
  }
  /* Reserve a narrow strip so the marker never covers the one-line title. */
  html[data-site="medical-gauze"][lang] .hero:has(> .hero-gauze-marker) > .hero-inner {
    padding-top: 56px;
  }
}
@media (max-width: 640px) {
  html[data-site="medical-gauze"] .hero > .hero-gauze-marker { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site="medical-gauze"] .hero > .hero-gauze-marker { transition: none; }
}

/* V20: one shared poster/video stage at every breakpoint, as in Mini Airjet. */
html[data-site="medical-gauze"][lang] .hero {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: stretch;
  min-height: clamp(540px, 44vw, 660px);
  padding: 0;
  background: #d6e8f3;
  color: #062b63;
}
html[data-site="medical-gauze"][dir="rtl"] .hero > .hero-inner {
  direction: rtl;
}
html[data-site="medical-gauze"][lang] .hero::before,
html[data-site="medical-gauze"][lang] .hero::after {
  display: none;
}
html[data-site="medical-gauze"][lang] .hero > .hero-inner {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: clamp(36px, 3.8vw, 60px) clamp(24px, 3.2vw, 48px);
  z-index: 2;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner > .hero-copy {
  position: static;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-copy::before,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-bottom-metrics::before {
  display: none;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner,
html[data-site="medical-gauze"][lang] .hero .hero-inner * {
  text-shadow: none;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner #hero-title,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-title-product,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-performance-note,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-model-mark strong,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-bottom-metrics strong {
  color: #062b63;
  text-shadow: none;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-subtitle {
  color: #175879;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-text,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-origin-note,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-model-mark,
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-bottom-metrics span {
  color: #334e63;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-actions .button.secondary {
  color: #062b63;
  border-color: rgba(6, 43, 99, .32);
  background: #fff;
}
html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-model-mark {
  position: static;
  align-self: flex-start;
  margin: 22px 0 0;
}
html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  width: 100%;
  max-width: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  /* Keep the grid width and its 1px border footprint; only shorten the paint. */
  --gauze-divider-color: #d6e0e6;
  --gauze-divider-width: 72%;
  border-top: 1px solid transparent;
  background: linear-gradient(var(--gauze-divider-color), var(--gauze-divider-color))
    left top / var(--gauze-divider-width) 1px no-repeat border-box;
}
/* A blue-gray divider on pale gauze; retain the original light line on video. */
html[data-site="medical-gauze"][lang] .hero:not(:has(.is-video-visible)) > .hero-inner > .hero-bottom-metrics {
  --gauze-divider-color: #6f8fa3;
}
html[data-site="medical-gauze"][dir="rtl"] .hero > .hero-inner > .hero-bottom-metrics {
  background-position: right top;
}
@media (max-width: 860px) {
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
    --gauze-divider-width: 80%;
  }
}
html[data-site="medical-gauze"][lang] .hero .hero-bottom-metrics > li {
  min-height: 0;
  padding: 0;
}
html[data-site="medical-gauze"][lang] .hero .hero-bottom-metrics > li::before {
  display: none;
}
html[data-site="medical-gauze"][lang] .hero > .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  background: #d6e8f3;
}
html[data-site="medical-gauze"] .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: none;
}
html[data-site="medical-gauze"] .hero-media > .hero-poster,
html[data-site="medical-gauze"] .hero-media > .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  transform: none;
}
html[data-site="medical-gauze"] .hero-media > .hero-poster {
  object-fit: cover;
  object-position: right center;
}
html[data-site="medical-gauze"] .hero-media > .hero-video {
  z-index: 1;
  /* Keep the frame bounds fixed while the video replaces the poster. */
  animation: none;
  object-fit: cover;
  object-position: center;
  background: #edf0f1;
  opacity: 0;
  transition: opacity 650ms ease;
}
html[data-site="medical-gauze"] .hero-media > .hero-video.is-video-visible {
  opacity: 1;
}
html[data-site="medical-gauze"] .hero-media > .hero-film-effect {
  z-index: 2;
  opacity: 0;
  transition: opacity 650ms ease;
}
html[data-site="medical-gauze"] .hero-media > .hero-video.is-video-visible + .hero-film-effect {
  opacity: 1;
}
/* V34: remove wandering dark/light scratches, retaining the other film textures. */
html[data-site="medical-gauze"] .hero-media > .hero-film-effect::after {
  background-size: 0 0, 180px 132px, 238px 176px, 100% 4px;
}
@media (max-width: 1200px) {
  html[data-site="medical-gauze"][lang] .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 540px;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner {
    padding: 30px clamp(18px, 5vw, 60px);
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner > .hero-copy,
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
    max-width: 720px;
  }
}

/* Only the running video needs a darker local contrast treatment. */
  html[data-site="medical-gauze"] .hero-media:has(.is-video-visible)::after {
    background: linear-gradient(90deg, rgba(3, 18, 31, .76),
      rgba(3, 18, 31, .6) 29%, rgba(3, 18, 31, .24) 42%, transparent 57%);
  }
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner #hero-title,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-title-product,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-performance-note,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-model-mark strong,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-bottom-metrics strong {
    color: #fff;
  }
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-subtitle {
    color: #c8e9f4;
  }
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-text,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-origin-note,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-model-mark,
  html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-bottom-metrics span {
    color: #e2eaf0;
  }
@media (max-width: 640px) {
  html[data-site="medical-gauze"][lang] .hero > .hero-inner {
    padding: 30px 20px 28px;
  }
  /* Keep a clear visual pause between the introduction and the lower figures. */
  html[data-site="medical-gauze"][lang] .hero .hero-inner > .hero-copy {
    flex: 0 0 auto;
    margin-bottom: 56px;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-model-mark {
    flex: 0 0 auto;
    margin-top: auto;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
    flex: 0 0 auto;
    max-width: 300px;
    gap: 18px 24px;
    margin-top: 16px;
    padding-top: 16px;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics strong {
    font-size: .9375rem;
    line-height: 1.3;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics span {
    font-size: .71875rem;
    line-height: 1.5;
  }
  html[data-site="medical-gauze"] .hero-media:has(.is-video-visible)::after {
    background: linear-gradient(180deg, rgba(3, 18, 31, .66),
      rgba(3, 18, 31, .48) 64%, rgba(3, 18, 31, .18));
  }
}

/* V29: desktop title on one line and actions inside the shared media's bottom edge.
   Mobile type, wrapping and action visibility remain exactly as before. */
@media (min-width: 861px) {
  html[data-site="medical-gauze"][lang] .hero > .hero-inner {
    --hero-action-inset: clamp(24px, 3.2vw, 48px);
    --hero-control-width: 360px;
    padding-bottom: 104px;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner > .hero-copy {
    /* A retained translateY created a containing block for the absolute actions. */
    transform: none;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-model-mark {
    margin-top: auto;
  }
  /* V30: keep the two desktop figure columns together at every desktop width. */
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
    max-width: max(360px, var(--hero-control-width));
    /* Keep the parameter columns fixed even when a translated action is longer. */
    grid-template-columns: repeat(2, minmax(0, 170px));
    /* V31: align the rule with both edges of the button group, not the grid. */
    --gauze-divider-width: var(--hero-control-width);
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-actions {
    position: absolute;
    inset-inline-start: var(--hero-action-inset);
    inset-inline-end: auto;
    bottom: 28px;
    margin: 0;
    width: var(--hero-control-width);
    max-width: calc(100% - var(--hero-action-inset) * 2);
    flex-wrap: nowrap;
    gap: 10px;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-actions .button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    padding: 3px 8px;
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
  }
  /* Russian labels need more horizontal room; do not force a second text line. */
  html[data-site="medical-gauze"][lang="ru"] .hero > .hero-inner {
    --hero-control-width: 420px;
  }
  html[data-site="medical-gauze"][lang="ru"] .hero .hero-inner .hero-actions .button {
    font-size: .8125rem;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner #hero-title {
    margin-bottom: 12px;
    font-size: clamp(1.75rem, 2.25vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.025em;
  }
  html[data-site="medical-gauze"][lang="en"] .hero #hero-title .hero-title-product-name {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner .hero-subtitle {
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.45;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner .hero-text {
    margin-bottom: 16px;
    font-size: .9375rem;
    line-height: 1.6;
  }
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner .hero-performance-note {
    font-size: .875rem;
    line-height: 1.6;
  }
}
@media (min-width: 861px) and (max-width: 1200px) {
  html[data-site="medical-gauze"][lang] .hero > .hero-inner {
    --hero-action-inset: clamp(18px, 5vw, 60px);
  }
}

/* V60: keep the longer English hero title on one line on small screens. */
@media (max-width: 860px) {
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner #hero-title {
    font-size: clamp(1rem, 5.3vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  html[data-site="medical-gauze"][lang="en"] .hero #hero-title .hero-title-product-name {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* V35: Mini Airjet's compact, stacked hierarchy, with gauze-specific styling.
   Keep every approved word, the one-line English name and the bottom actions. */
html[data-site="medical-gauze"][lang] .hero .hero-inner > .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-subtitle {
  order: 0;
  margin: 0 0 9px;
  color: #176960;
  font-size: clamp(.875rem, 1.15vw, 1.0625rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .012em;
  text-wrap: pretty;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner #hero-title {
  order: 1;
  margin: 0 0 16px;
  font-weight: 780;
  line-height: 1.12;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-text {
  order: 2;
  max-width: 460px;
  margin: 0 0 14px;
  font-size: .90625rem;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-performance-note {
  order: 3;
  max-width: 460px;
  margin: 0;
  font-size: .84375rem;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}
html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-actions { order: 4; }
html[data-site="medical-gauze"][lang] .hero:has(.is-video-visible) .hero-inner .hero-subtitle {
  color: #bfe8e2;
}
@media (min-width: 861px) {
  html[data-site="medical-gauze"][lang="en"] .hero .hero-inner #hero-title {
    font-size: clamp(1.625rem, 2.3vw, 2.25rem);
    letter-spacing: -.028em;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics {
    max-width: max(360px, var(--hero-copy-rule-width, 100%));
    --gauze-divider-width: var(--hero-copy-rule-width, 100%);
  }
  html[data-site="medical-gauze"][dir="rtl"] .hero > .hero-inner > .hero-bottom-metrics {
    justify-content: end;
  }
}
@media (max-width: 860px) {
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-subtitle {
    margin-bottom: 8px;
    font-size: .84375rem;
    line-height: 1.4;
    letter-spacing: 0;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner #hero-title {
    margin-bottom: 14px;
    line-height: 1.2;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-text {
    margin-bottom: 12px;
    font-size: .90625rem;
    line-height: 1.55;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-performance-note {
    font-size: .8125rem;
    line-height: 1.55;
  }
}

/* V36: phone-only readability; preserve the title, low figures and desktop. */
@media (max-width: 640px) {
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-text {
    font-size: .96875rem;
    line-height: 1.55;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-performance-note {
    font-size: .875rem;
    line-height: 1.55;
  }
  html[data-site="medical-gauze"][lang] .hero .hero-inner .hero-performance-line {
    display: block;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics strong {
    font-size: clamp(1.0625rem, 4.6vw, 1.125rem);
    line-height: 1.2;
  }
  html[data-site="medical-gauze"][lang] .hero > .hero-inner > .hero-bottom-metrics span {
    font-size: .78125rem;
    line-height: 1.4;
  }
}

/* V37: move only the Arabic hero copy left, without changing its RTL flow.
   Equal padding changes preserve line widths and the absolute CTA container. */
html[data-site="medical-gauze"][lang="ar"][dir="rtl"] .hero > .hero-inner {
  --ar-hero-base-inset: clamp(24px, 3.2vw, 48px);
  --ar-hero-left-shift: clamp(16px, 1.7vw, 24px);
  --hero-action-inset: calc(var(--ar-hero-base-inset) + var(--ar-hero-left-shift));
  padding-left: calc(var(--ar-hero-base-inset) - var(--ar-hero-left-shift));
  padding-right: calc(var(--ar-hero-base-inset) + var(--ar-hero-left-shift));
}
@media (max-width: 1200px) {
  html[data-site="medical-gauze"][lang="ar"][dir="rtl"] .hero > .hero-inner {
    --ar-hero-base-inset: clamp(18px, 5vw, 60px);
  }
}
@media (max-width: 640px) {
  html[data-site="medical-gauze"][lang="ar"][dir="rtl"] .hero > .hero-inner {
    --ar-hero-base-inset: 20px;
    --ar-hero-left-shift: 12px;
  }
}