/* ==========================================================================
   Карточка товара при ширине окна 1024–1099 px: iPad в альбоме (1024),
   iPad 10,2" в альбоме (1080), узкое окно ноутбука.

   Что ломалось (замечено 11.11.2026): всё вставало в один столбец. Сверху
   фото, под ним описание и блок покупки шириной 420px, правые две трети
   экрана пустые. «Вес пачки», «Помол» и «В корзину» уходили за первый
   экран, а липкий блок покупки при прокрутке наезжал на вкладки
   «Характеристики / Описание» и на текст под ними.

   Почему. Три колонки (описание | фото | покупка) собраны в site.css в
   блоках @media (min-width:1100px), строки 767, 809, 1238 и 1331. Для
   ≤1099 там же блоки под планшет (строки 863, 1210, 1323, 3307): одна
   колонка, фото первым, зёрна и узоры спрятаны, миниатюры рядом под фото.
   mobile/tablet.css строит из этого свою сетку, но только до 1023. На
   1024–1099 планшетные правила действовали сырыми.

   Здесь на 1024–1099 возвращаем раскладку от 1100: те же значения, что в
   блоках min-width:1100px, и отмена каждого правила из блоков ≤1099.
   --mp при 1024 и 1100 одинаковый (0,82: --u стоит на своём полу), поэтому
   колонки выходят 266 | 440 | 264 против 266 | 492 | 264 на 1100.

   Вес (0,2,0) против (0,1,0) в site.css, чтобы не зависеть от порядка
   подключения файлов. Ниже 1024 и от 1100 файл не действует.
   ========================================================================== */

@media (min-width:1024px) and (max-width:1099px){
  /* site.css ≤1099: .pdp-grid{grid-template-columns:1fr}.
     Колонки, промежутки и области из site.css:1238 и 1331. */
  .pdp .pdp-grid{grid-template-columns:calc(325 * var(--mp)) minmax(0,1fr) calc(322 * var(--mp));
    gap:0;position:relative;
    grid-template-areas:
      "info  photo buy"
      "tabs  tabs  buy"
      "below below buy";
    grid-template-rows:auto auto 1fr}
  .pdp-grid > .pdp-info{grid-area:info}
  .pdp-grid > .pdp-tabs{grid-area:tabs}
  .pdp-grid > .pdp-below{grid-area:below}

  /* site.css ≤1099: .pdp-photo{order:-1}, {flex-direction:column;
     align-items:center}. Поля фото из site.css:1238. */
  .pdp-grid > .pdp-photo{grid-area:photo;order:0;
    margin:0 calc(-14 * var(--mp));padding-top:calc(78 * var(--mp));
    flex-direction:row;align-items:flex-start}

  /* site.css ≤1099: .pdp-buy{max-width:420px}. Поля из site.css:1331.
     Блок покупки снова в своей правой колонке и при прокрутке едет по ней,
     а не по вкладкам. */
  .pdp-grid > .pdp-buy{grid-area:buy;max-width:none;
    margin-left:calc(24 * var(--mp));margin-top:calc(96 * var(--mp))}

  /* site.css ≤1099: .pdp-pack{max-width:min(100%,420px)}. */
  .pdp-photo .pdp-pack{max-width:calc(737 * var(--mp))}

  /* site.css ≤1099: .pdp-bean{display:none} и .pdp-deco{display:none}. */
  .pdp-photo .pdp-bean{display:block}
  .pdp-grid > .pdp-deco{display:block}

  /* site.css ≤1099: миниатюры рядом под фото. На десктопе они столбиком
     поверх левого края снимка (site.css: .pdp-thumbs{position:absolute;
     flex-direction:column}, top и left там же, без условия ширины). */
  .pdp-photo .pdp-thumbs{position:absolute;order:0;flex-direction:column;
    flex-wrap:nowrap;justify-content:normal;max-width:none;margin:0}
}