/* ============================================================================
   Демонстрационный пример: интернет-магазин металлопроката «Сортамент 66».
   Веб-студия Ириночи. Только локальные ресурсы, ни одного внешнего запроса.

   ИМЯ ФИРМЫ. В задании было «Металлбаза 66». Проверка показала, что
   «Металлбаза» — действующая сеть металлобаз (metallbaza.ru) с филиалом
   в Екатеринбурге (ekb.metallbaza.ru), а «Уральская Металлобаза» —
   зарегистрированное в Екатеринбурге ООО. Оба варианта из задания
   («Металлбаза 96», «Уралметбаза») слишком близки к живым фирмам,
   поэтому взято другое имя — «Сортамент 66»: сортамент — это отраслевое
   слово для перечня профилей и размеров проката, 66 — код Свердловской
   области. Фирм с таким названием поиск не нашёл.

   ДИЗАЙН. Вместо фотографий — чертежи сечений на миллиметровке:
   покупатель металла выбирает по профилю и размеру, а не по картинке.
   Отсюда язык страницы — размерные линии с засечками, штриховка разреза,
   основная надпись (штамп) в первом экране и табличные цифры в ценах.
   ============================================================================ */

:root {
  /* Плашка «демонстрационный пример» — общий слой берёт цвета отсюда. */
  --demo-fon: #1A1D21;
  --demo-tekst: #FFFFFF;
  --demo-knopka-fon: #12924F;
  --demo-knopka-tekst: #FFFFFF;

  /* Палитра магазина. */
  --fon: #FFFFFF;
  --podlozhka: #F6F7F9;
  --tekst: #1A1D21;
  /* Приглушённый затемнён против заданного #6B7480: тот даёт 4,74 : 1 на белом,
     но всего 4,42 : 1 на подложке #F6F7F9 и 4,00 : 1 на линиях миллиметровки,
     а этим цветом набраны подписи и в подвале, и на плитах. #626B76 держит
     5,41 / 5,04 / 4,56 — норму 4,5 на всех трёх фонах. */
  --priglushonnyy: #626B76;
  --linii: #E4E7EB;
  --ssylka: #0B62C4;
  --deystvie: #12924F;
  /* Тёмный зелёный — для зелёного ТЕКСТА на белом: заданный #12924F даёт
     контраст 4,0 : 1 при норме 4,5, а #0D7A41 — 5,3 : 1. На заливке кнопок
     остаётся заданный #12924F. */
  --deystvie-temnyy: #0D7A41;
  --est: #0D7A41;
  /* Тот же случай, что и с зелёным: заданный #B26A00 даёт на белом 4,24 : 1
     при норме 4,5, поэтому метка «под заказ» рисуется затемнённым #9A5C00
     (5,4 : 1). */
  --zakaz: #9A5C00;

  /* Служебные оттенки чертежа. */
  --setka-chertezha: #E9ECF0;
  --shtrih: #C3CAD3;

  /* Ритм. */
  --otstup: clamp(40px, 5.5vw, 72px);
  --radius: 6px;
}

/* --- база ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 400 15px/1.55 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a { color: var(--ssylka); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ssylka);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Цифры в ценах, таблицах и размерах — табличные, чтобы столбцы совпадали. */
.chisla, .cena, table, input[type="text"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.obolochka {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Набор чертежей сечений: лежит в начале страницы, показывается через <use>. */
.sprait { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Мелкая надпись-ярлык: подписи на чертеже, надзаголовки, служебные строки. */
.yarlyk {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.priglushonno { color: var(--priglushonnyy); }

/* Сетка с общими волосяными линиями: ячейки стыкуются, как в прайс-листе. */
.setka-linii {
  display: grid;
  gap: 1px;
  background: var(--linii);
  border: 1px solid var(--linii);
}
.setka-linii > * { background: var(--fon); }

/* --- кнопки --------------------------------------------------------------- */

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopka:hover { text-decoration: none; }

.knopka--glavnaya { background: var(--deystvie); color: #fff; }
.knopka--glavnaya:hover { background: var(--deystvie-temnyy); }

.knopka--obvodka { border-color: var(--linii); color: var(--tekst); background: var(--fon); }
.knopka--obvodka:hover { border-color: var(--tekst); }

/* «В корзину» в карточке: зелёная обводка, заливается по наведению. */
.knopka--korzina {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-color: #BCE0CC;
  color: var(--deystvie-temnyy);
  background: var(--fon);
  font-size: 14px;
}
.knopka--korzina:hover { background: var(--deystvie); border-color: var(--deystvie); color: #fff; }

/* --- шапка ---------------------------------------------------------------- */

.shapka { border-bottom: 1px solid var(--linii); }

.shapka__verh {
  background: var(--podlozhka);
  border-bottom: 1px solid var(--linii);
  font-size: 13px;
  color: var(--priglushonnyy);
}
.shapka__verh-ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.shapka__gorod { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst); }
.shapka__gorod svg { width: 14px; height: 14px; color: var(--priglushonnyy); }
.shapka__svyaz { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.shapka__svyaz a { color: var(--tekst); }
.shapka__svyaz a:hover { color: var(--ssylka); }

.shapka__glavnaya {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); }
.logo:hover { text-decoration: none; }
.logo__znak { width: 30px; height: 30px; flex: none; color: var(--tekst); }
.logo__slova { display: flex; flex-direction: column; gap: 1px; }
.logo__imya { display: flex; align-items: center; gap: 6px; }
.logo__slovo { font-size: 19px; font-weight: 600; letter-spacing: 0.04em; }
.logo__nomer {
  padding: 1px 5px;
  border: 1px solid var(--tekst);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.logo__podpis { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--priglushonnyy); }

.poisk { display: flex; flex: 1 1 260px; min-width: 0; }
.poisk__pole {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linii);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--fon);
}
.poisk__pole::placeholder { color: var(--priglushonnyy); }
.poisk__pole:focus { outline: none; border-color: var(--tekst); }
.poisk__knopka {
  flex: none;
  min-height: 44px;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 18px;
}
.poisk__knopka svg { width: 17px; height: 17px; }
.poisk__slovo { display: none; }

.korzina-ssylka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linii);
  border-radius: var(--radius);
  color: var(--tekst);
  font-weight: 600;
  transition: border-color .15s;
}
.korzina-ssylka:hover { border-color: var(--tekst); text-decoration: none; }
.korzina-ssylka__schyot {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--deystvie);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linii);
  border-radius: var(--radius);
  background: var(--fon);
  cursor: pointer;
}
.burger svg { width: 18px; height: 14px; }

/* Меню разделов. */
.menyu { border-top: 1px solid var(--linii); }
.menyu__spisok { display: flex; flex-wrap: wrap; }
.menyu__punkt { border-right: 1px solid var(--linii); }
.menyu__punkt:first-child { border-left: 1px solid var(--linii); }
.menyu__ssylka {
  display: block;
  padding: 13px 18px;
  color: var(--tekst);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color .15s, color .15s;
}
.menyu__ssylka:hover { background: var(--podlozhka); text-decoration: none; }
.menyu__ssylka--tekushchiy { background: var(--tekst); color: #fff; }
.menyu__ssylka--tekushchiy:hover { background: var(--tekst); color: #fff; }

/* --- чертёжная плита (заглушка вместо фото) -------------------------------- */

.plita {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--podlozhka);
  background-image:
    linear-gradient(var(--setka-chertezha) 1px, transparent 1px),
    linear-gradient(90deg, var(--setka-chertezha) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}
/* --masshtab задаётся на карточке: сечения разного диаметра рисуются разного размера. */
.plita__risunok {
  width: 70%;
  height: auto;
  color: var(--tekst);
  font-family: 'Onest', system-ui, sans-serif;
  transform: scale(var(--masshtab, 1));
  transition: transform .18s ease;
}
.plita__podpis {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--priglushonnyy);
  font-variant-numeric: tabular-nums;
}
.plita__gost {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--priglushonnyy);
  font-variant-numeric: tabular-nums;
}

/* --- первый экран --------------------------------------------------------- */

.pervyy-ekran { border-bottom: 1px solid var(--linii); }
.pervyy-ekran__setka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(32px, 4.5vw, 60px) 0;
}
.pervyy-ekran__nadzagolovok { margin-bottom: 14px; }
.pervyy-ekran__zagolovok {
  font-size: clamp(29px, 4.1vw, 46px);
  letter-spacing: -0.025em;
}
.pervyy-ekran__opisanie {
  margin-top: 18px;
  max-width: 34em;
  font-size: 16.5px;
  color: #414852;
}
.pervyy-ekran__knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pervyy-ekran__snoska { margin-top: 18px; font-size: 13px; color: var(--priglushonnyy); }

/* Лист чертежа: миллиметровка + рамка. */
.list-chertezha {
  position: relative;
  border: 1px solid var(--linii);
  background-color: var(--podlozhka);
  background-image:
    linear-gradient(var(--setka-chertezha) 1px, transparent 1px),
    linear-gradient(90deg, var(--setka-chertezha) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}
.list-chertezha__risunok {
  display: block;
  width: 100%;
  height: auto;
  color: var(--tekst);
  font-family: 'Onest', system-ui, sans-serif;
}
/* Узкий экран: вместо полного листа со штампом — полоса из трёх сечений. */
.list-chertezha--korotkiy { display: none; }

/* Анимации проявления чертежа здесь сознательно нет: чертёж — главный смысл
   первого экрана, и он не должен зависеть от того, отработала ли анимация
   (в любом headless-рендере она замирает на первом кадре, и блок выходит пустым).
   Движение живёт в наведении на карточки и плитки. */

/* --- полоса преимуществ --------------------------------------------------- */

.preimushchestva { grid-template-columns: repeat(4, 1fr); }
.preimushchestvo { padding: 22px 20px; }
.preimushchestvo__znak { width: 30px; height: 30px; color: var(--tekst); }
.preimushchestvo__imya { margin-top: 12px; font-size: 15.5px; font-weight: 600; }
.preimushchestvo__tekst { margin-top: 6px; font-size: 13.5px; color: var(--priglushonnyy); }

/* --- блоки страницы ------------------------------------------------------- */

.blok { padding: var(--otstup) 0; }
.blok--podlozhka { background: var(--podlozhka); border-top: 1px solid var(--linii); border-bottom: 1px solid var(--linii); }
.blok--tesnyy { padding-top: clamp(28px, 3.5vw, 44px); }

.blok__shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}
.blok__zagolovok { font-size: clamp(22px, 2.6vw, 30px); }
.blok__podpis { font-size: 14px; color: var(--priglushonnyy); }

/* --- плитки разделов (они же прайс-доска) --------------------------------- */

.razdely { grid-template-columns: repeat(6, 1fr); }
.razdel {
  display: block;
  padding: 16px 14px 18px;
  color: var(--tekst);
  transition: background-color .15s, box-shadow .15s;
}
.razdel:hover { background: var(--podlozhka); box-shadow: inset 0 0 0 1px var(--tekst); text-decoration: none; }
.razdel:hover .razdel__risunok { transform: translateY(-2px); }
.razdel__risunok { display: block; width: 100%; max-width: 116px; margin: 0 auto; color: var(--tekst); transition: transform .18s ease; }
.razdel__imya { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; text-align: center; }
.razdel__cena { display: block; margin-top: 3px; font-size: 13px; color: var(--priglushonnyy); text-align: center; font-variant-numeric: tabular-nums; }

/* --- карточка товара ------------------------------------------------------ */

.tovary { grid-template-columns: repeat(4, 1fr); }

.tovar-karta {
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s;
}
.tovar-karta:hover { box-shadow: inset 0 0 0 1px var(--tekst); }
.tovar-karta:hover .plita__risunok { transform: scale(calc(var(--masshtab, 1) * 1.05)); }
.tovar-karta__telo { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 14px 14px 16px; }
.tovar-karta__imya { font-size: 15px; font-weight: 600; color: var(--tekst); line-height: 1.3; }
.tovar-karta__imya:hover { color: var(--ssylka); text-decoration: none; }
.tovar-karta__cena {
  margin-top: auto;
  padding-top: 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tovar-karta__cena span { font-size: 13px; font-weight: 400; color: var(--priglushonnyy); }
.tovar-karta__nizhnyaya { padding: 0 14px 14px; }

.metka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.metka::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.metka--est { color: var(--est); }
.metka--zakaz { color: var(--zakaz); }

/* --- услуги (доставка, резка, самовывоз) ---------------------------------- */

.uslugi { grid-template-columns: repeat(3, 1fr); }
.usluga { padding: 24px 22px 26px; }
.usluga__imya { font-size: 17px; font-weight: 600; }
.usluga__cena { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.usluga__tekst { margin-top: 8px; font-size: 14px; color: var(--priglushonnyy); }

/* --- формы ---------------------------------------------------------------- */

.forma__setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.forma__setka--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole--shirokoe { grid-column: 1 / -1; }
.pole__podpis { font-size: 13px; font-weight: 600; color: var(--priglushonnyy); }
.pole__vvod {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--linii);
  border-radius: var(--radius);
  background: var(--fon);
}
.pole__vvod:focus { outline: none; border-color: var(--tekst); box-shadow: 0 0 0 3px rgba(11, 98, 196, .12); }
textarea.pole__vvod { min-height: 92px; resize: vertical; }
.forma__niz { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 20px; }
.forma__soglasie { font-size: 12.5px; color: var(--priglushonnyy); max-width: 42ch; }

.schyot { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.schyot__zagolovok { font-size: clamp(22px, 2.6vw, 30px); }
.schyot__tekst { margin-top: 14px; font-size: 15.5px; color: #414852; }
.schyot__spisok { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.schyot__punkt { display: flex; gap: 10px; font-size: 14.5px; }
.schyot__punkt::before { content: ''; flex: none; width: 16px; height: 2px; margin-top: 11px; background: var(--deystvie); }
.schyot__forma { padding: 26px; border: 1px solid var(--linii); border-radius: 10px; background: var(--fon); }

/* --- подвал --------------------------------------------------------------- */

.podval { background: var(--podlozhka); border-top: 3px solid var(--tekst); }
.podval__setka {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 28px 32px;
  padding: 40px 0 32px;
}
.podval__zagolovok { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--priglushonnyy); margin-bottom: 14px; }
.podval__spisok { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.podval__spisok a { color: var(--tekst); }
.podval__spisok a:hover { color: var(--ssylka); }
.podval__opisanie { margin-top: 12px; font-size: 13.5px; color: var(--priglushonnyy); max-width: 30ch; }
.podval__nizhnyaya {
  border-top: 1px solid var(--linii);
  padding: 16px 0 26px;
  font-size: 13px;
  color: var(--priglushonnyy);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

/* --- хлебные крошки ------------------------------------------------------- */

.kroshki { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; font-size: 13px; color: var(--priglushonnyy); }
.kroshki a { color: var(--priglushonnyy); }
.kroshki a:hover { color: var(--ssylka); }
.kroshki li:not(:last-child)::after { content: '·'; margin-left: 8px; }

/* --- каталог: фильтр и сетка ---------------------------------------------- */

.zagolovok-razdela { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.zagolovok-razdela h1 { font-size: clamp(26px, 3.4vw, 38px); }
.zagolovok-razdela__kolvo { font-size: 14px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }
.vvod-razdela { margin-top: 12px; max-width: 62ch; font-size: 15px; color: #414852; }

.katalog { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: var(--otstup); }

.filtr { border: 1px solid var(--linii); border-radius: 8px; background: var(--fon); }
.filtr__zagolovok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.filtr__zagolovok::-webkit-details-marker { display: none; }
.filtr__zagolovok::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--priglushonnyy);
  border-bottom: 2px solid var(--priglushonnyy);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.filtr[open] .filtr__zagolovok::after { transform: rotate(225deg) translate(-1px, -1px); }
.filtr__telo { padding: 4px 16px 16px; }
.filtr__gruppa { padding: 14px 0; border-top: 1px solid var(--linii); }
.filtr__gruppa:first-child { border-top: none; padding-top: 6px; }
.filtr__imya { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--priglushonnyy); margin-bottom: 10px; }
.galochki { display: flex; flex-direction: column; gap: 2px; }
.galochka {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px 6px 0;
  border-radius: 4px;
  font-size: 14.5px;
  cursor: pointer;
}
.galochka:hover { color: var(--ssylka); }
.galochka input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--deystvie); cursor: pointer; }
.galochka__kolvo { margin-left: auto; font-size: 12.5px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }
.filtr__knopka { width: 100%; margin-top: 6px; }
.filtr__snoska { margin-top: 10px; font-size: 12px; color: var(--priglushonnyy); text-align: center; }

.sortirovka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linii);
}
.sortirovka__podpis { font-size: 13px; color: var(--priglushonnyy); margin-right: 4px; }
.sortirovka__knopka {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--linii);
  border-radius: 17px;
  background: var(--fon);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.sortirovka__knopka:hover { border-color: var(--tekst); }
.sortirovka__knopka[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: #fff; }

/* --- страница товара ------------------------------------------------------ */

.tovar { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; margin-top: 24px; }
.tovar__zagolovok { font-size: clamp(24px, 3vw, 34px); }
.tovar__stroka-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13.5px; color: var(--priglushonnyy); }

.tovar__plita { border: 1px solid var(--linii); }
.tovar__plita .plita { aspect-ratio: 8 / 5; }
.tovar__plita .plita__risunok { width: 88%; }
.tovar__podrisunok {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 11px 14px;
  border-top: 1px solid var(--linii);
  background: var(--fon);
  font-size: 12px;
  color: var(--priglushonnyy);
  font-variant-numeric: tabular-nums;
}

.pokupka { border: 1px solid var(--linii); border-radius: 10px; padding: 22px; }
.pokupka__cena { font-size: clamp(30px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pokupka__cena span { font-size: 17px; font-weight: 400; color: var(--priglushonnyy); letter-spacing: 0; }
.pokupka__pereschyot { margin-top: 6px; font-size: 14px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }
.pokupka__metka { margin-top: 16px; }
.pokupka__stroka { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pokupka__knopka { flex: 1 1 180px; min-height: 50px; font-size: 16px; }
.pokupka__podpis { margin-top: 10px; font-size: 13px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }
.pokupka__snoska { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linii); font-size: 13.5px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }

/* Нижняя часть карточки товара: характеристики и вкладки рядом. */
.tovar-niz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px); align-items: start; }
.tovar-niz__zagolovok { font-size: 20px; margin-bottom: 14px; }

.kolichestvo { display: inline-flex; align-items: stretch; border: 1px solid var(--linii); border-radius: var(--radius); overflow: hidden; }
.kolichestvo__knopka {
  width: 42px;
  border: none;
  background: var(--fon);
  font-size: 19px;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
  transition: background-color .15s;
}
.kolichestvo__knopka:hover { background: var(--podlozhka); }
.kolichestvo__pole {
  width: 74px;
  min-height: 48px;
  border: none;
  border-left: 1px solid var(--linii);
  border-right: 1px solid var(--linii);
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--fon);
}
.kolichestvo__pole:focus { outline: none; background: var(--podlozhka); }

.tablica-obolochka { overflow-x: auto; }
.tablica { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablica th, .tablica td { padding: 12px 14px; border-bottom: 1px solid var(--linii); text-align: left; }
.tablica th { width: 46%; font-weight: 400; color: var(--priglushonnyy); }
.tablica td { font-weight: 600; }
.tablica tr:first-child th, .tablica tr:first-child td { border-top: 1px solid var(--linii); }

.vkladki { display: flex; flex-direction: column; border: 1px solid var(--linii); border-radius: 8px; overflow: hidden; }
.vkladka { border-top: 1px solid var(--linii); }
.vkladka:first-child { border-top: none; }
.vkladka__zagolovok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.vkladka__zagolovok::-webkit-details-marker { display: none; }
.vkladka__zagolovok::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--priglushonnyy);
  border-bottom: 2px solid var(--priglushonnyy);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.vkladka[open] .vkladka__zagolovok::after { transform: rotate(225deg) translateY(-2px); }
.vkladka__telo { padding: 0 18px 18px; font-size: 15px; color: #414852; }
.vkladka__telo p + p { margin-top: 10px; }
.vkladka__telo ul { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.vkladka__telo li { padding-left: 16px; position: relative; }
.vkladka__telo li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 1px; background: var(--priglushonnyy); }

/* --- корзина -------------------------------------------------------------- */

/* Первый ряд — позиции и итог, второй — форма оформления под ними.
   Итог занимает оба ряда: он липнет, пока покупатель заполняет форму. */
.korzina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.korzina__tovary { grid-column: 1; grid-row: 1; }
.korzina__oformlenie { grid-column: 1; grid-row: 2; }
.korzina > .itog { grid-column: 2; grid-row: 1 / span 2; }

.pozicii { border: 1px solid var(--linii); border-radius: 8px; overflow: hidden; }
/* Колонка цены задана числом, а не auto: каждая строка — свой grid, и при auto
   ширина считается по своему содержимому («от 104 000 ₽» шире «от 28 500 ₽»),
   отчего счётчики количества в соседних строках разъезжаются. */
.pozicia {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto 132px 34px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--linii);
}
.pozicia:last-child { border-bottom: none; }
.pozicia__plita { border: 1px solid var(--linii); border-radius: 4px; overflow: hidden; }
.pozicia__plita .plita { aspect-ratio: 1 / 1; }
.pozicia__plita .plita__risunok { width: 78%; }
.pozicia__imya { font-size: 16px; font-weight: 600; color: var(--tekst); }
.pozicia__imya:hover { color: var(--ssylka); text-decoration: none; }
.pozicia__svedeniya { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--priglushonnyy); font-variant-numeric: tabular-nums; }
.pozicia__cena { text-align: right; font-size: 17px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pozicia__cena span { display: block; font-size: 12.5px; font-weight: 400; color: var(--priglushonnyy); }
.pozicia__udalit {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linii);
  border-radius: var(--radius);
  background: var(--fon);
  color: var(--priglushonnyy);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pozicia__udalit:hover { border-color: #C34141; color: #C34141; }
.pozicia__udalit svg { width: 12px; height: 12px; }
.kolichestvo--melkoe .kolichestvo__knopka { width: 34px; font-size: 16px; }
.kolichestvo--melkoe .kolichestvo__pole { width: 58px; min-height: 38px; font-size: 14px; }

.korzina__pod { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.itog { position: sticky; top: 20px; border: 1px solid var(--linii); border-radius: 8px; padding: 20px; background: var(--fon); }
.itog__zagolovok { font-size: 18px; }
.itog__stroki { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.itog__stroka { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; font-variant-numeric: tabular-nums; }
.itog__stroka dt { color: var(--priglushonnyy); }
.itog__stroka dd { margin: 0; font-weight: 600; white-space: nowrap; }
.itog__vsego {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linii);
  font-variant-numeric: tabular-nums;
}
.itog__vsego-podpis { font-size: 16px; font-weight: 600; }
.itog__vsego-cifra { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.itog__knopka { width: 100%; margin-top: 18px; min-height: 50px; font-size: 16px; }
.itog__snoska { margin-top: 12px; font-size: 12.5px; color: var(--priglushonnyy); }

.oformlenie { border: 1px solid var(--linii); border-radius: 8px; padding: clamp(20px, 3vw, 30px); }
.oformlenie__vvod { margin-bottom: 20px; font-size: 14px; }

/* --- адаптив -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .razdely { grid-template-columns: repeat(3, 1fr); }
  /* Узкий экран: фильтр уезжает над сеткой и сворачивается в details. */
  .katalog { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .filtr { order: -1; }
  /* Одна колонка: итог встаёт сразу за позициями и ДО формы оформления.
     Иначе сумма заказа уезжает под всю форму, а кнопка «Перейти к оформлению»
     отправляет наверх, к форме, которую покупатель уже пролистал. */
  .korzina { grid-template-columns: minmax(0, 1fr); }
  .korzina__tovary,
  .korzina__oformlenie,
  .korzina > .itog { grid-column: 1; grid-row: auto; }
  .itog { position: static; }
}

@media (min-width: 1101px) {
  /* Фильтр развёрнут независимо от состояния details: заголовок-переключатель скрыт. */
  .filtr > .filtr__zagolovok { display: none; }
  .filtr > .filtr__telo { display: block; padding-top: 14px; }
  .filtr::details-content { content-visibility: visible; block-size: auto; }
}

@media (max-width: 1000px) {
  .pervyy-ekran__setka { grid-template-columns: minmax(0, 1fr); }
  .list-chertezha { order: -1; }
  .list-chertezha--polnyy { display: none; }
  .list-chertezha--korotkiy { display: block; }
  .preimushchestva { grid-template-columns: repeat(2, 1fr); }
  .tovar { grid-template-columns: minmax(0, 1fr); }
  .tovar-niz { grid-template-columns: minmax(0, 1fr); }
  .schyot { grid-template-columns: minmax(0, 1fr); }
  .podval__setka { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Первый ряд — логотип и бургер, второй — поиск с корзиной. */
  .shapka__glavnaya { flex-wrap: wrap; gap: 12px; }
  .poisk { order: 3; flex: 1 1 180px; }
  .korzina-ssylka { order: 4; }
  .logo { margin-right: auto; }
  .burger { display: inline-flex; }
  .menyu { display: none; }
  .menyu--otkryto { display: block; }
  .menyu__spisok { flex-direction: column; }
  .menyu__punkt { border-right: none; border-bottom: 1px solid var(--linii); }
  .menyu__punkt:first-child { border-left: none; }
  .menyu__ssylka { padding: 14px 20px; }

  .tovary { grid-template-columns: repeat(2, 1fr); }
  .uslugi { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .razdely { grid-template-columns: repeat(2, 1fr); }

  /* Строка корзины складывается: чертёж слева, под ним — итог по позиции. */
  .pozicia {
    position: relative;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      'plita imya'
      'plita kolvo'
      'cena  cena';
    gap: 10px 14px;
    padding: 16px;
  }
  .pozicia__plita { grid-area: plita; align-self: start; }
  .pozicia__svedeniya-blok { grid-area: imya; padding-right: 34px; }
  .pozicia__kolvo { grid-area: kolvo; justify-self: start; }
  .pozicia__cena {
    grid-area: cena;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--linii);
    text-align: left;
  }
  .pozicia__udalit { position: absolute; top: 14px; right: 14px; }
}

@media (max-width: 600px) {
  .obolochka { padding: 0 16px; }
  .tovary { grid-template-columns: minmax(0, 1fr); }

  /* Телефон: карточка ложится набок — чертёж слева, цена и кнопка справа. */
  .tovar-karta { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .tovar-karta .plita { grid-row: 1 / -1; aspect-ratio: auto; align-self: stretch; }
  .tovar-karta .plita__podpis { display: none; }
  .tovar-karta .plita__risunok { width: 82%; }
  .tovar-karta__telo { gap: 6px; padding: 12px 14px 6px; }
  .tovar-karta__cena { font-size: 19px; }
  .tovar-karta__nizhnyaya { grid-column: 2; padding: 0 14px 12px; }

  .preimushchestva { grid-template-columns: minmax(0, 1fr); }
  .forma__setka, .forma__setka--tri { grid-template-columns: minmax(0, 1fr); }
  .podval__setka { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 0 24px; }
  .pervyy-ekran__knopki .knopka { flex: 1 1 100%; }
  .shapka__verh-ryad { gap: 4px 16px; }
  .shapka__svyaz { margin-left: 0; flex-basis: 100%; }
  .shapka__chasy { display: none; }
  .korzina-ssylka { padding: 0 12px; }
  .schyot__forma { padding: 20px 18px; }
  .pokupka { padding: 18px; }
  /* На телефоне подписи внутри чертежа стали бы нечитаемо мелкими — они уходят
     в строку под ним, а на плите остаётся сам чертёж с размерными линиями. */
  .ch-nadpisi { display: none; }
  .tovar__plita .plita { aspect-ratio: 480 / 225; align-items: flex-start; padding-top: 14px; }
  .tovar__plita .plita__risunok { width: 94%; }
}

@media (max-width: 420px) {
  .logo__slovo { font-size: 17px; }
  .tovar-karta { grid-template-columns: 100px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}