/**
 * Catálogo público — productos.php
 * Overrides dark premium (carga después del <style> inline en productos.php).
 */

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-card {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cta-text) 38%, var(--border-color));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cta-text) 8%, transparent),
    var(--shadow-card);
}

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-card:hover {
  border-color: color-mix(in srgb, var(--cta-text) 55%, var(--border-color));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cta-text) 16%, transparent),
    0 0 20px color-mix(in srgb, var(--cta-text) 12%, transparent),
    0 8px 28px rgba(0, 0, 0, 0.38);
}

[data-belleza-surface="dark"] body[data-page="Productos"] .img-container {
  background: var(--bg-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--cta-text) 20%, var(--border-color));
}

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-footer {
  background: var(--bg-card);
  border-top: 1px solid color-mix(in srgb, var(--cta-text) 22%, var(--border-color));
}

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-footer strong {
  color: var(--text-primary);
}

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-footer span {
  color: var(--text-muted);
}

[data-belleza-surface="dark"] body[data-page="Productos"] .gallery-empty--error {
  color: color-mix(in srgb, var(--danger) 75%, var(--text-primary));
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-color));
}

[data-belleza-surface="dark"] body[data-page="Productos"] .productos-loading,
[data-belleza-surface="dark"] body[data-page="Productos"] .gallery-empty {
  color: var(--text-muted);
}

[data-belleza-surface="dark"] body[data-page="Productos"] .producto-card__hover-price {
  color: var(--cta-text);
  text-shadow: var(--cta-text-shadow);
}