/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ (не критичные для LCP)
   Загружаются асинхронно
   ============================================ */

/* === КАРТОЧКИ === */
.card { background: var(--card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-base); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-product { display: flex; flex-direction: column; height: 100%; }
.card-product-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--muted); display: block; }
.card-product-body { padding: var(--space-md); display: flex; flex-direction: column; flex-grow: 1; }

/* === СЕТКИ === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* === КАТЕГОРИИ === */
.cat-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; font-size: 32px; box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.cat-icon:hover { transform: scale(1.05); box-shadow: var(--shadow-md); }

/* === STICKY CTA === */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: var(--background); box-shadow: 0 -4px 12px rgba(0,0,0,0.1); z-index: 1000; display: none; }
@media (max-width: 768px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 80px; }
}

/* === СЕКЦИИ === */
.section { padding: var(--space-3xl) 0; }
.section-title { font-size: 32px; font-weight: 500; text-align: left; margin-bottom: 32px; color: var(--foreground); letter-spacing: -0.3px; }
.section-subtitle { font-size: 16px; color: var(--muted-foreground); margin-top: -20px; margin-bottom: 40px; }

/* === УТИЛИТЫ === */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }
.text-small { font-size: 14px; }

.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }

.hidden-mobile { display: block; }
.hidden-desktop { display: none; }

@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .section { padding: var(--space-2xl) 0; }
  .section-title { font-size: 24px; }
  .hidden-mobile { display: none; }
  .hidden-desktop { display: block; }
}