/* Inter — СВОЙ, не из Google Fonts.
 *
 * Зачем. Основной шрифт всей витрины (везде стоит стек `Inter, sans-serif`) раньше
 * приходил из Google, и путь до него был длинный: сначала запрос к fonts.googleapis.com
 * за таблицей стилей, и только потом, узнав из неё адрес, — запрос к fonts.gstatic.com
 * за самим файлом. Два чужих домена подряд: по замеру CSS стартовал на 1057 мс, а файл
 * шрифта — лишь на 1367 мс, то есть заведомо позже первой отрисовки. Пока его нет, текст
 * рисуется системным шрифтом, а когда шрифт приезжает — браузер подменяет его, строки
 * перевёрстываются и всё, что ниже, прыгает. Это давало почти весь сдвиг вёрстки на
 * страницах категорий (CLS 0.10–0.14, причина в аудите — «Web font loaded»).
 *
 * Теперь файлы лежат у нас: качаются с того же домена по уже открытому соединению и
 * вдобавок объявлены в <head> через `preload` (см. common/header.twig), поэтому шрифт
 * успевает к первой отрисовке и подменять ничего не приходится.
 *
 * Деление на куски по `unicode-range` оставлено ровно таким, каким его отдаёт Google:
 * браузер скачивает только тот кусок, символы которого реально есть на странице —
 * английской странице латиницы (48 КБ) достаточно, кириллица (19 КБ) поедет только на
 * русской и украинской. Слить всё в один файл значило бы раздать всем сразу 178 КБ.
 * Греческий и вьетнамский куски не заводим — таких языков у магазина нет.
 *
 * `swap` оставлен намеренно: в худшем случае (очень медленная сеть) поведение будет
 * прежним, а не «страница целиком не тем шрифтом», как было бы с `optional`.
 *
 * Inter распространяется по SIL Open Font License — размещать у себя разрешено.
 * Версия файлов — Inter v20 с осью веса 100..900, забраны из Google 2026-09-14.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  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;
}

:root {
  --color-main: #c8a84e;
  --color-main-lighter: #faf6eb;
  --collor-line: rgba(239, 239, 239, 1);
  --transition: all 0.3s ease-in-out;
  --border: 1px solid var(--collor-line);
  --color-footer-bg: #f5f5f5;
  --color-footer: #222;
  --color-footer-mail: #fff;
  --color-orange: #c8a84e;
  --color-gray: #c6c6c6;
  --color-green: #0fa379;
  --stepper-bg: rgba(242, 242, 242, 0.4);
  --color-stepper: #000;
  --hover-add: #b0933e;
  --click-add: #9a8035;
  --color-checkout: #c8a84e33;
  --color-panel-cart: #faf6eb;
  --color-delete: #ff5858;
  --color-border: #e7e4e4;
  --scrollbar-color: #00000040;
}

.icon {
  width: 24px;
  height: auto;
  object-fit: cover;
  object-position: center;
}
/* радіуси кнопок */
.r-10 {
  border-radius: 10px;
}
.r-15 {
  border-radius: 15px;
}
.r-20 {
  border-radius: 20px;
}
.r-50 {
  border-radius: 50px;
}
/* текст */
.text-h1 {
  font-family: 'Inter';
  font-size: 30px;
  font-weight: 700;
  line-height: 31px;
}
.text-h2 {
  font-family: 'Inter';
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
}
.text-h2--bold {
  font-weight: 700;
}
.text-h3 {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}
.text-h3-md {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}
.text-h3-bold {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
}
.text-h4 {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.text-h5 {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}
.text-h4-md {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.text-h5-bold {
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

@media (max-width: 767px) {
  .text-h1 {
    font-size: 20px;
    line-height: 21.78px;
  }
  .text-h2 {
    font-size: 16px;
    line-height: 26px;
  }
  .text-h3 {
    font-family: 'Inter';
    font-size: 15px;
    line-height: 26px;
  }
  .text-h3-md {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
  .text-h4-md {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
  }
}
/* кнопки */
.btn-custom {
  position: relative;
  width: auto;
  padding: 10px 15px;
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  cursor: pointer;
  color: #fff;
  overflow: hidden;
  transition: var(--transition);
}
.btn-transparent {
  color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(234, 234, 234, 1);
  background-color: transparent;
}
.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(13, 194, 67, 1);
  color: #fff;
  border: 1px solid rgba(13, 194, 67, 1);
}
.btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 88, 88, 1);
  color: #fff;
  border: 1px solid rgba(255, 88, 88, 1);
}
.icon-btn {
  padding: 10px;
  background-color: white;
  border: var(--border);
  border-radius: 50%;
}
.icon-btn:hover svg > path {
  stroke: var(--color-main);
  transition: var(--transition);
}
.stats-btn:focus svg > path {
  stroke: var(--color-main);
  fill: var(--color-main);
}
.active-like > svg > path {
  stroke: var(--color-main);
  fill: var(--color-main);
}
@media (max-width: 992px) {
  .btn-custom {
    font-size: 15px;
    line-height: 22px;
    padding: 9px 20px;
  }
}
/* класи по відображенню елементів */
.visible-element {
  display: flex;
}
.hidden-element {
  display: none;
}
.arrow {
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.arrow::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 5px;
  background-image: url('/image/catalog/icon-svg/arrow.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transition: var(--transition);
}
.dropdown.open .arrow::after {
  transform: rotate(180deg);
  transition: var(--transition);
}
.button__animation-wrapper {
  position: relative;
  overflow: hidden;
}
.button__animation {
  background-color: var(--color-main);
  border: none;
  transition: var(--transition);
  position: relative;
}
.button__animation:hover {
  transition: var(--transition);
  color: #fff !important;
}
.button__animation-add:hover {
  background-color: var(--hover-add);
}
.button__animation-hidden {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--click-add);
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: -100%;
  left: 0;
  z-index: 1;
  opacity: 0;
  color: #fff;
}
.button__animation-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.button__animation-right svg {
  opacity: 1 !important;
  width: 25px;
  height: 24px;
}
.button__animation-right > span {
  position: relative;
  display: inline-block;
  width: fit-content;
  text-wrap: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@keyframes moveHiddenToUp {
  0% {
    bottom: -100%;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes moveHiddenToBottom {
  0% {
    bottom: 0;
    opacity: 1;
  }
  100% {
    bottom: -100%;
    opacity: 0;
  }
}
.button__animation-wrapper.active .button__animation-hidden {
  animation: moveHiddenToUp 0.3s linear forwards;
}
.button__animation-wrapper.inactive .button__animation-hidden {
  animation: moveHiddenToBottom 0.3s linear forwards;
}
.button__animation-right span {
  animation: moveRightToLeft 0.8s ease-in-out forwards;
}

.button__animation-right .button__animation-right-text {
  animation: changeOpacityReverse 0.8s ease-in-out forwards;
}

.button__animation-right:hover span {
  animation: moveHiddenLeftToRight 0.8s ease-in-out forwards;
}

.button__animation-right:hover .button__animation-right-text {
  animation: changeOpacity 0.8s ease-in-out forwards;
}

@keyframes moveHiddenLeftToRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(40%);
  }
}

@keyframes moveRightToLeft {
  0% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes changeOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes changeOpacityReverse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Токены раздела «Личный кабинет» (--otac-*) + brand-fallback (--otc-btn-*).
   Лежат ЗДЕСЬ, а не в personal-acc.css, потому что personal-acc.css — это 385 КБ
   стилей кабинета, и на витрине из него применялось РОВНО одно правило: этот блок
   переменных. Проверено перебором всех 1821 селектора файла по DOM страницы
   категории — совпал только :root. При этом переменные нужны глобально:
   account-modals.css грузится на каждой странице (модалки аккаунта открываются из
   шапки) и читает --otac-*. Поэтому переменные вынесены сюда, а сам файл кабинета
   подключается только там, где он нужен, — см. common/header.twig.
   Позиция сохранена: _variables.css идёт в той же точке каскада, где раньше был
   personal-acc.css, поэтому admin-значения из инлайн :root в header.twig (он ниже
   по документу) по-прежнему перебивают эти fallback'и.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand fallbacks (override-яться з admin через :root у header.twig) */
  --otc-btn-primary: #392923;
  --otc-btn-primary-text: #FFFFFF;
  --otc-btn-primary-hover: #4D382E;
  --otc-btn-radius: 10px;
  /* УВАГА: --otc-card-radius / --otc-card-border НЕ визначаємо тут.
     Це admin/product-токени (їх задає :root у common/header.twig з налаштувань
     «Дизайн → Картка товару»). Якщо продублювати їх тут, personal-acc.css
     вантажиться ПІСЛЯ інлайн-стилю header → перебиває admin-значення, і product-картки
     на сторінках акаунта (Обране/Переглянуті) отримують чужий border/radius.
     Акаунт-компоненти (.acc-order-row, .acc-od-panel, .otc-loyalty-card…) мають власний
     статичний border/radius нижче (1px solid var(--otac-border) / 8px), без цих змінних. */

  /* Account static tokens (Figma constants) */
  --otac-text: #131314;
  --otac-text-muted: #606162;
  --otac-text-light: #7D7D7D;
  --otac-border: #DDDDDD;
  --otac-input-bg: #F7F7F7;
  --otac-status-orange: #C75E02;
  --otac-status-green: #577B28;
  --otac-status-muted: #7D7D7D;
  --otac-panel-bg: #FFFFFF;
  --otac-panel-padding: 12px;
  --otac-panel-gap: 24px;

  /* Typography scale */
  --otac-ff: 'Inter', sans-serif;
  --otac-fs-h1: 24px;
  --otac-fs-h2: 20px;
  --otac-fs-panel: 16px;
  --otac-fs-body-lg: 16px;
  --otac-fs-body: 14px;
  --otac-fs-caption: 12px;
  --otac-fs-btn-lg: 16px;
  --otac-fs-btn-md: 14px;
  --otac-lh-tight: 1.21;
  --otac-lh-body: 1.375;
  --otac-lh-normal: 1.43;
  --otac-fw-regular: 400;
  --otac-fw-medium: 500;
  --otac-fw-semibold: 600;
  --otac-fw-bold: 700;
}