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

/* 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(300px, 360px) !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) 106px !important;
  align-items:end !important;
  justify-content:end !important;
  gap:10px !important;
  width:100% !important;
  min-width:300px !important;
  max-width:360px !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{
  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{
  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:360px !important;
  }
}
@media (max-width:640px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr 82px !important;
    grid-template-areas:"variants variants" "qty 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) 96px !important;
  }
  body.tshirt-customer-designer-page #clearFace{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }
}