/* ==========================================================================
   Más Ofertas · tarjeta de producto, grilla y carruseles
   ========================================================================== */

/* --- Tarjeta ------------------------------------------------------------ */
.mo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mo-white);
	border: 1px solid var(--mo-gray-200);
	border-radius: var(--mo-radius);
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.mo-card:hover { border-color: var(--mo-gray-200); box-shadow: var(--mo-shadow); }

.mo-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--mo-gray-50);
	overflow: hidden;
}
.mo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease, transform .35s ease;
}
.mo-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.mo-card--out .mo-card__img { opacity: .55; filter: grayscale(.4); }

.mo-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	flex: 1;
}

.mo-card__title {
	font-family: var(--mo-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
}

/* Precios: viene el HTML de WooCommerce (del + ins). */
.mo-card__price { margin: 0; font-family: var(--mo-display); line-height: 1.2; }
.mo-card__price .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.mo-card__price del {
	order: 2;
	font-family: var(--mo-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--mo-muted);
	text-decoration: line-through;
	opacity: 1;
}
.mo-card__price ins { order: 1; text-decoration: none; background: none; }
.mo-card__price ins,
.mo-card__price .amount { font-size: 19px; color: var(--mo-ink); }
.mo-card__price ins .amount { color: var(--mo-red); }
.mo-card__price .woocommerce-Price-currencySymbol { font-size: .8em; }

.mo-installments { margin: 0; font-size: 12px; color: var(--mo-muted); }

.mo-stock { margin: 0; font-size: 12px; font-weight: 600; }
.mo-stock.is-ok { color: var(--mo-muted); }
.mo-stock.is-low { color: var(--mo-red); }
.mo-stock.is-out { color: var(--mo-ink); }

.mo-card .mo-btn {
	margin-top: auto;
	min-height: 42px;
	padding-inline: 10px;
	font-size: 13.5px;
	white-space: nowrap;
}
.mo-card__add svg { flex: none; display: none; }

@media (min-width: 420px) {
	.mo-card .mo-btn { font-size: 14px; padding-inline: 14px; }
}

@media (hover: hover) {
	.mo-card:hover .mo-card__img--hover { opacity: 1; }
	.mo-card:hover .mo-card__media .mo-card__img { transform: scale(1.03); }
}

/* Las tarjetas mandan sobre cualquier ancho heredado de WooCommerce o de un
   plugin: adentro de la grilla y del carrusel siempre ocupan toda su columna. */
.mo-grid > li.product,
.mo-rail__track > li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* --- Grilla de la tienda ------------------------------------------------ */
.mo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

/* --- Carrusel de sección ------------------------------------------------ */
.mo-rail { position: relative; margin-inline: calc(var(--mo-pad) * -1); }

.mo-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: 12px;
	margin: 0;
	padding: 2px var(--mo-pad) 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mo-rail__track::-webkit-scrollbar { display: none; }
.mo-rail__track > li { scroll-snap-align: start; }

.mo-rail__nav { display: none; }

@media (min-width: 600px) {
	.mo-rail__track { grid-auto-columns: 32%; }
}

@media (min-width: 768px) {
	.mo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.mo-rail { margin-inline: 0; }
	.mo-rail__track { grid-auto-columns: 23.5%; gap: 18px; padding-inline: 0; }

	.mo-rail__nav {
		position: absolute;
		top: 38%;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--mo-gray-200);
		border-radius: 999px;
		background: var(--mo-white);
		box-shadow: var(--mo-shadow-sm);
		cursor: pointer;
		opacity: 0;
		transition: opacity .2s ease;
	}
	.mo-rail:hover .mo-rail__nav,
	.mo-rail__nav:focus-visible { opacity: 1; }
	.mo-rail__nav--prev { left: -18px; }
	.mo-rail__nav--next { right: -18px; }
	.mo-rail__nav:hover { background: var(--mo-ink); color: var(--mo-white); border-color: var(--mo-ink); }
	.mo-rail__nav[disabled] { opacity: 0 !important; pointer-events: none; }

	.mo-card__title { font-size: 15px; }
	.mo-card__add svg { display: block; }
	.mo-card__price ins, .mo-card__price .amount { font-size: 21px; }
}

@media (min-width: 1100px) {
	.mo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La columna lateral de filtros achica la grilla */
.mo-shop__layout .mo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
	.mo-shop__layout .mo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.mo-shop__layout .mo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mo-shop__layout.has-sidebar .mo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}