.sermonie-playlist { --sermonie-accent: #245c4e; --sermonie-background: #fff; --sermonie-text: #172d29; --sermonie-radius: 18px; max-width: 760px; margin: 1.5em 0; border: 1px solid color-mix(in srgb, var(--sermonie-text) 18%, var(--sermonie-background)); border-radius: var(--sermonie-radius); overflow: hidden; background: var(--sermonie-background); color: var(--sermonie-text); font: 14px/1.5 system-ui, sans-serif; box-shadow: 0 12px 35px #173c240a; }

.sermonie-playlist * { box-sizing: border-box; }

.sermonie-playlist [hidden] { display: none !important; }

.sermonie-playlist .sermonie-player { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.sermonie-playlist .sermonie-playlist-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: transparent; color: inherit; }

.sermonie-playlist .sermonie-playlist-heading h2 { font: 500 25px/1.25 system-ui, sans-serif; letter-spacing: -.5px; padding: 0; margin: 7px 0 10px; color: inherit; overflow-wrap: anywhere; }

.sermonie-playlist .sermonie-playlist-heading p { margin: 5px 0; color: inherit; font: inherit; }

.sermonie-playlist .sermonie-playlist-cover { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }

.sermonie-playlist .sermonie-playlist-eyebrow { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .7; }

.sermonie-playlist .sermonie-playlist-count { font-size: 12px; opacity: .75; }

.sermonie-playlist .sermonie-heading { border-top: 1px solid color-mix(in srgb, var(--sermonie-text) 18%, var(--sermonie-background)); }

.sermonie-playlist .sermonie-playlist-navigation { display: flex; justify-content: space-between; gap: 12px; padding: 0 24px 14px; }

.sermonie-playlist .sermonie-playlist-navigation button { min-height: 40px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--sermonie-text) 18%, var(--sermonie-background)); border-radius: 7px; background: var(--sermonie-background); color: inherit; font: 12px/1.5 system-ui, sans-serif; cursor: pointer; text-transform: none; box-shadow: none; }

.sermonie-playlist .sermonie-playlist-navigation button:disabled { opacity: .4; cursor: default; }

.sermonie-playlist .sermonie-playlist-queue { padding: 0 24px 24px; }

.sermonie-playlist .sermonie-playlist-queue h3 { font: 500 14px/1.5 system-ui, sans-serif; margin: 8px 0 12px; color: inherit; }

.sermonie-playlist .sermonie-playlist-queue ol { list-style: none; padding: 0; margin: 0; }

.sermonie-playlist .sermonie-playlist-queue li { margin: 0; padding: 0; }

.sermonie-playlist .sermonie-playlist-track { display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-bottom: 1px solid color-mix(in srgb, var(--sermonie-text) 14%, var(--sermonie-background)); border-radius: 7px; color: inherit; text-decoration: none; }

.sermonie-playlist .sermonie-playlist-track:hover, .sermonie-playlist .sermonie-playlist-track[aria-current="true"] { background: color-mix(in srgb, var(--sermonie-accent) 9%, var(--sermonie-background)); }

.sermonie-playlist .sermonie-playlist-details { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.sermonie-playlist .sermonie-playlist-details strong { display: block; font-weight: 500; }

.sermonie-playlist .sermonie-playlist-details small { display: block; font-size: 12px; opacity: .75; margin-top: 3px; }

.sermonie-playlist .sermonie-playlist-number { width: 20px; flex-shrink: 0; text-align: center; opacity: .7; font-variant-numeric: tabular-nums; }

.sermonie-playlist .sermonie-playlist-track-state { font-size: 11px; flex-shrink: 0; }

.sermonie-playlist :focus-visible { outline: 2px solid var(--sermonie-accent); outline-offset: 2px; }

.sermonie-playlist > .sermonie-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 480px) {

	.sermonie-playlist .sermonie-playlist-heading { padding: 20px; gap: 12px; }

	.sermonie-playlist .sermonie-playlist-cover { width: 54px; height: 54px; }

	.sermonie-playlist .sermonie-playlist-queue { padding-inline: 16px; }

	.sermonie-playlist .sermonie-playlist-navigation { padding-inline: 16px; }

	.sermonie-playlist .sermonie-playlist-track-state { max-width: 54px; overflow-wrap: anywhere; }
}