/* Подключить после tovarnaya.css. Работает с исходной разметкой. */

.tk-katalog,
.tk-kartochka,
.tk-zayavka {
  box-sizing: border-box;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--tekst);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

:is(.tk-katalog, .tk-kartochka, .tk-zayavka) *,
:is(.tk-katalog, .tk-kartochka, .tk-zayavka) *::before,
:is(.tk-katalog, .tk-kartochka, .tk-zayavka) *::after {
  box-sizing: border-box;
}

.tk-zayavka[hidden],
:is(.tk-katalog, .tk-kartochka) [hidden] {
  display: none !important;
}

.tk-katalog > .tp-obertka,
.tk-kartochka > .tp-obertka {
  width: 100%;
  max-width: 1590px;
  margin-inline: auto;
  padding-inline: 30px;
}

:is(.tk-katalog, .tk-kartochka, .tk-zayavka) :is(button, input) {
  font: inherit;
}

:is(.tk-katalog, .tk-kartochka, .tk-zayavka) :is(a, button, input):focus-visible {
  outline: 2px solid var(--tekst);
  outline-offset: 3px;
}

:is(.tk-katalog, .tk-kartochka) :is(a, button, input) {
  scroll-margin-block: 24px 180px;
}

/* Заголовок каталога */

.tk-katalog .tk-katalog__shapka {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
  gap: 20px 48px;
  align-items: start;
  margin-bottom: 28px;
}

.tk-katalog .tk-katalog__shapka h2 {
  margin: 0;
  color: var(--tekst);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.tk-katalog .tk-katalog__podpis {
  max-width: 76ch;
  margin: 0;
  color: var(--tekst-slab);
  font-size: 14px;
  line-height: 1.65;
}

/* Сегменты. Радиокнопки сохраняют управление с клавиатуры. */

:is(.tk-katalog, .tk-kartochka) .tk-vybor {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--liniya);
  border-radius: 12px;
  background: var(--seryj);
}

.tk-katalog .tk-vybor { margin-bottom: 20px; }

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel legend {
  float: none;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: var(--tekst-slab);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel label {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  margin: 0;
  vertical-align: top;
  cursor: pointer;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel label > span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--liniya);
  background: var(--fon);
  color: var(--tekst);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color .16s, color .16s, border-color .16s;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel label:first-of-type > span {
  border-radius: 8px 0 0 8px;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel label:last-of-type > span {
  border-radius: 0 8px 8px 0;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel label + label {
  margin-left: -1px;
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel input:checked + span {
  position: relative;
  border-color: var(--temnyj);
  background: var(--temnyj);
  color: var(--fon);
}

:is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel input:focus-visible + span {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--tekst);
  outline-offset: 3px;
}

/* Срез. Радиусы остаются под управлением существующего скрипта. */

:is(.tk-katalog, .tk-kartochka) .tk-srez {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

:is(.tk-katalog, .tk-kartochka) .tk-srez__obolochka { fill: var(--temnyj); }
:is(.tk-katalog, .tk-kartochka) .tk-srez__ppu { fill: var(--oranzh); }
:is(.tk-katalog, .tk-kartochka) .tk-srez__stal { fill: var(--tekst-slab); }
:is(.tk-katalog, .tk-kartochka) .tk-srez__prosvet { fill: var(--fon); }

/* Строки каталога */

.tk-katalog .tk-spisok {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--liniya);
  border-radius: 12px;
  background: var(--fon);
}

.tk-katalog .tk-tovar {
  display: grid;
  grid-template-columns: 56px minmax(230px, 1fr) 240px 156px 230px;
  grid-template-areas:
    "srez opis svojstva cena zakaz"
    "srez ssylka svojstva cena zakaz";
  gap: 4px 18px;
  align-items: center;
  align-content: center;
  min-width: 0;
  min-height: 108px;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--liniya);
  background: var(--fon);
  transition: background-color .16s, box-shadow .16s;
}

.tk-katalog .tk-tovar:first-child { border-radius: 11px 11px 0 0; }
.tk-katalog .tk-tovar:last-child { border-bottom: 0; border-radius: 0 0 11px 11px; }
.tk-katalog .tk-tovar:only-child { border-radius: 11px; }
.tk-katalog .tk-tovar > * { min-width: 0; }
.tk-katalog .tk-tovar__srez { grid-area: srez; }
.tk-katalog .tk-tovar__opis { grid-area: opis; align-self: end; }

.tk-katalog .tk-tovar__imya {
  margin: 0;
  color: var(--tekst);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}

.tk-katalog .tk-tovar__imya a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
}

.tk-katalog .tk-tovar__du {
  margin: 5px 0 0;
  color: var(--tekst-slab);
  font-size: 12px;
  line-height: 1.4;
}

.tk-katalog .tk-tovar__podrobnee {
  grid-area: ssylka;
  justify-self: start;
  align-self: start;
  min-height: 24px;
  padding: 2px 0;
  color: var(--sinij);
  font-size: 12px;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tk-katalog .tk-tovar__svojstva {
  grid-area: svojstva;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin: 0;
}

.tk-katalog .tk-tovar__svojstva dt {
  margin: 0 0 6px;
  color: var(--tekst-slab);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

.tk-katalog .tk-tovar__svojstva dd {
  margin: 0;
  color: var(--tekst);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tk-katalog .tk-tovar__cena {
  grid-area: cena;
  margin: 0;
  color: var(--tekst);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

.tk-katalog .tk-tovar__cena b {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.tk-katalog .tk-tovar__cena small {
  display: block;
  margin-top: 5px;
  color: var(--tekst-slab);
  font-size: 12px;
  line-height: 1.4;
}

.tk-katalog .tk-bez-ceny .tk-tovar__cena b {
  color: var(--tekst-slab);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.tk-katalog .tk-tovar__net-tipa {
  display: block;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 7px;
  border: 1px solid var(--sinij);
  border-radius: 4px;
  background: var(--seryj);
  color: var(--sinij);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.tk-katalog .tk-tovar__zakaz {
  grid-area: zakaz;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

/* Метраж и действие */

:is(.tk-katalog, .tk-kartochka) .tk-kolvo {
  display: block;
  min-width: 0;
  margin: 0;
}

:is(.tk-katalog, .tk-kartochka) .tk-kolvo__podp {
  display: block;
  margin-bottom: 6px;
  color: var(--tekst-slab);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

:is(.tk-katalog, .tk-kartochka) .tk-kolvo input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--tekst-slab);
  border-radius: 7px;
  background: var(--fon);
  color: var(--tekst);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

:is(.tk-katalog, .tk-kartochka) .tk-kolvo input::placeholder {
  color: var(--tekst-slab);
  opacity: 1;
}

:is(.tk-katalog, .tk-kartochka) .tk-v-zayavku,
.tk-zayavka .tk-zayavka__otpravit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--oranzh);
  border-radius: 7px;
  background: var(--oranzh);
  color: var(--tekst);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}

:is(.tk-katalog, .tk-kartochka) .tk-v-zayavku.tk-dobavleno {
  border-color: var(--temnyj);
  background: var(--temnyj);
  color: var(--fon);
}

:is(.tk-katalog, .tk-kartochka) .tk-v-zayavku:disabled {
  border-color: var(--liniya);
  background: var(--seryj);
  color: var(--tekst-slab);
  cursor: not-allowed;
}

.tk-katalog .tk-tovar:focus-within,
.tk-katalog .tk-tovar:has(.tk-dobavleno) {
  background: var(--seryj);
  box-shadow: inset 3px 0 var(--oranzh);
}

.tk-katalog .tk-katalog__primechanie {
  max-width: 85ch;
  margin: 18px 0 0;
  color: var(--tekst-slab);
  font-size: 13px;
  line-height: 1.6;
}

/* Карточка. 28.09.2026: шапка стала плавающей полосой со своим фоном (tovarnaya.css), тёмная полоса под ней
   больше не нужна; --tk-shapka теперь только место под полосой (низ полосы 92px на широком экране). */

.tk-kartochka {
  --tk-shapka: 104px;
  padding: calc(var(--tk-shapka) + 24px) 0 0;
  border-bottom: 1px solid var(--liniya);
  background: var(--fon);
}

.tk-kartochka .tp-hlebnye {
  margin: 0 0 28px;
  color: var(--tekst-slab);
  font-size: 12px;
  line-height: 1.6;
}

.tk-kartochka .tp-hlebnye a {
  color: var(--tekst-slab);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tk-kartochka .tk-kartochka__setka {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

.tk-kartochka .tk-kartochka__vid,
.tk-kartochka .tk-kartochka__info { min-width: 0; }

.tk-kartochka .tk-kartochka__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--seryj);
}

.tk-kartochka .tk-kartochka__chertezh {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 16px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--liniya);
  border-radius: 12px;
  background: var(--seryj);
}

.tk-kartochka .tk-kartochka__chertezh figcaption {
  max-width: 28ch;
  color: var(--tekst-slab);
  font-size: 14px;
  line-height: 1.65;
}

.tk-kartochka .tk-kartochka__chertezh b {
  color: var(--tekst);
  white-space: nowrap;
}

.tk-kartochka .tp-nadzagolovok {
  display: block;
  width: fit-content;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sinij);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .055em;
}

.tk-kartochka .tk-kartochka__info h1 {
  margin: 0;
  color: var(--tekst);
  font-size: clamp(30px, 3.05vw, 46px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.tk-kartochka .tk-kartochka__lid {
  max-width: 65ch;
  margin: 16px 0 22px;
  color: var(--tekst-slab);
  font-size: 15px;
  line-height: 1.65;
}

.tk-kartochka .tk-vybor {
  gap: 18px 22px;
  padding: 16px;
}

.tk-kartochka .tk-kartochka__cena {
  margin: 22px 0 0;
  color: var(--tekst);
  font-size: 23px;
  line-height: 1.25;
}

.tk-kartochka .tk-kartochka__cena b {
  font-size: clamp(38px, 3.2vw, 48px);
  font-weight: 750;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.tk-kartochka .tk-kartochka__cena small {
  display: inline-block;
  color: var(--tekst-slab);
  font-size: 14px;
  white-space: nowrap;
}

.tk-kartochka .tk-kartochka__cena-podp {
  max-width: 60ch;
  margin: 8px 0 0;
  color: var(--tekst-slab);
  font-size: 13px;
  line-height: 1.6;
}

.tk-kartochka .tk-kartochka__zakaz {
  display: grid;
  grid-template-columns: 96px minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}

/* 28.09.2026: строка о заводе и доставке под кнопкой заявки, в тон подписи под ценой */
.tk-kartochka .tk-kartochka__dostavka {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--tekst-slab);
  font-size: 13px;
  line-height: 1.6;
}

.tk-kartochka .tk-kolvo input,
.tk-kartochka .tk-v-zayavku { min-height: 52px; }

.tk-kartochka .tk-zvonok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 0 10px 8px;
  color: var(--tekst);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tk-kartochka .tk-kartochka__svojstva {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 24px 0 0;
  padding: 0;
}

.tk-kartochka .tk-kartochka__svojstva > div {
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--liniya);
}

.tk-kartochka .tk-kartochka__svojstva dt {
  margin: 0 0 4px;
  color: var(--tekst-slab);
  font-size: 12px;
  font-weight: 400;
}

.tk-kartochka .tk-kartochka__svojstva dd {
  margin: 0;
  color: var(--tekst);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tk-kartochka .tk-kartochka__navi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 32px;
  padding: 8px 0;
  border-top: 1px solid var(--liniya);
}

.tk-kartochka .tk-kartochka__navi a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 10px 0;
  color: var(--tekst);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--liniya);
  text-underline-offset: 6px;
}

/* Панель заявки */

.tk-zayavka {
  position: fixed;
  z-index: 30;
  right: max(30px, calc((100% - 1530px) / 2));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  left: max(30px, calc((100% - 1530px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px 24px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--geroj-temn);
  border-top: 3px solid var(--oranzh);
  border-radius: 12px;
  background: var(--geroj-temn);
  color: var(--fon);
}

.tk-zayavka .tk-zayavka__schet {
  min-width: 0;
  margin: 0;
  color: var(--fon);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tk-zayavka .tk-zayavka__ochistit {
  min-height: 44px;
  margin: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--fon);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.tk-zayavka .tk-zayavka__otpravit { padding-inline: 22px; }

.tk-zayavka :is(a, button):focus-visible {
  outline-color: var(--fon);
}

/* Наведение */

@media (hover: hover) {
  .tk-katalog .tk-tovar:hover { background: var(--seryj); }
  .tk-katalog .tk-tovar__imya a:hover { text-decoration: underline; }

  :is(.tk-katalog, .tk-kartochka) .tk-pereklyuchatel input:not(:checked) + span:hover {
    background: var(--liniya);
  }

  :is(.tk-katalog, .tk-kartochka) .tk-v-zayavku:not(.tk-dobavleno):not(:disabled):hover,
  .tk-zayavka .tk-zayavka__otpravit:hover {
    border-color: var(--oranzh-tyomnyj);
    background: var(--oranzh-tyomnyj);
    color: var(--tekst);
  }

  .tk-kartochka .tk-kartochka__navi a:hover,
  .tk-kartochka .tk-zvonok:hover,
  .tk-kartochka .tp-hlebnye a:hover {
    color: var(--sinij);
    text-decoration-color: currentColor;
  }

  .tk-zayavka .tk-zayavka__ochistit:hover { color: var(--oranzh); }
}

/* Планшет */

@media (max-width: 1249px) {
  .tk-kartochka { --tk-shapka: 96px; }

  .tk-kartochka .tk-kartochka__setka {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 28px;
  }

  .tk-kartochka .tk-kartochka__chertezh {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .tk-kartochka .tk-kartochka__zakaz {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .tk-kartochka .tk-zvonok {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 44px;
    padding: 6px 0;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .tk-katalog .tk-tovar {
    grid-template-columns: 40px minmax(185px, 1fr) 202px 142px 202px;
    column-gap: 12px;
    padding-inline: 14px;
  }

  .tk-katalog .tk-tovar__zakaz {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .tk-katalog .tk-tovar__imya { font-size: 15px; }
  .tk-katalog .tk-tovar__cena b { font-size: 20px; }
}

/* Строка превращается в карточку без изменения HTML */

@media (max-width: 959px) {
  .tk-katalog .tk-katalog__shapka {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .tk-katalog .tk-spisok {
    display: grid;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .tk-katalog .tk-tovar,
  .tk-katalog .tk-tovar:first-child,
  .tk-katalog .tk-tovar:last-child {
    grid-template-columns: 44px minmax(0, 1fr) 100px;
    grid-template-areas: none;
    gap: 18px 12px;
    min-height: 0;
    padding: 18px 16px;
    border: 1px solid var(--liniya);
    border-radius: 10px;
  }

  .tk-katalog .tk-tovar__srez { grid-area: 1 / 1 / 2 / 2; }

  .tk-katalog .tk-tovar__opis {
    grid-area: 1 / 2 / 2 / -1;
    align-self: center;
  }

  .tk-katalog .tk-tovar__svojstva {
    grid-area: 2 / 1 / 3 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 14px 0;
    border-block: 1px solid var(--liniya);
  }

  .tk-katalog .tk-tovar__svojstva dt { font-size: 12px; }
  .tk-katalog .tk-tovar__cena { grid-area: 3 / 1 / 4 / 3; }
  .tk-katalog .tk-tovar__zakaz { display: contents; }
  .tk-katalog .tk-tovar__zakaz .tk-kolvo { grid-area: 3 / 3 / 4 / 4; }

  .tk-katalog .tk-tovar__zakaz .tk-v-zayavku {
    grid-area: 4 / 1 / 5 / -1;
    width: 100%;
    min-height: 48px;
  }

  .tk-katalog .tk-tovar__podrobnee {
    grid-area: 5 / 1 / 6 / -1;
    justify-self: center;
    font-size: 13px;
  }
}

/* Телефон */

@media (max-width: 767px) {
  .tk-katalog > .tp-obertka,
  .tk-kartochka > .tp-obertka {
    padding-inline: 15px !important;
  }

  .tk-katalog .tk-vybor { padding: 16px; }
  .tk-kartochka .tp-hlebnye { margin-bottom: 22px; }

  .tk-kartochka .tk-kartochka__setka {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tk-kartochka .tk-kartochka__info { display: contents; }
  .tk-kartochka .tp-nadzagolovok { grid-row: 1; }
  .tk-kartochka .tk-kartochka__info h1 { grid-row: 2; }

  .tk-kartochka .tk-kartochka__lid {
    grid-row: 3;
    margin: 14px 0 20px;
  }

  .tk-kartochka .tk-kartochka__vid {
    grid-row: 4;
    margin-bottom: 22px;
  }

  .tk-kartochka .tk-kartochka__foto { aspect-ratio: 16 / 9; }

  .tk-kartochka .tk-kartochka__chertezh {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    margin-top: 10px;
    padding: 14px;
  }

  .tk-kartochka .tk-kartochka__chertezh figcaption { font-size: 13px; }

  .tk-kartochka .tk-kartochka__zakaz {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .tk-kartochka .tk-kolvo { width: 120px; }
  .tk-kartochka .tk-v-zayavku { width: 100%; }
  .tk-kartochka .tk-zvonok { justify-self: center; }
  .tk-kartochka .tk-kartochka__svojstva { gap: 0 18px; }

  .tk-kartochka .tk-kartochka__navi {
    gap: 0 20px;
    margin-top: 24px;
  }

  .tk-kartochka .tk-kartochka__navi a { font-size: 13px; }

  /* Справа остаются 56px кнопки звонка, её отступ 16px и зазор 16px. */
  /* 28.09.2026, Веня: шапка и нижняя панель одной ширины. Раньше панель обрезалась справа до 302px под кнопку
     звонка; теперь она во всю ширину, как шапка (15px с краёв), а кнопку звонка поднимает правило ниже. */
  .tk-zayavka {
    right: 15px;
    left: 15px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px 12px;
  }

  .tk-zayavka .tk-zayavka__schet { font-size: 13px; }

  .tk-zayavka .tk-zayavka__ochistit {
    padding-inline: 0;
    font-size: 12px;
  }

  .tk-zayavka .tk-zayavka__otpravit {
    grid-column: 1 / -1;
    width: 100%;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.tk-katalog, .tk-kartochka, .tk-zayavka),
  :is(.tk-katalog, .tk-kartochka, .tk-zayavka) *,
  :is(.tk-katalog, .tk-kartochka, .tk-zayavka) *::before,
  :is(.tk-katalog, .tk-kartochka, .tk-zayavka) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Список заявки над формой #forma (26.09, после третьего круга Кодекса): ящик по образцу панели
   переключателей .tk-vybor Астры, те же токены. Вставляется скриптом, только для чтения. */
.tk-zayavka-spisok {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--liniya);
  border-radius: 12px;
  background: var(--seryj);
  color: var(--tekst);
}
.tk-zayavka-spisok__zag {
  margin: 0 0 10px;
  font-weight: 700;
}
.tk-zayavka-spisok__punkty {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.tk-zayavka-spisok__podp {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--tekst-slab);
}

/* ⭐ 28.09.2026, Веня про блок комплекта: «не красиво», «весь блок». Был тёмный блок с белыми карточками и
   коллажами деталей. Стал светлым: белые карточки с иллюстрациями деталей в той же студии, что иллюстрации труб,
   крупное имя детали, текст читаемого размера, ссылка в раздел. Разметку собирает stend.py (komplekt_novyj). */
.tk-komplekt {
  background: var(--seryj);
}

.tk-komplekt .tk-komplekt__shapka {
  max-width: 72ch;
  margin: 0 0 32px;
}

.tk-komplekt .tk-komplekt__shapka h2 {
  margin: 0;
}

.tk-komplekt .tk-komplekt__podzag {
  margin: 12px 0 0;
  color: var(--tekst-slab);
  font-size: 16px;
  line-height: 1.6;
}

.tk-komplekt .tk-komplekt__spisok {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-komplekt .tk-komplekt__el {
  display: flex;
  margin: 0;
}

.tk-komplekt .tk-komplekt__ssylka-blok {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--liniya);
  border-radius: 14px;
  background: #fff;
  color: var(--tekst);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tk-komplekt .tk-komplekt__ssylka-blok:hover,
.tk-komplekt .tk-komplekt__ssylka-blok:focus-visible {
  border-color: var(--oranzh);
  box-shadow: 0 12px 28px rgba(36, 28, 20, .08);
}

.tk-komplekt .tk-komplekt__foto {
  display: block;
  /* overflow не visible: иначе картинка 1200x900 растягивает рамку до своих 4:3 и aspect-ratio 16:9 на телефоне
     не действует (замер 28.09: 356 на 267 при заданных 16:9) */
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #EEEAE4;
}

.tk-komplekt .tk-komplekt__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tk-komplekt .tk-komplekt__telo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 22px;
}

.tk-komplekt .tk-komplekt__imya {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.tk-komplekt .tk-komplekt__tekst {
  margin-top: 10px;
  color: var(--tekst-slab);
  font-size: 15px;
  line-height: 1.6;
}

.tk-komplekt .tk-komplekt__dalee {
  margin-top: auto;
  padding-top: 18px;
  /* цвет надзаголовка карточки: светлый оранжевый на белом читается плохо (замер 28.09: #E8930F) */
  color: #9A5512;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1023px) {
  .tk-komplekt .tk-komplekt__spisok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tk-komplekt .tk-komplekt__shapka { margin-bottom: 24px; }
  /* в одну колонку блок выходил около 2700 px (Кодекс, круг 4): на телефоне ряд с прокруткой пальцем, как плитки
     сайта; карточка 84% ширины, край следующей виден. Прокрутка внутри ряда, страница вбок не ездит. */
  .tk-komplekt .tk-komplekt__spisok {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tk-komplekt .tk-komplekt__el { flex: 0 0 84%; scroll-snap-align: start; }
  .tk-komplekt .tk-komplekt__foto { aspect-ratio: 16 / 9; }
  .tk-komplekt .tk-komplekt__telo { padding: 18px 18px 20px; }
  .tk-komplekt .tk-komplekt__imya { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-komplekt .tk-komplekt__ssylka-blok { transition: none; }
}

/* 28.09.2026: пока открыта панель заявки, плавающая кнопка звонка (mu-plugin trubi-float-call, bottom:82px)
   встаёт над панелью, а не на неё. Панель на телефоне высотой около 126px от низа 12px. */
@media (max-width: 767px) {
  html:has(.tk-zayavka:not([hidden])) #trubi-float-call { bottom: 152px; }
}