/* Карточка товара на телефоне (версия B): первый экран. Стили включает html.pm-on (его ставит product-mobile.js, пока
   ширина ≤ 767 px; переменные --pm-* объявлены в product-mobile.css): без скрипта карточка остаётся такой, какой её
   отдаёт тема. Десктоп не меняется: всё внутри одного @media. Режим «главный товар не продаётся, продаются позиции»
   включает класс product__card--tcepro (флажок товара «Не предназначен для продажи»), своего признака нет. */
@media screen and (max-width: 767px) {
  /* пока прилип поиск по модулям, полоса поиска сайта в шапке прячется: на экране остаётся больше списка */
  html.m-tight .header__search { display: none; }

  /* фото слева, название справа, цены и кнопка — в первом экране */
  .pm-on .product__card.pm-hero {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start;
    padding-bottom: 20px; border-bottom: 1px solid var(--pm-line);
  }
  .pm-on .pm-hero .product__info { display: contents; }
  .pm-on .pm-hero .product__img-holder { grid-column: 1; grid-row: 1 / span 3; width: 96px; margin: 0; }
  .pm-on .pm-hero .product__img { display: block; width: 96px; height: 96px; object-fit: contain; }
  .pm-on .pm-hero .product__name { grid-column: 2; grid-row: 1; font-size: 24px; line-height: 1.15; margin: 4px 0 2px; text-wrap: balance; }
  .pm-on .pm-long .product__name { font-size: 20px; line-height: 1.2; }
  .pm-on .pm-hero .product__info > .vendor-code { grid-column: 2; grid-row: 2; }
  .pm-on .pm-hero .product__info > .product__property:not(.product__property--basic) {
    grid-column: 2; grid-row: 3; margin: 2px 0 0; padding: 0; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px;
  }
  .pm-on .pm-hero .product__info > .product__property:not(.product__property--basic) .product__property-icon { display: none; }
  .pm-on .pm-hero .product__info > .product__property:not(.product__property--basic) .product__property-title { font-size: 13px; font-weight: 500; color: var(--pm-gray); padding: 0; }
  .pm-on .pm-hero .product__manufacturer { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .pm-on .pm-hero .product__property--basic,
  .pm-on .pm-hero:not(.pm-parts) .product__go-to-modules,
  .pm-on .pm-hero:not(.pm-parts) .product__free-base { display: none !important; }

  /* две цены: ключ и «от N» за модуль; у товара «по частям» — «от N» и число позиций */
  .pm-on .pm-facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 16px 0 12px; background: var(--pm-line); border: 1px solid var(--pm-line); }
  .pm-on .pm-fact { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px 12px; background: #fff; min-width: 0; }
  .pm-on .pm-fact__k { font-size: 12px; line-height: 1.3; color: var(--pm-gray); font-weight: 500; }
  .pm-on .pm-fact__v { font-family: "Open Sans", sans-serif; font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--pm-ink); white-space: nowrap; }
  .pm-on .pm-fact--red .pm-fact__v { color: var(--pm-red); }

  /* кнопка «Добавить» ключа — настоящая button; ссылку темы с её обработчиком скрипт нажимает сам */
  .pm-on .pm-hero:not(.pm-parts) .product__buy-controls { grid-column: 1 / -1; padding: 0; display: flex; flex-direction: column; }
  .pm-on .pm-hero .product__buy-btn { display: none; }
  .pm-on .product__availability { order: -1; margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--pm-gray); }
  .pm-on .pm-key {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px;
    background: var(--pm-red); border: 2px solid var(--pm-red); color: #fff; font: 700 14px "Gotham Pro", sans-serif; line-height: inherit;
    cursor: pointer; touch-action: manipulation; transition: transform 160ms var(--pm-ease);
  }
  .pm-on .pm-key[aria-pressed="true"] { background: #fff; color: var(--pm-red); cursor: default; }
  .pm-on .pm-key[aria-disabled="true"]:not([aria-pressed="true"]) { background: #999; border-color: #999; cursor: default; }
  .pm-on .pm-key:active:not([aria-pressed="true"]):not([aria-disabled="true"]) { transform: scale(.97); }

  /* товар «по частям»: пояснение темы (зелёная плашка), цена «от», число позиций и кнопка к списку вместо «снят с продажи» */
  .pm-on .pm-parts .product__free-base { grid-column: 1 / -1; display: flex !important; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 15px; background: rgb(237, 246, 241); }
  .pm-on .pm-parts .product__free-base-icon { flex: 0 0 24px; width: 24px; height: 24px; margin: 1px 0 0; background-size: contain; }
  .pm-on .pm-parts .product__free-base-text { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: var(--pm-ink); }
  .pm-on .pm-parts .pm-facts { margin: 12px 0 12px; }
  .pm-on .pm-parts .product__go-to-modules {
    grid-column: 1 / -1; display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 10px 0; padding: 10px 20px;
    background: var(--pm-red); border: 2px solid var(--pm-red); color: #fff; font: 700 14px/1.2 "Gotham Pro", sans-serif; text-align: center; text-decoration: none;
    transition: transform 160ms var(--pm-ease);
  }
  .pm-on .pm-parts .product__go-to-modules:active { transform: scale(.97); }
  @media (hover: hover) and (pointer: fine) {
    .pm-on .pm-parts .product__go-to-modules:hover { background: #fff; color: var(--pm-red); }
  }
  .pm-on .pm-notice { grid-column: 1 / -1; margin: 12px 0 0; padding: 10px 12px; background: var(--pm-red-06); font-size: 13px; line-height: 1.45; font-weight: 500; }
  .pm-on .pm-notice > * { margin: 0; }
  .pm-on .pm-notice > * + * { margin-top: 6px; }
  .pm-on .pm-rule { grid-column: 1 / -1; margin: 12px 0 0; padding: 10px 12px; background: var(--pm-red-06); color: var(--pm-ink); font-size: 13px; line-height: 1.45; font-weight: 500; }
  .pm-on .pm-hero :focus-visible { outline: 2px solid var(--pm-red); outline-offset: 2px; }
}