/* Retail-aligned structure for the classic expansion sites. */
#midnight-logo {
  order: 1;
}

.classic-section-heading {
  order: 2;
  display: block !important;
}

#retail-root .classic-section-heading h1 {
  display: block !important;
}

#specContainer {
  order: 3;
}

#player-section {
  order: 4;
  display: block !important;
  overflow: visible !important;
}

.shared-paste-helper-copy,
#shared-paste-helper button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.shared-paste-helper-copy {
  font-size: 12px !important;
}

@media (min-width: 901px) {
  #retail-root {
    padding: 14px 24px 10px !important;
  }

  #midnight-logo {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 5px auto 10px !important;
    padding: 0 !important;
  }

  .classic-section-heading {
    width: 1100px !important;
    margin: 0 auto 14px !important;
  }

  .classic-section-heading h1 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  .classic-section-heading h1::after {
    display: none !important;
  }

  #retail-root .spec-grid {
    gap: 10px !important;
    margin: 0 auto 14px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  body[data-expansion="mop"] #retail-root .spec-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 1022px !important;
    max-width: 1022px !important;
  }

  body[data-expansion="bc"] #retail-root .spec-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 876px !important;
    max-width: 876px !important;
  }

  #retail-root .class-card {
    height: 128px !important;
    min-height: 128px !important;
    gap: 8px !important;
    padding: 14px 9px 12px !important;
    border-radius: 15px !important;
  }

  #retail-root .class-card .card-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
  }

  #retail-root .class-card .card-label {
    font-size: 10.5px !important;
  }

  #player-section {
    flex: 0 0 auto !important;
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
  }

  #player-section .video-holder.glass {
    width: min(1080px, 100%) !important;
    height: 607.5px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px auto 2px !important;
    padding: 9px !important;
  }

  #player-section > div:has(> #statusLabel:empty) {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  #shared-paste-helper {
    width: 434px !important;
    min-width: 0 !important;
    max-width: 434px !important;
    height: 50px !important;
    max-height: 50px !important;
    gap: 14px !important;
    padding: 8px 14px !important;
  }

  #shared-paste-helper button {
    height: 32px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
  }

  #shared-paste-helper button > span {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .shared-paste-helper-stream {
    min-width: 132px !important;
  }

  .shared-paste-helper-dismiss {
    min-width: 82px !important;
  }
}