/* =========================================================================
   components.css — переиспользуемые компоненты
   Кнопки, бейджи, карточки, формы, рейтинг, аккордеон, слайдер
   ========================================================================= */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  min-height: var(--control-h);
  min-width: var(--tap-min);
  padding: var(--space-12) var(--space-24);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(var(--space-2));
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-md);
}

.btn--accent {
  background-image: var(--gradient-brand);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  color: var(--color-text-invert);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background-color: var(--color-bg);
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.btn--outline:hover {
  border-color: var(--color-primary);
  background-color: var(--color-bg-soft);
  color: var(--color-primary);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background-color: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.btn--invert {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.btn--invert:hover {
  background-color: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.btn--invert-outline {
  border-color: var(--color-border-invert);
  color: var(--color-text-invert);
}

.btn--invert-outline:hover {
  border-color: var(--color-text-invert);
  background-color: var(--color-white-a10);
  color: var(--color-text-invert);
}

.btn--lg {
  min-height: var(--control-h-lg);
  padding-inline: var(--space-32);
  font-size: var(--fs-h4);
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-small);
}

.btn--block {
  width: 100%;
}

.btn__icon {
  transition: transform var(--dur-base) var(--ease);
}

.btn:hover .btn__icon--arrow {
  transform: translateX(var(--space-4));
}

.btn.is-added {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-invert);
}

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

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  color: var(--color-primary);
  background-color: transparent;
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.icon-btn:hover {
  background-color: var(--color-bg-tint);
  color: var(--color-primary-dark);
}

.icon-btn--outline {
  border-color: var(--color-border);
}

/* =========================================================================
   Бейджи и чипы
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background-color: var(--color-bg-tint);
  color: var(--color-primary);
  white-space: nowrap;
}

.badge--hit {
  background-image: var(--gradient-brand);
  color: var(--color-text-invert);
}

.badge--new {
  background-color: var(--color-accent);
  color: var(--color-text-invert);
}

.badge--warranty {
  background-color: var(--color-bg);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.badge--stock {
  background-color: var(--color-success-soft);
  color: var(--color-success);
  text-transform: none;
  letter-spacing: normal;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-h-sm);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.chip__icon {
  color: var(--color-accent);
}

/* =========================================================================
   Медиа-плейсхолдер (общая обёртка для изображений карточек)
   ========================================================================= */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-image: var(--gradient-media);
}

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

/* =========================================================================
   Карточка товара
   ========================================================================= */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.product-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--media-product-ratio);
  /* без min-height: 0 флекс-элемент растянулся бы под высоту картинки
     и пропорция перестала бы работать */
  min-height: 0;
  overflow: hidden;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.product-card__media-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.product-card__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease);
}


.product-card__badges {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
  flex-grow: 1;
}

.product-card__brand {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.product-card__link {
  color: var(--color-text);
}

.product-card__link:hover {
  color: var(--color-primary-light);
}

.product-card__excerpt {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: auto;
  padding-top: var(--space-8);
}

.product-card__spec {
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}

.product-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-20) var(--space-20);
}

/* Цена и наличие всегда в одну колонку — карточки выстраиваются в ряд
   независимо от длины цены */
.product-card__price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.product-card__price {
  font-size: var(--fs-price);
  font-weight: var(--fw-bold);
  color: var(--color-price);
  letter-spacing: var(--ls-tight);
}

.product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.product-card__stock--in-stock {
  color: var(--color-success);
}

.product-card__stock--on-order {
  color: var(--color-warning);
}

/* =========================================================================
   Карточка категории
   ========================================================================= */

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.category-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.category-card__media {
  aspect-ratio: var(--media-category-ratio);
  background-image: var(--gradient-media);
  overflow: hidden;
}

.category-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.category-card:hover .category-card__img {
  transform: scale(1.04);
}

.category-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20);
  flex-grow: 1;
}

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

.category-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.category-card__count {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.category-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-tint);
  color: var(--color-primary);
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.category-card:hover .category-card__arrow {
  background-image: var(--gradient-brand);
  color: var(--color-text-invert);
  transform: translateX(var(--space-4));
}

/* Название категории остаётся в теле карточки, а кликабельной становится
   вся карточка — за счёт невидимой подложки ::after, а не самой ссылки */
.category-card__link {
  color: var(--color-text);
}

.category-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.category-card:hover .category-card__link {
  color: var(--color-primary);
}

/* =========================================================================
   Карточка преимущества
   ========================================================================= */

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 100%;
  padding: var(--space-28);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.feature-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-tint);
  color: var(--color-primary);
}

.feature-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.feature-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

/* =========================================================================
   Карточка отзыва
   ========================================================================= */

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-28);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

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

.review-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.review-card__place {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.review-card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-text);
}

.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-success);
  font-weight: var(--fw-medium);
}

.review-card__product {
  color: var(--color-text-muted);
}

/* Рейтинг */

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-star);
}

.rating__star {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
  stroke: none;
}

.rating__star--empty {
  color: var(--color-border-strong);
}

/* =========================================================================
   Карточка сотрудника
   ========================================================================= */

.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 100%;
  padding: var(--space-20);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.team-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
}

.team-card__media {
  aspect-ratio: var(--media-team-ratio);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-image: var(--gradient-media);
}

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.team-card__role {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
}

.team-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

/* =========================================================================
   Карточка статьи
   ========================================================================= */

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.post-card--link {
  color: inherit;
  text-decoration: none;
}

.post-card--link:hover .post-card__title,
.post-card--link:focus-visible .post-card__title {
  color: var(--color-primary-light);
}

.post-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
}

.post-card__media {
  aspect-ratio: var(--media-post-ratio);
  overflow: hidden;
  background-image: var(--gradient-media);
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.post-card:hover .post-card__img {
  transform: scale(1.04);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  flex-grow: 1;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}

.post-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.post-card__link {
  color: var(--color-text);
}

.post-card__link:hover {
  color: var(--color-primary-light);
}

.post-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-light);
}

/* =========================================================================
   Формы
   ========================================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.form__grid {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .form__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.field__required {
  color: var(--color-danger);
}

.field__control {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.field__control::placeholder {
  color: var(--color-text-muted);
}

.field__control:hover {
  border-color: var(--color-border-strong);
}

.field__control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--focus-width) var(--color-shadow-tint-sm);
}

.field__control--textarea {
  min-height: var(--space-120);
  resize: vertical;
  line-height: var(--lh-base);
}

.field__hint {
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  cursor: pointer;
}

.checkbox__input {
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox__text a {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* Поле поиска */

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-soft);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease);
}

.search-form:focus-within {
  border-color: var(--color-accent);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.search-form__icon {
  color: var(--color-text-muted);
}

.search-form__input {
  flex-grow: 1;
  min-width: 0;
  min-height: var(--control-h-sm);
  border: 0;
  background: transparent;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.search-form__input:focus {
  outline: none;
}

.search-form__submit {
  flex-shrink: 0;
  min-height: var(--control-h-sm);
  padding-inline: var(--space-20);
  border-radius: var(--radius-full);
}

/* =========================================================================
   Аккордеон (готов для внутренних страниц)
   ========================================================================= */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.accordion__item {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  overflow: hidden;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-16) var(--space-20);
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.accordion__icon {
  color: var(--color-primary);
  transition: transform var(--dur-base) var(--ease);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 var(--space-20) var(--space-20);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

/* =========================================================================
   Слайдер (отзывы и любые карусели карточек)
   ========================================================================= */

.slider {
  position: relative;
}

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-4);
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 768px) {
  .slider__track {
    grid-auto-columns: calc((100% - var(--gutter)) / 2);
  }
}

@media (min-width: 1280px) {
  .slider__track {
    grid-auto-columns: calc((100% - var(--gutter) * 2) / 3);
  }
}

/* Карусель товаров: карточки уже отзывов, поэтому в ряд их помещается больше */
@media (min-width: 768px) {
  .slider--products .slider__track {
    grid-auto-columns: calc((100% - var(--gutter)) / 2);
  }
}

@media (min-width: 1024px) {
  .slider--products .slider__track {
    grid-auto-columns: calc((100% - var(--gutter) * 2) / 3);
  }
}

@media (min-width: 1280px) {
  .slider--products .slider__track {
    grid-auto-columns: calc((100% - var(--gutter) * 3) / 4);
  }
}

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.slider__btn {
  width: var(--tap-min);
  height: var(--tap-min);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-bg);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.slider__btn:hover {
  background-image: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-text-invert);
}

.slider__btn[disabled] {
  opacity: 0.4;
  cursor: default;
  background-image: none;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.slider__dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.slider__dot {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  transition:
    background-color var(--dur-base) var(--ease),
    width var(--dur-base) var(--ease);
}

.slider__dot.is-active {
  width: var(--space-28);
  background-image: var(--gradient-line);
}

/* =========================================================================
   Уведомление о добавлении в корзину
   ========================================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-24);
  transform: translate(-50%, var(--space-24));
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: calc(100% - var(--space-32));
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-dark);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    visibility var(--dur-base) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.toast__icon {
  color: var(--color-accent-light);
}

.team-card__name a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}

.team-card__link-icon {
  flex: 0 0 auto;
  opacity: 0.72;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.team-card__name a:hover .team-card__link-icon {
  opacity: 1;
  color: var(--color-primary);
}

.team-card__name a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.team-card__img--zoom-out {
  --team-img-position: center 18%;
  width: calc(100% * var(--team-img-zoom));
  height: calc(100% * var(--team-img-zoom));
  max-width: none;
  margin-left: calc(50% - 50% * var(--team-img-zoom));
  margin-top: calc(52% - 52% * var(--team-img-zoom));
  object-fit: cover;
  object-position: var(--team-img-position);
}

/* home-conversion: product-card */
.product-card--featured {
  display: grid;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-20);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.product-card__tagline {
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

.product-card__highlights {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.product-card__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.product-card__actions {
  display: grid;
  gap: var(--space-8);
}

.checklist {
  display: grid;
  gap: var(--space-10);
  padding: 0;
  list-style: none;
}

.checklist--columns {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-12) var(--space-24);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  line-height: var(--lh-loose);
}

@media (min-width: 768px) {
  .grid--products-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}