/* =========================================================
   MOBILE BUILDER LAYOUT
   Bottom-sheet picker + sticky CTA, ≤768px only.
   Loaded after responsive.css so it wins on equal specificity.
   ========================================================= */

@media (max-width: 768px) {

  /* -------- Hide top tab strip; chips inside the sheet replace it -------- */
  .create-design > .tabs.p-0 { display: none !important; }

  /* Manual build is intentionally inaccessible on mobile (still WIP /
     not phone-friendly). Hide every entry point so a mobile customer
     can't land in it accidentally. The "How would you like to build?"
     onboarding popup was deleted entirely 2026-05-07; only the
     in-builder Switch-to-Manual button remains to suppress. */
  #switchToManualBtn,
  .switch-manual-btn { display: none !important; }

  /* When any Bootstrap modal is open, hide the auto-builder bottom sheet
     and floating CTA. (ux-improvements.css forces .modal-backdrop to
     z-index: 0 for a glass effect, which lets these elements bleed through
     the modal on mobile.) Bootstrap toggles body.modal-open on every modal. */
  body.modal-open .create-design .main .left,
  body.modal-open > .mb-floating-cta {
    visibility: hidden !important;
  }

  /* -------- App shell: full viewport, vertical --------
     Lock the body so the navbar never scrolls out of the viewport.
     Body is the column layout: navbar (60px) + .create-design fills
     the rest. Inner scroll is owned by .create-design .main .right. */
  html, body {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body {
    display: flex !important;
    flex-direction: column !important;
  }
  body > .navbar {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1050;
  }
  /* .create-design fills the space below the navbar. height:auto
     +flex:1 lets it grow to fill, while overflow:hidden traps inner
     scroll inside .right. */
  .create-design {
    position: relative;
    height: auto !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .create-design .main {
    flex-direction: column !important;
    overflow: visible !important;
    height: 100% !important;
    flex: 1 !important;
    position: relative;
  }

  /* =========================================================
     RIGHT panel becomes the main scroll area
     ========================================================= */
  .create-design .main .right {
    width: 100% !important;
    flex: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    /* Bottom padding only needs to clear the peek sheet (~46px)
       since the CTA strip moved to the top. */
    padding: 14px 14px 80px !important;
    background: #f3f4f6 !important;
  }

  /* Empty welcome state — replace with the spec's compact "No designs yet" */
  .create-design .main .right .empty-state-message {
    padding: 36px 20px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 2px dashed #e5e7eb !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  /* Make sure .d-none still wins — script.js adds it when designs are added. */
  .create-design .main .right .empty-state-message.d-none {
    display: none !important;
  }
  /* Icon at top of empty card */
  .create-design .main .right .empty-state-message::before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-color: #ede9fe;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4m0 0l-5 5m5-5l5 5M4 20h16'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
  }
  /* Hide the verbose existing welcome content */
  .create-design .main .right .empty-state-message .welcome > * {
    display: none !important;
  }
  /* Replace with spec copy */
  .create-design .main .right .empty-state-message .welcome::before {
    content: "No designs yet";
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #09031a;
    margin-bottom: 4px;
  }
  .create-design .main .right .empty-state-message .welcome::after {
    content: "Upload a file or pick from your library to start your gang sheet";
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    max-width: 280px;
    margin: 0 auto;
  }

  /* "Your Designs N" header injected by mobile-builder.js — hidden
     on mobile (it kept reading as sticky because it sat at the top
     of .right's scroll container). The cards below speak for
     themselves; if a count is needed it can be reintroduced later. */
  .mb-your-designs {
    display: none !important;
  }
  .mb-your-designs .mb-count {
    background: #ede9fe;
    color: #7c5cfd;
    border-radius: 999px;
    font-size: 12px;
    padding: 2px 9px;
    font-weight: 700;
  }
  /* Hide the entire .right-header on mobile. Its only contents now
     are an h2 we already hide ("Your Designs") and the .btn-row that
     gets relocated to body as .mb-floating-cta. Leaving .right-header
     visible meant 18px of empty gray padding rendered as a gray bar
     directly under the CTA strip. */
  .right-header {
    display: none !important;
  }

  /* -------- Sticky CTA (Clear All / Generate) --------
     The .btn-row is relocated to <body> by mobile-builder.js so it's a
     direct child of body — no overflow / transform / containing-block issues.
     Pinned to the TOP of the viewport, just under the navbar (~52px). The
     bottom of the screen had too much going on (peek picker + Confirm
     button + safe-area), so this strip lives up top now. */
  body > .mb-floating-cta {
    position: fixed !important;
    left: 0; right: 0;
    /* Anchor under the navbar via CSS variable set by mobile-builder.js
       (--me-nav-h reflects actual measured navbar height including any
       dynamic auth-dropdown changes). 60px is a fallback. */
    top: var(--me-nav-h, 60px) !important;
    bottom: auto !important;
    background: #fff !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px 14px !important;
    display: none !important; /* shown only when designs exist */
    gap: 8px !important;
    /* Higher than navbar's z-index 1050 would be wrong (we WANT
       navbar above) — but the strip is below navbar in viewport
       so z-index < navbar is fine. 1040 keeps it above page chrome
       but under the navbar. */
    z-index: 1040;
    margin: 0 !important;
    box-sizing: border-box;
    height: 56px;
  }
  /* Show only when the body knows we have a CTA */
  body.mb-has-cta > .mb-floating-cta {
    display: flex !important;
  }
  body > .mb-floating-cta .clear-btn,
  body > .mb-floating-cta .clear-all-designs {
    flex: 1 !important;
    background: #fff !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    height: 42px !important;
    line-height: 1 !important;
  }
  body > .mb-floating-cta .gen-btn,
  body > .mb-floating-cta .generate-gang-sheet {
    flex: 2 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    height: 42px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    background: #7c5cfd !important;
    color: #ffffff !important;
    border: 0 !important;
    font-weight: 600 !important;
  }
  body > .mb-floating-cta > .previous-generated-sheet {
    flex: 2 !important;
    background: #7c5cfd !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  /* SVG arrow in the Previous button — make sure it's white too. */
  body > .mb-floating-cta > .previous-generated-sheet svg path {
    stroke: #ffffff !important;
    fill: none !important;
  }
  body > .mb-floating-cta > .previous-generated-sheet.d-none {
    display: none !important;
  }
  body > .mb-floating-cta > .previous-generated-sheet svg {
    width: 16px !important;
    height: 16px !important;
    fill: #fff !important;
    stroke: #fff !important;
  }
  /* Hide the additional-sheet dropdown on mobile (its dropdown UI doesn't fit
     in a 62px sticky bar). Power users can still trigger it from desktop. */
  body > .mb-floating-cta .additional-sheet-dropdown {
    display: none !important;
  }

  /* =========================================================
     Design cards (built by buildFileCard in script.js)
     ========================================================= */
  .right-scroll {
    padding: 0 !important;
  }
  .right-scroll .file-con {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .design-card.file-info {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    border: 0 !important;
  }
  .design-card.file-info .card-top {
    display: flex !important;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
  }
  .design-card.file-info .card-preview {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f3f4f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .design-card.file-info .card-preview img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
  }
  .design-card.file-info .card-info {
    flex: 1;
    min-width: 0;
  }
  .design-card.file-info .card-name {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
  }
  .design-card.file-info .dpi-status-box {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 5px;
    font-weight: 600;
  }

  .design-card.file-info .controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .design-card.file-info .control-group {
    display: block !important;
  }
  .design-card.file-info .control-group label {
    display: block !important;
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 3px;
    font-weight: 600;
  }
  .design-card.file-info .control-group input[type="number"] {
    width: 100%;
    height: 36px !important;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 8px !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
  }
  .design-card.file-info .qty-wrap.quantity-control {
    display: flex !important;
    align-items: stretch;
    height: 36px !important;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
  }
  .design-card.file-info .qty-wrap button {
    flex: 0 0 30px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #374151 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .design-card.file-info .qty-wrap .quantity-input {
    flex: 1;
    width: 100%;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 0 !important;
    -moz-appearance: textfield;
    box-sizing: border-box;
  }
  .design-card.file-info .qty-wrap .quantity-input::-webkit-outer-spin-button,
  .design-card.file-info .qty-wrap .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

  .design-card.file-info .card-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .design-card.file-info .card-btn {
    padding: 9px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #374151 !important;
  }
  .design-card.file-info .card-btn.accent {
    background: #7c5cfd !important;
    color: #fff !important;
    border-color: #7c5cfd !important;
    grid-column: 1 / -1;
  }
  /* Preview pairs with Duplicate in row 1 of the 2-col grid since
     Edit is hidden on mobile (was: Preview spans full so Edit/
     Duplicate could pair below — that 5-button layout no longer
     applies). Fall through to the grid's default 1-col behavior. */
  .design-card.file-info .card-btn.preview-btn {
    grid-column: auto;
  }
  .design-card.file-info .card-btn.danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    grid-column: 1 / -1;
  }

  /* =========================================================
     LEFT panel becomes the bottom sheet
     ========================================================= */
  .create-design .main .left {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Peek state: size to content (handle + chips). */
    height: auto !important;
    max-height: 260px;
    background: #fff !important;
    border: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* responsive.css has `transform: translateX(-100%)` for the legacy
       slide-out drawer pattern. We must explicitly cancel it. */
    transform: none !important;
    transition: height .3s ease, max-height .3s ease, bottom .3s ease, transform .2s ease;
  }
  /* Same suppression for .left.active (also from the legacy slide-out). */
  .create-design .main .left.active {
    transform: none !important;
  }
  /* Expanded: full sheet */
  .create-design .main .left.mb-expanded {
    height: 70vh !important;
    max-height: calc(100vh - 80px); /* always leave 80px backdrop above */
  }
  /* CTA moved to top, so the bottom-sheet picker no longer needs to
     reserve 62 px above the bottom. Sit flush with the screen bottom. */
  .create-design.mb-has-cta .main .left {
    bottom: 0 !important;
  }
  /* Push .right's content down to clear the now-top-positioned CTA
     strip (56px height; navbar above is 60px). On .mb-has-cta the
     CTA is visible, so the right panel needs ~64px top padding so
     cards aren't tucked behind it. */
  body.mb-has-cta .create-design .main .right {
    padding-top: 64px !important;
  }

  /* Drag handle area — generous tap target (whole top strip) */
  .mb-handle-area {
    flex-shrink: 0;
    padding: 14px 0 8px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mb-handle {
    width: 48px; height: 5px;
    background: #d1d5db; border-radius: 3px;
    transition: background-color .15s;
  }
  .mb-handle-area:active .mb-handle {
    background: #9ca3af;
  }
  .mb-peek-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
  }
  /* When expanded, replace "Tap to add" with "Swipe down to close" hint */
  .create-design .main .left.mb-expanded .mb-peek-hint { display: none; }
  .create-design .main .left.mb-expanded .mb-handle-area::after {
    content: "Tap handle or outside to close";
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
  }

  /* Chip row (injected) — two-state.
       PEEK (collapsed): just three small round icons. No card chrome,
         no labels. Tap or swipe up to expand.
       EXPANDED: the "before" look — full chip cards with icon + label
         (Upload Custom, From Library, Add Text) sitting at the top of
         the sheet. Tapping a chip switches the tab below. */
  .mb-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    touch-action: pan-y; /* swipe-up gesture is captured in JS */
  }
  /* Chips are HIDDEN when expanded — expanded shows the original
     "Add to your sheet" sheet head + small text tabs + panel
     content (no chip cards stacking on top). */
  .create-design .main .left.mb-expanded .mb-chips { display: none !important; }

  /* PEEK: tight, transparent, icons + tiny text labels below.
     Top/bottom padding kept minimal; bottom respects iOS safe-area
     so the row never tucks under the home-bar / URL-bar reserved
     area on iPhone Safari. */
  .create-design .main .left:not(.mb-expanded) .mb-chips {
    gap: 2px !important;
    padding: 2px 24px max(4px, env(safe-area-inset-bottom)) !important;
  }
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 1px !important;
  }
  /* Hide the original 2-line label (e.g. "Upload<br>Custom") — tiny
     single-word labels are injected per-chip below via ::after. */
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip-lbl {
    display: none !important;
  }
  /* Smaller icon in peek state — 30 px. Total chip height with the
     tiny label below comes to ~46 px including padding. */
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip-ic {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }
  /* Tiny per-chip caption injected via ::after. Targeted by
     data-mb-tab so we don't have to touch the JS that builds the
     chips. Lowercase + 9 px so it reads as a hint, not a button. */
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip::after {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: lowercase;
    margin-top: 1px;
  }
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip[data-mb-tab="#uploadCustom"]::after  { content: "upload"; }
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip[data-mb-tab="#designLibrary"]::after { content: "library"; }
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip[data-mb-tab="#addTextPanel"]::after  { content: "text"; }
  /* The active chip (default: Upload Custom) carries class .primary
     which paints the icon white-on-translucent-white. That's fine on
     the purple chip card, but in peek state we strip the card bg to
     transparent — so the white icon disappears. Force the standard
     light-violet pill on .primary inside peek so all 3 icons show. */
  .create-design .main .left:not(.mb-expanded) .mb-chips .mb-chip.primary .mb-chip-ic {
    background: #ede9fe !important;
    color: #7c5cfd !important;
  }
  /* EXPANDED: restore the rounded card look. The two ":not(.mb-expanded)"
     overrides above only fire in peek state, so when .mb-expanded is on
     the parent these defaults below win. */
  .mb-chips .mb-chip {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 8px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    color: #09031a;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-chips .mb-chip-lbl {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    text-align: center;
  }
  /* mb-sheet-tabs (text tab strip) is the tab switcher in the
     expanded sheet. Restored — chips are hidden in expanded state
     now and these tabs handle the Upload Custom / From Library /
     Add Text switching. */
  .mb-chip.primary {
    background: #7c5cfd;        /* darker purple */
    color: #fff;
    border-color: #7c5cfd;
  }
  .mb-chips .mb-chip-ic {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    font-size: 20px !important;
    border-radius: 50%;
    background: #ede9fe;
    color: #7c5cfd;
    font-weight: 700;
    flex-shrink: 0;
  }
  .mb-chip.primary .mb-chip-ic {
    background: rgba(255,255,255,.22);
    color: #fff;
  }

  /* Sheet header (visible only when expanded). Title left-aligned
     against the page edge, X anchored to the top-right corner. */
  .mb-sheet-head {
    display: none;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding: 8px 48px 10px 16px !important;
    flex-shrink: 0;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .create-design .main .left.mb-expanded .mb-sheet-head {
    display: flex !important;
  }
  .mb-sheet-head h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  .mb-sheet-head .mb-close {
    position: absolute !important;
    top: 4px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 24px !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mb-sheet-head .mb-close:active { background: #f0f2f8 !important; }
  /* Tab strip (injected) — visible only when expanded.
     Full-width with NO side padding so "Upload Custom" sits flush
     left against the screen edge. Each tab claims an equal third
     of the row via flex: 1, so labels sit on a single line at 13px
     on a 390px phone (~130 px per tab). */
  .mb-sheet-tabs {
    display: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-shrink: 0;
    background: #fff;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
  }
  .create-design .main .left.mb-expanded .mb-sheet-tabs {
    display: flex !important;
  }
  .mb-sheet-tabs .mb-sheet-tab {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 14px 6px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    min-width: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-sheet-tab.active {
    color: #7c5cfd;
    border-bottom-color: #7c5cfd;
  }

  /* The .left's tab content scrolls; only visible when expanded */
  .create-design .main .left .tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
    display: none !important;
  }
  .create-design .main .left.mb-expanded .tab-content {
    display: block !important;
  }

  /* Add-Text sticky button (from add-text-tab.js) — hide when the sheet
     isn't expanded. add-text-tab.js sets inline display:block whenever the
     Add Text tab is active, but it doesn't re-check on sheet collapse, so
     we suppress it here whenever we're in peek state. */
  .create-design .main .left:not(.mb-expanded) .at-sticky-btn-wrap {
    display: none !important;
  }
  /* Match the brand purple */
  .at-sticky-btn-wrap #atAddBtn {
    background: #7c5cfd !important;
  }

  /* -------- Backdrop (body-level, toggled by .mb-sheet-open on <body>) -------- */
  .mb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 25;
    display: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.mb-sheet-open .mb-backdrop {
    display: block;
  }
  /* Lock body scroll when the sheet is open */
  body.mb-sheet-open {
    overflow: hidden;
    touch-action: none;
  }

  /* -------- Restore upload-box / library content for the sheet -------- */
  .left #uploadCustom { padding: 14px !important; }
  .upload-box { padding: 30px 18px !important; }
  .left-scroll { padding-bottom: 20px !important; }

  /* (Legacy .left.active override is handled near the top of this @media
     block — `transform: none !important;` cancels the slide-out pattern.) */
}

/* When the viewport grows back above the mobile breakpoint after the
   page initialized in mobile mode, the injected mobile UI elements
   linger in the DOM. Their *styles* live inside the mobile @media so
   they fall back to default block flow at tablet+ width — which is
   what the user reported as "random things" stacked on the page.
   Force them hidden once we're outside the mobile breakpoint. */
@media (min-width: 769px) {
  .mb-handle-area,
  .mb-sheet-head,
  .mb-chips,
  .mb-sheet-tabs,
  .mb-floating-cta,
  .mb-your-designs,
  .mb-backdrop {
    display: none !important;
  }
}

/* =============================================================
   GENERATED-SHEET CARD: hide "Edit Design" on phones, show
   "Preview" instead. The Edit button takes the customer into the
   manual builder which is still WIP and unfit for phone widths.
   Default (desktop): Edit visible, Preview hidden.
   ============================================================= */
.preview-generated { display: none; }

@media (max-width: 768px) {
    /* Generated-sheet result card on mobile: hide BOTH Edit Design
       and Preview. Preview lives on the uploaded-image cards above
       (.card-btn.preview-btn). The Generate-result card just needs
       Quantity + Remove. Manual builder is desktop-only anyway. */
    .edit-design,
    .preview-generated {
        display: none !important;
    }

    /* Lay out Quantity controls and Remove button on a single row to
       reduce vertical space. .product-size spans full width above
       the row; .form-group (Quantity label + control) and .action-btn
       (with only Remove visible now) sit on the right and left of
       the same row. */
    .created-design .card-body {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        align-items: center !important;
    }
    .created-design .card-body .product-size {
        grid-column: 1 / -1 !important;
    }
    .created-design .card-body .form-group {
        grid-column: 1 !important;
        margin: 0 !important;
    }
    .created-design .card-body .action-btn {
        grid-column: 2 !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    /* Slim the Remove button so it fits inline with the quantity. */
    .created-design .card-body .action-btn .remove-created-design {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* =============================================================
   SUMMARY view on mobile (.result is the post-Generate page with
   generated sheets, add-ons, notes, terms, confirm button).
   Without these rules the summary was rendered as a flex child
   of .create-design (height:100dvh + overflow:hidden) so any
   content past one viewport got clipped — customers couldn't
   scroll to terms or notes. Plus the bottom-floating Clear All /
   Generate / "Go to previous" CTA bled through behind it.
   Fix: full-screen scrollable layer above the rest, with the
   floating CTA + peek sheet hidden so the summary owns the
   screen. Same treatment for .design-confirmation (secondary view).
   ============================================================= */
@media (max-width: 768px) {
    /* Summary overlay sits BELOW the navbar (height set dynamically by
       mobile-builder.js as --me-nav-h) so the logo + auth links remain
       visible. The summary owns everything below the header. Bottom
       padding 80px keeps last item clear of the fixed Confirm button. */
    .result:not(.d-none),
    .design-confirmation:not(.d-none) {
        position: fixed !important;
        top: var(--me-nav-h, 60px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 40 !important;
        background: #f3f4f6 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px 80px !important;
        margin: 0 !important;
        width: 100vw !important;
    }
    /* When summary is open, hide the auto-builder bottom UI so it
       doesn't show through. Uses body.summary-open class set by
       mobile-builder.js (more reliable than :has() across browsers,
       especially older mobile Safari). Navbar stays visible. */
    body.summary-open > .mb-floating-cta,
    body.summary-open .create-design .main .left {
        display: none !important;
    }
    /* Tighten the inner spacing so the summary fits more on one
       screen without losing readability. */
    .result:not(.d-none) .heading,
    .design-confirmation:not(.d-none) .heading {
        font-size: 20px !important;
        margin: 8px 0 14px !important;
    }
    .result:not(.d-none) .back-to-design,
    .design-confirmation:not(.d-none) .back-to-design {
        padding: 6px 10px !important;
        font-size: 13px !important;
        background: transparent !important;
        border: 0 !important;
    }
    /* Generated-sheet cards in the .result view — single column on
       phones so each preview/quantity/remove row reads cleanly. */
    .result:not(.d-none) .generated-sheet-design {
        gap: 12px !important;
    }
    .result:not(.d-none) .generated-sheet-design .created-design {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Add-ons / notes / terms panels — let them breathe, no fixed
       heights, no clipping. */
    .result:not(.d-none) .add-ons-section,
    .result:not(.d-none) .customer-notes-section,
    .result:not(.d-none) .summary-terms,
    .result:not(.d-none) .ordered-product,
    .design-confirmation:not(.d-none) .customer-data,
    .design-confirmation:not(.d-none) .customer-fields,
    .design-confirmation:not(.d-none) #termsModalContent {
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }
    /* Side-by-side add-ons + notes wrapper drops to single column. */
    .result:not(.d-none) .addons-notes-row {
        display: block !important;
    }
    /* Confirm Design button — pin to bottom of viewport when on the
       summary page, with the .result's scroll content padded enough
       to clear it. Removes the awkward gap below the button. */
    .result:not(.d-none) .save-all-designs,
    .result:not(.d-none) .confirm-design {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 50 !important;
        background: #008143 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 16px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }
    /* Belt-and-braces: kill any Edit Design button that might still
       render. The earlier .edit-design rule already had !important;
       this is a more specific scope as backup in case some other
       stylesheet attached !important first. */
    .result .edit-design,
    .result-con .edit-design,
    .design-confirmation .edit-design,
    .created-design .edit-design,
    .generated-sheet-design .edit-design {
        display: none !important;
    }
}

/* =============================================================
   "Your Designs N" header — explicitly NOT sticky on scroll. The
   header was reading as sticky because the surrounding layout
   pinned it (parent .right has overflow-y:auto + the header is
   the first child, so it appeared anchored). Force position:relative
   so it scrolls away naturally with the cards below.
   ============================================================= */
@media (max-width: 768px) {
    .mb-your-designs {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }

    /* Small gap below the navbar before content. Navbar height is
       locked at 60 px in responsive.css so this rule controls the
       breathing room only. */
    .create-design .main .right {
        padding-top: 6px !important;
    }
}

/* =============================================================
   "Pick more designs from the library" empty hint — desktop-only.
   On mobile the customer's flow is: open the bottom sheet →
   pick / upload → auto-collapses → see the new card. The hint
   sits awkwardly between the existing cards on a phone, so hide
   it here. Desktop (where the layout has more breathing room)
   keeps the prompt.
   ============================================================= */
@media (max-width: 768px) {
    .right-scroll > .empty { display: none !important; }
}

/* =============================================================
   Uploaded-image card actions (built by buildFileCard in script.js).
   Desktop button row: Preview / Edit / Duplicate / Remove BG /
   Remove. On mobile the "Edit" button (class .remove-background —
   it opens the canvas editor) is hidden because the manual editor
   is desktop-only. Preview remains in the first slot for inspect.
   ============================================================= */
@media (max-width: 768px) {
    .card-btns .card-btn.remove-background {
        display: none !important;
    }
}

/* =============================================================
   Card-btn pairing: with Edit hidden on mobile, Preview should
   pair with Duplicate in the 2-col grid (Preview | Duplicate),
   not span the full row. Remove BG + Remove stay full-width below.
   This rule must come AFTER the earlier .preview-btn { grid-column:
   1/-1 } so it wins on equal specificity (last-declared rule).
   ============================================================= */
@media (max-width: 768px) {
    .design-card.file-info .card-btn.preview-btn {
        grid-column: auto !important;
    }
    .design-card.file-info .card-btn.duplicate-btn {
        grid-column: auto !important;
    }
}

/* =============================================================
   Override conflicting narrow-screen rules from responsive.css.
   The legacy file assumes a 100 px navbar at <480 px (we now lock
   it at 60 px) and stacks .card-top vertically at <418 px (which
   on iPhone SE was dragging the design name + DPI badge BELOW the
   thumbnail). Keep card-top horizontal at all phone widths and
   pin the navbar/content offsets to 60 px.
   ============================================================= */
@media (max-width: 480px) {
    .navbar {
        --navbarHeight: 60px !important;
    }
    .all-content {
        padding-top: 0 !important;
    }
}
@media (max-width: 418px) {
    .design-card.file-info .card-top {
        flex-direction: row !important;
    }
    .design-card.file-info .card-top .card-info {
        text-align: left !important;
    }
    .design-card.file-info .card-preview {
        width: 64px !important;
        height: 64px !important;
    }
}