/* TANETTI. Витрина. Направление: gigipip.com, с добавлениями из arch4.co.uk
   и mackintosh.com. Нейтральная палитра, один тёмный акцент, без градиентов
   и мягких теней-подушек. Фирменные шрифты: Tenor Sans на заголовках и
   ключевых элементах, Roboto на остальном тексте, файлы локальные. */

/* Фирменные шрифты. Файлы лежат в шрифты/, разделены на латиницу и
   кириллицу через unicode-range, чтобы браузер грузил только нужный файл
   под конкретный текст. Внешних подключений к Google Fonts нет. */

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../шрифты/TenorSans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../шрифты/TenorSans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../шрифты/Roboto-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../шрифты/Roboto-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../шрифты/Roboto-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../шрифты/Roboto-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Плашка скидки: чёрный прямоугольник выглядел тяжело на фото,
     приглушённый бордовый спокойнее и перекликается с ассортиментом. */
  --скидка-фон: #6e1e32;
  --скидка-текст: #f8f7f3;
  --фон: #efeeea;
  --фон-карточка: #f8f7f3;
  --фон-приглушённый: #e6e4de;
  --текст: #201e1b;
  --текст-приглушённый: #7c766c;
  --акцент: #201e1b;
  --акцент-текст: #f8f7f3;
  --граница: #dcd9d1;
  --граница-тёмная: #201e1b;
  --ошибка: #a3372c;
  --успех: #3a6b4a;
  --радиус: 2px;
  --ширина-контента: 1100px;
  --поле-широкое: 24px;
  --отступ-блока: 40px;
  --шрифт-текст: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --шрифт-заголовки: "Tenor Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--фон);
  color: var(--текст);
  font-family: var(--шрифт-текст);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-family: var(--шрифт-заголовки);
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--акцент);
  outline-offset: 2px;
}

/* Элементы с классами display:flex/inline-flex иначе перебивают браузерное
   правило [hidden]{display:none} той же специфичности. */
[hidden] {
  display: none !important;
}

.контейнер {
  width: 100%;
  max-width: var(--ширина-контента);
  margin: 0 auto;
  padding: 0 20px;
}

/* Без жёсткого ограничения ширины: используется на странице каталога,
   чтобы сетка товаров занимала весь экран с небольшими полями по краям. */
.контейнер-широкий {
  max-width: none;
  padding-left: var(--поле-широкое);
  padding-right: var(--поле-широкое);
}

/* Шапка */

.шапка {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--фон-карточка);
  border-bottom: 1px solid var(--граница);
}

.шапка__строка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.логотип {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.логотип__знак {
  display: block;
  height: 26px;
  width: auto;
  flex: none;
  margin-top: -2px;
}

.логотип__картинка {
  display: block;
  height: 22px;
  width: auto;
}

/* На очень узких экранах в одной строке с меню и корзиной надписи
   становится тесно — оставляем только знак. Ссылка на главную остаётся
   кликабельной и доступной: имя ссылки задано через aria-label на .логотип. */
@media (max-width: 399px) {
  .логотип__картинка {
    display: none;
  }
}

.шапка__меню {
  display: none;
  align-items: center;
  gap: 26px;
  font-family: var(--шрифт-заголовки);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.шапка__меню a {
  text-decoration: none;
  color: var(--текст-приглушённый);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.шапка__меню a:hover,
.шапка__меню a.активна {
  color: var(--текст);
  border-bottom-color: var(--текст);
}

@media (min-width: 720px) {
  .шапка__меню {
    display: flex;
  }
}

.корзина-ссылка {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--текст);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.корзина-счётчик {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--акцент);
  color: var(--акцент-текст);
  font-size: 11px;
  font-weight: 600;
}

/* Витрина: сайдбар фильтров + контент каталога */

.витрина {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 0 var(--отступ-блока);
  align-items: flex-start;
}

@media (min-width: 900px) {
  .витрина {
    flex-direction: row;
    gap: 24px;
  }
}

.сайдбар-фильтров {
  width: 100%;
}

@media (min-width: 900px) {
  .сайдбар-фильтров {
    width: 168px;
    flex: none;
    position: sticky;
    top: 56px;
  }
}

.фильтры-дет summary {
  list-style: none;
}

.фильтры-дет summary::-webkit-details-marker {
  display: none;
}

.фильтры-кнопка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--граница-тёмная);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--фон-карточка);
}

.фильтры-кнопка::after {
  content: "+";
  font-size: 15px;
  line-height: 1;
}

.фильтры-дет[open] .фильтры-кнопка::after {
  content: "−";
}

@media (min-width: 900px) {
  .фильтры-кнопка {
    display: none;
  }
}

.фильтры-тело {
  padding: 14px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 900px) {
  /* На десктопе панель фильтров всегда развёрнута, независимо от атрибута open. */
  .фильтры-тело {
    display: flex !important;
    padding-top: 2px;
  }
}

.группа-фильтра h3 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--текст-приглушённый);
}

.список-категорий {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.опция-категория {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  text-align: left;
  color: var(--текст-приглушённый);
  cursor: pointer;
}

.опция-категория:hover {
  color: var(--текст);
}

.опция-категория.активна {
  color: var(--текст);
  font-weight: 600;
}

.опция-категория__счёт {
  font-size: 11px;
  color: var(--текст-приглушённый);
}

.список-цветов {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.опция-цвет {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--текст-приглушённый);
  cursor: pointer;
  text-align: left;
}

.опция-цвет:hover {
  color: var(--текст);
}

.опция-цвет.активна {
  color: var(--текст);
  font-weight: 600;
}

.свотч {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--граница);
  flex: none;
  box-shadow: inset 0 0 0 2px var(--фон-карточка);
}

.опция-цвет.активна .свотч {
  box-shadow: inset 0 0 0 2px var(--фон-карточка), 0 0 0 1px var(--граница-тёмная);
}

.чекбокс-строка {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
}

.чекбокс-строка input {
  width: 15px;
  height: 15px;
  accent-color: var(--акцент);
}

.сброс-фильтров {
  align-self: flex-start;
  background: none;
  border: none;
  border-bottom: 1px solid var(--текст-приглушённый);
  padding: 0 0 2px;
  font-size: 12px;
  color: var(--текст-приглушённый);
  cursor: pointer;
}

.сброс-фильтров:hover {
  color: var(--текст);
  border-color: var(--текст);
}

/* Контент каталога */

.каталог-контент {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.каталог-верх {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--граница);
}

.счётчик-товаров {
  margin: 0;
  font-size: 13px;
  color: var(--текст-приглушённый);
}

.сортировка-выбор {
  padding: 9px 12px;
  border: 1px solid var(--граница);
  border-radius: 0;
  background: var(--фон-карточка);
  font-size: 13px;
}

/* Секции каталога */

/* Витрина разбита на две секции с разными сетками: комплекты (крупные
   карточки, максимум три в ряд) и береты (карточки заметно меньше,
   до четырёх в ряд). Секция без единого подходящего под фильтр товара
   не рисуется вовсе, вместе со своим заголовком, это делает JS через
   атрибут hidden. */
.каталог-секция + .каталог-секция {
  margin-top: 48px;
}

.каталог-секция--вторая {
  padding-top: 32px;
  border-top: 1px solid var(--граница);
}

.каталог-секция__заголовок {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Сетка каталога */

/* Число колонок задаём явно на трёх ширинах: телефон, планшет, десктоп.
   У комплектов колонки те же на телефоне и планшете (2), у беретов
   планшет получает промежуточное значение (3), чтобы мелкая карточка
   не растягивалась. */
.сетка-товаров {
  display: grid;
  gap: 10px 8px;
}

.сетка-товаров--комплекты {
  grid-template-columns: repeat(2, 1fr);
}

.сетка-товаров--береты {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
  .сетка-товаров--береты {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .сетка-товаров--комплекты {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 14px;
  }

  .сетка-товаров--береты {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
  }
}

/* Карточки в секции беретов мельче и проще: подписи, цена и плашка
   скидки уменьшены пропорционально размеру самой карточки. */
.сетка-товаров--береты .карточка-товара__тело {
  padding-top: 10px;
  gap: 4px;
}

.сетка-товаров--береты .карточка-товара__название {
  font-size: 12px;
}

.сетка-товаров--береты .карточка-товара__цвет {
  font-size: 11px;
}

.сетка-товаров--береты .цена {
  font-size: 15px;
}

.сетка-товаров--береты .цена-старая {
  font-size: 12px;
}

.сетка-товаров--береты .плашка-скидка {
  top: 10px;
  left: 10px;
  font-size: 11px;
  padding: 5px 9px;
}

.сетка-товаров--береты .метка-нет-в-наличии {
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  padding: 5px 8px;
}

.карточка-товара {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--текст);
}

.карточка-товара__фото {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--фон-приглушённый);
  overflow: hidden;
}

.карточка-товара__фото img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.фото-слой-вторая {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.карточка-товара:hover .фото-слой-вторая {
  opacity: 1;
}

.видео-превью {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.карточка-товара:hover .видео-превью {
  opacity: 1;
}

.карточка-товара__нет-фото {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--текст-приглушённый);
  font-size: 12px;
}

.метка-нет-в-наличии {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(248, 247, 243, 0.92);
  color: var(--текст);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
}

.плашка-скидка {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--скидка-фон);
  color: var(--скидка-текст);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 2px;
  z-index: 1;
}

.карточка-товара__тело {
  padding: 16px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.карточка-товара__название {
  font-family: var(--шрифт-заголовки);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.карточка-товара__цвет {
  font-size: 14px;
  color: var(--текст-приглушённый);
}

.карточка-товара__цены {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.цена {
  font-family: var(--шрифт-заголовки);
  font-weight: 600;
  font-size: 19px;
}

.цена-старая {
  font-family: var(--шрифт-заголовки);
  text-decoration: line-through;
  color: var(--текст-приглушённый);
  font-size: 15px;
}

/* Пустое состояние */

.пусто {
  padding: 48px 0;
  text-align: center;
  color: var(--текст-приглушённый);
}

.сброс-фильтров-пусто {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--текст-приглушённый);
  padding: 0 0 2px;
  font-size: 12px;
  color: var(--текст-приглушённый);
  cursor: pointer;
}

.сброс-фильтров-пусто:hover {
  color: var(--текст);
  border-color: var(--текст);
}

/* Карточка товара (страница) */

.товар-страница {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 28px 0 var(--отступ-блока);
}

@media (min-width: 820px) {
  .товар-страница {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 52px;
  }
}

.галерея__просмотр {
  position: relative;
}

.галерея__главное {
  aspect-ratio: 3 / 4;
  background: var(--фон-приглушённый);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.галерея__главное img,
.галерея__главное video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Стрелки листания: полупрозрачная подложка вместо яркой заливки, чтобы
   читались и на светлом, и на тёмном кадре, без теней. Видны при наведении
   на область галереи, на узких экранах видны всегда. */
.галерея__стрелка {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(32, 30, 27, 0.18);
  border-radius: 50%;
  background: rgba(248, 247, 243, 0.72);
  color: var(--текст);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.галерея__просмотр:hover .галерея__стрелка,
.галерея__просмотр:focus-within .галерея__стрелка {
  opacity: 1;
}

.галерея__стрелка:hover {
  background: rgba(248, 247, 243, 0.92);
}

.галерея__стрелка--назад {
  left: 10px;
}

.галерея__стрелка--вперёд {
  right: 10px;
}

@media (max-width: 819px) {
  .галерея__стрелка {
    opacity: 1;
  }
}

.галерея__миниатюры {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.галерея__миниатюра {
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--граница);
  padding: 0;
  background: var(--фон-приглушённый);
  cursor: pointer;
}

.галерея__миниатюра img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.галерея__миниатюра.активная {
  border-color: var(--граница-тёмная);
}

.галерея__видео {
  width: 100%;
  margin-top: 10px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--фон-приглушённый);
}

.товар-инфо h1 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.товар-инфо__категория {
  color: var(--текст-приглушённый);
  font-size: 12px;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}

.товар-инфо__цвет {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--текст-приглушённый);
  margin-bottom: 14px;
}

.товар-инфо__цвет .свотч {
  width: 16px;
  height: 16px;
}

.товар-инфо__цены {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--граница);
}

.товар-инфо__цены .цена {
  font-size: 22px;
}

.кнопка {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--радиус);
  border: 1px solid var(--акцент);
  background: var(--акцент);
  color: var(--акцент-текст);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.кнопка:hover {
  background: var(--текст);
  border-color: var(--текст);
}

.кнопка:disabled {
  background: var(--граница);
  border-color: var(--граница);
  color: var(--текст-приглушённый);
  cursor: not-allowed;
}

.кнопка-вторичная {
  background: transparent;
  border: 1px solid var(--граница-тёмная);
  color: var(--текст);
}

.кнопка-вторичная:hover {
  border-color: var(--текст);
  background: transparent;
  color: var(--текст);
}

.статус-наличия {
  font-size: 13px;
  margin: 0 0 16px;
  letter-spacing: 0.03em;
}

.статус-наличия.нет {
  color: var(--ошибка);
}

.статус-наличия.есть {
  color: var(--успех);
}

.товар-инфо__описание-блок {
  margin: 32px 0 0;
}

.товар-инфо__описание-блок h2,
.характеристики-блок h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--текст-приглушённый);
}

.товар-инфо__описание {
  margin: 0;
  white-space: pre-line;
  font-size: 14px;
  color: var(--текст);
}

.товар-инфо__описание.свёрнуто {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.кнопка-показать-полностью {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--текст);
  text-decoration: underline;
  cursor: pointer;
}

.характеристики-блок {
  margin: 32px 0 0;
}

.характеристики {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.характеристики td {
  padding: 9px 0;
  border-bottom: 1px solid var(--граница);
  vertical-align: top;
}

.характеристики td:first-child {
  color: var(--текст-приглушённый);
  width: 42%;
  padding-right: 12px;
}

/* Корзина */

.корзина-позиция {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--граница);
}

.корзина-позиция__фото {
  width: 84px;
  height: 112px;
  overflow: hidden;
  background: var(--фон-приглушённый);
}

.корзина-позиция__фото img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.корзина-позиция__название {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.корзина-позиция__мета {
  color: var(--текст-приглушённый);
  font-size: 13px;
  margin: 0 0 10px;
}

.корзина-позиция__низ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.количество {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--граница);
  overflow: hidden;
}

.количество button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--фон-карточка);
  cursor: pointer;
  font-size: 16px;
}

.количество button:hover {
  background: var(--фон-приглушённый);
}

.количество input {
  width: 40px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--граница);
  border-right: 1px solid var(--граница);
  height: 32px;
}

.удалить-позицию {
  background: none;
  border: none;
  color: var(--текст-приглушённый);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
}

.удалить-позицию:hover {
  color: var(--ошибка);
}

.корзина-итог {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
}

/* Форма оформления */

.форма-заказа {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.поле {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.поле label {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--текст-приглушённый);
}

.поле input,
.поле select,
.поле textarea {
  padding: 11px 12px;
  border: 1px solid var(--граница);
  border-radius: 0;
  background: var(--фон-карточка);
  width: 100%;
}

.поле textarea {
  resize: vertical;
  min-height: 70px;
}

.поле.с-ошибкой input,
.поле.с-ошибкой select,
.поле.с-ошибкой textarea {
  border-color: var(--ошибка);
}

.поле__ошибка {
  font-size: 12px;
  color: var(--ошибка);
  min-height: 14px;
}

.поле.обязательное > label::after,
.поле.обязательное > legend::after {
  content: " *";
  color: var(--ошибка);
}

.способ-связи-поле {
  border: 0;
  padding: 0;
  margin: 0;
}

.способ-связи-поле legend {
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--текст-приглушённый);
}

.способ-связи-варианты {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.способ-связи-поле .способ-связи-вариант {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--текст);
  cursor: pointer;
}

.способ-связи-поле .способ-связи-вариант input {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--акцент);
  cursor: pointer;
}

.поле-ловушка {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.результат-заказа {
  max-width: 480px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--граница);
}

.результат-заказа__текст {
  margin: 0 0 12px;
  font-size: 15px;
}

.результат-заказа--успех {
  border-color: var(--успех);
}

.результат-заказа--успех .результат-заказа__текст {
  color: var(--успех);
}

.результат-заказа--ошибка {
  border-color: var(--ошибка);
}

.результат-заказа--ошибка .результат-заказа__текст {
  color: var(--ошибка);
}

.подсказка {
  font-size: 13px;
  color: var(--текст-приглушённый);
}

/* Футер */

.футер {
  border-top: 1px solid var(--граница);
  padding: 18px 0 28px;
  color: var(--текст-приглушённый);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.хлебные-крошки {
  padding: 16px 0 0;
  font-size: 12px;
  color: var(--текст-приглушённый);
}

.хлебные-крошки a {
  text-decoration: none;
  color: var(--текст-приглушённый);
}

.хлебные-крошки a:hover {
  color: var(--текст);
}


/* Заголовок секции и выпадающий список сортировки стоят одной строкой:
   отдельная панель над сеткой убрана, она занимала высоту и дублировала
   то, что и так видно по самой сетке. */
.каталог-секция__шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}

/* Сортировка прижата к правому краю и не переносится под заголовок:
   перенос допускается только на узком экране. */
.каталог-секция__шапка .сортировка-выбор {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .каталог-секция__шапка {
    flex-wrap: wrap;
  }
}

.каталог-секция__шапка .каталог-секция__заголовок {
  margin: 0;
}

@media (max-width: 620px) {
  .каталог-секция__шапка .сортировка-выбор {
    width: 100%;
    margin-left: 0;
  }
}

/* Подвал-ссылки: компактная строка ссылок на контакты, оферту и
   согласие на обработку персональных данных. Одна строка, без лозунгов
   и без повторного крупного логотипа. */
.футер__ссылки {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.футер__ссылки a {
  color: var(--текст-приглушённый);
  text-decoration: none;
}

.футер__ссылки a:hover {
  color: var(--текст);
  text-decoration: underline;
}

/* Текстовые страницы: контакты, оферта, согласие на обработку данных.
   Колонка уже основного контейнера для читаемости длинных абзацев. */
.текст-страница {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 0 var(--отступ-блока);
}

.текст-страница h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.текст-страница__дата {
  margin: 0 0 26px;
  font-size: 12px;
  color: var(--текст-приглушённый);
}

.текст-страница h2 {
  margin: 28px 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--текст);
}

.текст-страница p,
.текст-страница li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--текст);
}

.текст-страница p {
  margin: 0 0 14px;
}

.текст-страница ul,
.текст-страница ol {
  margin: 0 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.текст-страница a {
  color: var(--текст);
}

/* Список контактов на странице «Контакты» */
.контакты-список {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 20px 0 28px;
}

.контакты-элемент {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.контакты-элемент__метка {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--текст-приглушённый);
}

.контакты-элемент__значение {
  font-size: 16px;
  text-decoration: none;
}

a.контакты-элемент__значение:hover {
  text-decoration: underline;
}

/* Блок реквизитов продавца: рамка, приглушённый фон, заметные плейсхолдеры */
.реквизиты-блок {
  margin-top: 8px;
  padding: 16px 18px;
  background: var(--фон-карточка);
  border: 1px solid var(--граница);
  font-size: 13px;
  line-height: 1.8;
}

.реквизиты-блок p {
  margin: 0 0 6px;
}

.реквизиты-блок p:last-child {
  margin-bottom: 0;
}

.плейсхолдер {
  color: var(--ошибка);
  background: rgba(163, 55, 44, 0.08);
  padding: 1px 5px;
  font-weight: 600;
}

/* Строка согласия рядом с кнопкой оформления заказа в корзине */
.согласие-заказа {
  margin: 0 0 14px;
}

.согласие-заказа a {
  color: var(--текст);
}


/* На телефоне карточка узкая, и плашка со скидкой прежнего размера
   налезала на лицо модели. Уменьшаем её вместе с карточкой.
   плашка-скидка на узком экране */
@media (max-width: 900px) {
  .плашка-скидка {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 3px 6px;
    letter-spacing: 0.01em;
  }

  .сетка-товаров--береты .плашка-скидка {
    top: 6px;
    left: 6px;
    font-size: 10px;
    padding: 3px 6px;
  }
}

@media (max-width: 400px) {
  .плашка-скидка {
    font-size: 8px;
    padding: 2px 5px;
  }
}