/* 宽屏适配层。r133–134：首页/分类页；r137：显式标记的四种详情页。 */
@media screen and (min-width: 900px) {
  :root { --violin-desktop-width: 1180px; }

  body {
    min-width: 0;
    padding-bottom: 112px !important;
  }

  .profile-header,
  .top-banner,
  .notice-bar,
  .page-header,
  .page-title,
  .search-bar,
  .category-list,
  .video-list,
  .content-wrapper,
  .course-header-title,
  .main-media-box,
  .audio-intro,
  .main-card,
  .order-list,
  .settings-card,
  .section-card,
  .profile-banner,
  .footer,
  .product-grid,
  .section,
  .tab-scroll,
  .tabs,
  .card,
  .wallet-card,
  .member-hero,
  .logout-btn,
  #cartListContainer,
  #resultContainer {
    max-width: var(--violin-desktop-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .profile-header { padding-left: 0 !important; padding-right: 0 !important; }
  .top-banner { width: 100% !important; }
  .page-header, .page-title { width: min(var(--violin-desktop-width), calc(100% - 48px)) !important; }
  .search-bar, .category-list, .video-list, .content-wrapper, .course-header-title,
  .main-media-box, .audio-intro, .main-card, .order-list, .settings-card, .section-card,
  .profile-banner, .footer, .product-grid, .section, .tab-scroll, .tabs, .card,
  .wallet-card, .member-hero, .logout-btn, #cartListContainer, #resultContainer {
    width: min(var(--violin-desktop-width), calc(100% - 48px)) !important;
  }

  .top-banner { min-height: 150px; max-height: 220px; }
  .top-banner img { object-fit: cover; }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(920px, calc(100% - 48px)) !important;
    transform: translateX(-50%);
    border-radius: 18px !important;
  }
  .bottom-nav > div { max-width: 142px; }

  .course-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
  .course-item { min-height: 146px; padding: 20px !important; }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }
  .category-list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; }
  .video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-left: 0 !important; padding-right: 0 !important; }
  .video-item { height: 100%; margin: 0 !important; }

  .profile-tags { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-4, .grid-4-services { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .benefit-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .plans { gap: 16px !important; }
  .plan-card { min-height: 180px; padding: 18px 14px !important; }
  .wallet-actions { flex-direction: row !important; }

  .main-media-box { aspect-ratio: 16 / 8; max-height: 590px; }
  .tab-content { width: min(var(--violin-desktop-width), calc(100% - 48px)) !important; margin-left: auto !important; margin-right: auto !important; }
  .bottom-toolbar { width: min(var(--violin-desktop-width), calc(100% - 48px)); margin-left: auto; margin-right: auto; border-radius: 16px; }

  .cart-item, .order-card, .result-item, .product-item { padding-left: 22px !important; padding-right: 22px !important; }
  .cart-thumb { width: 126px !important; height: 126px !important; }
  .order-product img, .product-thumb { width: 98px !important; height: 98px !important; }

  .modal-box, .episode-modal { width: min(650px, calc(100% - 48px)) !important; max-width: 650px !important; }
  .modal-overlay { padding: 24px !important; }
}

@media screen and (min-width: 1280px) {
  .course-list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .course-item { min-height: 162px; }
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Five directory pages only; account, order and payment layouts stay unchanged. */
:is(body.violin-home, body.violin-category-page) .top-banner {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #601c25;
}
:is(body.violin-home, body.violin-category-page) .top-banner img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center;
}

@media screen and (min-width: 900px) {
  :is(body.violin-home, body.violin-category-page) {
    padding-bottom: 142px !important;
  }
  :is(body.violin-home, body.violin-category-page) .profile-header {
    width: min(var(--violin-desktop-width), calc(100vw - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  :is(body.violin-home, body.violin-category-page) .bottom-nav {
    width: min(var(--violin-desktop-width), calc(100vw - 48px)) !important;
    gap: 8px;
    padding: 10px 12px !important;
  }
  :is(body.violin-home, body.violin-category-page) .bottom-nav > div {
    flex: 1 1 0 !important;
    min-width: 0;
    max-width: none;
    height: 76px !important;
    padding: 0 !important;
  }
  :is(body.violin-home, body.violin-category-page) .bottom-nav img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 5px !important;
    flex-shrink: 0;
  }
  :is(body.violin-home, body.violin-category-page) .bottom-nav > div span {
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
}

/* r137: detail-page presentation only. Keep access overlays and hidden states intact. */
body.violin-detail-page {
  --violin-detail-width: min(1180px, calc(100vw - 32px));
  padding: 0 0 124px !important;
}
body.violin-detail-page > :is(.profile-header, .course-header-title, .main-media-box,
  .info-stats, .attach-row, .tab-bar, .instructor-block, .tab-content, .audio-intro,
  .audio-player-box, .audio-disclaimer, .pdf-preview-box, .info-card, .main-gallery,
  .product-price-row, .product-title-box, .service-block, .spec-block, .review-block,
  .detail-gallery, .bottom-toolbar, .action-bar, .footer) {
  width: var(--violin-detail-width) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 0;
}
body.violin-detail-page .profile-header { padding: 0 !important; }
body.violin-detail-page .top-banner {
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  max-height: none;
}
body.violin-detail-page .top-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
body.violin-detail-page .course-header-title {
  padding: 18px 12px !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.6 !important;
}
body.violin-detail-page[data-violin-content-type="course"] .main-media-box {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
}
body.violin-detail-page #courseVideo { object-fit: contain !important; }
body.violin-detail-page[data-violin-content-type="audio"] .main-media-box {
  aspect-ratio: auto;
  height: auto;
  max-height: none;
}
body.violin-detail-page[data-violin-content-type="audio"] .main-media-box img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
body.violin-detail-page .progress-info { min-width: 0; }
body.violin-detail-page .instructor-left { min-width: 0; }
body.violin-detail-page .instructor-left > div:last-child { min-width: 0; }
body.violin-detail-page .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
body.violin-detail-page .badge-item { white-space: normal; letter-spacing: 0; line-height: 1.6; }
body.violin-detail-page .info-meta,
body.violin-detail-page .service-row { flex-wrap: wrap; }
body.violin-detail-page .toolbar-right { flex-wrap: wrap; }
body.violin-detail-page .toolbar-right button { min-height: 44px; min-width: 88px; }
body.violin-detail-page .toolbar-left { margin-left: 0; margin-right: 12px; }
body.violin-detail-page .gallery-scroll { min-height: 0; overflow-y: hidden; }
body.violin-detail-page .gallery-slide { min-width: 0; height: 100%; }
body.violin-detail-page .gallery-slide :is(img, video) { object-fit: contain; display: block; }

/* A4-shaped paper stays readable rather than growing to a desktop-width square. */
body.violin-detail-page > .pdf-preview-box { width: min(760px, var(--violin-detail-width)) !important; }
body.violin-detail-page .pdf-cover { width: 100%; height: auto; }
body.violin-detail-page .pdf-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
}
body.violin-detail-page .pdf-cover img { object-fit: contain; }
body.violin-detail-page .pdf-cover-overlay { padding: 16px; text-align: center; }
body.violin-detail-page #violinPdfPreview > img { aspect-ratio: 210 / 297 !important; min-height: 0 !important; }
body.violin-detail-page #violinPdfPreview > div { flex-wrap: wrap; }
body.violin-detail-page #violinPdfPreview button { min-height: 40px; }
body.violin-detail-page #violinPdfPreview:fullscreen {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  background: #fff;
}
body.violin-detail-page #violinPdfPreview:fullscreen > img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}
body.violin-detail-page #violinPdfPreview:fullscreen > div { flex: 0 0 auto; width: min(760px, 100%); }
body.violin-detail-page .bottom-nav { width: var(--violin-detail-width) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); }
@media (max-width: 480px) {
  body.violin-detail-page .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  body.violin-detail-page { --violin-detail-width: min(1180px, calc(100vw - 48px)); padding-bottom: 142px !important; }
  body.violin-detail-page .gallery-scroll { aspect-ratio: 16 / 9; }
  body.violin-detail-page .bottom-nav { gap: 8px; padding: 10px 12px !important; bottom: 18px !important; }
  body.violin-detail-page .bottom-nav > div { flex: 1 1 0 !important; max-width: none; min-width: 0; height: 76px !important; padding: 0 !important; }
  body.violin-detail-page .bottom-nav img { width: 48px !important; height: 48px !important; margin: 0 auto 5px !important; }
  body.violin-detail-page .bottom-nav > div span { font-size: 15px !important; line-height: 1.3 !important; white-space: nowrap; }
}