.order-page { padding-top: 2rem; }
.order-page h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.product { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.product h2 { margin: 0 0 1.5rem; font-size: 1.5rem; }
.variant + .variant { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.5rem; }
.variant h3 { font-size: 1rem; margin: 0 0 .75rem; }
.variant label { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.order-page button, .order-page select { font: inherit; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: var(--surface); }
.order-page select { min-width: 70px; }
.order-page button { cursor: pointer; }
.order-page button:disabled { opacity: .55; cursor: default; }
.order-page button:focus-visible, .order-page select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.order-page .add, #review-order { width: 100%; background: var(--brand); border-color: transparent; }
.order-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.order-actions { display: flex; gap: .5rem; }
#order-review { margin-top: 1.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
@media(max-width: 40rem) { .products { grid-template-columns: 1fr; } }
.contact-fields { border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; display: grid; gap: 1rem; background: var(--surface); }
.contact-fields legend { font-family: Georgia, serif; font-size: 1.5rem; }
.contact-fields label, .schedule-date { display: grid; gap: .5rem; }
.contact-fields input, .schedule-date input { width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .75rem; }
#schedule-form { padding-bottom: 2rem; }
#submit-order { background: var(--brand); width: 100%; }
.pickup-slots { border: 0; padding: 0; margin-top: 1.5rem; }
#pickup-slots { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
#pickup-slots label { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); cursor: pointer; }
#pickup-slots label:has(input:checked) { background: var(--brand); }
#pickup-slots label:has(input:disabled) { opacity: .6; cursor: default; }
#pickup-slots input { accent-color: var(--accent); width: 1.25rem; height: 1.25rem; }
#reset-demo { margin-bottom: 2rem; }
/* Catalog and basket stay separate as the menu grows. */
.shop-layout { display:grid; grid-template-columns:minmax(0,1fr) 21rem; align-items:start; gap:2rem; margin-top:2rem; }
.products { margin:0; gap:1rem; }
.product { min-width:0; scroll-margin-top:1rem; }
.product h2 { margin-bottom:.8rem; }
.product-description { color:var(--muted); margin:0 0 1.5rem; }
.product-photo { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:.6rem; margin-bottom:1rem; }
.basket { background:#fff; border:1px solid var(--line); border-radius:1rem; padding:1.5rem; position:sticky; top:1rem; }
.basket h2 { font-size:1.5rem; margin:0 0 1rem; }
.order-line { display:grid; }
.order-actions { align-items:center; }
.order-actions button { font-size:.875rem; border-color:transparent; text-decoration:underline; color:var(--accent); }
.pickup-note { color:var(--accent); font-size:.95rem; }
.checkout-steps { display:flex; flex-wrap:wrap; gap:1rem 2rem; padding:1rem 0; border-block:1px solid var(--line); color:var(--muted); font-size:.875rem; }
.checkout-steps [aria-current] { color:var(--accent); font-weight:bold; }
#order-notice { font-size:.875rem; }
.order-page button:hover:not(:disabled) { background:#ffe9f1; }
@media(max-width:65rem) { .products { grid-template-columns:1fr; } .shop-layout { grid-template-columns:minmax(0,1fr) 20rem; } }
@media(max-width:45rem) { .shop-layout { grid-template-columns:1fr; gap:1rem; } .basket { position:static; } }

.product-price{margin:6px 0 12px;font-weight:600}.order-total{font-weight:700;font-size:1.15rem;border-top:1px solid #dfa5bc;padding-top:16px}