.rad-customizer {
  display: block;
}

.section-template--rad-customizer-padding {
  padding: 4rem 0;
}

.rad-customizer__header {
  margin: 0 auto 3.2rem;
  max-width: 860px;
  text-align: center;
}

.rad-customizer__eyebrow {
  color: rgb(123, 63, 242);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.rad-customizer__header h1 {
  margin-top: 0;
}

.rad-customizer__intro {
  font-size: 1.8rem;
}

.rad-customizer__expectation {
  background: rgba(123, 63, 242, 0.08);
  border: 1px solid rgba(123, 63, 242, 0.22);
  border-radius: 18px;
  font-size: 1.4rem;
  margin: 1.8rem auto 0;
  max-width: 760px;
  padding: 1.4rem 1.8rem;
}

.rad-customizer__expectation p {
  margin-bottom: 0;
}

.rad-customizer__app {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.rad-customizer__stage-wrap,
.rad-customizer__panel {
  min-width: 0;
}

.rad-customizer__stage-card,
.rad-customizer__panel-block,
.rad-customizer__summary {
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}

.rad-customizer__stage-card {
  overflow: hidden;
  position: sticky;
  top: 2rem;
}

.rad-customizer__stage-toolbar {
  align-items: center;
  background: rgba(123, 63, 242, 0.08);
  display: flex;
  font-size: 1.3rem;
  font-weight: 800;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding: 1.4rem 1.8rem;
  text-transform: uppercase;
}

.rad-customizer__stage-toolbar span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rad-customizer__stage {
  align-items: center;
  background:
    radial-gradient(circle at center, rgba(123, 63, 242, 0.1), transparent 34rem),
    linear-gradient(135deg, rgba(17, 24, 39, 0.04), rgba(123, 63, 242, 0.08));
  display: flex;
  justify-content: center;
  min-height: 540px;
  padding: 4rem 2rem;
}

.rad-customizer__garment {
  --rad-garment-color: #111111;
  background: var(--rad-garment-color);
  color: #fff;
  height: 390px;
  position: relative;
  transition: 180ms ease;
  width: 330px;
}

.rad-customizer__garment--shirt,
.rad-customizer__garment--longsleeve,
.rad-customizer__garment--crewneck,
.rad-customizer__garment--hoodie,
.rad-customizer__garment--zip-hoodie {
  border-radius: 42px 42px 28px 28px;
  clip-path: polygon(22% 0, 78% 0, 100% 20%, 88% 42%, 82% 32%, 82% 100%, 18% 100%, 18% 32%, 12% 42%, 0 20%);
}

.rad-customizer__garment--longsleeve {
  clip-path: polygon(20% 0, 80% 0, 100% 18%, 95% 82%, 84% 82%, 82% 32%, 82% 100%, 18% 100%, 18% 32%, 16% 82%, 5% 82%, 0 18%);
}

.rad-customizer__garment--hoodie::before,
.rad-customizer__garment--zip-hoodie::before {
  background: color-mix(in srgb, var(--rad-garment-color), #ffffff 15%);
  border-radius: 0 0 80px 80px;
  content: "";
  height: 92px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 150px;
}

.rad-customizer__garment--hoodie::after,
.rad-customizer__garment--zip-hoodie::after {
  background: color-mix(in srgb, var(--rad-garment-color), #000000 16%);
  border-radius: 16px;
  bottom: 70px;
  content: "";
  height: 52px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 142px;
}

.rad-customizer__garment--zip-hoodie .rad-customizer__print-area::before {
  background: rgba(255, 255, 255, 0.28);
  content: "";
  height: 210px;
  left: 50%;
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  width: 3px;
  z-index: -1;
}

.rad-customizer__garment--hat {
  border-radius: 120px 120px 36px 36px;
  height: 180px;
  margin-top: 6rem;
  width: 360px;
}

.rad-customizer__garment--hat::after {
  background: color-mix(in srgb, var(--rad-garment-color), #000000 16%);
  border-radius: 0 0 80px 80px;
  bottom: -44px;
  content: "";
  height: 58px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 260px;
}

.rad-customizer__garment--tote {
  border-radius: 20px 20px 34px 34px;
  height: 360px;
  margin-top: 5rem;
  width: 310px;
}

.rad-customizer__garment--tote::before {
  border: 16px solid var(--rad-garment-color);
  border-bottom: 0;
  border-radius: 120px 120px 0 0;
  content: "";
  height: 115px;
  left: 50%;
  position: absolute;
  top: -88px;
  transform: translateX(-50%);
  width: 170px;
}

.rad-customizer__neck {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 0 60px 60px;
  height: 54px;
  left: 50%;
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  width: 110px;
  z-index: 2;
}

.rad-customizer__garment--hat .rad-customizer__neck,
.rad-customizer__garment--tote .rad-customizer__neck {
  display: none;
}

.rad-customizer__print-area {
  align-items: center;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  left: var(--rad-print-x, 50%);
  min-height: 160px;
  position: absolute;
  text-align: center;
  top: var(--rad-print-y, 48%);
  touch-action: none;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 64%;
  z-index: 3;
}

.rad-customizer__print-area:active {
  cursor: grabbing;
}

.rad-customizer__print-area.is-dragging {
  cursor: grabbing;
  transition: none;
}

.rad-customizer__garment--hat .rad-customizer__print-area {
  min-height: 80px;
  --rad-print-y: 50%;
  width: 58%;
}

.rad-customizer__text-preview {
  color: var(--rad-design-text-color, #fff);
  font-size: var(--rad-design-text-size, 34px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.24);
}

.rad-customizer__logo-preview {
  max-height: var(--rad-logo-size, 120px);
  max-width: var(--rad-logo-size, 120px);
  object-fit: contain;
}

.rad-customizer__stage-note,
.rad-customizer__fine-print {
  color: rgba(var(--color-foreground), 0.72);
  font-size: 1.3rem;
  margin: 0;
  padding: 1.4rem 1.8rem 1.8rem;
}

.rad-customizer__panel {
  display: grid;
  gap: 1.8rem;
}

.rad-customizer__panel-block,
.rad-customizer__summary {
  padding: 2.2rem;
}

.rad-customizer__panel-block h2,
.rad-customizer__summary h2 {
  margin-top: 0;
}

.rad-customizer__fields {
  display: grid;
  gap: 1.5rem;
}

.rad-customizer__presets {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rad-customizer__preset {
  background: rgba(123, 63, 242, 0.07);
  border: 1px solid rgba(123, 63, 242, 0.22);
  border-radius: 16px;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  font: inherit;
  padding: 1.3rem;
  text-align: left;
  transition: 160ms ease;
}

.rad-customizer__preset:hover,
.rad-customizer__preset:focus-visible,
.rad-customizer__preset.is-active {
  background: rgba(123, 63, 242, 0.14);
  border-color: rgba(123, 63, 242, 0.55);
  box-shadow: 0 10px 26px rgba(123, 63, 242, 0.12);
  transform: translateY(-1px);
}

.rad-customizer__preset span {
  display: block;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.rad-customizer__preset small {
  color: rgba(var(--color-foreground), 0.68);
  display: block;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 0.4rem;
}

.rad-customizer__fields label {
  color: rgba(var(--color-foreground), 0.82);
  display: grid;
  font-size: 1.3rem;
  font-weight: 800;
  gap: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rad-customizer__field-hint {
  color: rgba(var(--color-foreground), 0.62);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.rad-customizer__checkboxes {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rad-customizer__checkboxes label {
  align-items: center;
  background: rgba(var(--color-foreground), 0.035);
  border: 1px solid rgba(var(--color-foreground), 0.12);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 1.3rem;
  gap: 0.8rem;
  letter-spacing: 0;
  padding: 1rem 1.1rem;
  text-transform: none;
}

.rad-customizer__checkboxes input {
  accent-color: rgb(123, 63, 242);
  min-height: auto;
  padding: 0;
  width: auto;
}

.rad-customizer__checkboxes label.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.rad-customizer__fields input,
.rad-customizer__fields select,
.rad-customizer__fields textarea,
.rad-customizer__summary textarea {
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.18);
  border-radius: 14px;
  color: rgb(var(--color-foreground));
  font: inherit;
  min-height: 4.6rem;
  padding: 1.1rem 1.3rem;
  width: 100%;
}

.rad-customizer__fields .rad-customizer__checkboxes input[type="checkbox"] {
  flex: 0 0 auto;
  height: 2.4rem;
  min-height: 0;
  padding: 0;
  width: 2.4rem;
}

.rad-customizer__fields .rad-customizer__checkboxes label {
  justify-content: flex-start;
  min-height: 5.2rem;
  width: 100%;
}

.rad-customizer__fields input[type="color"] {
  cursor: pointer;
  padding: 0.4rem;
}

.rad-customizer__fields input[type="range"] {
  accent-color: rgb(123, 63, 242);
  padding-left: 0;
  padding-right: 0;
}

.rad-customizer__placement-reset {
  background: rgba(123, 63, 242, 0.08);
  border: 1px solid rgba(123, 63, 242, 0.28);
  border-radius: 14px;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 4.6rem;
  padding: 1.1rem 1.3rem;
  text-align: center;
}

.rad-customizer__placement-reset:hover,
.rad-customizer__placement-reset:focus-visible {
  background: rgba(123, 63, 242, 0.14);
}

.rad-customizer__summary textarea {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

.rad-customizer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.rad-customizer__actions .button {
  min-width: 18rem;
}

@media screen and (max-width: 989px) {
  .rad-customizer__app {
    gap: 2rem;
    grid-template-columns: 1fr;
  }

  .rad-customizer__stage-card {
    position: relative;
    top: auto;
  }

  .rad-customizer__stage {
    min-height: 440px;
  }
}

@media screen and (max-width: 749px) {
  .rad-customizer__header {
    margin-bottom: 2.2rem;
    text-align: left;
  }

  .rad-customizer__header h1 {
    font-size: clamp(3rem, 9vw, 4rem);
    line-height: 1.05;
  }

  .rad-customizer__intro {
    font-size: 1.55rem;
  }

  .rad-customizer__expectation {
    border-radius: 14px;
    font-size: 1.3rem;
    margin-top: 1.4rem;
    padding: 1.2rem 1.4rem;
  }

  .rad-customizer__stage-card,
  .rad-customizer__panel-block,
  .rad-customizer__summary {
    border-radius: 18px;
  }

  .rad-customizer__stage-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem 1.4rem;
  }

  .rad-customizer__stage {
    min-height: 340px;
    padding: 2rem 1rem;
  }

  .rad-customizer__stage-note,
  .rad-customizer__fine-print {
    font-size: 1.2rem;
    padding: 1.2rem 1.4rem 1.4rem;
  }

  .rad-customizer__panel {
    gap: 1.4rem;
  }

  .rad-customizer__panel-block,
  .rad-customizer__summary {
    padding: 1.6rem;
  }

  .rad-customizer__panel-block h2,
  .rad-customizer__summary h2 {
    font-size: 2rem;
  }

  .rad-customizer__presets,
  .rad-customizer__checkboxes {
    grid-template-columns: 1fr;
  }

  .rad-customizer__actions {
    display: grid;
  }

  .rad-customizer__actions .button {
    min-width: 0;
    width: 100%;
  }
}
+

/* ATC Everyday photographic garment previews */
.rad-customizer,
.rad-customizer__app,
.rad-customizer__stage-wrap,
.rad-customizer__stage-card {
  max-width: 100%;
  min-width: 0;
}

.rad-customizer {
  overflow: clip;
}

.rad-customizer__garment[data-rad-has-photo="true"] {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  height: 480px;
  width: 410px;
}

.rad-customizer__garment[data-rad-has-photo="true"]::before,
.rad-customizer__garment[data-rad-has-photo="true"]::after,
.rad-customizer__garment[data-rad-has-photo="true"] > :not(.rad-customizer__product-photo):not(.rad-customizer__print-area) {
  display: none;
}

.rad-customizer__product-photo {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.rad-customizer__product-photo[hidden] {
  display: none;
}

.rad-customizer__product-photo-color,
.rad-customizer__product-photo-detail {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.rad-customizer__product-photo-color {
  background: var(--rad-garment-color);
  -webkit-mask: var(--rad-product-image) center / contain no-repeat;
  mask: var(--rad-product-image) center / contain no-repeat;
}

.rad-customizer__product-photo-detail {
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  opacity: 0.48;
}

.rad-customizer__garment[data-rad-has-photo="true"] .rad-customizer__print-area {
  min-height: 120px;
  width: 47%;
  z-index: 3;
}

.rad-customizer__garment[data-rad-has-photo="true"][data-rad-preview-location="left-chest"] .rad-customizer__print-area {
  width: 23%;
}

.rad-customizer__garment[data-rad-has-photo="true"][data-rad-preview-location="sleeve"] .rad-customizer__print-area {
  width: 19%;
}

.rad-customizer__garment--zip-hoodie[data-rad-has-photo="true"] .rad-customizer__print-area::before {
  display: none;
}

@media screen and (max-width: 749px) {
  .rad-customizer__header,
  .rad-customizer__app,
  .rad-customizer__stage-wrap,
  .rad-customizer__panel {
    width: 100%;
  }

  .rad-customizer__stage {
    min-height: 390px;
    overflow: hidden;
    padding: 1.5rem 0.5rem;
  }

  .rad-customizer__garment[data-rad-has-photo="true"] {
    height: 370px;
    max-width: 100%;
    width: 315px;
  }

  .rad-customizer__garment[data-rad-has-photo="true"] .rad-customizer__print-area {
    min-height: 84px;
  }
}

@media screen and (max-width: 420px) {
  .rad-customizer__stage {
    min-height: 340px;
  }

  .rad-customizer__garment[data-rad-has-photo="true"] {
    height: 320px;
    width: 273px;
  }
}


@media screen and (max-width: 549px) {
  .rad-customizer__stage {
    min-height: 300px;
    padding: 1.8rem 0.8rem;
  }

  .rad-customizer__garment {
    height: 258px;
    width: 220px;
  }

  .rad-customizer__garment--hat {
    height: 118px;
    width: 238px;
  }

  .rad-customizer__garment--tote {
    height: 250px;
    width: 212px;
  }

  .rad-customizer__garment--tote::before {
    height: 88px;
    top: -68px;
    width: 132px;
  }

  .rad-customizer__garment--hoodie::before,
  .rad-customizer__garment--zip-hoodie::before {
    height: 72px;
    width: 118px;
  }

  .rad-customizer__garment--hoodie::after,
  .rad-customizer__garment--zip-hoodie::after {
    bottom: 45px;
    height: 38px;
    width: 110px;
  }

  .rad-customizer__neck {
    height: 42px;
    width: 88px;
  }

  .rad-customizer__print-area {
    gap: 0.8rem;
    min-height: 116px;
    width: 68%;
  }

  .rad-customizer__text-preview {
    font-size: clamp(2rem, var(--rad-design-text-size, 34px), 4.2rem);
  }

  .rad-customizer__logo-preview {
    max-height: min(var(--rad-logo-size, 120px), 110px);
    max-width: min(var(--rad-logo-size, 120px), 110px);
  }
}

/* More realistic customizer mockups */
.rad-customizer__garment {
  box-shadow: 0 24px 46px rgba(17, 24, 39, 0.26);
  isolation: isolate;
  overflow: visible;
}

.rad-customizer__garment::before,
.rad-customizer__garment::after {
  display: none;
}

.rad-customizer__garment-shadow {
  background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.3), transparent 68%);
  bottom: -3.8rem;
  content: "";
  height: 3.4rem;
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 112%;
  z-index: -2;
}

.rad-customizer__garment-surface {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 22%),
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.13), transparent 24%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 38%, rgba(0, 0, 0, 0.16));
  border-radius: inherit;
  clip-path: inherit;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.rad-customizer__sleeve,
.rad-customizer__seam,
.rad-customizer__cuff,
.rad-customizer__hem,
.rad-customizer__hood-detail,
.rad-customizer__drawstring,
.rad-customizer__pocket-detail,
.rad-customizer__zipper-detail,
.rad-customizer__hat-panel,
.rad-customizer__hat-brim,
.rad-customizer__tote-handle,
.rad-customizer__tote-seam {
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.rad-customizer__sleeve {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  height: 11rem;
  top: 5.4rem;
  width: 6.6rem;
}

.rad-customizer__sleeve--left {
  border-left: 1px solid rgba(0, 0, 0, 0.18);
  left: 1.1rem;
  transform: rotate(23deg);
}

.rad-customizer__sleeve--right {
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  right: 1.1rem;
  transform: rotate(-23deg);
}

.rad-customizer__seam {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.18));
  height: 25rem;
  opacity: 0.34;
  top: 8.4rem;
  width: 1px;
}

.rad-customizer__seam--left { left: 22%; }
.rad-customizer__seam--right { right: 22%; }

.rad-customizer__hem {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  bottom: 1rem;
  height: 1.1rem;
  left: 20%;
  right: 20%;
}

.rad-customizer__cuff {
  background: rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  bottom: 6.4rem;
  display: none;
  height: 1.5rem;
  width: 4.8rem;
}

.rad-customizer__cuff--left {
  left: 0.8rem;
  transform: rotate(2deg);
}

.rad-customizer__cuff--right {
  right: 0.8rem;
  transform: rotate(-2deg);
}

.rad-customizer__neck {
  box-shadow: inset 0 -9px 14px rgba(17, 24, 39, 0.18), 0 3px 0 rgba(255, 255, 255, 0.12);
}

.rad-customizer__garment--crewneck .rad-customizer__neck,
.rad-customizer__garment--longsleeve .rad-customizer__neck,
.rad-customizer__garment--shirt .rad-customizer__neck {
  background: color-mix(in srgb, var(--rad-garment-color), #ffffff 18%);
  border: 8px solid color-mix(in srgb, var(--rad-garment-color), #000000 12%);
  border-top: 0;
  height: 58px;
}

.rad-customizer__garment--longsleeve .rad-customizer__cuff,
.rad-customizer__garment--crewneck .rad-customizer__cuff,
.rad-customizer__garment--hoodie .rad-customizer__cuff,
.rad-customizer__garment--zip-hoodie .rad-customizer__cuff {
  display: block;
}

.rad-customizer__garment--hoodie .rad-customizer__hood-detail,
.rad-customizer__garment--zip-hoodie .rad-customizer__hood-detail {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.2), transparent 42%),
    color-mix(in srgb, var(--rad-garment-color), #ffffff 10%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 0 78px 78px;
  box-shadow: inset 0 -18px 20px rgba(0, 0, 0, 0.16);
  display: block;
  height: 9.6rem;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 15.6rem;
}

.rad-customizer__drawstring {
  background: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  display: none;
  height: 6.8rem;
  top: 6rem;
  width: 0.3rem;
}

.rad-customizer__garment--hoodie .rad-customizer__drawstring,
.rad-customizer__garment--zip-hoodie .rad-customizer__drawstring {
  display: block;
}

.rad-customizer__drawstring--left {
  left: calc(50% - 2.2rem);
  transform: rotate(8deg);
}

.rad-customizer__drawstring--right {
  right: calc(50% - 2.2rem);
  transform: rotate(-8deg);
}

.rad-customizer__garment--hoodie .rad-customizer__pocket-detail,
.rad-customizer__garment--zip-hoodie .rad-customizer__pocket-detail {
  background: color-mix(in srgb, var(--rad-garment-color), #000000 12%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px 14px 28px 28px;
  bottom: 6.6rem;
  box-shadow: inset 0 10px 22px rgba(255, 255, 255, 0.06);
  display: block;
  height: 5.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 14.8rem;
}

.rad-customizer__garment--zip-hoodie .rad-customizer__zipper-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  display: block;
  height: 24rem;
  left: 50%;
  top: 5.6rem;
  transform: translateX(-50%);
  width: 0.45rem;
}

.rad-customizer__garment--hat {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.18)),
    var(--rad-garment-color);
  border-radius: 150px 150px 44px 44px;
  clip-path: none;
}

.rad-customizer__garment--hat .rad-customizer__hat-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50% 50% 0 0;
  display: block;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 34%;
}

.rad-customizer__garment--hat .rad-customizer__hat-brim {
  background: color-mix(in srgb, var(--rad-garment-color), #000000 18%);
  border-radius: 0 0 90px 90px;
  bottom: -4.8rem;
  box-shadow: 0 16px 22px rgba(17, 24, 39, 0.22), inset 0 8px 10px rgba(255, 255, 255, 0.08);
  display: block;
  height: 6.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 27rem;
}

.rad-customizer__garment--tote {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(0, 0, 0, 0.1)),
    var(--rad-garment-color);
  clip-path: none;
}

.rad-customizer__garment--tote .rad-customizer__tote-handle {
  border: 15px solid color-mix(in srgb, var(--rad-garment-color), #000000 8%);
  border-bottom: 0;
  border-radius: 130px 130px 0 0;
  display: block;
  height: 12rem;
  left: 50%;
  top: -8.8rem;
  transform: translateX(-50%);
  width: 18rem;
}

.rad-customizer__garment--tote .rad-customizer__tote-seam {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 3px;
  border-radius: 16px 16px 28px 28px;
  display: block;
  inset: 1.6rem;
}

.rad-customizer__garment--hat .rad-customizer__sleeve,
.rad-customizer__garment--hat .rad-customizer__seam,
.rad-customizer__garment--hat .rad-customizer__cuff,
.rad-customizer__garment--hat .rad-customizer__hem,
.rad-customizer__garment--tote .rad-customizer__sleeve,
.rad-customizer__garment--tote .rad-customizer__seam,
.rad-customizer__garment--tote .rad-customizer__cuff,
.rad-customizer__garment--tote .rad-customizer__hem {
  display: none;
}

.rad-customizer__garment--hat .rad-customizer__garment-surface,
.rad-customizer__garment--tote .rad-customizer__garment-surface {
  display: none;
}

.rad-customizer__print-area {
  transition: left 120ms ease, top 120ms ease, width 180ms ease, transform 180ms ease;
}

.rad-customizer__garment[data-rad-preview-location="left-chest"] .rad-customizer__print-area {
  --rad-print-x: 39%;
  --rad-print-y: 35%;
  min-height: 8rem;
  width: 24%;
}

.rad-customizer__garment[data-rad-preview-location="sleeve"] .rad-customizer__print-area {
  --rad-print-x: 16%;
  --rad-print-y: 34%;
  min-height: 7rem;
  transform: translate(-50%, -50%) rotate(-18deg);
  width: 19%;
}

.rad-customizer__garment[data-rad-preview-location="back"] .rad-customizer__print-area {
  --rad-print-y: 43%;
  width: 58%;
}

.rad-customizer__garment--hat[data-rad-preview-location="hat-front"] .rad-customizer__print-area,
.rad-customizer__garment--hat .rad-customizer__print-area {
  --rad-print-y: 54%;
  width: 42%;
}

.rad-customizer__garment--tote .rad-customizer__print-area {
  --rad-print-y: 52%;
  width: 58%;
}

@media screen and (max-width: 549px) {
  .rad-customizer__sleeve {
    height: 7.2rem;
    top: 3.8rem;
    width: 4.6rem;
  }

  .rad-customizer__seam {
    height: 15.5rem;
    top: 6rem;
  }

  .rad-customizer__hem {
    bottom: 0.8rem;
    height: 0.8rem;
  }

  .rad-customizer__cuff {
    bottom: 4.1rem;
    height: 1rem;
    width: 3.4rem;
  }

  .rad-customizer__garment--hoodie .rad-customizer__hood-detail,
  .rad-customizer__garment--zip-hoodie .rad-customizer__hood-detail {
    height: 7.2rem;
    width: 11.8rem;
  }

  .rad-customizer__garment--hoodie .rad-customizer__pocket-detail,
  .rad-customizer__garment--zip-hoodie .rad-customizer__pocket-detail {
    bottom: 4.4rem;
    height: 3.6rem;
    width: 10.8rem;
  }

  .rad-customizer__garment--zip-hoodie .rad-customizer__zipper-detail {
    height: 15.8rem;
    top: 4.6rem;
  }

  .rad-customizer__drawstring {
    height: 4.4rem;
    top: 4.8rem;
  }

  .rad-customizer__garment--hat .rad-customizer__hat-brim {
    bottom: -3.2rem;
    height: 4rem;
    width: 17.8rem;
  }

  .rad-customizer__garment--tote .rad-customizer__tote-handle {
    border-width: 11px;
    height: 8.8rem;
    top: -6.8rem;
    width: 13.2rem;
  }
}

/* Stronger visible garment detail on dark colours */
.rad-customizer__garment-surface {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.32), transparent 19%),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.2), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.08) 26%, transparent 48%, rgba(255, 255, 255, 0.06) 72%, rgba(0, 0, 0, 0.25)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: normal;
  opacity: 0.38;
}

.rad-customizer__garment--shirt .rad-customizer__neck,
.rad-customizer__garment--longsleeve .rad-customizer__neck,
.rad-customizer__garment--crewneck .rad-customizer__neck {
  background: rgb(246, 243, 255);
  border: 7px solid color-mix(in srgb, var(--rad-garment-color), #ffffff 18%);
  border-top: 0;
  box-shadow: inset 0 -10px 14px rgba(17, 24, 39, 0.18), 0 3px 0 rgba(0, 0, 0, 0.18);
  height: 5.6rem;
  top: -0.1rem;
  width: 11.4rem;
}

.rad-customizer__garment--crewneck .rad-customizer__neck,
.rad-customizer__garment--longsleeve .rad-customizer__neck {
  border-radius: 0 0 72px 72px;
  height: 4.8rem;
  width: 10.4rem;
}

.rad-customizer__seam {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.28));
  opacity: 0.55;
}

.rad-customizer__hem,
.rad-customizer__cuff {
  background: rgba(0, 0, 0, 0.24);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.06);
}

.rad-customizer__sleeve {
  border-top-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 18px 20px rgba(255, 255, 255, 0.04), inset 0 -18px 18px rgba(0, 0, 0, 0.12);
}

.rad-customizer__print-area {
  z-index: 5;
}

.rad-customizer__text-preview {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.24));
}

.rad-customizer__garment--shirt .rad-customizer__neck,
.rad-customizer__garment--longsleeve .rad-customizer__neck,
.rad-customizer__garment--crewneck .rad-customizer__neck,
.rad-customizer__garment--hoodie .rad-customizer__neck,
.rad-customizer__garment--zip-hoodie .rad-customizer__neck {
  display: block;
}

.rad-customizer__garment--hoodie .rad-customizer__neck,
.rad-customizer__garment--zip-hoodie .rad-customizer__neck {
  background: color-mix(in srgb, var(--rad-garment-color), #000000 18%);
  height: 3.8rem;
  top: 0.4rem;
  width: 8.6rem;
}

/* Final design preview polish: stable layout, cleaner controls, safer mobile sizing */
.rad-customizer {
  overflow-x: hidden;
}

.rad-customizer__app {
  margin-inline: auto;
  max-width: 1180px;
  padding-inline: 20px;
}

.rad-customizer__stage-card {
  border-radius: 28px;
}

.rad-customizer__stage {
  min-height: clamp(360px, 46vw, 560px);
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4.5rem) 1.5rem;
}

.rad-customizer__garment {
  height: clamp(280px, 32vw, 390px);
  max-width: min(330px, 82vw);
  width: clamp(238px, 28vw, 330px);
}

.rad-customizer__garment--hat {
  height: clamp(132px, 17vw, 180px);
  max-width: min(360px, 84vw);
  width: clamp(250px, 34vw, 360px);
}

.rad-customizer__garment--tote {
  height: clamp(270px, 31vw, 360px);
  max-width: min(310px, 78vw);
  width: clamp(230px, 27vw, 310px);
}

.rad-customizer__print-area {
  max-width: 78%;
  min-height: auto;
  width: min(64%, 230px);
}

.rad-customizer__text-preview {
  font-size: clamp(18px, calc(var(--rad-design-text-size, 34px) * 1px), 42px);
  max-width: 100%;
}

.rad-customizer__logo-preview {
  max-height: min(var(--rad-logo-size, 120px), 130px);
  max-width: min(var(--rad-logo-size, 120px), 130px);
}

.rad-customizer__checkboxes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rad-customizer__checkboxes label {
  align-items: center;
  gap: 0.75rem;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rad-customizer__fields .rad-customizer__checkboxes input[type="checkbox"] {
  flex-basis: 1.35rem;
  height: 1.35rem;
  width: 1.35rem;
}

.rad-customizer__placement-reset,
.rad-customizer__preset,
.rad-customizer__summary .button,
.rad-customizer__actions .button {
  min-height: 48px;
}

@media screen and (max-width: 989px) {
  .rad-customizer__app {
    padding-inline: 16px;
  }

  .rad-customizer__stage-card {
    position: static;
  }
}

@media screen and (max-width: 749px) {
  .section-static-padding,
  .section-template--rad-customizer-padding {
    padding-top: 2.25rem;
  }

  .rad-customizer__app {
    gap: 1.35rem;
  }

  .rad-customizer__stage-toolbar {
    font-size: 0.88rem;
    gap: 0.45rem;
  }

  .rad-customizer__stage {
    min-height: 330px;
    padding: 1.6rem 0.75rem 2rem;
  }

  .rad-customizer__panel-block,
  .rad-customizer__summary {
    padding: 1.25rem;
  }

  .rad-customizer__presets {
    grid-template-columns: 1fr;
  }

  .rad-customizer__checkboxes {
    grid-template-columns: 1fr;
  }

  .rad-customizer__checkboxes label {
    min-height: 50px;
    padding: 0.85rem 0.95rem;
  }

  .rad-customizer__actions {
    display: grid;
  }
}

@media screen and (max-width: 549px) {
  .rad-customizer__stage {
    min-height: 300px;
  }

  .rad-customizer__garment {
    height: 258px;
    width: 220px;
  }

  .rad-customizer__garment--hat {
    height: 118px;
    width: 238px;
  }

  .rad-customizer__garment--tote {
    height: 250px;
    width: 212px;
  }

  .rad-customizer__print-area {
    width: 64%;
  }

  .rad-customizer__garment[data-rad-preview-location="left-chest"] .rad-customizer__print-area {
    width: 30%;
  }

  .rad-customizer__garment[data-rad-preview-location="sleeve"] .rad-customizer__print-area {
    width: 24%;
  }

  .rad-customizer__text-preview {
    font-size: clamp(16px, calc(var(--rad-design-text-size, 34px) * 0.74px), 30px);
  }

  .rad-customizer__logo-preview {
    max-height: min(var(--rad-logo-size, 120px), 88px);
    max-width: min(var(--rad-logo-size, 120px), 88px);
  }
}

/* Text preview refinement: cleaner, less distorted mockup text */
.rad-customizer__text-preview {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(18px, var(--rad-design-text-size, 34px), 38px);
  font-weight: 850;
  letter-spacing: -0.015em;
  line-height: 1.05;
  max-width: 100%;
  text-wrap: balance;
  transform: translateZ(0);
  white-space: normal;
}

.rad-customizer__garment[data-rad-preview-location="left-chest"] .rad-customizer__text-preview,
.rad-customizer__garment[data-rad-preview-location="sleeve"] .rad-customizer__text-preview,
.rad-customizer__garment--hat .rad-customizer__text-preview {
  font-size: clamp(12px, calc(var(--rad-design-text-size, 34px) * 0.55), 22px);
  letter-spacing: 0;
  line-height: 1.12;
}

.rad-customizer__garment[data-rad-preview-location="sleeve"] .rad-customizer__text-preview {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 549px) {
  .rad-customizer__text-preview {
    font-size: clamp(16px, var(--rad-design-text-size, 34px), 28px);
    letter-spacing: -0.01em;
    line-height: 1.08;
  }

  .rad-customizer__garment[data-rad-preview-location="left-chest"] .rad-customizer__text-preview,
  .rad-customizer__garment[data-rad-preview-location="sleeve"] .rad-customizer__text-preview,
  .rad-customizer__garment--hat .rad-customizer__text-preview {
    font-size: clamp(11px, calc(var(--rad-design-text-size, 34px) * 0.48), 18px);
  }
}

/* Preset card cleanup: prevent global button styles from distorting these cards */
.rad-customizer__panel-block:first-child h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 1.35rem;
}

.rad-customizer__presets {
  align-items: stretch;
  gap: 1rem;
}

.rad-customizer__preset,
.rad-customizer__preset.button,
button.rad-customizer__preset {
  align-items: flex-start;
  background: #f7f2ff;
  border: 1px solid rgba(123, 63, 242, 0.28);
  border-radius: 18px;
  box-shadow: none;
  color: var(--rad-dark, #111111);
  display: grid;
  gap: 0.4rem;
  justify-content: flex-start;
  min-height: 122px;
  padding: 1.15rem 1.25rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.rad-customizer__preset span {
  color: var(--rad-dark, #111111);
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  max-width: 100%;
}

.rad-customizer__preset small {
  color: #5f5b66;
  display: block;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.32;
  margin: 0;
  max-width: 22ch;
  text-align: left;
}

.rad-customizer__preset:hover,
.rad-customizer__preset:focus-visible,
.rad-customizer__preset.is-active {
  background: #efe7ff;
  border-color: rgba(123, 63, 242, 0.65);
  color: var(--rad-dark, #111111);
  transform: translateY(-1px);
}

@media screen and (max-width: 749px) {
  .rad-customizer__panel-block:first-child h2 {
    font-size: clamp(1.85rem, 8vw, 2.45rem);
  }

  .rad-customizer__preset,
  .rad-customizer__preset.button,
  button.rad-customizer__preset {
    min-height: auto;
    padding: 1rem;
  }

  .rad-customizer__preset small {
    max-width: none;
  }
}

/* Final ATC photo overrides remain after legacy garment drawing rules. */
.rad-customizer, .rad-customizer__app, .rad-customizer__stage-wrap, .rad-customizer__stage-card { max-width: 100%; min-width: 0; }
.rad-customizer { overflow: clip; }
.rad-customizer__garment[data-rad-has-photo="true"] { background: transparent; border-radius: 0; box-shadow: none; clip-path: none; height: 480px; width: 410px; }
.rad-customizer__garment[data-rad-has-photo="true"]::before,
.rad-customizer__garment[data-rad-has-photo="true"]::after,
.rad-customizer__garment[data-rad-has-photo="true"] > :not(.rad-customizer__product-photo):not(.rad-customizer__print-area) { display: none; }
.rad-customizer__product-photo { inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.rad-customizer__product-photo[hidden] { display: none; }
.rad-customizer__product-photo-color, .rad-customizer__product-photo-detail { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.rad-customizer__product-photo-color { background: var(--rad-garment-color); -webkit-mask: var(--rad-product-image) center / contain no-repeat; mask: var(--rad-product-image) center / contain no-repeat; }
.rad-customizer__product-photo-detail { filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; opacity: .76; }
.rad-customizer__garment[data-rad-has-photo="true"] .rad-customizer__print-area { min-height: 120px; width: 47%; z-index: 3; }
.rad-customizer__garment[data-rad-has-photo="true"][data-rad-preview-location="left-chest"] .rad-customizer__print-area { width: 23%; }
.rad-customizer__garment[data-rad-has-photo="true"][data-rad-preview-location="sleeve"] .rad-customizer__print-area { width: 19%; }
.rad-customizer__garment--zip-hoodie[data-rad-has-photo="true"] .rad-customizer__print-area::before { display: none; }
.rad-customizer__garment--hat[data-rad-has-photo="true"] { height: 300px; margin: 0; width: 480px; }
.rad-customizer__garment--hat[data-rad-has-photo="true"] .rad-customizer__print-area { min-height: 72px; width: 34%; }
.rad-customizer__garment--tote[data-rad-has-photo="true"] { height: 500px; margin: 0; width: 390px; }
.rad-customizer__garment--tote[data-rad-has-photo="true"] .rad-customizer__print-area { width: 48%; }
@media screen and (max-width: 749px) {
  .rad-customizer__header, .rad-customizer__app, .rad-customizer__stage-wrap, .rad-customizer__panel { width: 100%; }
  .rad-customizer__stage { min-height: 390px; overflow: hidden; padding: 1.5rem .5rem; }
  .rad-customizer__garment[data-rad-has-photo="true"] { height: 370px; max-width: 100%; width: 315px; }
  .rad-customizer__garment[data-rad-has-photo="true"] .rad-customizer__print-area { min-height: 84px; }
  .rad-customizer__garment--hat[data-rad-has-photo="true"] { height: 215px; width: 330px; }
  .rad-customizer__garment--tote[data-rad-has-photo="true"] { height: 370px; width: 290px; }
}
@media screen and (max-width: 420px) {
  .rad-customizer__stage { min-height: 340px; }
  .rad-customizer__garment[data-rad-has-photo="true"] { height: 320px; width: 273px; }
  .rad-customizer__garment--hat[data-rad-has-photo="true"] { height: 185px; width: 285px; }
  .rad-customizer__garment--tote[data-rad-has-photo="true"] { height: 330px; width: 258px; }
}