astro-component-kit 0.4.0 → 0.4.1

package/src/components/lib/templates/ecommerce/StoreHomePage.astro

@@ -0,0 +1,191 @@
+---
+/**
+ * StoreHomePage — E-commerce template home: hero, guarantees, categories, best sellers,
+ * editorial banner, new arrivals, press logos and newsletter.
+ *
+ * Usage (src/pages/index.astro):
+ *   import { StoreHomePage } from 'astro-component-kit/templates/ecommerce';
+ *   <StoreHomePage />
+ *
+ * @param {StoreConfig} store - Catalogue and settings. Default: demo store.
+ * @param {StoreRoutes} routes - Page URLs. Default: '/', '/shop/', '/product/', '/checkout/'.
+ * @param {boolean} seedCart - Pre-fill the cart with demo items. Default false.
+ * @param {string} theme - Initial theme (dark|light|auto). Default 'dark'.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import StoreLayout from './StoreLayout.astro';
+import StoreHero from '../../ecommerce/StoreHero.astro';
+import TrustBadges from '../../ecommerce/TrustBadges.astro';
+import CategoryTiles from '../../ecommerce/CategoryTiles.astro';
+import ProductGrid from '../../ecommerce/ProductGrid.astro';
+import ProductMedia from '../../ecommerce/ProductMedia.astro';
+import CountdownBanner from '../../ecommerce/CountdownBanner.astro';
+import LogoCloudSection from '../../sections/LogoCloudSection.astro';
+import CtaNewsletterSection from '../../sections/CtaNewsletterSection.astro';
+import { demoStore, defaultRoutes, productHref, categoryHref, categoryNames, pickProducts, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  seedCart?: boolean;
+  noindex?: boolean;
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+const { store = demoStore, routes = defaultRoutes, seedCart = false, noindex = false, theme = 'dark' } = Astro.props;
+
+const names = categoryNames(store);
+const best = pickProducts(store, store.bestSellers);
+const fresh = pickProducts(store, store.newArrivals);
+const heroProduct = best[0] ?? store.products[0];
+const tiles = store.categories.map((c) => ({
+  ...c,
+  href: categoryHref(routes, c.id),
+  count: store.products.filter((p) => p.category === c.id).length,
+}));
+const feature = store.products.find((p) => p.slug === 'storm-jacket') ?? store.products[store.products.length - 1];
+const shared = { productBase: routes.product, categoryNames: names, currency: store.currency, locale: store.locale, cartKey: store.cartKey, openCart: false };
+---
+
+<StoreLayout theme={theme} title={`${store.name} — ${store.tagline.split('.')[0]}`} description={store.tagline} store={store} routes={routes} currentHref={routes.home} seedCart={seedCart} noindex={noindex} liveActivity>
+  <StoreHero
+    eyebrow="New season · 2026"
+    title="Gear that feels"
+    highlight="made for you"
+    subtitle={`${store.tagline} Free shipping over ${new Intl.NumberFormat(store.locale, { style: 'currency', currency: store.currency, maximumFractionDigits: 0 }).format(store.freeShippingThreshold)}.`}
+    primary={{ label: 'Shop the collection', href: routes.shop }}
+    secondary={{ label: 'See best sellers', href: `${routes.shop}?sort=rating` }}
+    product={heroProduct}
+    productHref={productHref(routes, heroProduct.slug)}
+    currency={store.currency}
+    locale={store.locale}
+  />
+
+  <div class="store-container home-block home-block--tight">
+    <TrustBadges />
+  </div>
+
+  <div class="store-container home-block">
+    <CategoryTiles title="Shop by category" subtitle="Five small collections, each one obsessively edited." categories={tiles} columns={5} />
+  </div>
+
+  <section class="store-container home-block" aria-labelledby="best-title">
+    <div class="home-head">
+      <div>
+        <p class="home-eyebrow">Loved by 12k+ customers</p>
+        <h2 id="best-title">Best sellers</h2>
+      </div>
+      <a class="home-link" href={`${routes.shop}?sort=rating`}>View all <span aria-hidden="true">→</span></a>
+    </div>
+    <ProductGrid id="best-sellers" products={best} {...shared} />
+  </section>
+
+  <section class="store-container home-block" aria-labelledby="feature-title">
+    <div class="feature">
+      <div class="feature__copy">
+        <p class="home-eyebrow">The Storm edit</p>
+        <h2 id="feature-title">Built for weather you'd rather avoid</h2>
+        <p>Three-layer shells, sealed seams and recycled fabrics. Tested in the Scottish Highlands so you don't have to.</p>
+        <ul class="feature__list">
+          <li>Waterproof to 20,000 mm</li>
+          <li>Made from 100% recycled nylon</li>
+          <li>Lifetime repair programme</li>
+        </ul>
+        <a class="feature__cta" href={productHref(routes, feature.slug)}>Shop {feature.name}</a>
+      </div>
+      <div class="feature__art" aria-hidden="true">
+        <ProductMedia icon={feature.icon} hue={feature.hue} ratio="4 / 3" size="lg" />
+      </div>
+    </div>
+  </section>
+
+  <div class="store-container home-block">
+    <CountdownBanner
+      eyebrow="Flash sale · ends soon"
+      title="Up to 30% off the Storm collection"
+      text="Waterproof shells and insulated layers at their lowest price of the season. Free returns, as always."
+      cta={{ label: 'Shop the sale', href: productHref(routes, feature.slug) }}
+      hours={36}
+      storageKey={`${store.cartKey}-sale`}
+    />
+  </div>
+
+  <section class="store-container home-block" aria-labelledby="new-title">
+    <div class="home-head">
+      <div>
+        <p class="home-eyebrow">Just landed</p>
+        <h2 id="new-title">New arrivals</h2>
+      </div>
+      <a class="home-link" href={routes.shop}>Shop all <span aria-hidden="true">→</span></a>
+    </div>
+    <ProductGrid id="new-arrivals" products={fresh} {...shared} />
+  </section>
+
+  <LogoCloudSection
+    title="AS FEATURED IN"
+    logos={[
+      { name: 'Northwind', symbol: '◆' },
+      { name: 'Lumen Daily', symbol: '●' },
+      { name: 'Gearbox', symbol: '▲' },
+      { name: 'Field Notes', symbol: '✦' },
+      { name: 'Outpost', symbol: '◎' },
+      { name: 'Kinfolk Lab', symbol: '■' },
+    ]}
+  />
+
+  <div class="store-container home-block">
+    <CtaNewsletterSection
+      title="Get 10% off your first order"
+      subtitle="Join the list for early access to drops, restocks and members-only offers."
+      perks={['One email a week', 'Early access to new drops', 'Unsubscribe anytime']}
+      buttonLabel="Join the list"
+      privacy="By subscribing you agree to our privacy policy."
+      variant="glass"
+    />
+  </div>
+</StoreLayout>
+
+<style>
+  .home-block { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
+  .home-block--tight { padding-top: 0; }
+  .home-block:last-child { padding-bottom: clamp(3rem, 7vw, 5rem); }
+
+  .home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
+  .home-head h2, .feature h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900; letter-spacing: -0.035em; color: var(--c-text-1); }
+  .home-eyebrow { margin: 0 0 var(--sp-2); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary-light); }
+  .home-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 700; white-space: nowrap; }
+
+  .feature {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    align-items: center;
+    gap: clamp(1.5rem, 4vw, 3.5rem);
+    padding: clamp(1.5rem, 4vw, 3rem);
+    border-radius: var(--r-xl);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07);
+    background: radial-gradient(circle at 0% 0%, rgba(147, 51, 234, 0.12), transparent 50%), var(--c-surface);
+  }
+  .feature__copy p:not(.home-eyebrow) { margin: var(--sp-4) 0 0; max-width: 32rem; line-height: 1.7; }
+  .feature__list { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
+  .feature__list li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-1); font-size: 0.92rem; }
+  .feature__list li::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: rgba(212, 160, 23, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a017' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
+  .feature__cta {
+    display: inline-flex;
+    align-items: center;
+    min-height: 50px;
+    margin-top: var(--sp-6);
+    padding: 0 var(--sp-6);
+    border-radius: var(--r-full);
+    background: var(--c-text-1);
+    color: var(--c-bg);
+    font-weight: 800;
+  }
+  .feature__cta:hover { color: var(--c-bg); background: var(--c-accent); }
+  .feature__cta:focus-visible, .home-link:focus-visible { outline: 2px solid var(--c-primary-light); outline-offset: 3px; }
+  .feature__art { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); }
+
+  @media (max-width: 800px) {
+    .feature { grid-template-columns: 1fr; }
+    .feature__art { order: -1; }
+  }
+</style>

package/src/components/lib/templates/ecommerce/StoreLayout.astro

@@ -0,0 +1,169 @@
+---
+/**
+ * StoreLayout — Full HTML document for the e-commerce template: promo bar, StoreHeader with
+ * category menu, CartDrawer, main content slot and FooterMegaSection.
+ *
+ * @param {string} title - Page title (store name is appended).
+ * @param {string} description - Meta description.
+ * @param {StoreConfig} store - Catalogue and settings. Default: the demo store.
+ * @param {StoreRoutes} routes - Page URLs. Default: '/', '/shop/', '/product/', '/checkout/'.
+ * @param {string} currentHref - Highlights the matching menu link.
+ * @param {boolean} seedCart - Pre-fill an empty cart with two demo items (previews only). Default false.
+ * @param {boolean} noindex - Add robots noindex (previews, staging). Default false.
+ * @param {boolean} minimal - Hide promo bar and menu (checkout focus mode). Default false.
+ * @param {string} lang - Document language. Default 'en'.
+ * @param {string} theme - Initial theme (dark|light|auto). The header toggle overrides it per visitor. Default 'dark'.
+ * @param {boolean} liveActivity - Show rotating recent-purchase notices (store.recentBuyers). Default false.
+ * @param {boolean} themeToggle - Show the light/dark toggle in the header. Default true.
+ *
+ * Slots: default (page content), `head` (extra tags in <head>).
+ */
+import '../../../../styles/global.css';
+import PromoBar from '../../ecommerce/PromoBar.astro';
+import StoreHeader from '../../ecommerce/StoreHeader.astro';
+import CartDrawer from '../../ecommerce/CartDrawer.astro';
+import FooterMegaSection from '../../sections/FooterMegaSection.astro';
+import CartToast from '../../ecommerce/CartToast.astro';
+import LiveActivityToast from '../../ecommerce/LiveActivityToast.astro';
+import { demoStore, defaultRoutes, categoryHref, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  title: string;
+  description?: string;
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  currentHref?: string;
+  seedCart?: boolean;
+  noindex?: boolean;
+  minimal?: boolean;
+  lang?: string;
+  theme?: 'dark' | 'light' | 'auto';
+  themeToggle?: boolean;
+  liveActivity?: boolean;
+}
+
+const {
+  title,
+  description,
+  store = demoStore,
+  routes = defaultRoutes,
+  currentHref,
+  seedCart = false,
+  noindex = false,
+  minimal = false,
+  lang = 'en',
+  theme = 'dark',
+  themeToggle = true,
+  liveActivity = false,
+} = Astro.props;
+
+const fullTitle = title.includes(store.name) ? title : `${title} — ${store.name}`;
+const links = [
+  {
+    label: 'Shop',
+    href: routes.shop,
+    children: store.categories.map((c) => ({ label: c.name, href: categoryHref(routes, c.id), description: c.description })),
+  },
+  { label: 'New in', href: `${routes.shop}?sort=featured` },
+  { label: 'Top rated', href: `${routes.shop}?sort=rating` },
+  { label: 'Sale', href: `${routes.shop}?sort=price-asc` },
+];
+const seed = seedCart
+  ? store.products.slice(0, 1).concat(store.products.filter((p) => p.slug === 'ember-mug')).map((p, i) => ({
+      id: p.colors?.[0] ? `${p.slug}::${p.colors[0].name}` : p.slug,
+      name: p.name,
+      price: p.price,
+      qty: i === 0 ? 1 : 2,
+      variant: p.colors?.[0]?.name,
+      icon: p.icon,
+      hue: p.hue,
+    }))
+  : [];
+const activity = liveActivity
+  ? store.recentBuyers
+      .map((b) => {
+        const p = store.products.find((x) => x.slug === b.product);
+        return p ? { name: b.name, city: b.city, ago: b.ago, product: p.name, href: `${routes.product}${p.slug}/`, icon: p.icon, hue: p.hue } : null;
+      })
+      .filter((x): x is NonNullable<typeof x> => Boolean(x))
+  : [];
+const footer = [
+  { title: 'Shop', links: store.categories.map((c) => ({ label: c.name, href: categoryHref(routes, c.id) })) },
+  ...store.footer.slice(1),
+];
+---
+
+<!doctype html>
+<html lang={lang} data-theme={theme === 'auto' ? 'dark' : theme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{fullTitle}</title>
+    {description && <meta name="description" content={description} />}
+    {noindex && <meta name="robots" content="noindex, follow" />}
+    <meta name="theme-color" content={theme === 'light' ? '#f6f5f2' : '#050505'} />
+    <script is:inline define:vars={{ initial: theme, allowToggle: themeToggle }}>
+      (function () {
+        var t = initial;
+        try { if (allowToggle) t = localStorage.getItem('ack-theme') || t; } catch (e) {}
+        if (t === 'auto') t = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        document.documentElement.dataset.theme = t;
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body class="store">
+    <a class="store__skip" href="#main">Skip to content</a>
+    {!minimal && <PromoBar messages={store.promoMessages} storageKey={`${store.cartKey}-promo`} />}
+    <StoreHeader
+      brand={store.name}
+      brandHref={routes.home}
+      links={minimal ? [] : links}
+      searchAction={routes.shop}
+      accountHref=""
+      cartKey={store.cartKey}
+      currentHref={currentHref}
+      themeToggle={themeToggle}
+    />
+    <main id="main" class="store__main" tabindex="-1">
+      <slot />
+    </main>
+    <FooterMegaSection
+      brand={store.name}
+      tagline={store.tagline}
+      columns={footer}
+      status="All orders shipping on time"
+      copyright={`© ${new Date().getFullYear()} ${store.name}. Demo store built with Astro Components Kit.`}
+    />
+    <CartDrawer
+      cartKey={store.cartKey}
+      checkoutHref={routes.checkout}
+      currency={store.currency}
+      locale={store.locale}
+      freeShippingThreshold={store.freeShippingThreshold}
+      demoItems={seed}
+    />
+    <CartToast cartKey={store.cartKey} />
+    {activity.length > 0 && <LiveActivityToast items={activity} storageKey={`${store.cartKey}-activity`} />}
+  </body>
+</html>
+
+<style is:global>
+  body.store { overflow-x: clip; }
+  .store__main { position: relative; z-index: 1; outline: none; }
+  .store__skip {
+    position: fixed;
+    top: -60px;
+    left: 12px;
+    z-index: 2000;
+    padding: 0.6rem 1rem;
+    border-radius: 999px;
+    background: var(--c-primary-light);
+    color: var(--c-on-primary);
+    font-weight: 700;
+    transition: top 0.2s ease;
+  }
+  .store__skip:focus { top: 12px; color: var(--c-on-primary); }
+  .store-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }
+  @media (max-width: 640px) { .store-container { padding: 0 var(--sp-4); } }
+</style>

package/src/components/lib/templates/ecommerce/StoreProductPage.astro

@@ -0,0 +1,165 @@
+---
+/**
+ * StoreProductPage — E-commerce template product detail: breadcrumb, ProductGallery,
+ * ProductBuyBox, reviews summary and related products.
+ *
+ * Usage (src/pages/product/[slug].astro):
+ *   import { StoreProductPage, demoStore } from 'astro-component-kit/templates/ecommerce';
+ *   export const getStaticPaths = () => demoStore.products.map((p) => ({ params: { slug: p.slug } }));
+ *   <StoreProductPage slug={Astro.params.slug} />
+ *
+ * @param {string} slug - Product slug to show. Default: first product.
+ * @param {StoreConfig} store - Catalogue and settings. Default: demo store.
+ * @param {StoreRoutes} routes - Page URLs.
+ * @param {boolean} seedCart - Pre-fill the cart with demo items. Default false.
+ * @param {string} theme - Initial theme (dark|light|auto). Default 'dark'.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import StoreLayout from './StoreLayout.astro';
+import ProductGallery from '../../ecommerce/ProductGallery.astro';
+import ProductBuyBox from '../../ecommerce/ProductBuyBox.astro';
+import ProductRating from '../../ecommerce/ProductRating.astro';
+import ProductGrid from '../../ecommerce/ProductGrid.astro';
+import { demoStore, defaultRoutes, categoryHref, categoryNames, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  slug?: string;
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  seedCart?: boolean;
+  noindex?: boolean;
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+const { slug, store = demoStore, routes = defaultRoutes, seedCart = false, noindex = false, theme = 'dark' } = Astro.props;
+
+const product = store.products.find((p) => p.slug === slug) ?? store.products[0];
+const category = store.categories.find((c) => c.id === product.category);
+const related = store.products
+  .filter((p) => p.slug !== product.slug)
+  .sort((a, b) => Number(b.category === product.category) - Number(a.category === product.category))
+  .slice(0, 4);
+
+// Deterministic demo review distribution derived from the rating.
+const total = product.reviews ?? 0;
+const r = product.rating ?? 0;
+const weights = [Math.max(0, r - 3.6) * 3, 1.2, 0.5, 0.2, 0.12];
+const sum = weights.reduce((a, b) => a + b, 0) || 1;
+const bars = [5, 4, 3, 2, 1].map((stars, i) => ({ stars, count: Math.round((weights[i] / sum) * total) }));
+const reviews = [
+  { name: 'Maya R.', title: 'Exceeded expectations', body: 'Beautifully made and it arrived in two days. I have already ordered a second one as a gift.', rating: 5 },
+  { name: 'Jonas K.', title: 'Great quality', body: 'Feels premium and the details are spot on. Packaging was plastic-free, which I appreciated.', rating: 5 },
+  { name: 'Lea M.', title: 'Almost perfect', body: 'Love the colour and the finish. Took a few days to get used to, but now I use it every day.', rating: 4 },
+];
+const money = new Intl.NumberFormat(store.locale, { style: 'currency', currency: store.currency, maximumFractionDigits: 0 }).format(store.freeShippingThreshold);
+---
+
+<StoreLayout theme={theme} title={product.name} description={product.description} store={store} routes={routes} seedCart={seedCart} noindex={noindex}>
+  <div class="store-container pdp">
+    <nav class="crumbs" aria-label="Breadcrumb">
+      <ol>
+        <li><a href={routes.home}>Home</a></li>
+        <li><a href={routes.shop}>Shop</a></li>
+        {category && <li><a href={categoryHref(routes, category.id)}>{category.name}</a></li>}
+        <li><span aria-current="page">{product.name}</span></li>
+      </ol>
+    </nav>
+
+    <div class="pdp__main">
+      <ProductGallery images={product.image ? [product.image] : []} alt={product.name} icon={product.icon} hue={product.hue} />
+      <ProductBuyBox
+        product={product}
+        categoryLabel={category?.name}
+        checkoutHref={routes.checkout}
+        currency={store.currency}
+        locale={store.locale}
+        cartKey={store.cartKey}
+        details={[
+          { title: 'Details', body: product.description ?? '' },
+          { title: 'Shipping & returns', body: `Free standard shipping over ${money}, 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.' },
+        ]}
+      />
+    </div>
+
+    {total > 0 && (
+      <section class="reviews" id="reviews" aria-labelledby="reviews-title">
+        <div class="reviews__summary">
+          <h2 id="reviews-title">Customer reviews</h2>
+          <p class="reviews__score">{r.toFixed(1)}<span>/5</span></p>
+          <ProductRating value={r} count={total} size="lg" showValue={false} />
+          <ul class="reviews__bars" aria-label="Rating distribution">
+            {bars.map((b) => (
+              <li>
+                <span>{b.stars} ★</span>
+                <span class="reviews__bar" aria-hidden="true"><span style={`width: ${total ? (b.count / total) * 100 : 0}%`}></span></span>
+                <span class="reviews__count">{b.count}<span class="sr-only"> reviews with {b.stars} stars</span></span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <ul class="reviews__list">
+          {reviews.map((rv) => (
+            <li class="review">
+              <ProductRating value={rv.rating} showValue={false} />
+              <h3>{rv.title}</h3>
+              <p>{rv.body}</p>
+              <p class="review__by">{rv.name} · <span>Verified buyer</span></p>
+            </li>
+          ))}
+        </ul>
+      </section>
+    )}
+
+    <section class="related" aria-labelledby="related-title">
+      <h2 id="related-title">You may also like</h2>
+      <ProductGrid id="related" products={related} productBase={routes.product} categoryNames={categoryNames(store)} currency={store.currency} locale={store.locale} cartKey={store.cartKey} openCart={false} />
+    </section>
+  </div>
+</StoreLayout>
+
+<style>
+  .pdp { padding-block: var(--sp-6) clamp(3rem, 7vw, 5rem); }
+  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; font-size: 0.85rem; }
+  .crumbs li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); }
+  .crumbs li + li::before { content: '/'; opacity: 0.5; }
+  .crumbs a { color: var(--c-text-2); }
+  .crumbs a:hover { color: var(--c-text-1); }
+  .crumbs [aria-current='page'] { color: var(--c-text-1); font-weight: 600; }
+
+  .pdp__main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
+  .pdp__main > :global(.p-gallery-cq) { position: sticky; top: 88px; }
+
+  .reviews {
+    display: grid;
+    grid-template-columns: 300px minmax(0, 1fr);
+    gap: clamp(1.5rem, 4vw, 3.5rem);
+    margin-top: clamp(3rem, 7vw, 5rem);
+    padding-top: clamp(2rem, 5vw, 3rem);
+    border-top: 1px solid var(--c-border);
+  }
+  .reviews h2, .related h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; letter-spacing: -0.03em; color: var(--c-text-1); }
+  .reviews__score { margin: 0; font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--c-text-1); letter-spacing: -0.04em; }
+  .reviews__score span { font-size: 1.1rem; color: var(--c-text-2); font-weight: 600; }
+  .reviews__summary :global(.p-rating) { margin: var(--sp-3) 0 var(--sp-5); }
+  .reviews__bars { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
+  .reviews__bars li { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: var(--sp-3); font-size: 0.82rem; }
+  .reviews__bar { height: 8px; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.07); overflow: hidden; }
+  .reviews__bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary-light); }
+  .reviews__count { text-align: right; color: var(--c-text-2); }
+
+  .reviews__list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
+  .review { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--c-surface); }
+  .review h3 { margin: 0; font-size: 1rem; color: var(--c-text-1); }
+  .review p { margin: 0; line-height: 1.65; font-size: 0.92rem; }
+  .review__by { font-size: 0.82rem !important; color: var(--c-text-1); font-weight: 600; }
+  .review__by span { color: var(--c-success, #34d399); font-weight: 500; }
+
+  .related { margin-top: clamp(3rem, 7vw, 5rem); }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @media (max-width: 900px) {
+    .pdp__main, .reviews { grid-template-columns: 1fr; }
+    .pdp__main > :global(.p-gallery-cq) { position: static; }
+  }
+</style>