/* Mobile app pass: shared overrides for storefront, profile, and operations screens. */
@media (max-width: 47.99875rem) {
  html[data-theme] {
    overflow-x: clip;
  }

  html[data-theme] body {
    --mobile-app-shell: min(100%, 30rem);
    --mobile-app-gutter: 0.75rem;
    --mobile-app-card-radius: 0.9rem;
    --mobile-app-control: 2.75rem;
    overflow-x: clip;
    font-size: 15px;
    letter-spacing: 0;
  }

  html[data-theme] body .public-shell {
    width: min(calc(100% - (var(--mobile-app-gutter) * 2)), var(--mobile-app-shell)) !important;
    max-width: var(--mobile-app-shell) !important;
    padding-inline: 0 !important;
    padding-top: 0.65rem !important;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-theme] body .site-header-shell .header-stable-top {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas:
      "aux brand account"
      "search search search" !important;
    align-items: center !important;
    column-gap: 0.42rem !important;
    row-gap: 0.42rem !important;
  }

  html[data-theme] body .site-header-shell .header-brand-group {
    display: contents !important;
  }

  html[data-theme] body .site-header-shell .header-mobile-account-actions {
    grid-area: account !important;
    display: inline-flex !important;
    direction: rtl !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
  }

  html[data-theme] body .site-header-shell .brand-lockup {
    grid-area: brand !important;
    direction: rtl !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    justify-self: center !important;
  }

  html[data-theme] body .site-header-shell .header-stable-actions {
    grid-area: aux !important;
    direction: rtl !important;
    justify-self: start !important;
    justify-content: start !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
  }

  html[data-theme] body .site-header-shell .header-search-row {
    grid-area: search !important;
    direction: rtl !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme] body main {
    min-width: 0;
  }

  html[data-theme] body :is(.ops-shell, .profile-shell) {
    display: block !important;
    width: 100% !important;
    max-width: var(--mobile-app-shell) !important;
    margin-inline: auto !important;
    padding-inline: var(--mobile-app-gutter) !important;
  }

  html[data-theme] body .ops-main {
    display: grid !important;
    gap: 0.9rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--mobile-app-shell) !important;
    margin-inline: auto !important;
  }

  html[data-theme] body :is(.ops-main, .profile-content) > *,
  html[data-theme] body :is(.ops-main, .profile-content) :is(.space-y-5, #account-info-shell) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
  }

  html[data-theme] body .ops-sidebar {
    display: none !important;
  }

  html[data-theme] body .cockpit-mobile-bar {
    width: min(calc(100% - (var(--mobile-app-gutter) * 2)), var(--mobile-app-shell)) !important;
    margin: 0 auto 0.75rem !important;
  }

  html[data-theme] body .cockpit-mobile-trigger {
    width: 100% !important;
    min-height: 3rem !important;
    border-radius: var(--mobile-app-card-radius) !important;
  }

  html[data-theme] body :is(
    .glass-panel,
    .card,
    .panel,
    .ops-panel,
    .ops-page-header,
    .ui-card,
    .ui-panel,
    .search-results,
    .product-card,
    .category-card,
    .brand-index-card,
    .industrial-card,
    .review-detail-panel,
    .review-detail-shell
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: var(--mobile-app-card-radius) !important;
  }

  html[data-theme] body :is(
    .ops-panel,
    .ops-page-header,
    .ui-card,
    .ui-panel,
    .review-detail-panel,
    .review-detail-shell
  ) {
    padding: 1rem !important;
  }

  html[data-theme] body :is(
    .ops-grid-2,
    .ops-grid-3,
    .ops-grid-4,
    .ops-dashboard-grid,
    .ops-stats-grid,
    .ops-relationship-grid,
    .ops-actions-grid,
    .review-intelligence-grid,
    .review-intelligence-metrics,
    .review-console-grid,
    .review-detail-grid,
    .catalog-dashboard-grid,
    .seller-dashboard-grid,
    .seller-funnel-grid,
    .seller-kpi-grid,
    .intake-detail-main-grid,
    .intake-detail-kpi-grid,
    .intake-raw-grid,
    .intake-attribute-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  html[data-theme] body :is(
    .ops-page-header-head,
    .ops-page-header-actions,
    .ops-panel-head,
    .ops-toolbar,
    .section-header,
    .section-head,
    .intake-section-head,
    .review-queue-panel-head,
    .seller-dashboard-toolbar,
    .filter-bar,
    .filters,
    .toolbar,
    .nav
  ) {
    align-items: stretch !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  html[data-theme] body :is(.ops-page-header-copy h1, .ops-hero-copy h1, .intake-detail-title) {
    font-size: var(--ops-type-page-title, 1.28rem) !important;
    line-height: 1.55 !important;
  }

  html[data-theme] body :is(h2, .ops-panel-title, .brand-form-panel-title) {
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  html[data-theme] body .muted-text {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-theme] body :is(
    .ops-page-header-actions > *,
    .ops-panel-actions > *,
    .ops-toolbar > *,
    .section-head > *,
    .nav > .button,
    .nav > button,
    .nav > a.button
  ) {
    min-width: 0 !important;
  }

  html[data-theme] body :is(
    .ops-page-header-actions a,
    .ops-page-header-actions button,
    .ops-panel-actions a,
    .ops-panel-actions button,
    .ops-button,
    .ops-button-primary,
    .ops-button-secondary,
    .ops-button-muted,
    .button,
    button[type="submit"]
  ) {
    min-height: var(--mobile-app-control) !important;
    white-space: normal !important;
  }

  html[data-theme] body :is(.ops-page-header-actions, .ops-panel-actions, .intake-inline-links) :is(a, button, .button) {
    width: 100%;
  }

  html[data-theme] body :is(.ops-list, .list) {
    min-width: 0;
  }

  html[data-theme] body :is(.ops-list-item, .item) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  html[data-theme] body .ops-list-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
    padding: 0.85rem !important;
  }

  html[data-theme] body :is(.ops-list-item strong, .ops-list-item span, .ops-meta, .ops-meta span, .item strong, .item span) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html[data-theme] body .ops-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  html[data-theme] body .ops-meta span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
  }

  html[data-theme] body :is(.ops-table-shell, .table-shell, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html[data-theme] body :is(.ops-table, table) {
    max-width: 100%;
  }

  html[data-theme] body :is(.ops-form, form) {
    min-width: 0;
  }

  html[data-theme] body .ops-form p {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
  }

  html[data-theme] body :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea, .field-input, .search-input) {
    max-width: 100% !important;
    min-height: var(--mobile-app-control) !important;
    font-size: 0.92rem !important;
  }

  html[data-theme] body input[type="file"] {
    min-width: 0;
    padding-inline: 0.65rem;
    white-space: normal;
  }

  html[data-theme] body :is(.badge, .status-chip, .ops-meta-chip, .ops-badge, .ui-badge, .taxonomy-badge) {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-theme] body .site-footer-shell {
    padding-inline: 0 !important;
  }

  html[data-theme] body #site-drawer.drawer-panel[aria-hidden="true"] {
    display: none !important;
  }

  html[data-theme] body .mobile-dock {
    left: max(var(--mobile-app-gutter), calc((100vw - var(--mobile-app-shell)) / 2 + 0.5rem)) !important;
    right: max(var(--mobile-app-gutter), calc((100vw - var(--mobile-app-shell)) / 2 + 0.5rem)) !important;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 4.35rem !important;
    gap: 0.22rem !important;
    padding: 0.42rem !important;
    border-radius: 1.35rem !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 94%, transparent), color-mix(in srgb, var(--bg-deep) 96%, transparent)),
      var(--bg-deep) !important;
    box-shadow: none !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  html[data-theme] body .mobile-dock.mobile-dock-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    translate: 0 calc(100% + 1.25rem) !important;
  }

  html[data-theme] body .mobile-dock-link {
    display: flex !important;
    min-width: 0 !important;
    min-height: 3.2rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.16rem !important;
    padding: 0.34rem 0.2rem !important;
    border-radius: 0.95rem !important;
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    touch-action: manipulation;
  }

  html[data-theme] body .mobile-dock-link span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-theme] body .mobile-dock-icon {
    display: grid !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    place-items: center !important;
    flex: 0 0 auto !important;
  }

  html[data-theme] body .mobile-dock-icon svg {
    width: 1.22rem !important;
    height: 1.22rem !important;
  }

  html[data-theme] body .support-chat-widget:not(.support-chat-open) {
    left: max(var(--mobile-app-gutter), calc((100vw - var(--mobile-app-shell)) / 2 + 0.75rem)) !important;
    bottom: calc(5.55rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 80 !important;
  }

  html[data-theme] body .support-chat-widget:not(.support-chat-open) .support-chat-trigger {
    width: 3rem !important;
    height: 3rem !important;
  }

  html[data-theme] body.site-footer-in-view .support-chat-widget:not(.support-chat-open) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(0.5rem) scale(0.96) !important;
  }
}

@media (max-width: 47.99875rem) {
  html[data-theme] body .product-intake-profile .seller-product-wizard {
    padding-bottom: 0 !important;
  }

  html[data-theme] body .product-intake-profile .wizard-header {
    min-height: 0 !important;
    padding: 1rem !important;
    border-radius: var(--mobile-app-card-radius) !important;
  }

  html[data-theme] body .product-intake-profile .wizard-header h1 {
    font-size: 1.32rem !important;
    line-height: 1.55 !important;
  }

  html[data-theme] body .product-intake-profile .wizard-step-card {
    padding: 1rem !important;
    border-radius: var(--mobile-app-card-radius) !important;
  }

  html[data-theme] body .product-intake-profile .wizard-step-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html[data-theme] body .product-intake-profile .wizard-bottom-bar {
    position: static !important;
    z-index: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    margin-top: 0.2rem !important;
    padding: 0.7rem !important;
    border: 1px solid var(--base-border) !important;
    border-radius: 1rem !important;
    background: color-mix(in srgb, var(--base-surface) 96%, transparent) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  html[data-theme] body .product-intake-profile .wizard-secondary-actions:empty {
    display: none !important;
  }

  html[data-theme] body .product-intake-profile .wizard-secondary-actions:empty::before {
    display: none !important;
  }

  html[data-theme] body .product-intake-profile .wizard-bottom-bar :is(.button, button) {
    min-height: 2.85rem !important;
    border-radius: 0.85rem !important;
    font-size: 0.86rem !important;
  }

  html[data-theme] body .product-intake-profile .intake-category-country-grid,
  html[data-theme] body .product-intake-profile .wizard-spec-grid,
  html[data-theme] body .product-intake-profile .wizard-upload-grid,
  html[data-theme] body .product-intake-profile .wizard-media-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .product-intake-profile .intake-combobox-control {
    min-width: 0;
  }

  html[data-theme] body .product-intake-profile .intake-combobox-toggle {
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
  }

  html[data-theme] body .product-intake-profile .wizard-media-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 47.99875rem) {
  html[data-theme] body .home-storefront :is(
    .storefront-service-strip,
    .storefront-sales-path-grid,
    .storefront-product-grid,
    .storefront-category-grid,
    .storefront-process-grid,
    .storefront-latest-wide,
    .storefront-procurement-grid,
    .storefront-trust-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .home-storefront .storefront-product-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html[data-theme] body .home-storefront .storefront-product-media {
    min-height: 10.5rem !important;
  }

  html[data-theme] body .home-storefront :is(.storefront-service-card, .storefront-category-card) {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-theme] body .brand-index-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .brand-index-logo {
    width: 100% !important;
    min-height: 6rem !important;
  }

  html[data-theme] body :is(.brand-index-card-foot, .brand-index-card-actions) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html[data-theme] body :is(.brand-index-card-foot, .brand-index-card-actions) :is(a, button) {
    width: 100%;
  }
}

@media (max-width: 47.99875rem) {
  html[data-theme] body.account-shell-active :is(.account-info-page, #account-info-shell) {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme] body.account-shell-active .account-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  html[data-theme] body.account-shell-active .account-info-intro,
  html[data-theme] body.account-shell-active .account-info-card {
    padding: 0.9rem !important;
  }

  html[data-theme] body.account-shell-active .account-info-card-header {
    align-items: flex-start !important;
  }

  html[data-theme] body.account-shell-active .account-info-avatar-layout,
  html[data-theme] body.account-shell-active .account-info-avatar-identity {
    align-items: flex-start !important;
  }

  html[data-theme] body.account-shell-active .account-info-avatar-identity {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
  }

  html[data-theme] body.account-shell-active .account-info-avatar-frame {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }

  html[data-theme] body.account-shell-active .account-info-avatar-actions {
    justify-content: flex-start !important;
    width: 100%;
  }

  html[data-theme] body.account-shell-active .account-info-status-chip {
    width: fit-content;
  }

  html[data-theme] body.account-shell-active #account-info-shell .search-row {
    align-items: flex-start !important;
  }
}