/**
 * WapuCommerce — Card Component System
 * ──────────────────────────────────────────────────────────────
 * Unifica 8 variantes de card bajo un base común:
 *
 *   .wapu-card            → base (radius-lg, padding-4, surface, border-line)
 *   .wapu-card--product   → product-card en archive/grid
 *   .wapu-card--collection → collection cards en modal
 *   .wapu-card--order     → orders list, downloads, recent products
 *   .wapu-card--summary   → checkout, thankyou, cart totals
 *
 * Los selectores legacy heredan del base sin editar HTML.
 * Este archivo carga AL FINAL para ganar cascade sobre los
 * CSS específicos (archive, cart, checkout, account-logged).
 *
 * @since 3.0.0
 */


/* ═══════════════════════════════════════════════════════════
 *  BASE .wapu-card + selectores legacy
 *  Todos comparten: radius-lg (16px), padding-4 (16px), surface,
 *  border sutil, transición unificada, hover elevation.
 * ═══════════════════════════════════════════════════════════ */

.wapu-card,
.wapu-product-card,
.wapu-archive__collection-card,
.wapu-account-logged__recent-card,
.wapu-thankyou__card,
.wapu-checkout__card,
.wapu-my-address__card,
.wapu-transparencia__card,
.wapu-downloads__item {
	background: var(--ds-surface);
	border-radius: var(--ds-r-lg);
	padding: var(--ds-s-4);
	border: 0.5px solid var(--ds-line);
	box-shadow: var(--ds-shadow-sm);
	transition: box-shadow var(--ds-dur) var(--ds-ease),
	            transform var(--ds-dur) var(--ds-ease),
	            border-color var(--ds-dur) var(--ds-ease);
}

/* ─── HOVER state — solo en cards "interactivas" (product, collection, recent, address, downloads) */
.wapu-card:hover,
.wapu-product-card:hover,
.wapu-archive__collection-card:hover,
.wapu-account-logged__recent-card:hover,
.wapu-my-address__card:hover,
.wapu-downloads__item:hover {
	box-shadow: var(--ds-shadow-md);
	transform: translateY(-2px);
	border-color: var(--ds-line-strong);
}

/* Cards estáticas (checkout, thankyou, transparencia) NO elevan en hover */
.wapu-thankyou__card:hover,
.wapu-checkout__card:hover,
.wapu-transparencia__card:hover {
	transform: none;
	box-shadow: var(--ds-shadow-sm);
}

/* ─── PADDING overrides
 * El base setea padding: var(--ds-s-4) (16px) por default. Estas cards
 * manejan padding internamente en sus sub-elementos (headers, body, rows),
 * por lo que deben anular el padding del contenedor. Viven aquí para que
 * el sistema de cards sea auto-contenido y gane cascade al cargar último.
 */
.wapu-my-address__card,
.wapu-transparencia__card {
	padding: 0;
}

.wapu-downloads__item {
	padding: var(--ds-s-4) 20px;  /* 20px horizontal — valor de diseño fuera de la escala 8px */
}


/* ═══════════════════════════════════════════════════════════
 *  VARIANTES OPCIONALES
 *  Para casos donde quieras usar .wapu-card directamente en HTML
 *  nuevo sin tener que copiar selectores legacy.
 * ═══════════════════════════════════════════════════════════ */

/* Summary card — sin hover (checkout, cart totals) */
.wapu-card--summary {
	transition: none;
}
.wapu-card--summary:hover {
	transform: none;
	box-shadow: var(--ds-shadow-sm);
}

/* Product card — aspect preservado, overflow hidden */
.wapu-card--product {
	overflow: hidden;
}

/* Compact variant — padding reducido para listas densas */
.wapu-card--compact {
	padding: var(--ds-s-3);
	border-radius: var(--ds-r-md);
}


/* ═══════════════════════════════════════════════════════════
 *  DARK MODE — border más visible, sin shadow
 *  Las shadows casi desaparecen en fondo negro, así que en dark
 *  reforzamos el border para definir el límite de la card.
 * ═══════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .wapu-card,
:root[data-theme="dark"] .wapu-product-card,
:root[data-theme="dark"] .wapu-archive__collection-card,
:root[data-theme="dark"] .wapu-account-logged__recent-card,
:root[data-theme="dark"] .wapu-thankyou__card,
:root[data-theme="dark"] .wapu-checkout__card,
:root[data-theme="dark"] .wapu-my-address__card,
:root[data-theme="dark"] .wapu-transparencia__card,
:root[data-theme="dark"] .wapu-downloads__item {
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

:root[data-theme="dark"] .wapu-card:hover,
:root[data-theme="dark"] .wapu-product-card:hover,
:root[data-theme="dark"] .wapu-archive__collection-card:hover,
:root[data-theme="dark"] .wapu-account-logged__recent-card:hover,
:root[data-theme="dark"] .wapu-my-address__card:hover,
:root[data-theme="dark"] .wapu-downloads__item:hover {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}