:root{
  --bg:#0d0b0a;--panel:#171310;--panel2:#211914;--line:#5b4032;--copper:#d27a45;--text:#f2ebe6;--muted:#ab988a
}
*{box-sizing:border-box}
html,body{margin:0;background:
linear-gradient(rgba(14,11,10,.93),rgba(14,11,10,.93)),
radial-gradient(circle at 20% 10%,#4b2d1c 0,transparent 24%),
radial-gradient(circle at 80% 90%,#2d2018 0,transparent 28%),
#0d0b0a;color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit}button{cursor:pointer}
.app-shell{min-height:100vh}
.topbar{min-height:82px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(16,12,10,.96);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo-placeholder{width:52px;height:52px;border:1px solid #87593e;border-radius:12px;display:grid;place-items:center;color:#f0a16f;background:linear-gradient(#35251d,#18120f);font-weight:900;font-size:20px}
.brand small,.section-head small,.panel-block small,.workspace-head small,.image-modal-head small{color:#b97954;letter-spacing:.16em;font-size:10px;font-weight:900}
.brand h1,.section-head h2,.workspace-head h2{margin:2px 0 0}
.top-actions{display:flex;align-items:center;gap:10px}
.badge{padding:7px 10px;border:1px solid #5a4033;border-radius:999px;color:#b8a69a;font-size:11px}
.ghost{min-height:36px;padding:0 12px;border:1px solid #634738;border-radius:9px;color:#fff;background:#17120f}
.hidden{display:none!important}
main{padding:22px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}
.section-head p{max-width:560px;margin:0;color:var(--muted);font-size:13px}
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.empty-state{padding:28px;border:1px solid #5c4132;border-radius:14px;background:linear-gradient(145deg,#211914,#120f0d)}
.empty-state h3{margin:0 0 8px}
.empty-state p{margin:0;color:#b5a398;line-height:1.4}
.job-card{padding:16px;text-align:left;color:#fff;border:1px solid #5c4132;border-radius:14px;background:linear-gradient(145deg,#211914,#120f0d);box-shadow:0 14px 35px #0005}
.job-card:hover{border-color:#a9633e;transform:translateY(-1px)}
.job-card-top{display:flex;justify-content:space-between;align-items:center}
.job-card-top span{font-size:10px;padding:4px 7px;border-radius:999px;background:#2c1e17;color:#d49469}
.job-card h3{margin:14px 0 5px;font-size:18px}
.job-card p{margin:0;color:#ad9b8f;font-size:12px;word-break:break-all}
.job-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.job-meta span{padding:5px 7px;border:1px solid #4f3b31;border-radius:7px;color:#c3b2a7;font-size:10px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}
.visual-panel,.details-panel{min-width:0}
.visual-panel{padding:16px;border:1px solid #5c4132;border-radius:16px;background:linear-gradient(#18130f,#0e0c0a)}
.workspace-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.shirt-stage{display:grid;gap:14px;min-height:650px}
.shirt-stage.split{grid-template-columns:1fr 1fr}
.shirt-stage.single{grid-template-columns:1fr}
.shirt-stage.single .shirt-card{display:none}
.shirt-stage.single .shirt-card.active{display:block}
.shirt-card{position:relative;min-height:620px;padding:16px;border:1px solid #5d4437;border-radius:14px;color:#fff;background:linear-gradient(#201915,#100d0b);overflow:hidden}
.shirt-card:hover{border-color:#b36b43}
.side-label{position:absolute;left:16px;top:14px;color:#d78a5b;font-size:11px;font-weight:900;letter-spacing:.15em;z-index:4}
.zoom-hint{position:absolute;right:14px;bottom:12px;color:#8f7f75;font-size:10px;z-index:4}
.shirt-mockup{position:absolute;inset:50px 22px 40px;display:grid;place-items:center;overflow:hidden;background:
radial-gradient(circle at 50% 48%,rgba(255,255,255,.035),transparent 42%),
linear-gradient(#161311,#0e0c0a)}
.garment-photo{position:absolute;inset:4% 5%;width:90%;height:92%;object-fit:contain;z-index:1;mix-blend-mode:luminosity;opacity:.98}
.shirt-color-overlay{position:absolute;inset:4% 5%;width:90%;height:92%;z-index:2;pointer-events:none;background:var(--shirt-color,#18191b);mix-blend-mode:color;opacity:.92;-webkit-mask:url("/1/assets/garments/tshirts/shirt-black-front.PNG") center/contain no-repeat;mask:url("/1/assets/garments/tshirts/shirt-black-front.PNG") center/contain no-repeat}
.shirt-color-overlay[data-side="back"]{-webkit-mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG");mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG")}
.shirt-color-overlay.light-base{mix-blend-mode:multiply!important;opacity:.70!important}
.shirt-color-overlay.neon-base{mix-blend-mode:screen!important;opacity:.76!important}
.shirt-card[data-color-family="light"] .garment-photo{filter:brightness(1.65) contrast(.82) grayscale(1) drop-shadow(0 18px 18px #0008)}
.shirt-card[data-color-family="neon"] .garment-photo{filter:brightness(1.2) contrast(.96) grayscale(1) drop-shadow(0 18px 18px #0008)}
.shirt-card[data-color-family="standard"] .garment-photo{filter:brightness(.92) contrast(1.08) grayscale(1) drop-shadow(0 18px 18px #0008)}
.art-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.placed-art{position:absolute;object-fit:contain;filter:drop-shadow(0 6px 7px #0008);transform-origin:center center;max-height:65%}
.details-panel{display:flex;flex-direction:column;gap:12px}
.panel-block{padding:14px;border:1px solid #5b4032;border-radius:14px;background:linear-gradient(#1c1612,#110e0c)}
.detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #2b211b}
.detail-row:last-of-type{border-bottom:0}
.detail-row span{color:#99877b;font-size:15px}
.detail-row b,.detail-row a{color:#fff;font-size:22px;line-height:1.15;text-align:right}
#detailEmail{word-break:break-all}
#detailColor{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#detailColorSwatch{width:24px;height:24px;border:2px solid #eee;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px #0008}
.file-link{display:block;margin-top:8px;padding:11px;border:1px solid #5d4336;border-radius:9px;color:#fff;text-decoration:none;background:#17120f}
.file-link.primary{border-color:#b66537;background:linear-gradient(#b65d2f,#70341b)}
.graphics-list{display:grid;gap:8px;margin-top:8px}
.graphic-item{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid #4f3b31;border-radius:10px;background:#130f0d;color:#fff;text-align:left}
.graphic-item:hover{border-color:#a9633e}
.graphic-thumb{width:54px;height:54px;border-radius:8px;object-fit:contain;background:#0a0908;border:1px solid #3d3028}
.graphic-info{min-width:0}
.graphic-info b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graphic-info span{display:block;margin-top:3px;color:#aa9789;font-size:11px}
.graphic-side{padding:5px 7px;border:1px solid #5c4234;border-radius:999px;color:#d58c61;font-size:9px;font-weight:900}
.color-reference{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}
.color-reference-item{min-width:0;padding:5px 2px;display:grid;place-items:center;gap:3px;border:1px solid #4d3a31;border-radius:9px;background:#120f0d}
.color-reference-item i{width:28px;height:28px;border:2px solid #e8e0da;border-radius:50%;box-shadow:0 2px 5px #0008}
.color-reference-item b{font-size:9px;color:#fff}
.color-reference-item span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#a89588;font-size:6px}
.color-reference-item.active{border-color:#d27a45;box-shadow:inset 0 0 0 1px #d27a45}
.future{opacity:.72}
.future p{margin:10px 0 0;color:#99877b;font-size:10px;line-height:1.4}
.image-modal{position:fixed;inset:0;z-index:100;background:#000c;display:grid;place-items:center;padding:24px}
.image-modal-card{width:min(900px,94vw);max-height:90vh;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:14px;border:1px solid #6a4938;border-radius:16px;background:#120f0d;box-shadow:0 22px 60px #000a}
.image-modal-head{display:flex;align-items:center;justify-content:space-between}
.image-modal-head b{display:block;margin-top:2px;font-size:18px}
.image-modal-body{min-height:320px;display:grid;place-items:center;overflow:auto;border:1px solid #3e3028;border-radius:12px;background:#090807}
.image-modal-body img{max-width:100%;max-height:68vh;object-fit:contain}
@media(max-width:980px){.workspace{grid-template-columns:1fr}.details-panel{display:grid;grid-template-columns:repeat(2,1fr)}.detail-row b,.detail-row a{font-size:18px}}
@media(max-width:720px){main{padding:10px}.section-head{align-items:start;flex-direction:column}.workspace{display:block}.details-panel{display:block}.panel-block{margin-top:10px}.shirt-stage.split{grid-template-columns:1fr}.shirt-card{min-height:520px}.topbar{padding:10px}.badge{display:none}}


/* v5 job deletion */
.job-card{
  position:relative;
  padding:0!important;
  overflow:hidden;
}
.job-open{
  width:100%;
  min-height:100%;
  padding:16px 16px 48px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
}
.job-delete{
  position:absolute;
  right:10px;
  bottom:9px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #7b3d34;
  border-radius:8px;
  background:linear-gradient(#351a17,#1c1110);
  color:#f3b0a7;
  font-size:10px;
  font-weight:900;
}
.job-delete:hover{
  border-color:#c55b4d;
  color:#fff;
  background:linear-gradient(#6d2f27,#311712);
}
.confirm-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.82);
}
.confirm-card{
  width:min(460px,94vw);
  padding:20px;
  border:1px solid #7b4338;
  border-radius:16px;
  background:linear-gradient(#211613,#100d0c);
  box-shadow:0 24px 70px rgba(0,0,0,.7);
}
.confirm-card small{
  color:#dc7c68;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}
.confirm-card h3{
  margin:5px 0 8px;
  font-size:22px;
}
.confirm-card p{
  color:#b9a49a;
  font-size:12px;
  line-height:1.45;
}
.confirm-folder{
  margin:12px 0;
  padding:10px 12px;
  border:1px solid #58362f;
  border-radius:9px;
  background:#0c0908;
  color:#fff;
  font-family:monospace;
  font-size:14px;
}
.confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.danger{
  min-height:42px;
  border:1px solid #bd4f43;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(#b34438,#6e211c);
  font-weight:900;
}
.delete-status{
  min-height:18px;
  margin:9px 0 0!important;
  color:#ef9b86!important;
}


/* v5.1 — restore inviting Jobs cards */
.job-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.job-card{
  min-height:210px;
  border-radius:16px;
  background:linear-gradient(145deg,#251b16,#120f0d)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.34)!important;
}
.job-card:hover{
  border-color:#bd7046!important;
  transform:translateY(-2px)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.42)!important;
}
.job-open{
  padding:20px 18px 58px!important;
}
.job-card-top b{
  font-size:16px!important;
  letter-spacing:.02em;
}
.job-card-top span{
  font-size:11px!important;
  padding:5px 8px!important;
}
.job-card h3{
  margin:18px 0 7px!important;
  font-size:23px!important;
  line-height:1.12!important;
}
.job-card p{
  font-size:14px!important;
  line-height:1.3!important;
}
.job-meta{
  gap:8px!important;
  margin-top:18px!important;
}
.job-meta span{
  font-size:11px!important;
  padding:6px 9px!important;
}
.job-card-actions{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  gap:7px;
  z-index:4;
}
.job-delete,.job-archive{
  position:static!important;
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  padding:0!important;
  display:grid;
  place-items:center;
  border-radius:50%!important;
  font-size:17px!important;
  font-weight:900!important;
}
.job-delete{
  border:1px solid #c14c43!important;
  color:#ff9f95!important;
  background:linear-gradient(#4f201d,#220e0d)!important;
}
.job-delete:hover{
  border-color:#ff6b60!important;
  color:#fff!important;
  background:linear-gradient(#8f342d,#3d1612)!important;
}
.job-archive{
  border:1px solid #7f694c!important;
  color:#d6bc87!important;
  background:linear-gradient(#3b3022,#1c1711)!important;
}
.job-archive:hover{
  border-color:#c39a60!important;
  color:#fff!important;
  background:linear-gradient(#655033,#2c2218)!important;
}
.archive-action{
  min-height:42px;
  border:1px solid #a77c45;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(#8a6439,#4c351f);
  font-weight:900;
}


/* v6 — large, simple, icon-first graphic editor */
.image-modal{
  padding:18px!important;
  background:rgba(7,5,4,.90)!important;
  backdrop-filter:blur(7px);
}
.editor-shell{
  width:min(1180px,96vw);
  height:min(820px,94vh);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  border:1px solid #734c38;
  border-radius:20px;
  background:
    linear-gradient(rgba(25,18,14,.96),rgba(11,9,8,.98)),
    radial-gradient(circle at 20% 10%,rgba(166,90,50,.12),transparent 34%);
  box-shadow:0 30px 90px rgba(0,0,0,.72);
}
.editor-topbar{
  min-height:70px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #594033;
  background:linear-gradient(#241a15,#15110e);
}
.editor-brand{display:flex;align-items:center;gap:11px}
.editor-brand-mark{
  width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  border:1px solid #996143;background:linear-gradient(#51301f,#20140f);
  color:#f2a16e;font-weight:900;font-size:18px
}
.editor-brand small{display:block;color:#b87a56;font-size:8px;font-weight:900;letter-spacing:.15em}
.editor-brand b{display:block;margin-top:3px;font-size:18px}
.editor-top-actions{display:flex;gap:8px}
.icon-button{
  width:42px;height:42px;border:1px solid #604638;border-radius:11px;background:#17120f;
  color:#fff;font-size:20px;font-weight:900
}
.icon-button:hover{border-color:#bc7048;background:#2d1d16}
.close-editor{border-color:#814239;color:#ffb0a8}
.editor-layout{
  min-height:0;display:grid;grid-template-columns:190px 1fr
}
.editor-tools-panel{
  min-height:0;padding:12px;display:grid;align-content:start;gap:9px;
  border-right:1px solid #4f392f;background:rgba(13,10,9,.76);overflow:auto
}
.editor-tool{
  min-height:88px;padding:10px 8px;display:grid;grid-template-columns:50px 1fr;
  grid-template-rows:auto auto;align-items:center;gap:1px 8px;border:1px solid #47352d;
  border-radius:14px;background:linear-gradient(#1e1713,#110e0c);color:#fff;text-align:left
}
.editor-tool:hover,.editor-tool.active{
  border-color:#c77649;background:linear-gradient(#4b291b,#21150f);
  box-shadow:inset 0 0 0 1px rgba(255,151,92,.12)
}
.tool-icon{
  grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;
  background:#0b0908;border:1px solid #5a4034;color:#f39a61;font-size:25px;font-weight:900
}
.editor-tool b{font-size:14px}
.editor-tool small{color:#aa9689;font-size:9px}
.editor-main{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 260px}
.editor-canvas-card{min-width:0;min-height:0;padding:14px;display:grid;grid-template-rows:1fr auto}
.editor-canvas-wrap{
  min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;
  border:1px solid #554035;border-radius:15px;
  background:
    linear-gradient(45deg,#dedede 25%,transparent 25%) 0 0/24px 24px,
    linear-gradient(45deg,transparent 75%,#dedede 75%) 0 0/24px 24px,
    linear-gradient(45deg,transparent 75%,#dedede 75%) -12px 12px/24px 24px,
    linear-gradient(45deg,#dedede 25%,#f2f2f2 25%) -12px 12px/24px 24px
}
#graphicEditorCanvas{max-width:100%;max-height:100%;touch-action:none;cursor:crosshair}
.editor-empty{color:#6f625a;font-size:18px}
.canvas-help{padding:9px 3px 0;color:#a99384;font-size:11px;text-align:center}
.editor-controls{
  padding:14px 14px 14px 0;overflow:auto
}
.control-group{
  display:grid;gap:12px;padding:14px;border:1px solid #513a30;border-radius:14px;
  background:linear-gradient(#1b1512,#100d0b)
}
.control-group>b{font-size:17px;color:#fff}
.control-group label{display:grid;gap:6px;color:#b4a094;font-size:11px}
.control-group input[type="range"]{width:100%}
.control-group input[type="color"]{width:100%;height:46px;border:0;background:transparent}
.control-group small{color:#8e7c72;line-height:1.45;font-size:10px}
.wide-control{
  min-height:48px;border:1px solid #584034;border-radius:11px;background:#17120f;color:#fff;font-weight:800
}
.primary-control{border-color:#bc683d;background:linear-gradient(#a95027,#5f2c18)}
.editor-footer{
  min-height:66px;padding:10px 14px;display:flex;justify-content:flex-end;gap:9px;
  border-top:1px solid #503a30;background:#100d0b
}
.editor-footer a{text-decoration:none}
.secondary-action,.primary-action{
  min-width:145px;min-height:44px;padding:0 15px;display:grid;place-items:center;border-radius:10px;
  font-weight:900
}
.secondary-action{border:1px solid #5a4337;background:#181310;color:#fff}
.primary-action{border:1px solid #d87947;background:linear-gradient(#d06c35,#7f391d);color:#fff}
@media(max-width:900px){
  .editor-shell{height:96vh}
  .editor-layout{grid-template-columns:120px 1fr}
  .editor-main{grid-template-columns:1fr}
  .editor-controls{padding:0 14px 14px;max-height:240px}
  .editor-tool{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center}
  .tool-icon{grid-row:auto;margin:auto}
}


/* v6.1 — exact Phone placement geometry */
.art-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.placed-art-wrap{
  position:absolute;
  width:25%;
  height:28%;
  transform-origin:center center;
}
.placed-art-wrap .placed-art{
  position:static!important;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  filter:drop-shadow(0 6px 7px #0008);
}


/* v7 — steel preview background + improved shirt separation */
html,body{
  background:
    radial-gradient(circle at 20% 12%, rgba(205,116,58,.09), transparent 22%),
    radial-gradient(circle at 82% 80%, rgba(92,101,109,.12), transparent 28%),
    linear-gradient(180deg, #161515 0%, #0f1011 100%) !important;
}

.topbar{
  background:
    linear-gradient(180deg, rgba(34,29,25,.98), rgba(18,16,14,.98)) !important;
  border-bottom:1px solid #6b4735 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.visual-panel{
  background:
    linear-gradient(180deg, rgba(29,25,22,.98), rgba(14,13,13,.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 44px rgba(0,0,0,.30);
}

.shirt-card{
  background:
    linear-gradient(180deg, rgba(40,35,31,.98), rgba(20,18,17,.98)) !important;
  border:1px solid #6d4b3b !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 18px 42px rgba(0,0,0,.34);
}

.shirt-mockup{
  border:1px solid #655148;
  border-radius:14px;
  background:
    linear-gradient(145deg, rgba(101,108,114,.88) 0%, rgba(57,62,67,.94) 28%, rgba(28,31,35,.98) 52%, rgba(70,75,80,.94) 76%, rgba(33,37,41,.98) 100%) !important,
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.03) 2px 6px),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 80% 82%, rgba(255,255,255,.05), transparent 24%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 18px 40px rgba(255,255,255,.03),
    inset 0 -24px 40px rgba(0,0,0,.22);
}

.shirt-mockup::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:1px solid rgba(213,134,81,.22);
  pointer-events:none;
}

.garment-photo{
  filter:
    drop-shadow(0 20px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 0.8px rgba(255,255,255,.36));
}

.shirt-card[data-color-family="light"] .garment-photo{
  filter:
    brightness(1.65) contrast(.82) grayscale(1)
    drop-shadow(0 20px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 0.8px rgba(255,255,255,.44));
}

.shirt-card[data-color-family="neon"] .garment-photo{
  filter:
    brightness(1.2) contrast(.96) grayscale(1)
    drop-shadow(0 20px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 0.8px rgba(255,255,255,.42));
}

.shirt-card[data-color-family="standard"] .garment-photo{
  filter:
    brightness(.92) contrast(1.08) grayscale(1)
    drop-shadow(0 20px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 0.9px rgba(235,235,235,.42));
}

.side-label{
  background:rgba(17,14,12,.72);
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(208,126,74,.28);
}

.zoom-hint{
  background:rgba(15,13,12,.72);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(98,79,69,.32);
}

.placed-art-wrap{
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.22));
}

.placed-art-wrap .placed-art{
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}

.file-link.primary,.primary-action,.primary-control{
  background:linear-gradient(#cf6f38,#7e3a1f) !important;
  border-color:#de8851 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.file-link.primary:hover,.primary-action:hover,.primary-control:hover{
  background:linear-gradient(#e17a40,#944625) !important;
}


/* v7.1 — FORCE visible brushed-steel workplate */
.shirt-card{
  background:
    linear-gradient(180deg, #2b2724 0%, #181513 100%) !important;
}

.shirt-mockup{
  background-color:#6f7479 !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.02) 9%,
      rgba(0,0,0,.05) 18%,
      rgba(255,255,255,.06) 27%,
      rgba(0,0,0,.04) 36%,
      rgba(255,255,255,.07) 45%,
      rgba(0,0,0,.05) 54%,
      rgba(255,255,255,.05) 63%,
      rgba(0,0,0,.04) 72%,
      rgba(255,255,255,.08) 81%,
      rgba(0,0,0,.05) 90%,
      rgba(255,255,255,.04) 100%
    ),
    linear-gradient(180deg,#8a9095 0%,#696f74 18%,#555b60 45%,#666c71 70%,#484e53 100%) !important;
  background-size:140px 100%,100% 100% !important;
  border:2px solid #8d725f !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 12px 28px rgba(255,255,255,.08),
    inset 0 -22px 35px rgba(0,0,0,.22),
    0 12px 30px rgba(0,0,0,.34) !important;
}

/* Steel plate frame / rivets */
.shirt-mockup::before{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border:1px solid rgba(44,31,24,.72) !important;
  border-radius:10px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 1px rgba(181,117,75,.24) !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.shirt-mockup::after{
  content:"" !important;
  position:absolute !important;
  inset:18px !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 0 0,#2d2b2a 0 3px,#b0b4b7 4px 5px,transparent 6px),
    radial-gradient(circle at 100% 0,#2d2b2a 0 3px,#b0b4b7 4px 5px,transparent 6px),
    radial-gradient(circle at 0 100%,#2d2b2a 0 3px,#b0b4b7 4px 5px,transparent 6px),
    radial-gradient(circle at 100% 100%,#2d2b2a 0 3px,#b0b4b7 4px 5px,transparent 6px) !important;
  background-repeat:no-repeat !important;
}

/* Keep actual shirt and art above the steel plate */
.garment-photo{z-index:2 !important}
.shirt-color-overlay{z-index:3 !important}
.art-layer{z-index:4 !important}

/* Stronger separation for black/dark garments */
.shirt-card[data-color-family="standard"] .garment-photo{
  filter:
    brightness(1.03) contrast(1.08) grayscale(1)
    drop-shadow(0 22px 20px rgba(0,0,0,.72))
    drop-shadow(0 0 1.5px rgba(255,255,255,.72)) !important;
}


/* v8 — live preview + compare + touch/mouse navigation */
.editor-canvas-wrap{
  touch-action:none!important;
  user-select:none;
  -webkit-user-select:none;
}
#graphicEditorCanvas{
  transform-origin:center center;
  will-change:transform;
  cursor:crosshair;
}
.editor-canvas-wrap.pan-active #graphicEditorCanvas{cursor:grabbing!important}
.live-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.live-preview-head>b{font-size:17px;color:#fff}
.live-preview-head>span{
  padding:5px 7px;
  border:1px solid #8a5b3e;
  border-radius:999px;
  color:#f0a06a;
  background:#24170f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.adjust-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.gesture-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 8px;
  padding:10px;
  border:1px solid #48362e;
  border-radius:10px;
  background:#100d0b;
}
.gesture-card span{
  color:#e58e59;
  font-size:9px;
  font-weight:900;
}
.gesture-card small{
  color:#a79488;
  font-size:9px;
  line-height:1.3;
}
.compare-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:8;
  padding:6px 9px;
  border:1px solid #ef9a65;
  border-radius:999px;
  background:rgba(25,14,9,.90);
  color:#ffae7a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  pointer-events:none;
}
.compare-action.active{
  border-color:#e78b57!important;
  color:#fff!important;
  background:linear-gradient(#5c321f,#281810)!important;
}
.danger-soft{
  border-color:#704039!important;
  color:#e9aaa1!important;
}
.editor-footer{
  flex-wrap:wrap;
}
@media(max-width:900px){
  .editor-footer .secondary-action,.editor-footer .primary-action{
    min-width:120px;
  }
}


/* v9 — save production copy status */
.editor-save-status{
  flex:1 1 180px;
  align-self:center;
  color:#bca99d;
  font-size:10px;
  text-align:right;
}
.editor-save-status.ok{color:#9fd39a}
.editor-save-status.error{color:#ef9c8d}
.primary-action[disabled]{opacity:.55;cursor:wait}


/* v10 — make live changes visibly obvious */
.control-group[data-panel="adjust"] input[type="range"]{
  accent-color:#e4783c;
}
.editor-canvas-card.live-adjusting{
  box-shadow:inset 0 0 0 2px rgba(231,119,61,.28);
}


/* 3.1 — Phone editor parity additions */
#graphicEditorOverlay{
  position:absolute;
  pointer-events:none;
  transform-origin:center center;
  max-width:100%;
  max-height:100%;
}
.editor-tool[data-tool="erase"] .tool-icon,
.editor-tool[data-tool="restore"] .tool-icon,
.editor-tool[data-tool="keep"] .tool-icon{
  color:#f1a06b;
}
.control-group[data-panel="erase"] input[type="range"],
.control-group[data-panel="restore"] input[type="range"],
.control-group[data-panel="remove"] input[type="range"]{
  accent-color:#e4783c;
}


/* Production Studio 3.2 — dedicated iPhone workflow */
.mobile-workspace-nav,.mobile-job-dock,.mobile-sheet-header,.mobile-editor-finish,.editor-tool-nav{display:none}

@media(max-width:720px){
  html,body{overscroll-behavior:none}
  #jobsView .job-grid{grid-template-columns:1fr!important;gap:10px}
  #workspaceView{padding-bottom:72px}
  #workspaceView .workspace{display:block}
  #workspaceView .visual-panel{padding:8px!important}
  #workspaceView .workspace-head .view-controls,#workspaceView #returnBoth{display:none!important}

  .mobile-workspace-nav{
    display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;
    position:sticky;top:0;z-index:35;padding:7px 8px;margin:-2px -2px 8px;
    background:rgba(18,15,13,.97);border-bottom:1px solid #654431;backdrop-filter:blur(8px)
  }
  .mobile-workspace-nav>button,.mobile-side-switch button{
    min-height:42px;border:1px solid #604433;border-radius:10px;background:#17120f;color:#f1e7e0;font-weight:900
  }
  .mobile-side-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .mobile-side-switch button{font-size:11px;letter-spacing:.08em}
  .mobile-side-switch button.active{background:linear-gradient(#a7572d,#67321d);border-color:#d47d49;color:#fff}

  .shirt-stage,.shirt-stage.split,.shirt-stage.single{display:block!important;min-height:0!important}
  .shirt-stage .shirt-card{display:none!important;min-height:0!important;padding:8px!important}
  .shirt-stage .shirt-card.mobile-visible{display:block!important}
  .shirt-mockup{min-height:0!important;aspect-ratio:1/1}
  .zoom-hint{display:none!important}

  .details-panel{display:none!important}
  body.mobile-sheet-open .details-panel{
    display:block!important;position:fixed;left:8px;right:8px;bottom:70px;z-index:80;
    max-height:65%;overflow:auto;padding:48px 10px 10px;border:1px solid #704b36;border-radius:16px 16px 8px 8px;
    background:linear-gradient(#211915,#100d0b);box-shadow:0 -18px 50px rgba(0,0,0,.62)
  }
  body.mobile-sheet-open .details-panel .panel-block{display:none!important;margin:0!important}
  body.mobile-sheet-open .details-panel .panel-block.mobile-panel-active{display:block!important}
  body.mobile-sheet-open .details-panel .production-files-panel{display:none!important}

  .mobile-sheet-header{
    position:fixed;left:18px;right:18px;bottom:calc(65% - 35px);z-index:90;
    grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;min-height:42px
  }
  body.mobile-sheet-open .mobile-sheet-header{display:grid!important}
  .mobile-sheet-header button{height:38px;border:1px solid #694735;border-radius:9px;background:#160f0c;color:#fff;font-size:20px}
  .mobile-sheet-header b{text-align:center;color:#f5e6dd;font-size:14px}

  .mobile-job-dock{
    display:grid;grid-template-columns:repeat(4,1fr);gap:5px;position:fixed;left:0;right:0;bottom:0;z-index:75;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(15,12,10,.98);border-top:1px solid #654431
  }
  .mobile-job-action{min-height:52px;display:grid;place-items:center;gap:1px;border:1px solid #403027;border-radius:10px;background:#181310;color:#d9c7bb}
  .mobile-job-action span{font-size:19px;color:#d47b48}
  .mobile-job-action b{font-size:9px}
  .mobile-job-action.active{border-color:#b76537;background:#2b190f;color:#fff}

  .image-modal{padding:0!important;place-items:stretch!important}
  .editor-shell{
    width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;border:0!important;
    display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto auto!important
  }
  .editor-topbar{min-height:54px;padding:6px 8px!important}
  .editor-brand-mark{width:32px!important;height:32px!important}
  .editor-brand small{display:none!important}
  .editor-brand b{max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px!important}
  .editor-top-actions{gap:4px!important}
  .editor-top-actions .icon-button{width:36px!important;height:36px!important;min-width:36px!important}
  .editor-tool-nav{display:inline-grid!important}

  .editor-layout{display:contents!important}
  .editor-tools-panel{
    display:flex!important;flex-direction:row!important;gap:5px!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:6px 8px!important;border-right:0!important;border-bottom:1px solid #493329;scrollbar-width:none
  }
  .editor-tools-panel::-webkit-scrollbar{display:none}
  .editor-tool{
    flex:0 0 62px!important;min-width:62px!important;min-height:54px!important;padding:5px 3px!important;
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:25px auto!important;align-items:center!important;justify-items:center!important;
    gap:1px!important;text-align:center!important;border-radius:8px!important
  }
  .editor-tool .tool-icon{font-size:20px!important}
  .editor-tool b{font-size:8px!important;line-height:1!important}
  .editor-tool small{display:none!important}

  .editor-main{display:grid!important;min-height:0!important;grid-template-columns:1fr!important;grid-template-rows:minmax(50%,1fr) auto!important}
  .editor-canvas-card{min-height:50%!important;padding:6px!important;grid-template-rows:minmax(0,1fr) auto!important}
  .editor-canvas-wrap{min-height:46vh!important;border-radius:9px!important}
  .canvas-help{min-height:20px;padding:3px 5px!important;font-size:8px!important}

  .editor-controls{
    max-height:156px!important;overflow:auto!important;padding:7px 9px!important;border-left:0!important;border-top:1px solid #493329!important;background:#120e0c!important
  }
  .editor-controls .control-group{padding:0!important;border:0!important;background:transparent!important}
  .editor-controls .control-group>b,.editor-controls .live-preview-head b{font-size:12px!important}
  .editor-controls label{margin:4px 0!important;font-size:9px!important}
  .editor-controls small{display:block;font-size:8px!important;line-height:1.2!important}
  .editor-controls .wide-control{min-height:36px!important;padding:5px 8px!important;font-size:9px!important}
  .gesture-card{display:none!important}
  .adjust-actions{gap:5px!important}

  .mobile-editor-finish{display:block!important;padding:6px 8px;border-top:1px solid #473027;background:#100c0a}
  .mobile-editor-finish .primary-action{width:100%;min-height:42px}

  .editor-footer{
    display:none!important;position:fixed!important;left:7px;right:7px;bottom:7px;z-index:150;padding:10px!important;
    border:1px solid #754b35!important;border-radius:14px!important;background:linear-gradient(#241813,#100c0a)!important;
    box-shadow:0 -18px 50px rgba(0,0,0,.65)
  }
  .editor-shell.mobile-finish-mode .editor-footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .editor-shell.mobile-finish-mode .mobile-editor-finish{visibility:hidden}
  .editor-footer .secondary-action,.editor-footer .primary-action{
    min-height:42px!important;min-width:0!important;width:100%!important;padding:7px!important;text-align:center;font-size:9px!important
  }
  .editor-save-status{grid-column:1/-1;text-align:center!important}
}


/* Production Studio 3.3 — customer-safe Availability panel */
.availability-card{
  display:grid;
  gap:12px;
}
.availability-status{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid #4a3a31;
  border-radius:12px;
  background:#15110f;
}
.availability-status b{
  display:block;
  margin-bottom:3px;
  color:#f2e7df;
  font-size:14px;
}
.availability-status small{
  color:#a99487;
  line-height:1.35;
}
.availability-dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  margin-top:3px;
  border-radius:50%;
  background:#8ac27d;
  box-shadow:0 0 0 3px rgba(138,194,125,.12);
}
.availability-options{
  display:grid;
  gap:7px;
}
.availability-options>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border:1px solid #3b3029;
  border-radius:9px;
  background:#100d0b;
}
.availability-options span{
  color:#e2d4ca;
  font-size:11px;
  font-weight:800;
}
.availability-options small{
  color:#8e7c72;
  font-size:9px;
  text-align:right;
}


/* Production Studio 3.4 — internal phone production controls */
.mobile-production-files{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #3d3029;
}
.mobile-production-files>small{
  display:block;
  margin-bottom:8px;
  color:#bb8a6a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.mobile-production-files .file-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.mobile-production-files .file-link.primary{
  grid-column:1/-1;
}

.supply-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:10px 0;
}
.supply-stat{
  padding:10px 6px;
  text-align:center;
  border:1px solid #49362d;
  border-radius:10px;
  background:#120e0c;
}
.supply-stat span{
  display:block;
  margin-bottom:3px;
  color:#987d6e;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}
.supply-stat b{
  color:#f1e5de;
  font-size:18px;
}
.supply-status{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:10px;
  border:1px solid #49362d;
  border-radius:10px;
  background:#15110f;
}
.supply-status-dot{
  width:11px;height:11px;flex:0 0 11px;margin-top:3px;border-radius:50%;
  background:#d19755;box-shadow:0 0 0 3px rgba(209,151,85,.12);
}
.supply-status.checked .supply-status-dot{background:#83bd78}
.supply-status b{display:block;color:#f0e2d9;font-size:11px}
.supply-status small{display:block;margin-top:2px;color:#9f8a7c;font-size:9px;line-height:1.3}
.supply-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:9px;
}
@media(max-width:420px){
  .supply-actions{grid-template-columns:1fr}
}


/* Production Studio 3.5 — shared live shirt-color preview */
.color-preview-status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:10px 0 8px;
}
.color-preview-status>div{
  padding:9px;
  border:1px solid #47362e;
  border-radius:9px;
  background:#110e0c;
}
.color-preview-status span{
  display:block;
  color:#9a7e6d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}
.color-preview-status b{
  display:block;
  margin-top:3px;
  color:#f3e7df;
  font-size:11px;
}
.color-preview-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
}
.preview-only-badge{
  padding:6px 8px;
  border:1px solid #70462f;
  border-radius:999px;
  background:#22150f;
  color:#e9925c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  white-space:nowrap;
}
.color-preview-help{
  display:block;
  margin-top:9px;
  color:#9d887a!important;
  line-height:1.35;
}
.color-reference-item.color-preview-swatch{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
.color-reference-item.color-preview-swatch:active{
  transform:scale(.96);
}
.color-reference-item.color-preview-swatch.active{
  border-color:#e1834b!important;
  box-shadow:inset 0 0 0 1px #e1834b,0 0 0 1px rgba(225,131,75,.16)!important;
}

/* Improved shirt renderer.
   Bright colors use a neutralized luminance base rather than inheriting
   the black garment's full darkness. This keeps folds/shadows but lets
   Red, Royal, Orange, Gold, etc. read much closer to their swatches. */
.shirt-card[data-render-profile="dark"] .garment-photo{
  filter:brightness(.90) contrast(1.08) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.58))!important;
}
.shirt-card[data-render-profile="standard"] .garment-photo{
  filter:brightness(1.18) contrast(.94) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.58))!important;
}
.shirt-card[data-render-profile="bright"] .garment-photo{
  filter:brightness(1.48) contrast(.82) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.55))!important;
}
.shirt-card[data-render-profile="light"] .garment-photo{
  filter:brightness(1.72) contrast(.78) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.52))!important;
}
.shirt-card[data-render-profile="white"] .garment-photo{
  filter:brightness(2.05) contrast(.70) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.48))!important;
}
.shirt-card[data-render-profile="neon"] .garment-photo{
  filter:brightness(1.72) contrast(.80) grayscale(1) drop-shadow(0 20px 18px rgba(0,0,0,.52))!important;
}

.shirt-color-overlay[data-render-profile="dark"]{
  mix-blend-mode:color!important;
  opacity:.90!important;
}
.shirt-color-overlay[data-render-profile="standard"]{
  mix-blend-mode:color!important;
  opacity:.96!important;
}
.shirt-color-overlay[data-render-profile="bright"]{
  mix-blend-mode:multiply!important;
  opacity:.88!important;
}
.shirt-color-overlay[data-render-profile="light"]{
  mix-blend-mode:multiply!important;
  opacity:.66!important;
}
.shirt-color-overlay[data-render-profile="white"]{
  mix-blend-mode:screen!important;
  opacity:.94!important;
}
.shirt-color-overlay[data-render-profile="neon"]{
  mix-blend-mode:screen!important;
  opacity:.82!important;
}

@media(max-width:720px){
  .color-reference.color-picker-grid{
    grid-template-columns:repeat(4,1fr)!important;
  }
  .color-reference-item i{
    width:34px!important;
    height:34px!important;
  }
  .color-preview-status b{font-size:10px}
  .color-preview-actions{align-items:stretch}
  .color-preview-actions .wide-control{flex:1}
}


/* ==========================================================
   Production Studio 3.6 — transparent shirt color renderer
   ========================================================== */
.shirt-mockup{
  isolation:isolate;
}

/* Clean swatch-matched color layer */
.shirt-color-overlay,
.shirt-shadow-overlay,
.shirt-highlight-overlay{
  position:absolute;
  inset:4% 5%;
  width:90%;
  height:92%;
  pointer-events:none;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.shirt-color-overlay{
  z-index:1;
  background:var(--shirt-color,#18191b);
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.shirt-shadow-overlay{
  z-index:2;
  background:
    radial-gradient(circle at 50% 14%, rgba(0,0,0,.16), transparent 20%),
    radial-gradient(circle at 18% 44%, rgba(0,0,0,.11), transparent 17%),
    radial-gradient(circle at 82% 44%, rgba(0,0,0,.11), transparent 17%),
    radial-gradient(circle at 50% 86%, rgba(0,0,0,.12), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.18) 100%);
  mix-blend-mode:multiply;
  opacity:.58;
}
.shirt-highlight-overlay{
  z-index:3;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.30), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 28%, transparent 52%),
    linear-gradient(90deg, rgba(255,255,255,.09) 0%, transparent 17%, transparent 83%, rgba(255,255,255,.07) 100%);
  mix-blend-mode:screen;
  opacity:.56;
}
.shirt-color-overlay[data-side="front"],
.shirt-shadow-overlay[data-side="front"],
.shirt-highlight-overlay[data-side="front"]{
  -webkit-mask-image:url("/1/assets/garments/tshirts/shirt-black-front.PNG");
  mask-image:url("/1/assets/garments/tshirts/shirt-black-front.PNG");
}
.shirt-color-overlay[data-side="back"],
.shirt-shadow-overlay[data-side="back"],
.shirt-highlight-overlay[data-side="back"]{
  -webkit-mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG");
  mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG");
}

/* Existing shirt photo is now only a ghost contour/wrinkle layer */
.garment-photo{
  z-index:4!important;
  mix-blend-mode:multiply!important;
  opacity:.24!important;
  filter:brightness(.96) contrast(1.34) grayscale(1) drop-shadow(0 16px 16px rgba(0,0,0,.42))!important;
}
.art-layer{z-index:6}

.shirt-card[data-render-profile="dark"] .shirt-shadow-overlay{opacity:.62}
.shirt-card[data-render-profile="dark"] .shirt-highlight-overlay{opacity:.42}
.shirt-card[data-render-profile="dark"] .garment-photo{opacity:.28!important}

.shirt-card[data-render-profile="standard"] .shirt-shadow-overlay{opacity:.56}
.shirt-card[data-render-profile="standard"] .shirt-highlight-overlay{opacity:.52}
.shirt-card[data-render-profile="standard"] .garment-photo{opacity:.22!important}

.shirt-card[data-render-profile="bright"] .shirt-shadow-overlay{opacity:.44}
.shirt-card[data-render-profile="bright"] .shirt-highlight-overlay{opacity:.64}
.shirt-card[data-render-profile="bright"] .garment-photo{opacity:.16!important}

.shirt-card[data-render-profile="light"] .shirt-shadow-overlay{opacity:.32}
.shirt-card[data-render-profile="light"] .shirt-highlight-overlay{opacity:.72}
.shirt-card[data-render-profile="light"] .garment-photo{opacity:.13!important}

.shirt-card[data-render-profile="white"] .shirt-shadow-overlay{opacity:.22}
.shirt-card[data-render-profile="white"] .shirt-highlight-overlay{opacity:.80}
.shirt-card[data-render-profile="white"] .garment-photo{opacity:.10!important}

.shirt-card[data-render-profile="neon"] .shirt-shadow-overlay{opacity:.28}
.shirt-card[data-render-profile="neon"] .shirt-highlight-overlay{opacity:.82}
.shirt-card[data-render-profile="neon"] .garment-photo{opacity:.10!important}

.color-preview-help strong{color:#f2e5db}


/* ==========================================================
   Production Studio 3.7 — 50% white underbase tint test
   User request:
   "Make the shirt 50% transparent white, then add the tint."
   Purpose:
   - lighten the garment foundation before tint
   - help the shirt color read closer to the swatch
   ========================================================== */

.shirt-underbase-overlay{
  position:absolute;
  inset:4% 5%;
  width:90%;
  height:92%;
  z-index:1;
  pointer-events:none;
  background:#ffffff;
  opacity:.50;
  mix-blend-mode:screen;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.shirt-underbase-overlay[data-side="front"]{
  -webkit-mask-image:url("/1/assets/garments/tshirts/shirt-black-front.PNG");
  mask-image:url("/1/assets/garments/tshirts/shirt-black-front.PNG");
}
.shirt-underbase-overlay[data-side="back"]{
  -webkit-mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG");
  mask-image:url("/1/assets/garments/tshirts/shirt-black-back.PNG");
}

/* Re-stack the transparent renderer to use:
   underbase white -> color tint -> shadow -> highlight -> contour -> art
*/
.shirt-color-overlay{z-index:2!important}
.shirt-shadow-overlay{z-index:3!important}
.shirt-highlight-overlay{z-index:4!important}
.garment-photo{z-index:5!important}
.art-layer{z-index:6!important}

/* Color tint now sits over the 50% white underbase.
   These opacities are intentionally lighter than 3.6 so the selected
   swatch can read brighter on screen. */
.shirt-card[data-render-profile="dark"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.90!important;
}
.shirt-card[data-render-profile="standard"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.84!important;
}
.shirt-card[data-render-profile="bright"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.78!important;
}
.shirt-card[data-render-profile="light"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.68!important;
}
.shirt-card[data-render-profile="white"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.18!important;
}
.shirt-card[data-render-profile="neon"] .shirt-color-overlay{
  mix-blend-mode:normal!important;
  opacity:.60!important;
}

/* Slightly soften the contour and deepen the highlight so the shirt keeps
   shape even though the color foundation is lighter. */
.garment-photo{
  opacity:.18!important;
  filter:brightness(.98) contrast(1.24) grayscale(1) drop-shadow(0 16px 16px rgba(0,0,0,.36))!important;
}
.shirt-card[data-render-profile="dark"] .garment-photo{opacity:.22!important}
.shirt-card[data-render-profile="standard"] .garment-photo{opacity:.18!important}
.shirt-card[data-render-profile="bright"] .garment-photo{opacity:.14!important}
.shirt-card[data-render-profile="light"] .garment-photo{opacity:.12!important}
.shirt-card[data-render-profile="white"] .garment-photo{opacity:.09!important}
.shirt-card[data-render-profile="neon"] .garment-photo{opacity:.10!important}

.shirt-card[data-render-profile="dark"] .shirt-shadow-overlay{opacity:.58}
.shirt-card[data-render-profile="standard"] .shirt-shadow-overlay{opacity:.50}
.shirt-card[data-render-profile="bright"] .shirt-shadow-overlay{opacity:.40}
.shirt-card[data-render-profile="light"] .shirt-shadow-overlay{opacity:.28}
.shirt-card[data-render-profile="white"] .shirt-shadow-overlay{opacity:.20}
.shirt-card[data-render-profile="neon"] .shirt-shadow-overlay{opacity:.24}

.shirt-card[data-render-profile="dark"] .shirt-highlight-overlay{opacity:.44}
.shirt-card[data-render-profile="standard"] .shirt-highlight-overlay{opacity:.56}
.shirt-card[data-render-profile="bright"] .shirt-highlight-overlay{opacity:.68}
.shirt-card[data-render-profile="light"] .shirt-highlight-overlay{opacity:.76}
.shirt-card[data-render-profile="white"] .shirt-highlight-overlay{opacity:.84}
.shirt-card[data-render-profile="neon"] .shirt-highlight-overlay{opacity:.86}


/* ==========================================================
   Production Studio 3.7A — LAYERED SHIRT SANDWICH RENDERER
   Layer order:
   1 steel stage
   2 50% white shirt underbase
   3 selected shirt color
   4 real wrinkle/shadow detail from garment artwork
   5 real highlight detail from garment artwork
   6 customer graphic
   ========================================================== */

/* Old gradient shadow/highlight overlays are retired in 3.7A. */
.shirt-shadow-overlay,
.shirt-highlight-overlay{
  display:none!important;
}

/* The actual garment texture is now duplicated into two independent layers:
   a dark detail layer and a highlight detail layer. */
.shirt-detail-shadow,
.shirt-detail-highlight{
  position:absolute;
  inset:4% 5%;
  width:90%;
  height:92%;
  object-fit:contain;
  pointer-events:none;
}

/* Wrinkles, seams, folds and dark dimensional detail */
.shirt-detail-shadow{
  z-index:4;
  mix-blend-mode:multiply;
  opacity:.62;
  filter:
    grayscale(1)
    brightness(.72)
    contrast(1.85)
    saturate(0)
    drop-shadow(0 16px 16px rgba(0,0,0,.28));
}

/* Light catching edges and raised folds */
.shirt-detail-highlight{
  z-index:5;
  mix-blend-mode:screen;
  opacity:.24;
  filter:
    grayscale(1)
    brightness(1.85)
    contrast(1.55)
    saturate(0);
}

/* White underbase and selected color stay below the wrinkle detail. */
.shirt-underbase-overlay{
  z-index:1!important;
  opacity:.50!important;
  mix-blend-mode:normal!important;
}
.shirt-color-overlay{
  z-index:2!important;
  mix-blend-mode:normal!important;
}

/* Remove the old single ghost-photo contribution entirely. */
.garment-photo{
  display:none!important;
}

/* Customer artwork remains untouched and always sits above the shirt. */
.art-layer{
  z-index:7!important;
}

/* Tune wrinkle detail by color family without changing the color itself. */
.shirt-card[data-render-profile="dark"] .shirt-detail-shadow{opacity:.70}
.shirt-card[data-render-profile="dark"] .shirt-detail-highlight{opacity:.18}

.shirt-card[data-render-profile="standard"] .shirt-detail-shadow{opacity:.62}
.shirt-card[data-render-profile="standard"] .shirt-detail-highlight{opacity:.24}

.shirt-card[data-render-profile="bright"] .shirt-detail-shadow{opacity:.54}
.shirt-card[data-render-profile="bright"] .shirt-detail-highlight{opacity:.28}

.shirt-card[data-render-profile="light"] .shirt-detail-shadow{opacity:.44}
.shirt-card[data-render-profile="light"] .shirt-detail-highlight{opacity:.32}

.shirt-card[data-render-profile="white"] .shirt-detail-shadow{opacity:.38}
.shirt-card[data-render-profile="white"] .shirt-detail-highlight{opacity:.20}

.shirt-card[data-render-profile="neon"] .shirt-detail-shadow{opacity:.42}
.shirt-card[data-render-profile="neon"] .shirt-detail-highlight{opacity:.34}

/* The color fill is intentionally strong so it reads close to the swatch. */
.shirt-card[data-render-profile="dark"] .shirt-color-overlay{opacity:.94!important}
.shirt-card[data-render-profile="standard"] .shirt-color-overlay{opacity:.90!important}
.shirt-card[data-render-profile="bright"] .shirt-color-overlay{opacity:.88!important}
.shirt-card[data-render-profile="light"] .shirt-color-overlay{opacity:.76!important}
.shirt-card[data-render-profile="white"] .shirt-color-overlay{opacity:.24!important}
.shirt-card[data-render-profile="neon"] .shirt-color-overlay{opacity:.72!important}


/* ==========================================================
   Production Studio 3.8 — REAL TRANSPARENT TEXTURE ASSETS
   These rules replace the CSS-filter approximation from 3.7A.
   The PHP generator creates:
   - shirt-front-mask.png
   - shirt-front-shadows.png
   - shirt-front-highlights.png
   - shirt-back-mask.png
   - shirt-back-shadows.png
   - shirt-back-highlights.png
   ========================================================== */

.shirt-underbase-overlay[data-side="front"],
.shirt-color-overlay[data-side="front"]{
  -webkit-mask-image:url("shirts/shirt-front-mask.png")!important;
  mask-image:url("shirts/shirt-front-mask.png")!important;
}
.shirt-underbase-overlay[data-side="back"],
.shirt-color-overlay[data-side="back"]{
  -webkit-mask-image:url("shirts/shirt-back-mask.png")!important;
  mask-image:url("shirts/shirt-back-mask.png")!important;
}

/* The generated PNGs already contain only transparent shadow/highlight pixels.
   Therefore they use simple blending instead of heavy CSS filtering. */
.shirt-detail-shadow,
.shirt-detail-highlight{
  position:absolute;
  inset:4% 5%;
  width:90%;
  height:92%;
  object-fit:contain;
  pointer-events:none;
  filter:none!important;
}
.shirt-detail-shadow{
  z-index:4!important;
  mix-blend-mode:multiply!important;
  opacity:.92!important;
}
.shirt-detail-highlight{
  z-index:5!important;
  mix-blend-mode:screen!important;
  opacity:.82!important;
}

/* Per-color profile tuning only changes texture intensity;
   selected shirt hue remains independent and clean. */
.shirt-card[data-render-profile="dark"] .shirt-detail-shadow{opacity:1!important}
.shirt-card[data-render-profile="dark"] .shirt-detail-highlight{opacity:.62!important}

.shirt-card[data-render-profile="standard"] .shirt-detail-shadow{opacity:.94!important}
.shirt-card[data-render-profile="standard"] .shirt-detail-highlight{opacity:.78!important}

.shirt-card[data-render-profile="bright"] .shirt-detail-shadow{opacity:.86!important}
.shirt-card[data-render-profile="bright"] .shirt-detail-highlight{opacity:.90!important}

.shirt-card[data-render-profile="light"] .shirt-detail-shadow{opacity:.72!important}
.shirt-card[data-render-profile="light"] .shirt-detail-highlight{opacity:.92!important}

.shirt-card[data-render-profile="white"] .shirt-detail-shadow{opacity:.62!important}
.shirt-card[data-render-profile="white"] .shirt-detail-highlight{opacity:.58!important}

.shirt-card[data-render-profile="neon"] .shirt-detail-shadow{opacity:.68!important}
.shirt-card[data-render-profile="neon"] .shirt-detail-highlight{opacity:.96!important}

/* Keep exact stacking order. */
.shirt-underbase-overlay{z-index:1!important}
.shirt-color-overlay{z-index:2!important}
.shirt-detail-shadow{z-index:4!important}
.shirt-detail-highlight{z-index:5!important}
.art-layer{z-index:7!important}