/* SoundAudio Cover Cards v0.1.21
   Based on stable v0.1.7. CSS adjusted from DevTools notes:
   keep native Divi/FilterGrid content geometry, add only cover layer + z-index. */

.sacc-cover-card {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 80px rgba(0,0,0,0.07) !important;
  width: 100% !important;
  height: var(--sacc-card-height, 420px) !important;
  min-height: var(--sacc-card-height, 420px) !important;
  padding: 0 !important;
  margin-bottom: 1em !important;
}

.mth-on .dpdfg_filtergrid_0_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card,
.mth-on .dpdfg_filtergrid_1_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card,
.dpdfg_filtergrid_0_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card,
.dpdfg_filtergrid_1_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card,
.dp-dfg-layout-fullwidth .sacc-cover-card,
.dp-dfg-layout-grid .sacc-cover-card {
  height: var(--sacc-card-height, 420px) !important;
  min-height: var(--sacc-card-height, 420px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

/* Divi/FilterGrid pseudo layers must not cover the custom cover/content stack. */
.dpdfg_filtergrid_0_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::before,
.dpdfg_filtergrid_1_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::before,
.dpdfg_filtergrid_0_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::after,
.dpdfg_filtergrid_1_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::after,
.et_pb_blog_grid .sacc-cover-card::before,
.et_pb_blog_grid .sacc-cover-card::after,
.sacc-cover-card::before,
.sacc-cover-card::after {
  pointer-events: none !important;
}

.dpdfg_filtergrid_0_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::after,
.dpdfg_filtergrid_1_tb_body .dp-dfg-container .dp-dfg-items .sacc-cover-card::after,
.et_pb_blog_grid .sacc-cover-card::after {
  display: none !important;
  content: none !important;
}

/* Cover: pinned to the top/left/right edges with no side gap. */
.sacc-cover-card > .sacc-cover-layer {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--sacc-cover-height, 315px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-image {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 36% !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0.65) 70%, rgba(255,255,255,1) 100%);
}

/* Keep the original Divi/FilterGrid positions. Only raise them above the cover/fade. */
.sacc-cover-card > :not(.sacc-cover-layer),
.sacc-cover-card .dp-dfg-header,
.sacc-cover-card .entry-header,
.sacc-cover-card .entry-title,
.sacc-cover-card .dp-dfg-content,
.sacc-cover-card .entry-summary,
.sacc-cover-card .blockplayer,
.sacc-cover-card .sapl-player,
.sacc-cover-card .buttons,
.sacc-cover-card .fanlink,
.sacc-cover-card .buttondownload {
  position: relative !important;
  z-index: 5 !important;
}

/* Do not absolute-position title/content here. Native CSS keeps the lower group together. */
.sacc-cover-card .dp-dfg-header.entry-header,
.sacc-cover-card .dp-dfg-content.entry-summary,
.sacc-cover-card .entry-summary {
  transform: none !important;
}

.sacc-cover-card .dp-dfg-header.entry-header .entry-title,
.sacc-cover-card .dp-dfg-header.entry-header h2 {
  padding: 0 !important;
}

/* Remove accidental WP paragraph spacing inside generated content. */
.sacc-cover-card .blockplayer p:empty,
.sacc-cover-card .blockplayer > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep the player row normalized, but do not reposition buttons/title globally. */
.sacc-cover-card .blockplayer {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sacc-cover-card .sapl-player {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Wide Browse Music cards. */
.sacc-cover-card.sacc-card-wide {
  --sacc-card-height: 420px;
  --sacc-cover-height: 315px;
}

/* Two-column / home cards. */
.sacc-cover-card.sacc-card-compact {
  --sacc-card-height: 420px;
  --sacc-cover-height: 315px;
}

@media (max-width: 980px) {
  .sacc-cover-card,
  .sacc-cover-card.sacc-card-wide,
  .sacc-cover-card.sacc-card-compact {
    --sacc-card-height: 390px;
    --sacc-cover-height: 290px;
  }

  .sacc-cover-card > .sacc-cover-layer .sacc-cover-fade {
    height: 40% !important;
  }
}


/* v0.1.9 - lock DevTools-approved layout from user screenshots */

.mth-on .dp-dfg-skin-default .dp-dfg-item > div:last-of-type{
    width:100% !important;
    top:-20px !important;
}

.mth-on h2.entry-title{
    margin-left:-10px !important;
    width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:ellipsis !important;
    top:-95px !important;
}

.sacc-cover-card .blockplayer{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:25px !important;
}

/* keep buttons/content grouped together */
.sacc-cover-card .buttons{
    margin-top:-20px !important;
}



/* v0.1.11 player alignment tweak from DevTools */
.sacc-cover-card .sapl-player{
    margin-top:16px !important;
    margin-right:-50px !important;
}


/* v0.1.12 square cover mode */
.sacc-cover-card{
    height:auto !important;
}
.sacc-cover-card .sacc-cover-layer{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    overflow:hidden !important;
}
.sacc-cover-card .sacc-cover-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-size:cover !important;
    background-position:center 70% !important;
}
.sacc-cover-card{
    --sacc-cover-height:auto !important;
    --sacc-card-height:auto !important;
}


/* v0.1.15 reduce empty bottom space */
.sacc-cover-card .blockplayer{padding:10px 25px 0 25px !important;}
.sacc-cover-card .entry-summary{padding-bottom:10px !important;}


/* v0.1.19 user-approved fade */
.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
    height:32% !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.01) 11%,
        rgba(255,255,255,0.03) 22%,
        rgba(255,255,255,0.08) 31%,
        rgba(255,255,255,0.18) 44%,
        rgba(255,255,255,0.38) 59%,
        rgba(255,255,255,0.65) 75%,
        rgba(255,255,255,0.88) 87%,
        rgba(255,255,255,1) 100%
    ) !important;
}


/* v0.1.21 instant geometry reservation
   The cover layer is inserted immediately before the cover URL AJAX response returns.
   This prevents the native card from rendering first and jumping later. */
.sacc-cover-card.sacc-cover-pending > .sacc-cover-layer{
    background: transparent !important;
}
.sacc-cover-card.sacc-cover-pending .sacc-cover-image{
    background-image: none;
}


/* v0.1.22 user-approved title width */
.mth-on h2.entry-title{
  margin-left:-10px !important;
  width:320px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:ellipsis !important;
  top:-95px !important;
}


/* v0.1.23 DevTools locked values */
.dp-dfg-header.entry-header{
  height:26px !important;
  top:77px !important;
  left:40px !important;
  width:320px !important;
}


/* v0.1.24 adaptive tile layout */
@media (min-width: 981px){
  .dp-dfg-container .dp-dfg-items{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(340px,340px)) !important;
    justify-content:center !important;
    gap:24px !important;
  }
  .dp-dfg-container .dp-dfg-item,
  .dp-dfg-container .sacc-cover-card{
    width:340px !important;
    max-width:340px !important;
    margin:0 !important;
  }
}
@media (min-width: 681px) and (max-width: 980px){
  .dp-dfg-container .dp-dfg-items{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;
    gap:20px !important;
  }
}

/* v0.1.24.1 - final user CSS overrides */
.mth-on h2.entry-title{
    margin-left:-10px !important;
    width:160px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:ellipsis !important;
    top:-95px !important;
}

.sacc-cover-card .buttons{
    margin-top:-35px !important;
}

.mth-title-block .mth-sub{
    display:block !important;
    margin-top:2px !important;
    color:#6b6b6b !important;
    font-size:13px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* v0.1.25 responsive browse + home grids */
@media (min-width:1200px){
  .browse-music .dp-dfg-container .dp-dfg-items,
  body.page .dpdfg_filtergrid_0_tb_body .dp-dfg-items{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media (min-width:981px) and (max-width:1199px){
  .browse-music .dp-dfg-container .dp-dfg-items,
  body.page .dpdfg_filtergrid_0_tb_body .dp-dfg-items{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (min-width:681px) and (max-width:980px){
  .dp-dfg-container .dp-dfg-items{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:680px){
  .dp-dfg-container .dp-dfg-items{
    grid-template-columns:1fr !important;
  }
}

/* stretch cards to column width and prevent cover overflow */
.dp-dfg-container .dp-dfg-item,
.dp-dfg-container .sacc-cover-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
.sacc-cover-card,
.sacc-cover-card .sacc-cover-layer,
.sacc-cover-card .sacc-cover-image{
  max-width:100% !important;
}


/* v0.1.26 home grid research fix
   Base remains v0.1.25. The real overflow on Home was caused by
   fixed 320px inner header/player geometry inside smaller 4-column cards.
   Browse Music is not touched here. */

/* Home page: never use 3 columns. Use 4 only when the viewport is wide enough
   for the card internals; otherwise switch to 2, then 1 earlier at 750px. */
@media (min-width: 1280px){
  body.home .dp-dfg-container .dp-dfg-items{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    justify-content:stretch !important;
    gap:24px !important;
  }
}
@media (min-width: 751px) and (max-width: 1279px){
  body.home .dp-dfg-container .dp-dfg-items{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    justify-content:stretch !important;
    gap:24px !important;
  }
}
@media (max-width: 750px){
  body.home .dp-dfg-container .dp-dfg-items{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
    gap:24px !important;
  }
}

/* Keep the Home card itself and every visual layer clipped to the real column. */
body.home .dp-dfg-container .dp-dfg-item.sacc-cover-card,
body.home .dp-dfg-container .sacc-cover-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.home .sacc-cover-card > .sacc-cover-layer,
body.home .sacc-cover-card > .sacc-cover-layer .sacc-cover-image,
body.home .sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  left:0 !important;
  right:0 !important;
  box-sizing:border-box !important;
}

/* The fixed 320px header from v0.1.23 is fine on Browse Music,
   but it breaks Home when 4 cards fit in one row. Make it fluid only on Home. */
body.home .sacc-cover-card .dp-dfg-header.entry-header{
  width:calc(100% - 80px) !important;
  max-width:calc(100% - 80px) !important;
  min-width:0 !important;
  left:40px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Keep the exact user-approved title and button CSS active. */
body.home .mth-on h2.entry-title,
body.home .mth-on h2.entry-title,
.mth-on h2.entry-title{
  margin-left:-10px !important;
  width:160px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:ellipsis !important;
  top:-95px !important;
}
.sacc-cover-card .buttons{
  margin-top:-35px !important;
}
.mth-title-block .mth-sub{
  display:block !important;
  margin-top:2px !important;
  color:#6b6b6b !important;
  font-size:13px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Player overflow on Home: do not change the player design globally.
   Only neutralize the negative right extension inside small Home grid columns. */
body.home .sacc-cover-card .blockplayer,
body.home .sacc-cover-card .sapl-player,
body.home .sacc-cover-card .sapl-wave-wrap,
body.home .sacc-cover-card .sapl-wave{
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
body.home .sacc-cover-card .sapl-player{
  margin-right:0 !important;
}
body.home .sacc-cover-card .sapl-wave-wrap{
  flex:1 1 auto !important;
  overflow:hidden !important;
}
body.home .sacc-cover-card .sapl-wave{
  width:100% !important;
}

/* Keep link/download buttons inside the card on Home without hiding them. */
body.home .sacc-cover-card .buttons,
body.home .sacc-cover-card .fanlink,
body.home .sacc-cover-card .buttondownload{
  max-width:100% !important;
  box-sizing:border-box !important;
}


/* v0.1.27 home-only player geometry fix
   Based on v0.1.26. Do not move the lower group.
   Fixes clipped time labels and restores the waveform width on Home only. */
body.home .sacc-cover-card .sapl-player{
  margin-right:-50px !important;
}
body.home .sacc-cover-card .sapl-wave-wrap{
  overflow:visible !important;
  min-width:0 !important;
}
body.home .sacc-cover-card .sapl-time,
body.home .sacc-cover-card .sapl-time-current,
body.home .sacc-cover-card .sapl-time-total{
  overflow:visible !important;
  line-height:1.2 !important;
  height:auto !important;
}


/* v0.1.35 user cover toggle */
.sacc-user-toggle{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    height:28px !important;
    padding:0 9px !important;
    margin:0 10px 0 0 !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    color:#555 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:500 !important;
    cursor:pointer !important;
    box-shadow:0 3px 12px rgba(0,0,0,.06) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    backdrop-filter:blur(8px) !important;
    transition:opacity .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
    vertical-align:middle !important;
    position:relative !important;
    z-index:100001 !important;
}
.sacc-user-toggle:hover{
    background:#fff !important;
    color:#222 !important;
    border-color:rgba(0,0,0,.18) !important;
}
.sacc-user-toggle-dot{
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    background:#111 !important;
    opacity:.9 !important;
    display:block !important;
}
.sacc-user-toggle.is-off .sacc-user-toggle-dot{
    background:#aaa !important;
}
.sacc-user-toggle.is-off{
    opacity:1 !important;
}
.sacc-user-toggle-floating{
    position:fixed !important;
    top:14px !important;
    left:14px !important;
}

/* When the visitor turns covers off, restore cards to normal list/grid content without cover layers. */
.sacc-user-covers-off .sacc-cover-layer{
    display:none !important;
}
.sacc-user-covers-off .sacc-cover-card{
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    overflow:visible !important;
}
.sacc-user-covers-off .sacc-cover-card::before,
.sacc-user-covers-off .sacc-cover-card::after{
    display:none !important;
}

/* compact mobile placement */
@media (max-width:980px){
    .sacc-user-toggle{
        height:26px !important;
        padding:0 8px !important;
        margin-right:8px !important;
        font-size:10px !important;
    }
    .sacc-user-toggle-text{
        max-width:54px !important;
        overflow:hidden !important;
        white-space:nowrap !important;
    }
}


/* v0.1.35 - fixed user toggle position: centered left of burger */
.sacc-user-toggle,
.sacc-user-toggle.sacc-near-burger{
    position:absolute !important;
    right:42px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    z-index:100002 !important;
}

#et-top-navigation,
.et_mobile_nav_menu,
.mobile_menu_bar,
#main-header .container,
header .container{
    position:relative !important;
}

.sacc-user-toggle-floating{
    position:fixed !important;
    top:160px !important;
    right:92px !important;
    left:auto !important;
    transform:none !important;
}

@media (max-width:980px){
    .sacc-user-toggle,
    .sacc-user-toggle.sacc-near-burger{
        right:42px !important;
        left:auto !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        margin:0 !important;
    }
}





/* v0.1.36 - user-approved cover toggle CSS */
.sacc-user-toggle,
.sacc-user-toggle.sacc-near-burger{
    position:absolute !important;
    right:42px !important;
    left:auto !important;
    top:49% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    z-index:100002 !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    filter:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    line-height:1 !important;
    font-size:0 !important;
    overflow:visible !important;
}

.sacc-user-toggle.is-on{
    color:#161616 !important;
}

.sacc-user-toggle.is-off{
    color:#767676 !important;
    opacity:1 !important;
}

.sacc-user-toggle:hover,
.sacc-user-toggle:focus,
.sacc-user-toggle:active{
    background:transparent !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
    outline:none !important;
}

.sacc-user-toggle-dot,
.sacc-user-toggle-text{
    display:none !important;
}

.sacc-user-toggle-icon{
    width:25px !important;
    height:25px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.7px !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    pointer-events:none !important;
}

.sacc-user-toggle .textprompt,
.sacc-user-toggle .sacc-toggle-prompt{
    
    width:max-content !important;
    display:inline-table !important;
    background-color:#262626 !important;
    color:#fff !important;
    text-align:center !important;
    border-radius:4px !important;
    padding:8px 10px !important;
    position:absolute !important;
    z-index:100003 !important;
    top:calc(100% + 10px) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    
    transition:opacity .2s !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    pointer-events:none !important;
    font-family:inherit !important;
}

.sacc-user-toggle .textprompt::after,
.sacc-user-toggle .sacc-toggle-prompt::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:100% !important;
    margin-left:-5px !important;
    border-width:5px !important;
    border-style:solid !important;
    border-color:transparent transparent #262626 transparent !important;
}

.sacc-user-toggle:hover .textprompt,
.sacc-user-toggle:hover .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}

#et-top-navigation,
.et_mobile_nav_menu,
.mobile_menu_bar,
#main-header .container,
header .container{
    position:relative !important;
}

@media (max-width:980px){
    .sacc-user-toggle,
    .sacc-user-toggle.sacc-near-burger{
        right:42px !important;
        left:auto !important;
        top:49% !important;
        transform:translateY(-50%) !important;
        margin:0 !important;
    }
}


/* v0.1.38 - tooltip hidden by default, visible only on hover */
.sacc-user-toggle .textprompt,
.sacc-user-toggle .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}

.sacc-user-toggle:hover .textprompt,
.sacc-user-toggle:hover .sacc-toggle-prompt,
.sacc-user-toggle:focus .textprompt,
.sacc-user-toggle:focus .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}


/* v0.1.39 - tooltip bugfix:
   1) no native grey browser tooltip because JS no longer sets title;
   2) custom prompt is driven by hover only, not focus/click. */
.sacc-user-toggle .textprompt,
.sacc-user-toggle .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}

.sacc-user-toggle:hover .textprompt,
.sacc-user-toggle:hover .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}

.sacc-user-toggle:focus .textprompt,
.sacc-user-toggle:focus .sacc-toggle-prompt,
.sacc-user-toggle:active .textprompt,
.sacc-user-toggle:active .sacc-toggle-prompt,
.sacc-user-toggle.sacc-toggle-clicked .textprompt,
.sacc-user-toggle.sacc-toggle-clicked .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}


/* v0.1.40 - tooltip must work after every click in both ON/OFF modes */
.sacc-user-toggle .textprompt,
.sacc-user-toggle .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}

.sacc-user-toggle:hover .textprompt,
.sacc-user-toggle:hover .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}

.sacc-user-toggle:focus:not(:hover) .textprompt,
.sacc-user-toggle:focus:not(:hover) .sacc-toggle-prompt,
.sacc-user-toggle:active:not(:hover) .textprompt,
.sacc-user-toggle:active:not(:hover) .sacc-toggle-prompt,
.sacc-user-toggle.sacc-toggle-clicked:hover .textprompt,
.sacc-user-toggle.sacc-toggle-clicked:hover .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}


/* v0.1.41 - stable ON/OFF toggle state + hover-only prompt */
.sacc-user-toggle.is-on{
    color:#161616 !important;
}

.sacc-user-toggle.is-off{
    color:#767676 !important;
    opacity:1 !important;
}

.sacc-user-toggle .textprompt,
.sacc-user-toggle .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}

.sacc-user-toggle:hover .textprompt,
.sacc-user-toggle:hover .sacc-toggle-prompt{
    visibility:visible !important;
    opacity:1 !important;
}

.sacc-user-toggle:focus:not(:hover) .textprompt,
.sacc-user-toggle:focus:not(:hover) .sacc-toggle-prompt,
.sacc-user-toggle:active:not(:hover) .textprompt,
.sacc-user-toggle:active:not(:hover) .sacc-toggle-prompt{
    visibility:hidden !important;
    opacity:0 !important;
}

.sacc-user-toggle:hover,
.sacc-user-toggle:focus,
.sacc-user-toggle:active{
    opacity:1 !important;
}

.sacc-user-toggle[title]{
    pointer-events:auto !important;
}


/* v0.1.42 - keep shadows behind cards, not above neighbouring cards */
html:not(.sacc-user-covers-off) .dp-dfg-container,
html:not(.sacc-user-covers-off) .dp-dfg-items,
html:not(.sacc-user-covers-off) .dp-dfg-layout-grid,
body:not(.sacc-user-covers-off) .dp-dfg-container,
body:not(.sacc-user-covers-off) .dp-dfg-items,
body:not(.sacc-user-covers-off) .dp-dfg-layout-grid{
    overflow:visible !important;
}

html:not(.sacc-user-covers-off) .dp-dfg-items{
    isolation:isolate !important;
}

html:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card,
html:not(.sacc-user-covers-off) article.sacc-cover-card,
body:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card,
body:not(.sacc-user-covers-off) article.sacc-cover-card{
    position:relative !important;
    z-index:1 !important;
    isolation:isolate !important;
    overflow:hidden !important;
    box-shadow:0 2px 80px rgba(0,0,0,0.07) !important;
    -webkit-box-shadow:0 2px 80px rgba(0,0,0,0.07) !important;
}

/* Inner cover/player layers stay above their own card background only. */
html:not(.sacc-user-covers-off) .sacc-cover-card > .sacc-cover-layer{
    z-index:0 !important;
}

html:not(.sacc-user-covers-off) .sacc-cover-card .dp-dfg-header,
html:not(.sacc-user-covers-off) .sacc-cover-card .entry-header,
html:not(.sacc-user-covers-off) .sacc-cover-card .blockplayer,
html:not(.sacc-user-covers-off) .sacc-cover-card .buttons,
html:not(.sacc-user-covers-off) .sacc-cover-card .sapl-player{
    position:relative !important;
    z-index:2 !important;
}

/* Avoid later cards visually sitting above earlier cards. */
html:not(.sacc-user-covers-off) .dp-dfg-items > .sacc-cover-card:hover,
html:not(.sacc-user-covers-off) .dp-dfg-items > article.sacc-cover-card:hover,
body:not(.sacc-user-covers-off) .dp-dfg-items > .sacc-cover-card:hover,
body:not(.sacc-user-covers-off) .dp-dfg-items > article.sacc-cover-card:hover{
    z-index:3 !important;
}


/* v0.1.43 - shadows are always under all cards, not only on hover */
html:not(.sacc-user-covers-off) .dp-dfg-items{
    isolation:isolate !important;
    overflow:visible !important;
}

/* The card itself becomes the content layer. The shadow is moved to ::before. */
html:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card,
html:not(.sacc-user-covers-off) article.sacc-cover-card,
body:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card,
body:not(.sacc-user-covers-off) article.sacc-cover-card{
    position:relative !important;
    z-index:auto !important;
    isolation:auto !important;
    overflow:visible !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    background:transparent !important;
    border-radius:20px !important;
}

/* One shared shadow/background layer per card, always below every card's real content. */
html:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card::before,
html:not(.sacc-user-covers-off) article.sacc-cover-card::before,
body:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card::before,
body:not(.sacc-user-covers-off) article.sacc-cover-card::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 2px 80px rgba(0,0,0,0.07) !important;
    -webkit-box-shadow:0 2px 80px rgba(0,0,0,0.07) !important;
}

/* Actual visible card layers are above all shadows. */
html:not(.sacc-user-covers-off) .sacc-cover-card > .sacc-cover-layer,
body:not(.sacc-user-covers-off) .sacc-cover-card > .sacc-cover-layer{
    z-index:1 !important;
}

html:not(.sacc-user-covers-off) .sacc-cover-card .dp-dfg-header,
html:not(.sacc-user-covers-off) .sacc-cover-card .entry-header,
html:not(.sacc-user-covers-off) .sacc-cover-card .blockplayer,
html:not(.sacc-user-covers-off) .sacc-cover-card .buttons,
html:not(.sacc-user-covers-off) .sacc-cover-card .sapl-player,
body:not(.sacc-user-covers-off) .sacc-cover-card .dp-dfg-header,
body:not(.sacc-user-covers-off) .sacc-cover-card .entry-header,
body:not(.sacc-user-covers-off) .sacc-cover-card .blockplayer,
body:not(.sacc-user-covers-off) .sacc-cover-card .buttons,
body:not(.sacc-user-covers-off) .sacc-cover-card .sapl-player{
    position:relative !important;
    z-index:2 !important;
}

/* Hover must not be needed for correct stacking. */
html:not(.sacc-user-covers-off) .dp-dfg-items > .sacc-cover-card:hover,
html:not(.sacc-user-covers-off) .dp-dfg-items > article.sacc-cover-card:hover,
body:not(.sacc-user-covers-off) .dp-dfg-items > .sacc-cover-card:hover,
body:not(.sacc-user-covers-off) .dp-dfg-items > article.sacc-cover-card:hover{
    z-index:auto !important;
}


/* v0.1.44 - restore deeper native-style card shadow in Covers ON */
html:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card::before,
html:not(.sacc-user-covers-off) article.sacc-cover-card::before,
body:not(.sacc-user-covers-off) .dp-dfg-item.sacc-cover-card::before,
body:not(.sacc-user-covers-off) article.sacc-cover-card::before{
    box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
    -webkit-box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
}

/* Keep real card content above every shadow. */
html:not(.sacc-user-covers-off) .sacc-cover-card > *:not(.sacc-cover-layer),
body:not(.sacc-user-covers-off) .sacc-cover-card > *:not(.sacc-cover-layer){
    position:relative !important;
    z-index:2 !important;
}

/* Cover image layer remains under text/player but above the shadow/background layer. */
html:not(.sacc-user-covers-off) .sacc-cover-card > .sacc-cover-layer,
body:not(.sacc-user-covers-off) .sacc-cover-card > .sacc-cover-layer{
    position:absolute !important;
    z-index:1 !important;
}


/* v0.1.51 - restore Cover ON card shadows for admin and public */
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
html.sacc-user-covers-on article.sacc-cover-card,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
body.sacc-user-covers-on article.sacc-cover-card{
    position:relative !important;
    border-radius:20px !important;
    background:#fff !important;
    overflow:visible !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}

html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
html.sacc-user-covers-on article.sacc-cover-card::before,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
body.sacc-user-covers-on article.sacc-cover-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    display:block !important;
    pointer-events:none !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
    -webkit-box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
}

html.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer,
body.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer{
    z-index:1 !important;
}

html.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer),
body.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer){
    position:relative !important;
    z-index:2 !important;
}

/* v0.1.51 - if visitor is OFF, loaded CSS must be visually inert */
html.sacc-user-covers-off .sacc-cover-layer,
body.sacc-user-covers-off .sacc-cover-layer{
    display:none !important;
}

html.sacc-user-covers-off .sacc-cover-card,
body.sacc-user-covers-off .sacc-cover-card,
html.sacc-user-covers-off .sacc-cover-loaded,
body.sacc-user-covers-off .sacc-cover-loaded,
html.sacc-user-covers-off .sacc-cover-pending,
body.sacc-user-covers-off .sacc-cover-pending{
    height:auto !important;
    min-height:0 !important;
    padding:revert !important;
    overflow:revert !important;
    background:revert !important;
    border-radius:revert !important;
    box-shadow:revert !important;
    -webkit-box-shadow:revert !important;
    isolation:auto !important;
}

html.sacc-user-covers-off .sacc-cover-card::before,
html.sacc-user-covers-off .sacc-cover-card::after,
body.sacc-user-covers-off .sacc-cover-card::before,
body.sacc-user-covers-off .sacc-cover-card::after{
    content:normal !important;
    display:none !important;
}


/* v0.1.51 - anti-jump boot state.
   Space remains reserved, but the grid is hidden until the chosen ON/OFF layout is ready. */
html.sacc-booting .dp-dfg-container,
html.sacc-booting .dp-dfg-items,
html.sacc-booting .sacc-cover-card,
html.sacc-booting .dp-dfg-item{
    visibility:hidden !important;
}


/* v0.1.51 - remove subpixel seams / hairlines at cover fade boundary.
   The line was caused by compositing on the transparent gradient + backdrop-filter layer.
   Keep the same layout, but make the fade overlap the image/content by a few pixels
   and disable backdrop-filter completely. */
.sacc-cover-card > .sacc-cover-layer{
    overflow:hidden !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:#fff !important;
    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-image{
    inset:-1px -1px 0 -1px !important;
    width:auto !important;
    height:auto !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    transform:translateZ(0) scale(1.002) !important;
    backface-visibility:hidden !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
    left:-2px !important;
    right:-2px !important;
    bottom:-3px !important;
    width:auto !important;
    height:calc(32% + 6px) !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background-color:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.001) 0%,
        rgba(255,255,255,0.015) 11%,
        rgba(255,255,255,0.04) 22%,
        rgba(255,255,255,0.09) 31%,
        rgba(255,255,255,0.20) 44%,
        rgba(255,255,255,0.40) 59%,
        rgba(255,255,255,0.68) 75%,
        rgba(255,255,255,0.90) 87%,
        #fff 100%
    ) !important;
}

/* Remove the extra 1px separator that can appear exactly where the image/fade meets the title block. */
.sacc-cover-card .dp-dfg-header,
.sacc-cover-card .dp-dfg-header.entry-header,
.sacc-cover-card .entry-header,
.sacc-cover-card .dp-dfg-content,
.sacc-cover-card .entry-summary{
    border-top:none !important;
    border-bottom:none !important;
    outline:none !important;
    box-shadow:none !important;
}

/* Prevent adjacent layers from painting their own grey antialias line over the fade. */
.sacc-cover-card > :not(.sacc-cover-layer){
    background-clip:padding-box !important;
}


/* v0.1.51 - seamless right edge and softer fade entry */
.sacc-cover-card > .sacc-cover-layer{
    left:-2px !important;
    right:-3px !important;
    width:calc(100% + 5px) !important;
    overflow:hidden !important;
    background:#fff !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-image{
    left:-2px !important;
    right:-4px !important;
    top:-1px !important;
    bottom:0 !important;
    width:calc(100% + 6px) !important;
    max-width:none !important;
    background-size:cover !important;
    background-position:center center !important;
    transform:translateZ(0) scale(1.006) !important;
}

/* The fade now starts higher and much softer, with overlap below the image area.
   This removes the visible horizontal seam under the cover. */
.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
    left:-4px !important;
    right:-4px !important;
    bottom:-8px !important;
    height:calc(46% + 16px) !important;
    width:auto !important;
    background-color:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.006) 8%,
        rgba(255,255,255,0.018) 17%,
        rgba(255,255,255,0.040) 27%,
        rgba(255,255,255,0.075) 37%,
        rgba(255,255,255,0.130) 47%,
        rgba(255,255,255,0.220) 58%,
        rgba(255,255,255,0.360) 69%,
        rgba(255,255,255,0.560) 80%,
        rgba(255,255,255,0.800) 91%,
        #fff 100%
    ) !important;
}

/* No separator at the content boundary. */
.sacc-cover-card .dp-dfg-header,
.sacc-cover-card .entry-header,
.sacc-cover-card .dp-dfg-content,
.sacc-cover-card .entry-summary,
.sacc-cover-card .blockplayer{
    border-top:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}


/* v0.1.52 - smoother fade based on user-tuned values, without banding */
.sacc-cover-card > .sacc-cover-layer .sacc-cover-image{
    transform: translateZ(0) scale(1.01) !important;
}

.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
    left:-2px !important;
    right:-2px !important;
    bottom:-3px !important;
    height:calc(32% + 6px) !important;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,0.001) 0%,
        rgba(255,255,255,0.004) 4%,
        rgba(255,255,255,0.008) 8%,
        rgba(255,255,255,0.015) 11%,
        rgba(255,255,255,0.025) 14%,
        rgba(255,255,255,0.040) 18%,
        rgba(255,255,255,0.060) 22%,
        rgba(255,255,255,0.090) 26%,
        rgba(255,255,255,0.130) 31%,
        rgba(255,255,255,0.200) 40%,
        rgba(255,255,255,0.280) 49%,
        rgba(255,255,255,0.400) 58%,
        rgba(255,255,255,0.560) 68%,
        rgba(255,255,255,0.800) 78%,
        rgba(255,255,255,0.970) 91%,
        #ffffff 100%
    ) !important;
}


/* v0.1.53 user adjustment */
.sacc-cover-card > .sacc-cover-layer{
    left:0px !important;
    right:0px !important;
    width:calc(100% + 5px) !important;
    overflow:hidden !important;
    background:#fff !important;
}


/* v0.1.57 user-tuned fade */
.sacc-cover-card > .sacc-cover-layer .sacc-cover-fade{
    left:-2px !important;
    right:-2px !important;
    bottom:-3px !important;
    height:calc(32% + 6px) !important;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.001) 0%,
        rgba(255,255,255,0.004) 4%,
        rgba(255,255,255,0.008) 8%,
        rgba(255,255,255,0.015) 11%,
        rgba(255,255,255,0.025) 14%,
        rgba(255,255,255,0.040) 18%,
        rgba(255,255,255,0.060) 22%,
        rgba(255,255,255,0.090) 26%,
        rgba(255,255,255,0.130) 31%,
        rgba(255,255,255,0.200) 40%,
        rgba(255,255,255,0.280) 49%,
        rgba(255,255,255,0.400) 58%,
        rgba(255,255,255,0.560) 68%,
        rgba(255,255,255,0.800) 79%,
        rgba(255,255,255,0.970) 91%,
        #ffffff 100%
    ) !important;
}


/* v0.1.57 - keep every card above every neighbour shadow.
   Shadow is moved into a negative z-index pseudo-layer inside each card's own stacking context,
   so it cannot paint over the cover/image/content of adjacent cards. */
html.sacc-user-covers-on .dp-dfg-items,
body.sacc-user-covers-on .dp-dfg-items{
    isolation:isolate !important;
    overflow:visible !important;
}

html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
html.sacc-user-covers-on article.sacc-cover-card,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
body.sacc-user-covers-on article.sacc-cover-card{
    position:relative !important;
    z-index:0 !important;
    isolation:isolate !important;
    overflow:hidden !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    background:#fff !important;
    border-radius:20px !important;
}

/* Shadow/background sits at the absolute bottom of the card stack. */
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
html.sacc-user-covers-on article.sacc-cover-card::before,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
body.sacc-user-covers-on article.sacc-cover-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    pointer-events:none !important;
    z-index:-1 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
    -webkit-box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
}

/* Real card layers are always above shadows. */
html.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer,
body.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer{
    position:absolute !important;
    z-index:1 !important;
}

html.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer),
body.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer){
    position:relative !important;
    z-index:2 !important;
}

/* Hover must not change stacking or make shadows jump above neighbours. */
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card:hover,
html.sacc-user-covers-on article.sacc-cover-card:hover,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card:hover,
body.sacc-user-covers-on article.sacc-cover-card:hover{
    z-index:0 !important;
}


/* v0.1.57 - real global shadow layer.
   Shadows are above the page background, but below every card. */
html.sacc-user-covers-on .dp-dfg-items,
body.sacc-user-covers-on .dp-dfg-items{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
}

html.sacc-user-covers-on .sacc-global-shadow-layer,
body.sacc-user-covers-on .sacc-global-shadow-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    overflow:visible !important;
}

html.sacc-user-covers-on .sacc-global-card-shadow,
body.sacc-user-covers-on .sacc-global-card-shadow{
    position:absolute !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
    -webkit-box-shadow:0 2px 90px rgba(0,0,0,0.105) !important;
    pointer-events:none !important;
}

/* Cards themselves are always above the whole shadow layer. */
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
html.sacc-user-covers-on article.sacc-cover-card,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card,
body.sacc-user-covers-on article.sacc-cover-card{
    position:relative !important;
    z-index:2 !important;
    isolation:auto !important;
    overflow:hidden !important;
    background:#fff !important;
    border-radius:20px !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}

/* Disable all old per-card shadow pseudo-elements, so no neighbour shadow can cross onto another card. */
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
html.sacc-user-covers-on article.sacc-cover-card::before,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::before,
body.sacc-user-covers-on article.sacc-cover-card::before,
html.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::after,
html.sacc-user-covers-on article.sacc-cover-card::after,
body.sacc-user-covers-on .dp-dfg-item.sacc-cover-card::after,
body.sacc-user-covers-on article.sacc-cover-card::after{
    content:none !important;
    display:none !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}

/* Keep inner card content in normal order. */
html.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer,
body.sacc-user-covers-on .sacc-cover-card > .sacc-cover-layer{
    position:absolute !important;
    z-index:1 !important;
}

html.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer),
body.sacc-user-covers-on .sacc-cover-card > *:not(.sacc-cover-layer){
    position:relative !important;
    z-index:2 !important;
}