@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);
}

/* варіанти */
.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);
}

.v-btn--outline {
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-grey-light);
}

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

.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);
}

/* ==========================================================================
   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);
}

.v-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 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;
}

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

/* стрілка недоступна, коли карусель на краю */
.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__title {
    font: var(--t-h2);
    letter-spacing: var(--t-h2-ls);
  }
}
/* ==========================================================================
   Card/Category
   Моб - Figma 2346:75444 (106x106: фото + назва у два рядки)
   ПК  - Figma 2351:112741 (169x233: фото + розрив 24 + назва + поле 16)
   Висота фіксована як у макеті, фото стискається під довгу назву.
   ========================================================================== */
.v-card-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 106px;
  text-align: center;
  background: var(--c-white);
}

.v-card-cat__pic {
  display: block;
  flex: 1 0 0;
  min-height: 0;
  background: var(--c-bg-grey);
}

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

.v-card-cat__title {
  display: -webkit-box;
  -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-6);
    height: 233px;
    padding-bottom: 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);
  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-grey);
}

/* ==========================================================================
   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;
}

.v-rating__row svg {
  flex: 0 0 16px;
  padding: 2px;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
}

/* ширина заливки - класом, крок пів зірки: 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 {
  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-accent);
  white-space: nowrap;
}

.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;
  }
}
/* ==========================================================================
   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 380:12232 (232x284: фото 232x120 + розрив 16 + текст 148)
   ПК  - Figma 274:1340  (420x420, pad 16, розрив 24, фото 388x200)
   ========================================================================== */
.v-card-art {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 284px;
  background: var(--c-white);
}

.v-card-art__pic {
  display: block;
  aspect-ratio: 232/120;
  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: 80px;
  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/Item»
   ========================================================================== */
.v-acc {
  display: flex;
  flex-direction: column;
}

.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-4);
  width: 100%;
  padding: var(--space-4) 0;
  text-align: left;
  font: var(--t-body-medium);
  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;
  flex: 0 0 auto;
  color: var(--c-text-muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.v-acc__trigger[aria-expanded=true] .v-acc__caret {
  transform: rotate(180deg);
  color: var(--c-primary);
}

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

/* ==========================================================================
   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;
}

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

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

/* Splide ховає стрілки й пагінацію, коли вони не потрібні - лишаємо місце під ряд рисок */
.v-slider .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 {
  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 {
  transform: scaleY(2);
}

.v-slider .splide__pagination__page.is-active {
  background: var(--c-accent);
  transform: scaleY(2);
}

/* поки 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);
}

@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: var(--space-4);
}

.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;
}

/* ==========================================================================
   Сортування - 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;
}

.v-check__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
}

.v-check__count {
  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;
  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);
}

/* ==========================================================================
   Галерея товару - 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 «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__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 «Характеристики» 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);
}

.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, активна з рамкою primary)
   ========================================================================== */
.v-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.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);
  border: 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-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-accent);
  white-space: nowrap;
}

/* Компактний варіант (шторка кошика) - 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: nowrap;
    min-height: 50px;
  }
  .cart-item__free,
  .cart-item__prices {
    flex: 0 0 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: 10px;
}

/* --- Рядковий вигляд. Окремого макета для нього немає - перемикач у тулбарі є,
   а стан не намальований. Тому переставляємо ту саму картку за будовою рядкової
   картки з макета (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);
}

/* ==========================================================================
   Попапи-калькулятори - 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-grey-bg);
  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-grey-bg);
}

.v-side-nav__item.is-active {
  color: var(--c-primary);
  background: var(--c-primary-50);
}

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

.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);
}

/* ==========================================================================
   Картка товару в порівнянні - Figma «Card/Product» 2351:115757 (358x142):
   фото 126, статус із кнопкою «прибрати», назва 16/24 у два рядки,
   знизу ціни (стара 18 + ціна 24/32) і дві кнопки 44.
   ========================================================================== */
.v-compare-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 142px;
  background: var(--c-white);
}

.v-compare-card__pic {
  flex: 0 0 126px;
  width: 126px;
  height: 126px;
}

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

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

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

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

.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: center;
  gap: var(--space-2);
  min-height: 50px;
}

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

.v-compare-card__old {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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-accent);
  white-space: nowrap;
}

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

/* ==========================================================================
   Замовлення в історії - 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);
}

/* Bootstrap лишає клас collapsed на закритій кнопці - крутимо стрілку від нього */
.order__toggle.collapsed {
  transform: rotate(-90deg);
}

.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) {
  .order__sku {
    flex: 0 0 283px;
  }
  .order__qty {
    flex: 0 0 83px;
  }
  .order__prices {
    flex: 0 0 160px;
  }
  /* підсумок у макеті прижатий праворуч і завширшки 440 */
  .order__totals {
    width: 440px;
    margin-left: auto;
  }
}
@media (max-width: 1023.98px) {
  /* моб: назва на всю ширину, під нею кількість і ціна */
  .order__item {
    flex-wrap: wrap;
  }
  .order__sku {
    display: none;
  }
  .order__name {
    flex: 1 0 60%;
  }
}