@wix/agent-skills 1.9.0 → 1.11.0

package/skills/wix-headless/references/astro/templates/bookings/AvailabilityCalendar.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { availabilityTimeSlots, eventTimeSlots } from "@wix/bookings";
 import type { SelectedSlot } from "./bookingDriver";
+import { STAFF_MEMBER_RESOURCE_TYPE_ID } from "./bookingDriver";
 
 // AvailabilityCalendar.tsx — client:only="react" island. A week calendar: a
 // 7-day strip with week navigation, then the picked day's time slots. This is
@@ -16,18 +17,55 @@ import type { SelectedSlot } from "./bookingDriver";
 //                 a single GUID string; slots carry scheduleId).
 //   CLASS       → eventTimeSlots.listEventTimeSlots() (serviceIds is an array;
 //                 slots carry eventInfo.eventId and NO scheduleId).
+//
+// LOCATION SCOPING (multi-location): listAvailabilityTimeSlots returns one slot
+// PER LOCATION per time — "if locations is not specified, returns time slots for
+// all locations where the service is available". A service offered at >1 location
+// therefore yields DUPLICATE same-time rows unless the call is scoped to a single
+// location. So availability is ALWAYS scoped to one business location: the picker
+// below defaults to the carried/first location and the call always passes a
+// single-element `locations` filter. (One location per availability call — the
+// same single-location guarantee the location-first SoT gets from its selector.)
+//
+// STAFF: a single slot carries multiple staff in availableResources, so staff is
+// a per-slot dropdown — it never multiplies rows. Only location multiplies rows.
 // Re-export SelectedSlot from bookingDriver so the form/driver share one shape.
 export type { SelectedSlot } from "./bookingDriver";
 
+// A staff member as carried on the service (service.staffMemberDetails.staffMembers[]),
+// fetched via conditionalFields:["STAFF_MEMBER_DETAILS"]. NOTE: the id field is
+// `staffMemberId` which — despite the name — IS the resource id (it matches the
+// service's staffMemberIds and the Staff Members API resourceId). That id is what
+// filters availability and books the resource.
+export interface StaffMemberOption {
+  staffMemberId?: string;
+  name?: string;
+}
+
+// A business location the service is offered at (derived from service.locations[]).
+export interface LocationOption {
+  _id: string;
+  name?: string;
+}
+
 interface Props {
   serviceId: string;
   serviceName: string;
   serviceType: "APPOINTMENT" | "CLASS";
+  staffMembers?: StaffMemberOption[];
+  locations?: LocationOption[]; // business locations the service offers
+  locationId?: string; // the location chosen on the catalog (the default scope), if any
   onSlotSelected: (slot: SelectedSlot) => void;
 }
 
+interface FetchOpts {
+  resourceId?: string; // a staff resource id to filter by (omit for "any staff")
+  locationId?: string; // a business location id to scope to (omit only when the service has none)
+}
+
 const DAY_MS = 86_400_000;
 const HORIZON_WEEKS = 13; // how far "check next availability" probes forward
+const ANY_STAFF = ""; // the "any staff member" sentinel for the select value
 
 const pad = (n: number) => String(n).padStart(2, "0");
 // Local date string YYYY-MM-DDThh:mm:ss (no Z) — availability expects local time.
@@ -52,6 +90,7 @@ const fetchWeek = async (
   serviceId: string,
   serviceType: "APPOINTMENT" | "CLASS",
   weekStart: Date,
+  opts: FetchOpts = {},
 ): Promise<Record<string, SelectedSlot[]>> => {
   const from = startOfDay(weekStart);
   const to = new Date(from.getTime() + 7 * DAY_MS);
@@ -59,6 +98,11 @@ const fetchWeek = async (
   let raw: any[] = [];
 
   if (serviceType === "CLASS") {
+    // CLASS filters via eventFilter: staff by resources.id ($hasSome), location by
+    // location.id (a bare array, NOT a $hasSome operator).
+    const eventFilter: Record<string, any> = {};
+    if (opts.resourceId) eventFilter["resources.id"] = { $hasSome: [opts.resourceId] };
+    if (opts.locationId) eventFilter["location.id"] = [opts.locationId];
     const result = await eventTimeSlots.listEventTimeSlots({
       serviceIds: [serviceId], // CLASS API takes an array
       fromLocalDate: localDateString(from),
@@ -66,6 +110,7 @@ const fetchWeek = async (
       timeZone,
       includeNonBookable: false,
       cursorPaging: { limit: 100 },
+      ...(Object.keys(eventFilter).length ? { eventFilter } : {}),
     });
     raw = (result.timeSlots ?? []).map((s: any) => ({
       serviceType: "CLASS" as const,
@@ -76,6 +121,8 @@ const fetchWeek = async (
       eventId: s.eventInfo?.eventId, // session id — no scheduleId on event slots
     }));
   } else {
+    // APPOINTMENT filters staff via resourceTypes (resourceIds), location via locations[].
+    // Scoping to a single location collapses the per-location duplicate rows.
     const result = await availabilityTimeSlots.listAvailabilityTimeSlots({
       serviceId, // single GUID string — NOT an array
       fromLocalDate: localDateString(from),
@@ -83,6 +130,17 @@ const fetchWeek = async (
       timeZone,
       bookable: true,
       cursorPaging: { limit: 100 },
+      ...(opts.resourceId
+        ? {
+            resourceTypes: [
+              { resourceTypeId: STAFF_MEMBER_RESOURCE_TYPE_ID, resourceIds: [opts.resourceId] },
+            ],
+            includeResourceTypeIds: [STAFF_MEMBER_RESOURCE_TYPE_ID],
+          }
+        : {}),
+      ...(opts.locationId
+        ? { locations: [{ _id: opts.locationId, locationType: "BUSINESS" as const }] }
+        : {}),
     });
     raw = (result.timeSlots ?? []).map((s: any) => ({
       serviceType: "APPOINTMENT" as const,
@@ -104,13 +162,46 @@ const fetchWeek = async (
   return byDay;
 };
 
-export default function AvailabilityCalendar({ serviceId, serviceName, serviceType, onSlotSelected }: Props) {
+export default function AvailabilityCalendar({
+  serviceId,
+  serviceName,
+  serviceType,
+  staffMembers,
+  locations,
+  locationId,
+  onSlotSelected,
+}: Props) {
   const thisMonday = useMemo(() => mondayOf(new Date()), []);
   const [weekStart, setWeekStart] = useState<Date>(thisMonday);
   const [byDay, setByDay] = useState<Record<string, SelectedSlot[]>>({});
   const [selectedDay, setSelectedDay] = useState<string | null>(null);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const [status, setStatus] = useState<"loading" | "ready" | "error" | "searching">("loading");
+  // The chosen staff resource id ("" = any staff member → ANY_RESOURCE fallback).
+  const [selectedResource, setSelectedResource] = useState<string>(ANY_STAFF);
+
+  // Staff options keyed by resource id; picker shown only when >1 staff.
+  const staffOptions = useMemo(
+    () =>
+      (staffMembers ?? [])
+        .map((s) => ({ id: s.staffMemberId ?? "", name: s.name ?? "Staff member" }))
+        .filter((s) => s.id),
+    [staffMembers],
+  );
+  const showStaffPicker = staffOptions.length > 1;
+
+  // Business-location options. Availability is always scoped to ONE of these (the
+  // carried location if it's one of them, else the first), so multi-location
+  // services don't return duplicate per-location rows. Picker shown only when >1.
+  const locationOptions = useMemo(
+    () => (locations ?? []).filter((l) => l._id),
+    [locations],
+  );
+  const [selectedLocation, setSelectedLocation] = useState<string>(() => {
+    if (locationId && locationOptions.some((l) => l._id === locationId)) return locationId;
+    return locationOptions[0]?._id ?? "";
+  });
+  const showLocationPicker = locationOptions.length > 1;
 
   const days = useMemo(
     () => Array.from({ length: 7 }, (_, i) => new Date(weekStart.getTime() + i * DAY_MS)),
@@ -118,10 +209,18 @@ export default function AvailabilityCalendar({ serviceId, serviceName, serviceTy
   );
   const atFirstWeek = weekStart.getTime() <= thisMonday.getTime();
 
+  const fetchOpts = useCallback(
+    (): FetchOpts => ({
+      resourceId: selectedResource || undefined,
+      locationId: selectedLocation || undefined,
+    }),
+    [selectedResource, selectedLocation],
+  );
+
   const load = useCallback(async (start: Date) => {
     setStatus("loading"); setSelectedKey(null);
     try {
-      const grouped = await fetchWeek(serviceId, serviceType, start);
+      const grouped = await fetchWeek(serviceId, serviceType, start, fetchOpts());
       setByDay(grouped);
       const firstDayWithSlots = Object.keys(grouped).sort()[0] ?? null;
       setSelectedDay(firstDayWithSlots);
@@ -130,8 +229,9 @@ export default function AvailabilityCalendar({ serviceId, serviceName, serviceTy
       console.error("[availability] list failed:", err);
       setStatus("error");
     }
-  }, [serviceId, serviceType]);
+  }, [serviceId, serviceType, fetchOpts]);
 
+  // Reload whenever the week OR the staff/location filter changes.
   useEffect(() => { void load(weekStart); }, [weekStart, load]);
 
   const shiftWeek = (deltaWeeks: number) =>
@@ -143,7 +243,7 @@ export default function AvailabilityCalendar({ serviceId, serviceName, serviceTy
     let cursor = new Date(weekStart.getTime() + 7 * DAY_MS);
     for (let i = 0; i < HORIZON_WEEKS; i++) {
       try {
-        const grouped = await fetchWeek(serviceId, serviceType, cursor);
+        const grouped = await fetchWeek(serviceId, serviceType, cursor, fetchOpts());
         if (Object.keys(grouped).length > 0) {
           setWeekStart(cursor); // triggers load() via the effect
           return;
@@ -152,13 +252,18 @@ export default function AvailabilityCalendar({ serviceId, serviceName, serviceTy
       cursor = new Date(cursor.getTime() + 7 * DAY_MS);
     }
     setStatus("ready"); // nothing found within the horizon
-  }, [serviceId, serviceType, weekStart]);
+  }, [serviceId, serviceType, weekStart, fetchOpts]);
 
   const handleSelect = (s: SelectedSlot) => {
     const id = s.serviceType === "CLASS" ? s.eventId : s.scheduleId;
     if (!s.localStartDate || !id) return;
     setSelectedKey(`${s.localStartDate}|${id}`);
-    onSlotSelected(s);
+    // When a specific staff was chosen, record it on the slot so the booking books
+    // that resource; otherwise the driver emits the ANY_RESOURCE fallback.
+    const chosen = selectedResource
+      ? staffOptions.find((o) => o.id === selectedResource)
+      : null;
+    onSlotSelected(chosen ? { ...s, resource: { _id: chosen.id, name: chosen.name } } : s);
   };
 
   const weekLabel = `${days[0].toLocaleDateString([], { month: "short", day: "numeric" })} – ${days[6].toLocaleDateString([], { month: "short", day: "numeric" })}`;
@@ -167,6 +272,42 @@ export default function AvailabilityCalendar({ serviceId, serviceName, serviceTy
 
   return (
     <div className="availability-calendar">
+      {(showLocationPicker || showStaffPicker) && (
+        <div className="availability-filters">
+          {showLocationPicker && (
+            <div className="availability-staff">
+              <label className="availability-staff-label" htmlFor="location-select">Location</label>
+              <select
+                id="location-select"
+                className="availability-staff-select"
+                value={selectedLocation}
+                onChange={(e) => { setSelectedLocation(e.target.value); setSelectedKey(null); }}
+              >
+                {locationOptions.map((o) => (
+                  <option key={o._id} value={o._id}>{o.name ?? "Location"}</option>
+                ))}
+              </select>
+            </div>
+          )}
+          {showStaffPicker && (
+            <div className="availability-staff">
+              <label className="availability-staff-label" htmlFor="staff-select">Staff member</label>
+              <select
+                id="staff-select"
+                className="availability-staff-select"
+                value={selectedResource}
+                onChange={(e) => { setSelectedResource(e.target.value); setSelectedKey(null); }}
+              >
+                <option value={ANY_STAFF}>Any staff member</option>
+                {staffOptions.map((o) => (
+                  <option key={o.id} value={o.id}>{o.name}</option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="availability-week-nav">
         <button type="button" className="availability-nav-btn" onClick={() => shiftWeek(-1)} disabled={atFirstWeek} aria-label="Previous week">← Prev week</button>
         <span className="availability-week-label">{weekLabel}</span>

package/skills/wix-headless/references/astro/templates/bookings/ServiceBookingFlow.tsx

@@ -1,13 +1,16 @@
 import { useState } from "react";
-import AvailabilityCalendar from "./AvailabilityCalendar";
+import AvailabilityCalendar, { type StaffMemberOption, type LocationOption } from "./AvailabilityCalendar";
 import BookingForm, { type BookingFormField } from "./BookingForm";
 import type { SelectedSlot } from "./bookingDriver";
 
 // ServiceBookingFlow.tsx — client:only="react" coordinator island. Holds the
 // selected-slot state shared between the calendar and the form, transitions
 // between them, and redirects to the confirmation page on success. The SSR
-// detail page passes the full `service` (the driver reads its payment/policy)
-// and the booking-form `fields` (the @wix/forms schema) through to the form.
+// detail page passes the full `service` (the driver reads its payment/policy),
+// the booking-form `fields` (the @wix/forms schema), the service's `staffMembers`
+// (for the optional staff picker), the service's business `locations` + the
+// catalog-chosen `locationId` (so the calendar scopes availability to one
+// location — see AvailabilityCalendar) through to the calendar.
 //
 // This is the framework-agnostic flow shape (a step coordinator + shared
 // selection state). On another framework, the same two steps + shared state can
@@ -18,9 +21,20 @@ interface Props {
   serviceName: string;
   serviceType: "APPOINTMENT" | "CLASS";
   fields: BookingFormField[];
+  staffMembers?: StaffMemberOption[];
+  locations?: LocationOption[];
+  locationId?: string;
 }
 
-export default function ServiceBookingFlow({ service, serviceName, serviceType, fields }: Props) {
+export default function ServiceBookingFlow({
+  service,
+  serviceName,
+  serviceType,
+  fields,
+  staffMembers,
+  locations,
+  locationId,
+}: Props) {
   const [selectedSlot, setSelectedSlot] = useState<SelectedSlot | null>(null);
 
   const handleSuccess = (_orderId: string, startDate?: string) => {
@@ -36,6 +50,9 @@ export default function ServiceBookingFlow({ service, serviceName, serviceType,
         serviceId={service._id}
         serviceName={serviceName}
         serviceType={serviceType}
+        staffMembers={staffMembers}
+        locations={locations}
+        locationId={locationId}
         onSlotSelected={setSelectedSlot}
       />
     );

package/skills/wix-headless/references/astro/templates/bookings/ServiceCard.astro

@@ -14,12 +14,21 @@ interface Props {
   currency?: string;
   imageUrl?: string;
   type: "APPOINTMENT" | "CLASS";
+  locationId?: string; // when a location is selected on the catalog, carry it to the detail page
+  locationType?: string;
 }
 
-const { slug, name, tagLine, durationMinutes, price, imageUrl } = Astro.props;
+const { slug, name, tagLine, durationMinutes, price, imageUrl, locationId, locationType } = Astro.props;
+
+// Carry the selected location into the detail page so availability is scoped to it.
+const q = new URLSearchParams();
+if (locationId) q.set("locationId", locationId);
+if (locationType) q.set("locationType", locationType);
+const qs = q.toString();
+const href = qs ? `/services/${slug}?${qs}` : `/services/${slug}`;
 ---
 
-<a href={`/services/${slug}`} class="service-card">
+<a href={href} class="service-card">
   {
     imageUrl ? (
       <div class="service-card-image">

package/skills/wix-headless/references/astro/templates/bookings/booking-confirmation.astro

@@ -19,29 +19,29 @@ const formattedDate = startDateParam
 <!-- `max-w-prose` (built-in literal = 65ch), not a bare max-w-<size> that could
      collapse to the spacing scale. -->
 <Layout title="Booking confirmed">
-  <section class="max-w-prose mx-auto px-lg py-4xl text-center">
-    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-xl"
+  <section class="max-w-prose mx-auto px-6 py-24 text-center">
+    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-8"
          style="background-color: var(--color-accent);" aria-hidden="true">
       <span class="text-2xl" style="color: var(--color-paper);">✓</span>
     </div>
-    <hr class="editorial-rule w-16 mx-auto mb-lg" />
-    <h1 class="font-display text-4xl md:text-5xl leading-tight mb-md">Thank you for booking</h1>
+    <hr class="editorial-rule w-16 mx-auto mb-6" />
+    <h1 class="font-display text-4xl md:text-5xl leading-tight mb-4">Thank you for booking</h1>
 
     {
       formattedDate ? (
-        <p class="text-lg text-mute leading-relaxed mb-md">
+        <p class="text-lg text-mute leading-relaxed mb-4">
           Your spot in <strong class="text-ink">{serviceName}</strong> is <strong class="text-ink">confirmed</strong> for{" "}
           <strong class="text-ink">{formattedDate}</strong>. We've sent the details to your email.
         </p>
       ) : (
-        <p class="text-lg text-mute leading-relaxed mb-md">
+        <p class="text-lg text-mute leading-relaxed mb-4">
           Your booking for <strong class="text-ink">{serviceName}</strong> is <strong class="text-ink">confirmed</strong>. We've sent the details to your email.
         </p>
       )
     }
 
-    <div class="flex flex-col gap-md items-center">
-      <a href="/services" class="inline-block font-display text-base px-xl py-md rounded-sm"
+    <div class="flex flex-col gap-4 items-center">
+      <a href="/services" class="inline-block font-display text-base px-8 py-4 rounded-sm"
          style="background-color: var(--color-accent); color: var(--color-paper);">Browse more services</a>
       <a href="/" class="text-sm text-mute hover:text-ink">Return home</a>
     </div>

package/skills/wix-headless/references/astro/templates/bookings/components-bookings.css

@@ -7,7 +7,8 @@
  *
  * Class groups:
  * - .service-card / .service-grid / .service-card-*  → ServiceCard.astro, services/index.astro
- * - .availability-* / .time-slot*                    → AvailabilityCalendar.tsx (week calendar + slots)
+ * - .booking-filter-bar / .booking-filter-chip*      → services/index.astro (location + category filters)
+ * - .availability-* / .time-slot*                    → AvailabilityCalendar.tsx (week calendar, slots, staff picker)
  * - .booking-*                                        → BookingForm.tsx (schema-driven form)
  *
  * Primary actions (a selected slot, the confirm button) use var(--color-accent)
@@ -21,7 +22,7 @@
 .service-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--spacing-xl);
+  gap: 2rem;
   transition: opacity 200ms ease;
 }
 body[data-navigating="true"] .service-grid {
@@ -63,8 +64,8 @@ body[data-navigating="true"] .service-grid {
 .service-card-meta {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
+  gap: 0.5rem;
+  padding: 1rem 1rem 1.5rem;
   flex: 1;
 }
 .service-card-name {
@@ -84,32 +85,99 @@ body[data-navigating="true"] .service-grid {
 .service-card-price {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
   margin-top: auto;
-  padding-top: var(--spacing-sm);
+  padding-top: 0.75rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--color-mute);
 }
 .service-card-price span + span::before {
   content: "·";
-  padding-right: var(--spacing-sm);
+  padding-right: 0.75rem;
   color: var(--color-rule);
 }
 
+/* ── Catalog filters (location + category) ──────────────────────────────────── */
+.booking-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+.booking-filter-chip {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-pill, 999px);
+  background: var(--color-paper, var(--color-cream));
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+.booking-filter-chip:hover {
+  border-color: var(--color-ink);
+}
+.booking-filter-chip--active {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-paper);
+}
+
 /* ── Availability — week calendar ───────────────────────────────────────────── */
 .availability-calendar {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
+  gap: 1.5rem;
+}
+
+/* Filter row — holds the optional location + staff pickers side by side. */
+.availability-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.availability-filters > * {
+  flex: 1 1 12rem;
+}
+
+/* Location / staff picker (shown only when there's >1 option). */
+.availability-staff {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.availability-staff-label {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-ink-soft, var(--color-mute));
+}
+.availability-staff-select {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  background: var(--color-paper, var(--color-cream));
+  color: var(--color-ink);
+  box-sizing: border-box;
+}
+.availability-staff-select:focus {
+  outline: none;
+  border-color: var(--color-accent);
 }
 
 .availability-week-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm) 0;
+  gap: 1rem;
+  padding: 0.75rem 0;
   border-bottom: 1px solid var(--color-rule);
 }
 .availability-week-label {
@@ -121,7 +189,7 @@ body[data-navigating="true"] .service-grid {
 }
 
 .availability-nav-btn {
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   background: transparent;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-sm);
@@ -144,14 +212,14 @@ body[data-navigating="true"] .service-grid {
 .availability-day-strip {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .availability-day {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
-  padding: var(--spacing-sm) 0;
+  padding: 0.75rem 0;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-sm);
   background: var(--color-paper, var(--color-cream));
@@ -189,7 +257,7 @@ body[data-navigating="true"] .service-grid {
 .availability-slots {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .availability-loading,
 .availability-empty,
@@ -197,14 +265,14 @@ body[data-navigating="true"] .service-grid {
   font-family: var(--font-body);
   font-size: 0.9375rem;
   color: var(--color-ink-soft, var(--color-mute));
-  padding: var(--spacing-lg) 0;
+  padding: 1.5rem 0;
   text-align: center;
 }
 .availability-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--spacing-md);
+  gap: 1rem;
 }
 .availability-error {
   color: var(--color-error, var(--color-accent));
@@ -212,7 +280,7 @@ body[data-navigating="true"] .service-grid {
 
 /* ── Time-slot buttons ──────────────────────────────────────────────────────── */
 .time-slot {
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-sm);
   background: var(--color-paper, var(--color-cream));
@@ -245,8 +313,8 @@ body[data-navigating="true"] .service-grid {
 .booking-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
-  padding: var(--spacing-xl);
+  gap: 1.5rem;
+  padding: 2rem;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-md);
   background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
@@ -255,8 +323,8 @@ body[data-navigating="true"] .service-grid {
 .booking-form-summary {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
-  padding-bottom: var(--spacing-md);
+  gap: 0.5rem;
+  padding-bottom: 1rem;
   border-bottom: 1px solid var(--color-rule);
 }
 .booking-form-summary strong {
@@ -271,7 +339,7 @@ body[data-navigating="true"] .service-grid {
 }
 .booking-form-change {
   align-self: flex-start;
-  margin-top: var(--spacing-xs);
+  margin-top: 0.5rem;
   background: none;
   border: none;
   padding: 0;
@@ -288,7 +356,7 @@ body[data-navigating="true"] .service-grid {
 .booking-field {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: 0.5rem;
 }
 .booking-label {
   font-family: var(--font-display);
@@ -303,7 +371,7 @@ body[data-navigating="true"] .service-grid {
 
 .booking-input {
   width: 100%;
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   font-family: var(--font-body);
   font-size: 0.9375rem;
   border: 1px solid var(--color-rule);
@@ -326,7 +394,7 @@ textarea.booking-input {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--color-error, var(--color-accent));
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   border: 1px solid var(--color-error, var(--color-accent));
   border-radius: var(--radius-sm);
 }
@@ -336,7 +404,7 @@ textarea.booking-input {
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: var(--spacing-md) var(--spacing-xl);
+  padding: 1rem 2rem;
   font-family: var(--font-display);
   font-size: 0.9375rem;
   font-weight: 500;