/**
 * Seller blog — Material 3 surfaces on narrow viewports only (tablet/mobile).
 * Loaded after seller-blog.css when extraStylesheets is extended from PHP, or
 * @import from seller-blog.css. Keeps desktop seller-blog.css free of mobile tokens.
 */
@media (max-width: 1023px) {
  .seller-blog-page {
    background: var(--m3-background, #f7f2fa);
  }

  .seller-blog-page .page-title,
  .seller-blog-page .section-title {
    color: var(--m3-on-surface, #1c1b1f);
  }

  .seller-blog-page .page-subtitle,
  .seller-blog-page__hint {
    color: var(--m3-on-surface-variant, #49454f);
  }

  .seller-blog-page__bc-icon {
    color: var(--m3-outline, #79747e) !important;
  }

  .seller-blog-manage__panel,
  .seller-blog-page__topic-card,
  .seller-blog-page .profile-card.seller-blog-page__ad-card {
    background: var(--m3-surface, #fffbfe) !important;
    border-color: var(--m3-outline-variant, #cac4d0) !important;
    border-radius: var(--m3-corner-lg, 16px);
    box-shadow: var(--m3-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08));
  }

  .seller-blog-manage__head {
    border-bottom-color: var(--m3-outline-variant, #cac4d0);
  }

  .seller-blog-manage__head .material-icons {
    color: var(--m3-primary, #4f46e5);
  }

  .seller-blog-page__thread.settings-section,
  .seller-blog-page .settings-section.seller-blog-page__thread {
    background: var(--m3-surface, #fffbfe);
    border: 1px solid var(--m3-outline-variant, #cac4d0);
    border-radius: var(--m3-corner-lg, 16px);
    box-shadow: var(--m3-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06));
    padding: 16px 16px 18px;
    margin-bottom: 16px;
  }

  .seller-blog-page__thread-title {
    color: var(--m3-on-surface, #1c1b1f);
  }

  .seller-blog-page__thread-meta,
  .seller-blog-page__thread-body {
    color: var(--m3-on-surface-variant, #49454f);
  }

  .seller-blog-page__comments {
    background: var(--m3-surface-variant, #e7e0ec);
    border-radius: var(--m3-corner-md, 12px);
    padding: 12px 14px 14px;
    margin-top: 14px;
  }

  .seller-blog-page__comments-title {
    color: var(--m3-on-surface, #1c1b1f);
  }

  .seller-blog-page__comment {
    border-color: var(--m3-outline-variant, #cac4d0);
  }

  .seller-blog-page__comment-body {
    color: var(--m3-on-surface, #1c1b1f);
  }

  .seller-blog-page__topic-list-item {
    background: var(--m3-surface, #fffbfe);
    border: 1px solid var(--m3-outline-variant, #cac4d0);
    border-radius: var(--m3-corner-md, 12px);
  }

  .seller-blog-page__badge {
    background: var(--m3-secondary-container, #e8def8);
    color: var(--m3-on-secondary-container, #1d192b);
  }

  .seller-blog-video__caption {
    color: var(--m3-on-surface-variant, #49454f);
  }

  .seller-blog-video__shell {
    border-color: var(--m3-outline-variant, #cac4d0);
  }

  .seller-blog-video-modal__toolbar {
    background: var(--m3-surface-container-highest, #e6e0e9);
    border-bottom-color: var(--m3-outline-variant, #cac4d0);
  }

  .seller-blog-video-modal__close {
    color: var(--m3-on-surface, #1c1b1f);
  }

  .seller-blog-video-modal__close:hover {
    background: rgba(28, 27, 31, 0.08);
  }
}