/* MiniSupu — Juan Gallardo by SupuDigital · https://www.supudigital.es
 * Todo va bajo #msu-panel: la especificidad de ID gana a los estilos globales del tema
 * (p. ej. :is(button,[type=button]) de Hello Commerce) sin usar !important.
 * Modo "adaptar": cada variable cae en cascada a Elementor / Hello Commerce / theme.json. */

#msu-panel {
	--msu-bg: var(--wp--preset--color--base, #fff);
	--msu-text: var(--e-global-color-text, var(--wp--preset--color--contrast, #1f2328));
	--msu-muted: color-mix(in srgb, var(--msu-text) 68%, var(--msu-bg));
	--msu-surface: color-mix(in srgb, var(--msu-text) 4%, var(--msu-bg));
	--msu-border: color-mix(in srgb, var(--msu-text) 13%, var(--msu-bg));
	--msu-accent: var(--e-global-color-accent, var(--e-global-color-primary, var(--wp--preset--color--primary, #1f2328)));
	--msu-btn-bg: var(--ehc-button-background-color, var(--msu-accent));
	--msu-btn-color: var(--ehc-button-color, #fff);
	--msu-dark: color-mix(in srgb, var(--msu-text) 92%, #000);
	--msu-success: #1f7a3a;
	--msu-radius: 8px;
	--msu-font: inherit;
	--msu-size: 16px;
	--msu-shadow: 0 12px 40px rgb(0 0 0 / .18);
	--msu-overlay: .45;
	--msu-width: 420px;
	--msu-qty-h: 30px;
	--msu-qty-btn: 26px;
	--msu-qty-input: 28px;
	--msu-qty-font: .875em;
	--msu-strike: #e20f1f;
	--msu-ease: cubic-bezier(.16, 1, .3, 1);
	--msu-gap: 20px;

	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--msu-text);
	font-family: var(--msu-font);
	font-size: var(--msu-size);
	line-height: 1.45;
	overflow: hidden;
}
#msu-panel::backdrop { background: transparent; }
/* Capa de oscurecido propia: solo se anima su opacidad (composición en GPU, sin repintar la página). */
#msu-panel .msu__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / var(--msu-overlay)); opacity: 0; }
#msu-panel.is-in .msu__scrim { opacity: 1; }
/* scrollbar-gutter evita que la página salte al ocultar la barra de desplazamiento. */
html.msu-lock { overflow: hidden; scrollbar-gutter: stable; }

#msu-panel *,
#msu-panel *::before,
#msu-panel *::after { box-sizing: border-box; }
#msu-panel ::selection { background: color-mix(in srgb, var(--msu-accent) 22%, transparent); color: inherit; }
#msu-panel :focus-visible { outline: 2px solid var(--msu-accent); outline-offset: 2px; }

/* Panel */
#msu-panel .msu__sheet {
	position: absolute;
	top: 0;
	right: 0;
	width: min(var(--msu-width), 100vw);
	height: 100%;
	height: 100dvh;
	background: var(--msu-bg);
	box-shadow: var(--msu-shadow);
	transform: translateX(100%);
	/* Aísla el panel: lo que cambie dentro no recalcula la página de detrás. */
	contain: layout paint style;
}
#msu-panel[data-msu-side="left"] .msu__sheet { right: auto; left: 0; transform: translateX(-100%); }
#msu-panel.is-in .msu__sheet { transform: none; }
#msu-panel .msu__body { display: flex; flex-direction: column; height: 100%; }

/* Reset de controles propios frente a estilos globales del tema */
#msu-panel button,
#msu-panel input,
#msu-panel a {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}
#msu-panel button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	line-height: 1.2;
	cursor: pointer;
	min-height: 0;
	width: auto;
}
#msu-panel button:disabled { cursor: not-allowed; opacity: .4; }
#msu-panel a { text-decoration: none; }
#msu-panel p,
#msu-panel ul,
#msu-panel dl,
#msu-panel dd { margin: 0; padding: 0; }
#msu-panel ul { list-style: none; }
#msu-panel h2 { margin: 0; }

#msu-panel .msu-icon { flex: none; display: block; }
#msu-panel .msu-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--msu-radius);
	color: var(--msu-muted);
	transition: color .15s, background-color .15s;
}
#msu-panel .msu-iconbtn:hover { color: var(--msu-text); background: var(--msu-surface); }

/* Cabecera */
#msu-panel .msu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 12px var(--msu-gap);
	border-bottom: 1px solid var(--msu-border);
	flex: none;
}
#msu-panel .msu__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: inherit;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--msu-text);
}
#msu-panel .msu__badge { font-size: .8125rem; font-weight: 400; color: var(--msu-muted); }

/* Envío gratis */
#msu-panel .msu__ship { padding: 12px var(--msu-gap) 14px; background: var(--msu-surface); flex: none; }
#msu-panel .msu__ship-text { display: flex; align-items: center; gap: 8px; font-size: .875em; }
#msu-panel .msu__ship-text .msu-icon { color: var(--msu-accent); }
#msu-panel .msu__ship.is-done .msu-icon { color: var(--msu-success); }
#msu-panel .msu__ship-text strong,
#msu-panel .msu__ship-text .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
#msu-panel .msu__ship-track { height: 6px; margin-top: 10px; border-radius: 99px; background: var(--msu-border); overflow: hidden; }
#msu-panel .msu__ship-fill {
	display: block;
	height: 100%;
	background: var(--msu-accent);
	transform: scaleX(var(--msu-p, 0));
	transform-origin: left;
	transition: transform .4s var(--msu-ease);
}
#msu-panel .msu__ship.is-done .msu__ship-fill { background: var(--msu-success); }

/* Líneas */
#msu-panel .msu__items {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--msu-border) transparent;
}
#msu-panel .msu-item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr 44px;
	gap: 14px;
	padding: 16px 8px 16px var(--msu-gap);
	border-bottom: 1px solid var(--msu-border);
	transition: opacity .15s;
}
#msu-panel .msu-item[aria-busy="true"] { opacity: .55; pointer-events: none; }
#msu-panel .msu-item__thumb { width: 100%; aspect-ratio: 1; border-radius: calc(var(--msu-radius) * .75); overflow: hidden; background: var(--msu-surface); }
#msu-panel .msu-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
#msu-panel .msu-item__body { min-width: 0; }
#msu-panel .msu-item__name { font-size: .9375em; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#msu-panel .msu-item__name a:hover { color: var(--msu-accent); }
#msu-panel .msu-item__meta { margin-top: 4px; font-size: .8125em; color: var(--msu-muted); }
#msu-panel .msu-item__meta dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 0; }
#msu-panel .msu-item__meta dt { font-weight: 500; margin: 0; }
#msu-panel .msu-item__meta dd { margin: 0; }
#msu-panel .msu-item__meta p { margin: 0; display: inline; }
#msu-panel .msu-item__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
#msu-panel .msu-item__price { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
#msu-panel .msu-item__price del { display: block; font-size: .8125em; color: var(--msu-strike); text-decoration-color: currentColor; }
#msu-panel .msu-item__total { font-weight: 600; white-space: nowrap; }
#msu-panel .msu-item__price .tax_label { display: none; }
#msu-panel .msu-item__remove { align-self: start; margin-top: -10px; }
#msu-panel .msu-item__error { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: .8125em; color: #b3261e; }
#msu-panel .msu-item__error button { text-decoration: underline; text-underline-offset: 3px; min-height: 44px; font-weight: 600; }

/* Cantidad */
#msu-panel .msu-qty {
	display: inline-flex;
	align-items: stretch;
	height: var(--msu-qty-h);
	border: 1px solid var(--msu-border);
	border-radius: var(--msu-radius);
	overflow: hidden;
	flex: none;
}
#msu-panel .msu-qty__btn { width: var(--msu-qty-btn); display: grid; place-items: center; color: var(--msu-text); transition: background-color .15s; }
#msu-panel .msu-qty__btn:hover:not(:disabled) { background: var(--msu-surface); }
#msu-panel .msu-qty__input {
	width: var(--msu-qty-input);
	min-height: 0;
	height: auto;
	font-size: var(--msu-qty-font);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
#msu-panel .msu-qty__input::-webkit-inner-spin-button,
#msu-panel .msu-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#msu-panel .msu-qty .msu-icon { width: calc(var(--msu-qty-h) * .5); height: calc(var(--msu-qty-h) * .5); }
@media (pointer: coarse) {
	#msu-panel .msu-qty { height: max(var(--msu-qty-h), 36px); }
	#msu-panel .msu-qty__btn { width: max(var(--msu-qty-btn), 32px); }
}
#msu-panel .msu-qty--fixed { align-items: center; padding: 0 12px; font-size: .875em; color: var(--msu-muted); }

/* Pie */
#msu-panel .msu__foot {
	flex: none;
	padding: 16px var(--msu-gap) calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--msu-border);
	background: var(--msu-bg);
}
#msu-panel .msu__sums { display: grid; gap: 4px; }
#msu-panel .msu__sum { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
#msu-panel .msu__sum dt { font-weight: 500; }
#msu-panel .msu__sum dd { font-size: 1.125em; font-weight: 700; text-align: right; }
#msu-panel .msu__sum .tax_label { display: block; font-size: .6875rem; font-weight: 400; color: var(--msu-muted); }
#msu-panel .msu__sum--save dd { width: 100%; text-align: right; font-size: .875em; font-weight: 600; color: var(--msu-success); }
#msu-panel .msu__note { margin-top: 4px; font-size: .75em; color: var(--msu-muted); }
#msu-panel .msu__actions { display: grid; gap: 8px; margin-top: 14px; }
#msu-panel .msu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: var(--msu-radius);
	font-weight: 600;
	text-align: center;
	transition: background-color .15s, color .15s, border-color .15s;
}
#msu-panel .msu-btn--primary { background: var(--msu-btn-bg); color: var(--msu-btn-color); }
#msu-panel .msu-btn--primary:hover { background: color-mix(in srgb, var(--msu-btn-bg) 82%, #000); color: var(--msu-btn-color); }
#msu-panel .msu-btn--ghost { border: 1px solid var(--msu-border); color: var(--msu-text); }
#msu-panel .msu-btn--ghost:hover { border-color: var(--msu-text); }
#msu-panel .msu__continue {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 4px;
	font-size: .875em;
	color: var(--msu-muted);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	line-height: 44px;
}
#msu-panel .msu__continue:hover { color: var(--msu-text); }

/* Vacío */
#msu-panel .msu__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px var(--msu-gap); text-align: center; }
#msu-panel .msu__empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--msu-surface); color: var(--msu-muted); }
#msu-panel .msu__empty-icon .msu-icon { width: 28px; height: 28px; }
#msu-panel .msu__empty-title { font-size: 1.125em; font-weight: 600; }
#msu-panel .msu__empty-desc { color: var(--msu-muted); max-width: 32ch; }
#msu-panel .msu__empty .msu-btn { margin-top: 16px; min-width: 220px; }

/* Error general y carga */
#msu-panel .msu__fail { margin: auto; padding: 32px var(--msu-gap); text-align: center; display: grid; gap: 12px; justify-items: center; }
#msu-panel .msu-skel { display: block; border-radius: 6px; background: var(--msu-surface); }
#msu-panel .msu-skel--title { width: 40%; height: 20px; }
#msu-panel .msu-skel--thumb { width: 72px; height: 72px; }
#msu-panel .msu-skel--lines { height: 44px; grid-column: 2 / -1; }
#msu-panel .msu-item--skel { grid-template-columns: 72px 1fr; }

/* Accesibilidad */
.msu-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;
}

/* Plantilla Compacta */
#msu-panel[data-msu-template="compact"] { --msu-gap: 16px; }
#msu-panel[data-msu-template="compact"] .msu-item {
	grid-template-columns: 36px minmax(0, 1fr) auto auto 32px;
	align-items: center;
	gap: 8px;
	padding: 10px 4px 10px var(--msu-gap);
}
#msu-panel[data-msu-template="compact"] .msu-item__thumb { border-radius: 4px; }
#msu-panel[data-msu-template="compact"] .msu-item__name { font-size: .875em; -webkit-line-clamp: 2; }
#msu-panel[data-msu-template="compact"] .msu-item__meta { font-size: .75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#msu-panel[data-msu-template="compact"] .msu-item__meta dl { display: block; }
#msu-panel[data-msu-template="compact"] .msu-item__meta dt,
#msu-panel[data-msu-template="compact"] .msu-item__meta dd { display: inline; }
#msu-panel[data-msu-template="compact"] .msu-item__meta dd::after { content: " · "; }
#msu-panel[data-msu-template="compact"] .msu-item__meta dd:last-child::after { content: ""; }
#msu-panel[data-msu-template="compact"] .msu-item__price { font-size: .875em; }
#msu-panel[data-msu-template="compact"] .msu-item__remove { width: 32px; height: 36px; margin: 0; }
#msu-panel[data-msu-template="compact"] .msu__actions { grid-template-columns: 1fr auto; }
#msu-panel[data-msu-template="compact"] .msu__ship { padding: 10px var(--msu-gap) 12px; }
@media (pointer: coarse) {
	#msu-panel[data-msu-template="compact"] .msu-item__remove { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
	#msu-panel[data-msu-template="compact"] .msu-item { grid-template-columns: 40px minmax(0, 1fr) auto 44px; }
	#msu-panel[data-msu-template="compact"] .msu-qty { grid-column: 2; grid-row: 2; justify-self: start; }
	#msu-panel[data-msu-template="compact"] .msu-item__price { grid-column: 3; grid-row: 1 / 3; }
	#msu-panel[data-msu-template="compact"] .msu-item__remove { grid-column: 4; grid-row: 1 / 3; }
}

/* Plantilla Tarjetas */
#msu-panel[data-msu-template="cards"] .msu__items { padding: 12px 16px; background: var(--msu-surface); }
#msu-panel[data-msu-template="cards"] .msu-item { display: block; padding: 0; border: 0; }
#msu-panel[data-msu-template="cards"] .msu-item + .msu-item { margin-top: 12px; }
#msu-panel[data-msu-template="cards"] .msu-card {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	padding: 12px 44px 12px 12px;
	border: 1px solid var(--msu-border);
	border-radius: var(--msu-radius);
	background: var(--msu-bg);
	box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}
#msu-panel[data-msu-template="cards"] .msu-item__price { text-align: left; margin: 6px 0 10px; }
#msu-panel[data-msu-template="cards"] .msu-item__price del { display: inline; margin-right: 6px; }
#msu-panel[data-msu-template="cards"] .msu-item__remove { position: absolute; top: 2px; right: 2px; margin: 0; }
#msu-panel[data-msu-template="cards"] .msu-item__error { margin-top: 8px; }
#msu-panel[data-msu-template="cards"] .msu__foot {
	--msu-foot-text: #fff;
	background: var(--msu-dark);
	color: var(--msu-foot-text);
	border-top: 0;
}
#msu-panel[data-msu-template="cards"] .msu__note,
#msu-panel[data-msu-template="cards"] .msu__continue { color: color-mix(in srgb, var(--msu-foot-text) 72%, var(--msu-dark)); }
#msu-panel[data-msu-template="cards"] .msu__continue:hover { color: var(--msu-foot-text); }
#msu-panel[data-msu-template="cards"] .msu__sum--save dd { color: color-mix(in srgb, var(--msu-success) 45%, #fff); }
#msu-panel[data-msu-template="cards"] .msu-btn--ghost { border-color: color-mix(in srgb, var(--msu-foot-text) 35%, transparent); color: var(--msu-foot-text); }
#msu-panel[data-msu-template="cards"] .msu-btn--ghost:hover { border-color: var(--msu-foot-text); }

/* Móvil: panel a pantalla completa */
@media (max-width: 640px) {
	#msu-panel .msu__sheet { width: 100vw; }
	#msu-panel { --msu-gap: 16px; font-size: max(16px, var(--msu-size)); }
	/* Pie más bajo: deja ver más productos. */
	#msu-panel .msu__actions { grid-template-columns: 1fr auto; margin-top: 12px; }
	#msu-panel .msu__foot { padding-top: 12px; }
	#msu-panel .msu__note { display: none; }
}

/* Botón del shortcode [msu_cart_button] */
.msu-cartbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.msu-cartbtn .msu-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e20f1f; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.msu-cartbtn .msu-count[data-msu-count="0"] { display: none; }

/* Resaltado breve de la línea recién añadida: confirma la acción. */
@keyframes msu-flash { from { background-color: color-mix(in srgb, var(--msu-accent) 10%, transparent); } to { background-color: transparent; } }
#msu-panel .msu-item--new { animation: msu-flash 1.2s cubic-bezier(.16, 1, .3, 1); }
#msu-panel[data-msu-template="cards"] .msu-item--new { animation: none; }
#msu-panel[data-msu-template="cards"] .msu-item--new .msu-card { animation: msu-flash 1.2s cubic-bezier(.16, 1, .3, 1); }

/* Movimiento reducido: sin desplazamientos (el JS ya solo hace fundidos); se mantiene el resaltado. */
@media (prefers-reduced-motion: reduce) {
	#msu-panel .msu__ship-fill,
	#msu-panel .msu-skel { transition: none; animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
	#msu-panel .msu-skel { background: linear-gradient(90deg, var(--msu-surface) 25%, var(--msu-border) 50%, var(--msu-surface) 75%) 0 0 / 200% 100%; animation: msu-shimmer 1.2s linear infinite; }
}
@keyframes msu-shimmer { to { background-position: -200% 0; } }