/* ==========================================================================
   Milar 2026 · base del rediseño (oct-2026)
   Tinta para la marca, blanco para el producto. Prefijo m26-.
   La carga la cabecera (milar2026_header.jsp), así que está en todas las páginas.
   ========================================================================== */

/* Alpine: lo marcado con x-cloak (p. ej. la ventana del CP) no se ve hasta que arranca Alpine. Estaba en style.css y se perdía al
   recortar el CSS heredado (la regla solo casa antes de que corra el JS): aquí no depende de ninguna hoja antigua. */
[x-cloak] { display: none !important; }


:root {
	--m26-ink: #000C1A;
	--m26-ink-2: #0B1726;
	--m26-ink-3: #16222F;
	--m26-green: #4FBB00;
	--m26-green-dark: #3E9400;
	--m26-green-text: #2E7300;
	--m26-green-soft: #EEF8E6;
	--m26-bone: #F4F3EF;
	--m26-line: #E6E4DE;
	--m26-line-strong: #D9D7D0;
	--m26-muted: #4A5260;
	--m26-muted-on-ink: #C9CED6;
	--m26-white: #FFFFFF;
	--m26-radius-card: 16px;
	--m26-radius-lg: 24px;
	--m26-container: 1600px;
	--m26-gutter: clamp(16px, 4vw, 64px);
	--m26-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--m26-voice: "Newsreader", Georgia, serif;
	--m26-ease: cubic-bezier(.2, .8, .2, 1);
	--m26-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.m26-wrap {
	width: 100%;
	max-width: var(--m26-container);
	margin-inline: auto;
	padding-inline: var(--m26-gutter);
	box-sizing: border-box;
}

.m26-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.m26-ico {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.m26-fade { transition: opacity .25s var(--m26-ease); }
.m26-fade-0 { opacity: 0; }
.m26-fade-1 { opacity: 1; }
.m26-slide { transition: transform .4s var(--m26-ease), opacity .3s var(--m26-ease); }
.m26-slide-0 { transform: translateY(24px); opacity: 0; }
.m26-slide-1 { transform: none; opacity: 1; }

@media (min-width: 1024px) {
	.m26-slide-0 { transform: translateX(40px); }
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.m26-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: 700 15px/1.1 var(--m26-font);
	letter-spacing: -.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--m26-ease), color .2s var(--m26-ease), border-color .2s var(--m26-ease), transform .15s var(--m26-ease);
	-webkit-tap-highlight-color: transparent;
}

.m26-btn:active { transform: scale(.97); }
.m26-btn:focus-visible { outline: 2px solid var(--m26-focus, var(--m26-ink)); outline-offset: 3px; }
.m26-btn .m26-ico { width: 18px; height: 18px; }
.m26-btn--block { width: 100%; }
.m26-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }

.m26-btn--green { background: var(--m26-green); color: var(--m26-ink); }
.m26-btn--green:hover { background: #5ccc0a; color: var(--m26-ink); }

.m26-btn--bone { background: var(--m26-bone); color: var(--m26-ink); border-color: var(--m26-line-strong); }
.m26-btn--bone:hover { background: #ECEAE3; color: var(--m26-ink); }

.m26-btn--ink { background: var(--m26-ink); color: #fff; }
.m26-btn--ink:hover { background: var(--m26-ink-3); color: #fff; }

.m26-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.m26-btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }

.m26-btn--line { background: #fff; color: var(--m26-ink); border-color: var(--m26-line-strong); }
.m26-btn--line:hover { border-color: var(--m26-ink); color: var(--m26-ink); }

.m26-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s var(--m26-ease), transform .15s var(--m26-ease);
	-webkit-tap-highlight-color: transparent;
}

.m26-iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.m26-iconbtn:active { transform: scale(.94); }
.m26-iconbtn:focus-visible { outline: 2px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; }
.m26-iconbtn--light { color: var(--m26-ink); background: var(--m26-bone); }
.m26-iconbtn--light:hover { color: var(--m26-ink); background: var(--m26-line); }

/* ==========================================================================
   COMPONENTES COMUNES (home, listado, ficha, promociones…)
   Tipografía de sección · carruseles · tarjeta de producto · etiquetas · entrega
   ========================================================================== */
/* Raíz de cualquier zona rediseñada: tipografía, color y listas sin estilo heredado.
   Uso: <div class="m26-ui">…</div> (la home lo lleva en .m26-home). */
.m26-ui, .m26-home {
	font-family: var(--m26-font);
	color: var(--m26-ink);
	-webkit-font-smoothing: antialiased;
}

.m26-ui ul { list-style: none; margin: 0; padding: 0; }
.m26-ui a { text-decoration: none; color: inherit; }
.m26-ui img { max-width: 100%; }

/* Tipografía y cabeceras de sección */
.m26-eyebrow,
.m26-kicker {
	margin: 0 0 8px;
	font-family: var(--m26-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m26-muted);
}

.m26-kicker--green { color: var(--m26-green); }

.m26-kicker--live {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--m26-green-text);
	letter-spacing: .06em;
}

.m26-kicker--live[hidden] { display: none; }
.m26-num { font-variant-numeric: tabular-nums; }

.m26-live {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--m26-green);
	flex: none;
}

.m26-live::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--m26-green);
	animation: m26-pulse 2s var(--m26-ease) infinite;
}

@keyframes m26-pulse {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(2.8); opacity: 0; }
}

.m26-h2 {
	margin: 0;
	font-family: var(--m26-font);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-transform: none;
}

.m26-h3 {
	margin: 0 0 14px;
	font-family: var(--m26-font);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-transform: none;
}

.m26-sub { margin: 8px 0 0; color: var(--m26-muted); font-size: 15px; }

.m26-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.m26-head--ink .m26-kicker { color: var(--m26-green); }
.m26-head--ink .m26-h2 { color: #fff; }

.m26-more {
	flex: none;
	color: var(--m26-ink);
	font-family: var(--m26-font);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}

.m26-more:hover { color: var(--m26-green-text); }
.m26-btn, .m26-btn:hover { text-decoration: none; }

.m26-sec { padding-block: clamp(40px, 6vw, 80px); }
.m26-sec--bone { background: var(--m26-bone); }

/* --------------------------------------------------------------------------
   Carruseles (scroll-snap nativo)
   -------------------------------------------------------------------------- */
.m26-rail { position: relative; }

.m26-rail__track {
	list-style: none;
	margin: 0;
	display: flex !important;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--m26-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.m26-rail__track:not(.m26-wrap) { padding: 0; }
.m26-rail__track::-webkit-scrollbar { display: none; }
.m26-rail__track.m26-wrap { padding-inline: var(--m26-gutter); }

.m26-rail__item {
	flex: none;
	scroll-snap-align: start;
}

.m26-rail__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.m26-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--m26-line-strong);
	cursor: pointer;
	transition: width .35s var(--m26-spring), background-color .2s var(--m26-ease);
}

.m26-dot.is-on { width: 26px; background: var(--m26-ink); }

/* área táctil de 44 px sin agrandar el punto */
.m26-dot { position: relative; }
.m26-dot::after { content: ""; position: absolute; inset: -18px -6px; }

.m26-arrows { display: none; gap: 8px; }

.m26-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--m26-line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--m26-ink);
	cursor: pointer;
	transition: background-color .2s var(--m26-ease), border-color .2s var(--m26-ease), opacity .2s;
}

.m26-arrow:hover:not(:disabled) { background: var(--m26-ink); border-color: var(--m26-ink); color: #fff; }
.m26-arrow:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   Tarjeta de producto (milar2026_card.jsp)
   -------------------------------------------------------------------------- */
.m26-rail--cards .m26-rail__track { padding-block: 4px 18px; }
.m26-rail--cards .m26-rail__item { width: min(46vw, 190px); display: flex; }

.m26-card {
	position: relative;
	font-family: var(--m26-font);
	color: var(--m26-ink);
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 14px 14px 16px;
	border: 1px solid var(--m26-line);
	border-radius: var(--m26-radius-card);
	background: #fff;
	box-sizing: border-box;
	transition: transform .25s var(--m26-ease), box-shadow .25s var(--m26-ease), border-color .25s var(--m26-ease);
}

.m26-card:active { transform: scale(.97); transition-duration: .15s; }

.m26-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin-bottom: 12px;
	overflow: hidden;
}

.m26-card__img,
.m26-card__media picture img {
	display: block;
	width: 86%;
	height: 86%;
	object-fit: contain;
	transition: transform .3s var(--m26-ease);
}

.m26-card__tags {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.m26-tag {
	display: inline-flex;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--m26-bone);
	color: var(--m26-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.m26-tag--ink { background: var(--m26-ink); color: #fff; }
.m26-tag--sale { background: #B42318; color: #fff; }

.m26-card__promo { position: absolute; top: 0; right: 0; z-index: 1; width: 56px; }
.m26-card__promoimg { width: 100%; height: auto; }

.m26-card__brand {
	margin: 0 0 3px;
	color: var(--m26-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.m26-card__name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.m26-card__link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	color: var(--m26-ink) !important;
	text-decoration: none !important;
}

.m26-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.m26-card__link:focus-visible { outline: none; }
.m26-card:has(.m26-card__link:focus-visible) { outline: 2px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; }

.m26-card__specs { min-height: 1.4em; margin: 0 0 6px; color: var(--m26-muted); font-size: 13px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.m26-card__rating { display: flex; align-items: center; gap: 4px; min-height: 18px; margin: 0 0 10px; color: var(--m26-muted); font-size: 13px; }
.m26-card__rating svg { width: 13px; height: 13px; fill: var(--m26-ink); }
.m26-card__rating b { color: var(--m26-ink); }

.m26-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.m26-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
.m26-card__now { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.m26-card__now--sale { color: #B42318; }
.m26-card__was { color: var(--m26-muted); font-size: 14px; }
.m26-card__energy-img { display: block; height: 24px; width: auto; }

.m26-energy {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 12px 0 7px;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.m26-energy--a { background: #00843D; }
.m26-energy--b { background: #51B848; }
.m26-energy--c { background: #B9D21E; color: var(--m26-ink); }
.m26-energy--d { background: #F4D300; color: var(--m26-ink); }
.m26-energy--e { background: #FBBA00; color: var(--m26-ink); }
.m26-energy--f { background: #EB6909; }
.m26-energy--g { background: #E2001A; }

.m26-card__eta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 20px;
	margin: 10px 0 0;
	color: var(--m26-muted);
	font-size: 13px;
	font-weight: 600;
}

.m26-card__eta.is-tomorrow { color: var(--m26-green-text); font-weight: 700; }
.m26-card__eta svg { width: 14px; height: 14px; fill: var(--m26-green); flex: none; }

@media (prefers-reduced-motion: no-preference) {
	.m26-card__eta.is-tomorrow svg { animation: m26-flash .9s .4s var(--m26-ease) 1 both; }
}

@keyframes m26-flash {
	0% { opacity: .2; transform: scale(.7); }
	40% { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 4px rgba(79, 187, 0, .8)); }
	100% { opacity: 1; transform: scale(1); filter: none; }
}

.m26-card__eta--ask {
	padding: 0;
	border: 0;
	background: none;
	color: var(--m26-ink);
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.m26-card__eta--store { color: var(--m26-ink); text-decoration: underline !important; }

.m26-card--banner { padding: 0; overflow: hidden; }
.m26-card--banner a, .m26-card--banner picture { display: block; height: 100%; }
.m26-card__bannerimg, .m26-card--banner img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 640px) {
	.m26-rail--cards .m26-rail__item { width: 220px; }
}

@media (min-width: 1024px) {
	.m26-arrows { display: flex; }
	.m26-rail--cards .m26-rail__track { gap: 16px; }
	.m26-rail--cards .m26-rail__item { width: calc((min(100vw, var(--m26-container)) - 2 * var(--m26-gutter) - 4 * 16px) / 5); min-width: 220px; }

	.m26-card { padding: 18px 18px 20px; }
	.m26-card:hover { transform: translateY(-3px); border-color: var(--m26-line-strong); box-shadow: 0 16px 32px rgba(0, 12, 26, .08); }
	.m26-card:hover .m26-card__img { transform: scale(1.04); }
}

/* Bloque del asesor (home, listado, ficha): tinta + voz en Newsreader. Sin personaje inventado. */
.m26-advisor {
	font-family: var(--m26-font);
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border-radius: var(--m26-radius-lg);
	background: var(--m26-ink);
	color: #fff;
}

.m26-advisor__quote { margin: 0 0 24px; }

.m26-advisor__quote p {
	margin: 0;
	font-family: var(--m26-voice);
	font-size: clamp(24px, 2.6vw, 34px);
	font-style: italic;
	line-height: 1.22;
	letter-spacing: -.01em;
}

.m26-advisor__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; }
.m26-advisor__who { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; }
.m26-advisor__who b { display: block; }
.m26-advisor__who span span { color: var(--m26-muted-on-ink); }

.m26-advisor__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--m26-green);
	color: var(--m26-ink);
}

.m26-advisor__avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (min-width: 1024px) {
	.m26-advisor { padding: 40px; }
	.m26-advisor--plp { padding: 28px; }
}

/* ==========================================================================
   Cabecera
   ========================================================================== */
.m26-hdr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--m26-ink);
	color: #fff;
	font-family: var(--m26-font);
	-webkit-font-smoothing: antialiased;
}

.m26-hdr a { text-decoration: none; }
.m26-hdr ul { list-style: none; margin: 0; padding: 0; }
.m26-hdr button { font-family: inherit; }

/* La cabecera es fija y este hueco guarda su altura desplegada: al compactarla el contenido no se mueve
   (con sticky, plegar la fila de tienda subía la página y volvía a cruzar el umbral: parpadeo). */
.m26-hdr-sentinel { height: var(--m26-hdr-full, 160px); pointer-events: none; } /* CWV: alto real medido (móvil 160, escritorio 161), así el JS no lo corrige tras pintar */
@media (min-width: 1024px) { .m26-hdr-sentinel { height: var(--m26-hdr-full, 161px); } }

/* Barra de utilidades (solo escritorio) */
.m26-util {
	display: none;
	background: var(--m26-ink-2);
	font-size: 13px;
	color: var(--m26-muted-on-ink);
}

.m26-util__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 36px;
}

.m26-util__usp,
.m26-util__links {
	display: flex;
	align-items: center;
	gap: 28px;
}

.m26-util__usp li {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.m26-util__usp .m26-ico { width: 17px; height: 17px; color: var(--m26-green); }
.m26-util__links a { color: var(--m26-muted-on-ink); white-space: nowrap; }
.m26-util__links a:hover { color: #fff; }
/* con los 5 enlaces de la barra de producción no cabe todo en portátiles pequeños: fuera la 3.ª ventaja y huecos más justos */
@media (max-width: 1279px) {
	.m26-util__row { gap: 16px; }
	.m26-util__usp, .m26-util__links { gap: 18px; }
	.m26-util__usp li:nth-child(3) { display: none; }
}

/* Fila principal */
.m26-bar {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"menu logo actions"
		"search search search"
		"store store store";
	align-items: center;
	column-gap: 4px;
	padding-top: 8px;
}

.m26-bar.is-under { z-index: 1; }

.m26-bar__menu { grid-area: menu; margin-left: -10px; }
.m26-bar__menu.is-hidden { visibility: hidden; }
.m26-bar__logo { grid-area: logo; display: flex; align-items: center; min-width: 0; }
.m26-bar__store { grid-area: store; min-width: 0; }
.m26-bar__search { grid-area: search; min-width: 0; padding: 8px 0 10px; }
.m26-bar__actions { grid-area: actions; display: flex; align-items: center; gap: 2px; margin-right: -10px; }

.m26-logo-h1 { margin: 0; font-size: inherit; line-height: 0; }
.m26-logo { display: inline-flex; padding: 6px 0; }
.m26-logo img { display: block; width: 116px; height: auto; }

.m26-cart__n {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--m26-green);
	color: var(--m26-ink);
	font: 800 11px/18px var(--m26-font);
	text-align: center;
	box-sizing: border-box;
	animation: m26-pop .45s var(--m26-spring) both;
}

@keyframes m26-pop {
	from { transform: scale(.4); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.m26-account { position: relative; }
.m26-account__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 10;
	min-width: 180px;
	padding: 8px !important;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 12, 26, .18);
}

.m26-account__menu a,
.m26-account__menu button {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--m26-ink);
	font: 600 14px/1.2 var(--m26-font);
	text-align: left;
	cursor: pointer;
}

.m26-account__menu a:hover,
.m26-account__menu button:hover { background: var(--m26-bone); color: var(--m26-ink); }

/* Chip de tienda */
.m26-store {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: transparent;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.m26-store__pin { width: 18px; height: 18px; color: var(--m26-green); }
.m26-store__chev { width: 16px; height: 16px; color: var(--m26-muted-on-ink); transition: transform .2s var(--m26-ease); }
.m26-store:hover .m26-store__chev { transform: translateY(2px); }

.m26-store__txt {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
}

.m26-store__top { color: var(--m26-muted-on-ink); overflow: hidden; text-overflow: ellipsis; }
.m26-store__top::before { content: "· "; }
.m26-store__lbl { display: none; }
.m26-store__name { font-weight: 700; color: #fff; }
.m26-store--empty .m26-store__top::before { content: none; }
.m26-store--empty .m26-store__name { color: var(--m26-green); }

/* Buscador */
.m26-search { position: relative; }

.m26-search__form {
	display: flex;
	align-items: center;
	height: 46px;
	padding: 0 4px 0 6px;
	border-radius: 999px;
	background: #fff;
	color: var(--m26-ink);
	box-shadow: 0 0 0 0 rgba(79, 187, 0, 0);
	transition: box-shadow .2s var(--m26-ease);
}

.m26-search__form:focus-within { box-shadow: 0 0 0 3px rgba(79, 187, 0, .55); }

.m26-search__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 0;
	background: none;
	color: var(--m26-ink);
	cursor: pointer;
}

.m26-search__icon .m26-ico { width: 20px; height: 20px; }

.m26-hdr .m26-search__input {
	flex: 1;
	min-width: 0;
	height: 40px !important;
	margin: 0;
	padding: 0 6px !important;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--m26-ink);
	font: 400 15px/1 var(--m26-font);
}

.m26-search__input::placeholder { color: #6B7280; }

.m26-search__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 0;
	border-radius: 999px;
	background: var(--m26-green);
	color: var(--m26-ink);
}

.m26-search__go .m26-ico { width: 18px; height: 18px; stroke-width: 2.2; }

.m26-search__sugg {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 70vh;
	overflow: auto;
	padding: 16px;
	border-radius: 18px;
	background: #fff;
	color: var(--m26-ink);
	box-shadow: 0 18px 40px rgba(0, 12, 26, .22);
}

/* Modal de código postal: hoja inferior en móvil, panel lateral en escritorio */
.m26-cp { position: fixed; inset: 0; z-index: 1000; color: var(--m26-ink); }

.m26-cp__overlay { position: absolute; inset: 0; background: rgba(0, 12, 26, .55); }

.m26-cp__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 92vh;
	overflow: auto;
	padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
	border-radius: 24px 24px 0 0;
	background: #fff;
	box-shadow: 0 -12px 40px rgba(0, 12, 26, .25);
	font-family: var(--m26-font);
	box-sizing: border-box;
}

.m26-cp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.m26-cp__head img { height: 22px; width: auto; }
.m26-cp__title { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.m26-cp__lead { margin: 0 0 18px; color: var(--m26-muted); font-size: 15px; line-height: 1.45; }
/* 02-nov · enlace a «Productos con recogida en 1 hora» de la tienda asignada (solo si la página existe) */
.m26-cp__pk { display: flex; align-items: center; gap: 12px; margin: -6px 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--m26-green-soft); color: var(--m26-ink); font-size: 14px; line-height: 1.35; text-decoration: none; }
.m26-cp__pk[hidden] { display: none; }
.m26-cp__pk > .m26-ico { flex: none; width: 22px; height: 22px; color: var(--m26-green-text); }
.m26-cp__pk span { flex: 1; min-width: 0; }
.m26-cp__pk b { display: block; font-weight: 800; }
.m26-cp__pk b span { display: inline; }
.m26-cp__pk .m26-cp__pk-go { flex: none; width: 18px; height: 18px; transition: transform .2s var(--m26-ease); }
.m26-cp__pk:hover { color: var(--m26-ink); background: #E3F3D6; }
.m26-cp__pk:hover .m26-cp__pk-go { transform: translateX(3px); }
.m26-cp__pk--store { margin: 16px 0; }

.m26-cp__form { display: flex; gap: 8px; }

.m26-cp .m26-cp__form input {
	flex: 1;
	min-width: 0;
	height: 52px !important;
	padding: 0 18px !important;
	border: 1.5px solid var(--m26-line-strong) !important;
	border-radius: 999px !important;
	background: #fff !important;
	font: 600 18px/1 var(--m26-font);
	letter-spacing: .06em;
}

.m26-cp .m26-cp__form input:focus { border-color: var(--m26-ink) !important; outline: 0; box-shadow: none; }
.m26-cp__form .m26-btn { min-height: 52px; }

.m26-cp__error { margin: 8px 0 0; color: #B42318; font-size: 14px; }
.m26-cp__error:empty { display: none; }

.m26-cp__why { display: grid; gap: 12px; margin: 22px 0 !important; padding: 18px !important; border-radius: 16px; background: var(--m26-bone); list-style: none; }
.m26-cp__why li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.4; }
.m26-cp__why .m26-ico { width: 20px; height: 20px; color: var(--m26-green-text); margin-top: 1px; }

.m26-cp__or { margin: 0 0 10px; color: var(--m26-muted); font-size: 13px; text-align: center; }

.m26-cp__account { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 14px; font-weight: 700; }
.m26-cp__account a { color: var(--m26-ink); text-decoration: underline; text-underline-offset: 3px; }

.m26-cp .default_zip_code_text_class:has(+ #milar-use-location[style*="none"]) { display: none; }

/* Cabecera compacta al bajar (móvil): se pliega la fila de tienda */
@media (max-width: 1023px) {
	.m26-bar__store { max-height: 64px; overflow: hidden; transition: max-height .25s var(--m26-ease), opacity .2s var(--m26-ease); }
	.m26-hdr.is-compact .m26-bar__store { max-height: 0; opacity: 0; pointer-events: none; }
	/* 16-oct: la ventana del CP vive dentro de esta fila; con la cabecera compacta se abría transparente (heredaba opacity 0) y
	   los toques la atravesaban. Con la ventana abierta la fila sigue plegada pero sin transparencia, y la ventana acepta toques. */
	.m26-hdr.is-compact .m26-bar__store:has(> #defaultZipCodeId:not([style*="display: none"])) { opacity: 1; transition: none; }
	.m26-bar__store > #defaultZipCodeId { pointer-events: auto; }
	.m26-hdr.is-compact .m26-bar__search { padding-bottom: 8px; }
}

@keyframes m26-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Cabecera · escritorio
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.m26-util { display: block; }
	.m26-hdr.is-compact .m26-util { display: none; }

	.m26-bar {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas: "logo search store actions";
		column-gap: 28px;
		padding-block: 14px;
	}

	.m26-bar__menu { display: none; }
	.m26-bar__search { padding: 0; max-width: 720px; width: 100%; justify-self: center; }
	.m26-bar__actions { gap: 6px; margin-right: 0; }
	.m26-logo img { width: 140px; }

	.m26-search__form { height: 50px; }

	.m26-store {
		width: auto;
		min-height: 50px;
		padding: 0 14px 0 12px;
		border: 1.5px solid rgba(255, 255, 255, .16);
		border-radius: 999px;
		transition: border-color .2s var(--m26-ease), background-color .2s var(--m26-ease);
	}

	.m26-store:hover { border-color: var(--m26-green); background: rgba(255, 255, 255, .04); }
	.m26-store__pin { width: 20px; height: 20px; }

	.m26-store__txt {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
	}

	.m26-store__top { font-size: 12px; }
	.m26-store__top::before { content: none; }
	.m26-store__lbl { display: inline; }
	.m26-store__name { font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

	.m26-hdr.is-compact .m26-bar { padding-block: 10px; }

	.m26-cp__panel {
		left: auto;
		top: 0;
		width: 440px;
		max-height: none;
		height: 100%;
		padding: 28px 32px;
		border-radius: 0;
		box-shadow: -12px 0 40px rgba(0, 12, 26, .25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.m26-hdr *, .m26-cp * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Menú · móvil = cajón lateral; escritorio = barra + megamenú
   ========================================================================== */
.m26-cats { position: relative; z-index: 2; }

.m26-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 12, 26, .5);
	opacity: 0;
	transition: opacity .25s var(--m26-ease);
}

.m26-scrim.is-on { opacity: 1; }
html.m26-menu-open, html.m26-menu-open body { overflow: hidden; }
html.m26-menu-open .m26-cats { z-index: 95; }

.m26-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	background: #fff;
	color: var(--m26-ink);
	box-shadow: 12px 0 40px rgba(0, 12, 26, .25);
	transform: translateX(-102%);
	visibility: hidden;
	transition: transform .35s var(--m26-ease), visibility 0s linear .35s;
	overflow: hidden;
}

.m26-drawer.is-open { transform: none; visibility: visible; transition: transform .35s var(--m26-ease); }

.m26-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; }
.m26-drawer__logo img { display: block; height: 22px; width: auto; }

.m26-drawer__store {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 16px;
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	background: var(--m26-ink);
	color: #fff;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.m26-drawer__store .m26-ico { width: 20px; height: 20px; color: var(--m26-green); }
.m26-drawer__store span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.m26-drawer__store small { color: var(--m26-muted-on-ink); font-size: 12px; }
.m26-drawer__store b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.m26-drawer__store em { color: var(--m26-green); font-size: 13px; font-style: normal; font-weight: 700; }

.m26-drawer__quick { display: flex; gap: 8px; padding: 12px 16px 4px !important; overflow-x: auto; scrollbar-width: none; }
.m26-drawer__quick a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--m26-line-strong);
	border-radius: 999px;
	color: var(--m26-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.m26-drawer__quick a.is-green { border-color: var(--m26-green); background: var(--m26-green-soft); color: var(--m26-green-text); }

.m26-drawer__label { margin: 18px 18px 4px; color: var(--m26-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.m26-catnav { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.m26-l0list { padding: 0 0 12px !important; }

.m26-l0__btn,
.m26-l0--link > a {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding: 6px 16px 6px 18px;
	border: 0;
	background: none;
	color: var(--m26-ink);
	font: 600 16px/1.25 var(--m26-font);
	text-align: left;
	cursor: pointer;
}

.m26-l0__btn:hover, .m26-l0--link > a:hover { background: var(--m26-bone); color: var(--m26-ink); }
a.m26-l0__btn, a.m26-l0__btn:hover { text-decoration: none !important; }
button.m26-more { padding: 0; border: 0; background: none; cursor: pointer; } /* 19-oct: «Todas las categorías» es botón (abre el menú) */
.m26-l0__ico { display: flex; width: 40px; height: 40px; flex: none; border-radius: 10px; overflow: hidden; background: var(--m26-bone); }
.m26-l0__ico img { width: 100%; height: 100%; object-fit: cover; }
.m26-l0__txt { flex: 1; }
.m26-l0__chev { width: 18px; height: 18px; color: var(--m26-muted); }
.m26-l0--link > a { padding-left: 18px; }
.m26-l0--promo > a { color: var(--m26-green-text); font-weight: 800; }

/* capa de familia (móvil) */
.m26-panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s var(--m26-ease), visibility 0s linear .3s;
}

.m26-l0.is-open > .m26-panel { transform: none; visibility: visible; transition: transform .3s var(--m26-ease); }

.m26-panel__head { position: sticky; top: 0; z-index: 1; padding: 6px 16px 10px; background: #fff; border-bottom: 1px solid var(--m26-line); }

.m26-panel__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin-left: -8px;
	padding: 0 8px;
	border: 0;
	background: none;
	color: var(--m26-muted);
	font: 600 14px/1 var(--m26-font);
	cursor: pointer;
}

.m26-panel__back .m26-ico { width: 18px; height: 18px; }
.m26-panel__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

.m26-panel__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 12px 16px 6px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--m26-bone);
	color: var(--m26-ink);
	font-weight: 700;
}

.m26-panel__all .m26-ico { width: 18px; height: 18px; }

.m26-l1list { padding: 0 0 8px !important; }
.m26-l1 { border-bottom: 1px solid var(--m26-line); }

.m26-l1__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 54px;
	padding: 0 16px 0 18px;
	border: 0;
	background: none;
	color: var(--m26-ink);
	font: 600 15px/1.25 var(--m26-font);
	text-align: left;
	cursor: pointer;
}

.m26-l1__btn .m26-ico { width: 18px; height: 18px; color: var(--m26-muted); transform: rotate(90deg); transition: transform .2s var(--m26-ease); }
.m26-l1.is-open > .m26-l1__btn .m26-ico { transform: rotate(-90deg); }

.m26-l1__body { display: none; padding: 0 18px 16px; }
.m26-l1.is-open > .m26-l1__body { display: block; animation: m26-in .25s var(--m26-ease); }

.m26-link { cursor: pointer; }

.m26-l1__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	color: var(--m26-green-text);
	font-size: 14px;
	font-weight: 700;
}

.m26-l1__all .m26-ico { width: 16px; height: 16px; }

.m26-l1__cols { display: grid; gap: 14px; }
.m26-col__h,
.m26-cms .level2-item__main-link { display: block; margin: 6px 0 6px; color: var(--m26-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.m26-col ul,
.m26-cms ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.m26-col li > *,
.m26-cms .level2-item > * {
	display: flex;
	align-items: center;
	min-height: 40px;
	color: var(--m26-ink);
	font-size: 15px;
}

.m26-col li > *:hover,
.m26-cms .level2-item > *:hover { color: var(--m26-green-text); text-decoration: underline; text-underline-offset: 3px; }

.m26-cms:not(:has(li)) { display: none; }

.m26-panel__aside {
	margin: 16px;
	padding: 20px;
	border-radius: 18px;
	background: var(--m26-ink);
	color: #fff;
}

.m26-panel__pitch { margin: 0 0 6px; font-family: var(--m26-voice); font-size: 24px; font-style: italic; line-height: 1.2; }
.m26-panel__note { margin: 0 0 16px; color: var(--m26-muted-on-ink); font-size: 14px; line-height: 1.45; }
.m26-panel__promo { display: inline-block; margin-top: 12px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.m26-panel__promo:hover { color: var(--m26-green); }

.m26-drawer__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--m26-line); background: var(--m26-bone); }
.m26-drawer__foot p { margin: 0 0 10px; font-size: 14px; }
.m26-drawer__help { display: block; margin-top: 10px; color: var(--m26-ink); font-size: 14px; font-weight: 600; text-align: center; text-decoration: underline !important; }

@media (min-width: 1024px) {
	.m26-cats { border-top: 1px solid rgba(255, 255, 255, .08); }

	.m26-drawer {
		position: static;
		display: block;
		width: auto;
		background: transparent;
		color: #fff;
		box-shadow: none;
		transform: none;
		visibility: visible;
		overflow: visible;
		transition: none;
	}

	.m26-drawer__head, .m26-drawer__store, .m26-drawer__quick, .m26-drawer__label, .m26-drawer__foot { display: none; }

	.m26-catnav { position: static; overflow: visible; }

	.m26-l0list {
		display: flex;
		align-items: stretch;
		gap: 2px;
		max-width: var(--m26-container);
		margin: 0 auto !important;
		padding: 0 calc(var(--m26-gutter) - 12px) !important;
		box-sizing: border-box;
	}

	.m26-l0 { position: static; }

	.m26-l0__btn,
	.m26-l0--link > a {
		position: relative;
		gap: 0;
		width: auto;
		min-height: 46px;
		padding: 0 12px;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
	}

	.m26-l0__btn:hover, .m26-l0--link > a:hover { background: transparent; color: #fff; }
	.m26-l0__ico, .m26-l0__chev { display: none; }

	.m26-l0__btn::after,
	.m26-l0--link > a::after {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 0;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--m26-green);
		transform: scaleX(0);
		transition: transform .2s var(--m26-ease);
	}

	.m26-l0__btn:hover::after, .m26-l0--link > a:hover::after,
	.m26-l0.is-open > .m26-l0__btn::after, .m26-l0.is-current > .m26-l0__btn::after { transform: none; }

	.m26-l0--promo { margin-left: auto; }
	.m26-l0--promo > a { color: var(--m26-green); font-weight: 700; }
	.m26-l0--promo > a:hover { color: #7BDA2E; }

	/* megamenú */
	.m26-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		inset: auto;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr) 280px;
		grid-template-rows: auto 1fr;
		column-gap: 32px;
		max-width: none;
		min-height: 440px;
		max-height: calc(100vh - var(--m26-hdr-h, 160px) - 16px);
		padding: 28px max(var(--m26-gutter), calc((100vw - var(--m26-container)) / 2 + var(--m26-gutter)));
		border-top: 1px solid var(--m26-line);
		background: #fff;
		color: var(--m26-ink);
		box-shadow: 0 30px 60px rgba(0, 12, 26, .18);
		overflow: hidden;
		transform: translateY(-6px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s var(--m26-ease), transform .2s var(--m26-ease), visibility 0s linear .2s;
		box-sizing: border-box;
	}

	.m26-l0.is-open > .m26-panel { transform: none; opacity: 1; visibility: visible; transition: opacity .2s var(--m26-ease), transform .2s var(--m26-ease); }

	.m26-panel__head { position: static; grid-column: 1; grid-row: 1; padding: 0 0 10px; border: 0; background: none; }
	.m26-panel__back { display: none; }
	.m26-panel__title { font-size: 24px; }
	.m26-panel__all { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; gap: 8px; margin: 2px 0 0; padding: 8px 0; background: none; color: var(--m26-green-text); }
	.m26-panel__all:hover { text-decoration: underline; text-underline-offset: 3px; }

	.m26-l1list { grid-column: 1; grid-row: 2; position: static; overflow-y: auto; padding: 0 !important; scrollbar-width: thin; }
	.m26-l1 { position: static; border: 0; }

	.m26-l1__btn {
		min-height: 42px;
		padding: 0 12px;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 500;
	}

	.m26-l1__btn .m26-ico { transform: none; opacity: 0; }
	.m26-l1.is-active > .m26-l1__btn { background: var(--m26-bone); font-weight: 700; }
	.m26-l1.is-active > .m26-l1__btn .m26-ico { opacity: 1; color: var(--m26-ink); }
	.m26-l1.is-open > .m26-l1__btn .m26-ico { transform: none; }

	/* cuerpo de la subfamilia activa en la columna central */
	.m26-l1__body,
	.m26-l1.is-open > .m26-l1__body {
		position: absolute;
		top: 76px;
		bottom: 28px;
		left: calc(max(var(--m26-gutter), calc((100vw - var(--m26-container)) / 2 + var(--m26-gutter))) + 260px + 32px);
		right: calc(max(var(--m26-gutter), calc((100vw - var(--m26-container)) / 2 + var(--m26-gutter))) + 280px + 32px);
		display: none;
		padding: 0;
		overflow-y: auto;
		animation: none;
	}

	.m26-l1.is-active > .m26-l1__body { display: block; }

	.m26-l1__all { display: none; }
	.m26-l1__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-content: start; }
	.m26-cms > ul { display: grid !important; gap: 0; }
	.m26-col li > *, .m26-cms .level2-item > * { min-height: 34px; font-size: 14px; }

	.m26-panel__aside { grid-column: 3; grid-row: 1 / span 2; align-self: start; margin: 0; padding: 24px; }

	.m26-scrim { top: var(--m26-hdr-h, 0); z-index: 1; }
}

@media (min-width: 1280px) {
	.m26-l0list { gap: 6px; }
	.m26-l0__btn, .m26-l0--link > a { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.m26-drawer, .m26-panel, .m26-scrim { transition: none !important; }
}

/* Capa de familia a toda altura en móvil: se ocultan tienda y accesos mientras está abierta */
@media (max-width: 1023px) {
	.m26-drawer:has(.m26-l0.is-open) .m26-drawer__store,
	.m26-drawer:has(.m26-l0.is-open) .m26-drawer__quick,
	.m26-drawer:has(.m26-l0.is-open) .m26-drawer__label { display: none; }
}

/* Asistente (Sonar, #sonar-fab): más pequeño en móvil y fuera cuando hay un cajón o un modal abierto,
   para que no tape tarjetas ni botones (especificación §2.4) */
@media (max-width: 767px) {
	#sonar-fab { width: 48px !important; height: 48px !important; right: 12px !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
	#sonar-fab img { width: 100% !important; height: 100% !important; }
}

html.m26-menu-open #sonar-fab,
html:has(#defaultZipCodeId[style*="display: block"]) #sonar-fab { display: none !important; }

/* --------------------------------------------------------------------------
   Hoja (diálogo inferior en móvil, centrado en escritorio): «Pregunta a tu tienda», «Comprar en tu tienda»…
   -------------------------------------------------------------------------- */
.m26-sheet { position: fixed; inset: 0; z-index: 1000; font-family: var(--m26-font); color: var(--m26-ink); }
.m26-sheet[hidden] { display: none; }
.m26-sheet__overlay { position: absolute; inset: 0; background: rgba(0, 12, 26, .55); opacity: 0; transition: opacity .25s var(--m26-ease); }
.m26-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 90vh;
	overflow: auto;
	padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
	border-radius: 24px 24px 0 0;
	background: #fff;
	transform: translateY(100%);
	transition: transform .35s var(--m26-ease);
	box-sizing: border-box;
}

.m26-sheet.is-open .m26-sheet__overlay { opacity: 1; }
.m26-sheet.is-open .m26-sheet__panel { transform: none; }
html.m26-sheet-open, html.m26-sheet-open body { overflow: hidden; }
html.m26-sheet-open #sonar-fab { display: none !important; }

.m26-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m26-sheet__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.m26-sheet__addr { margin: 6px 0 0; color: var(--m26-muted); font-size: 14px; }
.m26-sheet__lead { margin: 14px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--m26-bone); font-size: 14px; line-height: 1.45; }
.m26-sheet__opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.m26-sheet__opts li[hidden] { display: none; }
.m26-sheet__opts a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--m26-line-strong); border-radius: 16px; color: var(--m26-ink); text-decoration: none; transition: border-color .2s var(--m26-ease); }
.m26-sheet__opts a:hover { border-color: var(--m26-ink); }
.m26-sheet__opts b { display: block; font-size: 15px; }
.m26-sheet__opts small { display: block; color: var(--m26-muted); font-size: 13px; }
.m26-sheet__ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--m26-bone); }
.m26-sheet__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--m26-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m26-sheet__ico--wa { background: var(--m26-green); }

.m26-sheet__opts a strong { display: block; margin-top: 2px; font-size: 18px; letter-spacing: .01em; }
.m26-sheet__store { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.m26-sheet__store img { width: 64px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; }
.m26-sheet__note { margin: 14px 0 0; color: var(--m26-muted); font-size: 12px; line-height: 1.45; }

@media (min-width: 1024px) {
	.m26-sheet__panel { left: 50%; right: auto; top: 50%; bottom: auto; width: 460px; border-radius: 24px; transform: translate(-50%, -46%); opacity: 0; transition: transform .3s var(--m26-ease), opacity .25s var(--m26-ease); }
	.m26-sheet.is-open .m26-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
}

/* ==========================================================================
   Prefooter: servicios · ayuda de tu tienda · newsletter (todas las páginas salvo compra)
   ========================================================================== */
.m26-pre { font-family: var(--m26-font); color: var(--m26-ink); -webkit-font-smoothing: antialiased; }
.m26-pre ul { list-style: none; margin: 0; padding: 0; }

.m26-pre__svc { padding-block: clamp(36px, 5vw, 64px); background: var(--m26-bone); }
.m26-pre__title { margin: 0 0 22px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

.m26-pre__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78%, 280px);
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--m26-gutter)) !important;
	padding-inline: var(--m26-gutter) !important;
	scroll-padding-inline: var(--m26-gutter);
}

.m26-pre__list::-webkit-scrollbar { display: none; }
.m26-pre__list li { scroll-snap-align: start; }

.m26-pre__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border-radius: var(--m26-radius-card);
	background: #fff;
}

.m26-pre__list .m26-ico { width: 26px; height: 26px; color: var(--m26-green-text); }
.m26-pre__list span { display: flex; flex-direction: column; gap: 2px; color: var(--m26-muted); font-size: 14px; line-height: 1.4; }
.m26-pre__list b { color: var(--m26-ink); font-size: 15px; }

.m26-pre__help { padding-block: 28px; background: var(--m26-ink-2); color: #fff; }
.m26-pre__helpin { display: grid; gap: 16px; align-items: center; }
.m26-pre__q { margin: 0 0 4px; font-family: var(--m26-voice); font-size: clamp(24px, 2.4vw, 30px); font-style: italic; line-height: 1.15; }
.m26-pre__a { margin: 0; color: var(--m26-muted-on-ink); font-size: 15px; line-height: 1.45; }
.m26-pre__a span { color: #fff; font-weight: 700; }
.m26-pre__ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.m26-pre__ctas .m26-btn[hidden] { display: none; }

/* Newsletter (la única banda verde) */
.m26-news { padding-block: clamp(36px, 5vw, 56px); background: var(--m26-green); color: var(--m26-ink); font-family: var(--m26-font); }
.m26-news__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; } /* a11y 1.4.10: la columna no encogía por debajo del ancho del campo de correo y desbordaba a 320 px */
.m26-news__title { margin: 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.m26-news__lead { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.m26-news__form { position: relative; }
.m26-news__row { display: flex; gap: 8px; }

.m26-news .m26-news__row input {
	flex: 1;
	min-width: 0;
	width: 0;
	height: 52px !important;
	margin: 0;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--m26-ink);
	font: 500 16px/1 var(--m26-font);
}

.m26-news__row .m26-btn { min-height: 52px; }
.m26-news__legal { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.m26-news__legal input { width: 20px; height: 20px; accent-color: var(--m26-ink); }
.m26-news__legal a { color: var(--m26-ink); text-decoration: underline; }
.m26-news__small { margin-top: 10px; font-size: 12px; line-height: 1.45; }
.m26-news__small summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.m26-news__small p { margin: 6px 0 0; }

@media (min-width: 1024px) {
	.m26-pre__list { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-inline: 0 !important; padding-inline: 0 !important; overflow: visible; }
	.m26-pre__list li { flex-direction: column; padding: 20px; }
	.m26-pre__helpin { grid-template-columns: 1fr auto; gap: 32px; }
	.m26-news__grid { grid-template-columns: 1fr minmax(0, 520px); gap: 48px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.m26-ft {
	background: var(--m26-ink);
	color: var(--m26-muted-on-ink);
	font: 400 14px/1.5 var(--m26-font);
	-webkit-font-smoothing: antialiased;
}

.m26-ft a { color: var(--m26-muted-on-ink); text-decoration: none; }
.m26-ft a:hover { color: #fff; }
.m26-ft ul { list-style: none; margin: 0; padding: 0; }

.m26-ft__top { display: grid; gap: 28px; padding-block: 48px 24px; }
.m26-ft__brand img { display: block; width: 220px; height: auto; margin-bottom: 18px; }
.m26-ft__claim { max-width: 30em; margin: 0 0 18px; }
.m26-ft__claim b { color: #fff; }

.m26-ft__social { display: flex; gap: 8px; }
.m26-ft__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	transition: border-color .2s var(--m26-ease);
}

.m26-ft__social a:hover { border-color: var(--m26-green); }
.m26-ft__social svg { width: 20px; height: 20px; fill: currentColor; }

.m26-ft__cols { display: grid; }
.m26-ft__col { border-top: 1px solid rgba(255, 255, 255, .1); }
.m26-ft__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; list-style: none; cursor: pointer; }
.m26-ft__col summary::-webkit-details-marker { display: none; }
.m26-ft__col summary::after { content: "+"; color: var(--m26-green); font-size: 22px; font-weight: 400; transition: transform .2s var(--m26-ease); }
.m26-ft__col[open] summary::after { transform: rotate(45deg); }

.m26-ft .footer-title { margin: 0; color: #fff; font: 700 15px/1.2 var(--m26-font); text-transform: none; letter-spacing: 0; }

.m26-ft__links { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
.m26-ft__links ul { display: flex; flex-direction: column; gap: 10px; }
.m26-ft__links p { margin: 0; }

.m26-ft__pay { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.m26-ft__pay ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 28px; }
.m26-ft__pay img { display: block; max-width: 72px; max-height: 26px; width: auto; height: auto; opacity: .9; }
.m26-ft__inv { filter: brightness(0) invert(1); }
.m26-ft__group { margin: 0; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; }

.m26-ft__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding-block: 0 24px; font-size: 12px; text-align: center; }

.m26-ft__bottom { padding-block: 14px; background: var(--m26-ink-2); font-size: 12px; text-align: center; }
.m26-ft__copy { margin: 0 0 4px; color: #fff; font-weight: 700; }
.m26-ft__btext p { margin: 0; }

@media (min-width: 768px) {
	.m26-ft__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
	.m26-ft__col { border-top: 0; }
	.m26-ft__col summary { min-height: 0; margin-bottom: 14px; pointer-events: none; }
	.m26-ft__col summary::after { content: none; }
}

@media (min-width: 1024px) {
	.m26-ft__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding-block: 64px 40px; }
	.m26-ft__pay { flex-direction: row; justify-content: space-between; }
}

/* Ronda 3 · tarjeta compacta en los carruseles en móvil */
@media (max-width: 639px) {
	.m26-rail--cards .m26-card { padding: 8px 8px 10px; border-radius: 14px; }
	.m26-rail--cards .m26-card__media { margin-bottom: 6px; }
	.m26-rail--cards .m26-card__img { width: 90%; height: 90%; }
	.m26-rail--cards .m26-card__promo { width: 40px; }
	.m26-rail--cards .m26-tag { padding: 3px 7px; font-size: 10px; }
	.m26-rail--cards .m26-card__brand { font-size: 10px; }
	.m26-rail--cards .m26-card__name { font-size: 13px; line-height: 1.25; }
	.m26-rail--cards .m26-card__specs { font-size: 11.5px; margin-bottom: 4px; }
	.m26-rail--cards .m26-card__rating { font-size: 12px; margin-bottom: 6px; }
	.m26-rail--cards .m26-card__buy { flex-wrap: wrap; gap: 4px; }
	.m26-rail--cards .m26-card__now { font-size: 18px; }
	.m26-rail--cards .m26-card__was { font-size: 12px; }
	.m26-rail--cards .m26-card__energy-img, .m26-rail--cards .m26-energy { height: 18px; }
	.m26-rail--cards .m26-energy { font-size: 11px; padding: 0 10px 0 6px; }
	.m26-rail--cards .m26-card__eta { font-size: 11.5px; margin-top: 6px; line-height: 1.25; }
}
@media (min-width: 1024px) {
	.m26-card { padding: 14px 14px 16px; }
	.m26-card__now { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Cargando: la M de Milar (sustituye al gif de la lavadora en fLanzarCargando y $.blockUI)
   -------------------------------------------------------------------------- */
.m26-loader { display: inline-flex; align-items: flex-end; gap: 5px; height: 44px; }
.m26-loader i { display: block; width: 12px; height: 100%; border-radius: 999px; background: var(--m26-green, #4FBB00); transform-origin: 50% 100%; animation: m26-loader 1s var(--m26-ease, ease) infinite; }
.m26-loader i:nth-child(2) { align-self: center; height: 64%; transform-origin: 50% 50%; animation-delay: .12s; opacity: .75; }
.m26-loader i:nth-child(3) { animation-delay: .24s; }
@keyframes m26-loader { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .m26-loader i { animation-duration: 2.4s; } }

body.full-loading-activo { overflow: hidden; }
.full-loading { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; display: flex !important; align-items: center; justify-content: center; width: auto !important; height: auto !important; margin: 0 !important; padding: 16px !important; background: rgba(0, 12, 26, .55) !important; backdrop-filter: blur(3px); box-sizing: border-box; animation: m26-fadein .2s ease both; }
.full-loading .wrap-loading { position: static !important; display: grid !important; justify-items: center; gap: 14px; width: auto !important; max-width: 320px; height: auto !important; margin: 0 !important; padding: 26px 30px !important; border-radius: 20px; background: #fff !important; box-shadow: 0 20px 50px rgba(0, 12, 26, .3); transform: none !important; text-align: center; box-sizing: border-box; }
.full-loading .wrap-loading > img { display: none !important; }
.full-loading .wrap-loading p, .full-loading .wrap-loading strong { margin: 0 !important; color: var(--m26-ink, #000C1A) !important; font: 700 15px/1.35 var(--m26-font, sans-serif) !important; }
.blockUI.blockMsg { padding: 26px 30px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 20px 50px rgba(0, 12, 26, .3) !important; font-family: var(--m26-font, sans-serif) !important; color: var(--m26-ink, #000C1A) !important; }
.blockUI.blockMsg img, .blockUI.blockMsg br { display: none !important; }
.blockUI.blockOverlay { background: rgb(0, 12, 26) !important; opacity: .55 !important; }
@keyframes m26-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Tarjeta: envío gratis (etiqueta sobre la foto) y promociones del gestor (franja bajo la valoración) */
.m26-tag--free { display: inline-flex; align-items: center; gap: 4px; background: var(--m26-green); color: var(--m26-ink); }
.m26-tag--free svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m26-card__promos { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 8px; padding: 5px 8px; border-radius: 8px; background: #EAF6E0; color: var(--m26-green-text); font-size: 12px; font-weight: 700; line-height: 1.25; }
.m26-card__promos svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m26-card__promos span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m26-card__promos b { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--m26-green-text); color: #fff; font-size: 11px; }
.m26-card__promos span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m26-card__eta.is-date { color: var(--m26-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Megamenú: «Ver todo en {subfamilia}» = primer enlace de la primera columna, en verde y con flecha (16-oct)
   -------------------------------------------------------------------------- */
.m26-col li.m26-col__all > .m26-l1__all { display: inline-flex !important; gap: 6px; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--m26-green-text) !important; font-weight: 800; }
.m26-col li.m26-col__all > .m26-l1__all .m26-ico { width: 16px; height: 16px; color: var(--m26-green-text); transition: transform .15s; }
.m26-col li.m26-col__all > .m26-l1__all:hover .m26-ico { transform: translateX(3px); }
/* subfamilia sin tipos: el enlace va solo, a la altura de los títulos de las otras columnas */
.m26-col--all { padding-top: 0; }
@media (min-width: 1024px) {
	.m26-panel { grid-template-rows: auto 1fr auto !important; }
	/* el «Ver todo» de la familia de arriba baja a la columna izquierda, como enlace secundario */
	.m26-panel__all { grid-column: 1 !important; grid-row: 3 !important; justify-self: stretch !important; margin: 10px 0 0 !important; padding: 10px 12px !important; border-top: 1px solid var(--m26-line); border-radius: 0; color: var(--m26-ink) !important; font-size: 14px; font-weight: 700; }
	.m26-l1__body, .m26-l1.is-open > .m26-l1__body { top: 28px !important; }
}

/* cabecera: foto de la tienda en un círculo en lugar del icono de ubicación */
.m26-store__avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--m26-green); background: #1B2A3B; }
.m26-store.has-avatar .m26-store__pin { display: none; }
@media (min-width: 1024px) { .m26-store__avatar { width: 32px; height: 32px; } }

/* aviso de carga de blockUI (cesta, checkout…): siempre centrado y dentro de la pantalla (su width/left en línea lo sacaba en móvil) */
.blockUI.blockMsg { left: 50% !important; width: auto !important; min-width: 200px; max-width: calc(100vw - 32px); box-sizing: border-box; transform: translateX(-50%); text-align: center; }

/* --------------------------------------------------------------------------
   Menú · «Guías de compra» (14-oct-2026): guías del propio listado en vez del blog
   -------------------------------------------------------------------------- */
.m26-l0__ico--guias { align-items: center; justify-content: center; color: var(--m26-green-text); }
.m26-l0__ico--guias .m26-ico { width: 22px; height: 22px; }
.m26-guias__intro { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 6px; }
.m26-guias__h { margin: 0; font: 800 26px/1.05 var(--m26-font); letter-spacing: -.03em; color: var(--m26-ink); }
.m26-guias__h em { font-family: var(--m26-voice); font-style: italic; font-weight: 400; }
.m26-guias__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--m26-muted); }
.m26-guias__dest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0 !important; padding: 0 !important; list-style: none; }
.m26-guias__dest a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 10px 6px 12px; border-radius: 16px; background: #000; color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; }
.m26-guias__dest a:hover { color: #fff; box-shadow: 0 0 0 2px var(--m26-green); }
.m26-guias__dest img { width: 64px; height: 66px; object-fit: contain; }
.m26-guias__dest b { font-size: 12px; line-height: 1.25; }
.m26-guias__dest small { display: none; }
.m26-guias__grupos { display: flex; flex-direction: column; gap: 18px; padding: 18px 16px; }
.m26-guias__gh { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--m26-line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m26-muted); }
.m26-guias__g ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.m26-guias__g a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; border-bottom: 1px solid #F0EEE9; color: var(--m26-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.m26-guias__g a:hover { color: var(--m26-green-text); }
.m26-guias__g small { flex: none; font-size: 12px; font-weight: 500; color: var(--m26-muted); }
.m26-guias__aside { margin: 0 16px 24px; }
.m26-guias__blog { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.m26-guias__blog:hover { color: var(--m26-green); }
.m26-guias__blog .m26-ico { width: 16px; height: 16px; }

@media (min-width: 1024px) {
	.m26-l0--guias > .m26-l0__btn .m26-l0__ico { display: none; }
	.m26-panel--guias { grid-template-columns: 300px minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 40px; min-height: 0; }
	.m26-panel--guias .m26-panel__head { grid-column: 1; grid-row: 1; }
	.m26-panel--guias .m26-panel__title { display: none; }
	.m26-guias__intro { grid-column: 1; grid-row: 1 / 3; padding: 0; }
	.m26-guias__h { font-size: 30px; }
	.m26-guias__lead { font-size: 15px; }
	.m26-guias__dest { grid-template-columns: minmax(0, 1fr); }
	.m26-guias__dest a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px 8px 8px; text-align: left; }
	.m26-guias__dest img { width: 54px; height: 56px; }
	.m26-guias__dest span { display: flex; flex-direction: column; gap: 2px; }
	.m26-guias__dest b { font-size: 14px; }
	.m26-guias__dest small { display: block; font-size: 12px; color: var(--m26-muted-on-ink); }
	.m26-guias__grupos { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; align-content: start; padding: 0; }
	.m26-guias__g a { min-height: 0; padding: 7px 0; border: 0; }
	.m26-guias__aside { grid-column: 3; grid-row: 1 / 3; align-self: start; margin: 0; }
}
@media (min-width: 1024px) {
	/* en la barra solo cabe «Guías»; el resto se lee en el panel y en móvil */
	.m26-l0--guias .m26-l0__more { display: none; }
	.m26-guias__g a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; }
}
@media (min-width: 1680px) { .m26-l0--guias .m26-l0__more { display: inline; } }
.m26-card__brand a { position: relative; z-index: 2; color: inherit; text-decoration: none; } .m26-card__brand a:hover { text-decoration: underline; }

/* ==========================================================================
   Piezas de la M (creatividades de marca, images/Milar/m26/): fondo negro puro → se funden con la tinta con «lighten»
   ========================================================================== */
.m26-pg-art { display: none; }
.m26-pg-art img, .m26-mtile img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; }
@media (min-width: 900px) {
	.m26-pg-hero.has-art .m26-pg-hero__in { position: relative; padding-right: calc(var(--m26-gutter) + 280px); } /* la pieza va a right: gutter: el texto («Ver promociones caducadas») no se mete debajo */
	.m26-pg-hero.has-art .m26-pg-art { display: block; position: absolute; right: var(--m26-gutter); bottom: 0; width: 250px; background: var(--m26-ink); isolation: isolate; }
}
@media (min-width: 1280px) { .m26-pg-hero.has-art .m26-pg-art { width: 280px; } .m26-pg-hero.has-art .m26-pg-hero__in { padding-right: calc(var(--m26-gutter) + 310px); } }
/* sobre fondo claro: la pieza va en una tarjeta de tinta */
.m26-mtile { display: block; width: 168px; margin: 0 auto 18px; padding: 14px 10px 0; border-radius: 24px; background: var(--m26-ink); isolation: isolate; overflow: hidden; }
.m26-mtile + .titulo, .m26-mtile ~ .titulo { margin-top: 0; }
#no_data_line:has(.m26-mtile) > .icon-cart { display: none; }

/* =============================================================================
   CP ESTIMADO (15-oct): custom.js fija un CP por defecto si no consigue geolocalizar. Mientras el CP sea ese (html.m26-cp-est,
   lo pone milar2026_header.jsp) no se enseña ni el CP ni la tienda ni los plazos: se pide el CP como si no lo hubiera.
   ========================================================================== */
.m26-store__est, .m26-cp-est__ask { display: none; }
.m26-cp-est .m26-store:not(.m26-store--empty) .m26-store__txt > :not(.m26-store__est) { display: none; }
.m26-cp-est .m26-store:not(.m26-store--empty) .m26-store__est { display: block; }
.m26-cp-est .m26-card__eta:not(.m26-card__eta--ask):not(.m26-card__eta--store) {
	font-size: 0 !important; color: var(--m26-ink); background: none; padding: 0; cursor: pointer;
}
.m26-cp-est .m26-card__eta:not(.m26-card__eta--ask):not(.m26-card__eta--store) svg { display: none; }
.m26-cp-est .m26-card__eta:not(.m26-card__eta--ask):not(.m26-card__eta--store)::after {
	content: "Ver fecha de entrega"; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.m26-cp-est .m26-rail--cards .m26-card__eta::after, .m26-cp-est .m26-plp-page #itemContainer .m26-card__eta::after { font-size: 11.5px; }
.m26-cp-est .m26-store__avatar { display: none !important; }
.m26-cp-est .m26-store.has-avatar .m26-store__pin { display: block !important; }
.m26-cp-est .m26-card__eta [data-m26-cutoff], .m26-cp-est .m26-mini__eta, .m26-cp-est .m26-plpbar__cp,
.m26-cp-est [data-m26-fast], .m26-cp-est .m26-picks .m26-sub, .m26-cp-est #services_superior_message { display: none !important; }
.m26-cp-est #postalcode-box-content .m26-cp-est__ask {
	display: block; width: 100%; margin: 0 0 10px !important; padding: 12px 14px !important; border: 1px solid rgba(0, 12, 26, .14) !important; border-radius: 10px;
	background: #fff; color: var(--m26-ink); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* =============================================================================
   SELECTOR DE TIENDA del popup del CP (custom.js de producción, oct-2026: handleMultipleStoresMilar). Mismos ids y clases
   que la cabecera antigua (zip-step*, zip-store-*) con el aspecto del rediseño.
   ========================================================================== */
#defaultZipCodeContent .zip-step2-only { display: none; }
#defaultZipCodeContent.is-store-step .zip-step2-only { display: flex; }
#defaultZipCodeContent.is-store-step .zip-step1-only { display: none !important; }
.m26-cp__step { margin: 0 0 4px; color: var(--m26-green-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.m26-cp__summary { align-items: center; gap: 10px; margin: 8px 0 16px; padding: 10px 14px; border-radius: 12px; background: #F3F4F1; font-size: 15px; }
.m26-cp__summary .m26-ico { width: 18px; height: 18px; flex: none; }
.m26-cp__summary-txt { flex: 1; }
.m26-cp__summary-change { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--m26-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zip-store-picker { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.zip-store-picker[hidden] { display: none; }
.zip-store-picker__alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #E6F4DC; color: var(--m26-ink); font-size: 14px; line-height: 1.4; }
.zip-store-picker__alert p { margin: 0; }
.zip-store-picker__alert-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; stroke: var(--m26-green-text); }
.zip-store-picker__list { min-width: 0; margin: 0; padding: 0; border: 0; }
.zip-store-picker__legend { margin-bottom: 10px; padding: 0; color: var(--m26-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zip-store-picker__options { display: flex; flex-direction: column; gap: 10px; }
.zip-store-option { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px; border: 2px solid rgba(0, 12, 26, .12); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.zip-store-option:hover { border-color: rgba(0, 12, 26, .35); }
.zip-store-option:has(.zip-store-option__radio:checked) { border-color: var(--m26-green); background: #F4FBEE; }
.zip-store-option:has(.zip-store-option__radio:focus-visible) { outline: 3px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; }
.zip-store-option__radio { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--m26-ink); cursor: pointer; }
.zip-store-option__body { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.zip-store-option__name { font-size: 16px; font-weight: 700; }
.zip-store-option__badge { padding: 2px 8px; border-radius: 999px; background: var(--m26-green); color: var(--m26-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.zip-store-option__distance { flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; }
.zip-store-picker__actions { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 0 8px; background: #fff; }
.zip-store-picker__actions .m26-btn[disabled] { opacity: .6; cursor: progress; }
.zip-store-picker__hint { margin: 0; color: var(--m26-muted); font-size: 13px; text-align: center; }
.zip-store-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 14px 16px; border-radius: 14px; background: var(--m26-ink); color: #fff; box-shadow: 0 12px 32px rgba(0, 12, 26, .3); font-size: 14px; line-height: 1.4; }
.zip-store-toast[hidden] { display: none; }
.zip-store-toast span { flex: 1; }
.zip-store-toast__action { flex: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--m26-green); border-radius: 999px; background: transparent; color: var(--m26-green); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 1024px) { .zip-store-toast { left: 24px; right: auto; bottom: 24px; } }
/* etiqueta «Novedad» (atributo producto_novedad de Hermes; 15-oct) */
.m26-tag--new { background: var(--m26-green); color: var(--m26-ink); }
.m26-pdp__new { align-self: center; }
/* botón «Cerrar» del megamenú (solo escritorio; en móvil el cajón tiene su aspa y «atrás») */
.m26-panel__close { display: none; }
@media (min-width: 1024px) {
	.m26-panel__close { position: absolute; top: 38px; right: calc(max(var(--m26-gutter), calc((100vw - var(--m26-container)) / 2 + var(--m26-gutter))) + 10px); /* esquina de la tarjeta oscura de la derecha (libre en todos los paneles) */
		z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff; font: 600 12.5px/1 var(--m26-font); cursor: pointer; }
	.m26-panel__close .m26-ico { width: 16px; height: 16px; }
	.m26-panel__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.m26-panel__close:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
	.m26-panel__close:focus-visible { outline: 3px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; }
}
/* PVPR en la tarjeta (precio de venta recomendado; sin descuento) */
.m26-card__pvpr { margin-left: 6px; color: var(--m26-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   16-oct · Carruseles de productos de Connectif (cn_carrusel-fichaproducto, cn_carrusel-categorias, cn_carrito-productos).
   Solo CSS sobre el marcado que inyecta Connectif (estilos en línea → !important). Enlaces, data-cn-track-click y el
   deslizador (js_slides / js_prev / js_next) no se tocan: su medición sigue igual.
   -------------------------------------------------------------------------- */
.cn_banner_placeholder .cn_content:has(.cn_products) { max-width: var(--m26-container); margin: 0 auto; padding: 32px var(--m26-gutter) 40px; box-sizing: border-box; font-family: var(--m26-font) !important; }
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html p,
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html span,
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html strong { margin: 0 !important; color: var(--m26-ink) !important; font: 800 24px/1.15 var(--m26-font) !important; letter-spacing: -.02em; text-align: left !important; }
/* el título llega en mayúsculas en el contenido de Connectif: «También te puede interesar» */
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html p { text-transform: lowercase; }
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html p::first-letter { text-transform: uppercase; }
/* sangría y separador gris propios del contenido de Connectif: fuera (el bloque ya lleva el margen del rediseño) */
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html { padding: 0 !important; }
.cn_banner_placeholder .cn_content:has(.cn_products) .cn_broke { display: none !important; }
.cn_banner_placeholder .cn_products { position: relative; overflow: visible !important; margin-top: 14px !important; padding: 0 !important; background: none !important; }
.cn_banner_placeholder .cn_products .cn__frame { overflow: hidden; }
.cn_banner_placeholder .cn_products .cn__li > div { height: calc(100% - 4px); margin: 2px 8px !important; padding: 14px !important; border: 1px solid var(--m26-line) !important; border-radius: var(--m26-radius-card) !important; box-shadow: none !important; background: #fff !important; font-family: var(--m26-font) !important; transition: border-color .15s, box-shadow .15s; }
.cn_banner_placeholder .cn_products .cn__li > div:hover { border-color: var(--m26-line-strong) !important; box-shadow: 0 8px 24px rgba(0, 12, 26, .08) !important; }
/* tarjeta vertical como las del rediseño: imagen arriba y nombre, precio y botón debajo (Connectif la maqueta en una tabla de 2 columnas) */
.cn_banner_placeholder .cn_products .cn__li table,
.cn_banner_placeholder .cn_products .cn__li tbody,
.cn_banner_placeholder .cn_products .cn__li tr,
.cn_banner_placeholder .cn_products .cn__li td { display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; box-sizing: border-box; }
.cn_banner_placeholder .cn_products .cn__li td:first-child > div { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 12px; }
.cn_banner_placeholder .cn_products .cn__li td:first-child img { width: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; }
.cn_banner_placeholder .cn_products .cn__li a div[style*="font-weight: bold"][style*="15px"] { min-height: 2.6em; }
.cn_banner_placeholder .cn_products .cn__li img { border-radius: 10px !important; box-shadow: none !important; mix-blend-mode: multiply; }
.cn_banner_placeholder .cn_products .cn__li a div[style*="font-weight: bold"][style*="15px"] { color: var(--m26-ink) !important; font: 700 15px/1.3 var(--m26-font) !important; }
.cn_banner_placeholder .cn_products .cn__li br { display: none; }
.cn_banner_placeholder .cn_products .cn__li div[style*="26px"] { margin: 10px 0 12px !important; color: var(--m26-ink) !important; font: 800 24px/1.1 var(--m26-font) !important; letter-spacing: -.02em; }
.cn_banner_placeholder .cn_products .cn__li a div[style*="text-transform: uppercase"] { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 18px !important; border-radius: 999px !important; background: var(--m26-ink) !important; color: #fff !important; font: 700 14px/1 var(--m26-font) !important; text-transform: none !important; }
.cn_banner_placeholder .cn_products .cn__li a:hover div[style*="text-transform: uppercase"] { background: var(--m26-green-dark) !important; }
@media (max-width: 767px) { .cn_banner_placeholder .cn_products .cn__li td:first-child > div { aspect-ratio: auto; height: 170px; } }
.cn_banner_placeholder .cn_products .cn__prev,
.cn_banner_placeholder .cn_products .cn__next { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 1px solid var(--m26-line-strong); border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 12, 26, .1); cursor: pointer; }
.cn_banner_placeholder .cn_products .cn__prev { left: -12px; }
.cn_banner_placeholder .cn_products .cn__next { right: -12px; }
.cn_banner_placeholder .cn_products .cn__prev svg,
.cn_banner_placeholder .cn_products .cn__next svg { width: 22px; height: 22px; }
@media (min-width: 1024px) {
	.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html p,
	.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html span,
	.cn_banner_placeholder .cn_content:has(.cn_products) .cn_html strong { font-size: 32px !important; }
	.cn_banner_placeholder .cn_products .cn__prev { left: -20px; }
	.cn_banner_placeholder .cn_products .cn__next { right: -20px; }
}

/* --------------------------------------------------------------------------
   16-oct · Ficha: banda fija con la categoría (volver al listado) y el nombre del producto. Sale al compactarse la cabecera
   (al bajar), en el sitio del buscador; la lupa vuelve a abrir el buscador. La monta milar2026_header.jsp desde la miga.
   -------------------------------------------------------------------------- */
.m26-pband { display: none; }
.m26-hdr--band.is-compact:not(.is-band-search) .m26-pband { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat btn" "name btn"; align-items: center; column-gap: 12px; min-height: 48px; animation: m26-pband-in .2s var(--m26-ease); }
.m26-hdr--band.is-compact:not(.is-band-search) .m26-bar__search > #buscadorHeader { display: none; }
.m26-pband__cat { grid-area: cat; display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; margin-left: -4px; color: var(--m26-green) !important; font: 700 13px/1.25 var(--m26-font); text-decoration: none !important; }
.m26-pband__cat span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m26-pband__cat .m26-ico { flex: none; width: 18px; height: 18px; }
.m26-pband__cat:hover span { text-decoration: underline; text-underline-offset: 3px; }
.m26-pband__name { grid-area: name; margin: 0; overflow: hidden; color: #fff; font: 700 15px/1.3 var(--m26-font); white-space: nowrap; text-overflow: ellipsis; }
.m26-pband__search { grid-area: btn; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.m26-pband__search:hover { background: rgba(255, 255, 255, .14); }
.m26-pband__search .m26-ico { width: 20px; height: 20px; }
@keyframes m26-pband-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m26-hdr--band.is-compact .m26-pband { animation: none; } }
@media (min-width: 1024px) {
	.m26-pband__name { font-size: 16px; }
}
.m26-img-def { object-fit: contain; background: #F4F3EF; }

/* 18-oct · Aviso «tienda cerrada ahora» junto a las invitaciones a contactar (milar2026_cerrada.jsp) */
.m26-cerrada { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 9px 12px; border-radius: 12px; background: #FFF4DC; color: #5C3D00; font: 500 13.5px/1.4 var(--m26-font); text-align: left; }
.m26-cerrada svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #8A5A00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m26-cerrada b { font-weight: 700; color: #3D2900; }
.m26-advisor .m26-cerrada, .m26-pre .m26-cerrada, .m26-plpdock .m26-cerrada, .m26-hero .m26-cerrada, .m26-panel__aside .m26-cerrada { background: rgba(255, 244, 220, .12); color: #F4E2B8; }
.m26-advisor .m26-cerrada b, .m26-pre .m26-cerrada b, .m26-plpdock .m26-cerrada b, .m26-hero .m26-cerrada b, .m26-panel__aside .m26-cerrada b { color: #FFE7AE; }
.m26-advisor .m26-cerrada svg, .m26-pre .m26-cerrada svg, .m26-plpdock .m26-cerrada svg, .m26-hero .m26-cerrada svg, .m26-panel__aside .m26-cerrada svg { stroke: #FFD27A; }
.m26-sheet .m26-cerrada { margin: 4px 0 10px; }
.m26-hero .m26-cerrada { max-width: 560px; }
.m26-cerrada { height: auto !important; flex-grow: 0 !important; align-self: flex-start; }
.m26-advisor > .m26-cerrada, .m26-nozone > .m26-cerrada { grid-column: 1 / -1; margin-top: 4px; } /* 27-oct · en el aviso «sin zona / no está a la venta» de la ficha caía en la columna del icono y la ensanchaba */
.m26-storecard .m26-cerrada { margin-top: 12px; }
/* 18-oct · si el aviso cae en una FILA flexible (p. ej. el pie de la guía de compra), milar2026_cerrada.jsp hace que la fila salte de línea y marca el aviso con --fila para que ocupe la suya. En columnas no se toca (si no, se iba a una segunda columna). */
.m26-cerrada.m26-cerrada--fila { flex: 0 0 100% !important; max-width: 100%; order: 10; }
.m26-guidedoc__foot > .m26-cerrada { margin-top: 2px; }
.m26-drawer__foot .m26-cerrada { margin: 10px 0 0; }
.m26-panel__aside .m26-cerrada { margin: 10px 0 0; }
.m26-catnav > .m26-drawer__foot { margin-top: 8px; } @media (max-width: 1023px) { .m26-catnav:has(.m26-l0.is-open) > .m26-drawer__foot { visibility: hidden; } }
/* 18-oct · menú móvil: «Promociones» como una fila más (icono, texto y flecha), no como un título verde suelto */
.m26-l0--promo > a { color: var(--m26-ink); font-weight: 600; }
.m26-l0__ico--promo { align-items: center; justify-content: center; background: var(--m26-green-soft, #EEF8E6); }
.m26-l0__ico--promo svg { width: 20px; height: 20px; fill: none; stroke: var(--m26-green-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
	.m26-l0--promo > a .m26-l0__ico, .m26-l0--promo > a .m26-l0__chev { display: none; }
	.m26-l0--promo > a { color: var(--m26-green); font-weight: 700; }
}

/* ==========================================================================
   18-oct · ACCESIBILIDAD (revisión WCAG 2.1/2.2 AA, Ley 11/2023 · EN 301 549). Informe: fronts-local/docs/ACCESIBILIDAD-MILAR.md
   ========================================================================== */
/* 1.4.10 reflujo: a 320 px la cabecera tenía columnas fijas (34 + 217 + 80) y se salía; la cesta quedaba cortada */
/* 1.4.3 contraste: verde de marca (#4FBB00) como texto solo sobre fondo oscuro; sobre claro, el verde de texto (#2E7300, 6,9:1) */
.m26-seo .m26-kicker--green, .m26-cattom__head .m26-kicker--green, .m26-nostock__ahead .m26-kicker--green { color: var(--m26-green-text) !important; }
.m26-hero .m26-btn--green, .m26-hero a.m26-btn--green { color: var(--m26-ink) !important; }
/* el aviso de tienda cerrada sobre la tarjeta oscura de ayuda de promociones */
.m26-promo--ayuda .m26-cerrada { background: rgba(255, 244, 220, .12); }
.m26-promo--ayuda .m26-cerrada, .m26-promo--ayuda .m26-cerrada span { color: #F4E2B8 !important; }
.m26-promo--ayuda .m26-cerrada b { color: #FFE7AE; }
.m26-promo--ayuda .m26-cerrada svg { stroke: #FFD27A; }
/* 1.4.1 enlaces dentro de texto distinguibles sin color */
.m26-pg-crumbs a, .m26-nostock__terms a, .m26-sheet__note a { text-decoration: underline !important; text-underline-offset: 3px; }
/* 2.4.1 saltar al contenido (milar2026_header.jsp, cajaCabeceraPasosCompra.jsp) */
.m26-skip { position: fixed; left: 12px; top: 12px; z-index: 100000; padding: 12px 18px; border-radius: 12px; background: var(--m26-ink); color: #fff !important; font: 700 15px var(--m26-font); text-decoration: none; transform: translateY(-160%); transition: transform .15s; }
.m26-skip:focus { transform: none; outline: 3px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; }
/* 2.5.8 tamaño mínimo de objetivo (24×24): enlaces y botones pequeños que no van dentro de un texto */
.m26-storecard__links a, .m26-storecard__change, .m26-pdpshop__change, .m26-co__more, .m26-co-page .btnLinkStores, .m26-co-page .retirada_moreInfo > a, .m26-bp__bar { min-height: 24px; display: inline-flex; align-items: center; }
.m26-bp__bar { position: relative; }
.m26-bp__bar::before { content: ""; position: absolute; inset: -6px -2px; }
.m26-pdp-page .splide__pagination__page { position: relative; }
.m26-pdp-page .splide__pagination__page::before { content: ""; position: absolute; inset: -8px; }
.m26-pdp-page .splide__pagination { gap: 10px; }
/* 2.4.7 foco visible en campos que se quitaban el contorno */
.m26-cp .m26-cp__form input:focus-visible { box-shadow: 0 0 0 3px rgba(79, 187, 0, .45) !important; }
.m26-search__form:focus-within { box-shadow: 0 0 0 2px var(--m26-ink), 0 0 0 5px rgba(79, 187, 0, .55); }
.m26-cp .m26-cp__form input:focus-visible { box-shadow: 0 0 0 2px var(--m26-ink), 0 0 0 5px rgba(79, 187, 0, .45) !important; }
/* 1.4.11 · indicador de foco: el verde de marca da 2,5:1 sobre blanco (se piden 3:1). Todos los contornos de foco usan ahora
   --m26-focus: tinta sobre fondos claros (17:1) y blanco dentro de los bloques oscuros. Mismo grosor y separación que antes. */
:root { --m26-focus: var(--m26-ink); }
.m26-hero, .m26-ft, .m26-pre__help, .m26-advisor, .m26-plpdock, .m26-panel__aside, .m26-cohdr, .m26-skip { --m26-focus: #fff; }
.m26-skip:focus { outline-color: var(--m26-green); }
.m26-search__form:focus-within { box-shadow: 0 0 0 2px var(--m26-ink), 0 0 0 5px rgba(79, 187, 0, .55); }
.m26-cp .m26-cp__form input:focus-visible { box-shadow: 0 0 0 2px var(--m26-ink), 0 0 0 5px rgba(79, 187, 0, .45) !important; }
/* 2.4.11 (WCAG 2.2) · el foco no queda tapado: al tabular, el navegador deja hueco bajo la cabecera fija y sobre las barras
   fijas de abajo (compra de la ficha en móvil, barra del listado). */
html { scroll-padding-top: calc(var(--m26-hdr-h, 72px) + 12px); }
@media (max-width: 1023.98px) { html:has(.m26-pdp-page, .m26-plpdock) { scroll-padding-bottom: 120px; } }
/* 20-oct · subfamilia como enlace en la familia actual (SEO): mismo aspecto que el botón */
a.m26-l1__btn { box-sizing: border-box; text-decoration: none !important; color: var(--m26-ink) !important; }
a.m26-l1__btn:hover { color: var(--m26-ink) !important; }

/* --------------------------------------------------------------------------
   26-oct · CAMPAÑAS DE NOVIEMBRE (home.campana = adelantate | blackfriday; vista previa ?campana=…)
   Estilo de las creatividades de la agencia, con lo nuestro: negro, rótulo grueso, condensado e inclinado (Archivo 800,
   comprimida e inclinada por CSS: las fuentes de la agencia, Chreed Oblique y Avant Garde, son de pago) y la etiqueta verde
   sesgada «¡Adelántate!». Franja en todas las páginas (milar2026_header.jsp) y primera diapositiva del hero (home).
   -------------------------------------------------------------------------- */
.m26-lettering {
	display: inline-block;
	font-family: var(--m26-font);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: .9;
	transform: skewX(-11deg) scaleX(.86);
	transform-origin: 0 100%;
}
.m26-tag-slant {
	display: inline-block;
	padding: .18em .7em .22em .6em;
	background: var(--m26-green);
	color: #fff;
	font-family: var(--m26-font);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
	clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}
.m26-campbar { background: #000; color: #fff; border-bottom: 1px solid var(--m26-ink-3); }
.m26-campbar__in { display: flex; align-items: center; gap: 10px 18px; min-height: 46px; color: #fff; text-decoration: none; }
.m26-campbar__in:hover { color: #fff; }
.m26-campbar__in:hover .m26-campbar__go { color: #7CD63A; }
.m26-campbar__lt { flex: none; font-size: 22px; }
.m26-campbar .m26-tag-slant { font-size: 16px; }
.m26-campbar__txt { font-size: 14px; font-weight: 600; color: var(--m26-muted-on-ink); }
.m26-campbar__cd { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--m26-green); color: var(--m26-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.m26-campbar__go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--m26-green); font-size: 14px; font-weight: 800; }
.m26-campbar__go .m26-ico { width: 16px; height: 16px; }
@media (max-width: 767px) {
	.m26-campbar__in { min-height: 40px; gap: 10px; }
	.m26-campbar__lt { font-size: 18px; }
	.m26-campbar .m26-tag-slant { font-size: 14px; }
	.m26-campbar__txt { display: none; }
	.m26-campbar__cd { font-size: 12px; }
	.m26-campbar__go { font-size: 13px; }
}

/* 29-oct · QA MIL-006: «Ver producto» en las tarjetas (home y listados). Visual: el clic lo recibe el enlace que cubre la tarjeta. */
.m26-card__ver { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin-top: 10px; padding: 0 16px; border: 1.5px solid var(--m26-ink); border-radius: 999px; color: var(--m26-ink); font: 700 14px/1 var(--m26-font); pointer-events: none; transition: background-color .2s var(--m26-ease), color .2s var(--m26-ease); }
.m26-card__ver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--m26-ease); }
.m26-card:hover .m26-card__ver { background: var(--m26-ink); color: #fff; }
.m26-card:hover .m26-card__ver svg { transform: translateX(3px); }
@media (max-width: 639px) { .m26-card__ver { min-height: 38px; font-size: 13px; } }

/* 29-oct · QA MIL-001: burbuja del asesor recogida al bajar (móvil): asoma 18 px por la derecha, sigue siendo pulsable */
@media (max-width: 767px) {
	#sonar-fab { transition: transform .3s var(--m26-ease), opacity .3s var(--m26-ease) !important; }
	html.m26-fab-min #sonar-fab { transform: translateX(36px) scale(.85) !important; opacity: .85; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { #sonar-fab { transition: none !important; } }

/* 29-oct · QA MIL-002: en portátiles (~1366 px) el menú principal medía 1.386 px y no cabía («Guías» cortado). Sin tocar los
   textos (vienen del gestor): menos relleno por debajo de 1440 px y, por debajo de 1280 px, letra algo menor y las opciones
   largas («Pequeño Electrodoméstico») a dos líneas en vez de salirse. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.m26-l0__btn, .m26-l0--link > a { padding: 0 8px; }
	.m26-l0list { gap: 0; padding: 0 calc(var(--m26-gutter) - 8px) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.m26-l0__btn, .m26-l0--link > a { padding: 0 6px; font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; }
	.m26-l0__txt { max-width: 7.5em; }
	.m26-l0list { justify-content: space-between; }
}

/* 29-oct · QA MIL-038: las ventanas de Connectif (newsletter, carrito abandonado…: popup, pantalla completa, lateral y barra)
   salían encima de nuestros paneles abiertos (filtros, menú, hojas, selector de CP, visor, guía) y cortaban la tarea. Mientras
   haya uno abierto se ocultan con visibility (siguen en la página: Connectif no las da por cerradas ni pierde la impresión) y
   vuelven al cerrarlo. No se toca su configuración ni sus eventos. */
:is(html.m26-filters-open, html.m26-menu-open, html.m26-sheet-open, html.m26-viewer-open,
	html:has(#defaultZipCodeId[style*="display: block"]), html:has(.m26-guidedoc.is-open))
	:is([class^="cn_content_backdrop"], [class*=" cn_content_backdrop"], [class^="cn_content_slide_in-"], [class*=" cn_content_slide_in-"],
		.cn_content_type_popup, .cn_content_type_full-screen, .cn_content_type_slide-in, .cn_content_type_floating-bar) {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* 29-oct · QA MIL-056: botón dentro del aviso de tienda cerrada (cesta) */
.m26-cerrada__cta { color: inherit !important; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.m26-cerrada__cta:hover { text-decoration-thickness: 2px !important; }

/* 29-oct · QA MIL-005: en el menú del móvil «Tiendas» (span.m26-link, enlace por encodeurl) no tenía estilo de chip y la fila
   de chips se cortaba con scroll horizontal: mismo chip para los dos tipos y la fila salta de línea. */
.m26-drawer__quick { flex-wrap: wrap; overflow-x: visible; }
.m26-drawer__quick .m26-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--m26-line-strong); border-radius: 999px; color: var(--m26-ink); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }

/* 29-oct · franja de campaña fija con la cabecera; en el móvil, al bajar (cabecera .is-compact), versión reducida como en
   Euronics: una línea fina con la etiqueta, la cuenta atrás (Black Friday) y solo la flecha de «Ver recomendados» */
.m26-campbar__in { transition: min-height .2s var(--m26-ease, ease); }
@media (max-width: 767px) {
	.m26-hdr.is-compact .m26-campbar__in { min-height: 28px; gap: 8px; }
	.m26-hdr.is-compact .m26-campbar__lt { font-size: 14px; }
	.m26-hdr.is-compact .m26-campbar .m26-tag-slant { padding-block: 1px !important; font-size: 12px; }
	.m26-hdr.is-compact .m26-campbar__cd { padding: 1px 8px; font-size: 11px; }
	.m26-hdr.is-compact .m26-campbar__go { font-size: 0; gap: 0; }
	.m26-hdr.is-compact .m26-campbar__go .m26-ico { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .m26-campbar__in { transition: none; } }
/* 02-nov · menú móvil: el panel de familia espera fuera a la derecha (translateX 100%) y el primer nivel dejaba arrastrar en horizontal hasta él (pantalla en blanco). Sin scroll horizontal; el panel sigue entrando igual. */
@media (max-width: 1023px) { .m26-catnav { overflow-x: hidden; } }
/* 02-nov · menú móvil: los accesos rápidos (Promociones, Tiendas, Mi pedido…) van debajo de las categorías, dentro de .m26-catnav */
.m26-catnav > .m26-drawer__quick { margin: 0; padding: 16px 16px 4px !important; list-style: none; }
/* 02-nov · cabecera fija compacta en móvil: al bajar (.is-compact) todo en una línea, como Euronics y Tien21:
   menú · símbolo de Milar · buscador · cesta. «Mi cuenta» vuelve al subir (y está en el menú). Solo CSS: mismo marcado y enlaces. */
@media (max-width: 1023px) {
	.m26-hdr.is-compact .m26-bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "menu logo search actions" "store store store store"; column-gap: 6px; padding-block: 6px; }
	.m26-hdr.is-compact .m26-bar__logo { width: 24px; overflow: hidden; }
	.m26-hdr.is-compact .m26-logo { padding: 0; }
	.m26-hdr.is-compact .m26-logo img { max-width: none; }
	.m26-hdr.is-compact .m26-bar__search { padding: 0 !important; }
	.m26-hdr.is-compact .m26-bar__actions > :not(.m26-cart) { display: none; }
	.m26-hdr.is-compact .m26-bar__actions { margin-right: -8px; }
	/* ficha: la banda con la categoría y el nombre ocupa el sitio del buscador, en la misma línea */
	.m26-hdr--band.is-compact:not(.is-band-search) .m26-pband { min-height: 44px; column-gap: 8px; }
	.m26-hdr--band.is-compact:not(.is-band-search) .m26-pband__name { font-size: 14px; }
	.m26-hdr--band.is-compact:not(.is-band-search) .m26-pband__search { width: 40px; height: 40px; }
}
/* 02-nov · menú móvil: «Tiendas» como entrada principal, encima de Promociones y Guías (es un <span encodeurl>, no un <a>, como el acceso rápido que había) */
.m26-l0--tiendas { display: none; }
@media (max-width: 1023px) {
	.m26-l0--tiendas { display: block; }
	.m26-l0--tiendas > .m26-link { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 16px 6px 18px; color: var(--m26-ink); font-size: 16px; font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer; }
	.m26-l0--tiendas > .m26-link:hover, .m26-l0--tiendas > .m26-link:focus-visible { background: var(--m26-bone); }
	.m26-l0--tiendas .m26-l0__txt { flex: 1; min-width: 0; }
	.m26-l0__ico--tiendas { align-items: center; justify-content: center; background: var(--m26-ink); }
	.m26-l0__ico--tiendas svg { width: 20px; height: 20px; fill: none; stroke: var(--m26-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* 03-nov · rótulo de campaña con Anton (Google Fonts, licencia OFL, servida desde nuestro estático), más parecida a la letra
   del banner de la agencia (de pago) que la Archivo comprimida. Ya es condensada: solo se inclina. Si no carga, Archivo. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.m26-lettering { font-family: 'Anton', var(--m26-font); font-weight: 400; letter-spacing: .005em; line-height: .95; transform: skewX(-10deg); }