/* Categoria MPV: keyframes del prototipo + hovers regenerados */
.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  

  @keyframes mpvFloatSm { 0%,100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
  @keyframes mpvPulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.2); opacity: .9; } }
[data-hv="c0"]:hover { color: #7c3444 !important; }
[data-hv="c1"]:hover { color: #7c3444 !important; }
[data-hv="c2"]:hover { color: #7c3444 !important; }
[data-hv="c3"]:hover { transform: translateY(-2px) !important; background: #2f4a37 !important; color: #fff !important; }
[data-hv="c6"]:hover { background: #7c3444 !important; color: #fff !important; }
[data-hv="c7"]:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(36,56,43,.14) !important; }
[data-hv="c8"]:hover { transform: translateY(-2px) !important; }
[data-hv="c9"]:hover { color: #f4ead2 !important; }
[data-hv="c10"]:hover { color: #f4ead2 !important; }
[data-hv="c11"]:hover { color: #f4ead2 !important; }
[data-hv="c12"]:hover { color: #f4ead2 !important; }
[data-hv="c4"]:hover { color: #fff !important; }
[data-hv="c5"]:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 38px rgba(36,56,43,.12) !important; }
body.mpv-categoria-page { margin: 0; }

/* ============================================================
   Categoria: ordenado funcional, chip "Mostrando" y responsive
   (feedback 2026-07-18)
   ============================================================ */
/* Chip "Mostrando X productos" con presencia */
.mpv-mostrando {
	display: inline-block !important;
	background: var(--mpv-paper) !important;
	border: 1px solid var(--mpv-linea) !important;
	border-radius: 999px !important;
	padding: 9px 18px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--mpv-ink) !important;
	box-shadow: var(--mpv-sombra);
}

/* Botones de ordenar: estado activo/inactivo controlado por JS */
.mpv-sort-btn {
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.mpv-sort-btn.mpv-sort-activo {
	background: var(--mpv-ink) !important;
	color: var(--mpv-crema) !important;
	border-color: var(--mpv-ink) !important;
}
.mpv-sort-btn:not(.mpv-sort-activo) {
	background: transparent !important;
	color: var(--mpv-ink) !important;
}

@media (max-width: 700px) {
	/* Ordenar: sin rotulo y chips centrados */
	.mpv-ordenar-label { display: none !important; }
	.mpv-ordenar { justify-content: center !important; width: 100%; }
	.mpv-mostrando-row { justify-content: center !important; }
	.mpv-mostrando { display: block !important; text-align: center; }
	/* Banda de beneficios del hero: 2x2 compacta */
	.mpv-cat-benef {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px 14px !important;
		text-align: left;
		animation: none !important;
		white-space: normal !important;
	}
	.mpv-cat-benef span {
		font-size: 12px !important;
		white-space: normal !important;
	}
	/* Grid de productos a 2 columnas tambien en categoria */
	.mpv-catgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.mpv-catgrid h3 { font-size: 14.5px !important; }
	.mpv-catgrid .mpv-qtyrow { gap: 8px; }
	.mpv-catgrid .mpv-qtyrow button { width: 26px; height: 26px; min-width: 26px; font-size: 14px; }
	.mpv-catgrid a[data-mpv-add] { font-size: 11.5px !important; }
}