/* W2_ORDER_CANON_V2 — ЕДИНСТВЕННЫЙ источник правды о порядке секций.
   React владеет [data-sec]. CSS владеет порядком. Рантайм-авторитетов НЕТ:
   w2layout.js, w2secorder.js, w2mascotstyle.js — УДАЛЕНЫ.
   Один порядок: все товары, все режимы (CUSTOM / MASCOT / FREE). */

/* W2_TIDY_V1 — ОДНА КОЛОНКА. Секция = ряд, всегда, на любой ширине.
   Двухколоночная сетка W2_SPREAD_V1 удалена: COLOR и SIZE — разные решения
   покупателя, и ставить их плечом к плечу значит заставлять читать панель
   зигзагом. Порядок ниже — единственный источник правды о рядах. */
.scroll { display: flex; flex-direction: column; }

.scroll > *                        { order: 5; }    /* безымянные блоки */

.scroll > [data-sec="position"]    { order: 10; }   /* 1. только футболка/худи */
/* W2_SIZEWORDS_V1 [data-sec="printsize"] УДАЛЕНА: размер печати больше не
   секция панели, а три слова над изделием (w2scale.js). Правило порядка для
   несуществующей секции — мёртвая строка, а не задел на будущее. */
.scroll > [data-sec="style"]       { order: 20; }   /* 2. он же «текст и стиль» */
.scroll > [data-sec="textstyle"]   { order: 20; }   /*    legacy-ключ */
.scroll > [data-sec="print"]       { order: 30; }   /* 3. */
.scroll > [data-sec="text"]        { order: 35; }   /* 4. инпуты FREE — сразу под ним */
/* W2_HEARTFIX_V1 порядок 40/41 удалён: эти секции не рендерятся нигде.
   Строка порядка для скрытой секции утверждает, что место в колонке за ней
   всё ещё держат. Не держат — сердца живут рельсами на изделии. */
.scroll > [data-sec="qr"]          { order: 50; }   /* 7. (на кепке QR нет никогда) */
.scroll > [data-sec="color"]       { order: 60; }   /* 8. */
.scroll > [data-sec="size"]        { order: 70; }   /* 9. */
.scroll > .qr-info                 { order: 100; }
.scroll > [data-w2sf]              { order: 99999; }

/* ═══════════════════════════════════════════════════════════════════════
   W2_SPREAD_V1 — СЕРДЦА НИКОГДА НЕ КАРТОЧКИ.

   Раньше это было верно только до 860px. На вебе heartcolor/heartstyle
   стояли 40/41 — сразу под YOUR WORD, то есть НИЖЕ дна коробки .scroll
   (height:calc(100dvh-140px); max-height:640px; overflow-y:auto). Две самые
   высокие карточки панели жили за кадром, а вместе с ними уезжали QR, COLOR
   и SIZE. Это и был скролл до сердечек.

   Механизм рельс уже написан и проверен на мобилке. Теперь он работает
   везде: рельсы читают эти скрытые тайлы и проксируют по ним клик, так что
   состоянием по-прежнему владеет React. display:none, а не opacity:0 —
   иначе карточка держит высоту.

   Заодно исчезает расхождение брейкпоинтов: панель становилась двухколоночной
   с 768px, а сердца прятались с 860px. В зазоре 768–860 работали ОБА решения.
   ═══════════════════════════════════════════════════════════════════════ */
/* W2_HEARTFIX_V1 БЕЗ `>`. Комбинатор прямого потомка промахивался: в ветке
   аксессуаров карточка сердца не прямой ребёнок .scroll, и на вебе у кепки
   HEART COLOR / HEART STYLE возвращались в панель — одновременно с теми же
   сердцами на рельсах. Ровно об этом предупреждал комментарий удалённого
   правила W2_HEART_HIDE_V2, и я его не послушал.
   Потомковый селектор промахнуться не может, а другого [data-sec="heartcolor"]
   в приложении нет — перехватить чужое ему тоже нечего. */
.scroll [data-sec="heartcolor"],
.scroll [data-sec="heartstyle"] { display: none !important; }

/* W2_HEARTFIX2_V1 — и ТРЕТЬЯ форма того же блока. В ветке аксессуаров React не
   заворачивает выбор цвета сердца в карточку с [data-sec] вовсе: это три
   отдельных соседа с классом .w2-capheart (divider, sec-t, pick-grid).
   Атрибута там нет, поэтому правило выше до него не дотягивалось, и на кепке
   с сумкой HEART COLOR оставался в панели рядом с рельсами.
   Скрыт безусловно: сердца больше не секция панели ни на одном товаре. */
.scroll .w2-capheart { display: none !important; }

/* Клиренс под липкий композер. Единственное объявление — перенесено из
   w2-merged.css, где оно стояло без медиазапроса и на вебе просто добавляло
   190px пустоты в конец колонки. */
@media (max-width: 767px) {
  .scroll { padding-bottom: 190px; }
  /* W2_TIDY_V1 карточки поджаты, но каждая держит свой ряд. */
  .scroll > .card { padding-top: 12px; padding-bottom: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   W2_SPREAD_V1 — ВЕБ: ОДИН РАЗВОРОТ.

   React отдаёт .scroll фиксированную коробку с внутренним скроллом
   (height:calc(100dvh-140px); max-height:640px; overflow-y:auto). В неё
   сваливались восемь секций, из которых помещалось четыре.

   Коробка снимается. Секции ложатся в две колонки: POSITION | STYLE,
   WHAT TO PRINT и YOUR WORD во всю ширину, COLOR | SIZE внизу.
   Если колонка всё же перерастёт экран, страница проскроллится целиком —
   .preview-wrap залипший, товар остаётся на виду. Внутренней коробки,
   которая прячет половину панели молча, больше нет.

   Этот файл грузится ПОСЛЕ style_constructbag-*.css, селектор тот же —
   !important не нужен ни в одной строке ниже.
   ═══════════════════════════════════════════════════════════════════════ */
/* W2_TIDY_V1 — ВЕБ: коробка .scroll возвращена React'у как есть.
   overflow-y:auto, height:calc(100dvh-140px), max-height:640px — это его
   объявления в style_constructbag-*.css, и они правильные. Здесь остаётся
   только то, что действительно наше: карточки поджаты, чтобы в тот же
   экран влезало больше рядов, и нижний клиренс, без которого описание
   QR и витрина наезжают на панель. */
@media (min-width: 768px) {
  .scroll { padding: 14px 32px 120px 20px; }
  .scroll > .card { padding: 12px 0; }
}