astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/ecommerce/CategoryTiles.astro

@@ -0,0 +1,143 @@
+---
+/**
+ * CategoryTiles — Grid of shop categories with illustration, item count and arrow link.
+ *
+ * @param {string} title - Section heading (optional). Default 'Shop by category'.
+ * @param {string} subtitle - Supporting copy (optional).
+ * @param {Array<StoreCategory & { href: string, count?: number }>} categories - Tiles to show.
+ * @param {number} columns - Desktop columns (2–6). Default 4.
+ * @param {string} variant - Tile style (glass|image|minimal). Default 'glass'.
+ * @param {string} size - Tile height (sm|md|lg). Default 'md'.
+ * @param {string} countLabel - Suffix after the count. Default 'products'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each tile is a single link with a visible name; art is decorative.
+ */
+import ProductMedia from './ProductMedia.astro';
+import type { StoreCategory } from './types';
+
+type Tile = StoreCategory & { href: string; count?: number };
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: Tile[];
+  columns?: number;
+  variant?: 'glass' | 'image' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  countLabel?: string;
+  className?: string;
+}
+
+const {
+  title = 'Shop by category',
+  subtitle,
+  categories = [
+    { id: 'audio', name: 'Audio', href: '#', count: 18, icon: 'headphones', hue: 38 },
+    { id: 'wearables', name: 'Wearables', href: '#', count: 12, icon: 'watch', hue: 200 },
+    { id: 'bags', name: 'Bags', href: '#', count: 9, icon: 'backpack', hue: 150 },
+    { id: 'home', name: 'Home', href: '#', count: 24, icon: 'lamp', hue: 20 },
+  ],
+  columns = 4,
+  variant = 'glass',
+  size = 'md',
+  countLabel = 'products',
+  className = '',
+} = Astro.props;
+
+const cols = Math.min(6, Math.max(2, columns));
+---
+
+<section class:list={['cat-tiles', `cat-tiles--${variant}`, `cat-tiles--${size}`, className]} style={`--ct-cols: ${cols}`}>
+  {(title || subtitle) && (
+    <header class="cat-tiles__head">
+      {title && <h2 class="cat-tiles__title">{title}</h2>}
+      {subtitle && <p class="cat-tiles__subtitle">{subtitle}</p>}
+    </header>
+  )}
+  <ul class="cat-tiles__grid">
+    {categories.map((c) => (
+      <li>
+        <a class="cat-tile is-hoverable" href={c.href}>
+          <ProductMedia icon={c.icon} hue={c.hue} ratio="auto" size="sm" variant={variant === 'minimal' ? 'flat' : 'glow'} className="cat-tile__media" />
+          <span class="cat-tile__text">
+            <span class="cat-tile__name">{c.name}</span>
+            {c.count !== undefined && <span class="cat-tile__count">{c.count} {countLabel}</span>}
+          </span>
+          <span class="cat-tile__arrow" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
+          </span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</section>
+
+<style>
+  .cat-tiles { container-type: inline-size; --ct-h: 220px; }
+  .cat-tiles--sm { --ct-h: 160px; }
+  .cat-tiles--lg { --ct-h: 280px; }
+  .cat-tiles__head { margin-bottom: var(--sp-6, 1.5rem); }
+  .cat-tiles__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .cat-tiles__subtitle { margin: var(--sp-2, 0.5rem) 0 0; color: var(--c-text-2, #a3a3a3); }
+
+  .cat-tiles__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--ct-cols), minmax(0, 1fr));
+    gap: var(--sp-4, 1rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cat-tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: var(--ct-h);
+    padding: var(--sp-5, 1.25rem);
+    border-radius: var(--r-lg, 20px);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+    overflow: hidden;
+    color: var(--c-text-1, #fff);
+    text-decoration: none;
+    isolation: isolate;
+    transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cat-tile:hover { border-color: rgba(212, 160, 23, 0.35); transform: translateY(-3px); color: var(--c-text-1, #fff); }
+  .cat-tile:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .cat-tile :global(.cat-tile__media) { position: absolute; inset: 0; height: 100%; z-index: -1; aspect-ratio: auto; }
+  .cat-tile :global(.cat-tile__media .p-media__art) { width: auto; height: 46%; margin-bottom: 18%; }
+  .cat-tile::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(var(--paper-rgb, 5 5 5) / 0.85)); z-index: -1; }
+  .cat-tiles--minimal .cat-tile::after { display: none; }
+
+  .cat-tile__text { display: grid; gap: 2px; }
+  .cat-tile__name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
+  .cat-tile__count { font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+  .cat-tile__arrow {
+    position: absolute;
+    top: var(--sp-4, 1rem);
+    right: var(--sp-4, 1rem);
+    display: grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    backdrop-filter: blur(8px);
+    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
+  }
+  .cat-tile:hover .cat-tile__arrow { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #050505); transform: rotate(45deg); }
+
+  @container (max-width: 900px) {
+    .cat-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @container (max-width: 420px) {
+    .cat-tiles__grid { --ct-h: 170px; }
+    .cat-tiles__grid { gap: var(--sp-3, 0.75rem); }
+    .cat-tile { padding: var(--sp-4, 1rem); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cat-tile, .cat-tile__arrow { transition: none; }
+  }
+</style>

package/src/components/lib/ecommerce/CheckoutForm.astro

@@ -0,0 +1,423 @@
+---
+/**
+ * CheckoutForm — One-page checkout: contact, delivery address, shipping method and payment,
+ * built from AnimatedInput, ModernSelect and CustomRadioGroup. Shows an order confirmation
+ * (AnimatedCheckmark) on submit and clears the cart.
+ *
+ * Pair it with OrderSummary: the shipping radios drive its totals and the pay button shows
+ * the live total. Replace the demo submit handler with your payment provider.
+ *
+ * @param {string} id - Form id. Default 'checkout'.
+ * @param {ShippingRate[]} shippingRates - Shipping options (must match OrderSummary).
+ * @param {number} freeShippingThreshold - Shows "Free" on the first rate above this subtotal. Default 75.
+ * @param {Array<{label: string, value: string}>} countries - Country select options.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} continueHref - "Continue shopping" link on the confirmation. Default '#'.
+ * @param {boolean} demo - Simulates payment and never sends data anywhere. Default true.
+ * @param {string} variant - Section style (cards|plain). Default 'cards'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: grouped fieldsets with legends, autocomplete hints on every field, native
+ * validation with focus moved to the first invalid field, confirmation heading receives focus.
+ * Emits `ack:order-placed` with `{ orderId, total }`.
+ */
+import AnimatedInput from '../forms/AnimatedInput.astro';
+import ModernSelect from '../forms/ModernSelect.astro';
+import CustomRadioGroup from '../forms/CustomRadioGroup.astro';
+import AnimatedCheckmark from '../feedback/AnimatedCheckmark.astro';
+import { formatMoney } from './cart-store';
+import type { ShippingRate } from './types';
+
+interface Props {
+  id?: string;
+  shippingRates?: ShippingRate[];
+  freeShippingThreshold?: number;
+  countries?: Array<{ label: string; value: string }>;
+  cartKey?: string;
+  currency?: string;
+  locale?: string;
+  continueHref?: string;
+  demo?: boolean;
+  variant?: 'cards' | 'plain';
+  className?: string;
+}
+
+const {
+  id = 'checkout',
+  shippingRates = [
+    { id: 'standard', label: 'Standard', eta: '3–5 business days', price: 6 },
+    { id: 'express', label: 'Express', eta: '1–2 business days', price: 14 },
+  ],
+  freeShippingThreshold = 75,
+  countries = [
+    { label: 'United States', value: 'US' },
+    { label: 'Canada', value: 'CA' },
+    { label: 'United Kingdom', value: 'GB' },
+    { label: 'Spain', value: 'ES' },
+    { label: 'Germany', value: 'DE' },
+    { label: 'France', value: 'FR' },
+  ],
+  cartKey = 'ack-cart',
+  currency = 'USD',
+  locale = 'en-US',
+  continueHref = '#',
+  demo = true,
+  variant = 'cards',
+  className = '',
+} = Astro.props;
+
+const money = { currency, locale };
+---
+
+<div class:list={['checkout', `checkout--${variant}`, className]} data-checkout data-key={cartKey} data-demo={demo ? '' : undefined} data-free={freeShippingThreshold}>
+  <form class="checkout__form" id={id} novalidate data-checkout-form>
+    <fieldset class="checkout__section">
+      <legend><span class="checkout__num" aria-hidden="true">1</span> Contact</legend>
+      <AnimatedInput label="Email" id={`${id}-email`} name="email" type="email" required autocomplete="email" />
+      <label class="checkout__check">
+        <input type="checkbox" name="newsletter" checked />
+        <span class="checkout__box" aria-hidden="true"></span>
+        Email me with news and offers
+      </label>
+    </fieldset>
+
+    <fieldset class="checkout__section">
+      <legend><span class="checkout__num" aria-hidden="true">2</span> Delivery</legend>
+      <ModernSelect label="Country / region" id={`${id}-country`} name="country" options={countries} required />
+      <div class="checkout__row">
+        <AnimatedInput label="First name" id={`${id}-first`} name="firstName" required autocomplete="given-name" />
+        <AnimatedInput label="Last name" id={`${id}-last`} name="lastName" required autocomplete="family-name" />
+      </div>
+      <AnimatedInput label="Address" id={`${id}-address`} name="address" required autocomplete="address-line1" />
+      <AnimatedInput label="Apartment, suite (optional)" id={`${id}-address2`} name="address2" autocomplete="address-line2" />
+      <div class="checkout__row checkout__row--3">
+        <AnimatedInput label="City" id={`${id}-city`} name="city" required autocomplete="address-level2" />
+        <AnimatedInput label="State" id={`${id}-state`} name="state" autocomplete="address-level1" />
+        <AnimatedInput label="ZIP / Postal" id={`${id}-zip`} name="zip" required autocomplete="postal-code" />
+      </div>
+      <AnimatedInput label="Phone (for delivery updates)" id={`${id}-phone`} name="phone" type="tel" autocomplete="tel" />
+    </fieldset>
+
+    <fieldset class="checkout__section">
+      <legend><span class="checkout__num" aria-hidden="true">3</span> Shipping method</legend>
+      <div class="checkout__rates">
+        {shippingRates.map((r, i) => (
+          <label class="checkout__rate">
+            <input type="radio" name="shipping" value={r.id} checked={i === 0} data-price={r.price} data-first={i === 0 ? '' : undefined} />
+            <span class="checkout__rate-dot" aria-hidden="true"></span>
+            <span class="checkout__rate-text">
+              <strong>{r.label}</strong>
+              <span>{r.eta}</span>
+            </span>
+            <span class="checkout__rate-price" data-rate-price>{r.price === 0 ? 'Free' : formatMoney(r.price, money)}</span>
+          </label>
+        ))}
+      </div>
+    </fieldset>
+
+    <fieldset class="checkout__section">
+      <legend><span class="checkout__num" aria-hidden="true">4</span> Payment</legend>
+      <p class="checkout__secure">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+        All transactions are secure and encrypted.
+      </p>
+      <CustomRadioGroup
+        name="payment"
+        horizontal
+        options={[
+          { label: 'Card', value: 'card', checked: true },
+          { label: 'PayPal', value: 'paypal' },
+          { label: 'Apple Pay', value: 'applepay' },
+        ]}
+      />
+      <div class="checkout__card" data-card-fields>
+        <div class="checkout__field">
+          <label for={`${id}-cc`}>Card number</label>
+          <input id={`${id}-cc`} name="cc" inputmode="numeric" autocomplete="cc-number" placeholder="1234 1234 1234 1234" required pattern="[0-9 ]{15,23}" maxlength="23" data-cc />
+        </div>
+        <div class="checkout__row">
+          <div class="checkout__field">
+            <label for={`${id}-exp`}>Expiry (MM/YY)</label>
+            <input id={`${id}-exp`} name="exp" inputmode="numeric" autocomplete="cc-exp" placeholder="MM/YY" required pattern="(0[1-9]|1[0-2])\/[0-9]{2}" maxlength="5" data-exp />
+          </div>
+          <div class="checkout__field">
+            <label for={`${id}-cvc`}>Security code</label>
+            <input id={`${id}-cvc`} name="cvc" inputmode="numeric" autocomplete="cc-csc" placeholder="CVC" required pattern="[0-9]{3,4}" maxlength="4" />
+          </div>
+        </div>
+        <div class="checkout__field">
+          <label for={`${id}-ccname`}>Name on card</label>
+          <input id={`${id}-ccname`} name="ccName" autocomplete="cc-name" required />
+        </div>
+      </div>
+      <p class="checkout__alt" data-alt-pay hidden>You will be redirected to complete the payment securely.</p>
+    </fieldset>
+
+    <p class="checkout__error" role="alert" data-error hidden></p>
+
+    <button class="checkout__pay" type="submit" data-pay>
+      <span class="checkout__spinner" aria-hidden="true"></span>
+      <span data-pay-label>Pay now</span>
+    </button>
+    {demo && <p class="checkout__demo">Demo checkout — no data leaves your browser. Try code <strong>ASTRO10</strong>.</p>}
+  </form>
+
+  <section class="checkout__done" data-done hidden aria-labelledby={`${id}-done-title`}>
+    <AnimatedCheckmark size={72} color="var(--c-success, #34d399)" />
+    <h2 id={`${id}-done-title`} tabindex="-1">Thank you for your order!</h2>
+    <p>Order <strong data-order-id>#—</strong> is confirmed. A receipt is on its way to <strong data-order-email>your inbox</strong>.</p>
+    <p class="checkout__done-total">Total paid: <strong data-order-total>—</strong></p>
+    <a class="checkout__pay checkout__pay--link" href={continueHref}>Continue shopping</a>
+  </section>
+</div>
+
+<script>
+  import { createCart } from './cart-store';
+
+  document.querySelectorAll<HTMLElement>('[data-checkout]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const form = root.querySelector<HTMLFormElement>('[data-checkout-form]')!;
+    const done = root.querySelector<HTMLElement>('[data-done]')!;
+    const pay = root.querySelector<HTMLButtonElement>('[data-pay]')!;
+    const payLabel = root.querySelector<HTMLElement>('[data-pay-label]')!;
+    const error = root.querySelector<HTMLElement>('[data-error]')!;
+    const cardFields = root.querySelector<HTMLElement>('[data-card-fields]')!;
+    const altPay = root.querySelector<HTMLElement>('[data-alt-pay]')!;
+    const firstRatePrice = root.querySelector<HTMLElement>('[data-first] ~ [data-rate-price]');
+    const cart = createCart(root.dataset.key);
+    let total = { formatted: '', total: 0, count: 0 };
+    const firstRateText = firstRatePrice?.textContent || '';
+
+    document.addEventListener('ack:totals', (e) => {
+      const d = (e as CustomEvent).detail;
+      total = d;
+      payLabel.textContent = d.count ? `Pay ${d.formatted}` : 'Pay now';
+      if (firstRatePrice) firstRatePrice.textContent = d.freeStandard || (d.subtotal - d.discount) >= Number(root.dataset.free || 0) && Number(root.dataset.free) > 0 ? 'Free' : firstRateText;
+    });
+    document.dispatchEvent(new CustomEvent('ack:totals-request'));
+
+    // Payment method toggles the card fields (and their `required`).
+    const setMethod = () => {
+      const method = (form.elements.namedItem('payment') as RadioNodeList)?.value || 'card';
+      const isCard = method === 'card';
+      cardFields.hidden = !isCard;
+      altPay.hidden = isCard;
+      cardFields.querySelectorAll('input').forEach((i) => { i.required = isCard; });
+    };
+    form.addEventListener('change', (e) => {
+      if ((e.target as HTMLInputElement).name === 'payment') setMethod();
+    });
+    setMethod();
+
+    // Light input masks
+    form.querySelector<HTMLInputElement>('[data-cc]')?.addEventListener('input', (e) => {
+      const el = e.target as HTMLInputElement;
+      el.value = el.value.replace(/\D/g, '').slice(0, 19).replace(/(\d{4})(?=\d)/g, '$1 ');
+    });
+    form.querySelector<HTMLInputElement>('[data-exp]')?.addEventListener('input', (e) => {
+      const el = e.target as HTMLInputElement;
+      const digits = el.value.replace(/\D/g, '').slice(0, 4);
+      el.value = digits.length > 2 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits;
+    });
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      error.hidden = true;
+      form.querySelectorAll('[aria-invalid]').forEach((n) => n.removeAttribute('aria-invalid'));
+      if (!cart.items().length) {
+        error.textContent = 'Your cart is empty — add a product before checking out.';
+        error.hidden = false;
+        return;
+      }
+      if (!form.checkValidity()) {
+        const invalid = Array.from(form.querySelectorAll<HTMLInputElement>('input, select')).filter((n) => !n.checkValidity());
+        invalid.forEach((n) => n.setAttribute('aria-invalid', 'true'));
+        error.textContent = `Please check ${invalid.length === 1 ? '1 field' : `${invalid.length} fields`} highlighted in red.`;
+        error.hidden = false;
+        invalid[0]?.focus();
+        return;
+      }
+      pay.disabled = true;
+      pay.classList.add('is-loading');
+      payLabel.textContent = 'Processing…';
+
+      const finish = () => {
+        const orderId = `#${Math.floor(100000 + Math.random() * 900000)}`;
+        const email = (form.elements.namedItem('email') as HTMLInputElement).value;
+        root.querySelector('[data-order-id]')!.textContent = orderId;
+        root.querySelector('[data-order-email]')!.textContent = email;
+        root.querySelector('[data-order-total]')!.textContent = total.formatted;
+        form.hidden = true;
+        done.hidden = false;
+        cart.clear();
+        done.querySelector<HTMLElement>('h2')?.focus();
+        document.dispatchEvent(new CustomEvent('ack:order-placed', { detail: { orderId, total: total.total } }));
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      };
+      // Demo mode: simulate the payment round-trip. Replace with your provider's SDK.
+      window.setTimeout(finish, root.hasAttribute('data-demo') ? 1100 : 0);
+    });
+  });
+</script>
+
+<style>
+  .checkout { container-type: inline-size; min-width: 0; }
+  .checkout__form { display: grid; gap: var(--sp-5, 1.25rem); }
+  .checkout__form[hidden], .checkout__done[hidden] { display: none; }
+
+  .checkout__section {
+    display: grid;
+    gap: var(--sp-3, 0.75rem);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .checkout--cards .checkout__section {
+    padding: var(--sp-6, 1.5rem);
+    border-radius: var(--r-lg, 20px);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+    background: var(--c-surface, rgb(var(--ink-rgb, 255 255 255) / 0.02));
+  }
+  .checkout__section legend {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3, 0.75rem);
+    float: left;
+    width: 100%;
+    margin-bottom: var(--sp-2, 0.5rem);
+    font-size: 1.05rem;
+    font-weight: 800;
+    color: var(--c-text-1, #fff);
+  }
+  .checkout__section legend + * { clear: both; }
+  .checkout__num {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(212, 160, 23, 0.14);
+    color: var(--c-primary-light, #d4a017);
+    font-size: 0.82rem;
+  }
+
+  .checkout__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3, 0.75rem); }
+  .checkout__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+  /* Reused form components, tuned to the store palette */
+  .checkout :global(.anim-input:focus),
+  .checkout :global(.custom-select:focus) { border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14); background: rgba(212, 160, 23, 0.04); }
+  .checkout :global(.anim-input:focus ~ .anim-input-label),
+  .checkout :global(.anim-input:not(:placeholder-shown) ~ .anim-input-label) { color: var(--c-primary-light, #d4a017); }
+  .checkout :global(.anim-input-label),
+  .checkout :global(.select-label) { color: var(--c-text-2, #a3a3a3); }
+  .checkout :global([aria-invalid='true']) { border-color: var(--c-danger, #f87171) !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14) !important; }
+  .checkout :global(.radio-circle::after) { background: var(--c-primary-light, #d4a017); }
+  .checkout :global(.radio-item input:checked + .radio-circle) { border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 10px rgba(212, 160, 23, 0.25); }
+  .checkout :global(.radio-group-legend) { display: none; }
+
+  .checkout__check { position: relative; display: flex; align-items: center; gap: var(--sp-3, 0.75rem); min-height: 40px; font-size: 0.88rem; cursor: pointer; }
+  .checkout__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .checkout__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgb(var(--ink-rgb, 255 255 255) / 0.25); flex-shrink: 0; transition: background 0.15s ease; }
+  .checkout__check input:checked + .checkout__box { background: var(--c-primary-light, #d4a017); border-color: var(--c-primary-light, #d4a017); box-shadow: inset 0 0 0 3px var(--c-bg-1, #0a0a0a); }
+  .checkout__check input:focus-visible + .checkout__box { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+
+  .checkout__rates { display: grid; gap: var(--sp-2, 0.5rem); }
+  .checkout__rate {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3, 0.75rem);
+    min-height: 64px;
+    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+  .checkout__rate:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.22); }
+  .checkout__rate:has(input:checked) { border-color: var(--c-primary-light, #d4a017); background: rgba(212, 160, 23, 0.06); }
+  .checkout__rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .checkout__rate-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.25); flex-shrink: 0; }
+  .checkout__rate input:checked + .checkout__rate-dot { border-color: var(--c-primary-light, #d4a017); box-shadow: inset 0 0 0 4px var(--c-bg-1, #0a0a0a); background: var(--c-primary-light, #d4a017); }
+  .checkout__rate input:focus-visible + .checkout__rate-dot { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .checkout__rate-text { flex: 1; display: grid; gap: 1px; }
+  .checkout__rate-text strong { color: var(--c-text-1, #fff); font-size: 0.92rem; }
+  .checkout__rate-text span { font-size: 0.8rem; }
+  .checkout__rate-price { font-weight: 800; color: var(--c-text-1, #fff); }
+
+  .checkout__secure { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin: 0; font-size: 0.82rem; color: var(--c-text-2, #a3a3a3); }
+  .checkout__card { display: grid; gap: var(--sp-3, 0.75rem); padding-top: var(--sp-2, 0.5rem); }
+  .checkout__card[hidden], .checkout__alt[hidden] { display: none; }
+  .checkout__field { display: grid; gap: var(--sp-2, 0.5rem); }
+  .checkout__field label { font-size: 0.82rem; font-weight: 600; color: var(--c-text-2, #a3a3a3); }
+  .checkout__field input {
+    width: 100%;
+    min-height: 50px;
+    padding: 0 var(--sp-4, 1rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.1));
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.95rem;
+    letter-spacing: 0.02em;
+  }
+  .checkout__field input::placeholder { color: var(--c-text-3, #737373); }
+  .checkout__field input:focus { outline: none; border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14); }
+  .checkout__alt { margin: 0; padding: var(--sp-4, 1rem); border-radius: var(--r-md, 12px); background: rgb(var(--ink-rgb, 255 255 255) / 0.03); font-size: 0.88rem; }
+
+  .checkout__error { margin: 0; padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); border-radius: var(--r-md, 12px); background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--c-danger, #fca5a5); font-size: 0.88rem; }
+  .checkout__error[hidden] { display: none; }
+
+  .checkout__pay {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sp-2, 0.5rem);
+    width: 100%;
+    min-height: 56px;
+    border: 0;
+    border-radius: var(--r-full, 9999px);
+    background: var(--c-primary-light, #d4a017);
+    color: var(--c-on-primary, #050505);
+    font: inherit;
+    font-size: 1rem;
+    font-weight: 800;
+    text-decoration: none;
+    cursor: pointer;
+    transition: filter 0.2s ease, transform 0.2s ease;
+  }
+  .checkout__pay:hover { filter: brightness(1.08); color: var(--c-on-primary, #050505); }
+  .checkout__pay:disabled { cursor: progress; filter: saturate(0.6); }
+  .checkout__pay:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 3px; }
+  .checkout__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, 0.25); border-top-color: var(--c-on-primary, #050505); animation: co-spin 0.7s linear infinite; }
+  .checkout__pay.is-loading .checkout__spinner { display: block; }
+  @keyframes co-spin { to { transform: rotate(360deg); } }
+  .checkout__demo { margin: 0; text-align: center; font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+
+  .checkout__done {
+    display: grid;
+    justify-items: center;
+    gap: var(--sp-3, 0.75rem);
+    padding: var(--sp-12, 3rem) var(--sp-6, 1.5rem);
+    border-radius: var(--r-xl, 28px);
+    border: 1px solid rgba(52, 211, 153, 0.25);
+    background: radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.1), transparent 60%), var(--c-surface, rgb(var(--ink-rgb, 255 255 255) / 0.02));
+    text-align: center;
+  }
+  .checkout__done h2 { margin: 0; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.03em; color: var(--c-text-1, #fff); outline: none; }
+  .checkout__done p { margin: 0; max-width: 32rem; }
+  .checkout__done strong { color: var(--c-text-1, #fff); }
+  .checkout__pay--link { width: auto; padding: 0 var(--sp-8, 2rem); margin-top: var(--sp-4, 1rem); }
+
+  @container (max-width: 560px) {
+    .checkout--cards .checkout__section { padding: var(--sp-4, 1rem); }
+    .checkout__row, .checkout__row--3 { grid-template-columns: 1fr; }
+  }
+  @media (prefers-reduced-motion: reduce) { .checkout__spinner { animation-duration: 2s; } }
+</style>