/* Hitman design studio. Scoped to the builder; the catalog keeps its own style. */
body:has(.studio) {
  background: var(--ink);
  color-scheme: dark;
  color: var(--paper);
}
.studio {
  --accent: var(--brass);
  --muted: var(--paper-dim);
  --border: var(--line);
  --cream: var(--ink-2);
  max-width: 1920px;
  margin: auto;
}
.studio * {
  box-sizing: border-box;
}
.studio button,
.studio input,
.studio textarea {
  font-family: Archivo, Arial, sans-serif;
}
.studio button {
  cursor: pointer;
}
.studio [hidden] {
  display: none !important;
}
.studio button:focus-visible,
.studio a:focus-visible,
.studio input:focus-visible,
.studio textarea:focus-visible,
#scene:focus-visible {
  outline: 3px solid var(--brass-hi);
  outline-offset: 4px;
}
.studio-heading {
  padding: 25px 38px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.studio-eyebrow {
  font:
    600 10px Archivo,
    sans-serif;
  letter-spacing: 1.9px;
  color: var(--paper-dim);
  margin: 0 0 10px;
  display: block;
}
.studio h1 {
  font:
    450 clamp(28px, 3vw, 43px) / 1.05 Fraunces,
    Georgia,
    serif;
  letter-spacing: -1.5px;
  margin: 0;
}
.studio-heading-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: right;
  font-size: 11px;
  color: var(--paper-dim);
}
.studio-heading-actions a {
  color: var(--paper-dim);
  font-size: 12px;
  text-decoration: none;
}
.studio-heading-actions button {
  border: 0;
  background: transparent;
  text-decoration: underline;
  color: var(--brass-hi);
}
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 408px;
  min-height: 480px;
  height: calc(100dvh - 222px);
  max-height: 980px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.showroom {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #303036, #151517);
  min-width: 0;
}
.stage-caption {
  position: absolute;
  left: 32px;
  right: 27px;
  top: 27px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  pointer-events: none;
  z-index: 2;
}
.stage-caption h2 {
  font:
    450 25px Fraunces,
    Georgia,
    serif;
  letter-spacing: -0.7px;
  margin: 0;
}
.stage-caption .studio-eyebrow {
  font-size: 9px;
}
.live-badge {
  font-size: 9px;
  letter-spacing: 1.1px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--paper-dim);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.live-badge i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--brass);
}
#scene {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
}
#scene:active {
  cursor: grabbing;
}
#scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.scene-loading {
  position: absolute;
  inset: 45% 10%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--paper-dim);
}
.scene-toolbar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 3;
}
.view-switch {
  background: #18181beb;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 4px;
  display: flex;
  box-shadow: 0 5px 25px #2d392212;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.view-switch button {
  padding: 9px 15px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--paper-dim);
  font-size: 11px;
}
.view-switch button.selected {
  background: var(--brass);
  color: var(--paper);
}
.scene-toolbar > button {
  height: 38px;
  width: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--paper-dim);
  font-size: 22px;
}
.stage-bottom {
  position: absolute;
  bottom: 36px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--paper-dim);
  gap: 10px;
}
.stage-bottom > span:first-child {
  font-size: 12px;
  color: var(--paper);
  font-weight: 600;
}
.stage-bottom > div {
  display: flex;
  gap: 12px;
}
.stage-bottom button {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--paper-dim);
  font-size: 10px;
}
.stage-bottom button[aria-pressed="true"] {
  text-decoration: underline;
}
.render-note {
  position: absolute;
  bottom: 13px;
  left: 30px;
  font-size: 9px;
  color: var(--paper-dim);
}
.play-detail {
  position: absolute;
  right: 28px;
  top: 89px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 5px 0;
  background: transparent;
  color: var(--paper-dim);
  font-size: 11px;
  z-index: 3;
}
.photo-view {
  position: absolute;
  inset: 95px 25px 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.photo-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-view span {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  background: var(--ink-2);
  padding: 5px 9px;
  border-radius: 5px;
  text-align: center;
}
.configurator {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
}
.step-track {
  display: flex;
  gap: 4px;
  padding: 24px 26px 18px;
  flex: none;
}
.step-track button {
  background: transparent;
  color: var(--paper-dim);
  border: 0;
  border-top: 2px solid var(--line);
  font-size: 9px;
  padding: 9px 0 0;
  flex: 1;
  text-align: left;
  white-space: nowrap;
}
.step-track button.active {
  border-color: var(--brass);
  color: var(--brass-hi);
}
.step-track button.done {
  border-color: var(--brass);
  color: var(--paper-dim);
}
.panel-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 5px 26px 22px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #55545a transparent;
}
.panel-kicker {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--paper-dim);
  margin-bottom: 9px;
}
.panel-title {
  font:
    450 28px/1.13 Fraunces,
    Georgia,
    serif;
  letter-spacing: -0.7px;
  margin: 0 0 10px;
}
.panel-description {
  font-size: 12px;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0 0 23px;
}
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.game-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  padding: 13px 14px 12px;
  position: relative;
  color: var(--paper);
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
  min-height: 88px;
}
.game-card:hover {
  transform: translateY(-2px);
  background: var(--ink-2);
}
.game-card.selected {
  background: #32191e;
  border-color: var(--brass);
  color: var(--paper);
}
.game-card.selected:after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 10px;
}
.game-card svg {
  width: 66px;
  height: 30px;
  display: block;
  margin: 0 0 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}
.game-card b {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.game-card small {
  font-size: 9px;
  color: var(--paper-dim);
  display: block;
  margin-top: 3px;
}
.game-card:last-child {
  grid-column: 1/-1;
  min-height: 62px;
  display: grid;
  grid-template-columns: 75px 1fr;
  align-items: center;
}
.game-card:last-child svg {
  grid-row: 1/3;
  margin: 0;
}
.game-card:last-child small {
  margin-top: -14px;
}
.config-footer {
  border-top: 1px solid var(--border);
  padding: 19px 26px 24px;
  flex: none;
  background: var(--ink-2);
  z-index: 5;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
  gap: 10px;
}
.price-row > div > span {
  font-size: 8px;
  letter-spacing: 1.3px;
  display: block;
  color: var(--paper-dim);
  margin-bottom: 5px;
}
.price-row strong {
  font:
    450 28px Fraunces,
    Georgia,
    serif;
  color: var(--paper);
  letter-spacing: -0.5px;
}
.quote-caption {
  font-size: 9px;
  color: var(--paper-dim);
  line-height: 1.6;
  text-align: right;
}
.navigation {
  display: flex;
  gap: 9px;
}
.navigation button {
  border-radius: 5px;
  height: 46px;
  border: 1px solid var(--line);
  font-size: 12px;
  background: transparent;
  color: var(--paper-dim);
}
.navigation #back {
  width: 44px;
  flex: none;
  font-size: 18px;
}
.navigation #back:disabled {
  opacity: 0.3;
  cursor: default;
}
.navigation #next {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 19px;
  background: var(--brass);
  color: var(--paper);
  border-color: var(--brass);
}
.navigation #next:hover {
  background: #ca202a;
}
.studio-footnote {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 37px;
  color: var(--paper-dim);
  font-size: 10px;
}
.studio-footnote > span:last-child {
  font-size: 8px;
  letter-spacing: 1.5px;
}
.option-list {
  display: grid;
  gap: 9px;
}
.model-option,
.layout-option {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 13px;
  text-align: left;
  gap: 10px;
  color: var(--paper);
}
.model-option b,
.layout-option b {
  font-size: 12px;
  display: block;
  font-weight: 500;
}
.model-option small,
.layout-option small {
  font-size: 10px;
  color: var(--paper-dim);
  display: block;
  margin-top: 5px;
}
.model-option > span:last-child {
  font-size: 12px;
  color: var(--paper-dim);
}
.model-option.selected,
.layout-option.selected {
  border-color: var(--brass);
  background: #32191e;
}
.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--paper-dim);
  margin: 22px 0 13px;
  text-transform: uppercase;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.swatch {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 6px;
  padding: 12px 6px 10px;
  color: var(--paper-dim);
  font-size: 10px;
}
.swatch > i {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: var(--color);
  box-shadow:
    inset 0 1px 3px #0003,
    inset 0 -1px 0 #fff3;
}
.swatch.wood > i {
  background:
    repeating-linear-gradient(10deg, #0001 0 1px, transparent 2px 5px),
    var(--color);
}
.swatch.selected {
  border-color: var(--brass);
  color: var(--brass-hi);
  background: #32191e;
}
.swatch.selected > i:after {
  content: "✓";
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--paper);
  text-shadow: 0 1px 3px #0008;
}
.studio-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--paper-dim);
  gap: 15px;
  cursor: pointer;
  margin-top: 22px;
}
.studio-toggle small {
  display: block;
  font-size: 10px;
  color: var(--paper-dim);
  margin-top: 5px;
}
.studio-toggle input {
  accent-color: #b91d27;
  width: 20px;
  height: 20px;
  flex: none;
}
.source-link {
  display: inline-block;
  font-size: 10px;
  color: var(--paper-dim);
  text-underline-offset: 3px;
  margin-top: 17px;
}
.text-label {
  display: block;
  font-size: 11px;
  color: var(--paper-dim);
  margin: 18px 0 8px;
}
.studio input[type="text"],
.studio textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink-2);
  color: var(--paper);
  font-size: 14px;
}
.studio textarea {
  resize: vertical;
  min-height: 76px;
  font-size: 12px;
}
.field-hint {
  font-size: 10px;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 8px 0 15px;
}
.upload-zone {
  border: 1px dashed var(--line);
  border-radius: 7px;
  padding: 20px 12px;
  text-align: center;
  background: #32191e;
  display: block;
  font-size: 12px;
  color: var(--paper-dim);
  cursor: pointer;
}
.upload-zone span {
  font-size: 10px;
  display: block;
  margin-top: 7px;
  color: var(--paper-dim);
}
.upload-zone input {
  display: block;
  margin: 14px auto 0;
  width: 100%;
  max-width: 245px;
  font-size: 10px;
}
.minor-button {
  font-size: 11px;
  border: 0;
  background: transparent;
  color: var(--paper-dim);
  padding: 10px 0;
  text-decoration: underline;
}
.preset-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.preset-row button {
  font-size: 10px;
  background: var(--ink-2);
  color: var(--paper-dim);
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.review-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.review-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.review-list b {
  font-weight: 400;
  color: var(--paper-dim);
}
.review-list span {
  text-align: right;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.save-actions button,
.order-link {
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 5px;
  background: transparent;
  padding: 12px 7px;
  font-size: 11px;
  text-align: center;
  text-decoration: none;
}
.order-link {
  display: block;
  background: var(--brass);
  color: var(--paper);
  margin-top: 12px;
}
.panel-notice {
  font-size: 10px;
  color: var(--paper-dim);
  line-height: 1.7;
  margin-top: 15px;
}
#toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 12px 20px;
  border-radius: 6px;
  background: #971921;
  color: var(--paper);
  font-size: 12px;
  box-shadow: 0 6px 30px #0003;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.showroom.expanded {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100dvh;
}
.no-script {
  padding: 40px;
}
.studio ~ .ft {
  display: none;
}
body:has(.studio) .ft {
  display: none;
}
@media (min-width: 1600px) {
  .studio-grid {
    grid-template-columns: 1fr 450px;
  }
  .panel-scroll {
    padding-left: 34px;
    padding-right: 34px;
  }
  .game-card {
    min-height: 100px;
  }
  .panel-title {
    font-size: 32px;
  }
}
@media (max-width: 1100px) {
  .studio-grid {
    grid-template-columns: minmax(0, 1fr) 365px;
  }
  .studio-heading {
    padding: 23px;
  }
  .stage-caption {
    left: 23px;
  }
  .stage-bottom {
    left: 20px;
    right: 20px;
  }
  .stage-bottom #interaction-hint {
    display: none;
  }
  .panel-scroll {
    padding-left: 22px;
    padding-right: 22px;
  }
  .config-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .studio-heading-actions {
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  .studio-heading {
    padding: 18px 20px;
  }
  .studio-heading h1 {
    font-size: 29px;
  }
  .studio-heading .studio-eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .studio-heading-actions {
    display: none;
  }
  .studio-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .showroom {
    height: 350px;
    height: 42svh;
    min-height: 285px;
    max-height: 450px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--line);
  }
  .stage-caption {
    left: 18px;
    right: 16px;
    top: 18px;
  }
  .stage-caption h2 {
    font-size: 20px;
  }
  .stage-caption .studio-eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .live-badge {
    font-size: 8px;
    padding: 5px 7px;
  }
  .stage-caption .studio-eyebrow {
    margin-bottom: 6px;
  }
  .play-detail {
    right: 18px;
    top: 55px;
    font-size: 9px;
  }
  .stage-bottom {
    bottom: 22px;
    left: 18px;
    right: 18px;
    font-size: 9px;
  }
  .stage-bottom > span:first-child {
    font-size: 10px;
  }
  .stage-bottom button {
    font-size: 9px;
  }
  .render-note {
    left: 18px;
    bottom: 6px;
    font-size: 7px;
  }
  .scene-toolbar {
    bottom: 53px;
  }
  .view-switch button {
    padding: 7px 12px;
    font-size: 10px;
  }
  .scene-toolbar > button {
    width: 32px;
    height: 32px;
  }
  .configurator {
    min-height: 490px;
    border-left: 0;
  }
  .step-track {
    padding: 20px 22px 13px;
    gap: 7px;
  }
  .step-track button {
    font-size: 9px;
  }
  .panel-scroll {
    overflow: visible;
    padding: 7px 22px 22px;
  }
  .panel-title {
    font-size: 27px;
  }
  .panel-description {
    font-size: 11px;
    margin-bottom: 18px;
  }
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .game-card {
    padding: 10px 9px;
    min-height: 86px;
  }
  .game-card svg {
    width: 55px;
    height: 26px;
  }
  .game-card b {
    font-size: 10px;
  }
  .game-card small {
    font-size: 8px;
  }
  .game-card:last-child {
    grid-column: 1/-1;
    min-height: 53px;
    grid-template-columns: 65px 1fr;
  }
  .game-card:last-child small {
    margin-top: -10px;
  }
  .config-footer {
    position: sticky;
    bottom: 0;
    z-index: 11;
    padding: 13px 22px 16px;
    box-shadow: 0 -4px 20px #3a462908;
  }
  .price-row {
    margin-bottom: 10px;
  }
  .price-row strong {
    font-size: 25px;
  }
  .price-row > div > span {
    font-size: 7px;
  }
  .navigation button {
    height: 44px;
  }
  .studio-footnote {
    padding: 15px 22px;
    font-size: 9px;
  }
  .studio-footnote > span:last-child {
    display: none;
  }
  .photo-view {
    inset: 65px 20px 92px;
  }
  .photo-view span {
    font-size: 8px;
    bottom: -10px;
  }
  .showroom.expanded {
    max-height: none;
  }
  .showroom.expanded .scene-toolbar {
    bottom: 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Legible secondary copy and a little more space around the choices. */
.panel-description,
.field-hint,
.panel-notice {
  color: var(--paper-dim);
}
.model-option small,
.layout-option small {
  color: var(--paper-dim);
}
.quote-caption {
  color: var(--paper-dim);
}
.game-card small {
  color: var(--paper-dim);
}
.step-track button {
  color: var(--paper-dim);
}
.render-note {
  color: var(--paper-dim);
}
.swatch {
  font-size: 11px;
}
.game-card b {
  font-size: 13px;
}
.panel-description {
  font-size: 13px;
}
.studio-heading-actions {
  color: var(--paper-dim);
}
.studio-footnote {
  color: var(--paper-dim);
}
@media (max-width: 760px) {
  .game-card b {
    font-size: 11px;
  }
  .panel-description {
    font-size: 12px;
  }
  .swatch {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .view-switch button {
    padding: 7px 9px;
  }
  .scene-toolbar {
    gap: 5px;
  }
  .studio-heading h1 {
    font-size: 27px;
  }
  .stage-caption h2 {
    font-size: 18px;
  }
}
.upload-zone input::file-selector-button {
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--paper-dim);
  padding: 7px 10px;
  border-radius: 4px;
  font: inherit;
  margin-right: 8px;
  cursor: pointer;
}
@media (min-width:761px) and (max-height:850px){
 .game-grid{grid-template-columns:repeat(3,1fr);gap:7px}
 .game-card{padding:9px;min-height:72px}
 .game-card svg{width:53px;height:24px;margin-bottom:5px}
 .game-card b{font-size:11px}.game-card small{font-size:8px}
 .game-card:last-child{min-height:45px;grid-template-columns:65px 1fr}
 .game-card:last-child small{margin-top:-11px}
 .panel-title{font-size:25px}.panel-description{font-size:11px;margin-bottom:16px}
 .step-track{padding-top:17px;padding-bottom:13px}
 .config-footer{padding-top:12px;padding-bottom:15px}
 .price-row{margin-bottom:10px}.price-row strong{font-size:25px}
 .navigation button{height:42px}
}

.custom-color{margin:16px 0;padding:14px;border:1px solid var(--border);border-radius:9px;background: var(--ink-2);display:grid;gap:10px}.custom-color label{font-size:12px;font-weight:700}.custom-color small{display:block;font-size:10px;font-weight:400;color: var(--paper-dim);margin-top:3px}.custom-color>div{display:flex;gap:10px;align-items:center}.custom-color input[type=color]{width:44px;height:36px;cursor:pointer;border:0;padding:0;background:none;flex:none}.custom-color input[type=text]{width:120px;min-width:0;border:1px solid var(--line);border-radius:5px;padding:7px 10px;background: var(--ink-2);color: var(--paper);font:12px monospace}.custom-color input:invalid{border-color: var(--brass)}

.swatch.pat > i { background-size: cover; border: 1px solid var(--line); }
.swatch-grid + .section-label { margin-top: 20px; }

.logo-hint { color: var(--paper); }
.minor-button { border: 1px solid var(--line); color: var(--paper-dim); border-radius: 5px; background: transparent; padding: 10px 7px; font-size: 11px; }
.play-detail { touch-action: manipulation; padding: 8px 2px; }
@media (max-width: 760px) { .play-detail { font-size: 11px; padding: 10px 4px; right: 16px; top: 52px; } }

.logo-sizing { margin-top: 20px; padding: 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--ink-3); }
.logo-sizing label { display: flex; justify-content: space-between; font-size: 12px; color: var(--paper); }
.logo-sizing output { color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.logo-sizing input { display: block; width: 100%; height: 36px; margin: 10px 0 0; accent-color: var(--brass); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--paper-dim); }
/* The final design action now saves to the shared cart. */
button.order-link{width:100%;font:inherit;border:0;cursor:pointer;text-align:center}