:root{
  --lux-bg:#070707;
  --lux-panel:#11100d;
  --lux-panel-2:#17150f;
  --lux-line:rgba(217,181,109,.28);
  --lux-gold:#d9b56d;
  --lux-gold-2:#f3dca0;
  --lux-text:#fbf7ee;
  --lux-muted:#b9ad96;
  --danger:#b0413e;
}
body{background:radial-gradient(circle at top,#241d10 0,#080808 42%,#030303 100%);color:var(--lux-text)}
.studio-page{min-height:100vh;padding:64px 22px 64px;background:linear-gradient(135deg,rgba(217,181,109,.08),transparent 35%),radial-gradient(circle at 80% 0,rgba(143,29,29,.22),transparent 36%)}
.studio-hero{max-width:1120px;margin:0 auto 28px;text-align:center;padding:28px 16px}
.eyebrow,.mini-label{letter-spacing:.18em;text-transform:uppercase;color:var(--lux-gold);font-size:.78rem;font-weight:800;margin:0 0 8px}.studio-hero h1{font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,5rem);line-height:.95;margin:0 0 18px;background:linear-gradient(90deg,#fff,var(--lux-gold-2),#fff);-webkit-background-clip:text;color:transparent}.studio-hero p{max-width:850px;margin:0 auto;color:var(--lux-muted);font-size:1.06rem;line-height:1.7}.studio-shell{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,320px) minmax(420px,1fr) minmax(280px,350px);gap:18px;align-items:start}.studio-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--lux-line);border-radius:28px;box-shadow:0 24px 70px rgba(0,0,0,.46);backdrop-filter:blur(14px);padding:20px}.panel-head{display:flex;gap:12px;align-items:center;margin-bottom:16px}.panel-head span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--lux-gold),#7d5e20);color:#111;font-weight:900}.studio-card h2{font-family:Georgia,serif;margin:0;font-size:1.45rem}.tools-card label,.preview-card label{display:block;color:var(--lux-gold-2);font-size:.84rem;font-weight:800;margin:14px 0 7px}select,input[type="text"],input[type="number"],input[type="file"]{width:100%;box-sizing:border-box;border:1px solid rgba(217,181,109,.25);border-radius:14px;background:#070707;color:#fff;padding:12px 13px;outline:none}input[type="color"]{width:100%;height:43px;border:1px solid rgba(217,181,109,.25);border-radius:14px;background:#070707;padding:4px}.swatches{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.swatch{width:34px;height:34px;border-radius:999px;border:2px solid rgba(255,255,255,.25);background:var(--color);cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.25)}.swatch.active{outline:3px solid var(--lux-gold);outline-offset:2px}.swatches input[type="color"]{width:42px;padding:2px;border-radius:999px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.gold-btn,.ghost-btn,.danger-btn{border:0;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease}.gold-btn{background:linear-gradient(135deg,var(--lux-gold-2),var(--lux-gold),#9a722b);color:#111;box-shadow:0 12px 26px rgba(217,181,109,.2)}.gold-btn:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(217,181,109,.28)}.ghost-btn{background:rgba(255,255,255,.055);color:#fff;border:1px solid rgba(217,181,109,.2)}.danger-btn{background:rgba(176,65,62,.18);color:#ffd9d6;border:1px solid rgba(176,65,62,.4)}.full{width:100%;margin-top:10px;box-sizing:border-box}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stage-card{min-height:760px}.stage-topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.view-buttons{display:flex;gap:8px;flex-wrap:wrap}.view-btn{border:1px solid rgba(217,181,109,.3);background:rgba(255,255,255,.05);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}.view-btn.active{background:linear-gradient(135deg,var(--lux-gold-2),var(--lux-gold));color:#111}.canvas-zone{display:flex;flex-direction:column;align-items:center}.shirt-board{position:relative;width:min(100%,590px);aspect-ratio:450/500;border-radius:30px;background:radial-gradient(circle at center,rgba(255,255,255,.12),rgba(255,255,255,.035) 55%,rgba(0,0,0,.15));border:1px solid rgba(217,181,109,.18);display:grid;place-items:center;overflow:hidden}.garment-svg{position:absolute;inset:4% 7%;width:86%;height:92%;filter:drop-shadow(0 30px 35px rgba(0,0,0,.45))}.garment-svg path#garmentPath{fill:#111111;stroke:rgba(255,255,255,.55);stroke-width:2}.garment-detail{fill:none!important;stroke:rgba(255,255,255,.35)!important;stroke-width:3;stroke-linecap:round}#designCanvas,.canvas-container{position:absolute!important;inset:0!important;margin:auto!important;width:100%!important;height:100%!important}.upper-canvas,.lower-canvas{width:100%!important;height:100%!important}.quick-help{margin-top:14px;color:var(--lux-muted);font-size:.95rem;line-height:1.5;text-align:center}.model-box{position:relative;width:100%;height:280px;border-radius:22px;overflow:hidden;background:radial-gradient(circle,#2c281f,#080808);border:1px solid rgba(217,181,109,.2)}.model-viewer{width:100%;height:100%;background:transparent;border:0;pointer-events:none}.model-design-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);width:68%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(255,255,255,.22)) drop-shadow(0 6px 9px rgba(0,0,0,.38));opacity:.98;display:none;mix-blend-mode:normal;z-index:5}.model-design-overlay.show{display:block}.model-box[data-product="cap"] .model-design-overlay{width:48%;height:35%;top:47%}.model-box[data-view="side"] .model-design-overlay{width:36%;height:72%;left:51%;opacity:.92;transform:translate(-50%,-48%) skewY(-2deg)}.model-box[data-view="back"] .model-design-overlay{width:67%;height:81%;top:50%}.model-box[data-product="hoodie"] .model-design-overlay,.model-box[data-product="ziphoodie"] .model-design-overlay{width:70%;height:84%;top:51%}.model-box[data-product="polo"] .model-design-overlay{width:66%;height:78%;top:50%}.model-box[data-product="jacket"] .model-design-overlay,.model-box[data-product="windbreaker"] .model-design-overlay{width:72%;height:83%;top:51%}.model-note{color:var(--lux-muted);font-size:.86rem;line-height:1.45}.summary-box{margin:16px 0;padding:14px;border:1px solid rgba(217,181,109,.22);border-radius:20px;background:rgba(0,0,0,.25)}.summary-box p{display:flex;justify-content:space-between;gap:10px;margin:10px 0;color:var(--lux-muted)}.summary-box strong{color:#fff;text-align:right}.total-card{border-radius:22px;padding:18px;background:linear-gradient(135deg,rgba(217,181,109,.18),rgba(255,255,255,.035));border:1px solid rgba(217,181,109,.3);margin:15px 0}.total-card span{display:block;color:var(--lux-muted);font-weight:700}.total-card strong{display:block;font-family:Georgia,serif;font-size:2.2rem;color:var(--lux-gold-2);margin:4px 0}.total-card small{color:var(--lux-muted);line-height:1.45}.saved-notice{display:none;margin-top:12px;padding:12px;border-radius:14px;background:rgba(88,141,73,.16);border:1px solid rgba(88,141,73,.35);color:#d7ffd1;text-align:center}.saved-notice.show{display:block}.fabric-delete{position:absolute}.canvas-container{z-index:3}.garment-svg{z-index:1}
@media(max-width:1200px){.studio-shell{grid-template-columns:1fr 1fr}.stage-card{grid-column:1/-1;order:-1}.preview-card{grid-column:auto}}@media(max-width:760px){.studio-page{padding:90px 12px 40px}.studio-shell{grid-template-columns:1fr}.stage-topbar{flex-direction:column;align-items:flex-start}.shirt-board{width:100%}.tool-grid,.two-col{grid-template-columns:1fr}.model-box{height:220px}}
.three-stage {
  width: 100%;
  height: 100%;
  min-height: 275px;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 28%, rgba(218, 180, 103, .09), rgba(15, 14, 11, .96) 62%);
}
.three-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* Index-style navbar + cover hero polish for design studio */
.design-cover-hero {
  min-height: 64vh;
}
.design-cover-hero .hero-cover-image img {
  object-fit: cover;
  object-position: center;
}
.design-cover-hero .hero-content {
  padding-top: 110px;
  padding-bottom: 82px;
}
.design-cover-hero h2 span {
  color: var(--lux-gold-2);
}
.nav-design-btn.active {
  box-shadow: 0 14px 34px rgba(217,181,109,.28);
}

@media (max-width: 1180px) {
  .studio-shell {
    grid-template-columns: minmax(260px, 330px) 1fr;
  }
  .preview-card {
    grid-column: 1 / -1;
  }
  .model-box {
    height: 340px;
  }
}

@media (max-width: 980px) {
  .design-cover-hero {
    min-height: auto;
  }
  .design-cover-hero .hero-content {
    padding-top: 82px;
    padding-bottom: 70px;
  }
  .studio-page {
    padding: 54px 14px 54px;
  }
  .studio-shell {
    grid-template-columns: 1fr;
  }
  .stage-card {
    order: 0;
    min-height: auto;
  }
  .tools-card, .preview-card, .stage-card {
    width: 100%;
    box-sizing: border-box;
  }
  .canvas-zone {
    width: 100%;
  }
  .shirt-board {
    width: min(100%, 560px);
  }
}

@media (max-width: 720px) {
  .design-cover-hero .hero-content {
    padding-top: 62px;
    padding-bottom: 58px;
  }
  .design-cover-hero h2 {
    font-size: clamp(34px, 12vw, 52px) !important;
  }
  .studio-page {
    padding: 42px 10px 44px;
  }
  .studio-card {
    padding: 16px;
    border-radius: 22px;
  }
  .stage-topbar {
    gap: 16px;
  }
  .view-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .view-btn {
    padding: 12px 8px;
  }
  .shirt-board {
    aspect-ratio: 450 / 540;
    border-radius: 22px;
  }
  .model-box {
    height: 270px;
  }
  .panel-head h2,
  .stage-topbar h2 {
    font-size: 1.24rem;
  }
}

@media (max-width: 430px) {
  .studio-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .studio-card {
    padding: 14px;
  }
  .tool-grid,
  .two-col {
    grid-template-columns: 1fr;
  }
  .model-box {
    height: 235px;
  }
}

.premium-footer {
  background:
    radial-gradient(circle at top left, rgba(231, 194, 111, 0.14), transparent 34%),
    linear-gradient(135deg, #090806 0%, #14110d 45%, #070605 100%);
  border-top: 1px solid rgba(231, 194, 111, 0.24);
  padding: 70px 0 0;
  color: #f8f0df;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
  gap: 38px;
  align-items: flex-start;
}

.footer-logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
}

.footer-logo-brand h2 {
  font-size: 28px;
  line-height: 1;
  margin: 0;
  color: #fff4d7;
}

.footer-logo-brand p {
  margin: 5px 0 0;
  color: #d9bd78;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.footer-description {
  max-width: 420px;
  color: rgba(248, 240, 223, 0.74);
  line-height: 1.75;
  margin: 0 0 24px;
}

.footer-cta {
  display: inline-flex;
  width: fit-content;
}

.footer-column h3 {
  color: #f1d28a;
  font-size: 16px;
  margin: 0 0 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer-column a {
  display: block;
  color: rgba(248, 240, 223, 0.72);
  text-decoration: none;
  margin-bottom: 12px;
  font-size: 15px;
  transition: 0.25s ease;
}

.footer-column a:hover {
  color: #f1d28a;
  transform: translateX(5px);
}

.footer-bottom {
  margin-top: 55px;
  padding: 22px 0;
  border-top: 1px solid rgba(231, 194, 111, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(248, 240, 223, 0.58);
  font-size: 14px;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .premium-footer {
    padding-top: 52px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-logo-brand h2 {
    font-size: 23px;
  }

  .footer-description {
    font-size: 15px;
  }

  .footer-column a {
    font-size: 14px;
  }

  .footer-bottom {
    margin-top: 36px;
    font-size: 13px;
  }
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  float: right;
  flex-wrap: wrap;
}

.footer-socials a {
  width: 46px;
  height: 46px;
  gap: 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8f0df;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(231, 194, 111, 0.36);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: 0.25s ease;
}

.footer-socials a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-socials a:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, #d7a84f, #fff0b8, #a87824);
  color: #120d06;
  border-color: rgba(255, 232, 170, 0.8);
}
/* 3D-first design studio update: center model becomes the editable workspace */
.stage-card {
  min-height: auto;
}
.main-model-box {
  width: min(100%, 920px);
  height: min(68vh, 760px);
  min-height: 620px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(243,220,160,.18), transparent 34%),
    radial-gradient(circle at center, #2c281f 0%, #080808 68%);
  box-shadow: inset 0 0 55px rgba(217,181,109,.08), 0 30px 75px rgba(0,0,0,.46);
}
.main-model-box .three-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  border-radius: inherit;
}
.main-model-box .canvas-container,
.main-model-box #designCanvas,
.main-model-box .lower-canvas,
.main-model-box .upper-canvas {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.main-model-box .canvas-container {
  z-index: 6 !important;
  pointer-events: auto;
}
.main-model-box .lower-canvas {
  opacity: .48;
}
.main-model-box .upper-canvas {
  opacity: 1;
}
.main-model-box .three-stage canvas {
  position: absolute;
  inset: 0;
}
.quote-card .panel-head {
  margin-bottom: 18px;
}
.model-note {
  max-width: 880px;
  margin: 14px auto 0;
  text-align: center;
}
.quick-help {
  max-width: 880px;
}
@media (max-width: 1180px) {
  .main-model-box {
    height: 640px;
    min-height: 560px;
  }
}
@media (max-width: 720px) {
  .main-model-box {
    height: 520px;
    min-height: 480px;
    border-radius: 24px;
  }
}
@media (max-width: 430px) {
  .main-model-box {
    height: 455px;
    min-height: 420px;
  }
}

/* Drag-on-model + clean 3D preview controls */
.stage-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.mode-buttons {
  display: flex;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(217,181,109,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.26);
}
.mode-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: transparent;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.mode-btn.active {
  background: linear-gradient(135deg,var(--lux-gold-2),var(--lux-gold));
  color: #111;
}
.model-safe-area {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border: 1.5px dashed rgba(243,220,160,.55);
  border-radius: 24px;
  background: rgba(217,181,109,.035);
  box-shadow: inset 0 0 28px rgba(217,181,109,.055);
  transition: opacity .22s ease, left .12s ease, top .12s ease, width .12s ease, height .12s ease;
}
.main-model-box .canvas-container {
  cursor: grab;
}
.main-model-box .canvas-container:active {
  cursor: grabbing;
}
.design-preview-mode .model-safe-area {
  opacity: 0;
}
.design-preview-mode .main-model-box .canvas-container {
  opacity: 0;
  pointer-events: none;
}
.design-preview-mode .quick-help strong {
  color: var(--lux-gold-2);
}

@media (max-width: 720px) {
  .stage-actions {
    width: 100%;
    align-items: stretch;
  }
  .mode-buttons {
    justify-content: center;
  }
  .mode-btn {
    flex: 1;
  }
}


.download-help {
  display: block;
  margin-top: -0.1rem;
  margin-bottom: 0.6rem;
  color: rgba(245, 239, 226, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}


#downloadSpinVideo[disabled],
#downloadPng[disabled] {
  cursor: wait;
  opacity: 0.68;
}