/**
 * RecoKit Widget — CSS
 * Design neutre, adaptable à n'importe quel thème PrestaShop.
 * EPIC-PS-03 / US-PS-03.2
 *
 * Toutes les couleurs et espacements sont des CSS custom properties
 * overridables depuis le thème du marchand.
 */

:root {
  --recokit-primary:      #2d6cdf;
  --recokit-text:         #1a1a2e;
  --recokit-text-light:   #6b7280;
  --recokit-bg:           #f9fafb;
  --recokit-border:       #e5e7eb;
  --recokit-radius:       8px;
  --recokit-gap:          16px;
  --recokit-font:         inherit;
}

/* ── Conteneur principal ── */
.recokit-widget {
  margin: 48px 0 24px;
  padding: 24px;
  background: var(--recokit-bg);
  border-radius: var(--recokit-radius);
  font-family: var(--recokit-font);
}

.recokit-widget__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--recokit-text);
  margin: 0 0 20px;
}

/* ── Grille de produits ── */
.recokit-widget__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--recokit-gap);
}

@media (min-width: 576px) {
  .recokit-widget__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .recokit-widget__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Skeleton Loader ── */
.recokit-widget__skeleton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--recokit-gap);
}

@media (min-width: 576px) {
  .recokit-widget__skeleton { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .recokit-widget__skeleton { grid-template-columns: repeat(4, 1fr); }
}

.recokit-skeleton-card {
  background: #fff;
  border: 1px solid var(--recokit-border);
  border-radius: var(--recokit-radius);
  padding: 12px;
  overflow: hidden;
}

.recokit-skeleton-img,
.recokit-skeleton-text,
.recokit-skeleton-price {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: recokit-shimmer 1.4s infinite;
  border-radius: 4px;
}

.recokit-skeleton-img   { height: 140px; margin-bottom: 10px; }
.recokit-skeleton-text  { height: 14px;  margin-bottom: 6px; width: 90%; }
.recokit-skeleton-price { height: 14px;  width: 40%; }

@keyframes recokit-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}