/* Stack layout: 2D on top, 3D below */
#mug-designer-wrapper{
  display: block;
  max-width: 100%;
}

.md-auth-required{
  border:1px solid #ddd;
  padding:16px;
  border-radius:10px;
  background:#fafafa;
  max-width:900px;
}

.md-auth-required .button{
  margin-right:10px;
}

.md-design-meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0 14px;
  flex-wrap:wrap;
}

#md-design-title{
  min-width:260px;
  padding:8px 10px;
}

.md-my-designs{
  margin: 0 0 14px;
}

.md-design-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:1300px;
}

.md-design-item{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #e2e2e2;
  border-radius:10px;
  padding:8px;
  background:#fff;
}

.md-design-thumb{
  width:90px;
  height:42px;
  object-fit:cover;
  border:1px solid #ddd;
  border-radius:6px;
  background:#f5f5f5;
}

.md-design-meta2{
  flex:1;
  min-width:200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.md-design-title{
  font-weight:600;
}

.md-design-actions{
  display:flex;
  gap:8px;
}

.md-design-empty{
  color:#666;
  font-style:italic;
}

.md-view-cart{
  margin-left:10px;
}

.md-note{
  margin-top:8px;
  color:#666;
  font-size:13px;
}

/* Keep everything aligned left */
#mug-designer-left,
#mug-designer-right{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Controls row */
.md-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}

/* Center the canvas inside its own area? NO — keep left aligned */
#mug-designer-left{
  text-align:left;
}

/* Fabric wrapper + canvases fixed to correct size */
#mug-designer-left .canvas-container{
  width:1300px !important;
  height:560px !important;
  margin: 0 !important;              /* LEFT aligned */
  display:block;
}

#mug-designer-left .canvas-container canvas{
  width:1300px !important;
  height:560px !important;
}

/* 2D canvas */
#mug-designer-left canvas#design-canvas{
  border:1px solid #ccc;
  background:#f5f5f5;
  display:block;
  width:1300px !important;
  height:560px !important;
  max-width:none !important;
}

/* 3D container: SAME width as 2D (1300px) and aligned left */
#mug-3d-container{
  width:1300px;
  max-width:100%;
  min-height:560px;
  border:1px solid #ccc;
  background:#f7f7f7;
  margin: 0;                         /* LEFT aligned */
}

/* Optional: spacing between blocks */
#mug-designer-right{
  margin-top: 20px;
}