/* Телефон (6 октября 2026): правки под узкие и невысокие экраны — стоя и лёжа.
   Подключается последним, после photo.css, и меняет только то, что на телефоне не помещалось или читалось с трудом.
   Раскладку финала ролика считает app.js (hero: stack — стоя, low — лёжа) по видимой высоте экрана (100svh):
   .hero.is-tight — стоя, высоты не хватает: приветствие без абзаца, кадр меньше;
   .hero.is-low   — лёжа: кадр с нотами слева, приветствие справа, всё в одну высоту экрана.
   Лёжа (landscape, высота до 540px) любой кадр и любой блок не выше экрана: его видно целиком без прокрутки. */

/* ---------- Ролик: финал на невысоком экране ---------- */
.hero.is-tight .welcome__lead { display: none; }

/* лёжа флакон стоит у левой трети кадра: текст вступления — узкой колонкой левее него */
.hero.is-low .hero__intro {
  width: min(31vw, 24rem); top: calc(50% + var(--hdr-h) / 2);
  transform: translateY(calc(-50% - (1 - var(--intro-o, 1)) * 30px));
}
.hero.is-low .hero__title { margin: .22em 0 .3em; font-size: clamp(2.1rem, 12.5vh, 3.4rem); }
.hero.is-low .hero__lead { max-width: 20em; font-size: .9375rem; line-height: 1.5; }
.hero.is-low .hero__cue { display: none; }
.hero.is-low .welcome {
  left: auto; right: var(--gutter); width: min(42vw, 400px);
  transform: translateX(calc((1 - var(--feat-o, 0)) * 32px));
}
.hero.is-low .welcome__eyebrow, .hero.is-low .welcome__lead { display: none; }
.hero.is-low .welcome__title { margin: 0 0 16px; font-size: clamp(1.75rem, 9.5vh, 2.6rem); }
.hero.is-low .welcome__title em { padding-left: .3em; }
.hero.is-low .welcome__cta { margin-top: 0; gap: 8px; }
.hero.is-low .welcome__cta .btn { min-height: 44px; padding: 0 16px; }
.hero.is-low .plate-cap { padding: 7px 10px 8px; }
.hero.is-low .plate-cap__name { font-size: .875rem; }

/* невысокий телефон стоя (iPhone SE, панели браузера): вступление ролика ниже и мельче, чтобы меньше закрывало флакон */
@media (max-width: 760px) and (max-height: 640px) {
  .hero.is-portrait .hero__intro { bottom: calc(64px + var(--svh-gap)); }
  .hero.is-portrait .hero__title { margin: .24em 0 .3em; font-size: clamp(2.4rem, 8.6vh, 3.4rem); }
}

/* шапка уезжает вверх при прокрутке — липкие строки поднимаются за ней, как глобус «Шёлкового пути»:
   иначе над ними остаётся щель, где просвечивает текст, а вопрос подбора прячется под строкой витрины */
@media (max-width: 1100px) {
  .finder.pb-on .finder__stage, .ukp__nav, .cmpp__mini { transition: top .45s var(--ease); }
  .hdr.is-hidden ~ main .finder.pb-on .finder__stage,
  .hdr.is-hidden ~ .pg .ukp__nav,
  .hdr.is-hidden ~ .pg .cmpp__mini { top: env(safe-area-inset-top, 0px); }
}

/* ---------- Телефон стоя: мелкие подписи крупнее, кнопка меню — во весь палец ---------- */
@media (max-width: 760px) {
  .hdr__burger { min-width: 44px; min-height: 44px; margin-left: -10px; padding: 0 10px; }
  /* уведомление над лотком сравнения: на телефоне оно во всю ширину, без сдвига к центру (иначе уезжало за левый край) */
  body.has-cmpt:not(.cmpt-away) .toast.is-on { transform: translateY(-78px); }
  /* кнопка лотка: «Добавьте ещё один» переносится на вторую строку, а не обрезается с обеих сторон */
  .cmpt__go { min-width: 0; padding: 6px 8px; white-space: normal; text-align: center; line-height: 1.25; letter-spacing: .12em; }
  .cmpt__go[disabled] .ico { display: none; }
  .card__brand { font-size: .75rem; letter-spacing: .18em; }
  .tag { height: 21px; font-size: .6875rem; }
  .cl__cap, .wc__n, .world__stats dd, .therm__ticks span, .today__cap { font-size: .75rem; }
  .card__fam { font-size: .75rem; }
}

/* самые узкие телефоны (360 и уже): ячейки лотка сравнения меньше, чтобы кнопке хватило места */
@media (max-width: 380px) {
  .cmpt__item, .cmpt__item .thumb, .cmpt__slot { width: 30px; }
  .cmpt__go .ico { display: none; }
}
@media (max-width: 340px) {
  .cmpt__k { gap: 0; font-size: 0; } /* остаётся только счёт «2/4» */
}

/* ---------- Телефон лёжа ---------- */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  :root { --hdr-h: 56px; }
  .anno__tier { display: none; }
  .cl__cap, .wc__n, .wc__km, .world__stats dd, .therm__ticks span, .today__cap, .card__fam { font-size: .75rem; }

  /* меню: пункты в две колонки и мельче, справка магазина — рядом */
  .menu { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 18px); }
  .menu__in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 28px; }
  .menu__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; justify-items: start; }
  .menu__nav a { font-size: clamp(1.4rem, 7.2vh, 2.1rem); }
  .menu__aside { padding-top: 0; border-top: 0; }

  /* поиск — во всю высоту экрана */
  .search__panel { max-height: 100vh; max-height: 100dvh; padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }

  /* карта домов: глобус слева в высоту экрана, страны справа */
  .world__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .world__stage { grid-column: 1 / span 6; position: sticky; top: calc(var(--hdr-h) + 8px); }
  .world__panel { grid-column: 7 / -1; }
  .world__ball { width: min(100%, calc(100vh - var(--hdr-h) - 56px)); width: min(100%, calc(100svh - var(--hdr-h) - 56px)); margin-inline: auto; }
  /* правая колонка узкая — список стран и цифры как на телефоне стоя */
  .world__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world__stats dt { font-size: 2.2rem; }
  .world__stats div:nth-child(3) { grid-column: 1 / -1; padding: 16px 0 0; margin-top: 16px; border-left: 0; border-top: 1px solid var(--line-inv); }
  .wc__row { grid-template-columns: 24px minmax(0, 1fr) auto 14px; gap: 12px; padding: 12px 0; }
  .wc__row .flag { width: 24px; }
  .wc__km { display: none; }

  /* «гармошка» семейств и кадры: не выше экрана */
  .families .fam { max-height: calc(100vh - var(--hdr-h) - 28px); max-height: calc(100svh - var(--hdr-h) - 28px); }
  .cl__ph, .edit, .today__card, .step__ph, .visit__map, .pv-lab__ph, .silk__ph {
    max-height: calc(100vh - var(--hdr-h) - 40px); max-height: calc(100svh - var(--hdr-h) - 40px);
  }
  .shot__ph { height: min(56vw, calc(100vh - var(--hdr-h) - 80px)); height: min(56vw, calc(100svh - var(--hdr-h) - 80px)); }
  .reel { width: min(100%, 300px, calc((100vh - var(--hdr-h) - 60px) * 9 / 16)); width: min(100%, 300px, calc((100svh - var(--hdr-h) - 60px) * 9 / 16)); }

  /* подборки «Для неё» и «Для него» — рядом */
  .edits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit { aspect-ratio: 4 / 3.4; }
  .edit__t { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
  .edit__s { font-size: .9375rem; }
  .edit__go { min-height: 44px; padding: 0 18px; }

  /* погода: кадр слева, ароматы справа */
  .today__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .today__now { grid-column: 1 / span 6; }
  .today__pick { grid-column: 7 / -1; }
  .today__card { aspect-ratio: 4 / 4.2; }
  .today__deg { font-size: clamp(5rem, 22vh, 7.5rem); }

  /* витрина: карточки размером как на телефоне стоя, кадры-вставки — в высоту одной карточки */
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-flow: dense; gap: 44px 14px; }
  .grid > .tile { grid-column: span 2; grid-row: auto; }
  .tile__in { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .tile__t { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
  .card__body { padding-top: 14px; gap: 6px; }
  .card__name { font-size: 1.15rem; }
  .card__brand { display: flex; align-items: flex-end; min-height: 2.6em; font-size: .75rem; letter-spacing: .18em; }
  .card__notes { font-size: .8125rem; }
  .card__price { font-size: .875rem; }
  .card__meta { display: none; }
  .card__foot { justify-content: space-between; margin-top: 8px; padding-top: 12px; }
  .card__add { width: 36px; height: 36px; }
  .card__tags { left: 10px; top: 10px; }
  .tag { height: 21px; padding: 0 7px; font-size: .6875rem; }
}

/* ---------- 16 октября: телефон, второй проход ---------- */
/* подсказки «наведите» — только там, где есть наведение; на сенсорном экране — свои слова (разметка в index.html и словарях uz) */
.for-touch { display: none; }
@media (hover: none) {
  .for-hover { display: none; }
  .for-touch { display: inline; }
  /* фото нот на карточках витрины видны по кнопке «Ноты»: без неё атлас (полмегабайта) телефону не нужен —
     скрытый элемент картинку не грузит, а при открытии ноты проявляются, как и раньше */
  .card .card__ingredient { display: none; }
  .card.is-peeking .card__ingredient { display: block; }
}
@starting-style {
  .card.is-peeking .card__ingredient { opacity: 0; }
}

@media (max-width: 760px) {
  /* «Для кого»: ширина кнопок — по словам, «Для него» больше не ломается на две строки */
  #genderSeg button { flex: 1 1 auto; padding: 0 8px; letter-spacing: .14em; white-space: nowrap; }
  /* поиск и бренды: линия над фильтрами — она же черта под выбором бренда, без пустой полосы между ними */
  .shop .catalog-tools { margin-bottom: 0; }
  .shop #catalogBrand { border-bottom: 0; }
  .shop .filters { padding-top: 14px; }
  /* «Ровесник»: подпись года переносится, стрелки остаются внутри полей экрана */
  .ry__read { padding-inline: var(--gutter); }
  .ry__big { min-width: 0; }
  .ry__ago { white-space: normal; text-align: center; max-width: 15em; line-height: 1.5; }
}
@media (max-width: 860px) {
  /* «Шёлковый путь»: липкий глобус меньше — под ним остаётся больше места для текста остановок;
     подпись остановки не упирается в края экрана */
  .silk__ball { width: min(54vw, 31vh); width: min(54vw, 31svh); }
  .silk__now { padding-inline: var(--gutter); letter-spacing: .14em; line-height: 1.5; text-wrap: balance; }
}
/* узкие телефоны (360 и уже): логотип и три значка шапки не налезают друг на друга */
@media (max-width: 374px) {
  .hdr__in { padding-inline: 12px; }
  .hdr .icon-btn { width: 34px; }
}