/* ==========================================================================
   Mascotas: tarjeta de producto.
   Escritorio: vertical (imagen, etiqueta, precio, nombre, variaciones,
   cantidad + Comprar). Móvil en tienda/categorías/etiquetas/búsqueda:
   horizontal (imagen a la izquierda, acciones abajo a todo el ancho).
   ========================================================================== */

/* .woocommerce-page: woocommerce-layout.css pone padding 0 a «.woocommerce-page ul.products li.product». */
.woocommerce ul.products li.product.product-card,
.woocommerce-page ul.products li.product.product-card,
.product-card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	text-align: left;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	transition: box-shadow .2s ease;
}

.product-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }

/* Imagen */
.product-card__image {
	position: relative;
	display: block;
	margin-bottom: 12px;
}

.woocommerce ul.products li.product .product-card__image img,
.product-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	object-fit: contain;
	border-radius: 0;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
}

/* Etiqueta (pastilla con icono) */
.product-card__label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 30px;
	margin: 0 0 4px 0;
	padding: 4px 14px 4px 44px;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(90deg, var(--color-primary), #3d8be0);
	border-radius: 999px;
}

.product-card__label-icon {
	position: absolute;
	left: -2px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--color-primary);
	background: #fff;
	border: 3px solid var(--color-primary);
	border-radius: 50%;
	transform: translateY(-50%);
}

.product-card__label-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Precio */
.woocommerce ul.products li.product .product-card__price,
.product-card__price {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary);
}

.product-card__price del { font-size: .95rem; font-weight: 400; color: var(--color-muted); }
.product-card__price ins { text-decoration: none; }

/* Nombre */
.woocommerce ul.products li.product .product-card__title,
.product-card__title {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
}

/* Máximo 2 líneas (escritorio y móvil); el nombre completo queda en el
   atributo title del enlace. */
.product-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.product-card__title a:hover { color: var(--color-link-active); }

.woocommerce ul.products li.product .product-card__brand,
.product-card__brand {
	margin: 0 0 -8px; /* Pegada al nombre pese al gap del cuerpo. */
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-muted);
}

/* Formulario: empuja las acciones al fondo para alinear tarjetas. */
.product-card__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

/* Variaciones */
.product-card__attribute-label { display: none; font-size: .9rem; color: var(--color-text); }

.product-card__options { display: flex; flex-wrap: wrap; gap: 8px; }

.product-card__option {
	min-width: 48px;
	padding: 8px 12px;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.product-card__option:hover:not(:disabled) { color: var(--color-primary); background: var(--color-bg); border-color: var(--color-primary); }

.product-card__option[aria-pressed="true"] {
	font-weight: 700;
	color: var(--color-primary);
	background: #e1edf9;
	border-color: #e1edf9;
}

.product-card__option.is-unavailable {
	color: var(--color-muted);
	text-decoration: line-through;
	opacity: .45;
	cursor: not-allowed;
}

/* Cantidad + Comprar */
.product-card__actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}

.product-card__qty {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.product-card__qty-btn {
	width: 30px;
	height: 42px;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary);
	background: transparent;
	border-radius: 8px;
}

.product-card__qty-btn:hover { color: var(--color-primary-dark); background: var(--color-bg-alt); }

.product-card .product-card__qty-input,
.woocommerce .product-card__qty-input {
	width: 34px;
	height: 42px;
	padding: 0;
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	-moz-appearance: textfield;
}

.product-card__qty-input::-webkit-outer-spin-button,
.product-card__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce ul.products li.product .product-card__buy,
.product-card__buy {
	flex: 1;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	font-size: .95rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-accent);
	border-radius: 8px;
}

.woocommerce ul.products li.product .product-card__buy:hover,
.product-card__buy:hover { color: #fff; background: #b80c0c; }

.product-card__buy:disabled,
.woocommerce ul.products li.product .product-card__buy:disabled {
	color: #fff;
	background: #b5b5b5;
	cursor: not-allowed;
	opacity: 1;
}

.product-card__buy.is-loading { opacity: .7; cursor: progress; }
.product-card__buy.is-added,
.woocommerce ul.products li.product .product-card__buy.is-added { background: #1a9a4b; }

/* Lista desplegable de variaciones (carruseles). */
.product-card__select {
	width: 100%;
	height: 40px;
	padding: 0 32px 0 12px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--color-primary);
	background-color: #e1edf9;
	border: 1px solid #e1edf9;
	border-radius: 8px;
	cursor: pointer;
}

.product-card__select:focus { border-color: var(--color-primary); outline: none; }

.product-card__message { margin: 0; font-size: .85rem; color: var(--color-sale); }
.product-card__message:empty { display: none; }

/* Etiquetas de etiquetas-dinamicas: el plugin envuelve la imagen. */
.product-card__image .ed-image-wrap { display: block; }

/* Móvil: listados en horizontal ------------------------------------------- */
@media (max-width: 640px) {
	.woocommerce ul.products.products--list-mobile,
	.woocommerce-page ul.products.products--list-mobile {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	/* El cuerpo y el formulario «desaparecen» como cajas para que sus hijos
	   se coloquen en la rejilla de la tarjeta. */
	ul.products.products--list-mobile li.product.product-card {
		display: grid;
		grid-template-columns: 36% 1fr;
		grid-auto-flow: row dense;
		gap: 6px 14px;
		align-items: start;
		padding: 14px;
	}

	ul.products.products--list-mobile li.product .product-card__body,
	ul.products.products--list-mobile li.product .product-card__form { display: contents; }

	ul.products.products--list-mobile li.product .product-card__image {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0;
	}

	ul.products.products--list-mobile li.product .product-card__label,
	ul.products.products--list-mobile li.product .product-card__price,
	ul.products.products--list-mobile li.product .product-card__brand,
	ul.products.products--list-mobile li.product .product-card__title { grid-column: 2; }

	/* Variaciones: fila completa y centradas, para que quepan varias opciones. */
	ul.products.products--list-mobile li.product .product-card__attribute {
		grid-column: 1 / -1;
		margin-top: 8px;
		text-align: center;
	}

	ul.products.products--list-mobile li.product .product-card__options { justify-content: center; }

	ul.products.products--list-mobile li.product .product-card__label { order: 1; }
	ul.products.products--list-mobile li.product .product-card__title { order: 2; font-size: 1.05rem; text-transform: uppercase; }
	ul.products.products--list-mobile li.product .product-card__price { order: 3; margin: 6px 0; }
	ul.products.products--list-mobile li.product .product-card__attribute { order: 4; }
	ul.products.products--list-mobile li.product .product-card__actions { order: 5; grid-column: 1 / -1; margin-top: 10px; }
	ul.products.products--list-mobile li.product .product-card__message { order: 6; grid-column: 1 / -1; }

	ul.products.products--list-mobile li.product .product-card__brand { order: 2; margin: 0; text-transform: none; }
	ul.products.products--list-mobile li.product .product-card__attribute-label { display: block; margin-bottom: 6px; }

	ul.products.products--list-mobile li.product .product-card__label {
		min-height: 26px;
		padding-left: 38px;
		font-size: .75rem;
	}

	ul.products.products--list-mobile li.product .product-card__label-icon { width: 32px; height: 32px; }

	ul.products.products--list-mobile li.product .product-card__qty-btn { width: 36px; }
	ul.products.products--list-mobile li.product .product-card__qty-input { width: 44px; }

	/* Carruseles y rejillas fuera de los listados: tarjetas compactas. */
	ul.products:not(.products--list-mobile) li.product.product-card { padding: 10px; }
	ul.products:not(.products--list-mobile) .product-card__price { font-size: 1.15rem; }
	ul.products:not(.products--list-mobile) .product-card__actions { flex-direction: column; }
	ul.products:not(.products--list-mobile) .product-card__qty { justify-content: space-between; }
	ul.products:not(.products--list-mobile) .product-card__qty-input { flex: 1; }
}

/* ==========================================================================
   Notificación inferior al agregar al carrito (cart-toast).
   Fondo azul de marca para que se distinga del fondo blanco de la página.
   Estados (data-state): loading → done | error.
   ========================================================================== */
.cart-toast {
	--toast-bg: var(--color-primary);
	--toast-text: #fff;
	--toast-muted: #c5d3ec;
	--toast-highlight: #ffd166;
	--toast-track: rgba(255, 255, 255, .22);
	--toast-fill: #7cc4ff;
	--toast-free: #a3e635;          /* Verde lima: contrasta con el azul sin chocar. */
	--toast-free-ink: #0b3a6e;      /* Iconos sobre el lima. */

	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 2147483000;
	width: min(480px, calc(100% - 24px));
	overflow: hidden;
	color: var(--toast-text);
	background: var(--toast-bg);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	transform: translate(-50%, calc(100% + 32px));
	visibility: hidden;
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .35s;
}

.cart-toast.is-open {
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.cart-toast__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	display: inline-flex;
	padding: 6px;
	color: var(--toast-muted);
	background: transparent;
}

.cart-toast__close:hover { color: var(--toast-text); background: transparent; }

/* Envío gratis: bajo el nombre del producto, con un camión en la punta. */
.cart-toast__shipping { margin: 0 0 16px; }

.cart-toast__shipping-text { margin: 0 0 14px; font-size: .9rem; color: var(--toast-text); }
.cart-toast__shipping-text strong { color: var(--toast-highlight); }

/* Margen lateral para que el camión no se salga en 0 % ni en 100 %. */
.cart-toast__track { position: relative; margin: 0 14px; }

.cart-toast__bar {
	height: 10px;
	overflow: hidden;
	background: var(--toast-track);
	border-radius: 999px;
}

.cart-toast__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--toast-fill);
	border-radius: inherit;
	transition: width .6s ease;
}

.cart-toast__truck {
	position: absolute;
	top: 50%;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--toast-bg);
	background: #fff;
	border: 2px solid var(--toast-fill);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%);
	transition: left .6s ease, background-color .3s ease, border-color .3s ease;
}

.cart-toast__bar-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: .75rem;
	color: var(--toast-muted);
}

/* Envío gratis: verde lima con trazo blanco delgado en las formas. El texto
   va sin trazo: el lima ya se lee bien sobre el azul. */
.cart-toast__shipping.is-free .cart-toast__bar { box-shadow: 0 0 0 1px #fff; }
.cart-toast__shipping.is-free .cart-toast__bar-fill { background: var(--toast-free); }
.cart-toast__shipping.is-free .cart-toast__truck { color: var(--toast-free-ink); background: var(--toast-free); border: 1.5px solid #fff; }
.cart-toast__shipping.is-free .cart-toast__shipping-text { font-weight: 700; color: var(--toast-free); }

.cart-toast__main { padding: 18px; }

.cart-toast__loading,
.cart-toast__done,
.cart-toast__error,
.cart-toast__shipping { display: none; }

.cart-toast[data-state="loading"] .cart-toast__loading { display: flex; }
.cart-toast[data-state="done"] .cart-toast__done,
.cart-toast[data-state="done"] .cart-toast__shipping,
.cart-toast[data-state="error"] .cart-toast__error { display: block; }

.cart-toast__loading {
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 0;
	font-weight: 500;
}

.cart-toast__spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--toast-track);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cart-toast-spin .8s linear infinite;
}

@keyframes cart-toast-spin { to { transform: rotate(360deg); } }

.cart-toast__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 28px 4px 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--toast-text);
}

.cart-toast__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: .85rem;
	font-weight: 900;
	color: var(--toast-free-ink);
	background: var(--toast-free);
	border: 1.5px solid #fff;
	border-radius: 50%;
}

/* Cuenta atrás del cierre automático: línea fina en el borde inferior que
   se vacía en 4 s (al terminar, el JS cierra la notificación). */
.cart-toast__timer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--toast-free);
	transform-origin: left center;
	transform: scaleX(0);
}

.cart-toast__timer.is-running { animation: cart-toast-timer 4s linear forwards; }

/* Con el ratón encima se pausa, para dar tiempo a leer o pulsar. */
.cart-toast:hover .cart-toast__timer.is-running { animation-play-state: paused; }

@keyframes cart-toast-timer {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

.cart-toast__product { margin: 0 0 14px; font-size: .9rem; color: var(--toast-muted); }

.cart-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#cart-toast .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 8px;
	font-size: .9rem;
	text-align: center;
	white-space: nowrap;
}

#cart-toast .cart-toast__continue {
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
}

#cart-toast .cart-toast__continue:hover { color: var(--toast-bg); background: #fff; }

#cart-toast .cart-toast__go { color: #fff; background: var(--color-accent); border: 2px solid var(--color-accent); }
#cart-toast .cart-toast__go:hover { background: #b80c0c; border-color: #b80c0c; }

.cart-toast__error-text { margin: 0 28px 12px 0; color: #ffb3b3; font-weight: 500; }

/* Solo móvil: en escritorio se usa el carrito lateral. */
@media (min-width: 1025px) {
	.cart-toast { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cart-toast { transition: none; }
	.cart-toast__bar-fill,
	.cart-toast__truck { transition: none; }
	.cart-toast__spinner { animation-duration: 2s; }
}