/* r184: phone-only visual polish requested from live customer screenshots. */
@media (max-width: 760px) {
  /* Keep the authenticated workspace locked to the visual viewport on phones. */
  html,
  body.customer-portal,
  body.customer-portal .main,
  body.customer-portal #customer:not(.portal-locked),
  body.customer-portal #customer:not(.portal-locked) > .portal-tab-view {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html,
  body.customer-portal {
    overflow-x: hidden !important;
  }
  body.customer-portal .main {
    margin-inline: 0 !important;
    padding-inline: 8px !important;
  }
  body.customer-portal #customer:not(.portal-locked) {
    overflow-x: clip !important;
  }
  /* Login: replace the oversized technical frame with a calm, compact card. */
  body.customer-portal #customer.portal-locked .customer-tech-login {
    min-height: 100dvh !important;
    padding: 24px 18px max(24px, env(safe-area-inset-bottom)) !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-brandbar {
    width: min(100%, 420px) !important;
    margin: 0 auto 22px !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-card {
    width: min(100%, 420px) !important;
    margin: 0 auto !important;
    padding: 28px 22px 24px !important;
    border: 1px solid rgba(78, 231, 216, .34) !important;
    border-radius: 22px !important;
    background: linear-gradient(155deg, rgba(3, 35, 38, .94), rgba(2, 24, 29, .9)) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-card .customer-tech-corner {
    display: none !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-console {
    letter-spacing: .22em !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-card h1 {
    margin-top: 18px !important;
    font-size: 34px !important;
  }
  body.customer-portal #customer.portal-locked .customer-login-input,
  body.customer-portal #customer.portal-locked .customer-login-button {
    min-height: 54px !important;
    border-radius: 14px !important;
  }

  /* Orders: make the list consume the available phone viewport and pin pager to its bottom. */
  body.customer-portal #customer #customerOrdersView #customerResult.customer-result:not(.empty) {
    height: var(--customer-orders-mobile-height, calc(100dvh - 300px)) !important;
    min-height: 360px !important;
    max-height: none !important;
  }
  body.customer-portal #customer #customerOrdersView .customer-orders-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  body.customer-portal #customer #customerOrdersView .customer-portal-pager {
    position: static !important;
    margin-top: auto !important;
  }

  /* Regular products: names stay inside their fixed two-line slot. */
  body.customer-portal #customer #customerProductsView .customer-product-card-body h3 {
    display: -webkit-box !important;
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Railway products: fill the image stage, keep the new badge separate, and shrink long titles. */
  body.customer-portal #customer #customerRailwayProductsView .customer-railway-filter-summary-left {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
  }
  body.customer-portal #customer #customerRailwayOwnShopBtn.customer-railway-own-shop-filter {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    border: 1px solid #c9d8ee !important;
    border-radius: 999px !important;
    color: #425674 !important;
    background: linear-gradient(180deg, #fff, #f3f7fc) !important;
    box-shadow: 0 3px 10px rgba(38, 70, 112, .08) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }
  body.customer-portal #customer #customerRailwayOwnShopBtn.customer-railway-own-shop-filter::before {
    display: grid !important;
    width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #3568d6 !important;
    background: #e5edff !important;
    content: "店" !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  body.customer-portal #customer #customerRailwayOwnShopBtn.customer-railway-own-shop-filter:is(.active, [aria-pressed="true"]) {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, #3267e5, #0b9f99) !important;
    box-shadow: 0 7px 18px rgba(25, 105, 173, .24) !important;
  }
  body.customer-portal #customer #customerRailwayOwnShopBtn.customer-railway-own-shop-filter:is(.active, [aria-pressed="true"])::before {
    color: #fff !important;
    background: rgba(255, 255, 255, .2) !important;
  }
  body.customer-portal #customer #customerRailwayResultSummary {
    display: block !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    color: #16243a !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-product-card,
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-content {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-title.is-title-compact {
    font-size: 12px !important;
    line-height: 1.42 !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-title.is-title-dense {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    letter-spacing: -.02em !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-image {
    position: relative !important;
    overflow: hidden !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .railway-card-image img {
    transform: scale(1.85) !important;
    transform-origin: center !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .customer-railway-new-badge {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 7px !important;
    right: 7px !important;
    padding: 3px 6px !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: #ff4f3f !important;
    box-shadow: 0 2px 7px rgba(255, 79, 63, .22) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
  }
  body.customer-portal #customer #customerRailwayProductGrid .customer-railway-new-inline {
    display: none !important;
  }

  /* Workbench navigation: a compact floating button, clear of content and safe areas. */
  body.customer-portal #customer:not(.portal-locked) {
    padding-bottom: max(76px, calc(64px + env(safe-area-inset-bottom))) !important;
  }
  body.customer-portal #customer.customer-orders-active:not(.portal-locked) {
    padding-bottom: 0 !important;
  }
  body.customer-portal #customer#customer #customerWorkbenchMobileOpen#customerWorkbenchMobileOpen.customer-workbench-mobile-open {
    --customer-workbench-safe-left: env(safe-area-inset-left, 0px);
    --customer-workbench-safe-top: env(safe-area-inset-top, 0px);
    --customer-workbench-safe-right: env(safe-area-inset-right, 0px);
    --customer-workbench-safe-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed !important;
    z-index: 110 !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #2f6de1, #079b99) !important;
    box-shadow: 0 8px 20px rgba(27, 82, 150, .25) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: grab !important;
    will-change: left, top !important;
  }
  body.customer-portal #customer #customerWorkbenchMobileOpen.is-dragging {
    cursor: grabbing !important;
    box-shadow: 0 12px 28px rgba(27, 82, 150, .34) !important;
  }
  body.customer-portal #customer #customerWorkbenchMobileOpen span {
    display: block !important;
    margin-top: 1px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  /* Pass center: four equal, readable filters in a balanced 2 by 2 grid. */
  body.customer-portal #customer #customerRailwayManagementView .customer-railway-management-scopes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.customer-portal #customer #customerRailwayManagementView .customer-railway-management-scopes button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }
}