/* Mobile viewport contract shared by the storefront, customer account and admin.
   Zoom preferences are also declared in each HTML viewport tag. Browsers may
   override them for accessibility. Do not cancel touch events: vertical scrolling,
   scrollable tables and existing horizontal drawer transitions must still work. */
@media (max-width: 900px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    scrollbar-gutter: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Allow both pan axes for contained tables, but not gesture-based zoom. */
    touch-action: pan-x pan-y;
  }

  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    overflow-wrap: anywhere;
  }

  *, *::before, *::after { box-sizing: border-box; }

  /* Shrink actual grid/flex items instead of hiding overflowing content. */
  :where(main, section, article, form, fieldset, dialog,
    .product-grid, .product-card-shell, .product-copy, .product-name,
    .catalog-heading, .catalog-navigation, .trust-item, .footer-top,
    .account-main, .account-intro, .account-stats, .workspace-section,
    .favorites-grid, .selection-toolbar, .selection-footer, .inquiry-link,
    .panel, .dashboard-grid, .dashboard-side, .stats, .stat, .editor-grid,
    .homepage-grid, .settings-grid, .media-layout, .media-grid, .guide-grid,
    .form-grid, .field, .inline-field, .spec-row, .editor-gallery,
    .admin-drawer-content, .drawer-body, .fic-history, .fic-composer,
    .login-page, .login-form-content, .login-options-panel, .demo-role-options) {
    min-width: 0;
  }

  :where(.product-grid, .catalog-heading, .trust-item, .footer-top,
    .account-intro, .account-stats, .section-heading, .selection-toolbar,
    .selection-footer, .inquiry-link, .dashboard-grid, .dashboard-side,
    .stats, .stat, .editor-grid, .homepage-grid, .settings-grid,
    .media-layout, .media-grid, .guide-grid, .form-grid, .inline-field,
    .spec-row, .editor-gallery, .page-heading, .panel-head, .filters,
    .image-tools, .recent-product, .inquiry-product, .guide-item,
    .admin-drawer-head, .fic-head, .fic-compose-actions, .demo-role-options) > * {
    min-width: 0;
  }

  /* 16px avoids iOS input-focus enlargement without JavaScript gesture traps. */
  input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }
  fieldset { max-width: 100%; }
  .form-grid, .demo-role-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .inline-field { grid-template-columns: 112px minmax(0, 1fr); }

  /* Keep fixed navigation clear of notches without changing drawer motion. */
  #header {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(3%, env(safe-area-inset-left, 0px));
    right: max(3%, env(safe-area-inset-right, 0px));
    width: auto;
  }
  .account-header {
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-left: max(5%, env(safe-area-inset-left, 0px));
    padding-right: max(5%, env(safe-area-inset-right, 0px));
  }

  /* Storefront cards, calls to action and long customer-supplied text. */
  .product-card-actions { flex-wrap: wrap; }
  .product-card-actions button { white-space: normal; text-align: left; }
  .product-name { gap: 7px; }
  .product-name b { flex: 0 0 auto; }
  .detail-copy dd, .detail-values dd, .selection-summary li > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .detail-copy dl div { min-width: 0; }
  .selection-bar-main, .detail-customer-actions { flex-wrap: wrap; }
  .selection-bar { max-width: calc(100% - 24px); }
  .selection-inquiry, .selection-toggle { max-width: 100%; }
  .selection-summary li { min-width: 0; overflow-wrap: anywhere; }
  .customer-action-status { overflow-wrap: anywhere; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top > div { min-width: 0; }
  #footer-contacts a { max-width: 100%; overflow-wrap: anywhere; }
  .footer-bottom { flex-wrap: wrap; }
  .demo-mode-notice > *, .demo-role-switch { min-width: 0; white-space: normal; }

  /* Account summary and list columns must not keep desktop minimum widths. */
  .account-intro { flex-wrap: wrap; }
  .account-intro > div:first-child { flex: 1 1 240px; }
  .identity-card { min-width: 0; max-width: 100%; }
  .account-stats > div { grid-template-columns: minmax(0, 1fr) auto; }
  .workspace-nav, .section-heading, .selection-toolbar,
  .selection-toolbar > div, .selection-footer, .inquiry-row-top,
  .inquiry-row-bottom, .detail-top, .reply-heading { flex-wrap: wrap; }
  .selection-footer .button { min-width: 0; max-width: 100%; white-space: normal; }
  .inquiry-link {
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 100px);
    column-gap: 16px;
  }
  .inquiry-preview { max-width: 100%; }
  .detail-products li { flex-wrap: wrap; }
  .account-footer { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }

  /* Admin: wrap controls, but preserve tabular data in its own scroller. */
  #main:not(.account-main) {
    min-width: 0;
    max-width: 100%;
    padding-top: calc(78px + env(safe-area-inset-top, 0px));
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .topbar {
    min-width: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .top-actions { min-width: 0; }
  .topbar .account, .topbar .icon-button { flex-shrink: 0; }
  .demo-admin-ribbon {
    margin-left: 0;
    padding: calc(72px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 14px max(18px, env(safe-area-inset-left, 0px));
    flex-wrap: wrap;
    gap: 12px;
  }
  .demo-admin-ribbon > div { flex-basis: 100%; min-width: 0; }
  .demo-admin-ribbon a { white-space: normal; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { flex-wrap: wrap; }
  .stat small { white-space: normal; }
  .page-heading, .panel-head, .filters, .image-tools, .pager,
  .pager-controls, .modal-actions, .sticky-actions, #bulk-actions .notice {
    flex-wrap: wrap;
  }
  .page-heading .button, .panel-head .text-link,
  .image-tools .button, .modal-actions .button, .sticky-actions .button {
    max-width: 100%;
    white-space: normal;
  }
  .panel-head h2 { flex-shrink: 1; }
  .filters label { flex-wrap: wrap; min-width: 0; white-space: normal; }
  .filters select { min-width: 0; max-width: 100%; }
  .segmented { flex-wrap: wrap; }
  .segmented button { flex: 1 1 80px; min-width: 0; white-space: normal; }
  .table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { min-width: 100%; }
  .table-wrap th, .table-wrap td { overflow-wrap: normal; }
  .tabs, .section-menu { max-width: 100%; flex-wrap: wrap; }
  .section-menu .section-item { flex: 1 1 120px; min-width: 0; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-drawer .media-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
  .media-tile small, .gallery-add small, .gallery-add em { overflow-wrap: anywhere; }
  .recent-product { flex-wrap: wrap; }
  .inquiry-product { flex-wrap: wrap; }
  .detail-values { grid-template-columns: minmax(0, 80px) minmax(0, 1fr); }
  .sticky-actions { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
  #toast { max-width: calc(100% - 32px); overflow-wrap: anywhere; }

  /* Dialog widths and scroll regions stay bounded; no transform overrides. */
  dialog { min-width: 0; max-width: 100%; }
  #detail, #inquiry { min-width: 0; max-width: 100%; width: min(820px, 100%); }
  .drawer-body, .admin-drawer-content, .fic-history { min-width: 0; max-width: 100%; }
  .drawer-heading { padding-top: env(safe-area-inset-top, 0px); }
  dialog[open]#detail, dialog[open]#inquiry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(68px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) auto;
  }
  .drawer-footer {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .admin-drawer-head { padding-top: calc(17px + env(safe-area-inset-top, 0px)); }
  .admin-drawer-head > div:first-child { min-width: 0; }
  .fic-head { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .fic-products, .fic-previews { flex-wrap: wrap; overflow-x: hidden; }
  .fic-products > span { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .fic-compose-actions, .fic-admin-panel > div { flex-wrap: wrap; }
  .fic-admin-panel select { min-width: 0; max-width: 100%; }
  .fic-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #login .login-options-panel {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  #login .login-close { top: calc(13px + env(safe-area-inset-top, 0px)); }
  .login-header { padding-top: env(safe-area-inset-top, 0px); }
  .login-page > .login-options-panel { padding-bottom: calc(29px + env(safe-area-inset-bottom, 0px)); }
  .login-choice, .demo-login-submit { min-width: 0; max-width: 100%; }
}

@media (max-width: 700px) {
  #header {
    top: max(5px, env(safe-area-inset-top, 0px));
    left: max(4%, env(safe-area-inset-left, 0px));
    right: max(4%, env(safe-area-inset-right, 0px));
  }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { flex-wrap: wrap; }
  .footer-top > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inquiry-link { display: block; }
  .inquiry-row-top { display: flex; }
  .inquiry-row-bottom { flex-direction: row; align-items: center; }
  .contact-section { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .inline-field, .homepage-grid { grid-template-columns: minmax(0, 1fr); }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading > .button { margin-top: 0; }
  .admin-drawer-head { flex-wrap: wrap; }
  .admin-drawer-head-actions { margin-left: auto; }
  .admin-drawer .sticky-actions .button { flex: 1 1 120px; }
  .fic-dialog, dialog.admin-drawer, dialog.admin-drawer[data-size="wide"] { width: 100%; max-width: 100%; }
}

@media (max-width: 380px) {
  .demo-role-options { grid-template-columns: minmax(0, 1fr); }
  .selection-inquiry { flex: 1 1 100%; }
  .selection-bar .selection-clear { margin-left: auto; }
  .account-stats > div { padding-inline: 10px; }
}