@charset "UTF-8";
/**
 * Ventolux - UI-кіт. Компоненти з Figma-сторінки «Components».
 * Тут живуть УСІ повторювані елементи. Модулі їх тільки використовують
 * і ніколи не перевизначають вигляд - лише розкладку (grid/gap) у себе.
 */
/* ==========================================================================
   Button - Figma «Button» (h44, padding 12, gap 8, кути прямі)
   ========================================================================== */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: var(--space-3);
  font: var(--t-button);
  letter-spacing: var(--t-button-ls);
  text-align: center;
  white-space: nowrap;
  border-radius: 0;
  overflow: hidden;
}

.v-btn__icon {
  display: flex;
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Стан «вже додано»: іконка міняється на залиту, як у Icon Button (Pressed) */
.v-btn.is-active .v-icon--on {
  display: block;
}

.v-btn.is-active .v-icon--off {
  display: none;
}

/* варіанти */
.v-btn--primary {
  color: var(--c-white);
  background: var(--c-primary);
}

.v-btn--primary:hover {
  background: var(--c-primary-hover);
}

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

.v-btn--accent:hover {
  background: var(--c-accent-dark);
}

/* Figma «Button» Type=Secondary, Mode=Dark: синя рамка 1px, синій текст.
   У фінальному UI-кіті кнопки лише Primary / Secondary / Tertiary - сірої контурної немає,
   тому всі контурні кнопки сайту - Secondary */
.v-btn--secondary {
  color: var(--c-primary);
  background: transparent;
  border: 1px solid var(--c-primary);
}

.v-btn--secondary:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-50);
}

.v-btn--light {
  color: var(--c-text);
  background: var(--c-white);
}

.v-btn--light:hover {
  background: var(--c-grey-light);
}

.v-btn--tertiary {
  color: var(--c-primary);
  background: transparent;
}

.v-btn--tertiary:hover {
  color: var(--c-primary-hover);
}

.v-btn--ghost {
  color: var(--c-text);
  background: transparent;
}

.v-btn--ghost:hover {
  color: var(--c-primary);
}

.v-btn--block {
  display: flex;
  width: 100%;
}

.v-btn[disabled],
.v-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   Icon Button - Figma «Icon Button/Large» (44x44, іконка 20) і Small (24, іконка 20)
   ========================================================================== */
.v-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: var(--space-3);
  color: var(--c-text);
  flex: 0 0 auto;
}

.v-icon-btn:hover {
  color: var(--c-primary);
}

.v-icon-btn--sm {
  width: auto;
  height: auto;
  padding: 2px;
}

.v-icon-btn--fill {
  color: var(--c-white);
  background: var(--c-primary);
}

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

/* Стан Pressed: у макеті іконка міняє накреслення на залите
   (Figma «Icon Button/Large/Favorites», «Icon Button/Comparison», «Icon Button/Shopping_card»).
   Обидві іконки лежать у розмітці, видно ту, що відповідає стану. */
.v-icon--on {
  display: none;
}

.v-icon-btn.is-active .v-icon--on {
  display: block;
}

.v-icon-btn.is-active .v-icon--off {
  display: none;
}

.v-icon-btn.is-active {
  color: var(--c-primary);
}

.v-icon-btn--fill.is-active {
  color: var(--c-white);
}

/* ==========================================================================
   Notif - лічильник на іконці (16x16, radius 8, orange)
   ========================================================================== */
.v-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--icon-sm);
  height: var(--icon-sm);
  padding: 2px;
  font: var(--t-caption-medium);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-white);
  background: var(--c-accent);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-spring);
}

.v-icon-btn:hover .v-badge {
  transform: scale(1.12);
}

/* ==========================================================================
   Select - Figma «Select» (компактний, h32)
   ========================================================================== */
.v-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.v-select__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 10px var(--space-2);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-text);
}

.v-select__btn:hover {
  color: var(--c-primary);
}

.v-select__caret {
  display: flex;
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.v-select__btn[aria-expanded=true] .v-select__caret {
  transform: rotate(180deg);
}

/* випадайка - це .dropdown-menu Bootstrap, перевизначаємо під макет */
.v-select .dropdown-menu {
  min-width: 100%;
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.v-select__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v-select__item:hover {
  background: var(--c-bg-grey);
}

.v-select__item.is-active {
  color: var(--c-primary);
}

/* Варіант «поле форми»: та сама рамка й висота, що в Input (Figma 2351:117656) */
.v-select--field {
  width: 100%;
}

.v-select--field .v-select__btn {
  width: 100%;
  height: 40px;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
}

.v-select--field .v-select__value {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
}

.v-select--field .dropdown-menu {
  width: 100%;
}

/* ==========================================================================
   Search - Figma «Search» (border light-grey, radius 2, padding 16/12)
   ========================================================================== */
.v-search {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  height: 48px;
  padding-inline: var(--space-4);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}

.v-search:focus-within {
  border-color: var(--c-primary);
}

.v-search__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}

.v-search__side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.v-search__side--left {
  flex: 1 0 0;
  min-width: 0;
}

.v-search__input {
  flex: 1 0 0;
  min-width: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  background: none;
  border: 0;
  outline: none;
}

.v-search__input::placeholder {
  color: var(--c-text-muted);
}

/* ==========================================================================
   Nav Button - Figma «Nav Button» (px4 py8, gap4, subbody)
   ========================================================================== */
.v-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.v-nav-link:hover,
.v-nav-link.is-active {
  color: var(--c-primary);
}

.v-nav-link__icon {
  display: flex;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* акцентна іконка в пункті меню (у макеті - «Знижки») */
.v-nav-link--accent .v-nav-link__icon {
  color: var(--c-accent);
}

/* ==========================================================================
   Section head - шапка секції (заголовок + посилання «усі»)
   ========================================================================== */
.v-section {
  padding-block: var(--space-4);
}

/* Моб: заголовок і дії стають у стовпчик, кнопки на всю ширину
   (Figma «Feedback» 2346:76342 - шапка 56, під нею кнопка 358x44).
   На ПК той самий рядок, як у макеті 1440. */
.v-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: 56px;
  margin-bottom: var(--space-2);
}

.v-section__head-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Моб (Figma 2346:75458 «Discounts block»): заголовок і стрілки в одному рядку, посилання
   «Дивитись усі товари» переїжджає в суцільну кнопку під каруселлю, тому в шапці його немає */
@media (max-width: 1023.98px) {
  .v-section__head-left .v-section__link {
    display: none;
  }
  /* стрілки лишаються праворуч навіть при довгому заголовку - він переноситься сам */
  .v-section__head:not(:has(.v-btn)) {
    flex-wrap: nowrap;
  }
  .v-section__head:not(:has(.v-btn)) .v-section__head-left {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.v-section__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* дії з текстовими кнопками (відгуки, питання) на мобільній ідуть під заголовком
   і ділять ширину порівну - інакше ряд не влазить у 390 і сторінка їде вбік */
.v-section__arrows:has(.v-btn) {
  flex: 1 0 100%;
}

.v-section__arrows:has(.v-btn) .v-btn {
  flex: 1 1 0;
  min-width: 0;
}

.v-section__arrows .v-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* стрілка недоступна, коли карусель на краю */
.v-section__arrows .v-icon-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.v-section__title {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
}

.v-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-primary);
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
}

/* випадайка селекта, притиснутого до правого краю */
.v-select--right .v-select__list {
  left: auto;
  right: 0;
}

@media (min-width: 1024px) {
  .v-section {
    padding-block: var(--space-8);
  }
  .v-section__head {
    margin-bottom: var(--space-6);
  }
  /* ПК: дії повертаються в рядок із заголовком */
  .v-section__arrows:has(.v-btn) {
    flex: 0 0 auto;
  }
  .v-section__arrows:has(.v-btn) .v-btn {
    flex: 0 0 auto;
  }
  .v-section__title {
    font: var(--t-h2);
    letter-spacing: var(--t-h2-ls);
  }
}
/* ==========================================================================
   Card/Category
   Моб - Figma 2346:75444 (106x106: фото 100x66 + назва 40 у два рядки, без фону)
   ПК  - Figma 2351:112741 (169x233: рамка фото 169x169 з полями 16 зверху/знизу - саме фото 137,
         розрив 16, назва 40, поле знизу 8)
   Висота фіксована як у макеті, фото стискається під довгу назву.
   ========================================================================== */
.v-card-cat {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 106px;
  text-align: center;
  background: var(--c-white);
}

.v-card-cat__pic {
  display: block;
  flex: 0 0 66px;
  width: 100px;
  margin-inline: auto;
}

.v-card-cat__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v-card-cat__title {
  display: -webkit-box;
  min-height: 40px;
  align-content: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-card-cat:hover .v-card-cat__title {
  color: var(--c-primary);
}

.v-card-cat__count {
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .v-card-cat {
    gap: var(--space-4);
    height: 233px;
    padding-bottom: var(--space-2);
  }
  .v-card-cat__pic {
    flex: 0 0 169px;
    width: 100%;
    padding-block: var(--space-4);
  }
  .v-card-cat__title {
    font: var(--t-body);
    letter-spacing: var(--t-body-ls);
  }
}
/* ==========================================================================
   Label - бейдж на картці (Figma «Label»: pad 4/8, Subbody Medium, білий текст)
   ========================================================================== */
.v-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-white);
  white-space: nowrap;
}

.v-label--accent {
  background: var(--c-accent);
}

.v-label--green {
  background: var(--c-green);
}

.v-label--ocean {
  background: var(--c-ocean);
}

.v-label--primary {
  background: var(--c-primary);
}

/* маленький бейдж знижки біля старої ціни (pad 2/4, Caption, акцент на світлому) */
.v-label--sale {
  gap: var(--space-1);
  padding: 2px var(--space-1);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-accent-dark); /* Figma «Label» Outline/Orange: текст #dc2e0b */
  background: var(--c-accent-light);
}

/* бейдж «Безкоштовно» біля заголовка в довідці (Figma Label Outline/Green:
   темно-зелений текст 14/16 на світло-зеленому) */
.v-label--success {
  color: var(--c-green-dark);
  background: var(--c-green-light);
}

/* ==========================================================================
   Card Status - наявність (крапка 12px + текст Subbody)
   ========================================================================== */
.v-status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

.v-status__dot {
  width: 12px;
  height: 12px;
  margin: 2px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}

.v-status--available .v-status__dot {
  background: var(--c-green-notif);
}

.v-status--ends .v-status__dot {
  background: var(--c-accent-notif);
}

.v-status--waiting .v-status__dot {
  background: var(--c-accent-notif);
} /* «Очікування» (Figma 2351:121157) */
/* ==========================================================================
   Stars - рейтинг (5 зірок 12px у комірках 16px)
   ========================================================================== */
.v-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.v-rating__stars {
  position: relative;
  width: 80px;
  height: 16px;
  flex: 0 0 auto;
}

.v-rating__row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* у макеті сама зірка 12x12 у комірці 16; в іконці Phosphor зірка займає ~87% поля,
   тому svg 14 - так видима зірка виходить 12, як у макеті */
.v-rating__row svg {
  flex: 0 0 16px;
  box-sizing: border-box; /* комірка рівно 16: інакше п'ята зірка обрізалась рядком 80 px */
  width: 16px;
  height: 16px;
  padding: 1px;
}

/* ширина заливки - класом, крок пів зірки: 0, 5, 10 … 50 (тобто 0.0 … 5.0) */
.v-rating--0 .v-rating__row--full {
  width: 0%;
}

.v-rating--5 .v-rating__row--full {
  width: 10%;
}

.v-rating--10 .v-rating__row--full {
  width: 20%;
}

.v-rating--15 .v-rating__row--full {
  width: 30%;
}

.v-rating--20 .v-rating__row--full {
  width: 40%;
}

.v-rating--25 .v-rating__row--full {
  width: 50%;
}

.v-rating--30 .v-rating__row--full {
  width: 60%;
}

.v-rating--35 .v-rating__row--full {
  width: 70%;
}

.v-rating--40 .v-rating__row--full {
  width: 80%;
}

.v-rating--45 .v-rating__row--full {
  width: 90%;
}

.v-rating--50 .v-rating__row--full {
  width: 100%;
}

.v-rating__row--empty {
  color: var(--c-grey);
}

.v-rating__row--full {
  color: var(--c-star, var(--c-primary));
}

.v-rating--accent {
  --c-star: var(--c-accent);
}

.v-rating__count {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-rating__count:hover {
  color: var(--c-primary);
}

/* ==========================================================================
   Card/Product
   Моб - Figma 347:6261 (169x428, pad 8, gap 8, ціна 24/32 над кнопками 40)
   ПК  - Figma 311:2249 (310x580, pad 16, gap 12, ціна 32/40 поруч з кнопками 44)
   ========================================================================== */
.v-card-prod {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  min-height: 428px; /* висота картки в макеті (моб) */
  padding: var(--space-2);
  background: var(--c-white);
}

.v-card-prod__top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v-card-prod__labels {
  position: relative;
  z-index: 1; /* фото заходить під ряд бейджів (margin-top -18), бейджі - поверх, як у макеті */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  min-height: 40px;
}

/* бейдж на мобільній компактніший */
.v-card-prod__labels .v-label {
  padding: 2px var(--space-1);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
}

.v-card-prod__pic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 148px; /* у макеті фото вужче за контент картки */
  aspect-ratio: 1;
  margin-top: -18px;
}

.v-card-prod__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.v-card-prod__img.is-active {
  opacity: 1;
}

/* Pic Nav - риски перемикання фото (20x2) */
.v-card-prod__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 2px;
}

.v-card-prod__dash {
  width: 20px;
  height: 2px;
  background: var(--c-grey);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v-card-prod__dash.is-active {
  background: var(--c-primary);
}

.v-card-prod__status {
  min-height: 14px;
}

.v-card-prod__name {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v-card-prod__name a {
  transition: color var(--dur-fast) var(--ease-out);
}

.v-card-prod:hover .v-card-prod__name a {
  color: var(--c-primary);
}

/* Bottom bar: моб - стара ціна, ціна, ряд кнопок; ПК - ціна поруч з кнопками */
.v-card-prod__bottom {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  min-height: 90px;
}

.v-card-prod__old {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: 2px;
  min-height: 18px;
}

.v-card-prod__old-price {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.v-card-prod__buy {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  min-height: 72px;
}

.v-card-prod__price {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-text);
  white-space: nowrap;
}

/* ціна червона лише зі знижкою, без знижки - чорна (Figma Card/Product, стан без Old price) */
.v-card-prod__price--sale {
  color: var(--c-accent);
}

.v-card-prod__actions {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-2);
}

.v-card-prod__actions .v-icon-btn {
  width: 40px;
  height: 40px;
  padding: var(--space-2);
}

.v-card-prod__logos {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-1);
  height: 24px;
}

.v-card-prod__logos img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .v-card-prod {
    gap: var(--space-3);
    min-height: 580px;
    padding: var(--space-4);
  }
  .v-card-prod__top {
    align-items: stretch;
  }
  .v-card-prod__labels {
    flex-wrap: nowrap;
    min-height: 24px;
  }
  .v-card-prod__labels .v-label {
    padding: var(--space-1) var(--space-2);
    font: var(--t-subbody-medium);
    letter-spacing: var(--t-subbody-ls);
  }
  .v-card-prod__pic {
    max-width: none;
    aspect-ratio: 278/268;
    margin-top: 2px;
  }
  .v-card-prod__status {
    min-height: 16px;
  }
  .v-card-prod__bottom {
    justify-content: space-between;
    min-height: 68px;
  }
  .v-card-prod__old {
    min-height: 24px;
  }
  .v-card-prod__old-price {
    font: var(--t-body);
    letter-spacing: var(--t-body-ls);
  }
  .v-card-prod__buy {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
  }
  .v-card-prod__price {
    font: var(--t-h3);
    letter-spacing: var(--t-h3-ls);
  }
  .v-card-prod__actions {
    justify-content: flex-end;
    gap: var(--space-2);
  }
  .v-card-prod__actions .v-icon-btn {
    width: var(--control-h);
    height: var(--control-h);
    padding: var(--space-3);
  }
  .v-card-prod__logos {
    justify-content: flex-start;
    gap: var(--space-2);
    height: 32px;
  }
  .v-card-prod__logos img {
    width: 32px;
    height: 32px;
  }
}
/* 1024-1279: у сітці з фільтром картка вужча за 310, ціна й кнопки в рядок не влазять -
   кнопки переносяться під ціну, а не вилазять за картку. На 1280+ - рядок, як у макеті. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .v-card-prod__buy {
    flex-wrap: wrap;
  }
}
/* ==========================================================================
   Card/Promo
   Моб - Figma 380:11816 (232x330: фото 232 + розрив 16 + шапка 82)
   ПК  - Figma 254:1328  (420x522: фото 420 + розрив 16 + шапка 86)
   ========================================================================== */
.v-card-promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 330px;
}

.v-card-promo__top {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--c-bg-grey);
}

.v-card-promo__top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* бейдж поверх фото - у макеті в лівому верхньому куті */
.v-card-promo__badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-1) var(--space-2);
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
}

.v-card-promo__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* слот таймера тримає висоту навіть порожній - інакше заголовки карток розʼїжджаються */
.v-card-promo__timer {
  display: flex;
  min-height: 18px;
}

/* мʼякий бейдж-таймер: світло-зелений фон, темно-зелений текст */
.v-label--soft {
  gap: var(--space-1);
  padding: 2px var(--space-1);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-green-dark);
  background: var(--c-green-light);
}

.v-card-promo__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}

.v-card-promo__title {
  flex: 1 0 0;
  min-width: 0;
  font: 400 14px/20px var(--font-base);
  letter-spacing: 0.28px;
  color: var(--c-text);
}

.v-card-promo__arrow {
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.v-card-promo:hover .v-card-promo__arrow {
  transform: translate3d(3px, -3px, 0);
  color: var(--c-primary);
}

@media (min-width: 1024px) {
  .v-card-promo {
    min-height: 522px;
  }
  .v-card-promo__title {
    font: var(--t-subtitle);
    letter-spacing: var(--t-subtitle-ls);
  }
  .v-card-promo__arrow {
    width: var(--control-h);
    height: var(--control-h);
    padding: var(--space-3);
  }
}
/* ==========================================================================
   Card/Article
   Моб - Figma 2487:125072 (232x356: фото 232x200 + розрив 16 + текст 140)
   ПК  - Figma 274:1340  (420x420, pad 16, розрив 24, фото 388x200)
   ========================================================================== */
.v-card-art {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 356px;
  background: var(--c-white);
}

.v-card-art__pic {
  display: block;
  aspect-ratio: 232/200;
  background: var(--c-bg-grey);
}

.v-card-art__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v-card-art__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.v-card-art__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.v-card-art__date {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

/* заголовок і анонс мають фіксовану висоту - у макеті це два і три рядки */
.v-card-art__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 48px;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-card-art:hover .v-card-art__title {
  color: var(--c-primary);
}

.v-card-art__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 72px; /* рівно 3 рядки 24 - інакше з-під обрізання визирає четвертий */
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .v-card-art {
    gap: var(--space-6);
    min-height: 420px;
    padding: var(--space-4);
  }
  .v-card-art__pic {
    aspect-ratio: 388/200;
  }
  .v-card-art__title {
    height: 60px;
    font: var(--t-subtitle);
    letter-spacing: var(--t-subtitle-ls);
  }
}
/* ==========================================================================
   Accordion - Figma «Accordion/Prototype» (моб 2487:111289, ПК 2487:111283):
   лінії-розділювачі #ebebeb зверху й між пунктами, пункт 44 (питання + кнопка «+» 44),
   відступ від лінії 8 на мобільній і 20 на ПК. Відкритий пункт - «✕».
   ========================================================================== */
.v-acc {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-grey-light);
}

.v-acc__item {
  border-bottom: 1px solid var(--c-grey-light);
}

.v-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2); /* моб: розрив менший, щоб питання вміщалось в один рядок, як у макеті */
  width: 100%;
  min-height: 60px; /* 44 + 8 + 8 */
  padding: var(--space-2) 0;
  text-align: left;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-acc__trigger:hover {
  color: var(--c-primary);
}

.v-acc__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  color: var(--c-primary);
  transition: transform var(--dur-base) var(--ease-out);
}

/* розкритий пункт: «+» повертається в «✕» */
.v-acc__trigger[aria-expanded=true] .v-acc__caret {
  transform: rotate(45deg);
}

.v-acc__answer {
  padding-bottom: var(--space-4);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .v-acc__trigger {
    gap: var(--space-4);
    min-height: 84px; /* 44 + 20 + 20 */
    padding: var(--space-5) 0;
    font: var(--t-subtitle);
    letter-spacing: var(--t-subtitle-ls);
  }
  .v-acc__answer {
    font: var(--t-body);
    letter-spacing: var(--t-body-ls);
  }
}
/* --- compact: FAQ (Figma «Accordion/Item» Type=Web 2351:124474 - 970x70; моб 2346:87294).
   Без верхньої лінії, пункт 44 + відповідь 14/16 через 10, між пунктами 8 + лінія + 8.
   Хрестик на ПК темний (Theme=Dark), на моб синій; розкрите питання на моб - в один рядок. */
.v-acc--compact {
  border-top: 0;
}

.v-acc--compact .v-acc__item {
  padding-block: var(--space-2);
}

.v-acc--compact .v-acc__item:first-child {
  padding-top: 0;
}

.v-acc--compact .v-acc__trigger {
  min-height: 44px;
  padding: 0;
}

.v-acc--compact .v-acc__answer {
  padding: 10px 0 0;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

@media (max-width: 1023.98px) {
  .v-acc--compact .v-acc__trigger[aria-expanded=true] .v-acc__question {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .v-acc--compact .v-acc__question {
    min-width: 0;
  }
}
@media (min-width: 1024px) {
  .v-acc--compact .v-acc__trigger {
    min-height: 44px;
    padding: 0;
  }
  .v-acc--compact .v-acc__trigger[aria-expanded=true] .v-acc__caret {
    color: var(--c-text);
  }
  .v-acc--compact .v-acc__answer {
    font: var(--t-subbody);
    letter-spacing: var(--t-subbody-ls);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v-acc__caret {
    transition: none;
  }
}
/* ==========================================================================
   Card/Feedback - Figma 2351:112875 (420x204, pad 16, розриви 12 і 16)
   ========================================================================== */
.v-card-fb {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  background: var(--c-white);
}

.v-card-fb__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
}

.v-card-fb__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: var(--c-primary);
  background: var(--c-primary-50);
}

.v-card-fb__person {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
}

.v-card-fb__author {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-card-fb__date {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text-muted);
}

.v-card-fb__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.v-card-fb__score-text {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

.v-card-fb__model {
  margin-bottom: var(--space-1);
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-card-fb__product {
  color: var(--c-primary);
}

.v-card-fb__text {
  height: 72px;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Повний текст (відгуки на сторінці товару, Figma 2351:115032 і 2346:76351) */
.v-card-fb--full .v-card-fb__text {
  height: auto;
  display: block;
  overflow: visible;
}

/* на мобільній назва моделі - в один рядок з трьома крапками */
@media (max-width: 1023.98px) {
  .v-card-fb--full .v-card-fb__model {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Відповідь представника бренду (Figma «Feedback» 2351:115110): сірий блок з лого, імʼям, датою */
.v-card-fb__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4); /* Figma «Answer»: 12/16, розрив 8 */
  background: var(--c-bg-grey);
}

.v-card-fb__answer-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.v-card-fb__answer-logo {
  flex: 0 0 40px;
  object-fit: contain;
}

.v-card-fb__answer-text {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

/* ==========================================================================
   Carousel - обгортка над Splide.
   Розміри слайда задає модуль через опції Splide (fixedWidth/gap з макета),
   тут тільки те, що стосується вигляду: висота картки і крапки-риски.
   ========================================================================== */
.v-slider .splide__list {
  align-items: stretch;
}

/* картка займає всю висоту слайда, щоб ряд лишався рівним */
.v-slider .splide__slide > * {
  height: 100%;
}

/* Splide ховає стрілки й пагінацію, коли вони не потрібні - лишаємо місце під ряд рисок */
.v-slider .splide__pagination,
.gallery__main .splide__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  bottom: auto;
  position: static;
}

/* риска-індикатор з макета: 20x2, активна - синя */
.v-slider .splide__pagination__page,
.gallery__main .splide__pagination__page {
  width: 20px;
  height: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: var(--c-grey);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.v-slider .splide__pagination__page:hover,
.gallery__main .splide__pagination__page:hover {
  transform: scaleY(2);
}

.v-slider .splide__pagination__page.is-active,
.gallery__main .splide__pagination__page.is-active {
  background: var(--c-primary); /* Figma «Nav carousel» 2351:112732: активна риска синя 20x2 */
}

/* поки Splide не піднявся, стрічка не має «вивалюватись» за екран */
.v-slider:not(.is-initialized) .splide__list {
  display: flex;
  gap: var(--space-5);
  overflow: hidden;
}

/* Splide вішає гап як margin-right на КОЖЕН слайд, разом з останнім - через це
   стрічка, яка вміщається цілком, лишалась «прокручуваною» на ширину гапа */
.v-slider .splide__slide:last-child {
  margin-right: 0 !important;
}

/* ==========================================================================
   Drawer - мобільна шторка меню. Механіку (показ, затемнення, блокування скролу)
   тримає offcanvas Bootstrap, тут лише вигляд вмісту.
   ========================================================================== */
.v-drawer.offcanvas-start {
  width: min(320px, 88vw);
}

.v-drawer__head {
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-grey-light);
}

.v-drawer__title {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
}

.v-drawer__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.v-drawer__list {
  display: flex;
  flex-direction: column;
}

.v-drawer__list--secondary {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-grey-light);
}

.v-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-drawer__link:hover {
  color: var(--c-primary);
}

.v-drawer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-grey-light);
}

/* ==========================================================================
   Breadcrumb - Figma 2351:114439 (смуга 1440x56 на сірому, вміст 48, розрив 4)
   ========================================================================== */
.v-breadcrumb {
  background: var(--c-bg-grey);
}

.v-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding-block: var(--space-1);
}

.v-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

.v-breadcrumb__link {
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-breadcrumb__link:hover {
  color: var(--c-primary);
}

.v-breadcrumb__sep {
  display: flex;
  color: var(--c-grey);
}

.v-breadcrumb__current {
  color: var(--c-text);
}

/* Моб: смуга «назад» (Figma 2487:114559) - кнопка каталогу 44, «‹» і батьківський розділ */
.v-breadcrumb__back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding-block: 2px;
}

.v-breadcrumb__catalog {
  color: var(--c-text-muted);
}

.v-breadcrumb__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

.v-breadcrumb__back-link .v-icon {
  color: var(--c-primary);
}

.v-breadcrumb__back-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .v-breadcrumb__list {
    min-height: 56px;
  }
}
/* ==========================================================================
   Pagination - Figma 2351:114520 (504x44, розрив 16; сторінка 40, активна - рамка primary)
   ========================================================================== */
.v-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px; /* моб (Figma «Pagination» 2346:86577): 7 кнопок уміщаються в 358 */
}

.v-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--space-3);
  font: var(--t-button);
  letter-spacing: var(--t-button-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
}

.v-pagination__page:hover {
  color: var(--c-primary);
}

.v-pagination__page.is-current {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.v-pagination__gap {
  display: flex;
  color: var(--c-text-muted);
}

.v-pagination .is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* найвужчі телефони (360): інакше ряд із 7 кнопок переноситься */
@media (max-width: 379.98px) {
  .v-pagination {
    gap: var(--space-2);
  }
}
@media (min-width: 1024px) {
  .v-pagination {
    gap: var(--space-4);
  } /* ПК 2351:123785 */
}
/* ==========================================================================
   Сортування - Figma 2351:114448 (кнопка Tertiary: іконка + текст + карет, колір primary)
   ========================================================================== */
.v-sort .v-btn--tertiary {
  color: var(--c-primary);
  background: transparent;
}

.v-sort .v-btn--tertiary:hover {
  color: var(--c-primary-hover);
}

.v-sort__caret {
  transition: transform var(--dur-base) var(--ease-out);
}

.v-sort .v-btn[aria-expanded=true] .v-sort__caret {
  transform: rotate(180deg);
}

.v-sort__list {
  padding: var(--space-1) 0;
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.v-sort__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  white-space: nowrap;
  color: var(--c-text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v-sort__item:hover {
  background: var(--c-bg-grey);
}

.v-sort__item.is-active {
  color: var(--c-primary);
}

/* ==========================================================================
   Checkbox - Figma 2489:441601 (рядок 16, розрив 8; квадрат 16 з рамкою #767676,
   значення Subbody, лічильник праворуч)
   ========================================================================== */
.v-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 16px;
  cursor: pointer;
}

.v-check.is-disabled {
  opacity: 0.4;
  cursor: default;
}

/* нативний інпут лишається для клавіатури і форми, візуально його замінює квадрат */
.v-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v-check__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: transparent;
  border: 1px solid var(--c-text-muted);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.v-check:hover .v-check__box {
  border-color: var(--c-primary);
}

.v-check__input:checked + .v-check__box {
  color: var(--c-white);
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.v-check__input:focus-visible + .v-check__box {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* лічильник іде в рядку тексту одразу за назвою - «Духовка + поверхня (7)», як у макеті фільтра */
.v-check__text {
  display: block;
  flex: 1 0 0;
  min-width: 0;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

.v-check__count {
  margin-left: var(--space-1);
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-text-muted);
}

/* Варіант форми - Figma «Checkbox + label» 2487:178157 */
.v-check--md {
  gap: 10px;
  min-height: 24px;
}

.v-check--md .v-check__box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-color: var(--c-grey);
}

.v-check--md .v-check__text {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
}

/* ==========================================================================
   Price Set - Figma 2489:487644: доріжка 310x6 (#ebebeb, скруглена), заповнення primary,
   повзунок 16, під ним два поля 131x48 через тире.
   Два нативні range один на одному: без бібліотеки, з клавіатурою і доступністю.
   ========================================================================== */
.v-range {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.v-range__slider {
  position: relative;
  height: 16px;
}

.v-range__track,
.v-range__fill {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  pointer-events: none;
}

.v-range__track {
  left: 0;
  right: 0;
  background: var(--c-grey-light);
}

.v-range__fill {
  background: var(--c-primary);
}

/* самі повзунки прозорі - видно тільки їхні кружечки */
.v-range__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}

.v-range__input::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  pointer-events: auto;
  cursor: grab;
}

.v-range__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  pointer-events: auto;
  cursor: grab;
}

.v-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.v-range__fields {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.v-range__field {
  flex: 1 0 0;
  min-width: 0;
}

.v-range__number {
  width: 100%;
  height: 48px;
  padding: var(--space-3) var(--space-4);
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.v-range__number:focus {
  border-color: var(--c-primary);
  outline: none;
}

/* стрілочки числових полів у макеті не намальовані */
.v-range__number::-webkit-outer-spin-button,
.v-range__number::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.v-range__number {
  appearance: textfield;
}

.v-range__dash {
  color: var(--c-text);
}

/* ==========================================================================
   Table - Figma 2206:8275 (variant=subtle): шапка 44, рядок 40, рамка 1px #ebebeb,
   поля 12, текст 14/16 (шапка - Medium)
   ========================================================================== */
.v-table-wrap {
  overflow-x: auto;
}

.v-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

/* Рамку малюємо тінню всередину, а не border: у Figma штрих теж усередині комірки,
   і тільки так висота рядка лишається рівно 40, а не 41. */
.v-table th,
.v-table td {
  padding: var(--space-3);
  text-align: left;
  box-shadow: inset -1px -1px 0 0 var(--c-grey-light);
}

.v-table th {
  height: 44px;
  background: var(--c-bg-grey); /* Figma «Header Cells»: сірий фон шапки */
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
}

.v-table td {
  height: 40px;
}

/* зовнішня рамка таблиці - теж усередину */
.v-table {
  box-shadow: inset 1px 1px 0 0 var(--c-grey-light);
}

.v-table__link {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v-table__link:hover {
  color: var(--c-primary-hover);
}

/* variant=subtle, .columnBorder?=no: лише горизонтальні лінії між рядками */
.v-table--rows th,
.v-table--rows td {
  box-shadow: inset 0 -1px 0 0 var(--c-grey-light);
}

.v-table--rows {
  box-shadow: inset 0 0 0 1px var(--c-grey-light);
}

/* ==========================================================================
   Галерея товару - Figma «Images» 2351:114704 (640x572):
   бейджі 24, головне фото 452x452, стрічка мініатюр 64x64 (активна - рамка primary)
   ========================================================================== */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gallery__labels {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
}

.gallery__main {
  position: relative;
}

.gallery__main .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__zoom {
  display: block;
  width: 100%;
  max-width: 452px;
  cursor: zoom-in;
}

.gallery__zoom img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Splide-core не позиціює стрілки (це робить його тема, яку ми не беремо),
   тому розставляємо самі: поверх фото по краях, як у макеті. */
.gallery__main .splide__arrows {
  position: static;
}

.gallery__main .splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--c-primary);
  opacity: 1;
}

.gallery__main .splide__arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--c-primary);
}

/* splide-core не дзеркалить стрілку «назад» - робимо самі */
.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.gallery__main .splide__arrow--prev {
  left: 0;
}

.gallery__main .splide__arrow--next {
  right: 0;
}

.gallery__main .splide__arrow:disabled {
  opacity: 0.3;
}

/* риски під фото - лише на мобільній (Figma «Pic Nav» 2346:76082), на ПК їх заміняє стрічка мініатюр */
.gallery__main .splide__pagination {
  margin-top: var(--space-4);
}

@media (max-width: 1023.98px) {
  .gallery__main .splide__arrow {
    background: rgba(255, 255, 255, 0.7);
  }
  .gallery__thumbs {
    display: none;
  }
  /* під фото стоять риски (2 + відступ 16) - кнопка «Відео» і стрілки лишаються відносно фото */
  .gallery__video {
    bottom: 18px;
  }
  .gallery__main .splide__arrow {
    top: calc(50% - 9px);
  }
}
@media (min-width: 1024px) {
  .gallery__main .splide__pagination {
    display: none;
  }
}
/* кнопка «Відео» у куті фото (Figma «VidoeBtn» 58x66) */
.gallery__video {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 58px;
  padding: var(--space-1) var(--space-1) var(--space-2);
  color: var(--c-primary);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.gallery__video:hover {
  border-color: var(--c-primary);
}

.gallery__video-text {
  font: var(--t-caption-medium);
  letter-spacing: var(--t-caption-ls);
}

/* --- стрічка мініатюр: у макеті стрілки стоять по краях ряду (44 + 536 + 44) --- */
.gallery__thumbs {
  position: relative;
  padding-inline: 52px;
}

.gallery__thumbs .splide__arrows {
  position: static;
}

.gallery__thumbs .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gallery__thumbs .splide__arrow--prev {
  left: 0;
}

.gallery__thumbs .splide__arrow--next {
  right: 0;
}

.gallery__thumbs .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border: 1px solid var(--c-grey-light);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.gallery__thumbs .splide__slide.is-active {
  border-color: var(--c-primary);
}

.gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__thumbs .splide__arrow {
  width: var(--control-h);
  height: var(--control-h);
  background: none;
  opacity: 1;
}

.gallery__thumbs .splide__arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--c-primary);
}

/* ==========================================================================
   Список опцій - Figma «PayInfo» 2351:114899 і «Delivery» 2351:114916:
   заголовок 16/24 Medium, рядок 40 (іконка 24 у полі 40 + текст),
   праворуч термін і ціна, «Безкоштовно» - зеленим
   ========================================================================== */
.v-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v-options__title {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-options__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}

.v-options__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--c-primary);
}

/* знак перевізника має власний фірмовий колір */
.v-options__icon--nova-poshta {
  color: var(--c-brand-np);
}

.v-options__text {
  flex: 1 0 0;
  min-width: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-options__note {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  white-space: nowrap;
}

.v-options__price {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  text-align: right;
  white-space: nowrap;
}

.v-options__price.is-free {
  color: var(--c-green);
}

/* Моб (Figma «Delivery» 2346:76213): термін переноситься під назву, ціна праворуч по центру рядка */
@media (max-width: 1023.98px) {
  .v-options {
    gap: var(--space-3);
  }
  .v-options__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 var(--space-2);
    align-items: center;
  }
  .v-options__icon {
    grid-row: span 2;
  }
  .v-options__text {
    grid-column: 2;
  }
  .v-options__note {
    grid-column: 2;
    white-space: normal;
  }
  .v-options__price {
    grid-column: 3;
    grid-row: 1/span 2;
  }
}
/* ==========================================================================
   Короткі характеристики - Figma «Характеристики» 2351:114738:
   назва зліва, значення справа, між ними пунктир
   ========================================================================== */
.v-specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.v-specs__title {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-specs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.v-specs__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
}

.v-specs__label {
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* пунктир між назвою і значенням */
.v-specs__row::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--c-grey);
}

.v-specs__value {
  order: 2;
  margin: 0;
  color: var(--c-text);
  text-align: right;
}

.v-specs__more {
  align-self: flex-start;
}

/* ==========================================================================
   Модалка - оболонка Bootstrap, вигляд за нашими токенами
   ========================================================================== */
.v-modal {
  border: 0;
  border-radius: var(--radius-sm);
}

.v-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-grey-light);
}

.v-modal__title {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
}

.v-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.v-modal__bank {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--c-bg-grey);
}

.v-modal__bank-title {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
}

.v-modal__bank-note {
  margin-left: auto;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

.v-modal__text {
  margin: 0;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

/* ==========================================================================
   Поля форми - Figma «Input» 2487:126311 (підпис 16, розрив 6, поле 40,
   рамка #ebebeb, радіус 2) і «Textarea» 2487:129895
   ========================================================================== */
.v-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.v-field__label {
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

.v-field__label i {
  color: var(--c-accent);
  font-style: normal;
}

.v-field__input {
  width: 100%;
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.v-field__input::placeholder {
  color: var(--c-grey);
}

/* size=lg (Figma «Input» size=lg): поле 44, поля 10/16 */
.v-field--lg .v-field__input {
  height: 44px;
  padding: 10px var(--space-4);
}

/* іконка ліворуч у полі (leftElements 16, прозорість 0.7) */
.v-field__control {
  position: relative;
  display: block;
}

.v-field__icon {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  display: flex;
  color: var(--c-text-muted);
  opacity: 0.7;
  transform: translateY(-50%);
  pointer-events: none;
}

.v-field__control .v-field__input {
  padding-left: calc(var(--space-4) + 16px + var(--space-2));
}

.v-field__input:focus {
  border-color: var(--c-primary);
  outline: none;
}

.v-field__input--area {
  height: auto;
  min-height: 52px;
  resize: vertical;
}

.v-field.is-invalid .v-field__input {
  border-color: var(--c-accent);
}

.v-field__helper,
.v-field__error {
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-text-muted);
}

.v-field__error {
  color: var(--c-accent);
}

/* Рядок телефону: код країни 100 + номер (Figma «Phone» 2351:117634, розрив 16) */
.v-phone {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.v-phone .v-select {
  flex: 0 0 100px;
}

.v-phone .v-field {
  flex: 1 0 0;
  min-width: 0;
}

/* ==========================================================================
   radio - Figma 2487:114332 (кружечок 20 + підпис, рядок 24)
   ========================================================================== */
.v-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 24px;
  cursor: pointer;
}

.v-radio.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.v-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v-radio__mark {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--c-text-muted);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.v-radio:hover .v-radio__mark {
  border-color: var(--c-primary);
}

.v-radio__input:checked + .v-radio__mark {
  border-color: var(--c-primary);
}

.v-radio__input:checked + .v-radio__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
}

.v-radio__input:focus-visible + .v-radio__mark {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.v-radio__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-radio__label {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-radio__note {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

/* ==========================================================================
   Tabs.List - Figma 2487:133576 (пункт 40: поля 8/16, без розривів; активний - синій текст
   і синє підкреслення 1px, під рядом тонка сіра лінія - як на сторінках довідки, блогу, кошика)
   ========================================================================== */
.v-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  box-shadow: inset 0 -1px 0 var(--c-grey-light); /* тонка лінія під усім рядом вкладок */
}

.v-tabs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.v-tabs__item:hover {
  color: var(--c-primary);
}

.v-tabs__item.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ==========================================================================
   Лічильник кількості - Figma 2351:117675 (мінус 44, поле 44 з рамкою, плюс 44)
   ========================================================================== */
.v-qty {
  display: flex;
  align-items: center;
}

.v-qty__input {
  width: 44px;
  height: 44px;
  padding: 0;
  text-align: center;
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-grey-light);
  appearance: textfield;
}

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

.v-qty__input:focus {
  border-color: var(--c-primary);
  outline: none;
}

/* Моб (Figma 2346:81001 - група 96x32 у спільній рамці, кнопки 32) */
@media (max-width: 1023.98px) {
  .v-qty {
    width: 96px;
    height: 32px;
    border: 1px solid var(--c-grey-light);
  }
  .v-qty .v-icon-btn,
  .v-qty__input {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    height: 100%;
  }
  .v-qty__input {
    border-width: 0 1px;
  }
}
/* ==========================================================================
   Товар у кошику - Figma «Card/Product» 2351:117662.
   ПК: обгортка 750x158 (поля 8) -> картка 734x142, розрив 8.
       Pic 142x142 | Top 584 = Container 76 (артикул 24 + назва 48) + 16 + низ 50.
   Моб: те саме, але фото 96 і низ переноситься у два рядки.
   ========================================================================== */
.cart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--c-white);
}

.cart-item__pic {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
}

.cart-item__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

/* верх картки: артикул + іконки, під ними назва у два рядки */
.cart-item__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--space-2);
}

.cart-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
}

.cart-item__sku {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

.cart-item__tools {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cart-item__name {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
  /* дві стрічки фіксованої висоти - інакше картки в списку «стрибають» */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.cart-item__name:hover {
  color: var(--c-primary);
}

.cart-item__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* плашка «Безкоштовна доставка»: іконка на світло-зеленому, текст зелений */
.cart-item__free {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cart-item__free-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--c-green);
  background: var(--c-green-light);
}

.cart-item__free-text {
  max-width: 86px;
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-green);
}

.cart-item__prices {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
}

.cart-item__old {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 18px;
  padding: 0 2px;
}

.cart-item__old-price {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.cart-item__price {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-text);
  white-space: nowrap;
}

/* червона ціна лише зі знижкою - як у картці товару (Figma 2351:117574) */
.cart-item__price--sale {
  color: var(--c-accent);
}

/* Компактний варіант (шторка кошика) - Figma 2351:118462:
   фото 126, без плашки доставки, лічильник у спільній рамці, ціни праворуч */
.cart-item--compact .cart-item__free {
  display: none;
}

.cart-item--compact .v-qty {
  border: 1px solid var(--c-grey-light);
}

.cart-item--compact .cart-item__prices {
  align-items: flex-end;
}

@media (min-width: 1024px) {
  .cart-item--compact .cart-item__pic {
    flex: 0 0 126px;
    width: 126px;
    height: 126px;
  }
  .cart-item--compact .cart-item__prices {
    flex: 0 0 auto;
  }
}
/* Моб - Figma «Card/Product» 2346:80989 (342x140): фото 126, низ 48 =
   компактний лічильник 96 + ціни праворуч. Плашки доставки й знижки там нема. */
@media (max-width: 1023.98px) {
  .cart-item__pic {
    flex: 0 0 126px;
    width: 126px;
    height: 126px;
  }
  .cart-item__free {
    display: none;
  }
  .cart-item__old .v-label {
    display: none;
  }
  .cart-item__bottom {
    flex-wrap: nowrap;
    align-items: flex-end;
    min-height: 48px;
  }
  .cart-item__prices {
    align-items: flex-end;
  }
}
@media (min-width: 1024px) {
  .cart-item {
    align-items: center;
  }
  .cart-item__pic {
    flex: 0 0 142px;
    width: 142px;
    height: 142px;
  }
  .cart-item__name {
    min-height: 48px;
  }
  .cart-item__bottom {
    flex-wrap: wrap; /* на 1440 все в рядок; на 1024-1200 плашка доставки й ціни переносяться */
    min-height: 50px;
  }
  .cart-item__free,
  .cart-item__prices {
    flex: 0 1 134px;
  }
  .cart-item__prices {
    align-items: stretch;
  }
}
/* ==========================================================================
   Сітка товарів - спільна для категорії й бажаних товарів (Figma: 3 картки 310
   у ряд при ширині 970, розрив 20; на мобільній 2 колонки з розривом 10).
   ========================================================================== */
.v-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* моб (Figma 2346:75779): картки впритул, між ними тонкі лінії #c3c3c3 -
   рамка тінню, щоб сусідні не давали подвійної лінії */
@media (max-width: 639.98px) {
  .v-products:not(.is-rows) > * {
    box-shadow: inset 0 -1px 0 var(--c-grey);
  }
  .v-products:not(.is-rows) > :nth-child(odd) {
    box-shadow: inset -1px 0 0 var(--c-grey), inset 0 -1px 0 var(--c-grey);
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .v-products:not(.is-rows) > * {
    box-shadow: inset 0 -1px 0 var(--c-grey);
  }
  .v-products:not(.is-rows) > :not(:nth-child(3n)) {
    box-shadow: inset -1px 0 0 var(--c-grey), inset 0 -1px 0 var(--c-grey);
  }
}
/* --- Рядковий вигляд. Окремого макета для нього немає - перемикач у тулбарі є,
   а стан не намальований. Тому переставляємо ту саму картку за будовою рядкової
   картки з макета (Figma 2346:76247, 358x142: фото 126, статус, назва, ціна, кошик).
   Питання дизайнеру - у NOTES.md. */
.v-products.is-rows {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.v-products.is-rows .v-card-prod {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: 142px;
  padding: var(--space-2);
}

.v-products.is-rows .v-card-prod__top {
  grid-column: 1;
  grid-row: 1/span 3;
  width: 126px;
}

.v-products.is-rows .v-card-prod__pic {
  max-width: 126px;
  margin-top: 0;
  aspect-ratio: 1;
}

.v-products.is-rows .v-card-prod__status {
  grid-column: 2;
  grid-row: 1;
}

.v-products.is-rows .v-card-prod__name {
  grid-column: 2;
  grid-row: 2;
  height: auto;
}

.v-products.is-rows .v-rating {
  grid-column: 2;
  grid-row: 3;
}

.v-products.is-rows .v-card-prod__bottom {
  grid-column: 3;
  grid-row: 1/span 3;
  align-items: flex-end;
  min-height: 0;
  margin-top: 0;
}

.v-products.is-rows .v-card-prod__buy {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

/* у рядковій картці макета немає ні бейджів, ні смуги фото, ні логотипів оплати */
.v-products.is-rows .v-card-prod__labels,
.v-products.is-rows .v-card-prod__nav,
.v-products.is-rows .v-card-prod__logos {
  display: none;
}

@media (min-width: 640px) {
  .v-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .v-products {
    gap: var(--space-5);
  }
}
/* ==========================================================================
   Підказка Alert - Figma 2487:129481 (синій текст на світло-синьому).
   Живе в UI-кіті, бо потрібна і в довідці, і в попапі кастомізації мийки.
   ========================================================================== */
.info-alert {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--c-primary);
  background: var(--c-primary-50);
}

.info-alert__icon {
  display: flex;
}

.info-alert__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.info-alert__title {
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
}

.info-alert__text {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

.info-alert__list {
  margin: 0;
  padding-left: var(--space-4);
  list-style: disc;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

/* ПК - Alert size=md (Figma 2351:122955): поля 16, розрив 12, ширина 999; моб - size=Default: 12 і 8 */
@media (min-width: 1024px) {
  /* ширина за текстом, але не більше 999 */
  .info-alert {
    align-self: flex-start;
    gap: var(--space-3);
    max-width: 999px;
    padding: var(--space-4);
  }
  .info-alert__body {
    gap: 2px;
  }
}
/* ==========================================================================
   Попапи-калькулятори - Figma «Calculator» 2351:125210 (720x471) і
   «Sink Customization» 2351:129409. Ліворуч поля 356, праворуч панель 300:
   до розрахунку світло-синя з підказкою, після - синя з результатом.
   ========================================================================== */
.v-calc .modal-dialog {
  max-width: 720px;
  margin: var(--space-4) auto;
}

.v-calc__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--c-white);
  border: 0;
  border-radius: 0;
}

.v-calc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
}

.v-calc__title {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
  color: var(--c-text);
}

.v-calc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.v-calc__form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.v-calc__radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* панель результату */
.v-calc__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-6);
  background: var(--c-primary-50);
  transition: background-color var(--dur-base) var(--ease-out);
}

.v-calc__result.is-done {
  background: var(--c-primary);
}

.v-calc__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-primary);
  opacity: 0.5;
}

.v-calc__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.v-calc__empty-text {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  text-align: center;
}

.v-calc__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-white);
  text-align: center;
}

.v-calc__value-label {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

.v-calc__value-number {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.v-calc__value-number b {
  font: var(--t-h2);
  letter-spacing: var(--t-h2-ls);
}

.v-calc__value-unit {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
}

.v-calc__value-note {
  margin: 0;
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
}

.v-calc__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.v-calc__help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-calc__help a {
  color: var(--c-primary);
}

.v-calc__buttons {
  display: flex;
  gap: var(--space-2);
}

.v-calc__buttons > * {
  flex: 1 0 0;
}

@media (min-width: 1024px) {
  .v-calc__body {
    flex-direction: row;
    gap: 32px;
  }
  .v-calc__result {
    flex: 0 0 300px;
    min-height: 319px;
  }
  .v-calc__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .v-calc__buttons > * {
    flex: 0 0 auto;
  }
}
@media (max-width: 1023.98px) {
  .v-calc .modal-dialog {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin: 0;
  }
}
/* --- Кастомізація мийки: схема з позначками (Figma 2351:130983) --- */
.v-sink__text,
.v-sink__choice {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-sink__choice {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
}

.v-sink__choice b {
  color: var(--c-primary);
}

.v-sink__scheme {
  position: relative;
  align-self: center;
  width: 300px;
  max-width: 100%;
  padding: var(--space-6);
}

.v-sink__scheme img {
  width: 100%;
  height: auto;
}

/* позначка місця: кружечок з літерою поверх схеми */
.v-sink__spot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-primary);
  background: var(--c-white);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.v-sink__spot:hover {
  transform: scale(1.08);
}

.v-sink__spot.is-active {
  color: var(--c-white);
  background: var(--c-primary);
}

/* ==========================================================================
   Попап «Купити в кредит» - Figma «Calculator» 2351:127479 (720x582).
   Рядок банку 62 на #f4f4f4: радіо, логотип із назвою, кількість платежів,
   платіж на місяць. Нижче підсумок і рядок «Є питання?».
   ========================================================================== */
.v-credit .modal-dialog {
  max-width: 720px;
  margin: var(--space-4) auto;
}

.v-credit__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--c-white);
  border: 0;
  border-radius: 0;
}

.v-credit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
}

.v-credit__title {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
  color: var(--c-text);
}

/* товар: фото 142 + назва + ціна (у макеті це та сама картка 672x142) */
.v-credit__product {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
}

.v-credit__pic {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
}

.v-credit__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v-credit__name {
  flex: 1 0 0;
  min-width: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-credit__price {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-accent);
  white-space: nowrap;
}

.v-credit__banks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v-credit__bank {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 62px;
  padding: var(--space-2);
  background: var(--c-bg-grey);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.v-credit__bank:has(.v-credit__radio:checked) {
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.v-credit__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* кружечок радіо малюємо самі - як у фільтрі й способах оплати */
.v-credit__mark {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-grey);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.v-credit__radio:checked + .v-credit__mark {
  border: 6px solid var(--c-primary);
}

.v-credit__bank-body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.v-credit__bank-title {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-credit__bank-note {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

.v-credit__terms,
.v-credit__month {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-credit__terms-label,
.v-credit__month-label {
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-text-muted);
}

.v-credit__select {
  height: 36px;
  padding: var(--space-1) var(--space-2);
  background: var(--c-white);
}

.v-credit__month-value {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-text);
  white-space: nowrap;
}

.v-credit__totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}

.v-credit__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 344px;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-credit__total b {
  font: 700 20px/30px var(--font-base);
  letter-spacing: var(--t-subtitle-ls);
}

.v-credit__total.is-main b {
  font: var(--t-h3);
  letter-spacing: var(--t-h3-ls);
}

.v-credit__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}

.v-credit__help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.v-credit__help a {
  color: var(--c-primary);
}

@media (max-width: 1023.98px) {
  /* моб (Figma 2346:82731): рядок банку розкладається у два поверхи */
  .v-credit .modal-dialog {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin: 0;
  }
  .v-credit__bank {
    flex-wrap: wrap;
  }
  .v-credit__terms,
  .v-credit__month {
    flex: 1 0 40%;
  }
  .v-credit__total {
    min-width: 0;
    width: 100%;
  }
  .v-credit__foot {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ==========================================================================
   Бічна навігація - Figma «Product Navigation» 2351:120935 і 2351:123346
   (колонка 310, пункт 36: поля 8, іконка 20, підпис 14/16, стрілка 20; розрив 2).
   Спільна для меню кабінету і якірного меню сторінки «Про бренд».
   ========================================================================== */
.v-side-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.v-side-nav__item:hover {
  color: var(--c-primary);
  background: var(--c-bg-grey);
}

/* ПК (Figma 2351:121929, 2351:123298): активний пункт - сірий фон, текст темний;
   стрілок у пунктах у макеті немає */
.v-side-nav__item.is-active {
  color: var(--c-text);
  background: var(--c-bg-grey);
}

.v-side-nav__icon {
  display: flex;
  flex: 0 0 20px;
  color: var(--c-primary);
}

/* ні іконок, ні стрілок у пунктах макету немає - іконка лише якщо її передали даними */
.v-side-nav__arrow {
  display: none;
}

.v-side-nav__text {
  flex: 1 0 0;
  min-width: 0;
}

.v-side-nav__count {
  color: var(--c-text-muted);
}

/* стрілка веде далі, тому на мобільній вона потрібна, а на ПК підказує активний розділ */
.v-side-nav__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.v-side-nav__item:hover .v-side-nav__arrow {
  transform: translateX(2px);
}

/* Моб: вкладки з підкресленням в один рядок, прокрутка вбік (як Tabs.List) */
@media (max-width: 1023.98px) {
  .v-side-nav__list {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    box-shadow: inset 0 -1px 0 var(--c-grey-light);
  }
  .v-side-nav__list::-webkit-scrollbar {
    display: none;
  }
  .v-side-nav__list > li {
    flex: 0 0 auto;
  }
  .v-side-nav__item {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
    color: var(--c-text-muted);
    border-bottom: 1px solid transparent;
  }
  .v-side-nav__item:hover {
    background: none;
  }
  .v-side-nav__item.is-active {
    color: var(--c-primary);
    background: none;
    border-bottom-color: var(--c-primary);
  }
  .v-side-nav__icon,
  .v-side-nav__count {
    display: none;
  }
}
/* ==========================================================================
   Картка товару в порівнянні.
   Моб (база) - Figma 2346:77062 (179x278, вертикальна): кнопка «⋮» 24 праворуч угорі,
   фото 120 по центру, статус 12/14, назва 16/24 у два рядки, ціни + кнопка кошика 44.
   ПК - Figma «Card/Product» 2351:115757 (358x142): фото 126 | статус із «прибрати»,
   назва 16/24 у два рядки, знизу ціни (стара 18 + ціна 24/32) і дві кнопки 44.
   ========================================================================== */
.v-compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 262px;
  background: var(--c-white);
}

.v-compare-card__more {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.v-compare-card__pic {
  display: flex;
  justify-content: center;
  height: 120px;
  margin-top: var(--space-1);
}

.v-compare-card__pic img {
  width: 120px;
  height: 100%;
  object-fit: contain;
}

.v-compare-card__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.v-compare-card__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v-compare-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 14px;
}

.v-compare-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 48px;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-compare-card__name:hover {
  color: var(--c-primary);
}

.v-compare-card__bottom {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 50px;
  margin-top: auto;
}

.v-compare-card__prices {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
}

.v-compare-card__old {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: 18px;
  padding: 0 2px;
}

.v-compare-card__old-price {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.v-compare-card__price {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-text);
  white-space: nowrap;
}

.v-compare-card__price--sale {
  color: var(--c-accent);
}

.v-compare-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .v-compare-card {
    flex-direction: row;
    align-items: center;
    min-height: 142px;
  }
  .v-compare-card__pic {
    flex: 0 0 126px;
    width: 126px;
    height: 126px;
    margin-top: 0;
  }
  .v-compare-card__pic img {
    width: 100%;
  }
  .v-compare-card__body {
    gap: var(--space-4);
  }
  .v-compare-card__titles {
    gap: var(--space-1);
    padding-right: var(--space-2);
  }
  .v-compare-card__meta {
    min-height: 24px;
  }
  .v-compare-card__bottom {
    align-items: center;
    margin-top: 0;
  }
  .v-compare-card__old {
    gap: var(--space-2);
  }
}
/* ==========================================================================
   Switch - Figma «SwitchBase» Size=lg 2487:54853 (195x24): доріжка 48x24
   (#ebebeb, повне скруглення, поле 2), кулька 24 з тінню й іконкою 16,
   розрив до підпису 10, підпис Body 16/24.
   ========================================================================== */
.v-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  cursor: pointer;
  user-select: none;
}

/* нативний інпут лишається для клавіатури й форми, візуально його замінює доріжка */
.v-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v-switch__track {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--c-grey-light);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v-switch__thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--c-primary);
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out);
}

.v-switch__on {
  display: none;
}

.v-switch__input:checked + .v-switch__track {
  background: var(--c-primary);
}

.v-switch__input:checked + .v-switch__track .v-switch__thumb {
  transform: translateX(24px);
}

.v-switch__input:checked + .v-switch__track .v-switch__on {
  display: block;
}

.v-switch__input:checked + .v-switch__track .v-switch__off {
  display: none;
}

.v-switch__input:focus-visible + .v-switch__track {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.v-switch__label {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .v-switch__thumb,
  .v-switch__track {
    transition: none;
  }
}
/* ==========================================================================
   Товар рядком - Figma «Card/Product» 2351:114765 (640x64): фото 48, розрив 16,
   статус + назва, ціни праворуч, кнопка кошика 44. На мобільній назва й ціни
   стають колонкою, кнопка лишається праворуч (Figma 2346:76044).
   ========================================================================== */
.v-prow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding-block: var(--space-2);
}

.v-prow__pic {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

.v-prow__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v-prow__titles {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.v-prow__label {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-ocean);
}

.v-prow__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.v-prow__name:hover {
  color: var(--c-primary);
}

.v-prow__prices {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
}

.v-prow__old {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 18px;
}

.v-prow__old-price {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.v-prow__price {
  font: 700 24px/32px var(--font-base);
  letter-spacing: 0.48px;
  color: var(--c-text);
  white-space: nowrap;
}

.v-prow__price--sale {
  color: var(--c-accent);
}

/* Моб (Figma «Card/Product» 2346:76282, 358x142): фото 126 ліворуч на всю висоту,
   праворуч статус і назва, під ними ціни (стара ціна перед знижкою) і кнопка кошика */
@media (max-width: 1023.98px) {
  .v-prow {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: var(--space-2);
    align-items: center;
  }
  .v-prow__pic {
    grid-row: 1/3;
    width: 126px;
    height: 126px;
  }
  .v-prow__titles {
    grid-column: 2/4;
    align-self: end;
  }
  .v-prow__prices {
    grid-column: 2;
    align-items: flex-start;
    align-self: start;
  }
  .v-prow__old {
    flex-direction: row-reverse;
  }
  .v-prow > .v-icon-btn {
    grid-column: 3;
    align-self: start;
  }
}
@media (min-width: 1024px) {
  .v-prow {
    gap: var(--space-4);
  }
}
/* ==========================================================================
   Замовлення в історії - Figma «Card/Product» 2351:121149.
   Рядок 48: номер 16/24 medium, дата 14/16 сіра, статус, кнопка 44.
   Розкрите: товари по 60 (фото 60, назва, артикул, кількість, ціни) і підсумок
   440 праворуч (рамка #ebebeb, поля 16 по вертикалі, рядки 24, останній 30).
   ========================================================================== */
.order {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
}

.order__titles {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}

.order__number {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.order__date {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
}

.order__status {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--space-2);
}

.order__toggle {
  flex: 0 0 44px;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* розкрите - стрілка вгору, згорнуте (клас collapsed від Bootstrap) - вниз, як у макеті */
.order__toggle {
  transform: rotate(180deg);
}

.order__toggle.collapsed {
  transform: none;
}

.order__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
}

.order__pic {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}

.order__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order__name {
  flex: 1 0 0;
  min-width: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.order__name:hover {
  color: var(--c-primary);
}

.order__sku {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-align: right;
}

.order__qty {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  text-align: right;
  white-space: nowrap;
}

.order__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order__old {
  min-height: 16px;
  padding: 0 2px;
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text-muted);
  text-decoration: line-through;
}

.order__price {
  font: 700 20px/30px var(--font-base);
  letter-spacing: var(--t-subtitle-ls);
  color: var(--c-text);
  white-space: nowrap;
}

/* підсумок замовлення */
.order__totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  /* лінії тінню, а не рамкою: інакше блок стає 160 замість 158 з макета */
  box-shadow: inset 0 1px 0 var(--c-grey-light), inset 0 -1px 0 var(--c-grey-light);
}

.order__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

.order__total-value {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
  text-align: right;
}

.order__total.is-main {
  min-height: 30px;
}

.order__total.is-main .order__total-label {
  font: var(--t-body-medium);
}

.order__total.is-main .order__total-value {
  font: 700 20px/30px var(--font-base);
  letter-spacing: var(--t-subtitle-ls);
}

@media (min-width: 1024px) {
  /* колонки через 8, між фото і назвою 16 (Figma «Product row» 2351:121159: 420 | 283 | 83 | 160) */
  .order__item {
    gap: var(--space-2);
  }
  .order__pic {
    margin-right: var(--space-2);
  }
  .order__sku {
    flex: 0 0 283px;
  }
  .order__qty {
    flex: 0 0 83px;
  }
  .order__prices {
    flex: 0 1 160px;
    min-width: 0;
  }
  /* підсумок у макеті прижатий праворуч і завширшки 440 */
  .order__totals {
    width: 440px;
    margin-left: auto;
  }
}
@media (max-width: 1023.98px) {
  /* моб (Figma 2346:83419): номер і дата одне під одним */
  .order__titles {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
  }
  /* моб: назва на всю ширину, під нею кількість і ціна */
  .order__item {
    flex-wrap: wrap;
  }
  .order__sku {
    display: none;
  }
  .order__name {
    flex: 1 0 60%;
  }
}