@wix/agent-skills 1.8.0 → 1.10.0

package/skills/wix-headless/references/astro/templates/bookings/services/[slug].astro

@@ -5,26 +5,83 @@ import Layout from "../../layouts/Layout.astro";
 import SeoTags from "../../components/SeoTags.astro";
 import ServiceBookingFlow from "../../components/ServiceBookingFlow";
 import { services } from "@wix/bookings";
+import { forms } from "@wix/forms";
 import { auth } from "@wix/essentials";
 
+const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
 const { slug } = Astro.params;
 
+// Carried from the catalog's location selector (when the site has >1 location):
+// the default location the availability picker scopes to. Absent on single-location
+// sites (and on deep links — the picker then defaults to the service's first location).
+const reqUrl = new URL(Astro.request.url);
+const locationId = reqUrl.searchParams.get("locationId") ?? undefined;
+
 let service: any = null;
 try {
-  // Ambient SSR via @wix/essentials; query BUILDER (object form returns 0).
-  // Fetch the small catalog and match the slug in JS (robust without a
-  // nested-field `mainSlug.name` builder filter).
-  const result = await auth.elevate(services.queryServices)().limit(100).find();
-  service =
-    (result.items ?? []).find(
-      (s: any) => (s.mainSlug?.name ?? s.supportedSlugs?.[0]?.name) === slug,
-    ) ?? null;
+  // Ambient SSR via @wix/essentials. Single service by slug: the .eq() builder
+  // chain on mainSlug.name + appId (the form the @wix/bookings SDK expects).
+  const result = await auth
+    .elevate(services.queryServices)({ conditionalFields: ["STAFF_MEMBER_DETAILS"] })
+    .eq("mainSlug.name", slug)
+    .eq("appId", BOOKING_APP_ID)
+    .limit(1)
+    .find();
+  service = result.items?.[0] ?? null;
 } catch (err) {
   console.error(`[services/${slug}] detail query failed:`, err);
 }
 
 if (!service) return Astro.redirect("/services", 302);
 
+// Booking-form SCHEMA — the form belongs to the service (service.form._id) in the
+// bookings namespace. Read it server-side and pass the field list to the island.
+// Same renderer the forms vertical uses (references/astro/forms/CONTACT_FORM.md):
+// keep the field's `target` — that is the key createBooking expects in formSubmission.
+let formFields: any[] = [];
+try {
+  const formId = service.form?._id;
+  if (formId) {
+    const res: any = await auth.elevate(forms.getForm)(formId);
+    const form = res?.form ?? res;
+    // Only render field types we can submit as a simple value. Skip complex,
+    // object-valued fields (e.g. a multi-line ADDRESS) — they carry no string
+    // `componentType`, and sending a string for them fails createBooking with
+    // "must be object". The booking enforces only the contact basics
+    // (first_name/last_name/email), so skipping optional complex fields is safe.
+    const RENDERABLE = ["TEXT_INPUT", "PHONE_INPUT", "DROPDOWN"];
+    formFields = (form?.formFields ?? [])
+      .filter(
+        (f: any) =>
+          f.fieldType === "INPUT" &&
+          !f.hidden &&
+          RENDERABLE.includes(f.inputOptions?.stringOptions?.componentType),
+      )
+      .map((f: any) => {
+        const opts = f.inputOptions;
+        const str = opts?.stringOptions;
+        const label =
+          str?.textInputOptions?.label ??
+          str?.dropdownOptions?.label ??
+          str?.phoneInputOptions?.label ??
+          "";
+        return {
+          label,
+          target: opts?.target ?? "",
+          required: opts?.required ?? false,
+          componentType: str?.componentType ?? "TEXT_INPUT",
+          identifier: f.identifier ?? "",
+          options: str?.dropdownOptions?.options?.map((o: any) => ({
+            value: o.value ?? o.label ?? "",
+            label: o.label ?? o.value ?? "",
+          })),
+        };
+      });
+  }
+} catch (err) {
+  console.error(`[services/${slug}] booking form schema failed:`, err);
+}
+
 const formatPrice = (p: any): string | undefined => {
   if (!p || p.rateType === "NO_FEE") return undefined;
   if (p.rateType === "FIXED" && p.fixed?.price) {
@@ -39,41 +96,79 @@ const duration = service.schedule?.availabilityConstraints?.sessionDurations?.[0
 const imageUrl = service.media?.mainMedia?.image?.url ?? service.media?.items?.[0]?.image?.url;
 const serviceName = service.name ?? "Service";
 const seoTags = service.seoData?.tags ?? [];
+
+// Staff for the optional staff picker — carried on the service via the
+// STAFF_MEMBER_DETAILS conditional field (already requested in the query above).
+// Each entry is { staffMemberId, name } — `staffMemberId` is, despite the name,
+// the resource id (the calendar filters availability + books by it). The calendar
+// shows the picker only when there is more than one; empty/absent → "any staff
+// member" (the ANY_RESOURCE fallback).
+const staffMembers = service.staffMemberDetails?.staffMembers ?? [];
+
+// Business locations the service is offered at — sourced from `queryLocations()`
+// (the site's real business locations, whose ids the availability engine
+// recognizes), intersected with the service's own location ids. Availability is
+// scoped to one of these so a multi-location service doesn't return duplicate
+// per-location time slots (listAvailabilityTimeSlots returns one slot per location
+// otherwise). Source from `queryLocations()`, NOT from `service.locations` alone:
+// a service's location entry can carry an id the availability engine doesn't
+// recognize, and scoping to it returns zero slots. When the site has no business
+// locations this resolves to [] and the calendar fetches unscoped.
+let serviceLocations: { _id: string; name?: string }[] = [];
+try {
+  const locResult: any = await auth.elevate(services.queryLocations)();
+  const businessLocations = locResult?.businessLocations?.locations ?? [];
+  const serviceLocationIds = new Set(
+    (service.locations ?? [])
+      .filter((l: any) => (l.type ?? "BUSINESS") === "BUSINESS")
+      .map((l: any) => l.business?._id ?? l._id)
+      .filter(Boolean),
+  );
+  serviceLocations = businessLocations
+    .filter((l: any) => serviceLocationIds.has(l._id))
+    .map((l: any) => ({ _id: l._id, name: l.business?.name ?? "Location" }));
+} catch (err) {
+  console.error(`[services/${slug}] queryLocations failed:`, err);
+}
 ---
 
 <!--
-  Width: use `container-reading` (max-width: var(--container-prose) + auto margins),
-  NOT a bare `max-w-<size>` — in this Tailwind v4 setup an un-emitted max-w-<size>
-  key falls back to the spacing scale (e.g. max-w-4xl → ~7rem, one word per line).
+  Width: use `container-reading` (max-width: var(--container-prose) + auto margins)
+  for a deliberate prose measure. Bare `max-w-<size>` keys resolve to Tailwind's
+  --container-* scale, which is wider than ideal for reading text.
 -->
 <Layout title={serviceName} description={service.tagLine ?? service.description}>
   <SeoTags tags={seoTags} slot="head" />
-  <section class="container-reading px-lg py-4xl">
-    <a href="/services" class="inline-block text-sm text-mute hover:text-ink mb-xl">← All services</a>
+  <section class="container-reading px-6 py-24">
+    <a href="/services" class="inline-block text-sm text-mute hover:text-ink mb-8">← All services</a>
 
     <!-- Optional banner image — only when the service has media (image-less is the
          common seed case; rendering a fixed placeholder collapses the layout). -->
     {imageUrl && (
-      <img src={imageUrl} alt={serviceName} class="w-full h-64 object-cover rounded-lg mb-xl" />
+      <img src={imageUrl} alt={serviceName} class="w-full h-64 object-cover rounded-lg mb-8" />
     )}
 
-    <div class="flex flex-col gap-md mb-3xl">
+    <div class="flex flex-col gap-4 mb-16">
       <hr class="editorial-rule w-16 ml-0" />
       <h1 class="font-display text-4xl md:text-5xl leading-tight">{serviceName}</h1>
       {service.tagLine && <p class="text-lg text-mute leading-relaxed max-w-prose">{service.tagLine}</p>}
-      <div class="flex items-center gap-md text-sm text-mute">
+      <div class="flex items-center gap-4 text-sm text-mute">
         <span>{duration} min</span>
         {price && <span class="text-ink font-medium">{price}</span>}
       </div>
       {service.description && <p class="text-ink leading-relaxed max-w-prose">{service.description}</p>}
     </div>
 
-    <section class="border-t border-rule pt-2xl">
-      <h2 class="font-display text-3xl leading-tight mb-xl">Book this service</h2>
+    <section class="border-t border-rule pt-12">
+      <h2 class="font-display text-3xl leading-tight mb-8">Book this service</h2>
       <ServiceBookingFlow
-        serviceId={service._id}
+        service={service}
         serviceName={serviceName}
         serviceType={service.type ?? "APPOINTMENT"}
+        fields={formFields}
+        staffMembers={staffMembers}
+        locations={serviceLocations}
+        locationId={locationId}
         client:only="react"
       />
     </section>

package/skills/wix-headless/references/astro/templates/bookings/services/index.astro

@@ -2,22 +2,93 @@
 // src/pages/services/index.astro — SSR services listing grid (APPOINTMENT or CLASS).
 // One dir deep inside src/pages → ../../ reaches src/. Adapt copy/headings to the
 // brand; keep the SSR data wiring.
+//
+// Optional catalog filters (both auto-skip when there's nothing to filter):
+//   location — a location selector, shown ONLY when the site has >1 location
+//              (business + custom + customer). Mirrors the SoT's location-first
+//              flow without forcing a separate step: single-location sites never
+//              see it. The choice is carried as ?locationId (+?locationType) and
+//              forwarded into both the services query and the detail page's
+//              availability.
+//   category — a category filter bar, shown ONLY when >1 category exists. The
+//              choice is carried as ?category and merged into the services query.
+// Both are plain links that re-SSR with query params (re-query, like the SoT) —
+// no client JS on the catalog.
 import Layout from "../../layouts/Layout.astro";
 import ServiceCard from "../../components/ServiceCard.astro";
-import { services } from "@wix/bookings";
+import { services, categoriesV2 } from "@wix/bookings";
 import { auth } from "@wix/essentials";
 
-let serviceList: any[] = [];
-try {
-  // Ambient @wix/astro SSR client via @wix/essentials (same pattern as CMS pages).
-  // Do NOT build createClient({ auth: OAuthStrategy({ clientId: import.meta.env.* }) }) —
-  // that env var is client-only and undefined at server render → 500.
-  // queryServices uses the query BUILDER; the object form returns 0 items.
-  const result = await auth.elevate(services.queryServices)().limit(100).find();
-  serviceList = (result.items ?? []).filter((s: any) => !s.hidden);
-} catch (err) {
-  console.error("[services] listing query failed:", err);
-}
+// Wix Bookings app id — the base filter must scope queryServices to it.
+const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
+
+const reqUrl = new URL(Astro.request.url);
+const selectedCategory = reqUrl.searchParams.get("category") ?? "";
+const selectedLocation = reqUrl.searchParams.get("locationId") ?? "";
+const selectedLocationType = reqUrl.searchParams.get("locationType") ?? "";
+
+// ── Services filter (appId + optional category + optional location) ─────────
+// A real business-location id filters by locations.business.id; the synthetic
+// "custom"/"customer" ids map to a location-TYPE filter (the SoT mapping). Built
+// from URL params only, so it doesn't depend on the locations/categories reads.
+const filter: Record<string, any> = { appId: BOOKING_APP_ID };
+if (selectedCategory) filter["category.id"] = { $eq: selectedCategory };
+if (selectedLocation === "custom") filter["locations.type"] = { $hasSome: ["CUSTOM"] };
+else if (selectedLocation === "customer") filter["locations.type"] = { $hasSome: ["CUSTOMER"] };
+else if (selectedLocation) filter["locations.business.id"] = { $hasSome: [selectedLocation] };
+
+// ── Catalog reads — three INDEPENDENT queries, fetched concurrently ─────────
+// queryServices (the filtered list) + queryLocations (selector) + queryCategories
+// (bar) don't depend on each other, so run them in parallel (the SoT fetches
+// services + categories with Promise.allSettled likewise) — one round-trip's
+// latency, not three. Each is individually non-fatal: a failed read degrades only
+// its own piece (an empty list / a hidden selector or bar), never the whole page.
+// Ambient @wix/astro SSR client via @wix/essentials — do NOT build
+// createClient({ auth: OAuthStrategy({ clientId: import.meta.env.* }) }); that env
+// var is client-only and undefined at server render → 500.
+const [servicesResult, locResult, catResult] = await Promise.all([
+  auth
+    .elevate(services.queryServices)({ query: { filter, paging: { limit: 100 } }, conditionalFields: ["STAFF_MEMBER_DETAILS"] })
+    .find()
+    .catch((err: any) => { console.error("[services] listing query failed:", err); return null; }),
+  auth.elevate(services.queryLocations)().catch((err: any) => { console.error("[services] queryLocations failed:", err); return null; }),
+  auth.elevate(categoriesV2.queryCategories)().find().catch((err: any) => { console.error("[services] queryCategories failed:", err); return null; }),
+]);
+
+const serviceList: any[] = (servicesResult?.items ?? []).filter((s: any) => !s.hidden);
+
+// Locations — auto-skip the selector when ≤1 (business + custom + customer).
+const businessLocations: any[] = locResult?.businessLocations?.locations ?? [];
+const hasCustomLocations: boolean = locResult?.customLocations?.exists ?? false;
+const hasCustomerLocations: boolean = locResult?.customerLocations?.exists ?? false;
+const locationCount =
+  businessLocations.length + (hasCustomLocations ? 1 : 0) + (hasCustomerLocations ? 1 : 0);
+const showLocationSelector = locationCount > 1;
+
+// Categories — non-fatal; show the bar only when >1 (a fresh site has one default).
+const categories: any[] = catResult?.items ?? [];
+const showCategoryBar = categories.length > 1;
+
+// Build a /services href preserving the current selection, applying overrides.
+// Pass null to clear a param. locationType is always paired with locationId.
+const hrefWith = (patch: Record<string, string | null>): string => {
+  const p = new URLSearchParams();
+  if (selectedCategory) p.set("category", selectedCategory);
+  if (selectedLocation) {
+    p.set("locationId", selectedLocation);
+    if (selectedLocationType) p.set("locationType", selectedLocationType);
+  }
+  for (const [k, v] of Object.entries(patch)) {
+    if (v === null) p.delete(k);
+    else p.set(k, v);
+  }
+  if (patch.locationId === null) p.delete("locationType");
+  const qs = p.toString();
+  return qs ? `/services?${qs}` : "/services";
+};
+
+// Is a filter narrowing the list right now? Drives the empty-state copy.
+const filterActive = Boolean(selectedCategory || selectedLocation);
 
 const getSlug = (s: any): string => s.mainSlug?.name ?? s.supportedSlugs?.[0]?.name ?? s._id;
 const formatPrice = (s: any): string | undefined => {
@@ -31,19 +102,62 @@ const formatPrice = (s: any): string | undefined => {
   return undefined;
 };
 const getDuration = (s: any): number => s.schedule?.availabilityConstraints?.sessionDurations?.[0] ?? 60;
+const locationName = (loc: any): string => loc?.business?.name ?? loc?.calculatedAddress?.city ?? "Location";
 ---
 
 <Layout title="Services">
-  <section class="max-w-6xl mx-auto px-lg py-4xl">
-    <header class="flex flex-col gap-md max-w-prose mb-3xl">
+  <section class="max-w-6xl mx-auto px-6 py-24">
+    <header class="flex flex-col gap-4 max-w-prose mb-16">
       <hr class="editorial-rule w-16 ml-0" />
       <h1 class="font-display text-4xl md:text-5xl leading-tight">Our Services</h1>
       <!-- Optional brand tagline -->
     </header>
 
+    {
+      showLocationSelector && (
+        <nav class="booking-filter-bar" aria-label="Filter by location">
+          <a href={hrefWith({ locationId: null })} class={`booking-filter-chip${selectedLocation ? "" : " booking-filter-chip--active"}`}>All locations</a>
+          {businessLocations.map((loc: any) => (
+            <a
+              href={hrefWith({ locationId: loc._id, locationType: "BUSINESS" })}
+              class={`booking-filter-chip${selectedLocation === loc._id ? " booking-filter-chip--active" : ""}`}
+            >
+              {locationName(loc)}
+            </a>
+          ))}
+          {hasCustomLocations && (
+            <a href={hrefWith({ locationId: "custom", locationType: "CUSTOM" })} class={`booking-filter-chip${selectedLocation === "custom" ? " booking-filter-chip--active" : ""}`}>Custom location</a>
+          )}
+          {hasCustomerLocations && (
+            <a href={hrefWith({ locationId: "customer", locationType: "CUSTOMER" })} class={`booking-filter-chip${selectedLocation === "customer" ? " booking-filter-chip--active" : ""}`}>My location</a>
+          )}
+        </nav>
+      )
+    }
+
+    {
+      showCategoryBar && (
+        <nav class="booking-filter-bar" aria-label="Filter by category">
+          <a href={hrefWith({ category: null })} class={`booking-filter-chip${selectedCategory ? "" : " booking-filter-chip--active"}`}>All</a>
+          {categories.map((cat: any) => (
+            <a
+              href={hrefWith({ category: cat._id })}
+              class={`booking-filter-chip${selectedCategory === cat._id ? " booking-filter-chip--active" : ""}`}
+            >
+              {cat.name ?? "Category"}
+            </a>
+          ))}
+        </nav>
+      )
+    }
+
     {
       serviceList.length === 0 ? (
-        <p class="text-mute">Services coming soon — check back shortly.</p>
+        <p class="text-mute">
+          {filterActive
+            ? "No services match your selection — try a different filter."
+            : "Services coming soon — check back shortly."}
+        </p>
       ) : (
         <div class="service-grid">
           {serviceList.map((s) => (
@@ -56,6 +170,8 @@ const getDuration = (s: any): number => s.schedule?.availabilityConstraints?.ses
               price={formatPrice(s)}
               imageUrl={s.media?.mainMedia?.image?.url ?? s.media?.items?.[0]?.image?.url}
               type={s.type ?? "APPOINTMENT"}
+              locationId={selectedLocation || undefined}
+              locationType={selectedLocationType || undefined}
             />
           ))}
         </div>

package/skills/wix-headless/references/astro/templates/ecom/CartView.tsx

@@ -354,9 +354,9 @@ export default function CartView() {
   const hasUnavailable = items.some(isItemUnavailable);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-[1fr_22rem] gap-2xl md:gap-3xl md:items-start">
+    <div className="grid grid-cols-1 md:grid-cols-[1fr_22rem] gap-12 md:gap-16 md:items-start">
       {/* ── Left column: line items ── */}
-      <div className="flex flex-col gap-lg">
+      <div className="flex flex-col gap-6">
         {items.map((item) => {
           const unavailable = isItemUnavailable(item);
           const maxQty = item.availability?.quantityAvailable ?? 99;
@@ -367,7 +367,7 @@ export default function CartView() {
           return (
             <div
               key={item._id}
-              className={`flex gap-lg pb-lg border-b border-rule last:border-0${unavailable ? " unavailable" : ""}`}
+              className={`flex gap-6 pb-6 border-b border-rule last:border-0${unavailable ? " unavailable" : ""}`}
             >
               {/* Product image + name link back to the product detail page
                   for available items. Unavailable lines render as plain text. */}

package/skills/wix-headless/references/astro/templates/ecom/cart.astro

@@ -4,9 +4,9 @@ import CartView from "../components/CartView.tsx";
 ---
 
 <Layout title="Cart">
-  <main class="py-3xl">
-    <div class="max-w-wide mx-auto px-xl">
-      <h1 class="font-display text-4xl mb-2xl">Your Cart</h1>
+  <main class="py-16">
+    <div class="max-w-wide mx-auto px-8">
+      <h1 class="font-display text-4xl mb-12">Your Cart</h1>
       <CartView client:load />
     </div>
   </main>

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

@@ -20,7 +20,7 @@
  * used `@apply text-bark/70 bg-tobacco …` (stale token vocabulary) and
  * `@apply size-6` (built-in utility that needs `@reference` to be visible
  * here), and both classes built-failed against current designer output.
- * Direct `var(--color-ink)` / `var(--spacing-sm)` calls work against any
+ * Direct `var(--color-ink)` / `0.75rem` calls work against any
  * designer-published token set as long as the core scales exist (they always
  * do). Use fallback chains (`var(--color-paper-warm, var(--color-paper, var(--color-cream)))`)
  * for sometimes-published tokens.
@@ -33,22 +33,22 @@
 .cart-summary {
   background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
   border: 1px solid var(--color-rule);
-  padding: var(--spacing-xl);
+  padding: 2rem;
   border-radius: var(--radius-md);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 @media (min-width: 768px) {
   .cart-summary {
     position: sticky;
-    top: var(--spacing-xl);
+    top: 2rem;
   }
 }
 
 .cart-empty {
   text-align: center;
-  padding-block: var(--spacing-3xl);
+  padding-block: 4rem;
   color: var(--color-mute);
 }
 .cart-empty .checkout-btn {
@@ -66,7 +66,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: 1rem 1.5rem;
   font-family: var(--font-display);
   font-size: 0.9375rem;
   font-weight: 500;
@@ -76,7 +76,7 @@
   border-radius: var(--radius-sm);
   cursor: pointer;
   width: 100%;
-  margin-top: var(--spacing-md);
+  margin-top: 1rem;
   transition: background-color 150ms ease, box-shadow 150ms ease;
 }
 .checkout-btn:hover:not(:disabled) {
@@ -123,7 +123,7 @@
 .cart-item {
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-md);
+  gap: 1rem;
 }
 .cart-item-image {
   flex-shrink: 0;
@@ -171,8 +171,8 @@
 .cart-item-qty {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-sm);
+  gap: 0.75rem;
+  margin-top: 0.75rem;
   width: fit-content;
 }
 .qty-btn {
@@ -221,7 +221,7 @@
 .cart-item-prices {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .cart-item-full-price {
   font-family: var(--font-body);
@@ -258,10 +258,10 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
-  margin-top: var(--spacing-sm);
+  margin-top: 0.75rem;
 }
 .cart-discount-name {
   font-size: 0.75rem;
@@ -272,8 +272,8 @@
 }
 .cart-total {
   border-top: 1px solid var(--color-rule);
-  padding-top: var(--spacing-md);
-  margin-top: var(--spacing-sm);
+  padding-top: 1rem;
+  margin-top: 0.75rem;
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 500;
@@ -290,10 +290,10 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
-  margin-top: var(--spacing-sm);
+  margin-top: 0.75rem;
 }
 .cart-applied-discounts-name {
   text-align: right;

package/skills/wix-headless/references/astro/templates/ecom/thank-you.astro

@@ -5,12 +5,12 @@ const orderId = Astro.url.searchParams.get("orderId");
 ---
 
 <Layout title="Thank You">
-  <main class="py-4xl">
-    <div class="max-w-prose mx-auto px-xl text-center flex flex-col gap-lg">
+  <main class="py-24">
+    <div class="max-w-prose mx-auto px-8 text-center flex flex-col gap-6">
       <h1 class="font-display text-5xl">Thank You!</h1>
       <p class="text-ink-soft">Your order has been placed successfully.</p>
       {orderId && <p class="text-mute text-sm tracking-wide">Order ID: {orderId}</p>}
-      <a href="/products" class="btn-primary self-center mt-md">Continue Shopping</a>
+      <a href="/products" class="btn-primary self-center mt-4">Continue Shopping</a>
     </div>
   </main>
 </Layout>

package/skills/wix-headless/references/astro/templates/gift-cards/_home-teaser-snippet.astro

@@ -18,8 +18,8 @@
   during adaptation; keep the structure as-is.
 */}
 {giftCardProduct && (
-  <section class="py-3xl md:py-4xl">
-    <a href="/gift-cards" class="max-w-wide mx-auto px-xl grid grid-cols-1 md:grid-cols-2 gap-xl md:gap-3xl items-center group">
+  <section class="py-16 md:py-24">
+    <a href="/gift-cards" class="max-w-wide mx-auto px-8 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center group">
       <div class="aspect-[4/3] bg-cream rounded-sm overflow-hidden">
         {giftCardImage && (
           <img
@@ -31,11 +31,11 @@
           />
         )}
       </div>
-      <div class="flex flex-col gap-md">
+      <div class="flex flex-col gap-4">
         <p class="eyebrow">A gift, considered</p>
         <h2 class="font-display text-3xl leading-tight">{giftCardProduct.name}</h2>
         <p class="text-ink-soft leading-relaxed">{giftCardProduct.description}</p>
-        <span class="text-sm tracking-wide uppercase mt-sm">Send a gift card →</span>
+        <span class="text-sm tracking-wide uppercase mt-3">Send a gift card →</span>
       </div>
     </a>
   </section>