:root{
  --bg:#0b0c0f;
  --panel:#12141a;
  --panel2:#0f1116;
  --text:#e9ecf1;
  --muted:#9aa3b2;
  --border:#222633;
  --btn:#1b2230;
  --btn2:#0f1722;
  --accent:#3da8ff;
  --accent2:#7c5cff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, #07080b, var(--bg));
  color:var(--text);
}

/* ───────────────── Top Bar ───────────────── */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(10,11,14,0.7);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{ display:flex; gap:12px; align-items:center; }

.dot{
  width:12px;
  height:12px;
  border-radius:4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(61,168,255,0.35);
}

.brandTitle{ font-weight:800; }
.brandSub{ font-size:12px; color:var(--muted); }

.nav{ display:flex; gap:10px; align-items:center; }
.globalFace{ display:flex; gap:10px; align-items:center; }

/* ───────────────── Layout ───────────────── */

.container{
  max-width:1200px;
  margin:0 auto;
  padding:18px;
}

.gridHeader{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 14px;
}

.gridHeader h2{
  margin:0;
  font-size:18px;
}

.hint{
  font-size:12px;
  color:var(--muted);
}

/* ───────────────── PRODUCT GRID FIX (IMPORTANT) ───────────────── */
/* This centers ALL rows, including partial rows */

.grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* Fixed card width = consistent centering */
.card{
  width:280px;
  max-width:100%;
}

/* ───────────────── Product Card ───────────────── */

.card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(61,168,255,0.12), transparent 50%),
    linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.cardMedia{
  padding:14px 14px 0;
}

/* Fixed media height so all cards align */
.thumbWrap{
  position:relative;
  width:100%;
  height:340px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#0a0b10;
  overflow:hidden;
}

/* Thumbnail canvas must NOT scale like designer canvas */
.thumbCanvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
}

.fallbackThumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.cardBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cardTitleRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.cardTitle{ font-weight:800; }
.price{ font-weight:900; color:#fff; }

.desc{
  font-size:13px;
  color:var(--muted);
  min-height:34px;
}

.cardActions{
  display:flex;
  gap:10px;
}

/* ───────────────── Buttons ───────────────── */

.btn{
  appearance:none;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #141c2a, #0d1420);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn:hover{ border-color:#2d3a52; }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  border-color: rgba(61,168,255,0.55);
  background: linear-gradient(180deg, rgba(61,168,255,0.22), rgba(61,168,255,0.10));
}

.btn.secondary{
  background: linear-gradient(180deg, #101522, #0b101b);
}

/* ───────────────── Designer Layout ───────────────── */

/* Customer designer default: canvas left, tools right */
.twoCol{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:14px;
  grid-template-areas: "canvas tools";
}

.toolsPanel{ grid-area: tools; }
.canvasPanel{ grid-area: canvas; }

@media (max-width: 980px){
  .twoCol{
    grid-template-columns:1fr;
    grid-template-areas:
      "canvas"
      "tools";
  }
}

/* Ensure the canvas panel can't collapse to nothing */
.canvasWrap{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#080a10;
  min-height: 640px;
}


.panel{
  border:1px solid var(--border);
  border-radius:16px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding:14px;
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}

/* ───────────────── Inputs ───────────────── */

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:8px; }

.input,.select{
  width:100%;
  border:1px solid var(--border);
  background:#0a0d14;
  color:var(--text);
  padding:10px;
  border-radius:12px;
}

.select{ cursor:pointer; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* ───────────────── Editor Canvas ───────────────── */

.editorTop{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.editorTitle{ font-weight:800; }



/* ───────────────── Modal / Clipart ───────────────── */

.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}

.hidden{ display:none; }

.modalCard{
  width:min(980px, 100%);
  max-height:80vh;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--border);
}

.modalTitle{ font-weight:900; }

.clipGrid{
  padding:12px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
  overflow:auto;
}

.clipBtn{
  border:1px solid var(--border);
  background:#0a0d14;
  border-radius:14px;
  padding:8px;
  cursor:pointer;
}

.clipBtn img{
  width:100%;
  height:90px;
  object-fit:contain;
  display:block;
}

.error{
  padding:14px;
  border:1px solid #ff4d4d55;
  border-radius:14px;
  background:#ff4d4d11;
}


/* --- Tool router tabs (right panel) --- */
.toolTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 4px 0 12px 0;
}
.toolTabs .toolTab{
  padding:8px 12px;
  border-radius:12px;
}
.toolTabs .toolTab.active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}
.toolPanels{
  display:block;
}
.toolPanel{
  display:none;
}
.toolPanel.active{
  display:block;
}

/* FIX: ensure UI buttons clickable */
button, .btn { pointer-events: auto !important; }
.modal, .panel, .topbar { pointer-events: auto !important; }


/* ───────────────── Live Designer Preview Fix ───────────────── */
/*
  IMPORTANT: do not resize Fabric's <canvas> tags directly.
  The JS scales Fabric's .canvas-container with transform so the full 800x900
  editor stays visible on small screens without changing print/export math.
*/
.canvasWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.canvasWrap .canvas-container{
  flex:0 0 auto !important;
  transform-origin:center center !important;
  will-change:transform;
}

.canvasWrap canvas{
  display:block;
}

/* Desktop/tablet: keep the shirt preview visible while the right panel scrolls. */
@media (min-width: 981px){
  .twoCol{
    align-items:start;
  }

  .canvasPanel{
    position:sticky;
    top:78px;
    align-self:start;
    max-height:calc(100vh - 96px);
    overflow:hidden;
  }

  .canvasWrap{
    min-height:0;
    height:min(760px, calc(100vh - 170px));
  }

  .toolsPanel{
    min-height:calc(100vh - 120px);
  }
}

/* Single-column screens: the preview must show the entire printable box, not crop the shirt. */
@media (max-width: 980px){
  .container.twoCol{
    padding:10px;
    gap:10px;
  }

  .canvasWrap{
    min-height:0;
    height:min(72vh, 720px);
  }

  body[data-active-tool="text"] .canvasPanel,
  body[data-active-tool="background"] .canvasPanel,
  body[data-active-tool="clipart"] .canvasPanel{
    position:sticky;
    top:58px;
    z-index:9;
    padding:8px;
    border-radius:14px;
    box-shadow:0 14px 34px rgba(0,0,0,.55);
  }

  body[data-active-tool="text"] .canvasPanel .editorTop,
  body[data-active-tool="background"] .canvasPanel .editorTop,
  body[data-active-tool="clipart"] .canvasPanel .editorTop{
    margin-bottom:6px;
  }

  body[data-active-tool="text"] .canvasPanel .small.muted,
  body[data-active-tool="background"] .canvasPanel .small.muted,
  body[data-active-tool="clipart"] .canvasPanel .small.muted{
    display:none;
  }

  body[data-active-tool="text"] .canvasWrap,
  body[data-active-tool="background"] .canvasWrap,
  body[data-active-tool="clipart"] .canvasWrap{
    height:42vh;
    max-height:390px;
  }

  .toolsPanel{
    padding:12px;
  }
}

@media (max-width: 520px){
  .topbar{
    padding:10px 12px;
  }

  .container{
    padding-left:8px;
    padding-right:8px;
  }

  body[data-active-tool="text"] .canvasPanel,
  body[data-active-tool="background"] .canvasPanel,
  body[data-active-tool="clipart"] .canvasPanel{
    top:52px;
  }

  body[data-active-tool="text"] .canvasWrap,
  body[data-active-tool="background"] .canvasWrap,
  body[data-active-tool="clipart"] .canvasWrap{
    height:38vh;
    max-height:320px;
  }
}


/* ───────────────── TShirtTube shop page reset/fix ───────────────── */
body.tshirt-shop-page{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:#ffffff;
  color:#0f172a;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.tshirt-shop-page a{ color:inherit; text-decoration:none; }

.tshirt-shop-page .tst-sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:220px;
  background:#ffffff;
  border-right:1px solid #e7e7e7;
  z-index:20;
  padding:18px 14px;
}

.tshirt-shop-page .tst-logoBlock{
  height:170px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12px;
}

.tshirt-shop-page .tst-logo,
.tshirt-shop-page header img,
.tshirt-shop-page aside img,
.tshirt-shop-page .logo img{
  width:132px !important;
  max-width:132px !important;
  height:auto !important;
  max-height:132px !important;
  object-fit:contain !important;
  display:block;
}

.tshirt-shop-page .tst-sideNav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tshirt-shop-page .tst-sideNav a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:42px;
  padding:0 16px;
  border-radius:10px;
  color:#141414;
  font-size:15px;
  font-weight:500;
}

.tshirt-shop-page .tst-sideNav a.active,
.tshirt-shop-page .tst-sideNav a:hover{
  background:#f1f1f1;
}

.tshirt-shop-page .tst-topbar{
  position:sticky;
  top:0;
  z-index:15;
  height:78px;
  margin-left:220px;
  padding:16px 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #efefef;
  backdrop-filter:blur(12px);
}

.tshirt-shop-page .tst-searchWrap{
  width:min(680px, 52vw);
  height:46px;
  display:flex;
  align-items:center;
  border:1px solid #dddddd;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.tshirt-shop-page .tst-search{
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  padding:0 22px;
  font-size:15px;
  color:#111827;
  background:transparent;
}

.tshirt-shop-page .tst-searchBtn{
  width:58px;
  height:100%;
  border:0;
  border-left:1px solid #e5e5e5;
  background:#fafafa;
  font-size:22px;
  cursor:pointer;
}

.tshirt-shop-page .tst-topActions{
  position:absolute;
  right:28px;
  display:flex;
  align-items:center;
  gap:10px;
}

.tshirt-shop-page .tst-shopBtn,
.tshirt-shop-page .tst-iconBtn{
  min-height:38px;
  border:0;
  border-radius:13px;
  background:#f3f3f3;
  color:#111;
  font-weight:800;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.tshirt-shop-page .tst-iconBtn{
  width:42px;
  padding:0;
  font-size:18px;
}

.tshirt-shop-page .tst-main{
  margin-left:220px;
  padding:28px 42px 70px;
  max-width:1500px;
}

.tshirt-shop-page .tst-sectionHeader h2{
  margin:0 0 14px;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 18px;
  border-radius:10px;
  background:#eeeeee;
  color:#111;
  font-size:20px;
  font-weight:500;
}

.tshirt-shop-page .tst-productGrid,
.tshirt-shop-page .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
  gap:24px 18px;
  justify-content:start;
  align-items:start;
  max-width:1240px;
}

.tshirt-shop-page .card{
  width:auto;
  max-width:none;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.tshirt-shop-page .cardMedia{
  padding:0;
}

.tshirt-shop-page .thumbWrap{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 6.8;
  height:auto;
  min-height:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  background-color:#f7f7f7;
  background-image:linear-gradient(34deg, transparent 0 18%, #ff6b00 18% 32%, transparent 32% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.tshirt-shop-page .thumbWrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 36%, rgba(0,0,0,0.05) 100%);
  mix-blend-mode:soft-light;
}

.tshirt-shop-page .thumbCanvas,
.tshirt-shop-page .fallbackThumb{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  z-index:1;
}

.tshirt-shop-page .fallbackThumb{
  object-fit:contain;
  object-position:center;
  background:transparent;
}

.tshirt-shop-page .shopFaceOverlay{
  position:absolute;
  display:none;
  z-index:2;
  pointer-events:none;
  object-fit:contain;
  object-position:center;
  transform-origin:center center;
  border-radius:0;
}

.tshirt-shop-page .cardBody{
  padding:8px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#111;
}

.tshirt-shop-page .cardTitleRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.tshirt-shop-page .cardTitle{
  max-width:120px;
  padding:6px 14px;
  border-radius:8px;
  background:#efefef;
  color:#111;
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tshirt-shop-page .price{
  color:#111;
  font-size:11px;
  font-weight:900;
}

.tshirt-shop-page .desc,
.tshirt-shop-page .small,
.tshirt-shop-page .muted,
.tshirt-shop-page .quickCheckout{
  display:none !important;
}

.tshirt-shop-page .cardActions{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.tshirt-shop-page .btn,
.tshirt-shop-page .btn.primary,
.tshirt-shop-page .openDesigner{
  border:0;
  background:#d3d3d3;
  color:#111;
  min-width:118px;
  height:28px;
  padding:0 18px;
  border-radius:7px;
  font-size:16px;
  font-weight:400;
  line-height:1;
  box-shadow:none;
}

.tshirt-shop-page .btn:hover,
.tshirt-shop-page .openDesigner:hover{
  background:#c7c7c7;
}

@media (min-width:1400px){
  .tshirt-shop-page .tst-productGrid,
  .tshirt-shop-page .grid{
    grid-template-columns:repeat(6, 1fr);
  }
}

@media (max-width:980px){
  .tshirt-shop-page .tst-sidebar{
    display:none;
  }
  .tshirt-shop-page .tst-topbar,
  .tshirt-shop-page .tst-main{
    margin-left:0;
  }
  .tshirt-shop-page .tst-topbar{
    height:auto;
    padding:12px;
    justify-content:flex-start;
  }
  .tshirt-shop-page .tst-searchWrap{
    width:calc(100vw - 130px);
  }
  .tshirt-shop-page .tst-shopBtn{
    display:none;
  }
  .tshirt-shop-page .tst-main{
    padding:18px 12px 50px;
  }
  .tshirt-shop-page .tst-productGrid,
  .tshirt-shop-page .grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px 10px;
  }
  .tshirt-shop-page .thumbWrap{
    aspect-ratio:4 / 5.3;
  }
  .tshirt-shop-page .btn,
  .tshirt-shop-page .btn.primary,
  .tshirt-shop-page .openDesigner{
    min-width:96px;
    font-size:15px;
  }
}


/* ───────────────── Designer white theme: matches /tshirts/ shop page ───────────────── */
body.tshirt-designer-page{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --btn:#f3f4f6;
  --btn2:#f8fafc;
  --accent:#111827;
  --accent2:#d3d3d3;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:#ffffff;
  color:#0f172a;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.tshirt-designer-page a{
  color:inherit;
  text-decoration:none;
}

body.tshirt-designer-page .topbar{
  min-height:78px;
  padding:16px 34px;
  border-bottom:1px solid #efefef;
  background:rgba(255,255,255,.96);
  color:#111827;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  backdrop-filter:blur(12px);
}

body.tshirt-designer-page .brand{
  gap:12px;
}

body.tshirt-designer-page .dot{
  width:12px;
  height:12px;
  border-radius:4px;
  background:#111827;
  box-shadow:none;
}

body.tshirt-designer-page .brandTitle{
  color:#111827;
  font-weight:900;
  letter-spacing:-.02em;
}

body.tshirt-designer-page .brandSub,
body.tshirt-designer-page .muted,
body.tshirt-designer-page .small.muted,
body.tshirt-designer-page .hint{
  color:#64748b !important;
}

body.tshirt-designer-page .container{
  max-width:1500px;
  padding:28px 42px 70px;
}

body.tshirt-designer-page .twoCol{
  gap:18px;
}

body.tshirt-designer-page .panel{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

body.tshirt-designer-page .canvasPanel{
  background:#ffffff;
}

body.tshirt-designer-page .canvasWrap{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}

body.tshirt-designer-page .editorTitle,
body.tshirt-designer-page h2,
body.tshirt-designer-page h3,
body.tshirt-designer-page .modalTitle{
  color:#111827;
}

body.tshirt-designer-page hr,
body.tshirt-designer-page .divider{
  border:0;
  border-top:1px solid #e5e7eb;
}

body.tshirt-designer-page .btn{
  border:0;
  background:#f3f3f3;
  color:#111827;
  min-height:38px;
  padding:0 14px;
  border-radius:13px;
  font-weight:800;
  box-shadow:none;
}

body.tshirt-designer-page .btn:hover{
  background:#e9e9e9;
  color:#111827;
}

body.tshirt-designer-page .btn:active{
  transform:translateY(1px);
}

body.tshirt-designer-page .btn.primary,
body.tshirt-designer-page .btn.secondary{
  border:0;
  background:#f3f3f3;
  color:#111827;
}

body.tshirt-designer-page .btn.primary{
  background:#111827;
  color:#ffffff;
}

body.tshirt-designer-page .btn.primary:hover{
  background:#000000;
  color:#ffffff;
}

body.tshirt-designer-page .toolTabs{
  gap:8px;
  margin:4px 0 14px;
}

body.tshirt-designer-page .toolTabs .toolTab{
  min-height:38px;
  padding:0 14px;
  border-radius:13px;
  background:#f3f3f3;
  color:#111827;
}

body.tshirt-designer-page .toolTabs .toolTab.active{
  background:#111827;
  color:#ffffff;
  border-color:#111827;
  box-shadow:none;
}

body.tshirt-designer-page .input,
body.tshirt-designer-page .select,
body.tshirt-designer-page textarea.input,
body.tshirt-designer-page input[type="text"],
body.tshirt-designer-page input[type="number"],
body.tshirt-designer-page input[type="file"],
body.tshirt-designer-page select{
  border:1px solid #d9dde5;
  background:#ffffff;
  color:#111827;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}

body.tshirt-designer-page .input:focus,
body.tshirt-designer-page .select:focus,
body.tshirt-designer-page textarea.input:focus,
body.tshirt-designer-page input[type="text"]:focus,
body.tshirt-designer-page input[type="number"]:focus,
body.tshirt-designer-page select:focus{
  outline:2px solid rgba(17,24,39,.16);
  outline-offset:2px;
  border-color:#111827;
}

body.tshirt-designer-page input[type="color"].input{
  background:#ffffff;
  border:1px solid #d9dde5;
  overflow:hidden;
}

body.tshirt-designer-page input[type="range"]{
  accent-color:#111827;
}

body.tshirt-designer-page label,
body.tshirt-designer-page .k,
body.tshirt-designer-page .kv{
  color:#111827;
}

body.tshirt-designer-page .authBox,
body.tshirt-designer-page .error{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#111827;
}

body.tshirt-designer-page .modal{
  background:rgba(15,23,42,.35);
}

body.tshirt-designer-page .modalCard{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#111827;
  box-shadow:0 24px 80px rgba(15,23,42,.18);
}

body.tshirt-designer-page .modalHeader,
body.tshirt-designer-page .clipFooter,
body.tshirt-designer-page .clipartTabs{
  border-color:#e5e7eb;
}

body.tshirt-designer-page .clipBtn,
body.tshirt-designer-page .clipTabBtn{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#111827;
}

body.tshirt-designer-page .clipTabBtn.active{
  border-color:#111827;
  background:#111827;
  color:#ffffff;
  box-shadow:none;
}

body.tshirt-designer-page .downloads a{
  color:#111827;
  text-decoration:underline;
}

body.tshirt-designer-page .mono{
  color:#0f172a;
  background:#f1f5f9;
  border-radius:6px;
  padding:1px 4px;
}

body.tshirt-designer-page ::placeholder{
  color:#94a3b8;
}

@media (min-width:981px){
  body.tshirt-designer-page .canvasPanel{
    top:96px;
    max-height:calc(100vh - 116px);
  }

  body.tshirt-designer-page .canvasWrap{
    height:min(760px, calc(100vh - 190px));
  }
}

@media (max-width:980px){
  body.tshirt-designer-page .topbar{
    min-height:auto;
    padding:12px;
    gap:10px;
    align-items:flex-start;
  }

  body.tshirt-designer-page .nav{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  body.tshirt-designer-page .container{
    padding:18px 12px 50px;
  }

  body.tshirt-designer-page .panel{
    border-radius:16px;
  }

  body.tshirt-designer-page .toolTabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }

  body.tshirt-designer-page .toolTabs .toolTab{
    white-space:nowrap;
  }

  body.tshirt-designer-page[data-active-tool="text"] .canvasPanel,
  body.tshirt-designer-page[data-active-tool="background"] .canvasPanel,
  body.tshirt-designer-page[data-active-tool="clipart"] .canvasPanel{
    background:#ffffff;
    box-shadow:0 14px 34px rgba(15,23,42,.14);
  }
}

/* ───────────────── Poster Background Tab ───────────────── */
.posterBgPreset.active{
  border-color:rgba(15,23,42,.95) !important;
  background:#111827 !important;
  color:#ffffff !important;
}

body.tshirt-designer-page .posterBgGrid .btn{
  min-height:44px;
  white-space:normal;
  text-align:center;
}

/* ───────────────── Style BG 1000+ recipe controls ───────────────── */
body.tshirt-designer-page .styleBgTopControls{
  padding:12px;
  border:1px solid #e7e7e7;
  border-radius:16px;
  background:#fafafa;
  margin-top:12px;
}
body.tshirt-designer-page .styleBgLibraryTools{
  margin-top:14px;
}
body.tshirt-designer-page .posterBgSearch{
  width:100%;
}
body.tshirt-designer-page .posterBgCategoryChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
body.tshirt-designer-page .posterBgCategoryChip,
body.tshirt-designer-page .posterBgCategoryChips .btn{
  min-height:36px;
  padding:8px 12px;
  font-size:12px;
}
body.tshirt-designer-page .posterBgCategoryChip.active{
  background:#0f172a !important;
  color:#fff !important;
  border-color:#0f172a !important;
}
body.tshirt-designer-page .posterBgGrid{
  max-height:420px;
  overflow:auto;
  padding-right:4px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
}
body.tshirt-designer-page .posterBgGrid .btn{
  min-height:40px;
  justify-content:flex-start;
  text-align:left;
  font-size:13px;
}
body.tshirt-designer-page .posterBgPreset.active{
  background:#0f172a !important;
  color:#fff !important;
}

body.tshirt-designer-page .posterBgPreset[hidden],
body.tshirt-designer-page .posterBgGrid .btn[hidden],
body.tshirt-designer-page .posterBgPreset.is-hidden,
body.tshirt-designer-page .posterBgGrid .btn.is-hidden{
  display:none !important;
}


/* ───────────────── Shop polish: fast thumbnail cards, no fake generated backgrounds ───────────────── */
body.tshirt-shop-page .tst-main{
  padding-top:24px;
}

body.tshirt-shop-page .tst-productGrid,
body.tshirt-shop-page .grid{
  grid-template-columns:repeat(auto-fill, minmax(190px, 210px));
  gap:26px 22px;
  align-items:start;
}

body.tshirt-shop-page .card{
  width:100%;
  border-radius:18px;
  overflow:visible;
}

body.tshirt-shop-page .cardMedia{
  padding:0;
}

body.tshirt-shop-page .thumbWrap{
  width:100%;
  aspect-ratio:8 / 9;
  height:auto;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#f7f7f7 !important;
  background-image:none !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

body.tshirt-shop-page .thumbWrap::before{
  display:none !important;
}

body.tshirt-shop-page .fallbackThumb{
  object-fit:contain;
  object-position:center;
  padding:0;
}

body.tshirt-shop-page .cardBody{
  padding:9px 0 0;
  gap:7px;
}

body.tshirt-shop-page .cardTitleRow{
  min-height:22px;
}

body.tshirt-shop-page .cardTitle{
  max-width:150px;
  padding:0;
  background:transparent;
  color:#111827;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
}

body.tshirt-shop-page .price{
  color:#111827;
  font-size:12px;
  font-weight:800;
}

body.tshirt-shop-page .btn,
body.tshirt-shop-page .btn.primary,
body.tshirt-shop-page .openDesigner{
  min-width:112px;
  height:30px;
  border-radius:9px;
  background:#eeeeee;
  color:#111827;
  font-size:14px;
  font-weight:700;
}

body.tshirt-shop-page .btn:hover,
body.tshirt-shop-page .openDesigner:hover{
  background:#dedede;
}

@media (min-width:1400px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(5, 210px);
  }
}

@media (max-width:980px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px 12px;
  }

  body.tshirt-shop-page .thumbWrap{
    aspect-ratio:8 / 9;
  }
}

/* ───────────────── MASTER PATCH: Fast shop thumbnails + face overlay + product SEO page ───────────────── */
body.tshirt-shop-page .tst-main{ padding-top:24px; }

body.tshirt-shop-page .tst-productGrid,
body.tshirt-shop-page .grid{
  grid-template-columns:repeat(auto-fill, minmax(190px, 210px));
  gap:26px 22px;
  align-items:start;
}

body.tshirt-shop-page .shopProductCard,
body.tshirt-shop-page .card{
  width:100%;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

body.tshirt-shop-page .cardMedia{
  display:block;
  padding:0;
  color:inherit;
  text-decoration:none;
}

body.tshirt-shop-page .thumbWrap{
  position:relative;
  width:100%;
  aspect-ratio:8 / 9;
  height:auto;
  min-height:0;
  border:1px solid #e8e8e8;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  background:#f7f7f7 !important;
  background-image:none !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

body.tshirt-shop-page .thumbWrap::before{ display:none !important; }

body.tshirt-shop-page .fallbackThumb{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  z-index:1;
  object-fit:contain;
  object-position:center;
  background:transparent;
  pointer-events:none;
}

body.tshirt-shop-page .shopFaceOverlay{
  position:absolute;
  display:none;
  z-index:2;
  pointer-events:none;
  object-fit:contain;
  object-position:center;
  transform-origin:center center;
  border-radius:0;
}

body.tshirt-shop-page .missingPreviewText{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  color:#64748b;
  font-size:13px;
  line-height:1.25;
}

body.tshirt-shop-page .missingPreviewText span{
  font-size:11px;
  opacity:.8;
}

body.tshirt-shop-page .cardBody{
  padding:9px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#111827;
}

body.tshirt-shop-page .cardTitleRow{
  width:100%;
  min-height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

body.tshirt-shop-page .cardTitle{
  max-width:150px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#111827;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;
}

body.tshirt-shop-page .price{
  color:#111827;
  font-size:12px;
  font-weight:800;
}

body.tshirt-shop-page .desc{
  display:none !important;
}

body.tshirt-shop-page .cardActions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}

body.tshirt-shop-page .btn,
body.tshirt-shop-page .btn.primary,
body.tshirt-shop-page .openDesigner,
body.tshirt-shop-page .detailsLink{
  min-width:104px;
  height:30px;
  border:0;
  border-radius:9px;
  background:#eeeeee;
  color:#111827;
  padding:0 14px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
  text-decoration:none;
}

body.tshirt-shop-page .btn.primary,
body.tshirt-shop-page .openDesigner{
  background:#111827;
  color:#ffffff;
}

body.tshirt-shop-page .detailsLink{
  background:#f1f5f9;
  color:#334155;
}

body.tshirt-shop-page .btn:hover,
body.tshirt-shop-page .openDesigner:hover,
body.tshirt-shop-page .detailsLink:hover{
  transform:none;
  filter:brightness(.96);
}

.productDetailPage{
  margin:0;
  min-height:100vh;
  background:#f8fafc;
  color:#0f172a;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.productDetailWrap{
  max-width:980px;
  margin:0 auto;
  padding:28px 18px;
}

.productBackLink{
  display:inline-flex;
  margin-bottom:18px;
  font-weight:800;
  color:#334155;
  text-decoration:none;
}

.productDetailCard{
  display:grid;
  grid-template-columns:minmax(260px, 430px) 1fr;
  gap:28px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.productDetailImageWrap{
  border-radius:18px;
  background:#f8fafc;
  overflow:hidden;
}

.productDetailImage{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:contain;
}

.productDetailInfo h1{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.03;
}

.productDetailPrice{
  font-size:28px;
  font-weight:950;
  margin:10px 0 14px;
}

.productDetailDesc{
  color:#475569;
  line-height:1.55;
  margin-bottom:22px;
}

.productDetailActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.productDetailActions a,
.productDetailActions button{
  appearance:none;
  border:0;
  border-radius:12px;
  background:#111827;
  color:#fff;
  padding:12px 16px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}

.productDetailActions .secondary{
  background:#e2e8f0;
  color:#0f172a;
}

@media (min-width:1400px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(5, 210px);
  }
}

@media (max-width:980px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px 12px;
  }

  body.tshirt-shop-page .thumbWrap{ aspect-ratio:8 / 9; }

  body.tshirt-shop-page .detailsLink{ display:none; }
}

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

/* ───────────────── Face cutout processing overlay ───────────────── */
.tst-face-cutout-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.68);
  backdrop-filter:blur(8px);
  padding:22px;
}
.tst-face-cutout-overlay.is-visible{ display:flex; }
.tst-face-cutout-card{
  width:min(420px, 92vw);
  border-radius:24px;
  background:#fff;
  color:#0f172a;
  text-align:center;
  padding:30px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  border:1px solid rgba(226,232,240,.9);
}
.tst-face-cutout-spinner{
  width:56px;
  height:56px;
  margin:0 auto 18px;
  border-radius:999px;
  border:6px solid #e2e8f0;
  border-top-color:#111827;
  animation:tstFaceCutoutSpin .85s linear infinite;
}
.tst-face-cutout-title{
  font-size:22px;
  font-weight:950;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.tst-face-cutout-subtitle{
  font-size:14px;
  color:#64748b;
  line-height:1.45;
}
@keyframes tstFaceCutoutSpin{ to{ transform:rotate(360deg); } }

/* Product detail face preview overlay */
.productDetailImageWrap{
  position:relative;
  aspect-ratio:8 / 9;
}
.productDetailPreviewBox{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:18px;
  background:#f8fafc;
}
.productDetailPreviewBox .productDetailImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.productDetailFaceOverlay{
  position:absolute;
  z-index:2;
  display:none;
  pointer-events:none;
  object-fit:contain;
  object-position:center;
  transform-origin:center center;
  border-radius:0;
}
.productFaceUploadBtn{
  appearance:none;
  border:0;
  border-radius:12px;
  background:#111827;
  color:#fff;
  padding:12px 16px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* ───────────────── Face overlay reliability fix ───────────────── */
body.tshirt-shop-page .thumbWrap,
.productDetailHeroMedia,
.productDetailPreviewWrap{
  position:relative;
}

body.tshirt-shop-page .shopFaceOverlay,
#productDetailFaceOverlay{
  position:absolute !important;
  display:none;
  z-index:50 !important;
  pointer-events:none;
  object-fit:contain !important;
  object-position:center center !important;
  transform-origin:center center !important;
  border-radius:0 !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
}

body.tshirt-shop-page .shopFaceOverlay.is-active,
#productDetailFaceOverlay.is-active{
  display:block !important;
}

/* Face upload status toast */
.tst-face-upload-status{
  position:fixed;
  left:50%;
  top:18px;
  transform:translate(-50%, -12px);
  z-index:1000000;
  max-width:min(560px, calc(100vw - 28px));
  padding:12px 16px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  box-shadow:0 18px 48px rgba(15,23,42,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  text-align:center;
}
.tst-face-upload-status.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}
.tst-face-upload-status[data-type="success"]{ background:#065f46; }
.tst-face-upload-status[data-type="error"]{ background:#991b1b; }

body.tshirt-shop-page .shopFaceOverlay,
#productDetailFaceOverlay{
  z-index:999 !important;
  mix-blend-mode:normal !important;
}

/* ───────────────── Product card system: final clean version ───────────────── */
body.tshirt-shop-page .tst-productGrid,
body.tshirt-shop-page .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 184px));
  gap:28px 18px;
  justify-content:start;
  align-items:start;
  max-width:1240px;
}

body.tshirt-shop-page .shopProductCard,
body.tshirt-shop-page .card{
  width:100%;
  max-width:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

body.tshirt-shop-page .cardMedia{
  display:block;
  padding:0;
  color:inherit;
  text-decoration:none;
}

body.tshirt-shop-page .thumbWrap{
  position:relative;
  width:100%;
  aspect-ratio:3 / 5;
  height:auto;
  min-height:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  background:#111827;
  box-shadow:0 10px 24px rgba(15,23,42,.11);
}

body.tshirt-shop-page .thumbWrap::before,
body.tshirt-shop-page .thumbWrap::after{
  content:none !important;
  display:none !important;
}

body.tshirt-shop-page .cardArtBg{
  position:absolute;
  inset:-8%;
  z-index:0;
  display:block;
  width:auto;
  height:auto;
  pointer-events:none;
  user-select:none;
  background-image:var(--card-bg-url, none);
  background-size:cover;
  background-position:var(--card-bg-position, center center);
  background-repeat:no-repeat;
  filter:var(--card-bg-filter, saturate(1.12) contrast(1.05) brightness(1.02));
  transform:scale(1.08);
}

body.tshirt-shop-page .previewFrame{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  height:112%;
  aspect-ratio:8 / 9;
  transform:translate(-50%, -50%);
  pointer-events:none;
  overflow:visible;
}

body.tshirt-shop-page .fallbackThumb{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  z-index:2;
  object-fit:fill;
  object-position:center center;
  padding:0;
  pointer-events:none;
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

body.tshirt-shop-page .shopFaceOverlay{
  position:absolute !important;
  display:none;
  z-index:4 !important;
  pointer-events:none;
  object-fit:contain !important;
  object-position:center center !important;
  transform-origin:center center !important;
  border-radius:0 !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

body.tshirt-shop-page .shopFaceOverlay.is-active{
  display:block !important;
}

body.tshirt-shop-page .missingPreviewText{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  color:#64748b;
  font-size:13px;
  line-height:1.25;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(5px);
}

body.tshirt-shop-page .missingPreviewText.is-visible{
  display:flex !important;
}

body.tshirt-shop-page .cardBody{
  padding:8px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#111827;
}

body.tshirt-shop-page .cardTitleRow{
  width:100%;
  min-height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

body.tshirt-shop-page .cardTitle{
  max-width:116px;
  padding:4px 12px;
  border-radius:7px;
  background:#eeeeee;
  color:#111827;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;
}

body.tshirt-shop-page .price{
  color:#111827;
  font-size:11px;
  font-weight:900;
}

body.tshirt-shop-page .desc,
body.tshirt-shop-page .detailsLink,
body.tshirt-shop-page .quickCheckout{
  display:none !important;
}

body.tshirt-shop-page .cardActions{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:0;
}

body.tshirt-shop-page .btn,
body.tshirt-shop-page .btn.primary,
body.tshirt-shop-page .openDesigner{
  min-width:112px;
  height:30px;
  border:0;
  border-radius:8px;
  background:#111827;
  color:#ffffff;
  padding:0 16px;
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:none;
  text-decoration:none;
}

body.tshirt-shop-page .btn:hover,
body.tshirt-shop-page .openDesigner:hover{
  transform:none;
  filter:brightness(.96);
}

@media (min-width:1400px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(6, 184px);
  }
}

@media (max-width:980px){
  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px 12px;
  }
  body.tshirt-shop-page .thumbWrap{
    aspect-ratio:3 / 4.85;
  }
  body.tshirt-shop-page .previewFrame{
    height:110%;
  }
}

/* ───────────────── Product card design-zoom + aligned face overlays ───────────────── */
body.tshirt-shop-page .thumbWrap{
  position:relative;
  overflow:hidden;
}

body.tshirt-shop-page .designZoomStage{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transform:scale(1);
  background:var(--design-zoom-bg, #1f2937);
  border-radius:inherit;
}

body.tshirt-shop-page .designZoomFrame{
  position:absolute;
  left:50%;
  top:50%;
  height:82%;
  max-width:86%;
  aspect-ratio:14 / 16;
  transform:translate(-50%, -50%);
  pointer-events:none;
  overflow:visible;
}

body.tshirt-shop-page .designZoomThumb{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:fill;
  object-position:center center;
  background:transparent !important;
  pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));
}

body.tshirt-shop-page .previewFrame{
  transition:opacity .42s ease, transform .42s ease;
}

body.tshirt-shop-page .has-design-zoom .designZoomStage{
  animation:tstDesignZoomStage var(--design-zoom-duration, 8s) ease-in-out infinite;
  animation-delay:var(--design-zoom-delay, 0s);
}

body.tshirt-shop-page .has-design-zoom .previewFrame{
  animation:tstShirtPreviewStage var(--design-zoom-duration, 8s) ease-in-out infinite;
  animation-delay:var(--design-zoom-delay, 0s);
}

body.tshirt-shop-page .has-design-zoom:hover .designZoomStage,
body.tshirt-shop-page .has-design-zoom:focus-within .designZoomStage{
  animation:none;
  opacity:1;
}

body.tshirt-shop-page .has-design-zoom:hover .previewFrame,
body.tshirt-shop-page .has-design-zoom:focus-within .previewFrame{
  animation:none;
  opacity:0;
}

body.tshirt-shop-page .shopFaceOverlayMain{
  z-index:4 !important;
}

body.tshirt-shop-page .shopFaceOverlayZoom{
  z-index:5 !important;
}

@keyframes tstDesignZoomStage{
  0%, 48%, 100%{ opacity:0; transform:scale(1); }
  56%, 82%{ opacity:1; transform:scale(1); }
}

@keyframes tstShirtPreviewStage{
  0%, 48%, 100%{ opacity:1; transform:translate(-50%, -50%); }
  56%, 82%{ opacity:0; transform:translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce){
  body.tshirt-shop-page .has-design-zoom .designZoomStage,
  body.tshirt-shop-page .has-design-zoom .previewFrame{
    animation:none !important;
  }
}

/* ───────────────── Mobile optimization: shop + designers ───────────────── */
@media (max-width: 820px){
  body.tshirt-shop-page{
    width:100%;
    overflow-x:hidden;
  }

  body.tshirt-shop-page .tst-sidebar{
    display:none !important;
  }

  body.tshirt-shop-page .tst-topbar{
    margin-left:0 !important;
    min-height:0;
    height:auto;
    padding:10px 10px 8px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"search actions";
    align-items:center;
    justify-content:stretch;
    gap:8px;
  }

  body.tshirt-shop-page .tst-searchWrap{
    grid-area:search;
    width:100% !important;
    min-width:0;
    height:44px;
  }

  body.tshirt-shop-page .tst-search{
    font-size:14px;
    padding:0 14px;
  }

  body.tshirt-shop-page .tst-searchBtn{
    width:44px;
    font-size:19px;
    flex:0 0 44px;
  }

  body.tshirt-shop-page .tst-topActions{
    grid-area:actions;
    position:static !important;
    right:auto !important;
    display:flex;
    gap:6px;
    min-width:0;
  }

  body.tshirt-shop-page .tst-iconBtn{
    width:42px;
    height:42px;
    min-height:42px;
    border-radius:14px;
    flex:0 0 42px;
  }

  body.tshirt-shop-page .tst-shopBtn{
    display:none !important;
  }

  body.tshirt-shop-page .tst-main{
    margin-left:0 !important;
    padding:18px 10px 72px !important;
    max-width:none;
  }

  body.tshirt-shop-page .tst-sectionHeader h2{
    margin-bottom:12px;
    font-size:18px;
    min-height:30px;
    padding:0 16px;
  }

  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    width:100%;
    max-width:none;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px 10px !important;
    justify-content:stretch !important;
  }

  body.tshirt-shop-page .thumbWrap{
    aspect-ratio:3 / 4.95 !important;
    border-radius:12px;
  }

  body.tshirt-shop-page .previewFrame{
    height:113%;
  }

  body.tshirt-shop-page .designZoomFrame{
    height:82%;
    max-width:86%;
  }

  body.tshirt-shop-page .cardBody{
    padding-top:7px;
    gap:6px;
  }

  body.tshirt-shop-page .cardTitleRow{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
    align-items:center;
    justify-content:stretch;
  }

  body.tshirt-shop-page .cardTitle{
    max-width:100%;
    width:100%;
    text-align:center;
    font-size:12px;
    padding:5px 8px;
  }

  body.tshirt-shop-page .price{
    font-size:11px;
    white-space:nowrap;
  }

  body.tshirt-shop-page .btn,
  body.tshirt-shop-page .btn.primary,
  body.tshirt-shop-page .openDesigner{
    width:min(132px, 92%);
    min-width:0;
    height:34px;
    border-radius:10px;
    font-size:14px;
    padding:0 12px;
  }
}

@media (max-width: 420px){
  body.tshirt-shop-page .tst-topbar{
    grid-template-columns:1fr auto;
    gap:6px;
    padding-left:8px;
    padding-right:8px;
  }

  body.tshirt-shop-page .tst-searchWrap{
    height:42px;
  }

  body.tshirt-shop-page .tst-search{
    font-size:13px;
    padding:0 12px;
  }

  body.tshirt-shop-page .tst-searchBtn{
    display:none;
  }

  body.tshirt-shop-page .tst-iconBtn{
    width:40px;
    height:40px;
    min-height:40px;
    flex-basis:40px;
  }

  body.tshirt-shop-page .tst-main{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  body.tshirt-shop-page .tst-productGrid,
  body.tshirt-shop-page .grid{
    gap:22px 8px !important;
  }

  body.tshirt-shop-page .cardTitleRow{
    grid-template-columns:1fr;
    gap:4px;
  }

  body.tshirt-shop-page .price{
    text-align:center;
  }

  body.tshirt-shop-page .btn,
  body.tshirt-shop-page .btn.primary,
  body.tshirt-shop-page .openDesigner{
    width:100%;
    max-width:128px;
    height:34px;
    font-size:13px;
  }
}

@media (max-width: 860px){
  body.tshirt-designer-page{
    width:100%;
    overflow-x:hidden;
  }

  body.tshirt-designer-page .topbar{
    position:sticky;
    top:0;
    z-index:50;
    min-height:0;
    padding:10px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
  }

  body.tshirt-designer-page .brand{
    min-width:0;
  }

  body.tshirt-designer-page .brandTitle{
    font-size:17px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.tshirt-designer-page .brandSub{
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:52vw;
  }

  body.tshirt-designer-page .nav{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }

  body.tshirt-designer-page .nav .btn{
    min-height:38px;
    padding:0 12px;
    border-radius:13px;
    font-size:13px;
    white-space:nowrap;
  }

  body.tshirt-designer-page .container.twoCol,
  body.tshirt-designer-page .twoCol{
    display:grid;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "canvas"
      "tools" !important;
    gap:12px;
    width:100%;
    max-width:none;
    padding:12px 10px 76px !important;
  }

  body.tshirt-designer-page .canvasPanel{
    grid-area:canvas;
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:10px;
    border-radius:16px;
  }

  body.tshirt-designer-page .toolsPanel{
    grid-area:tools;
    min-height:0;
    padding:12px;
    border-radius:16px;
  }

  body.tshirt-designer-page .editorTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }

  body.tshirt-designer-page .editorTitle{
    font-size:16px;
    font-weight:900;
  }

  body.tshirt-designer-page .editorTop .small,
  body.tshirt-designer-page .editorTop .muted{
    font-size:11px;
    text-align:right;
  }

  body.tshirt-designer-page .canvasWrap{
    height:min(62svh, 560px) !important;
    min-height:330px !important;
    max-height:none !important;
    border-radius:16px;
  }

  body.tshirt-designer-page .toolTabs{
    position:sticky;
    top:58px;
    z-index:35;
    display:flex;
    flex-wrap:nowrap !important;
    gap:8px;
    margin:0 -12px 12px;
    padding:10px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid #eef2f7;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.tshirt-designer-page .toolTabs::-webkit-scrollbar{
    display:none;
  }

  body.tshirt-designer-page .toolTabs .toolTab{
    flex:0 0 auto;
    min-height:40px;
    padding:0 14px;
    font-size:13px;
    white-space:nowrap;
  }

  body.tshirt-designer-page .toolPanel h2{
    font-size:20px;
    margin:14px 0 10px;
  }

  body.tshirt-designer-page .row{
    gap:8px;
  }

  body.tshirt-designer-page .row .btn,
  body.tshirt-designer-page .row button,
  body.tshirt-designer-page label.btn{
    flex:1 1 calc(50% - 8px);
    min-width:132px;
  }

  body.tshirt-designer-page .input,
  body.tshirt-designer-page .select,
  body.tshirt-designer-page textarea.input,
  body.tshirt-designer-page input[type="text"],
  body.tshirt-designer-page input[type="number"],
  body.tshirt-designer-page input[type="file"],
  body.tshirt-designer-page select{
    min-height:44px;
    font-size:16px;
  }

  body.tshirt-designer-page input[type="range"]{
    min-height:32px;
  }

  body.tshirt-designer-page .posterBgGrid,
  body.tshirt-designer-page .clipGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-height:360px;
  }

  body.tshirt-designer-page .modalCard{
    width:min(96vw, 720px);
    max-height:88svh;
    overflow:auto;
    border-radius:18px;
  }
}

@media (max-width: 480px){
  body.tshirt-designer-page .topbar{
    grid-template-columns:1fr;
    align-items:start;
  }

  body.tshirt-designer-page .brandSub{
    display:none;
  }

  body.tshirt-designer-page .nav{
    width:100%;
    justify-content:stretch;
  }

  body.tshirt-designer-page .nav .btn{
    flex:1;
    justify-content:center;
  }

  body.tshirt-designer-page .container.twoCol,
  body.tshirt-designer-page .twoCol{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  body.tshirt-designer-page .canvasWrap{
    height:min(56svh, 470px) !important;
    min-height:300px !important;
  }

  body.tshirt-designer-page .toolTabs{
    top:94px;
  }

  body.tshirt-designer-page .row .btn,
  body.tshirt-designer-page .row button,
  body.tshirt-designer-page label.btn{
    flex:1 1 100%;
    min-width:0;
  }

  body.tshirt-designer-page .posterBgGrid,
  body.tshirt-designer-page .clipGrid{
    grid-template-columns:1fr !important;
  }
}

@media (orientation:landscape) and (max-height:520px){
  body.tshirt-designer-page .canvasWrap{
    height:72svh !important;
    min-height:260px !important;
  }

  body.tshirt-designer-page .toolTabs{
    position:relative;
    top:auto;
  }
}


/* ───────────────── Shop face upload: single button ───────────────── */
body.tshirt-shop-page .tst-singleFaceUpload{
  width:min(760px, 100%);
  margin:0 0 22px;
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

body.tshirt-shop-page .tst-singleFaceCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#111827;
}

body.tshirt-shop-page .tst-singleFaceCopy strong{
  font-size:15px;
  font-weight:950;
  letter-spacing:-.01em;
}

body.tshirt-shop-page .tst-singleFaceCopy span{
  max-width:560px;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}

body.tshirt-shop-page .tst-uploadFaceBtn{
  flex:0 0 auto;
  min-width:128px;
  height:36px;
  cursor:pointer;
}

@media (max-width:820px){
  body.tshirt-shop-page .tst-singleFaceUpload{
    margin-bottom:18px;
    padding:13px;
    border-radius:16px;
    align-items:stretch;
    flex-direction:column;
  }

  body.tshirt-shop-page .tst-uploadFaceBtn{
    width:100%;
    min-width:0;
  }
}

/* ───────────────── Homepage carousel marketplace + simple card buy button ───────────────── */
body.tshirt-shop-page .tst-sectionHeader{
  display:none !important;
}

body.tshirt-shop-page #productsGrid.tst-productGrid,
body.tshirt-shop-page #productsGrid.grid{
  display:block !important;
  width:100%;
  max-width:1240px;
}

body.tshirt-shop-page .tst-carouselSection{
  margin:26px 0 34px;
}

body.tshirt-shop-page .tst-carouselHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}

body.tshirt-shop-page .tst-carouselHeader h2{
  margin:0;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 18px;
  border-radius:10px;
  background:#eeeeee;
  color:#111;
  font-size:20px;
  font-weight:800;
}

body.tshirt-shop-page .tst-carouselTrack{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x proximity;
  scroll-padding-left:2px;
  padding:0 2px 12px;
  -webkit-overflow-scrolling:touch;
}

body.tshirt-shop-page .tst-carouselTrack::-webkit-scrollbar{
  height:8px;
}

body.tshirt-shop-page .tst-carouselTrack::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:999px;
}

body.tshirt-shop-page .tst-carouselTrack .shopProductCard{
  flex:0 0 184px;
  width:184px;
  scroll-snap-align:start;
}

body.tshirt-shop-page .cardActions{
  gap:8px !important;
}

body.tshirt-shop-page .btn,
body.tshirt-shop-page .btn.primary,
body.tshirt-shop-page .openDesigner,
body.tshirt-shop-page .buyNowLink{
  min-width:88px !important;
  height:30px;
  border:0;
  border-radius:8px;
  padding:0 12px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

body.tshirt-shop-page .buyNowLink{
  background:#eeeeee !important;
  color:#111827 !important;
}

body.tshirt-shop-page .detailsLink{
  display:none !important;
}

body.tshirt-designer-page .tst-adminPlacementBox{
  margin:14px 0;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#f8fafc;
}

body.tshirt-designer-page .tst-adminPlacementBox h3{
  margin:0 0 6px;
}

body.tshirt-designer-page .tst-adminSectionChecks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

body.tshirt-designer-page .tst-adminSectionChecks label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  font-weight:800;
  font-size:12px;
}

@media (max-width: 820px){
  body.tshirt-shop-page #productsGrid.tst-productGrid,
  body.tshirt-shop-page #productsGrid.grid{
    max-width:none;
  }

  body.tshirt-shop-page .tst-carouselSection{
    margin:22px 0 30px;
  }

  body.tshirt-shop-page .tst-carouselHeader h2{
    font-size:18px;
    min-height:30px;
    padding:0 16px;
  }

  body.tshirt-shop-page .tst-carouselTrack{
    gap:10px;
    padding-bottom:10px;
  }

  body.tshirt-shop-page .tst-carouselTrack .shopProductCard{
    flex-basis:calc((100vw - 34px) / 2);
    width:calc((100vw - 34px) / 2);
  }

  body.tshirt-shop-page .cardActions{
    gap:6px !important;
  }

  body.tshirt-shop-page .btn,
  body.tshirt-shop-page .btn.primary,
  body.tshirt-shop-page .openDesigner,
  body.tshirt-shop-page .buyNowLink{
    min-width:0 !important;
    width:calc(50% - 3px) !important;
    max-width:none !important;
    padding:0 8px;
    font-size:12px;
  }
}

@media (max-width: 520px){
  body.tshirt-designer-page .tst-adminSectionChecks{
    grid-template-columns:1fr;
  }
}

/* ───────────────── Approved shirt face layer fix ─────────────────
   Buyer-uploaded faces sit above the flat shirt preview, then this transparent
   text-only layer is drawn above the face so text stays on top like Admin. */
body.tshirt-shop-page .shopTextTopLayer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:none;
  z-index:1001 !important;
  pointer-events:none !important;
  object-fit:fill !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
body.tshirt-shop-page .shopTextTopLayer.is-active{
  display:block !important;
}
body.tshirt-shop-page .shopFaceOverlayMain,
body.tshirt-shop-page .shopFaceOverlayZoom{
  z-index:1000 !important;
}
.productDetailPreviewBox .productDetailTextTopLayer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:1001 !important;
  display:block !important;
  pointer-events:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
}
.productDetailPreviewBox .productDetailFaceOverlay{
  z-index:1000 !important;
}

/* =========================================================
   TShirtTube shop cleanup: one flattened WebP card thumbnail
   plus one live face overlay. Admin publish now creates the
   card thumbnail, so the shop no longer rebuilds card art.
   ========================================================= */
body.tshirt-shop-page #productsGrid.tst-simpleShopGrid,
body.tshirt-shop-page #productsGrid.grid.tst-simpleShopGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:22px;
  align-items:start;
}

body.tshirt-shop-page .simpleThumbWrap{
  position:relative;
  overflow:hidden;
  aspect-ratio:1 / 1.18;
  background:#fff;
  border-radius:22px;
}

body.tshirt-shop-page .simpleThumbWrap::before,
body.tshirt-shop-page .simpleThumbWrap::after,
body.tshirt-shop-page .simpleThumbWrap .cardArtBg,
body.tshirt-shop-page .simpleThumbWrap .designZoomStage,
body.tshirt-shop-page .simpleThumbWrap .shopTextTopLayer{
  display:none !important;
}

body.tshirt-shop-page .simplePreviewFrame{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  opacity:1;
  transform:none;
  background:transparent;
}

body.tshirt-shop-page .productThumbWebp{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:transparent;
  transform:none;
  filter:none;
}

body.tshirt-shop-page .simpleThumbWrap .shopFaceOverlay{
  position:absolute;
  z-index:3;
  pointer-events:none;
  object-fit:contain;
  object-position:center;
  display:none;
  transform-origin:center center;
}

body.tshirt-shop-page .simpleThumbWrap .shopFaceOverlay.is-active{
  display:block;
}

body.tshirt-shop-page .shopProductCard.has-design-zoom .designZoomStage,
body.tshirt-shop-page .shopProductCard.has-design-zoom .previewFrame,
body.tshirt-shop-page .shopProductCard.has-design-zoom:hover .designZoomStage,
body.tshirt-shop-page .shopProductCard.has-design-zoom:hover .previewFrame{
  opacity:1;
  transform:none;
}

/* =========================================================
   TShirtTube fixed product-card sizing for flattened WebP cards
   Prevents a single published shirt from stretching across the shop page.
   ========================================================= */
body.tshirt-shop-page #productsGrid.tst-simpleShopGrid,
body.tshirt-shop-page #productsGrid.grid.tst-simpleShopGrid{
  width:100% !important;
  max-width:1120px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(220px, 250px)) !important;
  justify-content:start !important;
  align-items:start !important;
  gap:22px !important;
}

body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .shopProductCard{
  width:100% !important;
  max-width:250px !important;
  min-width:0 !important;
  align-self:start !important;
  justify-self:start !important;
}

body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .cardMedia{
  display:block !important;
  width:100% !important;
}

body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .simpleThumbWrap{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 5 !important;
  max-height:none !important;
}

body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .simplePreviewFrame,
body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .productThumbWebp{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}

body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .productThumbWebp{
  object-fit:contain !important;
  object-position:center center !important;
}

@media (max-width: 820px){
  body.tshirt-shop-page #productsGrid.tst-simpleShopGrid,
  body.tshirt-shop-page #productsGrid.grid.tst-simpleShopGrid{
    max-width:none !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  body.tshirt-shop-page #productsGrid.tst-simpleShopGrid .shopProductCard{
    max-width:none !important;
    justify-self:stretch !important;
  }
}

@media (max-width: 420px){
  body.tshirt-shop-page #productsGrid.tst-simpleShopGrid,
  body.tshirt-shop-page #productsGrid.grid.tst-simpleShopGrid{
    grid-template-columns:1fr !important;
  }
}

/* Product detail checkout flow cleanup */
.productBuyPanel{
  margin-top:18px;
  display:grid;
  gap:14px;
}
.productStepLabel{
  font-size:13px;
  font-weight:950;
  color:#334155;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.productVariantPicker{
  margin:0;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#f8fafc;
}
.productSecondaryActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.productSecondaryActions a,
.productSecondaryActions label{
  appearance:none;
  border:0;
  border-radius:12px;
  background:#e2e8f0;
  color:#0f172a;
  padding:12px 16px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.productCheckoutNote{
  font-size:13px;
  color:#64748b;
  line-height:1.4;
}
.productDetailPreviewBox{
  background:#f8fafc;
}
.productDetailActions button,
.productDetailActions a,
.productSecondaryActions a,
.productSecondaryActions label{
  min-height:46px;
}
@media(max-width:760px){
  .productDetailActions,
  .productSecondaryActions{
    display:grid;
    grid-template-columns:1fr;
  }
}

/* ───────────────── Customer designer UX cleanup ───────────────── */
body.tshirt-customer-designer-page{
  background:#f6f7f9;
}

body.tshirt-customer-designer-page .topbar{
  position:sticky;
  top:0;
  z-index:60;
}

body.tshirt-customer-designer-page .designerShell{
  max-width:1680px;
  display:grid;
  grid-template-columns:minmax(520px, 1fr) 360px 390px;
  grid-template-areas:"canvas purchase tools";
  gap:18px;
  align-items:start;
}

body.tshirt-customer-designer-page .canvasPanel{
  grid-area:canvas;
  min-width:0;
}

body.tshirt-customer-designer-page .purchasePanel{
  grid-area:purchase;
}

body.tshirt-customer-designer-page .toolsPanel{
  grid-area:tools;
}

body.tshirt-customer-designer-page .purchasePanel,
body.tshirt-customer-designer-page .toolsPanel{
  position:sticky;
  top:100px;
  max-height:calc(100vh - 122px);
  overflow:auto;
}

body.tshirt-customer-designer-page .canvasPanel,
body.tshirt-customer-designer-page .purchasePanel,
body.tshirt-customer-designer-page .toolsPanel{
  border-radius:24px;
}

body.tshirt-customer-designer-page .canvasWrap{
  min-height:700px;
  height:min(760px, calc(100vh - 190px));
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 36%, #ffffff 0, #ffffff 38%, #f2f4f7 100%);
}

body.tshirt-customer-designer-page .editorTop{
  align-items:center;
  padding:2px 2px 12px;
}

body.tshirt-customer-designer-page .designerMiniStatus{
  flex:0 0 auto;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#475569;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:800;
}

body.tshirt-customer-designer-page .purchaseHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

body.tshirt-customer-designer-page .purchaseEyebrow{
  color:#64748b;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.tshirt-customer-designer-page .purchaseHead h1,
body.tshirt-customer-designer-page .toolsIntro h2{
  margin:4px 0 0;
  color:#0f172a;
  font-size:22px;
  line-height:1.12;
  letter-spacing:-.03em;
}

body.tshirt-customer-designer-page .purchaseBadge{
  flex:0 0 auto;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#111827;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
}

body.tshirt-customer-designer-page .faceCta{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px dashed #cbd5e1;
  border-radius:18px;
  background:#f8fafc;
  margin:12px 0 16px;
}

body.tshirt-customer-designer-page .faceCta.hasFace{
  border-style:solid;
  border-color:#111827;
  background:#f3f4f6;
}

body.tshirt-customer-designer-page .faceCtaIcon{
  width:38px;
  height:38px;
  border-radius:14px;
  background:#111827;
  color:#ffffff;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
}

body.tshirt-customer-designer-page .faceCta strong,
body.tshirt-customer-designer-page .faceCta span{
  display:block;
}

body.tshirt-customer-designer-page .faceCta span{
  margin-top:2px;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}

body.tshirt-customer-designer-page .purchaseSection{
  border-top:1px solid #e5e7eb;
  padding-top:14px;
  margin-top:14px;
}

body.tshirt-customer-designer-page .purchaseSection h2{
  margin:0 0 10px;
  font-size:16px;
}

body.tshirt-customer-designer-page .purchaseMount{
  display:grid;
  gap:10px;
}

body.tshirt-customer-designer-page .purchaseMount .field{
  margin-top:0 !important;
}

body.tshirt-customer-designer-page .purchaseMount .small[style]{
  margin-bottom:6px !important;
}

body.tshirt-customer-designer-page .purchaseQtyField{
  display:grid;
  gap:6px;
  margin-top:10px;
}

body.tshirt-customer-designer-page .purchaseActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  border-top:1px solid #e5e7eb;
  padding-top:16px;
  margin-top:16px;
}

body.tshirt-customer-designer-page .purchaseActions .btn{
  width:100%;
  justify-content:center;
  min-height:48px;
  font-size:15px;
}

body.tshirt-customer-designer-page .purchaseActions #designerBuyNow{
  grid-column:1 / -1;
  min-height:52px;
  font-size:16px;
}

body.tshirt-customer-designer-page .purchaseStatus{
  min-height:20px;
  margin-top:10px;
}

body.tshirt-customer-designer-page #checkoutStatus{
  color:#475569 !important;
  line-height:1.35;
}

body.tshirt-customer-designer-page .customerExportDetails{
  border-top:1px solid #e5e7eb;
  margin-top:14px;
  padding-top:12px;
}

body.tshirt-customer-designer-page .customerExportDetails summary{
  cursor:pointer;
  color:#64748b;
  font-size:13px;
  font-weight:900;
}

body.tshirt-customer-designer-page .customerExportDetails .purchaseMount{
  grid-template-columns:1fr;
  margin-top:10px;
}

body.tshirt-customer-designer-page .customerExportDetails .btn{
  width:100%;
  justify-content:center;
}

body.tshirt-customer-designer-page .toolsIntro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid #e5e7eb;
  margin-bottom:12px;
}

body.tshirt-customer-designer-page .toolsIntro .small{
  max-width:190px;
  text-align:right;
  line-height:1.35;
}

body.tshirt-customer-designer-page .toolTabs{
  flex-wrap:nowrap;
  overflow:auto;
  padding-bottom:8px;
  scrollbar-width:thin;
}

body.tshirt-customer-designer-page .toolTabs .toolTab{
  flex:0 0 auto;
  white-space:nowrap;
}

body.tshirt-customer-designer-page .toolPanel[data-tool="placement"] #productSelect,
body.tshirt-customer-designer-page .toolPanel[data-tool="placement"] #designerVariantStatus{
  max-width:100%;
}

body.tshirt-customer-designer-page .toolPanel[data-tool="preview"] .row:empty,
body.tshirt-customer-designer-page .toolPanel[data-tool="preview"] .downloads:empty{
  display:none;
}

body.tshirt-customer-designer-page .btn:disabled{
  opacity:.58;
  cursor:progress;
}

body.tshirt-customer-designer-page input[type="file"]::file-selector-button{
  border:0;
  border-radius:10px;
  background:#111827;
  color:#ffffff;
  padding:8px 10px;
  margin-right:10px;
  font-weight:800;
}

@media (max-width:1280px){
  body.tshirt-customer-designer-page .designerShell{
    grid-template-columns:minmax(480px, 1fr) 370px;
    grid-template-areas:
      "canvas purchase"
      "tools tools";
  }

  body.tshirt-customer-designer-page .toolsPanel{
    position:relative;
    top:auto;
    max-height:none;
  }
}

@media (max-width:860px){
  body.tshirt-customer-designer-page .designerShell,
  body.tshirt-designer-page .container.twoCol.designerShell,
  body.tshirt-designer-page .twoCol.designerShell{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "canvas"
      "purchase"
      "tools" !important;
    padding:12px 10px 76px !important;
  }

  body.tshirt-customer-designer-page .purchasePanel,
  body.tshirt-customer-designer-page .toolsPanel{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.tshirt-customer-designer-page .canvasWrap{
    min-height:390px !important;
    height:min(62svh, 560px) !important;
  }

  body.tshirt-customer-designer-page .purchaseActions{
    grid-template-columns:1fr;
  }

  body.tshirt-customer-designer-page .toolsIntro{
    display:block;
  }

  body.tshirt-customer-designer-page .toolsIntro .small{
    max-width:none;
    text-align:left;
    margin-top:6px;
  }
}

/* ───────────────── Customer Designer: sticky live shirt preview ─────────────────
   Goal: the customer must always see the shirt while editing controls.
   This changes only the screen layout. Fabric canvas/export math stays untouched. */
body.tshirt-customer-designer-page .canvasPanel{
  z-index:20;
}

body.tshirt-customer-designer-page .canvasWrap{
  max-height:calc(100vh - 190px);
}

@media (min-width:861px) and (max-width:1280px){
  body.tshirt-customer-designer-page .designerShell,
  body.tshirt-designer-page .container.twoCol.designerShell,
  body.tshirt-designer-page .twoCol.designerShell{
    grid-template-columns:minmax(480px, 1fr) minmax(340px, 420px) !important;
    grid-template-areas:
      "canvas purchase"
      "canvas tools" !important;
    align-items:start;
  }

  body.tshirt-customer-designer-page .canvasPanel{
    position:sticky !important;
    top:96px !important;
    align-self:start;
    max-height:calc(100vh - 116px) !important;
    overflow:hidden !important;
  }

  body.tshirt-customer-designer-page .canvasWrap{
    min-height:500px !important;
    height:calc(100vh - 205px) !important;
    max-height:760px !important;
  }

  body.tshirt-customer-designer-page .purchasePanel,
  body.tshirt-customer-designer-page .toolsPanel{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasPanel{
    position:sticky !important;
    top:64px !important;
    z-index:40;
    overflow:hidden !important;
    box-shadow:0 16px 36px rgba(15,23,42,.14);
  }

  body.tshirt-customer-designer-page .canvasWrap{
    height:min(56svh, 500px) !important;
    min-height:320px !important;
    max-height:500px !important;
  }

  body.tshirt-customer-designer-page:not([data-active-tool="placement"]) .canvasWrap{
    height:min(40svh, 390px) !important;
    min-height:260px !important;
  }

  body.tshirt-customer-designer-page:not([data-active-tool="placement"]) .canvasPanel .editorTop{
    padding-bottom:6px;
    margin-bottom:4px;
  }

  body.tshirt-customer-designer-page:not([data-active-tool="placement"]) .canvasPanel #designerCanvasHint{
    display:none;
  }
}

@media (max-width:480px){
  body.tshirt-customer-designer-page .canvasPanel{
    top:58px !important;
  }

  body.tshirt-customer-designer-page .canvasWrap{
    height:min(50svh, 430px) !important;
    min-height:280px !important;
  }

  body.tshirt-customer-designer-page:not([data-active-tool="placement"]) .canvasWrap{
    height:min(36svh, 340px) !important;
    min-height:230px !important;
  }
}

/* Customer designer: grouped Background tab sections */
body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="posterbg"],
body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="cutouts"],
body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="templatebg"],
body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="tilebg"],
body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="paintsplatter"]{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e5e7eb;
}

body.tshirt-customer-designer-page[data-active-tool="background"] .toolPanel[data-tool="background"]{
  padding-bottom:2px;
}

/* Customer designer: clipart browser now lives directly inside the Clipart tab. */
body.tshirt-designer-page .clipartBrowser{
  display:block;
  margin:0 0 12px 0;
}

body.tshirt-designer-page .clipartBrowserHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

body.tshirt-designer-page .clipartBrowserHead h2{
  margin:0 0 4px 0;
}

body.tshirt-designer-page .clipartBrowser .clipartTabs{
  position:sticky;
  top:0;
  z-index:2;
  background:#ffffff;
  padding:8px 0 10px 0;
  margin:0 0 10px 0;
  border-top:0;
  border-bottom:1px solid #e5e7eb;
  max-height:118px;
  overflow:auto;
}

body.tshirt-designer-page .clipartBrowser .clipTabBtn{
  text-transform:none;
}

body.tshirt-designer-page .clipartBrowser .clipGrid{
  padding:0;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  max-height:min(520px, 48vh);
  overflow:auto;
}

body.tshirt-designer-page .clipartBrowser .clipBtn{
  min-height:104px;
}

body.tshirt-designer-page .clipartBrowser .clipBtn img{
  height:86px;
}

body.tshirt-designer-page .clipartBrowser .clipFooter{
  margin-top:10px;
  padding-top:10px;
}

@media (max-width:980px){
  body.tshirt-designer-page .clipartBrowser .clipGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:420px;
  }
}

@media (max-width:480px){
  body.tshirt-designer-page .clipartBrowser .clipGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Customer designer: clipart tools + drag-to-trash */
body.tshirt-customer-designer-page .canvasWrap{
  position:relative;
}
.clipTrashDrop{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:30;
  width:118px;
  min-height:92px;
  border:2px dashed rgba(15,23,42,.24);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  color:#0f172a;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:.55;
  transform:scale(.94);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
  box-shadow:0 14px 32px rgba(15,23,42,.16);
}
.clipTrashDrop.is-ready{
  opacity:.88;
  transform:scale(1);
}
.clipTrashDrop.is-hot{
  opacity:1;
  transform:scale(1.08);
  background:#fff2f2;
  border-color:#ef4444;
}
.clipTrashIcon{
  font-size:28px;
  line-height:1;
}
.clipTrashText{
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.clipToolCard{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:12px;
  background:#f8fafc;
  margin-top:10px;
}
.clipToolStatus{
  font-size:12px;
  font-weight:800;
  color:#334155;
  margin-bottom:10px;
}
.clipToolControl{
  margin:10px 0;
}
.clipToolControl input[type="range"]{
  width:100%;
}
.clipToolLabel{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#64748b;
  margin-bottom:5px;
}
.clipToolLabel strong{
  color:#0f172a;
}
.clipToolButtons{
  gap:8px;
  flex-wrap:wrap;
}
.btn.danger{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}
.btn.danger:hover{
  background:#fecaca;
}
@media (max-width:860px){
  .clipTrashDrop{
    width:96px;
    min-height:74px;
    right:10px;
    bottom:10px;
    border-radius:16px;
  }
  .clipTrashIcon{ font-size:22px; }
  .clipTrashText{ font-size:11px; }
}

/* Customer designer: layers panel */
.layerPanelCard{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:12px;
  background:#f8fafc;
  margin-top:10px;
}
.layerSelectionStatus{
  font-size:12px;
  font-weight:800;
  color:#334155;
  margin-bottom:10px;
}
.layerQuickActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.layerQuickActions .btn{
  width:100%;
  justify-content:center;
}
.layerToggleRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}
.layerToggleLabel{
  display:flex;
  gap:8px;
  align-items:center;
}
.layerListHead,
.layerListFoot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.layerList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.layerEmpty{
  border:1px dashed rgba(15,23,42,.16);
  border-radius:16px;
  padding:16px;
  text-align:center;
  font-size:12px;
  color:#64748b;
  background:#fff;
}
.layerRow{
  display:flex;
  gap:10px;
  align-items:stretch;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  padding:8px;
}
.layerRow.is-active{
  border-color:#0f172a;
  box-shadow:0 0 0 2px rgba(15,23,42,.08);
}
.layerRow.is-hidden{
  opacity:.78;
}
.layerRowSelect{
  flex:1;
  text-align:left;
  border:0;
  background:transparent;
  padding:4px;
  min-width:0;
}
.layerRowTitle{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  line-height:1.25;
}
.layerRowMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.layerPill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#e2e8f0;
  color:#334155;
  font-size:11px;
  font-weight:800;
}
.layerPill.is-background{
  background:#dbeafe;
  color:#1d4ed8;
}
.layerRowActions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:78px;
}
.layerMiniBtn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#f8fafc;
  color:#0f172a;
  border-radius:12px;
  min-height:40px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  padding:0 10px;
}
.layerMiniBtn:hover{
  background:#eef2f7;
}
.btn.danger:disabled,
.layerMiniBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media (max-width:860px){
  .layerQuickActions{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:560px){
  .layerRow{
    flex-direction:column;
  }
  .layerRowActions{
    width:100%;
    flex-direction:row;
  }
  .layerMiniBtn{
    flex:1;
    min-height:42px;
  }
  .layerQuickActions{
    grid-template-columns:1fr;
  }
}

/* Customer designer: floating layers drawer */
.canvasFloatingActions{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:31;
  display:flex;
  gap:8px;
}
.canvasFloatBtn{
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  box-shadow:0 14px 28px rgba(15,23,42,.18);
  background:rgba(255,255,255,.94);
}
.layersDrawer{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:18px;
  background:rgba(15,23,42,.08);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.layersDrawer.is-open{
  opacity:1;
  pointer-events:auto;
}
.layersDrawerCard{
  width:min(360px, calc(100% - 8px));
  max-height:min(78vh, 680px);
  overflow:auto;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  padding:14px;
}
.layersDrawerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.layersDrawerHead h2{
  margin:0;
}
.layersDrawerClose{
  appearance:none;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  flex:0 0 auto;
}
.layersDrawerClose:hover{
  background:#eef2f7;
}
.layersDrawer .layerPanelCard{
  margin-top:0;
}
body.layers-drawer-open .clipTrashDrop{
  opacity:.14;
}
@media (min-width:861px){
  .layersDrawer{
    align-items:flex-start;
    justify-content:flex-end;
    padding:16px;
    background:transparent;
  }
  .layersDrawerCard{
    margin-top:8px;
  }
}
@media (max-width:860px){
  .canvasFloatingActions{
    left:10px;
    bottom:10px;
  }
  .canvasFloatBtn{
    min-height:40px;
    padding:0 14px;
  }
  .layersDrawer{
    padding:0;
    align-items:flex-end;
    justify-content:stretch;
  }
  .layersDrawerCard{
    width:100%;
    max-height:82vh;
    border-radius:24px 24px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  }
}

/* Clipart add loading overlay */
.clipGridWrap{
  position:relative;
}
.clipartLoadingOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(248,250,252,.82);
  border-radius:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:5;
}
.clipartLoadingOverlay.is-visible{
  opacity:1;
  pointer-events:auto;
}
.clipartLoadingCard{
  min-width:220px;
  max-width:320px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 38px rgba(15,23,42,.14);
  padding:16px 18px;
  text-align:center;
}
.clipartLoadingSpinner{
  width:30px;
  height:30px;
  border-radius:999px;
  border:3px solid rgba(15,23,42,.12);
  border-top-color:#0f172a;
  margin:0 auto 10px;
  animation:clipartSpin .8s linear infinite;
}
.clipartLoadingTitle{
  font-size:15px;
  font-weight:900;
  color:#0f172a;
  margin-bottom:5px;
}
.clipartLoadingText{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}
.clipBtn.is-loading{
  opacity:.55;
  transform:scale(.98);
}
.clipartBrowser.is-busy .clipBtn,
.clipartBrowser.is-busy .clipTabBtn,
.clipartBrowser.is-busy #clipartLoadMore,
.clipartBrowser.is-busy #openClipart{
  pointer-events:none;
}
@keyframes clipartSpin{
  to { transform:rotate(360deg); }
}

/* Customer designer: compact canvas shirt options + bottom checkout */
body.tshirt-customer-designer-page .canvasOrderTopBar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  margin:0 0 10px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
body.tshirt-customer-designer-page .canvasFaceMount{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1 1 220px;
  min-width:200px;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 320px;
  justify-content:flex-end;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field,
body.tshirt-customer-designer-page .canvasOrderTopBar .row{
  margin:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  display:flex;
  align-items:center;
  gap:6px;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small{
  margin:0 !important;
  white-space:nowrap;
  font-size:11px;
  font-weight:900;
  color:#475569;
}
body.tshirt-customer-designer-page .canvasOrderTopBar select.input,
body.tshirt-customer-designer-page .canvasQtyField .input{
  width:auto !important;
  min-width:86px;
  max-width:140px;
  height:34px;
  padding:0 8px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
}
body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
  width:158px !important;
  max-width:158px;
  height:34px;
  padding:6px;
  font-size:11px;
  border-radius:10px;
}
body.tshirt-customer-designer-page .canvasFaceMount .row{
  display:flex;
  gap:6px;
}
body.tshirt-customer-designer-page .canvasFaceMount .btn,
body.tshirt-customer-designer-page .canvasOrderTopBar .btn{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
  line-height:1;
}
body.tshirt-customer-designer-page .canvasQtyField{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:11px;
  font-weight:900;
  color:#475569;
  white-space:nowrap;
}
body.tshirt-customer-designer-page .canvasQtyField .input{
  min-width:54px;
  max-width:64px;
  text-align:center;
}
body.tshirt-customer-designer-page .canvasVariantMount #skuMeta{
  display:none;
}
body.tshirt-customer-designer-page .canvasWrap{
  position:relative;
  overflow:hidden;
  padding-bottom:74px;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:34;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(8px);
}
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerBuyNow{
  background:#111827;
  color:#fff;
}
body.tshirt-customer-designer-page .canvasCheckoutBar a.btn{
  min-width:48px;
}
body.tshirt-customer-designer-page .canvasStatusLine{
  position:absolute;
  left:12px;
  right:12px;
  bottom:64px;
  z-index:33;
  text-align:center;
  pointer-events:none;
}
body.tshirt-customer-designer-page .canvasStatusLine #checkoutStatus{
  display:inline-block;
  max-width:min(560px, 90%);
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#334155 !important;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.10);
}
body.tshirt-customer-designer-page .toolPanel[data-tool="preview"] #designerBuyNow,
body.tshirt-customer-designer-page .toolPanel[data-tool="preview"] #designerAddToCart{
  min-height:38px;
}
body.tshirt-customer-designer-page #exportPreview{
  background:#111827;
  color:#fff;
}
.designerPreviewModal{
  position:absolute;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.50);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.designerPreviewModal.is-open{
  opacity:1;
  pointer-events:auto;
}
.designerPreviewCard{
  width:min(520px, 92%);
  max-height:92%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.designerPreviewHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
}
.designerPreviewClose{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  font-weight:900;
  cursor:pointer;
}
.designerPreviewStage{
  padding:14px;
  display:grid;
  place-items:center;
  background:#f8fafc;
  overflow:auto;
}
.designerPreviewStage img{
  display:block;
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    gap:7px;
    padding:7px;
    border-radius:14px;
  }
  body.tshirt-customer-designer-page .canvasFaceMount,
  body.tshirt-customer-designer-page .canvasVariantMount{
    flex:1 1 100%;
    justify-content:flex-start;
    min-width:0;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:7px;
  }
  body.tshirt-customer-designer-page .canvasVariantMount .field{
    min-width:0;
  }
  body.tshirt-customer-designer-page .canvasVariantMount .field .small{
    display:none;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar select.input{
    width:100% !important;
    max-width:none;
    min-width:0;
  }
  body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
    width:100% !important;
    max-width:none;
    flex:1;
  }
  body.tshirt-customer-designer-page .canvasFaceMount .field{
    flex:1;
    min-width:0;
  }
  body.tshirt-customer-designer-page .canvasFaceMount .field .small{
    display:none;
  }
  body.tshirt-customer-designer-page .canvasFaceMount .row{
    flex:0 0 auto;
  }
  body.tshirt-customer-designer-page .canvasFaceMount .btn{
    padding:0 8px;
    font-size:10px;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    left:8px;
    right:8px;
    bottom:8px;
    transform:none;
    border-radius:18px;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
    flex:1;
    min-height:40px;
    padding:0 10px;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar a.btn{
    flex:0 0 auto;
  }
  body.tshirt-customer-designer-page .canvasStatusLine{
    bottom:58px;
  }
}

/* Customer designer: tighter canvas options + visible checkout bar */
body.tshirt-customer-designer-page .toolTab[data-tool="placement"]{
  display:none !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar{
  align-items:center;
  gap:8px;
  padding:7px 9px;
  margin:0 0 8px;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  order:1;
  flex:1 1 auto;
  justify-content:flex-start;
  min-width:260px;
}
body.tshirt-customer-designer-page .canvasQtyField{
  order:2;
  flex:0 0 auto;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  order:3;
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
  justify-content:flex-end;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small{
  font-size:10px;
}
body.tshirt-customer-designer-page .canvasOrderTopBar select.input,
body.tshirt-customer-designer-page .canvasQtyField .input{
  height:30px;
  min-width:76px;
  max-width:128px;
  padding:0 7px;
  border-radius:8px;
  font-size:11px;
}
body.tshirt-customer-designer-page .canvasQtyField .input{
  min-width:48px;
  max-width:56px;
}
body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
  width:130px !important;
  max-width:130px;
  height:30px;
  padding:4px 6px;
  font-size:10px;
  border-radius:8px;
}
body.tshirt-customer-designer-page .canvasFaceMount .btn,
body.tshirt-customer-designer-page .canvasOrderTopBar .btn{
  min-height:30px;
  padding:0 8px;
  border-radius:8px;
  font-size:10px;
}
body.tshirt-customer-designer-page .canvasWrap{
  overflow:visible;
  padding-bottom:0;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  position:sticky;
  left:auto;
  bottom:14px;
  transform:none;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:-64px auto 12px;
  z-index:60;
  padding:6px;
}
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  min-height:34px;
  padding:0 14px;
  font-size:12px;
}
body.tshirt-customer-designer-page .canvasStatusLine{
  position:sticky;
  left:auto;
  right:auto;
  bottom:58px;
  margin:-42px auto 8px;
  z-index:59;
  max-width:calc(100% - 24px);
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    order:1;
    grid-column:1 / 2;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-width:0;
  }
  body.tshirt-customer-designer-page .canvasQtyField{
    order:2;
    grid-column:2 / 3;
    align-self:center;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    order:3;
    grid-column:1 / -1;
    justify-content:flex-end;
    margin-left:0;
  }
  body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
    width:min(52vw, 190px) !important;
    max-width:min(52vw, 190px);
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    left:auto;
    right:auto;
    bottom:10px;
    width:calc(100% - 18px);
    max-width:calc(100% - 18px);
    margin:-62px auto 10px;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
    min-height:38px;
    padding:0 10px;
  }
}

/* Customer designer: production canvas layout cleanup */
body.tshirt-customer-designer-page .canvasPanel{
  position:sticky !important;
  top:92px !important;
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(100vh - 112px) !important;
  overflow:visible !important;
  padding-bottom:12px !important;
}
body.tshirt-customer-designer-page .editorTop{
  flex:0 0 auto !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:auto auto 1fr !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  margin:0 0 8px !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  grid-column:1 / 2 !important;
  order:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-width:0 !important;
  flex:none !important;
}
body.tshirt-customer-designer-page .canvasQtyField{
  grid-column:2 / 3 !important;
  order:0 !important;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  grid-column:3 / 4 !important;
  order:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  min-width:0 !important;
  margin-left:0 !important;
  flex:none !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar #designerVariantStatus,
body.tshirt-customer-designer-page .canvasOrderTopBar #skuMeta{
  display:none !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasQtyField{
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#475569 !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar select.input,
body.tshirt-customer-designer-page .canvasQtyField .input{
  height:30px !important;
  min-height:30px !important;
  width:auto !important;
  min-width:78px !important;
  max-width:122px !important;
  padding:0 8px !important;
  border-radius:9px !important;
  font-size:11px !important;
  font-weight:800 !important;
}
body.tshirt-customer-designer-page .canvasQtyField .input{
  min-width:52px !important;
  max-width:58px !important;
  text-align:center !important;
}
body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
  width:132px !important;
  max-width:132px !important;
  height:30px !important;
  min-height:30px !important;
  padding:4px 6px !important;
  border-radius:9px !important;
  font-size:10px !important;
}
body.tshirt-customer-designer-page .canvasFaceMount .btn{
  min-height:30px !important;
  height:30px !important;
  padding:0 8px !important;
  border-radius:9px !important;
  font-size:10px !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  flex:1 1 auto !important;
  min-height:420px !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  padding:0 !important;
  position:relative !important;
}
body.tshirt-customer-designer-page .canvasWrap .canvas-container,
body.tshirt-customer-designer-page .canvasWrap canvas{
  max-width:100% !important;
  max-height:100% !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  position:static !important;
  transform:none !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px !important;
  border-radius:16px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  z-index:auto !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  min-height:36px !important;
  height:36px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  font-size:12px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerBuyNow{
  min-width:110px !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerAddToCart{
  min-width:118px !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar a.btn{
  min-width:54px !important;
}
body.tshirt-customer-designer-page .canvasStatusLine{
  position:static !important;
  margin:6px 0 0 !important;
  max-width:none !important;
  text-align:center !important;
  pointer-events:none !important;
  z-index:auto !important;
}
body.tshirt-customer-designer-page .toolTab[data-tool="placement"],
body.tshirt-customer-designer-page .toolPanel[data-tool="placement"]{
  display:none !important;
}
@media (max-width:1280px) and (min-width:861px){
  body.tshirt-customer-designer-page .canvasPanel{
    top:86px !important;
    max-height:calc(100vh - 104px) !important;
    overflow:visible !important;
  }
  body.tshirt-customer-designer-page .canvasWrap{
    min-height:390px !important;
  }
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasPanel{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    grid-template-columns:1fr auto !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount .field .small{
    display:none !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar select.input{
    width:100% !important;
    max-width:none !important;
  }
  body.tshirt-customer-designer-page .canvasQtyField{
    grid-column:1 / 2 !important;
    justify-content:flex-start !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    grid-column:1 / -1 !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
  }
  body.tshirt-customer-designer-page .canvasWrap{
    min-height:330px !important;
    height:52svh !important;
    max-height:520px !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    position:sticky !important;
    bottom:8px !important;
    z-index:80 !important;
    margin-top:8px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.16) !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:0 10px !important;
  }
}

/* Customer designer: final canvas/product checkout layout reset */
body.tshirt-customer-designer-page .container.twoCol,
body.tshirt-customer-designer-page .twoCol{
  align-items:start !important;
  gap:16px !important;
}
body.tshirt-customer-designer-page .canvasPanel{
  display:flex !important;
  flex-direction:column !important;
  position:sticky !important;
  top:92px !important;
  height:calc(100vh - 116px) !important;
  max-height:calc(100vh - 116px) !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:16px !important;
  gap:8px !important;
}
body.tshirt-customer-designer-page .editorTop{
  flex:0 0 auto !important;
  margin:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
  min-height:52px !important;
  overflow:hidden !important;
}
body.tshirt-customer-designer-page .canvasVariantMount{
  order:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 1 auto !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasQtyField{
  order:2 !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}
body.tshirt-customer-designer-page .canvasFaceMount{
  order:3 !important;
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  flex-wrap:nowrap !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field,
body.tshirt-customer-designer-page .canvasOrderTopBar .row{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar .field .small,
body.tshirt-customer-designer-page .canvasQtyField,
body.tshirt-customer-designer-page .canvasFaceMount .small{
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#475569 !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar #designerVariantStatus,
body.tshirt-customer-designer-page .canvasOrderTopBar #skuMeta{
  display:none !important;
}
body.tshirt-customer-designer-page .canvasOrderTopBar select.input,
body.tshirt-customer-designer-page .canvasQtyField input.input{
  height:32px !important;
  min-height:32px !important;
  width:auto !important;
  min-width:84px !important;
  max-width:132px !important;
  padding:0 9px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:850 !important;
}
body.tshirt-customer-designer-page .canvasQtyField input.input{
  min-width:54px !important;
  width:58px !important;
  max-width:58px !important;
  text-align:center !important;
}
body.tshirt-customer-designer-page .canvasFaceMount input[type="file"]{
  height:32px !important;
  min-height:32px !important;
  width:138px !important;
  max-width:138px !important;
  padding:4px 6px !important;
  border-radius:10px !important;
  font-size:10px !important;
  line-height:1 !important;
}
body.tshirt-customer-designer-page .canvasFaceMount .btn{
  height:32px !important;
  min-height:32px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body.tshirt-customer-designer-page .canvasWrap{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:16px !important;
}
body.tshirt-customer-designer-page .canvasWrap .canvas-container,
body.tshirt-customer-designer-page .canvasWrap canvas{
  max-width:100% !important;
  max-height:100% !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar{
  flex:0 0 auto !important;
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:8px 10px !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  z-index:5 !important;
}
body.tshirt-customer-designer-page .canvasCheckoutPreview,
body.tshirt-customer-designer-page .canvasCheckoutActions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
body.tshirt-customer-designer-page .canvasCheckoutActions{
  margin-left:auto !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
  height:36px !important;
  min-height:36px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #exportPreview{
  background:#f3f4f6 !important;
  color:#111827 !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerBuyNow{
  min-width:108px !important;
}
body.tshirt-customer-designer-page .canvasCheckoutBar #designerAddToCart{
  min-width:116px !important;
}
body.tshirt-customer-designer-page .canvasStatusLine{
  flex:0 0 auto !important;
  position:static !important;
  margin:0 !important;
  min-height:16px !important;
  max-width:none !important;
  text-align:center !important;
  pointer-events:none !important;
}
body.tshirt-customer-designer-page .canvasStatusLine #checkoutStatus{
  font-size:11px !important;
  line-height:1.25 !important;
}
body.tshirt-customer-designer-page .toolsPanel{
  position:sticky !important;
  top:92px !important;
  height:calc(100vh - 116px) !important;
  max-height:calc(100vh - 116px) !important;
  overflow:auto !important;
}
body.tshirt-customer-designer-page .toolTab[data-tool="placement"],
body.tshirt-customer-designer-page .toolPanel[data-tool="placement"]{
  display:none !important;
}
@media (max-width:1180px) and (min-width:861px){
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    flex-wrap:wrap !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    flex:1 1 100% !important;
    justify-content:flex-end !important;
  }
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .container.twoCol,
  body.tshirt-customer-designer-page .twoCol{
    display:flex !important;
    flex-direction:column !important;
  }
  body.tshirt-customer-designer-page .canvasPanel,
  body.tshirt-customer-designer-page .toolsPanel{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
  body.tshirt-customer-designer-page .canvasVariantMount{
    flex:1 1 calc(100% - 80px) !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  body.tshirt-customer-designer-page .canvasOrderTopBar select.input{
    width:100% !important;
    max-width:none !important;
  }
  body.tshirt-customer-designer-page .canvasFaceMount{
    flex:1 1 100% !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
  }
  body.tshirt-customer-designer-page .canvasWrap{
    height:52svh !important;
    min-height:340px !important;
    max-height:560px !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar{
    position:sticky !important;
    bottom:8px !important;
    z-index:85 !important;
    box-shadow:0 14px 34px rgba(15,23,42,.16) !important;
  }
  body.tshirt-customer-designer-page .canvasCheckoutBar .btn{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:0 10px !important;
  }
}

/* Customer designer: un-crunch canvas preview + tool tabs
   Keep Fabric canvas at its real 800x900 ratio and let the existing JS scale
   the .canvas-container with transform. Do not stretch width/height separately. */
body.tshirt-customer-designer-page .canvasWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  min-height:560px !important;
  height:auto !important;
}
body.tshirt-customer-designer-page .canvasWrap .canvas-container{
  flex:0 0 auto !important;
  width:800px !important;
  height:900px !important;
  max-width:none !important;
  max-height:none !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{
  width:800px !important;
  height:900px !important;
  max-width:none !important;
  max-height:none !important;
}

/* Do not let tool tab labels squeeze into chopped text. */
body.tshirt-customer-designer-page .toolTabs{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:8px !important;
  padding:0 8px 10px !important;
  scrollbar-width:thin !important;
}
body.tshirt-customer-designer-page .toolTabs .toolTab{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  white-space:nowrap !important;
  padding:0 18px !important;
  height:42px !important;
  min-height:42px !important;
  font-size:13px !important;
  line-height:1 !important;
}
body.tshirt-customer-designer-page .toolsPanel{
  min-width:360px !important;
}
@media (max-width:1180px) and (min-width:861px){
  body.tshirt-customer-designer-page .canvasWrap{
    min-height:520px !important;
  }
  body.tshirt-customer-designer-page .toolsPanel{
    min-width:340px !important;
  }
}
@media (max-width:860px){
  body.tshirt-customer-designer-page .canvasWrap{
    min-height:430px !important;
    height:58svh !important;
  }
  body.tshirt-customer-designer-page .toolsPanel{
    min-width:0 !important;
    width:100% !important;
  }
  body.tshirt-customer-designer-page .toolTabs .toolTab{
    height:38px !important;
    min-height:38px !important;
    padding:0 14px !important;
    font-size:12px !important;
  }
}


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