@lockerverse/react 0.2.68 → 0.2.70

package/dist/styles.css

@@ -1,3 +1,5 @@
+@import "./form-ui.css";
+
 .lockerverse-payment {
   --lockerverse-accent: #38d77a;
   --lockerverse-accent-contrast: #000;
@@ -298,16 +300,6 @@
   margin-top: 4px;
 }
 
-.lockerverse-payment label:not(.lockerverse-payment__check-row),
-.lockerverse-payment__field,
-.lockerverse-payment fieldset {
-  display: grid;
-  gap: 8px;
-}
-
-.lockerverse-payment label > span,
-.lockerverse-payment .lockerverse-payment__field > span,
-.lockerverse-payment legend,
 .lockerverse-payment h2 {
   font-size: 14px;
   font-weight: 500;
@@ -320,81 +312,18 @@
   color: var(--lockerverse-text);
 }
 
-.lockerverse-payment fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]),
-.lockerverse-payment select,
-.lockerverse-payment textarea {
-  width: 100%;
-  min-height: 48px;
-  padding: 11px 13px;
-  font: inherit;
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--lockerverse-text);
-  appearance: none;
-  outline: none;
-  background-color: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease;
-}
-
-.lockerverse-payment select {
-  padding-right: 38px;
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentcolor 50%),
-    linear-gradient(135deg, currentcolor 50%, transparent 50%);
-  background-repeat: no-repeat;
-  background-position:
-    calc(100% - 17px) calc(50% - 2px),
-    calc(100% - 12px) calc(50% - 2px);
-  background-size:
-    5px 5px,
-    5px 5px;
-}
-
-.lockerverse-payment textarea {
-  min-height: 112px;
-  padding-top: 12px;
-  resize: vertical;
-}
-
-.lockerverse-payment input::placeholder,
-.lockerverse-payment textarea::placeholder {
-  color: var(--lockerverse-placeholder);
-  opacity: 1;
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
 .lockerverse-payment__check-row input:focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
-.lockerverse-payment button:focus {
+.lockerverse-payment__select-trigger:focus {
   outline: none;
   border-color: var(--lockerverse-accent);
 }
 
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
 .lockerverse-payment__select-trigger:focus {
   box-shadow: 0 0 0 1px var(--lockerverse-accent);
 }
 
-.lockerverse-payment
-  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
 .lockerverse-payment__check-row input:focus-visible,
-.lockerverse-payment select:focus-visible,
-.lockerverse-payment textarea:focus-visible,
-.lockerverse-payment button:focus-visible {
+.lockerverse-payment__select-trigger:focus-visible {
   box-shadow: 0 0 0 2px
     color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
 }
@@ -817,7 +746,7 @@
   height: 36px;
   background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
   border-radius: 6px;
-  animation: lockerverse-pulse 1.5s ease-in-out infinite;
+  animation: lockerverse-form-pulse 1.5s ease-in-out infinite;
 }
 
 .lockerverse-payment__stripe-loader span:first-child {
@@ -837,128 +766,6 @@
   clip: rect(0, 0, 0, 0);
 }
 
-.lockerverse-payment__skeleton {
-  display: grid;
-  gap: 16px;
-}
-
-.lockerverse-payment__skeleton-branding {
-  display: flex;
-  gap: 14px;
-  align-items: center;
-}
-
-.lockerverse-payment__skeleton-avatar,
-.lockerverse-payment__skeleton-community,
-.lockerverse-payment__skeleton-label,
-.lockerverse-payment__skeleton-input,
-.lockerverse-payment__skeleton-loader-label,
-.lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half,
-.lockerverse-payment__skeleton-check-line,
-.lockerverse-payment__skeleton-button {
-  display: block;
-  background: color-mix(in srgb, var(--lockerverse-text) 8%, transparent);
-  animation: lockerverse-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.lockerverse-payment__skeleton-avatar {
-  flex: none;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-community {
-  width: 176px;
-  height: 20px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-contact {
-  display: grid;
-  gap: 12px;
-  padding-top: 14px;
-  border-top: 1px solid var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__skeleton-field {
-  display: grid;
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-label {
-  width: 48px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-input {
-  width: 100%;
-  height: 48px;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-loader-block {
-  padding: 12px;
-  background: color-mix(in srgb, var(--lockerverse-text) 2.5%, transparent);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-loader-label {
-  width: 144px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-loader-content {
-  display: grid;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half {
-  height: 36px;
-  border-radius: 6px;
-}
-
-.lockerverse-payment__skeleton-loader-full {
-  background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
-}
-
-.lockerverse-payment__skeleton-loader-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-loader-half {
-  background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
-}
-
-.lockerverse-payment__skeleton-actions {
-  display: grid;
-  gap: 16px;
-  padding: 20px 0 4px;
-}
-
-.lockerverse-payment__skeleton-check-line {
-  width: min(256px, 70%);
-  height: 20px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-button {
-  width: 100%;
-  height: 48px;
-  background: color-mix(in srgb, var(--lockerverse-text) 12%, transparent);
-  border-radius: var(--lockerverse-radius);
-}
-
 .lockerverse-payment button[type="submit"] {
   width: 100%;
   min-height: 48px;
@@ -1003,12 +810,6 @@
   display: none;
 }
 
-@keyframes lockerverse-pulse {
-  50% {
-    opacity: 0.55;
-  }
-}
-
 @container (max-width: 360px) {
   .lockerverse-payment__tip-box [role="radiogroup"] {
     grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -1040,30 +841,30 @@
 .lockerverse-launcher__dialog {
   --lockerverse-accent: #38d77a;
   --lockerverse-accent-contrast: #000;
-  --lockerverse-bg: #080808;
-  --lockerverse-border: rgb(255 255 255 / 12%);
-  --lockerverse-control: #121212;
+  --lockerverse-bg: #17130f;
+  --lockerverse-border: rgb(255 228 194 / 14%);
+  --lockerverse-control: #211b16;
   --lockerverse-danger: #f08a98;
   --lockerverse-font-family:
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
-  --lockerverse-muted: rgb(255 255 255 / 64%);
+  --lockerverse-muted: rgb(255 235 211 / 65%);
   --lockerverse-radius: 10px;
-  --lockerverse-subtle: rgb(255 255 255 / 8%);
-  --lockerverse-text: #fff;
+  --lockerverse-subtle: rgb(255 228 194 / 8%);
+  --lockerverse-text: #fff5e9;
   box-sizing: border-box;
   font-family: var(--lockerverse-font-family);
 }
 
 .lockerverse-launcher[data-lockerverse-theme="light"],
 .lockerverse-launcher__dialog[data-lockerverse-theme="light"] {
-  --lockerverse-bg: #fff;
-  --lockerverse-border: rgb(18 20 22 / 14%);
-  --lockerverse-control: #f5f6f7;
+  --lockerverse-bg: #fffaf3;
+  --lockerverse-border: rgb(92 68 43 / 15%);
+  --lockerverse-control: #fffdf9;
   --lockerverse-danger: #c52b3e;
-  --lockerverse-muted: rgb(18 20 22 / 64%);
-  --lockerverse-subtle: rgb(18 20 22 / 8%);
-  --lockerverse-text: #121416;
+  --lockerverse-muted: rgb(70 55 40 / 66%);
+  --lockerverse-subtle: rgb(103 73 43 / 7%);
+  --lockerverse-text: #2d251d;
 }
 
 .lockerverse-launcher {
@@ -1078,6 +879,21 @@
   border: 0;
   border-radius: 999px;
   box-shadow: 0 14px 34px rgb(0 0 0 / 28%);
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    filter 180ms ease;
+}
+
+.lockerverse-launcher:hover {
+  box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
+  filter: brightness(1.04);
+  transform: translateY(-2px);
+}
+
+.lockerverse-launcher:active {
+  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
+  transform: translateY(0) scale(0.98);
 }
 
 .lockerverse-launcher--bottom-left,
@@ -1105,8 +921,9 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
-  background: rgb(0 0 0 / 68%);
-  backdrop-filter: blur(4px);
+  background: rgb(8 12 9 / 72%);
+  backdrop-filter: blur(10px) saturate(0.75);
+  animation: lockerverse-launcher-fade-in 180ms ease-out;
 }
 
 .lockerverse-launcher__viewport {
@@ -1120,15 +937,24 @@
 
 .lockerverse-launcher__dialog {
   position: relative;
-  width: min(100%, 520px);
+  width: min(100%, 580px);
   max-height: calc(100dvh - 48px);
-  padding: 24px;
+  padding: 30px;
   overflow-y: auto;
   color: var(--lockerverse-text);
   background: var(--lockerverse-bg);
   border: 1px solid var(--lockerverse-border);
-  border-radius: calc(var(--lockerverse-radius) + 6px);
-  box-shadow: 0 30px 90px rgb(0 0 0 / 48%);
+  border-radius: calc(var(--lockerverse-radius) + 12px);
+  box-shadow:
+    0 32px 100px rgb(5 14 8 / 48%),
+    inset 0 1px 0 rgb(255 255 255 / 10%);
+  animation: lockerverse-launcher-enter 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lockerverse-launcher__dialog:has(.lockerverse-launcher__products) {
+  width: min(100%, 600px);
+  padding: 32px;
+  border-radius: calc(var(--lockerverse-radius) + 18px);
 }
 
 .lockerverse-launcher__dialog *,
@@ -1137,79 +963,357 @@
   box-sizing: border-box;
 }
 
+.lockerverse-launcher__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
+.lockerverse-launcher__header {
+  display: grid;
+  gap: 8px;
+  padding-right: 50px;
+}
+
+.lockerverse-launcher__brand {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-launcher__brand img {
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 8px;
+}
+
 .lockerverse-launcher__title {
-  padding-right: 72px;
   margin: 0;
-  font-size: 24px;
-  line-height: 1.25;
+  font-size: clamp(25px, 5vw, 30px);
+  font-weight: 650;
+  line-height: 1.12;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
 }
 
 .lockerverse-launcher__description {
-  margin: 10px 0 0;
+  max-width: 52ch;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
   color: var(--lockerverse-muted);
+  text-wrap: pretty;
 }
 
 .lockerverse-launcher__close {
   position: absolute;
-  top: 18px;
-  right: 18px;
-  min-height: 36px;
-  padding: 7px 10px;
+  top: 22px;
+  right: 22px;
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
   font: inherit;
+  font-size: 24px;
+  line-height: 1;
   color: var(--lockerverse-muted);
   cursor: pointer;
   background: var(--lockerverse-subtle);
   border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+  border-radius: 50%;
+  transition:
+    color 160ms ease,
+    background 160ms ease,
+    transform 160ms ease;
+}
+
+.lockerverse-launcher__close:hover {
+  color: var(--lockerverse-text);
+  background: color-mix(in srgb, var(--lockerverse-text) 12%, transparent);
+  transform: rotate(4deg);
 }
 
 .lockerverse-launcher__products,
-.lockerverse-launcher__amount-form,
 .lockerverse-launcher__checkout {
   display: grid;
-  gap: 12px;
-  margin-top: 24px;
+  gap: 10px;
+}
+
+.lockerverse-launcher__products {
+  margin-top: 26px;
+}
+
+.lockerverse-launcher__checkout {
+  gap: 18px;
+  margin-top: 0;
+}
+
+.lockerverse-launcher__section,
+.lockerverse-launcher__product-list {
+  display: grid;
+  gap: 10px;
+}
+
+.lockerverse-launcher__donation {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  margin-top: 10px;
+  background: color-mix(
+    in srgb,
+    var(--lockerverse-accent) 7%,
+    var(--lockerverse-control)
+  );
+  border: 1px solid
+    color-mix(in srgb, var(--lockerverse-accent) 23%, var(--lockerverse-border));
+  border-radius: calc(var(--lockerverse-radius) + 8px);
+}
+
+.lockerverse-launcher__section-header {
+  display: grid;
+  gap: 3px;
+}
+
+.lockerverse-launcher__section-header h3,
+.lockerverse-launcher__section-header p {
+  margin: 0;
+}
+
+.lockerverse-launcher__section-header h3 {
+  font-size: 17px;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+}
+
+.lockerverse-launcher__donation
+  .lockerverse-launcher__section-header
+  h3::before {
+  margin-right: 8px;
+  color: var(--lockerverse-accent);
+  content: "♡";
+}
+
+.lockerverse-launcher__section-header p {
+  font-size: 13px;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-launcher__donation-option {
+  display: grid;
+  gap: 8px;
+}
+
+.lockerverse-launcher__donation-choices {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+  gap: 7px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.lockerverse-launcher__donation-choices > button,
+.lockerverse-launcher__donation-other {
+  min-height: 40px;
+  padding: 8px 7px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--lockerverse-text);
+  cursor: pointer;
+  background: var(--lockerverse-subtle);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: calc(var(--lockerverse-radius) - 1px);
+  transition:
+    color 150ms ease,
+    background 150ms ease,
+    border-color 150ms ease,
+    transform 100ms ease;
+}
+
+.lockerverse-launcher__donation-choices > button {
+  white-space: nowrap;
+}
+
+.lockerverse-launcher__donation-choices > button:hover,
+.lockerverse-launcher__donation-other:hover {
+  border-color: color-mix(in srgb, var(--lockerverse-accent) 55%, transparent);
+}
+
+.lockerverse-launcher__donation-choices > button:active {
+  transform: translateY(1px);
+}
+
+.lockerverse-launcher__donation-choices > button[aria-pressed="true"],
+.lockerverse-launcher__donation-other[data-selected="true"] {
+  color: var(--lockerverse-accent-contrast);
+  background: var(--lockerverse-accent);
+  border-color: var(--lockerverse-accent);
+}
+
+.lockerverse-launcher__donation-other {
+  position: relative;
+  display: grid;
+  width: auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+.lockerverse-launcher__donation-other input {
+  min-width: 0;
+  padding: 8px 12px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+  appearance: textfield;
+  outline: none;
+  background: transparent;
+  border: 0;
+}
+
+.lockerverse-launcher__donation-other[data-selected="true"]::before {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  content: "$";
+  transform: translateY(-50%);
+}
+
+.lockerverse-launcher__donation-other[data-selected="true"] input {
+  padding-left: 24px;
+}
+
+.lockerverse-launcher__donation-other input::placeholder {
+  color: var(--lockerverse-muted);
+  opacity: 1;
+}
+
+.lockerverse-launcher__donation-other[data-selected="true"] input::placeholder {
+  color: inherit;
+}
+
+.lockerverse-launcher__donation-other input::-webkit-inner-spin-button,
+.lockerverse-launcher__donation-other input::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.lockerverse-launcher__checkout-toolbar {
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+  padding-right: 52px;
+  margin-top: -8px;
 }
 
 .lockerverse-launcher__back {
   justify-self: start;
-  padding: 7px 10px;
+  padding: 8px 0;
   font: inherit;
+  font-size: 14px;
+  font-weight: 600;
   color: var(--lockerverse-muted);
   cursor: pointer;
   background: transparent;
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+  border: 0;
+  transition:
+    color 160ms ease,
+    transform 100ms ease;
+}
+
+.lockerverse-launcher__back::before {
+  margin-right: 6px;
+  content: "←";
+}
+
+.lockerverse-launcher__back:hover {
+  color: var(--lockerverse-accent);
+}
+
+.lockerverse-launcher__back:active {
+  transform: translateX(-1px);
 }
 
 .lockerverse-launcher__checkout > .lockerverse-payment {
   max-width: none;
   padding: 0;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .lockerverse-launcher__product {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 16px;
   align-items: center;
   justify-content: space-between;
-  min-height: 58px;
-  padding: 14px 16px;
+  min-height: 76px;
+  padding: 17px;
   font: inherit;
   color: var(--lockerverse-text);
   text-align: left;
-  cursor: pointer;
   background: var(--lockerverse-control);
   border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+  border-radius: calc(var(--lockerverse-radius) + 7px);
+  box-shadow: 0 5px 18px rgb(75 50 27 / 5%);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
 }
 
 .lockerverse-launcher__product:hover {
-  border-color: color-mix(in srgb, var(--lockerverse-accent) 58%, transparent);
+  border-color: color-mix(in srgb, var(--lockerverse-accent) 42%, transparent);
+  transform: translateY(-1px);
+}
+
+.lockerverse-launcher__product[data-selected="true"] {
+  background: color-mix(
+    in srgb,
+    var(--lockerverse-accent) 8%,
+    var(--lockerverse-bg)
+  );
+  border-color: color-mix(in srgb, var(--lockerverse-accent) 55%, transparent);
+  box-shadow: inset 3px 0 0 var(--lockerverse-accent);
 }
 
 .lockerverse-launcher__product-copy {
   display: grid;
-  gap: 3px;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.lockerverse-launcher__product-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.lockerverse-launcher__product-price {
+  margin-top: 2px;
+  font-size: 14px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
 }
 
 .lockerverse-launcher__product-copy small {
@@ -1217,24 +1321,116 @@
   color: var(--lockerverse-muted);
 }
 
-.lockerverse-launcher__amount-form label {
-  font-size: 14px;
+.lockerverse-launcher__quantity {
+  display: inline-grid;
+  grid-template-columns: 36px 38px 36px;
+  align-items: center;
+  overflow: hidden;
+  background: var(--lockerverse-bg);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: calc(var(--lockerverse-radius) - 1px);
+}
+
+.lockerverse-launcher__quantity button {
+  min-height: 36px;
+  padding: 0;
+  font: inherit;
+  color: var(--lockerverse-text);
+  cursor: pointer;
+  background: var(--lockerverse-subtle);
+  border: 0;
+  transition:
+    color 150ms ease,
+    background 150ms ease,
+    transform 100ms ease;
+}
+
+.lockerverse-launcher__quantity button:hover:not(:disabled) {
+  color: var(--lockerverse-accent);
+  background: color-mix(in srgb, var(--lockerverse-accent) 12%, transparent);
+}
+
+.lockerverse-launcher__quantity button:active:not(:disabled) {
+  transform: scale(0.92);
+}
+
+.lockerverse-launcher__quantity button:disabled,
+.lockerverse-launcher__continue:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.lockerverse-launcher__quantity output {
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.lockerverse-launcher__custom-amount {
+  display: grid;
+  grid-template-columns: auto minmax(80px, 112px);
+  gap: 4px 6px;
+  align-items: center;
+  color: var(--lockerverse-muted);
 }
 
-.lockerverse-launcher__amount-form input {
+.lockerverse-launcher__custom-amount input {
   width: 100%;
-  min-height: 48px;
-  padding: 11px 13px;
+  min-height: 38px;
+  padding: 7px 9px;
   font: inherit;
-  font-size: 18px;
+  font-variant-numeric: tabular-nums;
   color: var(--lockerverse-text);
-  background: var(--lockerverse-control);
+  appearance: textfield;
+  background: var(--lockerverse-bg);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__custom-amount input::-webkit-inner-spin-button,
+.lockerverse-launcher__custom-amount input::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.lockerverse-launcher__custom-amount small {
+  grid-column: 1 / -1;
+  font-size: 11px;
+  text-align: right;
+}
+
+.lockerverse-launcher__select {
+  min-height: 38px;
+  padding: 7px 13px;
+  font: inherit;
+  font-weight: 600;
+  color: var(--lockerverse-text);
+  cursor: pointer;
+  background: var(--lockerverse-subtle);
   border: 1px solid var(--lockerverse-border);
   border-radius: var(--lockerverse-radius);
+  transition:
+    color 160ms ease,
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 100ms ease;
+}
+
+.lockerverse-launcher__select:hover {
+  border-color: color-mix(in srgb, var(--lockerverse-accent) 50%, transparent);
+}
+
+.lockerverse-launcher__select:active {
+  transform: scale(0.97);
 }
 
-.lockerverse-launcher__amount-form button[type="submit"] {
+.lockerverse-launcher__select[aria-pressed="true"] {
+  color: var(--lockerverse-accent-contrast);
+  background: var(--lockerverse-accent);
+  border-color: var(--lockerverse-accent);
+}
+
+.lockerverse-launcher__continue {
   min-height: 48px;
   padding: 12px;
   font: inherit;
@@ -1244,6 +1440,79 @@
   background: var(--lockerverse-accent);
   border: 0;
   border-radius: var(--lockerverse-radius);
+  box-shadow: 0 10px 24px
+    color-mix(in srgb, var(--lockerverse-accent) 22%, transparent);
+  transition:
+    filter 160ms ease,
+    transform 100ms ease,
+    box-shadow 160ms ease;
+}
+
+.lockerverse-launcher__continue::after {
+  margin-left: 8px;
+  content: "→";
+}
+
+.lockerverse-launcher__continue:hover:not(:disabled) {
+  box-shadow: 0 12px 30px
+    color-mix(in srgb, var(--lockerverse-accent) 30%, transparent);
+  filter: brightness(1.04);
+}
+
+.lockerverse-launcher__continue:active:not(:disabled) {
+  transform: scale(0.985);
+}
+
+.lockerverse-launcher__footer {
+  position: sticky;
+  bottom: -30px;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
+  gap: 18px;
+  align-items: center;
+  padding: 16px 30px 30px;
+  margin: 8px -30px -30px;
+  background: color-mix(in srgb, var(--lockerverse-bg) 96%, transparent);
+  border-top: 1px solid var(--lockerverse-border);
+  box-shadow: 0 -12px 28px
+    color-mix(in srgb, var(--lockerverse-bg) 82%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.lockerverse-launcher__summary {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  font-size: 12px;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-launcher__summary strong {
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+  color: var(--lockerverse-text);
+}
+
+.lockerverse-launcher__loading {
+  display: grid;
+  gap: 10px;
+  margin-top: 26px;
+}
+
+.lockerverse-launcher__loading-row {
+  display: block;
+  height: 76px;
+  background: linear-gradient(
+    100deg,
+    var(--lockerverse-control) 20%,
+    var(--lockerverse-subtle) 42%,
+    var(--lockerverse-control) 64%
+  );
+  background-size: 240% 100%;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: calc(var(--lockerverse-radius) + 3px);
+  animation: lockerverse-launcher-shimmer 1.4s ease-in-out infinite;
 }
 
 .lockerverse-launcher__dialog > [role="alert"] {
@@ -1272,6 +1541,51 @@
     padding: 22px 18px max(22px, env(safe-area-inset-bottom));
     border-radius: 18px 18px 0 0;
   }
+
+  .lockerverse-launcher__dialog:has(.lockerverse-launcher__products) {
+    padding: 22px 18px max(22px, env(safe-area-inset-bottom));
+    border-radius: 18px 18px 0 0;
+  }
+
+  .lockerverse-launcher__product {
+    gap: 12px;
+    padding: 14px;
+  }
+
+  .lockerverse-launcher__footer {
+    bottom: -22px;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    padding: 14px 18px max(22px, env(safe-area-inset-bottom));
+    margin: 8px -18px calc(-1 * max(22px, env(safe-area-inset-bottom)));
+  }
+
+  .lockerverse-launcher__summary {
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+  }
+}
+
+@keyframes lockerverse-launcher-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+}
+
+@keyframes lockerverse-launcher-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes lockerverse-launcher-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {