/* Раздел «Аксессуары» (28.09.2026) — поверх catalog.css, outexp-catalog.css и mebel.css на
   странице раздела и поверх product.css, outexp-product.css и mebel-product.css на карточке.

   Своего здесь немного: кружки цвета на плитке (цвет — вариант, как у пергол), клетка-сцена
   в одну колонку, квадратная галерея карточки и блок преимуществ. Всё остальное — общие
   правила витрины, и править вид плитки надо там, а не здесь. */

/* ── плитка: цвет в подписи ──────────────────────────────────────────────── */

/* С 29.09 плитка — на цвет, а не на товар (разбор в `AccessorySection.astro`), и кружков-
   переключателей на ней больше нет. Цвет — второй строкой под именем с образцом (`--sw` из
   `swatches` в `accessories.ts`). Строка есть у ВСЕХ плиток раздела, поэтому ряды ровные:
   имя, цвет, ниже цена и стрелка. */
.acard .ccolor {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.acard .ccolor i {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--sw, #9aa3a8);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.28);
}

/* ── сцена в одну клетку ─────────────────────────────────────────────────── */

/* Квадратная сцена (три держателя) на трёх столбцах — с 10.10.2026 первым рядом во всю ширину
   (владелец: «в начало фотку, где их 3»). Широкого кадра нет — квадрат целиком по центру, по
   бокам тот же кадр, размытый (`.fscene-blur`). Высоту блоку задаёт `height`, а не
   `aspect-ratio`: содержимое абсолютное, и `aspect-ratio` с таким содержимым Safari схлопывает. */
/* Селекторы с `.fgrid.agrid` — сильнее общих `.fgrid .fscene-one` (span 1, ниже по файлу) и
   `.fscene img` (display: block, mebel.css): с равной силой они перебивали (замер 10.10). */
.fgrid.agrid .fscene-one .fscene-blur {
  display: none;
}

@media (min-width: 1001px) {
  .fgrid.agrid .fscene-one {
    grid-column: 1 / -1;
    height: clamp(360px, 32vw, 440px);
  }

  .fgrid.agrid .fscene-one .fscene-main {
    object-fit: contain;
  }

  /* Широкий кадр трёх держателей (13.10) — во всю клетку, без размытых боков. */
  .fgrid.agrid .fscene-wide .fscene-main {
    object-fit: cover;
  }

  .fgrid.agrid .fscene-one .fscene-blur {
    display: block;
    /* Сильно и светлее: при 28 px тёмные шланги с краёв кадра расплывались серыми пятнами. */
    filter: blur(56px) brightness(1.18) saturate(0.6);
    transform: scale(1.3);
  }
}

/* Широкая сцена только для трёх столбцов (`desktopOnly`): на ≤1000 px сцена занимает ряд
   целиком, и две сцены встали бы вплотную — две полосы подряд. */
@media (max-width: 1000px) {
  .agrid .fscene-d {
    display: none;
  }
}

/* Два столбца у держателей (10.10.2026): свой порядок `--ot`, если задан (на телефоне кадр
   трёх держателей первый, здесь — последний, рядом с молочной плиткой), и сцена, скрытая
   только здесь (`tabletOff` в `AccessorySection.astro`): на телефоне за ней сразу её плитка. */
@media (min-width: 621px) and (max-width: 1000px) {
  .agrid > * {
    order: var(--ot, var(--o, 0));
  }

  .agrid .fscene-t {
    display: none;
  }
}

/* Кадр трёх держателей квадратный, и на два столбца он не растягивается — встаёт в клетку
   рядом с плитками и тянется по высоте ряда (`align-self: stretch`), как сцены мебели. */
.fgrid .fscene-one {
  grid-column: span 1;
}

.fgrid .fscene-one img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1000px) {
  /* На двух столбцах `.fscene` получает 16:9 — для клетки в одну колонку это полоса ниже
     соседней плитки. Здесь высоту снова задаёт ряд. */
  .fgrid .fscene.fscene-one {
    aspect-ratio: auto;
  }
}

@media (max-width: 620px) {
  /* Одна колонка: высоту даёт сама картинка В ПОТОКЕ, а не `aspect-ratio` у блока с
     абсолютным содержимым — такой блок Safari на iPhone схлопывает в ноль (снято на блоке
     «Доверие» 25.09, `home.css`). */
  .fgrid .fscene.fscene-one {
    aspect-ratio: auto;
  }

  .fgrid .fscene-one img {
    position: static;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* С 13.10 картинка внутри `<picture>` (широкий кадр для ПК), а `.fscene picture` в mebel.css —
     абсолютный: без этого клетка теряет высоту картинки в потоке и схлопывается. */
  .fgrid .fscene-one picture {
    position: static;
    height: auto;
  }
}

/* ── карточка: квадратная галерея ─────────────────────────────────────────── */

/* У мебели галерея 4:3 (`mebel-product.css`), у аксессуаров — квадрат, как у пергол: бокс
   выше, чем шире, держатель вытянут вверх. */
.aks-product .gal .frame {
  aspect-ratio: 1 / 1;
}

.aks-product .gthumb {
  aspect-ratio: 1 / 1;
  width: 60px;
}

/* Кадры и миниатюры чужого цвета скрыты атрибутом `hidden`. `.gal img` в product.css
   переопределяет вид всех картинок галереи — страховка, чтобы атрибут всегда побеждал. */
.aks-product [hidden] {
  display: none !important;
}

/* Выбор цвета — те же плитки `.swopt`, что в пергольной карточке; отбивка сверху меньше:
   над ним нет раздела «Размер». */
.aks-product .aconf {
  margin-top: 22px;
}

.aks-product .aconf .swchip {
  border: 1px solid rgba(var(--ink-rgb), 0.18);
}

/* Описание стоит ПОСЛЕ кнопки заказа: над кнопкой — только то, что нужно для решения
   (имя, цена, лид, цвет), подробности ниже. */
.aks-product .pdesc {
  margin-top: 26px;
}

/* ── преимущества ─────────────────────────────────────────────────────────── */

.afeat {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.afeat li {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface);
}

.afeat b {
  display: block;
  margin-bottom: 4px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.afeat span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .afeat {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── сцены карточки ──────────────────────────────────────────────────────── */

/* Сетка сцен — своя у каждого цвета (`AccessoryProduct.astro`), чужие скрыты атрибутом
   `hidden`. У `.scenegrid` в `outexp-product.css` стоит `display: grid`, а класс с display в
   этом проекте уже обыгрывал `[hidden]` (`.confnote`, `.trow`) — поэтому явно. */
.aks-product .scenegrid[hidden] {
  display: none;
}

/* Галерея из одного кадра (у держателя на цвет одна вырезка на белом): стрелки, «1 / 1» и
   одна миниатюра — пустые элементы управления. Класс `one` ставят сервер и
   `aksessuary-product.js` при смене цвета. */
.aks-product .gal.one .gnav,
.aks-product .gal.one .gcount,
.aks-product .gal.one .gthumbs {
  display: none;
}

/* Вертикальные сцены (08.10, партия держателей 3:4) — парами в две колонки, на любой ширине:
   кадр 3:4 во всю ширину колонки карточки был бы выше экрана. Горизонтальный кадр после них
   («три держателя») — во всю ширину. Правило `outexp-product.css` «нечётный первый — во всю
   ширину» здесь перебивается: первым стоит вертикальный, растянуть его — тот же лишний рост. */
.aks-product .scenegrid.tallset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aks-product .scenegrid.tallset > .sceneshot.tall {
  grid-column: auto;
  border-radius: 14px;
}

.aks-product .scenegrid.tallset > .sceneshot:not(.tall) {
  grid-column: 1 / -1;
  border-radius: 14px;
}

.aks-product .sceneshot.tall img {
  aspect-ratio: 3 / 4;
}