.tee-preview{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;background:#202020;border-radius:8px}
.tee-preview>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.tee-preview .tee-name{position:absolute;display:flex;align-items:center;justify-content:center;color:#f8f8f6;pointer-events:none;text-align:center;font-family:Arial,sans-serif;font-weight:600;letter-spacing:.045em;text-shadow:0 1px 1px #0008;line-height:1.2;overflow-wrap:anywhere;white-space:pre-wrap}
.tee-preview[data-color=white] .tee-name{color:#242424;text-shadow:0 1px 1px #fff8}
.tee-preview[data-placement=original] .tee-name{left:31%;top:35%;width:42%;min-height:4%;font-size:clamp(10px,3.5cqw,24px)}
.tee-preview[data-placement=original][data-name-length=short] .tee-name{font-size:clamp(12px,4.3cqw,27px);letter-spacing:.075em}
.tee-preview[data-placement=original][data-name-length=long] .tee-name{font-size:clamp(9px,2.8cqw,19px);letter-spacing:.025em}
.tee-preview[data-placement=hem] .tee-name{left:55%;top:83.5%;width:23%;min-height:2%;font-size:clamp(6px,1.8cqw,12px);letter-spacing:.035em}
.tee-preview[data-placement=hem][data-name-length=long] .tee-name{font-size:clamp(5px,1.5cqw,10px);letter-spacing:.015em}
.tee-preview .tee-name img{width:100%;height:auto;display:block}
.tee-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:24px 0 22px}
.tee-controls label{display:block;min-width:0;font-size:.82rem;line-height:1.4;color:#c8c8c8}
.tee-controls select,.tee-controls input{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:46px;margin-top:8px;padding:11px 13px;background:#191919;color:#fff;border:1px solid #666;border-radius:5px;font:inherit;font-size:.9rem;line-height:1.4}
.tee-controls .tee-wide{grid-column:1/-1}.tee-controls [hidden]{display:none}
.tee-controls :focus-visible{outline:2px solid #fff;outline-offset:3px}
.tee-pricing{margin:0;font-size:.8rem;line-height:1.55;color:#aaa}
.tee-home{scroll-margin-top:100px;padding-top:72px;padding-bottom:72px}
.tee-home .split{align-items:center;gap:clamp(32px,5vw,72px)}
.tee-home .tee-preview{width:100%;max-width:480px;margin-inline:auto}
.tee-home h2{margin:10px 0 16px;font-size:clamp(2rem,3.2vw,3rem);line-height:1.08}
.tee-home .lead{font-size:1.05rem;line-height:1.6;max-width:42ch;margin:0}
.tee-home [data-tee-editor]{margin-bottom:20px}
.tee-home .tee-operator{font-size:.8rem;line-height:1.6;color:#aaa;margin:0 0 14px;max-width:58ch}
.tee-home .tee-collection-link{display:inline-block;color:#eee;font-size:.85rem;text-underline-offset:4px;margin-bottom:12px}
.tee-home .tee-availability{font-size:.78rem;color:#aaa;margin:0;line-height:1.5}
.tee-builder-controls{margin-bottom:20px}
#performance-tee .tee-controls{padding:0 20px 20px;margin:0;gap:12px}
#performance-tee .tee-controls label{font-size:.8rem}
#performance-tee .tee-pricing{font-size:.75rem}
@media(max-width:760px){.tee-home{padding-top:40px;padding-bottom:48px}.tee-home .split{gap:28px}.tee-home .tee-preview{max-width:390px}.tee-home h2{font-size:2rem}.tee-home .lead{font-size:.95rem}.tee-controls{gap:14px 10px;margin-top:20px}.tee-home [data-tee-editor]{width:100%;justify-content:center;box-sizing:border-box}}
@media(max-width:760px){body:has(.tee-controls :focus) .tbk-chat-open{visibility:hidden;pointer-events:none}}
/* Shared garment coordinates: chest centered on the torso; hem centered in its selected print area. */
.tee-preview .tee-name{transform:translate(-50%,-50%);min-height:0}
.tee-preview[data-placement=original] .tee-name{left:49%;top:37%;width:42%}
.tee-preview[data-placement=hem] .tee-name{left:66.5%;top:85%;width:23%}
.tee-preview .tee-name img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}

.tee-preview[data-placement=original] .tee-name img{width:84%}
.tee-preview[data-placement=hem] .tee-name img{width:70%}
.tee-preview .tee-name>svg{display:block;overflow:visible;width:100%;height:auto;max-height:none}
.tee-preview[data-placement=original] .tee-name>svg{max-width:84%}
.tee-preview[data-placement=hem] .tee-name>svg{max-width:70%}
.tee-preview[data-name-length=short] .tee-name>svg{max-width:45%}
.tee-preview[data-placement=original] .tee-name>svg{max-height:8cqw}
.tee-preview[data-placement=hem] .tee-name>svg{max-height:4cqw}
.tee-preview[data-placement=original][data-name-length=short] .tee-name>svg{max-height:4.5cqw}
.tee-preview[data-placement=hem][data-name-length=short] .tee-name>svg{max-height:2cqw}
