/* ==========================================================================
   Monissos — estilos del tema (Figma "wireframe alta fidelidad")
   ========================================================================== */

:root {
	/* Paleta de colores (Figma "Paleta de colores") */
	--red-500: #fa3b52;
	--red-400: #ff6c7a;
	--red-300: #ffa1a8;
	--red-200: #ffcbcf;
	--red-50: #fff1f1;
	--red-25: #fff8f8;
	--red-15: #fffbfb;
	--red-900: #a40d2f; /* footer */
	--red-600: #e02a41; /* hover */

	--ink: #1c1c1e;
	--ink-900: #111827;
	--ink-800: #1f2937;
	--ink-700: #212121;
	--ink-600: #303030;
	--gray-700: #374151;
	--gray-600: #616161;
	--gray-500: #6b7280;
	--gray-400: #9ca3af;
	--gray-350: #9e9e9e;
	--line: #e0e0e0;
	--line-2: #d1d5db;
	--line-3: #e5e7eb;
	--bg-soft: #f5f5f5;
	--bg-badge: #f9f9f9;
	--white: #fff;

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-title: "Lora", Georgia, serif;
	--font-display: "Archivo Black", "Arial Black", sans-serif;
	--font-display-sub: "Archivo", "Inter", sans-serif;

	--radius-pill: 25px;
	--radius: 8px;
	--radius-sm: 6px;
	--gutter: 80px;
	--container: 1440px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red-500); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
del { color: var(--gray-400); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.mn-skip:focus {
	clip: auto; width: auto; height: auto;
	top: 8px; left: 8px; z-index: 1000;
	background: var(--white); padding: 8px 12px; border-radius: var(--radius-sm);
}

.mn-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.mn-icon { display: inline-flex; line-height: 0; }
.mn-icon svg { width: auto; height: auto; max-width: 100%; }

/* ---------- Tipografía (estilos de texto de Figma) ---------- */

.mn-h1 { font-family: var(--font-title); font-weight: 600; font-size: 28px; letter-spacing: .01em; color: var(--ink-900); line-height: 1.2; }
.mn-h2 { font-weight: 600; font-size: 22px; letter-spacing: .01em; line-height: 1.2; }
.mn-h2--xl { font-weight: 800; font-size: 28px; color: var(--ink-700); letter-spacing: 0; }
.mn-display { font-family: var(--font-display); font-size: 28px; line-height: 1.15; color: #000; text-transform: uppercase; }
.mn-display-sub { font-family: var(--font-display-sub); font-weight: 500; font-size: 22px; color: var(--ink); }
.mn-upper { text-transform: uppercase; }
.mn-muted { color: var(--gray-500); font-size: 14px; }
.mn-muted-sm { color: rgba(0, 0, 0, .6); font-size: 11px; line-height: 20px; }
.mn-link-muted { font-size: 14px; color: var(--gray-600); }
.mn-accent { color: var(--red-500); }

/* ---------- Botones ("Botón", "Botón pequeño", "Botón secundario") ---------- */

.mn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 50px; padding: 10px 28px;
	border: 0; border-radius: var(--radius-pill);
	background: var(--red-500); color: var(--white);
	font-weight: 600; font-size: 15px; line-height: 1; text-align: center;
	white-space: nowrap;
	transition: background-color .15s ease, transform .15s ease;
}
.mn-btn:hover { background: var(--red-600); color: var(--white); }
.mn-btn:active { transform: translateY(1px); }
.mn-btn--sm { height: 34px; padding: 10px 14px; }
.mn-btn--block { width: 100%; }
.mn-btn--secondary { height: 42px; padding: 10px 20px; background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.mn-btn--secondary:hover { background: var(--bg-soft); color: var(--ink); }
.mn-btn--muted { background: var(--bg-soft); color: var(--gray-600); }
.mn-btn--muted:hover { background: var(--line); color: var(--ink); }
.mn-btn.loading { opacity: .6; pointer-events: none; }
.mn-btn.added::after { content: "✓"; }
.added_to_cart { display: none; }

/* ---------- Botón flotante de WhatsApp (footer.php). Debajo de menús, paneles y ventanas (z-index menor). ---------- */
.mn-whatsapp {
	position: fixed; right: 24px; bottom: 24px; z-index: 40;
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: #25d366; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.mn-whatsapp:hover { background: #1ebe5b; color: #fff; }
.mn-whatsapp:focus-visible { outline: 3px solid #128c7e; outline-offset: 3px; }
@media (max-width: 640px) {
	.mn-whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
	.mn-whatsapp svg { width: 28px; height: 28px; }
}
@media print { .mn-whatsapp { display: none; } }

/* ---------- Aviso "Agregado al carrito" (assets/js/main.js) ---------- */

.mn-toast {
	position: fixed; top: 96px; right: 24px; z-index: 150;
	width: min(360px, calc(100vw - 32px)); padding: 16px;
	background: var(--white); border: 1px solid var(--line-3); border-radius: var(--radius);
	box-shadow: 0 12px 32px rgba(17, 24, 39, .16);
	animation: mn-toast-in .2s ease-out;
}
.mn-toast[hidden] { display: none; }
.mn-toast__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mn-toast__icon {
	display: grid; place-items: center; flex: none; width: 22px; height: 22px;
	border-radius: 50%; background: #05603a; color: var(--white); font-size: 12px; font-weight: 700;
}
.mn-toast.is-error .mn-toast__icon { background: var(--red-500); }
.mn-toast__title { flex: 1; margin: 0; font-weight: 700; font-size: 15px; }
.mn-toast__close { padding: 2px 6px; border: 0; background: none; color: var(--gray-500); font-size: 22px; line-height: 1; cursor: pointer; }
.mn-toast__item { display: flex; align-items: center; gap: 12px; }
.mn-toast__img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-soft); }
.mn-toast__name {
	margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-toast__meta { margin: 0; font-size: 13px; color: var(--gray-600); }
.mn-toast.is-error .mn-toast__meta { color: var(--red-900); }
.mn-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mn-toast__actions .mn-btn { height: 38px; padding: 8px 12px; font-size: 14px; }
.mn-toast.is-error .mn-toast__actions { display: none; }
.mn-toast__actions:empty, .mn-toast__name:empty { display: none; }
.mn-toast__actions--single { grid-template-columns: 1fr; }

/* Carrito sin recargar: el producto eliminado se desvanece y el resumen se atenúa mientras se recalcula. */
.mn-cart-item.is-removing { opacity: 0; transition: opacity .15s ease; }
.mn-cart__summary .mn-summary { transition: opacity .15s ease; }
.mn-cart__summary.is-updating .mn-summary { opacity: .5; }
@keyframes mn-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mn-header__cart.is-bumping .mn-cart-count { animation: mn-bump .35s ease-out; }
@keyframes mn-bump { 40% { transform: scale(1.35); } }

@media (max-width: 640px) {
	.mn-toast { top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; }
}

/* ---------- Formularios ("Formulario") ---------- */

.mn-input {
	width: 100%; height: 44px; padding: 10px 14px;
	background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius);
	font-size: 14px; font-weight: 500;
}
.mn-input:focus { border-color: var(--red-400); outline: 0; box-shadow: 0 0 0 3px var(--red-50); }
/* Dropdowns: own arrow 14px in from the border (the browser's arrow sits against it and ignores padding). */
select.mn-input {
	appearance: none; -webkit-appearance: none; padding-right: 44px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
}
.mn-input--area { height: auto; min-height: 170px; resize: vertical; }
.mn-field { display: grid; gap: 10px; margin-bottom: 24px; }
.mn-field__label { font-weight: 500; font-size: 18px; }
.mn-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mn-hp { position: absolute; left: -9999px; }

.mn-panel { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); }

.mn-notice { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 14px; margin-bottom: 16px; }
.mn-notice--ok { background: #ecfdf3; color: #05603a; }
.mn-notice--error { background: var(--red-50); color: var(--red-900); }

.mn-rule { border: 0; border-top: 1px solid var(--line-2); margin: 20px 0 28px; }

/* ==========================================================================
   Header
   ========================================================================== */

.mn-header { position: relative; z-index: 50; background: var(--white); }

.mn-header__bar {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	min-height: 80px; padding-inline: 70px;
}
.mn-header__user { display: flex; align-items: center; gap: 13px; }
.mn-header__link { padding: 10px; font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: .01em; color: #000; }
.mn-header__divider { width: 1px; height: 39px; background: var(--line-2); }
.mn-header__icon { position: relative; padding: 10px; }
.mn-header__icon img { width: 30px; height: 30px; object-fit: contain; }
.mn-cart-count {
	position: absolute; top: 2px; right: 0;
	min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px; background: var(--red-500); color: var(--white);
	font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.mn-cart-count.is-empty { display: none; }
.mn-header__logo { justify-self: center; padding: 10px; }
.mn-header__logo img { width: 61px; height: auto; }

.mn-search {
	justify-self: end;
	display: flex; align-items: center; gap: 8px;
	width: 400px; max-width: 100%; height: 40px; padding: 0 4px 0 16px;
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mn-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; }
.mn-search input::placeholder { color: var(--gray-350); }
.mn-search input:focus { outline: 0; }
.mn-search button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 4px; background: var(--line); }
.mn-search button svg { width: 18px; height: 18px; }

.mn-nav { background: var(--red-500); border-bottom: 1px solid var(--line); }
.mn-nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.mn-nav__menu, .mn-nav__spacer { display: grid; place-items: center; width: 32px; height: 32px; background: none; border: 0; }
.mn-nav__menu svg { width: 15px; height: 15px; }
.mn-nav__links { display: flex; flex: 1; justify-content: space-evenly; gap: 24px; }
.mn-nav__links a { color: var(--white); font-weight: 600; font-size: 14px; text-transform: uppercase; white-space: nowrap; }
.mn-nav__links a:hover { color: var(--red-50); text-decoration: underline; text-underline-offset: 4px; }

/* "Marcas": sin clic; en escritorio abre con hover un panel bajo la barra roja (estilo Crate & Barrel) con
   todas las marcas (logo + nombre); en celular, al tocarlo, se abre a pantalla completa con una X. */
.mn-nav { position: relative; }
.mn-nav__brands {
	padding: 0; border: 0; background: none; cursor: default;
	color: var(--white); font: 600 14px var(--font-body); text-transform: uppercase; white-space: nowrap;
}
.mn-nav__brands:hover, .mn-nav__brands[aria-expanded="true"] { color: var(--red-50); text-decoration: underline; text-underline-offset: 4px; }
.mn-brands { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding-inline: var(--gutter); pointer-events: none; }
.mn-brands__panel {
	max-width: calc(var(--container) - 2 * var(--gutter)); max-height: calc(100vh - 160px); margin-inline: auto; pointer-events: auto;
	padding: 28px 40px 32px; overflow-y: auto; background: var(--white);
	box-shadow: 0 12px 28px rgba(17, 24, 39, .14); animation: mn-pop .15s ease-out;
}
.mn-brands__head { display: none; }
.mn-brands__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; }
.mn-brands__item { display: grid; justify-items: center; gap: 8px; text-align: center; }
.mn-brands__logo {
	display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden;
	border: 1px solid var(--line-3); border-radius: var(--radius); background: var(--white);
	transition: border-color .15s ease, transform .15s ease;
}
.mn-brands__logo img { width: 100%; height: 100%; object-fit: cover; }
.mn-brands__logo--name { padding: 4px; background: var(--bg-soft); color: var(--ink); font-weight: 700; font-size: 12px; line-height: 1.25; text-transform: uppercase; overflow-wrap: anywhere; }
.mn-brands__item:hover .mn-brands__logo { border-color: var(--red-400); transform: translateY(-2px); }
.mn-brands__item.is-active .mn-brands__logo { outline: 2px solid var(--red-500); outline-offset: 2px; }
.mn-brands__name { font-weight: 500; font-size: 13px; color: var(--ink-600); text-transform: uppercase; }

@media (max-width: 1024px), (hover: none) {
	.mn-nav__brands { cursor: pointer; }
	.mn-brands { position: fixed; inset: 0; z-index: 100; padding: 0; pointer-events: auto; }
	.mn-brands__panel { max-width: none; max-height: none; height: 100%; padding: 0 0 32px; animation: none; box-shadow: none; }
	.mn-brands__head {
		position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
		padding: 18px 20px 18px 24px; border-top: 4px solid var(--red-500); background: var(--bg-soft);
		font-weight: 700; font-size: 20px;
	}
	.mn-brands__head button { background: none; border: 0; padding: 4px; cursor: pointer; }
	.mn-brands__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 20px 12px; padding: 20px 16px 0; }
	.mn-brands__logo { width: 84px; height: 84px; }
	.mn-brands__logo--name { font-size: 11px; }
	.mn-brands__name { font-size: 12px; }
}

.mn-delivery { background: var(--white); }
.mn-delivery .mn-container { display: flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink-600); }
.mn-delivery .mn-icon svg { width: 24px; height: 24px; }
.mn-delivery__label { font-weight: 500; font-size: 14px; }
.mn-delivery__value { font-size: 16px; }

/* Menú hamburguesa, estilo Falabella (template-parts/drawer.php): panel de categorías a la izquierda y, en
   escritorio, el panel de cada categoría a su derecha; en celular, navegación por niveles con "Volver". */
.mn-drawer { position: fixed; inset: 0; z-index: 100; }
.mn-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.mn-drawer__panel {
	position: absolute; inset: 0 auto 0 0; width: 300px;
	display: flex; flex-direction: column; background: var(--white); overflow-y: auto;
	animation: mn-slide-in .2s ease-out;
}
.mn-drawer__head {
	display: flex; justify-content: space-between; align-items: center; flex: none;
	padding: 18px 20px 18px 24px; border-top: 4px solid var(--red-500); background: var(--bg-soft);
	font-weight: 700; font-size: 20px;
}
.mn-drawer__head button { background: none; border: 0; padding: 4px; cursor: pointer; }
.mn-menu__list { list-style: none; margin: 0; padding: 10px 12px; }
.mn-menu__item {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px;
	padding: 0 12px 0 14px; border: 0; border-left: 4px solid transparent; border-radius: 4px;
	background: none; color: var(--ink); font: 500 16px/1.3 var(--font-body); text-align: left; cursor: pointer;
}
.mn-menu__item .mn-icon svg { width: 16px; height: 16px; }
.mn-menu__item:hover, .mn-menu__item.is-active { background: var(--red-50); border-left-color: var(--red-500); font-weight: 600; }
.mn-menu__links { list-style: none; display: grid; gap: 14px; margin: 4px 24px 28px; padding: 18px 0 0; border-top: 1px solid var(--line-3); font-size: 14px; }
.mn-menu__links a { color: var(--ink-600); }
.mn-menu__links a:hover { color: var(--red-500); }

.mn-mega {
	position: absolute; top: 0; bottom: 0; left: 300px; width: min(900px, calc(100vw - 340px));
	padding: 24px 32px 40px; overflow-y: auto; background: var(--white);
	border-radius: 0 16px 16px 0; box-shadow: 8px 0 24px rgba(0, 0, 0, .12);
	animation: mn-pop .15s ease-out;
}
.mn-mega__back { display: none; }
.mn-mega__head {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 14px 28px; border-radius: var(--radius-pill); background: var(--red-500); color: var(--white);
}
.mn-mega__title { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.2; }
.mn-mega__all { flex: none; color: var(--white); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.mn-mega__all:hover { color: var(--white); opacity: .85; }
.mn-mega__body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; margin-top: 24px; align-items: start; }
.mn-mega__body:not(:has(.mn-mega__brands)) { grid-template-columns: minmax(0, 1fr); }
.mn-mega__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mn-mega__item {
	display: grid; justify-items: center; gap: 6px; height: 100%; padding: 14px 10px;
	border: 1px solid var(--line-3); border-radius: var(--radius); text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mn-mega__item:hover { border-color: var(--red-400); box-shadow: 0 6px 18px rgba(17, 24, 39, .08); }
.mn-mega__img { width: 96px; height: 96px; }
.mn-mega__img img { width: 100%; height: 100%; object-fit: contain; }
.mn-mega__name { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); }
.mn-mega__count { font-size: 12px; color: var(--gray-500); }
.mn-mega__brands { padding-left: 24px; border-left: 1px solid var(--line-3); }
.mn-mega__label { margin: 0 0 14px; font-weight: 700; font-size: 18px; }
.mn-mega__brands ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; font-size: 14px; }
.mn-mega__brands a { color: var(--ink-600); }
.mn-mega__brands a:hover { color: var(--red-500); }

/* Celular y tablet: el panel de la categoría reemplaza a la lista, con "Volver". */
@media (max-width: 1024px), (hover: none) {
	.mn-drawer__panel, .mn-mega { width: min(360px, 88vw); }
	.mn-mega { left: 0; padding: 16px 16px 32px; border-radius: 0; box-shadow: none; animation: mn-slide-in .18s ease-out; }
	.mn-mega__back {
		display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 6px 0;
		border: 0; background: none; color: var(--red-500); font: 600 15px var(--font-body); cursor: pointer;
	}
	.mn-mega__back .mn-icon svg { width: 16px; height: 16px; }
	.mn-mega__head { padding: 12px 20px; }
	.mn-mega__title { font-size: 19px; }
	.mn-mega__body { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 12px; }
	.mn-mega__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mn-mega__item {
		grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 12px;
		padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line-3); border-radius: 0; text-align: left;
	}
	.mn-mega__item:hover { box-shadow: none; }
	.mn-mega__img { width: 56px; height: 56px; }
	.mn-mega__brands { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line-3); }
}
@keyframes mn-slide-in { from { transform: translateX(-100%); } to { transform: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */

.mn-footer { background: var(--red-900); color: var(--white); padding: 44px 0 30px; margin-top: 80px; }
.mn-home .mn-footer, .mn-catalog + .mn-footer { margin-top: 0; }
.mn-footer a { color: var(--white); }
.mn-footer a:hover { color: var(--red-200); }
.mn-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.mn-footer__logo img { width: 244px; }
.mn-footer__col { display: grid; gap: 12px; padding-top: 58px; }
.mn-footer__col h2 { font-weight: 800; font-size: 24px; }
.mn-footer__col a { font-weight: 600; font-size: 16px; }
.mn-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .35);
	font-size: 16px;
}
.mn-footer__bottom .mn-container { border: 0; }
.mn-footer__social { display: inline-flex; align-items: center; gap: 14px; }
.mn-footer__social svg { width: 24px; height: 17px; }
.mn-footer__social svg path { fill: var(--white); }
/* Desktop spacing as in Figma "Footer" (1440×400): logo 20px lower, links ~31px apart, the divider well
   below the links. The divider and the bottom row start and end at the content edge, like the logo. */
@media (min-width: 1025px) {
	.mn-footer { padding: 64px 0 21px; }
	.mn-footer__col { padding-top: 38px; }
	.mn-footer__col h2, .mn-footer__col a { line-height: 1.2; }
	.mn-footer__bottom {
		position: relative; margin-top: 42px; padding: 18px var(--gutter) 0; border-top: 0;
	}
	.mn-footer__bottom::before {
		content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
		border-top: 1px solid rgba(255, 255, 255, .35);
	}
}

/* ==========================================================================
   Tarjeta de producto ("Crads de descuento")
   ========================================================================== */

.mn-grid { display: grid; gap: 24px; }
.mn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mn-card {
	display: flex; flex-direction: column;
	background: var(--white); border-radius: 4px; overflow: hidden;
	transition: box-shadow .2s ease;
}
.mn-card:hover { box-shadow: 0 8px 24px rgba(17, 24, 39, .08); }
.mn-card__media { position: relative; height: 220px; background: var(--white); overflow: hidden; }
.mn-card__slides { position: absolute; inset: 8px; display: block; touch-action: pan-y; }
.mn-card__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Card photo carousel (like crateandbarrel.com.pe): slides move in from the side you clicked. */
.mn-card__slide { opacity: 0; transform: translateX(100%); }
.mn-card__slide.is-active { opacity: 1; transform: none; z-index: 1; }
.mn-card__slide.is-entering-next, .mn-card__slide.is-entering-prev { opacity: 1; z-index: 1; }
.mn-card__slide.is-entering-prev { transform: translateX(-100%); }
.mn-card__slide.is-leaving-next { opacity: 1; transform: translateX(-100%); }
.mn-card__slide.is-leaving-prev { opacity: 1; transform: translateX(100%); }
.mn-card__media.is-animating .mn-card__slide { transition: transform .35s ease; }
.mn-card__media.is-animating .mn-card__slide.is-entering-next,
.mn-card__media.is-animating .mn-card__slide.is-entering-prev { transform: none; }

.mn-card__arrow {
	position: absolute; top: 50%; z-index: 2;
	display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(60, 60, 60, .55); color: var(--white);
	transform: translateY(-50%); cursor: pointer;
	opacity: 0; visibility: hidden; transition: opacity .2s ease, background-color .15s ease, visibility 0s linear .2s;
}
.mn-card__arrow:hover { background: rgba(30, 30, 30, .75); }
.mn-card__arrow--prev { left: 8px; }
.mn-card__arrow--next { right: 8px; }
.mn-card__arrow svg { width: 18px; height: 18px; }
.mn-card__arrow svg path { stroke: currentColor; }
.mn-card:hover .mn-card__arrow, .mn-card:has(:focus-visible) .mn-card__arrow { opacity: 1; visibility: visible; transition: opacity .2s ease, background-color .15s ease, visibility 0s; }
/* Touch screens (phones, tablets): only the main photo, no carousel. The other photos aren't even
   rendered, so nothing can stick out of the card. */
@media (hover: none) {
	.mn-card__arrow { display: none; }
	.mn-card__slide:not(.is-active) { display: none; }
	.mn-card__slides { touch-action: auto; }
}
.mn-card__body { display: flex; flex-direction: column; flex: 1; padding: 13px 18px 18px; }
.mn-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.mn-card__brand { font-size: 11px; line-height: 20px; color: #000; }
.mn-card__title { margin: 6px 0; font-weight: 500; font-size: 14px; line-height: 1.3; color: #000; }
.mn-card__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Product names keep their color on hover (the global a:hover turns links red). */
.mn-card__title a:hover { color: inherit; }
.mn-mini__title:hover { color: var(--ink-700); }
.mn-card__price { display: flex; align-items: center; gap: 6px; }
.mn-price { font-weight: 700; font-size: 16px; color: var(--red-500); }
.mn-regular { font-weight: 500; font-size: 14px; }
.mn-regular--sm { font-size: 12px; }
.mn-discount {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; padding: 4px 8px; border-radius: var(--radius-sm);
	background: var(--red-500); color: var(--white); font-weight: 600; font-size: 11px;
}
.mn-discount--lg { padding: 10px; }
.mn-badge {
	align-self: flex-start; margin-top: 10px; padding: 10px;
	border-radius: var(--radius-sm); background: var(--bg-badge);
	color: var(--red-500); font-weight: 600; font-size: 11px; line-height: 1;
}
.mn-badge--outline { margin: 0; background: var(--white); border: 1px solid var(--line-2); }
.mn-card__cta { margin-top: auto; padding-top: 16px; }

/* With a mouse, "Añadir al carrito" appears when the pointer enters the card (or a keyboard user
   tabs into it). Its space stays reserved so the grid doesn't jump. Touch screens always show it.
   :has(:focus-visible) instead of :focus-within: a mouse click on the arrows or the button focuses
   them too, and the controls would stay visible after the pointer leaves. */
@media (hover: hover) and (pointer: fine) {
	.mn-card__cta {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.mn-card:hover .mn-card__cta,
	.mn-card:has(:focus-visible) .mn-card__cta {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .2s ease, transform .2s ease, visibility 0s;
	}
}
.mn-card.is-out-of-stock .mn-card__media { opacity: .5; }

/* Home "Más Vendidos" card (Figma "Cards de 'mas vendidos'", 410×342): photo, name, price and button,
   12px apart inside 12px of padding. Hover shadow, carousel and button reveal come from .mn-card. */
.mn-card--best { gap: 12px; padding: 12px; }
.mn-card--best .mn-card__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.mn-card--best .mn-card__title { margin: 0; line-height: normal; }
.mn-card--best .mn-card__title a { display: block; -webkit-line-clamp: none; white-space: nowrap; text-overflow: ellipsis; }
.mn-card--best .mn-card__price .mn-price { color: #000; line-height: normal; }
.mn-card--best .mn-card__cta { margin-top: 0; padding-top: 0; }

.mn-fav { display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; padding: 0; border: 0; background: none; color: var(--ink); }
.mn-fav svg { width: 16px; height: 16px; }
.mn-fav:hover svg path, .mn-fav.is-active svg path { fill: var(--red-500); }

/* ==========================================================================
   Home
   ========================================================================== */

.mn-hero__slide {
	display: flex; align-items: center; min-height: 480px;
	background-size: cover; background-position: center;
}
.mn-hero__content {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	width: 454px; max-width: 100%; padding: 24px; text-align: center;
}
.mn-hero__content .mn-display-sub { max-width: 260px; }

.mn-partners { border-bottom: 1px solid var(--line); }
.mn-partners__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.mn-partners__item { display: grid; place-items: center; width: 160px; height: 50px; }
/* Same box for every logo (4:1, like the 400 × 100 px files): none looks bigger or gets cropped. */
.mn-partners__item img { width: 100%; height: 40px; object-fit: contain; }
/* Marca sin logo: su nombre en texto. */
.mn-partners__item--name { width: auto; min-width: 160px; padding: 0 8px; color: var(--gray-600); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mn-partners__item--name:hover { color: var(--ink); }
/* When the logos don't fit (phones, tablets), main.js turns the row into an infinite carousel. Each logo
   carries its own right spacing, so the second copy starts exactly halfway and the loop has no seam. */
.mn-partners__row.is-marquee { overflow: hidden; justify-content: flex-start; gap: 0; }
.mn-partners__track { display: flex; align-items: center; width: max-content; animation: mn-marquee var(--marquee-time, 20s) linear infinite; }
.mn-partners__track .mn-partners__item { margin-right: 24px; }
.mn-partners__row.is-marquee:hover .mn-partners__track,
.mn-partners__row.is-marquee:focus-within .mn-partners__track,
.mn-partners__row.is-paused .mn-partners__track { animation-play-state: paused; }
@keyframes mn-marquee { to { transform: translateX(-50%); } }

.mn-section { padding-top: 60px; padding-bottom: 32px; }
.mn-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }

.mn-flyers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 60px; }
.mn-flyer {
	display: flex; align-items: flex-start; min-height: 315px; padding: 40px;
	border-radius: var(--radius); background-size: cover; background-position: center;
}
.mn-flyer__content { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mn-flyer .mn-display-sub { font-size: 24px; }

.mn-arrivals { background: var(--bg-soft); border-block: 1px solid var(--line); padding: 60px 0; }
.mn-arrivals .mn-h2 { margin-bottom: 32px; }
.mn-arrivals__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mn-arrivals__feature { margin: 0; }
.mn-arrivals__feature img, .mn-arrivals__feature video { display: block; width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-sm); }
.mn-arrivals__media { display: block; }

/* Carousel of lines: slides share one grid cell (the section takes the tallest) and fade in and out. */
.mn-arrivals__slides { display: grid; }
.mn-arrivals__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.mn-arrivals__slide.is-active { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.mn-arrivals__feature figcaption { margin-top: 16px; font-weight: 500; font-size: 14px; color: var(--ink-700); }
.mn-arrivals__list { display: grid; gap: 16px; align-content: start; }
/* Desktop: the 3 products span the photo's height — first at its top, one in the middle, last at its bottom. */
@media (min-width: 1025px) {
	.mn-arrivals__list { height: 460px; align-content: space-between; }
}
.mn-mini {
	display: flex; align-items: center; gap: 16px; min-height: 132px; padding: 16px;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mn-mini.is-hidden { display: none; }
.mn-mini__img { flex: 0 0 100px; height: 100px; border: 1px solid var(--line); }
.mn-mini__img img { width: 100%; height: 100%; object-fit: contain; }
.mn-mini__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mn-mini__title { font-weight: 600; font-size: 14px; color: var(--ink-700); }
.mn-mini__price { font-weight: 700; font-size: 14px; color: var(--gray-600); margin-bottom: 8px; }
.mn-pager-arrows { display: flex; justify-content: center; gap: 16px; margin: 16px 0 50px; }
.mn-pager-arrows button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; }
.mn-pager-arrows button:disabled { opacity: .3; cursor: default; }

.mn-banner {
	display: flex; align-items: center; background-size: cover; background-position: center;
	color: #000;
}
.mn-banner--tall { min-height: 543px; padding: 10px 40px; }
.mn-banner--full { min-height: 367px; }
.mn-banner__content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 430px; max-width: 100%; text-align: center; }
.mn-banner__content--glass { padding: 38px 47px 29px; background: rgba(255, 255, 255, .15); backdrop-filter: blur(2px); }
.mn-banner:hover { color: #000; }
/* Banners from wp-admin → Banners del home: finished artwork shown whole, at its own proportions. */
.mn-home-banner { display: block; }
.mn-home-banner img { display: block; width: 100%; height: auto; }
/* Banner under "Recién Llegado": always 10px rounded corners, built-in design or uploaded image. */
.mn-banner--tall, .mn-home-banner--vajillas { border-radius: 10px; overflow: hidden; }
.mn-banner:hover .mn-btn { background: var(--red-600); }

/* ==========================================================================
   Catálogo
   ========================================================================== */

.mn-catalog { background: var(--bg-soft); padding: 40px 0 80px; }
.mn-catalog + .mn-footer { margin-top: 0; }

.mn-tiles {
	display: flex; align-items: center; gap: 16px; padding: 16px;
	background: var(--white); border: 1px solid var(--line-3); border-radius: var(--radius);
	margin-bottom: 24px;
}
.mn-tiles__arrow { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; }
.mn-tiles__arrow:hover { background: var(--bg-soft); }
.mn-tiles__arrow svg { width: 10px; height: 18px; }
.mn-tiles__track, .mn-scroller__track, .mn-testimonials__track {
	display: flex; gap: 24px; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; scroll-behavior: smooth;
}
.mn-tiles__track::-webkit-scrollbar, .mn-scroller__track::-webkit-scrollbar, .mn-testimonials__track::-webkit-scrollbar { display: none; }
.mn-tile { flex: 0 0 130px; display: flex; flex-direction: column; align-items: center; gap: 15px; scroll-snap-align: start; }
.mn-tile__img { width: 130px; height: 130px; border-radius: var(--radius); overflow: hidden; transition: transform .2s ease; }
.mn-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.mn-tiles--types .mn-tile__img img { object-fit: contain; }
.mn-tile:hover .mn-tile__img { transform: translateY(-3px); }
.mn-tile__label { font-weight: 500; font-size: 14px; letter-spacing: .01em; text-transform: uppercase; text-align: center; color: #000; }
.mn-tile.is-active .mn-tile__img { outline: 3px solid var(--red-500); outline-offset: 2px; }
/* Marca sin logo: tarjeta con el nombre. */
.mn-tile__img--name {
	display: grid; place-items: center; padding: 10px; border: 1px solid var(--line-3); background: var(--bg-soft);
	color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.25; text-align: center; text-transform: uppercase; overflow-wrap: anywhere;
}

.mn-catalog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 16px 0 24px; }
.mn-catalog__title { display: grid; gap: 2px; font-weight: 400; }
.mn-catalog__subtitle { font-weight: 600; font-size: 22px; color: var(--ink-900); }
.mn-catalog__count { margin-top: 12px; font-size: 14px; color: var(--gray-500); }

.mn-sort select {
	appearance: none; height: 46px; padding: 12px 48px 12px 16px;
	background: var(--white) url("../icons/chevron-down.svg") no-repeat right 14px center / 16px;
	border: 1px solid var(--line-2); border-radius: 16px;
	font-weight: 600; font-size: 15px; color: #000; cursor: pointer;
}

.mn-catalog__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.mn-catalog__filters-toggle { display: none; }

.mn-filters { display: grid; gap: 24px; position: sticky; top: 16px; }
.mn-filter summary {
	display: flex; justify-content: space-between; align-items: center;
	list-style: none; cursor: pointer;
	font-weight: 700; font-size: 16px; color: var(--ink-800);
}
.mn-filter summary::-webkit-details-marker { display: none; }
.mn-filter summary::after {
	content: ""; width: 16px; height: 16px;
	background: url("../icons/chevron-down.svg") no-repeat center / 16px;
	transition: transform .15s ease;
}
.mn-filter[open] summary::after { transform: rotate(180deg); }
.mn-filter--line { border-bottom: 1px solid var(--line-3); padding-bottom: 12px; }
.mn-filter__search {
	width: 201px; height: 38px; margin-top: 12px; padding: 0 30px 0 12px;
	border: 1px solid var(--line-2); border-radius: var(--radius);
	background: var(--white) url("../icons/search-small.svg") no-repeat right 12px center / 10px;
	font-weight: 800; font-size: 14px; color: var(--gray-600);
}
.mn-filter__search::placeholder { color: var(--gray-600); }
.mn-filter__list { display: grid; gap: 12px; margin-top: 12px; }
.mn-filter__list label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-700); cursor: pointer; }
.mn-filter__list label span { color: var(--gray-400); font-size: 12px; }
.mn-filter__list input[type="checkbox"] {
	appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 0;
	border: 2px solid var(--gray-400); border-radius: 2px; background: var(--white); cursor: pointer;
}
.mn-filter__list input[type="checkbox"]:checked {
	border-color: var(--red-500);
	background: var(--red-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5 5 9l4.5-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.mn-filter__list.is-collapsed li:nth-child(n + 9) { display: none; }
.mn-filter__more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--red-500); font-weight: 600; font-size: 13px; }
.mn-filters__clear { font-weight: 600; color: var(--red-500); }

.mn-catalog .mn-card { min-height: 435px; }

.mn-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.mn-pagination__btn {
	display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px;
	border: 1px solid var(--line-2); border-radius: 23px; background: var(--white);
	font-weight: 600; font-size: 15px;
}
.mn-pagination__btn.is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.mn-pagination__btn svg { width: 24px; height: 24px; }
.mn-pagination__gap { color: var(--gray-400); }

.mn-empty { display: grid; justify-items: center; gap: 16px; padding: 80px 20px; text-align: center; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.mn-product { padding-top: 20px; }
.mn-product__top { display: grid; grid-template-columns: minmax(0, 1fr) 552px; gap: 20px; align-items: start; }

.mn-gallery { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 26px; }
.mn-gallery__thumbs { display: grid; gap: 8px; align-content: start; max-height: 520px; overflow-y: auto; }
.mn-gallery__thumb { width: 78px; height: 78px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.mn-gallery__thumb.is-active { border-color: var(--red-500); }
.mn-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mn-gallery__main { display: grid; place-items: center; min-height: 440px; }
.mn-gallery__main img { max-height: 520px; width: auto; object-fit: contain; }
.mn-gallery:not(:has(.mn-gallery__thumbs)) { grid-template-columns: 1fr; }
/* Zoom al pasar el mouse: la "lupa" cubre la foto con el original ampliado (ver main.js). */
.mn-zoom { position: relative; display: block; max-width: 100%; overflow: hidden; }
.mn-zoom[hidden] { display: none; }
.mn-zoom.is-zoomable { cursor: zoom-in; }
.mn-zoom__lens { position: absolute; inset: 0; background: var(--white) no-repeat; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.mn-zoom.is-zooming .mn-zoom__lens { opacity: 1; }
/* Video de YouTube: miniatura con ▶ al final de las fotos; al tocarla, el reproductor reemplaza la foto grande. */
.mn-gallery__thumb--video { position: relative; padding: 0; overflow: hidden; background: #000; }
.mn-gallery__thumb--video img { object-fit: cover; opacity: .85; }
.mn-gallery__play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .65); }
.mn-gallery__play::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.mn-gallery__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.mn-gallery__video iframe { display: block; width: 100%; height: 100%; border: 0; }

.mn-buybox { padding: 35px; background: var(--white); }
.mn-buybox__brand { font-size: 16px; color: #000; }
.mn-buybox__title { margin-top: 4px; font-family: var(--font-title); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: .01em; color: #000; }
.mn-buybox__sku { font-size: 11px; line-height: 20px; color: #3b3b3b; }
.mn-buybox__price { display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.mn-buybox__amount { font-family: var(--font-title); font-weight: 600; font-size: 28px; color: var(--red-500); }
.mn-buybox__regular { display: block; font-size: 11px; line-height: 20px; color: var(--gray-600); }
.mn-buybox__specs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 16px;
	font-size: 11px; line-height: 20px; color: #000;
}
.mn-buybox__specs li { position: relative; padding-left: 12px; }
.mn-buybox__specs li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #000; }
.mn-buybox__form { margin-top: 28px; display: grid; gap: 12px; }
.mn-buybox__form .mn-rule { margin: 8px 0 16px; }

.mn-qty-row { display: flex; align-items: center; gap: 20px; }
.mn-qty-row__label { font-weight: 700; font-size: 16px; color: var(--ink); }
.mn-qty { display: inline-flex; align-items: center; gap: 12px; }
.mn-qty__btn { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--white); font-weight: 600; font-size: 15px; }
.mn-qty__btn:hover { background: var(--bg-soft); }
.mn-qty__input { width: 36px; border: 0; text-align: center; font-weight: 600; font-size: 15px; -moz-appearance: textfield; }
.mn-qty__input::-webkit-outer-spin-button, .mn-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mn-product__bottom { display: grid; grid-template-columns: minmax(0, 855px) minmax(300px, 1fr); gap: 40px; margin-top: 30px; align-items: start; }
.mn-accordions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 21px; }
.mn-accordion { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); }
.mn-accordion summary {
	display: flex; justify-content: space-between; align-items: center; min-height: 47px; padding: 12px 18px;
	list-style: none; cursor: pointer; font-weight: 500; font-size: 14px;
}
.mn-accordion summary::-webkit-details-marker { display: none; }
.mn-accordion summary::after { content: ""; width: 24px; height: 24px; background: url("../icons/chevron-down.svg") no-repeat center / 16px; transition: transform .15s ease; }
.mn-accordion[open] summary::after { transform: rotate(180deg); }
.mn-accordion__body { padding: 4px 18px 22px; font-size: 13px; line-height: 1.6; }
.mn-specs { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; margin: 0; }
.mn-specs dt, .mn-specs dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line-3); }
.mn-specs dt { font-weight: 600; color: var(--gray-700); padding-right: 16px; }

/* Imported descriptions: long words break and wide tables scroll inside their own box, never the page. */
.mn-prose { overflow-wrap: anywhere; }
.mn-prose table { display: block; max-width: 100%; overflow-x: auto; }
.mn-prose p { margin-bottom: 12px; }
.mn-prose ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.mn-prose h1, .mn-prose h2, .mn-prose h3 { margin: 16px 0 8px; font-size: 15px; }
.mn-video { position: relative; aspect-ratio: 16 / 9; max-width: 560px; margin: 16px 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.mn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mn-delivery-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mn-delivery-box__title { font-weight: 500; font-size: 22px; }
.mn-delivery-box__method { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.mn-delivery-box__method svg { width: 28px; height: 21px; }
.mn-delivery-box__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.mn-delivery-box__pay-title { font-weight: 600; font-size: 18px; }
.mn-delivery-box__pay { display: flex; gap: 22px; align-items: center; }

.mn-related { margin-top: 80px; }
.mn-related .mn-h2 { font-weight: 700; margin-bottom: 24px; }
.mn-scroller { display: flex; align-items: center; gap: 10px; }
.mn-scroller .mn-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }

/* ==========================================================================
   Carrito / Checkout
   ========================================================================== */

.mn-page { padding-top: 34px; }
.mn-page--wc { padding-bottom: 20px; }
.mn-page__title { margin-bottom: 24px; }

.mn-cart { display: grid; grid-template-columns: minmax(0, 785px) minmax(0, 467px); justify-content: space-between; gap: 40px; align-items: start; }
.mn-cart__title { display: grid; font-weight: 600; font-size: 22px; margin-bottom: 50px; }
.mn-cart__title span { color: var(--gray-600); }
.mn-cart__items { padding: 0; overflow: hidden; }
.mn-cart__items-head { padding: 20px; border-bottom: 1px solid var(--line-2); font-weight: 600; font-size: 18px; }
.mn-cart-item { display: grid; grid-template-columns: 217px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px; }
.mn-cart-item + .mn-cart-item { border-top: 1px solid var(--line-3); }
.mn-cart-item__img img { width: 100%; height: 138px; object-fit: contain; }
.mn-cart-item__info { display: grid; gap: 4px; }
.mn-cart-item__name { font-weight: 600; font-size: 18px; }
.mn-cart-item__actions { display: grid; justify-items: end; gap: 12px; }
.mn-cart-item__icons { display: flex; gap: 20px; }
.mn-cart-item__icons svg { width: 20px; height: 20px; }
.mn-cart-item__remove { display: grid; place-items: center; width: 28px; height: 28px; }
.mn-cart-item__max { font-size: 11px; color: var(--gray-600); }
.mn-cart__update { display: none; }
.no-js .mn-cart__update { display: block; margin: 0 20px 20px; }
/* "¿Tienes un cupón de descuento?" folded under the totals (template-parts/coupon.php). */
.mn-coupon-box { margin: -8px 0 24px; border-bottom: 1px solid var(--line-2); }
.mn-coupon-box summary {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 16px;
	font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer; list-style: none;
}
.mn-coupon-box summary::-webkit-details-marker { display: none; }
.mn-coupon-box summary::after {
	content: ""; flex: 0 0 14px; height: 14px; transition: transform .15s ease;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
.mn-coupon-box[open] summary::after { transform: rotate(180deg); }
.mn-coupon-box summary:hover { color: var(--red-500); }
.mn-coupon { display: flex; gap: 12px; padding-bottom: 16px; }
.mn-coupon .mn-input { flex: 1; min-width: 0; height: 42px; text-transform: uppercase; }
.mn-coupon .mn-input::placeholder { text-transform: none; }
.mn-coupon-box__msg { margin: -8px 0 16px; font-size: 13px; color: var(--gray-600); }
.mn-coupon-box__msg:empty { display: none; }
.mn-coupon-box__msg.is-error { color: var(--red-500); }
.mn-summary__row small a { color: var(--red-500); text-decoration: underline; }

.mn-promo {
	display: flex; align-items: center; min-height: 204px; margin-top: 50px; padding: 40px 59px;
	border-radius: var(--radius); background-size: cover; background-position: center; color: #000;
}
.mn-promo .mn-display { max-width: 377px; text-align: center; text-transform: none; }
.mn-promo em { font-style: normal; color: var(--red-500); }

.mn-cart__aside { position: sticky; top: 16px; padding-top: 60px; }
.mn-cart__aside .mn-h2, .mn-checkout__aside .mn-h2 { margin-bottom: 24px; }
.mn-cart__summary { padding: 16px 32px 28px; }

.mn-summary { margin-bottom: 24px; }
.mn-summary__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line-2); font-size: 18px; }
.mn-summary__row span { font-weight: 500; }
.mn-summary__row small { display: block; font-size: 11px; font-weight: 400; color: var(--gray-600); }
.mn-summary__minus { color: var(--red-500); }
.mn-summary__total { border-bottom: 0; }

.mn-steps { display: flex; justify-content: space-between; max-width: 960px; margin: 40px auto 56px; position: relative; }
.mn-steps::before { content: ""; position: absolute; top: 12px; left: 26px; right: 26px; height: 2px; background: #6b6b6b; }
.mn-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.mn-steps a { display: grid; justify-items: center; gap: 6px; }
.mn-steps span {
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--white); border: 1px solid #6b6b6b; font-size: 15px; font-weight: 600;
}
.mn-steps .is-done span { background: #555; border-color: #555; color: var(--white); }
.mn-steps .is-current span { background: var(--red-500); border-color: var(--red-500); color: var(--white); }

.mn-checkout { display: grid; grid-template-columns: minmax(0, 785px) minmax(0, 487px); justify-content: space-between; gap: 40px; align-items: start; }
/* WooCommerce inserts the error list as the form's first child: full width above both columns, not in one. */
.mn-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.mn-checkout__panel { padding: 28px 40px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.mn-checkout__panel-title { font-weight: 600; font-size: 18px; margin-bottom: 20px; }
.mn-checkout__aside { position: sticky; top: 16px; }
#order_review { padding: 12px 22px 22px; }

/* Campos de WooCommerce dentro del checkout / mi cuenta */
.woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 16px; }
.woocommerce form .form-row label { font-weight: 500; font-size: 14px; }
.woocommerce form .form-row .required { color: var(--red-500); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
	width: 100%; min-height: 44px; padding: 10px 14px;
	border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); font-size: 14px;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 22px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 9px; right: 8px; }
/* Native dropdowns (e.g. "Tipo de documento"): own arrow 14px in from the border, like select.mn-input. */
.woocommerce form .form-row select {
	appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
}
.woocommerce form .form-row select:disabled { opacity: .55; cursor: not-allowed; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { display: inline-grid; width: calc(50% - 8px); }
.woocommerce form .form-row-first { margin-right: 12px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--red-500); }
/* Inline error under a field (WooCommerce checkout.js): small and red, and half-width fields stay
   top-aligned so an error in one doesn't push its neighbour down. */
.woocommerce form .form-row .checkout-inline-error-message { margin: 0; font-size: 12px; line-height: 1.3; color: var(--red-500); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { vertical-align: top; }
.mn-checkout .woocommerce-billing-fields > h3 { display: none; }
.woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 16px; font-weight: 600; margin: 8px 0 16px; }
#ship-to-different-address label { display: flex; gap: 8px; align-items: center; font-size: 14px; }

.mn-review__items { display: grid; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mn-review__items li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.mn-review__items img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line-3); border-radius: 4px; }
.mn-review__items small { color: var(--gray-500); }
.mn-review__price { font-weight: 600; }
.mn-review .mn-summary__row { font-size: 16px; padding: 16px 0; }
.mn-review .mn-summary { margin-bottom: 8px; }

.mn-shipping { padding: 16px 0 4px; border-bottom: 1px solid var(--line-2); }
.mn-shipping__list { display: grid; gap: 10px; }
.mn-shipping__option {
	display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center;
	padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; font-size: 14px;
}
.mn-shipping__option:has(input:checked) { border-color: var(--red-400); background: var(--red-15); }
.mn-shipping__option input[type="radio"] { accent-color: var(--red-500); }
.mn-shipping__icon svg { width: 22px; height: 17px; }
.mn-shipping__cost { font-weight: 600; color: var(--red-500); }
.mn-shipping__eta { grid-column: 3 / -1; margin-top: -6px; font-size: 12px; color: var(--gray-500); }
.mn-shipping__dest { font-size: 12px; color: var(--gray-500); margin: 10px 0 12px; }

#payment .wc_payment_methods { display: grid; gap: 10px; margin: 16px 0; }
#payment .wc_payment_method { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 14px; }
#payment .wc_payment_method > label { font-weight: 600; margin-left: 6px; }
#payment .wc_payment_method input { accent-color: var(--red-500); }
#payment .payment_box { margin-top: 8px; font-size: 13px; color: var(--gray-600); }
#payment .woocommerce-info { font-size: 13px; }
#payment .place-order { display: grid; gap: 12px; }
#payment #place_order { width: 100%; }
#payment .woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: var(--gray-600); }
#place_order { display: inline-flex; align-items: center; justify-content: center; height: 50px; border: 0; border-radius: var(--radius-pill); background: var(--red-500); color: var(--white); font-weight: 600; font-size: 15px; }
#place_order:hover { background: var(--red-600); }

/* Avisos de WooCommerce */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius); list-style: none;
	background: var(--bg-soft); font-size: 14px;
}
.woocommerce-message { background: #ecfdf3; color: #05603a; }
.woocommerce-error { background: var(--red-50); color: var(--red-900); }
.woocommerce-message .button, .woocommerce-info .button { font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; }
.blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }

/* Confirmación */
.mn-thanks { display: grid; gap: 24px; justify-items: center; max-width: 525px; margin: 40px auto 0; text-align: center; }
.mn-thanks__icon svg { width: 54px; height: 54px; }
.mn-thanks__title { font-weight: 700; font-size: 24px; }
.mn-thanks__lead { font-weight: 600; font-size: 12px; margin-top: -12px; }
.mn-thanks__meta { display: flex; justify-content: space-between; width: 100%; padding: 16px 22px; text-align: left; }
.mn-thanks__meta div { display: grid; gap: 4px; }
.mn-thanks__meta span { font-size: 11px; color: var(--gray-600); }
.mn-thanks__item { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; width: 100%; padding: 12px 22px; text-align: left; }
.mn-thanks__item img { width: 110px; height: 70px; object-fit: contain; }
.mn-thanks__item-name { font-size: 14px; }
/* Email check before showing the order again (woocommerce/checkout/form-verify-email.php). */
.mn-verify__lead { margin-top: -8px; font-size: 14px; color: var(--gray-700); }
.mn-verify__lead a { color: var(--red-500); text-decoration: underline; text-underline-offset: 3px; }
.mn-verify .mn-field { width: 100%; margin: 0; text-align: left; }
.mn-verify .mn-notice { width: 100%; margin: 0; }
.mn-thanks .mn-btn { margin-top: -6px; }

/* ==========================================================================
   Mi cuenta
   ========================================================================== */

.mn-account__hello { padding: 0 0 28px; border-bottom: 1px solid var(--line-2); }
.mn-account__hello h1 { font-weight: 600; font-size: 22px; }
.mn-account__hello p { margin-top: 6px; color: var(--gray-600); }
.mn-account__layout { display: grid; grid-template-columns: 284px minmax(0, 1fr); }
.mn-account__nav { padding: 60px 40px 40px 6px; border-right: 1px solid var(--line-2); }
.mn-account__nav ul { display: grid; gap: 18px; }
.mn-account__nav a { font-size: 16px; color: var(--gray-600); }
.mn-account__nav .is-active a { color: #000; font-weight: 500; }
.mn-account__content { padding: 36px 0 20px 56px; min-width: 0; }
.mn-account__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.mn-account__head .mn-h2 { color: #3a3a3a; }
.mn-account__empty { display: grid; justify-items: start; gap: 14px; padding: 24px; }

.mn-orders { display: grid; gap: 20px; }
.mn-order { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: center; padding: 16px 20px; }
.mn-order:hover { border-color: var(--red-300); color: inherit; }
.mn-order__img img { width: 110px; height: 80px; object-fit: contain; }
.mn-order__info { display: grid; gap: 4px; }
.mn-order__status { font-weight: 600; font-size: 22px; }
.mn-order__status--completed { color: #0f7a3c; }
.mn-order__status--cancelled, .mn-order__status--failed { color: var(--red-900); }
.mn-order__info small { color: var(--gray-500); }
.mn-order__total { font-weight: 600; color: var(--red-500); }

.mn-track { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 50px; position: relative; }
.mn-track::before, .mn-track::after { content: ""; position: absolute; top: 11px; left: 12.5%; height: 2px; }
.mn-track::before { right: 12.5%; background: var(--line-2); }
.mn-track::after { width: calc(75% * var(--stage) / 3); background: var(--red-500); }
.mn-track li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; font-weight: 600; font-size: 12px; color: var(--gray-400); }
.mn-track li::before { content: ""; width: 23px; height: 23px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-2); }
.mn-track li.is-done { color: var(--ink); }
.mn-track li.is-done::before { background: var(--red-500); border-color: var(--red-500); }
.mn-track-item { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center; padding: 20px 24px; margin-bottom: 16px; }
.mn-track-item__img img { width: 200px; height: 120px; object-fit: contain; }
.mn-track-item__info { display: grid; gap: 4px; }
.mn-track-item__name { font-weight: 600; font-size: 22px; }
.mn-track-item__price { font-weight: 600; font-size: 22px; color: var(--red-500); }
.mn-track-total { display: flex; justify-content: space-between; padding: 16px 24px; font-size: 16px; }

/* Seguimiento de pedido without an account (page-seguimiento-de-pedido.php). */
.mn-order-track { max-width: calc(785px + 2 * var(--gutter)); padding-top: 50px; }
.mn-order-track .mn-h1 { font-size: 28px; }
.mn-order-track__lead { margin: 12px 0 32px; color: var(--gray-700); }
.mn-order-track__form { max-width: 520px; padding: 40px; }
.mn-order-track__form .mn-notice { margin-bottom: 24px; }
.mn-order-track__again { margin-top: 24px; }

.mn-favs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mn-fav-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 16px; }
.mn-fav-item__img img { width: 90px; height: 90px; object-fit: contain; }
.mn-fav-item__info { display: grid; gap: 8px; }
.mn-fav-item__name { font-size: 18px; }
.mn-fav-item__price { font-weight: 600; font-size: 22px; }

.mn-datos { max-width: 454px; }
.mn-datos .mn-field__label { font-size: 14px; font-weight: 500; }
.mn-datos__password { margin: 4px 0 24px; }
.mn-datos__password summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--red-500); margin-bottom: 16px; }

.mn-login { display: grid; gap: 32px; max-width: 480px; margin: 20px auto 0; }
.mn-login--two { grid-template-columns: 1fr 1fr; max-width: 980px; }
.mn-login form { display: grid; gap: 4px; padding: 36px; align-content: start; }
.mn-login .mn-h1 { margin-bottom: 20px; }
.mn-login .mn-field__label { font-size: 14px; }
.mn-login .mn-check { margin-bottom: 16px; }
.mn-login .mn-link-muted { margin-top: 12px; justify-self: center; }

/* Modales (newsletter, cerrar sesión) */
.mn-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.mn-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.mn-modal__backdrop--dark { background: rgba(0, 0, 0, .5); }
.mn-modal__panel { position: relative; background: var(--white); border-radius: var(--radius); max-height: calc(100vh - 32px); overflow-y: auto; animation: mn-pop .18s ease-out; }
.mn-modal__close { position: absolute; top: 20px; right: 24px; z-index: 1; padding: 6px; border: 0; background: none; }
@keyframes mn-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.mn-newsletter__panel { display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 24px; width: min(1056px, 100%); padding: 60px 40px 40px; }
.mn-newsletter__art { position: relative; min-height: 420px; }
.mn-newsletter__character { position: absolute; left: 0; top: 30px; width: 390px; }
.mn-newsletter__content .mn-h1 { max-width: 351px; }
.mn-newsletter__content .mn-muted-sm { margin: 10px 0 10px; }
.mn-newsletter__form { display: grid; gap: 20px; margin-top: 10px; }
.mn-newsletter__form .mn-input { text-align: center; }
.mn-newsletter__note { font-size: 16px; color: rgba(0, 0, 0, .8); }
.mn-form-msg { font-size: 14px; font-weight: 600; color: var(--red-500); min-height: 1em; }
.mn-form-msg.is-ok { color: #05603a; }

.mn-logout { width: 346px; padding: 24px; text-align: center; }
.mn-logout h2 { font-weight: 600; font-size: 22px; }
.mn-logout p { margin: 8px auto 20px; max-width: 220px; font-size: 14px; color: var(--gray-600); }
.mn-logout__actions { display: flex; justify-content: center; gap: 12px; }
/* Both buttons the same size (Figma mixes "Botón secundario" 42px and "Botón pequeño" 34px here). */
.mn-logout__actions .mn-btn { width: 150px; height: 42px; padding: 10px 20px; }

/* ==========================================================================
   Nosotros / Contáctanos / 404
   ========================================================================== */

.mn-about { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; padding-top: 80px; text-align: center; }
.mn-about__title { font-weight: 700; font-size: 32px; }
.mn-about__text { max-width: 878px; font-weight: 500; font-size: 16px; color: rgba(0, 0, 0, .7); }
.mn-about__text p + p { margin-top: 4px; }
.mn-about__img { width: 100%; height: 400px; object-fit: cover; border-radius: 5px; }
/* Testimonials: infinite carousel that moves by itself, with dots below (no arrows). */
.mn-testimonials { --per-view: 4; display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; min-width: 0; margin-top: 40px; }
.mn-testimonials__viewport { min-width: 0; overflow: hidden; touch-action: pan-y; }
.mn-dots { display: flex; justify-content: center; gap: 4px; }
.mn-dots__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mn-dots__dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); transition: width .2s ease, background-color .2s ease; }
.mn-dots__dot:hover::before { background: var(--gray-400); }
.mn-dots__dot.is-active::before { width: 20px; background: var(--red-500); }
.mn-testimonials .mn-testimonials__track { display: flex; gap: 0; overflow: visible; scroll-snap-type: none; }
.mn-testimonials__track.is-moving { transition: transform .45s ease; }
.mn-testimonial { flex: 0 0 calc(100% / var(--per-view)); display: grid; gap: 8px; margin: 0; padding: 0 12px; justify-items: center; align-content: start; }
@media (max-width: 1024px) { .mn-testimonials { --per-view: 2; } }
@media (max-width: 640px) { .mn-testimonials { --per-view: 1; } }
.mn-testimonial figcaption { font-weight: 700; font-size: 18px; }
.mn-testimonial blockquote { margin: 0; max-width: 160px; font-weight: 700; font-size: 11px; color: rgba(0, 0, 0, .7); }
.mn-testimonial span { font-weight: 700; font-size: 11px; }

.mn-contact { display: grid; justify-items: center; padding-top: 50px; }
.mn-contact .mn-h1 { font-size: 28px; }
.mn-contact__lead { margin: 16px 0 48px; color: var(--gray-700); }
.mn-contact__form { width: min(1004px, 100%); padding: 70px 72px 48px; }
.mn-contact__form .mn-btn { margin-top: 12px; }

.mn-404 { display: grid; justify-items: center; gap: 14px; padding-top: 50px; text-align: center; }
.mn-404__lead { font-weight: 600; font-size: 22px; color: rgba(0, 0, 0, .7); }
.mn-404__art { display: flex; align-items: flex-start; gap: 16px; margin: 80px 0 60px; }
.mn-404__art img:nth-child(2) { margin-top: 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
	:root { --gutter: 40px; }
	.mn-header__bar { padding-inline: 40px; }
	.mn-product__top { grid-template-columns: minmax(0, 1fr) 460px; }
	.mn-cart, .mn-checkout { grid-template-columns: minmax(0, 1fr) 400px; }
}

@media (max-width: 1024px) {
	:root { --gutter: 24px; }
	.mn-header__bar { grid-template-columns: auto 1fr; grid-template-areas: "logo user" "search search"; gap: 8px 16px; padding: 8px 24px 12px; }
	.mn-header__logo { grid-area: logo; justify-self: start; padding: 0; }
	.mn-header__logo img { width: 48px; }
	.mn-header__user { grid-area: user; justify-self: end; gap: 4px; }
	.mn-header__link { font-size: 14px; padding: 6px; }
	.mn-header__divider { height: 30px; }
	.mn-search { grid-area: search; width: 100%; justify-self: stretch; }
	.mn-nav__links { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
	.mn-nav__links::-webkit-scrollbar { display: none; }
	.mn-nav__spacer { display: none; }

	.mn-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
	.mn-footer__logo { grid-column: 1 / -1; }
	.mn-footer__logo img { width: 160px; }
	.mn-footer__col { padding-top: 0; }

	.mn-grid--3, .mn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-partners__row { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
	.mn-partners__row::-webkit-scrollbar { display: none; }
	.mn-partners__item { flex: 0 0 128px; }
	.mn-partners__item img { height: 32px; }
	.mn-partners__item--name { flex-basis: auto; min-width: 128px; font-size: 13px; }
	.mn-flyers, .mn-arrivals__row { grid-template-columns: 1fr; }
	.mn-arrivals__feature img, .mn-arrivals__feature video { height: 320px; }

	.mn-catalog__layout { grid-template-columns: 1fr; gap: 16px; }
	.mn-catalog__filters-toggle { display: inline-flex; justify-self: start; }
	.mn-filters { display: none; position: static; padding: 20px; background: var(--white); border-radius: var(--radius); }
	.mn-filters.is-open { display: grid; }

	.mn-product__top, .mn-product__bottom { grid-template-columns: minmax(0, 1fr); } /* Never wider than the screen. */
	.mn-buybox { padding: 24px 0; }
	.mn-scroller .mn-card { flex-basis: calc((100% - 24px) / 2); }

	.mn-cart, .mn-checkout { grid-template-columns: 1fr; }
	.mn-cart__aside, .mn-checkout__aside { position: static; padding-top: 0; }

	.mn-account__layout { grid-template-columns: 1fr; }
	.mn-account__nav { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
	.mn-account__nav ul { display: flex; flex-wrap: wrap; gap: 10px 20px; }
	.mn-account__content { padding: 24px 0; }

	.mn-newsletter__panel { grid-template-columns: 1fr; padding: 56px 24px 24px; }
	.mn-newsletter__art { display: none; }
	.mn-login--two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	:root { --gutter: 16px; }
	body { font-size: 15px; }
	.mn-header__bar { padding-inline: 16px; }
	.mn-header__user .mn-header__link:nth-of-type(2), .mn-header__user .mn-header__divider:nth-of-type(2) { display: none; }
	.mn-nav__links { gap: 20px; }
	.mn-nav__links a, .mn-nav__brands { font-size: 13px; }

	.mn-display { font-size: 22px; }
	.mn-display-sub { font-size: 17px; }
	.mn-hero__slide { min-height: 340px; }
	.mn-banner--tall { min-height: 360px; padding: 20px; }
	.mn-flyer { min-height: 220px; padding: 24px; }

	.mn-grid--3, .mn-grid--4 { gap: 12px; }
	.mn-card__body { padding: 10px 12px 14px; }
	.mn-card__cta .mn-btn { font-size: 13px; padding-inline: 8px; }
	.mn-catalog .mn-card { min-height: 0; }
	.mn-card__media { height: 160px; }
	.mn-catalog__head { flex-direction: column; }
	.mn-tile { flex-basis: 96px; }
	.mn-tile__img { width: 96px; height: 96px; }
	.mn-tile__label { font-size: 11px; }
	.mn-tile__img--name { padding: 4px; font-size: 11px; }

	.mn-footer__grid { grid-template-columns: 1fr; }
	.mn-footer__bottom { flex-direction: column; align-items: flex-start; font-size: 13px; word-break: break-all; }

	.mn-buybox__specs { grid-template-columns: 1fr; }
	.mn-delivery-box__pay { flex-wrap: wrap; gap: 12px; }
	.mn-scroller .mn-card { flex-basis: 78%; }
	.mn-gallery { grid-template-columns: 1fr; }
	.mn-gallery__thumbs { grid-auto-flow: column; grid-auto-columns: 64px; order: 2; overflow-x: auto; }
	.mn-gallery__thumb { width: 64px; height: 64px; }
	.mn-gallery__main { min-height: 280px; }

	.mn-cart-item { grid-template-columns: 90px 1fr; gap: 12px; padding: 16px; }
	.mn-cart-item__img img { height: 80px; }
	.mn-cart-item__name { font-size: 15px; }
	.mn-cart-item__actions { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
	.mn-cart-item__icons { grid-row: 1; justify-self: end; grid-column: 2; }
	.mn-cart__summary { padding: 8px 18px 20px; }
	.mn-summary__row { font-size: 16px; }
	.mn-promo { padding: 24px; min-height: 160px; }
	.mn-checkout__panel { padding: 20px 16px 8px; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; }
	.mn-steps { margin: 24px 8px 32px; }

	.mn-order, .mn-track-item { grid-template-columns: 72px 1fr; }
	.mn-order__img img, .mn-track-item__img img { width: 72px; height: 60px; }
	.mn-order__total, .mn-track-item__price { grid-column: 2; font-size: 16px; }
	.mn-order__status, .mn-track-item__name { font-size: 16px; }
	.mn-favs { grid-template-columns: 1fr; }

	.mn-contact__form { padding: 28px 18px; }
	.mn-field__label { font-size: 16px; }
	.mn-about { padding-top: 40px; }
	.mn-about__img { height: 220px; }
	.mn-404__art img { width: 30%; height: auto; }
	.mn-login form { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	/* La cinta de marcas se mueve siempre (pedido del cliente); sigue pausándose bajo el mouse o el dedo. */
	.mn-partners__track { animation: mn-marquee var(--marquee-time, 20s) linear infinite !important; }
	.mn-partners__row.is-marquee:hover .mn-partners__track,
	.mn-partners__row.is-marquee:focus-within .mn-partners__track,
	.mn-partners__row.is-paused .mn-partners__track { animation-play-state: paused !important; }
}

.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .woocommerce-notices-wrapper:focus { outline: none; }

/* ==========================================================================
   Ubicación de entrega (modal, buscador de direcciones, estados)
   ========================================================================== */

.mn-delivery__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-600); cursor: pointer; }
.mn-delivery__btn:hover .mn-delivery__value { color: var(--red-500); text-decoration: underline; text-underline-offset: 3px; }
.mn-link-btn { padding: 0; border: 0; background: none; color: var(--red-500); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.mn-deliv__panel { width: min(520px, 100%); padding: 40px 32px 28px; }
.mn-deliv__panel .mn-h1 { font-size: 24px; padding-right: 32px; }
.mn-deliv__panel > .mn-muted { margin: 8px 0 24px; }
.mn-deliv__panel .mn-field { margin-bottom: 12px; }
.mn-deliv__panel .mn-field__label { font-size: 14px; }
.mn-deliv__result { margin: 20px 0 16px; padding: 14px 16px; border-radius: var(--radius); background: #ecfdf3; color: #05603a; font-weight: 600; font-size: 14px; }
.mn-deliv__result.is-bad { background: var(--red-50); color: var(--red-900); }

.mn-ac { position: relative; display: block; }
.mn-ac__list {
	position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
	margin: 0; padding: 6px; list-style: none;
	background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
}
.mn-ac__list li { padding: 10px 12px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.mn-ac__list li:hover, .mn-ac__list li.is-active { background: var(--red-25); color: var(--red-900); }

.mn-delivery-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
[data-delivery-result].is-bad { color: var(--red-900); }
.mn-delivery-status { margin: 4px 0 12px; font-size: 13px; font-weight: 600; color: #05603a; }
.mn-delivery-status.is-bad { color: var(--red-900); }
.mn-delivery-status:empty { display: none; }
.mn-shipping__none { margin: 4px 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--red-50); color: var(--red-900); font-size: 13px; font-weight: 600; }
.mn-shipping__none a { display: block; margin-top: 4px; text-decoration: underline; }

/* ==========================================================================
   Libro de Reclamaciones + textos legales
   ========================================================================== */

.mn-lr-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.mn-lr-link svg { width: 22px; height: 22px; }
.mn-lr-checkout { margin-top: 12px; text-align: center; font-size: 13px; }
.mn-lr-checkout .mn-lr-link { color: var(--gray-600); }

.mn-check--sm { font-size: 12px; line-height: 1.45; align-items: flex-start; }
.mn-check--sm input { margin-top: 2px; }
.mn-check a, .mn-lr a { text-decoration: underline; }
.mn-missing { background: #fff4ce; color: #7a5a00; padding: 0 4px; border-radius: 3px; }

.mn-lr { max-width: 900px; padding-top: 40px; }
.mn-lr__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.mn-lr__icon svg { width: 44px; height: 44px; color: var(--red-500); }
.mn-lr__head p { margin-top: 8px; color: var(--gray-700); }
.mn-lr__provider { padding: 14px 18px; margin-bottom: 20px; font-size: 14px; background: var(--bg-soft); border-color: var(--line); }
.mn-lr__form { display: grid; gap: 20px; }
.mn-lr__block { margin: 0; padding: 22px 24px 8px; min-width: 0; }
.mn-lr__block > legend { padding: 0 8px; font-weight: 700; font-size: 15px; color: var(--red-900); text-transform: uppercase; }
.mn-lr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mn-lr__full { grid-column: 1 / -1; }
.mn-lr .mn-field { margin-bottom: 16px; }
.mn-lr .mn-field__label { font-size: 14px; }
.mn-input--sm { min-height: 90px; }
.mn-lr__radios { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; padding: 0; border: 0; }
.mn-lr__radios legend { margin-bottom: 8px; }
.mn-lr__types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mn-lr__type { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; font-size: 13px; }
.mn-lr__type:has(input:checked) { border-color: var(--red-400); background: var(--red-15); }
.mn-lr__type strong { display: block; font-size: 15px; margin-bottom: 2px; }
.mn-lr__type input { accent-color: var(--red-500); }
.mn-lr__minor { margin-top: 12px; }
.mn-lr__consent { display: grid; gap: 12px; }
.mn-lr__consent .mn-check { font-size: 13px; align-items: flex-start; }
.mn-lr__consent .mn-check input { margin-top: 3px; }
.mn-lr__done { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: 24px; }
.mn-lr__done .mn-thanks__icon svg { width: 54px; height: 54px; }
.mn-lr__sheet { padding: 24px; overflow-x: auto; }
.mn-lr [aria-invalid="true"] { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--red-50); }

.mn-prose--legal { max-width: 860px; font-size: 15px; line-height: 1.65; }
.mn-prose--legal h2 { font-size: 19px; margin: 28px 0 10px; font-weight: 700; }
.mn-prose--legal h3 { font-size: 16px; margin: 20px 0 8px; }
.mn-prose--legal table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; }
.mn-prose--legal th, .mn-prose--legal td { border: 1px solid var(--line-2); padding: 8px 10px; text-align: left; vertical-align: top; }
.mn-prose--legal th { background: var(--bg-soft); }
.mn-legal-meta { color: var(--gray-500); font-size: 13px; margin-bottom: 24px; }

@media (max-width: 640px) {
	.mn-lr__grid, .mn-lr__types { grid-template-columns: 1fr; }
	.mn-lr__block { padding: 18px 16px 4px; }
}

@media print {
	.mn-header, .mn-footer, .mn-lr__done button, .mn-newsletter, #mn-delivery, .mn-drawer { display: none !important; }
	.mn-lr__sheet { border: 0; padding: 0; }
	body { background: #fff; }
}