/*
 * RADIO HASERA WEB SURFACE
 * All forthcoming desktop furnishing belongs here and must remain inside
 * the min-width boundary. Do not place phone fixes in this file.
 */
@media (min-width: 700px) {
  /* WEB NON STOP: hide the INDEX gallery underneath the open player. */
  body.service-radio-hasera.is-emitter-player-open .www-index-cover-rail,
  body.service-radiohasera.is-emitter-player-open .www-index-cover-rail {
    display: none !important;
  }

  body.service-radio-hasera.is-www-index-shell .www-index-stage,
  body.service-radiohasera.is-www-index-shell .www-index-stage {
    isolation: auto;
  }

  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-surface-contract: web-v1;
    --radio-web-genres-top: calc(87px + 10mm);
  }

  .radio-phone-only {
    display: none !important;
  }

  .radio-web-only {
    display: revert;
  }

  /* WEB INDEX emitter: 42% horizontal axis and 5 mm vertical margins. */
  body.service-radio-hasera.is-www-index-shell .www-index-emitter,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter.is-emitter-module-active,
  body.service-radiohasera.is-www-index-shell .www-index-emitter,
  body.service-radiohasera.is-www-index-shell .www-index-emitter.is-emitter-module-active {
    left: calc(42% + 16.5mm);
    top: 50%;
    width: calc((100svh - 10mm) * 1.701223) !important;
    max-width: none;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  /*
   * WEB INDEX emitter: keep the exterior rings at their original opacity.
   * The complete yellow/orange core is 35 percentage points more transparent.
   * This is 20 percentage points more transparency than the previous setting.
   * This is a layer split, not brightness or color processing.
   */
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still {
    position: absolute;
    inset: 0;
  }

  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art-outer,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still-outer,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art-outer,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still-outer {
    -webkit-mask-image: radial-gradient(circle at 63.5% 52%, transparent 0 44%, #000 44.5%);
    mask-image: radial-gradient(circle at 63.5% 52%, transparent 0 44%, #000 44.5%);
  }

  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art-center,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still-center,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art-center,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still-center {
    opacity: calc(var(--emitter-audio-opacity, 1) - .35);
    -webkit-mask-image: radial-gradient(circle at 63.5% 52%, #000 0 44%, transparent 44.5%);
    mask-image: radial-gradient(circle at 63.5% 52%, #000 0 44%, transparent 44.5%);
  }

  body.service-radio-hasera.is-www-index-shell .topbar,
  body.service-radiohasera.is-www-index-shell .topbar {
    z-index: 100;
  }

  body.service-radio-hasera.is-www-index-shell .public-menu,
  body.service-radio-hasera.is-www-index-shell .public-submenu,
  body.service-radiohasera.is-www-index-shell .public-menu,
  body.service-radiohasera.is-www-index-shell .public-submenu {
    z-index: 110;
  }

  /*
   * WEB only: the first menu level takes the opposite colour of the pixels
   * directly underneath it. This remains readable over every changing cover
   * background without placing an artificial panel behind the navigation.
   * Submenus keep their own fixed palette because they already have a dark
   * surface.
   */
  body.service-radio-hasera.is-public-shell .public-menu > a,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link,
  body.service-radiohasera.is-public-shell .public-menu > a,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link {
    color: rgba(164, 164, 164, .94) !important;
    mix-blend-mode: difference;
    filter: contrast(1.08);
  }

  body.service-radio-hasera.is-public-shell .public-menu > a:hover,
  body.service-radio-hasera.is-public-shell .public-menu > a:focus-visible,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:hover,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:focus-visible,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:hover,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > a:hover,
  body.service-radiohasera.is-public-shell .public-menu > a:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:hover,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:hover,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:focus-visible {
    color: rgba(255, 255, 255, .98) !important;
    filter: contrast(1.28);
  }

  body.service-radio-hasera .radio-web-top-logout,
  body.service-radio-hasera .radio-web-submenu-logout,
  body.service-radiohasera .radio-web-top-logout,
  body.service-radiohasera .radio-web-submenu-logout {
    margin: 0;
  }

  body.service-radio-hasera .radio-web-top-logout,
  body.service-radiohasera .radio-web-top-logout {
    display: inline-flex;
    align-items: center;
  }

  body.service-radio-hasera .radio-web-submenu-logout button,
  body.service-radiohasera .radio-web-submenu-logout button {
    display: block;
    width: 100%;
    border: 0;
    padding: 8px 18px;
    background: transparent;
    color: rgba(164, 164, 164, .9);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
  }

  body.service-radio-hasera .radio-web-submenu-logout button:hover,
  body.service-radio-hasera .radio-web-submenu-logout button:focus-visible,
  body.service-radiohasera .radio-web-submenu-logout button:hover,
  body.service-radiohasera .radio-web-submenu-logout button:focus-visible {
    color: var(--gold);
  }

  @media (min-width: 901px) {
    /*
     * WEB header: the Radio HaSera identity is 23.6% larger (170 -> 210.12 px).
     * Its center remains on the same 96 px axis as the menu text. The menu
     * starts 34 px farther right, preserving the original brand/menu gap.
     */
    body.service-radio-hasera.is-public-shell .brand,
    body.service-radiohasera.is-public-shell .brand {
      width: 210.12px;
      top: calc(96px - 1px + .5mm);
      transform: translateY(-50%);
    }

    body.service-radio-hasera.is-www-index-shell .public-menu,
    body.service-radiohasera.is-www-index-shell .public-menu {
      left: calc(30.5vw + 34px);
    }
  }

  body.service-radio-hasera.is-www-index-shell .www-index-cover-rail,
  body.service-radiohasera.is-www-index-shell .www-index-cover-rail {
    z-index: 35;
  }

  /*
   * Radio HaSera WEB reuses the exact PHONE genre controls for every listener.
   * INDEX and NON STOP use one fixed viewport position, one size and one
   * spacing model. The emitter rings remain visible underneath the controls.
   */
  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: var(--radio-web-genres-top);
    width: min(430px, 72vw);
    height: clamp(56px, 4.2vw, 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 3.2vw, 46px);
    padding: 0;
    transform: translateX(-50%);
    background: transparent;
    user-select: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres button,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres button {
    position: relative;
    flex: 0 0 clamp(56px, 4.2vw, 66px);
    width: clamp(56px, 4.2vw, 66px);
    height: clamp(56px, 4.2vw, 66px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres img,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    grid-area: 1 / 1;
    transition: filter 140ms ease, transform 140ms ease;
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres .radio-genre-base,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres .radio-genre-base {
    opacity: .55;
    mix-blend-mode: difference;
    filter: grayscale(1) contrast(1.15);
  }

  /* INDEX only: solid icons that still react chromatically to the current background. */
  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres {
    mix-blend-mode: luminosity;
  }

  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres .radio-genre-base,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres .radio-genre-base {
    opacity: 1;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(1.08) brightness(.92);
  }

  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres .radio-genre-label,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-mobile-genres .radio-genre-label {
    opacity: 1;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(1.08) brightness(.92);
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres .radio-genre-label,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres .radio-genre-label {
    opacity: 1;
    pointer-events: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres button:hover,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres button:hover {
    transform: scale(1.06);
  }

  body.service-radio-hasera.is-www-index-shell .radio-mobile-genres button.is-active,
  body.service-radiohasera.is-www-index-shell .radio-mobile-genres button.is-active {
    filter: brightness(1.18);
  }

  /* Keep the same three controls available above the WEB NON STOP scene. */
  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .radio-mobile-genres,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .radio-mobile-genres {
    z-index: 31;
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw {
    --hstw-cover-size: clamp(170px, min(20vw, 34vh), 235px);
    --hstw-wave-width: min(390px, 58vw);
    --hstw-wave-height: clamp(76px, min(9vw, 14vh), 100px);
    padding-top: clamp(150px, 20vh, 185px);
    padding-bottom: clamp(108px, 15vh, 145px);
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw .hstw-shell,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw .hstw-shell {
    transform: translateY(5mm);
  }

  /*
   * WEB NON STOP history: fit every visible cover into one centred row.
   * The JS supplies --emitter-rail-count (1–10), so a short history remains
   * compact while a complete ten-track history uses the available width
   * without horizontal scrolling or cropped edge covers.
   */
  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail {
    --radio-web-rail-gap: clamp(6px, .65vw, 12px);
    left: 50%;
    right: auto;
    width: min(
      calc(100vw - 20mm),
      calc(
        var(--emitter-rail-count, 10) * 120px
        + (var(--emitter-rail-count, 10) - 1) * var(--radio-web-rail-gap)
      )
    );
    display: grid;
    grid-template-columns: repeat(var(--emitter-rail-count, 10), minmax(0, 1fr));
    gap: var(--radio-web-rail-gap);
    overflow: hidden;
    transform: translateX(-50%);
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button {
    width: 100%;
    min-width: 0;
    max-width: 120px;
    justify-self: center;
  }
}

/* DJ HaSera WEB profile controls. Phone rendering remains independent. */
@media (min-width: 700px) {
  body.service-dj-hasera.is-www-index-shell .radio-mobile-genres,
  body.service-djhasera.is-www-index-shell .radio-mobile-genres {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: var(--radio-web-genres-top);
    width: min(430px, 72vw);
    height: clamp(56px, 4.2vw, 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 3.2vw, 46px);
    padding: 0;
    transform: translateX(-50%);
    background: transparent;
    user-select: none;
  }

  body.service-dj-hasera.is-www-index-shell .radio-mobile-genres button,
  body.service-djhasera.is-www-index-shell .radio-mobile-genres button {
    position: relative;
    flex: 0 0 clamp(56px, 4.2vw, 66px);
    width: clamp(56px, 4.2vw, 66px);
    height: clamp(56px, 4.2vw, 66px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transform: none !important;
  }

  body.service-dj-hasera.is-www-index-shell .radio-mobile-genres img,
  body.service-djhasera.is-www-index-shell .radio-mobile-genres img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    grid-area: 1 / 1;
    transition: filter 140ms ease, transform 140ms ease;
  }

  body.service-dj-hasera .radio-mobile-genres button::after,
  body.service-djhasera .radio-mobile-genres button::after {
    content: none !important;
    display: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres .radio-genre-label,
  body.service-djhasera .radio-mobile-genres .radio-genre-label {
    display: none !important;
  }
  body.service-dj-hasera .radio-mobile-genres .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres .radio-genre-label-web {
    display: block !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: saturate(1.5) brightness(1.2) contrast(1.08) drop-shadow(0 1px 1px rgba(0, 8, 35, .9)) !important;
    pointer-events: none;
  }

  body.service-dj-hasera .radio-mobile-genres button:hover,
  body.service-djhasera .radio-mobile-genres button:hover,
  body.service-dj-hasera .radio-mobile-genres button.is-active,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"],
  body.service-djhasera .radio-mobile-genres button.is-active,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] {
    transform: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-label-web,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label-web {
    filter: sepia(1) saturate(7) hue-rotate(304deg) brightness(.58) contrast(1.3) !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-profile-pressing,
  body.service-djhasera .radio-mobile-genres button.is-profile-pressing {
    transform: scale(1.16) !important;
  }
}

/* Final WEB label renderer: use the same dimensional image layer as phone. */
@media (min-width: 700px) {
  body.service-dj-hasera .radio-mobile-genres button::after,
  body.service-djhasera .radio-mobile-genres button::after {
    content: none !important;
    display: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres .radio-genre-label,
  body.service-djhasera .radio-mobile-genres .radio-genre-label {
    display: block !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    pointer-events: none;
  }

  body.service-dj-hasera .radio-mobile-genres button:hover,
  body.service-djhasera .radio-mobile-genres button:hover,
  body.service-dj-hasera .radio-mobile-genres button.is-active,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"],
  body.service-djhasera .radio-mobile-genres button.is-active,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] {
    transform: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-label,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-label,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label {
    filter: sepia(1) saturate(7) hue-rotate(304deg) brightness(.58) contrast(1.3) !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-profile-pressing,
  body.service-djhasera .radio-mobile-genres button.is-profile-pressing {
    transform: scale(1.16) !important;
  }
}

/* DJ HaSera WEB audio-profile controls.
 * The phone rendering is the visual reference and remains untouched. */
@media (min-width: 700px) {
  body.service-dj-hasera .radio-mobile-genres .radio-genre-label,
  body.service-djhasera .radio-mobile-genres .radio-genre-label {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button,
  body.service-djhasera .radio-mobile-genres button {
    transition:
      transform 190ms cubic-bezier(.2,.8,.2,1),
      filter 220ms ease;
    transform-origin: center;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"],
  body.service-djhasera .radio-mobile-genres button.is-active,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] {
    transform: scale(1.08);
    filter: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-base,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-base,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-base,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-base {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-label,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-label,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label {
    filter: hue-rotate(140deg) saturate(1.45) brightness(1.05) !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-profile-pressing,
  body.service-djhasera .radio-mobile-genres button.is-profile-pressing {
    transform: scale(1.16) !important;
  }
}

/*
 * DJ HaSera may carry the radio compatibility class so it can reuse the
 * receiver/navigation modules. Its selectable emitter profiles must not
 * inherit Radio HaSera's fixed WEB geometry or radial masks.
 */
@media (min-width: 700px) {
  body.service-dj-hasera.is-www-index-shell .www-index-emitter.emitter-module-trigger,
  body.service-djhasera.is-www-index-shell .www-index-emitter.emitter-module-trigger {
    left: calc(50% + var(--emitter-desktop-x, 0mm)) !important;
    top: calc(50% + var(--emitter-desktop-y, 0mm)) !important;
    width: var(--emitter-desktop-size, 70vw) !important;
    max-width: none;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
  }

  body.service-dj-hasera .emitter-variant-dj .emitter-module-art,
  body.service-dj-hasera .emitter-variant-dj .emitter-module-still,
  body.service-djhasera .emitter-variant-dj .emitter-module-art,
  body.service-djhasera .emitter-variant-dj .emitter-module-still {
    top: -6mm !important;
    bottom: auto !important;
    height: calc(100% + 12mm) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.service-dj-hasera .emitter-variant-dj .emitter-module-art-center,
  body.service-dj-hasera .emitter-variant-dj .emitter-module-still-center,
  body.service-djhasera .emitter-variant-dj .emitter-module-art-center,
  body.service-djhasera .emitter-variant-dj .emitter-module-still-center {
    opacity: var(--emitter-core-opacity, .4) !important;
  }
}

@media (max-width: 699px) {
  body.service-dj-hasera.is-www-index-shell .www-index-emitter.emitter-module-trigger,
  body.service-djhasera.is-www-index-shell .www-index-emitter.emitter-module-trigger {
    left: calc(50% + var(--emitter-mobile-x, 0mm)) !important;
    top: calc(50% + var(--emitter-mobile-y, 0mm)) !important;
    width: var(--emitter-mobile-size, 70vw) !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (min-width: 700px) and (max-height: 800px) {
  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-web-genres-top: calc(48px + 10mm);
  }

  body.service-radio-hasera.is-public-shell .brand,
  body.service-radiohasera.is-public-shell .brand {
    top: calc(57px - 1px + .5mm);
  }
}

@media (min-width: 700px) and (max-height: 650px) {
  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-web-genres-top: calc(41px + 10mm);
  }

  body.service-radio-hasera.is-public-shell .brand,
  body.service-radiohasera.is-public-shell .brand {
    top: calc(50px - 1px + .5mm);
  }
}

/* Final DJ profile state model — WEB only.
 * The icon body never remains enlarged or recoloured. Only the profile label
 * keeps the cherry active colour. */
@media (min-width: 700px) {
  body.service-dj-hasera .radio-mobile-genres button::after,
  body.service-djhasera .radio-mobile-genres button::after {
    content: attr(data-dj-label);
    position: absolute;
    z-index: 4;
    top: 42%;
    left: 50%;
    width: 78%;
    transform: translate(-50%, -50%) scaleX(.94);
    transform-origin: center;
    font-family: "Arial Black", Impact, Arial, sans-serif;
    font-size: clamp(17px, 1.55vw, 23px);
    font-weight: 950;
    font-style: normal;
    line-height: .86;
    letter-spacing: -.055em;
    text-align: center;
    color: #0878ff;
    -webkit-text-stroke: .5px #55c8ff;
    text-shadow:
      0 1px 0 #0059d6,
      0 2px 0 #003a9b,
      0 3px 2px rgba(0, 7, 30, .95);
    pointer-events: none;
  }

  body.service-dj-hasera .radio-mobile-genres .radio-genre-label,
  body.service-djhasera .radio-mobile-genres .radio-genre-label {
    display: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"],
  body.service-djhasera .radio-mobile-genres button.is-active,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] {
    transform: none !important;
    filter: none !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-base,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-base,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-base,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-base {
    opacity: .55 !important;
    mix-blend-mode: difference !important;
    filter: grayscale(1) contrast(1.15) !important;
  }

  body.service-dj-hasera .radio-mobile-genres button.is-active::after,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"]::after,
  body.service-djhasera .radio-mobile-genres button.is-active::after,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"]::after {
    color: #851b32;
    -webkit-text-stroke-color: #c14a60;
    text-shadow:
      0 1px 0 #681326,
      0 2px 0 #470b19,
      0 3px 2px rgba(25, 0, 7, .95);
  }

  body.service-dj-hasera .radio-mobile-genres button.is-profile-pressing,
  body.service-djhasera .radio-mobile-genres button.is-profile-pressing {
    transform: scale(1.16) !important;
  }
}

/* Final WEB-only layer. The phone keeps its existing V2 image untouched. */
@media (min-width: 700px) {
  body.service-dj-hasera .radio-mobile-genres button::after,
  body.service-djhasera .radio-mobile-genres button::after {
    content: none !important;
    display: none !important;
  }
  body.service-dj-hasera .radio-mobile-genres .radio-genre-label,
  body.service-djhasera .radio-mobile-genres .radio-genre-label {
    display: none !important;
  }
  body.service-dj-hasera .radio-mobile-genres .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres .radio-genre-label-web {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    grid-area: 1 / 1;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: saturate(1.5) brightness(1.2) contrast(1.08) drop-shadow(0 1px 1px rgba(0, 8, 35, .9)) !important;
    pointer-events: none;
  }
  body.service-dj-hasera .radio-mobile-genres button:hover,
  body.service-djhasera .radio-mobile-genres button:hover,
  body.service-dj-hasera .radio-mobile-genres button.is-active,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"],
  body.service-djhasera .radio-mobile-genres button.is-active,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] {
    transform: none !important;
  }
  body.service-dj-hasera .radio-mobile-genres button.is-active .radio-genre-label-web,
  body.service-dj-hasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres button.is-active .radio-genre-label-web,
  body.service-djhasera .radio-mobile-genres button[aria-pressed="true"] .radio-genre-label-web {
    filter: sepia(1) saturate(7) hue-rotate(304deg) brightness(.58) contrast(1.3) !important;
  }
  body.service-dj-hasera .radio-mobile-genres button.is-profile-pressing,
  body.service-djhasera .radio-mobile-genres button.is-profile-pressing {
    transform: scale(1.16) !important;
  }
}