/* HANDYPAD-specific content inside the shared Hyperion step component. */
.configuration-steps { margin-top: 0; }
.size-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.size-option { gap: 4px; padding: 12px 12px 16px; }
.size-option .product-image { width: 100%; height: auto; aspect-ratio: 1; padding: 0; background: #fff; margin-bottom: 8px; }
.size-option .option-label { min-height: 0; font-size: var(--text-base); font-weight: 700; }
.size-option .option-detail { font-size: var(--text-sm); white-space: nowrap; }
.option-price { color: var(--hyperion-red, #e63720); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sign-option .option-check { z-index: 1; }
.addon-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.addon-option { justify-content: flex-start; min-height: 56px; }
.addon-option .option-check { order: -1; align-self: center; width: 12px; }
.addon-option .option-label { flex: 1; font-size: var(--text-base); }
.step-optional { margin-left: 12px; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.configuration-step[data-state='locked'] .step-optional { display: none; }
.edition-purchase .result-reference { font-family: inherit; font-size: var(--text-sm); }
.edition-purchase .dimensions { color: var(--muted); }
@container (max-width: 520px) {
  .size-option-grid { gap: 8px; }
  .size-option { padding: 8px 8px 12px; }
  .size-option .option-label { font-size: var(--text-sm); }
  .size-option .option-detail, .size-option .option-price { font-size: 12px; white-space: normal; }
  .addon-options { grid-template-columns: 1fr; }
}

/* Step titles sit inside their card instead of straddling the top border. */
.configurator .configuration-step > legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; }
.configurator .configuration-step > legend ~ * { clear: both; } /* every block after the title, even when a hidden hint sits first */
.configurator .configuration-step[data-state='locked'] > legend { margin-bottom: 0; }
.configurator .configuration-step:not([data-state='locked']) + .configuration-step[data-state='locked'] > legend,
.configurator .configuration-step[data-state='locked']:first-child > legend { margin-bottom: 4px; }

/* Only the single next locked step is a card with a hint. Contact & Shipping starts a
   new group, so while an order step above is still locked it collapses to a title row. */
.configurator:has(.configuration-steps > [data-state='locked']) .order-completion > .configuration-step[data-state='locked']:first-child {
  padding-block: 2px; border-color: transparent; background: transparent; box-shadow: none;
}
.configurator:has(.configuration-steps > [data-state='locked']) .order-completion > .configuration-step[data-state='locked']:first-child > legend { margin-bottom: 0; }
.configurator:has(.configuration-steps > [data-state='locked']) .order-completion > .configuration-step[data-state='locked']:first-child .locked-message {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Collapsed title rows line up with the text inside the cards. */
.configurator .configuration-step[data-state='locked'] { padding-inline: 20px; }
.configurator .configuration-step[data-state='locked']:first-child,
.configurator .configuration-step:not([data-state='locked']) + .configuration-step[data-state='locked'] { padding-block: 14px; }