/* Карточка товара: характеристики переезжают под галерею.

   Раньше блок `.specs` стоял отдельной секцией ПОСЛЕ сетки `.pgrid`, то есть под обеими
   колонками. Правая колонка (цена, размеры, комплект, форма) заметно выше галереи, поэтому
   под галереей оставалась пустая полоса высотой почти в экран, а характеристики начинались
   только под всем этим. Теперь `.specs` — третий элемент сетки: раскладка ставит его в первую
   колонку под галерею, и пустота заполняется. */

/* Одного переноса в сетку мало. Третий элемент попадает во вторую строку, а высоту первой
   задаёт правая колонка — характеристики снова оказывались под всей карточкой, только уже
   слева. Поэтому правая колонка растягивается на обе строки, а характеристики встают во
   вторую строку первой колонки, то есть впритык под галерею. */
.pgrid .pinfo {
  grid-row: 1 / span 2;
}

.pgrid .specs {
  grid-column: 1;
  grid-row: 2;
  margin: 28px 0 0;
}

/* На узком экране колонки складываются в одну, и характеристики оказываются между галереей и
   ценой — то есть между картинкой и главным, ради чего человек пришёл. Возвращаем их вниз. */
@media (max-width: 900px) {
  .pgrid {
    display: flex;
    flex-direction: column;
  }

  .pgrid .specs {
    order: 2;
    margin-top: clamp(40px, 8vw, 64px);
  }

  /* Ширину задаём явно: в колоночном flex-контейнере ширина элемента считается по контенту,
     а внутри галереи все кадры лежат абсолютно — .gal схлопывалась в ноль, и карточка товара
     на телефоне открывалась вообще без фотографии. */
  .pgrid .gal {
    order: 0;
    width: 100%;
  }

  .pgrid .pinfo {
    order: 1;
  }
}

/* Ссылка на соседнюю линейку. Переключатель размеров теперь показывает только свою линейку —
   иначе он обещал «пять вариантов одного товара», а на деле уводил в другой класс
   конструкции с ценой в полтора раза выше. Ссылка возвращает потерянные варианты, но уже
   честно, как отдельную линейку. */
.lineswitch {
  margin: 12px 0 0;
  font-size: 0.9rem;
}

.lineswitch a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  padding-bottom: 1px;
}

.lineswitch a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

/* Метка на плитках нижней карусели: там показаны обе линейки, и без метки соседняя модель
   выглядит просто «дороже непонятно почему». */
.mpwr {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.92);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.mini {
  position: relative;
}

/* Что изменилось в конфигурации при смене размера.

   Пустая строка не занимает места и не видна: показывается только когда есть что сказать.
   Класс, а не атрибут `hidden`, — в этом проекте `[hidden]` уже проигрывал классу,
   задающему display, и молча оставлял элемент на экране. */
.confnote {
  display: none;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  font-family: 'Manrope', sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}

.confnote.on {
  display: block;
}