@media (max-width: 980px){
  /* Mobile-only layout: full-bleed single column, canvas at the top, then layers, then accordions */

  /* Full-bleed container */
  .sparkly-group-designer{ flex-direction: column; gap: 12px; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

  #sparkly-canvas{ touch-action: none; width:100%; height:auto; max-width:100%; }

  /* Order and full-width rows */
  .sparkly-canvas-column{ order: 1; width: 100%; align-items: stretch; }
  .sparkly-right-column{ order: 2; width: 100%; }
  .sparkly-left-column{ order: 3; width: 100%; border-right: none; padding-right: 0; }
  .sparkly-layers-panel, .sparkly-accordions{ width:100%; }

  /* Remove desktop column heights to avoid large gaps */
  .sparkly-left-column, .sparkly-right-column{ height: auto !important; max-height: none !important; overflow: visible !important; }

  /* Accordion spacing */
  .sparkly-accordions{ margin-top: 6px; max-height: none; overflow: visible; }
  .sparkly-accordion-panel{ margin-bottom: 8px; }
  .sparkly-accordion-body{ max-height: 50vh; overflow: auto; -webkit-overflow-scrolling: touch; }

  /* Disable sticky on mobile so canvas sits immediately under the title */
  .sparkly-canvas-wrap{ position:relative !important; top:auto !important; padding-bottom: 0 !important; }

  /* Buttons and status spacing */
  .sparkly-actions-row{ margin-top: 8px; }
  .sparkly-status{ margin-top: 6px; }

  /* Images scale nicely */
  .sparkly-base-item .sparkly-thumb, .sparkly-step-product img{ width:100%; height:auto; display:block; object-fit:contain; }

  /* Larger visuals inside accordions on mobile */
  /* Increase specificity under #sparkly-designer to beat theme styles */
  /* Force exactly 4 columns across phones for a consistent grid */
  #sparkly-designer .sparkly-products-grid{ grid-template-columns: repeat(4, 1fr); gap:6px; }
  #sparkly-designer .sparkly-base-grid{ grid-template-columns: repeat(4, 1fr); gap:6px; }
  /* Make images large within those tighter columns */
  #sparkly-designer .sparkly-step-product img{ height: 225px !important; width:100% !important; object-fit: contain !important; }
  #sparkly-designer .sparkly-base-item img{ height: 225px !important; width:100% !important; object-fit: contain !important; }

  /* Larger primary actions on mobile */
  #sparkly-designer .sparkly-actions-row{ gap:14px; flex-wrap:wrap; justify-content:center !important; display:flex !important; width:100% !important; flex-direction:column !important; }
  /* Generic action button baseline (still used by other buttons) */
  #sparkly-designer .sparkly-actions-row .btn{ font-size:28px !important; padding:8px 25px !important; min-height:0 !important; border-radius:12px !important; letter-spacing:0.08em !important; font-weight:800 !important; line-height:1.05 !important; }
  /* Make Save and Add to cart huge and full-width */
  #sparkly-designer #sparkly-save-design,
  #sparkly-designer #sparkly-add-cart{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; }
  /* Make Save button pink/white to match primary style */
  #sparkly-designer #sparkly-save-design{ background:#d94e7d !important; border-color:#b0305e !important; color:#fff !important; }
  #sparkly-designer #sparkly-add-cart{ background:#d94e7d !important; border-color:#b0305e !important; color:#fff !important; }

  /* Larger Layers list for readability and bigger delete target */
  #sparkly-designer .sparkly-layers-panel{ font-size:22px; }
  #sparkly-designer .sparkly-layers-list{ max-height: none; }
  #sparkly-designer .sparkly-layers-list li{ font-size:36px !important; padding:16px 16px !important; min-height:76px !important; }
  #sparkly-designer .sparkly-layers-list li .name{ font-size:36px !important; line-height:1.2 !important; }
  #sparkly-designer .sparkly-layers-list li .grip{ width:28px !important; height:28px !important; margin-right:12px !important; }
  /* Replace tiny icon with a prominent pink Delete button */
  #sparkly-designer .sparkly-layers-list li .rm{
    background:#d94e7d !important; color:#fff !important; border:1px solid #b0305e !important;
    border-radius:10px !important; padding:10px 14px !important; height:auto !important; width:auto !important;
    line-height:1 !important; font-size:24px !important; font-weight:800 !important; cursor:pointer !important;
  }

  /* Much larger accordion headers and chevron icon for easier tapping */
  #sparkly-designer .sparkly-accordion-header{ padding:26px 20px !important; font-size:50px !important; min-height:90px !important; }
  /* Default accordion header title text size */
  #sparkly-designer .sparkly-accordion-header .title{ font-size:50px !important; }
  /* "Choose" (base) and "Decorate" (steps) specific sizing: 45px for those titles */
  #sparkly-designer .sparkly-accordion-panel[data-mobile-panel="base"] .sparkly-accordion-header .title{ font-size:45px !important; }
  #sparkly-designer .sparkly-accordion-panel[data-step-id] .sparkly-accordion-header .title{ font-size:50px !important; }
  /* Make the open icon substantially more prominent and easier to hit */
  #sparkly-designer .sparkly-accordion-header .chevron{
    font-size:70px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:70px !important; height:70px !important; margin-left:12px !important; border-radius:50% !important;
    background:rgba(255,255,255,0.15) !important; color:#fff !important;
  }
  
  /* Product name and price 3x larger in step products */
  #sparkly-designer .sparkly-products-grid .sparkly-step-product .sp-name{ font-size:33px !important; display:block; margin-top:6px; }
  #sparkly-designer .sparkly-products-grid .sparkly-step-product .sp-price{ font-size:33px !important; font-weight:800; color:#b0305e; display:block; }

  /* Larger price at top */
  #sparkly-designer #sparkly-total-price{ font-size:42px !important; }

  /* Round, bold view and action buttons with letter spacing (match sample, keep pink) */
  #sparkly-designer .sparkly-view-switcher-overlay .sparkly-view-btn{
    font-weight:800 !important; letter-spacing:0.08em !important; border-radius:12px !important; line-height:1.05 !important;
  }
  #sparkly-designer .sparkly-actions-row .btn{ border-radius:12px !important; letter-spacing:0.08em !important; font-weight:800 !important; }
  /* Larger view switcher buttons on mobile (approximately 2x) */
  #sparkly-designer .sparkly-view-switcher-overlay .sparkly-view-btn{
    font-size:28px !important; padding:8px 25px !important; min-height:0 !important; border-width:2px !important;
  }
  /* Larger Layers panel title and tip */
  #sparkly-designer .sparkly-layers-panel > h4{ font-size:45px !important; }
  #sparkly-designer .sparkly-layers-panel .sparkly-layers-hint{ font-size:33px !important; }

  /* Modern, larger inline auth form UI */
  #sparkly-designer #sparkly-auth-box{ background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08); padding:12px; }
  #sparkly-designer #sparkly-auth-box h4{ font-size:45px !important; margin-bottom:10px !important; }
  #sparkly-designer #sparkly-auth-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-direction:column; }
  #sparkly-designer #sparkly-auth-actions .btn{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; }
  #sparkly-designer #sparkly-auth-box .sparkly-auth-desc{ font-size:28px !important; }
  #sparkly-designer #sparkly-auth-box .sparkly-auth-note{ font-size:26px !important; }
  #sparkly-designer #sparkly-auth-frame-wrap{ margin-top:8px; }
  #sparkly-designer #sparkly-inline-auth label{ font-size:36px !important; margin-bottom:10px !important; font-weight:800; }
  #sparkly-designer #sparkly-inline-auth .form-group{ margin-bottom:16px !important; }
  #sparkly-designer #sparkly-inline-auth .form-control{ font-size:36px !important; padding:18px 20px !important; border-radius:16px !important; border:2px solid #ddd !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; }
  #sparkly-designer #sparkly-inline-auth .form-control:focus{ outline:none !important; border-color:#d94e7d !important; box-shadow:0 0 0 3px rgba(217,78,125,0.18) !important; }
  #sparkly-designer #sparkly-inline-auth .form-footer{ display:flex !important; justify-content:space-between !important; gap:16px !important; }
  #sparkly-designer #sparkly-inline-auth .form-footer .btn{ font-size:40px !important; padding:14px 28px !important; border-radius:16px !important; flex:1 1 48% !important; }
  #sparkly-designer #sparkly-inline-auth .alert{ font-size:28px !important; padding:12px 14px !important; border-radius:12px !important; }
  /* Larger checkbox touch targets */
  #sparkly-designer #sparkly-inline-auth input[type="checkbox"]{ transform: scale(1.6); transform-origin:left center; margin-right:8px; }
  /* Ensure buttons are clickable in case any parent sets pointer-events:none */
  #sparkly-designer #sparkly-inline-auth, #sparkly-designer #sparkly-inline-auth .btn{ pointer-events:auto !important; }
  /* Eye button sizing */
  #sparkly-designer .sparkly-pw-toggle{ font-size:30px !important; line-height:1 !important; padding:10px 14px !important; border-radius:12px !important; }
  #sparkly-designer #sparkly-auth-box.active #sparkly-auth-actions{ display:none !important; }
  /* Hide any stray back buttons outside footer; only footer back should be visible */
  #sparkly-designer #sparkly-auth-box #sparkly-auth-back{ display:none !important; }
  #sparkly-designer #sparkly-auth-box .form-footer #sparkly-auth-back{ display:inline-block !important; }
  /* Hide any stray buttons under auth box when active except the two footer buttons */
  #sparkly-designer #sparkly-auth-box.active > .btn{ display:none !important; }
  #sparkly-designer #sparkly-auth-box.active .form-footer .btn{ display:inline-block !important; }
  /* Extra safety: hide any stray Back button duplicates outside the form footer */
  #sparkly-designer #sparkly-auth-box > #sparkly-auth-back,
  #sparkly-designer #sparkly-auth-box > div > #sparkly-auth-back:not(.btn-link){ display:none !important; }
  /* In-app browser banner */
  #sparkly-inapp-banner{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  #sparkly-inapp-banner .btn-primary{ font-size:26px !important; }
}

/* Fallback when viewport media query is defeated by theme scaling:
  apply 4-up grid and larger images whenever JS adds .sparkly-mobile-force */
#sparkly-designer.sparkly-mobile-force .sparkly-products-grid{ grid-template-columns: repeat(4, 1fr) !important; gap:6px !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-base-grid{ grid-template-columns: repeat(4, 1fr) !important; gap:6px !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-step-product img{ height: 150px !important; width:100% !important; object-fit: contain !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-base-item img{ height: 150px !important; width:100% !important; object-fit: contain !important; }

/* Make the primary actions enormous under mobile-force as well */
#sparkly-designer.sparkly-mobile-force .sparkly-actions-row{ display:flex !important; flex-direction:column !important; gap:14px !important; width:100% !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-save-design,
#sparkly-designer.sparkly-mobile-force #sparkly-add-cart{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; background:#d94e7d !important; border-color:#b0305e !important; color:#fff !important; }

/* Ensure Add to cart text is white on mobile */
#sparkly-designer .sparkly-add-cart{ color:#fff !important; }

/* Fallback for isolation wrapper: ensure big buttons even when nodes are moved out of #sparkly-designer */
#sparkly-iso-mobile #sparkly-auth-actions{ display:flex !important; gap:14px !important; flex-direction:column !important; }
#sparkly-iso-mobile #sparkly-auth-actions .btn{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; }
#sparkly-iso-mobile #sparkly-auth-box.active #sparkly-auth-actions{ display:none !important; }
#sparkly-iso-mobile #sparkly-auth-box > .btn{ display:none !important; }
#sparkly-iso-mobile #sparkly-auth-box .form-footer .btn{ display:inline-block !important; }
#sparkly-iso-mobile #sparkly-auth-box #sparkly-auth-back{ display:none !important; }
#sparkly-iso-mobile #sparkly-auth-box .form-footer #sparkly-auth-back{ display:inline-block !important; }
#sparkly-iso-mobile #sparkly-save-design,
#sparkly-iso-mobile #sparkly-add-cart{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; background:#d94e7d !important; border-color:#b0305e !important; color:#fff !important; }

/* Auth box: mobile-force fallback (applies even if media queries are missed) */
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box{ background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08); padding:12px; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box h4{ font-size:45px !important; margin-bottom:10px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-direction:column; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-actions .btn{ font-size:46px !important; padding:16px 28px !important; border-radius:16px !important; width:100% !important; display:block !important; }
/* Same back-button hiding rule under mobile-force */
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box #sparkly-auth-back{ display:none !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box .form-footer #sparkly-auth-back{ display:inline-block !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box .sparkly-auth-desc{ font-size:28px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box .sparkly-auth-note{ font-size:26px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-frame-wrap{ margin-top:8px; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth label{ font-size:36px !important; margin-bottom:10px !important; font-weight:800; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .form-group{ margin-bottom:16px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .form-control{ font-size:36px !important; padding:18px 20px !important; border-radius:16px !important; border:2px solid #ddd !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .form-control:focus{ outline:none !important; border-color:#d94e7d !important; box-shadow:0 0 0 3px rgba(217,78,125,0.18) !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .form-footer{ display:flex !important; justify-content:space-between !important; gap:16px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .form-footer .btn{ font-size:40px !important; padding:14px 28px !important; border-radius:16px !important; flex:1 1 48% !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .alert{ font-size:28px !important; padding:12px 14px !important; border-radius:12px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth input[type="checkbox"]{ transform: scale(1.6); transform-origin:left center; margin-right:8px; }
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth, 
#sparkly-designer.sparkly-mobile-force #sparkly-inline-auth .btn{ pointer-events:auto !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-pw-toggle{ font-size:30px !important; line-height:1 !important; padding:10px 14px !important; border-radius:12px !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-back{ font-size:34px !important; padding:10px 16px !important; border-radius:12px !important; }
/* Hide stray buttons under auth box when active (mobile-force fallback) */
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box.active > .btn{ display:none !important; }
#sparkly-designer.sparkly-mobile-force #sparkly-auth-box.active .form-footer .btn{ display:inline-block !important; }
/* Note: No global overrides here to keep desktop unchanged. All large-button rules are scoped
  to mobile media queries, .sparkly-mobile-force, or #sparkly-iso-mobile only. */