/* Music Peru — global styles. Design tokens are inline (pixel-exact from Claude Design). */
:root { --mp-gold: #b3893c; --mp-red: #e01f26; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #16130f;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mp-admin { background: #f4f2ee; }
a { color: #16130f; text-decoration: none; }
a:hover { color: #b3893c; }
img { max-width: 100%; }
::selection { background: #f4d79a; }

/* keyframes usados por el diseño */
@keyframes mpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mpGlow { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes mpEq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes mpSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* accesibilidad: foco visible sin alterar el diseño */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #b3893c; outline-offset: 2px;
}

/* scroll horizontal sin barra (chips, carruseles móviles) */
.mp-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.mp-scroll::-webkit-scrollbar { display: none; }

/* placeholder de imagen de producto (cliente cargará la foto real) */
.mp-ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #efece6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 14px; overflow: hidden;
}
.mp-ph__icon {
  width: 34px; height: 30px; border-radius: 6px; border: 2px solid #c9c1b4;
  position: relative; flex: 0 0 auto;
}
.mp-ph__icon::before {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid #c9c1b4; top: 4px; left: 5px;
}
.mp-ph__icon::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 11px;
  background:
    linear-gradient(135deg, transparent 45%, #c9c1b4 45%, #c9c1b4 60%, transparent 60%),
    linear-gradient(135deg, transparent 55%, #c9c1b4 55%, #c9c1b4 72%, transparent 72%);
}
.mp-ph__label { font-family: 'Manrope', sans-serif; font-size: 11.5px; line-height: 1.35; color: #9a8f7d; font-weight: 600; max-width: 90%; }
.mp-ph--sm .mp-ph__icon { width: 26px; height: 23px; }
.mp-ph--sm .mp-ph__label { font-size: 10px; }
.mp-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* imagen que llena su contenedor (banners, editorial, mega menú) */
.mp-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* toast "añadido al carrito" */
.mp-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #14110d; color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
  padding: 13px 22px; border-radius: 12px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.mp-toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }
.mp-toast span { color: #6ee7a0; }

/* ===== Admin ===== */
.mp-adm-scroll { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #c9c1b4 #efece6; }
.mp-adm-scroll::-webkit-scrollbar { width: 12px; }
.mp-adm-scroll::-webkit-scrollbar-track { background: #efece6; }
.mp-adm-scroll::-webkit-scrollbar-thumb { background: #c9c1b4; border-radius: 8px; border: 3px solid #efece6; }
.mp-adm-scroll::-webkit-scrollbar-thumb:hover { background: #b3893c; }
.fld { width: 100%; border: 1px solid #ddd6ca; border-radius: 11px; padding: 12px 14px; font-size: 14px; color: #16130f; outline: 0; background: #fff; font-family: 'Manrope', sans-serif; }
.fld:focus { border-color: #b3893c; box-shadow: 0 0 0 3px rgba(179,137,60,.14); }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #8a8175; margin-bottom: 7px; display: block; }
.adm-rename { width: 100%; border: 0; outline: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; background: transparent; padding: 0; color: #16130f; }
.adm-rename:focus { color: #b3893c; }