/* CSP-friendly first-party stylesheet: Design Studio */
.studio-hero{padding:65px 20px 58px;text-align:center;color:#fff8eb;background:linear-gradient(120deg,#082e27,#155840)}
.studio-eyebrow,.studio-index{font-size:12px;letter-spacing:.18em;color:#d7b577;font-weight:700}
.studio-hero h1{font:600 clamp(34px,5vw,62px)/1.12 Georgia,serif;margin:13px auto;max-width:740px}
.studio-hero em{color:#f0d5a0}
.studio-hero p:last-child{max-width:730px;margin:15px auto 0;color:#f3eee2}
.studio-wrap{max-width:1190px;margin:auto;padding:42px 22px 78px}
.studio-panel{background:#fffdf9;border:1px solid #e4d8c0;padding:clamp(20px,3.5vw,36px);border-radius:19px;margin-bottom:28px;box-shadow:0 13px 35px #082e2710}
.studio-heading h2{font:600 clamp(25px,3vw,36px) Georgia,serif;margin:8px 0}
.studio-heading p{color:#52665d;max-width:800px;margin-top:0}
.studio-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:32px;margin-top:24px}
.studio-stage{position:relative;min-height:430px;display:grid;place-items:center;background:radial-gradient(circle at center,#fdf2db,#efe7d8);border-radius:18px;border:1px solid #e9dbc2;overflow:hidden}
.sweatshirt{position:relative;width:min(100%,350px);aspect-ratio:360/380;--shirt:#224936;--print:#f6e5c5}
.shirt-outline{width:100%;height:100%;filter:drop-shadow(0 12px 9px #1a1a1a22)}
.shirt-fill{fill:var(--shirt);stroke:#253c32;stroke-width:2}
.shirt-shadow{fill:#333;opacity:.3;transform:translate(0px,9px)}
.collar{fill:var(--shirt);stroke:#ffffff55;stroke-width:4}
.seams{fill:none;stroke:#fff6;stroke-width:2}
.hood-detail,.hoodie-pocket{display:none}
.sweatshirt[data-garment=hoodie] .hood-detail{display:block;fill:var(--shirt);stroke:#f8f0e4bb;stroke-width:3}
.sweatshirt[data-garment=hoodie] .hoodie-pocket{display:block;fill:none;stroke:#f8f0e4a0;stroke-width:2}
.sweatshirt[data-garment=hoodie] .collar{display:none}
.design-canvas{position:absolute;left:24%;top:20%;width:52%;height:54%;pointer-events:none}
.draggable-layer{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);max-width:92%;pointer-events:auto;cursor:grab;user-select:none;touch-action:none}
.draggable-layer:active,.draggable-layer.dragging{cursor:grabbing}
.layer-tag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);padding:4px 7px;border-radius:999px;background:#fff6e7;border:1px solid #d9c39b;color:#214436;font:700 10px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .18s ease;white-space:nowrap}
.draggable-layer:hover .layer-tag,.draggable-layer:focus-visible .layer-tag,.draggable-layer.dragging .layer-tag{opacity:1}
.text-layer{z-index:2;text-align:center;color:var(--print);text-shadow:0 1px 1px #0003}
.text-layer strong{display:block;font:700 24px/1.16 Georgia,serif;overflow-wrap:anywhere;padding:2px 8px}
.text-layer.script strong{font-style:italic;font-weight:400}
.text-layer.modern strong{font-family:Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.image-layer{z-index:1;width:34%}
.image-layer img{display:block;width:100%;height:auto;max-height:160px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.sleeve-mark{position:absolute;top:35%;left:13%;color:var(--print);font-size:23px;transform:rotate(-15deg)}
.studio-stage[data-color=burgundy] .sweatshirt{--shirt:#692e40}
.studio-stage[data-color=sand] .sweatshirt{--shirt:#c7aa82;--print:#183d30}
.studio-stage[data-color=black] .sweatshirt{--shirt:#22252a}
.studio-stage[data-color=blue] .sweatshirt{--shirt:#7694a5;--print:#15372e}
.stage-caption{text-align:center;font-size:12px;color:#69786e}
.garment-preview-label{position:absolute;left:16px;top:15px;padding:6px 12px;background:#fffdf8e8;border:1px solid #d6c6a7;border-radius:18px;color:#173d30;font:700 12px Arial,sans-serif;z-index:2;pointer-events:none}
.studio-controls,.studio-request{display:flex;flex-direction:column;gap:9px}
.studio-controls label,.studio-request>label:not(.tick),.studio-controls legend{font-weight:700;font-size:14px;color:#133f31}
.studio-controls input:not([type=radio]):not([type=checkbox]):not([type=range]),.studio-controls select,.studio-request input:not([type=checkbox]),.studio-request select,.studio-request textarea{border:1px solid #cfc7b5;border-radius:8px;padding:11px 12px;font:inherit;width:100%;background:white;color:#173d30}
.studio-controls input[type=file]{padding:10px 12px;background:#fff}
.control-group{border:0;padding:0;margin:0 0 12px;min-width:0}
.control-group label{display:block;margin-bottom:7px}
.control-group small{font-weight:400;color:#637269}
.range-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.range-row input[type=range]{width:100%;accent-color:#0b5c45}
.range-row output{padding:7px 10px;border-radius:8px;background:#f6efdf;border:1px solid #e5d3b1;color:#173d30;font:700 12px Arial,sans-serif;min-width:56px;text-align:center}
.swatch-group{display:flex;flex-wrap:wrap;gap:10px}
.swatch-group label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px;margin:0}
.swatch{display:inline-block;width:18px;height:18px;border:2px solid white;outline:1px solid #a6ac9f;border-radius:50%}
.swatch.forest{background:#224936}.swatch.burgundy{background:#692e40}.swatch.sand{background:#c7aa82}.swatch.black{background:#22252a}.swatch.blue{background:#7694a5}
.tick{display:flex;gap:9px;align-items:flex-start;font-size:13px;font-weight:500;margin:12px 0}.tick input{margin-top:4px;accent-color:#0b5c45}
.studio-button-row{display:flex;gap:10px;flex-wrap:wrap}
.studio-primary,.studio-secondary{border:1px solid #082e27;border-radius:8px;padding:12px 18px;cursor:pointer;font:700 14px Arial,sans-serif}
.studio-primary{background:#082e27;color:#fffdf5}.studio-secondary{background:#fffdf5;color:#082e27}.studio-primary:hover{background:#135d49}
.studio-status{font-size:13px;min-height:1em;color:#205a45}
.quality-status{font-size:13px;line-height:1.45;color:#214436;background:#f6efdf;border:1px solid #e5d3b1;border-radius:10px;padding:10px 12px;margin:2px 0 0}
.quality-status.good{background:#edf8f0;border-color:#b6d3b6}
.quality-status.warn{background:#fff4e7;border-color:#e7c79d}
.quality-status.bad{background:#fff0ef;border-color:#e4b2ad;color:#7a312f}
.input-note,.studio-hint,.garment-hint{font-size:12px;color:#56695c;margin:6px 0 0}
.studio-request-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:40px;margin-top:20px}
.studio-note{background:#f6efdf;padding:25px;border:1px solid #e5d3b1;border-radius:13px;align-self:start}
.studio-note h3{margin:0 0 15px;font:600 24px Georgia,serif}
.studio-note li{margin-bottom:12px}.studio-note p,.studio-hint{font-size:13px;color:#536157}
.studio-request textarea{resize:vertical}.studio-request .studio-primary{align-self:flex-start}
@media(max-width:810px){
  .studio-layout,.studio-request-grid{grid-template-columns:1fr}
  .studio-stage{min-height:335px}
  .sweatshirt{width:min(100%,315px)}
  .studio-wrap{padding:20px 13px 45px}
  .design-canvas{left:22%;top:19%;width:56%;height:56%}
  .studio-button-row{flex-direction:column}
}

/* Editor improvements: centered layers, larger drag targets and no obstructive overlay. */
.design-canvas{overflow:visible}
.draggable-layer{outline:1px dashed transparent;outline-offset:4px;min-height:26px}
.draggable-layer:focus-visible,.draggable-layer:hover,.draggable-layer.dragging{outline-color:#d8b36e}
.draggable-layer img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.draggable-layer .layer-tag{pointer-events:none}
.text-layer{left:50%;top:50%}
.image-layer{left:50%;top:50%}

/* Stable text sizing and positions: no inline CSS or CSSOM used (CSP-safe). */
.text-layer{width:92%;max-width:92%;min-width:0;box-sizing:border-box;white-space:normal}
.text-layer strong{display:block;font-size:18px;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none;white-space:normal;padding:2px 1px}
.text-layer.is-pocket{width:45%;max-width:45%}
.text-layer.is-pocket strong{font-size:inherit}
.image-layer{width:34%}
.ds-x-0{left:0%}.ds-y-0{top:0%}
.ds-x-1{left:1%}.ds-y-1{top:1%}
.ds-x-2{left:2%}.ds-y-2{top:2%}
.ds-x-3{left:3%}.ds-y-3{top:3%}
.ds-x-4{left:4%}.ds-y-4{top:4%}
.ds-x-5{left:5%}.ds-y-5{top:5%}
.ds-x-6{left:6%}.ds-y-6{top:6%}
.ds-x-7{left:7%}.ds-y-7{top:7%}
.ds-x-8{left:8%}.ds-y-8{top:8%}
.ds-x-9{left:9%}.ds-y-9{top:9%}
.ds-x-10{left:10%}.ds-y-10{top:10%}
.ds-x-11{left:11%}.ds-y-11{top:11%}
.ds-x-12{left:12%}.ds-y-12{top:12%}
.ds-x-13{left:13%}.ds-y-13{top:13%}
.ds-x-14{left:14%}.ds-y-14{top:14%}
.ds-x-15{left:15%}.ds-y-15{top:15%}
.ds-x-16{left:16%}.ds-y-16{top:16%}
.ds-x-17{left:17%}.ds-y-17{top:17%}
.ds-x-18{left:18%}.ds-y-18{top:18%}
.ds-x-19{left:19%}.ds-y-19{top:19%}
.ds-x-20{left:20%}.ds-y-20{top:20%}
.ds-x-21{left:21%}.ds-y-21{top:21%}
.ds-x-22{left:22%}.ds-y-22{top:22%}
.ds-x-23{left:23%}.ds-y-23{top:23%}
.ds-x-24{left:24%}.ds-y-24{top:24%}
.ds-x-25{left:25%}.ds-y-25{top:25%}
.ds-x-26{left:26%}.ds-y-26{top:26%}
.ds-x-27{left:27%}.ds-y-27{top:27%}
.ds-x-28{left:28%}.ds-y-28{top:28%}
.ds-x-29{left:29%}.ds-y-29{top:29%}
.ds-x-30{left:30%}.ds-y-30{top:30%}
.ds-x-31{left:31%}.ds-y-31{top:31%}
.ds-x-32{left:32%}.ds-y-32{top:32%}
.ds-x-33{left:33%}.ds-y-33{top:33%}
.ds-x-34{left:34%}.ds-y-34{top:34%}
.ds-x-35{left:35%}.ds-y-35{top:35%}
.ds-x-36{left:36%}.ds-y-36{top:36%}
.ds-x-37{left:37%}.ds-y-37{top:37%}
.ds-x-38{left:38%}.ds-y-38{top:38%}
.ds-x-39{left:39%}.ds-y-39{top:39%}
.ds-x-40{left:40%}.ds-y-40{top:40%}
.ds-x-41{left:41%}.ds-y-41{top:41%}
.ds-x-42{left:42%}.ds-y-42{top:42%}
.ds-x-43{left:43%}.ds-y-43{top:43%}
.ds-x-44{left:44%}.ds-y-44{top:44%}
.ds-x-45{left:45%}.ds-y-45{top:45%}
.ds-x-46{left:46%}.ds-y-46{top:46%}
.ds-x-47{left:47%}.ds-y-47{top:47%}
.ds-x-48{left:48%}.ds-y-48{top:48%}
.ds-x-49{left:49%}.ds-y-49{top:49%}
.ds-x-50{left:50%}.ds-y-50{top:50%}
.ds-x-51{left:51%}.ds-y-51{top:51%}
.ds-x-52{left:52%}.ds-y-52{top:52%}
.ds-x-53{left:53%}.ds-y-53{top:53%}
.ds-x-54{left:54%}.ds-y-54{top:54%}
.ds-x-55{left:55%}.ds-y-55{top:55%}
.ds-x-56{left:56%}.ds-y-56{top:56%}
.ds-x-57{left:57%}.ds-y-57{top:57%}
.ds-x-58{left:58%}.ds-y-58{top:58%}
.ds-x-59{left:59%}.ds-y-59{top:59%}
.ds-x-60{left:60%}.ds-y-60{top:60%}
.ds-x-61{left:61%}.ds-y-61{top:61%}
.ds-x-62{left:62%}.ds-y-62{top:62%}
.ds-x-63{left:63%}.ds-y-63{top:63%}
.ds-x-64{left:64%}.ds-y-64{top:64%}
.ds-x-65{left:65%}.ds-y-65{top:65%}
.ds-x-66{left:66%}.ds-y-66{top:66%}
.ds-x-67{left:67%}.ds-y-67{top:67%}
.ds-x-68{left:68%}.ds-y-68{top:68%}
.ds-x-69{left:69%}.ds-y-69{top:69%}
.ds-x-70{left:70%}.ds-y-70{top:70%}
.ds-x-71{left:71%}.ds-y-71{top:71%}
.ds-x-72{left:72%}.ds-y-72{top:72%}
.ds-x-73{left:73%}.ds-y-73{top:73%}
.ds-x-74{left:74%}.ds-y-74{top:74%}
.ds-x-75{left:75%}.ds-y-75{top:75%}
.ds-x-76{left:76%}.ds-y-76{top:76%}
.ds-x-77{left:77%}.ds-y-77{top:77%}
.ds-x-78{left:78%}.ds-y-78{top:78%}
.ds-x-79{left:79%}.ds-y-79{top:79%}
.ds-x-80{left:80%}.ds-y-80{top:80%}
.ds-x-81{left:81%}.ds-y-81{top:81%}
.ds-x-82{left:82%}.ds-y-82{top:82%}
.ds-x-83{left:83%}.ds-y-83{top:83%}
.ds-x-84{left:84%}.ds-y-84{top:84%}
.ds-x-85{left:85%}.ds-y-85{top:85%}
.ds-x-86{left:86%}.ds-y-86{top:86%}
.ds-x-87{left:87%}.ds-y-87{top:87%}
.ds-x-88{left:88%}.ds-y-88{top:88%}
.ds-x-89{left:89%}.ds-y-89{top:89%}
.ds-x-90{left:90%}.ds-y-90{top:90%}
.ds-x-91{left:91%}.ds-y-91{top:91%}
.ds-x-92{left:92%}.ds-y-92{top:92%}
.ds-x-93{left:93%}.ds-y-93{top:93%}
.ds-x-94{left:94%}.ds-y-94{top:94%}
.ds-x-95{left:95%}.ds-y-95{top:95%}
.ds-x-96{left:96%}.ds-y-96{top:96%}
.ds-x-97{left:97%}.ds-y-97{top:97%}
.ds-x-98{left:98%}.ds-y-98{top:98%}
.ds-x-99{left:99%}.ds-y-99{top:99%}
.ds-x-100{left:100%}.ds-y-100{top:100%}
.ds-font-14{font-size:14px!important}
.ds-font-15{font-size:15px!important}
.ds-font-16{font-size:16px!important}
.ds-font-17{font-size:17px!important}
.ds-font-18{font-size:18px!important}
.ds-font-19{font-size:19px!important}
.ds-font-20{font-size:20px!important}
.ds-font-21{font-size:21px!important}
.ds-font-22{font-size:22px!important}
.ds-font-23{font-size:23px!important}
.ds-font-24{font-size:24px!important}
.ds-font-25{font-size:25px!important}
.ds-font-26{font-size:26px!important}
.ds-font-27{font-size:27px!important}
.ds-font-28{font-size:28px!important}
.ds-font-29{font-size:29px!important}
.ds-font-30{font-size:30px!important}
.ds-font-31{font-size:31px!important}
.ds-font-32{font-size:32px!important}
.ds-font-33{font-size:33px!important}
.ds-font-34{font-size:34px!important}
.ds-font-35{font-size:35px!important}
.ds-font-36{font-size:36px!important}
.ds-font-37{font-size:37px!important}
.ds-font-38{font-size:38px!important}
.ds-font-39{font-size:39px!important}
.ds-font-40{font-size:40px!important}
.ds-font-41{font-size:41px!important}
.ds-font-42{font-size:42px!important}
.text-layer strong.ds-font-14{font-size:14px!important}
.text-layer strong.ds-font-15{font-size:15px!important}
.text-layer strong.ds-font-16{font-size:16px!important}
.text-layer strong.ds-font-17{font-size:17px!important}
.text-layer strong.ds-font-18{font-size:18px!important}
.text-layer strong.ds-font-19{font-size:19px!important}
.text-layer strong.ds-font-20{font-size:20px!important}
.text-layer strong.ds-font-21{font-size:21px!important}
.text-layer strong.ds-font-22{font-size:22px!important}
.text-layer strong.ds-font-23{font-size:23px!important}
.text-layer strong.ds-font-24{font-size:24px!important}
.text-layer strong.ds-font-25{font-size:25px!important}
.text-layer strong.ds-font-26{font-size:26px!important}
.text-layer strong.ds-font-27{font-size:27px!important}
.text-layer strong.ds-font-28{font-size:28px!important}
.text-layer strong.ds-font-29{font-size:29px!important}
.text-layer strong.ds-font-30{font-size:30px!important}
.text-layer strong.ds-font-31{font-size:31px!important}
.text-layer strong.ds-font-32{font-size:32px!important}
.text-layer strong.ds-font-33{font-size:33px!important}
.text-layer strong.ds-font-34{font-size:34px!important}
.text-layer strong.ds-font-35{font-size:35px!important}
.text-layer strong.ds-font-36{font-size:36px!important}
.text-layer strong.ds-font-37{font-size:37px!important}
.text-layer strong.ds-font-38{font-size:38px!important}
.text-layer strong.ds-font-39{font-size:39px!important}
.text-layer strong.ds-font-40{font-size:40px!important}
.text-layer strong.ds-font-41{font-size:41px!important}
.text-layer strong.ds-font-42{font-size:42px!important}
.image-layer.ds-width-18{width:18%}
.image-layer.ds-width-19{width:19%}
.image-layer.ds-width-20{width:20%}
.image-layer.ds-width-21{width:21%}
.image-layer.ds-width-22{width:22%}
.image-layer.ds-width-23{width:23%}
.image-layer.ds-width-24{width:24%}
.image-layer.ds-width-25{width:25%}
.image-layer.ds-width-26{width:26%}
.image-layer.ds-width-27{width:27%}
.image-layer.ds-width-28{width:28%}
.image-layer.ds-width-29{width:29%}
.image-layer.ds-width-30{width:30%}
.image-layer.ds-width-31{width:31%}
.image-layer.ds-width-32{width:32%}
.image-layer.ds-width-33{width:33%}
.image-layer.ds-width-34{width:34%}
.image-layer.ds-width-35{width:35%}
.image-layer.ds-width-36{width:36%}
.image-layer.ds-width-37{width:37%}
.image-layer.ds-width-38{width:38%}
.image-layer.ds-width-39{width:39%}
.image-layer.ds-width-40{width:40%}
.image-layer.ds-width-41{width:41%}
.image-layer.ds-width-42{width:42%}
.image-layer.ds-width-43{width:43%}
.image-layer.ds-width-44{width:44%}
.image-layer.ds-width-45{width:45%}
.image-layer.ds-width-46{width:46%}
.image-layer.ds-width-47{width:47%}
.image-layer.ds-width-48{width:48%}
.image-layer.ds-width-49{width:49%}
.image-layer.ds-width-50{width:50%}
.image-layer.ds-width-51{width:51%}
.image-layer.ds-width-52{width:52%}
.image-layer.ds-width-53{width:53%}
.image-layer.ds-width-54{width:54%}
.image-layer.ds-width-55{width:55%}
.image-layer.ds-width-56{width:56%}
.image-layer.ds-width-57{width:57%}
.image-layer.ds-width-58{width:58%}
.image-layer.ds-width-59{width:59%}
.image-layer.ds-width-60{width:60%}
.image-layer.ds-width-61{width:61%}
.image-layer.ds-width-62{width:62%}
.image-layer.ds-width-63{width:63%}
.image-layer.ds-width-64{width:64%}
.image-layer.ds-width-65{width:65%}
.image-layer.ds-width-66{width:66%}
.image-layer.ds-width-67{width:67%}
.image-layer.ds-width-68{width:68%}

/* Multi-line input, optional text, and transparent estimate panel. */
.studio-controls textarea#design-text{border:1px solid #cfc7b5;border-radius:8px;padding:11px 12px;font:inherit;width:100%;background:white;color:#173d30;resize:vertical;min-height:94px}
#preview-text{white-space:pre-line}
.studio-price-panel{border:1px solid #d6c296;background:#f8f1e2;border-radius:14px;padding:18px;margin:7px 0 14px}
.studio-price-panel h3{font:700 18px Georgia,serif;margin:0 0 8px;color:#173d30}
.studio-price-panel strong{font:700 30px Georgia,serif;color:#0c4634}
.studio-price-panel p{margin:6px 0;font-size:13px;color:#41594d}

/* Inspiration cards: separate examples; not interactive orderable designs. */
.studio-ideas-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.studio-idea-card{margin:0;overflow:hidden;border-radius:15px;background:#f9f4e9;border:1px solid #dfd0b4;box-shadow:0 6px 18px #082e270d}
.studio-idea-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.studio-idea-card figcaption{text-align:center;font:700 14px/1.5 Georgia,serif;color:#183d30;padding:12px 8px;background:#fff9ed}
@media(max-width:850px){.studio-ideas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:480px){.studio-idea-card figcaption{font-size:12px}}

/* Additional garment and text palette — all first-party CSS for strict CSP. */
.studio-stage[data-color=white] .sweatshirt{--shirt:#f6f5f0}
.studio-stage[data-color=heather] .sweatshirt{--shirt:#9b9c9c}
.studio-stage[data-color=navy] .sweatshirt{--shirt:#23324d}
.studio-stage[data-color=pink] .sweatshirt{--shirt:#e7b9c4}
.studio-stage[data-color=lavender] .sweatshirt{--shirt:#b5a3d2}
.studio-stage[data-color=sage] .sweatshirt{--shirt:#a2b6a0}
.studio-stage[data-color=red] .sweatshirt{--shirt:#ac303a}
.studio-stage[data-color=natural] .sweatshirt{--shirt:#e5d5b8}
.swatch.white{background:#f6f5f0}.swatch.heather{background:#9b9c9c}.swatch.navy{background:#23324d}
.swatch.pink{background:#e7b9c4}.swatch.lavender{background:#b5a3d2}.swatch.sage{background:#a2b6a0}
.swatch.red{background:#ac303a}.swatch.natural{background:#e5d5b8}
.swatch.ink-cream{background:#f6e5c5}.swatch.ink-white{background:#ffffff}.swatch.ink-black{background:#171717}
.swatch.ink-emerald{background:#11634e}.swatch.ink-gold{background:#c59b54}.swatch.ink-burgundy{background:#7f2436}
.swatch.ink-pink{background:#ed8ea8}.swatch.ink-blue{background:#527ac6}
.studio-stage[data-text-color=cream] .text-layer{color:#f6e5c5}
.studio-stage[data-text-color=white] .text-layer{color:#ffffff}
.studio-stage[data-text-color=black] .text-layer{color:#171717;text-shadow:0 1px 1px #fff5}
.studio-stage[data-text-color=emerald] .text-layer{color:#11634e;text-shadow:0 1px 1px #fff5}
.studio-stage[data-text-color=gold] .text-layer{color:#c59b54}
.studio-stage[data-text-color=burgundy] .text-layer{color:#7f2436;text-shadow:0 1px 1px #fff4}
.studio-stage[data-text-color=pink] .text-layer{color:#ed8ea8}
.studio-stage[data-text-color=blue] .text-layer{color:#527ac6}
/* Make long swatch lists easier to navigate without shifting the preview. */
.swatch-group{row-gap:12px}
.swatch-group label{white-space:nowrap}

/* Optional left sleeve customization. All movement/size rules are prebuilt for CSP. */
.sleeve-customizer{border:1px solid #d7c6a7;background:#faf5e9;border-radius:14px;padding:18px;display:grid;gap:10px;margin:4px 0 16px}
.sleeve-customizer h3{font:600 21px Georgia,serif;margin:0;color:#153e30}.sleeve-customizer h3 small{font:700 12px Arial,sans-serif;color:#87622e}
.sleeve-customizer label{margin:0}.sleeve-option{display:grid;gap:6px}.sleeve-active-preview{display:grid;gap:8px}
.sleeve-closeup{height:180px;position:relative;overflow:hidden;border-radius:13px;background:linear-gradient(130deg,#fffaf1,#e5dbc8);border:1px solid #d8c8a9}
.sleeve-closeup:before{content:"";position:absolute;width:120px;height:230px;top:-20px;left:50%;transform:translateX(-50%) rotate(-8deg);background:var(--sleeve-cloth,#224936);border:2px solid #ffffff33;border-radius:24px 22px 36px 38px;box-shadow:9px 8px 15px #0002}
.sleeve-closeup-art{position:absolute;left:50%;top:50%;width:60px;max-width:110px;transform:translate(-50%,-50%) rotate(-8deg);text-align:center;color:#f9e8c8;font:700 21px Georgia,serif;overflow-wrap:anywhere}
.sleeve-closeup-art img{max-width:100%;max-height:90px;object-fit:contain;display:block;margin:auto}
.sleeve-mark-text{font:700 10px Arial,sans-serif;max-width:50px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sleeve-closeup[data-color=burgundy]{--sleeve-cloth:#692e40}.sleeve-closeup[data-color=sand]{--sleeve-cloth:#c7aa82}.sleeve-closeup[data-color=black]{--sleeve-cloth:#22252a}.sleeve-closeup[data-color=blue]{--sleeve-cloth:#7694a5}.sleeve-closeup[data-color=white]{--sleeve-cloth:#f6f5f0}.sleeve-closeup[data-color=navy]{--sleeve-cloth:#23324d}
.sleeve-scale-20{width:25px}
.sleeve-scale-25{width:31px}
.sleeve-scale-30{width:38px}
.sleeve-scale-35{width:44px}
.sleeve-scale-40{width:50px}
.sleeve-scale-45{width:56px}
.sleeve-scale-50{width:62px}
.sleeve-scale-55{width:69px}
.sleeve-scale-60{width:75px}
.sleeve-scale-65{width:81px}
.sleeve-scale-70{width:88px}
.sleeve-scale-75{width:94px}
.sleeve-scale-80{width:100px}
.sleeve-pos-x-20{left:20%}.sleeve-pos-y-20{top:20%}
.sleeve-pos-x-21{left:21%}.sleeve-pos-y-21{top:21%}
.sleeve-pos-x-22{left:22%}.sleeve-pos-y-22{top:22%}
.sleeve-pos-x-23{left:23%}.sleeve-pos-y-23{top:23%}
.sleeve-pos-x-24{left:24%}.sleeve-pos-y-24{top:24%}
.sleeve-pos-x-25{left:25%}.sleeve-pos-y-25{top:25%}
.sleeve-pos-x-26{left:26%}.sleeve-pos-y-26{top:26%}
.sleeve-pos-x-27{left:27%}.sleeve-pos-y-27{top:27%}
.sleeve-pos-x-28{left:28%}.sleeve-pos-y-28{top:28%}
.sleeve-pos-x-29{left:29%}.sleeve-pos-y-29{top:29%}
.sleeve-pos-x-30{left:30%}.sleeve-pos-y-30{top:30%}
.sleeve-pos-x-31{left:31%}.sleeve-pos-y-31{top:31%}
.sleeve-pos-x-32{left:32%}.sleeve-pos-y-32{top:32%}
.sleeve-pos-x-33{left:33%}.sleeve-pos-y-33{top:33%}
.sleeve-pos-x-34{left:34%}.sleeve-pos-y-34{top:34%}
.sleeve-pos-x-35{left:35%}.sleeve-pos-y-35{top:35%}
.sleeve-pos-x-36{left:36%}.sleeve-pos-y-36{top:36%}
.sleeve-pos-x-37{left:37%}.sleeve-pos-y-37{top:37%}
.sleeve-pos-x-38{left:38%}.sleeve-pos-y-38{top:38%}
.sleeve-pos-x-39{left:39%}.sleeve-pos-y-39{top:39%}
.sleeve-pos-x-40{left:40%}.sleeve-pos-y-40{top:40%}
.sleeve-pos-x-41{left:41%}.sleeve-pos-y-41{top:41%}
.sleeve-pos-x-42{left:42%}.sleeve-pos-y-42{top:42%}
.sleeve-pos-x-43{left:43%}.sleeve-pos-y-43{top:43%}
.sleeve-pos-x-44{left:44%}.sleeve-pos-y-44{top:44%}
.sleeve-pos-x-45{left:45%}.sleeve-pos-y-45{top:45%}
.sleeve-pos-x-46{left:46%}.sleeve-pos-y-46{top:46%}
.sleeve-pos-x-47{left:47%}.sleeve-pos-y-47{top:47%}
.sleeve-pos-x-48{left:48%}.sleeve-pos-y-48{top:48%}
.sleeve-pos-x-49{left:49%}.sleeve-pos-y-49{top:49%}
.sleeve-pos-x-50{left:50%}.sleeve-pos-y-50{top:50%}
.sleeve-pos-x-51{left:51%}.sleeve-pos-y-51{top:51%}
.sleeve-pos-x-52{left:52%}.sleeve-pos-y-52{top:52%}
.sleeve-pos-x-53{left:53%}.sleeve-pos-y-53{top:53%}
.sleeve-pos-x-54{left:54%}.sleeve-pos-y-54{top:54%}
.sleeve-pos-x-55{left:55%}.sleeve-pos-y-55{top:55%}
.sleeve-pos-x-56{left:56%}.sleeve-pos-y-56{top:56%}
.sleeve-pos-x-57{left:57%}.sleeve-pos-y-57{top:57%}
.sleeve-pos-x-58{left:58%}.sleeve-pos-y-58{top:58%}
.sleeve-pos-x-59{left:59%}.sleeve-pos-y-59{top:59%}
.sleeve-pos-x-60{left:60%}.sleeve-pos-y-60{top:60%}
.sleeve-pos-x-61{left:61%}.sleeve-pos-y-61{top:61%}
.sleeve-pos-x-62{left:62%}.sleeve-pos-y-62{top:62%}
.sleeve-pos-x-63{left:63%}.sleeve-pos-y-63{top:63%}
.sleeve-pos-x-64{left:64%}.sleeve-pos-y-64{top:64%}
.sleeve-pos-x-65{left:65%}.sleeve-pos-y-65{top:65%}
.sleeve-pos-x-66{left:66%}.sleeve-pos-y-66{top:66%}
.sleeve-pos-x-67{left:67%}.sleeve-pos-y-67{top:67%}
.sleeve-pos-x-68{left:68%}.sleeve-pos-y-68{top:68%}
.sleeve-pos-x-69{left:69%}.sleeve-pos-y-69{top:69%}
.sleeve-pos-x-70{left:70%}.sleeve-pos-y-70{top:70%}
.sleeve-pos-x-71{left:71%}.sleeve-pos-y-71{top:71%}
.sleeve-pos-x-72{left:72%}.sleeve-pos-y-72{top:72%}
.sleeve-pos-x-73{left:73%}.sleeve-pos-y-73{top:73%}
.sleeve-pos-x-74{left:74%}.sleeve-pos-y-74{top:74%}
.sleeve-pos-x-75{left:75%}.sleeve-pos-y-75{top:75%}
.sleeve-pos-x-76{left:76%}.sleeve-pos-y-76{top:76%}
.sleeve-pos-x-77{left:77%}.sleeve-pos-y-77{top:77%}
.sleeve-pos-x-78{left:78%}.sleeve-pos-y-78{top:78%}
.sleeve-pos-x-79{left:79%}.sleeve-pos-y-79{top:79%}
.sleeve-pos-x-80{left:80%}.sleeve-pos-y-80{top:80%}
/* Keep conditional sleeve controls hidden until selected. */
.sleeve-customizer [hidden]{display:none!important}

/* Custom vector sleeve symbols: same clear shape in both previews. */
.sleeve-vector-icon{display:inline-block;width:1.35em;height:1.35em;vertical-align:middle;color:inherit;overflow:visible}
.sleeve-mark .sleeve-vector-icon{width:25px;height:25px}
.sleeve-closeup-art .sleeve-vector-icon{width:37px;height:37px}

/* AFCC Design Studio reliability patch. Left sleeve = viewer's RIGHT on front-facing mockup. */
.studio-stage .sweatshirt .sleeve-mark { left:auto; right:13%; top:35%; z-index:3; }
.studio-stage .sweatshirt .sleeve-mark img { display:block; width:28px; height:28px; object-fit:contain; transform:rotate(15deg); }
/* Placeholder for loading gallery cards; images use on-page Blob URLs (CSP: img-src blob:). */
.studio-idea-card img[data-studio-idea] {display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:linear-gradient(145deg,#e0dcc8,#f9f0dc);}
.studio-idea-card:not(.is-loaded) img[data-studio-idea] {opacity:.9;}
@media (max-width:540px) {.studio-stage .sweatshirt .sleeve-mark{right:12%;}}

/* Design Studio — optional back print and symbol colors. CSP-safe (no inline styles). */
.studio-view-tabs{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px}
.studio-view-btn{cursor:pointer;border:1px solid #af9670;border-radius:24px;background:#f9f4e9;color:#173d30;padding:10px 24px;font:700 14px Arial,sans-serif}
.studio-view-btn.is-active,.studio-view-btn[aria-pressed=true]{background:#082e27;color:#fffdf5;border-color:#082e27}
.studio-stage [hidden],.back-customizer [hidden],.sleeve-customizer [hidden]{display:none!important}
.studio-stage[data-view=back] .hoodie-pocket{display:none!important}
.studio-stage[data-view=back] .collar{stroke:#ffffff66;stroke-width:2}
.studio-stage[data-view=back] .seams{opacity:.35}
.back-design-canvas{left:21%;top:22%;width:58%;height:56%}
.back-design-canvas .text-layer{width:95%;max-width:95%}
.back-design-canvas .image-layer{width:50%}
.back-customizer{display:grid;gap:9px;border:1px solid #cdb47f;padding:17px;border-radius:13px;margin:8px 0 16px;background:#f9f4e9}
.back-customizer h3{font:600 21px Georgia,serif;color:#173d30;margin:0 0 2px}
.back-customizer h3 small{font:600 12px Arial,sans-serif;color:#775c35}
.back-customizer label{font:700 13px Arial,sans-serif;color:#173d30}
.back-settings{display:grid;gap:9px;margin:8px 0 10px;padding-top:12px;border-top:1px solid #ded0b7}
.back-customizer textarea{min-height:92px;resize:vertical;border:1px solid #cfc7b5;border-radius:8px;padding:11px 12px;font:inherit;width:100%;background:white;color:#173d30}
.back-customizer .studio-secondary{justify-self:start;width:auto}
.sleeve-symbol-colors{margin:12px 0;padding:12px;background:#f7f1e4;border:1px solid #e5d3b1;border-radius:9px}
.sleeve-symbol-colors legend{padding:0 3px}
.studio-stage[data-symbol-color=cream] .sleeve-mark,.studio-stage[data-symbol-color=cream] + .stage-caption,.sleeve-closeup[data-symbol-color=cream] .sleeve-closeup-art{--symbol-ink:#f6e5c5}
.studio-stage[data-symbol-color=white] .sleeve-mark,.sleeve-closeup[data-symbol-color=white] .sleeve-closeup-art{--symbol-ink:#ffffff}
.studio-stage[data-symbol-color=black] .sleeve-mark,.sleeve-closeup[data-symbol-color=black] .sleeve-closeup-art{--symbol-ink:#171717}
.studio-stage[data-symbol-color=emerald] .sleeve-mark,.sleeve-closeup[data-symbol-color=emerald] .sleeve-closeup-art{--symbol-ink:#11634e}
.studio-stage[data-symbol-color=gold] .sleeve-mark,.sleeve-closeup[data-symbol-color=gold] .sleeve-closeup-art{--symbol-ink:#c59b54}
.studio-stage[data-symbol-color=burgundy] .sleeve-mark,.sleeve-closeup[data-symbol-color=burgundy] .sleeve-closeup-art{--symbol-ink:#7f2436}
.studio-stage[data-symbol-color=pink] .sleeve-mark,.sleeve-closeup[data-symbol-color=pink] .sleeve-closeup-art{--symbol-ink:#ed8ea8}
.studio-stage[data-symbol-color=blue] .sleeve-mark,.sleeve-closeup[data-symbol-color=blue] .sleeve-closeup-art{--symbol-ink:#527ac6}
.studio-stage .sleeve-mark[data-mode=symbol],.sleeve-closeup[data-mode=symbol] .sleeve-closeup-art{color:var(--symbol-ink,#f6e5c5)}
.studio-stage[data-back-color=cream] .back-text-layer{color:#f6e5c5}
.studio-stage[data-back-color=white] .back-text-layer{color:#ffffff}
.studio-stage[data-back-color=black] .back-text-layer{color:#171717;text-shadow:0 1px 1px #fff6}
.studio-stage[data-back-color=emerald] .back-text-layer{color:#11634e}
.studio-stage[data-back-color=gold] .back-text-layer{color:#c59b54}
.studio-stage[data-back-color=burgundy] .back-text-layer{color:#7f2436}
.studio-stage[data-back-color=pink] .back-text-layer{color:#ed8ea8}
.studio-stage[data-back-color=blue] .back-text-layer{color:#527ac6}
.back-text-layer.script strong{font-style:italic;font-weight:400}
.back-text-layer.modern strong{font-family:Arial,sans-serif;font-weight:800;text-transform:uppercase}
@media(max-width:540px){.back-customizer{padding:13px}.studio-view-btn{padding:10px 20px}}

/* Back artwork width classes (back has a wider maximum than front). */
.back-design-canvas .back-image-layer.ds-width-18{width:18%}
.back-design-canvas .back-image-layer.ds-width-19{width:19%}
.back-design-canvas .back-image-layer.ds-width-20{width:20%}
.back-design-canvas .back-image-layer.ds-width-21{width:21%}
.back-design-canvas .back-image-layer.ds-width-22{width:22%}
.back-design-canvas .back-image-layer.ds-width-23{width:23%}
.back-design-canvas .back-image-layer.ds-width-24{width:24%}
.back-design-canvas .back-image-layer.ds-width-25{width:25%}
.back-design-canvas .back-image-layer.ds-width-26{width:26%}
.back-design-canvas .back-image-layer.ds-width-27{width:27%}
.back-design-canvas .back-image-layer.ds-width-28{width:28%}
.back-design-canvas .back-image-layer.ds-width-29{width:29%}
.back-design-canvas .back-image-layer.ds-width-30{width:30%}
.back-design-canvas .back-image-layer.ds-width-31{width:31%}
.back-design-canvas .back-image-layer.ds-width-32{width:32%}
.back-design-canvas .back-image-layer.ds-width-33{width:33%}
.back-design-canvas .back-image-layer.ds-width-34{width:34%}
.back-design-canvas .back-image-layer.ds-width-35{width:35%}
.back-design-canvas .back-image-layer.ds-width-36{width:36%}
.back-design-canvas .back-image-layer.ds-width-37{width:37%}
.back-design-canvas .back-image-layer.ds-width-38{width:38%}
.back-design-canvas .back-image-layer.ds-width-39{width:39%}
.back-design-canvas .back-image-layer.ds-width-40{width:40%}
.back-design-canvas .back-image-layer.ds-width-41{width:41%}
.back-design-canvas .back-image-layer.ds-width-42{width:42%}
.back-design-canvas .back-image-layer.ds-width-43{width:43%}
.back-design-canvas .back-image-layer.ds-width-44{width:44%}
.back-design-canvas .back-image-layer.ds-width-45{width:45%}
.back-design-canvas .back-image-layer.ds-width-46{width:46%}
.back-design-canvas .back-image-layer.ds-width-47{width:47%}
.back-design-canvas .back-image-layer.ds-width-48{width:48%}
.back-design-canvas .back-image-layer.ds-width-49{width:49%}
.back-design-canvas .back-image-layer.ds-width-50{width:50%}
.back-design-canvas .back-image-layer.ds-width-51{width:51%}
.back-design-canvas .back-image-layer.ds-width-52{width:52%}
.back-design-canvas .back-image-layer.ds-width-53{width:53%}
.back-design-canvas .back-image-layer.ds-width-54{width:54%}
.back-design-canvas .back-image-layer.ds-width-55{width:55%}
.back-design-canvas .back-image-layer.ds-width-56{width:56%}
.back-design-canvas .back-image-layer.ds-width-57{width:57%}
.back-design-canvas .back-image-layer.ds-width-58{width:58%}
.back-design-canvas .back-image-layer.ds-width-59{width:59%}
.back-design-canvas .back-image-layer.ds-width-60{width:60%}
.back-design-canvas .back-image-layer.ds-width-61{width:61%}
.back-design-canvas .back-image-layer.ds-width-62{width:62%}
.back-design-canvas .back-image-layer.ds-width-63{width:63%}
.back-design-canvas .back-image-layer.ds-width-64{width:64%}
.back-design-canvas .back-image-layer.ds-width-65{width:65%}
.back-design-canvas .back-image-layer.ds-width-66{width:66%}
.back-design-canvas .back-image-layer.ds-width-67{width:67%}
.back-design-canvas .back-image-layer.ds-width-68{width:68%}
.back-design-canvas .back-image-layer.ds-width-69{width:69%}
.back-design-canvas .back-image-layer.ds-width-70{width:70%}
.back-design-canvas .back-image-layer.ds-width-71{width:71%}
.back-design-canvas .back-image-layer.ds-width-72{width:72%}
.back-design-canvas .back-image-layer.ds-width-73{width:73%}
.back-design-canvas .back-image-layer.ds-width-74{width:74%}
.back-design-canvas .back-image-layer.ds-width-75{width:75%}
.back-design-canvas .back-image-layer.ds-width-76{width:76%}
.back-design-canvas .back-image-layer.ds-width-77{width:77%}
.back-design-canvas .back-image-layer.ds-width-78{width:78%}
.back-design-canvas .back-image-layer.ds-width-79{width:79%}
.back-design-canvas .back-image-layer.ds-width-80{width:80%}