/* Shared customer-facing type and controls, from the catalogue to checkout. */
.storefront-shell {
    --ink: #0b1322;
    --ink-soft: #35465f;
    --muted: #53647c;
    --surface: #f2f6fa;
    --line: #d9e2ed;
    --radius-md: .6rem;
    --radius-lg: .9rem;
    --storefront-label: .875rem;
    --storefront-detail: .8125rem;
    font-family: var(--font-storefront);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
}

.storefront-shell ::selection { color: var(--ink); background: #cde3fc; }
.storefront-shell :is(input, textarea) { caret-color: var(--accent); }
.storefront-shell :is(button, input, textarea, select) { font-family: inherit; }
.storefront-shell :is(h1, h2, h3) { text-wrap: balance; }
.storefront-shell .page-heading { align-items: flex-start; margin-bottom: 1.75rem; }
.storefront-shell .page-heading > div { min-width: 0; }
.storefront-shell .page-heading h1,
.storefront-shell .login-card h1,
.storefront-shell .success-card h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.storefront-shell :is(.panel, .checkout-form, .order-summary, .cart-items-heading) h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.025em;
}
.storefront-shell .eyebrow { font-weight: 600; letter-spacing: .08em; }

.storefront-shell .button {
    min-height: 3rem;
    padding: .75rem 1.15rem;
    border-radius: var(--radius-md);
    font-size: var(--storefront-label);
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
}
.storefront-shell .button-secondary { border-color: var(--line-strong); }
.storefront-shell .button-secondary:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--surface); }
.storefront-shell .button:disabled { color: #4d5c70; background: #e3eaf2; }
.storefront-shell .button-wide { padding: .9rem 1.15rem; }
.storefront-shell .text-link { font-size: var(--storefront-label); font-weight: 600; }

.storefront-shell :is(.cart-card, .checkout-form, .order-summary, .login-card, .success-card, .panel, .empty-state) {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.storefront-shell :is(.cart-card, .checkout-form, .order-summary) { padding: clamp(1.25rem, 2.5vw, 2rem); }
.storefront-shell .login-card { width: min(32rem, 100%); padding: clamp(1.5rem, 4vw, 2.5rem); }
.storefront-shell .login-card > p:not(.eyebrow, .error) { font-size: .9375rem; line-height: 1.65; }
.storefront-shell .field { margin: 1.25rem 0; }
.storefront-shell :is(.field label, .promotion-entry label) {
    margin-bottom: .5rem;
    font-size: var(--storefront-label);
    font-weight: 600;
    line-height: 1.5;
}
.storefront-shell .field :is(input, textarea, select),
.storefront-shell .promotion-entry input,
.storefront-shell .alias-form input {
    min-height: 3rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--ink);
    background: var(--panel);
    font-size: 1rem;
    line-height: 1.5;
}
.storefront-shell .field :is(input, textarea, select):focus,
.storefront-shell .promotion-entry input:focus,
.storefront-shell .alias-form input:focus { border-color: var(--accent); }
.storefront-shell .field :is(input, textarea, select).invalid { border-color: var(--danger); }
.storefront-shell .promotion-entry,
.storefront-shell .promotion-entry-row { min-width: 0; }
.storefront-shell .promotion-entry-row { flex-wrap: wrap; gap: .5rem; }
.storefront-shell .promotion-entry-row input { flex: 1 1 8rem; width: 100%; min-width: 0; }
.storefront-shell .promotion-entry-row .button { flex: 0 0 auto; }
.storefront-shell :is(.field small, .promotion-entry small, .summary-line small, .summary-note, .submit-note, .cart-summary-note, .form-heading p) {
    font-size: var(--storefront-detail);
    line-height: 1.6;
}
.storefront-shell .field small { display: block; margin-top: .4rem; }
.storefront-shell .check { align-items: flex-start; padding: 1rem; font-size: var(--storefront-label); line-height: 1.6; }
.storefront-shell .check input { margin-top: .2rem; }
.storefront-shell :is(.validation-message, .validation-summary-errors, .error) { font-size: var(--storefront-label); font-weight: 600; }
.storefront-shell .purchase-steps { font-size: var(--storefront-label); }
.storefront-shell .purchase-steps span { font-family: inherit; font-variant-numeric: tabular-nums; }
.storefront-shell .form-heading { gap: .9rem; padding-bottom: 1.25rem; }
.storefront-shell .step-number { font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.storefront-shell .order-summary > div:not(.summary-heading) { padding-top: 1rem; padding-bottom: 1rem; font-size: var(--storefront-label); }
.storefront-shell .summary-heading { padding-bottom: .9rem; }
.storefront-shell .summary-heading span { font-family: inherit; font-size: var(--storefront-detail); }
.storefront-shell :is(.product-price, .cart-line-total, .quantity-control output, .order-summary, .account-balance, .credit-table) { font-variant-numeric: tabular-nums; }
.storefront-shell .cart-line-main strong { font-size: 1rem; font-weight: 700; }
.storefront-shell .cart-product > div > span { margin-top: .2rem; font-size: var(--storefront-detail); }
.storefront-shell .cart-line-total { font-size: 1rem; }
.storefront-shell .quantity-control output { font-size: .9375rem; font-weight: 600; }
.storefront-shell .remove-button { font-size: var(--storefront-detail); font-weight: 500; }
.storefront-shell .payment-method { font-size: var(--storefront-label); line-height: 1.6; }

@media (max-width: 760px) {
    .storefront-shell .page-heading { margin-bottom: 1.5rem; }
    .storefront-shell .purchase-steps { gap: .75rem 1.25rem; font-size: var(--storefront-detail); }
    .storefront-shell .field-row { gap: .75rem; }
}