.vefm-play,
.vefm-playlist-playpause,
.vefm-playlist-shuffle,
.vefm-concert-ticket-link,
.vefm-add-to-cart,
.vefm-buy-album,
.vefm-rp-toggle,
.vefm-rp-stop,
.vefm-ratings-submit {
border: 0;
background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
cursor: pointer;
font-family: var( --vefm-font-family, inherit );
opacity: 1;
transition: opacity 0.15s ease, transform 0.1s ease;
} .vefm-concert-ticket-link:hover,
.vefm-concert-ticket-link:focus,
.vefm-concert-ticket-link:active {
background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
text-decoration: none;
} .vefm-lyrics-toggle,
.vefm-volume-toggle,
.vefm-rp-volume-toggle,
.vefm-concert-description-toggle,
.vefm-rate-form .vefm-rate-cancel {
opacity: 1;
transition: opacity 0.15s ease, transform 0.1s ease;
} .vefm-play:is( :hover, :focus-visible ):not( :disabled, .vefm-play--disabled ),
.vefm-playlist-playpause:is( :hover, :focus-visible ):not( :disabled ),
.vefm-playlist-shuffle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-concert-ticket-link:is( :hover, :focus-visible ),
.vefm-add-to-cart:is( :hover, :focus-visible ):not( :disabled ),
.vefm-buy-album:is( :hover, :focus-visible ):not( :disabled ),
.vefm-rp-toggle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-rp-stop:is( :hover, :focus-visible ):not( :disabled ),
.vefm-ratings-submit:is( :hover, :focus-visible ):not( :disabled ),
.vefm-album-cover-flip .vefm-album-cover-toggle:is( :hover, :focus-visible ):not( :disabled ),
.vefm-lightbox .vefm-lightbox-button:is( :hover, :focus-visible ):not( :disabled ),
.vefm-lyrics-toggle:is( :hover, :focus-visible ),
.vefm-volume-toggle:is( :hover, :focus-visible ),
.vefm-rp-volume-toggle:is( :hover, :focus-visible ),
.vefm-concert-description-toggle:is( :hover, :focus-visible ),
.vefm-rate-form .vefm-rate-cancel:is( :hover, :focus-visible ) {
opacity: var( --vefm-btn-hover-opacity, 0.85 );
} @media ( prefers-reduced-motion: no-preference ) {
.vefm-play:focus-visible:not( :disabled, .vefm-play--disabled ),
.vefm-playlist-playpause:focus-visible:not( :disabled ),
.vefm-playlist-shuffle:focus-visible:not( :disabled ),
.vefm-concert-ticket-link:focus-visible,
.vefm-add-to-cart:focus-visible:not( :disabled ),
.vefm-buy-album:focus-visible:not( :disabled ),
.vefm-rp-toggle:focus-visible:not( :disabled ),
.vefm-rp-stop:focus-visible:not( :disabled ),
.vefm-ratings-submit:focus-visible:not( :disabled ),
.vefm-album-cover-flip .vefm-album-cover-toggle:focus-visible:not( :disabled ),
.vefm-lightbox .vefm-lightbox-button:focus-visible:not( :disabled ),
.vefm-lyrics-toggle:focus-visible,
.vefm-volume-toggle:focus-visible,
.vefm-rp-volume-toggle:focus-visible,
.vefm-concert-description-toggle:focus-visible,
.vefm-rate-form .vefm-rate-cancel:focus-visible {
transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
}
@media ( hover: hover ) {
.vefm-play:hover:not( :disabled, .vefm-play--disabled ),
.vefm-playlist-playpause:hover:not( :disabled ),
.vefm-playlist-shuffle:hover:not( :disabled ),
.vefm-concert-ticket-link:hover,
.vefm-add-to-cart:hover:not( :disabled ),
.vefm-buy-album:hover:not( :disabled ),
.vefm-rp-toggle:hover:not( :disabled ),
.vefm-rp-stop:hover:not( :disabled ),
.vefm-ratings-submit:hover:not( :disabled ),
.vefm-album-cover-flip .vefm-album-cover-toggle:hover:not( :disabled ),
.vefm-lightbox .vefm-lightbox-button:hover:not( :disabled ),
.vefm-lyrics-toggle:hover,
.vefm-volume-toggle:hover,
.vefm-rp-volume-toggle:hover,
.vefm-concert-description-toggle:hover,
.vefm-rate-form .vefm-rate-cancel:hover {
transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
}
}
.vefm-play:active:not( :disabled, .vefm-play--disabled ),
.vefm-playlist-playpause:active:not( :disabled ),
.vefm-playlist-shuffle:active:not( :disabled ),
.vefm-concert-ticket-link:active,
.vefm-add-to-cart:active:not( :disabled ),
.vefm-buy-album:active:not( :disabled ),
.vefm-rp-toggle:active:not( :disabled ),
.vefm-rp-stop:active:not( :disabled ),
.vefm-ratings-submit:active:not( :disabled ),
.vefm-album-cover-flip .vefm-album-cover-toggle:active:not( :disabled ),
.vefm-lightbox .vefm-lightbox-button:active:not( :disabled ),
.vefm-lyrics-toggle:active,
.vefm-volume-toggle:active,
.vefm-rp-volume-toggle:active,
.vefm-concert-description-toggle:active,
.vefm-rate-form .vefm-rate-cancel:active {
transform: scale( 0.95 );
}
} .vefm-play:focus-visible,
.vefm-playlist-playpause:focus-visible,
.vefm-playlist-shuffle:focus-visible,
.vefm-concert-ticket-link:focus-visible,
.vefm-add-to-cart:focus-visible,
.vefm-buy-album:focus-visible,
.vefm-rp-toggle:focus-visible,
.vefm-rp-stop:focus-visible,
.vefm-ratings-submit:focus-visible,
.vefm-album-cover-flip .vefm-album-cover-toggle:focus-visible {
outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
outline-offset: 2px;
}
.vefm-lyrics-toggle:focus-visible,
.vefm-volume-toggle:focus-visible,
.vefm-rp-volume-toggle:focus-visible,
.vefm-concert-description-toggle:focus-visible,
.vefm-rate-form .vefm-rate-cancel:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
} .vefm-play:disabled,
.vefm-playlist-playpause:disabled,
.vefm-playlist-shuffle:disabled,
.vefm-add-to-cart:disabled,
.vefm-buy-album:disabled,
.vefm-rp-toggle:disabled,
.vefm-rp-stop:disabled,
.vefm-ratings-submit:disabled {
opacity: var( --vefm-btn-disabled-opacity, 0.6 );
cursor: default;
}.vefm-ratings {
font-family: var( --vefm-font-family, inherit );
color: inherit;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}
.vefm-ratings-title {
margin: 0 0 12px;
}
.vefm-ratings-average {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.vefm-stars {
color: var( --vefm-accent-color, #f5a623 );
letter-spacing: 2px;
font-size: 1.1rem;
}
.vefm-ratings-average-text {
color: inherit;
opacity: 0.8;
}
.vefm-ratings-empty {
opacity: 0.75;
font-style: italic;
}
.vefm-ratings-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.vefm-ratings-item {
padding: 12px 16px;
border-radius: 10px;
background: rgba( 0, 0, 0, 0.06 );
}
.vefm-ratings-item-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.vefm-ratings-item-author {
font-weight: 600;
}
.vefm-ratings-item-date {
opacity: 0.6;
font-size: 0.85rem;
}
.vefm-ratings-item-comment {
margin: 6px 0 0;
}   .vefm-ratings-form {
max-width: 480px;
}
.vefm-ratings-form p {
margin: 0 0 12px;
}
.vefm-ratings-form input[type="text"],
.vefm-ratings-form textarea {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba( 0, 0, 0, 0.2 );
background: #fff;
color: #222;
} .vefm-ratings-hp-wrap {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
}
.vefm-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
} .vefm-ratings-stars-input {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
border: 0;
padding: 0;
margin: 0 0 16px;
}
.vefm-ratings-stars-input legend {
width: 100%;
margin-bottom: 4px;
}
.vefm-ratings-stars-input input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.vefm-ratings-stars-input label {
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
padding: 0 2px;
color: var( --vefm-ratings-star-empty, rgba( 0, 0, 0, 0.25 ) );
}
.vefm-ratings-stars-input label::before {
content: "★";
}
.vefm-ratings-stars-input input[type="radio"]:checked ~ label,
.vefm-ratings-stars-input label:hover,
.vefm-ratings-stars-input label:hover ~ label {
color: var( --vefm-accent-color, #f5a623 );
}
.vefm-ratings-stars-input input[type="radio"]:focus-visible + label {
outline: 2px solid var( --vefm-accent-color, #f5a623 );
outline-offset: 2px;
border-radius: 4px;
}
.vefm-ratings-submit {
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
}
.vefm-ratings-feedback {
margin-top: 10px;
font-size: 0.9rem;
}   .vefm-rate {
display: inline-flex;
align-items: center;
gap: 0.1em;
font-weight: 400;
vertical-align: middle;
} .vefm-rate .vefm-rate-star {
appearance: none;
margin: 0;
padding: 0.15em 0.08em;
min-width: 0;
min-height: 0;
border: 0;
border-radius: 4px;
background: none;
box-shadow: none;
text-shadow: none;
font: inherit;
font-size: var( --wp--preset--font-size--normal, var( --vefm-font-size-normal ) );
line-height: 1;
color: currentColor;
opacity: 0.35;
cursor: pointer;
}
.vefm-rate .vefm-rate-star.is-on {
color: var( --vefm-accent-color, #f5a623 );
opacity: 1;
}
.vefm-rate .vefm-rate-star:hover,
.vefm-rate .vefm-rate-star:focus-visible {
background: none;
color: var( --vefm-accent-color, #f5a623 );
opacity: 1;
}
.vefm-rate .vefm-rate-star:focus-visible {
outline: 2px solid var( --vefm-accent-color, #f5a623 );
outline-offset: 1px;
} .vefm-rate.is-choosing .vefm-rate-star {
color: currentColor;
opacity: 0.35;
}
.vefm-rate.is-choosing .vefm-rate-star.is-picked {
color: var( --vefm-accent-color, #f5a623 );
opacity: 1;
}
.vefm-rate-summary {
margin-left: 0.3em;
font-size: var( --wp--preset--font-size--normal, var( --vefm-font-size-normal ) );
font-variant-numeric: tabular-nums;
opacity: 0.65;
}
.vefm-rate-panel {
margin: 0.5rem 0 0;
text-align: start;
}
.vefm-rate-form {
max-width: 420px;
}
.vefm-rate-form p {
margin: 0 0 8px;
}
.vefm-rate-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.vefm-rate-form .vefm-rate-cancel {
appearance: none;
padding: 0;
border: 0;
background: none;
box-shadow: none;
font: inherit;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
.vefm-album-rating {
margin: 0.25rem 0 0;
} .vefm-concert-rating {
margin: 0.1rem 0 0.15rem;
}
.vefm-concert .vefm-rate-panel {
margin: 0.25rem 0 0;
}:root {
--vefm-font-size-small: clamp(.75rem, .69rem + .26vw, .9rem);
--vefm-font-size-normal: clamp(.875rem, .79rem + .39vw, 1.1rem);
--vefm-font-size-medium: clamp(1rem, .88rem + .52vw, 1.3rem);
--vefm-font-size-large: clamp(1.2rem, 1.08rem + .52vw, 1.5rem);
--vefm-font-size-x-large: clamp(1.6rem, 1.4rem + .87vw, 2.1rem);
--vefm-font-size-xx-large: clamp(2rem, 1.61rem + 1.74vw, 3rem);
} :is(.vefm-track-list, .vefm-album, .vefm-concerts, .vefm-featured-concert, .vefm-past-concerts) :is(button, input, select, textarea) {
font-family: inherit;
}
.vefm-has-font :is(.vefm-track-list, .vefm-album, .vefm-concerts, .vefm-featured-concert, .vefm-past-concerts) :is(h1, h2, h3, h4, h5, h6) {
font-family: var( --vefm-font-family, inherit );
}
:is(.vefm-track-list, .vefm-album, .vefm-concerts, .vefm-featured-concert, .vefm-past-concerts)[class*="-font-family"] :is(h1, h2, h3, h4, h5, h6) {
font-family: inherit;
} .et_pb_module.vefm_divi_track_list,
.et_pb_module.vefm_divi_album,
.et_pb_module.vefm_divi_concerts,
.et_pb_module.vefm_divi_featured_concert,
.et_pb_module.vefm_divi_past_concerts {
overflow: hidden;
}
.vefm-track-list,
.vefm-album,
.vefm-concerts, .vefm-featured-concert,
.vefm-past-concerts {
font-family: var( --vefm-font-family, inherit );
color: inherit; border-radius: var( --vefm-block-radius, 0 );
} .vefm-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
}   .vefm-track-list,
.vefm-album-tracklist {
display: flex;
flex-direction: column;
gap: var( --vefm-track-gap, 14px );
}
.vefm-track {
display: flex;
align-items: flex-start;
gap: 14px;
padding: var( --vefm-track-padding, 10px 16px ); border-radius: var( --vefm-content-radius, var( --vefm-track-radius, 0 ) );
background: var( --vefm-track-bg, rgba(0, 0, 0, 0.14) );
color: var( --vefm-track-text, inherit );
border: 1px solid rgba(0, 0, 0, 0.12);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.vefm-track:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.vefm-track-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: .5ch;
}
.vefm-track.is-playing {
background: var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) );
background: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 8%, transparent );
border-color: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 25%, transparent );
} .vefm-play {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
position: relative;
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
transition: transform 0.12s ease, opacity 0.15s ease;
}
.vefm-play--disabled {
background: transparent;
color: rgba(0, 0, 0, 0.2);
cursor: default;
}
.vefm-play .vefm-icon-play,
.vefm-play .vefm-icon-pause {
width: 18px;
height: 18px;
fill: currentColor;
}
.vefm-play--disabled .vefm-icon-play {
width: 16px;
height: 16px;
} .vefm-track-body { flex: 0 1 auto;
min-width: 0; display: flex;
flex-direction: column;
width: 100%;
gap: 4px;
}
.vefm-track-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
}
.vefm-track-title-row{
display: flex; align-items: center;
justify-content: flex-start;
flex: 1 1 auto;
flex-flow: row wrap;
min-width: 0;
gap: .5ch;
}
.vefm-track-title {
display: inline-flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
overflow: hidden;
overflow-wrap: anywhere;
font-weight: 600;
gap: .5ch;
}
.vefm-track-album-badge {
display: inline-flex;
padding: 2px 9px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.08);
color: inherit;
font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
font-weight: 500;
letter-spacing: 0.02em;
vertical-align: middle;
opacity: 0.75;
} .vefm-track-listen-badge {
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
opacity: 0.6;
vertical-align: middle;
}
.vefm-track-listen-badge--preview {
color: rgb(180, 110, 20);
opacity: 0.85;
}
.vefm-track-listen-badge--full {
color: inherit;
}
.vefm-track-cover {
width: 26px;
height: 26px;
object-fit: cover;
border-radius: 4px;
} .vefm-equalizer {
display: none;
align-items: flex-end;
justify-content: center;
gap: 2px;
height: 56px;
flex: 1 1 auto;
}
.vefm-track.is-playing .vefm-equalizer {
display: flex;
}
.vefm-equalizer-bar {
width: calc(100% / 18);
height: 15%;
border-radius: 1px; background-image:
repeating-linear-gradient( to top, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 3px, rgba(0, 0, 0, 0.45) 4px ),
linear-gradient(
to top,
var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 0%,
color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 50%, var( --vefm-vu-peak, #ef4444 ) 50% ) 55%,
var( --vefm-vu-peak, #ef4444 ) 100%
); transition: height 0.03s linear;
}
.vefm-track-number {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center; box-sizing: border-box;
min-width: 1.5em;
height: 1.5em;
padding: 0 .35em;
line-height: 1;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
font-variant-numeric: tabular-nums;
border: 1px solid currentColor;
border-radius: 999px;
}
.vefm-track-time {
flex: 0 0 auto; font-weight: 400;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
opacity: 0.65;
font-variant-numeric: tabular-nums;
}
.vefm-track-comment {
display: flex;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
opacity: 0.7;
} .vefm-track-lyrics {
flex: 1 1 100%;
text-align: center;
}
.vefm-lyrics-toggle {
display: inline-flex;
margin: 4px 0;
padding: 0;
background: none;
border: none;
color: inherit;
text-decoration: underline;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
cursor: pointer;
}
.vefm-lyrics-panel {
display: flex;
justify-content: center;
white-space: normal;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
text-align: left;
line-height: 1.6;
opacity: 0.85;
margin: 4px 0 8px;
padding: 8px 12px;
border-left: 3px solid currentColor;
border-radius: 2px;
background: rgba(128, 128, 128, 0.08);
} .vefm-lyrics-panel[hidden] {
display: none;
}
.vefm-track-progress {
cursor: pointer;
padding: 5px 0; border-radius: 4px;
} .vefm-track-progress:focus-visible {
outline: 2px solid var( --vefm-accent-color, #2271b1 );
outline-offset: 3px;
}
.vefm-track-progress-track {
position: relative;
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.vefm-track-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
border-radius: 2px;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
transition: width 0.1s linear;
}
.vefm-track.is-playing .vefm-track-progress-fill { background-image:
repeating-linear-gradient( to top, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 3px, rgba(0, 0, 0, 0.45) 4px ),
linear-gradient(
to top,
var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 0%,
color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 50%, var( --vefm-vu-peak, #ef4444 ) 50% ) 55%,
var( --vefm-vu-peak, #ef4444 ) 100%
);
} .vefm-track-volume {
flex: 0 0 auto; box-sizing: border-box;
max-width: 300px;
display: none;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.06);
padding: 6px 12px;
border-radius: 999px;
opacity: 0;
transform: translateY(2px);
animation: vefm-fade-in 0.18s ease forwards;
}
@keyframes vefm-fade-in {
to {
opacity: 1;
transform: translateY(0);
}
}
.vefm-track.is-playing .vefm-track-volume {
display: flex;
}
.vefm-volume-toggle {
background: none;
border: none;
cursor: pointer;
color: inherit;
display: flex;
align-items: center;
padding: 0;
flex: 0 0 auto;
}
.vefm-volume-toggle .vefm-icon {
width: 2em;
height: 2em;
fill: currentColor;
}
.vefm-volume-slider {
-webkit-appearance: none;
appearance: none; flex: 1 1 auto;
width: auto;
min-width: 72px;
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
outline: none;
cursor: pointer;
margin: 0;
} .vefm-volume-slider:focus-visible {
outline: 2px solid var( --vefm-accent-color, #2271b1 );
outline-offset: 2px;
}
.vefm-volume-slider::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
}
.vefm-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border-radius: 50%;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
border: 2px solid var( --wp--preset--color--background, #fff );
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.12s ease;
}
.vefm-volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.vefm-volume-slider::-moz-range-track {
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
}
.vefm-volume-slider::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
border: 2px solid var( --wp--preset--color--background, #fff );
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.12s ease;
}
.vefm-volume-slider::-moz-range-thumb:hover {
transform: scale(1.25);
} .vefm-track-shop {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.vefm-track-price {
opacity: 0.8;
font-variant-numeric: tabular-nums;
white-space: nowrap;
} .vefm-add-to-cart,
.vefm-buy-album {
flex: 0 0 auto;
display: inline-flex;
gap: 6px;
border-radius: 20px;
padding: 10px 24px;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
white-space: wrap;
}
.vefm-add-to-cart:not( .vefmpro-concert-buy-button, .vefm-buy-album, .vefmpro-ticket-zone .vefm-add-to-cart, .vefmpro-merch-item-add .vefm-add-to-cart ) {
flex-direction: column;
align-items: center;
justify-content: center;
font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
width: 50px;
height: 50px;
padding: 5px;
border-radius: 999px;
gap: initial;
}
.vefm-buy-album {
border-radius: 4px;
padding: 8px 16px;
}
.vefm-add-to-cart:disabled {
cursor: wait;
}
.vefm-add-to-cart .vefm-icon-cart {
width: 18px;
height: 18px;
fill: none;
}
.vefm-album-header {
display: flex;
gap: 20px;
margin-bottom: 24px;
align-items: flex-start;
} .vefm-album-info {
flex: 1 1 auto;
min-width: 0;
} .vefm-album-title {
color: var( --vefm-album-title-color, inherit ); }
.vefm-album-description {
color: var( --vefm-album-description-color, inherit );
} .vefm-album-artist {
margin: 0 0 .5em;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
opacity: .8;
}
.vefm-album-header--compact .vefm-album-artist {
margin: 2px 0 0;
font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
} .vefm-album-header--compact {
gap: 14px;
margin-bottom: 12px;
align-items: center;
}
.vefm-album-cover {
display: flex;
flex-direction: column;
align-items: center;
} .vefm-album-cover-flip {
position: relative;
display: inline-flex;
max-width: 100%;
}
.vefm-album-cover-face[hidden] {
display: none;
}
.vefm-album-cover-face img {
display: flex;
}
.vefm-album-cover-flip .vefm-album-cover-toggle {
position: absolute;
inset-inline-end: .5rem;
inset-block-end: .5rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 2.5rem;
height: 2.5rem;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
line-height: 1;
text-transform: none;
text-shadow: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.vefm-album-cover-flip .vefm-album-cover-toggle:hover,
.vefm-album-cover-flip .vefm-album-cover-toggle:focus,
.vefm-album-cover-flip .vefm-album-cover-toggle:active {
background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
}
.vefm-album-cover-flip .vefm-album-cover-toggle:focus-visible {
outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
outline-offset: 3px;
}
.vefm-album-cover-toggle .vefm-icon {
width: 1.25rem;
height: 1.25rem;
}
@media ( prefers-reduced-motion: no-preference ) {
.vefm-album-cover-flip .vefm-album-cover-toggle {
transition: transform .12s ease, opacity .15s ease;
}
}
.vefm-album-header--compact .vefm-album-cover img {
max-width: 56px;
border-radius: 6px;
}
.vefm-album-header--compact .vefm-album-title {
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
margin: 0;
}
.vefm-album-header--compact .vefm-album-price {
margin: 4px 0 0;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}
.vefm-album-header + .vefm-album-tracklist-details {
margin-bottom: 32px;
}
.vefm-tracklist-other-heading {
margin: 24px 0 12px;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
opacity: 0.6;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vefm-album-cover img {
max-width: clamp(160px, 20vw, 300px);
height: auto;
border-radius: 8px;
} .vefm-album-tracklist-details {
margin-top: 4px;
}
.vefm-album-tracklist-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
padding: 10px 16px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.05);
font-weight: 600;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
user-select: none;
}
.vefm-album-tracklist-summary::-webkit-details-marker {
display: none; }
.vefm-album-tracklist-summary:hover {
background: rgba(0, 0, 0, 0.08);
}
.vefm-album-tracklist-chevron {
width: 16px;
height: 16px;
transition: transform 0.15s ease;
}
.vefm-album-tracklist-details[open] .vefm-album-tracklist-chevron {
transform: rotate(180deg);
}
.vefm-album-tracklist-details .vefm-album-tracklist {
margin-top: 10px;
}
.vefm-album-discount-hint {
display: flex;
font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
opacity: 0.65;
font-weight: 400;
} @media (max-width: 480px) {
.vefm-track {
flex-direction: column;
align-items: center;
}
.vefm-track-buttons {
flex-flow: row wrap;
justify-content: center;
}
.vefm-track-shop {
margin: auto;
}
.vefm-track-title-row {
justify-content: center;
}
.vefm-track-body {
flex-basis: 100%;
max-width: 100%;
order: 3;
}
.vefm-album-header {
flex-wrap: wrap;
justify-content: center;
}
.vefm-track-album-badge {
display: inline-flex;
margin-left: 0;
padding: .5em;
letter-spacing: initial;
overflow-wrap: anywhere;
}
.vefm-album-header .vefm-album-info {
flex-basis: 100%;
}
.vefm-playlist-shuffle {
margin: auto;
}
}    .vefm-concert {
display: flex;
align-items: stretch;
gap: 16px;
padding: 14px 18px;
margin-bottom: var( --vefm-concert-gap, 10px ); border-radius: var( --vefm-content-radius, var( --vefm-concert-radius, 0 ) );
background: var( --vefm-concert-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
color: var( --vefm-concert-text, inherit );
border: var( --vefm-concert-border-width, 0 ) solid var( --vefm-concert-border-color, rgba(0, 0, 0, 0.12) );
transition: box-shadow 0.15s ease;
overflow: hidden;
} .vefm-concert:last-child {
margin-bottom: 0;
}
.vefm-concert:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
} .vefm-concert--has-poster {
display: grid; grid-template-columns: clamp(120px, 20%, 20%) minmax(0, 1fr);
padding: 0;
} @media (max-width: 980px) {
.vefm-concert--has-poster {
grid-template-columns: unset;
padding: clamp(8px, 2vw, 24px);
}
}
.vefm-concert-poster-wrap {
height: 100%;
overflow: hidden;
}
.vefm-concert-poster {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
}
.vefm-concert--has-poster .vefm-concert-body,
.vefm-concert--has-poster .vefm-concert-ticket { padding: clamp(8px, 2vw, 24px);
}  .vefm-concert-body {
flex: 1 1 auto;
min-width: 0;
display: flex; flex-flow: row wrap;
align-items: center; justify-content: flex-end;
gap: 16px 28px;
padding: 4px 0;
}
.vefm-concert-main {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
} .vefm-concert-header {
display: flex;
align-items: center;
gap: 14px;
}
.vefm-concert-heading {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.vefm-concert-date-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto; color: var( --vefm-concert-badge-text, var( --wp--preset--color--background, #fff ) );
width: 84px;
height: auto;
margin: 0 auto;
border-radius: 8px;
background: var( --vefm-concert-badge, #606060 ); line-height: 1.2;
gap: 1px;
}
.vefm-concert-date-day { font-size: var( --vefm-font-size-xx-large );
font-weight: 700;
}
.vefm-concert-date-month {
font-size: var( --vefm-font-size-medium );
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.95;
}
.vefm-concert-date-year {
font-size: var( --vefm-font-size-x-large );
opacity: 0.75;
font-variant-numeric: tabular-nums;
} @media ( min-width: 641px ) {
.vefm-concert-date-badge { width: 100px;
height: auto;
}
}
.vefm-concert-eyebrow {
display: flex;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.65;
color: var( --vefm-concert-eyebrow-color, inherit );
}
.vefm-concert-title {
margin: 0;  color: var( --vefm-concert-title-color, inherit );
line-height: 1.25;
} .vefm-concert-countdown {
margin: 2px 0 0;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
font-weight: 600;
color: var( --vefm-concert-countdown-color, var( --vefm-concert-text, inherit ) );
} .vefm-concert--past {
opacity: 0.7;
} .vefm-concerts-empty-social {
margin-top: 8px;
opacity: 0.85;
}
.vefm-concerts-empty-social a {
font-weight: 600;
}
.vefm-concert-venue {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 0;
font-size: var( --vefm-concert-venue-size, var(--wp--preset--font-size--medium, var(--vefm-font-size-medium)) );
color: var( --vefm-concert-venue-color, inherit );
opacity: 0.85;
} .vefm-concert-price {
display: flex;
align-items: center; gap: 4px 8px;
margin: 4px 0 0;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
font-weight: 600;
opacity: 0.85;
}
.vefm-concert-price .vefm-icon-payment {
opacity: 0.85;
}
.vefm-icon-pin {
width: 17px;
height: 17px;
flex: 0 0 auto;
opacity: 0.9;
fill: none;
stroke: var( --vefm-concert-pin, #e2483d );
}
.vefm-icon-clock,
.vefm-icon-payment {
width: 17px;
height: 17px;
flex: 0 0 auto;
opacity: 0.75;
vertical-align: -2px;
fill: none;
stroke: var( --vefm-concert-pin, #e2483d );
} .vefm-concert-time {
display: inline-flex;
align-items: center;
gap: 4px;
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.vefm-concert-description {
margin: 0;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
opacity: 0.8;
line-height: 1.4;
}
.vefm-concert-description p {
margin: 0 0 6px;
} .vefm-concert-description-toggle {
display: inline-flex;
margin: 4px 0 0;
padding: 0;
border: 0;
background: none;
color: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
font: inherit;
font-weight: 600;
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
text-decoration: underline;
cursor: pointer;
}
.vefm-concert-actions {
flex: 0 0 auto;
display: flex; flex-flow: row wrap;
align-items: flex-end;
justify-content: flex-end;
gap: 8px;
}
.vefm-concert-ticket-link {
flex: 0 0 auto;
padding: 10px 24px;
border-radius: 20px;
text-decoration: none;
font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal)); white-space: wrap;
}
@media (max-width: 640px) {
.vefm-concert-body {
flex-direction: column;
align-items: flex-start;
} .vefm-concert-main {
flex: 0 1 auto;
}
.vefm-concert-actions {
align-items: flex-start; align-self: center;
}
}
@media (max-width: 480px) {
.vefm-concert-header {
flex-wrap: wrap;
}
} .vefm-concert-ticket {
flex: 1 1 auto;
flex-flow: row wrap;
min-width: 0;
display: flex;
align-items: stretch;
gap: 28px;
padding: 4px 0;
}
.vefm-concert-ticket-zone1 {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center; overflow-wrap: anywhere;
}
.vefm-concert-ticket-time {
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.vefm-concert-ticket-venue-short {
font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
opacity: 0.75;
max-width: 90px;
} .vefm-concert-ticket-divider {
flex: 0 0 auto;
width: 1px;
align-self: stretch;
margin: -16px 0;
background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
background-size: 100% 18px;
background-repeat: repeat-y;
background-position: center top;
}
.vefm-concert-ticket-zone2 {
flex: 1 1 260px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
max-width: 360px;
}
.vefm-concert-ticket-zone2 .vefm-concert-venue {
margin-top: 4px;
}
.vefm-concert-ticket-address {
margin: 0 0 0 22px; font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
opacity: 0.7;
}
.vefm-concert-ticket-zone3 {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.vefm-concert-ticket-actions { flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 8px;
}
@media (max-width: 780px) { .vefm-concert--has-poster .vefm-concert-poster-wrap {
width: 100%;
height: auto;
margin-bottom: 16px; display: flex;
align-items: inherit;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
}
.vefm-concert--has-poster .vefm-concert-poster {
width: inherit;
height: auto;
max-width: 100%;
object-fit: contain;
}
.vefm-concert-ticket {
flex-direction: column;
align-items: stretch;
gap: 18px;
}
.vefm-concert-ticket-zone1 { justify-content: flex-start;
align-items: center;
text-align: left;
gap: 14px;
padding-bottom: 18px;
}
.vefm-concert-ticket-venue-short {
max-width: none;
} .vefm-concert-ticket-divider {
width: auto;
height: 1px;
align-self: stretch;
margin: 0 -20px;
background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
background-size: 18px 100%;
background-repeat: repeat-x;
background-position: left center;
} .vefm-concert-ticket-zone2,
.vefm-concert-ticket-zone3 {
max-width: none;
justify-content: flex-start; flex: 0 1 auto;
}
.vefm-concert-actions,
.vefm-concert-ticket-actions {
flex-wrap: wrap;
justify-content: center;
}
} @media (max-width: 480px) {
.vefm-concert-ticket-actions {
align-items: center;
}
}        .vefm-playlist-toolbar { width: fit-content;
margin: 0 auto 14px;
border-radius: 3em;
background: rgba(0, 0, 0, 0.04);
}
.vefm-playlist-toolbar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
padding: 10px 14px;
}
.vefm-playlist-playpause {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.vefm-playlist-playpause .vefm-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.vefm-playlist-volume {
display: flex; flex: 1;
box-sizing: border-box;
max-width: 300px;
align-items: center;
gap: 8px;
}
.vefm-playlist-shuffle {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto; border-radius: 999px;
padding: 6px 12px;
font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
} .vefm-playlist-shuffle .vefm-icon {
width: 15px;
height: 15px;
} .vefm-playlist-shuffle.is-active {
opacity: 1; box-shadow: 0 0 0 2px var( --wp--preset--color--background, #fff ), 0 0 0 4px var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ), var( --vefm-button-shadow, 0 0 transparent );
} .vefm-lightbox-trigger {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
box-shadow: none;
color: inherit;
font: inherit;
line-height: 0;
text-transform: none;
text-shadow: none;
cursor: zoom-in;
-webkit-appearance: none;
appearance: none;
}
.vefm-lightbox-trigger:hover,
.vefm-lightbox-trigger:focus,
.vefm-lightbox-trigger:active {
background: transparent;
color: inherit;
box-shadow: none;
}
.vefm-lightbox-trigger:focus-visible {
outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
outline-offset: 3px;
} .vefm-lightbox-trigger[data-vefm-lightbox-zoom] {
width: fit-content;
margin-inline: auto;
}
.vefm-concert-poster-wrap .vefm-lightbox-trigger {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: inherit;
}