/**
 * Componentes reutilizables: botones, badges, tarjeta de producto,
 * breadcrumb, carrusel de productos, paginación.
 */

/* ---------- Botones ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 13px 22px;
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: 0.95rem;
	background: var(--color-primary);
	color: var(--color-on-primary);
	transition: transform 0.15s var(--ease), background 0.15s var(--ease), opacity 0.15s var(--ease);
	border: none;
}

.btn:active {
	transform: scale(0.97);
}

.btn:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.btn--light {
	background: #fff;
	color: var(--color-text);
}

.btn--light:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.btn--outline {
	background: transparent;
	color: var(--color-text);
	border: 1.5px solid var(--color-border-strong);
}

.btn--outline:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn--sm {
	padding: 9px 16px;
	font-size: 0.85rem;
}

/* ---------- Icon buttons (header / tabbar) ---------- */
.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	color: var(--color-text);
	flex-shrink: 0;
}

.icon-btn:hover {
	background: var(--color-bg-subtle);
}

.icon-btn__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.icon-btn__badge.is-empty {
	display: none;
}

/* ---------- Badges ---------- */
.badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	padding: 4px 9px;
	border-radius: var(--radius-full);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	z-index: 2;
}

.badge--sale {
	background: var(--color-danger);
	color: #fff;
}

.badge--out {
	background: rgba(29, 29, 31, 0.75);
	color: #fff;
	left: auto;
	right: var(--space-2);
}

/* Sin stock: diferenciador claro pero prolijo — no un cartel gritado
   encima, sino la propia tarjeta "apagada" (foto en gris, botón secundario
   en vez del azul de marca) para que salte a la vista sin gritar, mismo
   lenguaje que usa Apple Store con productos no disponibles.
   .outofstock la agrega sola wc_product_class(), no hace falta tocar PHP. */
.product-card.outofstock .product-card__media img {
	filter: grayscale(1);
	opacity: 0.55;
}

.product-card.outofstock .product-card__title,
.product-card.outofstock .product-card__price {
	color: var(--color-text-tertiary);
}

/* #site-main a.button (assets/css/woocommerce.css) trae un selector con ID
   — más específico que cualquier cadena de clases — así que la única forma
   de pisarlo acá es igualar esa especificidad con el mismo prefijo. */
#site-main .product-card.outofstock .product-card__actions .button,
#site-main .product-card.outofstock .product-card__actions a.button {
	background: var(--color-bg-subtle);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
}

#site-main .product-card.outofstock .product-card__actions .button:hover,
#site-main .product-card.outofstock .product-card__actions a.button:hover {
	background: var(--color-border);
	color: var(--color-text);
}

/* ---------- Dropdown de sugerencias de búsqueda (header/overlay/404) ----------
   Se inyecta por JS (assets/js/main.js) como hijo del <form> del buscador,
   que necesita position:relative (ya puesto en header.css/mobile-nav.css). */
.search-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
	overflow: hidden;
	z-index: var(--z-overlay);
	max-height: 70vh;
	overflow-y: auto;
}

.search-suggest__list {
	display: flex;
	flex-direction: column;
}

.search-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
	background: var(--color-bg-subtle);
}

.search-suggest__img {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background: var(--color-bg-subtle);
	flex-shrink: 0;
}

.search-suggest__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.search-suggest__name {
	font-size: 0.86rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-suggest__price {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-text-secondary);
}

.search-suggest__price del {
	color: var(--color-text-tertiary);
	font-weight: 500;
	margin-right: 4px;
	text-decoration: line-through;
}

.search-suggest__price ins {
	color: var(--color-danger);
	text-decoration: none;
}

.search-suggest__all {
	display: block;
	text-align: center;
	padding: var(--space-3);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-primary);
	border-top: 1px solid var(--color-border);
}

.search-suggest__empty {
	padding: var(--space-4);
	font-size: 0.86rem;
	color: var(--color-text-secondary);
	text-align: center;
}

/* ---------- Breadcrumb ---------- */
.page-breadcrumb-wrap {
	padding-top: var(--space-3);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--color-text-tertiary);
}

.breadcrumb__item a {
	color: var(--color-text-secondary);
}

.breadcrumb__item a:hover {
	color: var(--color-primary);
}

.breadcrumb__item:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: var(--color-text-tertiary);
}

/* ---------- Tarjeta de producto ---------- */
.product-card {
	position: relative;
	background: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
	display: flex;
	flex-direction: column;
}

/* En vez de una sombra gris genérica al pasar el mouse, el borde se tiñe
   del color de marca — mismo criterio que atacadoconnect.com: la tarjeta
   se queda "plana" (sin sombra), y lo que cambia es el acento de color. */
.product-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}

.product-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-subtle);
	overflow: hidden;
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s var(--ease);
}

.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--space-3) var(--space-3) 0;
}

.product-card__title {
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--color-text);
	display: -webkit-box;
	/* 2 líneas cortaban justo antes del modelo (ej. "12 Pro Max") en
	   nombres largos de repuestos — el dato más importante para elegir el
	   producto correcto. 3 líneas para que el nombre se lea completo. */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.6em;
	line-height: 1.2;
}

.product-card__price {
	font-size: 0.95rem;
	font-weight: 700;
}

.product-card__price ins {
	text-decoration: none;
	color: var(--color-danger);
}

.product-card__price del {
	color: var(--color-text-tertiary);
	font-weight: 500;
	font-size: 0.8rem;
	margin-right: 4px;
}

.product-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3) var(--space-3);
}

.product-card__qty {
	flex-shrink: 0;
}

/* Más chico que el stepper de carrito/producto (esa altura de 9px de
   padding queda pensada para un touch target grande, acá al lado de una
   tarjeta chica se veía desproporcionado) — mismo look, escala reducida. */
.product-card__qty .quantity {
	width: 100%;
	justify-content: center;
	min-height: 34px;
}

.product-card__qty .quantity .qty {
	width: 30px;
	padding: 6px 0;
	font-size: 0.8rem;
}

.product-card__qty .quantity__step {
	width: 26px;
	font-size: 0.95rem;
}

/* #site-main a.button (assets/css/woocommerce.css) trae un selector con ID
   — más específico que estas clases — con padding 13px 22px, pensado para
   el botón grande de la página de producto. Acá, junto al selector de
   cantidad, necesita el tamaño compacto original de la tarjeta. */
#site-main .product-card__actions .button,
#site-main .product-card__actions a.button,
#site-main .product-card__actions .add_to_cart_button {
	padding: 8px 12px;
	font-size: 0.82rem;
	/* OJO: nada de flex-grow acá. En columna (mobile, ver abajo) el eje
	   principal del flex es el vertical — un flex:1 en este eje hace que el
	   botón se estire para llenar TODO el espacio sobrante del contenedor,
	   que crece cuando una tarjeta vecina en la misma fila del grid es más
	   alta (por ejemplo, por el link "Ver carrito" que aparece debajo del
	   botón al agregar un producto Mayorista). Eso es justamente el bug del
	   botón "Agregar" gigante tapando todo lo demás en mobile. flex-grow
	   sólo tiene sentido en la fila de escritorio, de abajo. */
	flex: none;
	min-height: 34px;
}

/* Con la tarjeta más ancha (grilla de 3+ columnas o carruseles grandes)
   ya entran cantidad y botón en la misma fila. */
@media (min-width: 640px) {
	.product-card__actions {
		flex-direction: row;
		align-items: center;
	}

	.product-card__qty .quantity {
		width: auto;
	}

	#site-main .product-card__actions .button,
	#site-main .product-card__actions a.button,
	#site-main .product-card__actions .add_to_cart_button {
		flex: 1;
	}

	#site-main .product-card__actions a.added_to_cart {
		flex: 1 1 100%;
	}
}

.product-card__actions .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	text-align: center;
	color: var(--color-success);
}

.product-card .button,
.product-card a.button,
.product-card .add_to_cart_button,
.product-card .ajax_add_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 9px 12px;
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.82rem;
	text-align: center;
	transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.product-card .button:hover,
.product-card .add_to_cart_button:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.product-card .button.loading {
	opacity: 0.6;
}

.product-card .yith-wcwl-add-to-wishlist {
	display: none;
}

/* ---------- Fila de productos / carrusel horizontal ---------- */
.product-row {
	margin-top: var(--space-7);
}

.product-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.product-row__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: var(--space-3);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	/* El padding del lado de "entrada" de un contenedor con scroll no
	   siempre se respeta (varía según navegador) — por eso el primer
	   producto quedaba pegado al borde. Lo resolvemos con la misma técnica
	   que ya usamos en cat-circles__list: el track "sangra" hasta el borde
	   con margin negativo y se lo compensa con su propio padding, así el
	   espacio queda garantizado sin depender del contenedor con scroll.
	   Ojo: a propósito SIN scroll-snap acá — con snap, el navegador
	   "corrige" el scroll al primer punto de anclaje apenas carga la
	   página y cancela ese margen (pasaba tanto con margin como con
	   padding). El slider de destacados del home sí necesita snap porque
	   ahí importa que quede una tarjeta a pantalla completa por vez; en
	   estos carruseles secundarios no hace falta, con scroll libre alcanza. */
	margin: 0 calc(var(--space-4) * -1);
	padding: 0 var(--space-4) var(--space-2);
}

.product-row__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 640px) {
	.product-row__track {
		grid-auto-columns: 32%;
	}
}

@media (min-width: 900px) {
	.product-row__track {
		grid-auto-columns: 23%;
		gap: var(--space-4);
		margin: 0 calc(var(--space-6) * -1);
		padding: 0 var(--space-6) var(--space-2);
	}
}

@media (min-width: 1200px) {
	.product-row__track {
		grid-auto-columns: 18.4%;
	}
}

/* ---------- Paginación ---------- */
.pagination,
.woocommerce-pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
	font-weight: 600;
	font-size: 0.85rem;
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
}

.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots {
	background: transparent;
	color: var(--color-text-tertiary);
	min-width: auto;
	padding: 0 2px;
}

/* ---------- Blog / páginas genéricas ---------- */
.post-list {
	display: grid;
	gap: var(--space-5);
}

.post-card__thumb img {
	border-radius: var(--radius-md);
	aspect-ratio: 16/9;
	object-fit: cover;
}

.post-card__title {
	font-size: 1.15rem;
	margin: var(--space-3) 0 var(--space-2);
}

.post-card__excerpt {
	color: var(--color-text-secondary);
	font-size: 0.95rem;
}

/* ---------- Notices de WooCommerce (agregado al carrito, errores) ---------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: var(--space-4) 0;
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.woocommerce-message {
	background: var(--color-success-bg);
	color: #0d5c30;
}

.woocommerce-error {
	background: var(--color-danger-bg);
	color: #8a1216;
}

.woocommerce-message a.button,
.woocommerce-error a.button {
	margin-left: auto;
	background: var(--color-text);
	color: #fff;
	padding: 8px 16px;
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: 0.85rem;
}

/* ---------- Cantidad (stepper) ---------- */
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.quantity .qty {
	width: 46px;
	border: none;
	text-align: center;
	padding: 9px 0;
	background: transparent;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Estrellas de valoración ---------- */
.star-rating {
	position: relative;
	width: 80px;
	height: 1em;
	font-size: 0.9rem;
	line-height: 1;
	color: var(--color-border-strong);
}

.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	letter-spacing: 2px;
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #ffb400;
}

.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	letter-spacing: 2px;
}

/* ---------- Feedback al agregar al carrito (toast + ícono) ---------- */
.mundotec-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-3));
	transform: translate(-50%, 12px);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-text);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	z-index: var(--z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

/* Versión más larga (aviso de precio mayorista): no entra en una sola
   línea con forma de pill, así que dejamos que envuelva en un rectángulo
   más ancho y prolijo en vez de forzarla a estirarse horizontal. */
.mundotec-toast--wide {
	white-space: normal;
	max-width: min(340px, calc(100vw - var(--space-6)));
	border-radius: var(--radius-md);
	text-align: left;
	align-items: flex-start;
}

.mundotec-toast--wide .icon {
	margin-top: 2px;
}

.mundotec-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.mundotec-toast .icon {
	width: 18px;
	height: 18px;
	color: var(--color-success);
	flex-shrink: 0;
}

@media (min-width: 900px) {
	.mundotec-toast {
		left: auto;
		right: var(--space-6);
		bottom: var(--space-6);
		transform: translateY(10px);
	}

	.mundotec-toast.is-visible {
		transform: translateY(0);
	}
}

@keyframes mundotec-cart-bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.22);
	}
	65% {
		transform: scale(0.94);
	}
	100% {
		transform: scale(1);
	}
}

.icon-btn--cart.is-bumping,
.mobile-tabbar__icon-wrap.is-bumping {
	animation: mundotec-cart-bump 0.4s var(--ease);
}

/* "Ver carrito" que aparece tras agregar: botón propio en su fila, no un link chiquito apretado al costado */
.product-card__actions {
	flex-wrap: wrap;
}

#site-main .product-card__actions a.added_to_cart {
	/* En columna (mobile) no hace falta flex-grow — ya ocupa el ancho
	   entero por el align-items:stretch del contenedor, y sin grow no se
	   estira verticalmente si la tarjeta queda más alta que su contenido
	   (mismo motivo que el flex:none del botón "Agregar", arriba). El
	   1 1 100% (para forzar su propia fila) sólo hace falta en la fila de
	   escritorio — ver media query de abajo. */
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	min-height: 38px;
	padding: 8px 14px;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-primary-hover);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

#site-main .product-card__actions a.added_to_cart:hover {
	background: var(--color-primary);
	color: #fff;
}

.product-card__wholesale-price {
	font-size: 1.2rem;
}

.product-card__wholesale-price small {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.product-card__wholesale-tag {
	font-size: 0.72rem;
	line-height: 1.3;
}

/* Tarjeta: dos líneas de texto, sin cajas ni fondos de color — el mayorista
   se distingue por tamaño/peso/color, no por estar metido en un recuadro.
   Menos "ruido" cuando se repite 20+ veces en una grilla. */
.product-card__wholesale-box {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: var(--space-3);
	margin-bottom: var(--space-1);
}

/* Apilado vertical (etiqueta arriba, precio abajo) — en fila, con
   "MAYORISTA" y el precio compitiendo por el mismo ancho angosto de la
   tarjeta, el precio no entraba y saltaba de renglón de forma fea
   ("15.000,0" / "0" / "c/u" cada uno en su propia línea). */
.product-card__tier {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.product-card__tier-title {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}

.product-card__tier--wholesale .product-card__tier-title {
	color: var(--color-success);
}

.product-card__tier-price {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	white-space: nowrap;
}

/* Más contraste de tamaño entre los dos precios: el mayorista (el que
   conviene) tiene que ganarse el ojo sin necesidad de leer las etiquetas. */
.product-card__tier--wholesale .product-card__tier-price {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--color-success);
}

.product-card__tier-price small {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
}