/* A shared visual scale, not a manufacturing template or availability map. */
.shirt-offer { border-block: 1px solid #3b3039; background: var(--surface-grain),radial-gradient(ellipse at 5% 30%,#3c212d40,transparent 65%),#101014; }
.shirt-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:end; margin-bottom:40px; }
.shirt-heading h2 { font-size:clamp(48px,5.8vw,86px); }
.shirt-heading>p { max-width:500px; font-size:19px; color:#c3bfca; margin-bottom:5px; }
.shirt-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:"viewer formats" "viewer choice" "upload choice"; gap:24px 36px; align-items:start; }
.shirt-viewer { grid-area:viewer; min-width:0; border:1px solid #48424b; border-radius:3px; overflow:hidden; background:#17171d; box-shadow:inset 0 1px 0 #ffffff14,0 22px 40px -25px #000; }
.shirt-view-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid #3c3740; background:#1d1b22; }
.shirt-view-toolbar button { min-height:42px; padding:8px 16px; border:1px solid #625865; border-radius:2px; color:#e6e0e9; background:transparent; font-size:13px; }
.shirt-view-switch { display:flex; gap:4px; }
.shirt-view-switch button[aria-pressed=true] { color:#101014; background:var(--ink); border-color:var(--ink); }
.shirt-view-toolbar .shirt-zoom { color:#ffacd2; border-color:#6f4b60; }
.shirt-view-toolbar .shirt-zoom[aria-pressed=true] { background:#392030; border-color:var(--accent); }
.shirt-zoom>span { margin-right:6px; font-size:19px; vertical-align:-1px; }
.shirt-canvas { position:relative; background:radial-gradient(ellipse at 50% 37%,#4d474d 0%,#2b282e 38%,#18171d 76%); isolation:isolate; }
.shirt-canvas:after { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; background:var(--surface-grain); }
.shirt-view-label { display:flex; justify-content:space-between; gap:14px; padding:18px 20px 0; color:#c6bdce; font-size:9px; letter-spacing:.17em; }
.shirt-view-label b { color:#e0ccd2; font-weight:400; }
.shirt-simulation { width:100%; height:auto; aspect-ratio:1; display:block; max-height:650px; }
.shirt-simulation [data-logo-block] { filter:drop-shadow(0 0 7px #ff3f9333); }
.shirt-offer[data-shirt-view=front] .shirt-back-art,.shirt-offer[data-shirt-view=back] .shirt-front-art { display:none; }
.shirt-offer[data-grid-hidden=true] [data-shirt-guides] { display:none; }
.shirt-view-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:16px 20px; border-top:1px solid #3b353e; }
.shirt-view-footer>label,.shirt-legend { font-size:12px; color:#d0c9d4; display:flex; align-items:center; gap:8px; }
.shirt-view-footer input { margin:0; width:16px; height:16px; }
.shirt-legend i { width:12px; height:12px; border:1px solid #ff3f93; background:#ff3f9333; }
.shirt-view-note { margin:0; padding:0 20px 18px; color:#a9a1af; font-size:12px; line-height:1.55; }
.shirt-step { font:700 15px var(--display); width:28px; height:28px; display:inline-grid; place-items:center; color:#ffadd2; border:1px solid #80506b; margin-right:8px; flex-shrink:0; }
.shirt-offer .shirt-helper { color:#b6afbf; font-size:12px; line-height:1.55; margin:10px 0 0; }
.shirt-formats.surface-selector { grid-area:formats; margin:0; min-width:0; }
.shirt-formats legend { font-size:17px; font-weight:600; letter-spacing:0; margin-bottom:4px; padding:0; color:var(--ink); }
.shirt-formats>.shirt-helper { margin:5px 0 17px; }
.shirt-format-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.shirt-formats .surface-option { display:block; width:auto; min-width:0; margin:0; }
.shirt-formats .surface-option>span { display:flex; flex-direction:row; align-items:center; gap:14px; padding:15px; min-height:113px; border:1px solid #66606e; border-radius:3px; text-align:left; color:#f3edf7; background:linear-gradient(140deg,#ffffff07,transparent),#1b191f; }
.shirt-formats .surface-option input { z-index:1; cursor:pointer; }
.shirt-formats .surface-option input:checked+span { background:#2d1c2a; color:#fff; border:1px solid #ff3f93; box-shadow:inset 0 0 0 1px #ff3f93,0 8px 24px -18px #ff3f93; }
.shirt-formats .surface-option input:focus-visible+span { outline:2px solid #fff; outline-offset:4px; }
.shirt-formats .surface-option input:disabled { cursor:not-allowed; }
.shirt-formats .format-graphic { height:64px; width:64px; flex-shrink:0; position:relative; background:repeating-linear-gradient(0deg,transparent 0 15px,#ffffff0c 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,#ffffff0c 15px 16px),#0c0b10; border:1px solid #62576a; }
.shirt-formats .format-graphic i { display:block; width:calc(var(--format-side)*25%); height:calc(var(--format-side)*25%); background:#f064a3; position:absolute; bottom:0; left:0; }
.shirt-formats input:checked+span .format-graphic i { background:var(--accent); }
.shirt-formats .format-content { display:flex; flex-direction:column; gap:2px; min-width:0; }
.shirt-formats .format-content b { font:700 25px/1 var(--display); white-space:nowrap; }
.shirt-formats .format-content small { color:#c0b7c5; font-size:11px; white-space:nowrap; }
.shirt-formats .format-content strong { font:700 18px/1.4 var(--display); letter-spacing:.035em; white-space:nowrap; }
.format-unavailable { position:absolute; bottom:2px; left:15px; }
.shirt-choice { grid-area:choice; min-width:0; }
.shirt-choice-heading { display:flex; align-items:center; margin:3px 0 18px; }
.shirt-choice-heading h3 { font-size:25px; text-transform:none; font-family:var(--body); font-weight:400; line-height:1.2; }
.shirt-selection { border-block:1px solid #4b3d49; padding:22px 0; }
.shirt-selection>p:first-child { color:#efb1d0; font-size:15px; margin:0 0 14px; }
.shirt-selection-price { display:flex; gap:25px; justify-content:space-between; align-items:center; }
.shirt-selection-price>strong { font:700 clamp(44px,4.4vw,64px)/1 var(--display); white-space:nowrap; color:#fff; }
.shirt-selection-price>span { display:flex; flex-direction:column; color:#b6afbf; font-size:12px; border-left:1px solid #5d4355; padding-left:25px; }
.shirt-selection-price b { font:700 30px/1.2 var(--display); color:#ffafd4; }
.shirt-ratios { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:22px; }
.shirt-ratios>span { display:flex; align-items:center; gap:12px; font-size:12px; color:#c5bdcb; }
.shirt-ratios b { font:700 27px var(--display); color:#fff; }
.shirt-dimensions { font-size:13px; color:#bab1c0; line-height:1.6; margin:20px 0; }
.shirt-dimensions strong { display:block; font-size:14px; color:#e5dce9; margin-bottom:5px; }
.shirt-choice>.button { display:flex; justify-content:space-between; width:100%; }
.shirt-closed { font-size:12px; color:#ffb5d6; margin:12px 0; }
.shirt-upload.logo-preview-tools { grid-area:upload; background:#1c1920; border:1px solid #4b3f4c; padding:20px; gap:13px; border-radius:3px; }
.shirt-upload.logo-preview-tools>label { color:#f0e8f3; font-size:16px; display:flex; align-items:center; }
.shirt-upload input[type=file] { width:100%; color:#d9ccdf; background:#100e13; border:1px dashed #8a7185; padding:12px; font-size:12px; }
.shirt-upload input[type=file]::file-selector-button { background:#40303e; color:#f7ebf2; border:1px solid #8a7185; padding:8px; margin-right:10px; cursor:pointer; border-radius:2px; }
.shirt-upload-actions { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.shirt-upload-actions label { display:flex; align-items:center; gap:8px; color:#ccc0d1; font-size:12px; }
.shirt-upload-actions input { width:16px; height:16px; margin:0; }
.shirt-upload.logo-preview-tools button { color:#ffc1dc; border:1px solid #8a7185; background:transparent; font-size:12px; padding:7px 11px; }
.shirt-upload.logo-preview-tools [role=status] { color:#ffc1dc; font-size:12px; margin:0; }
.shirt-upload [role=status]:empty { display:none; }
.shirt-upload.logo-preview-tools .shirt-helper { margin:0; }
.shirt-reference { margin-top:30px; border:1px solid #4b3d49; background:#161318; }
.shirt-reference summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:62px; padding:18px 24px; cursor:pointer; color:#e1d3e5; font-size:15px; }
.shirt-reference summary::-webkit-details-marker { display:none; }
.shirt-reference summary:focus-visible { outline:2px solid var(--accent-soft); outline-offset:4px; }
.shirt-reference summary>span:last-child { color:var(--accent); font-size:25px; line-height:1; }
.shirt-reference[open] summary>span:last-child { transform:rotate(45deg); }
.shirt-reference>p { padding:0 24px; color:#bfb2c6; font-size:14px; max-width:930px; }
.shirt-reference-images { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:10px 24px 24px; max-width:1000px; margin:auto; }
.shirt-reference figure { margin:0; }
.shirt-reference img { width:100%; height:auto; max-height:540px; object-fit:contain; background:#0d0c0f; }
.shirt-reference figcaption { font-size:12px; color:#bfb2c6; text-align:center; padding-top:12px; }
.shirt-offer noscript { color:#d9c8de; }
@media(max-width:1100px) {
    .shirt-workspace { gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .shirt-formats .surface-option>span { padding:12px; gap:10px; }
    .shirt-formats .format-graphic { width:48px; height:48px; background-size:12px 12px; }
    .shirt-formats .format-content b { font-size:23px; }
}
@media(max-width:850px) {
    .shirt-heading { grid-template-columns:1fr; gap:20px; }
    .shirt-heading>p { max-width:660px; font-size:18px; }
    .shirt-workspace { grid-template-columns:minmax(0,1fr); grid-template-areas:"formats" "viewer" "choice" "upload"; gap:26px; }
    .shirt-formats .format-graphic { width:64px; height:64px; background-size:auto; }
    .shirt-formats .surface-option>span { padding:14px; justify-content:center; gap:18px; }
    .shirt-formats .format-content b { font-size:26px; }
    .shirt-simulation { max-height:570px; }
    .shirt-choice-heading h3 { font-size:25px; }
    .shirt-ratios { max-width:450px; }
}
@media(max-width:480px) {
    .shirt-heading { margin-bottom:28px; }
    .shirt-heading h2 { font-size:clamp(43px,12vw,60px); }
    .shirt-formats legend { font-size:16px; }
    .shirt-format-grid { gap:10px; }
    .shirt-formats .surface-option>span { padding:12px 9px; min-height:101px; gap:10px; }
    .shirt-formats .format-graphic { width:42px; height:42px; background-size:10.5px 10.5px; }
    .shirt-formats .format-content b { font-size:23px; }
    .shirt-formats .format-content strong { font-size:17px; }
    .shirt-view-toolbar { padding:10px; gap:8px; }
    .shirt-view-toolbar button { padding:8px 10px; font-size:12px; }
    .shirt-view-switch { gap:3px; }
    .shirt-view-label { padding:16px 14px 0; font-size:8px; letter-spacing:.1em; }
    .shirt-view-footer { padding:14px; }
    .shirt-view-footer>label,.shirt-legend { font-size:11px; }
    .shirt-view-note { font-size:11px; padding:0 14px 16px; }
    .shirt-ratios { gap:10px; }
    .shirt-ratios>span { font-size:11px; gap:8px; }
    .shirt-choice-heading h3 { font-size:22px; }
    .shirt-upload.logo-preview-tools { padding:16px; }
    .shirt-reference summary { padding:15px; font-size:14px; }
    .shirt-reference>p { padding:0 15px; font-size:12px; }
    .shirt-reference-images { gap:20px; grid-template-columns:1fr; padding:5px 15px 20px; }
}
@media(prefers-reduced-motion:reduce) { .shirt-offer * { transition:none!important; } }
@media(forced-colors:active) {
    .shirt-formats .surface-option input:checked+span { outline:2px solid Highlight; }
    .shirt-formats .format-graphic i { background:Highlight; forced-color-adjust:none; }
    .shirt-simulation { forced-color-adjust:none; }
}
@media print {
    .shirt-offer { color:#111; background:white; }
    .shirt-workspace { display:block; }
    .shirt-viewer { max-width:550px; margin:auto; }
    .shirt-view-toolbar,.shirt-upload,.shirt-reference,.shirt-choice>.button { display:none; }
    .shirt-choice { margin-top:20px; }
}