:root {
  --red: #ed1c24;
  --ink: #0a0a0a;
  --paper: #f3f1eb;
  --line: #c9c6be;
  --blue: #123b9e;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.45 "DM Sans",
    sans-serif;
}

[hidden] {
  display: none !important;
}
button,
input,
select {
  font: inherit;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  height: 82px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 241, 235, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.brand .brand-trademark {
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.25em;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.15em;
  color: inherit;
  -webkit-text-stroke: 0;
}
.site-header .brand {
  white-space: nowrap;
  flex-shrink: 0;
}
.brand {
  font:
    900 clamp(1.65rem, 3.2vw, 2.75rem)/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.02em;
}
.brand span {
  background: var(--red);
  color: #fff;
  padding: 3px 9px;
}
.site-header nav {
  display: flex;
  gap: 28px;
  font-weight: 700;
  font-size: 0.88rem;
}
.site-header nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.intro {
  padding: 32px clamp(20px, 5vw, 72px) 25px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  margin: 0 0 8px;
}
.intro h1,
.original h2 {
  font:
    900 clamp(3.8rem, 8vw, 7.8rem)/0.82 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.03em;
  margin: 0;
}
.intro h1 span {
  color: var(--red);
}
.intro > p {
  max-width: 410px;
  margin: 0 0 5px;
  font-size: 1.05rem;
}
.studio {
  display: grid;
  grid-template-columns: minmax(480px, 0.9fr) minmax(450px, 1.1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 690px;
}
.builder {
  padding: clamp(22px, 3vw, 42px);
  border-right: 1px solid var(--ink);
  background: #fff;
}
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.option-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  text-align: left;
  padding: 13px 16px;
  cursor: pointer;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.option-card > span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #666;
}
.option-card strong {
  font:
    800 1.7rem/1 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.option-card small {
  color: #555;
}
.option-card.active {
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 -5px var(--red);
}
.option-card.active > span,
.option-card.active small {
  color: #ddd;
}
.controls {
  margin-top: 30px;
}
.control-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.control-title span {
  font-size: 0.75rem;
  color: #666;
}
.category-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 11px;
}
.category {
  border: 2px solid #555;
  background: #fff;
  color: #111;
  min-height: 52px;
  padding: 8px 4px;
  font-weight: 400;
  font-size: clamp(0.7rem, 2.7vw, 0.875rem);
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
}
.category.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.graphic-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.see-all-graphics {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.see-all-graphics:hover, .see-all-graphics:focus-visible {
  background: #111;
  color: #fff;
}
.see-all-graphics[hidden] { display: none; }
.graphics-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 22px 70px #0006;
}
.graphics-dialog::backdrop { background: #0009; }
.graphics-panel { padding: 24px; overflow: auto; max-height: min(780px, calc(100dvh - 32px)); }
.graphics-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.graphics-panel-heading h2 { margin: 0; font-size: 1.5rem; }
.close-graphics { border: 1px solid #777; border-radius: 6px; background: white; width: 42px; height: 42px; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.graphics-search-label { display: block; font-weight: 700; margin-bottom: 6px; }
#graphics-search { width: 100%; padding: 12px; border: 1px solid #777; border-radius: 6px; font: inherit; margin-bottom: 18px; }
.graphics-panel-list .graphic-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graphics-empty { margin: 8px 0 0; }
@media (max-width: 640px) {
  .graphics-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .graphics-panel { padding: 18px; max-height: 100dvh; }
  .graphics-panel-list .graphic-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.graphic-choice {
  border: 1px solid #aaa;
  background: #fff;
  min-height: 84px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.graphic-choice img {
  width: 46px;
  height: 42px;
  object-fit: contain;
}
.graphic-choice[data-category="cars"] img {
  width: min(68px, 46%);
  height: 56px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}
.graphic-choice.active {
  border: 3px solid var(--red);
  padding: 6px;
}
.graphic-choice[hidden] {
  display: none;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 24px;
}
.field-grid label {
  font-weight: 700;
  font-size: 0.8rem;
}
.field-grid input,
.field-grid select {
  display: block;
  width: 100%;
  height: 45px;
  margin-top: 6px;
  border: 1px solid #888;
  background: #fff;
  padding: 0 11px;
  border-radius: 0;
}
.field-grid .text-helper {
  margin: -3px 0 0;
  color: #666;
  font-size: 0.78rem;
}
.text-control-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 13px;
  margin-top: 5px;
  padding: 16px;
  border: 1px solid #c7c2b8;
  background: #f8f6f0;
}
.text-control-section + .text-control-section {
  margin-top: 12px;
}
.text-control-section h3,
.text-control-section .text-helper {
  grid-column: 1 / -1;
}
.text-control-section h3,
.field-grid .apparel-option-title {
  margin: 0;
  font: 900 1.2rem/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}
.demo-note {
  font-size: 0.75rem;
  color: #666;
  margin: 18px 0 0;
}
.preview-panel {
  background: #ddd9d0;
  padding: clamp(22px, 3vw, 42px);
  display: flex;
  flex-direction: column;
}
.preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.preview-heading > div > span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: #555;
}
.preview-heading h2 {
  font:
    800 1.65rem/1.1 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
  margin: 5px 0 0;
}
.status {
  background: #fff;
  padding: 7px 10px;
  border: 1px solid #aaa;
  font-size: 0.7rem;
  font-weight: 700;
}
.garment-stage {
  flex: 1;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.garment {
  position: relative;
  background: #f4f1e8;
  color: #111;
  filter: drop-shadow(0 24px 21px rgba(0, 0, 0, 0.2));
  transition: background 0.2s;
  width: 390px;
  height: 430px;
  clip-path: polygon(
    28% 7%,
    38% 0,
    62% 0,
    72% 7%,
    100% 22%,
    87% 42%,
    76% 33%,
    76% 100%,
    24% 100%,
    24% 33%,
    13% 42%,
    0 22%
  );
}
.garment:after {
  content: "";
  position: absolute;
  width: 92px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.13);
  border-top: 0;
  border-radius: 0 0 55px 55px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.garment.sweatshirt {
  width: 430px;
  height: 440px;
  clip-path: polygon(
    26% 9%,
    39% 2%,
    61% 2%,
    74% 9%,
    100% 23%,
    88% 44%,
    77% 35%,
    77% 100%,
    23% 100%,
    23% 35%,
    12% 44%,
    0 23%
  );
}
.garment.sweatshirt:before {
  content: "";
  position: absolute;
  width: 136px;
  height: 100px;
  border: 12px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
  border-radius: 70px 70px 0 0;
  left: 50%;
  top: -17px;
  transform: translateX(-50%);
}
.design-mark {
  position: absolute;
  width: 118px;
  left: 27%;
  top: 25%;
  border: 2px solid #111;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  color: #111;
  transition: all 0.2s;
}
.sweatshirt .design-mark {
  width: 255px;
  left: 50%;
  top: 29%;
  transform: translateX(-50%);
  border-width: 3px;
}
.tag-header {
  background: var(--red);
  color: #fff;
  text-align: center;
  font:
    900 1rem/1 "Barlow Condensed",
    sans-serif;
  padding: 5px 3px;
  letter-spacing: 0.02em;
}
.sweatshirt .tag-header {
  font-size: 2rem;
  padding: 8px;
}
.tag-body {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  background: #fff;
}
.sweatshirt .tag-body {
  min-height: 137px;
  gap: 13px;
  padding: 13px;
}
.tag-body > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.sweatshirt .tag-body > img {
  width: 68px;
  height: 68px;
}
.tag-copy {
  text-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tag-copy strong {
  font:
    900 1rem/0.9 "Barlow Condensed",
    sans-serif;
  overflow-wrap: anywhere;
}
.tag-copy small {
  font:
    700 0.43rem/1 "Barlow Condensed",
    sans-serif;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.sweatshirt .tag-copy strong {
  font-size: 2.45rem;
}
.sweatshirt .tag-copy small {
  font-size: 0.94rem;
  margin-top: 7px;
}
.text-mode .tag-body > img {
  display: none;
}
.text-mode .tag-copy strong {
  font-size: 1.25rem;
}
.sweatshirt .text-mode .tag-copy strong {
  font-size: 3rem;
}
.placement {
  text-align: center;
  font-size: 0.8rem;
  color: #555;
  margin: 0;
}
.original {
  padding: clamp(65px, 9vw, 120px) clamp(20px, 7vw, 100px);
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}
.original h2 {
  font-size: clamp(3.5rem, 7vw, 7rem);
  color: var(--red);
}
.original h2.apparel-headline {
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: clamp(1rem, 5.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  -webkit-text-stroke: 0.65px currentColor;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.apparel-headline span { color: var(--red); }
.original > div > p:last-child {
  max-width: 430px;
}
.original-frame {
  background: #fff;
  padding: 15px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  aspect-ratio: 3/2;
}
.original-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about {
  background: var(--ink);
  color: #fff;
  padding: 70px clamp(20px, 7vw, 100px);
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
}
.about p {
  font:
    700 clamp(2rem, 4vw, 4rem)/1.05 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
  max-width: 950px;
  margin: 0;
}
.about a {
  white-space: nowrap;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
  font-weight: 700;
}
footer {
  background: var(--red);
  color: #fff;
  padding: 25px clamp(20px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-copyright-row {
  flex-basis: 100%;
  width: 100%;
  text-align: center;
}
.footer-copyright {
  display: inline-block;
  color: #000;
  background: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
@media (max-width: 950px) {
  .studio {
    grid-template-columns: 1fr;
  }
  .builder {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .garment-stage {
    min-height: 520px;
  }
  .original {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .site-header {
    height: 70px;
  }
  .brand {
    font-size: 1.55rem;
  }
  .intro {
    padding-top: 24px;
  }
  .intro h1 {
    font-size: 4rem;
  }
  .studio {
    min-height: 0;
  }
  .option-grid {
    gap: 8px;
  }
  .option-card {
    min-height: 118px;
    padding: 14px;
  }
  .option-card strong {
    font-size: 1.35rem;
  }
  .control-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .graphic-picker {
    grid-template-columns: 1fr 1fr;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .field-grid label:last-child {
    grid-column: auto;
  }
  .preview-panel {
    padding: 22px 12px;
  }
  .preview-heading {
    padding: 0 8px;
  }
  .status {
    display: none;
  }
  .garment-stage {
    min-height: 460px;
  }
  .garment {
    transform: scale(0.86);
  }
  .garment.sweatshirt {
    transform: scale(0.78);
  }
  .original {
    padding-top: 28px;
    padding-bottom: 70px;
  }
  .about {
    align-items: flex-start;
    flex-direction: column;
  }
  .about a {
    white-space: normal;
  }
  footer {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .garment,
  .design-mark {
    transition: none;
  }
}
.site-header {
  height: auto;
  min-height: 96px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
}
.brand span {
  padding: 4px 11px;
}
.apparel-mockups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.apparel-mockups figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  padding: 12px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.13);
}
.original.white-samples .apparel-mockups figure {
  background: #ddd9d0;
}
.apparel-mockups img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.apparel-mockups figcaption {
  margin-top: auto;
  padding: 9px 4px 2px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 800;
}
@media (max-width: 560px) {
  .site-header {
    height: auto;
    min-height: 82px;
  }
  .brand {
    font-size: 2rem;
  }
  .apparel-mockups {
    grid-template-columns: 1fr;
  }
  .apparel-mockups img {
    height: auto;
  }
}
.garment-stage {
  padding: 22px 0;
}
.garment {
  background: transparent;
  width: min(100%, 500px);
  height: auto;
  aspect-ratio: 625/700;
  clip-path: none;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.2));
  transition: none;
}
.garment:after,
.garment:before {
  display: none;
}
.garment-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.design-mark {
  width: 25%;
  left: 60%;
  top: 21.5%;
  border: 2px solid #111;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}
.garment.hoodie {
  width: min(100%, 520px);
  height: auto;
  aspect-ratio: 960/1100;
  clip-path: none;
}
.hoodie .design-mark {
  width: 24%;
  left: 56.5%;
  top: 28.7%;
  transform: none;
  border-width: 2px;
}
.hoodie .tag-header {
  font-size: 1.15rem;
  padding: 5px;
}
.hoodie .tag-body {
  min-height: 78px;
  gap: 7px;
  padding: 8px;
}
.hoodie .tag-body > img {
  width: 36px;
  height: 36px;
}
.hoodie .tag-copy strong {
  font-size: 1.2rem;
}
.hoodie .tag-copy small {
  font-size: 0.52rem;
  margin-top: 4px;
}
.hoodie .text-mode .tag-copy strong {
  font-size: 1.45rem;
}
#garment-color:disabled {
  background: #e8e6e0;
  color: #555;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .garment {
    transform: scale(0.94);
  }
  .garment.hoodie {
    transform: scale(0.9);
  }
  .design-mark {
    width: 27%;
  }
  .hoodie .design-mark {
    width: 26%;
  }
}
.design-mark {
  width: 15.2%;
  left: 60.5%;
  top: 21.2%;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(80, 80, 80, 0.9),
    0 3px 7px rgba(0, 0, 0, 0.35);
}
.tag-header {
  height: 15px;
  padding: 1px 2px;
  background: #050505;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tag-header strong {
  font:
    700 0.54rem/0.76 "Montserrat",
    sans-serif;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
}
.tag-header span {
  font:
    600 0.26rem/0.72 "Montserrat",
    sans-serif;
  letter-spacing: 0.08em;
}
.tag-body {
  min-height: 36px;
  gap: 3px;
  padding: 3px 4px;
}
.tag-body > img {
  width: 18px;
  height: 18px;
}
.tag-copy strong {
  font-size: 0.56rem;
  line-height: 0.9;
}
.tag-copy small {
  font-size: 0.27rem;
  line-height: 1;
  margin-top: 2px;
}
.text-mode .tag-copy strong {
  font-size: 0.68rem;
}
.garment.hoodie .design-mark {
  width: 14.5%;
  left: 56.6%;
  top: 28.6%;
  border-width: 1.5px;
}
.hoodie .tag-header {
  height: 16px;
  font-size: inherit;
  padding: 1px 2px;
}
.hoodie .tag-header strong {
  font-size: 0.58rem;
}
.hoodie .tag-header span {
  font-size: 0.27rem;
}
.hoodie .tag-body {
  min-height: 38px;
  gap: 3px;
  padding: 3px 4px;
}
.hoodie .tag-body > img {
  width: 19px;
  height: 19px;
}
.hoodie .tag-copy strong {
  font-size: 0.6rem;
}
.hoodie .tag-copy small {
  font-size: 0.28rem;
  margin-top: 2px;
}
.hoodie .text-mode .tag-copy strong {
  font-size: 0.72rem;
}
@media (max-width: 560px) {
  .design-mark {
    width: 15.2%;
  }
  .hoodie .design-mark {
    width: 14.5%;
  }
}
.tag-header {
  font:
    700 0.48rem/1 "Montserrat",
    sans-serif;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.hoodie .tag-header {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
}
.design-mark {
  width: 20.5%;
  left: 57.6%;
  border-radius: 11px;
}
.garment.hoodie .design-mark {
  width: 19%;
  left: 54.3%;
  border-radius: 12px;
}
@media (max-width: 560px) {
  .design-mark {
    width: 20.5%;
    left: 57.6%;
  }
  .hoodie .design-mark {
    width: 19%;
    left: 54.3%;
  }
}
.studio {
  min-height: 760px;
}
.garment-stage {
  min-height: 640px;
}
.garment {
  width: min(100%, 600px);
}
.design-mark {
  width: 15%;
  left: 60.6%;
  top: 21.4%;
  aspect-ratio: 1.65;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
}
.tag-header {
  height: 30%;
  padding: 1px 3px;
  font-size: 0.56rem;
  flex: 0 0 auto;
}
.tag-body {
  min-height: 0;
  flex: 1;
  padding: 3px 5px;
  gap: 4px;
}
.tag-body > img {
  width: 22px;
  height: 22px;
}
.tag-copy strong {
  font-size: 0.68rem;
}
.tag-copy small {
  font-size: 0.36rem;
}
.text-mode .tag-copy strong {
  font-size: 0.82rem;
}
.garment.hoodie {
  width: min(100%, 600px);
}
.garment.hoodie .design-mark {
  width: 14.6%;
  left: 56.6%;
  top: 28.6%;
  aspect-ratio: 1.65;
  border-radius: 9px;
}
.hoodie .tag-header {
  height: 30%;
  font-size: 0.56rem;
}
.hoodie .tag-body {
  min-height: 0;
  flex: 1;
  padding: 3px 5px;
}
.hoodie .tag-body > img {
  width: 22px;
  height: 22px;
}
.hoodie .tag-copy strong {
  font-size: 0.68rem;
}
.hoodie .tag-copy small {
  font-size: 0.36rem;
}
.hoodie .text-mode .tag-copy strong {
  font-size: 0.82rem;
}
@media (max-width: 560px) {
  .studio {
    min-height: 0;
  }
  .garment-stage {
    min-height: 520px;
  }
  .garment {
    width: 100%;
    transform: scale(0.98);
  }
  .garment.hoodie {
    width: 100%;
    transform: scale(0.94);
  }
  .design-mark {
    width: 15%;
    left: 60.6%;
    top: 21.4%;
  }
  .hoodie .design-mark {
    width: 14.6%;
    left: 56.6%;
    top: 28.6%;
  }
  .tag-header,
  .hoodie .tag-header {
    font-size: 0.44rem;
  }
  .tag-copy strong,
  .hoodie .tag-copy strong {
    font-size: 0.56rem;
  }
  .tag-copy small,
  .hoodie .tag-copy small {
    font-size: 0.3rem;
  }
  .tag-body > img,
  .hoodie .tag-body > img {
    width: 18px;
    height: 18px;
  }
}
.design-mark {
  border: 1.5px solid #e6e6e6;
  box-shadow:
    0 0 0 1px #4a4a4a,
    0 3px 7px rgba(0, 0, 0, 0.35);
  background: #050505;
}
.design-mark::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  flex: 0 0 5px;
  background: #050505;
  border-top: 1px solid #242424;
}
.tag-body {
  background: #fff;
}
@media (max-width: 560px) {
  .design-mark::after {
    height: 4px;
    flex-basis: 4px;
  }
}
.preview-panel {
  gap: 0;
}
.primary-design-wrap {
  display: grid;
  place-items: center;
  padding: 34px 0 30px;
}
.primary-badge {
  position: relative;
  inset: auto;
  width: min(92%, 480px);
  aspect-ratio: 1.65;
  border-radius: 24px;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.2));
}
.primary-badge .tag-header {
  height: 28%;
  font-size: clamp(1rem, 2.2vw, 1.65rem);
  letter-spacing: 0.13em;
  padding: 5px 12px;
}
.primary-badge .tag-body {
  padding: clamp(12px, 2vw, 22px);
  gap: clamp(14px, 3vw, 30px);
}
.primary-badge .tag-body > img {
  width: clamp(62px, 9vw, 94px);
  height: clamp(62px, 9vw, 94px);
}
.primary-badge .tag-copy strong {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 0.9;
}
.primary-badge .tag-copy small {
  font-size: clamp(0.82rem, 1.55vw, 1.2rem);
  margin-top: 9px;
  letter-spacing: 0.04em;
}
.primary-badge.text-mode .tag-copy strong {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.primary-badge::after {
  height: 6px;
  flex-basis: 6px;
}
.apparel-example {
  border-top: 1px solid rgba(0, 0, 0, 0.28);
  padding-top: 22px;
}
.example-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.example-heading span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: #555;
}
.example-heading strong {
  font:
    800 1.05rem/1 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
}
.apparel-example .garment-stage {
  min-height: 400px;
  padding: 10px 0;
}
.apparel-example .garment {
  width: min(78%, 390px);
}
.apparel-badge::after {
  height: 3px;
  flex-basis: 3px;
}
@media (max-width: 560px) {
  .primary-design-wrap {
    padding: 28px 4px 24px;
  }
  .primary-badge {
    width: 96%;
    border-radius: 18px;
  }
  .primary-badge .tag-header {
    font-size: clamp(0.82rem, 4vw, 1.1rem);
  }
  .primary-badge .tag-body > img {
    width: clamp(48px, 16vw, 70px);
    height: clamp(48px, 16vw, 70px);
  }
  .primary-badge .tag-copy strong {
    font-size: clamp(1.45rem, 8vw, 2.35rem);
  }
  .primary-badge .tag-copy small {
    font-size: clamp(0.62rem, 3vw, 0.9rem);
    margin-top: 5px;
  }
  .primary-badge::after {
    height: 4px;
    flex-basis: 4px;
  }
  .example-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .apparel-example .garment-stage {
    min-height: 360px;
  }
  .apparel-example .garment {
    width: min(92%, 340px);
  }
  .apparel-badge::after {
    height: 2px;
    flex-basis: 2px;
  }
}
.design-mark::after,
.primary-badge::after,
.apparel-badge::after {
  height: auto;
  flex: 0 0 clamp(2px, 4%, 12px);
  border-top: 0;
}
.primary-badge .tag-header {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.11em;
}
.apparel-example .garment-stage {
  min-height: 330px;
}
.apparel-example .garment {
  width: min(64%, 300px);
}
@media (max-width: 560px) {
  .primary-badge .tag-header {
    font-size: clamp(1.05rem, 5.5vw, 1.55rem);
    letter-spacing: 0.09em;
  }
  .apparel-example .garment-stage {
    min-height: 300px;
  }
  .apparel-example .garment {
    width: min(76%, 260px);
  }
  /* The shirt artwork sits right of center inside its image; shift the whole
     garment layer so the photo and its live badge remain together. */
  .apparel-example #garment.tshirt {
    transform: translateX(-4%) scale(0.98);
  }
}
.primary-badge .tag-body {
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3.5vw, 34px);
}
.primary-badge .tag-copy {
  flex: 1 1 auto;
  max-width: 68%;
  align-items: center;
  justify-content: center;
}
.primary-badge .tag-copy strong {
  font-size: clamp(2.2rem, 5vw, 3.85rem);
  letter-spacing: 0.01em;
}
.primary-badge .tag-copy small {
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  margin-top: 10px;
}
.primary-badge.text-mode .tag-copy {
  max-width: 88%;
}
@media (max-width: 560px) {
  .primary-badge .tag-body {
    gap: clamp(12px, 4vw, 20px);
    padding-left: 14px;
    padding-right: 14px;
  }
  .primary-badge .tag-copy {
    max-width: 70%;
  }
  .primary-badge .tag-copy strong {
    font-size: clamp(1.65rem, 8.5vw, 2.55rem);
  }
  .primary-badge .tag-copy small {
    font-size: clamp(0.7rem, 3.4vw, 1rem);
    margin-top: 6px;
  }
  .primary-badge.text-mode .tag-copy {
    max-width: 90%;
  }
}
.primary-badge .tag-body > img {
  width: clamp(70px, 10vw, 106px);
  height: clamp(70px, 10vw, 106px);
  flex: 0 0 auto;
}
.primary-badge .tag-copy {
  max-width: 64%;
}
@media (max-width: 560px) {
  .primary-badge .tag-body > img {
    width: clamp(52px, 17vw, 78px);
    height: clamp(52px, 17vw, 78px);
  }
  .primary-badge .tag-copy {
    max-width: 66%;
  }
}
.primary-badge,
.apparel-badge {
  container-type: inline-size;
  aspect-ratio: 1.65;
  border-width: clamp(1px, 0.45cqw, 2px);
  border-radius: 5cqw;
}
.primary-badge .tag-header,
.apparel-badge .tag-header {
  height: 28%;
  padding: 1cqw 2.5cqw;
  flex: 0 0 auto;
  font-size: 7.5cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  white-space: nowrap;
}
.primary-badge .tag-body,
.apparel-badge .tag-body {
  min-height: 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7cqw;
  padding: 4.5cqw;
}
.primary-badge .tag-body > img,
.apparel-badge .tag-body > img {
  width: 22cqw;
  height: 22cqw;
  flex: 0 0 auto;
}
.primary-badge .tag-copy,
.apparel-badge .tag-copy {
  flex: 1 1 auto;
  max-width: 64%;
  align-items: center;
  justify-content: center;
}
.primary-badge .tag-copy strong,
.apparel-badge .tag-copy strong {
  font-size: 4.7cqw;
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.primary-badge .tag-copy small,
.apparel-badge .tag-copy small {
  font-size: 4.7cqw;
  line-height: 1.05;
  letter-spacing: 0.05em;
  margin-top: 2cqw;
}
.primary-badge.text-mode .tag-copy,
.apparel-badge.text-mode .tag-copy {
  max-width: 88%;
}
.primary-badge.text-mode .tag-copy strong,
.apparel-badge.text-mode .tag-copy strong {
  font-size: 4.7cqw;
}
.primary-badge::after,
.apparel-badge::after {
  height: auto;
  flex: 0 0 4%;
  border-top: 0;
}
.primary-badge,
.apparel-badge {
  border-radius: 5% / 8.25%;
  overflow: hidden;
  isolation: isolate;
}
.drag-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 700;
}
.drag-tools button {
  border: 1px solid #111;
  background: #fff;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.primary-badge .tag-body,
.apparel-badge .tag-body {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
}
.primary-badge .tag-copy,
.apparel-badge .tag-copy {
  display: contents;
}
.primary-badge .badge-piece,
.apparel-badge .badge-piece {
  position: absolute;
  left: var(--piece-x);
  top: var(--piece-y);
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 55%;
  text-align: center;
  z-index: 1;
}
.primary-badge .badge-piece {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.primary-badge .badge-piece.is-dragging {
  cursor: grabbing;
  filter: none;
  z-index: 3;
}
.primary-badge .badge-piece:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.apparel-badge .badge-piece {
  pointer-events: none;
}
.primary-badge .tag-body > img,
.apparel-badge .tag-body > img {
  object-fit: contain;
  object-position: center;
}
.primary-badge .tag-body > img.car-logo-preview,
.apparel-badge .tag-body > img.car-logo-preview {
  transform: translate(-50%, -50%) scale(var(--car-logo-footprint, 1));
  transform-origin: center;
}
.primary-badge .tag-copy strong,
.apparel-badge .tag-copy strong {
  white-space: nowrap;
  max-width: none;
}
.primary-badge .tag-copy small,
.apparel-badge .tag-copy small {
  white-space: nowrap;
  overflow-wrap: normal;
}
.primary-badge .main-preview,
.primary-badge .second-preview,
.apparel-badge .main-preview,
.apparel-badge .second-preview {
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}
.text-mode .tag-body > img {
  display: none;
}
@media (max-width: 560px) {
  .drag-tools {
    align-items: center;
    flex-flow: row nowrap;
    gap: 8px;
  }
  .movement-copy {
    min-width: 0;
  }
}
.size-control span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.size-control output {
  font-weight: 800;
  color: #555;
}
.field-grid .size-control input[type="range"] {
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--red);
  cursor: pointer;
}
.garment-photo {
  transition: filter 0.2s ease;
}
.garment.white .garment-photo {
  filter: grayscale(1) invert(1) brightness(1.08) contrast(0.82);
}
.garment.white {
  filter: drop-shadow(0 24px 21px rgba(0, 0, 0, 0.28));
}
.review-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #b8b4aa;
}
.quantity-section {
  margin: 26px 0 0;
  padding: 18px;
  border: 1px solid #8c8982;
  background: #f7f5ef;
}
.quantity-section legend {
  padding: 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.quantity-section > p {
  margin: 0 0 14px;
  color: #555;
  font-size: 0.88rem;
}
.quantity-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.quantity-group {
  min-width: 0;
}
.quantity-group h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.example-unit-price {
  margin-left: 8px;
  color: #a11;
  white-space: nowrap;
}
.size-quantity-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.size-quantity-grid label {
  display: grid;
  gap: 4px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
}
.size-quantity-grid input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 3px;
  border: 1px solid #888;
  background: #fff;
  text-align: center;
  font: inherit;
}
.quantity-total {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #cbc7be;
  font-size: 0.95rem;
  font-weight: 700;
}
.quantity-total strong {
  font-size: 1.15rem;
}
.example-price-total {
  margin-top: 6px;
}
.quantity-total small {
  display: block;
  margin-top: 4px;
  color: #555;
  font-size: 0.82rem;
}
.quantity-section .quantity-error {
  min-height: 1.2em;
  margin: 7px 0 0;
  color: #a11;
  font-size: 0.82rem;
  font-weight: 700;
}
.review-cta .demo-note {
  margin: 0;
  max-width: 360px;
}
.review-button,
.submit-button {
  border: 2px solid #050505;
  background: #ed1c24;
  color: #fff;
  padding: 13px 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #050505;
  white-space: nowrap;
}
.review-button:hover,
.submit-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #050505;
}
.review-dialog {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #111;
  background: #f3f1eb;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}
.review-dialog::backdrop {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(4px);
}
.view-larger {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 14px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.view-larger:hover,
.view-larger:focus-visible {
  background: #111;
  color: #fff;
}
@media (min-width: 701px) {
  .primary-design-wrap { padding-bottom: 20px; }
  .preview-panel > .view-larger { margin: 8px auto 28px; }
}
.sample-view-actions {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 8px;
}
.sample-view-actions .view-larger {
  width: min(100%, 290px);
  margin: 0;
}
.larger-dialog {
  width: min(1040px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid #111;
  background: var(--paper);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.larger-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}
.larger-card { padding: clamp(16px, 3vw, 30px); }
.larger-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.larger-top h2 {
  margin: 0;
  font: 900 clamp(1.7rem, 4vw, 2.8rem)/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}
.close-larger {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid #111;
  background: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.larger-content {
  display: grid;
  place-items: center;
  overflow: hidden;
  max-height: calc(100dvh - 130px);
  min-height: min(68vh, 680px);
  padding: clamp(12px, 3vw, 28px);
  background: #ddd9d0;
  direction: ltr;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
}
.larger-content.is-zoomed { cursor: grab; }
.larger-content.is-zoomed:active { cursor: grabbing; }
.zoom-target {
  display: grid;
  place-items: center;
  width: 100%;
  transform-origin: center;
}
.live-garment-zoom .garment {
  width: min(100%, 60vh, 620px);
  margin-inline: auto;
}
.larger-content .static-mockup { width: min(100%, 900px); }
.larger-content .static-mockup img { width: 100%; height: auto; }
.larger-content img { -webkit-user-drag: none; }
.sample-crop {
  width: min(100%, 620px);
  overflow: hidden;
  position: relative;
}
.sample-crop.sample-tshirt {
  width: min(100%, 620px, 58vh);
  aspect-ratio: 1249 / 1400;
}
.sample-crop.sample-hoodie {
  width: min(100%, 620px, 45vh);
  aspect-ratio: 3 / 4;
}
.sample-crop .static-mockup {
  position: absolute;
  top: 50%;
  width: 200%;
  transform: translateY(-50%);
}
.sample-crop.crop-left .static-mockup { left: 0; }
.sample-crop.crop-right .static-mockup { right: 0; }
.sample-crop.sample-tshirt.crop-left .static-mockup { left: -7%; }
.sample-crop.sample-tshirt.crop-right .static-mockup { right: -6%; top: 47%; }
.sample-crop.sample-hoodie.crop-left .static-mockup { left: -2%; }
.sample-crop.sample-hoodie.crop-right .static-mockup { right: -3%; }
.sample-crop.sample-tshirt::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 8%;
  background: #ddd9d0;
  pointer-events: none;
}
/* Hide the neighboring back shirt; the front sleeve ends before this edge. */
.sample-crop.sample-tshirt.crop-left::after { right: 0; width: 6%; }
.sample-crop.sample-tshirt.crop-right::after { left: 0; }
.sample-crop.sample-hoodie.crop-right { background: #ddd9d0; }
.sample-crop.sample-hoodie.crop-right .static-mockup { background: #ddd9d0; }
.sample-crop.sample-hoodie.crop-right .static-mockup > img { mix-blend-mode: multiply; }
.sample-crop.sample-hoodie.crop-right.white-samples,
.sample-crop.sample-hoodie.crop-right.white-samples .static-mockup { background: #c5c1b9; }
.sample-crop.sample-hoodie.crop-right.white-samples .static-mockup > img { mix-blend-mode: lighten; }
.zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 12px;
}
.zoom-toolbar button {
  min-width: 42px;
  min-height: 38px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font: 900 0.88rem/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.zoom-toolbar button:hover,
.zoom-toolbar button:focus-visible { background: #111; color: #fff; }
.zoom-toolbar span { font-size: 0.78rem; font-weight: 800; }
.feature-help { flex-basis: 100%; font-size: 0.85rem; line-height: 1.5; }
.feature-help p { margin: 4px 0; }
.feature-help span { font-weight: 400; }
.ai-enhance-descriptions p { margin: 10px 0; line-height: 1.5; }
.badge-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 12px;
  font-size: 0.86rem;
  font-weight: 800;
}
.badge-toolbar[hidden] { display: none; }
.badge-toolbar label { white-space: nowrap; }
.badge-toolbar input { width: min(180px, 35vw); accent-color: var(--red); }
.badge-toolbar button { min-height: 38px; padding: 0 10px; border: 1px solid #111; background: #fff; font: inherit; cursor: pointer; }
.badge-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; }
.badge-presets button:hover, .badge-presets button:focus-visible { background: #111; color: #fff; }
.badge-toolbar span { font-size: 0.78rem; }
.live-garment-zoom .apparel-badge { cursor: grab; touch-action: none; }
.badge-presets[hidden] { display: none; }
.live-garment-zoom .apparel-badge:active { cursor: grabbing; }
.live-garment-zoom .garment.hoodie .apparel-badge {
  height: auto;
  aspect-ratio: 1.65;
  border-radius: 5% / 8.25%;
}
.live-garment-zoom .hoodie .apparel-badge .tag-header { height: 28%; padding: 1cqw 2.5cqw; }
.live-garment-zoom .hoodie .apparel-badge .tag-body { min-height: 0; }

@media (max-width: 700px) {
  .preview-panel > .view-larger {
    order: 6;
    margin: -10px auto 20px;
  }
  .larger-content { min-height: 62vh; padding: 8px; }
  .zoom-toolbar span { flex-basis: 100%; text-align: center; }
  .live-garment-zoom .garment { width: min(100%, 56vh, 620px); }
  .live-garment-zoom .garment.tshirt { translate: -6.5% -7.8%; }
}
.review-card {
  padding: clamp(20px, 4vw, 42px);
  overflow: auto;
  max-height: calc(100dvh - 34px);
}
.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.review-top h2 {
  font:
    900 clamp(2.5rem, 6vw, 5rem)/0.9 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
  margin: 0;
}
.review-top p:last-child {
  margin: 0.7rem 0 0;
  max-width: 570px;
}
.close-review {
  border: 1px solid #111;
  background: #fff;
  width: 42px;
  height: 42px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.review-visual {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 24px;
  margin: 28px 0;
  padding: 24px;
  background: #ddd9d0;
  border: 1px solid #aaa;
}
.review-badge-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
}
.review-garment-label {
  margin: 14px 0 4px;
  padding: 8px 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
}
.review-badge-controls .badge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-badge-controls button {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #111;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.review-badge-controls input {
  width: min(220px, 100%);
  accent-color: var(--red);
}
.review-badge-controls label { white-space: nowrap; }
.review-badge-wrap {
  display: grid;
  place-items: center;
}
.review-badge-wrap .primary-badge {
  position: relative;
  width: min(100%, 460px);
  inset: auto;
}
.review-garment-wrap {
  display: grid;
  place-items: center;
  min-height: 250px;
}
.review-garment-wrap .garment {
  width: min(100%, 270px);
}
.review-garment-wrap .garment.tshirt:not(.back) {
  translate: -6.5% 0;
}
.review-garment-wrap .garment.hoodie.front,
.live-garment-zoom .garment.hoodie.front {
  translate: -2.4% 0;
}
.review-garment-wrap .garment.hoodie.back,
.live-garment-zoom .garment.hoodie.back {
  translate: 2.5% 0;
}
.review-garment-wrap .badge-piece {
  pointer-events: none;
}
.review-garment-wrap .apparel-badge {
  cursor: grab;
  touch-action: none;
}
.review-garment-wrap .apparel-badge:active { cursor: grabbing; }
.back-height-control { display: grid; gap: 5px; width: 100%; }
.back-height-control[hidden] { display: none; }
.back-height-control input { width: min(220px, 100%); accent-color: var(--red); }
.review-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: #b8b4aa;
  border: 1px solid #b8b4aa;
}
.review-summary > div {
  background: #fff;
  padding: 12px;
}
.review-summary dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  font-weight: 800;
}
.review-summary dd {
  margin: 3px 0 0;
  font-weight: 800;
}
.review-summary .review-price-row dt {
  color: #111;
  font-weight: 900;
}
.review-summary .review-price-row dd {
  color: #b10012;
  font-weight: 900;
  font-size: 1.2rem;
}
.review-disclaimer {
  margin-top: 18px;
  padding: 12px 14px;
  background: #fff4d6;
  border-left: 5px solid #ed1c24;
  font-size: 0.82rem;
  font-weight: 700;
}
.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 22px;
}
.edit-button {
  border: 1px solid #111;
  background: #fff;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
}
.submit-button {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.submit-button:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: 2px 2px 0 #050505;
}
.demo-checkout-dialog .review-card {
  max-width: 760px;
}
.demo-saved {
  padding: 10px 14px;
  background: #eef4ee;
  border-left: 4px solid #397448;
}
.demo-checkout-design .review-visual {
  margin: 16px 0;
}
.demo-checkout-design .review-garment-wrap {
  min-height: 180px;
}
.demo-checkout-design .review-garment-wrap .garment {
  width: min(100%, 200px);
}
.demo-checkout-summary {
  margin-top: 24px;
  padding: 18px;
  background: #fff;
  border: 1px solid #b8b4aa;
}
.demo-checkout-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.demo-checkout-summary h3,
.demo-shipping-preview h3 {
  margin: 0 0 10px;
}
.demo-email-preview h3 {
  margin: 0 0 10px;
}
.demo-checkout-summary div span small {
  display: block;
  font-weight: 500;
}
.demo-checkout-summary > div > strong {
  text-align: right;
}
.demo-checkout-summary .demo-checkout-total {
  border-top: 1px solid #b8b4aa;
  font-weight: 900;
}
.demo-checkout-summary strong {
  color: #b10012;
}
.demo-checkout-summary small,
.demo-checkout-note {
  color: #555;
}
.demo-shipping-preview,
.demo-email-preview,
.demo-payment-options {
  padding: 18px;
  margin-top: 16px;
  border: 1px solid #b8b4aa;
  background: #fff;
}
.demo-shipping-preview p {
  margin: 0 0 8px;
}
.demo-email-example {
  padding: 10px 12px;
  border: 1px solid #ccc;
  background: #eee;
  color: #555;
  overflow-wrap: anywhere;
}
.demo-email-preview p {
  margin: 10px 0 8px;
}
.demo-payment-options {
  margin-bottom: 18px;
}
.demo-payment-options h3 {
  margin-bottom: 4px;
}
.demo-card-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0 7px;
}
.demo-card-fields > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #eee;
  border: 1px solid #ccc;
  color: #555;
}
.demo-card-fields span {
  font-size: 0.78rem;
}
.demo-card-fields strong {
  overflow-wrap: anywhere;
}
.demo-pay-button:disabled {
  width: 100%;
  background: #888;
  border-color: #777;
  color: #fff;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.demo-mission-note {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid #111;
  background: #f3f1eb;
  color: #111;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 520px) {
  .demo-card-fields {
    grid-template-columns: 1fr 1fr;
  }
  .demo-card-fields > div:first-child {
    grid-column: 1 / -1;
  }
}
.submission-status {
  display: none;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid;
}
.submission-status.success,
.submission-status.error {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.submission-status.success {
  background: #e8f6e8;
  border-color: #1f6d2c;
}
.submission-status.error {
  background: #ffe5e5;
  border-color: #a11;
}
.submission-status span {
  font-size: 0.84rem;
}
.review-visual .design-mark {
  transition: none;
}
@media (max-width: 700px) {
  .size-quantity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .review-cta {
    align-items: stretch;
    flex-direction: column;
  }
  .review-button {
    width: 100%;
  }
  .review-visual {
    grid-template-columns: 1fr;
  }
  .review-summary {
    grid-template-columns: 1fr 1fr;
  }
  .review-garment-wrap {
    min-height: 220px;
  }
  .review-garment-wrap .garment {
    width: min(72%, 240px);
  }
}
@media (max-width: 440px) {
  .review-summary {
    grid-template-columns: 1fr;
  }
  .review-actions {
    flex-direction: column-reverse;
  }
  .review-actions button {
    width: 100%;
  }
}
.header-divider {
  height: 4.5px;
  background: #000;
}
.foundation-logo-frame {
  display: block;
  position: relative;
  flex: 0 0 clamp(86px, 14vw, 160px);
  aspect-ratio: 2.8;
  overflow: hidden;
  background: #000;
}
.foundation-logo-frame img {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}
.about > div {
  max-width: 950px;
}
.about > div > p {
  max-width: none;
}
.about small {
  display: block;
  max-width: 820px;
  margin-top: 18px;
  color: #d4d4d4;
  font-size: 0.85rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
.about-foundation-line {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  margin-top: 18px;
}
.about-foundation-line .foundation-logo-frame {
  flex-basis: clamp(86px, 14vw, 160px);
}
.about-foundation-line small {
  margin-top: 0;
  color: #fff;
  font-weight: 800;
}
.about-foundation-line + small {
  margin-top: 10px;
}
.about > a {
  align-self: flex-end;
}
@media (max-width: 620px) {
  .foundation-logo-frame {
    flex-basis: clamp(82px, 24vw, 112px);
    margin-top: 0;
  }
  .about small {
    font-size: 0.78rem;
  }
  .about-foundation-line {
    gap: 9px;
  }
  .about-foundation-line .foundation-logo-frame {
    flex-basis: clamp(82px, 24vw, 112px);
  }
  .about > a {
    align-self: flex-start;
  }
}
.intro {
  padding-top: 26px;
  padding-bottom: 22px;
}
.intro h1 {
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .intro h1 {
    font-size: clamp(3.15rem, 14vw, 4rem);
    white-space: normal;
  }
}
.primary-badge .main-preview,
.primary-badge .second-preview,
.apparel-badge .main-preview,
.apparel-badge .second-preview {
  transform: translate(-50%, -50%) rotate(var(--piece-rotation, 0deg));
  transform-origin: center;
}
.rotation-handle {
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #111;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font: 900 1rem/1 sans-serif;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 6;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
.rotation-handle:hover {
  background: #f5f5f5;
}
.rotation-handle.is-rotating {
  cursor: grabbing;
  background: var(--red);
  color: #fff;
}
.rotation-handle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.review-badge-wrap .rotation-handle {
  display: none;
}
@media (max-width: 560px) {
  .rotation-handle {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}
.garment.back {
  overflow: hidden;
}
.garment.back .garment-photo {
  inset: 0 auto 0 -100%;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}
.garment.tshirt.back .design-mark {
  width: 26%;
  left: 50%;
  top: 19.5%;
  transform: translateX(-50%);
}
.garment.hoodie.back {
  aspect-ratio: 960/1280;
}
.garment.hoodie.back .design-mark {
  width: 29%;
  left: 50%;
  top: 39%;
  transform: translateX(-50%);
}
.garment.tshirt.back {
  aspect-ratio: 1316/1195;
}
.garment.tshirt.back .garment-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 560px) {
  .garment.tshirt.back .design-mark {
    width: 26%;
    left: 50%;
    top: 19.5%;
  }
  .garment.hoodie.back .design-mark {
    width: 29%;
    left: 50%;
    top: 39%;
  }
}
.primary-badge .tag-header,
.apparel-badge .tag-header {
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: none;
  white-space: nowrap;
}
.primary-badge .tag-header {
  font-size: 9.2cqw;
}
.apparel-badge .tag-header {
  font-size: 11cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-mark {
  --badge-band: #050505;
  --badge-heading: #ffffff;
}
.design-mark .tag-header {
  background: var(--badge-band);
  color: var(--badge-heading);
}
.design-mark::after {
  background: var(--badge-band);
}

.customization-heading {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.customization-heading strong {
  font: 900 1.25rem/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}
.customization-heading span {
  color: #555;
  font-size: 0.78rem;
  line-height: 1.35;
}
.drag-instruction {
  margin: 22px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--red);
  background: #f3f1eb;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}
.drag-instruction-mobile {
  display: none;
}

/* Compact language control and locale-aware layout */
.language-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: auto 28px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.language-picker select {
  min-width: 104px;
  min-height: 38px;
  padding: 7px 28px 7px 9px;
  border: 1px solid #111;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font: 700 0.8rem/1 "DM Sans", sans-serif;
}
.brand,
.design-mark,
.static-mockup,
footer > strong {
  direction: ltr;
}
.brand {
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-weight: 400;
  -webkit-text-stroke: 0.35px currentColor;
}
.brand span {
  background: transparent;
  color: var(--red);
  padding: 0;
}
.intro h1 {
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: clamp(2.9rem, 5.8vw, 5.8rem);
  line-height: 1.03;
  letter-spacing: 0;
  -webkit-text-stroke: 0.35px currentColor;
}
@media (max-width: 700px) {
  .intro h1 {
    font-size: clamp(2.55rem, 11.2vw, 3.2rem);
  }
}
.intro > p {
  transform: translateY(-20px);
}
/* Keep the introduction compact while preserving the existing type and colors. */
.brand {
  -webkit-text-stroke-width: 0.65px;
}
.intro {
  padding-bottom: 18px;
}
.intro > p {
  transform: none;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .intro {
    gap: 12px;
    padding-top: 24px;
    padding-bottom: 18px;
  }
  .intro h1 {
    font-size: clamp(1.8rem, 7.2vw, 3.2rem);
    white-space: nowrap;
  }
}
.main-preview,
.second-preview,
#main-text,
#second-text {
  direction: auto;
  unicode-bidi: plaintext;
}
.primary-badge .second-preview,
.apparel-badge .second-preview {
  font-size: var(--second-line-size, 4.7cqw);
}
html[dir="rtl"] .field-grid label,
html[dir="rtl"] .control-title,
html[dir="rtl"] .review-summary,
html[dir="rtl"] .about {
  text-align: right;
}

/* Match the headline's visible lettering to the top wordmark. */
.intro h1 {
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  line-height: 0.88;
  -webkit-text-stroke-width: 0.65px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .intro h1 {
    font-size: clamp(1.8rem, 10vw, 2rem);
    letter-spacing: -0.025em;
  }
}
html[dir="rtl"] .language-picker {
  margin-inline: auto 28px;
}

/* Keep translated badge headings balanced within the original band geometry. */
.primary-badge .tag-header[lang="es"] { font-size: 8.4cqw; }
.apparel-badge .tag-header[lang="es"] { font-size: 10cqw; }
.primary-badge .tag-header[lang="fr"] { font-size: 6.8cqw; letter-spacing: -0.015em; }
.apparel-badge .tag-header[lang="fr"] { font-size: 8cqw; letter-spacing: -0.015em; }
.primary-badge .tag-header[lang="ar"] { font: 700 7.7cqw/1 "DM Sans", Arial, sans-serif; letter-spacing: 0; }
.apparel-badge .tag-header[lang="ar"] { font: 700 9cqw/1 "DM Sans", Arial, sans-serif; letter-spacing: 0; }

.static-mockup {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.apparel-mockups .static-mockup img {
  width: 100%;
  height: auto;
}
.original.white-samples .static-mockup {
  background: #ddd9d0;
}
.original.white-samples .static-mockup > img,
.sample-crop.white-samples .static-mockup > img {
  filter: grayscale(1) invert(1) brightness(1.08) contrast(0.82)
    drop-shadow(0 16px 14px rgba(0, 0, 0, 0.22));
}
.sample-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1.65;
  border: 1px solid #555;
  border-radius: 12% / 20%;
  background: #fff;
  color: #080808;
}
/* Keep the small hoodie-front badge rectangular even after it is enlarged. */
.garment.hoodie.front .apparel-badge {
  aspect-ratio: 1.65;
  height: auto;
  border-radius: 5% / 8.25%;
}
.static-badge-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 0 30%;
  width: 100%;
  background: #050505;
  color: #fff;
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sample-badge-body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 4%;
  overflow: hidden;
  padding: 3% 5% 5%;
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 0.98;
  white-space: nowrap;
}
.sample-badge-body img {
  display: block;
  flex: 0 0 auto;
  max-width: 48%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sample-badge-body strong { font-weight: 700; }
.fan-badge > span { align-self: flex-start; }
.owner-badge > span,
.owner-badge > strong { text-align: center; }
.american-badge { gap: 7%; padding-inline: 7%; }
.american-badge > strong { text-align: center; }
.american-badge img { max-width: 55%; max-height: 82%; }
.sample-tshirt-front { left: 30.25%; top: 21.1%; width: 7.55%; }
.sample-tshirt-back { left: 66.1%; top: 18.55%; width: 12.8%; }
.sample-hoodie-front { left: 27.95%; top: 31.85%; width: 7.8%; }
.sample-hoodie-back { left: 67.4%; top: 38.75%; width: 14.6%; }
.sample-tshirt-front .static-badge-heading,
.sample-hoodie-front .static-badge-heading { font-size: 0.72cqw; }
.sample-tshirt-back .static-badge-heading { font-size: 1.25cqw; }
.sample-hoodie-back .static-badge-heading { font-size: 1.35cqw; }
.sample-tshirt-front .sample-badge-body,
.sample-hoodie-front .sample-badge-body { font-size: 0.62cqw; }
.sample-tshirt-back .sample-badge-body { font-size: 1.06cqw; }
.sample-hoodie-back .sample-badge-body { font-size: 1.03cqw; }
.sample-tshirt-front .fan-badge { gap: 2%; padding: 3% 4%; }
.sample-tshirt-front .fan-badge img { max-width: 48%; max-height: 96%; }
.sample-tshirt-front .fan-badge strong { font-size: 0.9cqw; }
.sample-tshirt-back .fan-badge { gap: 2%; padding: 3% 4%; }
.sample-tshirt-back .fan-badge img { max-width: 55%; max-height: 96%; transform: translateX(3%); }
.sample-tshirt-back .fan-badge strong { font-size: 1.35cqw; }
.sample-hoodie-front .owner-badge img { max-width: 38%; }
.sample-tshirt-front .static-badge-heading[lang="fr"],
.sample-hoodie-front .static-badge-heading[lang="fr"] { font-size: 0.54cqw; letter-spacing: -0.02em; }
.sample-tshirt-back .static-badge-heading[lang="fr"] { font-size: 0.94cqw; letter-spacing: -0.02em; }
.sample-hoodie-back .static-badge-heading[lang="fr"] { font-size: 1cqw; letter-spacing: -0.02em; }
.sample-tshirt-front .static-badge-heading[lang="ar"],
.sample-hoodie-front .static-badge-heading[lang="ar"] { font: 700 0.55cqw/1 "DM Sans", Arial, sans-serif; }
.sample-tshirt-back .static-badge-heading[lang="ar"] { font: 700 0.96cqw/1 "DM Sans", Arial, sans-serif; }
.sample-hoodie-back .static-badge-heading[lang="ar"] { font: 700 1.02cqw/1 "DM Sans", Arial, sans-serif; }

@media (max-width: 760px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .language-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    margin: 0;
  }
  .site-header nav {
    grid-column: 2;
    grid-row: 1;
    gap: clamp(8px, 2.6vw, 14px);
    font-size: clamp(0.7rem, 2.7vw, 0.82rem);
  }
}

/* Keep the French mobile header on the same row as the English header. */
@media (max-width: 760px) {
  html[lang="es"] .site-header {
    column-gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  html[lang="es"] .site-header nav {
    white-space: nowrap;
    gap: clamp(3px, 1.4vw, 8px);
    font-size: clamp(0.57rem, 2.85vw, 0.78rem);
  }
}
@media (max-width: 760px) {
  html[lang="fr"] .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  html[lang="fr"] .site-header .brand {
    white-space: nowrap;
    font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  }
  html[lang="fr"] .site-header nav {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    gap: clamp(3px, 1.4vw, 8px);
    font-size: clamp(0.57rem, 2.85vw, 0.78rem);
  }
  html[lang="fr"] .site-header .language-picker {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html[lang="fr"] #original {
    scroll-margin-top: calc(var(--mobile-header-height, 120px) + 12px);
    padding-top: 58px;
  }
}

@media (max-width: 560px) {
  html[lang="fr"] .site-header .brand {
    font-size: 2rem;
  }
}

@media (max-width: 430px) {
  .language-picker {
    justify-content: space-between;
    width: 100%;
  }
  .language-picker span { font-size: 0.72rem; }
  .language-picker select { min-width: 122px; }
}

/* iPhone flow: choose, see the badge, customize, view apparel, size, review. */
@media (max-width: 760px) {
  #customize {
    scroll-margin-top: calc(var(--mobile-header-height, 120px) + 20px);
  }
  #about {
    scroll-margin-top: calc(var(--mobile-header-height, 120px) + 20px);
  }
}
@media (max-width: 700px) {
  .studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .builder,
  .controls {
    display: contents;
  }
  .option-grid {
    order: 1;
    margin: 0;
    padding: 16px 20px 8px;
    background: #fff;
  }
  .graphic-controls {
    order: 2;
    padding: 12px 20px 22px;
    background: #fff;
  }
  .preview-panel {
    display: contents;
  }
  .preview-heading {
    order: 3;
    margin: 0;
    padding: 22px 20px 0;
    border-top: 1px solid var(--ink);
    background: var(--paper);
  }
  .drag-tools {
    order: 4;
    margin: 8px 20px 0;
    padding: 6px 8px;
    background: #fff;
  }
  .primary-design-wrap {
    order: 5;
    margin: 0;
    padding: 10px 12px 22px;
    background: var(--paper);
  }
  .customization-heading {
    order: 7;
    display: grid;
    gap: 4px;
    padding: 22px 20px 0;
    border-top: 1px solid #cbc7be;
    background: #fff;
  }
  .customization-heading strong {
    font: 900 1.55rem/1 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
  }
  .customization-heading span {
    color: #555;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .field-grid {
    order: 8;
    margin: 0;
    padding: 15px 20px 24px;
    background: #fff;
  }
  .text-control-section {
    grid-template-columns: 1fr;
    padding: 15px;
  }
  .text-control-section h3,
  .text-control-section .text-helper {
    grid-column: auto;
  }
  .apparel-example {
    order: 9;
    margin: 0;
    padding: 22px 20px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: var(--paper);
  }
  .quantity-section {
    order: 10;
    margin: 0;
    padding: 22px 20px;
    border-width: 0 0 1px;
    background: #f7f5ef;
  }
  .review-cta {
    order: 11;
    margin: 0;
    padding: 22px 20px;
    border-top: 0;
    background: #fff;
  }
}

#new-design-confirm { height: auto; max-width: 34rem; }
.new-design-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.new-design-actions button { padding: .75rem 1rem; border: 2px solid #111; background: white; color: #111; font: inherit; cursor: pointer; }
.new-design-actions button[value="reset"] { background: #111; color: white; }

.photo-tools{padding:16px;border:1px solid #ccc;border-radius:12px;margin-bottom:20px}.photo-tools p{font-size:14px;line-height:1.5}.photo-tools label{display:grid;gap:8px;margin:12px 0}.photo-tools button{padding:10px 14px;min-height:44px;margin:6px 4px 6px 0;border:1px solid #bbb;border-radius:8px;background:#fff;color:#111}.photo-tools button:disabled{opacity:.5}.photo-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photo-comparison figure{margin:0;min-width:0}.photo-comparison img{width:100%;height:150px;object-fit:contain;background:#eee}.photo-comparison figcaption{font-size:14px;text-align:center}.photo-tools input{max-width:100%;min-height:44px}

#ai-demo-panel{padding:16px;border:1px solid #ccc;border-radius:12px;margin-bottom:16px}#ai-demo-panel h2{font-size:20px}#ai-demo-panel textarea{display:block;width:100%;min-height:80px;font-size:16px;margin:8px 0}#ai-demo-panel button{min-height:44px;padding:10px;border-radius:8px}#ai-demo-panel[hidden]{display:none}

#ai-badge-slot .primary-design-wrap{width:100%;margin:16px 0}#ai-badge-slot{min-width:0}

#ai-editor-window{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:0;background:#fff;color:#111;overflow:auto}#ai-editor-window::backdrop{background:#fff}.ai-window-banner{position:sticky;top:0;background:#fff;border-bottom:6px solid #111;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;z-index:5}.ai-window-banner strong{font-size:24px;font-weight:900}.ai-window-banner strong span{color:#c71920}#ai-window-content,.ai-window-actions{max-width:720px;margin:auto;padding:16px}#ai-window-content #ai-demo-panel{border:0;padding:0}#ai-window-content .photo-tools{margin-top:16px}#ai-window-content .text-control-section{padding:12px 0}#ai-window-content select,#ai-window-content input:not([type=file]),#ai-window-content textarea{font-size:16px;max-width:100%;min-height:44px}#ai-editor-window button{min-height:44px;padding:10px 16px;border:1px solid #aaa;border-radius:8px;background:white;color:#111}.ai-window-actions{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:32px}#ai-accept{background:#111!important;color:#fff!important}#ai-editor-window.reviewing .ai-edit-only{display:none!important}#ai-editor-window [hidden]{display:none!important}#ai-window-content .primary-badge{max-width:100%}

.ai-enhance-section {grid-column:1/-1;border:1px solid #aaa;padding:1rem;min-width:0;}
.ai-enhance-section h3 {font-size:1.15rem;margin:0 0 .6rem;}
.ai-enhance-section p {font-size:1rem;line-height:1.45;margin:.65rem 0;}
.ai-enhance-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
.ai-enhance-actions button {min-height:48px;padding:.65rem;border:2px solid #111;background:#111;color:white;font:inherit;font-weight:700;}
.ai-enhance-actions button:disabled {background:#eee;color:#666;border-color:#bbb;cursor:not-allowed;}
.ai-enhance-actions button:focus-visible {outline:3px solid #ed1c24;outline-offset:3px;}
.ai-enhance-notice {color:#555;}

.design-completion {margin:1.25rem 0;}
.design-completion > button, #keep-design, #keep-editing {font:inherit;font-weight:700;min-height:48px;padding:.75rem 1rem;border:2px solid #111;background:white;color:#111;cursor:pointer;}
#done-designing, #keep-design {width:100%;background:#111;color:white;margin-bottom:.75rem;}
#done-designing:disabled {background:#eee;color:#666;border-color:#bbb;cursor:not-allowed;}
#ai-enhance-section[hidden] {display:none!important;}
#keep-editing {margin-top:.75rem;}

@media (max-width:700px) {
  .preview-panel > .design-completion {order:6;margin:0;padding:0 20px 20px;background:var(--paper);min-width:0;}
}

.option-grid {scroll-margin-top:calc(var(--mobile-header-height, 120px) + 20px);}

.drag-tools {gap:8px;padding:8px;}
.movement-copy {font-size:.875rem;line-height:1.25;min-width:0;}
.movement-copy > span {display:block;}
.drag-tools #reset-layout {min-height:44px;padding:4px 8px;font-size:.875rem;white-space:normal;max-width:9rem;line-height:1.15;flex-shrink:0;}
@media(max-width:700px) {.drag-tools {padding:8px;margin-top:6px;}}

.logo-upload-controls { margin-top: 12px; }
.logo-upload-controls .text-helper { margin: 8px 0; }
.logo-upload-controls button { margin-right: 8px; margin-bottom: 12px; }

/* Matching car and flag picker format. */
.graphic-choice[data-category="cars"], .graphic-choice[data-category="heritage"] { flex-direction: column; gap: 8px; min-height: 116px; text-align: center; }
.graphic-choice[data-category="cars"] img, .graphic-choice[data-category="heritage"] img { width: 84px; height: 60px; object-fit: contain; flex: 0 0 auto; }
.graphic-choice[data-category="cars"] span, .graphic-choice[data-category="heritage"] span { line-height: 1.3; overflow-wrap: anywhere; }
#car-origin { width: 100%; font: inherit; padding: 12px; margin-bottom: 18px; border: 1px solid #777; border-radius: 6px; background: white; }

.sports-controls{margin:12px 0;display:grid;gap:8px}.sports-controls[hidden],.sports-controls [hidden]{display:none!important}.sports-controls select,.sports-controls input{width:100%;min-height:44px;padding:10px;border:1px solid #aaa;border-radius:8px;background:#fff;color:#111;font:inherit}.sports-controls label{display:block;margin:8px 0 4px}.college-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#college-controls>strong{display:block;margin-top:12px}@media(max-width:480px){.college-filter-grid{grid-template-columns:1fr}}

.college-school{padding:12px;border:1px solid #ccc;border-radius:8px;margin:8px 0;background:#fff;color:#111}.college-school summary{font-weight:600;cursor:pointer;min-height:28px}.college-school p{font-size:14px;margin:8px 0}#college-more{min-height:44px;padding:10px 18px;border-radius:8px;border:1px solid #111;background:#fff;font:inherit}

/* Keep Safari's moving badge contents outside a filtered paint surface. */
.primary-badge {
  filter: none;
  box-shadow: 0 18px 20px rgba(0, 0, 0, 0.2);
}
.primary-badge .tag-body,
.apparel-badge .tag-body {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.primary-badge .badge-piece,
.apparel-badge .badge-piece {
  will-change: transform, left, top;
  backface-visibility: hidden;
}

.category:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
#military-info p { margin: 8px 0; line-height: 1.5; }
/* Red footer with a separate full-width copyright strip. */
footer { background: var(--red); color: #fff; padding: 25px clamp(20px, 5vw, 72px) 0; }
footer > strong { color: #fff; white-space: nowrap; }
.footer-copyright-row {
  background: var(--ink);
  width: calc(100% + 2 * clamp(20px, 5vw, 72px));
  flex-basis: auto;
  margin: 0 calc(-1 * clamp(20px, 5vw, 72px));
  padding: 18px clamp(20px, 5vw, 72px);
  text-align: center;
}
.footer-copyright { background: transparent; color: #fff; padding: 0; border-radius: 0; }

/* Compact closing section and reserve the red corner for the cart. */
.about{gap:24px;padding-bottom:24px}
footer{position:relative}
footer > strong{min-height:44px;padding-right:150px}

/* Keep the closing notice together in two compact lines. */
footer{gap:12px;padding-top:16px}
.footer-concept{width:100%;margin:0;text-transform:none;letter-spacing:0;line-height:1.5}
.footer-concept-first,.footer-concept-second{display:block;white-space:nowrap}
.footer-concept-first{padding-right:110px;font-size:clamp(10px,2.5vw,14px)}
.footer-concept-first strong{font-size:clamp(12px,3vw,16px);font-weight:800}
.footer-concept-second{font-size:clamp(10px,2.7vw,14px)}
footer #reference-cart-open{font-size:12px;padding:8px 10px;letter-spacing:0;text-transform:none}

.licensing-demo-notice{margin:0;padding:10px 20px;text-align:center;background:#f5f1e9;color:#222;font-size:13px;line-height:1.4}

/* Balance the closing introduction around the larger foundation logo. */
.about > div { min-width: 0; }
.about > div > p { font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.12; }
.about-foundation-line { gap: clamp(12px, 2vw, 24px); margin-top: 20px; }
.about-foundation-line .foundation-logo-frame { flex-basis: clamp(140px, 21vw, 240px); }
.about-foundation-line small { min-width: 0; font-size: clamp(11px, 1.2vw, 16px); line-height: 1.5; }
.about-foundation-line small span { display: block; }
@media (max-width: 620px) {
  .about > div > p { font-size: clamp(1.4rem, 6vw, 2rem); }
  .about-foundation-line .foundation-logo-frame { flex-basis: 40%; }
  .about-foundation-line { gap: 12px; }
  .about-foundation-line small { flex: 1; font-size: clamp(9px, 2.6vw, 14px); }
}

/* About: bring the introduction up and put the mission below the original logo. */
#about { padding-top: 26px; padding-bottom: 30px; gap: 26px; }
#about .about-foundation-line { display: block; margin-top: 20px; }
#about .about-foundation-line .foundation-logo-frame { width: clamp(160px, 22vw, 220px); aspect-ratio: 2.8; }
#about .about-mission { margin-top: 14px; font-size: 1rem; line-height: 1.55; }
@media (max-width: 620px) {
  #about { padding-top: 22px; gap: 22px; }
  #about .about-foundation-line .foundation-logo-frame { width: clamp(160px, 42vw, 200px); }
  #about .about-mission { font-size: 0.9rem; }
}

/* Foundation attribution sits beside and vertically centered on the logo. */
#about .about-foundation-line { display: flex; align-items: center; gap: 18px; }
#about .about-foundation-line .foundation-logo-frame { flex: 0 0 clamp(160px, 22vw, 220px); }
#about .about-presented { margin: 0; color: #fff; font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
@media (max-width: 620px) {
  #about .about-foundation-line { gap: 12px; }
  #about .about-foundation-line .foundation-logo-frame { flex-basis: clamp(160px, 42vw, 200px); }
  #about .about-presented { font-size: 0.8rem; }
}

#about .about-presented { text-align: center; }
#about .about-presented span { display: block; }

/* Hide the source image's outer edge and match its black background. */
#about { background: #000; }
#about .foundation-logo-frame { border: 0; outline: 0; box-shadow: none; background: #000; }
#about .foundation-logo-frame img { left: -1px; width: calc(100% + 2px); max-width: none; }

/* Centered, readable About typography with the approved logo row preserved. */
#about { display: flex; flex-direction: column; align-items: center; padding: 28px clamp(20px, 7vw, 100px) 34px; gap: 24px; }
#about > div { width: 100%; max-width: 780px; }
#about > div > p { text-align: center; text-transform: none; font-family: Arial, sans-serif; font-size: clamp(1.65rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; margin: 0 auto 24px; }
#about .about-foundation-line { justify-content: center; }
#about .about-mission { text-align: center; max-width: 660px; margin: 22px auto 0; font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.65; color: #e3e3e3; }
#about > a { align-self: center; font-size: 1rem; }

#about > div > p { font-family: "Kaushan Script", "Brush Script MT", cursive; font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: clamp(1.4rem, 5.8vw, 2.6rem); line-height: 1.4; }
#about > div > p > span { display: block; }

#about .mission-and { color: #53e5f3; text-transform: lowercase; font-size: 0.65em; font-style: normal; }

#about > div > p > span:nth-child(2) { line-height: 1; padding: 3px 0 5px; }
#about .mission-and { font-family: Arial, sans-serif; font-weight: 600; font-size: 0.7em; line-height: 1; color: #53e5f3; }

#about > div > p > span:nth-child(2) { display: flex; align-items: center; justify-content: center; padding: 6px 0; line-height: 1; }
#about .mission-and { font-size: 0.85em; }

#about .mission-and { text-transform: none; }

/* Match the mobile mockup gap to the section top spacing. */
@media (max-width: 560px) {
  #original { row-gap: 28px; }
}

/* Approved supporting typography; preserve logo and badge artwork fonts. */
.example-heading, .example-heading strong, .eyebrow,
.quantity-section legend, .quantity-section > p,
.customization-heading, .original h2.apparel-headline,
button, .view-larger, .review-card h2, .review-card h3 {
  font-family: "DM Sans", Arial, sans-serif;
}
.example-heading strong, .quantity-section legend { font-weight: 700; line-height: 1.3; }
.original h2.apparel-headline { font-weight: 700; -webkit-text-stroke: 0; letter-spacing: 0; white-space: normal; }
.quantity-section > p { font-weight: 400; }
/* A dedicated always-available cart bar, with space at the page end. */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
#reference-cart-open.reference-cart {
  position: fixed !important; inset: auto 0 0 0 !important;
  width: 100%; min-height: 64px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  margin: 0; border-radius: 0; border: 0; border-top: 1px solid #777;
  background: #111; color: #fff; box-shadow: none;
  font-family: "DM Sans", Arial, sans-serif; font-size: 16px;
  font-weight: 700; text-align: center; z-index: 25;
}
@media (max-width: 560px) {
  .apparel-example { padding-top: 20px; }
  .apparel-example .garment-stage { min-height: 270px; padding: 8px 0; }
  .quantity-section { margin-top: 20px; padding: 16px; }
  #original { padding-bottom: 36px; row-gap: 28px; }
  #about { gap: 20px; padding-top: 24px; padding-bottom: 28px; }
  #about .about-mission { margin-top: 16px; }
  .footer-concept-first, footer > strong { padding-right: 0; }
}

/* Apparel filtering stays on garment images, never on badge layers. */
.garment .garment-photo,
.garment.white .garment-photo { filter: var(--apparel-filter, none); }
.original .static-mockup > img,
.original.white-samples .static-mockup > img,
.sample-crop .static-mockup > img,
.sample-crop.white-samples .static-mockup > img {
  filter: var(--apparel-filter, none) drop-shadow(0 16px 14px rgba(0,0,0,.22));
}

/* Keep both apparel controls aligned as their headings grow. */
.field-grid .apparel-option-control { min-width: 0; display: grid; grid-template-rows: auto 45px; align-content: start; }
.field-grid .apparel-option-title { display: block; min-height: 1.2rem; }
.field-grid .apparel-option-control select { min-width: 0; margin-top: 6px; }

/* A visible frame when the white bands meet the white badge body. */
.design-mark.white-badge { border: 2px solid #777777; }

/* Separate the white header from the editable white design area. */
.design-mark.white-badge .tag-header { box-shadow: inset 0 -2px 0 #777777; }

/* Match the colored badge bottom strip while keeping the white header. */
.design-mark.white-badge::after { background: #777777; }

/* Compact completion choices with descriptions beside the relevant action. */
#ai-enhance-section { padding: 20px; background: #f8f6f0; border-radius: 8px; }
#ai-enhance-section h3 { font: 900 1.55rem/1.15 "Barlow Condensed", sans-serif; margin: 0 0 8px; }
#ai-enhance-section .completion-intro { margin: 0 0 18px; font-size: .95rem; }
#ai-enhance-section #keep-design { margin-bottom: 0; }
#ai-enhance-section .completion-keep p { margin: 7px 0 18px; font-size: .85rem; color: #555; }
#ai-enhance-section .completion-ai-label { font-size: .75rem; letter-spacing: .08em; margin: 0 0 8px; }
#ai-enhance-section .completion-choice { min-width: 0; padding: 12px; border: 1px solid #d0cdc6; background: #fff; border-radius: 6px; }
#ai-enhance-section .completion-choice button { width: 100%; background: #dedede; color: #111; border: 1px solid #777; font-size: .92rem; }
#ai-enhance-section .completion-choice p { margin: 8px 0 0; font-size: .85rem; line-height: 1.4; }
#ai-enhance-section .ai-enhance-notice { font-size: .8rem; margin: 12px 0 16px; line-height: 1.4; }
#ai-enhance-section .completion-back { border-top: 1px solid #d0cdc6; padding-top: 14px; }
#ai-enhance-section #keep-editing { margin: 0; width: 100%; }
#ai-enhance-section .completion-back p { font-size: .8rem; margin: 7px 0 0; color: #555; }
@media(max-width:360px) { #ai-enhance-section .ai-enhance-actions { grid-template-columns: 1fr; } }

/* Keep the paired AI action labels on one line on phones. */
#ai-enhance-section .completion-choice { padding: 8px; container-type: inline-size; }
#ai-enhance-section .completion-choice button { font-size: clamp(.7rem, 9cqw, .85rem); padding: .65rem 3px; white-space: nowrap; letter-spacing: 0; }

/* Persistent feedback for the selected demo AI action. */
#ai-enhance-section .completion-choice button[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }

/* Short demo feedback uses a compact response box. */
#ai-enhance-section #ai-enhance-status { padding: 8px 10px; margin: 8px 0; font-size: .85rem; line-height: 1.4; }

.preview-panel { scroll-margin-top:calc(var(--mobile-header-height, 120px) + 20px); }

.preview-heading h2 { scroll-margin-top:calc(var(--mobile-header-height, 120px) + 20px); }
#ai-enhance-section #original-design-choice { text-align:center; }
#ai-enhance-section #use-original-design { display:block; margin:0 auto; max-width:100%; min-height:48px; padding:.65rem 1rem; border:2px solid #777; border-radius:8px; background:#dedede; color:#111; font:inherit; font-weight:700; box-shadow:3px 3px 0 #050505; cursor:pointer; }
#ai-enhance-section #use-original-design:focus-visible { outline:3px solid #ed1c24; outline-offset:4px; }

/* Font choices show their actual lettering, including in iPhone menus. */
.font-picker { position: relative; width: 100%; }
.font-picker-trigger { width: 100%; text-align: left; background: white; color: #111; padding: 10px 12px; border: 2px solid #111; border-radius: 5px; font-size: 18px; line-height: 1.4; text-transform: none; letter-spacing: normal; }
.font-picker-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: white; border: 2px solid #111; border-radius: 5px; box-shadow: 3px 3px 0 #111; }
.font-picker-list[hidden] { display: none; }
.font-picker-option { display: block; width: 100%; padding: 12px; text-align: left; color: #111; background: white; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; font-size: 20px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal; }
.font-picker-option[aria-selected="true"] { background: #e7f5fa; }
.font-picker-option:hover, .font-picker-option:focus-visible { background: #eee; outline: 2px solid #111; outline-offset: -3px; }

.emoji-choice { flex-direction:column; gap:7px; text-align:center; min-height:150px; }
.emoji-choice img { width:82px; height:82px; }
.emoji-choice small { font-weight:400; font-size:0.75rem; line-height:1.3; }

#military-info label {display:block;font-weight:700;margin-bottom:8px;}
#military-branch {width:100%;font:inherit;padding:12px;border:1px solid #999;border-radius:8px;background:#fff;color:#111;}
.military-choice img {object-fit:contain;max-height:140px;}

.graphic-picker.military-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.military-choice {flex-direction:column;text-align:center;min-height:130px;gap:8px;}
.military-choice img {width:90px;height:90px;object-fit:contain;}
.military-choice span {line-height:1.3;}

/* Compact balloon controls share the same visual style. */
.balloon-settings { padding:12px; border:1px solid #b8aa96; border-radius:10px; margin-bottom:12px; background:#f1e8da; color:#202020; }
.balloon-settings-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.balloon-settings-preview { width:88px; height:88px; object-fit:contain; flex:0 0 88px; }
.balloon-settings-fields { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.balloon-settings-fields label { display:flex; align-items:center; gap:6px; }
.balloon-settings p:empty { display:none; }

/* Fit every graphic inside the white body before constraining movement. */
.primary-badge .tag-body > img.graphic-preview,
.apparel-badge .tag-body > img.graphic-preview {
  max-width: 94%;
  max-height: 94%;
  object-fit: contain;
}

.badge-color-fields { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* White badge: approved inset header frame and matching black footer. */
.design-mark.white-badge { border-color: #000; }
.design-mark.white-badge .tag-header {
  position: relative;
  box-shadow: none;
}
.design-mark.white-badge .tag-header::before {
  content: "";
  position: absolute;
  inset: 0.55cqw;
  border: 1.5cqw solid #000;
  border-radius: 4.45cqw 4.45cqw 0 0;
  pointer-events: none;
}
.design-mark.white-badge::after {
  background: #000;
  flex: 0 0 1.5cqw;
  height: 1.5cqw;
}

/* Uploaded images remain pending until the customer approves the preview. */
.logo-review { width: min(900px, calc(100% - 24px)); max-height: 90dvh; overflow: auto; }
.logo-review .review-card { width: 100%; box-sizing: border-box; }
.logo-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo-review-heading button { min-width: 44px; min-height: 44px; }
.logo-review-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logo-review-images figure { margin: 0; min-width: 0; }
.logo-review-images figcaption { margin-bottom: 8px; font-weight: 700; }
.logo-review-images img { display: block; width: 100%; height: 220px; object-fit: contain; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 / 20px 20px; border: 1px solid #aaa; box-sizing: border-box; }
.logo-review .review-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.logo-review .review-actions button { min-height: 44px; }
.logo-review button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 520px) { .logo-review-images { grid-template-columns: 1fr; } .logo-review-images img { height: 160px; } }

/* All category landing samples share one proportional card layout. */
#graphic-picker.featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#graphic-picker.featured-grid > .graphic-choice { flex-direction:column; min-width:0; min-height:140px; padding:12px; gap:10px; text-align:center; }
#graphic-picker.featured-grid > .graphic-choice img { width:100%; max-width:140px; height:92px; max-height:92px; object-fit:contain; object-position:center; flex:0 0 auto; }
#graphic-picker.featured-grid > .graphic-choice span { line-height:1.3; overflow-wrap:anywhere; }
.logo-upload-controls { margin-top:12px; }
/* Compact samples: fit Lifestyle into the same boxes as every category. */
#graphic-picker.featured-grid > .graphic-choice { box-sizing:border-box; height:140px; min-height:140px; max-height:140px; padding:8px; gap:6px; }
#graphic-picker.featured-grid > .graphic-choice img { width:100%; max-width:100px; height:72px; max-height:72px; flex:0 0 72px; object-fit:contain; }
#graphic-picker.featured-grid > .graphic-choice span { display:flex; align-items:center; justify-content:center; width:100%; min-height:0; font-size:.78rem; line-height:1.2; }

.primary-design-wrap { scroll-margin-top:calc(var(--mobile-header-height, 120px) + 12px); }

.primary-badge { scroll-margin-top:calc(var(--mobile-header-height, 120px) + 6px); }

/* Unselected category buttons use the approved lighter yellow. */
.category-tabs .category {
  background: #FFE680;
  color: #111;
  border-color: #555;
}
.see-all-graphics[aria-controls="graphics-dialog"],
.see-all-graphics[aria-controls="graphics-dialog"]:hover,
.see-all-graphics[aria-controls="graphics-dialog"]:focus-visible {
  background: #F1F7FD;
  color: #111;
}
.see-all-graphics[aria-controls="graphics-dialog"]:active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Explicit tap feedback also works on touch browsers without CSS :active. */
.see-all-graphics[aria-controls="graphics-dialog"].is-pressing {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Keep the selected category red until another category is selected. */
.category-tabs .category.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.graphic-choice.city-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:12px}
.graphic-choice.city-choice[hidden]{display:none}
.city-choice img{width:100%;height:100px;object-fit:contain}
.city-choice span{display:block;white-space:normal;text-align:center;font-weight:600;line-height:1.3}

.graphic-choice[data-lifestyle="flags"]{flex-direction:column;gap:8px;min-height:116px;text-align:center}
.graphic-choice[data-lifestyle="flags"] img{width:84px;height:60px;object-fit:contain;flex:0 0 auto}

/* Background-free Foundation logo; preserve its existing frame size. */
#about .foundation-logo-frame { background: transparent; }
#about .foundation-logo-frame img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

/* Shared product editor: keep the original badge editor as the default. */
.product-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:14px 0 12px}
.product-tab{min-height:54px;padding:8px 4px;border:2px solid #536658;border-radius:6px;background:#cdeac8;color:#142c23;font:inherit;font-size:clamp(.65rem,2.4vw,.9rem);cursor:pointer;overflow-wrap:normal}
.product-tab[aria-selected="true"]{background:#1746a2;border-color:#1746a2;color:#fff}
.product-tab:focus-visible{outline:3px solid #111;outline-offset:3px}
.product-specific-options{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}.product-specific-options label{flex:1;min-width:180px;font-size:.88rem;font-weight:600}.product-specific-options select{display:block;width:100%;padding:10px;margin-top:5px;background:#fff;border:1px solid #718292;border-radius:4px}
.product-specific-options [hidden],#surface-color-control[hidden],#surface-upload[hidden],.badge-color-fields[hidden],.apparel-option-control[hidden],.quantity-section[hidden],#original[hidden],.product-editor-photo[hidden],.product-shape[hidden]{display:none!important}
.surface-upload{padding:12px;border:1px solid #687d72;border-radius:5px;background:#e8f4e5;color:#142c23;font:inherit;min-height:44px;cursor:pointer}.product-print-note{font:400 .8rem/1.5 Arial,sans-serif;color:#36475a;margin:12px 0 20px}
.design-mark.primary-badge.product-surface{display:block;position:relative;left:auto;top:auto;aspect-ratio:1;width:100%;height:auto;min-height:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible;container-type:inline-size}
.product-editor-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.product-surface>.tag-header,.product-artwork>.tag-header,.product-surface::after,.product-artwork::after{display:none!important}
.product-surface>.tag-body{position:absolute!important;left:30%!important;top:30%!important;width:40%!important;height:42%!important;min-height:0!important;flex:none!important;container-type:inline-size;background:transparent!important;border:1px dashed #7c9db7!important;border-radius:0;padding:0!important;transform:none!important;box-shadow:none!important;overflow:visible!important}
#garment .apparel-badge.product-artwork{left:30%!important;top:30%!important;width:40%!important;height:42%!important;aspect-ratio:auto!important;transform:none!important;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
.product-artwork>.tag-body{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;background:transparent!important;container-type:inline-size;transform:none!important;border:0!important}
#garment.custom-product-preview{aspect-ratio:1!important;min-height:0!important;height:auto!important;position:relative;background:transparent!important}
.product-shape{position:absolute;pointer-events:none;box-sizing:border-box}
[data-surface="frame"]>.product-shape{left:9%;top:14%;width:82%;height:72%;background:var(--surface-color,#fff);border:clamp(12px,4vw,24px) solid #262626;box-shadow:inset 0 0 0 4px #f1e9dc,0 12px 18px #0003}
[data-frame-style="white"][data-surface="frame"]>.product-shape{border-color:#f8f8f3;outline:1px solid #a9a9a3}
[data-frame-style="wood"][data-surface="frame"]>.product-shape{border-color:#ab7847;background-clip:padding-box}
.product-surface[data-surface="frame"]>.tag-body{left:19%!important;top:24%!important;width:62%!important;height:52%!important}
#garment[data-surface="frame"] .product-artwork{left:19%!important;top:24%!important;width:62%!important;height:52%!important}
[data-surface="mug"]>.product-shape{left:17%;top:24%;width:58%;height:54%;background:var(--surface-color,#fff);border:2px solid #aaa;border-radius:7% 7% 23% 23%;box-shadow:inset 15px 0 18px #fff5,inset -14px 0 18px #0003,0 12px 15px #0002}
[data-surface="mug"]>.product-shape::after{content:"";position:absolute;right:-29%;top:12%;width:30%;height:50%;border:clamp(7px,2vw,13px) solid var(--surface-color,#fff);border-left:0;border-radius:0 50% 50% 0;filter:drop-shadow(1px 1px 1px #777);z-index:-1}
.product-surface[data-surface="mug"]>.tag-body{left:26%!important;top:33%!important;width:40%!important;height:33%!important}
#garment[data-surface="mug"] .product-artwork{left:26%!important;top:33%!important;width:40%!important;height:33%!important}
[data-surface="tumbler"]>.product-shape{left:28%;top:14%;width:44%;height:72%;background:var(--surface-color,#fff);border-radius:6% 6% 24% 24%;border:2px solid #aaa;box-shadow:inset 12px 0 16px #fff4,inset -12px 0 16px #0003,0 10px 12px #0002;clip-path:polygon(0 0,100% 0,87% 100%,13% 100%)}
[data-surface="tumbler"]>.product-shape::before{content:"";position:absolute;top:0;left:0;right:0;height:8%;background:#606970;border-bottom:3px solid #a9b2b9}
.product-surface[data-surface="tumbler"]>.tag-body{left:35%!important;top:32%!important;width:30%!important;height:39%!important}
#garment[data-surface="tumbler"] .product-artwork{left:35%!important;top:32%!important;width:30%!important;height:39%!important}
.product-surface.framed-artwork>.tag-body,.product-artwork.framed-artwork>.tag-body{border:8px solid #292929!important;background:#fff!important;box-sizing:border-box}
[data-frame-style="wood"].framed-artwork>.tag-body,[data-frame-style="wood"] .framed-artwork>.tag-body{border-color:#ab7847!important}
[data-frame-style="white"].framed-artwork>.tag-body,[data-frame-style="white"] .framed-artwork>.tag-body{border-color:#f2efe9!important}
@media(max-width:500px){.product-tab{min-height:58px}.product-specific-options label{min-width:100%}.product-tabs{gap:4px}.product-print-note{font-size:.75rem}}

.legacy-garment-color[hidden]{display:none!important}
body[data-surface-product="frame"] .cart-entry-actions,body[data-surface-product="cup"] .cart-entry-actions{display:none!important}

/* Product choices follow the category row's measured dimensions. */
.product-tabs{width:min(100%,var(--category-row-width,100%));gap:4px;align-self:flex-start}
.product-tabs .product-tab{box-sizing:border-box;height:var(--category-button-height,52px);min-height:0;max-height:none;padding:8px 4px;border-width:2px;border-radius:6px;font-weight:400;font-size:clamp(.7rem,2.7vw,.875rem);line-height:normal}

/* Keep product controls in the design panel in the mobile ordered layout. */
.category-tabs .category:not(.active){background:#cdeac8;color:#142c23;border-color:#536658}
.product-controls-row{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:700px){
 .preview-panel>.product-controls-row{order:5;padding:10px 20px 0;background:var(--paper)}
 .preview-panel>.primary-design-wrap{order:6}
 .product-controls-row .product-tabs{margin:0 0 12px}
}
.product-controls-row .product-tabs{box-sizing:border-box;margin-left:0;margin-right:0;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;justify-content:normal}
.product-controls-row .product-tab{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;margin:0;position:static;transform:none;text-align:center;line-height:1.2;overflow-wrap:normal}
/* Upload is a consistent alternative to the category's sample graphics. */
.graphic-controls>#surface-upload{display:block;width:100%;margin:14px 0 0;min-height:48px;font-weight:600}
.large-panel-launch{margin:14px 0}.large-panel-launch button{width:100%;min-height:48px;padding:12px;border:2px solid #1746a2;border-radius:5px;background:#e6eefc;color:#143e78;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:700px){.preview-panel>.large-panel-launch{order:6;margin:0;padding:0 20px 14px;background:var(--paper)}}
.large-artwork-dialog{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;background:#f3f5f8;color:#153456;overflow:hidden}
.large-artwork-dialog[open]{display:flex;flex-direction:column}.large-artwork-dialog::backdrop{background:#111b}
.large-panel-header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 16px;background:white;border-bottom:1px solid #b4c4d5;flex-shrink:0}.large-panel-header h2{font:700 1rem/1.3 Arial,sans-serif;margin:0}.large-panel-header button{min-height:44px;padding:8px 12px;background:#1746a2;color:white;border:0;border-radius:5px;font:600 .9rem Arial,sans-serif;cursor:pointer}
.large-panel-help{font:400 .78rem/1.4 Arial,sans-serif;margin:8px 16px;flex-shrink:0}
.large-canvas{display:flex;align-items:center;justify-content:center;flex:0 0 44dvh;min-height:150px;padding:10px;box-sizing:border-box;overflow:hidden;background:repeating-conic-gradient(#e5e8ed 0% 25%,#f4f5f7 0% 50%) 50%/20px 20px}
.large-canvas .design-mark.primary-badge{position:relative!important;inset:auto!important;display:block!important;width:min(92vw,calc(40dvh * var(--art-ratio,1)))!important;max-width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:var(--art-ratio,1)!important;box-shadow:none!important;border:1px dashed #637e9b!important;border-radius:0!important;background:var(--art-background,#fff)!important;overflow:visible!important;container-type:inline-size}
.large-canvas .primary-badge>.tag-header,.large-canvas .primary-badge>.product-editor-photo,.large-canvas .primary-badge>.product-shape,.large-canvas .primary-badge::after{display:none!important}
.large-canvas .primary-badge>.tag-body{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;flex:none!important;box-sizing:border-box!important;padding:0!important;transform:none!important;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
.large-controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 18px calc(18px + env(safe-area-inset-bottom));background:white;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.large-controls .text-control-section{grid-column:auto;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px;background:#f4f7fa}
.large-controls label{display:grid;gap:6px;font:500 .85rem/1.3 Arial,sans-serif}.large-controls input:not([type=range]),.large-controls select{width:100%;box-sizing:border-box;min-height:42px;padding:8px;font-size:16px}.large-controls input[type=range]{width:100%}.large-controls #graphic-scale-control{grid-column:1/-1}.large-controls h3{margin:0}.large-controls .text-helper{font-size:.75rem}
@media(max-width:600px){.large-controls{grid-template-columns:1fr}.large-panel-header{gap:8px}.large-panel-header h2{font-size:.86rem}.large-canvas{flex-basis:40dvh}.large-canvas .design-mark.primary-badge{width:min(92vw,calc(36dvh * var(--art-ratio,1)))!important}}

/* Center the garment torso, accounting for whitespace in the source photos. */
.design-mark.primary-badge.product-surface[data-surface="tshirt"],#garment[data-surface="tshirt"]{aspect-ratio:1185/1327!important}
.design-mark.primary-badge.product-surface[data-surface="hoodie"],#garment[data-surface="hoodie"]{aspect-ratio:1172/1342!important}
.apparel-example #garment[data-surface="tshirt"],.apparel-example #garment[data-surface="hoodie"]{transform:none!important;height:auto!important}
.product-editor-photo,#garment[data-surface="tshirt"]>.garment-photo,#garment[data-surface="hoodie"]>.garment-photo{object-fit:contain!important;object-position:center!important;transform:none!important}
[data-surface="tshirt"][data-side="front"]>.product-editor-photo,#garment[data-surface="tshirt"][data-side="front"]>.garment-photo{transform:translateX(-4%)!important}
[data-surface="hoodie"][data-side="front"]>.product-editor-photo,#garment[data-surface="hoodie"][data-side="front"]>.garment-photo{transform:translateX(-2.5%)!important}
[data-surface="hoodie"][data-side="back"]>.product-editor-photo,#garment[data-surface="hoodie"][data-side="back"]>.garment-photo{object-fit:cover!important;object-position:right center!important}
.product-surface[data-surface="hoodie"]>.tag-body{left:30%!important;top:32%!important;width:40%!important;height:25%!important}
#garment[data-surface="hoodie"] .product-artwork{left:30%!important;top:32%!important;width:40%!important;height:25%!important}
[data-surface="mug"]>.product-shape{left:12.5%}
.product-surface[data-surface="mug"]>.tag-body,#garment[data-surface="mug"] .product-artwork{left:21.5%!important}
/* A large editor always displays the flat artwork, independent of product shape. */
.large-canvas .design-mark.primary-badge.product-surface{aspect-ratio:var(--art-ratio,1)!important}
.large-canvas .primary-badge.product-surface>.tag-body{inset:0!important;width:100%!important;height:100%!important}

/* Give the artwork more of the full-screen workspace on phones and desktops. */
.large-canvas{flex-basis:64dvh;padding:6px}
.large-canvas .design-mark.primary-badge{width:min(96vw,calc(60dvh * var(--art-ratio,1)))!important}
.large-controls{flex:1 1 120px;min-height:100px}
@media(max-height:500px){.large-canvas{flex-basis:50dvh}.large-canvas .design-mark.primary-badge{width:min(96vw,calc(46dvh * var(--art-ratio,1)))!important}.large-panel-help{margin:4px 12px}.large-panel-header{padding:6px 12px}}

.ai-artwork>.ai-result-art{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.ai-artwork .badge-piece,.ai-artwork .rotation-handle{visibility:hidden!important}