/* Separate Name / Logo Sheet studio. The RC livery editor intentionally does
 * not load here; this studio controls text, outlines, and stacked layout. */
.woocommerce div.product > .ss-name-sheet-studio,
.woocommerce-page div.product > .ss-name-sheet-studio {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.ss-name-sheet-studio,
.ss-name-sheet-studio * {
  box-sizing: border-box;
}

.ss-name-sheet-studio {
  --ns-ink: #f7f7fb;
  --ns-muted: #c9ccdc;
  --ns-panel: rgba(13, 16, 37, 0.97);
  --ns-soft: rgba(255, 255, 255, 0.05);
  --ns-line: rgba(112, 227, 207, 0.28);
  --ns-accent: #70e3cf;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.6rem);
  margin: clamp(1.5rem, 4vw, 3rem) 0;
  color: var(--ns-ink);
  background:
    radial-gradient(circle at 82% 10%, rgba(163, 28, 255, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(14, 17, 39, 0.98), rgba(29, 23, 61, 0.96));
  border: 1px solid var(--ns-line);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(3, 6, 18, 0.42);
}

.ss-name-sheet-studio button,
.ss-name-sheet-studio input,
.ss-name-sheet-studio select {
  font: inherit;
}

.ss-name-sheet-studio button {
  cursor: pointer;
}

.ss-name-sheet-studio h2,
.ss-name-sheet-studio h3,
.ss-name-sheet-studio p {
  margin-top: 0;
}

.ss-name-sheet-studio h2 {
  margin-bottom: 0.6rem;
  color: var(--ns-ink);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 0.98;
}

.ss-name-sheet-studio h3 {
  margin-bottom: 0.75rem;
  color: var(--ns-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ss-name-sheet-studio__header,
.ss-name-sheet-studio__footer,
.ss-name-sheet-preview-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ss-name-sheet-studio__header {
  padding: 0.25rem 0.25rem 0;
}

.ss-name-sheet-studio__header > div:first-child {
  max-width: 760px;
}

.ss-name-sheet-studio__header p:not(.ss-name-sheet-kicker) {
  margin-bottom: 0;
  color: var(--ns-muted);
  line-height: 1.55;
}

.ss-name-sheet-kicker {
  margin-bottom: 0.45rem;
  color: var(--ns-accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ss-name-sheet-studio__badge {
  padding: 0.55rem 0.75rem;
  color: #071018;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ns-accent);
  border-radius: 999px;
  white-space: nowrap;
}

.ss-name-sheet-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--ns-line);
  border-radius: 999px;
}

.ss-name-sheet-mode-button {
  padding: 0.58rem 0.85rem;
  color: var(--ns-muted);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.ss-name-sheet-mode-button:hover,
.ss-name-sheet-mode-button:focus-visible,
.ss-name-sheet-mode-button.is-active {
  color: #071018;
  background: var(--ns-accent);
}

/* The studio finish selector is the customer-facing control. Keep
 * WooCommerce's real variation selector in the form for price/variation
 * calculation, but visually collapse the duplicate source control after JS
 * connects the two. */
.ss-name-sheet-variation-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.ss-name-sheet-studio__workspace {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(360px, 1.25fr);
  gap: 1rem;
  min-width: 0;
}

.ss-name-sheet-controls,
.ss-name-sheet-preview-panel {
  min-width: 0;
  padding: 1rem;
  background: var(--ns-panel);
  border: 1px solid var(--ns-line);
  border-radius: 16px;
}

.ss-name-sheet-control-section + .ss-name-sheet-control-section {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(112, 227, 207, 0.16);
}

.ss-name-sheet-name-fields {
  display: grid;
  gap: 0.55rem;
}

.ss-name-sheet-name-fields label,
.ss-name-sheet-select,
.ss-name-sheet-color-fields label,
.ss-name-sheet-range {
  display: grid;
  gap: 0.35rem;
}

.ss-name-sheet-name-fields label > span,
.ss-name-sheet-select > span,
.ss-name-sheet-color-fields label > span,
.ss-name-sheet-range > span {
  display: flex;
  justify-content: space-between;
  color: var(--ns-muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ss-name-sheet-name-fields input,
.ss-name-sheet-select select,
.ss-name-sheet-logo-fields select {
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  color: var(--ns-ink) !important;
  background-color: #151238 !important;
  border: 1px solid var(--ns-line);
  border-radius: 9px;
}

.ss-name-sheet-select select,
.ss-name-sheet-logo-fields select {
  color-scheme: dark;
}

.ss-name-sheet-select select option,
.ss-name-sheet-logo-fields select option {
  color: #f7f7fb;
  background-color: #151238;
}

.ss-name-sheet-name-fields input:focus,
.ss-name-sheet-select select:focus,
.ss-name-sheet-logo-fields select:focus,
.ss-name-sheet-range input:focus,
.ss-name-sheet-color-fields input:focus {
  outline: 2px solid var(--ns-accent);
  outline-offset: 2px;
}

.ss-name-sheet-logo-fields {
  display: grid;
  gap: 0.55rem;
}

.ss-name-sheet-logo-fields label {
  display: grid;
  gap: 0.35rem;
}

.ss-name-sheet-logo-fields label > span {
  color: var(--ns-muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ss-name-sheet-logo-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.ss-name-sheet-logo-library__item {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.45rem;
  color: var(--ns-muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(112, 227, 207, 0.16);
  border-radius: 10px;
}

.ss-name-sheet-logo-library__item img {
  display: block;
  width: 100%;
  height: 4.25rem;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
}

.ss-name-sheet-range {
  margin-top: 0.9rem;
}

.ss-name-sheet-range output {
  color: var(--ns-accent);
  font-variant-numeric: tabular-nums;
}

.ss-name-sheet-range input[type="range"] {
  width: 100%;
  accent-color: var(--ns-accent);
}

.ss-name-sheet-color-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.ss-name-sheet-color-fields input[type="color"] {
  width: 100%;
  height: 2.8rem;
  padding: 0.25rem;
  background: var(--ns-soft);
  border: 1px solid var(--ns-line);
  border-radius: 9px;
  cursor: pointer;
}

.ss-name-sheet-help,
.ss-name-sheet-preview-help {
  margin: 0.8rem 0 0;
  color: var(--ns-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.ss-name-sheet-preview-panel {
  display: grid;
  align-content: start;
}

.ss-name-sheet-preview-toolbar {
  align-items: center;
  margin-bottom: 0.8rem;
  color: var(--ns-ink);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-name-sheet-preview-toolbar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ss-name-sheet-preview-dot {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--ns-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(112, 227, 207, 0.12);
}

.ss-name-sheet-text-button {
  padding: 0.35rem 0;
  color: var(--ns-accent);
  font-size: 0.72rem;
  font-weight: 800;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ss-name-sheet-text-button:hover,
.ss-name-sheet-text-button:focus-visible {
  color: var(--ns-ink);
}

.ss-name-sheet-paper {
  display: grid;
  align-content: start;
  min-height: 500px;
  padding: clamp(1.25rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 18% 8%, rgba(112, 227, 207, 0.2), transparent 24%),
    radial-gradient(circle at 86% 28%, rgba(163, 28, 255, 0.28), transparent 34%),
    linear-gradient(145deg, #0d1025 0%, #241052 52%, #0d1d37 100%);
  border: 8px solid rgba(112, 227, 207, 0.54);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.ss-name-sheet-paper__brand,
.ss-name-sheet-paper__footer {
  color: #f7f7fb;
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.ss-name-sheet-paper__brand {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(112, 227, 207, 0.28);
}

.ss-name-sheet-paper__brand span {
  color: #70e3cf;
}

.ss-name-sheet-paper__footer {
  padding-top: 0.8rem;
  margin-top: auto;
  border-top: 1px solid rgba(112, 227, 207, 0.28);
}

.ss-name-sheet-rows {
  display: grid;
  align-content: start;
  min-height: 340px;
  padding: 1.3rem 0;
}

.ss-name-sheet-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.ss-name-sheet-row__number {
  color: rgba(247, 247, 251, 0.58);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.ss-name-sheet-sticker {
  display: block;
  width: 100%;
  min-width: 0;
  height: 3.7rem;
  overflow: visible;
}

.ss-name-sheet-sticker text {
  font-size: 2.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ss-name-sheet-row--impact text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.ss-name-sheet-row--condensed text {
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-stretch: condensed;
}

.ss-name-sheet-row--block text {
  font-family: "Arial Black", Impact, sans-serif;
}

.ss-name-sheet-row--rounded text {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
}

.ss-name-sheet-row--script text {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-style: italic;
  letter-spacing: 0.01em;
}

.ss-name-sheet-sticker__outline-outer,
.ss-name-sheet-sticker__outline-inner {
  paint-order: stroke fill;
}

.ss-name-sheet-logo-row {
  align-items: center;
}

.ss-name-sheet-logo-sticker {
  position: relative;
  display: block;
  width: min(100%, 22rem);
  height: 8.5rem;
  margin: 0 auto;
  isolation: isolate;
}

.ss-name-sheet-logo-sticker__shape,
.ss-name-sheet-logo-sticker__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ss-name-sheet-logo-sticker__shape {
  background: var(--ns-accent);
  -webkit-mask-image: var(--logo-source);
  mask-image: var(--logo-source);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ss-name-sheet-logo-sticker__shape--fill {
  inset: -1%;
}

.ss-name-sheet-logo-sticker__shape--outline1 {
  inset: -3.5%;
}

.ss-name-sheet-logo-sticker__shape--outline2 {
  inset: -6%;
}

.ss-name-sheet-logo-sticker__art {
  z-index: 4;
  object-fit: contain;
}

.ss-name-sheet-logo-sticker--reference {
  height: 9.5rem;
  padding: 0.38rem;
  background: var(--ns-soft);
  border: 0.3rem solid var(--ns-accent);
  border-radius: 0.6rem;
  box-shadow: 0 0 0 0.18rem var(--ns-panel), 0 0 0 0.32rem var(--ns-line);
}

.ss-name-sheet-logo-sticker--reference .ss-name-sheet-logo-sticker__art {
  border-radius: 0.28rem;
}

.ss-name-sheet-empty {
  align-self: center;
  margin: auto;
  color: #c9ccdc;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.ss-name-sheet-studio__footer {
  align-items: center;
  padding: 0.15rem 0.25rem 0;
}

.ss-name-sheet-studio__footer p {
  margin: 0;
  color: var(--ns-muted);
  font-size: 0.78rem;
}

.ss-name-sheet-studio__footer p.is-error {
  color: #ff9aae;
}

@media (max-width: 760px) {
  .ss-name-sheet-studio__header,
  .ss-name-sheet-studio__footer {
    display: grid;
  }

  .ss-name-sheet-studio__badge {
    justify-self: start;
  }

  .ss-name-sheet-studio__workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-name-sheet-preview-panel {
    order: 1;
  }

  .ss-name-sheet-controls {
    order: 2;
  }

  .ss-name-sheet-paper {
    min-height: 430px;
  }

  .ss-name-sheet-sticker {
    height: 3.2rem;
  }

  .ss-name-sheet-sticker text {
    font-size: 2.2rem;
  }

  .ss-name-sheet-logo-sticker {
    height: 7rem;
  }

  .ss-name-sheet-logo-sticker--reference {
    height: 7.8rem;
  }
}

/* Expanded race-sheet order form */
.ss-name-sheet-studio--order-form .ss-name-sheet-controls{gap:18px}
.ss-name-sheet-radio-group{margin:16px 0 0;padding:14px;border:1px solid rgba(112,227,207,.28);border-radius:14px;display:flex;gap:18px;flex-wrap:wrap}
.ss-name-sheet-radio-group legend{padding:0 8px;font-weight:800;color:#fff}
.ss-name-sheet-radio-group label,.ss-name-sheet-check{display:flex;align-items:center;gap:8px;color:#f5f2ff;font-weight:700}
.ss-name-sheet-upload,.ss-name-sheet-comments{display:grid;gap:8px;margin-top:16px;color:#fff;font-weight:800}
.ss-name-sheet-upload input,.ss-name-sheet-comments textarea{width:100%;border:1px solid rgba(112,227,207,.38);background:#0e0a2b;color:#fff;border-radius:12px;padding:12px}
.ss-name-sheet-upload small{color:#bfc1d9;font-weight:500;line-height:1.45}
.ss-name-sheet-upload-list{display:grid;gap:8px;margin-top:10px}
.ss-name-sheet-upload-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:8px;border-radius:10px;background:rgba(255,255,255,.06)}
.ss-name-sheet-upload-item img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px}
.ss-name-sheet-upload-item button{border:0;background:transparent;color:#70e3cf;font-weight:800;cursor:pointer}
.ss-name-sheet-logo-sticker{position:relative;width:min(78%,440px);height:76px;display:grid;place-items:center;isolation:isolate}
.ss-name-sheet-logo-sticker.is-uniform{width:min(68%,360px)}
.ss-name-sheet-logo-sticker__frame{position:absolute;inset:0;border-radius:16px;clip-path:polygon(5% 0,95% 0,100% 18%,100% 82%,95% 100%,5% 100%,0 82%,0 18%)}
.ss-name-sheet-logo-sticker__frame.is-outer{inset:0;z-index:0}
.ss-name-sheet-logo-sticker__frame.is-inner{inset:5px;z-index:1}
.ss-name-sheet-logo-sticker__frame.is-fill{inset:10px;z-index:2}
.ss-name-sheet-logo-sticker img{position:relative;z-index:3;max-width:82%;max-height:58px;object-fit:contain}
.ss-name-sheet-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ss-name-sheet-summary strong{width:100%;color:#fff}
.ss-name-sheet-summary span{padding:7px 10px;border-radius:999px;background:rgba(112,227,207,.1);border:1px solid rgba(112,227,207,.25);color:#e9ffff;font-size:.82rem;font-weight:700}
@media(max-width:680px){.ss-name-sheet-radio-group{flex-direction:column;gap:10px}.ss-name-sheet-upload-item{grid-template-columns:38px 1fr}.ss-name-sheet-upload-item button{grid-column:2;text-align:left}}

/* Unified Name / Logo category builder. */
.ss-name-logo-page{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(2rem,5vw,5rem) 0;color:#f7f7fb}.ss-name-logo-hero{text-align:center;max-width:850px;margin:0 auto 2rem}.ss-name-logo-hero h1{margin:.25rem 0 .75rem;color:#70e3cf;font-size:clamp(2.7rem,7vw,5.8rem);line-height:.9}.ss-name-logo-hero p{color:#d8d9e6;line-height:1.65}.ss-name-logo-eyebrow{margin:0;color:#70e3cf;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.ss-name-logo-builder{display:grid;gap:1rem}.ss-name-logo-product-preview,.ss-name-logo-workspace,.ss-name-logo-submitbar{background:linear-gradient(145deg,rgba(12,15,35,.98),rgba(30,22,66,.96));border:1px solid rgba(112,227,207,.3);border-radius:22px;box-shadow:0 22px 70px rgba(0,0,0,.35)}.ss-name-logo-product-preview{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(280px,1.25fr);gap:1.25rem;padding:1.25rem;align-items:center}.ss-name-logo-product-image-wrap{min-height:260px;display:grid;place-items:center;padding:1rem;background:#f2f0f4;border-radius:16px}.ss-name-logo-product-image-wrap img{max-width:100%;max-height:360px;object-fit:contain}.ss-name-logo-product-copy h2{margin:.35rem 0;color:#70e3cf;font-size:clamp(2rem,5vw,4.2rem);line-height:.95}.ss-name-logo-product-copy p:last-child{color:#c9ccdc;line-height:1.55}.ss-name-logo-price{font-size:1.3rem;font-weight:900;color:#fff}.ss-name-logo-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);gap:1rem;padding:1rem}.ss-name-logo-fields{display:grid;gap:.75rem}.ss-name-logo-section{display:grid;grid-template-columns:42px 1fr;gap:.8rem;padding:1rem;background:rgba(255,255,255,.035);border:1px solid rgba(112,227,207,.18);border-radius:15px}.ss-name-logo-step{display:grid;place-items:center;width:36px;height:36px;color:#08131a;background:#70e3cf;border-radius:50%;font-size:.73rem;font-weight:1000}.ss-name-logo-section h3{margin:.15rem 0 1rem;color:#fff;font-family:inherit;font-size:1.1rem}.ss-name-logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.ss-name-logo-label{display:grid;gap:.35rem}.ss-name-logo-label>span,.ss-name-logo-radio legend,.ss-name-logo-upload>span{color:#c9ccdc;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.ss-name-logo-label input,.ss-name-logo-label select,.ss-name-logo-label textarea{width:100%;padding:.72rem .78rem;color:#fff!important;background:#151238!important;border:1px solid rgba(112,227,207,.32);border-radius:9px}.ss-name-logo-label input[type=color]{min-height:46px;padding:.25rem}.ss-name-logo-radio{display:flex;flex-wrap:wrap;gap:.8rem;margin:.8rem 0 0;padding:0;border:0}.ss-name-logo-radio legend{width:100%;margin-bottom:.25rem}.ss-name-logo-radio label{display:flex;gap:.35rem;align-items:center;color:#fff}.ss-name-logo-upload{display:grid;gap:.4rem;margin-top:.8rem;padding:1rem;border:1px dashed rgba(112,227,207,.4);border-radius:10px}.ss-name-logo-upload small{color:#aeb3c8}.ss-name-logo-live{position:sticky;top:110px;align-self:start;padding:1rem;background:#0e1025;border:1px solid rgba(112,227,207,.25);border-radius:16px}.ss-name-logo-live-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.ss-name-logo-live-dot{width:9px;height:9px;background:#70e3cf;border-radius:50%;box-shadow:0 0 14px #70e3cf}.ss-name-logo-sheet{aspect-ratio:8.5/11;display:flex;flex-direction:column;padding:1rem;background:linear-gradient(135deg,#fbfbfd,#dadde6);border-radius:10px;overflow:hidden;color:#111326}.ss-name-logo-sheet-brand,.ss-name-logo-sheet-foot{font-size:.62rem;font-weight:1000;letter-spacing:.14em;text-align:center}.ss-name-logo-preview-rows{display:flex;flex:1;flex-direction:column;justify-content:center;gap:.75rem;min-height:0;padding:1rem 0}.ss-name-logo-preview-item{text-align:center;overflow:hidden}.ss-name-logo-preview-item span{display:inline-block;max-width:100%;color:var(--sheet-fill);font-size:clamp(1.7rem,4vw,3.4rem);font-weight:1000;line-height:1;text-transform:uppercase;-webkit-text-stroke:7px var(--sheet-outline-2);paint-order:stroke fill;filter:drop-shadow(0 0 0 var(--sheet-outline-1));text-shadow:3px 0 var(--sheet-outline-1),-3px 0 var(--sheet-outline-1),0 3px var(--sheet-outline-1),0 -3px var(--sheet-outline-1)}.ss-name-logo-preview-item.is-condensed span{font-stretch:condensed}.ss-name-logo-preview-item.is-rounded span{font-family:Arial Rounded MT Bold,Arial,sans-serif}.ss-name-logo-preview-item.is-script span{font-family:cursive;text-transform:none}.ss-name-logo-preview-empty{margin:auto;color:#62677a;text-align:center}.ss-name-logo-summary{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}.ss-name-logo-summary>*{padding:.45rem .6rem;background:rgba(112,227,207,.1);border:1px solid rgba(112,227,207,.22);border-radius:999px;color:#dfe4ef;font-size:.7rem}.ss-name-logo-submitbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem}.ss-name-logo-submitbar p{margin:0;color:#c9ccdc}.ss-name-logo-submitbar .button{padding:.85rem 1.1rem!important;background:#70e3cf!important;color:#071018!important;border-radius:999px!important;font-weight:1000!important}.ss-name-logo-empty{padding:2rem;text-align:center;background:rgba(15,16,38,.96);border:1px solid rgba(112,227,207,.3);border-radius:20px}
@media(max-width:900px){.ss-name-logo-product-preview,.ss-name-logo-workspace{grid-template-columns:1fr}.ss-name-logo-live{position:static}.ss-name-logo-product-image-wrap{min-height:220px}}@media(max-width:600px){.ss-name-logo-page{width:min(100% - 1rem,1180px)}.ss-name-logo-grid{grid-template-columns:1fr}.ss-name-logo-section{grid-template-columns:1fr}.ss-name-logo-submitbar{align-items:stretch;flex-direction:column}.ss-name-logo-submitbar .button{width:100%}.ss-name-logo-product-preview,.ss-name-logo-workspace{padding:.7rem}}

/* 2026-08 mobile-first hardening for the unified Name / Logo Sheet Customizer. */
.ss-name-logo-page,
.ss-name-logo-page * { box-sizing: border-box; }
.ss-name-logo-page { overflow-x: clip; }
.ss-name-logo-builder,
.ss-name-logo-product-preview,
.ss-name-logo-product-copy,
.ss-name-logo-workspace,
.ss-name-logo-fields,
.ss-name-logo-section,
.ss-name-logo-section > div,
.ss-name-logo-live { min-width: 0; }
.ss-name-logo-product-copy h2,
.ss-name-logo-hero h1,
.ss-name-logo-section h3,
.ss-name-logo-submitbar p { overflow-wrap: anywhere; }
.ss-name-logo-label input,
.ss-name-logo-label select,
.ss-name-logo-label textarea,
.ss-name-logo-upload input,
.ss-name-logo-submitbar .button { font-size: 16px; }
.ss-name-logo-label input,
.ss-name-logo-label select,
.ss-name-logo-submitbar .button { min-height: 48px; }
.ss-name-logo-label textarea { min-height: 132px; resize: vertical; }
.ss-name-logo-radio label { min-height: 44px; padding: .45rem .65rem; border-radius: 9px; background: rgba(255,255,255,.035); }
.ss-name-logo-radio input { width: 20px; height: 20px; margin: 0; accent-color: #70e3cf; }
.ss-name-logo-upload input[type="file"] { width: 100%; max-width: 100%; color: #fff; }
.ss-name-logo-product-image-wrap img { width: auto; height: auto; }
.ss-name-logo-live { max-width: 100%; }
.ss-name-logo-sheet { width: 100%; max-width: 540px; margin-inline: auto; }
.ss-name-logo-preview-item span { word-break: break-word; }
.ss-name-logo-submitbar .button { touch-action: manipulation; text-align: center; white-space: normal; }

@media (max-width: 1100px) {
  .ss-name-logo-workspace { grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); }
  .ss-name-logo-product-copy h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
}

@media (max-width: 900px) {
  .ss-name-logo-page { width: min(100% - 1.5rem, 1180px); }
  .ss-name-logo-product-preview { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .ss-name-logo-workspace { grid-template-columns: 1fr; }
  .ss-name-logo-live { position: static; order: -1; }
  .ss-name-logo-sheet { max-width: 460px; }
}

@media (max-width: 720px) {
  .ss-name-logo-page { width: min(100% - 1rem, 1180px); padding: 1.5rem 0 3rem; }
  .ss-name-logo-hero { margin-bottom: 1.25rem; }
  .ss-name-logo-hero h1 { font-size: clamp(2.35rem, 13vw, 4rem); line-height: .95; }
  .ss-name-logo-hero p { font-size: .98rem; }
  .ss-name-logo-product-preview { grid-template-columns: 1fr; gap: .9rem; padding: .85rem; border-radius: 16px; }
  .ss-name-logo-product-image-wrap { min-height: 0; aspect-ratio: 1 / 1; padding: .75rem; }
  .ss-name-logo-product-image-wrap img { max-height: 100%; }
  .ss-name-logo-product-copy { text-align: center; }
  .ss-name-logo-product-copy h2 { font-size: clamp(2rem, 11vw, 3.15rem); }
  .ss-name-logo-workspace { padding: .65rem; border-radius: 16px; }
  .ss-name-logo-section { grid-template-columns: 38px minmax(0,1fr); gap: .65rem; padding: .85rem; }
  .ss-name-logo-grid { grid-template-columns: 1fr; }
  .ss-name-logo-live { padding: .75rem; }
  .ss-name-logo-sheet { max-width: 420px; padding: .75rem; }
  .ss-name-logo-submitbar { position: static; flex-direction: column; align-items: stretch; padding: .85rem; border-radius: 16px; }
  .ss-name-logo-submitbar p { text-align: center; }
  .ss-name-logo-submitbar .button { width: 100%; }
}

@media (max-width: 480px) {
  .ss-name-logo-page { width: min(100% - .75rem, 1180px); }
  .ss-name-logo-hero h1 { font-size: clamp(2rem, 12vw, 3rem); }
  .ss-name-logo-eyebrow { font-size: .65rem; letter-spacing: .12em; }
  .ss-name-logo-product-preview,
  .ss-name-logo-workspace,
  .ss-name-logo-submitbar { border-radius: 14px; }
  .ss-name-logo-section { grid-template-columns: 1fr; padding: .75rem; }
  .ss-name-logo-step { width: 34px; height: 34px; }
  .ss-name-logo-section h3 { margin-top: 0; font-size: 1rem; }
  .ss-name-logo-label > span,
  .ss-name-logo-radio legend,
  .ss-name-logo-upload > span { font-size: .66rem; }
  .ss-name-logo-label input,
  .ss-name-logo-label select,
  .ss-name-logo-label textarea { padding: .72rem; }
  .ss-name-logo-radio { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ss-name-logo-radio legend { grid-column: 1 / -1; }
  .ss-name-logo-radio label { justify-content: center; }
  .ss-name-logo-upload { padding: .75rem; }
  .ss-name-logo-live-head { font-size: .68rem; }
  .ss-name-logo-sheet { padding: .65rem; }
  .ss-name-logo-preview-rows { gap: .45rem; padding: .65rem 0; }
  .ss-name-logo-preview-item span { font-size: clamp(1.25rem, 9vw, 2.25rem); -webkit-text-stroke-width: 5px; text-shadow: 2px 0 var(--sheet-outline-1),-2px 0 var(--sheet-outline-1),0 2px var(--sheet-outline-1),0 -2px var(--sheet-outline-1); }
  .ss-name-logo-summary > * { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .ss-name-logo-page { width: calc(100% - .5rem); }
  .ss-name-logo-product-preview,
  .ss-name-logo-workspace { padding: .5rem; }
  .ss-name-logo-section { padding: .65rem; }
  .ss-name-logo-radio { grid-template-columns: 1fr; }
  .ss-name-logo-radio legend { grid-column: auto; }
  .ss-name-logo-product-copy h2 { font-size: 1.9rem; }
}

@media (hover: none) and (pointer: coarse) {
  .ss-name-logo-label input,
  .ss-name-logo-label select,
  .ss-name-logo-label textarea,
  .ss-name-logo-radio label,
  .ss-name-logo-submitbar .button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-name-logo-page *,
  .ss-name-logo-page *::before,
  .ss-name-logo-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Polished page introduction for the unified Name / Logo Sheet Customizer. */
.ss-name-logo-hero {
  position: relative;
  isolation: isolate;
  max-width: 1040px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% -25%, rgba(112, 227, 207, .18), transparent 52%),
    linear-gradient(145deg, rgba(12, 15, 35, .94), rgba(28, 20, 61, .93));
  border: 1px solid rgba(112, 227, 207, .34);
  border-radius: clamp(18px, 3vw, 28px);
  box-shadow: 0 24px 70px rgba(2, 4, 16, .38);
}
.ss-name-logo-hero::before,
.ss-name-logo-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}
.ss-name-logo-hero::before {
  top: -145px;
  left: -80px;
  background: rgba(91, 69, 230, .2);
}
.ss-name-logo-hero::after {
  right: -95px;
  bottom: -155px;
  background: rgba(112, 227, 207, .13);
}
.ss-name-logo-hero-inner {
  width: min(100%, 820px);
  margin-inline: auto;
}
.ss-name-logo-hero .ss-name-logo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  color: #8ff2e0;
  font-size: clamp(.68rem, 1.5vw, .78rem);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ss-name-logo-hero .ss-name-logo-eyebrow::before,
.ss-name-logo-hero .ss-name-logo-eyebrow::after {
  content: "";
  width: clamp(24px, 5vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 227, 207, .8));
}
.ss-name-logo-hero .ss-name-logo-eyebrow::after {
  transform: scaleX(-1);
}
.ss-name-logo-hero h1 {
  max-width: 100%;
  margin: 0;
  color: #70e3cf;
  font-size: clamp(2.35rem, 7vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow: 0 4px 0 rgba(4, 18, 26, .5), 0 0 34px rgba(112, 227, 207, .12);
}
.ss-name-logo-hero .ss-name-logo-hero-intro {
  max-width: 720px;
  margin: 1rem auto 0;
  color: #dce0ec;
  font-size: clamp(.98rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  text-wrap: pretty;
}
.ss-name-logo-hero-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.2rem;
}
.ss-name-logo-hero-features span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .5rem .78rem;
  color: #eefdf9;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(112, 227, 207, .08);
  border: 1px solid rgba(112, 227, 207, .22);
  border-radius: 999px;
}
.ss-name-logo-hero-features span::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #071018;
  font-size: .68rem;
  font-weight: 1000;
  background: #70e3cf;
  border-radius: 50%;
}
@media (max-width: 720px) {
  .ss-name-logo-hero {
    padding: 1.4rem 1rem;
    border-radius: 18px;
  }
  .ss-name-logo-hero h1 {
    font-size: clamp(2.1rem, 11vw, 3.6rem);
    line-height: 1;
  }
  .ss-name-logo-hero .ss-name-logo-hero-intro {
    margin-top: .8rem;
    font-size: .96rem;
    line-height: 1.6;
  }
  .ss-name-logo-hero-features {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 340px);
    margin: 1rem auto 0;
  }
  .ss-name-logo-hero-features span {
    justify-content: flex-start;
    width: 100%;
  }
}
@media (max-width: 420px) {
  .ss-name-logo-hero .ss-name-logo-eyebrow::before,
  .ss-name-logo-hero .ss-name-logo-eyebrow::after {
    display: none;
  }
  .ss-name-logo-hero h1 {
    font-size: clamp(1.95rem, 10.5vw, 2.75rem);
  }
}

/* Name & Logo Sponsor Sheets refinements */
.ss-name-logo-subgroup{margin-top:1.25rem;padding:1rem;border:1px solid rgba(112,227,207,.22);border-radius:16px;background:rgba(7,8,28,.28)}
.ss-name-logo-subgroup h4{margin:0 0 .85rem;color:#fff;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.ss-name-logo-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-sponsor-list{display:grid;gap:.8rem}
.ss-sponsor-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.34fr);gap:.8rem;align-items:end}
.ss-name-logo-field-note{margin:.5rem 0 0;color:rgba(255,255,255,.72);line-height:1.55}
.ss-upload-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.ss-upload-list span{max-width:100%;padding:.38rem .65rem;border:1px solid rgba(86,239,219,.34);border-radius:999px;background:rgba(86,239,219,.08);color:#fff;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-flo-lock{margin-top:.9rem;padding:.75rem .9rem;border:1px solid rgba(255,226,54,.45);border-radius:12px;background:rgba(255,226,54,.1);color:#fff}
.ss-name-logo-color-grid input[type=color]:disabled{opacity:1;cursor:pointer!important}
.ss-logo-only-preview{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(20,18,58,.98),rgba(7,10,30,.98))}
.ss-logo-only-preview[data-finish^="flo-"]{background:linear-gradient(145deg,var(--finish-color),color-mix(in srgb,var(--finish-color) 62%,#050713))}
.ss-logo-only-preview[data-finish="holographic"]{background:linear-gradient(135deg,#ff5fd2,#7c5cff 30%,#3cf4e2 55%,#ffe767 76%,#ff6bb4)}
.ss-logo-preview-stage{position:relative;display:grid;place-items:center;min-height:280px;margin:1rem;padding:2rem;border-radius:22px;background:rgba(5,7,24,.7);isolation:isolate}
.ss-logo-preview-stage img{position:relative;z-index:3;width:min(86%,340px);height:auto;object-fit:contain;filter:drop-shadow(0 0 3px var(--sheet-outline-1)) drop-shadow(0 0 9px var(--sheet-outline-2));}
.ss-logo-preview-halo{position:absolute;inset:15%;border-radius:50%;filter:blur(18px);opacity:.6;z-index:1}
.ss-logo-preview-halo--outer{background:var(--sheet-outline-2);transform:scale(1.08)}
.ss-logo-preview-halo--inner{background:var(--sheet-fill);transform:scale(.72)}
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-halo{background:#000;opacity:.28}
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-stage img{filter:grayscale(1) brightness(0) drop-shadow(0 0 3px #000)}
.ss-logo-preview-swatches{display:flex;justify-content:center;gap:.6rem;margin:.25rem 0 1rem}
.ss-logo-preview-swatches span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ss-name-logo-preview-note{margin:.8rem 0 0;color:rgba(255,255,255,.68);font-size:.88rem;line-height:1.5}
@media(max-width:760px){.ss-name-logo-grid--two,.ss-sponsor-row{grid-template-columns:1fr}.ss-sponsor-size{max-width:none}.ss-logo-preview-stage{min-height:220px;padding:1rem}.ss-name-logo-hero h1{font-size:clamp(2.2rem,13vw,4rem)}}
@media(max-width:420px){.ss-name-logo-subgroup{padding:.75rem}.ss-logo-preview-stage{min-height:190px;margin:.6rem}.ss-name-logo-section{padding:1rem}.ss-name-logo-hero-features{display:grid;grid-template-columns:1fr}}

/* Fluorescent black / transparent print selector */
.ss-flo-lock p{margin:.35rem 0 .75rem;color:rgba(255,255,255,.82);font-size:.92rem}
.ss-flo-print-options{display:flex;flex-wrap:wrap;gap:.65rem}
.ss-flo-print-options label{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(7,9,31,.48);cursor:pointer;font-weight:700}
.ss-flo-print-options label:has(input:checked){border-color:#65f1dc;box-shadow:0 0 0 2px rgba(101,241,220,.16)}
.ss-flo-print-options input{width:18px;height:18px;accent-color:#65f1dc}
.ss-flo-choice-swatch{width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 7px rgba(0,0,0,.28)}
.ss-flo-choice-swatch--black{background:#000}
.ss-flo-choice-swatch--transparent{background:repeating-conic-gradient(#d9d9df 0 25%,#fff 0 50%) 50%/8px 8px}
.ss-logo-only-preview[data-flo-print="transparent"] .ss-logo-preview-stage img{filter:grayscale(1) opacity(.32) drop-shadow(0 0 2px rgba(255,255,255,.6));mix-blend-mode:screen}
.ss-logo-only-preview[data-flo-print="transparent"] .ss-logo-preview-halo{opacity:.12;background:repeating-conic-gradient(rgba(255,255,255,.45) 0 25%,rgba(255,255,255,.1) 0 50%) 50%/14px 14px}
@media(max-width:520px){.ss-flo-print-options{display:grid;grid-template-columns:1fr}.ss-flo-print-options label{width:100%}}

/* Recolorable inline Suction Stickers SVG preview */
.ss-logo-preview-stage .ss-recolorable-logo{
  position:relative;
  z-index:3;
  display:block;
  width:min(86%,340px);
  max-width:100%;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 0 3px var(--sheet-outline-1)) drop-shadow(0 0 9px var(--sheet-outline-2));
  transition:filter .2s ease,opacity .2s ease;
}
.ss-logo-preview-stage .ss-recolorable-logo path{
  transition:fill .18s ease,opacity .18s ease;
}
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-stage .ss-recolorable-logo{
  filter:drop-shadow(0 0 3px rgba(0,0,0,.72));
}
.ss-logo-only-preview[data-flo-print="transparent"] .ss-logo-preview-stage .ss-recolorable-logo{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.55));
  opacity:.88;
}
.ss-logo-preview-fallback{position:relative;z-index:3;color:var(--sheet-fill);font-weight:900;font-size:clamp(1.8rem,7vw,3.5rem);text-align:center}


/* Customizer interaction fixes: no prohibited cursor and clean Flo controls. */
.ss-name-logo-page [hidden]{display:none !important}
.ss-name-logo-page input:not(:disabled),
.ss-name-logo-page select:not(:disabled),
.ss-name-logo-page textarea:not(:disabled),
.ss-name-logo-page button:not(:disabled),
.ss-name-logo-page label{cursor:pointer}
.ss-name-logo-page input[type=text],
.ss-name-logo-page input[type=number],
.ss-name-logo-page textarea{cursor:text}
.ss-name-logo-page .ss-recolorable-logo,
.ss-name-logo-page .ss-logo-preview-stage,
.ss-name-logo-page .ss-logo-preview-halo{pointer-events:none;cursor:default}
.ss-name-logo-color-grid input[type=color]:disabled{cursor:default}


/* Hard override for the customizer cursor. No element in this builder should
 * display the browser's prohibited cursor. */
.ss-name-logo-page,
.ss-name-logo-page *,
.ss-name-logo-page *::before,
.ss-name-logo-page *::after { cursor: default !important; }
.ss-name-logo-page a,
.ss-name-logo-page button,
.ss-name-logo-page select,
.ss-name-logo-page input[type="color"],
.ss-name-logo-page input[type="radio"],
.ss-name-logo-page input[type="checkbox"],
.ss-name-logo-page input[type="file"],
.ss-name-logo-page label[for],
.ss-name-logo-page .ss-flo-print-options label { cursor: pointer !important; }
.ss-name-logo-page input[type="text"],
.ss-name-logo-page input[type="number"],
.ss-name-logo-page textarea { cursor: text !important; }
.ss-name-logo-page [disabled] { cursor: default !important; }

/* Holographic production rule: white becomes a transparent knockout so the
 * holographic stock itself shows through. */
.ss-holo-transparent-option{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:72px;
  padding:.75rem .85rem;
  border:1px solid rgba(112,227,207,.38);
  border-radius:12px;
  background:rgba(112,227,207,.08);
  color:#fff;
}
.ss-holo-transparent-option[hidden]{display:none!important}
.ss-holo-transparent-option div{display:grid;gap:.2rem}
.ss-holo-transparent-option strong{font-size:.82rem;letter-spacing:.03em}
.ss-holo-transparent-option small{color:rgba(255,255,255,.72);line-height:1.4}
.ss-holo-transparent-swatch{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:2px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:linear-gradient(135deg,#ff5fd2,#7c5cff 28%,#3cf4e2 54%,#ffe767 76%,#ff6bb4);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-stage{
  background:
    linear-gradient(rgba(5,7,24,.2),rgba(5,7,24,.2)),
    linear-gradient(135deg,#ff5fd2,#7c5cff 28%,#3cf4e2 54%,#ffe767 76%,#ff6bb4);
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-halo--outer{opacity:.18}


/* Holographic clear-area selector: exactly one logo layer must reveal the stock. */
.ss-holo-clear-picker{
  grid-column:1/-1;
  display:grid;
  gap:.65rem;
  padding:1rem;
  border:1px solid rgba(112,227,207,.35);
  border-radius:14px;
  background:rgba(8,10,24,.72);
}
.ss-holo-clear-picker[hidden]{display:none!important}
.ss-holo-clear-picker>strong{font-size:.92rem}
.ss-holo-clear-picker>p{margin:0;color:rgba(255,255,255,.74);line-height:1.45}
.ss-holo-clear-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
.ss-holo-clear-options label{display:flex;align-items:center;gap:.55rem;min-height:46px;padding:.72rem .8rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);cursor:pointer;font-weight:700}
.ss-holo-clear-options label:has(input:checked){border-color:#70e3cf;box-shadow:0 0 0 2px rgba(112,227,207,.14);background:rgba(112,227,207,.1)}
.ss-holo-clear-options input{accent-color:#70e3cf;cursor:pointer}
.ss-name-logo-label.is-transparent-role{border-color:rgba(112,227,207,.55);background:linear-gradient(135deg,rgba(112,227,207,.09),rgba(255,255,255,.03))}
.ss-name-logo-label.is-transparent-role input[type=color]{opacity:.45}
.ss-name-logo-label.is-transparent-role:after{content:'Clear / Transparent';display:inline-flex;width:max-content;margin-top:.15rem;padding:.25rem .5rem;border-radius:999px;background:repeating-conic-gradient(#d9d9df 0 25%,#fff 0 50%) 50%/8px 8px;color:#080a18;font-size:.7rem;font-weight:900}
@media(max-width:700px){.ss-holo-clear-options{grid-template-columns:1fr}}


/* Custom name-font selector. These exact font files are bundled with the theme. */
@font-face{font-family:"SS Impact";src:url("fonts/name-logo/impact.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Badaboom";src:url("fonts/name-logo/badaboom.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Sakana";src:url("fonts/name-logo/sakana.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Arial";src:url("fonts/name-logo/arial.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Arial Bold";src:url("fonts/name-logo/arial-bold.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"SS Rush Driver";src:url("fonts/name-logo/rush-driver-italic.otf") format("opentype");font-display:swap;font-style:italic;font-weight:400}
@font-face{font-family:"SS Convecta";src:url("fonts/name-logo/lhf-convecta-base.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Speed Rusher";src:url("fonts/name-logo/speed-rusher.otf") format("opentype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Dodger";src:url("fonts/name-logo/dodger.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Revamped";src:url("fonts/name-logo/revamped.otf") format("opentype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Ethnocentric";src:url("fonts/name-logo/ethnocentric-italic.otf") format("opentype");font-display:swap;font-style:italic;font-weight:400}
@font-face{font-family:"SS BlackSword";src:url("fonts/name-logo/blacksword.otf") format("opentype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Sarah Script";src:url("fonts/name-logo/lhf-sarah-script.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"SS Cream Cake";src:url("fonts/name-logo/cream-cake.otf") format("opentype");font-display:swap;font-style:normal;font-weight:400}


/* Restored bordered font-card layout. */
.ss-font-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1rem}
.ss-font-choice{position:relative;display:grid;gap:.32rem;min-width:0;min-height:82px;padding:.85rem;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.ss-font-choice:hover{border-color:rgba(112,227,207,.72);background:rgba(112,227,207,.08);transform:translateY(-1px)}
.ss-font-choice:has(input:checked),.ss-font-choice.is-selected{border-color:#70e3cf;background:rgba(112,227,207,.13);box-shadow:0 0 0 2px rgba(112,227,207,.13)}
.ss-font-choice input{position:absolute;opacity:0;pointer-events:none}
.ss-font-choice-name{display:block;font:800 .72rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif;color:#70e3cf;text-transform:uppercase;letter-spacing:.06em}
.ss-font-choice-sample{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.15}
.ss-selected-font-preview{display:grid;gap:.4rem;margin-top:1rem;padding:1rem;border:1px solid rgba(112,227,207,.3);border-radius:14px;background:rgba(7,8,28,.55);text-align:center}
.ss-selected-font-preview>span{color:#bfc1d9;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ss-selected-font-preview strong{display:block;overflow-wrap:anywhere;color:#fff;font-size:clamp(1.8rem,6vw,3rem);line-height:1.1}

.ss-font-choice--impact .ss-font-choice-sample,.ss-font-choice--impact.ss-font-preview-text{font-family:"SS Impact",Impact,sans-serif}
.ss-font-choice--badaboom .ss-font-choice-sample,.ss-font-choice--badaboom.ss-font-preview-text{font-family:"SS Badaboom",Impact,sans-serif}
.ss-font-choice--sakana .ss-font-choice-sample,.ss-font-choice--sakana.ss-font-preview-text{font-family:"SS Sakana",Impact,sans-serif}
.ss-font-choice--arial .ss-font-choice-sample,.ss-font-choice--arial.ss-font-preview-text{font-family:"SS Arial",Arial,sans-serif}
.ss-font-choice--arial-bold .ss-font-choice-sample,.ss-font-choice--arial-bold.ss-font-preview-text{font-family:"SS Arial Bold",Arial,sans-serif;font-weight:700}
.ss-font-choice--rush-driver-italic .ss-font-choice-sample,.ss-font-choice--rush-driver-italic.ss-font-preview-text{font-family:"SS Rush Driver",Impact,sans-serif;font-style:italic}
.ss-font-choice--lhf-convecta-base .ss-font-choice-sample,.ss-font-choice--lhf-convecta-base.ss-font-preview-text{font-family:"SS Convecta",Impact,sans-serif}
.ss-font-choice--speed-rusher .ss-font-choice-sample,.ss-font-choice--speed-rusher.ss-font-preview-text{font-family:"SS Speed Rusher",Impact,sans-serif}
.ss-font-choice--dodger .ss-font-choice-sample,.ss-font-choice--dodger.ss-font-preview-text{font-family:"SS Dodger",Impact,sans-serif}
.ss-font-choice--revamped .ss-font-choice-sample,.ss-font-choice--revamped.ss-font-preview-text{font-family:"SS Revamped",Impact,sans-serif}
.ss-font-choice--ethnocentric-italic .ss-font-choice-sample,.ss-font-choice--ethnocentric-italic.ss-font-preview-text{font-family:"SS Ethnocentric",Impact,sans-serif;font-style:italic}
.ss-font-choice--blacksword .ss-font-choice-sample,.ss-font-choice--blacksword.ss-font-preview-text{font-family:"SS BlackSword","Brush Script MT",cursive}
.ss-font-choice--lhf-sarah-script .ss-font-choice-sample,.ss-font-choice--lhf-sarah-script.ss-font-preview-text{font-family:"SS Sarah Script","Brush Script MT",cursive}
.ss-font-choice--cream-cake .ss-font-choice-sample,.ss-font-choice--cream-cake.ss-font-preview-text{font-family:"SS Cream Cake","Brush Script MT",cursive}
@media(max-width:620px){.ss-font-choice-grid{grid-template-columns:1fr}.ss-font-choice{min-height:70px}.ss-font-choice-sample{font-size:1.45rem}}

/* Finish-specific Name/Logo preview artwork. */
.ss-logo-variant-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92%, 420px);
  max-height: 100%;
}
.ss-logo-variant-wrap .ss-recolorable-logo {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: contain;
}
.ss-logo-variant-wrap .ss-recolorable-logo[hidden] {
  display: none !important;
}


/* Punched logo style selector: available for Standard Gloss and Holographic. */
.ss-logo-style-control{display:grid;gap:.65rem;margin:1rem 0 0;padding:0;border:0;min-width:0}
.ss-logo-style-control[hidden]{display:none!important}
.ss-logo-style-control>legend{color:#c9ccdc;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ss-logo-style-control>.ss-name-logo-field-note{margin:0}
.ss-logo-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.ss-logo-style-card{position:relative;display:grid;grid-template-columns:94px minmax(0,1fr);gap:.75rem;align-items:center;min-height:96px;padding:.65rem;border:1px solid rgba(112,227,207,.25);border-radius:13px;background:rgba(255,255,255,.04);cursor:pointer;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.ss-logo-style-card:hover,.ss-logo-style-card:focus-within{border-color:rgba(112,227,207,.68);background:rgba(112,227,207,.07)}
.ss-logo-style-card.is-selected,.ss-logo-style-card:has(input:checked){border-color:#70e3cf;box-shadow:0 0 0 2px rgba(112,227,207,.13),0 10px 28px rgba(0,0,0,.24);background:rgba(112,227,207,.1)}
.ss-logo-style-card>input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.ss-logo-style-thumb{display:grid;place-items:center;min-height:70px;padding:.35rem;background:#060717;border-radius:9px;overflow:hidden}
.ss-logo-style-thumb--light{background:#eceef4}
.ss-logo-style-thumb img{display:block;width:100%;height:62px;object-fit:contain}
.ss-logo-style-copy{display:grid;gap:.25rem;min-width:0}
.ss-logo-style-copy strong{color:#fff;font-size:.9rem}
.ss-logo-style-copy small{color:#b8bed0;font-size:.75rem;line-height:1.35}
@media(max-width:700px){.ss-logo-style-options{grid-template-columns:1fr}.ss-logo-style-card{grid-template-columns:88px minmax(0,1fr)}}
@media(max-width:390px){.ss-logo-style-card{grid-template-columns:74px minmax(0,1fr);padding:.55rem}.ss-logo-style-thumb img{height:52px}}


/* Keep the Standard/Holographic color controls visible and preserve the chosen colors. */
.ss-name-logo-color-grid:not([hidden]){display:grid!important}
.ss-name-logo-label .ss-color-rgb{
  display:block;
  margin-top:.15rem;
  color:rgba(255,255,255,.72);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:none;
}
.ss-logo-style-copy small{display:block}

/* 2026-08 unified Suction Stickers SVG + native color-wheel controls. */

.ss-color-wheel-card { align-content: start; }
.ss-color-wheel-control {
  --selected-color: #000000;
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  min-height: 82px;
  margin-top: .35rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(112,227,207,.24);
  border-radius: 14px;
  background: rgba(7,9,31,.46);
}
.ss-color-wheel-picker {
  position: relative;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.98) 0 12%, rgba(255,255,255,.18) 13% 28%, transparent 29%),
    conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  border: 2px solid rgba(255,255,255,.84);
  box-shadow: 0 5px 18px rgba(0,0,0,.35), 0 0 0 3px rgba(112,227,207,.08);
  pointer-events: none;
}
.ss-color-wheel-picker::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--selected-color);
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.42);
}
.ss-color-wheel-control input[type="color"] {
  position: absolute !important;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 82px !important;
  height: 82px !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  opacity: .001;
  cursor: pointer !important;
}
.ss-color-wheel-control output {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font: 800 .78rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
.ss-color-wheel-control:focus-within {
  border-color: #70e3cf;
  box-shadow: 0 0 0 3px rgba(112,227,207,.14);
}
.ss-color-wheel-control.is-transparent-role .ss-color-wheel-picker::after {
  background: repeating-conic-gradient(#d9d9df 0 25%, #fff 0 50%) 50% / 8px 8px;
}
.ss-color-wheel-control.is-transparent-role output {
  background: repeating-conic-gradient(rgba(217,217,223,.96) 0 25%, #fff 0 50%) 50% / 10px 10px;
  color: #07091f;
}
.ss-name-logo-label.is-transparent-role .ss-color-wheel-control { opacity: 1; }
.ss-name-logo-label.is-transparent-role .ss-color-wheel-control input[type="color"] { cursor: pointer !important; }
.ss-name-logo-label.is-transparent-role input[type="color"] { opacity: .001 !important; }

.ss-logo-variant-wrap .ss-recolorable-logo[data-logo-variant="standard-holo"],
.ss-logo-variant-wrap .ss-recolorable-logo[data-logo-variant="flo"] {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 430px;
  height: auto;
  max-height: 230px;
  overflow: visible;
}
.ss-logo-variant-wrap .ss-recolorable-logo[hidden] { display: none !important; }
.ss-logo-preview-stage .ss-logo-layer { transition: fill .15s ease, opacity .15s ease; }

@media (max-width: 520px) {
  .ss-color-wheel-control { min-height: 74px; gap: .65rem; padding: .5rem .55rem; }
  .ss-color-wheel-picker { flex-basis: 58px; width: 58px; height: 58px; }
  .ss-color-wheel-picker::after { inset: 16px; }
  .ss-color-wheel-control input[type="color"] { width: 74px !important; height: 74px !important; min-height: 74px !important; }
  .ss-color-wheel-control output { font-size: .7rem; padding-inline: .55rem; }
}


/* v2.17: selectable white/black punched SVGs for Standard and Holographic,
 * plus the independent fluorescent preview layers. */
.ss-logo-variant-wrap .ss-logo-color-layer{
  grid-area:1 / 1;
  width:100%;
  max-width:430px;
  height:auto;
  max-height:230px;
  overflow:visible;
  pointer-events:none;
}
.ss-logo-variant-wrap .ss-logo-color-layer[data-logo-variant="standard-holo"]{
  filter:none;
}
.ss-logo-variant-wrap .ss-logo-color-layer[hidden]{display:none!important}
.ss-name-logo-page .ss-color-wheel-control::after{
  content:"Open color wheel";
  margin-left:auto;
  color:rgba(255,255,255,.72);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
  pointer-events:none;
}
@media(max-width:520px){
  .ss-name-logo-page .ss-color-wheel-control::after{display:none}
}


/* Keep the selected punched style obvious and make the two choices easy to tap. */
.ss-logo-style-card input:focus-visible + .ss-logo-style-thumb {
  outline: 3px solid #70e3cf;
  outline-offset: 3px;
}
.ss-logo-style-card[hidden],
.ss-logo-style-control[hidden] { display: none !important; }
.ss-logo-style-art { transition: opacity .16s ease, filter .16s ease; }

/* v2.20 crisp logo preview refinements for Standard/Holographic */
.ss-logo-only-preview[data-finish="standard-gloss"] .ss-logo-preview-halo{display:none}
.ss-logo-only-preview[data-finish="standard-gloss"] .ss-logo-preview-stage,
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-stage{
  background: rgba(8,10,26,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-halo{
  inset: 20%;
  filter: blur(9px);
  opacity: .18;
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-halo--inner{
  opacity:.12;
}
.ss-logo-preview-stage .ss-recolorable-logo,
.ss-logo-variant-wrap .ss-recolorable-logo,
.ss-logo-variant-wrap .ss-logo-color-layer{
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: optimizeQuality;
}
.ss-logo-preview-stage .ss-recolorable-logo{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.34));
}
.ss-logo-variant-wrap .ss-logo-color-layer[data-logo-variant="standard-holo"]{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.34));
}
.ss-logo-style-thumb{min-height:84px;padding:.45rem;background:#d9d9dd}
.ss-logo-style-thumb--light{background:#d9d9dd}
.ss-logo-style-thumb img{
  height:70px;
  object-fit:contain;
  image-rendering:auto;
  filter:none;
}
@media(max-width:390px){.ss-logo-style-thumb img{height:58px}}


/* v2.21 fixed finish behavior and explicit RGB controls */
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-stage{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-halo{
  display: none !important;
}
.ss-rgb-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
  margin-top:.45rem;
}
.ss-rgb-fields>span{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.35rem;
  min-width:0;
  color:rgba(255,255,255,.76);
  font-size:.72rem;
  font-weight:900;
}
.ss-rgb-fields input{
  width:100% !important;
  min-width:0;
  min-height:40px;
  padding:.42rem .45rem !important;
  color:#fff !important;
  background:#0e1028 !important;
  border:1px solid rgba(112,227,207,.28) !important;
  border-radius:8px !important;
  text-align:center;
  appearance:textfield;
}
.ss-rgb-fields input::-webkit-inner-spin-button,
.ss-rgb-fields input::-webkit-outer-spin-button{opacity:1}
.ss-rgb-fields.is-transparent-role{opacity:.48}
.ss-rgb-fields.is-transparent-role input{cursor:default !important}
@media(max-width:390px){
  .ss-rgb-fields{gap:.3rem}
  .ss-rgb-fields>span{grid-template-columns:1fr;gap:.2rem;text-align:center}
  .ss-rgb-fields input{min-height:38px;padding:.35rem !important}
}

/* v2.22: in-page RGB wheel so phones do not open the device HSV/HSB picker. */
.ss-color-wheel-control{
  cursor:pointer !important;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ss-color-wheel-control:focus-visible{
  outline:3px solid #70e3cf;
  outline-offset:3px;
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-stage{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.ss-logo-only-preview[data-finish="holographic"] .ss-logo-preview-halo{
  display:none !important;
}
body.ss-rgb-wheel-open{overflow:hidden}
.ss-rgb-wheel-dialog{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:clamp(.75rem,3vw,1.5rem);
  background:rgba(3,5,20,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ss-rgb-wheel-dialog[hidden]{display:none !important}
.ss-rgb-wheel-dialog__panel{
  position:relative;
  width:min(100%,430px);
  max-height:calc(100dvh - 1.5rem);
  overflow:auto;
  padding:clamp(1rem,4vw,1.4rem);
  color:#fff;
  background:linear-gradient(145deg,#151738,#090b22);
  border:1px solid rgba(112,227,207,.45);
  border-radius:20px;
  box-shadow:0 26px 90px rgba(0,0,0,.58);
}
.ss-rgb-wheel-dialog__panel h2{
  margin:.2rem 2.25rem .25rem 0;
  color:#70e3cf;
  font-size:clamp(1.5rem,6vw,2rem);
  line-height:1;
}
.ss-rgb-wheel-dialog__label{
  margin:.2rem 0 1rem;
  color:#d9dceb;
  font-weight:800;
}
.ss-rgb-wheel-dialog__close{
  position:absolute;
  top:.7rem;
  right:.7rem;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}
.ss-rgb-wheel-canvas{
  display:block;
  width:min(100%,280px);
  height:auto;
  margin:0 auto .85rem;
  border-radius:50%;
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  touch-action:none;
  cursor:crosshair;
}
.ss-rgb-wheel-brightness{
  display:grid;
  gap:.4rem;
  margin:.35rem 0 .8rem;
  color:#d9dceb;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ss-rgb-wheel-brightness input{
  width:100%;
  accent-color:#70e3cf;
}
.ss-rgb-wheel-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
}
.ss-rgb-wheel-values label{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.35rem;
  color:#fff;
  font-weight:900;
}
.ss-rgb-wheel-values input{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:.45rem !important;
  color:#fff !important;
  background:#080a20 !important;
  border:1px solid rgba(112,227,207,.35) !important;
  border-radius:9px !important;
  text-align:center;
}
.ss-rgb-wheel-current{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  margin:.85rem 0;
}
.ss-rgb-wheel-current span{
  width:38px;
  height:38px;
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.ss-rgb-wheel-current output{
  padding:.5rem .75rem;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font:800 .84rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ss-rgb-wheel-actions{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:.65rem;
}
.ss-rgb-wheel-actions .button{
  min-height:46px;
  margin:0 !important;
  border-radius:999px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.ss-rgb-wheel-actions .button.alt{
  color:#071018 !important;
  background:#70e3cf !important;
}
@media(max-width:420px){
  .ss-rgb-wheel-dialog{padding:.45rem}
  .ss-rgb-wheel-dialog__panel{max-height:calc(100dvh - .9rem);border-radius:16px}
  .ss-rgb-wheel-canvas{width:min(72vw,250px)}
  .ss-rgb-wheel-values{gap:.35rem}
  .ss-rgb-wheel-values label{grid-template-columns:1fr;text-align:center;font-size:.75rem}
  .ss-rgb-wheel-actions{grid-template-columns:1fr}
}

/* v2.22.1 remove the dark underlay beneath the logo preview so the artwork stays crisp. */
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-halo{
  display:none !important;
}
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-stage .ss-recolorable-logo,
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-variant-wrap .ss-logo-color-layer[data-logo-variant="flo"]{
  filter:none !important;
  mix-blend-mode:normal !important;
}
.ss-logo-only-preview[data-flo-print="transparent"] .ss-logo-preview-stage .ss-recolorable-logo,
.ss-logo-only-preview[data-flo-print="transparent"] .ss-logo-variant-wrap .ss-logo-color-layer[data-logo-variant="flo"]{
  opacity:.96 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}


/* v2.22.2 make the fluorescent preview stage fully transparent behind the logo. */
.ss-logo-only-preview[data-finish^="flo-"] .ss-logo-preview-stage{background:transparent !important;border:0 !important;outline:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}


/* v2.23.3 cursor safety: never show the browser prohibited/no-drop cursor in the Name/Logo customizer. */
.ss-name-logo-page [disabled]{
  cursor:default !important;
  pointer-events:none !important;
}
.ss-name-logo-page [readonly]{
  cursor:default !important;
}
.ss-name-logo-page .ss-color-wheel-control,
.ss-name-logo-page .ss-flo-print-options label,
.ss-name-logo-page .ss-holo-clear-options label,
.ss-name-logo-page .ss-font-choice,
.ss-name-logo-page .ss-logo-style-card{
  cursor:pointer !important;
}
.ss-name-logo-page input[type="text"]:not([readonly]),
.ss-name-logo-page input[type="number"]:not([readonly]),
.ss-name-logo-page textarea:not([readonly]){
  cursor:text !important;
}

/* v2.23.4 — show a CMYK print reference alongside the existing color wheel. */
.ss-rgb-wheel-cmyk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-top:.7rem;padding:.65rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04)}
.ss-rgb-wheel-cmyk>span{grid-column:1/-1;color:#aeb4ca;font-size:.67rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ss-rgb-wheel-cmyk output{padding:.35rem .2rem;color:#fff;background:#080a1e;border-radius:8px;text-align:center;font-size:.7rem;font-weight:800}


/* v2.24 — CMYK picker controls and full-brightness logo previews. */
.ss-rgb-wheel-cmyk label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.35rem;color:#fff;font-weight:900}
.ss-rgb-wheel-cmyk input{width:100%;min-width:0;min-height:44px;padding:.45rem!important;color:#fff!important;background:#080a20!important;border:1px solid rgba(112,227,207,.35)!important;border-radius:9px!important;text-align:center;font-weight:800}
.ss-rgb-wheel-cmyk output{display:none!important}
.ss-name-logo-page .ss-logo-preview-stage .ss-recolorable-logo,
.ss-name-logo-page .ss-logo-variant-wrap .ss-logo-color-layer,
.ss-name-logo-page .ss-logo-style-thumb img{opacity:1!important;filter:brightness(1)!important}
@media(max-width:420px){.ss-rgb-wheel-cmyk label{grid-template-columns:1fr;text-align:center;font-size:.75rem}}

/* v2.24 inline CMYK numeric controls. */
.ss-cmyk-fields{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:520px){.ss-cmyk-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

.ss-name-logo-product-image-wrap img{opacity:1!important;filter:brightness(1)!important}