/* ========================================
   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: #fff9f2;
    --bg-2: #f7f2ea;
    --bg-3: #f0ebe3;
    --bg-card: #ffffff;
    --bg-card-h: #faf7f2;
    --bg-input: #faf7f2;

    --text: #0a0a0a;
    --text-2: #3d4450;
    --text-3: #6b7280;

    --accent: #ffaf51;
    --accent-soft: rgba(255, 175, 81, 0.18);
    --brand-accent: #ffaf51;
    --brand-accent-2: #e8983a;
    --brand-on-accent: #0a0a0a;
    --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(255, 249, 242, 0.88);
    --btn-bg: #ffaf51;
    --btn-fg: #0a0a0a;
    --btn-bg-hover: #e8983a;
    --preview-bg: var(--bg-card);
    --surface-glass: rgba(255,255,255,.065);
    --surface-glass-strong: rgba(255,255,255,.105);
    --focus-ring: rgba(255,255,255,.18);
    --shadow-soft: 0 18px 55px rgba(0,0,0,.30);
    --shadow-strong: 0 28px 85px rgba(0,0,0,.46);

    --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, 175, 81, 0.45);
    --orb-2-color: rgba(232, 152, 58, 0.35);
    --orb-3-color: rgba(255, 175, 81, 0.25);
}




/* ── 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;
    --surface-glass: rgba(255,255,255,.82);
    --surface-glass-strong: rgba(255,255,255,.94);
    --focus-ring: rgba(0,0,0,.12);
    --shadow-soft: 0 18px 45px rgba(15,23,42,.10);
    --shadow-strong: 0 28px 70px rgba(15,23,42,.16);
}
*,*::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}
h1,h2,h3,h4,h5,h6,.logo,.section-title,.page-title,.card-title{font-family:var(--font-heading)}
a{color:inherit}
button,input,select,textarea{font-family:var(--font-body)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px var(--focus-ring),0 0 0 1px color-mix(in srgb, var(--brand-accent) 42%, transparent);
}
::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-header-lead{
    color:var(--text-2);
    font-size:.88rem;
    line-height:1.6;
    max-width:520px;
    margin:.35rem auto 0;
}
.designer-workspace{
    max-width:1280px;
    margin:0 auto;
}
.designer-app{
    width:100%;
    display:grid;
    grid-template-columns:380px minmax(0,1fr);
    gap:1.4rem;
    align-items:start;
}
.designer-side{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    min-width:0;
    position:sticky;
    top:80px;
    align-self:start;
}
.designer-product-rail{
    width:100%;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:.85rem .9rem .95rem;
}
.designer-product-rail__label{
    display:block;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-3);
    margin-bottom:.65rem;
}
.designer-product-rail__list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem;
}

/* 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}

/* 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:1rem}
    .designer-side{position:static;order:2}
    .designer-product-rail__list{grid-template-columns:repeat(2,minmax(0,1fr))}
    .controls-panel{position:static}
    .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;
    }
    .designer-side{
        position:static;
        order:2;
    }
    .designer-product-rail__list{
        grid-template-columns:1fr;
    }

    .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{
        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;
}

.hp-product-card--rail{
    flex-direction:row;
    align-items:center;
    gap:.55rem;
    padding:.55rem .65rem;
    border-radius:var(--r-md);
    transform:none;
    box-shadow:none;
    width:100%;
    min-height:58px;
}
.hp-product-card--rail:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.hp-product-card--rail.active{
    border-color:var(--brand-accent, #ffaf51);
    background:rgba(255,175,81,.08);
    box-shadow:0 0 0 1px rgba(255,175,81,.22);
}
.hp-rail-thumb{
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    background:var(--bg-2);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
}
.hp-rail-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.hp-rail-copy{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.12rem;
    text-align:left;
}
.hp-rail-name{
    font-size:.74rem;
    font-weight:600;
    line-height:1.25;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hp-rail-price{
    font-size:.62rem;
    color:var(--text-3);
    white-space:nowrap;
}
.hp-product-skeleton--rail{
    height:58px;
    border-radius:var(--r-md);
}

/* 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}
}

/* ========================================
   3D-first product storefront
   ======================================== */
.storefront-page{
    background:#0b0d0f;
}
.storefront-page .nav{
    background:rgba(11,13,15,.76);
}
.storefront-hero{
    min-height:min(88vh, 900px);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    overflow:hidden;
    padding:clamp(88px, 10vh, 108px) clamp(1.25rem, 3vw, 2.5rem) clamp(3.5rem, 6vh, 5rem);
    isolation:isolate;
    background:
        radial-gradient(ellipse 55% 45% at 12% 18%, color-mix(in srgb, var(--brand-accent, #14b8a6) 14%, transparent), transparent 70%),
        radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--brand-accent, #14b8a6) 20%, transparent), transparent 38%),
        linear-gradient(128deg, var(--bg, #0b0d0f) 0%, color-mix(in srgb, var(--bg-2, #111918) 90%, var(--brand-accent, #14b8a6) 10%) 48%, var(--bg-3, #1a2420) 100%);
}
.storefront-hero::before{
    content:'';
    position:absolute;
    width:min(52vw, 640px);
    height:min(52vw, 640px);
    right:-8%;
    top:8%;
    border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--brand-accent, #14b8a6) 16%, transparent), transparent 68%);
    pointer-events:none;
    z-index:0;
    filter:blur(2px);
}
.storefront-hero::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:7rem;
    background:linear-gradient(to bottom, transparent, var(--bg));
    z-index:1;
    pointer-events:none;
}
.storefront-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:min(1440px, calc(100vw - 2.5rem));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, 0.92fr) minmax(380px, 1.18fr);
    gap:clamp(1.25rem, 3vw, 2.75rem);
    align-items:stretch;
}
.storefront-hero-3d-dock{
    position:relative;
    z-index:3;
    width:100%;
    max-width:min(1440px, calc(100vw - 2.5rem));
    margin:clamp(.35rem, 1.2vh, .85rem) auto 0;
    padding:0 clamp(1.25rem, 3vw, 2.5rem);
    display:flex;
    justify-content:center;
    pointer-events:none;
}
.storefront-hero-3d-dock[hidden]{
    display:none !important;
}
.storefront-hero-3d-dock-track{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    padding:.5rem .72rem;
    border-radius:1.35rem;
    border:1px solid color-mix(in srgb, #fff 16%, var(--border, rgba(255,255,255,.12)) 84%);
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 8%, var(--bg-card, rgba(15,23,42,.55)) 92%) 0%, color-mix(in srgb, var(--bg-card, rgba(15,23,42,.55)) 88%, transparent) 100%);
    backdrop-filter:blur(16px) saturate(1.15);
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--text, #0f172a) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
    overflow-x:auto;
    scrollbar-width:none;
    pointer-events:auto;
}
.storefront-hero-3d-dock-track::-webkit-scrollbar{
    display:none;
}
.storefront-hero-3d-dock-item{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:4.65rem;
    padding:.14rem;
    border:1px solid transparent;
    border-radius:1rem;
    background:transparent;
    cursor:pointer;
    transition:border-color .24s var(--ease), background .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.storefront-hero-3d-dock-item:hover{
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 28%, transparent);
    background:color-mix(in srgb, var(--bg-card, rgba(15,23,42,.55)) 82%, var(--brand-accent, #14b8a6) 18%);
    transform:translateY(-2px);
}
.storefront-hero-3d-dock-item.is-active{
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 58%, #fff 42%);
    background:color-mix(in srgb, var(--bg-card, rgba(15,23,42,.55)) 74%, var(--brand-accent, #14b8a6) 26%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand-accent, #14b8a6) 34%, transparent),
        0 10px 24px color-mix(in srgb, var(--brand-accent, #14b8a6) 18%, transparent);
    transform:translateY(-1px) scale(1.03);
}
.storefront-hero-3d-dock-name{
    display:block;
    max-width:100%;
    padding:0 .12rem;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    line-height:1.15;
    text-align:center;
    color:color-mix(in srgb, var(--text-2, #64748b) 88%, var(--text, #0f172a) 12%);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.storefront-hero-3d-dock-item.is-active .storefront-hero-3d-dock-name{
    color:color-mix(in srgb, var(--brand-accent, #14b8a6) 72%, var(--text, #0f172a) 28%);
}
.storefront-hero-3d-dock-item:focus-visible{
    outline:2px solid color-mix(in srgb, var(--brand-accent, #14b8a6) 72%, #fff);
    outline-offset:2px;
}
.storefront-hero-3d-dock-stage{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1;
    border-radius:.82rem;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--brand-accent, #14b8a6) 10%, transparent) 0%, transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--bg, #f8fafc) 94%) 0%, color-mix(in srgb, var(--bg-2, #eef2f6) 92%, var(--brand-accent, #14b8a6) 8%) 100%);
    border:1px solid color-mix(in srgb, #fff 22%, var(--border, rgba(15,23,42,.08)) 78%);
    box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
.storefront-hero-dock-canvas{
    position:absolute;
    inset:0;
    z-index:3;
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .32s var(--ease), visibility .32s var(--ease);
}
.storefront-hero-dock-poster{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    opacity:1;
    transition:opacity .32s var(--ease);
}
.storefront-hero-dock-loader,
.storefront-hero-dock-error{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    transition:opacity .24s var(--ease), visibility .24s var(--ease);
}
.storefront-hero-dock-loader{
    opacity:0;
    visibility:hidden;
    z-index:4;
}
.storefront-hero-dock-error{
    opacity:0;
    visibility:hidden;
    color:color-mix(in srgb, var(--text-2, #64748b) 70%, var(--text, #0f172a) 30%);
}
.storefront-hero-dock-loader-cube{
    width:18px;
    height:18px;
    position:relative;
    transform-style:preserve-3d;
    animation:heroDockCubeTurn 2s ease-in-out infinite;
}
.storefront-hero-dock-loader-cube i{
    position:absolute;
    inset:0;
    border:1px solid color-mix(in srgb, var(--brand-accent, #14b8a6) 58%, transparent);
    background:color-mix(in srgb, var(--brand-accent, #14b8a6) 14%, transparent);
    border-radius:2px;
}
.storefront-hero-dock-loader-cube i:nth-child(1){transform:rotateY(0deg) translateZ(9px)}
.storefront-hero-dock-loader-cube i:nth-child(2){transform:rotateY(90deg) translateZ(9px)}
.storefront-hero-dock-loader-cube i:nth-child(3){transform:rotateY(180deg) translateZ(9px)}
.storefront-hero-dock-loader-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(9px)}
.storefront-hero-dock-loader-cube i:nth-child(5){transform:rotateX(90deg) translateZ(9px)}
.storefront-hero-dock-loader-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(9px)}
@keyframes heroDockCubeTurn{
    0%,100%{transform:rotateX(-16deg) rotateY(0deg)}
    50%{transform:rotateX(-16deg) rotateY(180deg)}
}
.storefront-hero-3d-dock-stage.is-dock-3d-loading .storefront-hero-dock-loader{
    opacity:1;
    visibility:visible;
}
.storefront-hero-3d-dock-stage.is-dock-3d-live .storefront-hero-dock-canvas{
    opacity:1;
    visibility:visible;
}
.storefront-hero-3d-dock-stage.is-dock-3d-live .storefront-hero-dock-poster,
.storefront-hero-3d-dock-stage.is-dock-3d-live .storefront-hero-dock-loader,
.storefront-hero-3d-dock-stage.is-dock-3d-live .storefront-hero-dock-error{
    opacity:0;
    visibility:hidden;
}
.storefront-hero-3d-dock-stage.is-dock-3d-error .storefront-hero-dock-error{
    opacity:1;
    visibility:visible;
}
.storefront-hero-3d-dock-stage.is-dock-3d-error .storefront-hero-dock-loader{
    opacity:0;
    visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
    .storefront-hero-dock-loader-cube{
        animation:none;
        transform:rotateX(-16deg) rotateY(45deg);
    }
}
.storefront-hero-showcase{
    position:relative;
    width:100%;
    height:clamp(420px, min(68vh, 78dvh), 720px);
    min-height:clamp(420px, min(68vh, 78dvh), 720px);
    max-height:min(78dvh, 720px);
    align-self:center;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}
.hero-showcase-floor{
    position:absolute;
    left:50%;
    bottom:6%;
    z-index:2;
    width:min(88%, 520px);
    height:22%;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-accent, #14b8a6) 22%, transparent) 0%, transparent 74%);
    pointer-events:none;
    filter:blur(12px);
    opacity:.85;
}
.storefront-hero-stage{
    position:absolute;
    inset:0;
    z-index:1;
}
.storefront-hero-stage .storefront-media-layer--3d{
    inset:0;
}
.hero-showcase-vignette{
    display:none;
}
.hero-showcase-chrome{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    transition:opacity .35s var(--ease);
}
.hero-showcase-chrome[hidden]{
    display:none !important;
}
.hero-showcase-chrome-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    color:var(--text-2, rgba(255,255,255,.75));
    text-align:center;
}
.hero-showcase-chrome-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid color-mix(in srgb, var(--brand-accent, #14b8a6) 24%, transparent);
    background:color-mix(in srgb, var(--bg-card, #fff) 72%, transparent);
    color:var(--brand-accent, #14b8a6);
}
.hero-showcase-chrome[data-state="loading"] .hero-showcase-chrome-icon{
    animation:heroRotateHint 1.8s ease-in-out infinite;
}
.hero-showcase-chrome-label{
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}
@keyframes heroRotateHint{
    0%,100%{transform:rotate(0deg);opacity:.82}
    50%{transform:rotate(18deg);opacity:1}
}
.storefront-media-layer{
    position:absolute;
    inset:0;
    transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.storefront-media-layer--3d{
    z-index:2;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.storefront-media-layer--2d{
    z-index:1;
    opacity:1;
    visibility:visible;
}
.storefront-hero-stage[data-media-mode="3d"] .storefront-media-layer--2d,
.storefront-selection-stage[data-media-mode="3d"] .storefront-media-layer--2d{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.storefront-hero-stage[data-media-mode="3d"] .storefront-media-layer--3d,
.storefront-selection-stage[data-media-mode="3d"] .storefront-media-layer--3d{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.storefront-hero-stage[data-media-mode="2d"] .storefront-media-layer--2d,
.storefront-selection-stage[data-media-mode="2d"] .storefront-media-layer--2d{
    opacity:1;
    visibility:visible;
}
.storefront-hero-stage[data-media-mode="2d"] .storefront-media-layer--3d,
.storefront-selection-stage[data-media-mode="2d"] .storefront-media-layer--3d{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.storefront-hero-stage[data-media-mode="loading"] .storefront-media-layer--2d,
.storefront-hero-stage[data-media-mode="loading"] .storefront-media-layer--3d{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
#hero3dCanvas{
    width:100%;
    height:100%;
    display:block;
    cursor:grab;
    touch-action:none;
    background:transparent;
}
.storefront-hero-showcase,
.storefront-hero-stage,
.storefront-hero-stage .storefront-media-layer--3d{
    background:transparent;
}
#hero3dCanvas.is-dragging{
    cursor:grabbing;
}
.hero-3d-poster{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:center center;
    filter:drop-shadow(0 22px 48px rgba(0,0,0,.38));
}
.storefront-hero-stage .storefront-media-layer--2d{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.storefront-hero-shade{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(8,10,12,.78) 0%, rgba(8,10,12,.42) 34%, rgba(8,10,12,.12) 52%, transparent 68%),
        linear-gradient(180deg, rgba(8,10,12,.2) 0%, transparent 38%, rgba(8,10,12,.15) 100%);
}
.storefront-hero-copy{
    position:relative;
    z-index:1;
    max-width:36rem;
    padding:clamp(1.5rem, 3vh, 2.5rem) clamp(1.25rem, 2.4vw, 2.25rem);
    padding-right:clamp(.75rem, 1.5vw, 1.25rem);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(1.5rem, 3vh, 2rem);
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
}
.hero-copy-intro{
    display:flex;
    flex-direction:column;
    gap:clamp(.85rem, 1.8vh, 1.15rem);
    padding:0;
    border:none;
}
.storefront-page .storefront-hero .storefront-kicker.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    align-self:flex-start;
    margin:0;
    padding:0;
    border:none;
    border-radius:0;
    background:none;
    backdrop-filter:none;
    color:color-mix(in srgb, var(--brand-accent) 70%, var(--text));
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
}
.storefront-hero[data-hero-mode="3d"] .storefront-kicker.hero-eyebrow::before{
    content:'';
    width:.4rem;
    height:.4rem;
    border-radius:50%;
    background:linear-gradient(180deg, #6ee7b7, #14b8a6);
    box-shadow:0 0 10px color-mix(in srgb, #34d399 55%, transparent);
    animation:heroLivePulse 2.8s ease-in-out infinite;
}
@keyframes heroLivePulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.75;transform:scale(.88)}
}
.storefront-page .storefront-hero .hero-headline,
.storefront-page .storefront-hero h1.hero-headline{
    font-family:var(--font-heading);
    font-size:clamp(2.65rem, 4.8vw, 4rem);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.048em;
    margin:0;
    color:color-mix(in srgb, var(--text) 96%, #0f172a);
    text-wrap:balance;
    text-shadow:none;
}
.storefront-page .storefront-hero .hero-lead{
    margin:0;
    max-width:32rem;
    font-size:clamp(1.05rem, 1.45vw, 1.16rem);
    font-weight:400;
    line-height:1.65;
    color:color-mix(in srgb, var(--text-2) 92%, var(--text));
    text-shadow:none;
}
.storefront-hero-facts{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.35rem .9rem;
    margin:0;
    padding:.15rem 0 0;
}
.storefront-page .storefront-hero-facts .hero-fact{
    display:inline-flex;
    align-items:center;
    gap:0;
    min-height:0;
    padding:0;
    border:none;
    border-radius:0;
    background:none;
    backdrop-filter:none;
    color:color-mix(in srgb, var(--text-2) 92%, var(--text));
    font-size:.84rem;
    font-weight:500;
    letter-spacing:.01em;
    box-shadow:none;
    text-shadow:none;
}
.storefront-page .storefront-hero-facts .hero-fact:not(:last-child)::after{
    content:'';
    display:inline-block;
    width:1px;
    height:.85rem;
    margin-left:.9rem;
    background:color-mix(in srgb, var(--border) 80%, transparent);
    vertical-align:middle;
}
.hero-fact::before{
    content:none;
}
.storefront-page .hero-fact[data-fact="price"]{
    font-weight:600;
    color:var(--text);
}
.storefront-hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.65rem;
    margin:0;
    padding:.15rem 0 0;
}
.storefront-page .storefront-hero-actions .hero-cta--storefront{
    min-height:3.15rem;
    padding:.9rem 1.75rem;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.03em;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(165deg, #0f172a 0%, #1e293b 48%, #334155 100%);
    color:#f8fafc;
    box-shadow:
        0 16px 38px rgba(15,23,42,.32),
        inset 0 1px 0 rgba(255,255,255,.14);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.storefront-page .storefront-hero-actions .hero-cta--storefront:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:
        0 22px 46px rgba(15,23,42,.36),
        inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:3.15rem;
    padding:.9rem .25rem;
    border:none;
    border-radius:0;
    background:none;
    backdrop-filter:none;
    color:color-mix(in srgb, #fff 88%, rgba(255,255,255,.65));
    font-weight:500;
    font-size:.9rem;
    letter-spacing:.02em;
    text-decoration:none;
    text-underline-offset:.22em;
    text-decoration-thickness:1px;
    text-decoration-color:color-mix(in srgb, var(--brand-accent, #5eead4) 55%, rgba(255,255,255,.45));
    transition:color .25s var(--ease), text-decoration-color .25s var(--ease), transform .25s var(--ease);
}
.hero-secondary-btn:hover{
    color:#fff;
    text-decoration-color:color-mix(in srgb, var(--brand-accent, #5eead4) 85%, #fff);
    transform:translateY(-1px);
}
#heroDesignLink[hidden],
.hero-secondary-btn--designer[hidden]{
    display:none !important;
}
.storefront-options{
    position:relative;
    z-index:2;
    padding:clamp(3.5rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 3.5rem);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, #14b8a6 8%, transparent), transparent 70%),
        var(--bg);
}
.storefront-options-inner{
    width:100%;
    max-width:min(1440px, calc(100vw - clamp(2rem, 5vw, 5rem)));
    margin:0 auto;
}
.storefront-options-head{
    max-width:none;
    margin-bottom:clamp(1.75rem, 3vw, 2.5rem);
}
.storefront-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(400px, 480px);
    gap:clamp(1.25rem, 2.5vw, 2rem);
    align-items:start;
}
.storefront-side{
    display:flex;
    flex-direction:column;
    gap:1rem;
    min-width:0;
    position:sticky;
    top:82px;
    align-self:start;
}
.storefront-selection-preview{
    border:1px solid color-mix(in srgb, var(--border) 80%, #14b8a6 20%);
    border-radius:14px;
    background:var(--bg-card);
    overflow:hidden;
    box-shadow:0 18px 42px rgba(15,23,42,.08);
}
.storefront-selection-stage{
    position:relative;
    height:min(32vw, 400px);
    min-height:300px;
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, #14b8a6 14%, transparent), transparent 58%),
        linear-gradient(180deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-card) 92%, var(--bg-2)) 100%);
    border-bottom:1px solid var(--border);
    isolation:isolate;
}
.storefront-selection-stage .storefront-media-layer--2d{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(.35rem, 2vw, .5rem);
}
.storefront-selection-stage .storefront-media-layer--3d{
    position:absolute;
    inset:0;
}
#selection3dCanvas{
    width:100%;
    height:100%;
    display:block;
    cursor:grab;
    touch-action:none;
}
#selection3dCanvas.is-dragging{
    cursor:grabbing;
}
.storefront-selection-controls{
    position:absolute;
    right:.55rem;
    bottom:.55rem;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    z-index:4;
    pointer-events:auto;
    opacity:0;
    visibility:hidden;
    transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.storefront-selection-stage.is-selection-3d-active .storefront-selection-controls{
    opacity:1;
    visibility:visible;
}
.storefront-selection-loader{
    position:absolute;
    inset:0;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    background:color-mix(in srgb, var(--bg-card) 78%, transparent);
    backdrop-filter:blur(6px);
    pointer-events:none;
}
.storefront-selection-loader[hidden]{
    display:none !important;
}
.storefront-selection-loader-label{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-2);
}
.storefront-selection-loader-cube{
    width:34px;
    height:34px;
    position:relative;
    transform-style:preserve-3d;
    animation:selectionCubeTurn 2.2s ease-in-out infinite;
}
.storefront-selection-loader-cube span{
    position:absolute;
    inset:0;
    border:1.5px solid color-mix(in srgb, var(--brand-accent, #14b8a6) 55%, transparent);
    background:color-mix(in srgb, var(--brand-accent, #14b8a6) 12%, transparent);
    border-radius:4px;
}
.storefront-selection-loader-cube span:nth-child(1){transform:rotateY(0deg) translateZ(17px)}
.storefront-selection-loader-cube span:nth-child(2){transform:rotateY(90deg) translateZ(17px)}
.storefront-selection-loader-cube span:nth-child(3){transform:rotateY(180deg) translateZ(17px)}
.storefront-selection-loader-cube span:nth-child(4){transform:rotateY(-90deg) translateZ(17px)}
.storefront-selection-loader-cube span:nth-child(5){transform:rotateX(90deg) translateZ(17px)}
.storefront-selection-loader-cube span:nth-child(6){transform:rotateX(-90deg) translateZ(17px)}
@keyframes selectionCubeTurn{
    0%,100%{transform:rotateX(-18deg) rotateY(0deg)}
    50%{transform:rotateX(-18deg) rotateY(180deg)}
}
.storefront-selection-3d-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    align-self:flex-start;
    margin-top:.35rem;
    padding:.45rem .75rem;
    border:1px solid color-mix(in srgb, var(--brand-accent, #14b8a6) 32%, var(--border));
    border-radius:999px;
    background:color-mix(in srgb, var(--bg-card) 92%, var(--brand-accent, #14b8a6) 8%);
    color:var(--text);
    font:inherit;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.storefront-selection-3d-toggle--overlay{
    position:absolute;
    left:50%;
    bottom:.75rem;
    z-index:5;
    margin-top:0;
    align-self:auto;
    min-height:2.75rem;
    min-width:2.75rem;
    padding:.55rem 1rem;
    transform:translateX(-50%);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--text) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg-card) 86%, transparent);
    -webkit-tap-highlight-color:transparent;
}
.storefront-selection-stage.is-selection-3d-active .storefront-selection-3d-toggle--overlay{
    top:.65rem;
    bottom:auto;
    left:.65rem;
    transform:none;
}
.storefront-selection-stage.is-selection-3d-loading .storefront-selection-3d-toggle--overlay{
    opacity:.85;
}
.storefront-selection-3d-toggle[hidden]{
    display:none !important;
}
.storefront-selection-3d-toggle:hover:not(:disabled){
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 55%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 84%, var(--brand-accent, #14b8a6) 16%);
}
.storefront-selection-3d-toggle:disabled{
    opacity:.65;
    cursor:wait;
}
.storefront-selection-3d-toggle[aria-pressed="true"]{
    background:color-mix(in srgb, var(--brand-accent, #14b8a6) 18%, var(--bg-card));
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 48%, var(--border));
}
.storefront-selection-3d-toggle-icon{
    display:inline-flex;
    color:color-mix(in srgb, var(--brand-accent, #14b8a6) 80%, var(--text));
}
@media (prefers-reduced-motion: reduce){
    .storefront-selection-loader-cube{
        animation:none;
        transform:rotateX(-18deg) rotateY(45deg);
    }
}
.storefront-selection-zoom-btn{
    width:2rem;
    height:2rem;
    border-radius:8px;
    border:1px solid color-mix(in srgb,var(--border) 70%,#fff);
    background:color-mix(in srgb,#fff 88%,transparent);
    color:var(--text);
    font-size:1.05rem;
    line-height:1;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(15,23,42,.08);
    -webkit-tap-highlight-color:transparent;
}
.storefront-selection-zoom-btn:hover{
    background:#fff;
}
.storefront-selection-zoom-btn--reset{
    font-size:.92rem;
}
.storefront-selection-poster{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:center center;
    filter:drop-shadow(0 14px 28px rgba(15,23,42,.12));
}
.storefront-selection-meta{
    padding:1rem 1.15rem 1.15rem;
    display:flex;
    flex-direction:column;
    gap:.25rem;
    background:color-mix(in srgb, var(--bg-card) 96%, var(--bg-2));
}
.storefront-selection-eyebrow{
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
}
.storefront-motion-notice{
    margin:.35rem 0 0;
    font-size:.78rem;
}
.storefront-field-error{
    margin:.5rem 0 0;
    padding:.45rem .6rem;
    border-radius:8px;
    font-size:.85rem;
    color:#b45309;
    background:color-mix(in srgb,#fef3c7 70%,transparent);
    border:1px solid color-mix(in srgb,#f59e0b 40%,var(--border));
}
.storefront-selection-meta strong{
    font-size:1.05rem;
    line-height:1.25;
}
.storefront-selection-preview[data-preview-mode="3d"] .storefront-selection-eyebrow{
    color:color-mix(in srgb, #14b8a6 70%, var(--muted));
}
.storefront-products{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(.85rem, 1.5vw, 1.15rem);
    min-width:0;
}
.storefront-product-card{
    min-height:152px;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text);
    border-radius:12px;
    display:grid;
    --product-media-size:clamp(88px, 10vw, 112px);
    grid-template-columns:var(--product-media-size) 1fr auto;
    gap:.85rem 1rem;
    align-items:center;
    text-align:left;
    padding:.95rem 1rem;
    cursor:pointer;
    transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
    font:inherit;
    position:relative;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.storefront-product-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity .22s var(--ease);
    box-shadow:inset 0 0 0 2px color-mix(in srgb, #14b8a6 55%, transparent);
}
.storefront-product-card:hover{
    border-color:color-mix(in srgb, #14b8a6 45%, var(--border));
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.storefront-product-card.active{
    border-color:color-mix(in srgb, #14b8a6 70%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 90%, #14b8a6 10%);
    box-shadow:0 16px 34px color-mix(in srgb, #14b8a6 18%, rgba(15,23,42,.1));
}
.storefront-product-card.active::before{
    opacity:1;
}
.storefront-product-card > span:not(.storefront-product-media){
    display:flex;
    flex-direction:column;
    gap:.2rem;
    min-width:0;
}
.storefront-product-media{
    position:relative;
    width:var(--product-media-size, clamp(88px, 10vw, 112px));
    aspect-ratio:1 / 1;
    height:auto;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    perspective:520px;
    flex-shrink:0;
}
.storefront-product-thumb,
.storefront-product-media img{
    display:block;
    box-sizing:border-box;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:center center;
    background:transparent;
}
.storefront-product-media.has-3d .storefront-product-thumb,
.storefront-product-media.has-3d .storefront-mini-poster{
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    transform:translate(-50%, -50%);
    object-fit:contain;
    object-position:center center;
    opacity:1;
    transition:opacity .28s var(--ease);
}
.storefront-mini-canvas{
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    display:block;
    transform:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.storefront-product-media.has-3d.is-mini-3d-live .storefront-mini-canvas{
    opacity:1;
    visibility:visible;
}
.storefront-product-media.has-3d.is-mini-3d-live .storefront-mini-poster,
.storefront-product-media.has-3d.is-mini-3d-live .storefront-product-thumb{
    opacity:0;
}
.storefront-product-media.is-mini-3d-live .digitify-media-loader,
.storefront-hero-3d-dock-stage.is-dock-3d-live .digitify-media-loader{
    opacity:0;
    visibility:hidden;
}
.storefront-mini-3d{
    position:relative;
    width:44px;
    height:72px;
    transform-style:preserve-3d;
    transform:rotateX(-7deg) rotateY(-31deg) rotateZ(2deg);
    animation:miniProductTurn 5.8s ease-in-out infinite;
}
.mini-phone-body,
.mini-phone-screen{
    position:absolute;
    inset:0;
    border-radius:5px;
    transform-style:preserve-3d;
}
.mini-phone-body{
    background:linear-gradient(110deg, #dde5e1, #6f7774 48%, #eef5f0);
    box-shadow:
        9px 8px 0 rgba(55,64,61,.86),
        18px 16px 22px rgba(0,0,0,.28);
}
.mini-phone-screen{
    inset:8px 6px;
    background:linear-gradient(150deg, #111827, #030712);
    transform:translateZ(8px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.mini-phone-camera,
.mini-phone-flash{
    position:absolute;
    top:12px;
    border-radius:50%;
    transform:translateZ(13px);
}
.mini-phone-camera{
    left:9px;
    width:13px;
    height:13px;
    background:radial-gradient(circle at 60% 34%, #f8fafc 0 12%, #030712 16% 70%, #0f172a 100%);
    box-shadow:0 0 0 2px rgba(0,0,0,.45);
}
.mini-phone-flash{
    left:27px;
    width:7px;
    height:7px;
    background:#f8fafc;
    box-shadow:0 0 10px rgba(255,255,255,.36);
}
@keyframes miniProductTurn{
    0%,100%{transform:rotateX(-7deg) rotateY(-31deg) rotateZ(2deg)}
    50%{transform:rotateX(-4deg) rotateY(-18deg) rotateZ(-1deg)}
}
.storefront-product-card strong{
    display:block;
    font-size:.96rem;
    line-height:1.25;
}
.storefront-product-card small{
    display:block;
    margin-top:.3rem;
    color:var(--text-2);
    font-size:.78rem;
    line-height:1.45;
}
.storefront-product-card em{
    font-style:normal;
    font-weight:800;
    font-size:.9rem;
    color:color-mix(in srgb, #14b8a6 72%, var(--text));
    white-space:nowrap;
    align-self:center;
    padding-left:.25rem;
}
.storefront-order-panel{
    display:flex;
    flex-direction:column;
    gap:0;
    border:1px solid color-mix(in srgb, var(--border) 82%, var(--brand-accent, #14b8a6) 18%);
    background:color-mix(in srgb, var(--bg-card) 97%, var(--brand-accent, #14b8a6) 3%);
    border-radius:16px;
    padding:1.35rem 1.4rem 1.45rem;
    box-shadow:
        0 22px 50px color-mix(in srgb, var(--text) 7%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.storefront-order-fields{
    display:grid;
    grid-template-columns:1fr minmax(5.5rem, 7rem);
    gap:1rem 1rem;
    align-items:end;
}
.storefront-order-field--color{
    grid-column:1 / -1;
}
.storefront-order-panel .field,
.storefront-order-panel .storefront-order-field{
    margin:0;
}
.storefront-order-panel .field label,
.storefront-order-panel .storefront-order-field label{
    display:block;
    margin:0 0 .45rem;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:none;
    color:var(--text-2);
}
.storefront-order-panel input,
.storefront-order-panel select{
    width:100%;
    min-height:2.85rem;
    padding:.72rem .95rem;
    border:1px solid color-mix(in srgb, var(--border) 88%, var(--brand-accent, #14b8a6) 12%);
    border-radius:12px;
    background:var(--bg-input);
    color:var(--text);
    font:inherit;
    font-size:.92rem;
    font-weight:500;
    box-shadow:none;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    appearance:none;
    -webkit-appearance:none;
}
.storefront-order-panel select{
    padding-right:2.35rem;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.4 1.4 6 6l4.6-4.6L11.2 2.8 6 8 0.8 2.8z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .95rem center;
    background-size:11px auto;
}
.storefront-order-panel input[type="number"]{
    -moz-appearance:textfield;
    text-align:center;
    font-variant-numeric:tabular-nums;
}
.storefront-order-panel input[type="number"]::-webkit-outer-spin-button,
.storefront-order-panel input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.storefront-order-panel input:focus,
.storefront-order-panel select:focus{
    outline:none;
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 55%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 88%, var(--bg-input));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-accent, #14b8a6) 16%, transparent);
}
.storefront-order-panel .storefront-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    padding:.15rem 0 .05rem;
}
.storefront-order-panel .storefront-swatch{
    width:2.5rem;
    height:2.5rem;
    border:2px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius:50%;
    background:var(--bg-2);
    padding:3px;
    cursor:pointer;
    transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.storefront-order-panel .storefront-swatch:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--brand-accent, #14b8a6) 45%, var(--border));
}
.storefront-order-panel .storefront-swatch.active{
    border-color:var(--brand-accent, #14b8a6);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-accent, #14b8a6) 22%, transparent);
}
.storefront-order-panel .storefront-swatch span{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}
.storefront-order-summary{
    margin-top:1.2rem;
    padding-top:1.1rem;
    border-top:1px solid color-mix(in srgb, var(--border) 88%, var(--brand-accent, #14b8a6) 12%);
}
.storefront-total-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    margin:0;
    padding:0;
    border:none;
    color:var(--text-2);
}
.storefront-total-label{
    font-size:.88rem;
    font-weight:500;
    letter-spacing:.01em;
}
.storefront-total-row strong{
    color:var(--text);
    font-size:clamp(1.35rem, 2vw, 1.55rem);
    font-weight:700;
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
}
.storefront-order-note{
    margin:.65rem 0 0;
    font-size:.78rem;
    line-height:1.55;
    color:var(--text-2);
}
.storefront-page .storefront-order-panel .storefront-order-cta{
    width:100%;
    min-height:3.1rem;
    margin-top:1.1rem;
    padding:.92rem 1.35rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(165deg, #0f172a 0%, #1e293b 48%, #334155 100%);
    color:#f8fafc;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.03em;
    box-shadow:
        0 16px 36px color-mix(in srgb, #0f172a 28%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12);
}
.storefront-page .storefront-order-panel .storefront-order-cta:hover:not(:disabled){
    transform:translateY(-2px);
    filter:brightness(1.05);
    background:linear-gradient(165deg, #111827 0%, #273449 50%, #3d4f66 100%);
    box-shadow:
        0 20px 42px color-mix(in srgb, #0f172a 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,.16);
}
.storefront-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
}
.storefront-swatch{
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--bg-2);
    padding:4px;
    cursor:pointer;
}
.storefront-swatch.active{
    border-color:#9fe6d7;
    box-shadow:0 0 0 3px rgba(20,184,166,.18);
}
.storefront-swatch span{
    display:block;
    width:100%;
    height:100%;
    border-radius:5px;
}
.storefront-process{
    padding:1.5rem 2rem 4rem;
    background:var(--bg);
}
.storefront-process-inner{
    max-width:1220px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.storefront-process-item{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem;
    background:var(--bg-card);
}
.storefront-process-item + .storefront-process-item{
    border-left:1px solid var(--border);
}
.storefront-process-item strong{
    color:#9fe6d7;
    font-family:var(--font-heading);
}
.storefront-process-item span{
    color:var(--text-2);
    font-weight:600;
    font-size:.9rem;
}
@media (max-width: 900px){
    .storefront-hero{
        min-height:auto;
        align-items:stretch;
        padding:var(--digitify-header-h, 65px) 0 3.25rem;
        display:flex;
        flex-direction:column;
    }
    .storefront-hero-inner{
        display:contents;
    }
    .storefront-hero-showcase{
        order:1;
        width:100%;
        max-width:none;
        margin-inline:0;
        margin-top:0;
        aspect-ratio:1 / 1;
        height:auto;
        min-height:0;
        max-height:none;
        align-self:stretch;
    }
    .storefront-hero-3d-dock{
        order:3;
        width:100%;
        max-width:min(1440px, calc(100vw - 2rem));
        margin:.85rem auto 0;
        padding:0 1rem;
    }
    .storefront-hero-3d-dock-track{
        width:max-content;
        max-width:100%;
        margin-inline:auto;
        border-radius:1rem;
        padding:.45rem .65rem;
        justify-content:center;
    }
    .storefront-hero-copy{
        order:2;
        width:100%;
        max-width:min(1440px, calc(100vw - 2rem));
        margin-inline:auto;
        margin-top:.85rem;
        padding-inline:1rem;
    }
    .storefront-hero h1{
        font-size:clamp(2.2rem, 9vw, 3rem);
    }
    .storefront-hero-shade{
        background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 50%, var(--bg) 100%);
    }
    .storefront-hero-3d-dock-item{
        width:4.1rem;
    }
    .storefront-hero-3d-dock-name{
        font-size:.54rem;
    }
    .storefront-layout{
        grid-template-columns:1fr;
        gap:1.25rem;
    }
    .storefront-side{
        display:grid;
        grid-template-columns:1fr;
        gap:1rem;
        position:static;
    }
    .storefront-products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:.65rem;
    }
    .storefront-product-card{
        --product-media-size:min(100%, 92px);
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr auto;
        justify-items:center;
        text-align:center;
        min-height:0;
        padding:.7rem .55rem .75rem;
        gap:.35rem;
    }
    .storefront-product-card > span:not(.storefront-product-media){
        align-items:center;
        text-align:center;
        width:100%;
    }
    .storefront-product-card strong{
        font-size:.84rem;
        line-height:1.2;
    }
    .storefront-product-card small{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        margin-top:.15rem;
        font-size:.68rem;
        line-height:1.35;
    }
    .storefront-product-card em{
        align-self:center;
        padding-left:0;
        font-size:.82rem;
    }
    .storefront-product-media{
        width:100%;
        max-width:92px;
        aspect-ratio:1 / 1;
        height:auto;
    }
    .storefront-selection-stage{
        width:100%;
        height:min(68vw, 300px);
        min-height:220px;
        max-height:min(68vw, 300px);
        aspect-ratio:unset;
    }
    .storefront-selection-preview[data-preview-mode="3d"] .storefront-selection-stage{
        height:min(72vw, 320px);
        max-height:min(72vw, 320px);
    }
    .storefront-selection-preview[data-preview-mode="3d"] .storefront-selection-meta{
        padding:.7rem .9rem .85rem;
    }
    .storefront-selection-preview[data-preview-mode="3d"] .storefront-selection-meta strong{
        font-size:.98rem;
        line-height:1.25;
    }
    .storefront-selection-stage.is-selection-3d-active .storefront-selection-controls{
        flex-direction:row;
        right:.5rem;
        bottom:.5rem;
        gap:.3rem;
    }
    .storefront-selection-3d-toggle--overlay{
        bottom:.65rem;
        font-size:.68rem;
        padding:.5rem .85rem;
    }
    .storefront-selection-controls{
        right:.45rem;
        bottom:.45rem;
    }
    .storefront-selection-zoom-btn{
        width:2.35rem;
        height:2.35rem;
    }
    .storefront-selection-meta{
        padding:.75rem 1rem .85rem;
    }
    .storefront-order-panel{
        position:static;
    }
    .storefront-order-fields{
        grid-template-columns:1fr 5.75rem;
    }
    .storefront-process-inner{
        grid-template-columns:1fr;
    }
    .storefront-process-item + .storefront-process-item{
        border-left:0;
        border-top:1px solid var(--border);
    }
}
@media (min-width: 1100px){
    .storefront-side{
        display:flex;
        flex-direction:column;
        gap:1rem;
    }
    .storefront-products{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .storefront-product-card{
        --product-media-size:min(100%, 140px);
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr auto;
        justify-items:center;
        text-align:center;
        min-height:200px;
        padding:1rem .85rem 1.05rem;
        gap:.5rem;
    }
    .storefront-product-card > span:not(.storefront-product-media){
        align-items:center;
        text-align:center;
    }
    .storefront-product-card em{
        align-self:center;
        padding-left:0;
    }
    .storefront-product-media{
        width:100%;
        max-width:140px;
        aspect-ratio:1 / 1;
        height:auto;
    }
}
@media (min-width: 1200px){
    .storefront-hero-showcase{
        height:clamp(500px, min(72vh, 78dvh), 820px);
        min-height:clamp(500px, min(72vh, 78dvh), 820px);
        max-height:min(78dvh, 820px);
    }
}
@media (min-width: 1280px){
    .storefront-products{
        gap:1.15rem;
    }
    .storefront-product-card{
        padding:1rem 1.15rem;
    }
}
@media (min-width: 1500px){
    .storefront-options-inner{
        max-width:min(1560px, calc(100vw - 4rem));
    }
    .storefront-layout{
        grid-template-columns:minmax(0, 1fr) minmax(420px, 500px);
    }
    .storefront-product-card{
        --product-media-size:min(100%, 148px);
        min-height:220px;
    }
    .storefront-product-media{
        max-width:148px;
        aspect-ratio:1 / 1;
        height:auto;
    }
}
@media (max-width: 1099px) and (min-width: 901px){
    .storefront-layout{
        grid-template-columns:minmax(0, 1fr) minmax(360px, 420px);
    }
    .storefront-side{
        display:grid;
        grid-template-columns:minmax(0, 1.1fr) minmax(300px, 380px);
        gap:1rem;
        align-items:start;
    }
    .storefront-selection-stage{
        width:100%;
        height:min(100%, 280px);
        min-height:200px;
        max-height:280px;
        aspect-ratio:unset;
    }
}
@media (max-width: 560px){
    .storefront-hero h1{
        font-size:2.45rem;
    }
    .storefront-products{
        gap:.55rem;
    }
    .storefront-product-card{
        --product-media-size:min(100%, 84px);
        padding:.62rem .45rem .68rem;
        min-height:0;
    }
    .storefront-product-media{
        max-width:84px;
    }
    .storefront-product-card strong{
        font-size:.78rem;
    }
    .storefront-product-card small{
        -webkit-line-clamp:2;
        font-size:.64rem;
    }
    .storefront-product-card em{
        font-size:.78rem;
    }
    .storefront-mini-3d{
        transform:scale(.88) rotateX(-7deg) rotateY(-31deg) rotateZ(2deg);
    }
    .storefront-order-fields{
        grid-template-columns:1fr;
    }
    .storefront-order-field--qty{
        max-width:8.5rem;
    }
    .storefront-selection-stage{
        height:min(74vw, 280px);
        max-height:min(74vw, 280px);
        min-height:210px;
    }
    .storefront-selection-preview[data-preview-mode="3d"] .storefront-selection-stage{
        height:min(78vw, 300px);
        max-height:min(78vw, 300px);
    }
}

/* ========================================
   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}
}

/* ========================================
   Brand system overrides
   Keeps all pages synced with Branding & thema
   ======================================== */
.btn-primary,
.hero-cta,
.btn.btn-primary,
.storefront-page .btn-primary{
    flex:0 0 auto;
    border:1px solid color-mix(in srgb, var(--brand-accent) 50%, transparent);
    background:var(--brand-gradient);
    color:var(--brand-on-accent);
    border-radius:var(--r-btn);
    box-shadow:0 14px 34px color-mix(in srgb, var(--brand-accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
    letter-spacing:-.01em;
}
.panel-nav .btn-primary,
.modal .btn-primary,
.order-preview-actions .btn-primary{
    flex:1;
}
.btn-primary:hover:not(:disabled),
.hero-cta:hover,
.btn.btn-primary:hover:not(:disabled),
.storefront-page .btn-primary:hover:not(:disabled){
    background:linear-gradient(135deg, var(--btn-bg-hover), var(--brand-accent-2));
    border-color:color-mix(in srgb, var(--brand-accent) 70%, transparent);
    box-shadow:0 18px 45px color-mix(in srgb, var(--brand-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-secondary,
.btn-tertiary,
.btn.btn-ghost,
.hero-secondary-link{
    border-color:var(--border);
    background:linear-gradient(180deg, var(--surface-glass), transparent);
    color:var(--text);
    border-radius:var(--r-btn);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-secondary:hover,
.btn-tertiary:hover,
.btn.btn-ghost:hover:not(:disabled),
.hero-secondary-link:hover{
    border-color:color-mix(in srgb, var(--brand-accent) 48%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 76%, var(--brand-accent) 24%);
    color:var(--text);
}
.form-field input,
.form-field select,
.form-field textarea,
.remarks-textarea,
.product-selector,
.storefront-order-panel input,
.storefront-order-panel select{
    border-radius:var(--r-btn);
    border-color:var(--border);
    background:linear-gradient(180deg, var(--bg-input), color-mix(in srgb, var(--bg-input) 84%, var(--brand-accent) 16%));
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.remarks-textarea:focus,
.product-selector:focus,
.storefront-order-panel input:focus,
.storefront-order-panel select:focus{
    border-color:color-mix(in srgb, var(--brand-accent) 70%, var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-accent) 18%, transparent);
    background:color-mix(in srgb, var(--bg-card) 88%, var(--bg-input));
}
.storefront-order-panel input,
.storefront-order-panel select{
    background:var(--bg-input);
    box-shadow:none;
}
.controls-panel,
.order-summary,
.preview-canvas,
.marketing-card,
.marketing-panel,
.shop-card,
.storefront-product-card,
.storefront-order-panel,
.storefront-process-inner,
.how-card,
.feature-card,
.review-card{
    border-color:var(--border);
    box-shadow:var(--shadow-soft);
}
.marketing-hero{
    border-color:color-mix(in srgb, var(--brand-accent) 22%, var(--border));
    background:
      radial-gradient(760px 280px at 8% 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 64%),
      radial-gradient(600px 260px at 100% 8%, color-mix(in srgb, var(--brand-accent-2) 12%, transparent), transparent 62%),
      linear-gradient(135deg, var(--surface-glass), transparent);
    box-shadow:var(--shadow-soft);
}
.marketing-card,
.marketing-panel,
.shop-card{
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, var(--brand-accent) 8%), var(--bg-card));
    border-radius:var(--r-xl);
}
.shop-card img,
.preview-canvas{
    background:
      radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 58%),
      var(--preview-bg);
}
.storefront-product-media{
    background:transparent;
}
.storefront-page{
    background:var(--bg);
}
.storefront-page .nav{
    background:var(--nav-bg);
}
.storefront-hero{
    background:
        radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 36%),
        radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--brand-accent-2) 16%, transparent), transparent 34%),
        linear-gradient(115deg, var(--bg) 0%, color-mix(in srgb, var(--bg-2) 82%, var(--brand-accent) 18%) 46%, color-mix(in srgb, var(--bg-3) 72%, var(--brand-accent-2) 28%) 100%);
}
.storefront-hero-showcase{
    background:transparent;
    border:none;
    box-shadow:none;
}
.storefront-hero-shade{
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 42%, transparent) 38%, transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 24%, transparent) 0%, transparent 42%);
}
.storefront-kicker,
.storefront-product-card em,
.storefront-process-item strong{
    color:var(--brand-accent);
}
.storefront-hero h1{
    font-family:var(--font-heading);
    color:var(--text);
}
.storefront-hero .hero-lead{
    color:var(--text-2);
}
.storefront-hero .storefront-kicker.hero-eyebrow{
    color:color-mix(in srgb, var(--brand-accent) 78%, var(--text-2));
    border-color:color-mix(in srgb, var(--brand-accent) 32%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 90%, var(--brand-accent) 10%);
}
.storefront-hero-facts .hero-fact{
    color:var(--text-2);
    text-shadow:none;
}
.storefront-hero-facts .hero-fact:not(:last-child)::after{
    background:color-mix(in srgb, var(--border) 85%, var(--text) 15%);
}
.hero-fact[data-fact="price"]{
    color:var(--text);
}
.hero-secondary-btn{
    border-color:var(--border);
    background:var(--bg-card);
    color:var(--text);
    box-shadow:0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}
.hero-secondary-btn:hover{
    border-color:color-mix(in srgb, var(--brand-accent) 40%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 82%, var(--brand-accent) 18%);
    color:var(--text);
}
.storefront-product-card{
    border-radius:var(--r-lg);
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--brand-accent) 6%), var(--bg-card));
}
.storefront-product-card:hover,
.storefront-product-card.active{
    border-color:color-mix(in srgb, var(--brand-accent) 72%, var(--border));
    background:color-mix(in srgb, var(--bg-card) 82%, var(--brand-accent) 18%);
}
.storefront-order-panel,
.storefront-process-inner{
    border-radius:var(--r-xl);
}
.storefront-swatch.active{
    border-color:var(--brand-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}
.logo-mark,
.gradient-text,
.order-line.total span:last-child,
.how-number{
    background:var(--brand-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
body.theme-light .storefront-hero .hero-headline,
body.theme-light .storefront-hero h1.hero-headline{
    color:color-mix(in srgb, var(--text) 96%, #0f172a);
    text-shadow:none;
}
body.theme-light .storefront-hero .hero-lead{
    color:color-mix(in srgb, var(--text-2) 92%, var(--text));
    text-shadow:none;
}
body.theme-light .storefront-hero .storefront-kicker.hero-eyebrow{
    color:color-mix(in srgb, var(--brand-accent) 70%, var(--text));
}
body.theme-light .storefront-page .storefront-hero-actions .hero-cta--storefront{
    background:linear-gradient(165deg, #111827 0%, #1f2937 52%, #374151 100%);
    color:#f9fafb;
    box-shadow:0 18px 42px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
body.theme-light .hero-secondary-btn{
    color:var(--text-2);
    background:none;
    border:none;
    box-shadow:none;
    text-decoration-color:color-mix(in srgb, var(--brand-accent) 45%, var(--border));
}
body.theme-light .hero-secondary-btn:hover{
    color:var(--text);
    background:none;
}
body.theme-light .storefront-hero-shade{
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 40%, transparent 64%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 18%, transparent) 0%, transparent 45%);
}
body.theme-light .storefront-order-panel{
    background:var(--bg-card);
    box-shadow:0 18px 44px color-mix(in srgb, var(--text) 6%, transparent);
}
body.theme-light .storefront-page .storefront-order-panel .storefront-order-cta{
    background:linear-gradient(165deg, #111827 0%, #1f2937 52%, #374151 100%);
    color:#f9fafb;
}
body.theme-light .storefront-hero::before{
    background:radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 68%);
}
body.theme-light .storefront-hero-showcase{
    background:transparent;
    border:none;
    box-shadow:none;
}
body.theme-light .hero-showcase-floor{
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-accent) 22%, transparent) 0%, transparent 72%);
}
body.theme-light .hero-3d-poster{
    filter:drop-shadow(0 20px 40px rgba(15,23,42,.12));
}
@media (max-width: 900px){
    .storefront-hero-shade,
    body.theme-light .storefront-hero-shade{
        background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg) 75%, transparent) 56%, var(--bg) 100%);
    }
}