/* =====================================================================
   КАРТОЧКА ТОВАРА  /products/<категория>/<товар>/ — один файл на все товары.

   Компьютер: слева крупное фото (выходит к левому краю окна), под ним
   «Состав» и «Фасовка» парами «подпись — значение»; справа липкая колонка —
   крошки, имя, описание, свойства, дозировка крупными моноширинными цифрами, кнопка.
   Телефон: порядок другой — имя → описание → дозировка → кнопка видны сразу,
   фото идёт следом на всю ширину экрана, дальше свойства, состав и фасовка.

   Всё на переменных site.css; фон — только подложка, рамок-«коробок» нет.
   Разметка — в src/pages/tovar-lejma-nord.html (образец).
   ===================================================================== */

.tv { --tv-top: clamp(28px, 6vh, 60px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4.6vw, 84px); align-items: start; padding: clamp(14px, 2.6vh, 26px) var(--pad) clamp(52px, 9vh, 110px); }
.tv-main { grid-column: 1; grid-row: 1; min-width: 0; }
.tv-side { grid-column: 2; grid-row: 1; min-width: 0; max-width: 640px; display: flex; flex-direction: column; }

/* ---------- фото товара: без скруглений, с общей цветокоррекцией, ярлык выступает из рамки ---------- */
.tv-pic { position: relative; margin-left: calc(var(--pad) * -1); aspect-ratio: 4 / 3; max-height: min(calc(100svh - 150px), 860px); background: var(--paper-2); }
.tv-pic-in { position: absolute; inset: 0; overflow: hidden; display: block; }
.tv-pic-in > img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); }
.tv-pic .lot-badge { top: -12px; right: -10px; padding: 10px 14px; font-size: 0.64rem; }

/* ---------- правая колонка ---------- */
.tv-head { display: flex; flex-direction: column; align-items: flex-start; }
.tv-head .h1 { font-size: clamp(2.3rem, 4.4vw, 4.2rem); max-width: 100%; overflow-wrap: anywhere; }   /* страховка: очень длинное слово в имени товара переносится, а не вылезает из колонки */
.tv-head .lede { margin-top: clamp(16px, 2.4vh, 24px); }
.tv-back { margin-top: clamp(18px, 2.8vh, 26px); }

.tv-props { margin-top: clamp(22px, 3.4vh, 34px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); gap: 10px; }
.tv-props li { padding-left: 24px; font-size: clamp(0.96rem, 1.1vw, 1.06rem); line-height: 1.45; color: var(--brown); }
.tv-props li::before { top: 0.46em; width: 9px; height: 9px; }

.tv-buy { margin-top: clamp(22px, 3.4vh, 34px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: clamp(18px, 2.8vh, 28px); }
/* дозировка — главный технический факт: число крупно, единица — моноширинной подписью рядом */
.tv-dose { gap: 12px; }
.tv-dose > span { font-size: 0.72rem; }
.tv-dose b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: clamp(0.78rem, 0.95vw, 0.92rem); font-weight: 400; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.tv-dose b em { font-style: normal; font-weight: 500; font-size: clamp(2.7rem, 4.8vw, 4.6rem); line-height: 0.92; letter-spacing: -0.03em; text-transform: none; color: var(--brown); }
.tv-req { width: 100%; justify-content: space-between; min-height: 58px; padding: 16px 22px; font-size: 0.84rem; }

/* ---------- состав и фасовка: заголовки живой страницы остаются h2, вид — пары «подпись — значение» ---------- */
.tv-spec { margin-top: clamp(28px, 4.6vh, 52px); }
.tv-spec > div { padding: clamp(16px, 2.4vh, 22px) 0; }
.tv-spec .k { font-weight: 400; font-size: 0.7rem; padding-top: 6px; }
.tv-spec .v { font-size: clamp(1rem, 1.2vw, 1.16rem); max-width: 56ch; text-wrap: pretty; }

/* ---------- «Ещё из категории»: карточки одной высоты, дозировка и ссылка прижаты к низу ---------- */
.tv-more .lot-text { text-wrap: pretty; }
.tv-more .props { margin-top: 0; }
.tv-more .dose { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); gap: 6px; }
.tv-more .dose b { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }

/* липкая колонка — только когда она целиком помещается в окно */
@media (min-width: 981px) and (min-height: 700px) {
  .tv-side { position: sticky; top: var(--tv-top); }
}

/* вход первого экрана: фото открывается шторкой, колонка поднимается по строкам (только компьютер, только если движение не отключено) */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .tv-pic-in { animation: tv-open 1.1s var(--ease-out) both; }
  .tv-pic-in > img { animation: tv-zoom 1.7s var(--ease-out) both; }
  .tv-pic .lot-badge { animation: tv-rise 0.7s var(--ease-out) 0.55s both; }
  .tv-head > *, .tv-props, .tv-buy { animation: tv-rise 0.8s var(--ease-out) both; }
  .tv-head > :nth-child(2) { animation-delay: 0.06s; }
  .tv-head > :nth-child(3) { animation-delay: 0.12s; }
  .tv-head > :nth-child(4) { animation-delay: 0.18s; }
  .tv-props { animation-delay: 0.24s; }
  .tv-buy { animation-delay: 0.3s; }
}
@keyframes tv-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tv-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes tv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   ПЛАНШЕТ И ТЕЛЕФОН: одна колонка. Обёртки растворяются (display: contents),
   порядок блоков задаётся заново: имя → дозировка и кнопка → фото → свойства → состав.
   ===================================================================== */
@media (max-width: 980px) {
  .tv { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: clamp(14px, 2.4vh, 24px); }
  .tv-side, .tv-main { display: contents; }
  .tv-head { order: 1; }
  .tv-head .h1 { font-size: clamp(2.3rem, 7vw, 4rem); }
  .tv-dose b em { font-size: clamp(2.7rem, 8vw, 4.2rem); }
  .tv-buy { order: 2; margin-top: clamp(20px, 3vh, 28px); padding-top: clamp(18px, 2.6vh, 24px); }
  .tv-pic { order: 3; margin: clamp(30px, 5vh, 44px) calc(var(--pad) * -1) 0; aspect-ratio: 3 / 2; max-height: none; }
  .tv-pic .lot-badge { top: -11px; right: var(--pad); }
  .tv-props { order: 4; margin-top: clamp(24px, 4vh, 34px); padding-top: 0; border-top: 0; }
  .tv-spec { order: 5; margin-top: clamp(24px, 4vh, 34px); }
  .tv-req { max-width: 520px; }
}

@media (max-width: 760px) {
  .tv { padding-top: 16px; padding-bottom: 44px; }
  .tv-head .crumbs { margin-bottom: 16px; }
  .tv-head .h1 { font-size: clamp(2.1rem, 10.4vw, 2.9rem); }
  .tv-head .lede { margin-top: 14px; }
  .tv-back { margin-top: 16px; padding: 6px 0 3px; }
  .tv-buy { margin-top: 20px; padding-top: 18px; gap: 16px; }
  .tv-dose { gap: 8px; }
  .tv-dose b em { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .tv-dose b { font-size: 0.74rem; gap: 4px 14px; }
  .tv-req { max-width: none; min-height: 54px; padding: 15px 18px; }
  .tv-pic { margin-top: 30px; }
  .tv-pic .lot-badge { font-size: 0.56rem; padding: 8px 11px; }
  .tv-props li { font-size: 1rem; }
  .tv-spec .k { padding-top: 0; }
  .tv-spec .v { font-size: 1.02rem; }
  /* карточки листают пальцем по одной: выравнивать низ по самой длинной незачем — внутри коротких получалась дыра */
  .tv-more { padding-bottom: 34px; }
  .tv-more .snap { align-items: flex-start; }
  .tv-more .snap > * { flex-basis: 80%; }      /* чуть шире общих 76%: длинные свойства реже переносятся, карточки ровнее по высоте */
  .tv-more .dose { margin-top: 2px; }
  .tv-more .dose b { font-size: 1.1rem; }
}