/* Phone pass of 10.11.2026: everything here is for narrow screens only and loads after the other styles.
   Rules: no text under 14px, taps of 44px, three levels of type (Cormorant light 28px+, Onest 600 about 20px, Onest 15-16px),
   no heavy lines. Desktop is not touched: every block sits in a max-width query. */

@media (max-width: 720px) {
  /* text never below 14px */
  html body .eyebrow, html body .badge, html body .card__sub, html body .field__hint,
  html body .hero__ask-go, html body .hero__ask-text b, html body .price__was, html body .xs__p,
  html body .swatch-btn__s, html body .s-review-name, html body .date-wrapper, html body .s-review-date,
  html body .rv__note, html body .ebq__note, html body .crumbs, html body .pdp__ki, html body .pdp__kiH {
    font-size: 14px; line-height: 1.4;
  }
  html body .eyebrow, html body .badge { letter-spacing: .08em; }
  html body .badge.badge--ok, html body .look-card__save .badge, html body .section--deep .hc__list b { font-size: 14px; }
  html body .promo, html body .promo * { font-size: 14px; letter-spacing: .03em; }
  html body .promo { padding-block: 8px; }
  html body .promo span { white-space: normal !important; }
  html body .btn[data-eb-toggle] { text-transform: none; font-size: 15px; letter-spacing: 0; font-weight: 600; padding-inline: 8px; white-space: nowrap; }

  /* small Cormorant becomes the subheading level (Onest 600 about 20px) */
  html body .h3, html body h2.h3, html body h3.h3, html body .look-card__body h3,
  html body .task__item h3, html body .tile__t b, html body .ebq__head h2, html body h3.ebq__q,
  html body .s-order-section .s-header, html body .wa-header, html body .wa-section-header h3,
  html body .drawer__head h2, html body .drawer__head .h3, html body [data-search] h2, html body .search__title {
    font-family: var(--f-ui); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0;
  }
  html body .look-card__body h3 a { text-decoration: none; }
  html body .look-card__body h3 { margin-bottom: 4px; }

  /* tap zones: text links and small buttons reach 44px without growing the picture of the page */
  html body .link-arrow, html body .look-card__body h3 a, html body .rv__more, html body .pdp__rate,
  html body .xs__n, html body .wa-login-link, html body .wa-login-forgotpassword-url,
  html body .wa-signup-url a, html body .js-show-terms-dialog {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; box-sizing: border-box;
  }
  html body .link-arrow { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
  html body .rv__more { padding-inline: 0; }

  /* buttons keep one line where the label fits; long labels get a calmer tracking instead of a second row */
  html body .btn { letter-spacing: .06em; padding-inline: 16px; }
  html body .eb-card .btn, html body .ebq .btn, html body .card .btn { white-space: normal; line-height: 1.2; }
  html body .eb-card .btn, html body .eb-add { font-size: 14px; letter-spacing: .02em; padding-inline: 8px; }

  /* sold-out empty cart and stacked buttons: full-width pair, same size */
  html body .page-empty .btn, html body .cart-empty .btn { width: 100%; }

  /* the "box in a box" on checkout: one frame, a calmer inner padding */
  html body #js-checkout-order-page .wa-form-content, html body #js-checkout-order-page .s-order-section { padding-inline: 16px; }
  html body #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"] { border-radius: 0; }

  /* product page: tone chips two per row without wrapping into three lines */
  html body .pdp__opts .swatch-btn, html body .pdp__tone .swatch-btn { min-height: 44px; padding-right: 8px; }
}

@media (max-width: 480px) {
  html body .section { padding-block: 40px; }
  html body .hero__ask { padding: 14px 16px; gap: 12px; }
  html body .hero__ask-go { font-size: 14px; letter-spacing: .08em; }
  /* the sticky builder bar keeps its price and button but leaves the screen to the products */
  html body .eb-bar { padding-top: 8px; }
  html body .eb-bar__top { gap: 4px 8px; }
  html body .eb-bar .btn { padding-inline: 14px; min-height: 48px; }
}

@media (max-width: 360px) {
  html body { --gutter: 14px; }
  html body .h1, html body .display { font-size: clamp(34px, 11vw, 44px); }
  html body .h2 { font-size: clamp(28px, 9vw, 34px); }
  html body .btn { padding-inline: 12px; letter-spacing: .04em; font-size: 14px; }
  html body .hero__ask { flex-wrap: wrap; }
  html body .hdr__in { gap: 0; }
  html body .hdr .icon-btn { min-width: 44px; flex: 0 0 44px; }
  html body .hdr .logo, html body .hdr__logo { max-width: 110px; min-width: 0; }
  html body .eb-bar__main { gap: 8px; }
  html body .eb-shades { grid-template-columns: minmax(0, 1fr); }
  html body .eb-shades .swatch-btn { box-sizing: border-box; max-width: 100%; min-width: 0; }
  /* builder cards are 140px wide: "Добавить в образ" stays on one line */
  html body .eb-card .btn[data-eb-toggle] { white-space: nowrap; letter-spacing: 0; padding-inline: 4px; min-height: 44px; }
  /* the shade picker of a look: both buttons stay inside a 320x640 screen without scrolling the dialog */
  html body .lookpick { padding: 16px 16px 14px; }
  html body .lookpick__lead { margin-bottom: 10px; }
  html body .lookpick__row { padding-block: 8px; row-gap: 4px; }
  html body .lookpick__act { margin-top: 12px; gap: 8px; }
  html body .lookpick__act .btn { min-height: 48px; }
}