/* V50 mobile readability and touch-target corrections.
   Load after the published main stylesheet. No copy or tracking behavior changes. */
@media (max-width: 820px) {
  /* Keep the official NIMO name visible without crowding language and CTA. */
  .layout-latest .sticky-host--top {
    background: #0b0b0d;
  }

  .layout-latest .sticky-host--top .sticky-canvas {
    gap: 8px;
  }

  .layout-latest .sticky-host--top .sticky-brandline {
    display: flex;
    flex: 0 0 43px;
    width: 43px;
    min-width: 43px;
    margin: 0;
    overflow: hidden;
  }

  .layout-latest .sticky-host--top .sticky-brandline__brand {
    display: block;
    width: 43px;
    max-width: 43px;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
  }

  .layout-latest .sticky-host--top .sticky-brandline > span:not(.sticky-brandline__brand) {
    display: none;
  }

  .layout-latest .sticky-host--top .sticky-actions {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    justify-content: flex-end;
    gap: 8px;
  }

  .layout-latest.release-v50 .sticky-host--top .locale-selector__trigger {
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 4px;
    padding: 0 5px;
  }

  .layout-latest .sticky-host--top .locale-selector__name {
    display: none;
  }

  .layout-latest .sticky-host--top .sticky-actions > a {
    min-width: 0;
    min-height: 44px;
    max-width: calc(100vw - 145px);
    padding-inline: 11px;
    text-align: center;
    white-space: normal;
  }

  /* The equal-sign formula may wrap between concepts, never into a lone +AI. */
  html[data-locale="zh-cn"] .layout-latest #good-glasses .chapter-subtitle,
  html[data-locale="zh-tw"] .layout-latest #good-glasses .chapter-subtitle {
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;
  }

  /* Existing controls had 26–42px hit areas on phones. */
  .layout-latest .mtc__tabs {
    min-height: 48px;
    height: 48px;
  }

  .layout-latest .mtc__tab {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  .layout-latest .mtc--feature .mtc__tab {
    font-size: 13px;
  }

  .layout-latest :is(.mtc--feature, .mtc--interaction) .mtc__hint {
    font-size: 12px;
  }

  /* The optical prescription card used 7–11px supporting text on phones. */
  .layout-latest .prescription-ranges__eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  .layout-latest .prescription-ranges__item small {
    font-size: 12px;
    line-height: 1.2;
  }

  .layout-latest .prescription-ranges__index-mark span {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .layout-latest .prescription-ranges__index-copy p {
    font-size: 13px;
    line-height: 1.4;
  }

  .layout-latest .prescription-ranges__saving-value em {
    font-size: 12px;
  }

  .layout-latest .prescription-ranges__saving > span {
    font-size: 13px;
    line-height: 1.4;
  }

  .layout-latest .brand-film-chrome {
    min-height: 54px;
    padding-block: 5px;
  }

  .layout-latest .brand-film-chrome__play {
    width: 44px;
    height: 44px;
  }

  .layout-latest .brand-film-chrome__track,
  .layout-latest .brand-film-chrome__seek {
    height: 44px;
  }

  .layout-latest .appearance-carousel__controls {
    min-height: 54px;
    height: 54px;
    gap: 4px;
    padding: 5px;
  }

  .layout-latest .appearance-carousel__arrow,
  .layout-latest .appearance-carousel__dots button {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .layout-latest .appearance-carousel__dots {
    min-height: 44px;
    height: 44px;
  }

  .layout-latest .prescription-carousel__controls {
    width: 56px;
    grid-template-rows: 44px 24px 44px;
  }

  .layout-latest .prescription-carousel__controls button {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  /* Long English heading: retain hierarchy without a forced Add- / On split. */
  html[data-locale="en"] .layout-latest #lens-bonding .section-title {
    font-size: clamp(22px, 5.9vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    text-wrap: pretty;
  }
}

@media (min-width: 375px) and (max-width: 820px) {
  .layout-latest.release-v50 .sticky-host--top .locale-selector__trigger {
    width: auto;
    min-width: 112px;
    padding-inline: 10px;
  }

  .layout-latest .sticky-host--top .locale-selector__name {
    display: inline-flex;
  }
}

@media (min-width: 600px) and (max-width: 820px) {
  .layout-latest .sticky-host--top .sticky-brandline {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 44vw;
  }

  .layout-latest .sticky-host--top .sticky-brandline__brand {
    width: auto;
    max-width: 100%;
    text-overflow: ellipsis;
  }
}