astro-component-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1,295 @@
+---
+/**
+ * OrderSummary — Checkout sidebar: cart lines, promo code, subtotal, shipping, tax and total.
+ * Reads the cart store live and follows the shipping method chosen in CheckoutForm.
+ *
+ * @param {string} title - Heading. Default 'Order summary'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {ShippingRate[]} shippingRates - Rates matching CheckoutForm's `shipping` radios.
+ * @param {number} freeShippingThreshold - Subtotal that makes the first rate free (0 disables). Default 75.
+ * @param {number} taxRate - Tax as a fraction (0.08 = 8%). Default 0.08.
+ * @param {Record<string, number>} promoCodes - Code → percent discount. Default { ASTRO10: 10 }.
+ * @param {string} editHref - "Edit cart" link (optional).
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {boolean} sticky - Stick while the form scrolls (desktop). Default true.
+ * @param {string} variant - Style (glass|plain). Default 'glass'.
+ * @param {string} className - Extra class.
+ *
+ * Emits `ack:totals` on document with `{ subtotal, discount, shipping, tax, total, formatted }`.
+ *
+ * Accessibility: the totals block is a polite live region; promo feedback is a status message.
+ */
+import type { ShippingRate } from './types';
+
+interface Props {
+  title?: string;
+  cartKey?: string;
+  shippingRates?: ShippingRate[];
+  freeShippingThreshold?: number;
+  taxRate?: number;
+  promoCodes?: Record<string, number>;
+  editHref?: string;
+  currency?: string;
+  locale?: string;
+  sticky?: boolean;
+  variant?: 'glass' | 'plain';
+  className?: string;
+}
+
+const {
+  title = 'Order summary',
+  cartKey = 'ack-cart',
+  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,
+  taxRate = 0.08,
+  promoCodes = { ASTRO10: 10 },
+  editHref,
+  currency = 'USD',
+  locale = 'en-US',
+  sticky = true,
+  variant = 'glass',
+  className = '',
+} = Astro.props;
+
+const config = JSON.stringify({ shippingRates, freeShippingThreshold, taxRate, promoCodes, currency, locale });
+---
+
+<aside class:list={['o-summary', `o-summary--${variant}`, { 'o-summary--sticky': sticky }, className]} aria-labelledby="o-summary-title" data-order-summary data-key={cartKey} data-config={config}>
+  <div class="o-summary__head">
+    <h2 class="o-summary__title" id="o-summary-title">{title}</h2>
+    {editHref && <a class="o-summary__edit" href={editHref}>Edit cart</a>}
+  </div>
+
+  <ul class="o-summary__lines" data-lines aria-label="Items in your order"></ul>
+  <p class="o-summary__empty" data-empty hidden>Your cart is empty.</p>
+
+  <form class="o-summary__promo" data-promo novalidate>
+    <label class="sr-only" for="o-summary-code">Discount code</label>
+    <input id="o-summary-code" name="code" type="text" placeholder="Discount code" autocomplete="off" autocapitalize="characters" spellcheck="false" />
+    <button type="submit">Apply</button>
+  </form>
+  <p class="o-summary__promo-msg" role="status" data-promo-msg></p>
+
+  <dl class="o-summary__totals" aria-live="polite">
+    <div><dt>Subtotal</dt><dd data-t="subtotal">—</dd></div>
+    <div data-discount-row hidden><dt>Discount <span data-code></span></dt><dd data-t="discount">—</dd></div>
+    <div><dt>Shipping</dt><dd data-t="shipping">—</dd></div>
+    <div><dt>Estimated tax</dt><dd data-t="tax">—</dd></div>
+    <div class="o-summary__total"><dt>Total</dt><dd data-t="total">—</dd></div>
+  </dl>
+</aside>
+
+<script>
+  import { createCart, formatMoney } from './cart-store';
+  import { productIcon } from './product-icons';
+  import type { CartItem, ShippingRate } from './types';
+
+  document.querySelectorAll<HTMLElement>('[data-order-summary]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const cfg = JSON.parse(root.dataset.config || '{}') as {
+      shippingRates: ShippingRate[]; freeShippingThreshold: number; taxRate: number;
+      promoCodes: Record<string, number>; currency: string; locale: string;
+    };
+    const money = { currency: cfg.currency, locale: cfg.locale };
+    const cart = createCart(root.dataset.key);
+    const list = root.querySelector<HTMLUListElement>('[data-lines]')!;
+    const empty = root.querySelector<HTMLElement>('[data-empty]')!;
+    const promo = root.querySelector<HTMLFormElement>('[data-promo]')!;
+    const promoMsg = root.querySelector<HTMLElement>('[data-promo-msg]')!;
+    const discountRow = root.querySelector<HTMLElement>('[data-discount-row]')!;
+    const codeOut = root.querySelector<HTMLElement>('[data-code]')!;
+    const out = (k: string) => root.querySelector<HTMLElement>(`[data-t="${k}"]`)!;
+    let code = '';
+    let shippingId = cfg.shippingRates[0]?.id;
+
+    const line = (i: CartItem) => {
+      const li = document.createElement('li');
+      li.className = 'o-line';
+      const media = document.createElement('span');
+      media.className = 'o-line__media';
+      media.style.setProperty('--h', String(i.hue ?? 40));
+      media.innerHTML = i.image
+        ? `<img src="${encodeURI(i.image)}" alt="">`
+        : `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${productIcon(i.icon)}</svg>`;
+      const qty = document.createElement('span');
+      qty.className = 'o-line__qty';
+      qty.textContent = String(i.qty);
+      qty.setAttribute('aria-hidden', 'true');
+      media.append(qty);
+      const info = document.createElement('span');
+      info.className = 'o-line__info';
+      const name = document.createElement('span');
+      name.className = 'o-line__name';
+      name.textContent = i.name;
+      const meta = document.createElement('span');
+      meta.className = 'o-line__meta';
+      meta.textContent = [i.variant, `Qty ${i.qty}`].filter(Boolean).join(' · ');
+      info.append(name, meta);
+      const price = document.createElement('span');
+      price.className = 'o-line__price';
+      price.textContent = formatMoney(i.price * i.qty, money);
+      li.append(media, info, price);
+      return li;
+    };
+
+    function render() {
+      const items = cart.items();
+      list.replaceChildren(...items.map(line));
+      empty.hidden = items.length > 0;
+      const subtotal = items.reduce((n, i) => n + i.price * i.qty, 0);
+      const pct = code ? cfg.promoCodes[code] ?? 0 : 0;
+      const discount = Math.round(subtotal * pct) / 100;
+      const rate = cfg.shippingRates.find((r) => r.id === shippingId) ?? cfg.shippingRates[0];
+      const freeStandard = cfg.freeShippingThreshold > 0 && subtotal - discount >= cfg.freeShippingThreshold && rate === cfg.shippingRates[0];
+      const shipping = items.length === 0 || !rate ? 0 : freeStandard ? 0 : rate.price;
+      const tax = Math.round((subtotal - discount) * cfg.taxRate * 100) / 100;
+      const total = Math.max(0, subtotal - discount + shipping + tax);
+
+      out('subtotal').textContent = formatMoney(subtotal, money);
+      out('discount').textContent = `−${formatMoney(discount, money)}`;
+      discountRow.hidden = discount === 0;
+      codeOut.textContent = code ? `(${code})` : '';
+      out('shipping').textContent = shipping === 0 && items.length ? 'Free' : formatMoney(shipping, money);
+      out('tax').textContent = formatMoney(tax, money);
+      out('total').textContent = formatMoney(total, money);
+
+      document.dispatchEvent(new CustomEvent('ack:totals', {
+        detail: { subtotal, discount, shipping, tax, total, formatted: formatMoney(total, money), freeStandard, count: items.length },
+      }));
+    }
+
+    promo.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const input = promo.elements.namedItem('code') as HTMLInputElement;
+      const value = input.value.trim().toUpperCase();
+      if (!value) { promoMsg.textContent = 'Enter a code first.'; promoMsg.dataset.state = 'error'; return; }
+      if (cfg.promoCodes[value] !== undefined) {
+        code = value;
+        promoMsg.textContent = `${value} applied — ${cfg.promoCodes[value]}% off.`;
+        promoMsg.dataset.state = 'ok';
+      } else {
+        promoMsg.textContent = `"${value}" is not a valid code.`;
+        promoMsg.dataset.state = 'error';
+      }
+      render();
+    });
+
+    document.addEventListener('change', (e) => {
+      const t = e.target as HTMLInputElement;
+      if (t?.name === 'shipping' && t.checked) { shippingId = t.value; render(); }
+    });
+    document.addEventListener('ack:totals-request', render);
+
+    render();
+    cart.subscribe(render);
+  });
+</script>
+
+<style>
+  .o-summary {
+    display: grid;
+    gap: var(--sp-4, 1rem);
+    align-self: start;
+    min-width: 0;
+  }
+  .o-summary--glass {
+    padding: var(--sp-6, 1.5rem);
+    border-radius: var(--r-xl, 28px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07);
+    background: linear-gradient(180deg, rgb(var(--ink-rgb, 255 255 255) / 0.035), rgb(var(--ink-rgb, 255 255 255) / 0.012));
+  }
+  .o-summary--sticky { position: sticky; top: calc(var(--store-header-h, 68px) + 1.5rem); }
+
+  .o-summary__head { display: flex; justify-content: space-between; align-items: baseline; }
+  .o-summary__title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-text-1, #fff); }
+  .o-summary__edit { font-size: 0.85rem; font-weight: 600; }
+
+  .o-summary__lines { display: grid; gap: var(--sp-3, 0.75rem); margin: 0; padding: 0; list-style: none; }
+  .o-summary__lines :global(.o-line) { display: grid; grid-template-columns: 60px 1fr auto; gap: var(--sp-3, 0.75rem); align-items: center; }
+  .o-summary__lines :global(.o-line__media) {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 60px;
+    height: 60px;
+    border-radius: var(--r-md, 12px);
+    color: hsl(var(--h) var(--pm-ink-s, 80%) var(--pm-ink-l, 80%));
+    background: radial-gradient(circle at 50% 40%, hsl(var(--h) 70% 50% / 0.3), transparent 70%), var(--c-bg-2, #111);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+  }
+  .o-summary__lines :global(.o-line__media svg) { width: 58%; }
+  .o-summary__lines :global(.o-line__media img) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+  .o-summary__lines :global(.o-line__qty) {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: var(--c-text-1, #fff);
+    color: var(--c-bg, #050505);
+    font-size: 0.72rem;
+    font-weight: 800;
+    line-height: 22px;
+    text-align: center;
+  }
+  .o-summary__lines :global(.o-line__info) { display: grid; gap: 2px; min-width: 0; }
+  .o-summary__lines :global(.o-line__name) { font-size: 0.88rem; font-weight: 700; color: var(--c-text-1, #fff); line-height: 1.3; }
+  .o-summary__lines :global(.o-line__meta) { font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .o-summary__lines :global(.o-line__price) { font-size: 0.9rem; font-weight: 700; color: var(--c-text-1, #fff); }
+  .o-summary__empty { margin: 0; color: var(--c-text-2, #a3a3a3); }
+
+  .o-summary__promo { display: flex; gap: var(--sp-2, 0.5rem); padding-top: var(--sp-4, 1rem); border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .o-summary__promo input {
+    flex: 1;
+    min-width: 0;
+    min-height: 46px;
+    padding: 0 var(--sp-4, 1rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+  }
+  .o-summary__promo input::placeholder { text-transform: none; color: var(--c-text-2, #a3a3a3); }
+  .o-summary__promo input:focus { outline: none; border-color: var(--c-primary-light, #d4a017); }
+  .o-summary__promo button {
+    min-height: 46px;
+    padding: 0 var(--sp-5, 1.25rem);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
+    border-radius: var(--r-md, 12px);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-weight: 700;
+    font-size: 0.88rem;
+    cursor: pointer;
+  }
+  .o-summary__promo button:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.09); }
+  .o-summary__promo button:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .o-summary__promo-msg { margin: calc(var(--sp-2, 0.5rem) * -1) 0 0; min-height: 1em; font-size: 0.8rem; }
+  .o-summary__promo-msg:empty { display: none; }
+  .o-summary__promo-msg[data-state='ok'] { color: var(--c-success, #34d399); }
+  .o-summary__promo-msg[data-state='error'] { color: var(--c-danger, #f87171); }
+
+  .o-summary__totals { display: grid; gap: var(--sp-2, 0.5rem); margin: 0; padding-top: var(--sp-4, 1rem); border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .o-summary__totals div { display: flex; justify-content: space-between; font-size: 0.9rem; }
+  .o-summary__totals div[hidden] { display: none; }
+  .o-summary__totals dt { color: var(--c-text-2, #a3a3a3); }
+  .o-summary__totals dd { margin: 0; color: var(--c-text-1, #fff); font-weight: 600; }
+  .o-summary__totals [data-discount-row] dd { color: var(--c-success, #34d399); }
+  .o-summary__total { margin-top: var(--sp-2, 0.5rem); padding-top: var(--sp-3, 0.75rem); border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .o-summary__totals .o-summary__total dt { color: var(--c-text-1, #fff); font-weight: 700; font-size: 1rem; }
+  .o-summary__totals .o-summary__total dd { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @media (max-width: 960px) { .o-summary--sticky { position: static; } }
+</style>

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

@@ -0,0 +1,247 @@
+---
+/**
+ * ProductBuyBox — Product detail purchase panel: title, rating, price, colour/size pickers,
+ * quantity (StepperInput), add to cart, buy now, guarantees and expandable details.
+ *
+ * @param {Product} product - Product data. A demo product is used by default.
+ * @param {string} categoryLabel - Eyebrow text (e.g. the category name).
+ * @param {string} checkoutHref - Where "Buy now" goes after adding the item. Default '#'.
+ * @param {Array<{title: string, body: string}>} details - Expandable sections (materials, shipping…).
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {string} id - Base id for inner controls. Default 'buy-box'.
+ * @param {string} variant - Style (plain|glass). Default 'plain'.
+ * @param {string} size - Type scale (md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: one h1 with the product name; pickers are radio groups; details use native
+ * <details>/<summary>; sold-out state disables the buttons and says so in text.
+ */
+import Badge from '../feedback/Badge.astro';
+import StepperInput from '../forms/StepperInput.astro';
+import ProductRating from './ProductRating.astro';
+import VariantPicker from './VariantPicker.astro';
+import TrustBadges from './TrustBadges.astro';
+import StockIndicator from './StockIndicator.astro';
+import { formatMoney } from './cart-store';
+import type { Product } from './types';
+
+interface Props {
+  product?: Product;
+  categoryLabel?: string;
+  checkoutHref?: string;
+  details?: Array<{ title: string; body: string }>;
+  currency?: string;
+  locale?: string;
+  cartKey?: string;
+  id?: string;
+  variant?: 'plain' | 'glass';
+  size?: 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  product = {
+    slug: 'aurora-headphones',
+    name: 'Aurora Wireless Headphones',
+    price: 189,
+    compareAt: 229,
+    category: 'audio',
+    rating: 4.8,
+    reviews: 312,
+    badge: 'Bestseller',
+    badgeVariant: 'warning',
+    colors: [{ name: 'Graphite', hex: '#2b2b2f' }, { name: 'Sand', hex: '#d8c3a5' }, { name: 'Ocean', hex: '#3d6f9e' }],
+    icon: 'headphones',
+    hue: 38,
+    description: 'Adaptive noise cancelling, 40-hour battery and memory-foam cushions that disappear after five minutes. Tuned in-house for a warm, detailed sound.',
+    inStock: true,
+  },
+  categoryLabel = 'Audio',
+  checkoutHref = '#',
+  details = [
+    { title: 'Features', body: 'Hybrid ANC with transparency mode · Bluetooth 5.4 multipoint · USB-C fast charge (10 min = 5 h) · Foldable aluminium frame.' },
+    { title: 'Shipping & returns', body: 'Free standard shipping over $75, delivered in 2–4 business days. Return anything within 30 days for a full refund.' },
+    { title: 'Warranty', body: 'Two-year limited warranty covering manufacturing defects, with free repair or replacement.' },
+  ],
+  currency = 'USD',
+  locale = 'en-US',
+  cartKey = 'ack-cart',
+  id = 'buy-box',
+  variant = 'plain',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const money = { currency, locale };
+const inStock = product.inStock !== false;
+const saving = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : 0;
+const payload = JSON.stringify({ id: product.slug, name: product.name, price: product.price, icon: product.icon, hue: product.hue, image: product.image });
+const addId = `${id}-add`;
+---
+
+<div class:list={['buy-box', `buy-box--${variant}`, `buy-box--${size}`, className]}>
+  <div class="buy-box__top">
+    {categoryLabel && <p class="buy-box__cat">{categoryLabel}</p>}
+    {product.badge && <Badge variant={product.badgeVariant ?? 'default'}>{product.badge}</Badge>}
+  </div>
+  <h1 class="buy-box__title">{product.name}</h1>
+  {product.rating !== undefined && (
+    <a class="buy-box__rating" href="#reviews">
+      <ProductRating value={product.rating} count={product.reviews} size="md" />
+    </a>
+  )}
+
+  <p class="buy-box__price">
+    <span class="buy-box__now">{formatMoney(product.price, money)}</span>
+    {product.compareAt && <s class="buy-box__was"><span class="sr-only">Was </span>{formatMoney(product.compareAt, money)}</s>}
+    {saving > 0 && <span class="buy-box__save">Save {saving}%</span>}
+  </p>
+  {product.description && <p class="buy-box__desc">{product.description}</p>}
+
+  <div class="buy-box__pickers">
+    {product.colors && product.colors.length > 0 && (
+      <VariantPicker label="Colour" name={`${id}-color`} type="swatch" target={addId} options={product.colors.map((c) => ({ label: c.name, hex: c.hex }))} />
+    )}
+    {product.sizes && product.sizes.length > 0 && (
+      <VariantPicker label="Size" name={`${id}-size`} type="pill" target={addId} options={product.sizes.map((s) => ({ label: s }))} />
+    )}
+  </div>
+
+  <div class="buy-box__actions">
+    <StepperInput id={`${id}-qty`} name="qty" value={1} min={1} max={10} />
+    <button
+      class="buy-box__add"
+      id={addId}
+      type="button"
+      data-add-to-cart={payload}
+      data-cart-key={cartKey}
+      data-qty-from={`${id}-qty`}
+      data-added-label="Added to cart"
+      disabled={!inStock}
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg>
+      <span data-label>{inStock ? 'Add to cart' : 'Sold out'}</span>
+    </button>
+  </div>
+  {inStock && (
+    <a class="buy-box__buy" href={checkoutHref} data-buy-now={addId}>Buy now</a>
+  )}
+
+  {inStock && product.stock !== undefined && product.stock <= 5 ? (
+    <StockIndicator stock={product.stock} viewers={8 + (product.reviews ?? 0) % 17} />
+  ) : (
+    <p class="buy-box__stock" data-in={inStock ? '' : undefined}>
+      <span aria-hidden="true"></span>{inStock ? 'In stock — ships in 24 hours' : 'Out of stock — back soon'}
+    </p>
+  )}
+
+  <TrustBadges variant="inline" size="sm" items={[
+    { icon: 'truck', title: 'Free shipping', text: 'Over $75' },
+    { icon: 'return', title: '30-day returns', text: 'Free & easy' },
+  ]} />
+
+  {details.length > 0 && (
+    <div class="buy-box__details">
+      {details.map((d, i) => (
+        <details open={i === 0}>
+          <summary>{d.title}</summary>
+          <p>{d.body}</p>
+        </details>
+      ))}
+    </div>
+  )}
+</div>
+
+<script>
+  import { bindAddToCart } from './cart-store';
+
+  bindAddToCart(document);
+  document.querySelectorAll<HTMLAnchorElement>('[data-buy-now]').forEach((link) => {
+    link.addEventListener('click', (e) => {
+      const btn = document.getElementById(link.dataset.buyNow || '') as HTMLButtonElement | null;
+      if (!btn || btn.disabled) return;
+      e.preventDefault();
+      btn.dataset.openCart = 'false';
+      btn.click();
+      window.location.href = link.href;
+    });
+  });
+</script>
+
+<style>
+  .buy-box { display: flex; flex-direction: column; gap: var(--sp-4, 1rem); min-width: 0; }
+  .buy-box--glass {
+    padding: var(--sp-6, 1.5rem);
+    border-radius: var(--r-xl, 28px);
+    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));
+  }
+  .buy-box__top { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); }
+  .buy-box__cat { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .buy-box__title { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; color: var(--c-text-1, #fff); }
+  .buy-box--lg .buy-box__title { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
+  .buy-box__rating { width: fit-content; text-decoration: none; border-radius: var(--r-sm, 8px); }
+  .buy-box__rating:hover :global(.p-rating__count) { text-decoration: underline; }
+
+  .buy-box__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3, 0.75rem); margin: 0; }
+  .buy-box__now { font-size: 1.9rem; font-weight: 900; color: var(--c-text-1, #fff); letter-spacing: -0.02em; }
+  .buy-box__was { font-size: 1.05rem; color: var(--c-text-2, #a3a3a3); }
+  .buy-box__save { padding: 0.2rem 0.6rem; border-radius: var(--r-full, 9999px); background: rgba(52, 211, 153, 0.12); color: var(--c-success, #34d399); font-size: 0.78rem; font-weight: 800; }
+  .buy-box__desc { margin: 0; line-height: 1.7; color: var(--c-text-2, #a3a3a3); }
+
+  .buy-box__pickers { display: grid; gap: var(--sp-5, 1.25rem); padding: var(--sp-2, 0.5rem) 0; }
+
+  .buy-box__actions { display: flex; gap: var(--sp-3, 0.75rem); align-items: stretch; }
+  .buy-box__actions :global(.stepper-container) { width: auto; flex-shrink: 0; }
+  .buy-box__actions :global(.stepper) { height: 52px; border-radius: var(--r-full, 9999px); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.12); }
+  .buy-box__actions :global(.stepper-btn) { width: 48px; height: 100%; background: transparent; color: var(--c-text-1, #fff); }
+  .buy-box__actions :global(.stepper-btn:hover) { background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .buy-box__actions :global(.stepper-input) { width: 44px; height: 100%; }
+  .buy-box__add,
+  .buy-box__buy {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sp-2, 0.5rem);
+    min-height: 52px;
+    border-radius: var(--r-full, 9999px);
+    font: inherit;
+    font-weight: 800;
+    font-size: 0.95rem;
+    text-decoration: none;
+    cursor: pointer;
+    transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease;
+  }
+  .buy-box__add { flex: 1; border: 0; background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #050505); }
+  .buy-box__add:hover { filter: brightness(1.08); transform: translateY(-1px); }
+  .buy-box__add.is-added { background: var(--c-success, #34d399); }
+  .buy-box__add:disabled { background: rgb(var(--ink-rgb, 255 255 255) / 0.08); color: var(--c-text-2, #a3a3a3); cursor: not-allowed; transform: none; }
+  .buy-box__buy { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.16); color: var(--c-text-1, #fff); }
+  .buy-box__buy:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.05); color: var(--c-text-1, #fff); }
+  .buy-box :is(a, button, summary):focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+
+  .buy-box__stock { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin: 0; font-size: 0.85rem; color: var(--c-danger, #f87171); }
+  .buy-box__stock[data-in] { color: var(--c-success, #34d399); }
+  .buy-box__stock span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
+
+  .buy-box__details { border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .buy-box__details details { border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .buy-box__details summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 52px;
+    font-weight: 700;
+    color: var(--c-text-1, #fff);
+    cursor: pointer;
+    list-style: none;
+  }
+  .buy-box__details summary::-webkit-details-marker { display: none; }
+  .buy-box__details summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--c-text-2, #a3a3a3); transition: transform 0.2s ease; }
+  .buy-box__details details[open] summary::after { transform: rotate(45deg); }
+  .buy-box__details p { margin: 0 0 var(--sp-4, 1rem); font-size: 0.9rem; line-height: 1.7; color: var(--c-text-2, #a3a3a3); }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+</style>