/* SOL47 §A2 — ПЕРВЫЙ ЭКРАН КАРТОЧКИ НА МОБИЛЬНОМ.
 *
 * Замер «было» (60 карточек, 390 px, эмуляция iPhone 12, живая загрузка):
 *   название  60/60 в первом экране
 *   телефон   60/60
 *   цена       0/60 — уходит вниз на 375–943 px, медиана 672
 *   наличие    0/60 — 375–812, медиана 581
 *   фасовка    0/60 — 651–1054 (и у 20 карточек её на странице нет вовсе)
 *   действие   0/60 — 490–1085, медиана 811
 * То есть покупатель на телефоне видит имя товара и фотографию, а всё, ради
 * чего он пришёл, лежит за двумя-тремя прокрутками.
 *
 * Что делает этот слой (только ≤767 px, десктоп не трогаем):
 *   1. Покупательская колонка (.product__info) поднимается ПЕРЕД фотографией.
 *      Фотографию разрешено сдвинуть ниже — на телефоне она не первое, что
 *      нужно покупателю (§A2 задания). Ни один элемент не убран.
 *   2. Внутри колонки блок покупки идёт первым, характеристики и документы —
 *      за ним.
 *   3. Оценка товара (86 px звёзд) уходит ПОД кнопку: она не участвует в
 *      решении «сколько стоит и как купить». Наличие остаётся наверху —
 *      для этого контейнер наличия+оценки становится display:contents,
 *      и оба его ребёнка выстраиваются в общем потоке карточки покупки.
 *   4. Счётчик количества и кнопка встают в один ряд, фасовка — подписью
 *      под ними. Экономия 50 px.
 *   5. Артикул/сравнение, «объектная скидка», доставка/оплата — ниже кнопки.
 *
 * Порядок задан числами с шагом: между ними можно вставлять, не переписывая.
 */
@media screen and (max-width: 767px) {

  /* Признак «слой на месте» для main.js: перенос узла .product__cart-block
     (правка D24 U7) при живом слое не нужен и даёт сдвиг раскладки. */
  section.product { --mpkm-pdp-order: 1; }

  /* 1. колонка покупателя — до фотографии.
        ВАЖНО про порядок ДО и ПОСЛЕ скрипта. main.js:2152 (правка D24 U7)
        на ширине до 760 px ПЕРЕНОСИТ узел .product__cart-block из
        .product__block внутрь .product__fields — detach + insertAfter, около
        1,9 с после загрузки. Пока порядок «до переноса» и «после переноса»
        совпадают, перенос глазу не виден и сдвига не даёт. Если они расходятся
        — блок покупки прыгает через полстраницы: замер поймал 0,44 при 390 px.
        Поэтому здесь заданы ОБА порядка, и они дают одну и ту же картинку:
        блок покупки → плитки → документы → бренд/склады → фотография → описание. */
  section.product .product__block > .product__cart-block { order: -1; }
  section.product .product__block > .product__info { order: 0; }
  section.product .product__block > .product__pics { order: 1; }
  section.product .product__block > .product__descr--mobile { order: 2; }

  /* 2. внутри колонки: блок покупки первым */
  section.product .product__fields { display: flex; flex-direction: column; }
  section.product .product__fields > .product__cart-block { order: 0; }
  section.product .product__fields > .u-spec-tiles { order: 2; }
  section.product .product__fields > .product__docs { order: 3; }
  section.product .product__fields > .product__brand-wh-row { order: 4; }
  section.product .product__fields > p,
  section.product .product__fields > .product__pdf-link-row { order: 5; }

  /* 3. наличие наверху, оценка — под кнопкой */
  section.product .product__cart { display: flex; flex-direction: column; }
  section.product .product__cart .product__presents-and-rating { display: contents; }
  section.product .product__cart .pr-block__present__cell { order: 0; margin: 0 0 4px; }
  section.product .product__cart .js_shop_form,
  section.product .product__cart form.shop_form { order: 1; }
  section.product .product__cart .mpkm-product-header-rating { order: 4; margin-top: 12px; }
  section.product .product__cart .product__meta-row { order: 5; }
  section.product .product__cart .product__addict { order: 6; }
  section.product .product__cart .product__presents { order: 7; }
  section.product .product__cart .product__delivery-fields { order: 8; }
  section.product .product__cart .product__pack { order: 2; }

  /* 4. фасовка строкой под ценой, счётчик и кнопка — в один ряд.
        Счётчик по умолчанию занимает всю дорожку (312 px из 312), из-за чего
        кнопка уезжала на свой ряд и пряталась за полосой согласия на куки.
        Ширина счётчика ограничена, кнопка забирает остаток. */
  section.product .product__tocart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  section.product .product__tocart > .product__tocart__counttext { order: 0; flex: 1 0 100%; margin: 0; }
  section.product .product__tocart > .ui-spinner { order: 1; margin: 0; flex: 0 0 auto; width: 124px; min-width: 124px; }
  section.product .product__tocart > input.btn,
  section.product .product__tocart > input[type="button"] { order: 2; margin: 0; flex: 1 1 auto; width: auto; }

  /* воздух между ценой и рядом покупки — 20 px вместо 20+18 */
  section.product .product__cart .product__price,
  section.product .product__cart .product__price.shop-item-price { margin-bottom: 10px; }

  /* фасовка для карточек без формы покупки — та же строка, что и в форме */
  section.product .product__pack { font-size: 15px; color: #666; margin: 2px 0 8px; }
  section.product .product__pack-label { color: #909090; }
}

/* SOL47 §A3 — липкая полоса действия (mpkm-pdp-sticky-buy.js).
 * Место под неё внизу страницы зарезервировано С ПЕРВОЙ ОТРИСОВКИ: если
 * добавлять отступ в момент показа полосы, это и есть сдвиг раскладки.
 * Полоса согласия на куки прибавляет своё (правило SOL46 §D3) — величины
 * складываются, а не спорят.
 */
@media screen and (max-width: 767px) {
  body { padding-bottom: 72px; }
  html.mpkm-cookie-on body { padding-bottom: calc(var(--mpkm-cookie-h, 0px) + 72px); }

  .mpkm-pdp-buybar {
    position: fixed; left: 12px; right: 12px; bottom: 8px;
    z-index: 2147482000;               /* ниже полосы куки (2147483000), выше прочего */
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px 8px 14px;
    background: #fff; border: 1px solid #e3e3e3; border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
  }
  .mpkm-pdp-buybar[hidden] { display: none; }
  .mpkm-pdp-buybar__price {
    font-family: "Golos Text", system-ui, Arial, sans-serif;
    font-size: 19px; font-weight: 700; color: #111; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0;
  }
  .mpkm-pdp-buybar__btn {
    flex: 0 0 auto; min-height: 44px; padding: 0 20px;
    background: var(--brand, #FFCC29); color: #000; border: 0; border-radius: 23px;
    font-family: "Golos Text", system-ui, Arial, sans-serif;
    font-size: 17px; font-weight: 700; line-height: 44px; cursor: pointer;
  }
}