/* ============================================================
   Aleon for kids — дочерняя тема к Hummingbird
   Оформление по макету клиента (docs/refs/visual-1.jpg, светлый вариант шапки).
   Родительские стили не правятся: здесь только переопределения.
   ============================================================ */

/* Шрифты объявлены в assets/css/fonts.css и лежат в assets/fonts/.
   К Google за ними не ходим: см. комментарий в том файле. */

:root {
  /* Палитра снята с макета */
  --aleon-espresso:   #3b2a20;  /* верхняя полоса, тёмные плашки */
  --aleon-brown:      #5b4032;  /* кнопки, акценты */
  --aleon-brown-dark: #452f22;  /* наведение */
  --aleon-cream:      #f8f4ef;  /* фон страницы */
  --aleon-sand:       #ede3d8;  /* панели, плашки */
  --aleon-beige:      #ddcdb9;  /* подложка карточек */
  --aleon-ink:        #3a2c22;  /* основной текст */
  /* Второстепенный текст. Был #8c7b6b — красиво, но не читается: 3,72 к 1
     на фоне страницы и 3,21 на плашках при норме 4,5. Замерено на витрине,
     подтверждено сторонним ревью. Затемнён по тому же тону до нормы:
     6,50 на фоне страницы, 5,62 на плашках, 4,58 на подложке карточек.
     Ревью предлагало #6E5C4A — оно проходит на двух фонах из трёх (4,10
     на подложке карточек). Взяли на шаг темнее, чтобы проходило на всех,
     и цвет не приходилось помнить по местам. */
  --aleon-muted:      #62564B;  /* второстепенный текст */
  --aleon-line:       #e2d7ca;  /* разделители */

  --aleon-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --aleon-sans:  'Jost', 'Segoe UI', system-ui, sans-serif;

  /* Бутстраповские переменные родителя */
  --bs-primary: #5b4032;
  --bs-primary-rgb: 91, 64, 50;
  --bs-primary-text-emphasis: #5b4032;
  --bs-primary-bg-subtle: #ede3d8;
  --bs-primary-border-subtle: #ddcdb9;
  --bs-body-bg: #f8f4ef;
  --bs-body-color: #3a2c22;
  --bs-body-font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --bs-body-font-weight: 300;
  --bs-border-color: #e2d7ca;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: #5b4032;
  --bs-link-color-rgb: 91, 64, 50;
  --bs-link-hover-color: #452f22;
  --bs-emphasis-color: #3a2c22;
  --bs-secondary-color: #8c7b6b;

  /* Зелёный «всё получилось».
     Родительская тема берёт свой #188251 — это чистый зелёный из набора
     Бутстрапа, и рядом с бежевым он выглядит вставкой из другого магазина.
     Видно на оформлении заказа: кружки пройденных шагов и плашка
     «Заказ оформлен».

     Просто перекрасить в коричневый нельзя: зелёный тут не украшение,
     а знак, что шаг пройден. Берём приглушённый шалфейный — он и зелёный,
     и с палитрой уживается.

     Замерено: белый текст на #5F6E4C даёт 5,50, сам цвет на фоне
     страницы — 5,02 при норме 4,5. */
  --bs-success: #5F6E4C;
  --bs-success-rgb: 95, 110, 76;
  --bs-success-text-emphasis: #46523A;
  --bs-success-bg-subtle: #EAEDE2;
  --bs-success-border-subtle: #CBD3BC;
}

body {
  background-color: var(--aleon-cream);
  color: var(--aleon-ink);
  font-family: var(--aleon-sans);
  font-weight: 300;
  letter-spacing: .01em;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--aleon-serif);
  font-weight: 400;
  color: var(--aleon-ink);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   Шапка
   ------------------------------------------------------------ */

.header-top {
  background: var(--aleon-espresso);
  border-bottom: 0;
  padding: .55rem 0;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.header-top a,
.header-top .header-block__title,
.header-top .ps-contactinfo__email {
  color: #f0e7dd;
  text-decoration: none;
}

.header-top a:hover,
.header-top .header-block__action-btn:hover {
  color: #fff;
}

.header-top .material-icons,
.header-top .header-block__icon {
  color: #e6d9cb;
  font-size: 1.15rem;
}

.header-top .header-block__badge {
  background: var(--aleon-brown);
  color: #fff;
  border-radius: 50%;
}

.header-top__slogan {
  color: #e6d9cb;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-right: auto;
  padding-left: .25rem;
}

.header-top__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
}

/* Единственная надпись в верхней полосе, ради которой полоса и существует.
   Заказчица 11 августа попросила крупнее — соседний слоган справа
   намеренно оставлен прежним, иначе «крупнее» перестанет читаться. */
.ps-contactinfo__promo {
  color: #f0e7dd;
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: .06em;
  /* Надпись не должна рваться посреди суммы. Разряды в числе разделены
     неразрывным пробелом, здесь запрещаем перенос и перед знаком рубля. */
  white-space: nowrap;
}

@media (max-width: 991px) {
  /* На средних экранах колонка узкая, и «нельзя переносить» превращается
     в вылезающий за край текст. Там перенос разрешаем — по словам. */
  .ps-contactinfo__promo {
    white-space: normal;
  }
}

.header-bottom {
  background: var(--aleon-cream);
  border-bottom: 1px solid var(--aleon-line);
  padding: 1.1rem 0 .6rem;
}

/* Правила родительского меню убраны вместе с самим меню: его разметку
   мы больше не рисуем, вместо неё своя полоса ниже по файлу. Они были
   завязаны на класс «раздел один», которого теперь нет, и без этой
   уборки включили бы двухэтажную шапку из макета. */

.header-bottom__logo .logo,
.header-bottom__logo img {
  max-height: 62px;
  width: auto;
}

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

.btn {
  border-radius: 0;
  font-family: var(--aleon-sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .8rem 1.9rem;
}

.btn-primary {
  --bs-btn-bg: var(--aleon-brown);
  --bs-btn-border-color: var(--aleon-brown);
  --bs-btn-hover-bg: var(--aleon-brown-dark);
  --bs-btn-hover-border-color: var(--aleon-brown-dark);
  --bs-btn-active-bg: var(--aleon-brown-dark);
  --bs-btn-active-border-color: var(--aleon-brown-dark);
  --bs-btn-disabled-bg: var(--aleon-beige);
  --bs-btn-disabled-border-color: var(--aleon-beige);
}

.btn-outline-primary {
  --bs-btn-color: var(--aleon-brown);
  --bs-btn-border-color: var(--aleon-brown);
  --bs-btn-hover-bg: var(--aleon-brown);
  --bs-btn-hover-border-color: var(--aleon-brown);
}

/* Квадратные кнопки-иконки под общий отступ не попадают: с ним счётчик
   количества раздувается до 87 px и «плюс» переносится на вторую строку.
   Ловится только на узком контейнере — в корзине. */
.btn-square-icon:not(.product-miniature__quickview-button):not(.product-miniature__quickview-touch),
.quantity-button__group .btn,
.quantity-button .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.9rem;
  min-width: 2.9rem;
  height: 2.9rem;
}

.quantity-button__group {
  flex-wrap: nowrap;
  width: max-content;
}

.quantity-button__group .form-control {
  width: 3.2rem;
  min-width: 3.2rem;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------------------
   Заголовки секций: по центру, серифом, с короткой чертой
   ------------------------------------------------------------ */

.section-title {
  text-align: center;
  font-family: var(--aleon-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aleon-ink);
  margin: 3.4rem 0 2rem;
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 1px;
  background: var(--aleon-beige);
}

/* ------------------------------------------------------------
   Карточка товара — по макету: фото, название, цена. Ничего лишнего.
   ------------------------------------------------------------ */

article.product-miniature {
  background: transparent;
  border: 0;
}

.product-miniature__image-container {
  background: var(--aleon-sand);
  overflow: hidden;
}

.product-miniature__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .6s ease;
}

.product-miniature:hover .product-miniature__image {
  transform: scale(1.03);
}

.product-miniature__bottom {
  padding: .9rem .2rem 0;
}

.product-miniature__title {
  display: block;
  font-family: var(--aleon-sans);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--aleon-ink);
  text-decoration: none;
  margin-bottom: .45rem;
}

.product-miniature__title:hover {
  color: var(--aleon-brown);
}

.product-miniature__price {
  font-family: var(--aleon-sans);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--aleon-ink);
}

/* В макете на плитке нет ни счётчика количества, ни кнопки корзины,
   ни звёзд отзывов, ни флажков «новое» — всё это уводим на карточку товара. */
.product-miniature__actions,
.product-miniature .product-list-review,
.product-miniature .product-flags {
  display: none;
}

.product-miniature .discount-percentage,
.badge.discount {
  background: var(--aleon-brown);
  color: #fff;
  border-radius: 0;
  letter-spacing: .06em;
}

.badge.new {
  background: var(--aleon-sand);
  color: var(--aleon-ink);
  border-radius: 0;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Сердечко избранного, как в макете — правый верхний угол картинки */
.product-miniature__top {
  position: relative;
}

.product-miniature__wishlist {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 3;
}

.product-miniature__wishlist .wishlist-button-add,
.product-miniature__wishlist button,
.product-miniature .js-wishlist-button {
  background: rgba(248, 244, 239, .92);
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aleon-brown);
  box-shadow: none;
}

.product-miniature__wishlist i,
.product-miniature__wishlist svg {
  color: var(--aleon-brown);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------
   Промо-блок из макета: распродажа, скидка на первый заказ, упаковка
   ------------------------------------------------------------ */

.aleon-promo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 3rem auto 1rem;
  max-width: 1320px;
}

/* Плитки одинаковой высоты: сетка растягивает, а не подгоняет по содержимому.
   Именно на этом ломались прежние картинки — они были разной ширины. */
.aleon-promo__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 15.5rem;
  padding: 2rem 2rem 1.75rem;
  background: var(--aleon-sand);
  border: 1px solid var(--aleon-line);
  color: var(--aleon-ink);
  text-decoration: none;
  transition: background .3s ease, border-color .3s ease;
}

.aleon-promo__card:hover {
  background: var(--aleon-beige);
  border-color: var(--aleon-beige);
  color: var(--aleon-ink);
}

.aleon-promo__eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aleon-muted);
}

.aleon-promo__figure {
  margin: .6rem 0 .35rem;
  font-family: var(--aleon-serif);
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: .02em;
}

.aleon-promo__note {
  font-size: .95rem;
  color: var(--aleon-muted);
}

.aleon-promo__note b {
  font-weight: 500;
  color: var(--aleon-ink);
}

/* Подписи-действия прижаты к низу — так они стоят на одной линии во всех трёх. */
.aleon-promo__action {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
}

/* Средняя плитка тёмная: взгляд должен цепляться за промокод. */
.aleon-promo__card--accent {
  background: var(--aleon-espresso);
  border-color: var(--aleon-espresso);
  color: var(--aleon-cream);
}

.aleon-promo__card--accent:hover {
  background: var(--aleon-brown-dark);
  border-color: var(--aleon-brown-dark);
  color: var(--aleon-cream);
}

.aleon-promo__card--accent .aleon-promo__eyebrow,
.aleon-promo__card--accent .aleon-promo__note {
  color: rgba(248, 244, 239, .72);
}

.aleon-promo__card--accent .aleon-promo__note b {
  color: var(--aleon-cream);
}

@media (max-width: 767px) {
  .aleon-promo {
    grid-template-columns: 1fr;
  }

  .aleon-promo__card {
    min-height: 0;
    padding: 1.5rem;
  }

  .aleon-promo__figure {
    font-size: 2.5rem;
  }
}

/* Пропорции плитки — портретные, как в макете (фото 3:4) */
.product-miniature__image-container {
  aspect-ratio: 3 / 4;
}

.product-miniature__image-container picture,
.product-miniature__image-link {
  display: block;
  height: 100%;
}

.product-miniature__image {
  height: 100%;
  object-position: center top;
}

/* Пять товаров в ряд на широком экране — ровно как в макете.
   Родитель раскладывает сетку через grid-template-columns. */
@media (min-width: 1200px) {
  .module-products .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* ------------------------------------------------------------
   Блок преимуществ под баннером
   ------------------------------------------------------------ */

/* На главной модуль отдаёт другую разметку, чем в подвале:
   #block-reassurance > ul > li > .block-reassurance-item */
#block-reassurance {
  max-width: 1320px;
  margin: 2.6rem auto 1.2rem;
  padding: 0 1rem;
}

#block-reassurance ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-reassurance li {
  flex: 1 1 200px;
}

.block-reassurance-item {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.block-reassurance-item img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.block-reassurance-item span {
  font-family: var(--aleon-sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aleon-ink);
  line-height: 1.4;
}

.blockreassurance {
  background: transparent;
  border: 0;
  margin: 2.4rem 0 1rem;
}

.blockreassurance--horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.blockreassurance .reassurance {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: 1 1 200px;
}

.blockreassurance .reassurance__image img,
.blockreassurance .reassurance__image svg {
  width: 30px;
  height: 30px;
}

.blockreassurance .reassurance__content {
  display: block;
  line-height: 1.35;
}

.blockreassurance .reassurance__title {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--aleon-ink);
}

.blockreassurance .reassurance__desc {
  display: block;
  font-size: .78rem;
  color: var(--aleon-muted);
}

.blockreassurance .reassurance br {
  display: none;
}

/* ------------------------------------------------------------
   Слайдер на главной
   ------------------------------------------------------------ */

.carousel-caption h2,
.carousel .caption-description,
#carousel .caption {
  font-family: var(--aleon-serif);
  color: var(--aleon-ink);
  text-shadow: none;
}

.carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aleon-beige);
  border: 0;
  opacity: 1;
}

.carousel-indicators .active {
  background: var(--aleon-brown);
}

/* ------------------------------------------------------------
   Рассылка и подвал
   ------------------------------------------------------------ */

.footer.footer__before {
  background: var(--aleon-sand);
  border: 0;
  padding: 2.2rem 0;
}

.footer.footer__before p,
.footer.footer__before .h3,
.footer.footer__before h3 {
  color: var(--aleon-ink);
}

.block_newsletter .form-control,
.footer input[type="email"] {
  border-radius: 0;
  border: 1px solid var(--aleon-line);
  background: #fff;
}

.footer__main {
  background: var(--aleon-cream);
  border-top: 1px solid var(--aleon-line);
  padding-top: 2.6rem;
}

.footer-block__title,
.footer .h3,
.footer h3 {
  font-family: var(--aleon-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aleon-ink);
}

.footer-block__list a,
.footer a {
  color: var(--aleon-muted);
  font-size: .88rem;
  text-decoration: none;
}

.footer-block__list a:hover,
.footer a:hover {
  color: var(--aleon-brown);
}

.copyright {
  background: var(--aleon-cream);
  border-top: 1px solid var(--aleon-line);
  color: var(--aleon-muted);
  font-size: .78rem;
}

/* ------------------------------------------------------------
   Мелочи
   ------------------------------------------------------------ */

.form-control,
.form-select {
  border-radius: 0;
  border-color: var(--aleon-line);
}

.card,
.modal-content,
.dropdown-menu {
  border-radius: 0;
  border-color: var(--aleon-line);
}

a {
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Подпись на баннере: слева, как в макете. Текст живой, а не впечатан
   в картинку — остаётся чётким на любом экране и переводится.
   ------------------------------------------------------------ */

.ps-imageslider__figure {
  position: relative;
  margin: 0;
}

.ps-imageslider__figcaption {
  position: absolute;
  left: 7%;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: 34rem;
  padding: 0;
  text-align: left;
  text-shadow: none;
  background: transparent;
}

.ps-imageslider__figcaption h2 {
  font-family: var(--aleon-serif);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .05em;
  color: var(--aleon-ink);
  margin-bottom: .6rem;
}

.ps-imageslider__figcaption div {
  font-family: var(--aleon-serif);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: var(--aleon-ink);
}

.ps-imageslider__figcaption div p {
  margin-bottom: 1.6rem;
}

/* Кнопка из макета. Весь слайд — ссылка, поэтому это оформление, а не элемент. */
.ps-imageslider__figcaption::after {
  content: 'Смотреть коллекцию';
  display: inline-block;
  background: var(--aleon-brown);
  color: #fff;
  font-family: var(--aleon-sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .85rem 2rem;
}

.ps-imageslider__link:hover .ps-imageslider__figcaption::after {
  background: var(--aleon-brown-dark);
}


/* ------------------------------------------------------------
   Доводка после разбора витрины 2026-07-28
   ------------------------------------------------------------ */

/* Быстрый просмотр: у кнопки квадратный размер и подпись внутри — текст
   вылезал за границы. Оставляем иконку, подпись прячем от глаз, но не от
   программ чтения с экрана. */
/* Родительская тема показывает широкую полосу «Быстрый просмотр» поверх низа
   картинки при наведении, а маленькую кнопку с иконкой — только на сенсорных
   экранах. Наш квадратный размер ломал и то, и другое: получалось два глазика
   и обрезанная подпись. Возвращаем как задумано. */
.product-miniature__quickview-button {
  width: 100%;
  height: auto;
  padding: .85rem 1rem;
  font-size: .78rem;
  letter-spacing: .1em;
  gap: .5rem;
}

.product-miniature__quickview-touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .product-miniature__quickview-touch {
    display: inline-flex;
    font-size: 0;
  }
  .product-miniature__quickview-touch .material-icons {
    font-size: 1.15rem;
  }
}

/* Иконки блока преимуществ приходят из набора движка синими. Приводим
   к палитре: обесцвечиваем и подкрашиваем в коричневый. */
#block-reassurance img,
.blockreassurance img,
.block-reassurance-item img {
  filter: grayscale(1) sepia(1) saturate(.55) hue-rotate(-15deg) brightness(.62);
}

/* Карточка товара: тот же блок сбоку — выравниваем по нашей типографике */
.blockreassurance .reassurance__title,
#block-reassurance .reassurance__title {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* На карточке товара модуль подменяет картинку встроенным SVG с собственными
   цветами — синими. Фильтр по img его не касается, поэтому цепляем и svg,
   заодно приводим размер: исходник 70 px, в макете иконка мелкая. */
.reassurance__image svg,
.reassurance__image img,
#block-reassurance svg {
  width: 30px;
  height: 30px;
  filter: grayscale(1) sepia(1) saturate(.55) hue-rotate(-15deg) brightness(.62);
}

/* Подложка сердечка оставалась квадратной: глобальное обнуление радиуса
   у кнопок перебивало правило выше. Дожимаем явно и в самом конце файла. */
.product-miniature__wishlist .wishlist-button-add,
.product-miniature__wishlist button {
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  background: rgba(248, 244, 239, .92);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-miniature__wishlist .material-icons {
  font-size: 1.05rem;
  color: var(--aleon-brown);
}

/* Прежний блок правил для баннера на планшете и телефоне убран.
   Он был написан под старую шапку: один кадр 1920×760, подпись под ним
   на заливке. Той шапки больше нет — снимки идут парами и обрезаются
   по фигуре.

   Блок действовал до 992 точек и переопределял новую раскладку: задавал
   картинке `object-fit: contain` и соотношение 1920/760, отчего между 768
   и 991 точкой кадры сжимались в марки посреди пустого поля, а подпись
   уезжала вниз. На большом экране этого видно не было.

   Раскладка узких экранов теперь живёт рядом с самой шапкой, ниже по файлу. */

/* Стрелки перелистывания занимают по 15% ширины каждая — так их задаёт
   Bootstrap. Подпись баннера лежит слева, и левая стрелка садилась прямо
   на подзаголовок серым квадратом. Прижимаем стрелки к краям и сужаем
   до размера самой иконки. */
@media (min-width: 992px) {
  .ps-imageslider .carousel-control-prev,
  .ps-imageslider .carousel-control-next {
    width: 4rem;
  }
}

/* ============================================================
   Правки по стороннему ревью витрины, 31.07.2026
   Каждая — с замером: контраст считан по стандартной формуле
   на живой странице, до и после.
   ============================================================ */

/* --- Лупа в быстром просмотре выводила сайт из строя ---------------------
   Кнопка «Открыть фотографии крупно» открывает окно `#product-modal`,
   а в быстром просмотре это окно лежит ВНУТРИ самого быстрого просмотра.
   Движок закрывает внешнее окно, вложенное показать не может, и остаётся
   затемнение без окна: прокрутка выключена, нажатия перехвачены, выход
   только перезагрузкой. Воспроизводится каждый раз.

   В быстром просмотре кнопку убираем. Крупные фотографии живут на карточке
   товара, туда из быстрого просмотра ведёт ссылка — возможность не теряется.
   На самой карточке кнопка работает правильно и остаётся.

   Селектор длиннее необходимого намеренно: наше же правило для квадратных
   кнопок-иконок выше по файлу весит больше и перебивало короткую запись. */
.modal.quickview .product__images .product__zoom,
.modal.quickview .product__carousel .product__zoom {
  display: none;
}

/* --- Сведения о магазине в подвале: контраст 1,19 к 1 --------------------
   Худшее число на витрине. Цвет #DEE2E6 сюда попал из палитры движка,
   а не из палитры магазина: блок просто не покрасили. */
.ps-contactinfo__infos,
.ps-contactinfo__infos * {
  color: var(--aleon-ink);
}

/* --- Заголовок столбца подвала бледнее трёх соседних ---------------------
   У «Вашей учётной записи» заголовок обёрнут в ссылку, и цвет ссылок
   перекрывал цвет заголовка: 3,72 против 12,27 у соседей. Одна роль —
   один вид. */
.footer-block__title,
.footer-block__title a,
.footer-block__title a:hover {
  color: var(--aleon-ink);
  text-decoration: none;
}

/* --- Кнопка подписки в выключенном виде нечитаема ------------------------
   Белым по бежевому с прозрачностью 0,65 — контраст 1,55 при норме 4,5,
   слово «Подписка» не разобрать. И курсор «палец» звал нажать на то,
   что не нажимается. Логику не трогаем: галочка согласия включает кнопку,
   это проверено и работает. */
.btn-primary:disabled,
.btn-primary.disabled,
input.btn-primary[disabled] {
  --bs-btn-disabled-color: var(--aleon-ink);
  opacity: 1;
  cursor: default;
}

/* --- Итоговая цена не отличалась от старой -------------------------------
   Было 16,32 против 16,00 точки — разница, которой глаз не берёт: обе цены
   читались как равнозначные. Итоговую делаем крупнее и цветом бренда,
   старую — мельче и глуше. */
.product-miniature__price {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--aleon-brown);
}

.product-miniature__regular-price,
.product-miniature__discount-price {
  font-size: .9rem;
  font-weight: 300;
  color: var(--aleon-muted);
}

/* --- Выпадающее меню: пустая правая колонка 1008x616 ---------------------
   В сетке под правую часть отведено девять колонок из двенадцати, и они
   ничем не заполнены: панель разворачивалась на 62% экрана ради узкого
   столбца категорий слева. Наполнять нечем — ужимаем панель по содержимому. */
.ps-mainmenu .submenu__right {
  display: none;
}

/* Одиннадцать разделов в одну колонку растягивали панель на 616 точек —
   72% экрана от простого наведения мышью. Раскладываем в четыре строки:
   получается три колонки, панель садится по содержимому. */
.ps-mainmenu .submenu__left {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: .1rem 3rem;
  justify-content: start;
  flex: 0 0 auto;
  width: auto;
}

.ps-mainmenu .submenu__left-item {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Черта справа отделяла разделы от правой колонки. Колонки больше нет,
   и черта висела в пустоте. */
.ps-mainmenu .submenu__left {
  border-right: 0;
}

.ps-mainmenu .submenu {
  padding-top: 1.2rem;
  padding-bottom: 1.4rem;
}

/* ============================================================
   Меню подстраивается под число категорий
   ------------------------------------------------------------
   Указание начальства 31.07: пока категория одна, меню не нужно —
   её просто показываем. Появится вторая — меню включается само.

   Поэтому здесь нет ни счётчика, ни настройки, ни правки шаблона:
   всё держится на `:only-child`. Один раздел в дереве — правила
   срабатывают, два — перестают, и меню возвращается как было.
   Забыть переключить нельзя, потому что переключать нечего.
   ============================================================ */

/* Пока раздел один, меню не рендерится вовсе — вместо него ссылка,
   см. modules/ps_mainmenu/ps_mainmenu.tpl. Правил для «спрятать меню»
   здесь больше нет: прятать нечего. */

/* Мёртвая зона в строке бокового меню: 225 точек из 367 не реагировали
   на нажатие. В строке два разных действия — текст ведёт в раздел, стрелка
   раскрывает подразделы, — а между ними была пустота, и угадать, куда
   попадёшь, было нельзя. Ссылка растягивается на всю свободную ширину,
   кнопка раскрытия остаётся своей целью. Промаха больше нет. */
.menu__list > li > .menu__link {
  flex: 1 1 auto;
}

/* ============================================================
   Выделение при нажатии
   ------------------------------------------------------------
   Тема рисует обводку по `:focus`, то есть и при нажатии мышью тоже.
   Отсюда прямоугольник вокруг стрелки меню (коричневый со сдвигом
   в 2 точки, на светлом фоне читается как чёрный, и снизу его режет
   выпадающая панель), белая заливка на кнопках и синяя рамка браузера
   на поле поиска.

   Обводка нужна тому, кто ходит с клавиатуры: без неё не видно, где
   находишься. Поэтому не убираем её вовсе, а показываем только тогда,
   когда она нужна, — по `:focus-visible`. Нажатие мышью её не вызывает.
   ============================================================ */

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.outline:focus-visible {
  outline: 2px solid var(--aleon-brown);
  outline-offset: 1px;
  box-shadow: none;
}

/* Поле поиска: своя рамка вместо синей браузерной. */
.form-control:focus,
.ps-searchbar input:focus {
  border-color: var(--aleon-brown);
  box-shadow: none;
}

/* У текстовых полей обводка показывается и при нажатии мышью — так устроен
   `:focus-visible`: в поле ввода клавиатура нужна всегда, и браузер считает
   выделение уместным. Спорить не с чем, но пусть она прилегает к полю,
   а не висит вокруг него отдельной рамкой. */
.form-control:focus-visible,
.ps-searchbar input:focus-visible {
  outline-offset: 0;
}

/* ------------------------------------------------------------
   Логотип набором, а не картинкой
   ------------------------------------------------------------
   Разметку даёт templates/_partials/helpers.tpl, там же объяснено почему.
   Размеры подобраны по прежней картинке, чтобы шапка не поехала. */

.aleon-logo {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  padding: .1rem 0;
}

.aleon-logo:hover {
  text-decoration: none;
}

.aleon-logo__name {
  display: block;
  font-family: var(--aleon-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  letter-spacing: .005em;
  color: var(--aleon-brown);
}

.aleon-logo__sub {
  display: block;
  font-family: var(--aleon-serif);
  font-weight: 400;
  font-size: clamp(.72rem, 1.2vw, .95rem);
  letter-spacing: .07em;
  color: var(--aleon-brown);
  margin-top: .18rem;
}

/* Блок подписки на странице регистрации просит почту второй раз: она уже
   введена в форме выше, на той же странице. Прячем его там — подписка
   доступна с любой другой страницы, а на регистрации только мешает. */
body.page-registration .block_newsletter,
body.page-registration .ps-emailsubscription {
  display: none;
}

/* Почта магазина показана в подвале как контакт — а стоит там технический
   отправитель на домене стенда. Он там не для покупателя: без него движок
   не может отправить ни одного письма и роняет регистрацию и подтверждение
   заказа (см. seed/15-no-invented-data.sql).

   Показывать покупателю адрес вида no-reply@ на домене стенда — врать
   про контакты. Прячем строку до тех пор, пока заказчик не пришлёт свою
   почту. Придёт настоящая — это правило убирается, и строка возвращается. */
.ps-contactinfo__email {
  display: none;
}

/* --- Выпадающее меню учётной записи в тёмной полосе ----------------------
   Верхняя полоса тёмная, и все ссылки в ней покрашены светлым. Выпадающее
   меню учётной записи живёт внутри неё, но подложка у него светлая — и весь
   список получался почти невидимым: светлый текст на светлом.

   Правило про светлые ссылки оставляем полосе, а внутри выпадающих панелей
   возвращаем обычный цвет текста. */
.header-top .dropdown-menu {
  background: var(--aleon-cream);
  border-color: var(--aleon-line);
}

.header-top .dropdown-menu a,
.header-top .dropdown-item,
.header-top .dropdown-menu .header-block__title {
  color: var(--aleon-ink);
}

.header-top .dropdown-item:hover,
.header-top .dropdown-item:focus,
.header-top .dropdown-menu a:hover {
  color: var(--aleon-brown);
  background: var(--aleon-sand);
}

.header-top .dropdown-menu .material-icons {
  color: var(--aleon-muted);
}

/* ============================================================
   Шапка не прилипает; при одном разделе меню заменяется кнопкой
   ------------------------------------------------------------
   Два указания от 31.07.

   Первое: шапка была прибита к верху экрана и занимала 215 точек — почти
   четверть окна, всё время. Отлипает: страница прокручивается целиком,
   шапка уезжает вместе с ней.

   Второе: пока раздел один, строка меню несёт единственное слово «Одежда»
   и выглядит недоделкой. Прячем её и оставляем кнопку меню — ту же, что
   на телефоне. Раздел и подразделы открываются из неё.

   Правило самонастраивающееся, как и в решении Р10: условие — «в дереве
   меню ровно один пункт». Появится второй, строка меню вернётся сама,
   а кнопка снова спрячется на широких экранах. Переключать нечего.
   ============================================================ */

.header,
.header-top,
.header-bottom {
  position: static;
  top: auto;
}

/* ============================================================
   Меню разделов: полоса с подразделами под шапкой.

   Заказчица в видео: нажимаешь раздел — подразделы встают строкой,
   а не выпадающим столбиком. Раньше при единственном разделе меню
   не было вовсе, стояла ссылка, и нажатие уводило прямо в каталог.

   Ничего не перечислено руками: сколько разделов придёт, столько
   кнопок и полос нарисует шаблон.
   ============================================================ */

.aleon-menu {
  display: flex;
  align-items: center;
}

.aleon-menu__bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

/* Разделы верхнего уровня. Вид тот же, что был у прежней ссылки:
   разрядка, прописные, подчёркивание с отступом. */
.aleon-menu__top {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--aleon-sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--aleon-ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  padding: .55rem 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.aleon-menu__top:hover {
  color: var(--aleon-brown);
}

/* Сертификаты: заметнее соседних ссылок, в той же типографике меню. */
.aleon-menu__top[href$="/podarochnyj-sertifikat"],
.menu__link[href$="/podarochnyj-sertifikat"] {
  font-size: .9rem;
  font-weight: 600;
  color: var(--aleon-brown);
}

/* #226: выбранный пол; hidden остаётся скрытым при правилах layout темы. */
.aleon-menu__gender-active {
  color: var(--aleon-brown);
  font-weight: 600;
  text-decoration-thickness: 2px;
}

[data-aleon-gender-item][hidden] {
  display: none !important;
}

/* ── Сама полоса ──────────────────────────────────────────────────────
   Видна всегда, поэтому стоит в потоке отдельной строкой шапки, а не
   слоем поверх страницы. Слоем она накрывала верх обложки и срезала его.

   Полоса — прямой ребёнок строки шапки, а строка эта гибкая. Отсюда
   `flex-basis: 100%`: полоса переносится на свою строку и занимает её
   целиком, какой бы высоты ни оказалась. Высота у неё плавает по-настоящему:
   шесть ссылок в одну строку на широком экране и в две-три на телефоне,
   поэтому место под неё нельзя было отмерить заранее.

   Ни фона, ни собственных границ ей больше не нужно. Фон у неё был ровно
   такой же, как у шапки, и служил только затем, чтобы выпадающий слой
   не просвечивал. Отдельной разделительной линии полоса тоже не заводит:
   у шапки она уже есть (см. `.header-bottom` выше), тянется во всю ширину
   окна, а у полосы шла бы только по контейнеру и обрывалась бы по краям. */

.header-bottom {
  position: relative;
}

.aleon-menu__band {
  flex: 0 0 100%;
  width: 100%;
  /* Последней в строке шапки. Полоса приходит из того же хука, что поиск,
     и приходит раньше него: без этого она разрывала строку посередине
     и уводила поиск на третий ряд.

     Цену называю прямо: в разметке полоса остаётся раньше поиска, а на экране
     стоит ниже, и с клавиатуры до поиска доходишь через её ссылки. Убрать это
     перестановкой модулей в хуке нельзя — значки входа и корзины на телефоне
     приходят не из хука, а из шаблона шапки, уже после него, и полоса тогда
     разрывала бы строку у них. Полоса помечена как `nav` со своей подписью,
     так что при обходе по областям она находится сразу. */
  order: 99;
}

.aleon-menu__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 2rem;
  margin: 0;
  padding: 1.1rem 0;
  list-style: none;
}

.aleon-menu__link {
  display: inline-block;
  padding: .35rem 0;
  font-family: var(--aleon-sans);
  font-size: .95rem;
  color: var(--aleon-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.aleon-menu__link:hover {
  color: var(--aleon-brown);
  border-bottom-color: var(--aleon-brown);
}

/* «Смотреть всё» — вход в раздел целиком. У раздела с подразделами своей
   ссылки в шапке нет: с 11 августа там осталась только полоса. Без этого
   пункта до самого раздела было бы не добраться. */
.aleon-menu__link--all {
  font-weight: 500;
  letter-spacing: .02em;
}

/* Имя раздела в полосе — только когда полос больше одной (см. шаблон):
   «Одежда» и «Предзаказ» иначе не отличить, у обеих первым идёт «Смотреть всё». */
.aleon-menu__section {
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aleon-brown);
  margin-right: .75rem;
  white-space: nowrap;
}

/* На телефоне полоса едет вбок, а не встаёт столбиком.

   Раньше здесь был именно столбик, и для выпадающей панели это было верно:
   она открывалась поверх страницы, вертикальное место ничего не стоило,
   а названия строкой не помещались. С 11 августа полоса видна всегда,
   и цена изменилась на противоположную: столбиком она съедала весь первый
   экран телефона и отжимала обложку вниз.

   Полоса прокрутки убрана намеренно: на телефоне её всё равно не видно,
   а край последнего названия подсказывает, что список продолжается. */
@media (max-width: 767px) {
  .aleon-menu__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.25rem;
    padding: .75rem 0;
    scrollbar-width: none;
  }

  .aleon-menu__row::-webkit-scrollbar {
    display: none;
  }

  .aleon-menu__row > li {
    flex: 0 0 auto;
  }

  .aleon-menu__link {
    white-space: nowrap;
  }
}

/* Порядок в шапке одинаковый на всех ширинах: логотип, потом меню.
   Родительская тема ставит блоку меню отрицательный порядок на узких
   экранах, и меню перепрыгивало перед логотипом — на большом экране
   одно, на телефоне другое.

   Селектор смотрит на полосу, а не на блок `.aleon-menu`: с 11 августа
   тот блок рисуется только при разделе без подразделов, а полоса есть
   всегда, пока в меню вообще что-то есть. */
.header-bottom__row:has(.aleon-menu__band) .header-bottom__logo {
  order: -2;
}

/* Сердечко «в избранное»: подложка была белым квадратом поверх фотографии.
   Делаем её кругом и полупрозрачной — так она читается как кнопка,
   а не как дырка в снимке.

   Правило пришлось положить в слой каскада, и это не украшательство.
   Родительская тема задаёт этой кнопке заливку и рамку с восклицательным
   знаком внутри слоя `ps-modules`. Для важных правил слои действуют
   в обратном порядке: важное правило из раннего слоя сильнее, а важное
   правило вне слоёв — слабее всех. Поэтому наше правило вне слоёв
   проигрывало при любой точности селектора. Пишем в самый ранний слой
   из объявленных темой, и только для этой кнопки.

   Порядок слоёв темы, если понадобится снова:
   vendors, bs-base, bs-components, bs-custom-components,
   ps-base, ps-components, ps-pages, ps-modules, utilities. */
@layer vendors {
  .wishlist-button-add,
  .wishlist-button-add:hover,
  .wishlist-button-product {
    border-radius: 50% !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    min-width: 2.1rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(248, 244, 239, .78) !important;
    border: 0 !important;
  }

  .wishlist-button-add:hover,
  .wishlist-button-product:hover {
    background-color: rgba(248, 244, 239, .95) !important;
  }
}

/* --- Ссылка «Выйти» была ярко-красной ------------------------------------
   Цвет rgb(255,70,87) не из палитры магазина: он достался от темы, где
   выход помечен как опасное действие. Выход из учётной записи опасным
   не является — красным его красить не за что. */
a[href*="mylogout"],
a[href*="mylogout"] .material-icons,
a[href*="mylogout"]:hover {
  color: var(--aleon-ink);
}

a[href*="mylogout"]:hover,
a[href*="mylogout"]:hover .material-icons {
  color: var(--aleon-brown);
}

/* --- Подписка не спрашивает почту у того, кто уже вошёл ------------------
   Покупатель ввёл почту при регистрации, она есть в учётной записи.
   Просить её второй раз на той же странице — заставлять человека повторять
   то, что мы и так знаем. Признак «вошёл» берём по ссылке выхода: она есть
   только у вошедшего. */
body:has(a[href*="mylogout"]) .block_newsletter,
body:has(a[href*="mylogout"]) .ps-emailsubscription {
  display: none;
}

/* ============================================================
   Баннер главной: два снимка во всю ширину и светлая дымка под текстом.

   Заказчица: «нужно по два фото, чтобы заполнить пустоту».

   Прежние файлы были не фотографиями, а баннерами 1920×760 — фигура
   в правой трети, остальное заливка. Никакая обрезка в стилях этого
   не лечила: она всегда прихватывала кусок заливки, и между кадрами
   оставалась полоса. Теперь в шапке настоящие снимки коллекции,
   присланные заказчицей 28 июля, — обычные вертикальные кадры.

   Снимки делят ширину поровну и обрезаются по фигуре. Подпись лежит
   поверх, на дымке, которая тянется слева направо и сходит на нет,
   — так текст читается, а кадр не закрыт.
   ============================================================ */

.ps-imageslider--pairs .ps-imageslider__pair {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Снимки прижаты вправо: слева остаётся поле под подпись. */
  justify-content: flex-end;
  height: clamp(24rem, 42vw, 42rem);
  background: var(--aleon-sand);
}

/*
 * Снимок держит свою пропорцию, а не тянется на половину ширины.
 *
 * Это разница между «фигура целиком» и «фигура по пояс». Кадры вертикальные,
 * 3 к 4; если растянуть их на половину широкого экрана, обрезка «по
 * заполнению» съедает верх и низ, и на большом мониторе от ребёнка остаётся
 * торс. Держим пропорцию — и фигура стоит в полный рост на любой ширине.
 *
 * Ограничение в половину ширины нужно для узких окон: там пропорция дала бы
 * снимки шире, чем есть места, и пара вылезла бы за край.
 */
.ps-imageslider--pairs .ps-imageslider__cell {
  flex: 0 1 auto;
  height: 100%;
  aspect-ratio: 3 / 4;
  max-width: 50%;
  min-width: 0;
}

.ps-imageslider--pairs .ps-imageslider__figure {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.ps-imageslider--pairs .ps-imageslider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадр шире, чем снимок, поэтому обрезается верх и низ. Смещаем окно
     к верхней трети: там лица, и терять их нельзя. */
  object-position: 50% 22%;
}

/* Дымка. Тянется от левого края и сходит на нет к середине — под текстом
   плотная, дальше кадр открыт. */
.ps-imageslider--pairs .ps-imageslider__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 2rem clamp(1.5rem, 4vw, 4.5rem);
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(248, 244, 239, .95) 0%,
    rgba(248, 244, 239, .88) 22%,
    rgba(248, 244, 239, .55) 45%,
    rgba(248, 244, 239, .12) 68%,
    rgba(248, 244, 239, 0) 85%
  );
}

/* Ссылку внутри дымки нажимать надо, а сама дымка нажатия пропускает
   насквозь — иначе она перехватывала бы клик по снимку. */
.ps-imageslider--pairs .ps-imageslider__cta {
  pointer-events: auto;
  margin-top: 1.6rem;
}

.ps-imageslider--pairs .ps-imageslider__figcaption {
  position: static;
  transform: none;
  max-width: 32rem;
  padding: 0;
  text-align: left;
  background: transparent;
  backdrop-filter: none;
}

/* Заголовок крупнее: на широком экране прежний размер оставлял вокруг себя
   много воздуха, и кадр читался полупустым. */
.ps-imageslider--pairs .ps-imageslider__figcaption h2 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.02;
  margin-bottom: .8rem;
}

.ps-imageslider--pairs .ps-imageslider__figcaption > div {
  font-size: clamp(1.05rem, 1.7vw, 1.7rem);
}

.ps-imageslider--pairs .ps-imageslider__figcaption::after {
  content: none;
}

/* На телефоне дымка закрывала бы весь кадр, поэтому подпись садится
   на подложку внизу, а снимки делят ширину пополам. */
@media (max-width: 767.98px) {
  .ps-imageslider--pairs .ps-imageslider__pair {
    height: auto;
    flex-wrap: wrap;
  }

  .ps-imageslider--pairs .ps-imageslider__cell {
    flex: 1 1 50%;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .ps-imageslider--pairs .ps-imageslider__text {
    position: static;
    order: 3;
    flex: 0 0 100%;
    background: var(--aleon-sand);
    padding: 1.5rem 1.4rem;
    pointer-events: auto;
  }

  .ps-imageslider--pairs .ps-imageslider__figcaption h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
}

/* ------------------------------------------------------------
   Размеры кнопками на карточке товара
   Разметку даёт templates/catalog/_partials/product-variants.tpl,
   там же объяснено, что бледное и почему нажимается.

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

.aleon-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.aleon-size {
  position: relative;
  display: flex;
}

/* Радио-вход не прячем через display: none — тогда до кнопки
   не дойти клавиатурой. Он прозрачный и лежит под подписью. */
.aleon-size__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.aleon-size__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-width: 4.25rem;
  padding: .55rem .6rem .45rem;
  border: 1px solid var(--aleon-line);
  background: #fff;
  color: var(--aleon-ink);
  font-family: var(--aleon-sans);
  font-size: .95rem;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.aleon-size__label:hover {
  border-color: var(--aleon-brown);
}

.aleon-size__input:checked + .aleon-size__label {
  border-color: var(--aleon-brown);
  box-shadow: inset 0 0 0 1px var(--aleon-brown);
}

.aleon-size__input:focus-visible + .aleon-size__label {
  outline: 2px solid var(--aleon-brown);
  outline-offset: 2px;
}

/* Бледный #b8aca0 на кремовом — контраст 2,03 при норме 4,5, и это
   намеренно: так на маркетплейсе выглядит «нет», которое заказчица
   привела образцом. Название размера всё равно различимо, а чтению
   с экрана «нет в наличии» сказано скрытым текстом. */
.aleon-size--out .aleon-size__label {
  color: #b8aca0;
  background: var(--aleon-cream);
  border-color: var(--aleon-sand);
}

.aleon-size--out .aleon-size__input:checked + .aleon-size__label {
  border-color: #b8aca0;
  box-shadow: inset 0 0 0 1px #b8aca0;
}

.aleon-size__note {
  font-size: .66rem;
  letter-spacing: .02em;
  color: var(--aleon-muted);
  text-transform: lowercase;
}

/* ── Доставка на странице заказа ─────────────────────────────────────────
   Общая разметка служб доставки: `order_detail.tpl` в aleonyandex и aleoncdek.
   Новая служба отдаёт те же классы и получает этот вид, тему не трогая. */
.aleon-delivery__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  background: var(--aleon-sand);
  border-left: 3px solid var(--aleon-brown);
}

.aleon-delivery__status {
  flex: 1 1 100%;
  margin: 0;
  font-weight: 500;
  color: var(--aleon-ink);
}

.aleon-delivery__part {
  display: inline-block;
  margin-right: .5rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aleon-muted);
}

.aleon-delivery__number {
  margin: 0;
  color: var(--aleon-muted);
}

.aleon-delivery__number strong {
  color: var(--aleon-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

.aleon-delivery__link {
  margin-left: auto;
}