/* ========================================
   NEBULOUS - Custom T-Shirt Designer
   ======================================== */
:root {
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    --bg: #0a0a0a;
    --bg-2: #111111;
    --bg-3: #161616;
    --bg-card: #141414;
    --bg-card-h: #1c1c1c;
    --bg-input: #101010;

    --text: #ffffff;
    --text-2: #d1d1d1;
    --text-3: #8a8a8a;

    --accent: #ffffff;
    --accent-soft: rgba(255,255,255,0.10);
    --brand-accent: #ffffff;
    --brand-accent-2: #bdbdbd;
    --brand-on-accent: #000000;
    --brand-gradient: linear-gradient(135deg, #ffffff, #bdbdbd);
    --invoice-open-bg: #1d4ed8;
    --invoice-open-text: #eff6ff;
    --invoice-open-border: rgba(29,78,216,.6);
    --invoice-due-bg: #f59e0b;
    --invoice-due-text: #111827;
    --invoice-due-border: rgba(245,158,11,.55);

    /* UI surfaces */
    --nav-bg: rgba(10,10,10,.72);
    --btn-bg: #ffffff;
    --btn-fg: #000000;
    --btn-bg-hover: #dcdcdc;
    --preview-bg: var(--bg-card);

    --grad: linear-gradient(135deg, #ffffff, #bdbdbd);

    --border: rgba(255,255,255,0.10);
    --border-h: rgba(255,255,255,0.18);

    --green: #e5e5e5;

    --r-sm: 8px;
    --r-md: 12px;
    --r-btn: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --ease: cubic-bezier(.4,0,.2,1);
    --section-bg: var(--bg-2);
    --orb-1-color: rgba(255,255,255,.55);
    --orb-2-color: rgba(189,189,189,.55);
    --orb-3-color: rgba(107,107,107,.55);
}




/* ── Theme: Light ── */
body.theme-light{
    --bg: #f6f6f6;
    --bg-2: #ededed;
    --bg-3: #e2e2e2;
    --bg-card: #ffffff;
    --bg-card-h: #f3f3f3;
    --bg-input: #f5f5f5;

    --text: #0b0b0b;
    --text-2: #3a3a3a;
    --text-3: #6a6a6a;

    --accent: #0b0b0b;
    --accent-soft: #e6e6e6;

    --grad: linear-gradient(135deg, #0b0b0b, #6b6b6b);

    --border: rgba(0,0,0,0.10);
    --border-h: rgba(0,0,0,0.18);

    /* UI surfaces */
    --nav-bg: rgba(255,255,255,.78);
    --btn-bg: #ffffff;
    --btn-fg: #000000;
    --btn-bg-hover: #f0f0f0;
    --preview-bg: #e9e9e9;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:15px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;letter-spacing:-.01em}
::selection{background:var(--accent-soft);color:var(--brand-on-accent)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:99px}
.hidden{display:none!important}

/* Utility */
.gradient-text{background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Ambient BG ── */
.ambient-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(140px);opacity:.06}
.orb-1{width:620px;height:620px;top:-220px;left:-120px;background:var(--orb-1-color)}
.orb-2{width:520px;height:520px;bottom:-180px;right:-120px;background:var(--orb-2-color)}
.orb-3{width:460px;height:460px;top:42%;left:52%;background:var(--orb-3-color)}
.cursor-glow{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.045) 0%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%)}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,.14);border-radius:50%;animation:floatP linear infinite}
@keyframes floatP{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 2rem;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:background .3s}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:3px;display:flex;align-items:center;gap:8px}
.logo-mark{background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.3rem}
.logo-mark.has-logo-image{background:none;-webkit-text-fill-color:initial;display:inline-flex;align-items:center;justify-content:center}
.logo-mark.has-logo-image img{display:block;max-width:28px;max-height:28px;object-fit:contain;border-radius:4px}
.nav-links{display:flex;gap:1.75rem}
.nav-link{color:var(--text-2);text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.3px;transition:color .3s;position:relative}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--brand-accent);border-radius:99px}
.nav-right{display:flex;align-items:center}
.nav-price-tag{font-size:.8rem;color:var(--text-2);background:var(--bg-card);border:1px solid var(--border);padding:6px 14px;border-radius:99px}
.nav-price-tag strong{color:var(--text);font-family:var(--font-heading)}

/* ── Hero ── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 2rem 60px;position:relative;overflow:hidden}
.hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.15);width:100%;height:100%;min-width:177.78vh;min-height:56.25vw;pointer-events:none;filter:blur(var(--hero-video-blur,0px)) brightness(.84) saturate(.92)}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--hero-video-overlay-rgb,0,0,0),var(--hero-video-overlay-opacity,.55)),rgba(var(--hero-video-overlay-rgb,0,0,0),var(--hero-video-overlay-opacity-end,.3)))}
.hero-inner{position:relative;z-index:1;max-width:700px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--border-h);padding:7px 16px;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-2);margin-bottom:2rem}
.badge-dot{width:6px;height:6px;background:var(--brand-accent);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:var(--font-heading);margin-bottom:1.25rem}
.hero-title span{display:block;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.08;letter-spacing:-2px}
.hero-sub{color:var(--text-2);font-size:1.05rem;line-height:1.8;margin-bottom:2.5rem;max-width:500px;margin-left:auto;margin-right:auto}
.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:var(--r-btn);font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.hero-scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-3);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;z-index:1}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--text),transparent);animation:scrollPulse 2s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;height:40px}50%{opacity:1;height:50px}}

/* ── Section common ── */
.section-eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-2);margin-bottom:.75rem}
.section-title{font-family:var(--font-heading);font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:700;letter-spacing:-.5px;margin-bottom:1rem}

/* ── Designer Section ── */
.designer-section{padding:5rem 1.5rem;position:relative;z-index:1}
.designer-header{text-align:center;margin-bottom:2.2rem}
.designer-app{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:1.4rem;align-items:start}

/* Controls panel */
.controls-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.1rem;display:flex;flex-direction:column;gap:.95rem;position:sticky;top:80px}

/* Steps indicator */
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:.5rem}
.step{display:flex;align-items:center;gap:6px;opacity:.4;transition:opacity .3s}
.step.active{opacity:1}
.step.done{opacity:.7}
.step-num{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:.75rem;font-weight:600;transition:all .3s}
.step.active .step-num{border-color:var(--brand-accent);background:var(--accent-soft);color:var(--text)}
.step.done .step-num{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.03);color:var(--text-2)}
.step span{font-size:.75rem;font-weight:500;color:var(--text-2)}
.step-line{width:24px;height:1px;background:var(--border);margin:0 6px}

/* Upload zone */
.upload-zone{border:2px dashed rgba(255,255,255,.18);border-radius:var(--r-lg);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:all .3s var(--ease);background:rgba(255,255,255,.02)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--text-2);background:rgba(255,255,255,.04)}
.upload-icon{margin-bottom:1rem;color:var(--text-2);opacity:.6}
.upload-zone h3{font-family:var(--font-heading);font-size:1rem;font-weight:600;margin-bottom:.35rem}
.upload-zone p{color:var(--text-2);font-size:.85rem}
.upload-formats{display:inline-block;margin-top:.75rem;font-size:.7rem;color:var(--text-3);background:var(--bg);padding:4px 12px;border-radius:99px;border:1px solid var(--border)}

/* Upload preview */
.upload-preview{display:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;animation:fadeIn .3s}
.upload-preview.show{display:flex;align-items:center;gap:1rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.preview-img-wrap{position:relative;width:72px;height:72px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0;border:1px solid var(--border)}
.preview-img-wrap img{width:100%;height:100%;object-fit:cover}
.remove-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.remove-btn:hover{background:rgba(239,68,68,.8)}

/* Make the X button readable in light theme */
body.theme-light .remove-btn{background:rgba(0,0,0,.78);color:#fff;border:1px solid rgba(255,255,255,0.18)}
body.theme-light .remove-btn:hover{background:rgba(239,68,68,.85)}
.preview-info{display:flex;flex-direction:column;gap:2px}
.preview-name{font-size:.85rem;font-weight:500}
.preview-size{font-size:.75rem;color:var(--text-3)}

/* Upload list (multiple files) */
.upload-list{display:flex;flex-direction:column;gap:.75rem}
.upload-item{display:flex;align-items:center;gap:1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:.9rem;animation:fadeIn .25s;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.upload-item:hover{border-color:var(--border-h);transform:translateY(-1px)}
.upload-item.active{border-color:rgba(255,255,255,0.28);box-shadow:0 0 0 3px rgba(255,255,255,0.06)}
.upload-item .preview-img-wrap{width:64px;height:64px}
.upload-item .preview-name{font-size:.85rem;font-weight:600}
.upload-item .preview-size{font-size:.75rem;color:var(--text-3)}
.upload-item .remove-btn{position:static;top:auto;right:auto;width:30px;height:30px;background:rgba(0,0,0,.65);margin-left:auto}

/* Light theme: clearer selection + a touch more depth */
body.theme-light .upload-item{background:#ffffff;border-color:rgba(0,0,0,0.10)}
body.theme-light .upload-item:hover{border-color:rgba(0,0,0,0.20)}
body.theme-light .upload-item.active{border-color:rgba(0,0,0,0.35);box-shadow:0 10px 26px rgba(0,0,0,0.12), 0 0 0 3px rgba(0,0,0,0.06)}
body.theme-light .upload-item .preview-size{color:rgba(0,0,0,0.55)}
body.theme-light .upload-item .remove-btn{background:rgba(0,0,0,.82)}

/* Active design label */
.active-design{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:.6rem .75rem;font-size:.82rem;color:var(--text-2)}
.active-design strong{color:var(--text)}
.active-product-badge{display:flex;align-items:center;gap:.65rem;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:.55rem .65rem}
.active-product-badge .apb-thumb{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--bg-2)}
.active-product-badge .apb-copy{display:flex;flex-direction:column;gap:2px;text-align:left}
.active-product-badge .apb-label{font-size:.68rem;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3)}
.active-product-badge .apb-name{font-size:.86rem;font-weight:600;color:var(--text)}
.step2-layer-tools{border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:.55rem .65rem;display:flex;flex-direction:column;gap:.5rem}
.step2-layer-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.step2-layer-head strong{font-size:.78rem;color:var(--text)}
.btn-mini{padding:7px 9px;font-size:.72rem}
.step2-layer-list{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:2px}
.step2-layer-list .muted{font-size:.74rem;color:var(--text-3)}
.step2-layer-list::-webkit-scrollbar{height:6px}
.step2-layer-list::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:99px}
.s2-layer-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .4rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-2);color:var(--text-2);font-size:.74rem;cursor:pointer;white-space:nowrap}
.s2-layer-chip .thumb{width:30px;height:30px;border-radius:7px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;background:var(--bg-card)}
.s2-layer-chip.active{border-color:color-mix(in srgb, var(--brand-accent) 55%, var(--border));background:color-mix(in srgb, var(--bg-2) 65%, var(--brand-accent) 35%);color:var(--text)}
.s2-layer-chip .x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.16);font-size:.72rem;line-height:1}

/* Control groups */
.control-group{display:flex;flex-direction:column;gap:.65rem}
.control-label{font-size:.75rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;justify-content:space-between}
.range-val{font-family:var(--font-heading);color:var(--text-2);font-weight:700;text-transform:none;letter-spacing:0}

/* Color swatches */
.color-options{display:flex;gap:8px;flex-wrap:wrap}
.color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s;outline:none;position:relative}
.color-swatch:hover{transform:scale(1.1)}
.color-swatch.active{border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--accent-soft)}
.color-swatch.is-light-swatch{border:1px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.color-swatch.is-light-swatch.active{border-color:#101010;box-shadow:0 0 0 3px rgba(0,0,0,.16)}
body.theme-light .color-swatch.is-light-swatch{border:1px solid rgba(0,0,0,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.18)}
body.theme-light .color-swatch.is-light-swatch.active{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.24)}
.color-swatch[data-color="#f2f2f2"]{border:1px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.color-swatch[data-color="#f2f2f2"].active{border-color:#101010;box-shadow:0 0 0 3px rgba(0,0,0,.16)}
body.theme-light .color-swatch[data-color="#f2f2f2"]{border:1px solid rgba(0,0,0,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.18)}
body.theme-light .color-swatch[data-color="#f2f2f2"].active{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.24)}
.color-name{font-size:.75rem;color:var(--text-3)}

/* Position grid */
.position-grid{display:flex;gap:6px}
.pos-btn{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pos-btn:hover{border-color:var(--border-h);color:var(--text-2)}
.pos-btn.active{border-color:var(--text-2);color:var(--text-2);background:rgba(255,255,255,.04)}

/* Range input */
.range-input{-webkit-appearance:none;width:100%;height:4px;border-radius:99px;background:var(--border);outline:none;cursor:pointer}
.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text);border:3px solid var(--bg-card);cursor:pointer;box-shadow:0 0 12px rgba(255,255,255,.15)}

/* Size buttons */
.sizes{display:flex;gap:6px;flex-wrap:wrap}
.size-btn{height:40px;min-width:44px;padding:0 12px;border:1px solid var(--border);background:var(--bg);color:var(--text-2);border-radius:var(--r-sm);font-size:.82rem;font-weight:600;font-family:var(--font-heading);cursor:pointer;transition:all .2s}
.size-btn:hover{border-color:var(--border-h);color:var(--text)}
.size-btn.active{border-color:var(--brand-accent);background:var(--accent-soft);color:var(--text);box-shadow:0 0 16px var(--accent-soft)}
.size-meta{margin-top:.45rem;font-size:.68rem;color:var(--text-3);line-height:1.35}

/* Quantity */
.qty-control{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;width:fit-content}
.qty-btn{width:40px;height:40px;background:var(--bg);border:none;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.qty-btn:hover{background:var(--bg-card-h);color:var(--text)}
.qty-value{width:48px;text-align:center;font-family:var(--font-heading);font-weight:600;font-size:1rem;background:var(--bg);color:var(--text)}

/* Panel nav */
.panel-nav{display:flex;gap:.75rem;margin-top:.5rem}
.btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:var(--r-btn);font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s var(--ease);font-family:var(--font-body)}
.btn-primary{padding:12px 16px;font-size:.84rem}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.45);background:var(--btn-bg-hover)}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.3)}
.btn-secondary{display:flex;align-items:center;gap:6px;padding:14px 18px;background:var(--bg);border:1px solid var(--border);color:var(--text-2);border-radius:var(--r-btn);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;font-family:var(--font-body)}
.btn-secondary{padding:12px 14px;font-size:.8rem}
.btn-secondary:hover{border-color:var(--border-h);color:var(--text)}

/* Small utility button (reset) */
.control-actions{display:flex;justify-content:flex-end}
.btn-tertiary{padding:10px 12px;border-radius:var(--r-btn);border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-tertiary:hover{border-color:var(--border-h);color:var(--text);transform:translateY(-1px)}
body.theme-light .btn-tertiary{border-color:rgba(0,0,0,0.14);color:rgba(0,0,0,0.70)}
body.theme-light .btn-tertiary:hover{border-color:rgba(0,0,0,0.28);color:#000}

/* ── Order Panel ── */
.order-summary{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:.95rem}
.order-summary h3{font-family:var(--font-heading);font-size:.95rem;font-weight:600;margin-bottom:1rem}
.order-line{display:flex;justify-content:space-between;align-items:center;padding:.42rem 0;font-size:.8rem;color:var(--text-2)}
.order-line.total{color:var(--text);font-weight:600;font-size:.94rem;padding:.62rem 0 0}
.order-line.total span:last-child{font-family:var(--font-heading);font-size:1.05rem;background:var(--text);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.order-divider{height:1px;background:var(--border);margin:.25rem 0}
.free-tag{color:var(--green);font-weight:600;font-size:.8rem}

/* Order form */
.order-form{display:flex;flex-direction:column;gap:.85rem;margin-top:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-field{display:flex;flex-direction:column;gap:4px}
.form-field label{font-size:.7rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.form-field input{padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:.85rem;font-family:var(--font-body);outline:none;transition:border-color .2s}
.form-field input::placeholder{color:var(--text-3)}
.form-field input:focus{border-color:var(--text-2)}
.remarks-textarea{padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:.85rem;font-family:var(--font-body);outline:none;transition:border-color .2s;resize:vertical;min-height:90px}
.remarks-textarea::placeholder{color:var(--text-3)}
.remarks-textarea:focus{border-color:var(--text-2)}

/* ── 3D Preview Panel ── */
.preview-panel{position:sticky;top:80px}
.preview-canvas{position:relative;width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;background:var(--preview-bg);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.preview-canvas:active{cursor:grabbing}
.canvas-glow{position:absolute;width:60%;height:60%;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);border-radius:50%;filter:blur(40px);animation:glowP 5s ease-in-out infinite}
@keyframes glowP{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.7}}
.tshirt-3d{width:74%;height:74%;transition:transform .08s ease-out;animation:floatS 6s ease-in-out infinite}
@keyframes floatS{0%,100%{transform:translateY(0)}25%{transform:translateY(-8px) rotateY(1deg)}50%{transform:translateY(-4px)}75%{transform:translateY(-10px) rotateY(-1deg)}}
.tshirt-svg{width:100%;height:100%;filter:drop-shadow(0 20px 50px rgba(0,0,0,.4))}
.canvas-hint{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;color:var(--text-3);font-size:.7rem;opacity:.5;animation:fadeHint 3s ease infinite}
@keyframes fadeHint{0%,100%{opacity:.5}50%{opacity:.2}}
.canvas-hint.hidden{opacity:0;pointer-events:none}

/* ── How Section ── */
.how-section{padding:6rem 2rem;background:var(--section-bg)}
.how-inner{max-width:1000px;margin:0 auto;text-align:center}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.how-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2rem 1.5rem;text-align:center;transition:all .3s var(--ease);position:relative;overflow:hidden}
.how-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--text);opacity:0;transition:opacity .3s}
.how-card:hover{transform:translateY(-4px);border-color:var(--border-h)}
.how-card:hover::before{opacity:1}
.how-number{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;background:var(--text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:.15;position:absolute;top:.75rem;right:1rem}
.how-icon{width:56px;height:56px;border-radius:var(--r-md);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:var(--text-2)}
.how-card h3{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;margin-bottom:.5rem}
.how-card p{color:var(--text-2);font-size:.85rem;line-height:1.7}

/* ── Features ── */
.features-section{padding:4rem 2rem}
.features-inner{max-width:1000px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feature-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-card);transition:all .3s var(--ease)}
.feature-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.feature-card svg{color:var(--text-2);flex-shrink:0;margin-top:2px}
.feature-card h4{font-family:var(--font-heading);font-size:.9rem;font-weight:600;margin-bottom:.25rem}
.feature-card p{font-size:.8rem;color:var(--text-2);line-height:1.6}

/* ── Reviews ── */
.reviews-section{padding:6rem 2rem;background:var(--section-bg)}
.reviews-inner{max-width:1100px;margin:0 auto;text-align:center}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;text-align:left}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;transition:all .3s var(--ease)}
.review-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.review-stars{color:#fbbf24;font-size:.85rem;letter-spacing:2px;margin-bottom:.75rem}
.review-card>p{color:var(--text-2);font-size:.9rem;line-height:1.7;margin-bottom:1.25rem;font-style:italic}
.review-author{display:flex;align-items:center;gap:10px}
.author-avatar{width:36px;height:36px;border-radius:50%;background:var(--text);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#000}
.review-author strong{display:block;font-size:.85rem}
.review-author span{font-size:.7rem;color:var(--text-3)}

/* ── Footer ── */
.footer{
    padding:4.2rem 2rem 2rem;
    border-top:1px solid var(--border);
    background:
      radial-gradient(900px 260px at 0% -8%, rgba(255,255,255,.08), transparent 60%),
      radial-gradient(760px 220px at 100% -10%, rgba(255,255,255,.05), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}
.footer-inner{max-width:1140px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;gap:3rem;margin-bottom:2.1rem}
.footer-brand{font-family:var(--font-heading);font-size:1.02rem;font-weight:700;letter-spacing:3px}
.footer-brand p{font-family:var(--font-body);font-size:.82rem;font-weight:400;color:var(--text-3);letter-spacing:0;margin-top:.55rem;max-width:340px}
.footer-kicker{
    display:inline-flex;align-items:center;gap:.45rem;
    font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;
    color:var(--text-2);padding:.3rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-card);margin-bottom:.8rem
}
.footer-cols{display:flex;gap:3rem}
.footer-cols div{display:flex;flex-direction:column;gap:.52rem}
.footer-cols h5{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:.25rem}
.footer-cols a{color:var(--text-2);text-decoration:none;font-size:.82rem;transition:color .2s}
.footer-cols a:hover{color:var(--text)}
.footer-bottom{padding-top:1.35rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.footer-bottom p{color:var(--text-3);font-size:.75rem}
.footer-meta-links{display:flex;gap:.75rem;flex-wrap:wrap}
.footer-meta-links a{color:var(--text-3);font-size:.75rem;text-decoration:none}
.footer-meta-links a:hover{color:var(--text)}

/* ── Marketing pages ─────────────────────────────────────────────────────── */
.marketing-main{max-width:1120px;margin:0 auto;padding:120px 1.4rem 3.2rem}
.marketing-hero{
    border:1px solid var(--border);
    border-radius:20px;
    padding:2rem 1.6rem;
    background:
      radial-gradient(700px 260px at 0% 0%, rgba(255,255,255,.09), transparent 65%),
      linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    margin-bottom:1.2rem;
}
.marketing-hero h1{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 .6rem;letter-spacing:-.02em}
.marketing-hero p{color:var(--text-2);max-width:760px}
.marketing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin-top:1rem}
.marketing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:.95rem}
.marketing-card h3{margin:0 0 .35rem;font-size:.95rem;font-family:var(--font-heading)}
.marketing-card p{margin:0;color:var(--text-2);font-size:.84rem}
.marketing-content{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;margin-top:1rem}
.marketing-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1rem}
.marketing-panel h2{font-family:var(--font-heading);font-size:1.06rem;margin:0 0 .55rem}
.marketing-panel p{color:var(--text-2);font-size:.86rem}
.shop-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.shop-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:.8rem}
.shop-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--bg-2);border:1px solid var(--border)}
.shop-card h3{font-family:var(--font-heading);font-size:.95rem;margin:.55rem 0 .25rem}
.shop-card p{font-size:.8rem;color:var(--text-2);margin:0}
.shop-card .price{margin-top:.45rem;font-weight:700}
.cta-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}
.info-list{display:grid;gap:.45rem}
.info-list p{margin:0;padding:.65rem .7rem;border:1px solid var(--border);background:var(--bg-2);border-radius:10px;font-size:.84rem;color:var(--text-2)}

/* ── Toast ── */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg-card);border:1px solid rgba(255,255,255,.18);padding:12px 22px;border-radius:var(--r-md);display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:500;box-shadow:0 20px 60px rgba(0,0,0,.55);z-index:300;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);backdrop-filter:blur(20px)}
.toast svg{color:var(--green)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:400;display:none;align-items:center;justify-content:center;padding:2rem}
.modal-overlay.show{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:3rem;text-align:center;max-width:440px;width:100%;animation:modalIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-icon{color:var(--green);margin-bottom:1.5rem}
.modal h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;margin-bottom:.75rem}
.modal p{color:var(--text-2);font-size:.9rem;line-height:1.7;margin-bottom:1.5rem}
.modal-details{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem 1rem;font-size:.85rem;color:var(--text-2);margin-bottom:1.5rem}
.modal .btn-secondary{width:100%;margin-bottom:.75rem}
.modal-close{width:100%}

/* ── Designer live preview modal ── */
body.has-preview-modal{overflow:hidden}
.preview-modal-overlay{
    z-index:460;
    padding:1rem;
}
.product-preview-modal{
    width:min(96vw, 1180px);
    height:min(92vh, 860px);
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.42);
    animation:modalIn .28s var(--ease);
}
.product-preview-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    padding:.9rem 1rem;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.product-preview-head h3{
    margin:0;
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    letter-spacing:-.01em;
}
.product-preview-head-actions{
    display:flex;
    gap:.5rem;
    align-items:center;
}
.product-preview-head-actions .btn-secondary,
.product-preview-head-actions .btn-tertiary{
    width:auto;
    justify-content:center;
}
.btn-compact{
    min-height:38px;
    padding:.45rem .8rem;
    font-size:.78rem;
}
.product-preview-body{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:.9rem;
    padding:.9rem;
}
.preview-canvas-modal{
    height:100%;
    min-height:420px;
    aspect-ratio:auto;
    border-radius:14px;
}
.preview-tshirt-static{
    animation:none !important;
}
.preview-modal-layer[data-active="true"]{
    filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}
.product-preview-meta{
    display:grid;
    align-content:start;
    gap:.6rem;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.75rem;
}
.product-preview-meta span{
    display:flex;
    flex-direction:column;
    gap:.14rem;
    padding:.5rem .55rem;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg-card);
    color:var(--text);
    font-size:.8rem;
}
.product-preview-meta strong{
    font-size:.66rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-3);
    font-weight:700;
}
.product-preview-modal:fullscreen{
    width:100%;
    height:100%;
    max-width:none;
    border-radius:0;
    border:none;
}
.product-preview-modal:fullscreen .product-preview-body{
    padding:1.1rem;
}

/* ── Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(24px);transition:all .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:1024px){
    .designer-app{grid-template-columns:1fr;gap:1.5rem}
    .controls-panel{position:static;order:2}
    .preview-panel{position:static;order:1;max-width:550px;margin:0 auto;width:100%}
    .how-grid{grid-template-columns:1fr}
    .reviews-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
    .features-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
    .product-preview-modal{
        width:100%;
        height:min(94vh, 900px);
    }
    .product-preview-body{
        grid-template-columns:1fr;
        grid-template-rows:minmax(280px,1fr) auto;
    }
    .product-preview-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:640px){
    .nav{padding:0 1rem}
    .nav-links,.nav-price-tag{display:none}
    .hero{padding:100px 1rem 60px}
    .designer-section{padding:4rem 1rem}
    .how-section,.features-section,.reviews-section{padding:4rem 1rem}
    .footer-top{flex-direction:column;gap:2rem}
    .footer-cols{flex-wrap:wrap;gap:2rem}
    .marketing-content{grid-template-columns:1fr}
    .marketing-main{padding:112px 1rem 2.8rem}
    .form-row{grid-template-columns:1fr}
}
@media(max-width:560px){
    .product-preview-head{
        flex-direction:column;
        align-items:stretch;
    }
    .product-preview-head-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .product-preview-meta{
        grid-template-columns:1fr 1fr;
    }
}


/* ── Theme toggle ── */
.theme-toggle{
    display:flex;
    align-items:center;
    gap:0;
    margin-left:12px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
}
.theme-btn{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--text-2);
    font-size:.75rem;
    font-weight:600;
    padding:7px 12px;
    cursor:pointer;
    transition:background .2s,color .2s;
}
.theme-btn:hover{color:var(--text)}
.theme-btn.active{
    background:var(--btn-bg);
    color:var(--btn-fg);
}

/* ── Photoreal mockup preview ── */
.preview-canvas{
    background:var(--preview-bg);
}
.tshirt-mockup{
    position:relative;
    width:82%;
    height:82%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    isolation:isolate;
}
.mockup-base{
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(0 20px 50px rgba(0,0,0,.45));
    position:relative;
    z-index:1;
}

.shirt-tint-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:var(--shirt-tint-opacity, 0);
    background:var(--shirt-tint-color, transparent);
    mix-blend-mode:multiply;
    -webkit-mask-image:var(--mockup-mask-url);
    mask-image:var(--mockup-mask-url);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    transition:opacity .25s var(--ease), background-color .25s var(--ease);
}

/* Design overlay (canvas-based print) */
.layer-stack{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:4}
.design-canvas{
    position:absolute;
    left:50%;
    top:44%;
    width:28%;
    height:auto;
    transform:translate(-50%,-50%);
    pointer-events:none;
    user-select:none;
    opacity:1;
    /* helps white tees + subtle realism */
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}

/* Fallback img (kept but normally hidden) */
.design-overlay{display:none}

/* Placeholder */
.mockup-placeholder{
    position:absolute;
    left:50%;
    top:44%;
    width:28%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:.7;
    z-index:3;
}
.ph-box{
    width:100%;
    aspect-ratio:1/1;
    border:1px dashed var(--border-h);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:rgba(255,255,255,0.03);
}
body.theme-light .ph-box{background:rgba(0,0,0,0.03)}
.ph-icon{
    width:34px;height:34px;border-radius:10px;
    border:1px solid var(--border);
    position:relative;
}
.ph-icon:before{
    content:"";
    position:absolute;left:8px;top:8px;
    width:6px;height:6px;border-radius:50%;
    background:var(--text-3);
    opacity:.7;
}
.ph-icon:after{
    content:"";
    position:absolute;left:8px;bottom:8px;right:8px;height:10px;
    border-radius:6px;
    background:linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0));
    opacity:.25;
}
.ph-text{
    font-size:.72rem;
    color:var(--text-3);
    text-align:center;
    line-height:1.3;
    padding:0 10px;
}



/* ========================================
   v8 Alignment tweaks (controls column)
   ======================================== */
.steps{
    justify-content:space-between;
    gap:10px;
    margin-bottom:.95rem;
}
.step{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:1;
    text-align:center;
}
.step-line{
    width:auto;
    flex:0 0 28px;
    margin:0;
    align-self:center;
}

.controls-panel{
    gap:.95rem;
}

.active-design{
    padding:12px 16px;
    border-radius:12px;
}

.control-group{
    gap:10px;
}

.control-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    line-height:1.15;
}

.color-options,
.position-grid{
    justify-content:flex-start;
}

.product-selector{
    width:100%;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    color:var(--text);
    font:inherit;
    font-size:.9rem;
    padding:.7rem .8rem;
    outline:none;
}
.product-selector:focus{
    border-color:var(--text);
}
.product-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.product-card{
    border:1px solid var(--border);
    background:var(--bg);
    border-radius:12px;
    padding:.55rem;
    text-align:left;
    font:inherit;
    color:inherit;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:.45rem;
    min-height:112px;
    transition:border-color .2s,transform .2s,box-shadow .2s;
}
.product-card:hover{
    border-color:var(--border-h);
    transform:translateY(-1px);
}
.product-card.active{
    border-color:var(--brand-accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
.product-card .pc-media{
    height:54px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.product-card .pc-media img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.product-card .pc-name{
    font-size:.82rem;
    font-weight:700;
    line-height:1.2;
    color:var(--text);
}
.product-card .pc-meta{
    font-size:.72rem;
    color:var(--text-2);
    line-height:1.2;
}

.sizes{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:6px;
}

@media (max-width: 520px){
    .sizes{ grid-template-columns:repeat(3, 1fr); }
    .product-cards{ grid-template-columns:1fr; }
}

.qty-control{
    width:160px;
    justify-content:space-between;
}

.control-actions{
    display:flex;
    justify-content:stretch;
}

.btn-tertiary{
    width:100%;
    text-align:center;
    justify-content:center;
}


/* ========================================
   v9 Spacing & layout tweaks (panel 2 + order form)
   ======================================== */

/* More breathing room in "2 Aanpassen" panel */
#panelCustomize{
    display:flex;
    flex-direction:column;
    gap:10px;
}
#panelCustomize .active-design{margin-bottom:2px}
#panelCustomize .control-group{
    gap:8px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
}
#panelCustomize .control-group:last-of-type{
    border-bottom:none;
    padding-bottom:0;
}
#panelCustomize .color-name{margin-top:-6px}

/* Make position buttons wrap nicely with more spacing */
.position-grid{
    flex-wrap:wrap;
    gap:8px;
}
.pos-btn{width:40px;height:40px}

/* Sliders spacing */
.range-input{margin-top:6px}

/* Qty + reset side-by-side */
.qty-reset-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    align-items:stretch;
}
.qty-wrap{
    display:flex;
    align-items:center;
}
.qty-control{
    width:100%;
    max-width:none;
    justify-content:space-between;
}
.qty-value{width:52px}
.qty-reset-grid .btn-tertiary{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 10px;
}

/* More spacing in order form + better fit */
.order-form{
    gap:.75rem;
    margin-top:1rem;
}
.form-row{
    gap:.75rem;
}
.form-field{
    gap:6px;
}
.form-field input{
    padding:10px 12px;
}
.panel-nav{
    margin-top:.75rem;
}

.order-quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
    margin-top:.9rem;
}
.order-preview-actions{
    margin-top:1rem;
}
.order-preview-actions .btn-secondary{
    width:100%;
    justify-content:center;
}
@media (max-width: 520px){
    .order-quick-actions{grid-template-columns:1fr}
}

/* On small screens stack qty/reset */
@media (max-width: 520px){
    .qty-reset-grid{grid-template-columns:1fr}
    .qty-reset-grid .btn-tertiary{height:44px}
}


/* Step 3: Order fields under each other */
#panelOrder .form-row{grid-template-columns:1fr}

/* ========================================
   Sprint 4 - Stap 1: Mobile-first designer polish
   ======================================== */
@media (max-width: 700px){
    .designer-section{
        padding:3.25rem .85rem;
    }
    .designer-header{
        margin-bottom:1.15rem;
    }
    .designer-app{
        grid-template-columns:1fr;
        gap:.85rem;
    }

    .preview-panel{
        position:static;
        order:1;
        width:100%;
        max-width:none;
    }
    .preview-canvas{
        aspect-ratio:1/1;
        min-height:260px;
        max-height:360px;
        border-radius:16px;
    }
    .tshirt-mockup{
        width:90%;
        height:90%;
    }
    .canvas-hint{
        bottom:.8rem;
        font-size:.66rem;
        opacity:.38;
    }

    .controls-panel{
        order:2;
        position:static;
        top:auto;
        padding:1rem .9rem 1.2rem;
        border-radius:16px;
        gap:1rem;
    }
    .steps{
        justify-content:space-between;
        gap:.35rem;
        margin-bottom:.9rem;
    }
    .step{
        border:1px solid var(--border);
        border-radius:999px;
        padding:.25rem .45rem;
    }
    .step-line{
        display:none;
    }
    .step-num{
        width:24px;
        height:24px;
        font-size:.68rem;
    }
    .step span{
        font-size:.66rem;
        letter-spacing:.2px;
    }

    .upload-zone{
        padding:1.35rem .9rem;
        min-height:148px;
    }
    .upload-zone h3{
        font-size:.95rem;
    }
    .upload-zone p{
        font-size:.8rem;
    }
    .upload-formats{
        font-size:.66rem;
        margin-top:.55rem;
    }

    #panelCustomize{
        gap:12px;
    }
    #panelCustomize .control-group{
        gap:9px;
        padding-bottom:.7rem;
    }
    .control-label{
        font-size:.7rem;
        line-height:1.25;
    }
    .position-grid{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:.5rem;
    }
    .pos-btn{
        width:100%;
        min-height:46px;
    }
    .sizes{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:.45rem;
    }
    .size-btn{
        width:100%;
        min-height:44px;
        height:auto;
        padding:.5rem .25rem;
    }
    .range-input{
        height:6px;
    }
    .range-input::-webkit-slider-thumb{
        width:20px;
        height:20px;
    }
    .qty-control{
        min-height:46px;
    }
    .qty-btn{
        width:44px;
        height:44px;
    }
    .remarks-textarea{
        min-height:84px;
    }

    .panel-nav{
        position:sticky;
        bottom:calc(8px + env(safe-area-inset-bottom));
        z-index:15;
        margin-top:.45rem;
        padding:.5rem;
        border:1px solid var(--border);
        border-radius:14px;
        background:var(--bg-card);
        background:color-mix(in srgb, var(--bg-card) 84%, transparent);
        backdrop-filter:blur(8px);
    }
    .btn-primary,.btn-secondary{
        min-height:46px;
    }
}

/* ========================================
   Products Section (Homepage product picker)
   ======================================== */
.products-section{
    padding:6rem 2rem;
    position:relative;
    z-index:1;
    background:var(--section-bg);
    border-top:1px solid var(--border);
}
.products-inner{
    max-width:1200px;
    margin:0 auto;
    text-align:center;
}
.products-lead{
    color:var(--text-2);
    font-size:.95rem;
    margin-bottom:2.5rem;
    line-height:1.7;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}
.hp-products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:1.25rem;
    text-align:left;
}
.hp-product-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:0;
    overflow:hidden;
    cursor:pointer;
    transition:all .3s var(--ease);
    color:inherit;
    font:inherit;
    display:flex;
    flex-direction:column;
    width:100%;
}
.hp-product-card:hover{
    border-color:var(--border-h);
    transform:translateY(-5px);
    box-shadow:0 20px 56px rgba(0,0,0,.4);
}
.hp-pc-media{
    height:185px;
    background:var(--bg-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-bottom:1px solid var(--border);
    transition:background .3s;
}
.hp-product-card:hover .hp-pc-media{
    background:var(--bg-3);
}
.hp-pc-media img{
    max-width:78%;
    max-height:78%;
    object-fit:contain;
    transition:transform .4s var(--ease);
}
.hp-product-card:hover .hp-pc-media img{
    transform:scale(1.06);
}
.hp-pc-body{
    padding:1.15rem 1.25rem 1.25rem;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.45rem;
}
.hp-pc-name{
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
}
.hp-pc-desc{
    font-size:.8rem;
    color:var(--text-2);
    line-height:1.6;
    flex:1;
}
.hp-pc-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:.65rem;
    padding-top:.75rem;
    border-top:1px solid var(--border);
}
.hp-pc-price{
    font-size:.8rem;
    color:var(--text-2);
    font-weight:500;
}
.hp-pc-cta{
    font-size:.78rem;
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:4px;
    transition:gap .2s var(--ease);
}
.hp-product-card:hover .hp-pc-cta{
    gap:8px;
}

/* Skeleton loader */
.hp-product-skeleton{
    height:300px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    animation:skeletonPulse 1.6s ease-in-out infinite;
}
@keyframes skeletonPulse{
    0%,100%{opacity:1}
    50%{opacity:.45}
}

/* ========================================
   Drag-to-place design indicator
   ======================================== */
.designer-step-2 .design-canvas[data-active="true"]{
    box-shadow:0 0 0 2px rgba(255,255,255,.18);
    border-radius:6px;
}
body.theme-light.designer-step-2 .design-canvas[data-active="true"]{
    box-shadow:0 0 0 2px rgba(0,0,0,.16);
}

/* Drag hint badge on preview */
.design-drag-hint{
    position:absolute;
    top:1rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(10,10,10,.72);
    color:rgba(255,255,255,.88);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.3px;
    padding:5px 13px;
    border-radius:99px;
    backdrop-filter:blur(10px);
    white-space:nowrap;
    pointer-events:none;
    z-index:10;
    transition:opacity .4s;
    border:1px solid rgba(255,255,255,.1);
}
.design-drag-hint.hidden{
    opacity:0;
}
body.theme-light .design-drag-hint{
    background:rgba(0,0,0,.68);
}

/* Preview canvas: move cursor over active design */
.preview-canvas.can-drag-design{
    cursor:crosshair;
}
.preview-canvas.is-dragging-design{
    cursor:grabbing !important;
}

/* ========================================
   Premium UI refinements
   ======================================== */

/* Stronger step indicator progression */
.step.active .step-num{
    background:var(--text);
    color:var(--bg);
    border-color:var(--text);
}
.step.done .step-num{
    background:transparent;
    border-color:rgba(255,255,255,.25);
}
.step-line{
    background:linear-gradient(to right,rgba(255,255,255,.25),rgba(255,255,255,.08));
    height:1.5px;
}

/* Upload zone: more visual impact on hover */
.upload-zone{
    transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.upload-zone.dragover{
    border-color:var(--text);
    background:rgba(255,255,255,.06);
    transform:scale(1.01);
}
body.theme-light .upload-zone.dragover{
    background:rgba(0,0,0,.04);
}

/* Position buttons: show tooltip label */
.pos-btn{
    position:relative;
}
.pos-btn[title]:hover::after{
    content:attr(title);
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background:var(--bg-card);
    border:1px solid var(--border);
    color:var(--text-2);
    font-size:.65rem;
    font-weight:600;
    white-space:nowrap;
    padding:3px 8px;
    border-radius:6px;
    pointer-events:none;
    z-index:50;
}

/* Qty control: cleaner lines */
.qty-control{
    border-radius:var(--r-md);
}
.qty-btn{
    border-radius:0;
}
.qty-btn:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.qty-btn:last-child{border-radius:0 var(--r-md) var(--r-md) 0}

/* Order summary: tighter, more premium */
.order-summary h3{
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-2);
    font-weight:600;
}

/* Review section: add aggregate score */
.reviews-score{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:99px;
    padding:8px 20px;
    margin-bottom:2rem;
    font-size:.85rem;
}
.reviews-score-num{
    font-family:var(--font-heading);
    font-size:1.4rem;
    font-weight:700;
    color:var(--text);
}
.reviews-score-stars{
    color:#fbbf24;
    letter-spacing:1px;
}
.reviews-score-label{
    color:var(--text-2);
    font-size:.75rem;
}

/* How cards: scroll-in stagger */
.how-card:nth-child(1){transition-delay:.05s}
.how-card:nth-child(2){transition-delay:.15s}
.how-card:nth-child(3){transition-delay:.25s}

/* Responsive: products grid */
@media(max-width:640px){
    .hp-products-grid{grid-template-columns:1fr 1fr;gap:.85rem}
    .products-section{padding:4rem 1rem}
    .hp-pc-media{height:140px}
}
@media(max-width:400px){
    .hp-products-grid{grid-template-columns:1fr}
}