.product-customizer {
  overflow:
    hidden;
  border-radius:
    1rem;
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(2 6 23 / 0.8);
  --tw-shadow:
    0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:
    0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.product-customizer--mutation {
  background:
    linear-gradient(135deg, rgb(4 9 12 / 0.96), rgb(20 8 18 / 0.94)),
    repeating-linear-gradient(
      90deg,
      rgb(34 197 94 / 0.08) 0,
      rgb(34 197 94 / 0.08) 1px,
      transparent 1px,
      transparent 18px
    );
  box-shadow:
    0 28px 80px rgb(0 0 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.product-customizer__header {
  border-bottom-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  padding:
    1.25rem;
}

@media (min-width: 640px) {

  .product-customizer__header {
    padding:
    1.5rem;
  }
}

@media (min-width: 768px) {

  .product-customizer__header {
    padding:
    2rem;
  }
}

.product-customizer__eyebrow,
.product-customizer__kicker,
.product-customizer__summary > p,
.product-customizer__price span {
  font-size:
    0.75rem;
  line-height:
    1rem;
  font-weight:
    700;
  text-transform:
    uppercase;
  letter-spacing:
    0.22em;
}

.product-customizer__eyebrow {
  margin-bottom:
    0.75rem;
  color:
    rgb(110 231 183 / 0.8);
}

.product-customizer__header h2 {
  font-size:
    1.5rem;
  line-height:
    2rem;
  font-weight:
    900;
  line-height:
    1.25;
  --tw-text-opacity:
    1;
  color:
    rgb(241 245 249 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {

  .product-customizer__header h2 {
    font-size:
    1.875rem;
    line-height:
    2.25rem;
  }
}

@media (min-width: 768px) {

  .product-customizer__header h2 {
    font-size:
    2.25rem;
    line-height:
    2.5rem;
  }
}

.product-customizer__header > p:not(.product-customizer__eyebrow) {
  margin-top:
    0.75rem;
  max-width:
    48rem;
  font-size:
    0.875rem;
  line-height:
    1.75rem;
  --tw-text-opacity:
    1;
  color:
    rgb(148 163 184 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {

  .product-customizer__header > p:not(.product-customizer__eyebrow) {
    font-size:
    1rem;
    line-height:
    1.5rem;
  }
}

.product-customizer__body {
  display:
    grid;
  gap:
    0px;
}

@media (min-width: 1024px) {

  .product-customizer__body {
    grid-template-columns:
    14rem minmax(0,1fr) 20rem;
  }
}

.product-customizer__steps {
  display:
    grid;
  align-content:
    flex-start;
  gap:
    0.5rem;
  border-bottom-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  padding:
    1rem;
}

@media (min-width: 640px) {

  .product-customizer__steps {
    padding:
    1.25rem;
  }
}

@media (min-width: 1024px) {

  .product-customizer__steps {
    border-bottom-width:
    0px;
    border-right-width:
    1px;
  }
}

.product-customizer__steps button {
  display:
    grid;
  gap:
    0.25rem;
  border-radius:
    0.75rem;
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(0 0 0 / 0.2);
  padding:
    0.75rem;
  text-align:
    left;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:
    cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
    150ms;
}

.product-customizer__steps button:hover {
  border-color:
    rgb(110 231 183 / 0.4);
  background-color:
    rgb(2 44 34 / 0.2);
}

.product-customizer__steps button.active {
  border-color:
    rgb(110 231 183 / 0.6);
  background-color:
    rgb(2 44 34 / 0.4);
}

.product-customizer__steps button.complete {
  border-color:
    rgb(103 232 249 / 0.35);
}

.product-customizer__steps span {
  font-size:
    10px;
  font-weight:
    700;
  text-transform:
    uppercase;
  letter-spacing:
    0.18em;
  --tw-text-opacity:
    1;
  color:
    rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.product-customizer__steps strong {
  font-size:
    0.875rem;
  line-height:
    1.25rem;
  --tw-text-opacity:
    1;
  color:
    rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.product-customizer__question {
  padding:
    1.25rem;
}

@media (min-width: 640px) {

  .product-customizer__question {
    padding:
    1.5rem;
  }
}

@media (min-width: 768px) {

  .product-customizer__question {
    padding:
    2rem;
  }
}

.product-customizer__kicker {
  margin-bottom:
    0.75rem;
  color:
    rgb(245 208 254 / 0.75);
}

.product-customizer__question h3 {
  max-width:
    42rem;
  font-size:
    1.25rem;
  line-height:
    1.75rem;
  font-weight:
    900;
  line-height:
    1.25;
  --tw-text-opacity:
    1;
  color:
    rgb(241 245 249 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {

  .product-customizer__question h3 {
    font-size:
    1.5rem;
    line-height:
    2rem;
  }
}

.product-customizer__options {
  margin-top:
    1.25rem;
  display:
    grid;
  gap:
    0.75rem;
}

.product-customizer__options button {
  display:
    flex;
  min-height:
    6rem;
  align-items:
    center;
  justify-content:
    space-between;
  gap:
    1rem;
  border-radius:
    1rem;
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(15 23 42 / 0.7);
  padding:
    1rem;
  text-align:
    left;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:
    cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
    150ms;
}

.product-customizer__options button:hover {
  border-color:
    rgb(110 231 183 / 0.5);
  background-color:
    rgb(2 44 34 / 0.2);
}

.product-customizer__options button.selected {
  border-color:
    rgb(110 231 183 / 0.7);
  background-color:
    rgb(2 44 34 / 0.4);
  --tw-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color:
    rgb(2 44 34 / 0.3);
  --tw-shadow:
    var(--tw-shadow-colored);
}

.product-customizer__options span {
  display:
    grid;
  gap:
    0.25rem;
}

.product-customizer__options strong {
  font-size:
    1rem;
  line-height:
    1.5rem;
  --tw-text-opacity:
    1;
  color:
    rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.product-customizer__options small {
  font-size:
    0.875rem;
  line-height:
    1.5rem;
  --tw-text-opacity:
    1;
  color:
    rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.product-customizer__options em {
  flex-shrink:
    0;
  font-size:
    0.875rem;
  line-height:
    1.25rem;
  font-weight:
    700;
  font-style:
    normal;
  --tw-text-opacity:
    1;
  color:
    rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.product-customizer__summary {
  display:
    grid;
  align-content:
    flex-start;
  gap:
    1rem;
  border-top-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(0 0 0 / 0.25);
  padding:
    1.25rem;
}

@media (min-width: 640px) {

  .product-customizer__summary {
    padding:
    1.5rem;
  }
}

@media (min-width: 1024px) {

  .product-customizer__summary {
    border-left-width:
    1px;
    border-top-width:
    0px;
  }
}

.product-customizer__summary > p {
  color:
    rgb(165 243 252 / 0.8);
}

.product-customizer__summary > span {
  border-radius:
    0.75rem;
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(2 6 23 / 0.7);
  padding:
    0.75rem;
  font-size:
    0.875rem;
  line-height:
    1.25rem;
  --tw-text-opacity:
    1;
  color:
    rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.product-customizer__summary dl {
  display:
    grid;
  gap:
    0.5rem;
}

.product-customizer__summary dl div {
  border-radius:
    0.75rem;
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  background-color:
    rgb(2 6 23 / 0.7);
  padding:
    0.75rem;
}

.product-customizer__summary dt {
  font-size:
    10px;
  font-weight:
    700;
  text-transform:
    uppercase;
  letter-spacing:
    0.18em;
  --tw-text-opacity:
    1;
  color:
    rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.product-customizer__summary dd {
  margin-top:
    0.25rem;
  font-size:
    0.875rem;
  line-height:
    1.25rem;
  --tw-text-opacity:
    1;
  color:
    rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.product-customizer__price {
  border-radius:
    1rem;
  border-width:
    1px;
  border-color:
    rgb(110 231 183 / 0.2);
  background-color:
    rgb(2 44 34 / 0.2);
  padding:
    1rem;
}

.product-customizer__price span {
  display:
    block;
  color:
    rgb(167 243 208 / 0.7);
}

.product-customizer__price strong {
  margin-top:
    0.25rem;
  display:
    block;
  font-size:
    1.5rem;
  line-height:
    2rem;
  font-weight:
    900;
  --tw-text-opacity:
    1;
  color:
    rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.product-customizer__submit,
.product-customizer__reset {
  width:
    100%;
  border-radius:
    0.75rem;
  padding-left:
    1.25rem;
  padding-right:
    1.25rem;
  padding-top:
    0.75rem;
  padding-bottom:
    0.75rem;
  font-weight:
    700;
  text-transform:
    uppercase;
  letter-spacing:
    0.08em;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:
    cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
    150ms;
}

.product-customizer__submit {
  --tw-bg-opacity:
    1;
  background-color:
    rgb(16 185 129 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:
    1;
  color:
    rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.product-customizer__submit:hover {
  --tw-bg-opacity:
    1;
  background-color:
    rgb(110 231 183 / var(--tw-bg-opacity, 1));
}

.product-customizer__submit:disabled {
  cursor:
    not-allowed;
  --tw-bg-opacity:
    1;
  background-color:
    rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:
    1;
  color:
    rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.product-customizer__reset {
  border-width:
    1px;
  border-color:
    rgb(255 255 255 / 0.1);
  --tw-bg-opacity:
    1;
  background-color:
    rgb(15 23 42 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:
    1;
  color:
    rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.product-customizer__reset:hover {
  border-color:
    rgb(240 171 252 / 0.4);
  --tw-text-opacity:
    1;
  color:
    rgb(245 208 254 / var(--tw-text-opacity, 1));
}

.product-customizer__feedback {
  border-radius:
    0.75rem;
  border-width:
    1px;
  border-color:
    rgb(103 232 249 / 0.2);
  background-color:
    rgb(8 51 68 / 0.3);
  padding:
    0.75rem;
  font-size:
    0.875rem;
  line-height:
    1.5rem;
  color:
    rgb(207 250 254 / 0.85);
}