/* ============================================================
   RR AUDIOCAR PRO — Product card (loop)
   ============================================================ */

.rrac-card {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rrac-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rrac-surface);
  border: 1px solid var(--rrac-border);
  border-radius: var(--rrac-radius-2xl);
  overflow: hidden;
  box-shadow: var(--rrac-shadow-xs);
  transition: transform var(--rrac-dur-base) var(--rrac-ease-smooth),
              box-shadow var(--rrac-dur-base) var(--rrac-ease-smooth),
              border-color var(--rrac-dur-base) var(--rrac-ease-smooth);
}
.rrac-card__inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--rrac-shadow-lg);
  border-color: var(--rrac-border-strong);
}

/* Badge descuento */
.rrac-card__badge {
  position: absolute;
  top: var(--rrac-space-3);
  right: var(--rrac-space-3);
  z-index: 2;
  padding: 4px 10px;
  background: var(--rrac-primary);
  color: #fff;
  border-radius: var(--rrac-radius-lg);
  font-size: var(--rrac-text-2xs);
  font-weight: var(--rrac-weight-black);
  line-height: 1.4;
  letter-spacing: 0.02em;
  box-shadow: var(--rrac-shadow-xs);
}

/* Quick view button */
.rrac-card__qv {
  position: absolute;
  top: var(--rrac-space-3);
  left: var(--rrac-space-3);
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: var(--rrac-radius-full);
  background: var(--rrac-surface);
  color: var(--rrac-text-soft);
  display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: var(--rrac-shadow-md);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--rrac-dur-base) var(--rrac-ease-smooth),
              transform var(--rrac-dur-base) var(--rrac-ease-spring),
              background var(--rrac-dur-fast),
              color var(--rrac-dur-fast);
}
.rrac-card__inner:hover .rrac-card__qv {
  opacity: 1;
  transform: scale(1);
}
.rrac-card__qv:hover {
  background: var(--rrac-primary);
  color: #fff;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .rrac-card__qv { opacity: 1; transform: scale(1); width: 32px; height: 32px; }
}

/* Link wrapping todo el body */
.rrac-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Media */
.rrac-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: clamp(12px, 2vw, 24px);
  background: var(--rrac-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rrac-bg-subtle);
}
.rrac-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform var(--rrac-dur-slow) var(--rrac-ease-smooth);
}
.rrac-card__inner:hover .rrac-card__media img {
  transform: scale(1.06);
}

/* Body */
.rrac-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--rrac-space-3) var(--rrac-space-4) var(--rrac-space-4);
  gap: var(--rrac-space-2);
}

/* Meta (rating + sold) */
.rrac-card__meta {
  display: flex;
  align-items: center;
  gap: var(--rrac-space-2);
  font-size: var(--rrac-text-xs);
  color: var(--rrac-text-muted);
}
.rrac-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.rrac-card__rating .rrac-icon { color: var(--rrac-star-500); fill: var(--rrac-star-500); stroke: var(--rrac-star-500); }
.rrac-card__rating strong { color: var(--rrac-text-soft); font-weight: var(--rrac-weight-semibold); }
.rrac-card__sold {
  font-variant-numeric: tabular-nums;
}
.rrac-card__sold::before {
  content: "•";
  margin-right: var(--rrac-space-1);
  color: var(--rrac-ink-300);
}

/* Brand */
.rrac-card__brand {
  font-size: var(--rrac-text-2xs);
  font-weight: var(--rrac-weight-bold);
  letter-spacing: var(--rrac-tracking-wider);
  text-transform: uppercase;
  color: var(--rrac-text-muted);
  margin: 0;
}

/* Title */
.rrac-card__title {
  font-size: var(--rrac-text-sm);
  font-weight: var(--rrac-weight-medium);
  color: var(--rrac-text);
  line-height: var(--rrac-leading-snug);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color var(--rrac-dur-fast) var(--rrac-ease-smooth);
}
.rrac-card__inner:hover .rrac-card__title { color: var(--rrac-primary); }

/* Pricebox */
.rrac-card__pricebox {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--rrac-space-1);
}
.rrac-card__ship {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--rrac-text-xs);
  color: var(--rrac-ship);
  font-weight: var(--rrac-weight-semibold);
  margin-top: var(--rrac-space-1);
}

/* Actions slot (button al final) */
.rrac-card__actions {
  padding: 0 var(--rrac-space-4) var(--rrac-space-4);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--rrac-dur-slow) var(--rrac-ease-smooth),
              padding var(--rrac-dur-slow) var(--rrac-ease-smooth);
}
.rrac-card__inner:hover .rrac-card__actions {
  max-height: 80px;
}
.rrac-card__actions .added_to_cart {
  display: none !important; /* link "Ver carrito" generado por Woo después de AJAX */
}

/* Mobile: actions visibles siempre */
@media (max-width: 768px) {
  .rrac-card__actions { max-height: 80px; }
  .rrac-card__title { font-size: var(--rrac-text-base); }
}

/* ============================================================
   Price block (component, usado en card + single)
   ============================================================ */
.rrac-priceblock {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  gap: 2px;
  font-family: var(--rrac-font-sans);
}
.rrac-priceblock__old {
  font-size: var(--rrac-text-xs);
  color: var(--rrac-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--rrac-ink-400);
  text-decoration-thickness: 1px;
}
.rrac-priceblock__old .amount,
.rrac-priceblock__old bdi,
.rrac-priceblock__old .woocommerce-Price-amount {
  font: inherit !important;
  color: inherit !important;
}
.rrac-priceblock__main {
  font-weight: var(--rrac-weight-bold);
  color: var(--rrac-text);
  line-height: 1;
  letter-spacing: var(--rrac-tracking-tight);
}
.rrac-priceblock__main .amount,
.rrac-priceblock__main bdi,
.rrac-priceblock__main .woocommerce-Price-amount {
  font: inherit !important;
  color: inherit !important;
}
.rrac-priceblock__cuotas {
  font-size: var(--rrac-text-xs);
  font-weight: var(--rrac-weight-semibold);
  color: var(--rrac-ship);
}
.rrac-priceblock__cuotas .amount,
.rrac-priceblock__cuotas bdi,
.rrac-priceblock__cuotas .woocommerce-Price-amount {
  font: inherit !important;
  color: inherit !important;
}

/* Size variants */
.rrac-priceblock--sm .rrac-priceblock__main { font-size: var(--rrac-text-xl); }
.rrac-priceblock--md .rrac-priceblock__main { font-size: var(--rrac-text-2xl); }
.rrac-priceblock--lg .rrac-priceblock__main { font-size: var(--rrac-text-4xl); }
.rrac-priceblock--xl .rrac-priceblock__main { font-size: clamp(var(--rrac-text-5xl), 4vw, var(--rrac-text-7xl)); }
.rrac-priceblock--xl .rrac-priceblock__old  { font-size: var(--rrac-text-sm); }

/* ============================================================
   Generic badge (component)
   ============================================================ */
.rrac-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--rrac-radius-md);
  font-size: var(--rrac-text-2xs);
  font-weight: var(--rrac-weight-black);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.rrac-badge--discount { background: var(--rrac-primary); color: #fff; }
.rrac-badge--new      { background: var(--rrac-info-500); color: #fff; }
.rrac-badge--sold-out { background: var(--rrac-ink-700); color: #fff; }
.rrac-badge--ship     { background: var(--rrac-success-50); color: var(--rrac-success-700); }

/* ============================================================
   Rating inline (component)
   ============================================================ */
.rrac-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--rrac-text-sm);
  color: var(--rrac-text-muted);
  font-variant-numeric: tabular-nums;
}
.rrac-rating__star { fill: var(--rrac-star-500); }
.rrac-rating__num { font-weight: var(--rrac-weight-bold); color: var(--rrac-text); }
.rrac-rating__count { color: var(--rrac-text-muted); }