/* ═══════════════════════════════════════════════════════════════════════════
   TIENDA — tarjeta de producto (páginas de línea, "Más productos de la línea").
   Se carga en todo el sitio salvo Hogar. Diseño: bocetos aprobados por Lucas
   (docs/bocetos/linea.html y ficha.html, 2026-09-24).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grilla de tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }

.tarjeta-prod {
	display: flex; flex-direction: column;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .3s var(--e-out), box-shadow .3s var(--e-soft), border-color .3s;
}
.tarjeta-prod:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-2); }

/* Foto: los recortes sin fondo se ven completos; las fotos de estudio llenan el marco. */
.tp-media {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: radial-gradient(90% 90% at 70% 20%, #fff 0%, var(--mist) 50%, var(--mist-2) 100%);
}
.tp-media img {
	position: absolute; inset: 8%; width: 84%; height: 84%;
	object-fit: contain; mix-blend-mode: multiply;
	transition: transform .5s var(--e-out);
}
.tp-media.foto-llena img { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.tarjeta-prod:hover .tp-media img { transform: scale(1.04); }
.tarjeta-prod.agotado .tp-media img { opacity: .55; }

.tp-cartel {
	position: absolute; top: .85rem; left: .85rem; z-index: 2;
	font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding: .32rem .75rem; border-radius: var(--r-full);
	background: var(--abyss); color: #fff;
}
.tp-cartel.sin-stock { background: #fff; color: var(--ink-3); border: 1px solid var(--line-2); }

/* Texto */
.tp-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.4rem; }
.tp-etiqueta { margin: 0 0 .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.tp-nombre { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: -.025em; line-height: 1.2; }
.tp-nombre a { color: var(--ink); text-decoration: none; }
.tp-nombre a:hover { color: var(--brand-700); }
.tp-resumen { margin: 0 0 1rem; flex: 1; font-size: .9rem; line-height: 1.55; color: var(--ink-3); }
.tp-precio { margin: 0 0 1rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.tp-precio small { margin-left: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.tarjeta-prod.agotado .tp-precio { color: var(--ink-3); }

/* Botones */
.tp-acciones { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; }
.tp-acciones .btn { width: 100%; min-height: 48px; font-size: .92rem; }
.tp-acciones .btn[disabled] { background: var(--line); color: var(--ink-3); box-shadow: none; cursor: not-allowed; transform: none; }
.tp-acciones .link-arrow { align-self: center; min-height: 36px; color: var(--deep-2); }
.tp-acciones .link-arrow:hover { color: var(--brand); }
/* El plugin "Add to Cart Text Changer" agrega su propio ícono de carrito: la tarjeta ya trae el suyo. */
.tarjeta-prod .add_to_cart_button::before { content: none; display: none; }
/* Campo de cantidad con − y + (ficha y Carrito; los botones los agrega el tema). */
:is(.pagina-ficha, .pagina-compra) .quantity {
	display: inline-flex; align-items: center; flex: none; padding: .25rem;
	border: 1.5px solid var(--line-2); border-radius: var(--r-full); background: var(--paper);
}
:is(.pagina-ficha, .pagina-compra) .quantity .qty {
	width: 2.4rem; padding: 0; border: 0; background: none;
	font: inherit; font-weight: 800; text-align: center; color: var(--ink);
	-moz-appearance: textfield; appearance: textfield;
}
:is(.pagina-ficha, .pagina-compra) .quantity .qty::-webkit-inner-spin-button,
:is(.pagina-ficha, .pagina-compra) .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cant-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: none; color: var(--ink); cursor: pointer; transition: background .2s;
}
.cant-btn:hover { background: var(--mist); }
.cant-btn svg { width: 15px; height: 15px; }

/* Avisos de WooCommerce ("Se agregó al carrito", "Se actualizó el carrito", errores) en las
   páginas que no cargan los estilos generales de WooCommerce (ficha, Carrito). */
:is(.pagina-ficha, .pagina-compra) .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 1.5rem; }
:is(.pagina-ficha, .pagina-compra) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem;
	margin: 0 0 .6rem; padding: .95rem 1.2rem; list-style: none;
	border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 0;
	background: var(--mist); font-size: .92rem; font-weight: 600; color: var(--ink);
}
:is(.pagina-ficha, .pagina-compra) .woocommerce-info { border-left-color: var(--brand); }
:is(.pagina-ficha, .pagina-compra) .woocommerce-error { border-left-color: var(--danger); flex-direction: column; align-items: flex-start; }
:is(.pagina-ficha, .pagina-compra) :is(.woocommerce-message, .woocommerce-info) :is(.button, a) { order: 2; font-weight: 700; color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }

/* Un solo producto (ej: Industrial): tarjeta más ancha y horizontal, sin ocupar todo el ancho. */
.tarjetas-una { grid-template-columns: minmax(0, 720px); }
.tarjetas-una .tarjeta-prod { flex-direction: row; }
.tarjetas-una .tp-media { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
.tarjetas-una .tp-cuerpo { padding: 1.8rem 2rem; justify-content: center; }
.tarjetas-una .tp-nombre { font-size: 1.45rem; }
.tarjetas-una .tp-resumen { flex: 0 0 auto; font-size: .95rem; margin-bottom: 1.4rem; }
.tarjetas-una .tp-acciones { margin-top: 0; }
.tarjetas-una .tp-acciones .link-arrow { align-self: flex-start; }

/* Celular: dos por fila, sin el resumen (vuelve en pantallas muy angostas, de a una). */
@media (max-width: 720px) {
	.tarjetas { grid-template-columns: 1fr 1fr; gap: .9rem; }
	.tp-cuerpo { padding: 1rem; }
	.tp-nombre { font-size: 1rem; }
	.tp-resumen { display: none; }
	.tp-precio { font-size: 1.2rem; }
	.tp-acciones .btn { padding: 0 .8rem; font-size: .85rem; white-space: normal; text-align: center; }
}
@media (max-width: 720px) {
	/* La tarjeta ancha vuelve a ser vertical en celular. */
	.tarjetas-una { grid-template-columns: 1fr; }
	.tarjetas-una .tarjeta-prod { flex-direction: column; }
	.tarjetas-una .tp-media { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
	.tarjetas-una .tp-cuerpo { padding: 1.2rem; }
	.tarjetas-una .tp-resumen { display: block; }
}
@media (max-width: 420px) {
	.tarjetas { grid-template-columns: 1fr; }
	.tp-resumen { display: block; }
}