/* ROKODIL — page-common.css — badges, stock-status, rating, кнопки */

/* ==========================================================================
   ОБЩИЕ: badge, stock-status, rating, кнопка
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 999px; }
.badge--green { background: #81A554; color: #fff; }
.badge--dark { background: #252B2B; color: #fff; }

.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.stock-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stock-status--in::before { background: #81A554; }
.stock-status--in { color: #81A554; }
.stock-status--low::before { background: #E8A317; }
.stock-status--low { color: #E8A317; }
.stock-status--out::before { background: #979E9F; }
.stock-status--out { color: #979E9F; }

.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__star { width: 16px; height: 16px; color: #E8A317; }
.rating__star--empty { color: #E3E5E6; }
.rating__count { font-size: 12px; color: #979E9F; line-height: 18px; }


.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #F9F9F9; color: #252B2B; transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: #F1F1F1; color: #006C66; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination__btn { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 14px; font-weight: 500; color: #252B2B; border: 1px solid transparent; transition: all 0.2s; }
.pagination__btn:hover { background: #F9F9F9; }
.pagination__btn.is-active { background: #006C66; color: #fff; }
.pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }



/* Shared storefront benefits — catalog and comparison */
.why-cards {
  background: #F9F9F9;
  padding: 100px 0;
}

.why-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.why-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.why-cards__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-cards__icon img {
  width: 46px;
  height: 46px;
}

.why-cards__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #252B2B;
  margin: 0 0 16px 0;
}

.why-cards__desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #555B5C;
  margin: 0;
  max-width: 303px;
}

@media (max-width: 1200px) {
  .why-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .why-cards {
    padding: 60px 0;
  }

  .why-cards__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}