astro-component-kit 0.4.0 → 0.4.1

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

@@ -0,0 +1,260 @@
+---
+/**
+ * StoreHero — Shop landing hero: headline, CTAs, quick stats and a featured product
+ * stage with floating price and rating chips.
+ *
+ * @param {string} eyebrow - Small label above the title. Default 'New season · 2026'.
+ * @param {string} title - Headline. Default 'Gear that feels'.
+ * @param {string} highlight - Gradient part of the headline. Default 'made for you'.
+ * @param {string} subtitle - Supporting copy.
+ * @param {{label: string, href: string}} primary - Main CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA (optional).
+ * @param {Array<{value: string, label: string}>} stats - Proof points below the CTAs.
+ * @param {Product} product - Featured product shown on the stage.
+ * @param {string} productHref - Featured product link.
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} variant - Layout (split|centered). Default 'split'.
+ * @param {string} size - Vertical rhythm (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: one h1; decorative stage art is aria-hidden; the featured product is a real link.
+ */
+import ProductMedia from './ProductMedia.astro';
+import ProductRating from './ProductRating.astro';
+import { formatMoney } from './cart-store';
+import type { Product } from './types';
+
+interface Cta { label: string; href: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  highlight?: string;
+  subtitle?: string;
+  primary?: Cta;
+  secondary?: Cta;
+  stats?: Array<{ value: string; label: string }>;
+  product?: Product;
+  productHref?: string;
+  currency?: string;
+  locale?: string;
+  variant?: 'split' | 'centered';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  eyebrow = 'New season · 2026',
+  title = 'Gear that feels',
+  highlight = 'made for you',
+  subtitle = 'Thoughtfully designed audio, wearables and everyday carry. Free shipping over $75 and 30-day returns on everything.',
+  primary = { label: 'Shop the collection', href: '#' },
+  secondary = { label: 'Explore new arrivals', href: '#' },
+  stats = [
+    { value: '4.9/5', label: 'from 12k reviews' },
+    { value: '48h', label: 'average delivery' },
+    { value: '30 days', label: 'free returns' },
+  ],
+  product = { slug: 'aurora-headphones', name: 'Aurora Wireless Headphones', price: 189, compareAt: 229, category: 'audio', rating: 4.8, reviews: 312, icon: 'headphones', hue: 38 },
+  productHref = '#',
+  currency = 'USD',
+  locale = 'en-US',
+  variant = 'split',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const money = { currency, locale };
+---
+
+<section class:list={['store-hero', `store-hero--${variant}`, `store-hero--${size}`, className]}>
+  <div class="store-hero__glow" aria-hidden="true"></div>
+  <div class="store-hero__inner">
+    <div class="store-hero__copy">
+      {eyebrow && <p class="store-hero__eyebrow"><span aria-hidden="true"></span>{eyebrow}</p>}
+      <h1 class="store-hero__title">{title} <em>{highlight}</em></h1>
+      {subtitle && <p class="store-hero__subtitle">{subtitle}</p>}
+      <div class="store-hero__ctas">
+        {primary && (
+          <a class="store-hero__btn store-hero__btn--primary" href={primary.href}>
+            {primary.label}
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+          </a>
+        )}
+        {secondary && <a class="store-hero__btn store-hero__btn--ghost" href={secondary.href}>{secondary.label}</a>}
+      </div>
+      {stats.length > 0 && (
+        <dl class="store-hero__stats">
+          {stats.map((s) => (
+            <div><dt>{s.label}</dt><dd>{s.value}</dd></div>
+          ))}
+        </dl>
+      )}
+    </div>
+
+    {product && (
+      <div class="store-hero__stage">
+        <div class="store-hero__ring" aria-hidden="true"></div>
+        <a class="store-hero__product" href={productHref}>
+          <ProductMedia image={product.image} alt={product.name} icon={product.icon} hue={product.hue} size="lg" ratio="4 / 5" />
+          <span class="store-hero__chip store-hero__chip--price">
+            <small>{product.name}</small>
+            <strong>{formatMoney(product.price, money)}</strong>
+            {product.compareAt && <s><span class="sr-only">Was </span>{formatMoney(product.compareAt, money)}</s>}
+          </span>
+          {product.rating !== undefined && (
+            <span class="store-hero__chip store-hero__chip--rating">
+              <ProductRating value={product.rating} count={product.reviews} />
+            </span>
+          )}
+        </a>
+      </div>
+    )}
+  </div>
+</section>
+
+<style>
+  .store-hero {
+    container-type: inline-size;
+    --hero-pad: clamp(3rem, 7vw, 6rem);
+    position: relative;
+    overflow: hidden;
+    padding: var(--hero-pad) var(--sp-6, 1.5rem);
+    isolation: isolate;
+  }
+  .store-hero--sm { --hero-pad: clamp(2rem, 5vw, 3.5rem); }
+  .store-hero--lg { --hero-pad: clamp(4rem, 9vw, 8rem); }
+
+  .store-hero__glow {
+    position: absolute;
+    inset: -20% -10% auto 30%;
+    height: 120%;
+    background: radial-gradient(closest-side, rgba(212, 160, 23, 0.16), transparent 70%);
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  .store-hero__inner {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+    align-items: center;
+    gap: clamp(2rem, 5vw, 4rem);
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+  .store-hero--centered .store-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
+  .store-hero--centered .store-hero__ctas, .store-hero--centered .store-hero__stats { justify-content: center; }
+  .store-hero--centered .store-hero__stage { max-width: 420px; }
+
+  .store-hero__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    margin: 0 0 var(--sp-4, 1rem);
+    padding: 0.35rem 0.85rem;
+    border-radius: var(--r-full, 9999px);
+    border: 1px solid rgba(212, 160, 23, 0.3);
+    background: rgba(212, 160, 23, 0.08);
+    color: var(--c-accent, #fef3c7);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .store-hero__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-light, #d4a017); box-shadow: 0 0 10px var(--c-primary-light, #d4a017); }
+
+  .store-hero__title {
+    margin: 0;
+    font-size: clamp(2.4rem, 6vw, 4.6rem);
+    font-weight: 900;
+    line-height: 1.02;
+    letter-spacing: -0.04em;
+    color: var(--c-text-1, #fff);
+  }
+  .store-hero__title em {
+    display: block;
+    font-style: normal;
+    background: linear-gradient(100deg, var(--c-accent, #fef3c7), var(--c-primary-light, #d4a017) 55%, var(--c-primary, #b8860b));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .store-hero__subtitle { max-width: 34rem; margin: var(--sp-5, 1.25rem) 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .store-hero--centered .store-hero__subtitle { margin-inline: auto; }
+
+  .store-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3, 0.75rem); margin-top: var(--sp-8, 2rem); }
+  .store-hero__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    min-height: 52px;
+    padding: 0 var(--sp-6, 1.5rem);
+    border-radius: var(--r-full, 9999px);
+    font-weight: 700;
+    font-size: 0.95rem;
+    text-decoration: none;
+    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
+  }
+  .store-hero__btn--primary { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #050505); }
+  .store-hero__btn--primary:hover { color: var(--c-on-primary, #050505); filter: brightness(1.08); transform: translateY(-2px); }
+  .store-hero__btn--ghost { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14); color: var(--c-text-1, #fff); }
+  .store-hero__btn--ghost:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.05); color: var(--c-text-1, #fff); }
+  .store-hero__btn:focus-visible, .store-hero__product:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+
+  .store-hero__stats { display: flex; flex-wrap: wrap; gap: var(--sp-8, 2rem); margin: var(--sp-10, 2.5rem) 0 0; }
+  .store-hero__stats div { display: flex; flex-direction: column-reverse; }
+  .store-hero__stats dt { font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+  .store-hero__stats dd { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--c-text-1, #fff); letter-spacing: -0.02em; }
+
+  .store-hero__stage { position: relative; width: 100%; max-width: 480px; justify-self: center; }
+  .store-hero__ring {
+    position: absolute;
+    inset: 8% -6%;
+    border-radius: 50%;
+    border: 1px dashed rgba(212, 160, 23, 0.25);
+    animation: sh-spin 40s linear infinite;
+  }
+  .store-hero__product {
+    position: relative;
+    display: block;
+    border-radius: var(--r-xl, 28px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    overflow: visible;
+    color: inherit;
+    text-decoration: none;
+    animation: sh-float 7s ease-in-out infinite;
+  }
+  .store-hero__product :global(.p-media) { border-radius: var(--r-xl, 28px); }
+  .store-hero__chip {
+    position: absolute;
+    display: grid;
+    gap: 2px;
+    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);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.78);
+    backdrop-filter: blur(14px);
+    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
+    text-align: left;
+  }
+  .store-hero__chip--price { left: -6%; bottom: 12%; }
+  .store-hero__chip--price small { font-size: 0.72rem; color: var(--c-text-2, #a3a3a3); }
+  .store-hero__chip--price strong { font-size: 1.25rem; color: var(--c-text-1, #fff); }
+  .store-hero__chip--price s { font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .store-hero__chip--rating { right: -4%; top: 10%; }
+
+  @keyframes sh-float { 50% { transform: translateY(-10px); } }
+  @keyframes sh-spin { to { transform: rotate(360deg); } }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 900px) {
+    .store-hero__inner { grid-template-columns: 1fr; }
+    .store-hero__stage { max-width: 360px; }
+    .store-hero__chip--price { left: 0; }
+    .store-hero__chip--rating { right: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .store-hero__product, .store-hero__ring { animation: none; }
+  }
+</style>

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

@@ -0,0 +1,307 @@
+---
+/**
+ * StoreProductCard — Shop product tile with media, badge, rating, colour swatches,
+ * price (with compare-at), wishlist toggle and an add-to-cart button wired to the cart store.
+ *
+ * @param {Product} product - Product data (see ecommerce/types.ts). A demo product is used by default.
+ * @param {string} href - Product page URL. Default '#'.
+ * @param {string} categoryLabel - Small label above the title (e.g. category name).
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} ctaLabel - Add-to-cart label. Default 'Add to cart'.
+ * @param {string} addedLabel - Label shown briefly after adding. Default 'Added'.
+ * @param {string} cartKey - Cart storage key (several stores on one domain). Default 'ack-cart'.
+ * @param {boolean} openCart - Open the CartDrawer after adding; false fires a CartToast instead. Default true.
+ * @param {string} variant - Visual style (glass|minimal|bordered). Default 'glass'.
+ * @param {string} size - Card density (sm|md|lg). Default 'md'.
+ * @param {string} headingLevel - Title element (h2|h3|h4). Default 'h3'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the title link covers the whole card (stretched link) so there are no
+ * nested interactive elements; wishlist uses aria-pressed; out-of-stock disables the button.
+ */
+import ProductMedia from './ProductMedia.astro';
+import ProductRating from './ProductRating.astro';
+import Badge from '../feedback/Badge.astro';
+import { formatMoney } from './cart-store';
+import type { Product } from './types';
+
+interface Props {
+  product?: Product;
+  href?: string;
+  categoryLabel?: string;
+  currency?: string;
+  locale?: string;
+  ctaLabel?: string;
+  addedLabel?: string;
+  cartKey?: string;
+  openCart?: boolean;
+  variant?: 'glass' | 'minimal' | 'bordered';
+  size?: 'sm' | 'md' | 'lg';
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const {
+  product = {
+    slug: 'aurora-headphones',
+    name: 'Aurora Wireless Headphones',
+    price: 189,
+    compareAt: 229,
+    category: 'audio',
+    rating: 4.8,
+    reviews: 312,
+    badge: '-18%',
+    badgeVariant: 'warning',
+    colors: [{ name: 'Graphite', hex: '#2b2b2f' }, { name: 'Sand', hex: '#d8c3a5' }, { name: 'Ocean', hex: '#3d6f9e' }],
+    icon: 'headphones',
+    hue: 38,
+    inStock: true,
+  },
+  href = '#',
+  categoryLabel = 'Audio',
+  currency = 'USD',
+  locale = 'en-US',
+  ctaLabel = 'Add to cart',
+  addedLabel = 'Added',
+  cartKey = 'ack-cart',
+  openCart = true,
+  variant = 'glass',
+  size = 'md',
+  headingLevel = 'h3',
+  className = '',
+} = Astro.props;
+
+const Heading = headingLevel;
+const money = { currency, locale };
+const inStock = product.inStock !== false;
+const cartPayload = JSON.stringify({
+  id: product.slug,
+  name: product.name,
+  price: product.price,
+  icon: product.icon,
+  hue: product.hue,
+  image: product.image,
+  variant: product.colors?.[0]?.name,
+});
+const titleId = `spc-${product.slug}`;
+---
+
+<article
+  class:list={['sp-card', `sp-card--${variant}`, `sp-card--${size}`, 'is-hoverable', className]}
+  aria-labelledby={titleId}
+  data-product
+  data-name={product.name.toLowerCase()}
+  data-category={product.category}
+  data-price={product.price}
+  data-rating={product.rating ?? 0}
+  data-colors={(product.colors ?? []).map((c) => c.name.toLowerCase()).join(',')}
+  data-stock={inStock ? 'in' : 'out'}
+>
+  <div class="sp-card__media">
+    <ProductMedia image={product.image} alt={product.name} icon={product.icon} hue={product.hue} />
+    {product.badge && (
+      <div class="sp-card__badge"><Badge variant={product.badgeVariant ?? 'default'}>{product.badge}</Badge></div>
+    )}
+    <button class="sp-card__wish" type="button" aria-pressed="false" aria-label={`Save ${product.name} to wishlist`} data-wishlist>
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg>
+    </button>
+  </div>
+
+  <div class="sp-card__body">
+    {categoryLabel && <p class="sp-card__cat">{categoryLabel}</p>}
+    <Heading class="sp-card__title" id={titleId}>
+      <a class="sp-card__link" href={href}>{product.name}</a>
+    </Heading>
+    {product.rating !== undefined && <ProductRating value={product.rating} count={product.reviews} />}
+
+    {product.colors && product.colors.length > 0 && (
+      <ul class="sp-card__swatches" aria-label={`Colours: ${product.colors.map((c) => c.name).join(', ')}`}>
+        {product.colors.slice(0, 4).map((c) => (
+          <li class="sp-card__swatch" style={`--sw: ${c.hex}`} title={c.name} />
+        ))}
+        {product.colors.length > 4 && <li class="sp-card__swatch-more">+{product.colors.length - 4}</li>}
+      </ul>
+    )}
+
+    <div class="sp-card__foot">
+      <p class="sp-card__price">
+        <span class="sp-card__now">{formatMoney(product.price, money)}</span>
+        {product.compareAt && (
+          <s class="sp-card__was"><span class="sr-only">Was </span>{formatMoney(product.compareAt, money)}</s>
+        )}
+      </p>
+      <button
+        class="sp-card__add"
+        type="button"
+        data-add-to-cart={cartPayload}
+        data-cart-key={cartKey}
+        data-open-cart={openCart ? undefined : 'false'}
+        data-added-label={addedLabel}
+        disabled={!inStock}
+        aria-label={inStock ? `${ctaLabel}: ${product.name}` : `${product.name} is sold out`}
+      >
+        <svg width="16" height="16" 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 6h15l-1.5 9h-12z"/><path d="M6 6 5 3H2"/><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/></svg>
+        <span data-label>{inStock ? ctaLabel : 'Sold out'}</span>
+      </button>
+    </div>
+  </div>
+</article>
+
+<script>
+  import { bindAddToCart } from './cart-store';
+
+  function init() {
+    bindAddToCart(document);
+    document.querySelectorAll<HTMLButtonElement>('[data-wishlist]:not([data-wish-bound])').forEach((btn) => {
+      btn.dataset.wishBound = '';
+      btn.addEventListener('click', () => {
+        btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
+      });
+    });
+  }
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>
+
+<style>
+  .sp-card {
+    container-type: inline-size;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--r-lg, 20px);
+    overflow: hidden;
+    background: var(--c-surface, rgb(var(--ink-rgb, 255 255 255) / 0.02));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+    transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
+  }
+  .sp-card--glass {
+    background: linear-gradient(180deg, rgb(var(--ink-rgb, 255 255 255) / 0.035), rgb(var(--ink-rgb, 255 255 255) / 0.01));
+    backdrop-filter: blur(10px);
+  }
+  .sp-card--minimal { background: transparent; border-color: transparent; }
+  .sp-card--bordered { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.12); }
+  .sp-card:hover {
+    border-color: rgba(212, 160, 23, 0.35);
+    transform: translateY(-3px);
+    box-shadow: 0 18px 40px -22px rgba(212, 160, 23, 0.45);
+  }
+  .sp-card:focus-within {
+    outline: 2px solid var(--c-primary-light, #d4a017);
+    outline-offset: 2px;
+  }
+
+  .sp-card__media { position: relative; border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0; }
+  .sp-card--minimal .sp-card__media { border-radius: var(--r-lg, 20px); }
+  .sp-card__badge { position: absolute; top: var(--sp-3, 0.75rem); left: var(--sp-3, 0.75rem); z-index: 3; }
+  .sp-card__wish {
+    position: absolute;
+    top: var(--sp-2, 0.5rem);
+    right: var(--sp-2, 0.5rem);
+    z-index: 3;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--r-full, 9999px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.55);
+    backdrop-filter: blur(8px);
+    color: var(--c-text-1, #fff);
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+  }
+  .sp-card__wish:hover { transform: scale(1.06); }
+  .sp-card__wish[aria-pressed='true'] { color: var(--c-danger, #f87171); }
+  .sp-card__wish[aria-pressed='true'] svg { fill: currentColor; }
+  .sp-card__wish:focus-visible,
+  .sp-card__add:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+
+  .sp-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2, 0.5rem);
+    padding: var(--sp-4, 1rem) var(--sp-4, 1rem) var(--sp-5, 1.25rem);
+    flex: 1;
+  }
+  .sp-card--sm .sp-card__body { padding: var(--sp-3, 0.75rem); }
+  .sp-card--lg .sp-card__body { padding: var(--sp-6, 1.5rem); }
+  .sp-card--minimal .sp-card__body { padding-inline: 0; }
+
+  .sp-card__cat {
+    margin: 0;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--c-primary-light, #d4a017);
+  }
+  .sp-card__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
+  .sp-card--lg .sp-card__title { font-size: 1.15rem; }
+  .sp-card__link { color: var(--c-text-1, #fff); text-decoration: none; }
+  .sp-card__link:focus-visible { outline: none; }
+  .sp-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
+
+  .sp-card__swatches { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
+  .sp-card__swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--sw);
+    box-shadow: 0 0 0 1px rgb(var(--ink-rgb, 255 255 255) / 0.25);
+  }
+  .sp-card__swatch-more { font-size: 0.72rem; color: var(--c-text-2, #a3a3a3); }
+
+  .sp-card__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sp-3, 0.75rem);
+    margin-top: auto;
+    padding-top: var(--sp-2, 0.5rem);
+  }
+  .sp-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2, 0.5rem); margin: 0; }
+  .sp-card__now { font-size: 1.1rem; font-weight: 800; color: var(--c-text-1, #fff); }
+  .sp-card__was { font-size: 0.82rem; color: var(--c-text-2, #a3a3a3); }
+
+  .sp-card__add {
+    position: relative;
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 44px;
+    padding: 0 var(--sp-4, 1rem);
+    border: 0;
+    border-radius: var(--r-full, 9999px);
+    background: var(--c-primary-light, #d4a017);
+    color: var(--c-on-primary, #050505);
+    font: inherit;
+    font-size: 0.82rem;
+    font-weight: 700;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
+  }
+  .sp-card__add:hover { filter: brightness(1.08); transform: translateY(-1px); }
+  .sp-card__add:disabled { background: rgb(var(--ink-rgb, 255 255 255) / 0.08); color: var(--c-text-2, #a3a3a3); cursor: not-allowed; transform: none; }
+  .sp-card__add.is-added { background: var(--c-success, #34d399); }
+  .sp-card--sm .sp-card__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .sp-card--sm .sp-card__add { width: 44px; padding: 0; justify-content: center; }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  /* Narrow cards (2-up on phones): stack price above a full-width button */
+  @container (max-width: 250px) {
+    .sp-card__body { padding: var(--sp-3, 0.75rem) var(--sp-3, 0.75rem) var(--sp-4, 1rem); }
+    .sp-card__foot { flex-direction: column; align-items: stretch; gap: var(--sp-2, 0.5rem); }
+    .sp-card__add { justify-content: center; }
+    .sp-card__title { font-size: 0.92rem; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sp-card, .sp-card__add, .sp-card__wish { transition: none; }
+    .sp-card:hover { transform: none; }
+  }
+</style>

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

@@ -0,0 +1,101 @@
+---
+/**
+ * TrustBadges — Row of store guarantees (shipping, returns, secure payment, support).
+ *
+ * @param {Array<{icon: string, title: string, text?: string}>} items - Badges. Icons: truck|return|lock|chat|gift|leaf.
+ * @param {string} variant - Style (cards|inline|divided). Default 'cards'.
+ * @param {string} size - Density (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: plain list; icons are decorative.
+ */
+interface Item { icon: 'truck' | 'return' | 'lock' | 'chat' | 'gift' | 'leaf'; title: string; text?: string }
+interface Props {
+  items?: Item[];
+  variant?: 'cards' | 'inline' | 'divided';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  items = [
+    { icon: 'truck', title: 'Free shipping', text: 'On orders over $75' },
+    { icon: 'return', title: '30-day returns', text: 'No questions asked' },
+    { icon: 'lock', title: 'Secure checkout', text: 'SSL & 3-D Secure' },
+    { icon: 'chat', title: 'Real humans', text: 'Support 7 days a week' },
+  ],
+  variant = 'cards',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const icons: Record<Item['icon'], string> = {
+  truck: '<path d="M3 6h11v10H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/>',
+  return: '<path d="M4 10h11a5 5 0 0 1 0 10H9"/><path d="m8 6-4 4 4 4"/>',
+  lock: '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+  chat: '<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.6A8 8 0 1 1 21 12z"/>',
+  gift: '<rect x="3" y="8" width="18" height="5" rx="1"/><path d="M5 13v8h14v-8M12 8v13M12 8S10 3 7.5 4 9 8 12 8zm0 0s2-5 4.5-4S15 8 12 8z"/>',
+  leaf: '<path d="M5 19c0-9 6-14 15-14 0 9-5 15-14 15"/><path d="M5 19c3-4 6-6 10-8"/>',
+};
+---
+
+<div class="trust-badges-cq">
+<ul class:list={['trust-badges', `trust-badges--${variant}`, `trust-badges--${size}`, className]}>
+  {items.map((item) => (
+    <li class="trust-badge">
+      <span class="trust-badge__icon" aria-hidden="true">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><Fragment set:html={icons[item.icon]} /></svg>
+      </span>
+      <span class="trust-badge__text">
+        <strong>{item.title}</strong>
+        {item.text && <span>{item.text}</span>}
+      </span>
+    </li>
+  ))}
+</ul>
+</div>
+
+<style>
+  .trust-badges-cq { container-type: inline-size; }
+  .trust-badges {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--sp-4, 1rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .trust-badge { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); }
+  .trust-badges--cards .trust-badge {
+    padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
+    border-radius: var(--r-md, 12px);
+    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));
+  }
+  .trust-badges--divided { gap: 0; border-block: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .trust-badges--divided .trust-badge { padding: var(--sp-5, 1.25rem); }
+  .trust-badges--divided .trust-badge + .trust-badge { border-left: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
+  .trust-badges--sm .trust-badge { padding-block: var(--sp-3, 0.75rem); }
+  .trust-badges--lg .trust-badge { padding-block: var(--sp-6, 1.5rem); }
+
+  .trust-badge__icon {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--r-sm, 8px);
+    background: rgba(212, 160, 23, 0.1);
+    color: var(--c-primary-light, #d4a017);
+  }
+  .trust-badges--inline .trust-badge__icon { width: 32px; height: 32px; background: transparent; }
+  .trust-badge__text { display: grid; gap: 1px; }
+  .trust-badge__text strong { font-size: 0.92rem; color: var(--c-text-1, #fff); }
+  .trust-badge__text span { font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+
+  @container (max-width: 640px) {
+    .trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 0.5rem); }
+    .trust-badges--divided .trust-badge + .trust-badge { border-left: 0; }
+    .trust-badge { flex-direction: column; align-items: flex-start; }
+  }
+</style>