/*
  Mobile audio controls must grow into the viewport, not below it.
  The home card serial badges were leftover editorial placeholders.
*/

/* Hide the CARD 01 / star 01 placeholder badge group on home cards. */
.home-portal-card > .absolute.left-4.right-4.top-4 {
  display: none !important;
}

@media (max-width: 767px) {
  .soundtrack-player {
    top: max(5.25rem, calc(4.75rem + env(safe-area-inset-top, 0px))) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .soundtrack-player-shell {
    align-items: flex-start !important;
  }

  .soundtrack-flyout {
    top: 0 !important;
    right: calc(100% + 0.6rem) !important;
    align-items: flex-end !important;
    gap: 0.6rem !important;
    transform: none !important;
  }

  .soundtrack-control-drawer.soundtrack-control-shell {
    flex-direction: row !important;
  }

  .soundtrack-list-panel {
    width: min(19rem, calc(100vw - 5rem)) !important;
    max-height: min(56svh, 25rem) !important;
  }

  /* The members-area artwork is delivered in 16:9. Preserve the full frame on phones. */
  .product-members-page [class~="aspect-[16/10]"] {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  .product-members-page [class~="aspect-[16/10]"] > img {
    object-fit: contain !important;
    background: #050302 !important;
  }

  #amostras-membros .member-sample-stage {
    height: clamp(19rem, 72vw, 25rem) !important;
    min-height: clamp(19rem, 72vw, 25rem) !important;
  }

  #amostras-membros .member-sample-card {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #amostras-membros .member-sample-card > img,
  #amostras-membros .member-sample-card [data-echo-admin-native-media="true"] {
    object-fit: contain !important;
    background: #050302 !important;
  }
}

/* The live-visitor counter is not part of the public experience. */
[aria-label^="Pessoas online no momento"] {
  display: none !important;
}

.stories-return-control {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  left: max(1rem, env(safe-area-inset-left, 0px));
  z-index: 160;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 0.72rem 1rem;
  font: 700 0.72rem/1 "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.stories-return-control:hover,
.stories-return-control:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #000;
}

@media (max-width: 767px) {
  .stories-return-control {
    top: max(5.25rem, calc(4.75rem + env(safe-area-inset-top, 0px)));
  }
}