/* Стандарт карточки товара (правила владельца 2026-09-24). Подключён в raw/index.html.
   Скилл: PorschaRu/.claude/skills/porsha-card-standard. Проверка: scripts/check_card_standard.py.
   Эталон утверждён владельцем для Full HD — страница АКПП (товар 3972); остальные экраны сделаны по тому же
   принципу: всё видно целиком, кнопка «В корзину» в окне с запасом не меньше 40 px.

   1. Место под фото фиксированное, фото вписывается целиком, без обрезки и растягивания, от текста не зависит:
      компьютер от 1440 px — 648×454, верх на 80 px ниже начала карточки; 992–1439 — 470×329 там же;
      телефон, планшет, узкое окно (до 991) — по центру, высота от высоты окна: (окно − 450 px), но не больше 454
      и не меньше 180 px (телефон 390×660 — 314×210, планшет — 648×454); ширина — по пропорциям, не шире экрана.
   2. Высота текста фиксирована (лишнее обрезается «…»): название — не больше 2 строк (на телефоне уже 390 px — 3;
      в данных — до 60 знаков, тогда обрезки нет); описание
      товара — один абзац не больше 2 строк на компьютере и 3 строк на телефоне и планшете (в данных — до 110 знаков,
      тогда обрезки нет); общий текст шаблона укорочен в /js/product-cards.js.
   3. Отступ под хлебными крошками одинаковый: 63 px от строки крошек до строки названия (в исходном шаблоне было
      15/33/25 px). Название, код, описание, цена и кнопка опущены вместе; фото остаётся на месте.
   4. Кнопка «В корзину» всегда в окне с запасом. Если окно ниже, чем нужно для полной раскладки (телефон, планшет,
      ноутбук, невысокое окно), цена и кнопка стоят сразу после описания, а общий текст (консультация, доставка,
      гарантия) — под кнопкой. Полная раскладка (утверждённый эталон) — когда окно не ниже 891 px (от 1440 px в
      ширину) или 905 px (992–1439): там кнопка кончается на 851/865 px.
   5. Промежуток 461–991 px (планшеты, узкое окно) получает телефонную раскладку сайта — scripts/tablet-range.py.
   Где исходный стиль сайта сильнее по приоритету (у него есть атрибут data-v), значение задано с !important. */
#product .box-img-product img {
  aspect-ratio: 1280 / 896;
  object-fit: contain;
  height: auto;
}

/* 1. Планшет и узкое окно: фото целиком (исходный стиль телефона ограничивал блок 260 px и обрезал фото). */
@media (max-width: 991px) {
  #product .box-product__wrapper .box-img-product {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: center;
  }
  /* высота фото — от высоты окна (100svh — окно с панелями браузера), не от текста: не больше 454 и не меньше 180 */
  #product .box-product__wrapper .box-img-product img {
    width: auto !important;
    max-width: 100% !important;
    height: 230px !important;
    height: clamp(180px, calc(100svh - 450px), 454px) !important;
    margin: 0 auto;
  }
  #product .box-info-product .name-product,
  #product .box-info-product .product-description p[data-pc-card] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  #product .box-info-product .product-description p[data-pc-card] {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* 4. Телефон: плотнее отступы — кнопка в первом экране с запасом. */
@media (max-width: 575px) {
  #product .box-product__wrapper .box-img-product {
    margin-bottom: 12px !important;
  }
  #product .box-info-product > .price {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }
}

/* 2. Узкий телефон (уже 390 px): заголовок до 60 знаков занимает 3 строки — третья строка разрешена,
   фото на одну строку ниже (и не меньше 154 px вместо 180), чтобы кнопка осталась в окне с тем же запасом
   (замер 360×620: с 180 px кнопка была в 25 px от низа окна). */
@media (max-width: 389px) {
  #product .box-product__wrapper .box-img-product img {
    height: clamp(154px, calc(100svh - 476px), 454px) !important;
  }
  #product .box-info-product .name-product {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* 1–3. Компьютер: место фото, лимит строк, отступ под крошками. */
@media (min-width: 992px) {
  #product .box-product__wrapper .box-img-product {
    align-self: flex-start;
    height: auto;
    padding-top: 80px;
  }
  #product .box-product__wrapper .box-img-product img {
    display: block;
    width: 648px;
    max-width: 100%;
  }
  #product .box-info-product .name-product,
  #product .box-info-product .product-description p[data-pc-card] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  #product .box-product__wrapper .box-info-product {
    padding-top: 38px;
  }
}
/* 992–1023: в исходном шаблоне блок крошек здесь схлопывается и карточка начинается на 25 px выше — возвращаем
   название и фото туда же, где они стоят на 1024–1439. */
@media (min-width: 992px) and (max-width: 1023px) {
  #product .box-product__wrapper .box-info-product {
    padding-top: 63px;
  }
  #product .box-product__wrapper .box-img-product {
    padding-top: 105px;
  }
}
@media (min-width: 1440px) {
  #product .box-product__wrapper .box-info-product {
    padding-top: 30px;
  }
}
@media (min-width: 1920px) {
  #product .box-product__wrapper .box-info-product {
    padding-top: 48px;
  }
}

/* 4. Компактный порядок: название, код, описание, цена, кнопка, затем общий текст шаблона. */
@media (max-width: 991px), (min-width: 992px) and (max-width: 1439px) and (max-height: 904px), (min-width: 1440px) and (max-height: 890px) {
  #product .box-info-product {
    display: flex;
    flex-direction: column;
  }
  #product .box-info-product > .product-description {
    display: contents;
  }
  #product .box-info-product > .name-product { order: 1; }
  #product .box-info-product > .code { order: 2; }
  #product .box-info-product > .product-description > p[data-pc-card] { order: 3; margin-top: 14px !important; }
  #product .box-info-product > .price { order: 4; }
  #product .box-info-product > .add-to-cart { order: 5; }
  #product .box-info-product > .product-description > :not([data-pc-card]) { order: 6; }
  #product .box-info-product > .product-description > p[data-pc-card] + *,
  #product .box-info-product > .product-description > :first-child:not([data-pc-card]) { margin-top: 32px !important; }
  #product .box-info-product > .box-info-product__navigate { order: 7; }
}
@media (max-width: 991px) {
  #product .box-info-product > .product-description > p[data-pc-card] + *,
  #product .box-info-product > .product-description > :first-child:not([data-pc-card]) { margin-top: 8px !important; }
}
@media (max-width: 575px) {
  #product .box-info-product > .product-description > p[data-pc-card] { margin-top: 10px !important; }
}

/* Полное описание самых маржинальных товаров (владелец 2026-09-30) — отдельный блок ПОД блоком фото/цены/кнопки,
   верх карточки (правила 1–4) не меняется. Абзацы — копии p.text сайта (тот же шрифт и цвет). */
#product .pc-details {
  margin-top: 48px;
  max-width: 1000px;
}
#product .pc-details .pc-details__key {
  font-weight: 600;
}
@media (max-width: 991px) {
  #product .pc-details {
    margin-top: 28px;
  }
}

/* Сноска «*Все фото… Наличие и цену уточняйте у менеджера» (владелец 2026-09-30): на треть мельче и не жирная
   (исходный стиль сайта делал последнюю строку описания жирной). */
#product .box-info-product .product-description p.text[data-pc-note] {
  font-weight: 400 !important;
  font-size: max(0.68em, 10px) !important;
  line-height: 1.4 !important;
}
/* Правило переноса: предложение, которое короче строки, не разрывается на хвост из пары слов — целиком переходит на
   новую строку; длиннее строки — переносится как обычный текст (решает product-cards.js, fitSentences). */
#product .pc-details .pc-sent {
  max-width: 100%;
}