.tx-config {
  --tx-ink: var(--ink);
  --tx-muted: var(--muted);
  --tx-line: var(--line);
  --tx-green: var(--accent);
  color: var(--tx-ink);
  container-type: inline-size;
  font: inherit;
}
.tx-config *, .tx-config *::after, .tx-config *::before {box-sizing:border-box}
.tx-config fieldset, .tx-config figure, .tx-config p {margin:0}
.tx-config fieldset {border:0; padding:0; min-width:0}
.tx-config legend, .tx-quantity > label {font-size:.9rem; font-weight:650; margin:0 0 .65rem; padding:0; line-height:1.35}
.tx-model-options {display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem}
.tx-config label:has(input[type=radio]) {cursor:pointer}
.tx-model-options label {
  display:inline-flex; gap:.55rem; align-items:center; padding:.65rem .85rem; min-height:42px;
  border:1px solid var(--tx-line); background:var(--surface); border-radius:.45rem; font-size:.85rem; font-weight:600;
}
.tx-model-options label:has(input:checked) {border-color:var(--accent); background:var(--selected); color:var(--accent)}
.tx-model-options small {font-size:.73rem; font-weight:500; opacity:.85; border-left:1px solid currentColor; padding-left:.55rem}
.tx-model-options input {position:absolute; opacity:0; width:1px; height:1px}
.tx-config label:has(input:focus-visible), .tx-stepper :focus-visible {outline:3px solid var(--accent); outline-offset:2px}
.tx-layout {display:grid; grid-template-columns:minmax(0,1.35fr) minmax(265px,1fr); gap:1rem; align-items:stretch}
.tx-stage {
  display:flex; flex-direction:column; justify-content:center; border-radius:.7rem; position:relative;
  overflow:hidden; min-height:225px; border:1px solid var(--line);
  background-color:var(--studio);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
}
.tx-stage-footer {
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.4rem;
  margin:0 1.1rem; padding: .85rem 0 1rem; border-top:1px solid var(--edge); color:var(--ink);
}
.tx-title {font-size:.87rem; font-weight:650}
.tx-detail {font-size:.78rem}
.tx-views {flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; padding:1.4rem .35rem}
.tx-views figure {display:grid; gap:.55rem; justify-items:center; width:100%; min-width:0}
.tx-views svg {width:100%; height:auto; max-height:240px; overflow:visible}
.tx-views:has(.tx-product-photo) {padding:.8rem; gap:.6rem; align-items:center}
.tx-views .tx-product-photo {display:block; max-height:316px; background:#fff; border-radius:5px}
.tx-color-control {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem}
.tx-color-control[hidden] {display:none}
.tx-color-control label {font-size:.9rem; font-weight:650}
.tx-color-control select {font:inherit; font-size:.85rem; padding:.45rem .55rem; color:var(--ink); background:var(--surface); border:1px solid var(--edge); border-radius:4px}
.tx-caption {display:grid; gap:.2rem}
.tx-seam {fill:none; stroke:#192930; stroke-width:.8; stroke-opacity:.27; stroke-dasharray:1.6 1.1}
.tx-shirt-shadow {filter:drop-shadow(0 4px 4px #152b2924)}
.tx-views figcaption {color:var(--muted); font-size:.74rem}
.tx-controls {padding:1rem 1.1rem; border:1px solid var(--tx-line); border-radius:.7rem; background:var(--surface)}
.tx-quantity {display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem}
.tx-quantity > label {margin:0}
.tx-stepper {display:inline-grid; grid-template-columns:36px 44px 36px; border:1px solid var(--tx-line); border-radius:.4rem; overflow:visible}
.tx-stepper button, .tx-stepper input {min-width:0; width:auto; margin:0; padding:0; border:0; background:transparent; color:var(--tx-ink); text-align:center; font:inherit; height:36px}
.tx-stepper button {font-size:1.15rem; cursor:pointer; border-radius:.33rem}
.tx-stepper button:hover:not(:disabled) {background:var(--selected)}
.tx-stepper button:disabled {opacity:.32; cursor:default}
.tx-stepper input {appearance:textfield; -moz-appearance:textfield; font-size:.92rem; font-variant-numeric:tabular-nums}
.tx-stepper input::-webkit-inner-spin-button, .tx-stepper input::-webkit-outer-spin-button {-webkit-appearance:none; margin:0}
.tx-error {color:var(--error); font-size:.8rem; padding:0 0 .6rem}
.tx-embroidery > div {display:grid; gap:.35rem}
.tx-embroidery label {
  display:flex; align-items:center; gap:.55rem; min-height:39px; padding:.4rem .57rem;
  border:1px solid var(--tx-line); border-radius:.35rem; font-size:.83rem;
}
.tx-embroidery label:has(input:checked) {border-color:var(--accent); background:var(--selected)}
.tx-embroidery input {width:1rem; height:1rem; margin:0; accent-color:var(--tx-green); flex:none}
.tx-embroidery b {margin-left:auto; padding-left:.25rem; white-space:nowrap; font-size:.84rem; font-weight:650}
.tx-calculation {display:grid; gap:.28rem; margin:.85rem 0 .7rem; color:var(--tx-muted); font-size:.78rem}
.tx-calculation > div, .tx-linetotal {display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
.tx-calculation b {font-weight:500}
.tx-linetotal {border-top:1px solid var(--tx-line); padding-top:.6rem; font-size:.86rem; font-weight:600}
.tx-linetotal strong {font:inherit; font-size:1.15rem; color:var(--tx-green)}
@container (max-width:650px) {
  .tx-layout {grid-template-columns:1fr}
  .tx-controls {padding:1rem}
  .tx-views svg {max-height:200px}
}
@media print {
  .tx-stage,.tx-linetotal,.tx-model-options label {print-color-adjust:exact}
  .tx-layout {grid-template-columns:1fr 1fr}
}