/* Customer designer layout-only CSS
   Keep canvas/options/checkout/layers/clipart UI here so tshirts.css stays shared. */

/* Clipart folder tabs */
.clipartTabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 2px 0 2px;
  margin-bottom:10px;
  border-top:1px solid rgba(15,23,42,.08);
}
.clipTabBtn{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.clipTabBtn.active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.clipFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.08);
}
.clipCount{ font-size:12px; opacity:.75; }


/* Designer startup loading popup */
.designerLoadingOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(248,250,252,.92);
  backdrop-filter:blur(10px);
  opacity:1;
  pointer-events:auto;
  transition:opacity .22s ease, visibility .22s ease;
}
.designerLoadingOverlay.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.designerLoadingCard{
  width:min(420px, calc(100vw - 48px));
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 80px rgba(15,23,42,.18);
  padding:28px;
  text-align:center;
}
.designerLoadingSpinner{
  width:54px;
  height:54px;
  margin:0 auto 16px;
  border-radius:999px;
  border:5px solid rgba(15,23,42,.10);
  border-top-color:#0f172a;
  animation:designerLoadingSpin .8s linear infinite;
}
.designerLoadingTitle{
  font-size:22px;
  line-height:1.15;
  font-weight:950;
  color:#0f172a;
}
.designerLoadingText{
  margin-top:8px;
  font-size:14px;
  line-height:1.4;
  color:#64748b;
}
.designerLoadingBar{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
  margin-top:18px;
}
.designerLoadingBar span{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:#0f172a;
  animation:designerLoadingBar 1.15s ease-in-out infinite;
}
.designerLoadingReload{
  margin-top:18px;
}
.designerLoadingOverlay.is-error .designerLoadingSpinner{
  animation:none;
  border-color:#fee2e2;
  border-top-color:#dc2626;
}
.designerLoadingOverlay.is-error .designerLoadingBar{
  display:none;
}
@keyframes designerLoadingSpin{
  to{ transform:rotate(360deg); }
}
@keyframes designerLoadingBar{
  0%{ transform:translateX(-120%); }
  50%{ transform:translateX(60%); }
  100%{ transform:translateX(260%); }
}

/* Page frame */
body.tshirt-customer-designer-page .container.twoCol{
  width:min(1400px, calc(100vw - 48px));
  max-width:1400px;
  min-height:calc(100vh - 132px);
  display:grid;
  grid-template-columns:minmax(620px, 1fr) minmax(360px, 420px);
  gap:20px;
  align-items:stretch;
}
body.tshirt-customer-designer-page .canvasPanel,
body.tshirt-customer-designer-page .toolsPanel{
  min-height:0;
}
body.tshirt-customer-designer-page .canvasPanel{
  display:grid;
  grid-template-rows:auto auto minmax(560px, 1fr) auto auto;
  gap:10px;
  overflow:hidden;
}
body.tshirt-customer-designer-page .toolsPanel{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  overflow:hidden;
}
body.tshirt-customer-designer-page .toolTabs{
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  white-space:nowrap;
  padding-bottom:8px;
}
body.tshirt-customer-designer-page .toolTabs .toolTab{
  flex:0 0 auto;
  min-width:auto;
  height:38px;
  padding:0 16px;
  font-size:13px;
}
body.tshirt-customer-designer-page .toolPanels{
  min-height:0;
  overflow:auto;
  padding-right:4px;
}

/* Canvas ordering */
body.tshirt-customer-designer-page .canvasOrderTopBar{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) auto minmax(320px, 1fr);
  gap:10px;
  align-items:center;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:8px;
  background:#fff;
}
body.tshirt-customer-designer-page .canvasVariantMount,
body.tshirt-customer-designer-page .canvasFaceMount{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  justify-content:flex-end;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  margin:0 !important;
  display:flex;
  align-items:center;
  gap:6px;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasOrderTopBar .small.muted{
  margin:0 !important;
  font-size:11px;
  line-height:1.1;
  white-space:nowrap;
  font-weight:800;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .input,
body.tshirt-customer-designer-page .canvasOrderTopBar select,
body.tshirt-customer-designer-page .canvasOrderTopBar input[type="number"]{
  height:34px !important;
  min-height:34px !important;
  border-radius:10px !important;
  font-size:12px !important;
  padding:0 10px !important;
}
body.tshirt-customer-designer-page #shirtColorSelect{ width:150px !important; }
body.tshirt-customer-designer-page #sizeSelect{ width:92px !important; }
body.tshirt-customer-designer-page #quantityInput{ width:70px !important; text-align:center; }
body.tshirt-customer-designer-page #skuMeta{
  flex:1 1 180px;
  min-width:0;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.tshirt-customer-designer-page .canvasQtyField{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  color:#64748b;
  white-space:nowrap;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .row{
  margin:0 !important;
  gap:6px !important;
  flex-wrap:nowrap;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .btn,
body.tshirt-customer-designer-page .canvasOrderTopBar input[type="file"]::file-selector-button{
  height:34px;
  min-height:34px;
  border-radius:10px;
  padding:0 12px;
  font-size:12px;
  font-weight:900;
}

/* Canvas itself */
body.tshirt-customer-designer-page .canvasWrap{
  position:relative;
  min-height:560px;
  height:100%;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
}
body.tshirt-customer-designer-page .canvasWrap canvas,
body.tshirt-customer-designer-page .canvasWrap .canvas-container{
  max-width:100%;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:8px;
  background:#fff;
  overflow:hidden;
}
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  height:36px;
  min-height:36px;
  border-radius:12px;
  padding:0 18px;
  font-size:13px;
  font-weight:900;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #exportPreview{
  margin-right:auto;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerBuyNow{
  order:3;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerAddToCart{
  order:2;
}
body.tshirt-customer-designer-page .canvasStatusLine{
  min-height:18px;
  font-size:12px;
  color:#64748b;
}

/* Floating canvas helpers */
.canvasFloatingActions{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:31;
  display:flex;
  gap:8px;
}
.canvasFloatingActions{
  pointer-events:none;
}
.canvasFloatBtn{
  height:36px;
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  background:rgba(255,255,255,.94);
  font-size:12px;
  pointer-events:auto;
}
.clipTrashDrop{
  right:14px;
  bottom:14px;
  width:106px;
  min-height:78px;
}

/* Layers drawer */
.layersDrawer{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:16px;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.layersDrawer.is-open{ opacity:1; pointer-events:auto; }
.layersDrawerCard{
  width:min(340px, calc(100% - 8px));
  max-height:min(76vh, 640px);
  overflow:auto;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  padding:12px;
}
.layersDrawerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.layersDrawerHead h2{ margin:0; }
.layersDrawerClose{
  appearance:none;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  flex:0 0 auto;
}
.layerPanelCard{ padding:10px; border-radius:14px; }
.layerQuickActions{ gap:6px; }
.layerQuickActions .btn{ min-height:32px; height:32px; border-radius:10px; font-size:11px; padding:0 8px; }
.layerRow{ border-radius:14px; padding:7px; }
.layerMiniBtn{ min-height:32px; height:32px; border-radius:10px; font-size:11px; }

/* Preview modal */
.designerPreviewModal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.58);
}
.designerPreviewModal.is-open{ display:flex; }
.designerPreviewCard{
  width:min(920px, 96vw);
  max-height:92vh;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.designerPreviewHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.designerPreviewClose{
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:#f1f5f9;
  font-weight:900;
  cursor:pointer;
}
.designerPreviewStage{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:#f8fafc;
}
.designerPreviewStage img{
  display:block;
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
}

@media (max-width:1100px){
  body.tshirt-customer-designer-page .container.twoCol{
    width:min(100%, calc(100vw - 24px));
    grid-template-columns:1fr;
  }
  body.tshirt-customer-designer-page .canvasPanel{
    grid-template-rows:auto auto minmax(480px, 62vh) auto auto;
  }
  body.tshirt-customer-designer-page .toolsPanel{
    min-height:520px;
  }
}
@media (max-width:760px){
  body.tshirt-customer-designer-page .container.twoCol{ width:100%; }
  body.tshirt-customer-designer-page .canvasPanel{ border-radius:0; }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr;
    gap:8px;
  }
  body.tshirt-customer-designer-page .canvasVariantMount,
  body.tshirt-customer-designer-page .canvasFaceMount{ justify-content:flex-start; }
  body.tshirt-customer-designer-page .canvasOrderTopBar .row{ flex-wrap:wrap; }
  body.tshirt-customer-designer-page .canvasPanel{
    grid-template-rows:auto auto minmax(420px, 58vh) auto auto;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    position:sticky;
    bottom:0;
    z-index:60;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{ padding:0 12px; }
  .layersDrawer{
    position:fixed;
    padding:0;
    align-items:flex-end;
    justify-content:stretch;
    background:rgba(15,23,42,.25);
  }
  .layersDrawerCard{
    width:100%;
    max-height:82vh;
    border-radius:22px 22px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  }
}


/* Designer active page final layout overrides: readable options + taller canvas */
body.tshirt-customer-designer-page .canvasPanel{
  overflow:visible !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(640px, 1fr) auto auto !important;
  gap:10px !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar{
  display:grid !important;
  grid-template-columns:minmax(360px, 1fr) auto minmax(360px, 1.05fr) !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:12px !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  background:#fff !important;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:max-content !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasOrderTopBar .small.muted,
body.tshirt-customer-designer-page .canvasQtyField{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#64748b !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page #shirtColorSelect{ width:170px !important; }
body.tshirt-customer-designer-page #sizeSelect{ width:110px !important; }
body.tshirt-customer-designer-page #quantityInput{ width:74px !important; text-align:center !important; }
body.tshirt-customer-designer-page .canvasOrderTopBar select.input,
body.tshirt-customer-designer-page .canvasOrderTopBar input.input{
  height:36px !important;
  min-height:36px !important;
  border-radius:11px !important;
  font-size:13px !important;
  padding:0 12px !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .btn,
body.tshirt-customer-designer-page .canvasOrderTopBar input[type="file"]::file-selector-button{
  height:36px !important;
  min-height:36px !important;
  border-radius:11px !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:900 !important;
}
body.tshirt-customer-designer-page #useGlobalFace{ display:none !important; }
body.tshirt-customer-designer-page #skuMeta,
body.tshirt-customer-designer-page #designerVariantStatus{
  display:none !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  min-height:640px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  flex:0 0 auto !important;
  position:static !important;
  margin:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px 12px !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  background:#fff !important;
  overflow:visible !important;
}
body.tshirt-customer-designer-page .canvasCheckoutActions,
body.tshirt-customer-designer-page .canvasCheckoutPreview{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  flex-wrap:wrap !important;
}
body.tshirt-customer-designer-page .canvasCheckoutActions{ margin-left:auto !important; justify-content:flex-end !important; }
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  height:38px !important;
  min-height:38px !important;
  border-radius:12px !important;
  padding:0 18px !important;
  font-size:13px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
@media (max-width:1180px) and (min-width:861px){
  body.tshirt-customer-designer-page .canvasPanel{
    grid-template-rows:auto auto minmax(600px, 1fr) auto auto !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    justify-content:flex-start !important;
  }
  body.tshirt-customer-designer-page .canvasWrap{ min-height:600px !important; }
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasPanel{
    grid-template-rows:auto auto minmax(460px, 58svh) auto auto !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    display:grid !important;
    grid-template-columns:1fr 1fr auto !important;
    gap:8px !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    justify-content:flex-start !important;
  }
  body.tshirt-customer-designer-page #shirtColorSelect,
  body.tshirt-customer-designer-page #sizeSelect{ width:100% !important; }
  body.tshirt-customer-designer-page .canvasWrap{
    min-height:460px !important;
    height:58svh !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    position:sticky !important;
    bottom:8px !important;
    z-index:80 !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:0 10px !important;
  }
}

/* FINAL: locked, readable canvas shirt options bar
   Area: .canvasOrderTopBar / #purchaseVariantMount / #purchaseFaceMount */
body.tshirt-customer-designer-page .canvasOrderTopBar{
  display:grid !important;
  grid-template-columns:340px 82px minmax(0, 1fr) minmax(460px, 560px) !important;
  grid-template-areas:"variants qty spacer face" !important;
  align-items:end !important;
  column-gap:14px !important;
  row-gap:8px !important;
  min-height:72px !important;
  width:100% !important;
  overflow:hidden !important;
  padding:12px 14px !important;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  grid-area:variants !important;
  display:grid !important;
  grid-template-columns:190px 130px !important;
  align-items:end !important;
  gap:12px !important;
  width:340px !important;
  min-width:340px !important;
  max-width:340px !important;
}
body.tshirt-customer-designer-page .canvasQtyField{
  grid-area:qty !important;
  display:grid !important;
  grid-template-rows:auto 36px !important;
  align-items:end !important;
  gap:5px !important;
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  grid-area:face !important;
  display:grid !important;
  grid-template-columns:minmax(150px, 1fr) minmax(150px, 1fr) 106px !important;
  align-items:end !important;
  justify-content:end !important;
  gap:10px !important;
  width:100% !important;
  min-width:460px !important;
  max-width:560px !important;
  overflow:hidden !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  display:grid !important;
  grid-template-rows:auto 36px !important;
  align-items:end !important;
  gap:5px !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasOrderTopBar .small.muted,
body.tshirt-customer-designer-page .canvasQtyField{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.05 !important;
}
body.tshirt-customer-designer-page #shirtColorSelect{
  width:190px !important;
  min-width:190px !important;
  max-width:190px !important;
}
body.tshirt-customer-designer-page #sizeSelect{
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
}
body.tshirt-customer-designer-page #quantityInput{
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  text-align:center !important;
}
body.tshirt-customer-designer-page #faceInput,
body.tshirt-customer-designer-page #designImageInput{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  color:transparent !important;
  font-size:0 !important;
  overflow:hidden !important;
}
body.tshirt-customer-designer-page #faceInput::file-selector-button,
body.tshirt-customer-designer-page #designImageInput::file-selector-button{
  color:#fff !important;
  background:#0f172a !important;
  border:0 !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:11px !important;
  padding:0 14px !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page #clearFace{
  width:106px !important;
  min-width:106px !important;
  max-width:106px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 10px !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page #skuMeta,
body.tshirt-customer-designer-page #designerVariantStatus,
body.tshirt-customer-designer-page #useGlobalFace{
  display:none !important;
}
@media (max-width:1040px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:340px 82px minmax(0, 1fr) !important;
    grid-template-areas:"variants qty spacer" "face face face" !important;
    min-height:120px !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    justify-self:end !important;
    max-width:560px !important;
  }
}
@media (max-width:640px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr 82px !important;
    grid-template-areas:"variants variants" "qty qty" "face face" !important;
    min-height:auto !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    grid-template-columns:minmax(0,1fr) 120px !important;
  }
  body.tshirt-customer-designer-page #shirtColorSelect,
  body.tshirt-customer-designer-page #sizeSelect{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    min-width:0 !important;
    max-width:none !important;
    grid-template-columns:minmax(120px, 1fr) minmax(120px, 1fr) 96px !important;
  }
  body.tshirt-customer-designer-page #clearFace{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }
}

/* FINAL REAL FIX 2026-06-13: locked customer designer layout.
   The upload controls are proxy buttons so browser file-input text cannot clip them.
   The canvas holder keeps one stable 8:9 editing stage instead of stretching by viewport height. */
body.tshirt-customer-designer-page{
  overflow-y:auto !important;
}
body.tshirt-customer-designer-page .container.twoCol{
  width:min(1280px, calc(100vw - 48px)) !important;
  max-width:1280px !important;
  margin:30px auto 46px auto !important;
  display:grid !important;
  grid-template-columns:minmax(680px, 760px) minmax(390px, 440px) !important;
  gap:20px !important;
  align-items:start !important;
}
body.tshirt-customer-designer-page .canvasPanel{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  overflow:visible !important;
  min-height:0 !important;
  height:auto !important;
}
body.tshirt-customer-designer-page .toolsPanel{
  height:calc(100vh - 190px) !important;
  min-height:680px !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  overflow:hidden !important;
}
body.tshirt-customer-designer-page .toolPanels{
  overflow:auto !important;
  min-height:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 92px !important;
  grid-template-areas:
    "variants qty"
    "uploads uploads" !important;
  gap:12px !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:12px 14px !important;
  border:1px solid #e5e7eb !important;
  border-radius:18px !important;
  background:#fff !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  grid-area:variants !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 155px !important;
  gap:12px !important;
  align-items:end !important;
  width:100% !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasQtyField{
  grid-area:qty !important;
  display:grid !important;
  grid-template-rows:auto 40px !important;
  gap:5px !important;
  align-items:end !important;
  width:92px !important;
  min-width:92px !important;
  max-width:92px !important;
  margin:0 !important;
  font-size:11px !important;
  font-weight:900 !important;
  color:#64748b !important;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  grid-area:uploads !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
}
body.tshirt-customer-designer-page .designerUploadProxyGrid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 112px !important;
  gap:10px !important;
  align-items:end !important;
  width:100% !important;
}
body.tshirt-customer-designer-page .designerUploadProxyField{
  display:grid !important;
  grid-template-rows:auto 40px !important;
  gap:5px !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .designerUploadProxyLabel,
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasOrderTopBar .small.muted{
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#64748b !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page .designerNativeUploadField{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  display:grid !important;
  grid-template-rows:auto 40px !important;
  gap:5px !important;
  min-width:0 !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page #shirtColorSelect,
body.tshirt-customer-designer-page #sizeSelect,
body.tshirt-customer-designer-page #quantityInput{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page #quantityInput{
  text-align:center !important;
}
body.tshirt-customer-designer-page .designerUploadProxyBtn,
body.tshirt-customer-designer-page #clearFace{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  border-radius:12px !important;
  padding:0 12px !important;
  font-size:12px !important;
  font-weight:950 !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  position:relative !important;
  width:100% !important;
  height:680px !important;
  min-height:680px !important;
  max-height:680px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page .canvasWrap .canvas-container{
  margin:0 !important;
  flex:0 0 auto !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
}
body.tshirt-customer-designer-page .canvasWrap canvas{
  display:block !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page #skuMeta,
body.tshirt-customer-designer-page #designerVariantStatus{
  display:none !important;
}
@media (max-width:1160px){
  body.tshirt-customer-designer-page .container.twoCol{
    width:min(100%, calc(100vw - 24px)) !important;
    grid-template-columns:1fr !important;
  }
  body.tshirt-customer-designer-page .toolsPanel{
    height:auto !important;
    min-height:620px !important;
  }
}
@media (max-width:720px){
  body.tshirt-customer-designer-page .container.twoCol{
    width:100% !important;
    margin:18px 0 34px 0 !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr !important;
    grid-template-areas:"variants" "qty" "uploads" !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    grid-template-columns:1fr !important;
  }
  body.tshirt-customer-designer-page .canvasQtyField{
    width:120px !important;
    max-width:120px !important;
  }
  body.tshirt-customer-designer-page .designerUploadProxyGrid{
    grid-template-columns:1fr !important;
  }
  body.tshirt-customer-designer-page .canvasWrap{
    height:620px !important;
    min-height:620px !important;
    max-height:620px !important;
  }
}


/* FINAL CUSTOMER CANVAS CENTER FIX 2026-06-13
   Keep the controls exactly as-is. Fix the real problem: the 800x900 Fabric stage
   was being centered by layout before scaling, which let the shirt sit low and get clipped.
   The updated responsive fitter centers the scaled Fabric wrapper absolutely.
*/
body.tshirt-customer-designer-page .canvasPanel{
  overflow:visible !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  position:relative !important;
  width:100% !important;
  height:760px !important;
  min-height:760px !important;
  max-height:760px !important;
  flex:0 0 760px !important;
  display:block !important;
  overflow:hidden !important;
  background:#fff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
}
body.tshirt-customer-designer-page .canvasWrap .canvas-container{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  margin:0 !important;
  transform-origin:center center !important;
}
body.tshirt-customer-designer-page .canvasWrap canvas,
body.tshirt-customer-designer-page .canvasWrap .upper-canvas,
body.tshirt-customer-designer-page .canvasWrap .lower-canvas{
  display:block !important;
}
body.tshirt-customer-designer-page .canvasFloatingActions{
  left:14px !important;
  bottom:14px !important;
}
body.tshirt-customer-designer-page .clipTrashDrop{
  right:14px !important;
  bottom:14px !important;
}
@media (max-width:1160px){
  body.tshirt-customer-designer-page .canvasWrap{
    height:720px !important;
    min-height:720px !important;
    max-height:720px !important;
    flex-basis:720px !important;
  }
}
@media (max-width:720px){
  body.tshirt-customer-designer-page .canvasWrap{
    height:640px !important;
    min-height:640px !important;
    max-height:640px !important;
    flex-basis:640px !important;
  }
}

/* FINAL CUSTOMER PANEL BOARD FIX 2026-06-13
   The shirt/canvas was fixed, but the visible white board was only the .canvasWrap.
   Make the whole left designer card (.canvasPanel) the board so its right edge runs
   the full length through the checkout area. Keep all buttons/layout the same. */
body.tshirt-customer-designer-page .canvasPanel{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:24px !important;
  box-shadow:0 18px 50px rgba(15,23,42,.08) !important;
  padding:16px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
@media (max-width:720px){
  body.tshirt-customer-designer-page .canvasPanel{
    padding:12px !important;
    border-radius:18px !important;
  }
}