/* ==========================================================================
   MIROLINE — шрифты, базовая типографика, утилиты
   ========================================================================== */

/* --- Шрифты ---------------------------------------------------------------
   Оба семейства вариативные: один файл покрывает весь диапазон весов.
   Разделены по unicode-range, чтобы латиница не грузилась ради кириллицы.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-cyrillic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Антиква нужна одному элементу — слову MIROLINE в логотипе. Оно набрано
   латиницей, поэтому кириллический файл гарнитуры не подключаем. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Запасные шрифты ------------------------------------------------------
   Пока грузятся woff2, текст рисуется системным. Он у́же Golos, поэтому
   строки переносятся иначе, и в момент подмены страница подпрыгивает.
   size-adjust подгоняет ширину запасного под основной — коэффициенты
   измерены в браузере.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Golos fallback';
  src: local('Arial');
  size-adjust: 105.5%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cormorant fallback';
  src: local('Times New Roman');
  size-adjust: 94.8%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --- База ----------------------------------------------------------------- */

/* Пропорциональный масштаб: макет выглядит одинаково на любой ширине.
   Знаменатель = эталон зоны / 16: десктоп 1440, планшет 896,
   фаблет 620, телефон 390. Вся вёрстка в rem и растёт вместе с корнем. */
html { font-size: calc(100vw / 90); }

@media (max-width: 1023px) {
  html { font-size: calc(100vw / 56); }
}

@media (max-width: 767px) {
  html { font-size: calc(100vw / 38.75); }
}

@media (max-width: 479px) {
  html { font-size: calc(100vw / 24.375); }
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 400;
}

@media (min-width: 1024px) {
  body { font-size: var(--fs-body-lg); }
}

/* Заголовки набираются Golos. Начертаний легче 400 у него нет, поэтому
   плотность крупного кегля компенсируется трекингом и интерлиньяжем.
   Принудительный lining-nums, нужный антикве со старостильными цифрами,
   здесь не требуется — у Golos они маюскульные по умолчанию. */
.h1, h1 {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.h2, h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}

.h3, h3 {
  font-family: var(--f-text);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
}

a { color: inherit; }

a:hover { color: var(--c-accent); }

/* --- Раскладка ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--sp-section);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.section__link {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.section__link:hover { color: var(--c-accent); }

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

.crumbs {
  padding-block: var(--sp-6) 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.crumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* разделитель рисуем на элементе, а не текстом — он не попадёт в копирование */
.crumbs__list li + li::before {
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--c-line-strong);
}

.crumbs a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.crumbs [aria-current] { color: var(--c-ink); }

/* --- Заголовок страницы ------------------------------------------------------ */

.page-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.page-head__count {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.page-head__action {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: underline;
  text-underline-offset: .1875rem;
  background: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.page-head__action:hover { color: var(--c-error); }

/* --- Утилиты -------------------------------------------------------------- */

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 500;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-bg);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9375rem 1.875rem;
  font-family: var(--f-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
}

.btn--ghost {
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}

.btn--ghost:hover {
  border-color: var(--c-ink);
  background: transparent;
  color: var(--c-ink);
}

/* прозрачная кнопка на тёмной подложке: базовая рисуется тёмным по тёмному */
.on-dark .btn--ghost {
  border-color: var(--c-line-on-dark);
  color: var(--c-on-dark);
}

.on-dark .btn--ghost:hover {
  border-color: var(--c-on-dark);
  color: var(--c-white);
}

.btn--light {
  background: var(--c-on-dark);
  color: var(--c-ink);
}

.btn--light:hover {
  background: var(--c-white);
  color: var(--c-ink);
}

.btn--sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--fs-xs);
}

/* Кнопка остаётся в потоке табуляции и доступной для нажатия: по клику
   нужно объяснить, чего не хватает, а не молча ничего не делать. */
.btn--disabled {
  background: var(--c-surface-2);
  border-color: transparent;
  color: var(--c-ink-2);
  cursor: default;
}

.btn--disabled:hover {
  background: var(--c-surface-2);
  color: var(--c-ink-2);
}

/* Закрытое действие: доступ откроется сам, когда условие выполнится (сумма
   корзины дотянет до минимума). В отличие от btn--disabled несёт замок и
   отчётливую границу — рядом с ней стоит объяснение, а не тупик.
   Разница с активной кнопкой держится на трёх признаках сразу — заливка,
   цвет текста, иконка, — чтобы состояние читалось и без цвета. */
.btn--locked {
  /* Светлая заливка, а не бежевая: сводка корзины сама лежит на бежевом, и
     кнопка в цвет подложки перестала бы читаться как кнопка. */
  background: var(--c-white);
  border-color: var(--c-line-strong);
  color: var(--c-ink-2);
  cursor: not-allowed;
}

.btn--locked:hover {
  background: var(--c-white);
  border-color: var(--c-line-strong);
  color: var(--c-ink-2);
}

/* Дужка замка — единственная деталь, которая двигается: короткий отскок по
   нажатию отвечает на клик, не притворяясь, что действие сработало. */
.btn--locked .btn__icon path {
  transform-origin: 10px 9px;
}

.btn--locked:active .btn__icon path {
  animation: lock-shake var(--t-base) var(--ease);
}

@keyframes lock-shake {
  40% { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}

/* --- Формы -----------------------------------------------------------------
   Общие примитивы: ими пользуются подписка, оформление заказа и вход.
   Компонентные стили форм остаются в файлах своих страниц.
   -------------------------------------------------------------------------- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-4);
  /* по вертикали расстояние меньше: снизу у каждого поля уже зарезервировано
     место под сообщение об ошибке */
  row-gap: var(--sp-2);
}

.fields--single { grid-template-columns: minmax(0, 1fr); }

/* Место под ошибку держится всегда, а само сообщение лежит в нём поверх потока.
   Иначе появление ошибки сдвигает вниз всё, что стоит после поля. */
.field-row {
  position: relative;
  display: grid;
  padding-bottom: 1.375rem;
}

.field-row--wide { grid-column: 1 / -1; }

.field-row label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

.field-row input,
.field-row textarea,
.field-row select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease);
}

.field-row textarea {
  min-height: 5.5rem;
  resize: vertical;
}

/* Фокус показываем самой рамкой поля. Общий outline даёт вторую линию
   с зазором в 2 px — у полей ввода она читается как вторая рамка. */
.field-row input:focus-visible,
.field-row textarea:focus-visible,
.field-row select:focus-visible {
  outline: none;
  border-color: var(--c-ink);
}

.field-row input[aria-invalid="true"],
.field-row textarea[aria-invalid="true"] { border-color: var(--c-error); }

.field-row input[aria-invalid="true"]:focus-visible,
.field-row textarea[aria-invalid="true"]:focus-visible { border-color: var(--c-error); }

.field-row__error {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--c-error);
}

.field__error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-error);
}

/* Плашка-уведомление: заметное сообщение о том, что дальше без действий
   покупателя ничего не произойдёт (сорвавшаяся оплата). Строкой мелким
   шрифтом такое проскакивают мимо глаз. */
.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.notice__icon {
  flex: none;
  display: grid;
  place-items: center;
  margin-top: .05em;
}

.notice__icon svg { width: 1.25rem; height: 1.25rem; }

.notice--error {
  /* цвет ошибки во всех трёх ролях: фон приглушён прозрачностью,
     чтобы не заводить второй красный в палитре */
  color: var(--c-error);
  background: color-mix(in srgb, var(--c-error) 8%, var(--c-bg));
  border: 1px solid color-mix(in srgb, var(--c-error) 35%, transparent);
  /* полоса слева — за неё цепляется взгляд при быстром просмотре страницы */
  border-left-width: 4px;
}

.field__success {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-success);
}

/* --- Промокод (корзина и оформление) --------------------------------------- */

.promo {
  margin-block: var(--sp-4);
}

.promo__row {
  display: flex;
  gap: var(--sp-2);
}

.promo__input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease);
}

/* Подсказка «Промокод» тем же кеглем, что надпись на кнопке «Применить»
   (btn--sm, --fs-xs): рядом в одной строке разница читалась как небрежность.
   Введённый код остаётся крупнее — его человек перечитывает перед отправкой. */
.promo__input::placeholder { font-size: var(--fs-xs); }

.promo__input:focus-visible {
  outline: none;
  border-color: var(--c-ink);
}

.promo[data-state="success"] .promo__input { border-color: var(--c-success); }
.promo[data-state="error"] .promo__input { border-color: var(--c-error); }

.promo__msg {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
}

.promo[data-state="success"] .promo__msg { color: var(--c-success); }
.promo[data-state="error"] .promo__msg { color: var(--c-error); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  cursor: pointer;
}

.checkbox input {
  width: 1rem;
  height: 1rem;
  margin: 1px 0 0;
  accent-color: var(--c-accent);
  flex-shrink: 0;
}

/* нативный select со своей стрелкой: доступность нативная, вид — наш */
.select {
  padding: var(--sp-2) 2rem var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) calc(50% + 1px),
    calc(100% - .6875rem) calc(50% + 1px);
  background-size: .3125rem .3125rem;
  background-repeat: no-repeat;
}

/* фокус показываем рамкой, как у остальных полей — без второй линии с зазором */
.select:focus-visible {
  outline: none;
  border-color: var(--c-ink);
}

/* --- Поле с паролем ------------------------------------------------------------- */

.password {
  position: relative;
}

.password input { padding-right: 3rem; }

.password__toggle {
  position: absolute;
  right: var(--sp-2);
  /* поле заканчивается выше низа .field-row — там место под ошибку */
  bottom: 1.375rem;
  width: 2.5rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.password__toggle:hover { color: var(--c-ink); }

/* перечёркиваем глаз, когда пароль показан */
.password__toggle[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: .075rem;
  background: currentColor;
  transform: rotate(-45deg);
}

/* --- Счётчик количества ----------------------------------------------------
   Общий для карточки товара и строки корзины.
   -------------------------------------------------------------------------- */

.qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.qty button {
  width: 2.75rem;
  height: 3.125rem;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  color: var(--c-ink);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.qty button:hover:not(:disabled) { color: var(--c-accent); }

.qty button:disabled { color: var(--c-line-strong); cursor: default; }

.qty input {
  width: 2.25rem;
  text-align: center;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: none;
  border: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Иконочная кнопка ------------------------------------------------------ */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--c-surface);
  color: var(--c-accent);
}

/* --- Фокус ----------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: .125rem;
  border-radius: var(--radius-sm);
}

.on-dark :focus-visible {
  outline-color: var(--c-on-dark);
}

/* Модальное окно принимает фокус на себя при открытии (tabindex="-1"), чтобы
   рамка не садилась на кнопку закрытия. Обводить при этом всё окно незачем. */
dialog:focus-visible { outline: none; }

/* --- Тёмные блоки ---------------------------------------------------------- */

.on-dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.on-dark a:hover { color: var(--c-white); }

/* --- Уведомление ------------------------------------------------------------ */

.toast {
  position: fixed;
  /* прижато к правому верхнему углу, сразу под шапкой */
  top: calc(var(--header-h) + var(--sp-3));
  right: var(--container-pad);
  z-index: var(--z-toast);
  max-width: min(24rem, calc(100vw - var(--sp-8)));
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
  line-height: 1.45;
  border-radius: var(--radius);
  box-shadow: 0 .75rem 2.125rem rgba(28, 24, 21, .22);
  transform: translateY(-.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.toast[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

/* --- Уведомление о cookies ---------------------------------------------------- */

.cookie {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: min(46rem, calc(100vw - var(--sp-8)));
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  box-shadow: 0 .875rem 2.5rem rgba(28, 24, 21, .26);
  transform: translate(-50%, calc(100% + var(--sp-6)));
  transition: transform 320ms var(--ease);
}

.cookie[data-visible] { transform: translate(-50%, 0); }

.cookie__text {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-on-dark-2);
}

.cookie__text a {
  color: var(--c-on-dark);
  text-decoration: underline;
  text-underline-offset: .125rem;
}

.cookie__text a:hover { color: var(--c-white); }

.cookie__accept {
  flex-shrink: 0;
  min-width: 7.5rem;
}

@media (max-width: 639px) {
  .cookie {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    bottom: var(--sp-4);
    text-align: left;
  }
}

/* --- Уменьшенное движение --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Иконки ----------------------------------------------------------------
   Инлайновые SVG следуют масштабу макета: размер из атрибутов переведён
   в rem атрибутными селекторами (иначе иконки выпадали бы из пропорции). */
svg[width="12"][height="14"] { width: .75rem; height: .875rem; }
svg[width="14"][height="14"] { width: .875rem; height: .875rem; }
svg[width="16"][height="16"] { width: 1rem; height: 1rem; }
svg[width="18"][height="18"] { width: 1.125rem; height: 1.125rem; }
svg[width="20"][height="20"] { width: 1.25rem; height: 1.25rem; }
svg[width="22"][height="22"] { width: 1.375rem; height: 1.375rem; }
svg[width="26"][height="26"] { width: 1.625rem; height: 1.625rem; }
svg[width="28"][height="28"] { width: 1.75rem; height: 1.75rem; }
svg[width="30"][height="30"] { width: 1.875rem; height: 1.875rem; }