/*
 * Variations Fallback Styles
 * corevea-child-theme / assets/css/variations-fallback.css
 */

/* ── 1. Hide original block on no-variation products ─────────────────────── */
/* Feature retired: hiding variations__coreva would also hide the Add to Cart button */

/* ── 2. Fallback block wrapper ───────────────────────────────────────────── */

.variations__coreva--fallback {
  margin-bottom: 1.5rem;
  width: 100%;
  display: block;
}

/* ── 3. Heading ──────────────────────────────────────────────────────────── */

.variations__coreva--fallback__heading {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
}

/* ── 4. Grid of recommended items ────────────────────────────────────────── */

.variations__coreva--fallback__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.variations__coreva--fallback__item {
  flex: 0 0 auto;
}

/* ── 5. Each item link (pill style matching common variation UI) ──────────── */

.variations__coreva--fallback__link {
  display: inline-flex;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: transparent;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.variations__coreva--fallback__img {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  background-color: #f0f0f0;
}

.variations__coreva--fallback__link:hover,
.variations__coreva--fallback__link:focus {
  border-color: #7b001d;
  outline: none;
  transform: scale(1.05);
}

/* ── 6. Empty state ──────────────────────────────────────────────────────── */

.variations__coreva--fallback__empty {
  margin: 0;
  font-size: 0.875rem;
  color: #888;
}

/* ── 7. Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .variations__coreva--fallback__grid {
    flex-direction: row;
  }

  .variations__coreva--fallback__link {
    display: block;
    text-align: center;
  }
}