/** Shopify CDN: Minification failed

Line 4311:0 Unexpected "}"

**/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;900&display=swap");

/*
  CONECTIV VINYL PORTAL — READABLE CSS
  -------------------------------------
  This stylesheet is intentionally expanded and commented for beginners.
  The visual rules are unchanged from the working version; only formatting
  and explanatory section labels were added.

  IMPORTANT:
  • Keep this asset filename exactly: conectiv-vinyl-portal-2.4.css
  • Class names beginning with .cvw__ are connected to the Liquid/JavaScript.
  • Changing a class name here without changing the Liquid can break styling.
  • Rules near the bottom may intentionally override earlier shared rules.

  QUICK MAP:
  Global/layout .............. beginning of file
  Step 3 Pre-production ...... search "STEP 3"
  Step 4 Vinyl colors ........ search "STEP 4"
  Step 5 Center labels ....... search "STEP 5"
  Step 6 Sleeves/inserts ..... search "STEP 6"
  Step 7 Stickers/jackets .... search "STEP 7"
  Step 8 Assembly ............ search "STEP 8"
  Step 9 Uploads ............. search "STEP 9"
  Step 10 Review/timeline .... search "STEP 10"
*/

/* ==============================================================================
   GLOBAL FOUNDATION — theme variables, typography, reset, and page background
   ============================================================================== */

.cvw {
  --cvw-card: rgba(255,255,255,.055);
  --cvw-border: rgba(255,255,255,.12);
  position: relative;
  min-height: 100vh;
  background: var(--cvw-bg);
  color: var(--cvw-text);
  font-family: "Montserrat",Arial,sans-serif;
  overflow: hidden;
  padding-top: var(--cvw-section-pt);
  padding-bottom: var(--cvw-section-pb);
}

.cvw {
  font-size: var(--cvw-body-font-size);
}

.cvw p,
.cvw__card-text,
.cvw__note,
.cvw__lead {
  font-size: var(--cvw-body-font-size);
}

.cvw small,
.cvw__field>span,
.cvw__upload>span,
.cvw__eyebrow,
.cvw__step-btn {
  font-size: var(--cvw-small-font-size);
}

.cvw .cvw__input,
.cvw .cvw__upload input,
.cvw .cvw__vinyl-search input {
  font-size: var(--cvw-input-font-size);
  color: var(--cvw-input-text) !important;
  -webkit-text-fill-color: var(--cvw-input-text) !important;
}

.cvw .cvw__input::placeholder,
.cvw .cvw__upload input::placeholder,
.cvw .cvw__vinyl-search input::placeholder {
  color: var(--cvw-input-placeholder) !important;
  -webkit-text-fill-color: var(--cvw-input-placeholder) !important;
  opacity: 1;
}

.cvw *,
.cvw *:before,
.cvw *:after {
  box-sizing: border-box;
}

.cvw button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.cvw a {
  color: inherit;
  text-decoration: none;
}

.cvw__grid-bg {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background-image: linear-gradient(color-mix(in oklab,var(--cvw-primary) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--cvw-primary) 9%,transparent) 1px,transparent 1px);
  background-size: 48px 48px;
}

.cvw__glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 999px;
  filter: blur(24px);
  pointer-events: none;
}

.cvw__glow--one {
  top: -180px;
  left: -180px;
  background: radial-gradient(closest-side,color-mix(in oklab,var(--cvw-primary) 28%,transparent),transparent);
}

.cvw__glow--two {
  right: -180px;
  bottom: -180px;
  background: radial-gradient(closest-side,color-mix(in oklab,var(--cvw-secondary) 24%,transparent),transparent);
}

.cvw__wrap {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ==============================================================================
   HEADER AND STEP NAVIGATION — brand bar, desktop stepper, and main layout
   ============================================================================== */

.cvw__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cvw-border);
}

.cvw__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cvw__brand-name {
  font-family: "Montserrat",Arial,sans-serif;
  letter-spacing: .24em;
  font-size: 13px;
  color: var(--cvw-primary);
}

.cvw__brand-tag {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  color: var(--cvw-muted);
}

.cvw__ghost {
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--cvw-muted);
}

.cvw__stepper {
  border-bottom: 1px solid var(--cvw-border);
  margin-bottom: 32px;
}

.cvw__stepper-list {
  display: flex;
  gap: 8px;
  list-style: none;
  overflow: auto;
  padding: 14px 0;
  margin: 0;
}

.cvw__step-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 12px;
}

.cvw__step.is-active .cvw__step-btn {
  border-color: var(--cvw-primary);
  color: var(--cvw-primary);
  background: color-mix(in oklab,var(--cvw-primary) 8%,transparent);
  box-shadow: 0 0 20px color-mix(in oklab,var(--cvw-primary) 26%,transparent);
}

.cvw__step.is-done .cvw__step-btn {
  color: var(--cvw-accent);
}

.cvw__step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
}

.cvw__step-label,
.cvw__eyebrow,
.cvw__preview-head>span,
.cvw__field>span,
.cvw__upload>span,
.cvw__stats span {
  display: inline-flex;
  align-items: center;
}

.cvw__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

@media (min-width:1040px) {
  .cvw__layout {
    grid-template-columns: .9fr 1.25fr;
  }
}


/* ==============================================================================
   LIVE PREVIEW — record, picture disc, center label, and estimate statistics
   ============================================================================== */

.cvw__preview {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cvw__preview-card {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--cvw-border);
  border-radius: var(--cvw-radius);
  background: color-mix(in oklab,var(--cvw-panel) 88%,transparent);
  overflow: hidden;
  padding: 22px;
  backdrop-filter: blur(16px);
}

.cvw__preview-head,
.cvw__preview-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cvw-muted);
}

.cvw__preview-foot {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
}

.cvw__record {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.cvw__disc {
  position: relative;
  width: var(--cvw-disc-size);
  height: var(--cvw-disc-size);
  border-radius: 50%;
  animation: cvw-spin 12s linear infinite;
  box-shadow: 0 0 75px color-mix(in oklab,currentColor 22%,transparent),inset 0 0 82px rgba(0,0,0,.58);
  transition: background .25s,width .25s,height .25s;
  overflow: hidden;
}

.cvw__picture-disc-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cvw__picture-disc-placeholder {
  position: absolute;
  inset: 18%;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 2px dashed rgba(17,24,39,.28);
  border-radius: 50%;
  color: #111827;
  text-align: center;
  font-family: "Montserrat",Arial,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cvw__picture-disc-placeholder strong {
  font-size: clamp(13px,2vw,20px);
}

.cvw__picture-disc-placeholder span {
  font-size: clamp(9px,1.25vw,13px);
  font-weight: 800;
}

.cvw__disc.is-picture-disc .cvw__center {
  display: none;
}

.cvw__disc.is-picture-disc .cvw__groove {
  z-index: 3;
  border-color: rgba(0,0,0,.2);
}

.cvw__disc.is-picture-disc .cvw__pin {
  z-index: 5;
}

.cvw__groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.31);
}

.cvw__center {
  position: absolute;
  inset: 32%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--cvw-secondary);
  font-family: "Montserrat",Arial,sans-serif;
  color: #0b0b14;
  transition: all .22s;
}

.cvw__center--circle {
  border-radius: 50%;
}

.cvw__center span {
  font-size: 10px;
  letter-spacing: .22em;
}

.cvw__center strong {
  font-size: 12px;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cvw__center em {
  font-size: 9px;
  font-style: normal;
  opacity: .72;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cvw__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cvw-bg);
}

.cvw__stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.cvw__stats div {
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  padding: 14px;
  background: var(--cvw-card);
}

.cvw__stats span {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cvw-muted);
}

.cvw__stats strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  color: var(--cvw-primary);
}

.cvw__cart-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* ==============================================================================
   SHARED STEP PANELS AND CARDS — common structure used across the wizard
   ============================================================================== */

.cvw__panel {
  display: none;
  padding: var(--cvw-step-pt) var(--cvw-step-pr) var(--cvw-step-pb) var(--cvw-step-pl);
  border: 1px solid var(--cvw-border);
  border-radius: var(--cvw-radius);
  background: color-mix(in oklab,var(--cvw-panel) 80%,transparent);
  backdrop-filter: blur(16px);
  animation: cvw-fade .28s ease-out;
}

.cvw__panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cvw__eyebrow {
  margin: 0;
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.cvw h1,
.cvw h2 {
  color: var(--cvw-heading-text);
  margin: 0;
  font-size: clamp(32px,4.6vw,56px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.cvw h2 {
  font-size: clamp(28px,4vw,48px);
}

.cvw h1 span,
.cvw h2 span {
  color: var(--cvw-primary);
  text-shadow: 0 0 16px color-mix(in oklab,var(--cvw-primary) 55%,transparent);
}

.cvw__lead {
  margin: 0;
  color: var(--cvw-muted);
  font-size: 16px;
  max-width: 62ch;
}

.cvw__benefits,
.cvw__grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width:700px) {
  .cvw__benefits,
  .cvw__grid-2 {
    grid-template-columns: repeat(2,1fr);
  }
}

.cvw__benefit,
.cvw__card,
.cvw__summary div,
.cvw__note,
.cvw__upload {
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: var(--cvw-card);
  padding: 16px;
}

.cvw__benefit strong,
.cvw__benefit span {
  display: block;
}

.cvw__benefit span,
.cvw__card-text,
.cvw__note {
  color: var(--cvw-muted);
  font-size: 14px;
}


/* ==============================================================================
   STEP 3: PRE-PRODUCTION — lacquer, audio, test pressing, and compact cards
   ============================================================================== */

.cvw__panel--compact,
.cvw__panel--compact.is-active {
  gap: 14px;
}

.cvw__panel--compact .cvw__lead {
  font-size: 14px;
  max-width: 70ch;
}

.cvw__panel--compact .cvw__grid-2 {
  gap: 10px;
}

.cvw__panel--compact .cvw__card {
  padding: 11px 12px;
  gap: 6px;
  border-radius: 12px;
  min-height: 0;
}

.cvw__panel--compact .cvw__card-title {
  font-size: 14px;
  line-height: 1.18;
}

.cvw__panel--compact .cvw__card-title em {
  font-size: 10px;
  line-height: 1.25;
  margin-top: 2px;
}

.cvw__panel--compact .cvw__price-pill {
  font-size: 9px;
  padding: 5px 8px;
}

.cvw__panel--compact .cvw__card-text {
  display: none;
}

.cvw__panel--compact .cvw__preprod-heading {
  margin: 4px 0 0;
  padding-bottom: 7px;
}

.cvw__panel--compact .cvw__preprod-heading strong {
  font-size: 11px;
}

.cvw__panel--compact .cvw__preprod-heading span {
  font-size: 9px;
}

@media (min-width:900px) {
  .cvw__panel--compact .cvw__grid-2 {
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width:650px) {
  .cvw__panel--compact .cvw__card {
    padding: 10px;
  }
  .cvw__panel--compact .cvw__grid-2 {
    gap: 9px;
  }
}


/* ==============================================================================
   STEP 6: SLEEVES AND INSERTS — sleeve cards and responsive layout
   ============================================================================== */

.cvw__panel--sleeves .cvw__grid-2 {
  gap: 9px;
}

.cvw__panel--sleeves .cvw__card {
  padding: 10px 11px;
}

.cvw__panel--sleeves .cvw__price-pill {
  margin-top: 1px;
}

.cvw__panel--sleeves .cvw__tier-note--sleeves {
  margin-top: 8px;
  padding: 12px 0 0;
  border-bottom: 0;
}

@media (min-width:980px) {
  .cvw__panel--sleeves .cvw__grid-2 {
    grid-template-columns: repeat(4,1fr);
  }
  .cvw__panel--sleeves .cvw__preprod-heading,
  .cvw__panel--sleeves .cvw__tier-note {
    grid-column: 1/-1;
  }
}


/* ==============================================================================
   STEP 7: STICKERS AND JACKETS — jacket cards, tier notes, and headings
   ============================================================================== */

.cvw__panel--jackets .cvw__grid-2 {
  gap: 9px;
}

.cvw__panel--jackets .cvw__card {
  padding: 10px 11px;
}

.cvw__panel--jackets .cvw__price-pill {
  margin-top: 1px;
}

.cvw__panel--jackets .cvw__tier-note {
  margin-top: 6px;
  padding: 12px 0;
}

.cvw__panel--jackets .cvw__preprod-heading span {
  max-width: 760px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 12px;
}

.cvw__panel--jackets .cvw__preprod-heading--jacket {
  margin-top: 24px;
  padding-top: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 3px;
}

.cvw__panel--jackets .cvw__preprod-heading--jacket span {
  display: block;
  margin-top: 0;
}

@media (min-width:980px) {
  .cvw__panel--jackets .cvw__grid-2 {
    grid-template-columns: repeat(3,1fr);
  }
  .cvw__panel--jackets .cvw__preprod-heading,
  .cvw__panel--jackets .cvw__tier-note {
    grid-column: 1/-1;
  }
}


/* ==============================================================================
   STEP 8: ASSEMBLY AND FINISHING — assembly cards and headings
   ============================================================================== */

.cvw__panel--assembly .cvw__grid-2 {
  gap: 9px;
}

.cvw__panel--assembly .cvw__card {
  padding: 10px 11px;
}

.cvw__panel--assembly .cvw__price-pill {
  margin-top: 1px;
}

.cvw__panel--assembly .cvw__assembly-heading {
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 3px;
}

.cvw__panel--assembly .cvw__assembly-heading span {
  display: block;
  max-width: 760px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 12px;
  margin-top: 0;
}

.cvw__panel--assembly .cvw__assembly-heading--spaced {
  margin-top: 22px;
  padding-top: 8px;
}

@media (min-width:980px) {
  .cvw__panel--assembly .cvw__grid-2 {
    grid-template-columns: repeat(3,1fr);
  }
  .cvw__panel--assembly .cvw__preprod-heading {
    grid-column: 1/-1;
  }
}


/* ==============================================================================
   STEP 4 SUPPORT: VINYL CATALOG — catalog viewer and color-card layout
   ============================================================================== */

.cvw__panel--catalog .cvw__catalog-viewer {
  margin-top: -4px;
}

.cvw__panel--catalog .cvw__colorbook {
  padding: 8px 12px;
  font-size: 10px;
}

.cvw__panel--catalog .cvw__grid-2 {
  gap: 10px;
}

.cvw__panel--catalog .cvw__card {
  position: relative;
}

.cvw__panel--catalog .cvw__price-pill {
  margin-top: auto;
}

@media (min-width:900px) {
  .cvw__panel--catalog .cvw__grid-2 {
    grid-template-columns: repeat(3,1fr);
  }
}

@media (min-width:1200px) {
  .cvw__panel--catalog .cvw__grid-2 {
    grid-template-columns: repeat(4,1fr);
  }
}


/* ==============================================================================
   SHARED SECTION HEADINGS — labels used inside multiple steps
   ============================================================================== */

.cvw__preprod-heading {
  grid-column: 1/-1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 2px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab,var(--cvw-primary) 42%,var(--cvw-border));
  background: transparent;
  color: var(--cvw-heading-text);
}

.cvw__preprod-heading strong {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cvw-primary);
  text-shadow: 0 0 12px color-mix(in oklab,var(--cvw-primary) 38%,transparent);
}

.cvw__preprod-heading span {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cvw-muted);
}

@media (max-width:650px) {
  .cvw__preprod-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}


/* ==============================================================================
   FORM CONTROLS — inputs, ranges, chips, segmented buttons, and selectable cards
   ============================================================================== */

.cvw__field {
  display: block;
}

.cvw__field>span,
.cvw__upload>span {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cvw__input,
.cvw__upload input {
  width: 100%;
  border: 1px solid var(--cvw-border);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  color: var(--cvw-input-text);
  padding: 13px 14px;
}

.cvw__input::placeholder {
  color: var(--cvw-input-placeholder);
  opacity: 1;
}

.cvw__input:focus {
  outline: 0;
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--cvw-primary) 22%,transparent);
}

.cvw__range {
  width: 100%;
  accent-color: var(--cvw-primary);
}

.cvw__range-labels {
  display: flex;
  justify-content: space-between;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
}

.cvw__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.cvw__chip,
.cvw__seg-btn {
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--cvw-muted);
  transition: .18s;
}

.cvw__chip.is-on,
.cvw__seg-btn.is-on,
.cvw__card.is-on,
.cvw__color.is-on {
  border-color: var(--cvw-primary);
  color: var(--cvw-primary);
  background: color-mix(in oklab,var(--cvw-primary) 7%,transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--cvw-primary) 60%,transparent),0 0 24px color-mix(in oklab,var(--cvw-primary) 20%,transparent);
}

.cvw__format-grid {
  gap: 22px;
}

.cvw__field--album-divider {
  border-top: 1px solid var(--cvw-border);
  padding-top: 18px;
}

@media (min-width:700px) {
  .cvw__format-grid {
    column-gap: 28px;
  }
  .cvw__field--album-divider {
    border-top: 0;
    border-left: 1px solid var(--cvw-border);
    padding-top: 0;
    padding-left: 24px;
  }
}

.cvw__seg {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.cvw__seg-btn {
  border-radius: 12px;
  text-align: left;
}

.cvw__seg-btn small {
  display: block;
  margin-top: 3px;
  color: var(--cvw-muted);
  font-size: 11px;
}

.cvw__card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cvw__card-title {
  font-weight: 700;
}

.cvw__card-title em {
  display: block;
  color: var(--cvw-muted);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.cvw__price-pill {
  align-self: flex-start;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 6px 9px;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  color: var(--cvw-accent);
}


/* ==============================================================================
   STEP 5: CENTER LABELS — label designer, sales option, pricing, and notes
   ============================================================================== */

.cvw__colorbook {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--cvw-primary);
  border-radius: 999px;
  padding: 11px 15px;
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.cvw__label-record-designer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 30%,var(--cvw-border));
  border-radius: 16px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 7%,transparent),rgba(0,0,0,.15));
  padding: 12px;
}

.cvw__label-record-status {
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cvw__label-sales-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px dashed color-mix(in oklab,var(--cvw-primary) 65%,var(--cvw-border));
  background: color-mix(in oklab,var(--cvw-primary) 6%,var(--cvw-card));
  border-radius: 14px;
  padding: 12px;
  color: var(--cvw-text);
  transition: .18s;
}

.cvw__label-sales-card:hover {
  border-style: solid;
  border-color: var(--cvw-primary);
  transform: translateY(-1px);
  box-shadow: 0 0 20px color-mix(in oklab,var(--cvw-primary) 16%,transparent);
}

.cvw__label-sales-card span:last-child {
  min-width: 0;
}

.cvw__label-sales-card strong,
.cvw__label-sales-card em {
  display: block;
}

.cvw__label-sales-card em {
  color: var(--cvw-muted);
  font-size: 11px;
  font-style: normal;
}

.cvw__label-sales-swatch {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid var(--cvw-primary);
  background: radial-gradient(circle at 35% 30%,#fff 0 8%,transparent 9%),linear-gradient(135deg,var(--cvw-primary),var(--cvw-secondary));
  color: #071015;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
}

.cvw__label-picture-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-left: 3px solid var(--cvw-primary);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.035);
  padding: 11px 13px;
}

.cvw__label-picture-note strong {
  flex: 0 0 auto;
  color: var(--cvw-heading-text);
  font-size: 13px;
}

.cvw__label-picture-note span {
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width:650px) {
  .cvw__label-picture-note {
    flex-direction: column;
    gap: 3px;
  }
  .cvw__label-record-status {
    width: 100%;
  }
}

.cvw__label-price-note {
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 35%,var(--cvw-border));
  border-radius: 16px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 10%,transparent),color-mix(in oklab,var(--cvw-secondary) 7%,transparent));
  padding: 18px;
  box-shadow: 0 0 30px color-mix(in oklab,var(--cvw-primary) 12%,transparent);
}

.cvw__label-price-note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--cvw-border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.cvw__label-price-note-head span {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cvw-primary);
}

.cvw__label-price-note-head strong {
  font-size: 13px;
  color: var(--cvw-heading-text);
  font-weight: 700;
}

.cvw__label-price-note-body p {
  margin: 0;
  color: var(--cvw-muted);
  font-size: 14px;
}

.cvw__label-price-note-body p strong {
  color: var(--cvw-heading-text);
}

.cvw__label-price-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
}

@media (min-width:760px) {
  .cvw__label-price-tiers {
    grid-template-columns: repeat(4,1fr);
  }
}

.cvw__label-price-tiers span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--cvw-border);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  padding: 12px;
}

.cvw__label-price-tiers b {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--cvw-accent);
}

.cvw__label-price-tiers em {
  font-style: normal;
  font-weight: 800;
  color: var(--cvw-heading-text);
}

.cvw__label-price-extra {
  border-top: 1px solid var(--cvw-border);
  padding-top: 12px;
}

.cvw__tier-note {
  grid-column: 1/-1;
  border-top: 1px solid var(--cvw-border);
  border-bottom: 1px solid var(--cvw-border);
  padding: 14px 0;
  margin: 4px 0 2px;
  color: var(--cvw-muted);
}

.cvw__tier-note strong {
  display: block;
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cvw__tier-note span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}


/* ==============================================================================
   STEP 4: VINYL COLORS — colorbook, swatches, catalog effects, and color grid
   ============================================================================== */

.cvw__colorbook-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cvw__colorbook-option {
  max-width: 360px;
}

.cvw__catalog-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cvw__catalog-frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: var(--cvw-card);
}

@media (max-width:650px) {
  .cvw__catalog-frame {
    min-height: 320px;
  }
}

.cvw__disc.is-catalog-mixture {
  background: conic-gradient(from 25deg,#111827,#e11d48,#2563eb,#fde047,#16a34a,#111827) !important;
}

/* Neon and Glow backgrounds are generated dynamically by JavaScript from the
   customer's selected color. Never override them with a fixed background. */
.cvw__disc.is-catalog-neon,
.cvw__disc.is-catalog-glow {
  background-color: var(--cvw-effect-1, #76ff03);
}

/* The splatter preview background is generated dynamically by JavaScript.
   Do not use !important here, or the customer-selected base color cannot update. */
.cvw__disc.is-catalog-splatter {
  background-color: var(--cvw-effect-1, #111827);
}

/* Metallic, glitter, and iridescent backgrounds are generated dynamically
   by JavaScript from the active family and selected finish. Do not use a
   fixed background or !important here because it blocks live preview updates. */
.cvw__disc.is-catalog-metallic {
  background-color: var(--cvw-effect-1, #bfc5cc);
}

.cvw__disc.is-catalog-picture {
  background: radial-gradient(circle at 50% 50%,#f8fafc 0 18%,transparent 19%),conic-gradient(#111827,#fb7185,#60a5fa,#fbbf24,#111827) !important;
}

.cvw__disc.is-catalog-laser {
  /* Laser color and etched highlights are generated dynamically by JavaScript. */
  background-color: var(--cvw-effect-1, #111111);
}

.cvw__disc.is-catalog-custom {
  background: conic-gradient(from 10deg,#0f172a,#a855f7,#22d3ee,#f0abfc,#0f172a) !important;
}

.cvw__swatch--marble {
  background: radial-gradient(circle at 30% 28%,#f8fafc 0 12%,transparent 13%),radial-gradient(circle at 68% 72%,#94a3b8 0 11%,transparent 12%),conic-gradient(from 22deg,#111827,#64748b,#f8fafc,#94a3b8,#111827);
}

.cvw__disc.is-marble {
  background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.95) 0 6%,transparent 7%),radial-gradient(circle at 70% 76%,rgba(255,255,255,.8) 0 9%,transparent 10%),conic-gradient(from 35deg,#0f172a,#64748b,#f8fafc,#94a3b8,#111827,#e5e7eb,#0f172a) !important;
}

.cvw__color-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

@media (min-width:760px) {
  .cvw__color-grid {
    grid-template-columns: repeat(4,1fr);
  }
}

.cvw__color {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--cvw-border);
  background: var(--cvw-card);
  border-radius: 14px;
  padding: 12px;
}

.cvw__swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.38);
  flex: 0 0 auto;
}

.cvw__color strong,
.cvw__color em {
  display: block;
}

.cvw__color em {
  color: var(--cvw-muted);
  font-size: 11px;
  font-style: normal;
}


/* ==============================================================================
   STEP 10: REVIEW AND CHECKOUT — summary cards, estimate, and action buttons
   ============================================================================== */

.cvw__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width:760px) {
  .cvw__summary {
    grid-template-columns: repeat(2,1fr);
  }
}

.cvw__summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.cvw__summary span {
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.cvw__summary strong {
  text-align: right;
}

.cvw__checkout-note {
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 12px;
}

.cvw__checkout-note--warn {
  color: #fb923c;
}

.cvw__hidden-props {
  display: none;
}

.cvw__controls {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--cvw-border);
  padding-top: 18px;
}

.cvw__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 13px 19px;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cvw__button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.cvw__button--ghost {
  color: var(--cvw-muted);
}

.cvw__button--primary {
  background: var(--cvw-primary);
  color: #071015;
  border-color: var(--cvw-primary);
}

.cvw__button--checkout {
  background: var(--cvw-accent);
  color: #071015;
  border-color: var(--cvw-accent);
}

.cvw__controls [data-cvw-next] {
  margin-left: auto;
}

.cvw [hidden] {
  display: none !important;
}

@keyframes cvw-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cvw-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width:650px) {
  .cvw__wrap {
    padding: 0 14px;
  }
  .cvw__preview {
    position: relative;
    top: auto;
  }
  .cvw__preview-card {
    min-height: 420px;
  }
  .cvw__disc {
    width: min(var(--cvw-disc-size),78vw);
    height: min(var(--cvw-disc-size),78vw);
  }
  .cvw__controls {
    flex-wrap: wrap;
  }
  .cvw__button {
    width: 100%;
  }
  .cvw__controls [data-cvw-next] {
    margin-left: 0;
  }
}


/* ==============================================================================
   CONTACT SALES MODAL — standardized Help & Support form
   ============================================================================== */

.cvw__contact-modal[hidden] { display: none !important; }

.cvw__contact-link {
  display:inline; border:0; background:none; color:var(--cvw-contact-link);
  font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:0;
}
.cvw__contact-link:hover { color:var(--cvw-contact-link-hover); }
.cvw__contact-link--standalone { display:inline-flex; margin-top:10px; }
.cvw__contact-inline { display:inline; color:var(--cvw-contact-inline); margin-left:4px; }

.cvw__contact-modal {
  position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:20px;
}
.cvw__contact-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(5px);
}
.cvw__contact-dialog {
  position:relative; z-index:1; width:min(560px,100%); max-height:88vh; overflow:auto;
  border:1px solid #353535; border-radius:14px; background:#111; color:#f5f5f5;
  box-shadow:0 28px 80px rgba(0,0,0,.6); padding:22px;
}
.cvw__contact-form { display:block; padding:0; }
.cvw__contact-eyebrow {
  margin:0 0 7px !important; color:#FCE300 !important; font-size:10px !important;
  font-weight:900 !important; letter-spacing:.12em !important; line-height:1.2 !important;
}
.cvw__contact-title {
  margin:0 !important; padding:0 !important; border:0 !important; color:#f5f5f5 !important;
  font-family:inherit !important; font-size:clamp(30px,4vw,42px) !important;
  font-weight:800 !important; line-height:1.08 !important; letter-spacing:-.02em !important;
}
.cvw__contact-intro {
  margin:10px 42px 0 0 !important; color:#a6a6a6 !important; font-size:12px !important; line-height:1.55 !important;
}
.cvw__contact-close {
  position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid #353535; border-radius:50%; background:#171717; color:#f5f5f5;
  font-size:22px; line-height:1; cursor:pointer; padding:0;
}
.cvw__contact-fields {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px;
}
.cvw__contact-fields label { display:grid; gap:7px; min-width:0; }
.cvw__contact-fields label > span {
  color:#9f9f9f; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.cvw__contact-fields label > span small { text-transform:none; letter-spacing:0; font-weight:600; }
.cvw__contact-field--wide { grid-column:1 / -1; }
.cvw__contact-input {
  width:100%; min-height:44px; border:1px solid #353535; border-radius:8px; background:#111;
  color:#f5f5f5; padding:11px 12px; font:inherit; font-size:13px; box-shadow:none;
}
.cvw__contact-input::placeholder { color:#555; }
.cvw__contact-input:focus { outline:1px solid #FCE300; border-color:#FCE300; }
.cvw__contact-textarea { min-height:120px; resize:vertical; }
.cvw__contact-hidden-summary { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; }
.cvw__contact-submit {
  width:100%; min-height:42px; margin-top:16px; border:1px solid #FCE300; border-radius:8px;
  background:#FCE300; color:#080808; font:inherit; font-size:12px; font-weight:900; cursor:pointer;
}
.cvw__contact-submit:hover { filter:brightness(1.04); }
.cvw__contact-success {
  margin:14px 0 0 !important; padding:10px 12px; border:1px solid rgba(74,222,128,.45);
  border-radius:8px; color:#4ade80 !important; background:rgba(74,222,128,.07);
}
.cvw__contact-errors {
  margin:14px 0 0; padding:10px 12px; border:1px solid rgba(248,113,113,.45);
  border-radius:8px; color:#fecaca; background:rgba(248,113,113,.06);
}
@media (max-width:640px) {
  .cvw__contact-fields { grid-template-columns:1fr; }
  .cvw__contact-field--wide { grid-column:auto; }
  .cvw__contact-dialog { padding:20px 16px; }
  .cvw__contact-title { font-size:32px !important; }
}

/* ==============================================================================
   SAVED PROJECT AND ACCOUNT TOOLS — resume banner and account actions
   ============================================================================== */

.cvw__account-tools {
  margin-top: 0;
}

.cvw__account-tools .cvw__button--primary {
  box-shadow: 0 0 24px color-mix(in oklab,var(--cvw-primary) 28%,transparent);
}

.cvw__account-tools,
.cvw__resume-banner {
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 38%,var(--cvw-border));
  border-radius: 16px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 10%,transparent),color-mix(in oklab,var(--cvw-accent) 6%,transparent));
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cvw__account-tools-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  flex: 1;
}

.cvw__account-tools-copy strong,
.cvw__resume-banner strong {
  color: var(--cvw-heading-text);
  font-size: 15px;
}

.cvw__account-tools-copy span,
.cvw__resume-banner span {
  color: var(--cvw-muted);
  font-size: 14px;
  line-height: 1.45;
}

.cvw__account-tools-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cvw__account-tools-note {
  width: 100%;
  margin: 0;
  color: var(--cvw-accent);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cvw__resume-banner {
  margin-bottom: 14px;
}

.cvw__resume-banner>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 220px;
}

@media (max-width:700px) {
  .cvw__account-tools,
  .cvw__resume-banner {
    align-items: stretch;
  }
  .cvw__account-tools-actions,
  .cvw__account-tools-actions .cvw__button,
  .cvw__resume-banner .cvw__button {
    width: 100%;
  }
}


/* ==============================================================================
   MOBILE PROGRESS — mobile step status and progress track
   ============================================================================== */

.cvw__mobile-progress {
  display: none;
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: color-mix(in oklab,var(--cvw-panel) 88%,transparent);
  padding: 12px;
  margin: 0 0 18px;
}

.cvw__mobile-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cvw-muted);
}

.cvw__mobile-help {
  color: var(--cvw-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cvw__mobile-progress-track {
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}

.cvw__mobile-progress-track span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,var(--cvw-primary),var(--cvw-accent));
  border-radius: inherit;
  transition: width .25s ease;
}


/* ==============================================================================
   STEP 9: PRODUCTION FILE UPLOADS — upload guidance, choices, file rules, and validation
   ============================================================================== */

.cvw__upload-guide,
.cvw__file-rules {
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 35%,var(--cvw-border));
  border-radius: 14px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 9%,transparent),color-mix(in oklab,var(--cvw-secondary) 6%,transparent));
  padding: 15px;
  color: var(--cvw-muted);
}

.cvw__upload-guide strong {
  display: block;
  color: var(--cvw-heading-text);
  margin-bottom: 4px;
}

.cvw__upload-guide span,
.cvw__file-rules div {
  font-size: 14px;
  line-height: 1.45;
}

.cvw__upload-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 32%,var(--cvw-border));
  border-radius: 14px;
  background: color-mix(in oklab,var(--cvw-primary) 7%,var(--cvw-card));
  padding: 15px;
  cursor: pointer;
}

.cvw__upload-choice--wide {
  grid-column: 1/-1;
}

.cvw__upload-choice input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--cvw-primary);
}

.cvw__upload-choice span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cvw__upload-choice strong {
  color: var(--cvw-heading-text);
  font-size: 14px;
}

.cvw__upload-choice em {
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.cvw__upload-choice:has(input:checked) {
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--cvw-primary) 55%,transparent),0 0 22px color-mix(in oklab,var(--cvw-primary) 18%,transparent);
}

[data-cvw-upload-field].is-disabled {
  opacity: .45;
  pointer-events: none;
}

.cvw__file-rules {
  display: grid;
  gap: 8px;
  background: var(--cvw-card);
}

.cvw__file-rules strong {
  color: var(--cvw-primary);
}

.cvw__validation {
  border: 1px solid color-mix(in oklab,#fb7185 65%,var(--cvw-border));
  border-radius: 14px;
  background: rgba(251,113,133,.1);
  color: #fecdd3;
  padding: 14px;
  font-size: 14px;
}

.cvw__validation strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}


/* ==============================================================================
   STEP 10: GROUPED REVIEW SUMMARY — review sections and estimate layout
   ============================================================================== */

.cvw__summary--grouped {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.cvw__summary-group {
  border: 1px solid var(--cvw-border);
  border-radius: 16px;
  background: var(--cvw-card);
  padding: 16px;
}

.cvw__summary-group h3 {
  margin: 0 0 12px;
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cvw__summary-group div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cvw__summary-group div:last-child {
  border-bottom: 0;
}

.cvw__summary-group--estimate {
  border-color: color-mix(in oklab,var(--cvw-accent) 45%,var(--cvw-border));
  box-shadow: 0 0 24px color-mix(in oklab,var(--cvw-accent) 12%,transparent);
}

@media (min-width:760px) {
  .cvw__summary--grouped {
    grid-template-columns: repeat(2,1fr);
  }
  .cvw__summary-group--estimate {
    grid-column: 1/-1;
  }
}


/* ==============================================================================
   ACCESSIBILITY AND MOBILE ACTIONS — focus states and sticky estimate
   ============================================================================== */

.cvw__card,
.cvw__color,
.cvw__seg-btn,
.cvw__chip {
  position: relative;
}

.cvw button:focus-visible,
.cvw input:focus-visible,
.cvw textarea:focus-visible,
.cvw a:focus-visible {
  outline: 3px solid color-mix(in oklab,var(--cvw-accent) 72%,transparent);
  outline-offset: 3px;
}

.cvw__sticky-estimate {
  display: none;
}

.cvw__button--help {
  color: var(--cvw-primary);
}

@media (max-width:700px) {
  .cvw__stepper {
    display: none;
  }
  .cvw__mobile-progress {
    display: block;
  }
  .cvw {
    padding-bottom: 86px;
  }
  .cvw__sticky-estimate {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid color-mix(in oklab,var(--cvw-primary) 42%,var(--cvw-border));
    border-radius: 999px;
    background: color-mix(in oklab,var(--cvw-panel) 92%,#000);
    box-shadow: 0 16px 44px rgba(0,0,0,.45);
    padding: 10px 12px;
    backdrop-filter: blur(18px);
  }
  .cvw__sticky-estimate span {
    font-family: "Montserrat",Arial,sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cvw-muted);
  }
  .cvw__sticky-estimate strong {
    font-size: 16px;
    color: var(--cvw-accent);
    text-align: right;
  }
  .cvw__sticky-estimate button {
    border-radius: 999px;
    background: var(--cvw-primary);
    color: #071015;
    padding: 9px 12px;
    font-family: "Montserrat",Arial,sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
  }
  .cvw__button--help {
    order: 3;
  }
  .cvw__controls [data-cvw-skip] {
    order: 2;
  }
  .cvw__controls [data-cvw-next],
  .cvw__controls [data-cvw-add],
  .cvw__controls [data-cvw-checkout] {
    order: 1;
  }
  .cvw__controls [data-cvw-prev] {
    order: 4;
  }
}


/* ==============================================================================
   STEP 4: OPAQUE / TRANSPARENT / SPECIAL EFFECTS — tab and vinyl choice interface
   ============================================================================== */

.cvw__vinyl-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  padding: 6px;
  margin: 18px 0 22px;
  border: 1px solid var(--cvw-border);
  border-radius: 16px;
  background: rgba(0,0,0,.2);
}

.cvw__vinyl-tab {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--cvw-muted);
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  transition: .2s ease;
}

.cvw__vinyl-tab:hover,
.cvw__vinyl-tab:focus-visible {
  color: var(--cvw-heading-text);
  outline: 2px solid color-mix(in oklab,var(--cvw-primary) 65%,transparent);
  outline-offset: 2px;
}

.cvw__vinyl-tab.is-on {
  background: color-mix(in oklab,var(--cvw-card) 88%,#000);
  color: var(--cvw-heading-text);
  box-shadow: 0 4px 18px rgba(0,0,0,.24);
}

.cvw__vinyl-category[hidden] {
  display: none !important;
}

.cvw__vinyl-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cvw-border);
}

.cvw__vinyl-section-head strong {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cvw-primary);
}

.cvw__vinyl-section-head span {
  font-size: 12px;
  color: var(--cvw-muted);
}

.cvw__vinyl-section-head--special {
  margin-top: 30px;
}

.cvw__vinyl-choice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.cvw__vinyl-choice {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--cvw-border);
  border-radius: 16px;
  background: var(--cvw-card);
  padding: 8px;
  text-align: left;
  color: var(--cvw-text);
  cursor: pointer;
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.cvw__vinyl-choice:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab,var(--cvw-primary) 48%,var(--cvw-border));
}

.cvw__vinyl-choice:focus-visible {
  outline: 2px solid var(--cvw-primary);
  outline-offset: 2px;
}

.cvw__vinyl-choice.is-on {
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab,var(--cvw-primary) 28%,transparent),0 12px 28px rgba(0,0,0,.22);
}

.cvw__vinyl-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1.35/1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: #111;
  box-shadow: inset 0 0 22px rgba(0,0,0,.24);
  overflow: hidden;
}

.cvw__vinyl-swatch--transparent {
  background-image: linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.1) 75%),linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.1) 75%);
  background-size: 16px 16px;
  background-position: 0 0,8px 8px;
}

.cvw__vinyl-choice-name {
  display: block;
  min-height: 32px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
  color: var(--cvw-heading-text);
}

.cvw__vinyl-choice small {
  display: block;
  margin-top: -5px;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 9px;
  letter-spacing: .07em;
}

.cvw__vinyl-choice--special .cvw__vinyl-swatch {
  box-shadow: inset 0 0 26px rgba(0,0,0,.18),0 0 14px color-mix(in oklab,var(--cvw-primary) 10%,transparent);
}

.cvw__special-color-config {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 55%,var(--cvw-border));
  border-radius: 18px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 9%,transparent),rgba(0,0,0,.18));
  box-shadow: 0 0 30px color-mix(in oklab,var(--cvw-primary) 10%,transparent);
}

.cvw__special-color-config[hidden] {
  display: none !important;
}

.cvw__special-color-config select.cvw__input {
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
}

.cvw__special-color-config select.cvw__input option {
  color: #1f2937;
  background: #ffffff;
}

.cvw__special-color-note {
  margin-bottom: 16px;
}

.cvw__special-color-note strong {
  display: block;
  margin-bottom: 7px;
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cvw__special-color-note p {
  margin: 0;
  color: var(--cvw-muted);
  font-size: 14px;
  line-height: 1.6;
}

.cvw__special-contact {
  margin-top: 4px;
  border: 1px solid var(--cvw-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--cvw-primary);
  padding: 11px 16px;
  font-weight: 900;
  cursor: pointer;
}

.cvw__special-contact:hover {
  background: var(--cvw-primary);
  color: #0b0b0b;
}

.cvw__disc.is-transparent-vinyl {
  box-shadow: 0 0 75px rgba(142,213,255,.28),inset 0 0 58px rgba(255,255,255,.1),inset 0 0 82px rgba(0,0,0,.35);
}

.cvw__disc.is-special-vinyl {
  transition: background .28s ease,width .25s,height .25s,box-shadow .28s ease;
}

@media (max-width:760px) {
  .cvw__vinyl-choice-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .cvw__vinyl-choice-name {
    min-height: auto;
  }
}

@media (max-width:430px) {
  .cvw__vinyl-choice-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .cvw__vinyl-choice {
    padding: 7px;
  }
  .cvw__vinyl-choice-name {
    font-size: 12px;
  }
}

.cvw__vinyl-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(78px,1fr));
  gap: 12px 8px;
  align-items: start;
}

.cvw__vinyl-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 7px 4px 8px;
  text-align: center;
  color: var(--cvw-text);
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,transform .18s ease;
}

.cvw__vinyl-choice:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab,var(--cvw-primary) 28%,transparent);
  background: color-mix(in oklab,var(--cvw-card) 72%,transparent);
}

.cvw__vinyl-choice.is-on {
  border-color: color-mix(in oklab,var(--cvw-primary) 42%,transparent);
  background: color-mix(in oklab,var(--cvw-primary) 7%,transparent);
  box-shadow: none;
}

.cvw__vinyl-swatch,
.cvw__vinyl-choice--special .cvw__vinyl-swatch {
  display: block;
  width: 52px;
  height: 52px;
  aspect-ratio: auto;
  flex: 0 0 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  background: #111;
  box-shadow: inset 0 0 18px rgba(0,0,0,.24),0 3px 10px rgba(0,0,0,.24);
  overflow: hidden;
}

.cvw__vinyl-choice.is-on .cvw__vinyl-swatch {
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--cvw-primary) 35%,transparent),inset 0 0 18px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.28);
}

.cvw__vinyl-choice-name {
  display: block;
  min-height: 0;
  max-width: 88px;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  color: var(--cvw-heading-text);
  overflow-wrap: anywhere;
}

.cvw__vinyl-choice small {
  display: none;
}

.cvw__vinyl-swatch--transparent {
  background-image: linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%),linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%);
  background-size: 12px 12px;
  background-position: 0 0,6px 6px;
}

@media (max-width:760px) {
  .cvw__vinyl-choice-grid {
    grid-template-columns: repeat(auto-fill,minmax(70px,1fr));
    gap: 10px 6px;
  }
  .cvw__vinyl-choice {
    min-height: 88px;
    padding: 6px 2px 7px;
  }
  .cvw__vinyl-swatch,
  .cvw__vinyl-choice--special .cvw__vinyl-swatch {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
  .cvw__vinyl-choice-name {
    max-width: 78px;
    font-size: 10.5px;
  }
}

.cvw__vinyl-tabs {
  gap: 7px;
  padding: 5px;
  margin: 16px 0 18px;
}

.cvw__vinyl-tab {
  position: relative;
  min-height: 44px;
  border: 1px solid transparent;
  font-weight: 700;
  text-shadow: none;
}

.cvw__vinyl-tab.is-on {
  border-color: color-mix(in oklab,var(--cvw-primary) 74%,transparent);
  background: linear-gradient(180deg,color-mix(in oklab,var(--cvw-primary) 13%,var(--cvw-card)),color-mix(in oklab,var(--cvw-card) 92%,#000));
  color: var(--cvw-heading-text);
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--cvw-primary) 28%,transparent),0 0 18px color-mix(in oklab,var(--cvw-primary) 36%,transparent),0 5px 14px rgba(0,0,0,.22);
  text-shadow: none;
}

.cvw__vinyl-choice-grid {
  grid-template-columns: repeat(auto-fill,68px);
  justify-content: start;
  gap: 5px 4px;
}

.cvw__vinyl-choice {
  width: 68px;
  min-height: 76px;
  gap: 4px;
  border-radius: 11px;
  padding: 4px 2px 5px;
}

.cvw__vinyl-swatch,
.cvw__vinyl-choice--special .cvw__vinyl-swatch {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.cvw__vinyl-choice-name,
.cvw__vinyl-choice.is-on .cvw__vinyl-choice-name {
  min-height: 0;
  max-width: 64px;
  font-weight: 400;
  font-size: 10.25px;
  line-height: 1.16;
  color: var(--cvw-text);
  text-shadow: none;
  filter: none;
}

@media (max-width:760px) {
  .cvw__vinyl-choice-grid {
    grid-template-columns: repeat(auto-fill,62px);
    gap: 4px 3px;
  }
  .cvw__vinyl-choice {
    width: 62px;
    min-height: 72px;
    padding: 3px 1px 4px;
  }
  .cvw__vinyl-swatch,
  .cvw__vinyl-choice--special .cvw__vinyl-swatch {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }
  .cvw__vinyl-choice-name,
  .cvw__vinyl-choice.is-on .cvw__vinyl-choice-name {
    max-width: 59px;
    font-size: 9.75px;
  }
}


/* PHONE VINYL SWATCH GRID: the fixed 62px columns above left an empty strip on the right and
   broke names mid-word. Columns now stretch to fill the panel. The 96px minimum does two jobs:
   it leaves room for the widest single word ("TRANSPARENT", about 92px at 12px), since names
   now wrap only at spaces, and it keeps the selection dot in the card's top-right corner clear
   of the centred 43px swatch. */
@media screen and (max-width: 749px) {
  .cvw .cvw__vinyl-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px 4px;
  }

  .cvw .cvw__vinyl-choice {
    width: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .cvw .cvw__vinyl-choice-name,
  .cvw .cvw__vinyl-choice.is-on .cvw__vinyl-choice-name {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* ==============================================================================
   WELCOME SCREEN — introduction, actions, features, and decorative record
   ============================================================================== */

.cvw.cvw--welcome-active .cvw__stepper,
.cvw.cvw--welcome-active .cvw__mobile-progress,
.cvw.cvw--welcome-active .cvw__layout,
.cvw.cvw--welcome-active .cvw__sticky-estimate {
  display: none !important;
}

.cvw__welcome {
  min-height: calc(100vh - var(--cvw-section-pt) - var(--cvw-section-pb));
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
  align-items: center;
  gap: clamp(28px,6vw,80px);
  padding: clamp(34px,6vw,78px) 0;
}

.cvw__welcome-copy {
  position: relative;
  z-index: 2;
}

.cvw__welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 48%,var(--cvw-border));
  border-radius: 999px;
  background: color-mix(in oklab,var(--cvw-primary) 7%,transparent);
  padding: 9px 13px;
  color: var(--cvw-primary);
  font: 800 10px/1.2 "Montserrat",Arial,sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cvw__welcome-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cvw-accent);
  box-shadow: 0 0 12px var(--cvw-accent);
}

.cvw__welcome h1 {
  max-width: 760px;
  font-size: clamp(42px,6vw,82px);
  line-height: .97;
  letter-spacing: -.05em;
}

.cvw__welcome h1:focus,
.cvw__welcome h1:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.cvw__welcome h1 span {
  color: var(--cvw-primary);
  text-shadow: 0 0 24px color-mix(in oklab,var(--cvw-primary) 40%,transparent);
}

.cvw__welcome-lead {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--cvw-muted);
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.65;
}

.cvw__welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.cvw__welcome-start,
.cvw__welcome-contact {
  min-height: 48px;
  border-radius: 999px !important;
  padding: 13px 18px !important;
  font: 900 10px/1 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.cvw__welcome-start {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 230px;
  background: var(--cvw-primary) !important;
  color: #071015 !important;
  box-shadow: 0 0 28px color-mix(in oklab,var(--cvw-primary) 26%,transparent);
}

.cvw__welcome-contact {
  border: 1px solid var(--cvw-border) !important;
  background: var(--cvw-card) !important;
  color: var(--cvw-text) !important;
}

.cvw__welcome-resume {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%,580px);
  margin-top: 13px;
  border: 1px solid color-mix(in oklab,var(--cvw-accent) 45%,var(--cvw-border)) !important;
  border-radius: 15px !important;
  background: var(--cvw-card) !important;
  padding: 12px 14px !important;
  text-align: left !important;
}

.cvw__welcome-resume>span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cvw__welcome-resume strong {
  font-size: 13px;
}

.cvw__welcome-resume em {
  color: var(--cvw-muted);
  font-size: 12px;
  font-style: normal;
}

.cvw__welcome-features {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  margin-top: 30px;
}

.cvw__welcome-features article {
  display: flex;
  gap: 12px;
  min-height: 125px;
  border: 1px solid var(--cvw-border);
  border-radius: 15px;
  background: var(--cvw-card);
  padding: 16px;
}

.cvw__welcome-features article>span {
  color: var(--cvw-primary);
  font: 900 11px/1.3 "Montserrat",Arial,sans-serif;
}

.cvw__welcome-features strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

.cvw__welcome-features p {
  margin: 7px 0 0;
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cvw__welcome-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cvw__welcome-foot span {
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--cvw-muted);
  font: 9px/1.2 "Montserrat",Arial,sans-serif;
  text-transform: uppercase;
}

.cvw__welcome-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}

.cvw__welcome-visual:before {
  content: "";
  position: absolute;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab,var(--cvw-primary) 32%,transparent) 0%,
    color-mix(in oklab,var(--cvw-primary) 15%,transparent) 45%,
    transparent 72%
  );
  filter: blur(12px);
}

.cvw__welcome-record {
  position: relative;
  z-index: 2;
  width: min(380px,76vw);
  height: min(380px,76vw);
  border-radius: 50%;

  background:
    repeating-radial-gradient(
      circle,
      #0b0b0b 0 7px,
      #262626 8px 9px,
      #111 10px 11px
    );

  box-shadow:
    0 30px 70px rgba(0,0,0,.65),
    0 0 45px color-mix(in oklab,var(--cvw-primary) 38%,transparent),
    0 0 95px color-mix(in oklab,var(--cvw-primary) 24%,transparent),
    inset 0 0 60px rgba(0,0,0,.85);

  animation: cvw-spin 15s linear infinite;
}

.cvw__welcome-groove {
  position: absolute;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow:
    0 0 5px rgba(255,255,255,.08),
    inset 0 0 5px rgba(255,255,255,.05);
}

.cvw__welcome-groove--one {
  inset: 18%;
}

.cvw__welcome-groove--two {
  inset: 25%;
}

.cvw__welcome-groove--three {
  inset: 31%;
}

.cvw__welcome-record-label {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--cvw-primary),var(--cvw-secondary));
  color: #071015;
  text-align: center;
}

.cvw__welcome-record-label small,
.cvw__welcome-record-label span {
  font: 7px/1.2 "Montserrat",Arial,sans-serif;
  letter-spacing: .12em;
}

.cvw__welcome-record-label strong {
  font-size: 11px;
}

.cvw__welcome-record>i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cvw-bg);
  transform: translate(-50%,-50%);
}

.cvw__welcome-orbit,
.cvw__welcome-float,
.cvw__welcome-signal {
  display: none;
}

@media (max-width:1000px) {
  .cvw__welcome {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cvw__welcome-copy {
    max-width: 760px;
    margin: auto;
  }
  .cvw__welcome-actions,
  .cvw__welcome-foot {
    justify-content: center;
  }
  .cvw__welcome-resume {
    margin-left: auto;
    margin-right: auto;
  }
  .cvw__welcome-visual {
    min-height: 430px;
  }
  .cvw__welcome-float--format {
    left: 8%;
  }
  .cvw__welcome-float--color {
    right: 8%;
  }
}

@media (max-width:700px) {
  .cvw.cvw--welcome-active {
    padding-bottom: var(--cvw-section-pb);
  }
  .cvw__welcome {
    padding-top: 24px;
  }
  .cvw__welcome h1 {
    font-size: clamp(38px,13vw,60px);
  }
  .cvw__welcome-start,
  .cvw__welcome-contact {
    width: 100%;
  }
  .cvw__welcome-features {
    grid-template-columns: 1fr;
  }
  .cvw__welcome-features article {
    min-height: 0;
    text-align: left;
  }
  .cvw__welcome-visual {
    min-height: 360px;
  }
  .cvw__welcome-orbit {
    display: none;
  }
  .cvw__welcome-float {
    font-size: 10px;
    transform: scale(.88);
  }
}

@media (prefers-reduced-motion:reduce) {
  .cvw__welcome-record {
    animation: none;
  }
}


/* ==============================================================================
   CONDITIONAL DISPLAY AND UPLOAD SUPPORT — format rules and packaging uploads
   ============================================================================== */

.cvw [data-cvw-format-hidden] {
  display: none !important;
}

.cvw__disc.is-catalog-cloudy {
  background: radial-gradient(circle at 30 28%,rgba(255,255,255,.48) 0 10,transparent 25%),radial-gradient(circle at 72% 68%,rgba(255,255,255,.32) 0 12%,transparent 27%),conic-gradient(from 20deg,#7dd3fc,#d8b4fe,#f9a8d4,#7dd3fc) !important;
}

.cvw__disc.is-catalog-cornetto {
  /* Dynamic embedded SVG background is applied by JavaScript. */
}

.cvw__no-packaging-uploads {
  grid-column: 1/-1;
  border: 1px dashed var(--cvw-border);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  padding: 14px;
}

.cvw__no-packaging-uploads strong {
  display: block;
  color: var(--cvw-heading-text);
  font-size: 14px;
  margin-bottom: 4px;
}

.cvw__no-packaging-uploads span {
  display: block;
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cvw__gatefold-upload {
  grid-column: 1/-1;
  border: 1px solid color-mix(in oklab,var(--cvw-accent) 50%,var(--cvw-border));
  border-radius: 16px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-accent) 8%,transparent),color-mix(in oklab,var(--cvw-primary) 6%,transparent));
  padding: 16px;
}

.cvw__gatefold-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cvw__gatefold-head>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cvw__gatefold-head strong {
  color: var(--cvw-heading-text);
  font-size: 16px;
}

.cvw__gatefold-head span {
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cvw__required-badge {
  flex: 0 0 auto;
  border: 1px solid var(--cvw-accent);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--cvw-accent) !important;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cvw__gatefold-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width:760px) {
  .cvw__gatefold-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

.cvw__catalog-conditional {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 48%,var(--cvw-border));
  border-radius: 18px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 8%,transparent),rgba(0,0,0,.18));
  box-shadow: 0 0 26px color-mix(in oklab,var(--cvw-primary) 9%,transparent);
}

.cvw__catalog-conditional[hidden] {
  display: none !important;
}

.cvw__catalog-base-field {
  max-width: 360;
}

.cvw__picture-file-status {
  margin-top: 12px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==============================================================================
   LIVE PREVIEW MODES — record/jacket view and secondary record preview
   ============================================================================== */

.cvw__preview-modes {
  position: relative;
  z-index: 8;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 5px;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  width: max-content;
  max-width: 100%;
}

.cvw__preview-modes button {
  min-height: 30px;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  color: var(--cvw-muted) !important;
  font-family: "Montserrat",Arial,sans-serif !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.cvw__preview-modes button.is-on {
  background: var(--cvw-primary) !important;
  color: #061015 !important;
  box-shadow: 0 0 18px color-mix(in oklab,var(--cvw-primary) 28%,transparent);
}

.cvw__preview-stage {
  position: absolute;
  z-index: 2;
  inset: 82px 18px 52px;
  perspective: 1100px;
  overflow: hidden;
}

.cvw__preview-stage .cvw__record {
  position: absolute;
  inset: 0;
  z-index: 4;
  transition: transform .5s cubic-bezier(.2,.75,.2,1),opacity .35s ease;
}

.cvw__jacket-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(300px,72%);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotateY(-2deg);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  background: radial-gradient(circle at 76% 18%,color-mix(in oklab,var(--cvw-secondary) 44%,transparent),transparent 36%),linear-gradient(145deg,#141b25,#080b10 64%);
  box-shadow: 0 32px 68px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.035);
  overflow: hidden;
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.75,.2,1),opacity .35s ease;
}

.cvw__jacket-preview:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,rgba(255,255,255,.12),transparent 26% 74%,rgba(0,0,0,.22));
  pointer-events: none;
}

.cvw__jacket-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.cvw__jacket-preview img:not([hidden])~.cvw__jacket-copy {
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  inset: auto 0 0;
  padding: 42px 22px 24px;
}

.cvw__jacket-copy {
  position: absolute;
  z-index: 2;
  inset: auto 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-shadow: 0 3px 20px rgba(0,0,0,.8);
}

.cvw__jacket-copy small {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--cvw-primary);
}

.cvw__jacket-copy strong {
  max-width: 92%;
  font-size: clamp(20px,3vw,34px);
  line-height: .95;
  color: #fff;
  overflow-wrap: anywhere;
}

.cvw__jacket-copy span {
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
}

.cvw__jacket-spine {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: rgba(255,255,255,.38);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 7px;
  letter-spacing: .16em;
}

.cvw__secondary-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--cvw-disc-size);
  height: var(--cvw-disc-size);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.72);
  box-shadow: 0 24px 55px rgba(0,0,0,.48),inset 0 0 72px rgba(0,0,0,.48);
  opacity: 0;
  overflow: visible;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.75,.2,1),opacity .35s ease,filter .25s ease;
}

.cvw__secondary-disc:hover {
  filter: brightness(1.08);
}

.cvw__secondary-disc:focus-visible {
  outline: 3px solid var(--cvw-accent);
  outline-offset: 7px;
}

.cvw__secondary-grooves {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,transparent 0 9px,rgba(0,0,0,.22) 10px 11px);
  pointer-events: none;
}

.cvw__secondary-center {
  position: absolute;
  inset: 32%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--cvw-secondary);
  color: #071015;
  text-align: center;
  font-family: "Montserrat",Arial,sans-serif;
  overflow: hidden;
  pointer-events: none;
}

.cvw__secondary-center small,
.cvw__secondary-center em {
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .08em;
}

.cvw__secondary-center strong {
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.cvw__secondary-record-name {
  position: absolute;
  left: 50%;
  bottom: -39px;
  display: block;
  transform: translateX(-50%);
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(5,8,12,.82);
  padding: 6px 10px;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

/* Double albums show both records together. The active record remains in front;
   clicking the rear record switches the active design without changing any selection data. */
.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__record {
  z-index: 5;
  transform: translate(-18%,-1%) scale(.68);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__secondary-disc {
  z-index: 4;
  opacity: .94;
  transform: translate(-17%,-50%) scale(.68);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__preview-record-name {
  left: 31%;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
  opacity: 0;
  pointer-events: none;
}

.cvw__preview-record-name {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(5,8,12,.74);
  padding: 6px 10px;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10);
}

.cvw__preview-stage[data-preview-mode="record"] .cvw__record {
  transform: scale(.88);
}

.cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  opacity: 1;
  transform: translate(-58%,-50%) rotateY(-2deg);
}

.cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
  transform: translate(34%,-1%) scale(.66);
}


/* ==============================================================================
   STEP 4: RECORD 1 / RECORD 2 DESIGNER — record tabs, filters, search, and guidance
   ============================================================================== */

.cvw__record-designer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 30%,var(--cvw-border));
  border-radius: 16px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 7%,transparent),rgba(0,0,0,.15));
  padding: 12px;
}

.cvw__record-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

.cvw__record-tabs button,
.cvw__copy-record {
  border-radius: 999px !important;
  padding: 9px 13px !important;
  font-family: "Montserrat",Arial,sans-serif !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.cvw__record-tabs button {
  color: var(--cvw-muted) !important;
}

.cvw__record-tabs button.is-on {
  background: var(--cvw-primary) !important;
  color: #071015 !important;
}

.cvw__copy-record {
  border: 1px solid var(--cvw-border) !important;
  color: var(--cvw-text) !important;
}

.cvw__copy-record:hover {
  border-color: var(--cvw-accent) !important;
  color: var(--cvw-accent) !important;
}

.cvw__vinyl-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in oklab,var(--cvw-accent) 36%,var(--cvw-border));
  border-radius: 14px;
  background: color-mix(in oklab,var(--cvw-accent) 5%,transparent);
  padding: 13px 15px;
}

.cvw__vinyl-selection>div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cvw__vinyl-selection small {
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  letter-spacing: .15em;
}

.cvw__vinyl-selection strong {
  color: var(--cvw-heading-text);
  font-size: 15px;
}

.cvw__vinyl-selection>span {
  color: var(--cvw-accent);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-align: right;
}

.cvw__vinyl-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.cvw__vinyl-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  color: var(--cvw-input-text);
  padding: 10px 16px;
}

.cvw__vinyl-search input:focus {
  outline: 0;
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--cvw-primary) 18%,transparent);
}

.cvw__vinyl-filters {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
}

.cvw__vinyl-filters button {
  border-radius: 999px !important;
  padding: 8px 11px !important;
  color: var(--cvw-muted) !important;
  font-family: "Montserrat",Arial,sans-serif !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.cvw__vinyl-filters button.is-on {
  background: var(--cvw-primary) !important;
  color: #071015 !important;
}

.cvw__vinyl-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px dashed var(--cvw-border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.cvw__vinyl-empty strong {
  color: var(--cvw-heading-text);
}

.cvw__vinyl-empty span {
  color: var(--cvw-muted);
  font-size: 13px;
}

.cvw__vinyl-guidance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-left: 3px solid var(--cvw-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.035);
  padding: 12px 14px;
}

.cvw__vinyl-guidance strong {
  flex: 0 0 auto;
  color: var(--cvw-accent);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cvw__vinyl-guidance span {
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cvw__optional-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cvw__optional-heading span {
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--cvw-muted);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width:700px) {
  .cvw__preview-stage {
    inset: 90px 8px 48px;
  }
  .cvw__preview-modes {
    width: 100%;
    justify-content: center;
  }
  .cvw__preview-modes button {
    flex: 1;
    padding-inline: 6px !important;
  }
  .cvw__vinyl-tools {
    grid-template-columns: 1fr;
  }
  .cvw__vinyl-filters {
    width: 100;
  }
  .cvw__vinyl-filters button {
    flex: 1;
  }
  .cvw__vinyl-guidance {
    flex-direction: column;
    gap: 5px;
  }
  .cvw__jacket-preview {
    width: min(250px,70%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .cvw__preview-stage .cvw__record,
  .cvw__jacket-preview,
  .cvw__secondary-disc {
    transition: none !important;
  }
}


/* ==============================================================================
   STEP 10: PRODUCTION TIMELINE — timeline card, status states, and modal
   ============================================================================== */

.cvw__timeline {
  border: 1px solid var(--cvw-border);
  border-radius: 16px;
  background: var(--cvw-card);
  padding: 15px;
  transition: .2s;
}

.cvw__timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cvw__timeline-head>span {
  font: 800 10px/1.2 "Montserrat",Arial,sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cvw-muted);
}

.cvw__timeline-head>strong {
  font-size: 12px;
  color: var(--cvw-heading-text);
}

.cvw__timeline-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 12px;
}

.cvw__timeline-grid div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 9px;
  background: rgba(0,0,0,.13);
}

.cvw__timeline-grid span {
  display: block;
  color: var(--cvw-muted);
  font: 8px/1.3 "Montserrat",Arial,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cvw__timeline-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.cvw__timeline p {
  margin: 11px 0 0;
  color: var(--cvw-muted);
  font-size: 15px;
  line-height: 1.6;
}

.cvw__timeline>small {
  display: block;
  margin-top: 9px;
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Step 1 project notes: full-width guidance below the date and catalog fields. */
.cvw__project-notes {
  grid-column: 1 / -1;
}

.cvw__project-notes > small {
  display: block;
  width: 100%;
  color: var(--cvw-muted);
  font-size: 16px;
  line-height: 1.6;
}

.cvw__optional-label {
  margin-left: 8px;
  color: var(--cvw-primary);
  font-size: .85em;
  font-style: normal;
  letter-spacing: .08em;
}

.cvw__timeline-contact {
  margin-top: 10px;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  color: var(--cvw-primary) !important;
  font: 800 9px/1 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.cvw__timeline--on {
  border-color: color-mix(in oklab,var(--cvw-accent) 50%,var(--cvw-border));
  background: color-mix(in oklab,var(--cvw-accent) 5%,var(--cvw-card));
}

.cvw__timeline--on .cvw__timeline-head>strong {
  color: var(--cvw-accent);
}

.cvw__timeline--tight {
  border-color: rgba(251,191,36,.65);
  background: rgba(251,191,36,.06);
}

.cvw__timeline--tight .cvw__timeline-head>strong {
  color: #fbbf24;
}

.cvw__timeline--required {
  border-color: rgba(251,113,133,.72);
  background: rgba(251,113,133,.07);
  box-shadow: 0 0 24px rgba(251,113,133,.08);
}

.cvw__timeline--required .cvw__timeline-head>strong {
  color: #fda4af;
}

.cvw__summary-group--timeline {
  border-color: color-mix(in oklab,var(--cvw-primary) 35%,var(--cvw-border));
}

.cvw__summary-group--timeline p {
  margin: 10 0 0;
  color: var(--cvw-muted);
  font-size: 11px;
  line-height: 1.45;
}

.cvw__timeline-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.cvw__timeline-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(5px);
}

.cvw__timeline-dialog {
  position: relative;
  z-index: 1;
  width: min(560px,calc(100vw - 28px));
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 45%,var(--cvw-border));
  border-radius: 20;
  background: var(--cvw-panel);
  padding: 24px;
  box-shadow: 0 28px 90px rgba(0,0,0,.6);
}

.cvw__timeline-dialog-label {
  color: var(--cvw-primary);
  font: 800 9px/1 "Montserrat",Arial,sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cvw__timeline-dialog h2 {
  margin-top: 10 !important;
  font-size: clamp(25px,5vw,38px) !important;
}

.cvw__timeline-dialog p {
  color: var(--cvw-muted);
  line-height: 1.6;
}

.cvw__timeline-dialog>small {
  display: block;
  margin-top: 14px;
  color: var(--cvw-muted);
  font-size: 11px;
  line-height: 1.45;
}

.cvw__timeline-close {
  position: absolute;
  right: 14px;
  top: 10px;
  color: var(--cvw-muted) !important;
  font-size: 30 !important;
}

.cvw__timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.cvw__timeline-actions .cvw__button {
  width: auto;
}

.cvw__timeline-modal[hidden] {
  display: none !important;
}

@media (max-width:650px) {
  .cvw__timeline-grid {
    grid-template-columns: 1fr;
  }
  .cvw__timeline-actions .cvw__button {
    width: 100;
  }
}


/* ==============================================================================
   STEP 9: FILE INPUT BUTTONS — browser upload button appearance
   ============================================================================== */

.cvw .cvw__upload input[type="file"] {
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.cvw .cvw__upload input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  background: #f4f7fb;
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  padding: 7px 11px;
  font: 700 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor: pointer;
}

.cvw .cvw__upload input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  background: #f4f7fb;
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  padding: 7px 11px;
  font: 700 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor: pointer;
}


/* ==============================================================================
   STEP 4: SPECIAL EFFECT CONFIGURATION — effect cards, neon presets, and responsive rules
   ============================================================================== */

.cvw__effect-choice-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.cvw__effect-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--cvw-border) !important;
  border-radius: 14px !important;
  background: var(--cvw-card) !important;
  padding: 14px !important;
  text-align: left !important;
  transition: .18s;
}

.cvw__effect-choice:hover {
  border-color: color-mix(in oklab,var(--cvw-primary) 52%,var(--cvw-border)) !important;
  transform: translateY(-1px);
}

.cvw__effect-choice.is-on {
  border-color: var(--cvw-primary) !important;
  background: color-mix(in oklab,var(--cvw-primary) 8%,var(--cvw-card)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--cvw-primary) 45%,transparent),0 0 22px color-mix(in oklab,var(--cvw-primary) 16%,transparent);
}

.cvw__effect-choice strong {
  color: var(--cvw-heading-text);
  font-size: 14px;
}

.cvw__effect-choice span {
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.35;
}

.cvw__effect-choice em {
  margin-top: auto;
  color: var(--cvw-accent);
  font: 900 9px/1.2 "Montserrat",Arial,sans-serif;
  font-style: normal;
}

.cvw__effect-config {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 52%,var(--cvw-border));
  border-radius: 18px;
  background: linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 8%,transparent),rgba(0,0,0,.18));
}

.cvw__effect-neon-presets {
  margin-bottom: 14px;
}

.cvw__effect-neon-presets>span {
  display: block;
  margin-bottom: 8px;
  color: var(--cvw-muted);
  font: 800 9px/1.2 "Montserrat",Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.cvw__effect-neon-presets>div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cvw__effect-neon-presets button {
  border: 1px solid var(--cvw-border) !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  color: var(--cvw-text) !important;
  font-size: 10px !important;
}

.cvw__effect-neon-presets button:hover {
  border-color: var(--cvw-primary) !important;
  color: var(--cvw-primary) !important;
}

@media (min-width:850px) {
  .cvw__effect-choice-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width:520px) {
  .cvw__vinyl-tabs {
    grid-template-columns: 1fr;
  }
  .cvw__effect-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* STEP 9: Audio and artwork upload tabs. */


/* ==============================================================================
   STEP 9: AUDIO / ARTWORK TABS — separated upload sections within the same step
   ============================================================================== */

.cvw__upload-tabs {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 18px 0 16px;
  padding: 5px;
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}

.cvw__upload-tab {
  min-height: 44px;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--cvw-muted) !important;
  font: 900 10px/1.2 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.cvw__upload-tab.is-on {
  background: var(--cvw-primary) !important;
  color: #071015 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.cvw__upload-section {
  display: none;
}

.cvw__upload-section.is-on {
  display: block;
}

.cvw__upload-section-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: var(--cvw-card);
}

.cvw__upload-section-head strong {
  color: var(--cvw-heading-text);
  font-size: 15px;
}

.cvw__upload-section-head span {
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width:520px) {
  .cvw__upload-tabs {
    grid-template-columns: 1fr;
  }
}

/* STEP 4: Match the Opaque, Transparent, and Special Effects tabs to the Step 9 segmented upload tabs. */


/* ==============================================================================
   STEP 4 TAB STYLE OVERRIDES — final segmented styling for vinyl categories
   ============================================================================== */

.cvw__vinyl-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 18px 0 16px;
  padding: 5px;
  border: 1px solid var(--cvw-border);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}

.cvw__vinyl-tab {
  position: relative;
  min-height: 44px;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--cvw-muted) !important;
  font: 900 10px/1.2 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.cvw__vinyl-tab:hover,
.cvw__vinyl-tab:focus-visible {
  color: var(--cvw-heading-text) !important;
  outline: 2px solid color-mix(in oklab,var(--cvw-primary) 65%,transparent);
  outline-offset: 2px;
}

.cvw__vinyl-tab.is-on {
  border-color: transparent !important;
  background: var(--cvw-primary) !important;
  color: #071015 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.2) !important;
}

@media (max-width:520px) {
  .cvw__vinyl-tabs {
    grid-template-columns: 1fr;
  }
}

/* STEP 10 REVIEW LAYOUT CLEANUP — keeps summary sections compact and removes inner row bubbles. */


/* ==============================================================================
   STEP 10 CLEAN SUMMARY OVERRIDES — flat rows and responsive review layout
   ============================================================================== */

.cvw__summary--grouped {
  align-items: start;
}

.cvw__summary--grouped .cvw__summary-group>div {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
}

.cvw__summary--grouped .cvw__summary-group>div:last-of-type {
  border-bottom: 0;
}

@media (min-width:760px) {
  .cvw__summary-group--timeline {
    grid-column: 1/-1;
  }
}

/* Keep special-effect color count selections readable on the dark panel. */
.cvw__effect-config select.cvw__input {
  color: #f4f7fb !important;
  -webkit-text-fill-color: #f4f7fb !important;
}

.cvw__effect-config select.cvw__input option {
  color: #1f2937;
  background: #ffffff;
}


/* ==============================================================================
   STEP 3 TEST PRESSINGS — clean three-part row, prerequisite, and quantity selector
   ============================================================================== */

.cvw__test-press-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 1px minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
}

.cvw__test-press-row > .cvw__card,
.cvw__extra-test-options,
.cvw__extra-test-wrap { min-width: 0; }

.cvw__test-press-row > .cvw__card { width: 100%; height: 100%; }
.cvw__extra-test-options { display: grid; }
.cvw__extra-test-wrap { display: flex; flex-direction: column; gap: 8px; }
.cvw__extra-test-wrap[data-cvw-format-hidden] { display: none !important; }
.cvw__extra-test-wrap .cvw__card { width: 100%; height: 100%; }

.cvw__card[data-cvw-prerequisite-disabled="true"] {
  opacity: .42; cursor: not-allowed; filter: saturate(.45); box-shadow: none !important;
}

.cvw__extra-test-quantity {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 38%,var(--cvw-border));
  border-radius: 12px; background: color-mix(in oklab,var(--cvw-primary) 6%,rgba(0,0,0,.18));
  padding: 10px 12px;
}
.cvw__extra-test-quantity > span { color: var(--cvw-muted); font-size: 12px; line-height: 1.35; }
.cvw__extra-test-quantity > div {
  display: inline-grid; grid-template-columns: 34px 42px 34px; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--cvw-border); border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.2);
}
.cvw__extra-test-quantity button {
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--cvw-primary);
  font-size: 18px; font-weight: 800;
}
.cvw__extra-test-quantity button:hover,
.cvw__extra-test-quantity button:focus-visible { background: color-mix(in oklab,var(--cvw-primary) 14%,transparent); }
.cvw__extra-test-quantity strong {
  display: grid; place-items: center; min-height: 34px; border-left: 1px solid var(--cvw-border);
  border-right: 1px solid var(--cvw-border); color: var(--cvw-heading-text);
  font-family: "Montserrat",Arial,sans-serif; font-size: 13px;
}

.cvw__test-press-divider {
  width: 1px; min-height: 100%; align-self: stretch;
  background: color-mix(in oklab,var(--cvw-primary) 48%,var(--cvw-border));
}

@media (max-width:900px) {
  .cvw__test-press-row { grid-template-columns: 1fr 1fr; }
  .cvw__test-press-divider { grid-column: 1 / -1; width: 100%; min-height: 1px; height: 1px; }
  .cvw__test-press-divider + .cvw__card { grid-column: 1 / -1; }
}

@media (max-width:650px) {
  .cvw__test-press-row { grid-template-columns: 1fr; }
  .cvw__test-press-divider, .cvw__test-press-divider + .cvw__card { grid-column: auto; }
  .cvw__extra-test-quantity { align-items: flex-start; flex-direction: column; }
}

/* Step 4 refresh: Single Colors + visual Special Effects library. */
.cvw__vinyl-category--effects .cvw__vinyl-section-head {
  margin-bottom: 16px;
}
.cvw__effect-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cvw__effect-choice {
  min-height: 118px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-align: left;
  border: 1px solid color-mix(in oklab, var(--cvw-muted) 25%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, var(--cvw-panel) 88%, #fff 2%);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cvw__effect-choice:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--cvw-primary) 58%, transparent);
}
.cvw__effect-choice.is-on {
  border-color: var(--cvw-primary);
  background: color-mix(in oklab, var(--cvw-primary) 9%, var(--cvw-panel));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cvw-primary) 18%, transparent);
}
.cvw__effect-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cvw__effect-copy strong { font-size: 14px; line-height: 1.25; color: var(--cvw-text); }
.cvw__effect-copy strong small { font: inherit; color: var(--cvw-muted); }
.cvw__effect-copy > span { font-size: 12px; line-height: 1.45; color: var(--cvw-muted); }
.cvw__effect-copy em { width: fit-content; margin-top: 2px; font-size: 11px; font-style: normal; font-weight: 800; color: var(--cvw-primary); }
.cvw__effect-thumb {
  position: relative;
  display: block;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  box-shadow: inset 0 0 18px rgba(0,0,0,.38), 0 8px 20px rgba(0,0,0,.25);
}
.cvw__effect-thumb::before {
  content: "";
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: #d8dadd;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  z-index: 2;
}
.cvw__effect-thumb::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
}
.cvw__effect-thumb.is-halfhalf,.cvw__effect-thumb.is-split2 { background: linear-gradient(90deg,#cbd5e1 0 50%,#171717 50%); }
.cvw__effect-thumb.is-colorincolor { background: radial-gradient(ellipse at 47% 48%,#222 0 27%,#6b7280 30% 44%,#d1d5db 62%); }
.cvw__effect-thumb.is-aside2 { background: radial-gradient(circle at 50%,transparent 0 38%,rgba(255,255,255,.2) 39% 50%,transparent 51%),conic-gradient(#1f2937,#cbd5e1,#1f2937); }
.cvw__effect-thumb.is-aside3 { background: conic-gradient(#111 0 34%,#6b7280 34% 67%,#d1d5db 67%); }
.cvw__effect-thumb.is-segments3 { background: conic-gradient(from -20deg,#bfc3c7 0 33.33%,#696b70 33.33% 66.66%,#171717 66.66%); }
.cvw__effect-thumb.is-quad4 { background: conic-gradient(#e2e8f0 0 25%,#111 25% 50%,#94a3b8 50% 75%,#475569 75%); }
.cvw__effect-thumb.is-stripes3 { background: repeating-conic-gradient(from -10deg,#111 0 28deg,#d1d5db 28deg 56deg,#73777d 56deg 84deg); }
.cvw__effect-thumb.is-stripesab { background: radial-gradient(circle,transparent 0 42%,rgba(255,255,255,.18) 43% 48%,transparent 49%),repeating-conic-gradient(#111 0 20deg,#9ca3af 20deg 40deg,#e5e7eb 40deg 60deg); }
.cvw__effect-thumb.is-splatter { background: radial-gradient(circle at 18% 24%,#f8fafc 0 3%,transparent 4%),radial-gradient(circle at 73% 24%,#f97316 0 5%,transparent 6%),radial-gradient(circle at 34% 70%,#f8fafc 0 6%,transparent 7%),radial-gradient(circle at 78% 72%,#111 0 4%,transparent 5%),#2563eb; }
.cvw__effect-thumb.is-neon { background: conic-gradient(#d9ff00,#ff28b8,#00e5ff,#d9ff00); }
.cvw__effect-thumb.is-marble { background: radial-gradient(ellipse at 25% 30%,#111 0 8%,transparent 28%),radial-gradient(ellipse at 70% 70%,#e5e7eb 0 10%,transparent 31%),conic-gradient(#64748b,#d1d5db,#252525,#94a3b8,#64748b); }
.cvw__effect-thumb.is-metallic { background: linear-gradient(135deg,#30343a,#f8fafc,#7d8794,#dbeafe,#27272a); }
.cvw__effect-thumb.is-cloudy { background: radial-gradient(ellipse at 30% 28%,rgba(255,255,255,.8),transparent 30%),radial-gradient(ellipse at 65% 70%,rgba(31,41,55,.65),transparent 34%),#aeb4bb; }
.cvw__effect-thumb.is-cornetto { background: conic-gradient(from -24deg,#d1d5db 0 43%,#191919 43% 50%,#d1d5db 50% 93%,#191919 93%); }
.cvw__effect-thumb.is-picture { background: radial-gradient(circle at 35% 30%,#f59e0b 0 13%,transparent 14%),linear-gradient(145deg,#1d4ed8,#9333ea 52%,#ec4899); }
.cvw__effect-thumb.is-laser { background: repeating-conic-gradient(#111 0 7deg,#4b5563 8deg 11deg); }
@media (max-width: 760px) {
  .cvw__effect-choice-grid { grid-template-columns: 1fr; }
  .cvw__effect-choice { min-height: 106px; grid-template-columns: 68px minmax(0,1fr); }
  .cvw__effect-thumb { width: 64px; }
}


/* Step 4 cleanup: two equal tabs, compact text-only Special Effects list. */
.cvw__panel[data-panel="3"] .cvw__vinyl-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.cvw__panel[data-panel="3"] .cvw__vinyl-category--effects .cvw__vinyl-section-head {
  margin-top: 8px;
  margin-bottom: 10px;
}

.cvw__panel[data-panel="3"] .cvw__effect-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cvw__panel[data-panel="3"] .cvw__effect-choice {
  display: block;
  min-height: 0;
  padding: 11px 12px;
  border-radius: 12px;
}

.cvw__panel[data-panel="3"] .cvw__effect-copy {
  gap: 3px;
}

.cvw__panel[data-panel="3"] .cvw__effect-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.cvw__panel[data-panel="3"] .cvw__effect-copy > span {
  font-size: 11px;
  line-height: 1.35;
}

.cvw__panel[data-panel="3"] .cvw__effect-copy em {
  margin-top: 1px;
  font-size: 10px;
}

@media (max-width: 980px) {
  .cvw__panel[data-panel="3"] .cvw__effect-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cvw__panel[data-panel="3"] .cvw__effect-choice-grid {
    grid-template-columns: 1fr;
  }
}


/* Step 4: keep Opaque/Transparent controls inside Single Colors and show one group at a time. */
.cvw__vinyl-tools--inside-single {
  margin: 0 0 26px;
  justify-content: flex-start;
}

.cvw__vinyl-tools--inside-single .cvw__vinyl-filters {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cvw__vinyl-tools--inside-single .cvw__vinyl-filters button {
  min-width: 0;
}


/* STEP 4 — Half-Half guided color and splatter configurator */
.cvw__halfhalf-config{
  margin-top:20px;padding:20px;border:1px solid color-mix(in oklab,var(--cvw-primary) 52%,var(--cvw-border));border-radius:18px;
  background:linear-gradient(135deg,color-mix(in oklab,var(--cvw-primary) 8%,transparent),rgba(0,0,0,.18));
}
.cvw__halfhalf-color-grid,.cvw__halfhalf-splatter-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.cvw__halfhalf-splatter-question{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:15px;border:1px solid var(--cvw-border);border-radius:14px;background:color-mix(in oklab,var(--cvw-card) 92%,transparent)}
.cvw__halfhalf-splatter-question>div:first-child{display:flex;flex-direction:column;gap:4px}.cvw__halfhalf-splatter-question strong{color:var(--cvw-heading-text);font-size:14px}.cvw__halfhalf-splatter-question span{color:var(--cvw-muted);font-size:12px}
.cvw__halfhalf-splatter-question .cvw__segmented{display:grid;grid-template-columns:repeat(2,minmax(74px,1fr));gap:6px;padding:4px;border:1px solid var(--cvw-border);border-radius:12px;background:rgba(0,0,0,.22)}
.cvw__halfhalf-splatter-question button{border:0!important;border-radius:9px!important;padding:9px 14px!important;background:transparent!important;color:var(--cvw-muted)!important;font-weight:850!important;cursor:pointer}
.cvw__halfhalf-splatter-question button.is-on{background:color-mix(in oklab,var(--cvw-primary) 16%,var(--cvw-card))!important;color:var(--cvw-heading-text)!important;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cvw-primary) 55%,transparent)}
.cvw__halfhalf-splatter-panel{margin-top:14px;padding:16px;border-left:3px solid var(--cvw-primary);border-radius:0 14px 14px 0;background:color-mix(in oklab,var(--cvw-primary) 5%,rgba(0,0,0,.18))}
.cvw__halfhalf-count-field{max-width:340px}.cvw__halfhalf-disclaimer{margin:15px 0 0;color:var(--cvw-muted);font-size:12px;line-height:1.55}
.cvw__halfhalf-config select.cvw__input{appearance:auto!important;background-color:#fff!important;color:#1f2937!important;-webkit-text-fill-color:#1f2937!important}
.cvw__halfhalf-config select.cvw__input option{background:#fff!important;color:#1f2937!important}
@media(max-width:700px){.cvw__halfhalf-color-grid,.cvw__halfhalf-splatter-colors{grid-template-columns:1fr}.cvw__halfhalf-splatter-question{align-items:stretch;flex-direction:column}.cvw__halfhalf-splatter-question .cvw__segmented{width:100%}}


/* STEP 4 — compact special-effects accordion */
.cvw__effects-accordion-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 14px;padding:15px 17px;border:1px solid color-mix(in oklab,var(--cvw-border) 82%,var(--cvw-primary));
  border-radius:14px;background:color-mix(in oklab,var(--cvw-card) 94%,transparent);color:var(--cvw-heading-text);
  text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.cvw__effects-accordion-toggle:hover,.cvw__effects-accordion-toggle:focus-visible{border-color:var(--cvw-primary);background:color-mix(in oklab,var(--cvw-primary) 7%,var(--cvw-card));box-shadow:0 0 0 3px color-mix(in oklab,var(--cvw-primary) 13%,transparent);outline:0}
.cvw__effects-toggle-copy{display:flex;min-width:0;flex-direction:column;gap:4px}.cvw__effects-toggle-copy strong{font-size:15px;text-transform:uppercase;letter-spacing:.1em}.cvw__effects-toggle-copy small{color:var(--cvw-muted);font-size:12px;line-height:1.45;text-transform:none;letter-spacing:0}
.cvw__effects-toggle-icon{position:relative;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--cvw-border);border-radius:50%;background:rgba(0,0,0,.18)}
.cvw__effects-toggle-icon:before,.cvw__effects-toggle-icon:after{content:"";position:absolute;left:9px;top:16px;width:14px;height:2px;border-radius:2px;background:var(--cvw-heading-text);transition:transform .22s ease}
.cvw__effects-toggle-icon:after{transform:rotate(90deg)}.cvw__effects-accordion-toggle[aria-expanded="true"] .cvw__effects-toggle-icon:after{transform:rotate(0)}
.cvw__effects-accordion-body{overflow:hidden}.cvw__effects-accordion-body[hidden]{display:none!important}
.cvw__halfhalf-config:not([hidden]){animation:cvw-config-reveal .28s ease both;scroll-margin-top:18px}@keyframes cvw-config-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* STEP 4 — scalable SVG vinyl base and reusable splatter masks */
.cvw__vinyl-svg{
  position:absolute;
  inset:0;
  z-index:1;
  display:none;
  width:100%;
  height:100%;
  pointer-events:none;
  border-radius:50%;
  overflow:hidden;
}
.cvw__disc.is-svg-effect .cvw__vinyl-svg{display:block}
/* Approved defined splatter is a transparent overlay. The chosen special
   effect stays underneath and remains fully visible when Yes is selected. */
.cvw__disc.has-defined-splatter::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:50%;
  background-image:var(--cvw-defined-splatter-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}
.cvw__disc.has-defined-splatter .cvw__groove{z-index:3;opacity:.42;mix-blend-mode:multiply}
.cvw__disc.has-defined-splatter .cvw__center,
.cvw__disc.has-defined-splatter .cvw__pin{z-index:5}
/* Keep the JavaScript-generated background visible for effects such as Splatter.
   Half-Half already receives an inline transparent background from JavaScript,
   while Splatter needs this layer to display the customer-selected base color. */
.cvw__disc.is-svg-halfhalf{isolation:isolate}
.cvw__svg-half{display:none}
.cvw__disc.is-svg-halfhalf .cvw__svg-half{display:block}
.cvw__svg-half--1{fill:var(--cvw-half-1,#111)}
.cvw__svg-half--2{fill:var(--cvw-half-2,#f8fafc)}
.cvw__svg-splash{display:none;opacity:.96}
.cvw__svg-splash--1{fill:var(--cvw-splatter-1,#111)}
.cvw__svg-splash--2{fill:var(--cvw-splatter-2,#fff)}
.cvw__svg-splash--3{fill:var(--cvw-splatter-3,#e11d48)}
.cvw__disc.has-halfhalf-splatter[data-cvw-splatter-count="1"] .cvw__svg-splash--1,
.cvw__disc.has-halfhalf-splatter[data-cvw-splatter-count="2"] .cvw__svg-splash--1,
.cvw__disc.has-halfhalf-splatter[data-cvw-splatter-count="2"] .cvw__svg-splash--2,
.cvw__disc.has-halfhalf-splatter[data-cvw-splatter-count="3"] .cvw__svg-splash{display:block}
.cvw__disc.is-svg-effect .cvw__groove{z-index:3;opacity:.42;mix-blend-mode:multiply}
.cvw__disc.is-svg-effect .cvw__center,
.cvw__disc.is-svg-effect .cvw__pin{z-index:5}
.cvw__disc.is-svg-effect .cvw__picture-disc-art,
.cvw__disc.is-svg-halfhalf .cvw__picture-disc-placeholder{z-index:6}
@media(max-width:700px){.cvw__effects-accordion-toggle{padding:13px 14px}.cvw__effects-toggle-copy strong{font-size:13px}.cvw__effects-toggle-icon{flex-basis:30px;width:30px;height:30px}.cvw__effects-toggle-icon:before,.cvw__effects-toggle-icon:after{left:8px;top:14px}}
/* Step 4 shared special-effect configurator */
.cvw__visual-effect-heading{margin-bottom:4px}.cvw__visual-effect-heading strong{font-family:var(--cvw-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cvw-heading-text)}
.cvw__visual-base-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
.cvw__panel[data-panel="3"]>h2{margin-bottom:8px}
.cvw__panel[data-panel="3"] .cvw__vinyl-selection{margin-top:0}
.cvw__disc.is-svg-halfhalf:not(.is-catalog-halfhalf) .cvw__svg-half{display:none}
.cvw__disc.is-svg-halfhalf:not(.is-catalog-halfhalf) .cvw__vinyl-svg{z-index:2;pointer-events:none}
.cvw__disc.is-svg-halfhalf:not(.is-catalog-halfhalf) .cvw__svg-splash{mix-blend-mode:normal}
@media(max-width:700px){.cvw__visual-base-colors{grid-template-columns:1fr}}


/* Step 4 special-effect SVG constructions — organic poured edges and live customer colors */
.cvw__svg-effect{display:none}
.cvw__svg-fill--1{fill:var(--cvw-effect-1,#111)}
.cvw__svg-fill--2{fill:var(--cvw-effect-2,#f8fafc)}
.cvw__svg-fill--3{fill:var(--cvw-effect-3,#e11d48)}
.cvw__svg-fill--4{fill:var(--cvw-effect-4,#2563eb)}
.cvw__svg-organic-edge{opacity:.98}
.cvw__disc.is-catalog-colorincolor .cvw__svg-effect--colorincolor,
.cvw__disc.is-catalog-aside2 .cvw__svg-effect--aside2,
.cvw__disc.is-catalog-aside3 .cvw__svg-effect--aside3,
.cvw__disc.is-catalog-segments3 .cvw__svg-effect--segments3,
.cvw__disc.is-catalog-quad4 .cvw__svg-effect--quad4,
.cvw__disc.is-catalog-stripes3 .cvw__svg-effect--stripes3,
.cvw__disc.is-catalog-stripesab .cvw__svg-effect--stripesab{display:block}
.cvw__disc.is-catalog-colorincolor .cvw__vinyl-svg,
.cvw__disc.is-catalog-aside2 .cvw__vinyl-svg,
.cvw__disc.is-catalog-aside3 .cvw__vinyl-svg,
.cvw__disc.is-catalog-segments3 .cvw__vinyl-svg,
.cvw__disc.is-catalog-quad4 .cvw__vinyl-svg,
.cvw__disc.is-catalog-stripes3 .cvw__vinyl-svg,
.cvw__disc.is-catalog-stripesab .cvw__vinyl-svg{display:block}

/* Organic poured previews: full-surface color with rough, paint-like boundaries. */
.cvw__svg-brush-region,
.cvw__svg-brush-gaps {
  transform-box: fill-box;
  transform-origin: center;
}
.cvw__disc.is-catalog-colorincolor .cvw__svg-brush-region {
  opacity: .99;
}
.cvw__disc.is-catalog-aside2 .cvw__vinyl-svg,
.cvw__disc.is-catalog-aside3 .cvw__vinyl-svg,
.cvw__disc.is-catalog-colorincolor .cvw__vinyl-svg {
  shape-rendering: geometricPrecision;
}


/* Marble / Swirl approved pair selector */
.cvw__marble-pair-panel{margin-top:16px}
}


/* Compact Metallic / Glitter / Iridescent selector */
.cvw__finish-family-panel{margin-top:14px;padding:16px;border:1px solid rgba(245,230,35,.42);border-radius:16px;background:rgba(16,17,22,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.cvw__finish-family-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.cvw__finish-family-tabs button{appearance:none;border:1px solid rgba(245,230,35,.32);border-radius:999px;padding:10px 12px;background:rgba(255,255,255,.055);color:var(--cvw-yellow,#f5e623);font:inherit;font-weight:750;cursor:pointer;transition:.2s ease}
.cvw__finish-family-tabs button:hover{border-color:rgba(245,230,35,.72);background:rgba(245,230,35,.09);transform:translateY(-1px)}
.cvw__finish-family-tabs button.is-on{border-color:var(--cvw-yellow,#f5e623);background:var(--cvw-yellow,#f5e623);color:#17181d;box-shadow:0 6px 18px rgba(245,230,35,.16)}
.cvw__finish-family-options{padding:2px}
.cvw__finish-family-options>[hidden]{display:none!important}
.cvw__finish-family-options .cvw__field{margin:0}
.cvw__finish-family-options .cvw__field>span{color:var(--cvw-yellow,#f5e623)}
.cvw__finish-family-options .cvw__input{border-color:rgba(245,230,35,.42);background:#f8fafc;color:#30333d}
.cvw__finish-family-options .cvw__input:focus{border-color:var(--cvw-yellow,#f5e623);box-shadow:0 0 0 3px rgba(245,230,35,.14)}
@media(max-width:620px){.cvw__finish-family-tabs{grid-template-columns:1fr}.cvw__finish-family-tabs button{border-radius:12px;text-align:left}}


/* Cornetto uses an embedded SVG background generated from the selected approved color pair. */
.cvw__disc.is-catalog-cornetto {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


/* STEP 4 — compact base/splatter accordion */
.cvw__visual-config-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid color-mix(in oklab,var(--cvw-primary) 42%,var(--cvw-border));border-radius:13px;background:color-mix(in oklab,var(--cvw-card) 94%,rgba(0,0,0,.18));color:var(--cvw-heading-text);text-align:left;cursor:pointer}
.cvw__visual-config-toggle>span:first-child{display:flex;flex-direction:column;gap:4px}.cvw__visual-config-toggle strong{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cvw-heading-text)}.cvw__visual-config-toggle small{font-size:11px;color:var(--cvw-muted);font-weight:650}
.cvw__visual-config-toggle-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:1px solid var(--cvw-border);border-radius:50%;font-size:20px;line-height:1;color:var(--cvw-primary);transition:transform .2s ease}
.cvw__visual-config-toggle.is-open .cvw__visual-config-toggle-icon{transform:rotate(45deg)}
.cvw__visual-base-panel{padding-top:2px}.cvw__visual-base-panel[hidden],.cvw__visual-splatter-body[hidden]{display:none!important}
.cvw__halfhalf-splatter-panel{padding:0!important;border-left:0!important;background:transparent!important}.cvw__visual-config-toggle--splatter{border-color:color-mix(in oklab,var(--cvw-primary) 62%,var(--cvw-border));background:color-mix(in oklab,var(--cvw-primary) 7%,var(--cvw-card));margin-top:14px}
.cvw__visual-splatter-body{margin-top:10px;padding:16px;border-left:3px solid var(--cvw-primary);border-radius:0 14px 14px 0;background:color-mix(in oklab,var(--cvw-primary) 5%,rgba(0,0,0,.18))}


/* STEP 4 — Special Effects preview disclaimer tooltip */
.cvw__vinyl-tab--special-tooltip {
  position: relative;
  overflow: visible;
}
.cvw__special-effects-tooltip {
  position: absolute;
  z-index: 80;
  left: 50%;
  top: calc(100% + 12px);
  width: min(330px, calc(100vw - 44px));
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--cvw-primary) 58%, var(--cvw-border));
  border-radius: 12px;
  background: #17181d;
  color: var(--cvw-heading-text, #f5e623);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.cvw__special-effects-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 12px;
  height: 12px;
  background: #17181d;
  border-top: 1px solid color-mix(in oklab, var(--cvw-primary) 58%, var(--cvw-border));
  border-left: 1px solid color-mix(in oklab, var(--cvw-primary) 58%, var(--cvw-border));
  transform: translateX(-50%) rotate(45deg);
}
.cvw__vinyl-tab--special-tooltip:hover .cvw__special-effects-tooltip,
.cvw__vinyl-tab--special-tooltip:focus-visible .cvw__special-effects-tooltip,
.cvw__vinyl-tab--special-tooltip:focus-within .cvw__special-effects-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (max-width: 620px) {
  .cvw__special-effects-tooltip {
    left: auto;
    right: 0;
    transform: translateY(-5px);
  }
  .cvw__special-effects-tooltip::before {
    left: auto;
    right: 28px;
    transform: rotate(45deg);
  }
  .cvw__vinyl-tab--special-tooltip:hover .cvw__special-effects-tooltip,
  .cvw__vinyl-tab--special-tooltip:focus-visible .cvw__special-effects-tooltip,
  .cvw__vinyl-tab--special-tooltip:focus-within .cvw__special-effects-tooltip {
    transform: translateY(0);
  }
}

/* Step 1 combined Vinyl + CD production disclaimer. */
.cvw__project-notes > .cvw__vinyl-cd-disclaimer {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--cvw-primary) 58%, var(--cvw-border));
  border-radius: 12px;
  background: color-mix(in oklab, var(--cvw-primary) 7%, var(--cvw-card));
  color: var(--cvw-primary);
  font-weight: 800;
}

.cvw__vinyl-cd-disclaimer strong {
  font-weight: 900;
}

/* Step 7 UPC barcode sticker: divider and exact 12-digit entry field. */
.cvw__sticker-divider {
  width: 100%;
  min-height: 1px;
  height: 1px;
  grid-column: 1 / -1;
  margin: 4px 0;
}
.cvw__upc-option {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.cvw__upc-code-field {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 45%,var(--cvw-border));
  border-radius: 12px;
  background: color-mix(in oklab,var(--cvw-panel) 88%,#000);
}
.cvw__upc-code-field[hidden] { display: none !important; }
.cvw__upc-code-field > span {
  color: var(--cvw-primary);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cvw__upc-code-field input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--cvw-border);
  border-radius: 9px;
  background: #fff;
  color: var(--cvw-input-text,#1f2937);
  font: 700 var(--cvw-input-font-size,16px)/1.2 "Montserrat",Arial,sans-serif;
  letter-spacing: .12em;
}
.cvw__upc-code-field input:focus {
  outline: 2px solid var(--cvw-primary);
  outline-offset: 2px;
}
.cvw__upc-code-field small {
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Step 7 UPC option: keep the selection and 12-digit entry field side by side. */
.cvw__upc-option {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.35fr);
  align-items: stretch;
  column-gap: 14px;
}
.cvw__upc-option > .cvw__card,
.cvw__upc-option > .cvw__upc-code-field {
  min-width: 0;
  height: 100%;
}
.cvw__upc-option > .cvw__upc-code-field {
  align-content: center;
}
@media (max-width: 760px) {
  .cvw__upc-option {
    grid-template-columns: 1fr;
  }
}


/* Double-record compatibility guidance and disabled choices */
.cvw__record-type-guidance {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(244, 232, 49, .45);
  border-radius: 10px;
  background: rgba(244, 232, 49, .07);
  color: #f4e831;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.cvw__effect-choice.is-type-locked,
.cvw__vinyl-choice.is-type-locked {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(.45);
}
.cvw__effect-choice.is-type-locked:hover,
.cvw__vinyl-choice.is-type-locked:hover {
  transform: none;
  box-shadow: none;
}


/* Double-album preview responsive tuning. */
@media (max-width:700px) {
  .cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__record {
    transform: translate(-17%,-1%) scale(.61);
  }
  .cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__secondary-disc {
    transform: translate(-16%,-50%) scale(.61);
  }
  .cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__preview-record-name {
    left: 30%;
  }
  .cvw__secondary-record-name {
    bottom: -34px;
  }
}

/* ==============================================================================
   DOUBLE ALBUM — ONE JACKET WITH BOTH RECORDS
   Shows one centered jacket with the active record peeking from the left and the
   other record peeking from the right. Single-album jacket preview is unchanged.
   ============================================================================== */

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  z-index: 7;
  width: min(270px,66%);
  opacity: 1;
  transform: translate(-50%,-50%) rotateY(-2deg);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
  z-index: 5;
  opacity: 1;
  transform: translate(-38%,-1%) scale(.56);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
  z-index: 4;
  opacity: .96;
  pointer-events: auto;
  transform: translate(-3%,-50%) scale(.56);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__preview-record-name {
  left: 23%;
  bottom: 1px;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-record-name {
  bottom: -42px;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc:hover {
  filter: brightness(1.12);
  transform: translate(-3%,-50%) scale(.575);
}

@media (max-width:700px) {
  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
    width: min(230px,62%);
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
    transform: translate(-35%,-1%) scale(.48);
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
    transform: translate(-5%,-50%) scale(.48);
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc:hover {
    transform: translate(-5%,-50%) scale(.495);
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__preview-record-name {
    left: 21%;
  }
}


/* ==============================================================================
   FINAL PREVIEW ALIGNMENT + RESTORED PACKAGING VISIBILITY
   Fixed pixel offsets prevent 7-inch records from drifting away from the jacket.
   Format-specific variables are supplied by JavaScript for 7-inch, 12-inch/140g,
   and 12-inch/180g configurations.
   ============================================================================== */

.cvw {
  --cvw-jacket-preview-size: 270px;
  --cvw-jacket-record-scale: .57;
  --cvw-jacket-record-offset: 136px;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  width: min(var(--cvw-jacket-preview-size), 68%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(-2deg);
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
  inset: 0;
  transform: translateX(calc(-1 * var(--cvw-jacket-record-offset))) scale(var(--cvw-jacket-record-scale));
  transform-origin: center;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--cvw-jacket-record-offset)), -50%) scale(var(--cvw-jacket-record-scale));
  transform-origin: center;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc:hover {
  transform: translate(calc(-50% + var(--cvw-jacket-record-offset)), -50%) scale(calc(var(--cvw-jacket-record-scale) + .015));
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__preview-record-name {
  left: calc(50% - var(--cvw-jacket-record-offset));
  bottom: 1px;
}

.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-record-name {
  bottom: -42px;
}

@media (max-width:700px) {
  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
    width: min(var(--cvw-jacket-preview-size), 64%);
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
    transform: translateX(calc(-1 * var(--cvw-jacket-record-offset))) scale(calc(var(--cvw-jacket-record-scale) - .07));
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
    transform: translate(calc(-50% + var(--cvw-jacket-record-offset)), -50%) scale(calc(var(--cvw-jacket-record-scale) - .07));
  }

  .cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc:hover {
    transform: translate(calc(-50% + var(--cvw-jacket-record-offset)), -50%) scale(calc(var(--cvw-jacket-record-scale) - .055));
  }
}


/* FINAL DOUBLE-ALBUM PREVIEW REFINEMENT
   Both records use the same SVG effect renderer, and approximately half of each
   disc remains visible outside the centered jacket. */
.cvw__secondary-disc.cvw__disc {
  position: absolute;
  animation: none;
  overflow: hidden;
}
.cvw__secondary-disc .cvw__vinyl-svg {
  border-radius: 50%;
}
.cvw__secondary-disc .cvw__groove {
  pointer-events: none;
}
.cvw__secondary-disc .cvw__secondary-center,
.cvw__secondary-disc .cvw__pin {
  z-index: 5;
}
.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  z-index: 8;
}
.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record,
.cvw--double-album .cvw__preview-stage[data-preview-mode="jacket"] .cvw__secondary-disc {
  z-index: 5;
}

/* STEP 9 — clean the complete gatefold upload field so it uses one visual container only. */
.cvw__gatefold-upload > .cvw__upload {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* STEP 4 — compact selected-vinyl row with color catalog access.
   Added without changing the double-album preview, jacket, upload, or record logic. */
.cvw__vinyl-selection {
  gap: 12px;
  border-radius: 13px;
  padding: 9px 12px;
}

.cvw__vinyl-selection-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cvw__vinyl-selection-copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.cvw__vinyl-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.cvw__vinyl-selection-actions > span {
  color: var(--cvw-accent);
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 9px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.cvw__vinyl-catalog-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 62%,var(--cvw-border));
  border-radius: 999px;
  background: color-mix(in oklab,var(--cvw-primary) 8%,transparent);
  color: var(--cvw-primary) !important;
  font-family: "Montserrat",Arial,sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s ease,background .18s ease,transform .18s ease;
}

.cvw__vinyl-catalog-link:hover {
  border-color: var(--cvw-primary);
  background: color-mix(in oklab,var(--cvw-primary) 15%,transparent);
  transform: translateY(-1px);
}

@media (max-width:650px) {
  .cvw__vinyl-selection {
    align-items: flex-start;
  }

  .cvw__vinyl-selection-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
  }

  .cvw__vinyl-catalog-link {
    min-height: 32px;
    padding: 7px 9px;
  }
}

/* Center-label choices: White CMYK, Black CMYK, and Picture Disc only. */
.cvw__color-grid--center-labels {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.cvw__swatch--picture-label,
.cvw__center.is-picture-center-label {
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.92) 0 8%,transparent 9%),
    radial-gradient(circle at 72% 68%,rgba(255,226,55,.9) 0 12%,transparent 13%),
    conic-gradient(from 35deg,#1e40af,#ec4899,#f97316,#facc15,#22c55e,#06b6d4,#1e40af) !important;
}

.cvw__swatch--picture-label {
  display:grid;
  place-items:center;
  color:#fff;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

.cvw__center.is-picture-center-label {
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.78);
}

.cvw__label-price-note--statement .cvw__label-price-note-body {
  padding:16px 18px;
}

.cvw__label-price-note--statement p {
  margin:0;
}

@media (max-width:720px) {
  .cvw__color-grid--center-labels {
    grid-template-columns:1fr;
  }
}


/* Review-step quantity editor: active only on the final quote screen. */
.cvw__stat-quantity.is-editable {
  padding: 11px 12px;
}

.cvw__stat-quantity.is-editable > strong {
  display: none;
}

.cvw__review-quantity-control {
  display: grid;
  grid-template-columns: 32px minmax(64px,1fr) 32px;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}

.cvw__review-quantity-control[hidden] {
  display: none !important;
}

.cvw__review-quantity-button,
.cvw__review-quantity-input {
  height: 34px;
  border: 1px solid var(--cvw-border);
  border-radius: 9px;
  background: color-mix(in oklab,var(--cvw-card) 88%,#000);
  color: var(--cvw-primary);
  font: 700 14px/1 "Montserrat",Arial,sans-serif;
}

.cvw__review-quantity-button {
  padding: 0;
  cursor: pointer;
}

.cvw__review-quantity-button:hover,
.cvw__review-quantity-button:focus-visible {
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab,var(--cvw-primary) 18%,transparent);
}

.cvw__review-quantity-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 5px;
  text-align: center;

  /* ONLY the box around the quantity number */
  background: #000000 !important;

  /* Keep 800 bright and easy to read */
  color: var(--cvw-primary) !important;
  -webkit-text-fill-color: var(--cvw-primary) !important;

  border: 1px solid var(--cvw-border);
  border-radius: 9px;

  font: 900 14px/1 "Montserrat",Arial,sans-serif;

  appearance: textfield;
  -moz-appearance: textfield;
}

.cvw__review-quantity-input:focus {
  outline: none;
  border-color: var(--cvw-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab,var(--cvw-primary) 18%,transparent);
}

@media (max-width:520px) {
  .cvw__review-quantity-control {
    grid-template-columns: 30px minmax(58px,1fr) 30px;
    gap: 4px;
  }
}


/* ==============================================================================
   LARGE PREVIEW MODE — immersive record and jacket viewing without losing progress
   ============================================================================== */

.cvw__preview-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cvw__large-preview-open,
.cvw__large-preview-close {
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 48%,var(--cvw-border)) !important;
  border-radius: 999px !important;
  background: color-mix(in oklab,var(--cvw-primary) 7%,rgba(0,0,0,.24)) !important;
  color: var(--cvw-heading-text) !important;
  padding: 8px 11px !important;
  font: 900 9px/1 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  transition: border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}

.cvw__large-preview-open:hover,
.cvw__large-preview-open:focus-visible,
.cvw__large-preview-close:hover,
.cvw__large-preview-close:focus-visible {
  border-color: var(--cvw-primary) !important;
  background: color-mix(in oklab,var(--cvw-primary) 14%,rgba(0,0,0,.28)) !important;
  box-shadow: 0 0 22px color-mix(in oklab,var(--cvw-primary) 18%,transparent);
  transform: translateY(-1px);
}

.cvw__large-preview-close {
  display: none;
  position: absolute;
  z-index: 30;
  top: 20px;
  right: 20px;
  padding: 11px 15px !important;
}

html.cvw-large-preview-lock,
body.cvw-large-preview-lock {
  overflow: hidden;
}

.cvw.cvw--large-preview {
  position: fixed;
  inset: 0;
  z-index: 999998;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  padding: 18px;
  background: color-mix(in oklab,var(--cvw-bg) 96%,#000);
}

.cvw.cvw--large-preview .cvw__grid-bg,
.cvw.cvw--large-preview .cvw__glow {
  position: fixed;
}

.cvw.cvw--large-preview .cvw__wrap {
  max-width: none;
  min-height: calc(100vh - 36px);
  padding: 0;
}

.cvw.cvw--large-preview .cvw__welcome,
.cvw.cvw--large-preview .cvw__stepper,
.cvw.cvw--large-preview .cvw__mobile-progress,
.cvw.cvw--large-preview .cvw__panels,
.cvw.cvw--large-preview .cvw__stats,
.cvw.cvw--large-preview .cvw__timeline,
.cvw.cvw--large-preview .cvw__sticky-estimate,
.cvw.cvw--large-preview .cvw__preview-foot {
  display: none !important;
}

.cvw.cvw--large-preview .cvw__layout {
  display: block;
  min-height: calc(100vh - 36px);
}

.cvw.cvw--large-preview .cvw__preview {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: calc(100vh - 36px);
}

.cvw.cvw--large-preview .cvw__preview-card {
  min-height: calc(100vh - 36px);
  border-color: color-mix(in oklab,var(--cvw-primary) 32%,var(--cvw-border));
  background:
    radial-gradient(circle at 50% 45%,color-mix(in oklab,var(--cvw-primary) 10%,transparent),transparent 38%),
    color-mix(in oklab,var(--cvw-panel) 94%,#000);
  box-shadow: 0 30px 90px rgba(0,0,0,.58),inset 0 0 80px rgba(255,255,255,.025);
  padding: 24px;
}

.cvw.cvw--large-preview .cvw__preview-head {
  padding-right: 210px;
}

.cvw.cvw--large-preview .cvw__large-preview-open {
  display: none;
}

.cvw.cvw--large-preview .cvw__large-preview-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cvw.cvw--large-preview .cvw__preview-modes {
  position: absolute;
  z-index: 31;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  background: color-mix(in oklab,var(--cvw-panel) 92%,#000);
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
}

.cvw.cvw--large-preview .cvw__preview-stage {
  inset: 74px 32px 82px;
  overflow: visible;
}

.cvw.cvw--large-preview .cvw__disc {
  width: min(64vh,680px);
  height: min(64vh,680px);
}

.cvw.cvw--large-preview .cvw__jacket-preview {
  width: min(56vh,610px);
}

.cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="record"] .cvw__record {
  transform: scale(1);
}

.cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  transform: translate(-61%,-50%) rotateY(-4deg) scale(1.02);
}

.cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
  transform: translate(38%,-1%) scale(.78);
}

.cvw.cvw--large-preview.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__record {
  transform: translate(-20%,-1%) scale(.82);
}

.cvw.cvw--large-preview.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__secondary-disc {
  opacity: .96;
  transform: translate(-12%,-50%) scale(.82);
}

@media (max-width: 760px) {
  .cvw__preview-head-actions {
    gap: 6px;
  }
  .cvw__large-preview-open {
    padding: 7px 9px !important;
    font-size: 8px !important;
  }
  .cvw.cvw--large-preview {
    padding: 8px;
  }
  .cvw.cvw--large-preview .cvw__wrap,
  .cvw.cvw--large-preview .cvw__layout,
  .cvw.cvw--large-preview .cvw__preview,
  .cvw.cvw--large-preview .cvw__preview-card {
    min-height: calc(100vh - 16px);
  }
  .cvw.cvw--large-preview .cvw__preview-card {
    padding: 16px;
  }
  .cvw.cvw--large-preview .cvw__preview-head {
    padding-right: 0;
    padding-top: 54px;
  }
  .cvw.cvw--large-preview .cvw__large-preview-close {
    top: 14px;
    right: 14px;
  }
  .cvw.cvw--large-preview .cvw__preview-stage {
    inset: 112px 8px 88px;
  }
  .cvw.cvw--large-preview .cvw__disc {
    width: min(74vw,54vh);
    height: min(74vw,54vh);
  }
  .cvw.cvw--large-preview .cvw__jacket-preview {
    width: min(68vw,48vh);
  }
  .cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
    transform: translate(-55%,-54%) rotateY(-3deg) scale(.92);
  }
  .cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
    transform: translate(28%,8%) scale(.58);
  }
}

/* PHONE PREVIEW HEAD: the actions row did not wrap, so the autosave pill (full width below 760px)
   squeezed the Large Preview button onto three lines. The row now wraps, which puts the pill on
   its own line and leaves the button on one; both read at 12px. */
@media screen and (max-width: 749px) {
  .cvw .cvw__preview-head-actions {
    flex-wrap: wrap;
  }

  .cvw .cvw__large-preview-open {
    font-size: 12px !important;
    white-space: nowrap;
  }

  .cvw .cvw__autosave-status {
    font-size: 12px;
  }
}


/* ==============================================================================
   LARGE PREVIEW REFINEMENT — centered premium frame and record switching
   ============================================================================== */

.cvw__large-record-switcher {
  display: none;
}

.cvw.cvw--large-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(24px,4vh,46px) clamp(22px,7vw,120px);
}

.cvw.cvw--large-preview .cvw__wrap {
  width: 100%;
  max-width: 1240px;
  min-height: 0;
}

.cvw.cvw--large-preview .cvw__layout,
.cvw.cvw--large-preview .cvw__preview {
  width: 100%;
  min-height: 0;
}

.cvw.cvw--large-preview .cvw__preview-card {
  width: 100%;
  height: min(84vh,780px);
  min-height: 620px;
  max-height: 780px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
}

.cvw.cvw--large-preview .cvw__preview-stage {
  inset: 78px 42px 96px;
  overflow: hidden;
}

.cvw.cvw--large-preview .cvw__disc {
  width: min(55vh,560px);
  height: min(55vh,560px);
}

.cvw.cvw--large-preview .cvw__jacket-preview {
  width: min(48vh,500px);
}

.cvw.cvw--large-preview .cvw__large-record-switcher:not([hidden]) {
  position: absolute;
  z-index: 32;
  left: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2,minmax(92px,1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--cvw-border);
  border-radius: 999px;
  background: color-mix(in oklab,var(--cvw-panel) 92%,#000);
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
}

.cvw.cvw--large-preview .cvw__large-record-switcher button {
  min-height: 34px;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  color: var(--cvw-muted) !important;
  font: 900 8px/1 "Montserrat",Arial,sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.cvw.cvw--large-preview .cvw__large-record-switcher button.is-on {
  background: var(--cvw-primary) !important;
  color: #071015 !important;
  box-shadow: 0 0 18px color-mix(in oklab,var(--cvw-primary) 28%,transparent);
}

.cvw.cvw--large-preview.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__record {
  transform: translate(-18%,-1%) scale(.74);
}

.cvw.cvw--large-preview.cvw--double-album .cvw__preview-stage[data-preview-mode="record"] .cvw__secondary-disc {
  opacity: .94;
  transform: translate(-10%,-50%) scale(.74);
}

.cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__jacket-preview {
  transform: translate(-58%,-50%) rotateY(-4deg) scale(.94);
}

.cvw.cvw--large-preview .cvw__preview-stage[data-preview-mode="jacket"] .cvw__record {
  transform: translate(31%,-1%) scale(.68);
}

@media (max-width: 900px) {
  .cvw.cvw--large-preview {
    padding: 18px;
  }
  .cvw.cvw--large-preview .cvw__preview-card {
    height: calc(100vh - 36px);
    min-height: 560px;
    max-height: none;
  }
  .cvw.cvw--large-preview .cvw__preview-stage {
    inset: 105px 14px 106px;
  }
  .cvw.cvw--large-preview .cvw__large-record-switcher:not([hidden]) {
    left: 50%;
    bottom: 70px;
    transform: translateX(-50%);
  }
  .cvw.cvw--large-preview .cvw__preview-modes {
    bottom: 20px;
  }
}

@media (max-width: 560px) {
  .cvw.cvw--large-preview {
    padding: 8px;
  }
  .cvw.cvw--large-preview .cvw__preview-card {
    height: calc(100vh - 16px);
    min-height: 520px;
    border-radius: 18px;
  }
  .cvw.cvw--large-preview .cvw__disc {
    width: min(72vw,48vh);
    height: min(72vw,48vh);
  }
  .cvw.cvw--large-preview .cvw__jacket-preview {
    width: min(64vw,43vh);
  }
  .cvw.cvw--large-preview .cvw__large-record-switcher:not([hidden]) {
    grid-template-columns: repeat(2,minmax(78px,1fr));
  }
}


/* ==============================================================================
   LIVE AUTO-SAVE STATUS
   ============================================================================== */
.cvw__autosave-status{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:6px 10px;border:1px solid var(--cvw-border);border-radius:999px;background:rgba(0,0,0,.18);font:800 8px/1.2 "Montserrat",Arial,sans-serif;letter-spacing:.05em;text-transform:none;white-space:nowrap}
.cvw__autosave-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.cvw__autosave-status.is-saved{color:#86efac;border-color:rgba(134,239,172,.38)}
.cvw__autosave-status.is-saving{color:#67e8f9;border-color:rgba(103,232,249,.4)}
.cvw__autosave-status.is-saving .cvw__autosave-dot{animation:cvw-autosave-pulse .8s ease-in-out infinite alternate}
.cvw__autosave-status.is-failed{color:#fb923c;border-color:rgba(251,146,60,.5)}
@keyframes cvw-autosave-pulse{to{opacity:.25;transform:scale(.7)}}
@media(max-width:760px){.cvw__autosave-status{order:3;width:100%;justify-content:center}}

/* STEP 10 — DESIGN ASSETS SIMPLE CARD LAYOUT
   Visual-only refinement. Existing data-cvw hooks and conditional upload logic are unchanged. */
.cvw__panel--design-assets .cvw__design-assets-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.cvw__panel--design-assets .cvw__design-assets-head .cvw__eyebrow {
  margin-bottom: 8px;
}

.cvw__panel--design-assets .cvw__design-assets-head h2 {
  margin-bottom: 0;
}

.cvw__design-template-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--cvw-border);
  border-radius: 10px;
  color: var(--cvw-heading-text);
  background: color-mix(in oklab,var(--cvw-card) 92%,transparent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.cvw__design-template-btn:hover,
.cvw__design-template-btn:focus-visible {
  border-color: var(--cvw-primary);
  color: var(--cvw-primary);
}

.cvw__design-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cvw-border);
  border-radius: 13px;
  background: color-mix(in oklab,var(--cvw-card) 92%,transparent);
}

.cvw__design-toolbar > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cvw__design-toolbar strong {
  color: var(--cvw-heading-text);
  font-size: 14px;
}

.cvw__design-toolbar span {
  color: var(--cvw-muted);
  font-size: 13px;
  line-height: 1.4;
}

.cvw__design-upload-grid {
  gap: 14px;
}

.cvw__design-upload-card {
  min-height: 172px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  text-align: center;
  border: 1px solid color-mix(in oklab,var(--cvw-primary) 38%,var(--cvw-border));
  border-radius: 14px;
  background: color-mix(in oklab,var(--cvw-card) 96%,transparent);
}

.cvw__design-upload-card .cvw__design-upload-icon {
  display: block;
  color: var(--cvw-muted);
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}

.cvw__design-upload-card > strong,
.cvw__design-upload-card .cvw__gatefold-head strong {
  display: block;
  color: var(--cvw-heading-text);
  font-size: 15px;
  line-height: 1.25;
}

.cvw__design-upload-card > small,
.cvw__design-upload-card .cvw__gatefold-head span:not(.cvw__design-upload-icon) {
  display: block;
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.35;
}

.cvw__design-upload-card input[type="file"] {
  width: 100%;
  max-width: 310px;
  margin-top: 6px;
}

.cvw__design-upload-card--gatefold {
  grid-column: 1 / -1;
  min-height: 160px;
}

.cvw__design-upload-card--gatefold .cvw__gatefold-head,
.cvw__design-upload-card--gatefold .cvw__gatefold-head > div {
  width: 100%;
  text-align: center;
}

.cvw__design-upload-card--gatefold > .cvw__upload {
  width: 100%;
}

.cvw__design-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--cvw-border);
  border-radius: 13px;
  background: color-mix(in oklab,var(--cvw-card) 88%,transparent);
  text-align: center;
}

.cvw__design-empty strong {
  display: block;
  color: var(--cvw-heading-text);
  margin-bottom: 3px;
}

.cvw__design-empty span {
  color: var(--cvw-muted);
  font-size: 13px;
}

.cvw__design-not-ready {
  margin-top: 2px;
  padding: 13px 15px;
}

.cvw__design-assets-note {
  margin: 12px 0 0;
  color: var(--cvw-muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .cvw__panel--design-assets .cvw__design-assets-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cvw__design-template-btn {
    width: 100%;
  }

  .cvw__design-upload-card,
  .cvw__design-upload-card--gatefold {
    grid-column: 1 / -1;
  }
}
.cvw__design-upload-card > .cvw__design-upload-icon {
  margin-bottom: 4px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Single-color Add Splatter uses the same controls as special-effect Add Splatter. */
.cvw__single-splatter{margin-top:18px}
.cvw__single-splatter[hidden]{display:none!important}
.cvw__single-splatter .cvw__halfhalf-splatter-panel{margin-top:10px}

/* Single-color Add Splatter: keep dropdown values readable on the dark panel. */
.cvw__single-splatter select.cvw__input {
  appearance: auto !important;
  background-color: #fff !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  opacity: 1 !important;
}
.cvw__single-splatter select.cvw__input option {
  background: #fff !important;
  color: #1f2937 !important;
}


/* ==============================================================================
   CONECTIV BRAND TYPOGRAPHY + COLOR — 2026-08-21
   Font sizes intentionally remain unchanged in this pass.
   Headings: Montserrat Black (900)
   Subheadings / controls: Montserrat SemiBold (600)
   Body: Montserrat Regular (400)
   Brand yellow: #FCE300
   ============================================================================== */
.cvw,
.cvw input,
.cvw select,
.cvw textarea,
.cvw button {
  font-family: "Montserrat", Arial, sans-serif;
}

.cvw {
  font-weight: 400;
  --cvw-primary: #FCE300;
  --cvw-accent: #FCE300;
}

.cvw h1,
.cvw h2,
.cvw h3,
.cvw h4,
.cvw h5,
.cvw h6,
.cvw__contact-title {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 900 !important;
}

.cvw strong,
.cvw b,
.cvw__step-btn,
.cvw__eyebrow,
.cvw__button,
.cvw__welcome-badge,
.cvw__welcome-start,
.cvw__welcome-contact,
.cvw__preprod-heading strong,
.cvw__field > span,
.cvw__upload > span,
.cvw__price-pill,
.cvw__vinyl-tab,
.cvw__record-tabs button,
.cvw__copy-record,
.cvw__vinyl-filters button,
.cvw__contact-fields label > span,
.cvw__contact-submit {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 600 !important;
}

.cvw p,
.cvw li,
.cvw em,
.cvw small,
.cvw span,
.cvw input,
.cvw select,
.cvw textarea {
  font-family: "Montserrat", Arial, sans-serif;
}

/* ==============================================================================
   UNIFORM BUTTON TYPOGRAPHY — Conectiv portal-wide action standard
   All interactive button text uses one Montserrat treatment and uppercase copy.
   This is visual-only: no button logic, data attributes, pricing, or routes change.
   ============================================================================== */
.cvw button,
.cvw a.cvw__button,
.cvw a.cvw__welcome-contact,
.cvw a.cvw__vinyl-catalog-link,
.cvw a.cvw__design-template-btn {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.cvw__format-status span {
  margin-left: 8px;
}

/* 2026-08-25 — Center label and sticker presentation cleanup */
.cvw__color-grid--center-labels .cvw__color {
  align-items:center;
}

.cvw__center-label-copy {
  display:flex;
  min-width:0;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.cvw__center-label-copy strong,
.cvw__center-label-copy em,
.cvw__center-label-price {
  display:block;
  width:100%;
}

.cvw__center-label-copy em {
  line-height:1.4;
}

.cvw__center-label-price {
  margin-top:4px;
  color:var(--cvw-primary);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cvw__label-price-tier-sentences {
  display:flex;
  margin-top:12px;
  flex-direction:column;
  gap:6px;
}

.cvw__label-price-tier-sentences p {
  display:block;
  margin:0;
  line-height:1.45;
}

.cvw__label-current-rate {
  margin-top:14px !important;
  padding-top:12px;
  border-top:1px solid var(--cvw-border);
  color:var(--cvw-primary) !important;
  font-weight:700;
}

.cvw__sticker-application-note {
  grid-column:1 / -1;
  margin:2px 0 2px;
  padding-top:4px;
  color:var(--cvw-muted);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  text-transform:none;
}

.cvw__sticker-application-note strong {
  color:var(--cvw-text);
  font-weight:700;
}
/* Mobile-specific portal styling */
@media screen and (max-width: 749px) {
  .cvw {
    --cvw-body-font-size: 15px;
    --cvw-input-font-size: 16px;
  }

  .cvw h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.08;
  }

  .cvw h2 {
    font-size: clamp(24px, 7.5vw, 32px) !important;
    line-height: 1.12;
  }

  .cvw h3 {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.15;
  }

  .cvw button,
  .cvw__button {
    min-height: 44px;
  }
    .cvw__preview-card {
    min-height: 540px;
    padding: 16px;
  }

  .cvw__preview-modes {
    width: 100%;
    margin-top: 14px;
  }

  .cvw__preview-stage {
    inset: 155px 10px 62px;
  }

  .cvw__disc {
    width: min(68vw, 270px);
    height: min(68vw, 270px);
  }

  .cvw__jacket-preview {
    width: min(230px, 66%);
  }

  .cvw__preview-foot {
    left: 16px;
    right: 16px;
    bottom: 18px;
  }
}

/* PHONE FIELD SIZE: iOS Safari zooms the page when a focused field is under 16px. The
   --cvw-input-font-size reset above loses to the section's inline style (the theme setting, 15px),
   and the contact and review-quantity fields set their own smaller sizes, so every text-like field
   in the builder is sized here directly. */
@media screen and (max-width: 749px) {
  .cvw :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]), select, textarea) {
    font-size: 16px;
  }
}

/* ==============================================================================
   INTERACTIVE CHOICE AFFORDANCE — steps 1–10
   Makes every option read as a selectable control without changing its logic.
   ============================================================================== */
.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
) {
  position: relative;
  cursor: pointer;
  border-color: color-mix(in oklab, var(--cvw-primary) 34%, var(--cvw-border));
  background: color-mix(in oklab, var(--cvw-card) 92%, #000);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
  transition: border-color .18s ease, background-color .18s ease,
    box-shadow .18s ease, transform .18s ease;
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__effect-choice
) {
  padding-right: 42px;
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
)::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 2px solid color-mix(in oklab, var(--cvw-primary) 72%, #fff);
  border-radius: 50%;
  background: color-mix(in oklab, var(--cvw-bg) 76%, transparent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .16);
  pointer-events: none;
}

.cvw .cvw__vinyl-choice::after {
  top: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
):is(:hover, :focus-visible) {
  border-color: var(--cvw-primary);
  background: color-mix(in oklab, var(--cvw-primary) 9%, var(--cvw-card));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cvw-primary) 40%, transparent),
    0 10px 24px rgba(0, 0, 0, .28);
  transform: translateY(-2px);
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
).is-on::after {
  border-color: var(--cvw-primary);
  background: radial-gradient(circle, #071015 0 3px, var(--cvw-primary) 4px 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cvw-primary) 20%, transparent),
    0 0 14px color-mix(in oklab, var(--cvw-primary) 55%, transparent);
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
):is(:disabled, [aria-disabled="true"], [data-cvw-prerequisite-disabled="true"]) {
  cursor: not-allowed;
  opacity: .42;
  transform: none;
  box-shadow: none;
}

.cvw :is(
  .cvw__chip,
  .cvw__seg-btn,
  .cvw__card,
  .cvw__color,
  .cvw__vinyl-choice,
  .cvw__effect-choice
):is(:disabled, [aria-disabled="true"], [data-cvw-prerequisite-disabled="true"])::after {
  border-color: var(--cvw-muted);
  background: transparent;
  box-shadow: none;
}

/* Bottom navigation must look like actions, not ordinary text links. */
.cvw__controls {
  flex-wrap: wrap;
  gap: 12px;
}

.cvw__controls .cvw__button {
  min-height: 48px;
  border-width: 2px;
  border-color: color-mix(in oklab, var(--cvw-primary) 58%, var(--cvw-border));
  background: color-mix(in oklab, var(--cvw-card) 88%, #000);
  color: var(--cvw-heading-text);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease,
    box-shadow .18s ease, transform .18s ease;
}

.cvw__controls .cvw__button:is(:hover, :focus-visible) {
  border-color: var(--cvw-primary);
  background: color-mix(in oklab, var(--cvw-primary) 12%, var(--cvw-card));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.cvw__controls :is(
  [data-cvw-next],
  [data-cvw-add],
  [data-cvw-checkout]
) {
  border-color: var(--cvw-primary);
  background: var(--cvw-primary);
  color: #071015;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--cvw-primary) 24%, transparent);
}

.cvw__controls .cvw__button:disabled {
  cursor: not-allowed;
  opacity: .4;
  transform: none;
  box-shadow: none;
}

@media (max-width: 700px) {
  .cvw__controls .cvw__button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 12px 14px;
  }

  .cvw__controls :is(
    [data-cvw-next],
    [data-cvw-add],
    [data-cvw-checkout]
  ) {
    flex-basis: 100%;
  }
}

/* 2026-09-04 — compact format and center-label alignment */
.cvw .cvw__seg--sizes,
.cvw .cvw__seg--vinyl-types {
  display:grid !important;
  align-items:stretch !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.cvw .cvw__seg--albums {
  display:grid !important;
  align-items:stretch !important;
  grid-template-columns:1fr !important;
}

.cvw .cvw__seg--sizes .cvw__seg-btn,
.cvw .cvw__seg--albums .cvw__seg-btn,
.cvw .cvw__seg--vinyl-types .cvw__seg-btn {
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  min-height:90px !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:16px 42px 16px 16px !important;
}

.cvw .cvw__seg--sizes .cvw__seg-btn {
  align-items:center !important;
  padding:24px 7px 13px !important;
  text-align:center !important;
}

.cvw .cvw__seg-label,
.cvw .cvw__seg-btn small {
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

.cvw .cvw__seg--sizes .cvw__seg-label {
  font-size:clamp(10px,1.05vw,14px) !important;
  line-height:1.15 !important;
}

.cvw .cvw__seg--sizes small {
  font-size:clamp(9px,.85vw,11px) !important;
}

.cvw .cvw__seg-btn--coming-soon::after {
  content:none !important;
  display:none !important;
}

.cvw .cvw__seg-btn--coming-soon {
  padding-right:16px !important;
}

.cvw .cvw__panel[data-panel="4"] {
  gap:13px !important;
}

.cvw .cvw__panel[data-panel="4"] .cvw__lead {
  line-height:1.4 !important;
}

.cvw .cvw__color-grid--center-labels {
  gap:10px !important;
}

.cvw .cvw__color-grid--center-labels .cvw__color {
  min-height:88px !important;
  padding:12px 40px 12px 12px !important;
}

.cvw .cvw__center-label-copy,
.cvw .cvw__center-label-copy strong {
  gap:0 !important;
  line-height:1.25 !important;
}

.cvw .cvw__keep-together {
  white-space:nowrap !important;
}

.cvw .cvw__label-price-note--statement {
  padding:12px 14px !important;
}

.cvw .cvw__label-price-note--statement .cvw__label-price-note-body {
  padding:0 !important;
}

.cvw .cvw__label-price-tier-sentences {
  margin-top:8px !important;
  gap:2px !important;
}

.cvw .cvw__label-price-tier-sentences p {
  line-height:1.3 !important;
}

.cvw .cvw__label-current-rate {
  margin-top:9px !important;
  padding-top:8px !important;
}

@media (max-width:700px) {
  .cvw .cvw__seg--sizes,
  .cvw .cvw__seg--albums,
  .cvw .cvw__seg--vinyl-types {
    grid-template-columns:1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvw :is(
    .cvw__chip,
    .cvw__seg-btn,
    .cvw__card,
    .cvw__color,
    .cvw__vinyl-choice,
    .cvw__effect-choice,
    .cvw__button
  ) {
    transition: none;
  }
}

/* ==============================================================================
   INTERACTIVE CHOICE AFFORDANCE V2 — Shopify cascade-safe override
   Uses explicit selectors and !important because .cvw button resets every button.
   ============================================================================== */
.cvw .cvw__chip,
.cvw .cvw__seg-btn,
.cvw .cvw__card,
.cvw .cvw__color,
.cvw .cvw__vinyl-choice,
.cvw .cvw__effect-choice {
  position: relative !important;
  border: 2px solid rgba(252, 227, 0, .58) !important;
  background: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .26) !important;
  cursor: pointer !important;
  overflow: visible;
}

.cvw .cvw__chip,
.cvw .cvw__seg-btn,
.cvw .cvw__card,
.cvw .cvw__color,
.cvw .cvw__effect-choice {
  padding-right: 44px !important;
}

.cvw .cvw__chip::after,
.cvw .cvw__seg-btn::after,
.cvw .cvw__card::after,
.cvw .cvw__color::after,
.cvw .cvw__vinyl-choice::after,
.cvw .cvw__effect-choice::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 2px solid #fce300 !important;
  border-radius: 50% !important;
  background: #202127 !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .2) !important;
  pointer-events: none !important;
}

.cvw .cvw__vinyl-choice::after {
  top: 5px !important;
  right: 5px !important;
  width: 14px !important;
  height: 14px !important;
}

.cvw .cvw__chip:hover,
.cvw .cvw__seg-btn:hover,
.cvw .cvw__card:hover,
.cvw .cvw__color:hover,
.cvw .cvw__vinyl-choice:hover,
.cvw .cvw__effect-choice:hover,
.cvw .cvw__chip:focus-visible,
.cvw .cvw__seg-btn:focus-visible,
.cvw .cvw__card:focus-visible,
.cvw .cvw__color:focus-visible,
.cvw .cvw__vinyl-choice:focus-visible,
.cvw .cvw__effect-choice:focus-visible {
  border-color: #fce300 !important;
  background: rgba(252, 227, 0, .12) !important;
  box-shadow: 0 0 0 2px rgba(252, 227, 0, .24),
    0 10px 24px rgba(0, 0, 0, .32) !important;
  transform: translateY(-2px);
}

.cvw .cvw__chip.is-on,
.cvw .cvw__seg-btn.is-on,
.cvw .cvw__card.is-on,
.cvw .cvw__color.is-on,
.cvw .cvw__vinyl-choice.is-on,
.cvw .cvw__effect-choice.is-on {
  border-color: #fce300 !important;
  background: rgba(252, 227, 0, .16) !important;
  color: #fce300 !important;
  box-shadow: 0 0 0 2px rgba(252, 227, 0, .28),
    0 0 24px rgba(252, 227, 0, .2) !important;
}

.cvw .cvw__chip.is-on::after,
.cvw .cvw__seg-btn.is-on::after,
.cvw .cvw__card.is-on::after,
.cvw .cvw__color.is-on::after,
.cvw .cvw__vinyl-choice.is-on::after,
.cvw .cvw__effect-choice.is-on::after {
  background: #fce300 !important;
  box-shadow: inset 0 0 0 4px #202127,
    0 0 12px rgba(252, 227, 0, .75) !important;
}

.cvw .cvw__card:disabled,
.cvw .cvw__card[aria-disabled="true"],
.cvw .cvw__card[data-cvw-prerequisite-disabled="true"],
.cvw .cvw__seg-btn:disabled,
.cvw .cvw__chip:disabled,
.cvw .cvw__color:disabled,
.cvw .cvw__vinyl-choice:disabled,
.cvw .cvw__effect-choice:disabled {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .45 !important;
  transform: none !important;
}

/* Strong, unmistakable bottom navigation buttons on every step. */
.cvw .cvw__controls .cvw__button {
  min-height: 50px !important;
  padding: 13px 22px !important;
  border: 2px solid #fce300 !important;
  border-radius: 999px !important;
  background: rgba(252, 227, 0, .08) !important;
  color: #fce300 !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .3) !important;
  cursor: pointer !important;
}

.cvw .cvw__controls .cvw__button:hover,
.cvw .cvw__controls .cvw__button:focus-visible {
  background: rgba(252, 227, 0, .18) !important;
  box-shadow: 0 0 0 2px rgba(252, 227, 0, .2),
    0 10px 24px rgba(0, 0, 0, .35) !important;
  transform: translateY(-2px);
}

.cvw .cvw__controls [data-cvw-next],
.cvw .cvw__controls [data-cvw-add],
.cvw .cvw__controls [data-cvw-checkout],
.cvw .cvw__controls [data-cvw-return-project] {
  background: #fce300 !important;
  color: #071015 !important;
  box-shadow: 0 8px 22px rgba(252, 227, 0, .24) !important;
}

.cvw .cvw__controls .cvw__button:disabled {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: rgba(255, 255, 255, .52) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .55 !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .cvw .cvw__controls .cvw__button {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    padding: 12px 13px !important;
  }

  .cvw .cvw__controls [data-cvw-next],
  .cvw .cvw__controls [data-cvw-add],
  .cvw .cvw__controls [data-cvw-checkout],
  .cvw .cvw__controls [data-cvw-return-project] {
    flex-basis: 100% !important;
  }
}

/* FINAL COMPACT ALIGNMENT — keep this after the cascade-safe choice styles. */
.cvw .cvw__price-pill {
  display:block !important;
    width:fit-content !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--cvw-primary) !important;
  box-shadow:none !important;
  line-height:1.3 !important;
}

.cvw .cvw__seg--sizes .cvw__seg-btn {
  align-items:flex-start !important;
  padding:24px 32px 14px 12px !important;
  text-align:left !important;
}

.cvw .cvw__seg--sizes .cvw__seg-label,
.cvw .cvw__seg--vinyl-types .cvw__seg-label {
  font-size:clamp(10px,1vw,13px) !important;
  line-height:1.15 !important;
}

.cvw .cvw__seg--albums .cvw__seg-btn {
  padding:18px 38px 18px 14px !important;
}

.cvw .cvw__seg--vinyl-types .cvw__seg-btn:not(.cvw__seg-btn--coming-soon) {
  padding:24px 32px 14px 12px !important;
}

.cvw .cvw__seg-btn--coming-soon {
  padding:16px 10px !important;
}

.cvw .cvw__format-grid > .cvw__field {
  min-width:0 !important;
}

@media (min-width:701px) {
  .cvw .cvw__format-grid {
    grid-template-columns:minmax(0,5fr) minmax(210px,3fr) !important;
    column-gap:22px !important;
  }
}


/* Catalog family navigation; scoped to the existing single-color section. */
.cvw .cvw__color-families { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.cvw .cvw__color-families button { padding:10px 15px; min-height:44px; border:1px solid rgba(255,255,255,.25); border-radius:22px; background:rgba(0,0,0,.12); color:var(--cvw-primary,#fce300); font:inherit; font-size:12px; cursor:pointer; }
.cvw .cvw__color-families button.is-on { background:var(--cvw-primary,#fce300); color:#171717; border-color:var(--cvw-primary,#fce300); }
.cvw .cvw__color-families button:focus-visible { outline:2px solid var(--cvw-primary,#fce300); outline-offset:3px; }
.cvw [data-cvw-vinyl-choice][hidden] { display:none !important; }

/* The chosen family reveals its opacity controls and shades in place. */
.cvw .cvw__family-panel[hidden] { display:none !important; }
.cvw .cvw__family-panel { margin-bottom:18px; padding:16px 0; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.cvw [data-cvw-color-family]::after { content:' +'; margin-left:5px; }
.cvw [data-cvw-color-family][aria-expanded="true"]::after { content:' -'; }
/* ==============================================================================
   PHONE READABILITY AND TAP TARGETS
   On phones no customer-readable builder text goes below 12px and no control is under 44px in
   its smaller dimension. Sizes are raised, never lowered: every selector below names an element
   that computes under 12px at 390px. Several of the originals are !important, so these are too,
   and they sit at the end of the file so they win at equal specificity. The record and jacket
   artwork in the live preview (disc label, jacket copy, spine, picture-disc placeholder) and the
   welcome record graphic are left alone: they are drawn to scale as part of the illustration.
   Step 2's option cards are sized in the section's inline style, which outranks this file.
   ============================================================================== */
@media screen and (max-width: 749px) {
  /* Welcome screen */
  .cvw .cvw__welcome-badge,
  .cvw .cvw__welcome-start,
  .cvw .cvw__welcome-contact,
  .cvw .cvw__welcome-features article > span,
  .cvw .cvw__welcome-foot span,

  /* Progress, preview card and production timeline */
  .cvw .cvw__mobile-progress-top,
  .cvw .cvw__mobile-help,
  .cvw .cvw__preview-head,
  .cvw .cvw__large-preview-close,
  .cvw .cvw__preview-modes button,
  .cvw .cvw__preview-record-name,
  .cvw .cvw__secondary-record-name,
  .cvw .cvw__preview-foot,
  .cvw .cvw__timeline-head > span,
  .cvw .cvw__timeline-grid span,
  .cvw .cvw__timeline-contact,
  .cvw .cvw__timeline-dialog-label,
  .cvw .cvw__timeline-dialog > small,
  .cvw .cvw__stats span,
  .cvw.cvw--large-preview .cvw__large-record-switcher button,

  /* Field labels and quantity */
  .cvw .cvw__field > span,
  .cvw .cvw__upload > span:not(.cvw__design-upload-icon),
  .cvw .cvw__optional-label,
  .cvw .cvw__range-labels,

  /* Step 3 cards */
  .cvw .cvw__preprod-heading strong,
  .cvw .cvw__preprod-heading span,
  .cvw .cvw__card-title em,
  .cvw .cvw__price-pill,

  /* Step 4 vinyl colour and effects */
  .cvw .cvw__record-tabs button,
  .cvw .cvw__copy-record,
  .cvw .cvw__vinyl-selection small,
  .cvw .cvw__vinyl-selection-actions > span,
  .cvw .cvw__vinyl-catalog-link,
  .cvw .cvw__vinyl-tab,
  .cvw .cvw__vinyl-filters button,
  .cvw .cvw__vinyl-choice-name,
  .cvw .cvw__vinyl-choice small,
  .cvw .cvw__vinyl-guidance strong,
  .cvw .cvw__optional-heading span,
  .cvw .cvw__special-color-note strong,
  .cvw .cvw__effect-copy > span,
  .cvw .cvw__effect-copy em,
  .cvw .cvw__effect-choice em,
  .cvw .cvw__effect-neon-presets > span,
  .cvw .cvw__effect-neon-presets button,
  .cvw .cvw__visual-config-toggle small,
  .cvw .cvw__upload-tab,

  /* Step 5 center labels */
  .cvw .cvw__label-record-status,
  .cvw .cvw__swatch--picture-label,
  .cvw .cvw__label-price-note-head span,
  .cvw .cvw__label-price-tiers b,
  .cvw .cvw__center-label-price,
  .cvw .cvw__color em,

  /* Later steps, summary, account gate, sticky bar and contact form */
  .cvw .cvw__tier-note strong,
  .cvw .cvw__summary span,
  .cvw .cvw__summary-group h3,
  .cvw .cvw__summary-group--timeline p,
  .cvw .cvw__account-tools-note,
  .cvw .cvw__sticky-estimate span,
  .cvw .cvw__sticky-estimate button,
  .cvw .cvw__contact-eyebrow,
  .cvw .cvw__contact-fields label > span {
    font-size: 12px !important;
  }

  .cvw .cvw__vinyl-catalog-link,
  .cvw a.cvw__design-template-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .cvw.cvw--large-preview .cvw__large-record-switcher button {
    min-height: 44px !important;
  }

  /* At 12px the selected-vinyl row no longer fits on one line: the price and the catalog link
     move to a second row instead of squeezing the colour name into a narrow column. */
  .cvw .cvw__vinyl-selection {
    flex-wrap: wrap;
  }

  .cvw .cvw__vinyl-selection-actions {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* "CMYK" sits inside a 40px swatch circle; without tracking it fits at 12px. */
  .cvw .cvw__swatch--picture-label {
    letter-spacing: 0;
  }

  .cvw .cvw__contact-close {
    min-width: 44px;
  }

  /* Quantity slider: a 28px thumb on a 44px-tall hit area. */
  .cvw .cvw__range {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    margin: 0;
    background: transparent;
    cursor: pointer;
  }

  /* appearance:none drops the native filled track, so paint it from --cvw-range-fill (set by setQty). */
  .cvw .cvw__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--cvw-primary) 0 var(--cvw-range-fill, 0%), color-mix(in oklab, var(--cvw-muted) 45%, transparent) var(--cvw-range-fill, 0%) 100%);
  }

  .cvw .cvw__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-top: -11px;
    border: 3px solid #071015;
    border-radius: 50%;
    background: var(--cvw-primary);
    box-shadow: 0 0 0 1px var(--cvw-primary);
  }

  .cvw .cvw__range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cvw-muted) 45%, transparent);
  }

  .cvw .cvw__range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--cvw-primary);
  }

  .cvw .cvw__range::-moz-range-thumb {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 3px solid #071015;
    border-radius: 50%;
    background: var(--cvw-primary);
    box-shadow: 0 0 0 1px var(--cvw-primary);
  }

  .cvw .cvw__range:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--cvw-accent) 72%, transparent);
    outline-offset: 2px;
  }
}