/** Shopify CDN: Minification failed

Line 1710:0 Unexpected "}"

**/
/* =================================================================
   ALIGNMENT GUIDES — shown while dragging an element to help the
   customer line it up with the print zone's center or edges. 
   Snap threshold is 6px (see onMove in JS). Pink/magenta color 
   follows the design-tool convention (Figma, Sketch, Illustrator).
   ================================================================= */
#dlGuides{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}
.dl-guide{
  position:absolute;
  background:#ff3b9a;
  pointer-events:none;
  box-shadow:0 0 4px rgba(255,59,154,.55);
  /* Subtle fade-in so the line doesn't flash harshly when snap fires */
  animation:dlGuideFade .12s ease-out;
}
.dl-guide-v{width:1px;top:0;bottom:0}
.dl-guide-h{height:1px;left:0;right:0}
@keyframes dlGuideFade{from{opacity:0}to{opacity:1}}

/* Hide ONLY the floating Avada Chatty launcher icon. Design Lab uses its 
   mini-header chat button + bulk pricing modal "Chat Now" button to trigger 
   the chat via window.avadaFaqTrigger() — that JS API works regardless of 
   whether the launcher is visible. So hiding the floating icon doesn't break 
   the chat from opening; it only removes the duplicate UI element. */
.Avada-Faqs_Button{display:none !important}

html,body,main,.page-width,main-content{background:#f8f9fc !important}
#shopify-section-design-lab{padding:0!important;max-width:100%!important;background:#f8f9fc}
*,*::before,*::after{box-sizing:border-box}
.dl{font-family:inherit;background:#f8f9fc;min-height:100vh;padding-bottom:80px;margin-top:0}
.dl-stepbar{background:#fff;border-bottom:1px solid #eee;position:sticky;top:50px;z-index:200;padding:6px 20px}
.dl-mini-header{display:flex;align-items:center;justify-content:space-between;padding:6px 24px;background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:210;gap:8px}
.dl-mini-header-logo img{height:44px;width:auto;display:block;object-fit:contain}
.dl-mini-header-logo span{font-size:16px;font-weight:800;color:#1a1a1a;text-decoration:none}
.dl-mini-header-icons{display:flex;align-items:center;gap:18px}
.dl-mini-header-icons a{color:#1a1a1a;display:flex;align-items:center;text-decoration:none;position:relative}
.dl-mini-header-icons svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl-mini-cart-count{position:absolute;top:-6px;right:-7px;background:#1890ff;color:#fff;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.dl-chat-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1890ff;color:#fff;border:none;cursor:pointer;padding:5px 12px;border-radius:20px;line-height:1}
.dl-chat-wrap svg{stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}
.dl-chat-wrap span{font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
/* Hide Shopify nav */
overflow-list.overflow-menu{display:none!important;width:0!important}
.menu-list__submenu{display:none!important}
search-button{display:none!important}
.dl-stepbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative}
.dl-step{display:flex;align-items:center;gap:8px;opacity:.4;transition:opacity .2s}
.dl-step.active,.dl-step.done{opacity:1}
.dl-step-num{width:30px;height:30px;border-radius:50%;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#aaa;transition:all .2s;flex-shrink:0}
.dl-step.active .dl-step-num{border-color:#1890ff;background:#1890ff;color:#fff}
.dl-step.done .dl-step-num{border-color:#22a35a;background:#22a35a;color:#fff}
.dl-step-name{font-size:13px;font-weight:700;color:#aaa}
.dl-step.active .dl-step-name{color:#1890ff}
.dl-step.done .dl-step-name{color:#22a35a}
.dl-step.done:hover .dl-step-num{opacity:.8}
.dl-step.done:hover .dl-step-name{text-decoration:underline}
.dl-step-sep{width:36px;height:2px;background:#eee;margin:0 6px}
.dl-mobile-next-btn{display:flex;position:absolute;right:0;padding:7px 16px;background:#1890ff;border:none;border-radius:20px;color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.dl-page{display:none}
.dl-page.active{display:block}
.dl-design{max-width:1200px;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:190px 1fr 260px;gap:16px;align-items:start}
@media(max-width:960px){.dl-design{grid-template-columns:1fr}}
.dl-sidebar{background:#fff;border-radius:14px;border:1px solid #efefef;padding:14px;position:sticky;top:60px;min-height:200px}
.dl-sb-sec{margin-bottom:16px}
.dl-sb-sec:last-child{margin-bottom:0}
.dl-sb-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#bbb;margin-bottom:8px;display:block}
.dl-prod-btn{width:100%;border:2px solid #e8e8e8;border-radius:10px;background:#fafafa;padding:6px;cursor:pointer;transition:border-color .2s;margin-bottom:6px;text-align:left;display:block}
.dl-prod-btn:hover,.dl-prod-btn.active{border-color:#1890ff;background:#f0f8ff}
.dl-prod-thumb{width:100%;height:54px;object-fit:contain;background:#f5f5f5;display:block;border-radius:6px;margin-bottom:4px}
.dl-prod-name{font-size:10px;font-weight:700;color:#555;text-align:center;line-height:1.3;display:block}
.dl-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dl-swatch{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border:none;background:transparent;cursor:pointer;border-radius:6px;transition:background .12s;font-family:inherit}
.dl-swatch:hover{background:#f0f4f8}
.dl-swatch-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;transition:transform .12s;display:block}
.dl-swatch:hover .dl-swatch-dot{transform:scale(1.15)}
.dl-swatch.active .dl-swatch-dot{outline:2.5px solid #1890ff;outline-offset:2px}
.dl-swatch-name{font-size:9px;font-weight:700;color:#888;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.dl-swatch.active .dl-swatch-name{color:#1890ff}
.dl-tool{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid #e8e8e8;border-radius:8px;background:#fff;font-size:11px;font-weight:700;color:#555;cursor:pointer;margin-bottom:6px;transition:all .15s;text-align:left}
.dl-tool:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-tool svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#dlSidebarEdit{display:none}
#dlSidebarEdit .dl-sb-sec{margin-bottom:10px}
.dl-edit-back{width:100%;display:flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid #e8e8e8;border-radius:8px;background:#fafafa;font-size:11px;font-weight:700;color:#555;cursor:pointer;margin-bottom:10px;transition:all .15s;text-align:left}
.dl-edit-back:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-edit-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dl-edit-type{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:6px 10px;background:#f0f8ff;border-radius:8px;border:1px solid #d0e8ff}
.dl-edit-type-icon{font-size:16px;line-height:1}
.dl-edit-type-name{font-size:11px;font-weight:800;color:#1890ff}
.dl-edit-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#bbb;display:block;margin-bottom:6px}
.dl-edit-row{display:flex;gap:5px;margin-bottom:10px;align-items:center}
.dl-edit-btn{flex:1;padding:6px 4px;border:1.5px solid #e8e8e8;border-radius:7px;background:#fff;font-size:11px;font-weight:700;color:#555;cursor:pointer;transition:all .15s;text-align:center;white-space:nowrap}
.dl-edit-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-edit-btn.active{border-color:#1890ff;background:#1890ff;color:#fff}
.dl-rot-inp{width:52px;padding:4px 6px;border:1.5px solid #d0e8ff;border-radius:6px;font-size:11px;font-weight:800;color:#1890ff;text-align:center;background:#f0f8ff;outline:none;-moz-appearance:textfield}
.dl-rot-inp::-webkit-inner-spin-button,.dl-rot-inp::-webkit-outer-spin-button{-webkit-appearance:none}
.dl-rot-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#e0e0e0;outline:none;margin-bottom:10px;cursor:pointer}
.dl-rot-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#1890ff;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dl-edit-center-btn{width:100%;padding:7px 10px;border:1.5px solid #22a35a;border-radius:8px;background:#f0faf4;font-size:11px;font-weight:700;color:#22a35a;cursor:pointer;margin-bottom:10px;transition:all .15s}
.dl-edit-center-btn:hover{background:#22a35a;color:#fff}
.dl-print-size{background:#f8f9fc;border:1px solid #e8e8e8;border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:11px;color:#555}
.dl-print-size-est{font-weight:700;color:#1890ff;font-size:12px;margin-bottom:4px}
.dl-print-size-row{display:flex;gap:6px;align-items:center;margin-top:6px}
.dl-print-size-row label{font-size:10px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.dl-print-size-inp{width:54px;padding:4px 6px;border:1.5px solid #e0e0e0;border-radius:6px;font-size:11px;font-weight:700;color:#1a1a1a;text-align:center;background:#fff;outline:none;-moz-appearance:textfield}
.dl-print-size-inp:focus{border-color:#1890ff}
.dl-print-size-inp::-webkit-inner-spin-button,.dl-print-size-inp::-webkit-outer-spin-button{-webkit-appearance:none}
.dl-print-size-x{font-size:11px;color:#888;font-weight:700}
.dl-edit-del-btn{width:100%;padding:7px 10px;border:1.5px solid #ffccc7;border-radius:8px;background:#fff2f0;font-size:11px;font-weight:700;color:#ff4d4f;cursor:pointer;margin-top:4px;transition:all .15s}
.dl-edit-del-btn:hover{background:#ff4d4f;color:#fff}
.dl-canvas-col{display:flex;flex-direction:column;align-items:center}
.dl-mockup{overflow:hidden;border-radius:16px}
.dl-view-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}
.dl-view-tab{padding:5px 14px;border:1.5px solid #e0e0e0;border-radius:20px;background:#fff;font-size:11px;font-weight:700;color:#888;cursor:pointer;transition:all .15s;position:relative;white-space:nowrap}
.dl-view-tab:hover{border-color:#1890ff;color:#1890ff}
.dl-vt-short{display:none}

@media(max-width:767px){.dl-vt-full{display:none}.dl-vt-short{display:inline}}
.dl-view-tab.active{border-color:#1890ff;background:#1890ff;color:#fff}
.dl-view-tab.has-art::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:#22a35a;border-radius:50%;border:1.5px solid #fff}
.dl-mockup-wrap{position:relative;width:100%;max-width:480px;border-radius:16px;margin:0 auto;box-sizing:border-box}
.dl-zoom-ctrl{position:absolute;right:8px;top:58%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:30}
.dl-zoom-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid #e0e0e0;background:rgba(255,255,255,.92);font-size:15px;font-weight:700;color:#1890ff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.12);line-height:1;transition:all .15s;padding:0}
.dl-zoom-btn:hover{border-color:#1890ff;color:#1890ff}
.dl-zoom-pct{font-size:9px;font-weight:800;color:#999;background:rgba(255,255,255,.85);border-radius:8px;padding:1px 4px}
.dl-mockup{position:relative;width:100%;background:#fff;touch-action:none;user-select:none;transform-origin:top center;transition:transform .2s}
.dl-shirt-layer{position:relative}
.dl-mockup-img{width:100%;display:block;pointer-events:none;position:relative;z-index:1}
.dl-zone-box{position:absolute;border:2px dashed rgba(24,144,255,.6);border-radius:2px;z-index:3;pointer-events:none;transition:opacity .15s}
.dl-dragging .dl-zone-box{opacity:0}
.dl-el{position:absolute;cursor:grab;z-index:10;touch-action:none;transform-origin:center center;will-change:transform}
.dl-el-inner{position:absolute;inset:0;overflow:hidden}
.dl-el:active{cursor:grabbing}
.dl-el.sel{outline:2px solid #1890ff;outline-offset:2px}
.dl-el img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}
.dl-el-txt{pointer-events:none;font-weight:800;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.15);white-space:pre-wrap;word-break:break-word;width:100%;height:100%;-webkit-font-smoothing:antialiased}
.dl-h{position:absolute;width:14px;height:14px;background:#1890ff;border:2px solid #fff;border-radius:3px;z-index:20;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.dl-h[data-h=nw]{top:-7px;left:-7px;cursor:nw-resize}
.dl-h[data-h=ne]{top:-7px;right:-7px;cursor:ne-resize}
.dl-h[data-h=sw]{bottom:-7px;left:-7px;cursor:sw-resize}
/* se override handled above */
.dl-del-btn{position:absolute;top:-14px;right:-14px;width:28px;height:28px;background:#ff4d4f;color:#fff;border:2px solid #fff;border-radius:50%;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:21;box-shadow:0 1px 5px rgba(0,0,0,.28);line-height:1}
.dl-corner-rot-btn{position:absolute;top:-14px;left:-14px;width:28px;height:28px;background:#1890ff;color:#fff;border:2px solid #fff;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:grab;z-index:21;box-shadow:0 1px 5px rgba(0,0,0,.28)}
.dl-corner-rot-btn:active{cursor:grabbing}
.dl-move-btn{position:absolute;bottom:-14px;left:-14px;width:28px;height:28px;background:#6c5ce7;color:#fff;border:2px solid #fff;border-radius:50%;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:21;box-shadow:0 1px 5px rgba(0,0,0,.28)}
.dl-h[data-h=se]{bottom:-14px;right:-14px;cursor:se-resize;width:28px;height:28px;background:#1890ff;color:#fff;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:21;font-size:14px;box-shadow:0 1px 5px rgba(0,0,0,.28);position:absolute}
.dl-area-popup{position:fixed;background:#fff;border:1px solid #e8e8e8;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:9999;min-width:140px;overflow:hidden}
.dl-area-popup-item{padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;color:#1a1a1a;transition:background .1s}
.dl-area-popup-item:hover{background:#f0f8ff;color:#1890ff}
.dl-area-popup-item.current{color:#aaa;cursor:default}
.dl-area-popup-item.current:hover{background:#fff;color:#aaa}
.dl-sc-strip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;padding-bottom:2px}
.dl-sc-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#f5f5f5;border:1px solid #eee;color:#bbb;transition:all .2s}
.dl-sc-badge.on{background:#f0faf4;border-color:#b7eacf;color:#1a7a45}
.dl-sc-badge.free{background:#fff9e6;border-color:#ffd666;color:#d48806}
.dl-rpanel{background:#fff;border-radius:14px;border:1px solid #efefef;padding:16px;position:sticky;top:60px}
.dl-rp-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#bbb;margin-bottom:10px;display:block}
.dl-drop{border:2px dashed #ddd;border-radius:10px;padding:16px;text-align:center;cursor:pointer;background:#fafafa;transition:all .2s;margin-bottom:10px}
.dl-drop:hover{border-color:#1890ff;background:#f0f8ff}
.dl-drop-icon{font-size:22px;color:#ccc;display:block;margin-bottom:4px}
.dl-drop-t{font-size:12px;font-weight:700;color:#666;margin:0 0 2px}
.dl-drop-s{font-size:10px;color:#aaa;margin:0}
.dl-divider{border:none;border-top:1px solid #f0f0f0;margin:12px 0}
.dl-txt-panel{display:none}
.dl-txt-inp{width:100%;padding:8px 10px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:12px;font-family:inherit;outline:none;margin-bottom:8px;transition:border-color .2s}
.dl-txt-inp:focus{border-color:#1890ff}
.dl-txt-row{display:flex;gap:6px;margin-bottom:8px;align-items:center}
.dl-txt-row select{flex:1;min-width:0;padding:6px 4px;border:1.5px solid #e0e0e0;border-radius:7px;font-size:11px;background:#fff;outline:none}
.dl-txt-row input[type=color]{width:34px;height:32px;border:1.5px solid #e0e0e0;border-radius:7px;padding:2px;cursor:pointer;background:#fff}
.dl-add-txt-btn{width:100%;padding:8px;background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:8px;font-size:12px;font-weight:700;color:#555;cursor:pointer;transition:all .15s}
.dl-add-txt-btn:hover{border-color:#1890ff;background:#f0f8ff;color:#1890ff}
.dl-zone-list{font-size:12px;color:#888;line-height:1.9;margin-bottom:8px;min-height:20px}
.dl-live-price-bar{background:#f0f8ff;border:1px solid #d0e8ff;border-radius:8px;padding:8px 12px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:6px}
.dl-price-btn{cursor:pointer;width:100%;font-family:inherit;transition:all .15s;text-align:left}
.dl-price-btn:hover{background:#e0f0ff;border-color:#1890ff}
.dl-price-info-btn{background:none;border:none;color:#1890ff;font-size:15px;cursor:pointer;padding:0;line-height:1;flex-shrink:0;opacity:.7;transition:opacity .15s}
.dl-price-info-btn:hover{opacity:1}

.dl-bgremove-btn{width:100%;padding:8px 10px;border:1.5px solid #d0e8ff;border-radius:8px;background:#f0f8ff;color:#1890ff;font-size:11px;font-weight:700;cursor:pointer;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.dl-bgremove-btn:hover{background:#1890ff;color:#fff;border-color:#1890ff}
.dl-bgremove-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-bgremove-btn:disabled{opacity:.6;cursor:wait}
.dl-clipart-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9100;display:none;align-items:center;justify-content:center;padding:20px}
.dl-clipart-modal-overlay.open{display:flex}
.dl-clipart-modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.25)}
.dl-clipart-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.dl-clipart-title{font-size:15px;font-weight:800;color:#1a1a1a}
.dl-clipart-close{width:28px;height:28px;border-radius:50%;border:none;background:#f0f0f0;font-size:13px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center}
.dl-clipart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.dl-clipart-item{aspect-ratio:1;border:1.5px solid #eee;border-radius:10px;background:#fff;cursor:pointer;padding:10px;transition:all .15s;display:flex;align-items:center;justify-content:center}
.dl-clipart-item:hover{border-color:#1890ff;background:#f0f8ff;transform:scale(1.05)}
.dl-clipart-item svg{width:100%;height:100%}
.dl-clipart-hint{font-size:11px;color:#888;margin-bottom:12px;line-height:1.5}
@keyframes dlSlideDown{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes dlSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}



.dl-mydesigns-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9550;display:none;align-items:center;justify-content:center;padding:20px;animation:dlFadeIn .25s}
.dl-mydesigns-overlay.open{display:flex}
.dl-mydesigns{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,.28)}
.dl-mydesigns-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.dl-mydesigns-title{font-size:17px;font-weight:800;color:#1a1a1a}
.dl-mydesigns-close{width:30px;height:30px;border-radius:50%;border:none;background:#f0f0f0;font-size:13px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center}
.dl-mydesigns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.dl-mydesigns-card{border:1.5px solid #eee;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s;background:#fff;position:relative;display:flex;flex-direction:column}
.dl-mydesigns-card:hover{border-color:#1890ff;box-shadow:0 4px 16px rgba(24,144,255,.15);transform:translateY(-1px)}
.dl-mydesigns-thumb{aspect-ratio:1;background:#f8f9fc;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dl-mydesigns-thumb img,.dl-mydesigns-thumb canvas{width:100%;height:100%;object-fit:contain}
.dl-mydesigns-info{padding:8px 10px;font-size:11px}
.dl-mydesigns-name{font-weight:800;color:#1a1a1a;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-mydesigns-date{color:#999;font-size:10px}
.dl-mydesigns-rename{position:absolute;top:6px;right:36px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid #d0e8ff;color:#1890ff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:2;padding:0}
.dl-mydesigns-card:hover .dl-mydesigns-rename{opacity:1}
.dl-mydesigns-rename.always{opacity:1}
.dl-mydesigns-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid #ffccc7;color:#ff4d4f;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:2}
.dl-mydesigns-card:hover .dl-mydesigns-del,.dl-mydesigns-del.always{opacity:1}
.dl-mydesigns-empty{text-align:center;padding:40px 20px;color:#888}
.dl-mydesigns-empty-icon{font-size:36px;margin-bottom:8px;opacity:.5}
.dl-mydesigns-access-btn{width:100%;padding:8px 10px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fafafa;font-size:11px;font-weight:700;color:#555;cursor:pointer;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.dl-mydesigns-access-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-mydesigns-access-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Header controls — search bar + tag filter pills inside My Designs modal */
.dl-mydesigns-controls{margin-bottom:12px}
.dl-mydesigns-search-wrap{position:relative;margin-bottom:10px}
.dl-mydesigns-search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none}
.dl-mydesigns-search{
  width:100%;padding:9px 12px 9px 32px;
  /* 16px required to prevent iOS auto-zoom on focus */
  font-size:16px;font-family:inherit;
  border:1.5px solid #e8ecf2;border-radius:10px;outline:none;
  box-sizing:border-box;background:#fafbfd;transition:border-color .15s,background .15s;
}
.dl-mydesigns-search:focus{border-color:#1890ff;background:#fff}
.dl-mydesigns-tags{display:flex;flex-wrap:wrap;gap:6px}
.dl-mydesigns-tag{
  background:#f0f2f5;border:1px solid #e0e4eb;color:#555;
  padding:5px 10px;border-radius:999px;cursor:pointer;
  font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
  transition:all .12s;
}
.dl-mydesigns-tag:hover{border-color:#1890ff;color:#1890ff}
.dl-mydesigns-tag.active{background:#1890ff;border-color:#1890ff;color:#fff}
.dl-mydesigns-tag-ct{font-size:9px;font-weight:800;background:rgba(0,0,0,.08);padding:1px 5px;border-radius:6px}
.dl-mydesigns-tag.active .dl-mydesigns-tag-ct{background:rgba(255,255,255,.25);color:#fff}
/* Tag badge on each design card */
.dl-mydesigns-tag-badge{
  display:inline-block;background:#f0f8ff;color:#1890ff;
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  padding:2px 7px;border-radius:6px;margin:2px 0 3px;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dl-share-toggle{background:none;border:1.5px dashed #d0e8ff;color:#1890ff;font-size:12px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;transition:all .15s}
.dl-share-toggle:hover{background:#f0f8ff;border-style:solid}
.dl-share-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-share-form{display:none;margin-bottom:12px;padding:10px;background:#f8f9fc;border:1px solid #eee;border-radius:10px}
.dl-share-form.open{display:block}
.dl-share-url{width:100%;padding:8px 10px;border:1.5px solid #d0e8ff;border-radius:8px;font-size:11px;color:#1890ff;background:#fff;outline:none;font-family:monospace;box-sizing:border-box;margin-bottom:6px}
.dl-share-copy{width:100%;padding:9px;background:#1890ff;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
.dl-share-copy.copied{background:#22a35a}
.dl-share-warn{font-size:10px;color:#c48400;background:#fff8e1;padding:6px 8px;border-radius:6px;margin-top:6px;border:1px solid #ffe08a}
.dl-save-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px;animation:dlFadeIn .25s}
.dl-save-confirm-overlay.open{display:flex}
.dl-save-confirm{background:#fff;border-radius:18px;padding:28px 24px 22px;width:100%;max-width:420px;box-shadow:0 12px 48px rgba(0,0,0,.28);text-align:center;animation:dlSlideUp .3s ease-out}
.dl-save-confirm-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:none;background:#f0f0f0;cursor:pointer;color:#888;font-size:13px;display:flex;align-items:center;justify-content:center}
.dl-save-check{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#22a35a,#2dd273);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(34,163,90,.35)}
.dl-save-title{font-size:20px;font-weight:800;color:#1a1a1a;margin-bottom:6px}
.dl-save-desc{font-size:13px;color:#666;line-height:1.5;margin-bottom:16px}
.dl-save-info-box{background:#f8f9fc;border:1px solid #eee;border-radius:10px;padding:12px 14px;margin-bottom:14px;text-align:left}
.dl-save-info-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0}
.dl-save-info-lbl{color:#888;font-weight:600}
.dl-save-info-val{color:#1a1a1a;font-weight:700}
.dl-save-tip{background:#fff8e1;border:1px solid #ffe08a;border-radius:8px;padding:10px 12px;font-size:11px;color:#7a5800;text-align:left;margin-bottom:14px;line-height:1.5}
.dl-save-tip strong{color:#5a4400}
.dl-save-email-toggle{background:none;border:1.5px dashed #d0e8ff;color:#1890ff;font-size:12px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;transition:all .15s}
.dl-save-email-toggle:hover{background:#f0f8ff;border-style:solid}
.dl-save-email-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-save-email-form{display:none;margin-bottom:12px}
.dl-save-email-form.open{display:block}
.dl-save-email-input{width:100%;padding:10px 12px;border:1.5px solid #d0e8ff;border-radius:10px;font-size:14px;margin-bottom:6px;outline:none;font-family:inherit;box-sizing:border-box}
.dl-save-email-input:focus{border-color:#1890ff}
.dl-save-email-send{width:100%;padding:10px;background:#1890ff;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer}
.dl-save-email-hint{font-size:10px;color:#999;margin-top:4px;text-align:left}
.dl-save-confirm-cta{width:100%;padding:13px;background:#1890ff;color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s}
.dl-save-confirm-cta:hover{background:#0e7de0}
.dl-save-btn.has-changes::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;background:#ff4d4f;border-radius:50%;border:2px solid #fff}
.dl-save-btn{position:relative}
.dl-intro-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9700;display:none;align-items:center;justify-content:center;padding:20px;animation:dlFadeIn .3s ease-out}
.dl-intro-overlay.open{display:flex}
.dl-intro{background:#fff;border-radius:20px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:0 12px 60px rgba(0,0,0,.3);animation:dlSlideUp .35s cubic-bezier(.4,0,.2,1)}
.dl-intro-hd{padding:22px 24px 10px;position:relative}
.dl-intro-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background:#f0f0f0;font-size:14px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center;transition:background .15s}
.dl-intro-close:hover{background:#e0e0e0}
.dl-intro-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dl-intro-logo-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#1890ff,#6c5ce7);display:flex;align-items:center;justify-content:center;font-size:18px}
.dl-intro-title{font-size:22px;font-weight:800;color:#1a1a1a;line-height:1.15;margin-bottom:4px;text-align:center}
.dl-intro-subtitle{font-size:13px;color:#888;font-weight:500;text-align:center}
.dl-intro-body{padding:4px 24px 20px}
.dl-intro-section{margin-bottom:16px}
.dl-intro-section-hd{font-size:10px;font-weight:800;color:#bbb;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.dl-intro-step{display:flex;gap:12px;margin-bottom:10px;padding:12px;background:#f8f9fc;border:1px solid #eee;border-radius:12px}
.dl-intro-step-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#1890ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.dl-intro-step-body{flex:1}
.dl-intro-step-title{font-size:13px;font-weight:800;color:#1a1a1a;margin-bottom:2px}
.dl-intro-step-desc{font-size:12px;color:#666;line-height:1.4}
.dl-intro-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl-intro-benefit{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#1a7a45;padding:8px 10px;background:#f0faf4;border:1px solid #c3e9d2;border-radius:8px}
.dl-intro-benefit svg{flex-shrink:0;width:14px;height:14px;stroke:#22a35a;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dl-intro-foot{padding:0 24px 22px}
.dl-intro-cta{width:100%;padding:14px;background:#1890ff;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:background .15s;box-shadow:0 4px 16px rgba(24,144,255,.3)}
.dl-intro-cta:hover{background:#0e7de0}
@keyframes dlFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dlSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:767px){.dl-intro{max-width:100%;border-radius:16px}.dl-intro-benefits{grid-template-columns:1fr}.dl-intro-title{font-size:19px}}
.dl-preview-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9200;display:none;align-items:center;justify-content:center;padding:20px}
.dl-preview-modal-overlay.open{display:flex}
.dl-preview-modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:720px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.25)}
.dl-preview-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.dl-preview-title{font-size:15px;font-weight:800;color:#1a1a1a}
.dl-preview-close{width:28px;height:28px;border-radius:50%;border:none;background:#f0f0f0;font-size:13px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center}
.dl-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.dl-preview-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.dl-preview-label{font-size:11px;font-weight:800;color:#555;text-transform:uppercase;letter-spacing:.3px}
.dl-preview-frame{width:100%;aspect-ratio:1;background:#f8f9fc;border:1px solid #eee;border-radius:10px;overflow:hidden;position:relative}
.dl-preview-inner{position:relative;transform-origin:top left}
.dl-preview-inner img{width:100%;height:100%;object-fit:contain}
.dl-preview-inner .dl-el{pointer-events:none}
@media(max-width:767px){.dl-preview-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.dl-preview-modal{padding:18px}}
.dl-price-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.dl-price-modal-overlay.open{display:flex}
.dl-price-modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:400px;max-height:80vh;overflow-y:auto}
.dl-price-modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dl-price-modal-title{font-size:15px;font-weight:800;color:#1a1a1a}
.dl-price-modal-close{width:28px;height:28px;border-radius:50%;border:1.5px solid #eee;background:#fafafa;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555;transition:background .15s}
.dl-price-modal-close:hover{background:#f0f0f0}
.dl-live-price-lbl{color:#666;font-weight:600}
.dl-live-price-val{color:#1890ff;font-weight:800;font-size:14px}
.dl-saved-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
.dl-saved-modal-overlay.open{display:flex}
.dl-saved-modal{background:#fff;border-radius:16px;padding:24px;max-width:380px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.2)}
.dl-saved-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dl-saved-modal-title{font-size:15px;font-weight:800;color:#1a1a1a}
.dl-saved-modal-close{width:28px;height:28px;border-radius:50%;border:none;background:#f0f0f0;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555}
.dl-saved-modal-thumb{width:100%;aspect-ratio:1;border-radius:10px;background:#f8f9fc;border:1px solid #eee;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px}
.dl-saved-modal-thumb canvas,.dl-saved-modal-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.dl-saved-modal-meta{font-size:12px;color:#888;margin-bottom:16px;line-height:1.7}
.dl-saved-modal-meta strong{color:#1a1a1a}
.dl-saved-modal-btns{display:flex;gap:8px}
.dl-saved-modal-btn{flex:1;padding:10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:background .15s}
.dl-saved-modal-btn.primary{background:#1890ff;color:#fff}
.dl-saved-modal-btn.primary:hover{background:#0e7de0}
.dl-saved-modal-btn.secondary{background:#f0f0f0;color:#555}
.dl-saved-modal-btn.secondary:hover{background:#e0e0e0}
/* Tertiary link below the two main buttons — de-emphasized so the 
   primary "Restore Design" action stays visually dominant */
.dl-saved-modal-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:12px;padding:8px;
  background:transparent;border:none;
  color:#1890ff;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  border-radius:8px;transition:background .15s;
}
.dl-saved-modal-link:hover{background:#f0f8ff}
.dl-saved-modal-link:active{background:#e0efff}
.dl-save-btn{width:100%;padding:9px;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;font-size:12px;font-weight:700;color:#666;cursor:pointer;transition:all .15s;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.dl-save-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-save-btn.saved{border-color:#22a35a;color:#22a35a;background:#f0faf4}
.dl-next-btn{width:100%;padding:13px;background:#1890ff;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.dl-next-btn:hover{background:#0e7de0}
.dl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
.dl-modal-overlay.open{display:flex}
.dl-modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.dl-modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dl-modal-hd h3{font-size:16px;font-weight:800;color:#1a1a1a;margin:0}
.dl-modal-close{width:30px;height:30px;border-radius:50%;border:1.5px solid #eee;background:#fafafa;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666}
.dl-modal-close:hover{border-color:#ff4d4f;color:#ff4d4f}

.dl-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1a1a;color:#fff;padding:10px 18px;border-radius:20px;font-size:12px;font-weight:700;z-index:600;opacity:0;transition:all .3s;pointer-events:none}
.dl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.dl-disc-table{margin-bottom:12px;border-radius:10px;overflow:hidden;border:1px solid #e8e8e8}
.dl-disc-table table{width:100%;border-collapse:collapse;font-size:12px}
.dl-disc-table th{background:#f5f5f5;padding:6px 10px;font-weight:800;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.5px;text-align:left}
.dl-disc-table td{padding:6px 10px;border-top:1px solid #f0f0f0;color:#555;font-weight:600;font-size:12px}
.dl-disc-table tr.disc-active{background:#f0f8ff}
.dl-disc-table tr.disc-active td{color:#1890ff;font-weight:800}
.dl-disc-table tr.disc-next td{color:#22a35a}
.dl-disc-tier-badge{display:inline-block;background:#1890ff;color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.4px}
.dl-disc-next-badge{display:inline-block;background:#f0faf4;color:#22a35a;border:1px solid #b7eacf;font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;margin-left:6px;vertical-align:middle}
.dl-savings-banner{border-radius:10px;padding:10px 14px;margin-bottom:10px;display:none}
.dl-savings-banner.visible{display:block}
.dl-savings-banner.has-disc{background:#f0faf4;border:1px solid #b7eacf}
.dl-savings-banner.no-disc{background:#f8f9fc;border:1px solid #e8e8e8}
.dl-savings-main{font-size:13px;font-weight:800;color:#1a7a45;margin-bottom:3px}
.dl-savings-main.no-disc{color:#888}
.dl-savings-sub{font-size:11px;color:#555;line-height:1.6}
.dl-savings-addon{font-size:11px;color:#888;margin-top:4px;padding-top:4px;border-top:1px solid #e8e8e8}
.dl-nudge{font-size:11px;color:#1890ff;font-weight:700;margin-top:4px}
.dl-pg2{max-width:680px;margin:30px auto;padding:0 16px}
.dl-card{background:#fff;border:1px solid #efefef;border-radius:14px;padding:22px;margin-bottom:16px}
.dl-card h2{font-size:18px;font-weight:800;color:#1a1a1a;margin:0 0 4px}
.dl-card p{font-size:13px;color:#999;margin:0 0 18px}
.dl-sz-grid{display:flex;flex-wrap:wrap;gap:10px}
.dl-sz-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.dl-sz-tag{font-size:10px;font-weight:800;color:#888;text-transform:uppercase}
.dl-sz-inp{width:54px;height:42px;text-align:center;border:1.5px solid #e0e0e0;border-radius:8px;font-size:16px;font-weight:700;color:#1a1a1a;background:#fff;-moz-appearance:textfield;outline:none;transition:border-color .15s}
.dl-sz-inp::placeholder{color:#ccc;font-weight:400}
.dl-sz-inp:focus{border-color:#1890ff;box-shadow:0 0 0 3px rgba(24,144,255,.1)}
.dl-sz-inp.filled{border-color:#1890ff;background:#e8f4ff}
.dl-sz-inp::-webkit-inner-spin-button,.dl-sz-inp::-webkit-outer-spin-button{-webkit-appearance:none}
.dl-sz-inp-wrap{display:inline-flex;align-items:stretch;gap:3px}
.dl-sz-steps{display:flex;flex-direction:column;justify-content:stretch;gap:2px;flex-shrink:0}
.dl-sz-step{width:18px;padding:0;margin:0;border:1px solid #d0dae0;background:#fff;color:#1890ff;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s;flex:1;min-height:14px}
.dl-sz-step svg{display:block;pointer-events:none}
.dl-sz-step:hover{background:#f0f8ff;border-color:#1890ff}
.dl-sz-step:active{background:#d9ecff}
.dl-sz-step:focus-visible{outline:2px solid #1890ff;outline-offset:1px}
@media(max-width:767px){
  .dl-sz-step{width:22px}
}
.dl-sum-bar{display:flex;background:#f5f5f5;border-radius:10px;padding:14px;gap:6px}
.dl-ss{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.dl-ss-lbl{font-size:9px;font-weight:800;color:#aaa;text-transform:uppercase;letter-spacing:.5px}
.dl-ss-val{font-size:16px;font-weight:800;color:#1890ff}
.dl-ss-div{width:1px;background:#e0e0e0}
.dl-nav{display:flex;gap:10px;margin-top:16px}
.dl-btn-back{padding:13px 22px;border:2px solid #e0e0e0;border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:#666;cursor:pointer;transition:all .2s}
.dl-btn-back:hover{border-color:#1890ff;color:#1890ff}
.dl-btn-fwd{flex:1;padding:13px;background:#1890ff;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.dl-btn-fwd:hover{background:#0e7de0}
.dl-btn-fwd:disabled{background:#ccc;cursor:default}
.dl-pg3{max-width:680px;margin:30px auto;padding:0 16px}
.dl-rev-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #f5f5f5;font-size:13px}
.dl-rev-lbl{color:#888;font-weight:600}
.dl-rev-val{color:#1a1a1a;font-weight:700;text-align:right;max-width:55%}
.dl-rev-pr{color:#1890ff;font-weight:800}
.dl-total-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;border-top:2px solid #f0f0f0;margin-top:4px}
.dl-total-lbl{font-size:15px;font-weight:800;color:#1a1a1a}
.dl-total-val{font-size:24px;font-weight:800;color:#1890ff}
.dl-order-note-wrap{margin-bottom:12px}
.dl-note-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9800;display:none;align-items:flex-end;justify-content:center}
.dl-note-modal-overlay.open{display:flex}
.dl-note-modal{background:#fff;border-radius:16px 16px 0 0;padding:20px 18px 28px;width:100%;max-width:520px;box-shadow:0 -4px 24px rgba(0,0,0,.15)}
.dl-note-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dl-note-modal-title{font-size:13px;font-weight:800;color:#1a1a1a}
.dl-note-modal-close{width:26px;height:26px;border-radius:50%;border:none;background:#f0f0f0;font-size:13px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center}
.dl-note-modal-hint{font-size:11px;color:#aaa;margin-bottom:10px;line-height:1.5}
.dl-note-modal-ta{width:100%;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:10px;font-size:16px;font-family:inherit;resize:none;outline:none;line-height:1.5;color:#1a1a1a;transition:border-color .15s;box-sizing:border-box}
.dl-note-modal-ta:focus{border-color:#1890ff}
.dl-note-modal-save{width:100%;padding:12px;background:#1890ff;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;margin-top:12px}
.dl-note-open-btn{width:100%;padding:10px;border:1.5px dashed #d0e8ff;border-radius:10px;background:#f8fbff;color:#1890ff;font-size:12px;font-weight:700;cursor:pointer;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.dl-note-open-btn svg{width:14px;height:14px;stroke:#1890ff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-note-open-btn.has-note{background:#f0faf4;border-color:#22a35a;color:#22a35a}
.dl-note-open-btn.has-note svg{stroke:#22a35a}
.dl-order-note-label{font-size:11px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:6px}
.dl-order-note-ta{width:100%;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:10px;font-size:13px;font-family:inherit;resize:none;outline:none;line-height:1.5;color:#1a1a1a;transition:border-color .15s;box-sizing:border-box}
@media(max-width:767px){.dl-order-note-ta{font-size:16px!important}}/* 16px on mobile prevents iOS zoom */
.dl-order-note-ta::placeholder{font-size:11px;color:#bbb}
@media(min-width:768px){#dlOrderNoteWrapP3{display:none}}
.dl-order-note-ta:focus{border-color:#1890ff}
.dl-add-cart{width:100%;padding:15px;background:#1890ff;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s;margin-top:16px}
.dl-add-cart:hover{background:#0e7de0}
.dl-add-cart:disabled{background:#ccc;cursor:default}
.dl-file-note{font-size:12px;color:#888;background:#fffbf0;border:1px solid #fde8b8;border-radius:8px;padding:10px 12px;margin-top:12px;line-height:1.6;display:none}
.dl-mobile-bar,.dl-mobile-sheet,.dl-mobile-backdrop{display:none}
/* Scroll lock */
html.dl-locked,body.dl-locked{overflow:hidden!important;overscroll-behavior:none!important}
@media(max-width:767px){html,body{overflow-x:hidden!important;max-width:100%!important}}
#header-group,header-section,.header-wrapper{display:none!important}
@media(max-width:767px){
  .dl-sidebar,.dl-rpanel{display:none!important}
  /* dl-mobile-next-btn shown globally */
  .dl-design{grid-template-columns:1fr;padding:4px 0 0;gap:4px;max-width:100vw;overflow-x:hidden}
  .dl-canvas-col{order:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:0 8px;position:relative;box-sizing:border-box}
  .dl-canvas-col .dl-mockup-wrap{width:100%;max-width:none;margin:0;overflow:hidden;box-sizing:border-box}
  .dl-view-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;padding-left:0;padding-right:0}
  /* When all tabs fit without horizontal overflow, center them instead of left-aligning */
  .dl-view-tabs.fits{justify-content:center}
  .dl-view-tabs::-webkit-scrollbar{display:none}
  /* Fade edges to hint that tabs are scrollable */
  .dl-view-tabs-wrap{position:relative;width:100%;box-sizing:border-box;padding-left:8px;--fade-opacity:0}  .dl-view-tabs-wrap::after{content:'';position:absolute;top:0;right:0;bottom:4px;width:32px;background:linear-gradient(to right,transparent,rgba(245,247,250,.95));pointer-events:none;z-index:1;opacity:var(--fade-opacity,0);transition:opacity .2s}
  .dl-view-tab{scroll-snap-align:start;flex-shrink:0}
  .dl-page.active{padding-bottom:64px}
  .dl-pg2,.dl-pg3{padding-bottom:64px}
  #dlPage2.active,#dlPage3.active{max-height:calc(var(--dl-vh,1vh)*100 - 52px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Reorder page 2 card on mobile: size grid first, discount table below */
  .dl-size-addon-note{display:none}
  #dlPage2 .dl-card{display:flex;flex-direction:column}
  #dlPage2 .dl-card h2{order:0}
  #dlPage2 #dlSizeDesc{order:1}
  #dlPage2 #dlSizeAddon{display:none}
  #dlPage2 #dlSzGrid{order:2;margin-bottom:8px}
  #dlPage2 #dlDiscTable{order:3}
  /* Banner moved inside .dl-card — make sure it renders after DiscTable on mobile */
  #dlPage2 #dlSavingsBanner{order:4;margin-top:8px}
  
  /* Center the Sizes & Quantities header + product name on mobile Step 2 */
  #dlPage2 .dl-card h2{text-align:center}
  #dlPage2 #dlSizeDesc{text-align:center}
  
  /* Mobile: compact single-color size inputs so all sizes fit on ONE ROW
     (match the multi-color compact styling) */
  #dlPage2 .dl-sz-grid:not(.multi-color){
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:center !important;
  }
  #dlPage2 .dl-sz-grid:not(.multi-color) .dl-mc-sizes{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:center !important;
  }
  #dlPage2 .dl-sz-grid:not(.multi-color) .dl-sz-item{
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    flex:0 0 auto !important;
    flex-direction:column !important;
    gap:3px !important;
    align-items:center !important;
  }
  #dlPage2 .dl-sz-grid:not(.multi-color) .dl-sz-tag{
    font-size:10px !important;color:#888 !important;font-weight:700 !important;
  }
  #dlPage2 .dl-sz-grid:not(.multi-color) .dl-sz-inp{
    width:44px !important;height:36px !important;
    font-size:16px !important;padding:4px 6px !important;
  }
  
  /* Mobile Step 2: keep section HEADERS in their natural space-between layout 
     (dot+name on left, count+X on right — matches desktop and looks clean).
     The SECTION ITSELF is centered as a block by its parent card's margin:auto, 
     which matches how the bulk discount section and "Add Another Color" button 
     are centered. */
  #dlPage2 .dl-sz-grid.multi-color .dl-mc-section{
    /* Constrain width and center as a block, matching other centered elements */
    max-width:100%;
    margin-left:auto;margin-right:auto;
  }
  /* Size boxes centered as a group within their section */
  #dlPage2 .dl-sz-grid.multi-color .dl-mc-sizes{
    justify-content:center !important;
  }
  .dl-mobile-bar::-webkit-scrollbar{display:none}
.dl-mb-btn{scroll-snap-align:start;flex-shrink:0}
.dl-mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;z-index:150;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;padding:6px 4px;gap:2px}
  .dl-mobile-bar::-webkit-scrollbar{display:none}
  .dl-mb-btn{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;border:none;background:transparent;cursor:pointer;border-radius:10px;transition:background .15s;color:#888}
  .dl-mb-btn:hover,.dl-mb-btn.active{background:#f0f8ff;color:#1890ff}
  .dl-mb-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dl-mb-btn span{font-size:9px;font-weight:700}
  .dl-mobile-sheet{display:block;position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:300;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,0,.67,0);max-height:75vh;overflow-y:auto;padding:0 0 16px}
  .dl-mobile-sheet.open{transform:translateY(0)}
  /* Peek mode — sheet collapses to show only its header so canvas is visible.
     The sheet body is tall (~75vh); in peek mode we translate it down by
     its height minus ~96px (enough for the grip + edit header + Preview btn 
     with breathing room so the button label isn't clipped).
     Backdrop fades out via inline style so canvas below is fully interactive. */
  .dl-mobile-sheet.open.dl-sheet-peek{
    transform:translateY(calc(100% - 96px));
    max-height:75vh;
    overflow:hidden;
    cursor:pointer;
  }
  /* While peeking, dim the visible header slightly and hide its buttons so
     the only action is "tap anywhere to come back" */
  .dl-mobile-sheet.dl-sheet-peek .dl-sheet-body{pointer-events:none}
  .dl-mobile-sheet.dl-sheet-peek .dl-sheet-body > *:not(:first-child){opacity:.35;transition:opacity .2s}
  /* The Preview button itself stays live so it can toggle back */
  .dl-mobile-sheet.dl-sheet-peek #dlSheetPreviewBtn{pointer-events:auto;opacity:1 !important}
  .dl-mobile-sheet.dl-sheet-peek .dl-edit-hd{pointer-events:auto;opacity:1 !important}
  .dl-sheet-handle{width:36px;height:4px;background:#e0e0e0;border-radius:2px;margin:12px auto 16px}
  .dl-sheet-body{padding:0 16px 8px}
  /* Preview (eye) button in the edit-sheet header — opens peek mode */
  .dl-sheet-preview-btn{
    display:inline-flex;align-items:center;gap:4px;
    padding:6px 10px;
    background:#f0f8ff;border:1px solid #d0e8ff;border-radius:16px;
    color:#1890ff;font-size:11px;font-weight:700;cursor:pointer;
    font-family:inherit;margin-right:6px;flex-shrink:0;
    transition:background .15s;
  }
  .dl-sheet-preview-btn:active{background:#e0efff}
  .dl-mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:290;opacity:0;pointer-events:none;transition:opacity .3s}
  .dl-mobile-backdrop.open{opacity:1;pointer-events:all}
  .dl-zoom-ctrl{right:4px}
  .dl-toast{bottom:90px}
  /* Hide sc-strip on mobile — info shown in mobile-info-bar instead */
  .dl-sc-strip{display:none}
  /* Mobile info bar — sits above the bottom nav bar */
  .dl-mobile-info-bar{display:flex;align-items:center;justify-content:space-between;position:fixed;bottom:57px;left:0;right:0;background:rgba(255,255,255,.96);border-top:1px solid #eee;padding:6px 12px;z-index:140;backdrop-filter:blur(8px);gap:8px}
  .dl-mib-areas{font-size:11px;font-weight:700;color:#555;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dl-mib-price{font-size:13px;font-weight:800;color:#1890ff;white-space:nowrap;flex-shrink:0}
  /* Extra bottom padding to clear both bars */
  #dlPage1.active{padding-bottom:100px!important}
  #dlPage2.active,#dlPage3.active{padding-bottom:24px!important}
}

/* ===== PHASE 1 — Top-left logo corner + left rail (desktop only) ===== */
.dl-ph1-rail{display:none}
@media(min-width:768px){
  .dl-mini-header{display:none !important}

  /* Top bar height now 80px — logo fills corner, logo padding reduced to 2px so V is maximized */
  .dl-ph1-rail-logo{width:100%;height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
  .dl-ph1-rail-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;cursor:pointer}
  .dl-ph1-rail-logo img{width:82%;height:82%;object-fit:contain}

  /* Rail starts below 80px top bar */
  .dl-ph1-rail{display:flex;position:fixed;top:0;bottom:0;left:0;width:100px;background:#1a1a1a;flex-direction:column;padding:0 0 14px 0;z-index:140;border-right:1px solid #0f0f0f;gap:2px}
  .dl-ph1-rail-btn{width:100%;padding:14px 6px;background:transparent;border:none;color:#999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all .15s;position:relative;font-family:inherit}
  .dl-ph1-rail-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
  .dl-ph1-rail-btn.active{color:#fff;background:#1890ff}
  .dl-ph1-rail-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dl-ph1-rail-btn span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}

  /* Top bar matches logo corner height (80px) */
  .dl-stepbar{position:fixed !important;top:0 !important;left:100px;right:0 !important;padding:0 24px !important;display:flex !important;align-items:center;height:90px;z-index:215;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);gap:20px;box-sizing:border-box}
  .dl-stepbar-inner{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin:0 !important;max-width:none !important;justify-content:flex-start}

  /* Icons overlay */
  .dl-ph1-top-icons{position:fixed;top:0;right:0;height:90px;display:flex;align-items:center;gap:18px;padding:0 24px;z-index:216;background:transparent}
  .dl-ph1-top-icons a,.dl-ph1-top-icons .dl-chat-pill{color:#1a1a1a;display:flex;align-items:center;text-decoration:none;position:relative}
  .dl-ph1-top-icons svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dl-ph1-top-icons .dl-chat-pill{background:#1890ff;color:#fff;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;gap:6px;border:none;font-family:inherit}
  .dl-ph1-top-icons .dl-chat-pill svg{stroke:#fff;width:14px;height:14px}
  .dl-ph1-cart-count{position:absolute;top:-6px;right:-7px;background:#1890ff;color:#fff;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}

  /* Content offsets — 80px top + 100px left */
  .dl-design{padding-left:calc(24px + 100px) !important;padding-top:0 !important}
  body{padding-top:50px;margin:0;overflow-anchor:none}

  .dl-stepbar-inner .dl-mobile-next-btn{display:none !important}
}
.dl-ph1-top-icons{display:none}
@media(min-width:768px){.dl-ph1-top-icons{display:flex}}





/* Only show on desktop (768px+) */




/* ===== PHASE 2 — Slide-out panels (desktop only) ===== */
.dl-ph2-panel{display:none}
@media(min-width:768px){
  .dl-ph2-panel{
    position:fixed;
    top:90px;bottom:0;
    left:101px;width:380px;
    background:#fff;
    border-right:1px solid #eee;
    z-index:138;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    display:block;
    box-shadow:4px 0 20px rgba(0,0,0,.07)
  }
  .dl-ph2-panel.open{transform:translateX(0)}
  .dl-ph2-inner{padding:20px 18px}
  .dl-ph2-sec{margin-bottom:18px}
  .dl-ph2-lbl{font-size:10px;font-weight:800;color:#bbb;text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:10px}
  /* Product cards */
  .dl-ph2-prod-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:8px;background:#fff}
  .dl-ph2-prod-card:hover{border-color:#1890ff;background:#f0f8ff}
  .dl-ph2-prod-card.active{border-color:#1890ff;background:#f0f8ff}
  .dl-ph2-prod-card img{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#f8f9fc}
  .dl-ph2-prod-name{font-size:12px;font-weight:700;color:#1a1a1a}
  .dl-ph2-prod-price{font-size:11px;color:#888;margin-top:2px}
  /* Color swatches */
  .dl-ph2-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-left:-6px;margin-right:-6px}
  .dl-ph2-swatch{
    position:relative;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:6px 4px;
    border:none;background:transparent;cursor:pointer;
    border-radius:8px;
    transition:background .12s;
    font-family:inherit;
  }
  .dl-ph2-swatch:hover{background:#f0f4f8}
  .dl-ph2-swatch-dot{
    position:relative;
    width:32px;height:32px;border-radius:50%;
    border:2px solid transparent;
    box-shadow:0 0 0 1px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:all .15s;
  }
  .dl-ph2-swatch:hover .dl-ph2-swatch-dot{transform:scale(1.08)}
  /* "active" = selected (will be ordered in multi-color) */
  .dl-ph2-swatch.active .dl-ph2-swatch-dot{
    box-shadow:0 0 0 2px rgba(24,144,255,.35);
  }
  /* "current" = also shown on mockup overlay (most recently clicked selected color) */
  .dl-ph2-swatch.current .dl-ph2-swatch-dot{
    border-color:#1890ff;
    box-shadow:0 0 0 3px rgba(24,144,255,.4);
  }
  /* Checkmark — only visible when active */
  .dl-ph2-swatch-check{
    opacity:0;
    width:16px;height:16px;border-radius:50%;
    background:rgba(24,144,255,.95);
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:-4px;right:-4px;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:opacity .15s;
    pointer-events:none;
  }
  .dl-ph2-swatch.active .dl-ph2-swatch-check{opacity:1}
  .dl-ph2-swatch-name{
    font-size:9px;font-weight:700;color:#888;
    text-align:center;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    line-height:1.2;
  }
  .dl-ph2-swatch.active .dl-ph2-swatch-name{color:#1890ff}
  .dl-ph2-swatch.current .dl-ph2-swatch-name{color:#1890ff}
  /* Helper text */
  .dl-ph2-color-help{
    font-size:11px;color:#888;
    line-height:1.45;
    margin:0 0 12px;
    padding:0;
  }
  /* Preview section inside color panel (only visible with 2+ colors selected) */
  .dl-ph2-preview-sec{
    margin-top:18px;padding-top:14px;
    border-top:1px dashed #e8ecf2;
  }
  .dl-ph2-preview-hd{margin-bottom:10px}
  .dl-ph2-preview-title{
    display:block;font-size:12px;font-weight:800;
    color:#1a1a1a;text-transform:uppercase;letter-spacing:.3px;
    margin-bottom:4px;
  }
  .dl-ph2-preview-sub{
    font-size:11px;color:#888;line-height:1.45;margin:0;
  }
  .dl-ph2-preview-dots{
    display:flex;flex-direction:column;gap:6px;
  }
  .dl-ph2-preview-dot{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;
    background:#fafbfd;border:1.5px solid #e8ecf2;border-radius:10px;
    cursor:pointer;font-family:inherit;
    transition:all .15s;
    text-align:left;width:100%;
  }
  .dl-ph2-preview-dot:hover{border-color:#1890ff;background:#fff}
  .dl-ph2-preview-dot.active{
    border-color:#1890ff;background:#f0f8ff;
    box-shadow:0 0 0 2px rgba(24,144,255,.12);
  }
  .dl-ph2-preview-dot-swatch{
    width:16px;height:16px;border-radius:50%;
    flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.12);
  }
  .dl-ph2-preview-dot-name{
    font-size:12px;font-weight:700;color:#1a1a1a;
  }
  .dl-ph2-preview-dot.active .dl-ph2-preview-dot-name{color:#1890ff}
  /* Upload drop area */
  .dl-ph2-drop{border:2px dashed #d0e8ff;border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;background:#fafcff;transition:all .15s}
  .dl-ph2-drop:hover{border-color:#1890ff;background:#f0f8ff}
  .dl-ph2-drop-icon{font-size:28px;margin-bottom:8px;color:#1890ff}
  .dl-ph2-drop-title{font-size:13px;font-weight:700;color:#555;margin-bottom:4px}
  .dl-ph2-drop-sub{font-size:11px;color:#aaa}
  /* Text panel */
  .dl-ph2-txt-inp{width:100%;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;margin-bottom:10px;box-sizing:border-box;font-family:inherit}
  .dl-ph2-txt-inp:focus{border-color:#1890ff}
  .dl-ph2-row{display:flex;gap:8px;margin-bottom:10px}
  .dl-ph2-select{flex:1;padding:8px;border:1.5px solid #e0e0e0;border-radius:7px;font-size:12px;outline:none}
  .dl-ph2-color-inp{width:44px;height:38px;border:1.5px solid #e0e0e0;border-radius:7px;padding:2px;cursor:pointer}
  .dl-ph2-place-btn{width:100%;padding:12px;background:#1890ff;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s}
  .dl-ph2-place-btn:hover{background:#0e7de0}
  /* Clipart grid */
  .dl-ph2-clipart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .dl-ph2-clipart-item{aspect-ratio:1;border:1.5px solid #eee;border-radius:10px;background:#fff;cursor:pointer;padding:8px;transition:all .15s;display:flex;align-items:center;justify-content:center}
  .dl-ph2-clipart-item:hover{border-color:#1890ff;background:#f0f8ff;transform:scale(1.05)}
  .dl-ph2-clipart-item svg{width:100%;height:100%}
  /* Decoration badge */
  .dl-ph2-dec-badge{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f5f5f5;border-radius:10px}
  .dl-ph2-dec-text{font-size:10px;font-weight:800;color:#555;text-transform:uppercase;letter-spacing:.3px}
  .dl-ph2-dec-sub{font-size:9px;color:#1890ff;font-weight:700;margin-top:1px}

  /* Phase 2 edit controls (inside slide-out panels) */
  .dl-ph2-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #eee}
  .dl-ph2-title{font-size:14px;font-weight:800;color:#1a1a1a}
  .dl-ph2-close{display:none}
  .dl-ph2-edit-sec{margin-bottom:14px}
  .dl-ph2-edit-lbl{font-size:9px;font-weight:800;color:#bbb;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
  .dl-ph2-edit-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
  .dl-ph2-edit-btn{flex:1;padding:8px 6px;border:1.5px solid #e0e0e0;border-radius:7px;background:#fff;font-size:11px;font-weight:700;color:#555;cursor:pointer;transition:all .15s;font-family:inherit}
  .dl-ph2-edit-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
  .dl-ph2-edit-btn.active{border-color:#1890ff;background:#1890ff;color:#fff}
  .dl-ph2-rot-inp{width:54px;padding:5px 6px;border:1.5px solid #d0e8ff;border-radius:6px;font-size:11px;font-weight:800;color:#1890ff;text-align:center;background:#f0f8ff;outline:none;-moz-appearance:textfield}
  .dl-ph2-rot-inp::-webkit-inner-spin-button,.dl-ph2-rot-inp::-webkit-outer-spin-button{-webkit-appearance:none}
  .dl-ph2-rot-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#e0e0e0;outline:none;cursor:pointer}
  .dl-ph2-rot-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#1890ff;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .dl-ph2-center-btn{width:100%;padding:9px;border:1.5px solid #22a35a;border-radius:8px;background:#f0faf4;font-size:12px;font-weight:700;color:#22a35a;cursor:pointer;transition:all .15s;font-family:inherit}
  .dl-ph2-center-btn:hover{background:#22a35a;color:#fff}
  .dl-ph2-size-inp{width:100%;padding:6px 8px;border:1.5px solid #e0e0e0;border-radius:6px;font-size:12px;font-weight:700;color:#1a1a1a;text-align:center;background:#fff;outline:none;box-sizing:border-box;-moz-appearance:textfield}
  .dl-ph2-size-inp::-webkit-inner-spin-button,.dl-ph2-size-inp::-webkit-outer-spin-button{-webkit-appearance:none}
  .dl-ph2-del-btn{width:100%;padding:10px;border:1.5px solid #ffccc7;border-radius:8px;background:#fff2f0;font-size:12px;font-weight:700;color:#ff4d4f;cursor:pointer;margin-top:10px;font-family:inherit;transition:all .15s}
  .dl-ph2-del-btn:hover{background:#ff4d4f;color:#fff}
  .dl-ph2-note-ta{width:100%;min-height:200px;padding:12px;border:1.5px solid #e0e0e0;border-radius:10px;font-family:inherit;font-size:13px;line-height:1.5;color:#1a1a1a;resize:vertical;outline:none;box-sizing:border-box;background:#fafafa}
  .dl-ph2-note-ta:focus{border-color:#1890ff;background:#fff}
  .dl-ph2-note-count{font-size:10px;color:#bbb;font-weight:700}
  .dl-ph2-note-save{background:#1890ff;color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
  .dl-ph2-note-save:hover{background:#127fe0}
  .dl-ph2-design-card{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:10px;cursor:pointer;transition:all .15s;display:flex;gap:10px;align-items:center;position:relative}
  .dl-ph2-design-card:hover{border-color:#1890ff;background:#f8fbff}
  .dl-ph2-design-del{width:22px;height:22px;border-radius:50%;border:none;background:#f0f0f0;color:#888;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-family:inherit}
  .dl-ph2-design-del:hover{background:#ff4d4f;color:#fff}



}

/* =================================================================
   REDESIGNED EDIT PANEL UI — used by BOTH desktop (ph2 panel) and
   mobile (bottom sheet) when editing an element. Global (no @media)
   so the same semantic building blocks render on both platforms.
   ================================================================= */
.dl-edit-hd{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin-bottom:14px;
  background:linear-gradient(135deg,#f0f8ff 0%,#e6f4ff 100%);
  border-radius:10px;border:1px solid #d0e8ff;
}
.dl-edit-hd-name{flex:1;font-size:13px;font-weight:800;color:#1890ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-edit-hd-close{
  border:none;background:#fff;border-radius:50%;
  width:28px;height:28px;font-size:14px;cursor:pointer;color:#1890ff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);transition:transform .1s;
}
.dl-edit-hd-close:hover{transform:scale(1.08)}
/* Toggle row with title + description + switch */
.dl-edit-toggle-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:10px;
  background:#fafbfd;border:1px solid #e8ecf2;border-radius:10px;
  transition:all .15s;
}
.dl-edit-toggle-row:hover{border-color:#d0e8ff;background:#f5f9ff}
.dl-edit-toggle-body{flex:1;min-width:0}
.dl-edit-toggle-title{font-size:13px;font-weight:800;color:#1a1a1a;margin-bottom:2px}
.dl-edit-toggle-desc{font-size:11px;font-weight:500;color:#888;line-height:1.3}
/* iOS-style toggle switch */
.dl-toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;margin:0}
.dl-toggle input{opacity:0;width:0;height:0;position:absolute}
.dl-toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:#d9dce0;border-radius:26px;transition:background .2s;
}
.dl-toggle-slider:before{
  content:'';position:absolute;height:20px;width:20px;
  left:3px;bottom:3px;background:#fff;border-radius:50%;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.dl-toggle input:checked+.dl-toggle-slider{background:#1890ff}
.dl-toggle input:checked+.dl-toggle-slider:before{transform:translateX(18px)}
.dl-toggle input:disabled+.dl-toggle-slider{opacity:.6;cursor:wait}
/* Combined action row: Flip H | Flip V | Center | Front | Back */
.dl-edit-action-row{display:flex;gap:5px}
.dl-edit-action-btn{
  flex:1;min-width:0;padding:10px 4px;
  border:1.5px solid #e8ecf2;border-radius:8px;background:#fafbfd;
  font-size:10px;font-weight:700;color:#555;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:all .12s;font-family:inherit;line-height:1;
}
.dl-edit-action-btn:hover{border-color:#1890ff;background:#f0f8ff;color:#1890ff}
.dl-edit-action-btn.active{background:#1890ff;border-color:#1890ff;color:#fff}
.dl-edit-action-btn svg{
  width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* =================================================================
   RECOLOR — per-image palette swatches
   Shown in the edit panel for image elements. Each swatch is a 
   tap target that opens the native color picker via a hidden input.
   Changed swatches carry a small dot of the original color in the 
   corner so the customer can see at a glance what they've changed.
   ================================================================= */
.dl-color-section{
  background:#fafbfd;border:1px solid #e8ecf2;border-radius:10px;
  padding:12px 14px;margin-bottom:10px;
}
.dl-color-section-hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.dl-color-section-lbl{flex:1;min-width:0}
.dl-color-section-title{font-size:13px;font-weight:800;color:#1a1a1a;display:block;margin-bottom:2px}
.dl-color-section-desc{font-size:11px;font-weight:500;color:#888;line-height:1.3;display:block}
.dl-color-reset{
  border:none;background:transparent;color:#1890ff;
  font-size:11px;font-weight:700;cursor:pointer;padding:4px 8px;
  border-radius:6px;transition:background .15s;font-family:inherit;
}
.dl-color-reset:hover{background:#e6f4ff}
.dl-color-reset[disabled]{color:#bbb;cursor:default}
.dl-color-reset[disabled]:hover{background:transparent}
.dl-color-swatches{
  display:flex;flex-wrap:wrap;gap:8px;
}
.dl-color-swatches-loading{
  color:#888;font-size:11px;padding:4px 0;font-style:italic;
}
.dl-color-swatch{
  position:relative;
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.08);
  cursor:pointer;padding:0;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .12s, border-color .12s;
  overflow:visible;
  font-family:inherit;
}
@media (hover: hover){
  .dl-color-swatch:hover{transform:scale(1.08);border-color:rgba(0,0,0,.2)}
}
/* Original-color dot in the corner of a changed swatch */
.dl-color-swatch-orig{
  position:absolute;
  top:-3px;right:-3px;
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  display:none;
  pointer-events:none;
}
.dl-color-swatch.changed .dl-color-swatch-orig{display:block}
.dl-color-swatch.changed{border-color:#1890ff}
/* Hidden native color picker — clicking the button triggers this */
.dl-color-swatch-picker{
  position:absolute;inset:0;
  opacity:0;cursor:pointer;
  border:none;padding:0;margin:0;
  width:100%;height:100%;
  -webkit-appearance:none;appearance:none;
  background:transparent;
}
/* Processing state — spinner overlay on the section */
.dl-color-section.processing{opacity:.6;pointer-events:none}






/* ===== PHASE 3 — Full canvas + right-column view thumbnails + tool stack (desktop) ===== */
/* Default: all Phase 3 desktop elements hidden on mobile */
.dl-ph3-toolstack,.dl-ph3-views,.dl-ph3-more-btn,.dl-ph3-preview-btn,.dl-ph3-zoom-toggle,.dl-ph3-pricecard,.dl-ph3-scroll-hint,.dl-ph3-fade-bottom,.dl-ph3-more-views-wrap{display:none}
.dl-ph3-more-views{display:none}

@media(min-width:768px){
  /* Hide old sidebar (replaced by rail+slide panels) and old tabs above canvas (replaced by right thumbnails) */
  .dl-sidebar{display:none !important}
  .dl-view-tabs-wrap{display:none !important}
  .dl-canvas-col .dl-sc-strip{display:none !important}

  /* Hide old zoom control stack — we're rebuilding it on top-left of canvas + in right column */
  .dl-canvas-col .dl-zoom-ctrl{display:none !important}

  /* Layout: canvas occupies center, right column 260px */
  .dl-design{
    grid-template-columns:1fr 180px !important;
    max-width:none !important;
    padding-left:calc(24px + 100px) !important;
    padding-right:10px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    gap:24px !important;
    align-items:stretch !important;
    min-height:calc(100vh - 90px - 88px) !important;
    transition:padding-left .26s cubic-bezier(.4,0,.2,1);
  }
  body.dl-ph2-open .dl-design{
    padding-left:calc(100px + 380px + 24px) !important;
  }

  /* ===== DESKTOP CANVAS (clean rebuild, matches mobile approach) ===== */
  /* Canvas column: centered flex container, positions the white mockup card */
  .dl-canvas-col{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:calc(100vh - 50px - 88px) !important;
    padding:20px !important;
    box-sizing:border-box !important;
    position:relative !important;
  }

  /* White mockup box — rounded card containing the shirt, like mobile */
  .dl-canvas-col .dl-mockup-wrap{
    width:100% !important;
    max-width:min(760px, calc(100vh - 50px - 88px - 60px)) !important;
    margin:0 !important;
    padding:20px !important;
    background:#fff !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
    transform:translateX(60px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Shirt mockup: natural sizing, fills the box */
  .dl-canvas-col .dl-mockup{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 !important;
    background:transparent !important;
  }

  /* ---- Tool stack (undo/redo/reset) — vertical, top-left of canvas area ---- */
  .dl-ph3-toolstack{
    display:flex !important;
    position:absolute;
    top:8px;
    left:0;
    flex-direction:column;
    gap:6px;
    z-index:30;
  }
  .dl-ph3-toolbtn{
    width:64px;height:52px;border-radius:10px;
    border:1.5px solid #e0e0e0;background:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    cursor:pointer;transition:all .15s;color:#555;
    font-family:inherit;padding:6px 4px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  }
  .dl-ph3-toolbtn-text{line-height:1;margin-top:1px}
  .dl-ph3-toolbtn:hover:not(:disabled){border-color:#1890ff;color:#1890ff}
  .dl-ph3-toolbtn:disabled,.dl-ph3-toolbtn.disabled{opacity:.3;cursor:default}
  .dl-ph3-toolbtn.danger{color:#ff4d4f}
  .dl-ph3-toolbtn.danger:hover:not(:disabled){border-color:#ff4d4f;color:#ff4d4f;background:#fff5f5}
  .dl-ph3-toolbtn.active{background:#f0f8ff;border-color:#1890ff;color:#1890ff}
  .dl-ph3-toolbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .dl-ph3-tool-label{display:none}
  .dl-ph3-toolbtn-wrap{position:relative}

  /* ---- Right column overrides ---- */
  .dl-rpanel{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    position:sticky !important;
    top:50px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    align-self:start !important;
    transform:translateX(20px) !important;
  }

  /* View thumbnails at top of right column */
  .dl-ph3-views{
    display:flex !important;flex-direction:column;gap:8px;
  }
  .dl-ph3-view{
    background:#fff;border:2px solid #e0e0e0;border-radius:10px;
    padding:4px;cursor:pointer;transition:all .15s;position:relative;
    max-width:102px;margin:0 auto;width:100%;
  }
  .dl-ph3-view:hover{border-color:#1890ff}
  .dl-ph3-view.active{border-color:#1890ff;box-shadow:0 0 0 3px rgba(24,144,255,.15)}
  .dl-ph3-view-thumb{
    width:100%;aspect-ratio:1;background:#f8f9fc;border-radius:6px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;
  }
  .dl-ph3-view-thumb img{width:100%;height:100%;object-fit:contain}
  .dl-ph3-view-label{
    font-size:10px;font-weight:700;color:#555;text-align:center;margin-top:3px;
    text-transform:uppercase;letter-spacing:.2px;
  }
  .dl-ph3-view.active .dl-ph3-view-label{color:#1890ff}
  .dl-ph3-view-dot{
    position:absolute;top:4px;right:4px;width:8px;height:8px;
    background:#22a35a;border-radius:50%;border:2px solid #fff;display:none;
  }
  .dl-ph3-view.has-art .dl-ph3-view-dot{display:block}
  /* Compact mode: when sleeves & tag are visible, shrink all thumbnails by 50% */
  .dl-ph3-views.compact .dl-ph3-view,
  .dl-ph3-more-views.compact .dl-ph3-view{max-width:60px !important}
  .dl-ph3-views.compact .dl-ph3-view-label,
  .dl-ph3-more-views.compact .dl-ph3-view-label{font-size:9px !important;margin-top:2px !important}


  /* Sleeves & Inside Tag toggle */
  .dl-ph3-more-views-wrap{display:block !important;width:100%;max-width:120px;margin:0 auto}
  .dl-ph3-more-btn{
    display:flex !important;width:100%;max-width:120px;margin:0 auto;padding:8px 6px;background:#fff;
    border:1.5px solid #e0e0e0;border-radius:10px;
    font-size:10px;font-weight:700;color:#555;cursor:pointer;
    transition:all .15s;text-align:center;line-height:1.3;
    align-items:center;justify-content:center;gap:4px;
    font-family:inherit;
  }
  .dl-ph3-more-btn:hover{border-color:#1890ff;color:#1890ff}
  .dl-ph3-more-btn.expanded{background:#f0f8ff;border-color:#1890ff;color:#1890ff}
  .dl-ph3-more-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .2s}
  .dl-ph3-more-btn.expanded svg{transform:rotate(180deg)}
  /* More-views: scrollable gallery, collapsed by default */
  .dl-ph3-more-views{
    display:flex;flex-direction:column;gap:6px;
    max-height:0;opacity:0;visibility:hidden;
    overflow:hidden;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s;
    align-items:center;position:relative;
  }
  .dl-ph3-more-views.open{
    max-height:170px !important;opacity:1 !important;visibility:visible !important;
    overflow-y:auto !important;overflow-x:hidden;
    margin-top:4px;padding-bottom:6px;
    scrollbar-width:thin;scroll-behavior:smooth;
  }
  .dl-ph3-more-views.open::-webkit-scrollbar{width:4px}
  .dl-ph3-more-views.open::-webkit-scrollbar-track{background:transparent}
  .dl-ph3-more-views.open::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:2px}
  .dl-ph3-more-views.open::-webkit-scrollbar-thumb:hover{background:#1890ff}

  /* Scroll hint chevron — shown when rpanel has .more-open class (toggled by JS) */
  .dl-rpanel.more-open .dl-ph3-scroll-hint{
    display:flex !important;align-items:center;justify-content:center;gap:4px;
    font-size:9px;color:#1890ff;font-weight:700;text-align:center;padding:5px 0 2px;
    letter-spacing:.3px;text-transform:uppercase;
    animation:dlPh3ScrollPulse 1.6s ease-in-out infinite;
  }
  .dl-ph3-scroll-hint svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  @keyframes dlPh3ScrollPulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(2px)}}

  /* Fade gradient overlay — shown when rpanel has .more-open class */
  .dl-rpanel.more-open .dl-ph3-fade-bottom{
    display:block !important;
    position:absolute;left:0;right:0;bottom:0;pointer-events:none;
    height:22px;z-index:5;
    background:linear-gradient(to bottom,rgba(248,249,252,0),rgba(248,249,252,.95) 70%);
  }

  /* Zoom + Preview tools */
  .dl-ph3-zoom-toggle{
    display:flex !important;width:100%;max-width:120px;margin:0 auto;padding:8px 6px;background:#fff;
    border:1.5px solid #e0e0e0;border-radius:10px;
    font-size:10px;font-weight:700;color:#555;cursor:pointer;
    align-items:center;justify-content:center;gap:5px;
    font-family:inherit;transition:all .15s;
  }
  .dl-ph3-zoom-toggle:hover{border-color:#1890ff;color:#1890ff}
  .dl-ph3-zoom-toggle.active{background:#f0f8ff;border-color:#1890ff;color:#1890ff}
  .dl-ph3-zoom-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dl-ph3-preview-btn{
    display:flex !important;width:100%;max-width:120px;margin:0 auto;padding:8px 6px;background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;
    font-size:10px;font-weight:700;color:#555;cursor:pointer;align-items:center;justify-content:center;gap:5px;
    font-family:inherit;transition:all .15s;
  }
  .dl-ph3-preview-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
  .dl-ph3-preview-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Print areas section — card style */
  .dl-ph3-pricecard{
    display:block !important;background:#fff;border:1px solid #efefef;border-radius:10px;
    padding:10px;margin-top:6px;width:100%;max-width:120px;margin-left:auto;margin-right:auto;box-sizing:border-box;
  }
  .dl-ph3-pricecard .dl-rp-lbl{margin-bottom:6px;font-size:9px;letter-spacing:.3px}
  .dl-ph3-pricecard .dl-zone-list{margin-bottom:0;font-size:10px;line-height:1.5}
}
@media(min-width:768px) and (max-width:1400px){
  .dl-design{grid-template-columns:1fr 170px !important;gap:12px !important;padding-right:8px !important}
  .dl-canvas-col .dl-mockup-wrap{max-width:640px !important}
}
@media(min-width:768px) and (max-width:1100px){
  body.dl-ph2-open .dl-design{grid-template-columns:1fr 210px !important}
  .dl-canvas-col .dl-mockup-wrap{max-width:560px !important}
}

@media(min-width:768px){
  /* Keep ONLY "Active Print Areas" (label + zone list) visible in the pricecard */
  .dl-ph3-pricecard #dlPriceInfoBtn,
  .dl-ph3-pricecard #dlOrderNoteWrapP3,
  .dl-ph3-pricecard #dlDesktopNoteBtn,
  .dl-ph3-pricecard #dlMyDesignsBtn,
  .dl-ph3-pricecard #dlSaveBtn,
  .dl-ph3-pricecard #dlToP2{display:none !important}
  /* Hide dividers around the hidden elements inside pricecard */
  .dl-ph3-pricecard .dl-divider{display:none !important}
}

@media(min-width:768px){
  /* Hide upload drop zone, text panel, and top divider in the right panel on desktop */
  .dl-ph3-pricecard > .dl-rp-lbl:first-child,
  .dl-ph3-pricecard > .dl-drop,
  .dl-ph3-pricecard > .dl-txt-panel,
  .dl-ph3-pricecard > .dl-divider:first-of-type{display:none !important}
  /* Also hide Active Print Areas label if it's the second since we're removing the first */
  .dl-ph3-pricecard .dl-rp-lbl:first-of-type{margin-top:0 !important}
}

/* ===== PHASE 5 — Bottom action bar (desktop only) ===== */
/* Default: hidden on mobile */
.dl-ph5-bottombar{display:none}

@media(min-width:768px){
  .dl-ph5-bottombar{
    display:flex !important;
    position:fixed;left:100px;right:0;bottom:0;
    height:88px;background:#fff;
    box-shadow:0 -2px 8px rgba(0,0,0,.06);
    z-index:210;
    align-items:center;justify-content:space-between;
    padding:0 24px;gap:16px;
    box-sizing:border-box;
    transition:left .26s cubic-bezier(.4,0,.2,1);
  }
  body.dl-ph2-open .dl-ph5-bottombar{left:calc(100px + 380px)}
  .dl-ph5-bb-left{flex:1}
  .dl-ph5-bb-right{display:flex;align-items:center;gap:10px}

  /* Unit price button (to the left of save) — compact, same height as save/next */
  .dl-ph5-price-btn{
    display:flex;align-items:center;gap:10px;padding:8px 14px;
    background:#f8fbff;border:1.5px solid #d0e8ff;border-radius:12px;
    cursor:pointer;font-family:inherit;transition:all .15s;
  }
  .dl-ph5-price-btn:hover{background:#f0f8ff;border-color:#1890ff}
  .dl-ph5-price-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
  .dl-ph5-price-lbl{font-size:10px;font-weight:800;color:#555;text-transform:uppercase;letter-spacing:.3px}
  .dl-ph5-price-sub{display:block;font-size:8px;font-weight:700;color:#1890ff;text-transform:uppercase;letter-spacing:.3px;line-height:1}
  .dl-ph5-price-val-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.1}
  .dl-ph5-price-val{font-size:16px;font-weight:900;color:#1890ff;line-height:1}

  /* Save Design button */
  .dl-ph5-save-btn{
    display:flex;align-items:center;gap:8px;padding:13px 22px;
    background:#fff;border:1.5px solid #1890ff;border-radius:12px;
    color:#1890ff;font-size:14px;font-weight:800;cursor:pointer;
    font-family:inherit;transition:all .15s;
  }
  .dl-ph5-save-btn:hover{background:#f0f8ff}
  .dl-ph5-save-btn svg{stroke:currentColor;fill:none}

  /* Next Step button */
  .dl-ph5-next-btn{
    display:flex;align-items:center;gap:10px;padding:14px 26px;
    background:#1890ff;border:1.5px solid #1890ff;border-radius:12px;
    color:#fff;font-size:14px;font-weight:800;cursor:pointer;
    font-family:inherit;transition:all .15s;
    box-shadow:0 2px 6px rgba(24,144,255,.25);
  }
  .dl-ph5-next-btn:hover{background:#127fe0;border-color:#127fe0}

}


/* Hyper-aggressive hide: on desktop only show phase 3 children in rpanel, hide everything else */
@media(min-width:768px){
  .dl-rpanel > *:not(.dl-ph3-views):not(.dl-ph3-more-btn):not(.dl-ph3-more-views):not(.dl-ph3-more-views-wrap):not(.dl-ph3-scroll-hint):not(.dl-ph3-preview-btn):not(.dl-ph3-zoom-toggle){display:none !important}
}


/* Force right column flush with top bar */
@media(min-width:768px){
  .dl-rpanel{top:50px !important}
  /* Remove any natural top spacing */
  .dl-rpanel > *:first-child{margin-top:0 !important}
  /* Ensure the rpanel is above top bar only for its scrollable content */
  .dl-rpanel{z-index:200}
}


/* Preview button moved to left toolstack — hide the right-column version */
@media(min-width:768px){
  .dl-ph3-preview-btn{display:none !important}
}


/* Active Print Areas inside the Product panel (Phase 2 panel) */
.dl-ph2-zones-sec{
  margin-top:16px;padding:14px 14px 12px;background:#fafbfd;border-radius:12px;border:1px solid #e8ecf2;
}
.dl-ph2-zones-lbl{font-size:10px;font-weight:800;letter-spacing:.8px;color:#888;margin-bottom:8px;text-transform:uppercase}
.dl-ph2-zone-list{font-size:12px;color:#555;line-height:1.5}


/* ===== Bottom bar — Price breakdown tooltip on hover ===== */
@media(min-width:768px){
  .dl-ph5-price-btn-wrap{position:relative;display:inline-block}
  .dl-ph5-price-tooltip{
    position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);
    min-width:240px;max-width:300px;
    background:#1a1a1a;color:#fff;border-radius:10px;padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;
    pointer-events:none;z-index:300;font-size:12px;
  }
  .dl-ph5-price-tooltip::after{
    content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:7px solid transparent;border-top-color:#1a1a1a;
  }
  .dl-ph5-price-btn-wrap:hover .dl-ph5-price-tooltip{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  .dl-ph5-tt-title{font-size:10px;font-weight:800;letter-spacing:.6px;color:#9ca7b8;text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #333}
  .dl-ph5-tt-body{display:flex;flex-direction:column;gap:5px}
  .dl-ph5-tt-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
  .dl-ph5-tt-row.muted{color:#9ca7b8;font-weight:500}
  .dl-ph5-tt-row.total{margin-top:6px;padding-top:8px;border-top:1px solid #333;color:#4dabf7;font-weight:800;font-size:13px}
  .dl-ph5-tt-row.free{color:#ffd43b;font-weight:700}

  /* Bottom bar price-sub (dynamic add-on text) — when there are add-ons */
  .dl-ph5-price-sub{transition:color .15s}
  .dl-ph5-price-sub.has-addons{color:#22a35a}

  /* ===== Cleaner right column thumbnails layout ===== */
  /* Tighter spacing between thumbs */
  .dl-rpanel{gap:8px !important}
  /* Thumbnails: balanced size, clean borders */
  .dl-ph3-view{
    background:#fff !important;
    border:1.5px solid #e8ecf2 !important;
    border-radius:12px !important;
    padding:6px !important;
    transition:all .18s ease !important;
    box-shadow:0 1px 2px rgba(0,0,0,.02) !important;
  }
  .dl-ph3-view:hover{
    border-color:#1890ff !important;
    box-shadow:0 2px 8px rgba(24,144,255,.12) !important;
    transform:translateY(-1px);
  }
  .dl-ph3-view.active{
    border:2px solid #1890ff !important;
    box-shadow:0 2px 10px rgba(24,144,255,.18) !important;
    background:#fafdff !important;
  }
  .dl-ph3-view-label{
    margin-top:4px !important;
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:.6px !important;
    color:#5a6478 !important;
    text-transform:uppercase !important;
  }
  .dl-ph3-view.active .dl-ph3-view-label{color:#1890ff !important}
  /* Sleeves & Tag expander — cleaner pill style */
  .dl-ph3-more-btn{
    margin-top:4px !important;
    padding:9px 6px !important;
    background:#fff !important;
    border:1.5px solid #e8ecf2 !important;
    border-radius:10px !important;
    color:#5a6478 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.4px !important;
    text-transform:uppercase !important;
    transition:all .18s ease !important;
    box-shadow:0 1px 2px rgba(0,0,0,.02) !important;
  }
  .dl-ph3-more-btn:hover{
    border-color:#1890ff !important;
    color:#1890ff !important;
    background:#fafdff !important;
  }
  .dl-ph3-more-btn.expanded{
    background:#fafdff !important;
    border-color:#1890ff !important;
    color:#1890ff !important;
  }
  /* Scroll hint cleaner */
  .dl-rpanel.more-open .dl-ph3-scroll-hint{
    color:#1890ff !important;
    font-size:9px !important;
    padding:4px 0 !important;
  }
}



/* Phase 7 design previews — hidden by default (mobile), shown on desktop */
.dl-ph7-previews{display:none}
/* ============================================================
   PHASE 7 — Steps 2 & 3 desktop redesign
   Two-column layouts, sticky summary cards, design preview thumbs
   ============================================================ */
@media(min-width:768px){
  /* Hide rail + bottom bar + slide-out panel on Steps 2 and 3 (desktop only) */
  body.dl-step-2 .dl-ph1-rail,
  body.dl-step-2 .dl-ph5-bottombar,
  body.dl-step-2 .dl-ph2-panel,
  body.dl-step-3 .dl-ph1-rail,
  body.dl-step-3 .dl-ph5-bottombar,
  body.dl-step-3 .dl-ph2-panel{display:none !important}

  /* Reset body padding-left on steps 2+3 (no rail to clear) */
  body.dl-step-2,body.dl-step-3{padding-left:0 !important}
  body.dl-step-2 .dl-design,body.dl-step-3 .dl-design{
    padding-left:24px !important;padding-right:24px !important;
    grid-template-columns:1fr !important;max-width:1200px !important;
    margin:0 auto !important;
  }

  /* ===== STEP 2 — Sizes & Quantities, 2-column ===== */
  body.dl-step-2 #dlPage2.active{display:block !important}
  body.dl-step-2 .dl-pg2{
    display:grid !important;
    grid-template-columns:1fr 380px !important;
    gap:32px !important;
    align-items:start !important;
    padding:30px 0 !important;
    max-width:1100px !important;
    margin:0 auto !important;
  }
  /* Left column — sizes + discount table + savings banner */
  body.dl-step-2 .dl-pg2 > .dl-card{
    grid-column:1 !important;grid-row:1 !important;
    background:#fff !important;border-radius:14px !important;
    padding:28px !important;border:1px solid #e8ecf2 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
  }
  body.dl-step-2 .dl-pg2 > .dl-card h2{font-size:22px !important;margin:0 0 8px !important;color:#1a1a1a !important}
  body.dl-step-2 #dlSizeDesc{color:#666 !important;font-size:13px !important;margin-bottom:18px !important}
  /* Savings banner now lives inside the card, just below the bulk-rate chart.
     Give it a little breathing room above so it sits cleanly under the chart. */
  body.dl-step-2 .dl-savings-banner{margin:4px 0 14px !important}
  /* Size grid — compact single row on desktop step 2 (matches multi-color look
     so switching between 1 and 2+ colors doesn't reflow the layout) */
  body.dl-step-2 .dl-sz-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;margin-top:12px !important;
  }
  /* Single-color: the (single) .dl-mc-sizes flex row holds all size items */
  body.dl-step-2 .dl-sz-grid:not(.multi-color) .dl-mc-sizes{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    grid-template-columns:none !important;
    justify-content:flex-start !important;
  }
  /* Compact items — no padded boxes, just tag + input stack, same as multi-color */
  body.dl-step-2 .dl-sz-grid:not(.multi-color) .dl-sz-item{
    padding:0 !important;border:none !important;background:transparent !important;
    flex-direction:column !important;gap:4px !important;align-items:center !important;
  }
  body.dl-step-2 .dl-sz-grid:not(.multi-color) .dl-sz-item:hover{border-color:transparent !important;background:transparent !important}
  body.dl-step-2 .dl-sz-tag{font-size:11px !important;font-weight:700 !important;color:#888 !important;text-transform:uppercase !important}
  body.dl-step-2 .dl-sz-inp{width:50px !important;height:36px !important;font-size:15px !important;padding:4px 6px !important;font-weight:700 !important}
  body.dl-step-2 .dl-sz-inp.filled{border-color:#1890ff !important;background:#f0f8ff !important;color:#1890ff !important;font-weight:800 !important}
  
  /* Discount table styling */
  body.dl-step-2 #dlDiscTable{margin-top:18px !important;background:#fafbfd !important;border-radius:10px !important;padding:14px !important;border:1px solid #e8ecf2 !important}

  /* Right column — sticky summary card */
  body.dl-step-2 .dl-sum-bar{
    grid-column:2 !important;grid-row:1 / span 2 !important;
    flex-direction:column !important;
    background:#fff !important;border-radius:14px !important;
    padding:24px !important;border:1px solid #e8ecf2 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
    position:sticky !important;top:30px !important;align-self:start !important;
    gap:0 !important;
  }
  body.dl-step-2 .dl-sum-bar::before{
    content:'Order Summary';display:block;
    font-size:11px;font-weight:800;letter-spacing:.6px;color:#888;
    text-transform:uppercase;padding-bottom:14px;margin-bottom:14px;
    border-bottom:1px solid #f0f0f0;
  }
  body.dl-step-2 .dl-ss{
    flex:none !important;flex-direction:row !important;justify-content:space-between !important;
    align-items:center !important;padding:10px 0 !important;width:100% !important;
  }
  body.dl-step-2 .dl-ss-lbl{font-size:13px !important;color:#666 !important;font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important;margin:0 !important}
  body.dl-step-2 .dl-ss-val{font-size:15px !important;color:#1a1a1a !important;font-weight:700 !important;margin:0 !important}
  body.dl-step-2 .dl-ss:last-of-type{margin-top:8px;padding-top:14px !important;border-top:1px solid #f0f0f0 !important}
  body.dl-step-2 .dl-ss:last-of-type .dl-ss-lbl{font-size:14px !important;font-weight:700 !important;color:#1a1a1a !important}
  body.dl-step-2 .dl-ss:last-of-type .dl-ss-val{font-size:22px !important;color:#1890ff !important;font-weight:900 !important}
  body.dl-step-2 .dl-ss-div{display:none !important}
  
  /* Nav buttons inside summary */
  body.dl-step-2 .dl-nav{
    grid-column:2 !important;grid-row:1 / span 2 !important;
    margin:0 !important;padding-top:18px !important;
    align-self:start !important;
    flex-direction:column !important;gap:10px !important;
    position:sticky !important;top:30px !important;
    transform:translateY(280px) !important;
  }
  body.dl-step-2 .dl-nav button{width:100% !important;padding:14px 20px !important;font-size:14px !important;border-radius:10px !important;font-weight:700 !important}
  body.dl-step-2 .dl-btn-fwd{background:#1890ff !important;color:#fff !important;border:none !important;order:1}
  body.dl-step-2 .dl-btn-fwd:disabled{background:#cfd5dc !important;cursor:not-allowed}
  body.dl-step-2 .dl-btn-back{background:#fff !important;color:#666 !important;border:1.5px solid #e8ecf2 !important;order:2}
  body.dl-step-2 .dl-btn-back:hover{border-color:#1890ff !important;color:#1890ff !important}

  /* ===== STEP 3 — Review Order, 2-column ===== */
  body.dl-step-3 #dlPage3.active{display:block !important}
  body.dl-step-3 .dl-pg3{
    display:grid !important;
    grid-template-columns:1fr 420px !important;
    gap:32px !important;
    align-items:start !important;
    padding:30px 0 !important;
    max-width:1200px !important;
    margin:0 auto !important;
  }
  /* Left column — design previews */
  body.dl-step-3 .dl-ph7-previews{display:block !important;
    grid-column:1 !important;grid-row:1 !important;
    background:#fff !important;border-radius:14px !important;
    padding:24px !important;border:1px solid #e8ecf2 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
  }
  body.dl-step-3 .dl-ph7-previews-header{
    display:flex !important;justify-content:space-between !important;align-items:center !important;
    margin-bottom:16px !important;
  }
  body.dl-step-3 .dl-ph7-previews-title{
    font-size:18px;font-weight:800;color:#1a1a1a;margin:0;
  }
  body.dl-step-3 .dl-ph7-view-designs-btn{
    background:#fff;border:1.5px solid #1890ff;color:#1890ff;
    padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s;
    font-family:inherit;
  }
  body.dl-step-3 .dl-ph7-view-designs-btn:hover{background:#1890ff;color:#fff}
  body.dl-step-3 .dl-ph7-view-designs-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* Compact summary list inside the previews card (just text rows) */
  body.dl-step-3 .dl-ph7-previews-summary{
    display:flex !important;flex-direction:column !important;gap:8px !important;
  }
  body.dl-step-3 .dl-ph7-summary-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 14px;background:#fafbfd;border:1px solid #e8ecf2;border-radius:8px;
  }
  body.dl-step-3 .dl-ph7-summary-name{font-size:13px;font-weight:700;color:#1a1a1a}
  body.dl-step-3 .dl-ph7-summary-cost{font-size:12px;font-weight:600;color:#666}
  body.dl-step-3 .dl-ph7-summary-cost.free{color:#d48806;font-weight:800}

  /* Right column — review card with order details */
  /* Step 3 grid sized for the layout */
  body.dl-step-3 .dl-pg3{
    grid-template-rows:auto !important;
    padding-bottom:120px !important; /* clear space for sticky bottom bar */
  }
  /* Review card — sticky, sized to viewport, scrollable interior */
  body.dl-step-3 .dl-pg3 > .dl-card{
    grid-column:2 !important;grid-row:1 !important;
    background:#fff !important;border-radius:14px !important;
    padding:20px 22px !important;border:1px solid #e8ecf2 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
    position:sticky !important;top:20px !important;align-self:start !important;
    display:flex !important;flex-direction:column !important;
    max-height:calc(100vh - 130px) !important;
    box-sizing:border-box !important;
  }
  body.dl-step-3 .dl-pg3 > .dl-card h2{
    font-size:18px !important;margin:0 0 12px !important;color:#1a1a1a !important;
    padding-bottom:10px;border-bottom:1px solid #f0f0f0;flex-shrink:0;
  }
  body.dl-step-3 #dlRevContent{
    flex:1 1 auto !important;overflow-y:auto !important;min-height:0 !important;
    margin:0 -8px !important;padding:0 8px !important;scrollbar-width:thin;
  }
  body.dl-step-3 #dlRevContent::-webkit-scrollbar{width:5px}
  body.dl-step-3 #dlRevContent::-webkit-scrollbar-track{background:transparent}
  body.dl-step-3 #dlRevContent::-webkit-scrollbar-thumb{background:#d0d4dc;border-radius:3px}
  body.dl-step-3 #dlRevContent::-webkit-scrollbar-thumb:hover{background:#1890ff}
  body.dl-step-3 .dl-rev-row{padding:6px 0 !important;font-size:12px !important}
  body.dl-step-3 .dl-rev-lbl{color:#666 !important;font-weight:600 !important}
  body.dl-step-3 .dl-rev-val{color:#1a1a1a !important;font-weight:700 !important}
  body.dl-step-3 .dl-rev-pr{color:#1890ff !important;font-weight:700 !important}
  body.dl-step-3 .dl-total-row{
    margin-top:10px !important;padding:10px 0 0 !important;
    border-top:1px solid #f0f0f0 !important;
    display:flex !important;justify-content:space-between !important;align-items:center;
    flex-shrink:0 !important;
  }
  body.dl-step-3 .dl-total-lbl{font-size:14px !important;color:#1a1a1a !important;font-weight:700 !important}
  body.dl-step-3 .dl-total-val{font-size:22px !important;color:#1890ff !important;font-weight:900 !important}
  /* Hide the in-page Note/Cart/file-note buttons on desktop — moved to sticky bar */
  body.dl-step-3 > .dl-design > #dlPage3 > .dl-pg3 > .dl-note-open-btn,
  body.dl-step-3 > .dl-design > #dlPage3 > .dl-pg3 > .dl-add-cart,
  body.dl-step-3 > .dl-design > #dlPage3 > .dl-pg3 > .dl-file-note,
  body.dl-step-3 .dl-pg3 > .dl-note-open-btn,
  body.dl-step-3 .dl-pg3 > .dl-add-cart,
  body.dl-step-3 .dl-pg3 > .dl-file-note{display:none !important}
  body.dl-step-3 .dl-nav{grid-column:1 !important;grid-row:2 !important;margin-top:18px !important;}

  /* ===== STEP 3 STICKY BOTTOM BAR ===== */
  .dl-ph7-step3-bar{display:none}
  body.dl-step-3 .dl-ph7-step3-bar{
    display:flex !important;
    position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;
    background:#fff !important;border-top:1px solid #e8ecf2 !important;
    box-shadow:0 -4px 16px rgba(0,0,0,.06) !important;
    padding:14px 32px !important;gap:14px !important;z-index:210 !important;
    align-items:center !important;justify-content:flex-end !important;
  }
  .dl-ph7-s3-note-btn,.dl-ph7-s3-cart-btn{
    font-family:inherit;cursor:pointer;border-radius:10px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:all .18s ease;
  }
  .dl-ph7-s3-note-btn{
    background:#fff;border:1.5px solid #e8ecf2;color:#1890ff;
    padding:12px 22px;font-size:13px;font-weight:700;
  }
  .dl-ph7-s3-note-btn:hover{border-color:#1890ff;background:#fafdff}
  .dl-ph7-s3-note-btn svg{width:14px;height:14px}
  .dl-ph7-s3-cart-btn{
    background:#1890ff;border:none;color:#fff;
    padding:14px 36px;font-size:14px;font-weight:800;
    box-shadow:0 4px 12px rgba(24,144,255,.25);
  }
  .dl-ph7-s3-cart-btn:hover{background:#0d75d6;transform:translateY(-1px);box-shadow:0 6px 16px rgba(24,144,255,.35)}
  .dl-ph7-s3-cart-btn svg{width:14px;height:14px}

  /* ===== DESIGN PREVIEWS MODAL ===== */
  .dl-ph7-modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;
    display:none;align-items:center;justify-content:center;padding:24px;
  }
  .dl-ph7-modal-overlay.open{display:flex}
  .dl-ph7-modal{
    background:#fff;border-radius:16px;width:100%;max-width:900px;
    max-height:88vh;display:flex;flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
  }
  .dl-ph7-modal-hd{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 24px;border-bottom:1px solid #f0f0f0;flex-shrink:0;
  }
  .dl-ph7-modal-hd h3{font-size:18px;font-weight:800;color:#1a1a1a;margin:0}
  .dl-ph7-modal-close{
    background:transparent;border:none;font-size:18px;color:#888;
    width:32px;height:32px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .dl-ph7-modal-close:hover{background:#f5f5f5;color:#1a1a1a}
  .dl-ph7-modal-body{
    padding:24px;overflow-y:auto;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:18px;
  }
  .dl-ph7-modal-card{
    background:#fafbfd;border:1.5px solid #e8ecf2;border-radius:12px;
    padding:16px;text-align:center;
  }
  .dl-ph7-modal-card img{
    width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
    background:#fff;border-radius:8px;
  }
  .dl-ph7-modal-card-name{
    margin-top:12px;font-size:12px;font-weight:800;color:#1890ff;
    text-transform:uppercase;letter-spacing:.5px;
  }
  .dl-ph7-modal-card-cost{
    font-size:11px;color:#666;font-weight:600;margin-top:2px;
  }
  .dl-ph7-modal-card-cost.free{color:#d48806;font-weight:800}

  /* When step 3 active: shift bar right of where rail was (rail is hidden so 0 left) */
  body.dl-step-3 .dl-ph7-step3-bar{left:0 !important}
}

/* Default mobile: step3 bar always hidden (mobile uses its own buttons) */
.dl-ph7-step3-bar{display:none}
.dl-ph7-modal-overlay{display:none}

  body.dl-step-3 .dl-btn-back{
    background:#fff !important;color:#666 !important;border:1.5px solid #e8ecf2 !important;
    padding:12px 24px !important;border-radius:10px !important;font-weight:700 !important;
  }
  body.dl-step-3 .dl-btn-back:hover{border-color:#1890ff !important;color:#1890ff !important}
}


/* ============================================================
   PHASE 7.1 — Step 3 reorganization
   - Order Items moved from right card to LEFT column below Your Designs
   - Sticky bar now has Back to Sizes button on the left
   ============================================================ */
.dl-ph7-order-items{display:none}

@media(min-width:768px){
  /* Hide the in-page Back button on Step 3 desktop (moved to sticky bar) */
  body.dl-step-3 #dlP3Back{display:none !important}
  body.dl-step-3 .dl-pg3 .dl-nav{display:none !important}

  /* Step 3 grid: left column gets 2 rows (Designs + Order Items), right column has pricing */
  body.dl-step-3 .dl-pg3{
    grid-template-rows:auto auto !important;
    align-items:start !important;
  }
  body.dl-step-3 .dl-ph7-previews{
    grid-column:1 !important;grid-row:1 !important;
  }
  
  /* Order Items section — left column, below Designs (COMPACT one-row summary) */
  body.dl-step-3 .dl-ph7-order-items{
    display:flex !important;flex-direction:column !important;
    grid-column:1 !important;grid-row:2 !important;
    background:#fff !important;border-radius:14px !important;
    padding:14px 18px !important;border:1px solid #e8ecf2 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
    margin-top:14px !important;
    box-sizing:border-box !important;
    /* Scroll if many colors — prevents cut-off */
    max-height:50vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.dl-step-3 .dl-ph7-order-empty{
    color:#888;font-size:12px;text-align:center;padding:8px;font-style:italic;
  }
  /* The compact single-row layout: color | sizes pills | totals */
  body.dl-step-3 .dl-ph7-order-compact{
    display:flex !important;flex-wrap:wrap !important;
    align-items:center !important;gap:10px 14px !important;
  }
  /* When multiple rows are stacked, add spacing between them */
  body.dl-step-3 .dl-ph7-order-items .dl-ph7-order-compact+.dl-ph7-order-compact{
    margin-top:10px !important;padding-top:10px !important;
    border-top:1px dashed #e8ecf2 !important;
  }
  /* Multi-color total row at the bottom */
  body.dl-step-3 .dl-ph7-order-total-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0 2px;margin-top:10px;
    border-top:1.5px solid #e8ecf2;
    font-size:13px;font-weight:800;color:#1a1a1a;
  }
  body.dl-step-3 .dl-ph7-order-total-row span:last-child{
    color:#1890ff;
  }
  /* Color chip */
  body.dl-step-3 .dl-ph7-oc-color{
    display:flex;align-items:center;gap:6px;
    padding:5px 10px;background:#fafbfd;border:1px solid #e8ecf2;
    border-radius:20px;flex-shrink:0;
  }
  body.dl-step-3 .dl-ph7-oc-color-dot{
    width:12px;height:12px;border-radius:50%;
    background:currentColor;border:1.5px solid #d0d4dc;
    color:#fff;
  }
  body.dl-step-3 .dl-ph7-oc-color-name{
    font-size:12px;font-weight:700;color:#1a1a1a;
  }
  /* Size pills container */
  body.dl-step-3 .dl-ph7-oc-sizes{
    display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0;
  }
  body.dl-step-3 .dl-ph7-size-pill{
    display:inline-flex;align-items:center;gap:3px;
    background:#f0f8ff;border:1px solid #c5e0ff;border-radius:6px;
    padding:4px 9px;font-size:11px;line-height:1;
  }
  body.dl-step-3 .dl-ph7-size-pill-sz{
    font-weight:800;color:#1a1a1a;letter-spacing:.3px;
  }
  body.dl-step-3 .dl-ph7-size-pill-qty{
    color:#1890ff;font-weight:800;
  }
  /* Totals on the right */
  body.dl-step-3 .dl-ph7-oc-totals{
    display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;
    padding-left:12px;border-left:1px solid #f0f0f0;
  }
  body.dl-step-3 .dl-ph7-oc-qty{
    font-size:11px;color:#666;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  }
  body.dl-step-3 .dl-ph7-oc-price{
    font-size:14px;color:#1890ff;font-weight:900;
  }

  /* Right card: PRICING SUMMARY only (no more size rows) — fits viewport easier */
  body.dl-step-3 .dl-pg3 > .dl-card{
    grid-row:1 / span 2 !important;
    max-height:calc(100vh - 130px) !important;
  }
  /* Hide the size rows that renderReview puts at the bottom of dlRevContent (they're in Order Items now) */
  body.dl-step-3 #dlRevContent hr{display:none !important}
  body.dl-step-3 #dlRevContent hr ~ .dl-rev-row{display:none !important}

  /* Sticky bar: Back left, Note + Cart right */
  .dl-ph7-s3-back-btn{
    background:#fff;border:1.5px solid #e8ecf2;color:#5a6478;
    padding:11px 20px;border-radius:10px;font-size:13px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;
    font-family:inherit;
  }
  .dl-ph7-s3-back-btn:hover{border-color:#1890ff;color:#1890ff;background:#fafdff}
  .dl-ph7-s3-back-btn svg{width:14px;height:14px}
  .dl-ph7-s3-spacer{flex:1 1 auto}
  body.dl-step-3 .dl-ph7-step3-bar{justify-content:flex-start !important}
}


/* ============================================================
   BATCH 1 — Quick wins (mobile + desktop fixes)
   ============================================================ */

/* Desktop upload panel — help text + copyright */
.dl-ph2-upload-help{
  font-size:11px;color:#666;line-height:1.5;
  margin:12px 4px 0;
}
.dl-ph2-upload-copyright{
  font-size:10px;color:#999;line-height:1.4;
  margin:8px 4px 0;font-style:italic;
}

/* Order note — submitted confirmation card (slide-out panel) */
.dl-ph2-note-confirmed{
  text-align:center;padding:18px 8px 8px;
}
.dl-ph2-note-confirmed-icon{
  width:54px;height:54px;border-radius:50%;
  background:#f0fff5;border:2px solid #22a35a;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.dl-ph2-note-confirmed-icon svg{width:26px;height:26px}
.dl-ph2-note-confirmed-title{
  font-size:16px;font-weight:800;color:#1a1a1a;margin-bottom:6px;
}
.dl-ph2-note-confirmed-sub{
  font-size:12px;color:#666;line-height:1.5;
  margin:0 12px 18px;
}
.dl-ph2-note-preview{
  background:#fafbfd;border:1px solid #e8ecf2;border-radius:10px;
  padding:12px 14px;margin:0 0 16px;text-align:left;
}
.dl-ph2-note-preview-lbl{
  font-size:9px;font-weight:800;letter-spacing:.6px;
  color:#888;margin-bottom:6px;
}
.dl-ph2-note-preview-body{
  font-size:12px;color:#1a1a1a;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word;
  max-height:120px;overflow-y:auto;
}
.dl-ph2-note-newbtn{
  width:100%;padding:11px 18px;
  background:#fff;color:#1890ff;
  border:1.5px solid #1890ff;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.dl-ph2-note-newbtn:hover{background:#1890ff;color:#fff}


/* ============================================================
   BATCH 2 — Asset expansion (clipart categories + fonts)
   ============================================================ */
/* Clipart category filter bar */
.dl-clipart-cats{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid #f0f0f0;
}
.dl-clipart-cat{
  background:#fafbfd;border:1.5px solid #e8ecf2;color:#5a6478;
  padding:5px 12px;border-radius:16px;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
  text-transform:uppercase;letter-spacing:.4px;
}
.dl-clipart-cat:hover{border-color:#1890ff;color:#1890ff}
.dl-clipart-cat.active{background:#1890ff;border-color:#1890ff;color:#fff}


/* ============================================================
   BATCH 2.1 — Text panel fixes
   ============================================================ */
/* Add Another Text button — appears below the active text input + edit controls */
.dl-ph2-add-another-text{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:14px;padding:11px 18px;
  background:#fff;color:#1890ff;
  border:1.5px dashed #1890ff;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.dl-ph2-add-another-text:hover{
  background:#f0f8ff;border-style:solid;
}
.dl-ph2-add-another-text svg{width:14px;height:14px}

/* Make font-size dropdown wider so font names don't push it to zero width */
.dl-ph2-row #dlPh2FontSz{flex:0 0 90px !important;min-width:90px !important}
.dl-ph2-row #dlPh2FontFam{flex:1 1 auto !important;min-width:0 !important}


/* Desktop slide-out clipart category filter */
.dl-ph2-clipart-cats{
  display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid #f0f0f0;
}
.dl-ph2-clipart-cat{
  background:#fafbfd;border:1.5px solid #e8ecf2;color:#5a6478;
  padding:4px 10px;border-radius:14px;font-size:10px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
  text-transform:uppercase;letter-spacing:.3px;
}
.dl-ph2-clipart-cat:hover{border-color:#1890ff;color:#1890ff}
.dl-ph2-clipart-cat.active{background:#1890ff;border-color:#1890ff;color:#fff}


/* ==============================================================
   SAVED DESIGNS PANEL (Batch 3)
   ============================================================== */
/* Search */
.dl-ph2-designs-search-wrap{
  position:relative;margin-bottom:12px;
}
.dl-ph2-designs-search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:#999;pointer-events:none;
}
.dl-ph2-designs-search{
  width:100%;padding:9px 12px 9px 34px;
  border:1.5px solid #e8ecf2;border-radius:10px;
  font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s;background:#fff;
  box-sizing:border-box;
}
.dl-ph2-designs-search:focus{border-color:#1890ff}
.dl-ph2-designs-search::placeholder{color:#bbb}

/* Tag filter pill bar */
.dl-ph2-designs-tags{
  display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;
}
.dl-ph2-designs-tags:empty{display:none}
.dl-ph2-design-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:#fafbfd;border:1.5px solid #e8ecf2;color:#5a6478;
  padding:4px 9px;border-radius:14px;font-size:10px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
  text-transform:uppercase;letter-spacing:.3px;
}
.dl-ph2-design-tag:hover{border-color:#1890ff;color:#1890ff}
.dl-ph2-design-tag.active{background:#1890ff;border-color:#1890ff;color:#fff}
.dl-ph2-design-tag-ct{
  background:rgba(0,0,0,.08);font-size:9px;padding:1px 5px;border-radius:8px;font-weight:800;
}
.dl-ph2-design-tag.active .dl-ph2-design-tag-ct{background:rgba(255,255,255,.28)}

/* Designs grid (list of cards) */
.dl-ph2-designs-grid-ctr{
  display:flex;flex-direction:column;gap:10px;
}
.dl-ph2-designs-empty{
  text-align:center;padding:36px 16px;color:#aaa;
  font-size:12px;line-height:1.6;
}
.dl-ph2-designs-empty svg{margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}
.dl-ph2-designs-empty div{font-weight:700;color:#666;margin-bottom:4px}
.dl-ph2-designs-empty span{font-size:10px;color:#bbb}

/* Design card */
.dl-ph2-design-card{
  display:flex;gap:11px;padding:11px;
  background:#fff;border:1.5px solid #e8ecf2;border-radius:12px;
  transition:all .15s;cursor:pointer;
}
.dl-ph2-design-card:hover{
  border-color:#1890ff;box-shadow:0 4px 12px rgba(24,144,255,.08);
}
.dl-ph2-design-thumb{
  width:56px;height:56px;object-fit:contain;
  border-radius:8px;background:#f8f9fc;flex-shrink:0;
}
.dl-ph2-design-thumb-empty{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;opacity:.3;
}
.dl-ph2-design-body{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
}
.dl-ph2-design-top{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.dl-ph2-design-name{
  flex:1;min-width:0;font-size:12px;font-weight:800;color:#1a1a1a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dl-ph2-design-tag-badge{
  background:#f0f8ff;border:1px solid #c5e0ff;color:#1890ff;
  font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;
  text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;
  max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dl-ph2-design-date{
  font-size:10px;color:#888;font-weight:500;
}
.dl-ph2-design-actions{
  display:flex;gap:5px;margin-top:6px;
}
.dl-ph2-design-btn{
  background:#fff;border:1px solid #e0e0e0;color:#5a6478;
  padding:5px 8px;border-radius:6px;font-size:10px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:28px;height:26px;
}
.dl-ph2-design-btn svg{width:11px;height:11px}
.dl-ph2-design-btn:hover{border-color:#1890ff;color:#1890ff;background:#f0f8ff}
.dl-ph2-design-btn-primary{
  background:#1890ff;border-color:#1890ff;color:#fff;padding:5px 14px;
}
.dl-ph2-design-btn-primary:hover{background:#0d75d6;border-color:#0d75d6;color:#fff}
.dl-ph2-design-btn-del:hover{border-color:#e74c3c;color:#e74c3c;background:#fff5f3}

/* ==============================================================
   RENAME / TAG MODAL
   ============================================================== */
.dl-rename-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9600;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:dlFadeIn .15s ease;
}
@keyframes dlFadeIn{from{opacity:0}to{opacity:1}}
.dl-rename-modal{
  background:#fff;border-radius:16px;width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);padding:0;
}
.dl-rename-hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;border-bottom:1px solid #f0f0f0;
}
.dl-rename-hd h3{font-size:17px;font-weight:800;color:#1a1a1a;margin:0}
.dl-rename-close{
  background:transparent;border:none;font-size:16px;color:#888;cursor:pointer;
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.dl-rename-close:hover{background:#f5f5f5;color:#1a1a1a}
.dl-rename-lbl{
  display:block;padding:14px 22px 6px;
  font-size:10px;font-weight:800;letter-spacing:.5px;
  color:#888;text-transform:uppercase;
}
.dl-rename-inp{
  display:block;width:calc(100% - 44px);margin:0 22px;
  padding:10px 12px;font-size:16px;font-family:inherit;
  border:1.5px solid #e8ecf2;border-radius:10px;outline:none;
  box-sizing:border-box;transition:border-color .15s;
}
/* 16px font-size is required — anything less triggers iOS auto-zoom on focus,
   which messes up the page zoom state and persists after the keyboard closes. */
.dl-rename-inp:focus{border-color:#1890ff}
.dl-rename-hint{
  padding:10px 22px 0;font-size:11px;color:#888;line-height:1.4;margin:0;
}
.dl-rename-actions{
  display:flex;gap:10px;padding:18px 22px 22px;
  border-top:1px solid #f0f0f0;margin-top:16px;
}
.dl-rename-btn{
  flex:1;padding:10px 16px;border-radius:10px;
  font-size:13px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.dl-rename-btn-cancel{
  background:#fff;border:1.5px solid #e8ecf2;color:#5a6478;
}
.dl-rename-btn-cancel:hover{border-color:#999;color:#1a1a1a}
.dl-rename-btn-save{
  background:#1890ff;border:1.5px solid #1890ff;color:#fff;
}
.dl-rename-btn-save:hover{background:#0d75d6;border-color:#0d75d6}


/* ==============================================================
   PRODUCT PANEL — Current product card + Change Product button
   ============================================================== */
.dl-ph2-current-prod{
  display:flex;gap:14px;align-items:center;
  padding:14px;background:#fafbfd;border:1.5px solid #e8ecf2;
  border-radius:12px;margin-bottom:10px;
}
.dl-ph2-current-prod-img{
  width:72px;height:72px;flex-shrink:0;
  object-fit:contain;border-radius:8px;background:#fff;
  border:1px solid #f0f0f0;
}
.dl-ph2-current-prod-info{
  flex:1;min-width:0;
}
.dl-ph2-current-prod-lbl{
  font-size:9px;font-weight:800;letter-spacing:.5px;
  color:#888;text-transform:uppercase;margin-bottom:4px;
}
.dl-ph2-current-prod-name{
  font-size:14px;font-weight:800;color:#1a1a1a;line-height:1.3;margin-bottom:4px;
}
.dl-ph2-current-prod-meta{
  font-size:11px;color:#666;font-weight:600;
}
.dl-ph2-change-prod-btn{
  width:100%;padding:11px 16px;
  background:#fff;color:#1890ff;
  border:1.5px solid #1890ff;border-radius:10px;
  font-size:13px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;font-family:inherit;
}
.dl-ph2-change-prod-btn:hover{
  background:#1890ff;color:#fff;
}
.dl-ph2-change-prod-btn svg{width:14px;height:14px}

/* ── Product description accordion ──────────────────────────────────────── */
.dl-prod-desc{border:1px solid #e8ecf2;border-radius:10px;background:#fff;overflow:hidden;margin-bottom:10px}
.dl-prod-desc-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;gap:8px;background:transparent;border:none;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .12s;
}
.dl-prod-desc-toggle:hover{background:#f8f9fc}
.dl-prod-desc-label{font-size:10px;font-weight:800;color:#666;text-transform:uppercase;letter-spacing:.5px;flex:1}
.dl-prod-desc-chevron{flex-shrink:0;color:#aaa;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.dl-prod-desc-chevron--open{transform:rotate(180deg)}
.dl-prod-desc-body{max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1)}
.dl-prod-desc-content{padding:2px 14px 14px;font-size:12px;color:#555;line-height:1.6;border-top:1px solid #f0f0f0}
.dl-prod-desc-content p{margin:8px 0 0}
.dl-prod-desc-content p:first-child{margin-top:8px}
.dl-prod-desc-content ul,.dl-prod-desc-content ol{margin:6px 0 0;padding-left:18px}
.dl-prod-desc-content li{margin-bottom:2px}
.dl-prod-desc-content strong,.dl-prod-desc-content b{font-weight:700;color:#1a1a1a}
.dl-prod-desc-content h1,.dl-prod-desc-content h2,
.dl-prod-desc-content h3,.dl-prod-desc-content h4{font-size:12px;font-weight:800;color:#1a1a1a;margin:10px 0 4px}
.dl-prod-desc-content a{color:#1890ff;text-decoration:none}
.dl-prod-desc-content br{display:none}


/* ==============================================================
   CONFIRMATION DIALOG (product switch)
   ============================================================== */
.dl-confirm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:800;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:dlFadeIn .15s ease;
}
.dl-confirm-modal{
  background:#fff;border-radius:16px;padding:28px 24px 20px;
  width:100%;max-width:380px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:dlSlideUp .22s cubic-bezier(.4,0,.2,1);
}
.dl-confirm-ico{
  width:56px;height:56px;border-radius:50%;
  background:#fff8e6;border:2px solid #f39c12;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.dl-confirm-ico svg{width:26px;height:26px}
.dl-confirm-title{
  font-size:17px;font-weight:800;color:#1a1a1a;
  margin:0 0 8px;line-height:1.3;
}
.dl-confirm-body{
  font-size:13px;color:#666;line-height:1.5;
  margin:0 0 20px;
}
.dl-confirm-actions{
  display:flex;gap:10px;
}
.dl-confirm-btn{
  flex:1;padding:11px 14px;border-radius:10px;
  font-size:13px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:all .15s;
  border:1.5px solid transparent;
}
.dl-confirm-btn-cancel{
  background:#fff;border-color:#e8ecf2;color:#5a6478;
}
.dl-confirm-btn-cancel:hover{border-color:#999;color:#1a1a1a}
.dl-confirm-btn-ok{
  background:#1890ff;border-color:#1890ff;color:#fff;
}
.dl-confirm-btn-ok:hover{background:#0d75d6;border-color:#0d75d6}


/* ==============================================================
   PRODUCT MODAL — Search bar
   ============================================================== */
.dl-prod-modal-search-wrap{
  position:relative;margin-bottom:16px;flex-shrink:0;
}
.dl-prod-modal-search-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:#999;pointer-events:none;
}
.dl-prod-modal-search{
  width:100%;padding:10px 40px 10px 40px;
  border:1.5px solid #e8ecf2;border-radius:10px;
  font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s;background:#fff;
  box-sizing:border-box;
}
.dl-prod-modal-search:focus{border-color:#1890ff}
.dl-prod-modal-search::placeholder{color:#bbb}
.dl-prod-modal-search-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:none;background:transparent;
  color:#aaa;font-size:13px;cursor:pointer;
  border-radius:50%;display:none;align-items:center;justify-content:center;
  line-height:1;padding:0;transition:all .15s;
}
.dl-prod-modal-search-clear:hover{background:#f5f5f5;color:#1a1a1a}
/* Only show clear button when input has value */
.dl-prod-modal-search:not(:placeholder-shown)+.dl-prod-modal-search-clear{display:flex}
@media(max-width:767px){
  /* 16px font-size prevents iOS auto-zoom on input focus */
  .dl-prod-modal-search{font-size:16px;padding:11px 40px 11px 40px}
  .dl-prod-modal-search-ico{left:13px;width:16px;height:16px}
  .dl-prod-modal-search::placeholder{font-size:13px} /* visual parity */
}


/* ========================================================================
   PRODUCT MODAL V2 — Fresh rewrite (pm2- prefix, independent from .dl-modal)
   
   Design goals:
   - No inheritance from base .dl-modal (which had overflow-y:auto that caused nested scroll)
   - Clear single-scroll-container model: ONLY the grid-wrap scrolls
   - Works on iOS Safari: tested scroll behavior with standard CSS only (no svh, no flex traps)
   ======================================================================== */

/* Overlay: fullscreen, fixed, NO scroll on overlay itself */
.pm2-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  z-index:500;
  display:none; /* shown via .open */
  overflow:hidden; /* prevent any scroll here */
}
.pm2-overlay.open{display:block}

/* Modal box: fills overlay, clips overflow, uses CSS Grid internally */
.pm2-box{
  position:absolute;
  top:20px;left:50%;transform:translateX(-50%);
  width:calc(100% - 40px);
  max-width:820px;
  max-height:calc(100% - 40px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
  display:grid;
  /* 3 fixed rows + 1 flexible row for the grid-wrap */
  grid-template-rows:auto auto auto auto 1fr;
  padding:22px;
  box-sizing:border-box;
}

/* Header */
.pm2-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid #f0f0f0;
}
.pm2-title-wrap{flex:1;min-width:0}
.pm2-title{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  color:#1a1a1a;
}
.pm2-sub{
  margin:0;
  font-size:12px;
  color:#888;
  line-height:1.4;
}
.pm2-close{
  background:transparent;
  border:none;
  width:34px;height:34px;
  border-radius:10px;
  color:#999;font-size:16px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  flex-shrink:0;
  font-family:inherit;
}
@media (hover: hover){
  .pm2-close:hover{background:#f5f5f5;color:#1a1a1a}
}

/* Search */
.pm2-search{
  position:relative;
  margin-bottom:14px;
}
.pm2-search-ico{
  position:absolute;
  left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;
  color:#999;
  pointer-events:none;
}
.pm2-search-input{
  width:100%;
  padding:10px 40px 10px 40px;
  border:1.5px solid #e8ecf2;
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
  background:#fff;
  box-sizing:border-box;
}
.pm2-search-input:focus{border-color:#1890ff}
.pm2-search-input::placeholder{color:#bbb}
.pm2-search-clear{
  position:absolute;
  right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;
  border:none;
  background:transparent;
  color:#aaa;
  font-size:13px;
  cursor:pointer;
  border-radius:50%;
  display:none;
  align-items:center;justify-content:center;
  line-height:1;
  padding:0;
}
@media (hover: hover){
  .pm2-search-clear:hover{background:#f5f5f5;color:#1a1a1a}
}
.pm2-search-input:not(:placeholder-shown)+.pm2-search-clear{display:flex}

/* Category pills */
.pm2-cats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.pm2-cat{
  background:#fafbfd;
  border:1.5px solid #e8ecf2;
  color:#5a6478;
  padding:7px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (hover: hover){
  .pm2-cat:hover{border-color:#1890ff;color:#1890ff}
}
.pm2-cat.active{background:#1890ff;border-color:#1890ff;color:#fff}
.pm2-cat-count{
  background:rgba(0,0,0,.08);
  font-size:10px;
  padding:1px 6px;
  border-radius:10px;
  font-weight:800;
}
.pm2-cat.active .pm2-cat-count{background:rgba(255,255,255,.28)}

/* Sub-category pills — lighter visual weight than top-level tabs */
.pm2-subcats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px dashed #e8ecf2;
}
.pm2-subcats:empty{display:none !important}
.pm2-subcat{
  background:transparent;
  border:1px solid transparent;
  color:#888;
  padding:5px 10px;
  border-radius:14px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
@media (hover: hover){
  .pm2-subcat:hover{color:#1890ff;background:#f0f8ff}
}
.pm2-subcat.active{
  background:#f0f8ff;
  border-color:#c5e0ff;
  color:#1890ff;
  font-weight:700;
}
.pm2-subcat-count{
  background:rgba(0,0,0,.05);
  font-size:9px;
  padding:1px 5px;
  border-radius:8px;
  font-weight:700;
}
.pm2-subcat.active .pm2-subcat-count{background:rgba(24,144,255,.12);color:#1890ff}

/* Grid wrapper — THE SCROLL CONTAINER. Simple, no flex, no nested scrollers. */
.pm2-grid-wrap{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Explicit min-height:0 so the 1fr grid row actually allows overflow */
  min-height:0;
  /* Allow iOS vertical touch scroll */
  touch-action:pan-y;
}

/* Product grid layout */
.pm2-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  padding:2px 2px 10px;
  align-content:start;
}

/* Product card */
.pm2-card{
  position:relative;
  border:2px solid #e8e8e8;
  border-radius:14px;
  background:#fff;
  padding:14px;
  cursor:pointer;
  transition:all .18s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-family:inherit;
  align-self:start;
}
.pm2-card:hover{
  /* Placeholder — actual hover styling is inside the @media (hover: hover) 
     block below so mobile touch-scroll can't leave a stuck highlight. */
}
@media (hover: hover){
  .pm2-card:hover{
    border-color:#1890ff;
    box-shadow:0 6px 18px rgba(24,144,255,.12);
    transform:translateY(-2px);
  }
}
.pm2-card.active{
  border-color:#1890ff;
  background:#f0f8ff;
  box-shadow:0 0 0 3px rgba(24,144,255,.12);
}
.pm2-card.coming-soon{cursor:not-allowed;opacity:.72}
@media (hover: hover){
  .pm2-card.coming-soon:hover{transform:none;box-shadow:none;border-color:#e8e8e8}
}
.pm2-card-img{
  width:100%;height:110px;
  object-fit:contain;
  display:block;
  border-radius:8px;
  background:#fafbfd;
}
.pm2-card-name{
  font-size:12px;
  font-weight:800;
  color:#1a1a1a;
  line-height:1.3;
  min-height:32px;
}
.pm2-card-meta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:auto;
}
.pm2-price{font-size:12px;font-weight:800;color:#1890ff}
.pm2-price-soon{color:#888}
.pm2-sep{color:#ccc;font-weight:800}
.pm2-colors{font-size:11px;color:#888;font-weight:600}
.pm2-badge{
  position:absolute;
  top:8px;right:8px;z-index:2;
  background:linear-gradient(135deg,#f39c12,#e67e22);
  color:#fff;
  font-size:9px;font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(243,156,18,.3);
}
.pm2-empty{
  grid-column:1/-1;
  text-align:center;
  padding:40px 16px;
  color:#aaa;
  font-size:13px;
}

/* ==================== MOBILE ==================== */
@media(max-width:767px){
  .pm2-box{
    top:0;
    transform:translateX(-50%);
    left:50%;
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    border-radius:0;
    padding:16px;
    /* Re-declare grid for mobile */
    grid-template-rows:auto auto auto auto 1fr;
  }
  .pm2-head{margin-bottom:10px;padding-bottom:10px}
  .pm2-title{font-size:17px}
  .pm2-sub{font-size:11px}
  .pm2-search{margin-bottom:10px}
  /* 16px font-size prevents iOS auto-zoom on input focus */
  .pm2-search-input{font-size:16px;padding:11px 40px 11px 40px}
  .pm2-search-input::placeholder{font-size:13px}
  .pm2-cats{
    gap:5px;
    margin-bottom:10px;
    /* Allow horizontal scroll within the category strip */
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    touch-action:pan-x; /* horizontal scroll, doesn't hijack vertical */
  }
  .pm2-cat{padding:6px 11px;font-size:11px;flex-shrink:0;white-space:nowrap}
  .pm2-cat-count{font-size:9px;padding:1px 5px}
  .pm2-subcats{
    gap:4px;
    margin-bottom:10px;
    padding-bottom:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }
  .pm2-subcat{
    padding:4px 9px;
    font-size:10px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .pm2-subcat-count{font-size:8px;padding:1px 4px}
  /* Grid: 2-column mobile layout */
  .pm2-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:2px 2px 20px;
  }
  .pm2-card{padding:10px}
  .pm2-card-img{height:84px}
  .pm2-card-name{font-size:11px;min-height:28px}
  .pm2-price{font-size:11px}
  .pm2-colors{font-size:10px}
  .pm2-badge{font-size:8px;padding:2px 6px;top:6px;right:6px}
}


/* ========================================================================
   MULTI-COLOR ORDERING (Step 2) — Message B
   
   Styling goals:
   - Single-color case: card looks IDENTICAL to original single-color view
     (no visual overhead for the 80% use case)
   - Multi-color case: each color gets its own subtly-divided section with 
     a header (color dot + name + count + remove) and size grid below
   - "Add Another Color" button is always visible at the bottom
   ======================================================================== */

/* One section per active color */
.dl-mc-section{
  padding:0;
  margin:0;
  /* Single-color view: no visible borders but still shows header */
}
/* Single-color: just add a little breathing room under the header */
.dl-sz-grid:not(.multi-color) .dl-mc-section-hd{
  margin-bottom:10px;
}
/* When multi-color is active, separate each section with borders + padding */
.dl-sz-grid.multi-color .dl-mc-section{
  border:1.5px solid #e8ecf2;
  border-radius:12px;
  padding:12px 14px 14px;
  margin-bottom:12px;
  background:#fafbfd;
}

/* Section header: color dot + name + count + remove */
.dl-mc-section-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  /* Header always visible (even for single color) so user sees which color they're ordering */
}
.dl-mc-section-hd-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.dl-mc-section-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dl-mc-dot{
  width:16px;height:16px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  flex-shrink:0;
}
.dl-mc-name{
  font-size:13px;
  font-weight:800;
  color:#1a1a1a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dl-mc-count{
  font-size:11px;
  font-weight:700;
  color:#888;
  background:#fff;
  padding:3px 8px;
  border-radius:10px;
  border:1px solid #e8ecf2;
}
.dl-mc-remove{
  width:24px;height:24px;
  border:none;background:transparent;
  color:#bbb;font-size:13px;
  cursor:pointer;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-family:inherit;line-height:1;padding:0;
}
.dl-mc-remove:hover{background:#fff1f0;color:#ff4d4f}

/* Sizes container (just the size items) */
.dl-mc-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* "+ Add Another Color" button */
.dl-mc-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  padding:11px 14px;
  margin-top:10px;
  background:#fff;
  border:1.5px dashed #c5d4e3;
  border-radius:10px;
  color:#1890ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.dl-mc-add-btn:hover{
  background:#f0f8ff;
  border-color:#1890ff;
  border-style:solid;
}
.dl-mc-add-btn svg{flex-shrink:0}

/* ========================================================================
   "Add Another Color" popup
   ======================================================================== */
.dl-add-color-pop{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  z-index:700;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.dl-add-color-pop.open{display:flex;animation:dlFadeIn .15s ease}
.dl-add-color-pop-inner{
  background:#fff;
  border-radius:16px;
  padding:22px 22px 18px;
  width:100%;
  max-width:380px;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:dlSlideUp .22s cubic-bezier(.4,0,.2,1);
}
.dl-add-color-pop-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid #f0f0f0;
}
.dl-add-color-pop-title{
  font-size:15px;font-weight:800;color:#1a1a1a;
}
.dl-add-color-pop-close{
  width:30px;height:30px;
  background:transparent;border:none;
  color:#999;font-size:15px;cursor:pointer;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  transition:all .15s;padding:0;line-height:1;
}
.dl-add-color-pop-close:hover{background:#f5f5f5;color:#1a1a1a}
.dl-add-color-pop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px;
}
.dl-add-color-chip{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:#fafbfd;
  border:1.5px solid #e8ecf2;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:#1a1a1a;
  text-align:left;
}
.dl-add-color-chip:hover{border-color:#1890ff;background:#fff}
.dl-add-color-chip-dot{
  width:14px;height:14px;border-radius:50%;
  flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.dl-add-color-chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-add-color-pop-empty{
  text-align:center;color:#888;font-size:12px;
  padding:24px 12px;grid-column:1/-1;
}

/* ========================================================================
   Multi-color preview dots (above mockup in Step 1)
   Only visible when 2+ colors have quantities
   ======================================================================== */
/* Legacy mockup preview strip — kept hidden; replaced by in-panel preview */
.dl-mc-preview{display:none !important}
.dl-mc-preview-lbl{
  font-size:10px;
  font-weight:800;
  color:#888;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-right:4px;
}
.dl-mc-preview-dot{
  width:20px;height:20px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  transition:all .15s;
  position:relative;
}
.dl-mc-preview-dot:hover{transform:scale(1.1)}
.dl-mc-preview-dot.active{
  border-color:#1890ff;
  box-shadow:0 0 0 1px rgba(24,144,255,.2),0 2px 6px rgba(24,144,255,.2);
  transform:scale(1.15);
}

/* Mobile: tighter spacing */
@media(max-width:767px){
  .dl-sz-grid.multi-color .dl-mc-section{
    padding:10px 12px 12px;
    margin-bottom:10px;
  }
  .dl-mc-section-hd{margin-bottom:6px}
  .dl-mc-name{font-size:12px}
  .dl-mc-count{font-size:10px;padding:2px 6px}
  .dl-mc-add-btn{font-size:12px;padding:10px 12px}
  .dl-add-color-pop-inner{padding:18px 16px 14px;max-width:96%}
  .dl-add-color-pop-grid{grid-template-columns:repeat(2,1fr)}
  .dl-mc-preview{padding:6px 10px;margin-bottom:6px}
  .dl-mc-preview-dot{width:18px;height:18px}
  /* Mobile: keep sizes on one row inside each color section */
  .dl-sz-grid.multi-color .dl-mc-sizes{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:flex-start !important;
  }
  .dl-sz-grid.multi-color .dl-mc-sizes .dl-sz-item{
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    flex:0 0 auto !important;
  }
  .dl-sz-grid.multi-color .dl-mc-sizes .dl-sz-inp{
    width:44px !important;height:36px !important;
    font-size:14px !important;
  }
  .dl-sz-grid.multi-color .dl-mc-sizes .dl-sz-tag{
    font-size:10px !important;color:#888 !important;
  }
}

/* Desktop Step 2: overrides to work with the existing sticky grid layout */
@media(min-width:768px){
  /* Multi-color mode: stack sections vertically; sizes inside each section 
     use a compact flex row (not the big 3-col grid used in single-color mode).
     This keeps sizes on ONE ROW and the color section height smaller. */
  body.dl-step-2 .dl-sz-grid.multi-color{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  body.dl-step-2 .dl-sz-grid.multi-color .dl-mc-sizes{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    grid-template-columns:none !important;
  }
  /* Also override the per-item padding to use compact style inside multi-color sections */
  body.dl-step-2 .dl-sz-grid.multi-color .dl-mc-section .dl-sz-item{
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    flex-direction:column !important;
    gap:3px !important;
    align-items:center !important;
  }
  body.dl-step-2 .dl-sz-grid.multi-color .dl-mc-section .dl-sz-tag{
    font-size:11px !important;font-weight:700 !important;color:#888 !important;
  }
  body.dl-step-2 .dl-sz-grid.multi-color .dl-mc-section .dl-sz-inp{
    width:50px !important;height:36px !important;
    font-size:14px !important;padding:4px 6px !important;
  }
  
  /* ============================================================
     FIX 1 — Scroll fix for many colors
     The Step 2 card needs to be scrollable when multiple color sections 
     stack beyond the viewport height
     ============================================================ */
  body.dl-step-2 .dl-pg2 > .dl-card{
    max-height:calc(100vh - 140px) !important;
    overflow-y:auto !important;
  }
}

/* Mobile Step 3 — scroll rev content when many colors to prevent page overflow */
@media(max-width:767px){
  body.dl-step-3 #dlRevContent{
    max-height:50vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* ========================================================================
   MOBILE FIX #2 — Size input font 16px (prevents iOS auto-zoom)
   Also add explicit webkit-text-size-adjust to keep zoom disabled
   ======================================================================== */
@media(max-width:767px){
  /* Multi-color sizes: bump inputs to 16px so iOS won't auto-zoom on focus */
  .dl-sz-grid.multi-color .dl-mc-sizes .dl-sz-inp{
    font-size:16px !important;
    -webkit-text-size-adjust:100% !important;
  }
  /* Also apply to non-multi-color mode for consistency */
  .dl-sz-inp{
    font-size:16px !important;
    -webkit-text-size-adjust:100% !important;
  }
}

/* ========================================================================
   MOBILE FIX #1 — Multi-select color sheet (mobile)
   ======================================================================== */
.dl-sheet-swatches{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.dl-sheet-swatch{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px;
  border:none;background:transparent;cursor:pointer;
  font-family:inherit;
  border-radius:8px;
  transition:all .15s;
}
.dl-sheet-swatch-dot{
  position:relative;
  width:38px;height:38px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.dl-sheet-swatch.active .dl-sheet-swatch-dot{
  box-shadow:0 0 0 2px rgba(24,144,255,.35);
}
.dl-sheet-swatch.current .dl-sheet-swatch-dot{
  border-color:#1890ff;
  box-shadow:0 0 0 3px rgba(24,144,255,.4);
}
.dl-sheet-swatch-check{
  opacity:0;
  position:absolute;
  top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:rgba(24,144,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:opacity .15s;
}
.dl-sheet-swatch.active .dl-sheet-swatch-check{opacity:1}
.dl-sheet-swatch-name{
  font-size:10px;font-weight:700;color:#555;
  text-align:center;
  line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dl-sheet-swatch.active .dl-sheet-swatch-name{color:#1a1a1a}

/* Mobile preview dots — vertical list inside sheet */
.dl-sheet-preview-dot{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:#fafbfd;
  border:1.5px solid #e8ecf2;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  width:100%;
  transition:all .15s;
}
.dl-sheet-preview-dot:hover{border-color:#1890ff}
.dl-sheet-preview-dot.active{
  border-color:#1890ff;background:#f0f8ff;
  box-shadow:0 0 0 2px rgba(24,144,255,.12);
}

/* ========================================================================
   MOBILE FIX #3 — Step 3 color accordion
   ======================================================================== */
.dl-rev-acc{
  border:1px solid #e8ecf2;
  border-radius:10px;
  margin-bottom:8px;
  background:#fff;
  overflow:hidden;
}
.dl-rev-acc-hd{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:12px 14px;
  background:transparent;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  text-align:left;
  transition:background .15s;
}
.dl-rev-acc-hd:hover{background:#fafbfd}
.dl-rev-acc-hd-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.dl-rev-acc-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dl-rev-acc-dot{
  width:16px;height:16px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  flex-shrink:0;
}
.dl-rev-acc-name{font-weight:800;color:#1a1a1a}
.dl-rev-acc-summary{
  font-size:11px;color:#888;font-weight:700;
}
.dl-rev-acc-chev{
  color:#bbb;
  transition:transform .2s;
  flex-shrink:0;
}
.dl-rev-acc.open .dl-rev-acc-chev{
  transform:rotate(-180deg);
  color:#1890ff;
}
.dl-rev-acc-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  background:#fafbfd;
  border-top:1px solid transparent;
}
.dl-rev-acc.open .dl-rev-acc-body{
  max-height:600px; /* generous cap; enough for many sizes */
  border-top-color:#e8ecf2;
}
.dl-rev-acc-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  padding:9px 14px;
  font-size:12px;
  border-bottom:1px solid #f0f0f0;
}
.dl-rev-acc-row:last-child{border-bottom:none}
.dl-rev-acc-sz{font-weight:700;color:#1a1a1a}
.dl-rev-acc-qty{color:#888;font-weight:700;text-align:right;min-width:28px}
.dl-rev-acc-pr{color:#1890ff;font-weight:800;text-align:right;min-width:60px}


/* ========================================================================
   FIX #1 — Remove the grey gap above the mini-header on mobile.
   Root cause (identified via inspector): Horizon theme's 
   .section-content-wrapper sets --padding-block-start: max(20px, ...) 
   which creates a 20-40px padding above the Design Lab content.
   Fix: override the custom property AND padding-block-start directly.
   ======================================================================== */
@media(max-width:767px){
  html{background:#fff !important;margin:0 !important;padding:0 !important}
  body{background:#fff !important;margin:0 !important}
  
  /* Target Horizon theme's section-content-wrapper specifically */
  .section-content-wrapper{
    --padding-block-start:0 !important;
    padding-block-start:0 !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }
  
  /* Also zero out common wrapper elements as defensive fallback */
  body > main,
  body > main > section,
  #MainContent,
  #MainContent > section,
  .shopify-section,
  .page-width,
  main[role="main"]{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  
  /* Mini-header sits flush at the very top */
  .dl-mini-header{margin-top:0 !important}
}

/* ========================================================================
   Mobile — keep mini-header AND stepbar STICKY at top on all steps 
   so they stay visible during typing, scrolling, and keyboard transitions.
   (Already sticky by default, this reinforces with stronger specificity.)
   ======================================================================== */
@media(max-width:767px){
  .dl-mini-header{
    position:sticky !important;
    top:0 !important;
    z-index:210 !important;
  }
  .dl-stepbar{
    position:sticky !important;
    top:57px !important; /* just below mini-header (~57px tall) */
    z-index:200 !important;
  }
}

/* ============================================================================
   EMPTY-STATE ACTION HINTS — over the mockup before any design is added
   ============================================================================ */
.dl-empty-hints {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* let the mockup show through where there are no buttons */
  animation: dlEmptyHintsFadeIn 0.4s ease;
}
@keyframes dlEmptyHintsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dl-empty-hints-inner {
  /* Positioned by JS based on current view's print zone:
       - front/back: centered vertically within the zone
       - left/right sleeve: 50% (centered on mockup, current behavior)
       - inside-tag: just below the zone */
  position: absolute;
  left: 50%;
  top: 50%; /* default — JS overrides per view */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(24,144,255,0.1);
  pointer-events: auto;
}
.dl-empty-hints-prompt {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.01em;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}
.dl-empty-hints-row {
  display: flex;
  gap: 12px;
}
.dl-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 86px;
  padding: 12px 8px;
  background: #fff;
  border: 1.5px solid #e8eaed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: #1f2937;
}
.dl-empty-hint:hover {
  border-color: #1890ff;
  background: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24,144,255,0.18);
}
.dl-empty-hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f8ff;
  color: #1890ff;
  transition: background 0.15s ease;
}
.dl-empty-hint:hover .dl-empty-hint-icon {
  background: #1890ff;
  color: #fff;
}
.dl-empty-hint-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* On smaller mockup areas (mobile), shrink buttons */
@media (max-width: 600px) {
  .dl-empty-hints-inner { gap: 8px; padding: 10px; }
  .dl-empty-hints-prompt { font-size: 11px; }
  .dl-empty-hints-row { gap: 8px; }
  .dl-empty-hint { width: 72px; padding: 10px 6px; gap: 4px; }
  .dl-empty-hint-icon { width: 34px; height: 34px; }
  .dl-empty-hint-icon svg { width: 18px; height: 18px; }
  .dl-empty-hint-label { font-size: 10px; }
}

/* ============================================================================
   TEXT PANEL — desktop override
   On desktop, .dl-ph3-pricecard > .dl-txt-panel is hidden via 
   `display:none !important`. Adding the .dl-txt-panel--open class with its
   own !important rule overrides that, so the panel actually shows when JS
   sets style.display='block'. JS removes both the class AND the inline style
   when closing the panel.
   ============================================================================ */
.dl-txt-panel.dl-txt-panel--open,
.dl-ph3-pricecard > .dl-txt-panel.dl-txt-panel--open {
  display: block !important;
}