diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index ee1fa46e..5bfb4d09 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -90,6 +90,8 @@ export default async function AdminProductsPage({
 
   const csrfTokenStatus = issueCsrfToken('admin:products:status');
   const csrfTokenDelete = issueCsrfToken('admin:products:delete');
+  const TH_BASE =
+    'px-3 py-2 text-left text-xs font-semibold text-foreground leading-tight whitespace-normal break-words';
 
   return (
     <>
@@ -109,7 +111,7 @@ export default async function AdminProductsPage({
 
           <Link
             href="/shop/admin/products/new"
-            className="inline-flex items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
           >
             {t('newProduct')}
           </Link>
@@ -159,7 +161,9 @@ export default async function AdminProductsPage({
 
                       <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">{t('table.category')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.category')}
+                          </dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.category ?? '-'}
@@ -169,7 +173,9 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">{t('table.type')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.type')}
+                          </dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.type ?? '-'}
@@ -179,31 +185,43 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.stock')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.stock')}
+                          </dt>
                           <dd className="text-foreground">{row.stock}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.badge')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.badge')}
+                          </dt>
                           <dd className="text-foreground">{badge}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.active')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.active')}
+                          </dt>
                           <dd className="text-foreground">
                             {row.isActive ? t('actions.yes') : t('actions.no')}
                           </dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.featured')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.featured')}
+                          </dt>
                           <dd className="text-foreground">
-                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
+                            {row.isFeatured
+                              ? t('actions.yes')
+                              : t('actions.no')}
                           </dd>
                         </div>
 
                         <div className="col-span-2">
-                          <dt className="text-muted-foreground">{t('table.created')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.created')}
+                          </dt>
                           <dd className="text-foreground">
                             {formatDate(row.createdAt, locale)}
                           </dd>
@@ -214,7 +232,9 @@ export default async function AdminProductsPage({
                         <Link
                           href={`/shop/products/${row.slug}`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={t('actions.viewProduct', { title: row.title })}
+                          aria-label={t('actions.viewProduct', {
+                            title: row.title,
+                          })}
                         >
                           {t('actions.view')}
                         </Link>
@@ -222,7 +242,9 @@ export default async function AdminProductsPage({
                         <Link
                           href={`/shop/admin/products/${row.id}/edit`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={t('actions.editProduct', { title: row.title })}
+                          aria-label={t('actions.editProduct', {
+                            title: row.title,
+                          })}
                         >
                           {t('actions.edit')}
                         </Link>
@@ -253,73 +275,52 @@ export default async function AdminProductsPage({
             <div className="overflow-x-auto">
               <table className="w-full table-fixed divide-y divide-border text-sm">
                 <caption className="sr-only">{t('listCaption')}</caption>
-
+                <colgroup>
+                  <col className="w-[9.5rem]" />
+                  <col className="w-[8rem]" />
+                  <col className="w-[6.5rem]" />
+                  <col className="w-[6rem]" />
+                  <col className="w-[5.5rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[4rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[4.5rem]" />
+                  <col className="w-[11rem]" />
+                </colgroup>
                 <thead className="bg-muted/50">
                   <tr>
-                    <th
-                      scope="col"
-                      className="w-[20%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.title')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[18%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.slug')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.price')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.category')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.type')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.stock')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.badge')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.active')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[6%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.featured')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.created')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[9%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.actions')}
                     </th>
                   </tr>
@@ -379,7 +380,9 @@ export default async function AdminProductsPage({
 
                         <td className="whitespace-nowrap px-3 py-2">
                           <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
-                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
+                            {row.isFeatured
+                              ? t('actions.yes')
+                              : t('actions.no')}
                           </span>
                         </td>
 
@@ -388,19 +391,23 @@ export default async function AdminProductsPage({
                         </td>
 
                         <td className="px-3 py-2">
-                          <div className="flex flex-wrap gap-2">
+                          <div className="grid grid-cols-2 gap-2">
                             <Link
                               href={`/shop/products/${row.slug}`}
-                              className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={t('actions.viewProduct', { title: row.title })}
+                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              aria-label={t('actions.viewProduct', {
+                                title: row.title,
+                              })}
                             >
                               {t('actions.view')}
                             </Link>
 
                             <Link
                               href={`/shop/admin/products/${row.id}/edit`}
-                              className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={t('actions.editProduct', { title: row.title })}
+                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              aria-label={t('actions.editProduct', {
+                                title: row.title,
+                              })}
                             >
                               {t('actions.edit')}
                             </Link>
diff --git a/frontend/app/[locale]/shop/cart/page.tsx b/frontend/app/[locale]/shop/cart/page.tsx
index 5f22926d..658fe356 100644
--- a/frontend/app/[locale]/shop/cart/page.tsx
+++ b/frontend/app/[locale]/shop/cart/page.tsx
@@ -3,15 +3,56 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
-import { useRouter } from '@/i18n/routing';
+import { useRouter, Link } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
-
+import { cn } from '@/lib/utils';
 import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
 
-import { Link } from '@/i18n/routing';
 import { useCart } from '@/components/shop/cart-provider';
 import { generateIdempotencyKey } from '@/lib/shop/idempotency';
 import { formatMoney } from '@/lib/shop/currency';
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_LINK_XS,
+  SHOP_DISABLED,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_STEPPER_BUTTON_BASE,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
+
+const SHOP_PRODUCT_LINK = cn(
+  'block truncate',
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_FOCUS
+);
+
+const SHOP_STEPPER_BTN = cn(
+  SHOP_STEPPER_BUTTON_BASE,
+  'h-8 w-8',
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
+const SHOP_HERO_CTA = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'w-full justify-center gap-2 px-6 py-3 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
 
 export default function CartPage() {
   const { cart, updateQuantity, removeFromCart } = useCart();
@@ -32,7 +73,7 @@ export default function CartPage() {
     try {
       return tColors(colorSlug);
     } catch {
-      return color; 
+      return color;
     }
   };
 
@@ -67,9 +108,8 @@ export default function CartPage() {
           typeof data?.message === 'string'
             ? data.message
             : typeof data?.error === 'string'
-            ? data.error
-            : 'Unable to start checkout right now.';
-
+              ? data.error
+              : 'Unable to start checkout right now.';
         setCheckoutError(message);
         return;
       }
@@ -86,7 +126,7 @@ export default function CartPage() {
           ? data.clientSecret
           : null;
 
-      const orderId: string = String(data.orderId);
+      const orderId = String(data.orderId);
       setCreatedOrderId(orderId);
 
       if (paymentProvider === 'stripe' && clientSecret) {
@@ -95,7 +135,6 @@ export default function CartPage() {
             orderId
           )}?clientSecret=${encodeURIComponent(clientSecret)}&clearCart=1`
         );
-
         return;
       }
 
@@ -120,22 +159,28 @@ export default function CartPage() {
     return (
       <main className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
         <div className="flex flex-col items-center justify-center text-center">
-          <ShoppingBag
-            className="h-16 w-16 text-muted-foreground"
-            aria-hidden="true"
-          />
+          <ShoppingBag className="h-16 w-16 text-muted-foreground" aria-hidden="true" />
           <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
             {t('empty')}
           </h1>
-          <p className="mt-4 text-muted-foreground">
-            {t('emptyDescription')}
-          </p>
-          <Link
-            href={`/shop/products`}
-            className="mt-8 inline-flex items-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90"
-          >
-            {t('startShopping')}
-          </Link>
+          <p className="mt-4 text-muted-foreground">{t('emptyDescription')}</p>
+
+          <div className="mt-8 w-full max-w-md mx-auto">
+            <Link href="/shop/products" className={SHOP_HERO_CTA}>
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+              <span className="relative z-10">{t('startShopping')}</span>
+            </Link>
+          </div>
         </div>
       </main>
     );
@@ -162,9 +207,7 @@ export default function CartPage() {
 
             {cart.items.map(item => (
               <li
-                key={`${item.productId}-${item.selectedSize ?? 'na'}-${
-                  item.selectedColor ?? 'na'
-                }`}
+                key={`${item.productId}-${item.selectedSize ?? 'na'}-${item.selectedColor ?? 'na'}`}
                 className="rounded-lg border border-border p-4"
               >
                 <article className="flex gap-4">
@@ -183,7 +226,7 @@ export default function CartPage() {
                       <div className="min-w-0">
                         <Link
                           href={`/shop/products/${item.slug}`}
-                          className="block truncate text-sm font-medium text-foreground hover:underline"
+                          className={SHOP_PRODUCT_LINK}
                         >
                           {item.title}
                         </Link>
@@ -200,11 +243,7 @@ export default function CartPage() {
                       <button
                         type="button"
                         onClick={() =>
-                          removeFromCart(
-                            item.productId,
-                            item.selectedSize,
-                            item.selectedColor
-                          )
+                          removeFromCart(item.productId, item.selectedSize, item.selectedColor)
                         }
                         className="text-muted-foreground transition-colors hover:text-foreground"
                         aria-label={t('actions.removeItem', { title: item.title })}
@@ -226,7 +265,7 @@ export default function CartPage() {
                             )
                           }
                           disabled={item.quantity <= 1}
-                          className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
+                          className={SHOP_STEPPER_BTN}
                           aria-label={t('actions.decreaseQty')}
                         >
                           <Minus className="h-3 w-3" aria-hidden="true" />
@@ -247,28 +286,21 @@ export default function CartPage() {
                             )
                           }
                           disabled={item.quantity >= item.stock}
-                          className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
+                          className={SHOP_STEPPER_BTN}
                           aria-label={t('actions.increaseQty')}
                         >
                           <Plus className="h-3 w-3" aria-hidden="true" />
                         </button>
 
                         {item.quantity >= item.stock && (
-                          <span
-                            className="ml-3 text-xs text-muted-foreground"
-                            role="status"
-                          >
+                          <span className="ml-3 text-xs text-muted-foreground" role="status">
                             {t('actions.maxStock', { stock: item.stock })}
                           </span>
                         )}
                       </div>
 
                       <span className="text-sm font-semibold text-foreground">
-                        {formatMoney(
-                          item.lineTotalMinor,
-                          item.currency,
-                          locale
-                        )}
+                        {formatMoney(item.lineTotalMinor, item.currency, locale)}
                       </span>
                     </div>
                   </div>
@@ -278,14 +310,8 @@ export default function CartPage() {
           </ul>
         </section>
 
-        <aside
-          className="h-fit rounded-lg border border-border p-6"
-          aria-labelledby="order-summary"
-        >
-          <h2
-            id="order-summary"
-            className="text-lg font-semibold text-foreground"
-          >
+        <aside className="h-fit rounded-lg border border-border p-6" aria-labelledby="order-summary">
+          <h2 id="order-summary" className="text-lg font-semibold text-foreground">
             {t('summary.heading')}
           </h2>
 
@@ -293,19 +319,13 @@ export default function CartPage() {
             <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">{t('summary.subtotal')}</span>
               <span className="font-medium text-foreground">
-                {formatMoney(
-                  cart.summary.totalAmountMinor,
-                  cart.summary.currency,
-                  locale
-                )}
+                {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
               </span>
             </div>
 
             <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">{t('summary.shipping')}</span>
-              <span className="text-muted-foreground">
-                {t('summary.shippingCalc')}
-              </span>
+              <span className="text-muted-foreground">{t('summary.shippingCalc')}</span>
             </div>
 
             <div className="border-t border-border pt-4">
@@ -314,11 +334,7 @@ export default function CartPage() {
                   {t('summary.total')}
                 </span>
                 <span className="text-lg font-bold text-foreground">
-                  {formatMoney(
-                    cart.summary.totalAmountMinor,
-                    cart.summary.currency,
-                    locale
-                  )}
+                  {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
                 </span>
               </div>
             </div>
@@ -329,10 +345,24 @@ export default function CartPage() {
               type="button"
               onClick={handleCheckout}
               disabled={isCheckingOut}
-              className="flex w-full items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
+              className={SHOP_HERO_CTA}
               aria-busy={isCheckingOut}
             >
-              {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">
+                {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
+              </span>
             </button>
 
             <p className="text-center text-xs text-muted-foreground">
@@ -344,7 +374,7 @@ export default function CartPage() {
               <div className="flex justify-center">
                 <Link
                   href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
-                  className="text-xs underline underline-offset-4"
+                  className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
                 >
                   {t('checkout.notRedirected')}
                 </Link>
@@ -353,20 +383,15 @@ export default function CartPage() {
 
             {checkoutError ? (
               <div className="space-y-2">
-                <p
-                  className="text-center text-xs text-destructive"
-                  role="alert"
-                >
+                <p className="text-center text-xs text-destructive" role="alert">
                   {checkoutError}
                 </p>
 
                 {createdOrderId ? (
                   <div className="flex justify-center">
                     <Link
-                      href={`/shop/orders/${encodeURIComponent(
-                        createdOrderId
-                      )}`}
-                      className="text-xs underline underline-offset-4"
+                      href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
+                      className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
                     >
                       {t('checkout.goToOrder')}
                     </Link>
diff --git a/frontend/app/[locale]/shop/checkout/error/page.tsx b/frontend/app/[locale]/shop/checkout/error/page.tsx
index a3f9e6e2..b06d402c 100644
--- a/frontend/app/[locale]/shop/checkout/error/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/error/page.tsx
@@ -6,6 +6,19 @@ import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { OrderNotFoundError } from '@/lib/services/errors';
 import { getOrderSummary } from '@/lib/services/orders';
 import { orderIdParamSchema } from '@/lib/validation/shop';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -26,6 +39,22 @@ function parseOrderId(searchParams?: SearchParams): string | null {
   return parsed.success ? parsed.data.id : null;
 }
 
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'px-4 py-2 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
 export default async function CheckoutErrorPage({
   params,
   searchParams,
@@ -64,17 +93,32 @@ export default async function CheckoutErrorPage({
             className="mt-6 flex flex-wrap justify-center gap-3"
             aria-label="Checkout navigation"
           >
-            <Link
-              href="/shop/cart"
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
               {t('actions.backToCart')}
             </Link>
-            <Link
-              href="/shop/products"
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
-              {t('actions.continueShopping')}
+
+            <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">
+                {t('actions.continueShopping')}
+              </span>
             </Link>
           </nav>
         </section>
@@ -108,17 +152,32 @@ export default async function CheckoutErrorPage({
               className="mt-6 flex flex-wrap justify-center gap-3"
               aria-label="Checkout navigation"
             >
-              <Link
-                href="/shop/cart"
-                className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-              >
+              <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
                 {t('actions.backToCart')}
               </Link>
-              <Link
-                href="/shop/products"
-                className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-              >
-                {t('actions.continueShopping')}
+
+              <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+                <span
+                  className="absolute inset-0"
+                  style={shopCtaGradient(
+                    '--shop-hero-btn-bg',
+                    '--shop-hero-btn-bg-hover'
+                  )}
+                  aria-hidden="true"
+                />
+                <span
+                  className={SHOP_CTA_WAVE}
+                  style={shopCtaGradient(
+                    '--shop-hero-btn-bg-hover',
+                    '--shop-hero-btn-bg'
+                  )}
+                  aria-hidden="true"
+                />
+                <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+                <span className="relative z-10">
+                  {t('actions.continueShopping')}
+                </span>
               </Link>
             </nav>
           </section>
@@ -148,7 +207,6 @@ export default async function CheckoutErrorPage({
 
   const isFailed = order.paymentStatus === 'failed';
 
-  // Prefer minor units if available (new schema), fallback to legacy major if present.
   const totalMinor =
     typeof (order as any).totalAmountMinor === 'number'
       ? (order as any).totalAmountMinor
@@ -198,7 +256,9 @@ export default async function CheckoutErrorPage({
             </div>
 
             <div className="flex items-center justify-between gap-4">
-              <dt className="text-muted-foreground">{t('error.statusLabel')}</dt>
+              <dt className="text-muted-foreground">
+                {t('error.statusLabel')}
+              </dt>
               <dd className="font-semibold capitalize text-foreground">
                 {order.paymentStatus}
               </dd>
@@ -207,26 +267,38 @@ export default async function CheckoutErrorPage({
         </section>
 
         <nav className="mt-6 flex flex-wrap gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('actions.backToCart')}
           </Link>
 
           {isFailed && order.id ? (
             <Link
               href={`/shop/checkout/payment/${order.id}`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
+              className={SHOP_HERO_CTA_SM}
             >
-              {t('error.retryPayment')}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">{t('error.retryPayment')}</span>
             </Link>
           ) : null}
 
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href="/shop/products" className={SHOP_OUTLINE_BTN}>
             {t('actions.continueShopping')}
           </Link>
         </nav>
diff --git a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
index 7a2131e5..07c115b9 100644
--- a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
@@ -9,11 +9,7 @@ import {
   useElements,
   useStripe,
 } from '@stripe/react-stripe-js';
-import {
-  loadStripe,
-  type StripeElementsOptions,
-  type Stripe,
-} from '@stripe/stripe-js';
+import { loadStripe, type StripeElementsOptions, type Stripe } from '@stripe/stripe-js';
 
 import {
   currencyValues,
@@ -22,6 +18,19 @@ import {
   type CurrencyCode,
 } from '@/lib/shop/currency';
 import { logError } from '@/lib/logging';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 type PaymentFormProps = {
   orderId: string;
@@ -64,22 +73,13 @@ function buildInAppPath(path: string): string {
   return `${IN_APP_SHOP_BASE}${p}`;
 }
 
-function buildStripeReturnUrl(params: {
-  locale: string;
-  inAppPath: string; // must be "/shop/..."
-}): string {
+function buildStripeReturnUrl(params: { locale: string; inAppPath: string }): string {
   const loc = normalizeLocale(params.locale);
-  const p = params.inAppPath.startsWith('/')
-    ? params.inAppPath
-    : `/${params.inAppPath}`;
-  // Note: p can contain query string; URL() supports it.
+  const p = params.inAppPath.startsWith('/') ? params.inAppPath : `/${params.inAppPath}`;
   return new URL(`/${loc}${p}`, window.location.origin).toString();
 }
 
-function nextRouteForPaymentResult(params: {
-  orderId: string;
-  status?: string | null;
-}) {
+function nextRouteForPaymentResult(params: { orderId: string; status?: string | null }) {
   const { orderId, status } = params;
   const id = encodeURIComponent(orderId);
 
@@ -87,19 +87,61 @@ function nextRouteForPaymentResult(params: {
   const failure = buildInAppPath(`/checkout/error?orderId=${id}`);
 
   if (!status) return success;
-  if (
-    status === 'succeeded' ||
-    status === 'processing' ||
-    status === 'requires_capture'
-  ) {
+
+  if (status === 'succeeded' || status === 'processing' || status === 'requires_capture') {
     return success;
   }
+
   if (status === 'requires_payment_method' || status === 'canceled') {
     return failure;
   }
+
   return success;
 }
 
+/** Unified CTA (hero) */
+const SHOP_HERO_CTA = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'w-full items-center justify-center gap-2',
+  'px-6 py-3 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+/** Unified outline */
+const SHOP_OUTLINE = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'px-5 py-2.5'
+);
+
+function HeroCtaInner({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </>
+  );
+}
+
 function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -113,9 +155,7 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     setErrorMessage(null);
 
     if (!stripe || !elements) {
-      setErrorMessage(
-        'Payment is not ready yet. Please try again in a moment.'
-      );
+      setErrorMessage('Payment is not ready yet. Please try again in a moment.');
       return;
     }
 
@@ -131,7 +171,6 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
         elements,
         redirect: 'if_required',
         confirmParams: {
-          // Stripe redirect comes from outside Next.js routing — MUST include locale exactly once.
           return_url: buildStripeReturnUrl({ locale, inAppPath: inAppSuccess }),
         },
       });
@@ -151,29 +190,23 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     } catch (error) {
       logError('stripe_payment_confirm_failed', error, { orderId });
       setErrorMessage('We couldn’t confirm your payment. Please try again.');
-      router.push(
-        buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`)
-      );
+      router.push(buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`));
     } finally {
       setSubmitting(false);
     }
   }
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="space-y-4"
-      aria-label="Stripe payment form"
-    >
+    <form onSubmit={handleSubmit} className="space-y-4" aria-label="Stripe payment form">
       <PaymentElement />
 
       <button
         type="submit"
         disabled={!stripe || submitting}
-        className="flex w-full items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
+        className={SHOP_HERO_CTA}
         aria-disabled={!stripe || submitting}
       >
-        {submitting ? 'Processing...' : 'Submit payment'}
+        <HeroCtaInner>{submitting ? 'Processing...' : 'Submit payment'}</HeroCtaInner>
       </button>
 
       {errorMessage ? (
@@ -194,10 +227,7 @@ export default function StripePaymentClient({
   currency,
   locale,
 }: StripePaymentClientProps) {
-  const uiCurrency = useMemo(
-    () => toCurrencyCode(currency, locale),
-    [currency, locale]
-  );
+  const uiCurrency = useMemo(() => toCurrencyCode(currency, locale), [currency, locale]);
 
   const stripePromise = useMemo(() => {
     if (!paymentsEnabled || !publishableKey) return null;
@@ -214,24 +244,18 @@ export default function StripePaymentClient({
 
   if (!paymentsEnabled) {
     return (
-      <section
-        className="space-y-3 text-sm text-muted-foreground"
-        aria-label="Payments disabled"
-      >
+      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payments disabled">
         <p>Payments are disabled in this environment.</p>
-        <nav className="flex gap-3" aria-label="Next steps">
+
+        <nav className="flex flex-col gap-3 sm:flex-row" aria-label="Next steps">
           <Link
-            href={buildInAppPath(
-              `/checkout/success?orderId=${encodeURIComponent(orderId)}`
-            )}
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
+            href={buildInAppPath(`/checkout/success?orderId=${encodeURIComponent(orderId)}`)}
+            className={cn(SHOP_HERO_CTA, 'w-full sm:w-auto')}
           >
-            Continue
+            <HeroCtaInner>Continue</HeroCtaInner>
           </Link>
-          <Link
-            href={buildInAppPath('/cart')}
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
             Back to cart
           </Link>
         </nav>
@@ -241,15 +265,10 @@ export default function StripePaymentClient({
 
   if (!clientSecret || !clientSecret.trim()) {
     return (
-      <section
-        className="space-y-3 text-sm text-muted-foreground"
-        aria-label="Payment initialization failed"
-      >
+      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payment initialization failed">
         <p>Payment cannot be initialized. Please try again later.</p>
-        <Link
-          href={buildInAppPath('/cart')}
-          className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-        >
+
+        <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
           Return to cart
         </Link>
       </section>
@@ -275,9 +294,8 @@ export default function StripePaymentClient({
                 {formatMoney(amountMinor, uiCurrency, locale)}
               </span>
             </div>
-            <p className="text-xs uppercase tracking-wide text-muted-foreground">
-              {uiCurrency}
-            </p>
+
+            <p className="text-xs uppercase tracking-wide text-muted-foreground">{uiCurrency}</p>
           </div>
 
           <StripePaymentForm orderId={orderId} locale={locale} />
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index a982b1cf..0a76aec6 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -1,6 +1,7 @@
 import { Link } from '@/i18n/routing';
 import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount';
 import StripePaymentClient from '../StripePaymentClient';
+
 import { formatMoney } from '@/lib/shop/currency';
 import { getOrderSummary } from '@/lib/services/orders';
 import { OrderNotFoundError } from '@/lib/services/errors';
@@ -9,6 +10,19 @@ import { getStripeEnv } from '@/lib/env/stripe';
 import { logError } from '@/lib/logging';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
 import { getTranslations } from 'next-intl/server';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -31,14 +45,8 @@ function resolveClientSecret(
 async function buildStatusMessage(status: string) {
   const t = await getTranslations('shop.checkout.payment.statusMessages');
 
-  if (status === 'paid') {
-    return t('alreadyPaid');
-  }
-
-  if (status === 'failed') {
-    return t('previousFailed');
-  }
-
+  if (status === 'paid') return t('alreadyPaid');
+  if (status === 'failed') return t('previousFailed');
   return t('completePayment');
 }
 
@@ -55,6 +63,60 @@ type PaymentPageProps = {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
 };
 
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'items-center justify-center gap-2',
+  'px-5 py-2.5 text-xs sm:text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
+function HeroCtaLink({
+  href,
+  children,
+  className,
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Link href={href} className={cn(SHOP_HERO_CTA_SM, className)}>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg',
+          '--shop-hero-btn-bg-hover'
+        )}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg-hover',
+          '--shop-hero-btn-bg'
+        )}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </Link>
+  );
+}
+
 function PageShell({
   title,
   description,
@@ -89,6 +151,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
   const searchParams = props.searchParams
     ? await props.searchParams
     : undefined;
+
   const clearCart = shouldClearCart(searchParams);
   const cc = clearCart ? '&clearCart=1' : '';
   const { locale } = params;
@@ -105,18 +168,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
         description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
-          <Link
-            href={`${shopBase}/cart`}
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href={`${shopBase}/cart`} className={SHOP_OUTLINE_BTN}>
             {t('actions.goToCart')}
           </Link>
-          <Link
-            href={`${shopBase}/products`}
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
+
+          <HeroCtaLink href={`${shopBase}/products`}>
             {t('actions.continueShopping')}
-          </Link>
+          </HeroCtaLink>
         </nav>
       </PageShell>
     );
@@ -137,18 +195,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
-              href={`${shopBase}/cart`}
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            <Link href={`${shopBase}/cart`} className={SHOP_OUTLINE_BTN}>
               {t('actions.goToCart')}
             </Link>
-            <Link
-              href={`${shopBase}/products`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
+
+            <HeroCtaLink href={`${shopBase}/products`}>
               {t('actions.continueShopping')}
-            </Link>
+            </HeroCtaLink>
           </nav>
         </PageShell>
       );
@@ -165,6 +218,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
   const stripeEnv = getStripeEnv();
   const paymentsEnabled =
     stripeEnv.paymentsEnabled && Boolean(stripeEnv.publishableKey);
+
   let clientSecret = resolveClientSecret(searchParams);
   const publishableKey = paymentsEnabled ? stripeEnv.publishableKey : null;
 
@@ -197,6 +251,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
     return (
       <>
         <ClearCartOnMount enabled={clearCart} />
+
         <PageShell
           title={t('payment.statusMessages.alreadyPaid')}
           description={t('success.paymentConfirmed')}
@@ -205,16 +260,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
+            <HeroCtaLink
               href={`${shopBase}/checkout/success?orderId=${order.id}${cc}`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
               {t('payment.viewConfirmation')}
-            </Link>
-            <Link
-              href={`${shopBase}/products`}
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            </HeroCtaLink>
+
+            <Link href={`${shopBase}/products`} className={SHOP_OUTLINE_BTN}>
               {t('payment.continueShopping')}
             </Link>
           </nav>
@@ -236,9 +288,11 @@ export default async function PaymentPage(props: PaymentPageProps) {
         <p className="text-sm font-semibold uppercase tracking-wide text-accent">
           {t('payment.title')}
         </p>
+
         <h1 id="pay-order-title" className="text-3xl font-bold text-foreground">
           {t('payment.payForOrder', { orderId: order.id.slice(0, 8) })}
         </h1>
+
         <p className="mt-2 text-sm text-muted-foreground">
           {await buildStatusMessage(order.paymentStatus)}
         </p>
@@ -255,17 +309,22 @@ export default async function PaymentPage(props: PaymentPageProps) {
           <h2 className="text-lg font-semibold text-foreground">
             {t('payment.paymentDetails')}
           </h2>
+
           <p className="mt-2 text-sm text-muted-foreground">
             {t('payment.completePayment')}
           </p>
 
           <div className="mt-6 rounded-md border border-border bg-muted/30 p-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">{t('payment.amountDue')}</span>
+              <span className="text-sm text-muted-foreground">
+                {t('payment.amountDue')}
+              </span>
+
               <span className="text-xl font-bold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </span>
             </div>
+
             <p className="mt-1 text-xs text-muted-foreground uppercase tracking-wide">
               {order.currency}
             </p>
@@ -297,12 +356,14 @@ export default async function PaymentPage(props: PaymentPageProps) {
               <dt>{t('payment.items')}</dt>
               <dd className="font-medium text-foreground">{itemsCount}</dd>
             </div>
+
             <div className="flex items-center justify-between">
               <dt>{t('payment.totalAmount')}</dt>
               <dd className="font-semibold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </dd>
             </div>
+
             <div className="flex items-center justify-between">
               <dt>{t('payment.status')}</dt>
               <dd className="font-semibold capitalize text-foreground">
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 67051968..686b3447 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -8,6 +8,18 @@ import { formatMoney } from '@/lib/shop/currency';
 import { getOrderSummary } from '@/lib/services/orders';
 import { OrderNotFoundError } from '@/lib/services/errors';
 import { orderIdParamSchema } from '@/lib/validation/shop';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -39,6 +51,46 @@ function shouldClearCart(params: SearchParams): boolean {
   return raw === 'true' || raw === '1';
 }
 
+/** Small hero CTA (Link) */
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  'items-center justify-center overflow-hidden',
+  'px-4 py-2 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+/** Outline secondary action (Link) */
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS
+);
+
+function HeroCtaInner({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </>
+  );
+}
+
 function CheckoutShell({
   title,
   description,
@@ -88,16 +140,11 @@ export default async function CheckoutSuccessPage({
         description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
-            {t('actions.backToProducts')}
+          <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+            <HeroCtaInner>{t('actions.backToProducts')}</HeroCtaInner>
           </Link>
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('actions.goToCart')}
           </Link>
         </nav>
@@ -121,16 +168,11 @@ export default async function CheckoutSuccessPage({
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
-              href="/shop/products"
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
-              {t('actions.backToProducts')}
+            <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+              <HeroCtaInner>{t('actions.backToProducts')}</HeroCtaInner>
             </Link>
-            <Link
-              href="/shop/cart"
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+
+            <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
               {t('actions.goToCart')}
             </Link>
           </nav>
@@ -195,7 +237,9 @@ export default async function CheckoutSuccessPage({
 
             <dl className="mt-3 space-y-2 text-sm">
               <div className="flex items-center justify-between">
-                <dt className="text-muted-foreground">{t('success.totalAmount')}</dt>
+                <dt className="text-muted-foreground">
+                  {t('success.totalAmount')}
+                </dt>
                 <dd className="font-semibold text-foreground">
                   {formatMoney(totalMinor, order.currency, locale)}
                 </dd>
@@ -217,16 +261,11 @@ export default async function CheckoutSuccessPage({
         </section>
 
         <nav className="mt-8 flex flex-wrap gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
-            {t('success.continueShopping')}
+          <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+            <HeroCtaInner>{t('success.continueShopping')}</HeroCtaInner>
           </Link>
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('success.viewCart')}
           </Link>
         </nav>
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 32f45078..3f621a8c 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -1,5 +1,5 @@
 import 'server-only';
-
+import { cn } from '@/lib/utils';
 import { Link } from '@/i18n/routing';
 import { notFound, redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
@@ -13,6 +13,12 @@ import { orderIdParamSchema } from '@/lib/validation/shop';
 import { logError } from '@/lib/logging';
 import { formatMoney, type CurrencyCode } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_NAV_LINK_BASE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 
@@ -200,6 +206,15 @@ export default async function OrderDetailPage({
   const restockedFormatted = order.restockedAt
     ? safeFormatDateTime(order.restockedAt, dtf)
     : '—';
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, 'text-lg', SHOP_FOCUS);
+
+  const PRODUCT_LINK = cn(
+    SHOP_LINK_BASE,
+    SHOP_LINK_MD,
+    SHOP_FOCUS,
+    'truncate',
+    '!underline !decoration-2 !underline-offset-4'
+  );
 
   return (
     <main
@@ -211,27 +226,26 @@ export default async function OrderDetailPage({
           <h1 id="order-heading" className="truncate text-2xl font-semibold">
             {t('title')}
           </h1>
-          <div className="mt-1 truncate text-xs opacity-80">{order.id}</div>
+          <div className="mt-1 truncate text-xs text-muted-foreground">
+            {order.id}
+          </div>
         </div>
 
         <nav
           className="flex flex-wrap items-center justify-end gap-3"
           aria-label="Order navigation"
         >
-          <Link
-            className="text-sm underline underline-offset-4"
-            href="/shop/orders"
-          >
+          <Link className={NAV_LINK} href="/shop/orders">
             {t('myOrders')}
           </Link>
-          <Link className="text-sm underline underline-offset-4" href="/shop">
+          <Link className={NAV_LINK} href="/shop">
             {t('shop')}
           </Link>
         </nav>
       </header>
 
       <section
-        className="mb-6 rounded-md border p-4"
+        className="mb-6 rounded-md border border-border p-4"
         aria-labelledby="order-summary-heading"
       >
         <h2 id="order-summary-heading" className="sr-only">
@@ -240,25 +254,27 @@ export default async function OrderDetailPage({
 
         <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
-            <dt className="text-xs opacity-80">{t('total')}</dt>
+            <dt className="text-xs text-muted-foreground">{t('total')}</dt>
             <dd className="text-sm font-medium">{totalFormatted}</dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">{t('paymentStatus')}</dt>
+            <dt className="text-xs text-muted-foreground">
+              {t('paymentStatus')}
+            </dt>
             <dd className="text-sm font-medium">
               {String(order.paymentStatus)}
             </dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">{t('created')}</dt>
+            <dt className="text-xs text-muted-foreground">{t('created')}</dt>
             <dd className="text-sm">{createdFormatted}</dd>
           </div>
 
           {isAdmin && (
             <div>
-              <dt className="text-xs opacity-80">{t('provider')}</dt>
+              <dt className="text-xs text-muted-foreground">{t('provider')}</dt>
               <dd className="text-sm">{String(order.paymentProvider)}</dd>
             </div>
           )}
@@ -267,13 +283,17 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">{t('paymentReference')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('paymentReference')}
+              </dt>
               <dd className="text-sm break-all">
                 {order.paymentIntentId ?? '—'}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">{t('idempotencyKey')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('idempotencyKey')}
+              </dt>
               <dd className="text-sm break-all">{order.idempotencyKey}</dd>
             </div>
           </dl>
@@ -282,13 +302,17 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">{t('stockRestored')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('stockRestored')}
+              </dt>
               <dd className="text-sm">
                 {order.stockRestored ? t('yes') : t('no')}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">{t('restockedAt')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('restockedAt')}
+              </dt>
               <dd className="text-sm">{restockedFormatted}</dd>
             </div>
           </dl>
@@ -296,27 +320,37 @@ export default async function OrderDetailPage({
       </section>
 
       <section
-        className="rounded-md border"
+        className="rounded-md border border-border"
         aria-labelledby="order-items-heading"
       >
-        <div className="border-b p-4">
+        <div className="border-b border-border p-4">
           <h2 id="order-items-heading" className="text-lg font-semibold">
             {t('items')}
           </h2>
         </div>
 
-        <ul className="divide-y" aria-label={t('items')}>
+        <ul className="divide-y divide-border" aria-label={t('items')}>
           {order.items.map(it => (
             <li key={it.id} className="p-4">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                 <div className="min-w-0">
-                  <div className="truncate font-medium">
-                    {it.productTitle ??
-                      it.productSlug ??
-                      it.productSku ??
-                      it.productId}
-                  </div>
-                  <div className="mt-1 break-all text-xs opacity-80">
+                  {it.productSlug ? (
+                    <Link
+                      href={`/shop/products/${it.productSlug}`}
+                      className={PRODUCT_LINK}
+                    >
+                      {it.productTitle ??
+                        it.productSlug ??
+                        it.productSku ??
+                        it.productId}
+                    </Link>
+                  ) : (
+                    <div className="truncate font-medium">
+                      {it.productTitle ?? it.productSku ?? it.productId}
+                    </div>
+                  )}
+
+                  <div className="mt-1 break-all text-xs text-muted-foreground">
                     {it.productSku
                       ? t('sku', { sku: it.productSku })
                       : t('product', { productId: it.productId })}
@@ -330,7 +364,7 @@ export default async function OrderDetailPage({
                   </div>
                   <div>
                     <dt className="sr-only">{t('unitPrice')}</dt>
-                    <dd className="text-sm opacity-80">
+                    <dd className="text-sm text-muted-foreground">
                       Unit:{' '}
                       {safeFormatMoneyMajor(it.unitPrice, currency, locale)}
                     </dd>
diff --git a/frontend/app/[locale]/shop/orders/error.tsx b/frontend/app/[locale]/shop/orders/error.tsx
index 3a1b6022..3b084a1a 100644
--- a/frontend/app/[locale]/shop/orders/error.tsx
+++ b/frontend/app/[locale]/shop/orders/error.tsx
@@ -1,25 +1,39 @@
 'use client';
 
+import { cn } from '@/lib/utils';
+import {
+  SHOP_FOCUS,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
+
 type ErrorPageProps = {
   error: Error & { digest?: string };
   reset: () => void;
 };
 
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS
+);
+
 export default function OrdersError({ reset }: ErrorPageProps) {
   return (
     <div className="mx-auto w-full max-w-3xl px-4 py-8">
-      <h1 className="text-2xl font-semibold">Orders</h1>
+      <header className="flex items-start justify-between gap-3">
+        <h1 className="text-2xl font-semibold">Orders</h1>
+      </header>
+
+      <section className="mt-6 rounded-lg border border-border bg-card p-5">
+        <p className="text-sm text-muted-foreground">Failed to load orders.</p>
 
-      <div className="mt-6 rounded-md border p-4">
-        <p className="text-sm">Failed to load orders.</p>
-        <button
-          type="button"
-          className="mt-3 text-sm underline underline-offset-4"
-          onClick={() => reset()}
-        >
-          Try again
-        </button>
-      </div>
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <button type="button" className={SHOP_OUTLINE_BTN} onClick={reset}>
+            Try again
+          </button>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index 5f00dd1b..5dbcc0d9 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -1,5 +1,5 @@
 import 'server-only';
-
+import { cn } from '@/lib/utils';
 import { Link } from '@/i18n/routing';
 import { redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
@@ -10,7 +10,12 @@ import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
 import { getCurrentUser } from '@/lib/auth';
 import { logError } from '@/lib/logging';
-
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_NAV_LINK_BASE,
+} from '@/lib/shop/ui-classes';
 export const dynamic = 'force-dynamic';
 
 type PaymentStatus = (typeof orders.$inferSelect)['paymentStatus'];
@@ -113,7 +118,9 @@ export default async function MyOrdersPage({
 
   const user = await getCurrentUser();
   if (!user) {
-    redirect(`/${locale}/login?returnTo=${encodeURIComponent(`/${locale}/shop/orders`)}`);
+    redirect(
+      `/${locale}/login?returnTo=${encodeURIComponent(`/${locale}/shop/orders`)}`
+    );
   }
 
   let rows: Array<{
@@ -123,7 +130,7 @@ export default async function MyOrdersPage({
     paymentStatus: PaymentStatus;
     createdAt: Date;
     primaryItemLabel: string | null;
-    itemCount: unknown; 
+    itemCount: unknown;
   }> = [];
 
   try {
@@ -172,6 +179,17 @@ export default async function MyOrdersPage({
     logError('My orders page failed', error);
     throw new Error('MY_ORDERS_LOAD_FAILED');
   }
+  // Nav/breadcrumb-ish links ("Back to shop", "Browse products")
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, 'text-lg', SHOP_FOCUS);
+
+  // Order headline link in the table: make it match cart product link style
+  // (cart uses: cn('block truncate', SHOP_LINK_BASE, SHOP_LINK_MD, SHOP_FOCUS))
+  const ORDER_HEADLINE_LINK = cn(
+    'block max-w-[24rem] truncate',
+    SHOP_LINK_BASE,
+    SHOP_LINK_MD,
+    SHOP_FOCUS
+  );
 
   return (
     <main
@@ -183,13 +201,11 @@ export default async function MyOrdersPage({
           <h1 id="my-orders-heading" className="text-2xl font-semibold">
             {t('title')}
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {t('subtitle')}
-          </p>
+          <p className="mt-1 text-sm text-muted-foreground">{t('subtitle')}</p>
         </div>
 
         <nav aria-label="Orders navigation" className="flex items-center gap-3">
-          <Link className="text-sm underline underline-offset-4" href="/shop">
+          <Link className={NAV_LINK} href="/shop">
             {t('backToShop')}
           </Link>
         </nav>
@@ -199,10 +215,7 @@ export default async function MyOrdersPage({
         <section className="rounded-md border p-4" aria-label="No orders">
           <p className="text-sm text-muted-foreground">{t('empty.message')}</p>
           <div className="mt-3">
-            <Link
-              className="text-sm underline underline-offset-4"
-              href="/shop/products"
-            >
+            <Link className={NAV_LINK} href="/shop/products">
               {t('empty.browseProducts')}
             </Link>
           </div>
@@ -265,7 +278,7 @@ export default async function MyOrdersPage({
                       <th scope="row" className="px-4 py-3 align-top text-left">
                         <Link
                           href={href}
-                          className="block max-w-[24rem] truncate font-medium underline underline-offset-4"
+                          className={ORDER_HEADLINE_LINK}
                           title={headline}
                           aria-label={t('table.openOrder', { id: o.id })}
                         >
@@ -273,7 +286,9 @@ export default async function MyOrdersPage({
                         </Link>
 
                         <div className="mt-1 text-xs text-muted-foreground">
-                          <span className="sr-only">{t('table.orderId')}: </span>
+                          <span className="sr-only">
+                            {t('table.orderId')}:{' '}
+                          </span>
                           <span className="break-all">
                             {shortOrderId(o.id)}
                           </span>
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index c715c1c2..8a1c4468 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -4,6 +4,13 @@ import { Hero } from '@/components/shop/shop-hero';
 import { CategoryTile } from '@/components/shop/category-tile';
 import { getHomepageContent } from '@/lib/shop/data';
 import { getTranslations } from 'next-intl/server';
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_FOCUS,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export default async function HomePage({
   params,
@@ -38,10 +45,27 @@ export default async function HomePage({
 
             <Link
               href="/shop/products?filter=new"
-              className="text-sm font-medium text-muted-foreground hover:text-foreground"
+              className="
+              group inline-flex items-center gap-2 rounded-md border border-border
+              px-4 py-2
+              text-xs sm:text-sm font-semibold tracking-[0.25em] uppercase
+              text-muted-foreground hover:text-foreground
+              bg-transparent
+              shadow-none hover:shadow-[var(--shop-card-shadow-hover)]
+              transition-[transform,box-shadow,color,filter] duration-500 ease-out
+              hover:-translate-y-0.5 hover:brightness-110
+              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)]
+              focus-visible:ring-offset-2 focus-visible:ring-offset-background
+            "
               aria-label={t('viewAll')}
             >
-              {t('viewAll')} <span aria-hidden="true">→</span>
+              <span>{t('viewAll')}</span>
+              <span
+                aria-hidden="true"
+                className="transition-transform duration-300 group-hover:translate-x-0.5"
+              >
+                →
+              </span>
             </Link>
           </header>
 
@@ -98,10 +122,40 @@ export default async function HomePage({
           <div className="mt-8">
             <Link
               href="/shop/products"
-              className="inline-flex items-center gap-2 rounded-md bg-[color:var(--shop-cta-bg)] px-6 py-3 text-sm font-semibold uppercase tracking-wide text-[color:var(--shop-cta-fg)] transition-opacity hover:opacity-90"
+              className={`
+    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
+    px-8 sm:px-10 md:px-12 py-3 md:py-3.5
+    text-[color:var(--shop-cta-fg)]
+    shadow-[var(--shop-cta-shadow)] hover:shadow-[var(--shop-cta-shadow-hover)]
+  `}
               aria-label={t('hero.cta')}
             >
-              {t('hero.cta')}
+              {/* base gradient */}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')}
+                aria-hidden="true"
+              />
+
+              {/* hover wave overlay */}
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-cta-bg-hover', '--shop-cta-bg')}
+                aria-hidden="true"
+              />
+
+              {/* glass inset */}
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10 flex items-center gap-2">
+                <span>{t('hero.cta')}</span>
+                <span
+                  aria-hidden="true"
+                  className="transition-transform duration-300 group-hover:translate-x-0.5"
+                >
+                  →
+                </span>
+              </span>
             </Link>
           </div>
         </div>
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index 6f8b7eab..1b7fe732 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -4,12 +4,13 @@ import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
-
+import { cn } from '@/lib/utils';
 import { AddToCartButton } from '@/components/shop/add-to-cart-button';
 import { getProductPageData } from '@/lib/shop/data';
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
 import { Link } from '@/i18n/routing';
+import { SHOP_FOCUS, SHOP_NAV_LINK_BASE } from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 
@@ -37,70 +38,24 @@ export default async function ProductPage({
   if (result.kind === 'not_found') {
     notFound();
   }
-
-  if (result.kind === 'unavailable') {
-    const p = result.product;
-
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <nav aria-label="Product navigation">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-            {t('backToProducts')}
-          </Link>
-        </nav>
-
-        <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
-          <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
-            {p.badge && p.badge !== 'NONE' && (
-              <span className="absolute left-4 top-4 z-10 rounded bg-foreground px-2 py-1 text-xs font-semibold uppercase text-background">
-                {p.badge}
-              </span>
-            )}
-            <Image
-              src={p.image || '/placeholder.svg'}
-              alt={p.name}
-              fill
-              className="object-cover"
-              sizes="(max-width: 1024px) 100vw, 50vw"
-              priority
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">
-              {p.name}
-            </h1>
-
-            <div
-              className="mt-4 rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground"
-              role="status"
-              aria-live="polite"
-            >
-              {t('notAvailable')}
-            </div>
-
-            {p.description && (
-              <p className="mt-6 text-muted-foreground">{p.description}</p>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const product = result.product;
-
+  const isUnavailable = result.kind === 'unavailable';
+  const product = result.product as any; // shape differs for unavailable vs available; guard reads below
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, SHOP_FOCUS, 'text-lg', 'items-center gap-2');
+  const badge = product?.badge as string | undefined;
+  const badgeLabel =
+    badge && badge !== 'NONE'
+      ? (() => {
+          try {
+            return tProduct(`badges.${badge}`);
+          } catch {
+            return badge;
+          }
+        })()
+      : null;
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <nav aria-label="Product navigation">
-        <Link
-          href="/shop/products"
-          className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-        >
+        <Link href="/shop/products" className={NAV_LINK}>
           <ArrowLeft className="h-4 w-4" aria-hidden="true" />
           {t('backToProducts')}
         </Link>
@@ -108,15 +63,15 @@ export default async function ProductPage({
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
         <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
-          {product.badge && product.badge !== 'NONE' && (
+          {product.badge && (
             <span
               className={`absolute left-4 top-4 z-10 rounded px-2 py-1 text-xs font-semibold uppercase ${
-                product.badge === 'SALE'
+                badge === 'SALE'
                   ? 'bg-accent text-accent-foreground'
                   : 'bg-foreground text-background'
               }`}
             >
-              {tProduct(`badges.${product.badge}`)}
+              {badgeLabel}
             </span>
           )}
 
@@ -135,29 +90,44 @@ export default async function ProductPage({
             {product.name}
           </h1>
 
-          <section className="mt-4 flex items-center gap-3" aria-label="Price">
-            <span
-              className={`text-2xl font-bold ${
-                product.badge === 'SALE' ? 'text-accent' : 'text-foreground'
-              }`}
+          {isUnavailable ? (
+            <div
+              className="mt-4 rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground"
+              role="status"
+              aria-live="polite"
             >
-              {formatMoney(product.price, product.currency, locale)}
-            </span>
-
-            {product.originalPrice && (
-              <span className="text-lg text-muted-foreground line-through">
-                {formatMoney(product.originalPrice, product.currency, locale)}
+              {t('notAvailable')}
+            </div>
+          ) : (
+            <section
+              className="mt-4 flex items-center gap-3"
+              aria-label="Price"
+            >
+              <span
+                className={`text-2xl font-bold ${
+                  badge === 'SALE' ? 'text-accent' : 'text-foreground'
+                }`}
+              >
+                {formatMoney(product.price, product.currency, locale)}
               </span>
-            )}
-          </section>
+
+              {product.originalPrice && (
+                <span className="text-lg text-muted-foreground line-through">
+                  {formatMoney(product.originalPrice, product.currency, locale)}
+                </span>
+              )}
+            </section>
+          )}
 
           {product.description && (
             <p className="mt-6 text-muted-foreground">{product.description}</p>
           )}
 
-          <section aria-label="Purchase">
-            <AddToCartButton product={product} />
-          </section>
+          {!isUnavailable && (
+            <section aria-label="Purchase">
+              <AddToCartButton product={product} />
+            </section>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 702d39a7..2743a7c1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -342,7 +342,7 @@
   .animate-spin-slow {
     animation: spin 20s linear infinite;
   }
-  
+
   .animate-spin-slower {
     animation: spin 30s linear infinite reverse;
   }
@@ -354,7 +354,8 @@
 }
 
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
@@ -375,6 +376,10 @@
 .shop-scope {
   /* keep shop rounding slightly tighter than platform */
   --radius: calc(var(--radius-base) - 2px);
+  
+  /* Shop header/button accent in LIGHT: no platform blue */
+  --accent-primary: var(--foreground);
+  --accent-hover: color-mix(in oklab, var(--foreground) 92%, white);
 
   /* light: shop accent = black */
   --accent: var(--foreground);
@@ -390,6 +395,43 @@
   /* CTA button: light theme (section is black) -> pink bg + white text */
   --shop-cta-bg: #ff2d55;
   --shop-cta-fg: oklch(0.985 0 0);
+
+  /* Hero CTA (top section) */
+  --shop-hero-btn-bg: var(--foreground);
+  --shop-hero-btn-bg-hover: color-mix(in oklab, var(--foreground) 92%, white);
+  --shop-hero-btn-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
+  --shop-hero-btn-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.45);
+
+  /* Card aura (product + category tiles) */
+  --shop-card-shadow-hover:
+    0 0 0 1px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.12);
+
+  /* Bottom CTA (inverted by theme) */
+  --shop-cta-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-cta-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
+  --shop-cta-bg-hover: #e0264b;
+
+  /* Filters / chips (stronger than card aura) */
+  --shop-chip-shadow-hover:
+    0 0 0 1px rgba(0, 0, 0, 0.32), 0 0 0 5px rgba(0, 0, 0, 0.08),
+    0 18px 45px rgba(0, 0, 0, 0.22);
+
+  --shop-chip-shadow-selected:
+    0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(0, 0, 0, 0.1),
+    0 22px 60px rgba(0, 0, 0, 0.28);
+
+  --shop-hero-btn-success-bg: color-mix(
+    in oklab,
+    var(--shop-hero-btn-bg) 88%,
+    white
+  );
+  --shop-hero-btn-success-bg-hover: color-mix(
+    in oklab,
+    var(--shop-hero-btn-bg) 80%,
+    white
+  );
+  --shop-hero-btn-success-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
+  --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.32);
 }
 
 .dark .shop-scope {
@@ -402,15 +444,56 @@
   --color-accent: var(--accent-primary);
   --color-accent-foreground: var(--foreground);
   --color-ring: var(--accent-primary);
-
   --card: var(--background);
 
+  /* Shop accent in DARK: keep magenta */
+  --accent-primary: #ff2d55;
+  --accent-hover: #e0264b;
+
   /* keep borders closer to previous shop look, derived (no hex) */
   --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
   --input: color-mix(in oklab, var(--foreground) 18%, var(--background));
+
   /* CTA button: dark theme (section becomes white) -> black bg + white text */
   --shop-cta-bg: var(--background);
   --shop-cta-fg: var(--foreground);
+
+  /* Hero CTA (top section) */
+  --shop-hero-btn-bg: var(--accent-primary);
+  --shop-hero-btn-bg-hover: var(--accent-hover);
+  --shop-hero-btn-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-hero-btn-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
+
+  /* Card aura (product + category tiles) */
+  --shop-card-shadow-hover:
+    0 0 0 1px rgba(255, 45, 85, 0.28), 0 18px 45px rgba(255, 45, 85, 0.16);
+
+  /* Bottom CTA (inverted by theme) */
+  --shop-cta-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
+  --shop-cta-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.45);
+  --shop-cta-bg-hover: color-mix(in oklab, var(--background) 92%, white);
+
+  /* Filters / chips (stronger than card aura) */
+  --shop-chip-shadow-hover:
+    0 0 0 1px rgba(255, 45, 85, 0.55), 0 0 0 5px rgba(255, 45, 85, 0.18),
+    0 18px 50px rgba(255, 45, 85, 0.32);
+
+  --shop-chip-shadow-selected:
+    0 0 0 2px rgba(255, 45, 85, 0.7), 0 0 0 7px rgba(255, 45, 85, 0.22),
+    0 22px 70px rgba(255, 45, 85, 0.38);
+
+  --shop-hero-btn-success-bg: color-mix(
+    in oklab,
+    var(--accent-primary) 82%,
+    black
+  );
+  --shop-hero-btn-success-bg-hover: color-mix(
+    in oklab,
+    var(--accent-primary) 72%,
+    black
+  );
+  --shop-hero-btn-success-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
 }
 
 /* about-community */
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index a355efa4..d195df3e 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -5,6 +5,8 @@ import { Link } from '@/i18n/routing';
 import { Github, Linkedin, Send } from 'lucide-react';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { useTranslations } from 'next-intl';
+import { useSelectedLayoutSegments } from 'next/navigation';
+import { cn } from '@/lib/utils';
 
 const SOCIAL = [
   { label: 'GitHub', href: 'https://github.com/DevLoversTeam', Icon: Github },
@@ -18,18 +20,24 @@ const SOCIAL = [
 
 export default function Footer() {
   const t = useTranslations('footer');
-
+  const segments = useSelectedLayoutSegments();
+  const isShop = segments.includes('shop');
   return (
-    <footer className="relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50">
+    <footer
+      className={cn(
+        'relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50 ' +
+          '[--footer-brand:var(--accent-primary)] [--footer-hover:var(--accent-hover)] [--theme-toggle-hover:var(--footer-hover)]',
+        isShop &&
+          '[--footer-brand:var(--foreground)] [--footer-hover:var(--foreground)] ' +
+            'dark:[--footer-brand:var(--accent-primary)] dark:[--footer-hover:var(--accent-hover)]'
+      )}
+    >
       <div className="container-main relative py-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-3">
             <p className="text-sm text-slate-700 dark:text-slate-200">
               {t('builtWith')}{' '}
-              <span
-                className="font-semibold "
-                style={{ color: 'var(--accent-primary)' }}
-              >
+              <span className="font-semibold text-[color:var(--footer-brand)]">
                 DevLovers
               </span>{' '}
               {t('byCommunity')}
@@ -39,10 +47,10 @@ export default function Footer() {
               <Link
                 href="/privacy-policy"
                 className="
-transition-colors
-hover:[color:var(--accent-hover)]
-active:[color:var(--accent-hover)]
-focus-visible:[color:var(--accent-hover)]
+                  transition-colors
+                  hover:[color:var(--footer-hover)]
+                  active:[color:var(--footer-hover)]
+                  focus-visible:[color:var(--footer-hover)]
 "
               >
                 {t('privacyPolicy')}
@@ -51,10 +59,10 @@ focus-visible:[color:var(--accent-hover)]
               <Link
                 href="/terms-of-service"
                 className="
-transition-colors
-hover:[color:var(--accent-hover)]
-active:[color:var(--accent-hover)]
-focus-visible:[color:var(--accent-hover)]
+                  transition-colors
+                  hover:[color:var(--footer-hover)]
+                  active:[color:var(--footer-hover)]
+                  focus-visible:[color:var(--footer-hover)]
 "
               >
                 {t('termsOfService')}
@@ -91,13 +99,13 @@ focus-visible:[color:var(--accent-hover)]
                       dark:text-slate-300
                       transition-all
 
-hover:-translate-y-0.5
-hover:!text-[var(--accent-hover)]
-hover:!border-[var(--accent-hover)]
+                      hover:-translate-y-0.5
+                      hover:!text-[var(--footer-hover)]
+                      hover:!border-[var(--footer-hover)]
 
-active:!text-[var(--accent-hover)]
-active:!border-[var(--accent-hover)]
-active:scale-95
+                      active:!text-[var(--footer-hover)]
+                      active:!border-[var(--footer-hover)]
+                      active:scale-95
 
 
                     "
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
index 8bf54ce5..c9bd8de1 100644
--- a/frontend/components/shared/HeaderButton.tsx
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -15,6 +15,14 @@ interface HeaderButtonProps {
 
   label?: string;
 
+  /**
+   * Optional badge rendered OUTSIDE the overflow-hidden button/link,
+   * so it will not be clipped by the shine/gradient container.
+   */
+  badge?: React.ReactNode;
+  badgeClassName?: string;
+  badgeAriaLabel?: string;
+
   className?: string;
 }
 
@@ -26,6 +34,9 @@ export function HeaderButton({
   variant = 'default',
   showArrow = false,
   label,
+  badge,
+  badgeClassName = '',
+  badgeAriaLabel,
   className = '',
 }: HeaderButtonProps) {
   const isIconOnly = variant === 'icon';
@@ -120,8 +131,37 @@ export function HeaderButton({
     ${className}
   `;
 
-  if (!href) {
+  const wrapWithBadge = (node: React.ReactNode) => {
+    if (!badge) return node;
+
+    const defaultBadgeClasses = `
+      pointer-events-none
+      absolute -right-1 -top-1
+      flex h-5 min-w-5 items-center justify-center
+      rounded-full px-1
+      text-[11px] font-semibold leading-none tabular-nums
+      ring-2 ring-background
+    `;
+
+    const ariaProps = badgeAriaLabel
+      ? { 'aria-label': badgeAriaLabel }
+      : { 'aria-hidden': true as const };
+
     return (
+      <span className="relative inline-flex">
+        {node}
+        <span
+          className={`${defaultBadgeClasses} ${badgeClassName}`}
+          {...ariaProps}
+        >
+          {badge}
+        </span>
+      </span>
+    );
+  };
+
+  if (!href) {
+    return wrapWithBadge(
       <button
         onClick={onClick}
         className={baseClasses}
@@ -134,7 +174,7 @@ export function HeaderButton({
     );
   }
 
-  return (
+  return wrapWithBadge(
     <Link
       href={href}
       onClick={onClick}
diff --git a/frontend/components/shop/add-to-cart-button.tsx b/frontend/components/shop/add-to-cart-button.tsx
index 4724f6cc..f333952d 100644
--- a/frontend/components/shop/add-to-cart-button.tsx
+++ b/frontend/components/shop/add-to-cart-button.tsx
@@ -5,6 +5,19 @@ import type { ShopProduct } from '@/lib/shop/data';
 import { cn } from '@/lib/utils';
 import { Check, Minus, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_FOCUS,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_HOVER,
+  SHOP_CHIP_SELECTED,
+  SHOP_SWATCH_BASE,
+  SHOP_SIZE_CHIP_BASE,
+  SHOP_STEPPER_BUTTON_BASE,
+} from '@/lib/shop/ui-classes';
 
 import { useCart } from './cart-provider';
 
@@ -30,7 +43,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
     try {
       return tColors(colorSlug);
     } catch {
-      return color; 
+      return color;
     }
   };
 
@@ -55,6 +68,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
   const colorGroupId = useId();
   const sizeGroupId = useId();
   const quantityGroupId = useId();
+  const ctaBaseVar = added
+    ? '--shop-hero-btn-success-bg'
+    : '--shop-hero-btn-bg';
+  const ctaHoverVar = added
+    ? '--shop-hero-btn-success-bg-hover'
+    : '--shop-hero-btn-bg-hover';
 
   return (
     <section className="mt-8 space-y-6" aria-label={t('purchaseOptions')}>
@@ -63,7 +82,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={colorGroupId}
-            className="text-sm font-medium text-foreground"
+            className="text-sm font-semibold uppercase tracking-wide text-foreground"
           >
             {t('color')}
           </legend>
@@ -83,10 +102,15 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                   role="radio"
                   aria-checked={selectedColor === color}
                   className={cn(
-                    'h-9 w-9 rounded-full border-2 transition-all',
+                    SHOP_SWATCH_BASE,
+                    SHOP_CHIP_INTERACTIVE,
+                    SHOP_FOCUS,
                     selectedColor === color
-                      ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
-                      : 'border-border hover:border-muted-foreground'
+                      ? cn(
+                          SHOP_CHIP_SELECTED,
+                          'hover:shadow-[var(--shop-chip-shadow-selected)] hover:border-accent'
+                        )
+                      : 'hover:border-accent/60 hover:shadow-[var(--shop-chip-shadow-hover)]'
                   )}
                   style={{
                     background: colorMap[color] || color,
@@ -105,7 +129,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={sizeGroupId}
-            className="text-sm font-medium text-foreground"
+            className="text-sm font-semibold uppercase tracking-wide text-foreground"
           >
             {t('size')}
           </legend>
@@ -123,10 +147,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                 role="radio"
                 aria-checked={selectedSize === size}
                 className={cn(
-                  'rounded-md border px-4 py-2 text-sm font-medium transition-colors',
+                  SHOP_SIZE_CHIP_BASE,
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   selectedSize === size
-                    ? 'border-accent bg-accent text-accent-foreground'
-                    : 'border-border text-foreground hover:border-foreground'
+                    ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
+                    : 'bg-transparent text-muted-foreground border-border hover:text-foreground hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-accent/60'
                 )}
               >
                 {size}
@@ -140,7 +166,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
       <section aria-labelledby={quantityGroupId}>
         <h3
           id={quantityGroupId}
-          className="text-sm font-medium text-foreground"
+          className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
           {t('quantity')}
         </h3>
@@ -149,7 +175,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           <button
             type="button"
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
-            className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
+            className={cn(
+              SHOP_STEPPER_BUTTON_BASE,
+              SHOP_CHIP_INTERACTIVE,
+              SHOP_CHIP_HOVER,
+              SHOP_FOCUS
+            )}
             aria-label={t('decreaseQuantity')}
           >
             <Minus className="h-4 w-4" aria-hidden="true" />
@@ -162,7 +193,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           <button
             type="button"
             onClick={() => setQuantity(quantity + 1)}
-            className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
+            className={cn(
+              SHOP_STEPPER_BUTTON_BASE,
+              SHOP_CHIP_INTERACTIVE,
+              SHOP_CHIP_HOVER,
+              SHOP_FOCUS
+            )}
             aria-label={t('increaseQuantity')}
           >
             <Plus className="h-4 w-4" aria-hidden="true" />
@@ -176,24 +212,51 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         onClick={handleAddToCart}
         disabled={!product.inStock}
         className={cn(
-          'flex w-full items-center justify-center gap-2 rounded-md px-6 py-3 text-sm font-semibold uppercase tracking-wide transition-colors',
-          product.inStock
-            ? added
-              ? 'bg-green-600 text-white'
-              : 'bg-accent text-accent-foreground hover:bg-accent/90'
-            : 'cursor-not-allowed bg-muted text-muted-foreground'
+          SHOP_CTA_BASE,
+          SHOP_FOCUS,
+          'w-full justify-center gap-2 px-8 py-3',
+          'transition-[transform,filter] duration-700 ease-out', // transform/filter для active states
+          !product.inStock &&
+            'cursor-not-allowed bg-muted text-muted-foreground',
+          product.inStock &&
+            (added
+              ? 'text-white shadow-[var(--shop-hero-btn-success-shadow)] hover:shadow-[var(--shop-hero-btn-success-shadow-hover)]'
+              : 'text-white shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]')
         )}
       >
-        {!product.inStock ? (
-          t('soldOut')
-        ) : added ? (
+        {product.inStock ? (
           <>
-            <Check className="h-5 w-5" aria-hidden="true" />
-            {t('addedToCart')}
+            {/* base gradient */}
+            <span
+              className="absolute inset-0"
+              style={shopCtaGradient(ctaBaseVar, ctaHoverVar)}
+              aria-hidden="true"
+            />
+
+            {/* hover wave overlay */}
+            <span
+              className={SHOP_CTA_WAVE}
+              style={shopCtaGradient(ctaHoverVar, ctaBaseVar)}
+              aria-hidden="true"
+            />
+
+            {/* glass inset */}
+            <span className={SHOP_CTA_INSET} aria-hidden="true" />
           </>
-        ) : (
-          t('addToCart')
-        )}
+        ) : null}
+
+        <span className="relative z-10 flex items-center gap-2">
+          {!product.inStock ? (
+            t('soldOut')
+          ) : added ? (
+            <>
+              <Check className="h-5 w-5" aria-hidden="true" />
+              {t('addedToCart')}
+            </>
+          ) : (
+            t('addToCart')
+          )}
+        </span>
       </button>
     </section>
   );
diff --git a/frontend/components/shop/admin/admin-product-delete-button.tsx b/frontend/components/shop/admin/admin-product-delete-button.tsx
index 065b6b11..5ee73c69 100644
--- a/frontend/components/shop/admin/admin-product-delete-button.tsx
+++ b/frontend/components/shop/admin/admin-product-delete-button.tsx
@@ -85,14 +85,14 @@ export function AdminProductDeleteButton({
   };
 
   return (
-    <div className="flex min-w-0 flex-col gap-1">
+    <div className="flex w-full min-w-0 flex-col gap-1">
       <button
         type="button"
         onClick={onDelete}
         disabled={isLoading}
         aria-busy={isLoading}
         aria-describedby={error ? errorId : undefined}
-        className="whitespace-nowrap rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
       >
         {isLoading ? t('deleting') : t('delete')}
       </button>
diff --git a/frontend/components/shop/admin/admin-product-status-toggle.tsx b/frontend/components/shop/admin/admin-product-status-toggle.tsx
index 62899c1c..48ab1edf 100644
--- a/frontend/components/shop/admin/admin-product-status-toggle.tsx
+++ b/frontend/components/shop/admin/admin-product-status-toggle.tsx
@@ -48,7 +48,10 @@ export function AdminProductStatusToggle({
           // ignore
         }
 
-        if (response.status === 403 && (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')) {
+        if (
+          response.status === 403 &&
+          (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')
+        ) {
           setError(t('securityExpired'));
           return;
         }
@@ -68,10 +71,14 @@ export function AdminProductStatusToggle({
     }
   };
 
-  const buttonLabel = isLoading ? t('updating') : isActive ? t('deactivate') : t('activate');
+  const buttonLabel = isLoading
+    ? t('updating')
+    : isActive
+      ? t('deactivate')
+      : t('activate');
 
   return (
-    <div className="flex min-w-0 flex-col gap-1">
+    <div className="flex w-full min-w-0 flex-col gap-1">
       <button
         type="button"
         onClick={toggleStatus}
@@ -79,7 +86,7 @@ export function AdminProductStatusToggle({
         aria-busy={isLoading}
         aria-pressed={isActive}
         aria-describedby={error ? errorId : undefined}
-        className="whitespace-nowrap rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
       >
         {buttonLabel}
       </button>
diff --git a/frontend/components/shop/admin/shop-admin-topbar.tsx b/frontend/components/shop/admin/shop-admin-topbar.tsx
index 21ca8c50..2b04f168 100644
--- a/frontend/components/shop/admin/shop-admin-topbar.tsx
+++ b/frontend/components/shop/admin/shop-admin-topbar.tsx
@@ -11,7 +11,7 @@ export async function ShopAdminTopbar() {
           aria-label={t('label')}
           className="flex flex-wrap items-center justify-between gap-3 py-3"
         >
-          <ol className="flex flex-wrap items-center gap-3">
+          <ol className="flex min-w-0 flex-wrap items-center gap-3">
             <li>
               <Link
                 href="/shop/admin"
@@ -44,7 +44,7 @@ export async function ShopAdminTopbar() {
             </li>
           </ol>
 
-          <div className="shrink-0">
+          <div className="shrink-0 whitespace-nowrap">
             <Link
               href="/shop"
               className="inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
diff --git a/frontend/components/shop/catalog-load-more.tsx b/frontend/components/shop/catalog-load-more.tsx
index 385a6c60..29358b8a 100644
--- a/frontend/components/shop/catalog-load-more.tsx
+++ b/frontend/components/shop/catalog-load-more.tsx
@@ -1,7 +1,13 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-
+import { cn } from '@/lib/utils';
+import {
+  SHOP_DISABLED,
+  SHOP_FOCUS,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 interface CatalogLoadMoreProps {
   hasMore: boolean;
   isLoading: boolean;
@@ -25,7 +31,13 @@ export function CatalogLoadMore({
         onClick={onLoadMore}
         disabled={isLoading}
         aria-busy={isLoading}
-        className="rounded-md border border-border px-6 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-70"
+        className={cn(
+          SHOP_OUTLINE_BTN_BASE,
+          SHOP_OUTLINE_BTN_INTERACTIVE,
+          SHOP_FOCUS,
+          SHOP_DISABLED,
+          'gap-2 px-6 py-2.5'
+        )}
       >
         {isLoading ? tCommon('loading') : t('loadMore')}
       </button>
diff --git a/frontend/components/shop/category-tile.tsx b/frontend/components/shop/category-tile.tsx
index 86028f62..3047f33b 100644
--- a/frontend/components/shop/category-tile.tsx
+++ b/frontend/components/shop/category-tile.tsx
@@ -20,10 +20,10 @@ export async function CategoryTile({ category }: CategoryTileProps) {
       href={href}
       aria-label={tCategoryTile('shopCategory', { name: categoryName })}
       className={[
-        // IMPORTANT: make it block-level so aspect-ratio + Image fill work correctly
         'group relative block w-full',
         'aspect-[4/3] overflow-hidden rounded-lg bg-muted',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        'transition-[box-shadow] duration-500 hover:shadow-[var(--shop-card-shadow-hover)]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background',
       ].join(' ')}
     >
       <Image
diff --git a/frontend/components/shop/header/cart-button.tsx b/frontend/components/shop/header/cart-button.tsx
index 94053f6a..7e8ed8c8 100644
--- a/frontend/components/shop/header/cart-button.tsx
+++ b/frontend/components/shop/header/cart-button.tsx
@@ -2,8 +2,8 @@
 
 import { ShoppingBag } from 'lucide-react';
 
-import { Link } from '@/i18n/routing';
 import { useMounted } from '@/hooks/use-mounted';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 import { useCart } from '../cart-provider';
 
@@ -14,21 +14,16 @@ export function CartButton() {
   const itemCount = mounted ? cart.summary.itemCount : 0;
   const showCount = itemCount > 0;
 
+  const badgeText = itemCount > 99 ? '99+' : itemCount;
+
   return (
-    <Link
+    <HeaderButton
       href="/shop/cart"
-      className="relative flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-      aria-label={showCount ? `Cart, ${itemCount} items` : 'Cart'}
-    >
-      <ShoppingBag className="h-5 w-5" aria-hidden="true" />
-      {showCount ? (
-        <span
-          className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground"
-          aria-label={`${itemCount} items in cart`}
-        >
-          {itemCount}
-        </span>
-      ) : null}
-    </Link>
+      variant="icon"
+      icon={ShoppingBag}
+      label={showCount ? `Cart, ${itemCount} items` : 'Cart'}
+      badge={showCount ? badgeText : undefined}
+      badgeClassName="bg-[color:var(--accent-primary)] text-white"
+    />
   );
 }
diff --git a/frontend/components/shop/product-card.tsx b/frontend/components/shop/product-card.tsx
index aed911ee..9a4245b3 100644
--- a/frontend/components/shop/product-card.tsx
+++ b/frontend/components/shop/product-card.tsx
@@ -46,7 +46,7 @@ export function ProductCard({ product }: ProductCardProps) {
   return (
     <Link
       href={`/shop/products/${product.slug}`}
-      className="group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+      className="group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-shadow duration-500 hover:shadow-[var(--shop-card-shadow-hover)] hover:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     >
       {product.badge && product.badge !== 'NONE' && (
         <span
@@ -90,11 +90,15 @@ export function ProductCard({ product }: ProductCardProps) {
           )}
         </div>
 
-        {!product.inStock && (
-          <p className="mt-2 text-xs text-muted-foreground" role="status">
-            {t('soldOut')}
-          </p>
-        )}
+        <p
+          className={cn(
+            'mt-2 text-xs text-muted-foreground min-h-[1rem] leading-4',
+            product.inStock && 'invisible'
+          )}
+          {...(product.inStock ? { 'aria-hidden': true } : { role: 'status' })}
+        >
+          {t('soldOut')}
+        </p>
       </div>
     </Link>
   );
diff --git a/frontend/components/shop/product-filters.tsx b/frontend/components/shop/product-filters.tsx
index e8734097..0d8226f2 100644
--- a/frontend/components/shop/product-filters.tsx
+++ b/frontend/components/shop/product-filters.tsx
@@ -3,7 +3,16 @@
 import { useId } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-
+import {
+  SHOP_FOCUS,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_HOVER,
+  SHOP_CHIP_SELECTED,
+  SHOP_SWATCH_BASE,
+  SHOP_SIZE_CHIP_BASE,
+  SHOP_FILTER_ITEM_BASE,
+  SHOP_CHIP_BORDER_HOVER,
+} from '@/lib/shop/ui-classes';
 import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
 
@@ -55,13 +64,20 @@ export function ProductFilters() {
                 onClick={() => updateFilter('category', cat.slug)}
                 aria-current={currentCategory === cat.slug ? 'true' : undefined}
                 className={cn(
-                  'text-sm transition-colors',
+                  SHOP_FILTER_ITEM_BASE,
+                  SHOP_FOCUS,
                   currentCategory === cat.slug
-                    ? 'font-medium text-accent'
-                    : 'text-muted-foreground hover:text-foreground'
+                    ? 'text-accent'
+                    : 'text-muted-foreground hover:text-accent'
                 )}
               >
-                {tCategories(cat.slug === 'new-arrivals' ? 'newArrivals' : cat.slug === 'best-sellers' ? 'bestSellers' : cat.slug)}
+                {tCategories(
+                  cat.slug === 'new-arrivals'
+                    ? 'newArrivals'
+                    : cat.slug === 'best-sellers'
+                      ? 'bestSellers'
+                      : cat.slug
+                )}
               </button>
             </li>
           ))}
@@ -90,10 +106,11 @@ export function ProductFilters() {
                   }
                   aria-pressed={isSelected}
                   className={cn(
-                    'text-sm transition-colors',
+                    SHOP_FILTER_ITEM_BASE,
+                    SHOP_FOCUS,
                     isSelected
-                      ? 'font-medium text-accent'
-                      : 'text-muted-foreground hover:text-foreground'
+                      ? 'text-accent'
+                      : 'text-muted-foreground hover:text-accent'
                   )}
                 >
                   {tTypes(type.slug)}
@@ -127,10 +144,14 @@ export function ProductFilters() {
                 }
                 aria-pressed={isSelected}
                 className={cn(
-                  'h-7 w-7 rounded-full border-2 transition-all',
+                  SHOP_SWATCH_BASE,
+                  // у фільтрах розмір 8x8, тому override:
+                  'h-8 w-8',
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   isSelected
-                    ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
-                    : 'border-border hover:border-muted-foreground'
+                    ? SHOP_CHIP_SELECTED
+                    : cn(SHOP_CHIP_HOVER, SHOP_CHIP_BORDER_HOVER)
                 )}
                 style={{ background: color.hex }}
                 title={colorLabel}
@@ -161,10 +182,18 @@ export function ProductFilters() {
                 onClick={() => updateFilter('size', isSelected ? null : size)}
                 aria-pressed={isSelected}
                 className={cn(
-                  'rounded-md border px-3 py-1.5 text-sm transition-colors',
+                  SHOP_SIZE_CHIP_BASE,
+                  // у фільтрах інші паддінги — override:
+                  'px-3 py-1.5 text-sm',
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   isSelected
-                    ? 'border-accent bg-accent text-accent-foreground'
-                    : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
+                    ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
+                    : cn(
+                        'bg-transparent text-muted-foreground border-border hover:text-foreground',
+                        SHOP_CHIP_HOVER,
+                        SHOP_CHIP_BORDER_HOVER
+                      )
                 )}
               >
                 {size}
diff --git a/frontend/components/shop/product-sort.tsx b/frontend/components/shop/product-sort.tsx
index 5640c4aa..8aae175c 100644
--- a/frontend/components/shop/product-sort.tsx
+++ b/frontend/components/shop/product-sort.tsx
@@ -6,9 +6,15 @@ import { useId } from 'react';
 import { useRouter } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-
+import { ChevronDown } from 'lucide-react';
 import { SORT_OPTIONS } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
+import {
+  SHOP_DISABLED,
+  SHOP_FOCUS,
+  SHOP_SELECT_BASE,
+  SHOP_SELECT_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 type ProductSortProps = {
   className?: string;
@@ -30,10 +36,10 @@ export function ProductSort({ className }: ProductSortProps) {
 
   const getOptionLabel = (value: string) => {
     const keyMap: Record<string, string> = {
-      'featured': 'featured',
+      featured: 'featured',
       'price-asc': 'priceAsc',
       'price-desc': 'priceDesc',
-      'newest': 'newest',
+      newest: 'newest',
     };
     return tOptions(keyMap[value] || 'featured');
   };
@@ -64,26 +70,36 @@ export function ProductSort({ className }: ProductSortProps) {
         {t('sortBy')}
       </label>
 
-      <select
-        id={selectId}
-        name="sort"
-        value={currentSort}
-        onChange={e => handleSort(e.target.value)}
-        className={[
-          'h-10 w-full rounded-md border border-input px-3 text-sm transition-colors sm:w-48',
-          isActive
-            ? 'bg-muted text-foreground'
-            : 'bg-background text-muted-foreground',
-          'hover:text-foreground',
-          'focus:outline-none focus:ring-0 focus:ring-offset-0',
-        ].join(' ')}
-      >
-        {SORT_OPTIONS.map(option => (
-          <option key={option.value} value={option.value}>
-            {getOptionLabel(option.value)}
-          </option>
-        ))}
-      </select>
+      <div className="relative w-full sm:w-52">
+        <select
+          id={selectId}
+          name="sort"
+          value={currentSort}
+          onChange={e => handleSort(e.target.value)}
+          className={cn(
+            SHOP_SELECT_BASE,
+            SHOP_SELECT_INTERACTIVE,
+            SHOP_FOCUS,
+            SHOP_DISABLED,
+            isActive ? 'text-foreground' : 'text-muted-foreground'
+          )}
+        >
+          {SORT_OPTIONS.map(option => (
+            <option key={option.value} value={option.value}>
+              {getOptionLabel(option.value)}
+            </option>
+          ))}
+        </select>
+
+        <ChevronDown
+          className={cn(
+            'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2',
+            'text-muted-foreground transition-colors',
+            'peer-hover:text-foreground peer-focus-visible:text-foreground'
+          )}
+          aria-hidden="true"
+        />
+      </div>
     </form>
   );
 }
diff --git a/frontend/components/shop/shop-hero.tsx b/frontend/components/shop/shop-hero.tsx
index 6eebe123..c76cba58 100644
--- a/frontend/components/shop/shop-hero.tsx
+++ b/frontend/components/shop/shop-hero.tsx
@@ -5,6 +5,13 @@ interface HeroProps {
   ctaText: string;
   ctaLink: string;
 }
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_FOCUS,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
   return (
@@ -16,22 +23,66 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
         <div className="mx-auto max-w-3xl text-center">
           <h1
             id="shop-hero-title"
-            className="text-balance text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl"
+            className="relative inline-block text-balance text-4xl font-black leading-[1.08] tracking-tight sm:text-5xl lg:text-6xl pb-2"
           >
-            {headline}
+            <span className="relative inline-block bg-gradient-to-r from-foreground/80 via-foreground to-foreground/80 bg-clip-text text-transparent dark:from-[var(--accent-primary)]/70 dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 dark:to-[var(--accent-hover)]/70">
+              {headline}
+            </span>
+
+            <span
+              className="pointer-events-none absolute inset-0 inline-block bg-gradient-to-r from-foreground via-foreground to-foreground bg-clip-text text-transparent wave-text-gradient dark:from-[var(--accent-primary)] dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] dark:to-[var(--accent-hover)]"
+              aria-hidden="true"
+            >
+              {headline}
+            </span>
           </h1>
 
-          <p className="mx-auto mt-6 max-w-xl text-pretty text-lg text-muted-foreground">
+          <p className="mx-auto mt-6 max-w-xl text-pretty text-sm sm:text-base md:text-lg text-muted-foreground font-light">
             {subheadline}
           </p>
 
           <div className="mt-10">
             <Link
               href={ctaLink}
-              className="inline-flex items-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-semibold uppercase tracking-wide text-background transition-colors hover:bg-foreground/90 dark:bg-[color:var(--accent-primary)] dark:hover:bg-[color:var(--accent-hover)] dark:text-[color:var(--foreground)]"
+              className={`
+    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
+    px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
+    text-white
+    shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]
+  `}
             >
-              <span>{ctaText}</span>
-              <span aria-hidden="true">→</span>
+              {/* base gradient */}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+
+              {/* hover wave overlay */}
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+
+              {/* glass inset */}
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10 flex items-center gap-2">
+                <span>{ctaText}</span>
+                <span
+                  aria-hidden="true"
+                  className="transition-transform duration-300 group-hover:translate-x-0.5"
+                >
+                  →
+                </span>
+              </span>
             </Link>
           </div>
         </div>
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 874d69fa..515f96d4 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -58,7 +58,7 @@ export function ThemeToggle() {
         .theme-toggle-btn:hover :global(svg),
         .theme-toggle-btn:focus-visible :global(svg),
         .theme-toggle-btn:active :global(svg) {
-          color: var(--accent-hover);
+          color: var(--theme-toggle-hover, var(--accent-hover));
         }
       `}</style>
     </div>
diff --git a/frontend/lib/shop/ui-classes.ts b/frontend/lib/shop/ui-classes.ts
new file mode 100644
index 00000000..22c6c737
--- /dev/null
+++ b/frontend/lib/shop/ui-classes.ts
@@ -0,0 +1,118 @@
+export const SHOP_FOCUS = `
+  focus-visible:outline-none
+  focus-visible:ring-2
+  focus-visible:ring-[color:var(--color-ring)]
+  focus-visible:ring-offset-2
+  focus-visible:ring-offset-background
+`;
+
+export const SHOP_CTA_BASE = `
+  group relative inline-flex items-center overflow-hidden rounded-2xl
+  text-xs md:text-sm font-semibold tracking-[0.25em] uppercase
+  active:scale-95 active:brightness-110
+  transition-shadow duration-700 ease-out
+`;
+
+export const SHOP_CTA_WAVE = `
+  absolute inset-0 opacity-0
+  group-hover:opacity-100 group-active:opacity-100
+  group-hover:animate-wave-slide-up
+`;
+
+export const SHOP_CTA_INSET = `
+  pointer-events-none absolute inset-[2px] rounded-2xl
+  bg-gradient-to-r from-white/20 via-white/5 to-white/20
+  opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity
+`;
+
+// Shared interaction for “chips” (swatches, size pills, +/- stepper)
+export const SHOP_CHIP_INTERACTIVE =
+  'transition-[box-shadow,border-color,color,background-color,filter] duration-500 ease-out hover:brightness-110';
+
+// Optional “lift” (НЕ використовуй для size/+/- якщо хочеш без тремтіння)
+export const SHOP_CHIP_LIFT =
+  'transition-transform duration-500 ease-out hover:-translate-y-0.5';
+
+export const SHOP_CHIP_HOVER =
+  'hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-accent/60';
+
+export const SHOP_CHIP_SELECTED =
+  'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background shadow-[var(--shop-chip-shadow-selected)]';
+
+// Optional: base shapes (so you don’t repeat layout primitives)
+export const SHOP_SWATCH_BASE =
+  'group relative h-9 w-9 rounded-full border border-border shadow-none';
+
+export const SHOP_SIZE_CHIP_BASE =
+  'group rounded-md border px-4 py-2 text-sm font-medium';
+
+export const SHOP_STEPPER_BUTTON_BASE =
+  'flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground bg-transparent';
+
+/**
+ * Builds a horizontal gradient background from two CSS vars.
+ * Example: shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')
+ */
+
+// Text-link-ish filter items (category/type lists)
+export const SHOP_FILTER_ITEM_BASE =
+  'inline-flex text-sm font-medium transition-[color,transform] duration-300 ease-out hover:-translate-y-[1px]';
+
+// If you want the “chip hover border” to be consistent (used in filters + size)
+export const SHOP_CHIP_BORDER_HOVER = 'hover:border-foreground/60';
+
+export const SHOP_DISABLED = 'disabled:pointer-events-none disabled:opacity-60';
+
+export const SHOP_CHIP_SHADOW_HOVER =
+  'hover:shadow-[var(--shop-chip-shadow-hover)]';
+
+/**
+ * Reusable “text link” for product names / order links / “go to order”, etc.
+ * Size додаєш окремо (text-xs, text-[15px], …).
+ */
+export const SHOP_LINK_BASE =
+  'inline-flex font-medium text-foreground underline underline-offset-4 decoration-2 decoration-foreground/30 ' +
+  'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
+  'hover:-translate-y-[1px] hover:text-accent hover:decoration-[color:var(--accent-primary)]';
+
+export const SHOP_LINK_MD = 'text-[15px]';
+export const SHOP_LINK_XS = 'text-xs';
+
+/**
+ * CTA interaction (додатково до SHOP_CTA_BASE).
+ * SHOP_CTA_BASE залишаємо як layout+typography+active.
+ */
+export const SHOP_CTA_INTERACTIVE =
+  'transition-[transform,filter,box-shadow] duration-700 ease-out';
+
+// Outline button (inverted to CTA; used in error pages, secondary actions)
+export const SHOP_OUTLINE_BTN_BASE =
+  'inline-flex items-center justify-center rounded-xl border px-4 py-2 ' +
+  'text-sm font-semibold uppercase tracking-[0.25em] ' +
+  'border-border text-foreground bg-transparent';
+
+export const SHOP_OUTLINE_BTN_INTERACTIVE =
+  'transition-[transform,box-shadow,border-color,color,background-color,filter] duration-500 ease-out ' +
+  'hover:-translate-y-[1px] hover:shadow-[var(--shop-chip-shadow-hover)] hover:brightness-110 ' +
+  'hover:border-[color:var(--accent-primary)] hover:text-[color:var(--accent-primary)]';
+
+// Nav/breadcrumb-ish links (e.g. "My orders", "Shop", "Back to ...")
+export const SHOP_NAV_LINK_BASE =
+  'inline-flex font-medium underline underline-offset-4 decoration-2 ' +
+  'text-muted-foreground decoration-foreground/30 ' +
+  'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
+  'hover:-translate-y-[1px] hover:text-accent hover:decoration-[color:var(--accent-primary)]';
+
+// Select / dropdown (e.g. sort)
+export const SHOP_SELECT_BASE =
+  'peer h-10 w-full appearance-none rounded-xl border border-border bg-background pl-3 pr-11 text-sm font-medium';
+
+export const SHOP_SELECT_INTERACTIVE =
+  'transition-[transform,box-shadow,border-color,color,background-color,filter] duration-500 ease-out ' +
+  'hover:-translate-y-[1px] hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-foreground/40 hover:brightness-110';
+
+export function shopCtaGradient(baseVar: string, hoverVar: string) {
+  return {
+    background: `linear-gradient(90deg, var(${baseVar}) 0%, var(${hoverVar}) 100%)`,
+  } as const;
+}