/* ...existing code... */
.sparkly-group-designer.design-layout{display:flex; flex-direction:column; gap:16px; margin-top:20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; align-items:stretch; min-height: calc(100vh - 20px); width:100%;}
.sparkly-group-designer.design-layout .design-header{width:100%;}
.sparkly-group-designer.design-layout .design-header .sparkly-designer-title{margin:0; padding:8px 4px; font-weight:700;}
.sparkly-group-designer.design-layout .design-content{display:flex; gap:25px; align-items:flex-start; width:100%; flex-wrap:nowrap;}
.sparkly-group-designer.design-layout .design-content *{ float:none !important; }
#sparkly-designer [class*='col-']{ width:100% !important; max-width:100% !important; }
.sparkly-group-designer, .sparkly-group-designer *{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;}
.sparkly-left-column{flex:0 0 360px; width:auto; border-right:4px solid #c23; padding-right:15px; display:flex; flex-direction:column;}
.sparkly-right-column{flex:0 0 300px; width:auto; display:flex; flex-direction:column; align-items:stretch;}
/* Make side columns independently scrollable so the center canvas stays visible
	 - side columns get a max-height relative to viewport and overflow-y:auto
	 - canvas column centers content and uses sticky positioning to remain in view
	 Tweak the `- 160px` offset if your theme adds extra top bars or breadcrumbs. */
.sparkly-left-column,
.sparkly-right-column{
	/* Revert independent scrolling to improve flow */
	max-height: none;
	height: auto;
	overflow: visible;
}

/* Make left/right columns layout their children in a column and let the central panel take
	the remaining space and scroll. This avoids bottom gaps and works better in Edge. */
.sparkly-left-column > .sparkly-base-products{ flex: 0 0 auto; }
.sparkly-left-column > .sparkly-accordions{ flex:1 1 auto; }
.sparkly-right-column > .sparkly-layers-panel{ flex:1 1 auto; }
.sparkly-canvas-column{
	flex:1 1 auto; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
/* Keep the canvas area visible when the page scrolls — make the wrap sticky inside the flow */
.sparkly-canvas-wrap{
	/* Disable sticky positioning to reduce sticky feel on touch devices */
	position:static;
	top:auto;
	z-index:1;
	padding-bottom:0;
}

/* View switcher: ensure visible and above the sticky canvas wrap */
#sparkly-view-switcher{ position:relative; z-index:5; background:transparent; display:flex; gap:8px; justify-content:center; margin-top:8px; }
.sparkly-view-btn{ box-shadow: none; transition: box-shadow .12s ease, opacity .12s ease; }
.sparkly-view-btn[aria-hidden='true']{ display:none; }

/* Small tweak: ensure the canvas HUD doesn't overlap the view switcher area */
#sparkly-hud{ z-index:6; }
/* Ensure canvas dominates pointer handling; switcher overlay passes through except buttons */
#sparkly-view-switcher{ pointer-events:none; }
#sparkly-view-switcher .sparkly-view-btn{ pointer-events:auto; }

/* Smooth mobile UX: contain overscroll and avoid image drags inside designer */
#sparkly-designer{ overscroll-behavior: contain; }
#sparkly-designer img{ -webkit-user-drag: none; user-select:none; -webkit-user-select:none; }

/* When a layer is being manipulated on mobile, freeze the page scroll */
html.sparkly-scroll-locked, body.sparkly-scroll-locked{
	overflow: hidden !important;
	overscroll-behavior: contain !important;
	touch-action: none !important;
}

/* Fullscreen auth modal enhancements */
#sparkly-auth-fullscreen{ backdrop-filter: blur(2px); }
#sparkly-auth-fullscreen .sparkly-auth-shell{ box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset; }
#sparkly-auth-close{ font-weight:700; }
@media (max-width: 980px){
	#sparkly-auth-close{ font-size:22px; padding:12px 16px; border-radius:10px; }
}

/* Overlay style for view switcher when inserted into the canvas wrap */
.sparkly-view-switcher-overlay{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:12px;
	z-index:1200; /* higher than canvas but lower than modal layers */
	display:flex;
	gap:8px;
	padding:6px 10px;
	background:rgba(255,255,255,0.92);
	border-radius:6px;
	box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.sparkly-view-switcher-overlay .sparkly-view-btn{ background:#d94e7d; color:#fff; border:1px solid #b0305e; padding:8px 12px; font-weight:700; border-radius:4px; }
.sparkly-view-switcher-overlay .sparkly-view-btn[disabled]{ opacity:0.6; pointer-events:none; }
.sparkly-base-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:15px;}
.sparkly-base-item{position:relative;border:2px solid #ddd;padding:4px;text-align:center;cursor:pointer;font-size:11px;line-height:1.2;background:#fff;overflow:hidden;border-radius:4px;}
.sparkly-base-item img{max-width:100%;height:auto;display:block;transition:transform .18s ease-in-out;}
.sparkly-base-item:hover img{transform:scale(1.06);} 
.sparkly-base-item:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,20,147,0);transition:background .25s;}
.sparkly-base-item.active{border-color:#ff1493;}
.sparkly-base-item.active:after{background:rgba(255,20,147,0.35);} 
.sparkly-base-name{font-size:14px;font-weight:600;margin-left:12px;color:#444;}
.sparkly-accordions .sparkly-accordion-panel{border:1px solid #e3e3e3;margin-bottom:8px;background:#f8f8f8;}
.sparkly-accordion-header{padding:10px 12px;font-weight:bold;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#d94e7d;color:#fff;}
.sparkly-accordion-panel.open .sparkly-accordion-header{background:#b0305e;}
.sparkly-accordion-body{display:none;padding:10px;background:#fff;}
.sparkly-accordion-panel.open .sparkly-accordion-body{display:block;}
.sparkly-canvas-column{flex:1;position:relative;}
#sparkly-canvas{max-width:100%;background:#fff;border:1px solid #ccc;display:block;margin:0 auto 15px auto;}
#sparkly-canvas, .sparkly-canvas-wrap canvas{ pointer-events:auto; touch-action:none; }
#sparkly-total-price{font-size:26px;font-weight:700;margin-bottom:10px;}
.sparkly-add-cart{background:#d94e7d;border:1px solid #b0305e;padding:14px 22px;font-weight:800;font-size:16px;border-radius:6px;color:#fff;}
/* Enlarge action buttons generally */
.sparkly-actions-row .btn{ font-size:15px; padding:12px 16px; min-height:44px; }
/* Scroll handling for left column already set via JS; fallback: */
@media (max-height:700px){.sparkly-left-column{max-height:calc(100vh - 40px);overflow-y:auto;}}

/* Mobile stacking is defined in designer.mobile.css to keep desktop untouched */
/* Desktop layout controlled by theme/markup; mobile-only stacking handled below */
/* New front viewport additions */
.sparkly-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;}
.sparkly-step-product{border:1px solid #ccc;padding:4px;background:#fff;cursor:pointer;border-radius:4px;text-align:center;font-size:11px;}
.sparkly-step-product img{max-width:100%;height:50px;object-fit:cover;display:block;margin:0 auto 4px;transition:transform .18s ease-in-out;}
.sparkly-step-product:hover img{transform:scale(1.06);} 
.sparkly-layers-panel{margin-top:0;padding:10px;border:1px solid #ddd;background:#fafafa;border-radius:6px;}
.sparkly-layers-list{list-style:none;margin:0;padding:0;}
.sparkly-layers-list li{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;margin:2px 0;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:12px;}
.sparkly-layers-list li .grip{width:14px; height:14px; margin-right:6px; display:inline-block; opacity:0.7; cursor:grab;}
.sparkly-layers-list li .grip::before{content:""; display:block; width:100%; height:100%; background-image: repeating-linear-gradient( to bottom, #999 0 2px, transparent 2px 4px ); background-size: 100% 4px; border-radius:2px; }
/* Desktop delete button styling (harmonize with mobile) */
.sparkly-layers-list li .rm{
	background:#d94e7d; color:#fff; border:1px solid #b0305e; border-radius:6px; padding:6px 10px; height:auto; width:auto;
	line-height:1; font-size:14px; font-weight:800; cursor:pointer;
}
.sparkly-layers-list li.empty{justify-content:center;color:#777;background:#f0f0f0;}
.sparkly-status{font-size:12px;margin-top:6px;}

/* Ensure headings and accordion text use sans-serif in Edge/other browsers */
.sparkly-accordion-header, .sparkly-accordion-body, .sparkly-designer-title, .sparkly-base-name, .sparkly-step-product span, .sparkly-layers-hint{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}

/* Primary action button style (kept) */
#sparkly-designer .btn.btn-primary{ background:#d94e7d; border-color:#b0305e; color:#fff; }

@media (max-width:900px){
	/* keep all columns visible but stacked via 768px rule; avoid hiding left */
	.sparkly-right-column{width:100%;}
	.sparkly-canvas-column{width:100%;}
}

/* Make accordion visuals obvious across themes */
.sparkly-accordions .sparkly-accordion-panel{ border:1px solid #e0e0e0; background:#fafafa; border-radius:6px; overflow:hidden; }
.sparkly-accordions .sparkly-accordion-header{ background:#d94e7d; color:#fff; }
.sparkly-accordions .sparkly-accordion-panel.open .sparkly-accordion-header{ background:#b0305e; }
.sparkly-accordions .sparkly-accordion-body{ background:#fff; }

/* Force-mobile fallback: applied when JS adds .sparkly-mobile-force on #sparkly-designer
   Use this when the theme prevents a proper viewport so media queries never match. */
#sparkly-designer.sparkly-mobile-force{ display:flex !important; flex-direction:column !important; gap:10px; align-items:stretch !important; }
#sparkly-designer.sparkly-mobile-force .design-content{ display:flex !important; flex-direction:column !important; gap:12px !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-canvas-column{ order:1; width:100% !important; max-width:100% !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-right-column{ order:2; width:100% !important; max-width:100% !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-left-column{ order:3; width:100% !important; max-width:100% !important; border-right:0 !important; padding-right:0 !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-canvas-wrap{ position:relative !important; top:auto !important; padding-bottom:0 !important; margin-bottom:8px !important; }
#sparkly-designer.sparkly-mobile-force > *{ flex:0 0 auto !important; width:100% !important; max-width:100% !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-right-column, #sparkly-designer.sparkly-mobile-force .sparkly-canvas-column, #sparkly-designer.sparkly-mobile-force .sparkly-left-column{ display:block !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-accordions{ max-height:none !important; overflow:visible !important; }
#sparkly-designer.sparkly-mobile-force .sparkly-left-column, #sparkly-designer.sparkly-mobile-force .sparkly-right-column{ height:auto !important; max-height:none !important; overflow:visible !important; }