/* SOHAN TRADERS — Design Studio v2 */
.ds-section{padding-top:28px;}
.ds-layout{display:grid;grid-template-columns:minmax(360px,470px) minmax(0,1fr);gap:32px;align-items:start;}

/* ---- control panel ---- */
.ds-panel{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:8px 26px 26px;box-shadow:var(--shadow-sm);}
.ds-step{padding:22px 0;border-bottom:1px solid var(--grey-200);}
.ds-step h3{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-size:1.02rem;color:var(--navy);margin:0 0 16px;}
.ds-n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--electric);font-size:.82rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.ds-sub,.ds-opt>label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-800);margin:0 0 9px;}
.ds-step .field label{font-size:.82rem;font-weight:700;color:var(--navy);}
.ds-step .field{margin-bottom:14px;}
.ds-step .form-row{gap:14px;margin-bottom:0;}
.ds-hint{font-size:.78rem;color:var(--grey-600);margin:10px 0 0;}

/* garment cards */
.ds-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.ds-prod{background:var(--grey-100);border:2px solid transparent;border-radius:var(--radius-md);padding:6px 3px 8px;cursor:pointer;text-align:center;font:inherit;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);}
.ds-prod:hover{background:#e7ecf0;transform:translateY(-2px);}
.ds-prod canvas{width:100%;height:auto;display:block;pointer-events:none;}
.ds-prod strong{display:block;font-family:var(--font-head);font-size:.68rem;color:var(--navy);line-height:1.2;margin-top:4px;}
.ds-prod span{display:none;}
.ds-prod.is-active{border-color:var(--electric);background:#eaf8fe;box-shadow:0 0 0 3px rgba(0,173,239,.14);}

.ds-row{display:flex;flex-wrap:wrap;gap:16px;}
.ds-opt{flex:1;min-width:150px;}
.ds-pills{display:flex;flex-wrap:wrap;gap:8px;}
.ds-pill{border:1.5px solid var(--grey-400);background:var(--white);color:var(--navy);font:inherit;font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:100px;cursor:pointer;transition:all .15s var(--ease);}
.ds-pill:hover{border-color:var(--navy);}
.ds-pill.is-active{background:var(--navy);border-color:var(--navy);color:var(--white);}

/* colours */
.ds-themes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px;}
.ds-theme{border:1.5px solid var(--grey-200);background:var(--white);border-radius:var(--radius-md);padding:8px 4px 6px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .15s,transform .15s;}
.ds-theme:hover{border-color:var(--electric);transform:translateY(-1px);}
.ds-theme i{width:34px;height:34px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.14);}
.ds-theme span{font-size:.6rem;font-weight:700;color:var(--grey-800);line-height:1.15;text-align:center;}
.ds-zones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.ds-zone{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--grey-400);background:var(--white);color:var(--navy);font:inherit;font-size:.8rem;font-weight:700;padding:7px 14px 7px 8px;border-radius:100px;cursor:pointer;transition:all .15s var(--ease);}
.ds-zone i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);display:block;}
.ds-zone.is-active{background:var(--navy);border-color:var(--navy);color:var(--white);}
.ds-zone.is-active i{box-shadow:0 0 0 2px #fff,inset 0 0 0 1.5px rgba(0,0,0,.2);}
.ds-swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-bottom:14px;}
.ds-swatch{aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18);transition:transform .12s var(--ease);padding:0;}
.ds-swatch:hover{transform:scale(1.14);}
.ds-swatch.is-active{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--electric);transform:scale(1.04);}
.ds-custom{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.ds-custom label{font-size:.8rem;font-weight:700;color:var(--navy);}
.ds-custom input[type=color]{width:50px;height:36px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:#fff;}
.ds-custom span{font-family:var(--font-head);font-weight:700;font-size:.8rem;color:var(--navy);letter-spacing:.04em;}
.ds-check{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--grey-800);margin-top:12px;cursor:pointer;}
.ds-check input{width:17px;height:17px;accent-color:var(--electric);cursor:pointer;}

/* patterns */
.ds-patterns{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.ds-pattern{border:2px solid transparent;background:var(--grey-100);border-radius:var(--radius-md);padding:6px 4px 7px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s var(--ease);}
.ds-pattern:hover{background:#e7ecf0;}
.ds-pattern canvas{width:100%;max-width:56px;height:auto;border-radius:8px;display:block;pointer-events:none;}
.ds-pattern span{font-size:.66rem;font-weight:700;color:var(--navy);}
.ds-pattern.is-active{border-color:var(--electric);background:#eaf8fe;}

.ds-link-btn{background:none;border:none;color:var(--link-blue);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px;}
.ds-link-btn:hover{color:var(--navy);}
.ds-actions{display:flex;flex-direction:column;gap:12px;padding-top:24px;align-items:stretch;}
.ds-actions .ds-link-btn{align-self:center;}
.ds-panel .placeholder-note{margin-top:14px;}

/* ---- stage ---- */
.ds-stage{position:sticky;top:calc(var(--header-h-compact) + 18px);}
.ds-stage-inner{background:var(--navy-deep);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px;}
.ds-canvas-frame{position:relative;border-radius:var(--radius-md);overflow:hidden;background:#e6ecf1;width:100%;max-width:max(320px,calc((100vh - 250px) * .889));margin:0 auto;}
.ds-canvas-frame canvas{width:100%;height:auto;display:block;}
.ds-tag{position:absolute;top:14px;left:14px;background:rgba(10,46,64,.82);color:var(--electric);font-family:var(--font-head);font-weight:800;font-size:.66rem;letter-spacing:.12em;padding:6px 12px;border-radius:100px;border:1px solid rgba(0,173,239,.45);}
.ds-views{display:flex;align-items:center;gap:12px;margin-top:16px;}
.ds-view{background:rgba(255,255,255,.07);border:2px solid transparent;border-radius:var(--radius-md);padding:6px 10px 6px 6px;cursor:pointer;display:flex;align-items:center;gap:8px;font:inherit;color:rgba(255,255,255,.75);transition:all .15s var(--ease);}
.ds-view canvas{width:44px;height:auto;display:block;border-radius:8px;background:#e6ecf1;pointer-events:none;}
.ds-view span{font-family:var(--font-head);font-size:.8rem;font-weight:800;letter-spacing:.04em;}
.ds-view:hover{background:rgba(255,255,255,.12);}
.ds-view.is-active{border-color:var(--electric);color:#fff;background:rgba(0,173,239,.14);}
.ds-summary{margin-left:auto;font-size:.76rem;color:rgba(255,255,255,.62);text-align:right;line-height:1.35;max-width:210px;}

@media (max-width:1100px){
  .ds-layout{grid-template-columns:minmax(340px,430px) 1fr;gap:24px;}
}
@media (max-width:960px){
  .ds-layout{grid-template-columns:minmax(0,1fr);gap:20px;}
  .ds-stage{position:sticky;top:var(--header-h-compact);z-index:20;order:-1;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
  .ds-stage-inner{border-radius:0 0 var(--radius-md) var(--radius-md);padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:16px;}
  .ds-canvas-frame{width:auto;flex:0 1 auto;max-width:none;margin:0;}
  .ds-canvas-frame canvas{width:auto;height:min(300px,38vh);aspect-ratio:8/9;}
  .ds-tag{display:none;}
  .ds-views{flex-direction:column;align-items:stretch;margin-top:0;gap:10px;}
  .ds-summary{display:none;}
}
@media (max-width:560px){
  .ds-panel{padding:4px 16px 20px;}
  .ds-themes{grid-template-columns:repeat(5,1fr);}
  .ds-patterns{grid-template-columns:repeat(3,1fr);}
  .ds-swatches{grid-template-columns:repeat(6,1fr);}
  .ds-step .form-row{grid-template-columns:1fr;}
  .ds-canvas-frame canvas{height:min(210px,30vh);}
  .ds-view{padding:5px 12px 5px 5px;}
  .ds-view canvas{width:36px;}
}