/* Oier Music: tienda de mashups, listado de mixes y páginas individuales.
   Pensado para el esquema oscuro de DJ Rainflow; colores ajustables abajo. */
.om-collection, .om-single, .om-modal {
	--om-accent: #d71362;
	--om-accent-2: #ff3d8b;
	--om-card: rgba(255, 255, 255, 0.04);
	--om-card-hover: rgba(255, 255, 255, 0.08);
	--om-line: rgba(255, 255, 255, 0.12);
	--om-text: #fff;
	--om-muted: rgba(255, 255, 255, 0.62);
	--om-radius: 10px;
}

.om-collection { margin: 0 0 2.5em; color: var(--om-text); }
.om-collection [hidden], .om-single [hidden] { display: none !important; }
.om-ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }

/* Cabecera y filtros */
.om-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.2em; flex-wrap: wrap; }
.om-title { margin: 0 !important; }
.om-head-text .om-kicker { margin: 0 0 0.2em !important; }
.om-total { display: inline-block; vertical-align: middle; font-size: 0.4em; font-weight: 700; line-height: 1; padding: 0.35em 0.6em; border-radius: 999px; background: var(--om-card-hover); color: var(--om-muted); letter-spacing: 0; }
.om-showall-wrap { margin: 1em 0 0 !important; text-align: center; }
.om-collection + .om-collection { margin-top: 3.5em; }
.om-head-actions { display: flex; align-items: center; gap: 1em; margin-left: auto; }
.om-more { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.om-toggle { display: inline-flex; border: 1px solid var(--om-line); border-radius: 8px; overflow: hidden; }
.om-toggle button { background: transparent; color: var(--om-muted); border: 0; padding: 0.45em 0.6em; line-height: 1; cursor: pointer; font-size: 1.1em; border-radius: 0; }
.om-toggle button[aria-pressed="true"] { background: var(--om-accent); color: #fff; }
.om-filters { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin-bottom: 1.4em; }
.om-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; margin: 0; }
.om-search .om-ico { position: absolute; left: 0.8em; color: var(--om-muted); pointer-events: none; }
.om-search input { width: 100%; padding: 0.7em 0.9em 0.7em 2.3em !important; border-radius: 8px !important; margin: 0 !important; }
.om-filters select { padding: 0.65em 0.8em !important; border-radius: 8px !important; margin: 0 !important; width: auto !important; }
.om-chips { display: flex; flex-wrap: wrap; gap: 0.4em; width: 100%; }
.om-chip { background: var(--om-card); color: var(--om-muted); border: 1px solid var(--om-line); border-radius: 999px; padding: 0.35em 0.9em; font-size: 0.85em; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.om-chip:hover { color: #fff; }
.om-chip.is-active { background: var(--om-accent); border-color: var(--om-accent); color: #fff; }
.om-noresults, .om-empty { color: var(--om-muted); }

/* Elementos comunes */
.om-item { position: relative; }
.om-cover { position: relative; aspect-ratio: 1 / 1; border-radius: var(--om-radius); overflow: hidden; background: linear-gradient(135deg, #2a1150, #100726); }
.om-cover > a { display: block; width: 100%; height: 100%; }
.om-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.om-item:hover .om-cover img { transform: scale(1.04); }
.om-cover-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3em; font-weight: 800; color: rgba(255,255,255,0.25); }
.om-play, .om-cover-play { position: absolute; right: 0.6em; bottom: 0.6em; width: 2.8em; height: 2.8em; border-radius: 50%; border: 0; padding: 0; background: var(--om-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1em; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
.om-play .om-ico, .om-cover-play .om-ico { width: 1.3em; height: 1.3em; }
.om-item:hover .om-play, .om-item:hover .om-cover-play, .om-play:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .om-play { opacity: 1; transform: none; } }
.om-badges { position: absolute; left: 0.5em; top: 0.5em; display: flex; gap: 0.3em; flex-wrap: wrap; pointer-events: none; }
.om-badge { background: rgba(0,0,0,0.7); color: #fff; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25em 0.55em; border-radius: 4px; display: inline-flex; gap: 0.3em; align-items: center; }
.om-badge-new { background: var(--om-accent); }
.om-duration { position: absolute; right: 0.5em; top: 0.5em; background: rgba(0,0,0,0.72); color: #fff; font-size: 0.75em; font-weight: 600; padding: 0.2em 0.5em; border-radius: 4px; }
.om-item-title { font-size: 1em !important; line-height: 1.3 !important; margin: 0 0 0.25em !important; text-transform: none !important; letter-spacing: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-item-title a { color: var(--om-text); }
.om-item-title a:hover { color: var(--om-accent-2); }
.om-artists { margin: 0 0 0.35em !important; color: var(--om-muted); font-size: 0.85em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-meta { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; color: var(--om-muted); font-size: 0.8em; line-height: 1.4; }
.om-bpm { color: var(--om-text); font-weight: 600; }
.om-count { display: inline-flex; gap: 0.25em; align-items: center; }
.om-tags { margin: 0.45em 0 0 !important; display: flex; flex-wrap: wrap; gap: 0.3em; }
.om-tag { display: inline-block; font-size: 0.72em; line-height: 1.3; padding: 0.2em 0.55em; border-radius: 4px; background: var(--om-card-hover); color: var(--om-muted); }
.om-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.45em; padding: 0.55em 1em; border-radius: 8px; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; text-decoration: none !important; border: 1px solid transparent; white-space: nowrap; }
.om-btn-dl { background: var(--om-accent); color: #fff !important; }
.om-btn-dl:hover { background: var(--om-accent-2); }
.om-btn-ghost { border-color: var(--om-line); color: var(--om-text) !important; background: transparent; }
.om-btn-ghost:hover { border-color: var(--om-accent); }
.om-btn-lg { font-size: 0.95em; padding: 0.8em 1.4em; }
.om-sources { display: flex; gap: 0.4em; }
.om-src { display: inline-flex; width: 2.2em; height: 2.2em; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--om-line); color: var(--om-muted) !important; font-size: 1em; }
.om-src:hover { color: #fff !important; border-color: var(--om-accent); }

/* Vista de carátulas */
.om-view-grid .om-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6em 1.2em; }
.om-view-grid .om-item { display: flex; flex-direction: column; }
.om-view-grid .om-body { padding: 0.75em 0.1em 0.5em; flex: 1; }
.om-view-grid .om-actions { padding: 0 0.1em; }
.om-view-grid .om-store .om-actions .om-btn, .om-store.om-view-grid .om-actions .om-btn { width: 100%; }
.om-view-grid.om-mixes .om-actions { position: absolute; top: 0.5em; left: 0.5em; }
.om-view-grid.om-mixes .om-src { background: rgba(0,0,0,0.6); width: 2em; height: 2em; font-size: 0.9em; }

/* Vista de lista */
.om-view-list .om-items { display: flex; flex-direction: column; border-top: 1px solid var(--om-line); }
.om-view-list .om-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 0.7em 0.5em; border-bottom: 1px solid var(--om-line); }
.om-view-list .om-item:hover { background: var(--om-card); }
.om-view-list .om-cover { width: 64px; border-radius: 6px; }
.om-view-list .om-play { opacity: 1; transform: none; right: 50%; bottom: 50%; margin: 0 -1.2em -1.2em 0; width: 2.4em; height: 2.4em; background: rgba(0,0,0,0.55); box-shadow: none; }
.om-view-list .om-item:hover .om-play { background: var(--om-accent); }
.om-view-list .om-badges, .om-view-list .om-duration, .om-view-list .om-cover-play { display: none; }
.om-view-list .om-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr); align-items: center; gap: 0.2em 1em; }
.om-view-list .om-item-title { -webkit-line-clamp: 1; grid-column: 1; }
.om-view-list .om-artists { grid-column: 1; margin: 0 !important; }
.om-view-list .om-meta { grid-column: 2; grid-row: 1; }
.om-view-list .om-tags { grid-column: 2; grid-row: 2; margin: 0 !important; }
.om-view-list .om-mix .om-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr); }
.om-view-list .om-mix .om-cover { aspect-ratio: 1 / 1; }
@media (max-width: 767px) {
	.om-view-list .om-item { grid-template-columns: 52px minmax(0, 1fr); }
	.om-view-list .om-cover { width: 52px; }
	.om-view-list .om-body { grid-template-columns: 1fr; }
	.om-view-list .om-meta, .om-view-list .om-tags { grid-column: 1; grid-row: auto; }
	.om-view-list .om-actions { grid-column: 1 / -1; }
	.om-view-list .om-actions .om-btn { width: 100%; }
	.om-view-grid .om-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em 0.8em; }
	.om-head-actions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Ventana de escucha previa */
.om-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(5, 2, 15, 0.85); display: flex; align-items: center; justify-content: center; padding: 16px; }
.om-modal-box { width: min(720px, 100%); background: #160b30; border: 1px solid var(--om-line); border-radius: 12px; overflow: hidden; color: #fff; }
.om-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 1em; border-bottom: 1px solid var(--om-line); }
.om-modal-title { font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-modal-close { background: transparent; border: 0; color: #fff; font-size: 1.8em; line-height: 1; padding: 0 0.2em; cursor: pointer; }
.om-modal-body { padding: 1em; }
.om-modal-body audio { width: 100%; }
.om-modal-body .om-sc { width: 100%; border: 0; display: block; }
html.om-modal-open { overflow: hidden; }

/* Reproductores */
.om-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--om-radius); overflow: hidden; }
.om-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; border: 0; }
.om-mixcloud iframe, .om-soundcloud iframe { width: 100% !important; min-height: 0 !important; border: 0; display: block; border-radius: 8px; }
.om-mixcloud iframe[height="120"] { height: 120px !important; }
.om-mixcloud iframe[height="60"] { height: 60px !important; }
.om-soundcloud iframe { height: 166px !important; }
.om-mixcloud + .om-mixcloud { margin-top: 0.6em; }
.om-audio { width: 100%; }

/* Página de mix o mashup */
.om-single { color: var(--om-text); }
.om-single-meta { display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: center; color: var(--om-muted); font-size: 0.9em; margin: 0 0 1.2em !important; }
.om-single-meta > span { display: inline-flex; gap: 0.35em; align-items: center; }
.om-players { margin-bottom: 1.2em; }
.om-links { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0 0 2em !important; }
.om-note { color: var(--om-muted); font-size: 0.88em; }
.om-tracklist-wrap { margin: 1em 0 2em; }
.om-tracklist-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 0.8em; }
.om-tracklist-head h2, .om-tracklist-wrap > h2 { margin: 0 !important; }
.om-tracklist-head .om-search { flex: 0 1 280px; }
.om-tracklist { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--om-line); }
.om-tracklist li { display: flex; align-items: baseline; gap: 0.9em; padding: 0.55em 0.4em !important; margin: 0 !important; border-bottom: 1px solid var(--om-line); font-size: 0.92em; line-height: 1.45; }
.om-tracklist li::before { display: none !important; }
.om-tl-n { color: var(--om-muted); min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
.om-tl-time { font-variant-numeric: tabular-nums; color: var(--om-accent-2); background: transparent; border: 0; padding: 0; font: inherit; font-weight: 700; min-width: 4.2em; text-align: left; letter-spacing: 0; text-transform: none; }
button.om-tl-time { cursor: pointer; }
button.om-tl-time:hover { text-decoration: underline; }
.om-tl-item.is-current { background: rgba(215, 19, 98, 0.16); }
.om-tl-part { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--om-muted); font-size: 0.8em !important; }
.om-alt { margin: 0 0 2em; border: 1px solid var(--om-line); border-radius: var(--om-radius); padding: 0.8em 1em; }
.om-alt summary { cursor: pointer; font-weight: 600; }
.om-alt[open] summary { margin-bottom: 0.8em; }
.om-back { margin-top: 2em; }
.om-pack-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.4em; align-items: center; padding: 1.2em; margin: 0 0 2em; border: 1px solid var(--om-line); border-radius: var(--om-radius); background: var(--om-card); }
.om-pack-cover { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #2a1150, #100726); }
.om-pack-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-pack-info h3 { margin: 0 0 0.3em !important; font-size: 1.2em !important; }
.om-pack-info h3 a { color: var(--om-text); }
.om-pack-info p { margin: 0 0 0.7em !important; }
.om-pack-info p:last-child { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5em; }
.om-src-pack { color: var(--om-accent-2) !important; }
@media (max-width: 600px) { .om-pack-card { grid-template-columns: 90px minmax(0, 1fr); gap: 1em; } }
.om-mashup-hero { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2em; align-items: center; margin-bottom: 1.8em; }
.om-hero-cover img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--om-radius); display: block; }
.om-hero-artists { font-size: 1.2em; margin: 0 0 0.4em !important; }
.om-kicker { display: inline-flex; gap: 0.4em; align-items: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em; font-weight: 700; color: var(--om-accent-2); margin: 0 0 0.5em !important; }
@media (max-width: 767px) {
	.om-mashup-hero { grid-template-columns: 1fr; gap: 1.2em; }
	.om-hero-cover { max-width: 320px; }
}