/* JAMS APPAREL · Mobile layout layer (October 2026)
   Loaded last so the existing desktop look and original color palette stay intact. */
.jams-mobile-menu-toggle { display: none; }
@media (max-width: 760px) {
  :root { --mobile-gutter: clamp(12px, 4vw, 20px); }
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 0; }
  img, video, iframe, svg { max-width: 100%; }
  main, section, article, aside, .card, .modal-content { min-width: 0; }
  button, a, select { -webkit-tap-highlight-color: transparent; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; font-size: 16px; }
  :where(input, textarea, select, button, a):focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
  .modal, .help-modal, .material-lightbox { padding: 12px; }
  .modal-content, .help-card, .material-modal { width: min(100%, 560px); max-height: calc(100dvh - 24px); overflow: auto; }
  .page-header, .section-header, .inventory-header, .bulk-page-heading, .settings-page-heading { min-width: 0; }
  :where(.page-header, .section-header, .inventory-header, .bulk-page-heading) h1 { overflow-wrap: anywhere; }
  .product-grid, .orders-grid, .cart-items-list, .inventory-grid, .dashboard-grid, .profile-grid, .tx-stats-grid { min-width: 0; }
  :where(.product-card, .order-card, .cart-item-card, .inventory-item, .dashboard-card, .tx-stat-card, .policy-card, .material-kpis article) { min-width: 0; max-width: 100%; }
  .material-table-wrap, .tx-table-card, .table-responsive, .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .modal button, .help-modal button { max-width: 100%; }

  /* Customer mobile navigation: accessible collapsible menu, not a clipped link row. */
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center; justify-content: space-between;
    min-height: 58px; padding: 8px var(--mobile-gutter) !important;
    gap: 12px !important;
  }
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .brand-row { min-width: 0; flex: 1 1 auto; }
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .brand-name { display: inline; font-size: .88rem; white-space: nowrap; }
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .brand-icon { flex-shrink: 0; width: 33px; height: 33px; }
  .jams-mobile-menu-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 7px 13px; border: 1px solid #555f70; border-radius: 7px; background: #202734; color: #fff; cursor: pointer; font-weight: 700; font-size: .85rem; }
  .jams-mobile-menu-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .nav-links { display: none !important; }
  body.mobile-menu-ready.mobile-menu-open:not(.admin-page):not(.studio-page) > .navbar .nav-links {
    position: absolute; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-content: start; gap: 7px !important; inset: calc(100% - 1px) 0 auto 0;
    width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 72px);
    overflow-y: auto !important; overflow-x: hidden !important; margin: 0 !important;
    padding: 12px var(--mobile-gutter) calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #3c4655; background: #111827;
    box-shadow: 0 14px 22px rgba(0,0,0,.24);
  }
  body.mobile-menu-ready.mobile-menu-open:not(.admin-page):not(.studio-page) > .navbar .nav-links > a {
    display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center;
    white-space: normal !important; overflow-wrap: anywhere; min-width: 0; min-height: 44px;
    padding: 9px 10px !important; border: 1px solid #374151; border-radius: 6px;
    font-size: .8rem !important; line-height: 1.35;
  }
  body.mobile-menu-ready.mobile-menu-open:not(.admin-page):not(.studio-page) > .navbar .nav-links > a.active { border-color: #f97316; }
  body.mobile-menu-ready.mobile-menu-open:not(.admin-page):not(.studio-page) > .navbar .nav-links > a.logout { grid-column: 1 / -1; }
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .nav-links > a.settings-nav-button { order: 0; }

  /* Catalog cards, filters and buttons stay usable at phone sizes. */
  body.storefront-page { padding-top: 68px !important; }
  .store-hero { min-width: 0; }
  .store-hero-copy { min-width: 0; padding: 32px var(--mobile-gutter) !important; }
  .store-hero h1 { font-size: clamp(2.8rem, 14vw, 5.2rem); overflow-wrap: normal; }
  .store-section-heading { gap: 12px; flex-wrap: wrap; }
  .store-filter-panel, .store-product-grid, .store-product-card { min-width: 0; }
  .store-product-grid { gap: 16px 12px; }
  .store-product-details { width: 100%; max-width: 100%; }
  .store-product-title-row, .store-product-actions { min-width: 0; }
  .store-product-actions button { min-height: 42px; padding: 8px 6px; font-size: .75rem; line-height: 1.2; white-space: normal; }
  .store-product-title-row h3, .store-product-title-row > strong { overflow-wrap: anywhere; }
  .store-product-rail { max-width: 100%; }
  .bulk-workspace, .bulk-section, .bulk-design-card, .bulk-order-summary { min-width: 0; }
  .bulk-request-page { width: calc(100% - 2 * var(--mobile-gutter)); margin-inline: var(--mobile-gutter) !important; }
  .bulk-page-heading h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .bulk-order-summary { max-width: 100%; }
  .order-action, .cart-item-actions, .appeal-actions { flex-wrap: wrap; }

  /* Keep admin widgets and wide tabular reports inside the phone viewport. */
  .admin-page .container { min-width: 0; max-width: 100%; }
  .admin-page .navbar { max-width: 100vw; }
  .admin-page .material-kpis, .admin-page .dashboard-grid { min-width: 0; }
}

@media (max-width: 420px) {
  body.mobile-menu-ready:not(.admin-page):not(.studio-page) > .navbar .brand-name { font-size: .82rem; }
  .jams-mobile-menu-toggle { padding-inline: 11px; }
  .store-product-meta { font-size: .7rem; }
  .store-product-actions { flex-wrap: wrap; }
  .store-product-actions button { font-size: .76rem; }
  .store-search-field, .store-price-filter { min-width: 0; }
  .bulk-location-options, .bulk-size-grid { gap: 8px; }
  .material-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 350px) {
  .store-product-grid, .store-recently-viewed .store-product-rail { grid-template-columns: 1fr; }
  .store-product-details, .store-product-visual { max-width: 100%; }
  .store-product-actions button { min-height: 44px; font-size: .85rem; }
}

/* Keep customer details and actions aligned without changing their appearance. */
.admin-page .customer-list-row {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}
.admin-page .customer-list-row > div:nth-child(2) { min-width: 0; }
.admin-page .customer-list-row > div:nth-child(2) h4,
.admin-page .customer-list-row > div:nth-child(2) p { max-width: 100%; }
.admin-page .customer-list-row > div:nth-child(2) p:first-of-type,
.admin-page .customer-list-row > div:nth-child(2) p:nth-of-type(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page .customer-list-row > div:nth-child(2) h4 { overflow-wrap: anywhere; }
.admin-page .customer-list-row .inventory-item-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.admin-page .customer-list-row .inventory-item-cta button {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

@media (max-width: 600px) {
  .admin-page .customer-list-row { grid-template-columns: 48px minmax(0, 1fr); }
  .admin-page .customer-list-row .inventory-item-cta { padding-left: 0; }
}

/* STUDIO MOBILE: canvas, controls and 3D box arranged as normal flow,
   rather than overlapping draggable fixed-position windows. */
@media (max-width: 760px) {
  body.studio-page { min-width: 0; overflow-x: clip; }
  .studio-page .studio-shell { width: 100% !important; padding: 0 0 calc(35px + env(safe-area-inset-bottom)) !important; }
  .studio-page .studio-top { padding: 10px var(--mobile-gutter) 12px; gap: 8px; margin: 0 0 8px; }
  .studio-page .studio-top h1 { font-size: clamp(.96rem, 4.5vw, 1.2rem); line-height: 1.2; gap: 8px; }
  .studio-page .studio-top-actions { flex: 0 0 auto; }
  .studio-page .studio-top-actions .primary-btn { min-height: 44px !important; padding: 0 15px !important; }
  .studio-page .studio-close-btn { min-width: 38px; min-height: 38px; }
  .studio-page .design-policy-notice { margin: 6px var(--mobile-gutter) 12px; padding: 10px; }
  .studio-page .studio-grid { display: flex !important; flex-direction: column; width: 100%; gap: 12px; }
  .studio-page .studio-tools { position: static !important; order: 1; width: 100%; align-self: stretch; padding: 4px var(--mobile-gutter) 6px; background: transparent; border: 0; }
  .studio-page .studio-tools .tool-section:first-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
  .studio-page .studio-tools .tool-section-title { grid-column: 1 / -1; padding: 0 0 3px; margin: 0; }
  .studio-page .studio-tools .tool-section:first-child .tool-btn { display: flex; flex-direction: row; gap: 7px; justify-content: center; align-items: center; min-width: 0; min-height: 46px; padding: 8px 7px; border: 1px solid #dedad3; border-radius: 6px; background: #fff; font-size: .82rem; }
  .studio-page .studio-tools #btnUpload { background: #252321; color: #fff; border-color: #252321; }
  .studio-page .studio-tools .tool-icon { flex: 0 0 24px; width: 24px; height: 24px; }
  .studio-page .editor-panel { order: 2; flex: none; min-width: 0; width: 100%; padding: 0 var(--mobile-gutter); }
  .studio-page .editor-head { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 0 0 10px; padding: 0 0 10px; }
  .studio-page .editor-context { width: 100%; }
  .studio-page .editor-product-line { min-width: 0; }
  .studio-page .editor-product-line strong { overflow-wrap: anywhere; }
  .studio-page .side-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; gap: 5px; overflow: visible; }
  .studio-page .side-tab { min-width: 0; min-height: 42px; padding: 7px 3px; font-size: clamp(.6rem, 2.8vw, .76rem); text-align: center; line-height: 1.2; white-space: normal; text-transform: none; letter-spacing: 0; }
  .studio-page .canvas-toolbar-mode { position: static !important; margin: 0 !important; width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .studio-page .canvas-toolbar-mode .mode-btn { min-height: 40px; padding: 8px 10px; font-size: .82rem; }
  .studio-page .editor-stage { width: 100%; min-width: 0; height: clamp(310px, 54svh, 520px) !important; min-height: 310px !important; margin: 0; border-radius: 6px; overflow: hidden; }
  .studio-page .editor-stage .canvas-container, .studio-page .editor-stage .lower-canvas, .studio-page .editor-stage .upper-canvas { max-width: 100%; }
  .studio-page .editor-hint { top: 8px; right: 8px; max-width: calc(100% - 16px); white-space: normal; font-size: .6rem; }
  .studio-page .editor-bottom { position: static !important; display: flex; flex-wrap: wrap; gap: 9px; width: 100%; max-width: 100%; margin: 8px 0 0; padding: 0; border: none; background: transparent; box-shadow: none; }
  .studio-page .zoom-controls { display: grid; width: 100%; grid-template-columns: 42px minmax(46px,1fr) 42px 52px 52px; gap: 5px; }
  .studio-page .zoom-controls > * { min-width: 0 !important; min-height: 41px; text-align: center; }
  .studio-page .zoom-controls button { padding: 0 5px !important; border: 1px solid #dedad3; border-radius: 5px; background: #fff; }
  .studio-page .zoom-controls #zoomChip { display: grid; place-items: center; }
  .studio-page .editor-bottom #btnResetView { flex: none; width: auto; }
  .studio-page .editor-bottom #btnDownloadPng { width: 100%; min-height: 43px; padding: 8px; border: 1px solid #dedad3; border-radius: 6px; background: #fff; font-size: .77rem; }
  .studio-page .preview-panel { position: static !important; order: 3; width: 100%; max-height: none; overflow: visible; padding: 0 var(--mobile-gutter); border: 0; background: transparent; box-shadow: none; }
  .studio-page .studio-inspector { display: block; width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
  .studio-page .studio-inspector > summary.inspector-toggle { position: static; min-height: 48px; padding: 12px 14px; border: 0; background: #f6f3ef; font-size: .86rem; }
  .studio-page .studio-inspector > .inspector-content { display: flex; flex-direction: column; max-height: none; overflow: visible; gap: 0; padding: 12px; }
  .studio-page .studio-inspector:not([open]) > .inspector-content { display: none; }
  .studio-page .inspector-section { min-width: 0; padding: 0 0 14px; margin: 0 0 14px; }
  .studio-page .selection-inspector.hidden { display: none !important; }
  .studio-page .product-meta { flex-wrap: wrap; }
  .studio-page .product-inspector-section .shirt-color-row { gap: 10px; }
  .studio-page .product-inspector-section .shirt-swatch { width: 33px; height: 33px; min-height: 33px; flex-basis: 33px; }
  .studio-page .selection-inspector .tool-btn { min-height: 43px; }
  .studio-page .order-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .studio-page .order-grid input, .studio-page .order-grid select, .studio-page .selection-inspector input:not([type="range"]), .studio-page .selection-inspector select, .studio-page .shirt-type-select { min-height: 44px; font-size: 16px; }
  .studio-page .layer-list { max-height: 250px; }
  .studio-page .layer-item { min-height: 44px; }
  .studio-page .layer-item .icon-btn { min-width: 35px; min-height: 35px; }
  .studio-page .inspector-order { order: 3; margin: 0; padding: 15px 0 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .studio-page .inspector-order-price strong { font-size: 1.35rem; }
  .studio-page .studio-terms { grid-template-columns: 20px minmax(0,1fr); gap: 9px; padding: 6px 0; font-size: .76rem; }
  .studio-page .studio-terms input { width: 18px; height: 18px; }
  .studio-page #btnAddToCart, .studio-page #btnSaveDesign { min-height: 46px; padding: 10px; font-size: .85rem; }
  /* JS also switches from drag/floating mode to inline mode below 761px. */
  .studio-page #livePreviewSection.studio-live-preview-window { order: 2; position: relative !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100%; max-height: none; margin: 0 0 14px !important; padding: 0 0 15px; overflow: visible; border: 0; border-bottom: 1px solid var(--line); background: #fff; box-shadow: none; }
  .studio-page #livePreviewSection .studio-live-preview-heading { cursor: default; touch-action: auto; }
  .studio-page #livePreviewSection .studio-live-preview-heading::after { content: none; }
  .studio-page #livePreviewSection .studio-live-preview { height: auto; }
  .studio-page #livePreviewSection .studio-live-preview .preview-3d { width: 100%; height: clamp(235px, 72vw, 370px) !important; min-height: 235px; }
  .studio-page #livePreviewSection .preview-resize-handle { display: none; }
  .studio-page .studio-live-preview .preview-tip { white-space: normal; }
  .studio-page .ai-panel { width: auto; margin: 22px var(--mobile-gutter) 0; padding: 16px 0; }
  .studio-page .ai-panel-head { flex-wrap: wrap; gap: 6px; }
  .studio-page .ai-panel-head h2 { font-size: 1.2rem; }
  .studio-page .ai-chips { padding-bottom: 12px; scroll-snap-type: x proximity; }
  .studio-page .ai-chip { min-height: 42px; padding: 8px 10px; scroll-snap-align: start; font-size: .77rem; }
  .studio-page .ai-controls { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .studio-page .ai-control-help { grid-column: 1; line-height: 1.5; font-size: .75rem; }
  .studio-page .ai-control label, .studio-page .ai-prompt-heading label { font-size: .8rem; }
  .studio-page .ai-control input, .studio-page .ai-control select { min-height: 46px; padding: 10px 12px; font-size: 16px; }
  .studio-page .ai-prompt-heading { flex-wrap: wrap; }
  .studio-page .ai-reset { min-height: 40px; }
  .studio-page .ai-compose { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .studio-page .ai-compose textarea { width: 100%; min-height: 165px; font-size: 16px; }
  .studio-page .ai-compose #btnCreateAI { align-self: stretch; min-height: 46px; font-size: .9rem; }
}
@media (max-width: 390px) {
  .studio-page .side-tab { font-size: .61rem; }
  .studio-page .zoom-controls { grid-template-columns: 38px minmax(38px,1fr) 38px 48px 48px; }
  .studio-page .editor-stage { height: clamp(285px, 50svh, 460px) !important; min-height: 285px !important; }
  .studio-page .studio-top h1 { font-size: .96rem; }
  .studio-page .studio-top-actions .primary-btn { padding-inline: 11px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .jams-mobile-menu-toggle, .studio-page button { transition: none !important; }
}