/* Lens configurator: product page panel, modal dialog, stepper, option cards and the
   prescription entry fields, plus the lens replacement frame form. Loaded by the product page and cart. */

.rx-editor [hidden],
.rx-panel [hidden],
.rx-dialog [hidden] {
    display: none !important;
}

/* Product page panel */

.rx-panel {
    margin: 0 0 12px;
}

.rx-panel-status {
    margin: 10px 0 0;
    white-space: pre-line;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-danger);
}

.rx-summary {
    padding: 12px 14px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
}

.rx-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rx-summary-title {
    margin: 0;
    font-size: calc(14px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-summary-price {
    font-size: calc(14px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

/* Dialog */

body.rx-dialog-open {
    overflow: hidden;
}

.rx-dialog {
    width: min(920px, 96vw);
    max-width: none;
    max-height: none;
    border: 0;
    padding: 0;
    background: transparent;
}

.rx-dialog::backdrop {
    background: rgba(10, 15, 20, 0.6);
}

.rx-dialog-panel {
    display: flex;
    flex-direction: column;
    min-height: min(560px, 92vh);
    max-height: 92vh;
    border-radius: var(--radius-lg);
    background: var(--storefront-page-background);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.rx-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 24px;
    background: var(--storefront-surface);
    border-bottom: 1px solid var(--storefront-border);
}

.rx-dialog-title {
    margin: 0;
    font-size: calc(18px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-dialog-subtitle {
    margin: 2px 0 0;
    font-size: calc(13px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-dialog-close {
    flex: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--storefront-background-subtle);
    font-size: 22px;
    line-height: 1;
    color: var(--storefront-text-strong);
    cursor: pointer;
}

.rx-dialog-close:hover {
    background: var(--storefront-border-soft);
    color: var(--storefront-heading);
}

.calendly-dialog .rx-dialog-panel {
    height: min(760px, 92vh);
}

.calendly-dialog-frame {
    flex: 1;
    min-height: 0;
}

.calendly-dialog-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.rx-dialog-body {
    overflow-y: auto;
    padding: 20px 24px 0;
}

.rx-alert {
    width: min(440px, 92vw);
    padding: 22px 24px 20px;
    border: 0;
    border-top: 4px solid #e0a800;
    border-radius: var(--radius-lg);
    background: var(--storefront-surface);
    box-shadow: var(--shadow-lg);
}

.rx-alert::backdrop {
    background: rgba(10, 15, 20, 0.45);
}

.rx-alert-title {
    margin: 0 0 8px;
    font-size: calc(16px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-alert-text {
    margin: 0 0 18px;
    font-size: calc(13px + var(--font-bump));
    line-height: 1.5;
    color: var(--storefront-text-strong);
}

.rx-alert-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Stepper */

.rx-stepper {
    display: flex;
    gap: 2px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.rx-stepper-item {
    flex: 1;
    min-width: 0;
}

.rx-stepper-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: calc(12px + var(--font-bump));
    color: var(--storefront-text);
    cursor: pointer;
}

.rx-stepper-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.rx-stepper-item:not(:last-child) .rx-stepper-button::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--storefront-border);
}

.rx-stepper-item.is-done .rx-stepper-button::after {
    background: var(--storefront-primary);
}

.rx-stepper-marker {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--storefront-border);
    border-radius: 50%;
    background: var(--storefront-surface);
    font-size: calc(12px + var(--font-bump));
    font-weight: 700;
}

.rx-stepper-marker svg {
    width: 14px;
    height: 14px;
}

.rx-stepper-item.is-active .rx-stepper-marker {
    border-color: var(--storefront-primary);
    background: var(--storefront-primary);
    color: var(--storefront-on-color);
}

.rx-stepper-item.is-active .rx-stepper-label {
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-stepper-item.is-done .rx-stepper-marker {
    border-color: var(--storefront-primary);
    color: var(--storefront-primary);
}

.rx-stepper-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Steps */

.rx-step-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-step-hint {
    margin: 0 0 14px;
    font-size: calc(13px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-step > .rx-cards {
    margin-top: 14px;
}

/* Lens consultation booking, under the lens type choices */

.rx-consult {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed var(--storefront-border);
    border-radius: var(--radius);
    background: var(--storefront-background-subtle);
}

.rx-consult-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--storefront-primary-subtle);
    font-size: 18px;
    color: var(--storefront-primary);
}

.rx-consult-body {
    flex: 1;
    min-width: 0;
}

.rx-consult-title {
    margin: 0;
    font-size: calc(14px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-consult-text {
    margin: 2px 0 0;
    font-size: calc(13px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

.rx-consult-action {
    flex: none;
    padding: 9px 16px;
    border: 1.5px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-text-strong);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.rx-consult-action:hover {
    border-color: var(--storefront-primary);
    color: var(--storefront-primary);
}

.rx-consult-action:focus-visible {
    outline: 2px solid var(--storefront-primary);
    outline-offset: 2px;
}

/* Option cards */

.rx-cards {
    display: grid;
    gap: 10px;
}

.rx-cards-compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rx-option {
    position: relative;
}

.rx-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid var(--storefront-border);
    border-radius: var(--radius);
    background: var(--storefront-surface);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.rx-cards-compact .rx-option {
    display: flex;
}

.rx-cards-compact .rx-card {
    flex: 1;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 12px;
}

.rx-card:hover {
    border-color: var(--storefront-primary-subtle);
    box-shadow: var(--shadow-sm);
}

.rx-card:has(.rx-card-input:focus-visible) {
    box-shadow: var(--shadow-focus);
}

.rx-card:has(.rx-card-input:disabled) {
    cursor: default;
}

.rx-option.is-selected > .rx-card {
    border-color: var(--storefront-primary);
    background: color-mix(in srgb, var(--storefront-primary) 6%, var(--storefront-surface));
    box-shadow: inset 0 0 0 1px var(--storefront-primary);
}

.rx-option.is-selected:has(> .rx-card-detail:not([hidden])) > .rx-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* A card that opens a sub-selection reads as one section with its detail: drop the checkmark, and
   merge the seam into the detail instead of doubling the border. */
.rx-option:has(> .rx-card-detail:not([hidden])) .rx-card-check {
    display: none;
}

.rx-option.is-selected:has(> .rx-card-detail:not([hidden])) > .rx-card {
    border-bottom: 0;
    box-shadow: none;
}

.rx-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rx-card-icon {
    width: 48px;
    height: 48px;
    color: var(--storefront-text-strong);
}

.rx-cards-compact .rx-card-icon {
    width: 36px;
    height: 36px;
}

.rx-card-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rx-option.is-selected > .rx-card .rx-card-icon {
    color: var(--storefront-primary);
}

.rx-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rx-card-title {
    font-size: calc(15px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-cards-compact .rx-card-title {
    font-size: calc(14px + var(--font-bump));
}

.rx-card-text {
    margin-top: 2px;
    font-size: calc(13px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

.rx-cards-compact .rx-card-text {
    font-size: calc(12px + var(--font-bump));
}

.rx-card-aside {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rx-price-tag {
    font-size: calc(14px + var(--font-bump));
    white-space: nowrap;
    text-align: right;
}

.rx-price-tag s {
    margin-right: 4px;
    font-size: calc(12px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-price-tag strong {
    color: var(--storefront-heading);
}

.rx-price-tag.is-free strong {
    font-size: calc(11px + var(--font-bump));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--storefront-primary);
}

.rx-card-check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-left: auto;
    border: 1.5px solid var(--storefront-border);
    border-radius: 50%;
    background: var(--storefront-surface);
    color: transparent;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.rx-card-check svg {
    width: 12px;
    height: 12px;
}

.rx-option.is-selected > .rx-card .rx-card-check {
    border-color: var(--storefront-primary);
    background: var(--storefront-primary);
    color: var(--storefront-on-color);
}

.rx-card-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #ffe9ec;
    font-size: calc(11px + var(--font-bump));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #c8353a;
}

.rx-card-detail > .rx-block-title {
    margin-top: 12px;
}

.rx-card-detail > .rx-cards {
    margin-top: 10px;
}

.rx-card-detail {
    padding: 4px 16px 16px;
    border: 1.5px solid var(--storefront-primary);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--storefront-surface);
}

/* Chips */

.rx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rx-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1.5px solid var(--storefront-border);
    border-radius: var(--radius-pill);
    background: var(--storefront-surface);
    font-size: calc(13px + var(--font-bump));
    font-weight: 400;
    color: var(--storefront-text-strong);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.rx-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rx-chip:hover {
    border-color: var(--storefront-primary-subtle);
}

.rx-chip:has(input:checked) {
    border-color: var(--storefront-primary);
    background: color-mix(in srgb, var(--storefront-primary) 8%, var(--storefront-surface));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-chip:has(input:focus-visible) {
    box-shadow: var(--shadow-focus);
}

.rx-chip-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Lens photo color pickers */

.rx-chips-preview .rx-chip {
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* The photo carries its own color; a tinted chip background would bleed into it. */
.rx-chips-preview .rx-chip:has(input:checked) {
    background: var(--storefront-surface);
}

.rx-chip-preview {
    display: block;
    width: 56px;
    height: auto;
    border-radius: 3px;
}


/* Blocks and fields */

.rx-block {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius);
    background: var(--storefront-surface);
}

.rx-step > .rx-section:first-of-type > .rx-block,
.rx-step > .rx-block:first-of-type {
    margin-top: 0;
}

.rx-block-title {
    margin: 0;
    font-size: calc(14px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-block-hint {
    margin: 4px 0 0;
    font-size: calc(12px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

/* The saved prescription picker is a shortcut, so it stands apart from the entry blocks. */
.rx-saved {
    border-color: color-mix(in srgb, var(--storefront-primary) 35%, var(--storefront-border));
    background: color-mix(in srgb, var(--storefront-primary) 7%, var(--storefront-surface));
}

.rx-saved-summary {
    margin-top: 8px;
    font-weight: 600;
}

.rx-saved-summary:empty {
    display: none;
}

.rx-block > .rx-cards,
.rx-block > .rx-table,
.rx-block > .rx-inline,
.rx-block > .rx-upload {
    margin-top: 12px;
}

/* Related inputs share a row when the width allows; each column fills its cell. */
.rx-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.rx-fields > .rx-field {
    margin-top: 0;
}

.rx-fields .rx-field select,
.rx-fields .rx-field input {
    max-width: none;
}

.rx-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    font-size: calc(12px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-text-strong);
}

.rx-field select,
.rx-field input,
.rx-field textarea {
    max-width: 340px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background-color: var(--storefront-surface);
    font-size: calc(13px + var(--font-bump));
    font-weight: 400;
    color: var(--storefront-heading);
}

.rx-field select:focus-visible,
.rx-field input:focus-visible,
.rx-field textarea:focus-visible,
.rx-table select:focus-visible,
.rx-table input:focus-visible {
    outline: none;
    border-color: var(--storefront-primary);
    box-shadow: var(--shadow-focus);
}

.rx-field textarea {
    height: auto;
    padding: 8px 10px;
    resize: vertical;
}

.rx-field input[type="range"] {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    accent-color: var(--storefront-primary);
}

.rx-range {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    gap: 4px 12px;
}

.rx-range > span {
    grid-column: 1 / -1;
}

.rx-range-value {
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-primary);
}

.rx-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rx-inline .rx-field {
    margin-top: 0;
}

.rx-inline .rx-field input {
    width: 110px;
}

.rx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    font-size: calc(13px + var(--font-bump));
    line-height: 1.4;
    color: var(--storefront-text-strong);
    cursor: pointer;
}

.rx-check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--storefront-primary);
}

.rx-table {
    display: grid;
    grid-template-columns: max-content repeat(4, minmax(70px, 1fr));
    gap: 8px 10px;
    align-items: center;
    max-width: 560px;
    margin-top: 12px;
}

.rx-table-no-add {
    grid-template-columns: max-content repeat(3, minmax(70px, 1fr));
}

.rx-heading {
    font-size: calc(12px + var(--font-bump));
    font-weight: 700;
    text-transform: uppercase;
    color: var(--storefront-text);
}

.rx-row-label {
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    white-space: nowrap;
    color: var(--storefront-text-strong);
}

.rx-table select,
.rx-table input {
    width: 100%;
    height: 36px;
    padding: 0 6px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background-color: var(--storefront-surface);
    font-size: calc(13px + var(--font-bump));
    color: var(--storefront-heading);
}

.rx-fine-print {
    margin: 8px 0 0;
    font-size: calc(11px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

.rx-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 8px 10px 14px;
    border-left: 3px solid #e0a800;
    border-radius: var(--radius-sm);
    background: #fff8e6;
    font-size: calc(13px + var(--font-bump));
    font-weight: 600;
    color: var(--storefront-text-strong);
}

.rx-hint-text {
    flex: 1;
    margin: 0;
}

.rx-hint-dismiss {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: -2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--storefront-text);
    cursor: pointer;
}

.rx-hint-dismiss:hover {
    background: rgba(224, 168, 0, 0.18);
    color: var(--storefront-text-strong);
}

.rx-upload {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rx-upload .rx-field {
    margin-top: 0;
}

.rx-upload input[type="file"] {
    height: auto;
    padding: 8px 10px;
}

.rx-upload-status {
    margin: 0;
    font-size: calc(12px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-upload-status.rx-upload-error {
    font-weight: 700;
    color: var(--storefront-danger);
}

.rx-upload-remove {
    align-self: flex-start;
    padding: 4px 10px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
    font-size: calc(12px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-text);
    cursor: pointer;
}

.rx-pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
    margin-top: 12px;
}

.rx-pd-aside {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--storefront-background-subtle);
}

.rx-pd-aside-title {
    margin: 0;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-heading);
}

.rx-pd-aside-text {
    margin: 2px 0 0;
    font-size: calc(12px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

.rx-pd-measure {
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid var(--storefront-primary);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-primary);
    cursor: pointer;
}

.rx-pd-measure:disabled {
    opacity: 0.6;
    cursor: wait;
}

.rx-pd-status {
    margin: 6px 0 0;
    font-size: calc(12px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-pd-status:empty {
    display: none;
}

.rx-pd-help {
    display: block;
    width: fit-content;
    margin-top: 10px;
    font-size: calc(12px + var(--font-bump));
    font-weight: 600;
    color: var(--storefront-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rx-pd-help:hover {
    color: var(--storefront-primary-hover);
}

/* Review */

.rx-review {
    display: grid;
    gap: 8px;
    margin: 0;
}

.rx-review-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
    font-size: calc(14px + var(--font-bump));
}

.rx-review-row dt {
    font-size: calc(11px + var(--font-bump));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--storefront-text);
}

.rx-review-row dd {
    margin: 0;
    font-weight: 600;
    color: var(--storefront-heading);
    overflow-wrap: anywhere;
}

.rx-review-change {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-primary);
    cursor: pointer;
}

.rx-review-change:hover {
    text-decoration: underline;
}

/* Footer */

.rx-footer {
    position: sticky;
    bottom: 0;
    margin-top: 20px;
    padding: 10px 0 16px;
    background: linear-gradient(to bottom, rgba(246, 247, 248, 0), var(--storefront-page-background) 40%);
}

.rx-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius);
    background: var(--storefront-surface);
    box-shadow: var(--shadow-md);
}

.rx-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.rx-price-label {
    font-size: calc(11px + var(--font-bump));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--storefront-text);
}

.rx-price s {
    font-size: calc(13px + var(--font-bump));
    color: var(--storefront-text);
}

.rx-price strong {
    font-size: calc(18px + var(--font-bump));
    color: var(--storefront-heading);
}

.rx-nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.rx-nav-back {
    padding: 9px 16px;
    border: 1.5px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background: var(--storefront-surface);
    font: inherit;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-text-strong);
    cursor: pointer;
}

.rx-nav-back:hover {
    border-color: var(--storefront-primary);
    color: var(--storefront-primary);
}

.rx-nav-next {
    padding: 10px 22px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--storefront-accent);
    font: inherit;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--storefront-on-color);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.rx-nav-next:hover {
    background: var(--storefront-accent-hover);
    box-shadow: var(--shadow-md);
}

.rx-nav-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.rx-error {
    margin: 0 0 8px;
    padding: 10px 14px;
    white-space: pre-line;
    border-left: 3px solid var(--storefront-danger);
    border-radius: var(--radius-sm);
    background: #fff1f1;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: #b02a37;
}

/* Field-level validation: the footer message names the problem; these cue the field it refers to. */
.rx-field.rx-invalid > span,
.rx-check.rx-invalid > span,
.rx-block.rx-invalid > .rx-block-title,
.rx-section.rx-invalid .rx-block-title {
    color: var(--storefront-danger);
}

.rx-field.rx-invalid > select,
.rx-field.rx-invalid > input,
.rx-field.rx-invalid > textarea,
select.rx-invalid,
input.rx-invalid,
textarea.rx-invalid {
    border-color: var(--storefront-danger);
    box-shadow: 0 0 0 1px var(--storefront-danger);
}

.rx-cards.rx-invalid,
.rx-chips.rx-invalid {
    outline: 2px solid var(--storefront-danger);
    outline-offset: 6px;
    border-radius: var(--radius);
}

/* Lens summary actions (product page edit mode) */

.rx-line-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

.rx-line-actions .cart-line-edit {
    background: none;
    cursor: pointer;
}

/* Same box as the other line actions; only the colors change so it reads as the call to action. */
.rx-line-actions .rx-add-lenses {
    border-color: var(--storefront-primary);
    background-color: var(--storefront-primary);
    color: var(--storefront-on-color);
}

.rx-line-actions .rx-add-lenses:hover {
    border-color: var(--storefront-primary-hover);
    background-color: var(--storefront-primary-hover);
    color: var(--storefront-on-color);
}

.rx-price-changed {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    background-color: #fff8e6;
}

.rx-price-changed p {
    margin: 0 0 8px;
    font-size: calc(13px + var(--font-bump));
    font-weight: 700;
    color: var(--storefront-text-strong);
}

.rx-price-changed button {
    font-size: calc(13px + var(--font-bump));
}

@media (max-width: 640px) {
    .rx-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        margin: 0;
    }

    .rx-dialog-panel,
    .calendly-dialog .rx-dialog-panel {
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .rx-dialog-header,
    .rx-dialog-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rx-consult {
        flex-wrap: wrap;
    }

    .rx-consult-body {
        flex-basis: calc(100% - 54px);
    }

    .rx-consult-action {
        flex: 1;
        text-align: center;
    }

    .rx-stepper-label {
        font-size: calc(11px + var(--font-bump));
    }

    .rx-card {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 14px;
    }

    .rx-card-icon {
        width: 40px;
        height: 40px;
    }

    .rx-card-aside {
        grid-column: 2;
        justify-content: space-between;
    }

    .rx-pd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .rx-review-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rx-review-row dt {
        grid-column: 1 / -1;
    }

    .rx-table {
        grid-template-columns: max-content repeat(4, minmax(52px, 1fr));
        gap: 6px 6px;
    }

    .rx-table-no-add {
        grid-template-columns: max-content repeat(3, minmax(52px, 1fr));
    }

    .rx-table select,
    .rx-table input {
        padding: 0 3px;
        font-size: calc(12px + var(--font-bump));
    }

    .rx-footer-row {
        padding: 10px 12px;
    }

    .rx-nav {
        width: 100%;
    }

    .rx-nav-next {
        flex: 1;
    }
}

/* Lens replacement: the customer's own frame, collected on the product page above the lens button.
   A replacement lens product's choice between factory and custom lenses, and how its custom lenses'
   frame reaches us, use the same form. Its fields and option cards are the checkout primitives, sized
   here for the product column. */
.rx-frame,
.rx-lens-choice {
    margin: 0 0 20px;
}

.rx-lens-choice .rx-frame-title {
    margin-bottom: 10px;
}

.rx-frame-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--storefront-heading);
}

.rx-frame-hint {
    margin: 4px 0 16px;
    font-size: calc(14px + var(--font-bump));
    color: var(--storefront-text-muted);
}

.rx-frame-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.rx-frame-field label {
    color: var(--storefront-heading);
}

.rx-frame-optional {
    font-weight: 400;
    color: var(--storefront-text-muted);
}

.rx-frame .rx-frame-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: calc(15px + var(--font-bump));
}

.rx-frame .rx-frame-field input::placeholder {
    color: color-mix(in srgb, var(--storefront-text-muted) 60%, transparent);
    font-style: italic;
    opacity: 1;
}

.rx-frame-subtitle {
    margin: 0 0 10px;
    font-size: calc(15px + var(--font-bump));
    font-weight: 600;
    color: var(--storefront-heading);
}

.rx-frame-shipping {
    margin-top: 8px;
}

:is(.rx-frame, .rx-lens-choice) .checkout-option {
    transition: background-color var(--dur) var(--ease);
}

:is(.rx-frame, .rx-lens-choice) .checkout-option-row {
    align-items: flex-start;
    padding: 14px 16px;
}

:is(.rx-frame, .rx-lens-choice) .checkout-option:not(.is-unavailable) .checkout-option-row:hover {
    background: color-mix(in srgb, var(--storefront-primary) 4%, transparent);
}

:is(.rx-frame, .rx-lens-choice) .checkout-option-row input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--storefront-primary);
}

.rx-frame-shipping-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:is(.rx-frame, .rx-lens-choice) .checkout-option-name {
    font-size: calc(14px + var(--font-bump));
    font-weight: 600;
    line-height: 1.4;
    color: var(--storefront-heading);
}

.rx-frame-shipping-description {
    font-size: calc(13px + var(--font-bump));
    line-height: 1.45;
    color: var(--storefront-text);
}

.rx-frame .checkout-option-price {
    flex: none;
    padding-left: 8px;
    font-size: calc(14px + var(--font-bump));
    line-height: 1.4;
    color: var(--storefront-heading);
}

.rx-frame-liability {
    margin-top: 16px;
    padding: 12px 14px 0;
    border: 1px solid var(--storefront-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.rx-frame-liability:has(input:checked) {
    border-color: var(--storefront-primary);
    background: var(--storefront-primary-subtle);
}

.rx-frame-liability .rx-check {
    margin: 0;
    font-size: calc(13px + var(--font-bump));
    line-height: 1.5;
}

.rx-frame-liability .rx-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
}

/* The global input focus shadow draws a square halo around the box, even on click. */
.rx-frame-liability .rx-check input:focus {
    box-shadow: none;
}

.rx-frame-liability .rx-check input:focus-visible {
    outline: 2px solid var(--storefront-primary);
    outline-offset: 2px;
}

.rx-frame-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-left: 28px;
    font-size: calc(13px + var(--font-bump));
    font-weight: 600;
    color: var(--storefront-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rx-frame-link:hover {
    color: var(--storefront-primary-hover);
}

.rx-frame-link:focus-visible {
    outline: 2px solid var(--storefront-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.rx-frame-link i {
    font-size: calc(11px + var(--font-bump));
}

/* Validation: every missing detail is marked at once; the panel status under the button names them. */
.rx-frame-field.rx-invalid label,
.rx-frame-shipping.rx-invalid .rx-frame-subtitle,
.rx-frame-liability.rx-invalid .rx-check > span {
    color: var(--storefront-danger);
}

.rx-frame .rx-frame-field.rx-invalid input,
.rx-frame-shipping.rx-invalid .checkout-options,
.rx-frame-liability.rx-invalid {
    border-color: var(--storefront-danger);
    box-shadow: 0 0 0 1px var(--storefront-danger);
}

.rx-frame .rx-frame-field.rx-invalid input:focus {
    box-shadow: 0 0 0 1px var(--storefront-danger), 0 0 0 4px color-mix(in srgb, var(--storefront-danger) 18%, transparent);
}