diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css
index 1873b4c..d6c6c9f 100644
--- a/assets/css/shop/components.css
+++ b/assets/css/shop/components.css
@@ -324,4 +324,549 @@
   .details-subheading {
     color: var(--t-text-primary);
   }
+
+  /* ── Announcement bar ── */
+
+  .announcement-bar {
+    background-color: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%));
+    color: var(--t-text-inverse);
+    text-align: center;
+    padding: 0.5rem 1rem;
+    font-size: var(--t-text-small);
+  }
+
+  /* ── Shop container (body-level defaults) ── */
+
+  .shop-container {
+    background-color: var(--t-surface-base);
+    font-family: var(--t-font-body);
+    color: var(--t-text-primary);
+  }
+
+  /* ── Shop header ── */
+
+  .shop-header {
+    background-color: var(--t-surface-raised);
+    border-bottom: 1px solid var(--t-border-default);
+    display: flex;
+    align-items: center;
+  }
+
+  .shop-logo {
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .shop-logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  .shop-logo-img {
+    width: auto;
+  }
+
+  .shop-logo-text {
+    font-family: var(--t-font-heading);
+    font-size: var(--t-text-xl);
+    font-weight: var(--t-heading-weight);
+    color: var(--t-text-primary);
+  }
+
+  .shop-nav {
+    position: relative;
+    z-index: 1;
+  }
+
+  .shop-actions {
+    position: relative;
+    z-index: 1;
+  }
+
+  .header-icon-btn {
+    color: var(--t-text-secondary);
+    border-radius: var(--t-radius-button);
+
+    &:where(button) {
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  .cart-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+    color: var(--t-text-inverse);
+    font-size: var(--t-text-caption);
+    font-weight: 600;
+    min-width: 18px;
+    height: 18px;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+  }
+
+  /* ── Desktop nav links ── */
+
+  .nav-link {
+    color: var(--t-text-secondary);
+    text-decoration: none;
+    cursor: pointer;
+
+    &[aria-current="page"] {
+      color: var(--t-text-primary);
+      border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+    }
+  }
+
+  /* ── Mobile bottom nav ── */
+
+  .mobile-bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: var(--t-surface-raised);
+    border-top: 1px solid var(--t-border-default);
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+
+    & ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  .mobile-nav-link {
+    color: var(--t-text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    background-color: transparent;
+
+    &[aria-current="page"] {
+      color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%));
+      font-weight: 600;
+      background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1);
+    }
+  }
+
+  /* ── Search modal ── */
+
+  .search-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1001;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 10vh;
+  }
+
+  .search-panel {
+    background: var(--t-surface-raised);
+    border-radius: var(--t-radius-card);
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .search-bar {
+    border-bottom: 1px solid var(--t-border-default);
+  }
+
+  .search-icon {
+    color: var(--t-text-tertiary);
+  }
+
+  .search-input {
+    font-family: var(--t-font-body);
+    color: var(--t-text-primary);
+  }
+
+  .search-kbd {
+    color: var(--t-text-tertiary);
+    border: 1px solid var(--t-border-default);
+  }
+
+  .search-close {
+    color: var(--t-text-tertiary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-radius: var(--t-radius-button);
+  }
+
+  .search-results {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .search-result {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+      background: var(--t-surface-sunken);
+    }
+  }
+
+  .search-result-thumb {
+    background: var(--t-surface-sunken);
+  }
+
+  .search-result-title {
+    color: var(--t-text-primary);
+  }
+
+  .search-result-meta {
+    color: var(--t-text-tertiary);
+  }
+
+  .search-hint {
+    color: var(--t-text-tertiary);
+  }
+
+  /* ── Shop footer ── */
+
+  .shop-footer {
+    background-color: var(--t-surface-raised);
+    border-top: 1px solid var(--t-border-default);
+  }
+
+  .footer-heading {
+    font-family: var(--t-font-heading);
+    color: var(--t-text-primary);
+  }
+
+  .footer-link {
+    color: var(--t-text-secondary);
+    cursor: pointer;
+  }
+
+  .footer-bottom {
+    border-top: 1px solid var(--t-border-subtle);
+  }
+
+  .footer-copyright {
+    color: var(--t-text-tertiary);
+  }
+
+  /* ── Cart drawer ── */
+
+  .cart-drawer-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+
+  .cart-drawer {
+    position: fixed;
+    top: 0;
+    right: -400px;
+    width: 400px;
+    max-width: 90vw;
+    height: 100vh;
+    height: 100dvh;
+    background: var(--t-surface-raised);
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    transition: right 0.3s ease;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .cart-drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--t-border-default);
+  }
+
+  .cart-drawer-title {
+    font-family: var(--t-font-heading);
+    font-weight: var(--t-heading-weight);
+    font-size: var(--t-text-large);
+    color: var(--t-text-primary);
+    margin: 0;
+  }
+
+  .cart-drawer-close {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: var(--t-text-secondary);
+  }
+
+  .cart-drawer-items {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+
+    & ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    & li {
+      border-bottom: 1px solid var(--t-border-default);
+    }
+  }
+
+  .cart-drawer-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--t-border-default);
+    background: var(--t-surface-sunken);
+  }
+
+  .cart-drawer-total {
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--t-font-body);
+    font-size: var(--t-text-base);
+    font-weight: 600;
+    color: var(--t-text-primary);
+    margin-bottom: 1rem;
+  }
+
+  .cart-drawer-checkout {
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%));
+    color: var(--t-text-inverse);
+    border-radius: var(--t-radius-button);
+    border: none;
+    cursor: pointer;
+    font-family: var(--t-font-body);
+  }
+
+  /* ── Cart item row ── */
+
+  .cart-item-row {
+    display: flex;
+    gap: 1rem;
+    padding: 0.75rem 0;
+
+    &[data-size="compact"] {
+      gap: 0.75rem;
+    }
+  }
+
+  .cart-item-image {
+    display: block;
+    border-radius: var(--t-radius-card);
+    background-size: cover;
+    background-position: center;
+    flex-shrink: 0;
+    width: 80px;
+    height: 80px;
+
+    &[data-size="compact"] {
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  .cart-item-image--empty {
+    background-color: var(--t-surface-sunken);
+  }
+
+  .cart-item-details {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cart-item-name {
+    font-family: var(--t-font-body);
+    font-size: var(--t-text-base);
+    font-weight: 500;
+    margin: 0 0 2px;
+
+    &[data-size="compact"] {
+      font-size: var(--t-text-small);
+    }
+
+    & span {
+      color: var(--t-text-primary);
+    }
+  }
+
+  .cart-item-name-link {
+    color: var(--t-text-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .cart-item-variant-text {
+    font-family: var(--t-font-body);
+    font-size: var(--t-text-caption);
+    color: var(--t-text-tertiary);
+    margin: 0;
+  }
+
+  .cart-item-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 4px;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .cart-qty-group {
+    border: 1px solid var(--t-border-default);
+    border-radius: var(--t-radius-input);
+  }
+
+  .cart-qty-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--t-text-primary);
+  }
+
+  .cart-qty-display {
+    border-color: var(--t-border-default);
+    color: var(--t-text-primary);
+    min-width: 2rem;
+    text-align: center;
+  }
+
+  .cart-qty-text {
+    font-size: var(--t-text-caption);
+    color: var(--t-text-tertiary);
+  }
+
+  .cart-item-price-col {
+    flex-shrink: 0;
+  }
+
+  .cart-item-price {
+    font-weight: 500;
+    font-size: var(--t-text-base);
+    color: var(--t-text-primary);
+    margin: 0;
+
+    &[data-size="compact"] {
+      font-size: var(--t-text-small);
+    }
+  }
+
+  .cart-remove-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: var(--t-font-body);
+    font-size: var(--t-text-caption);
+    color: var(--t-text-tertiary);
+    text-decoration: underline;
+  }
+
+  /* ── Cart empty state ── */
+
+  .cart-empty {
+    color: var(--t-text-secondary);
+  }
+
+  .cart-empty-icon {
+    color: var(--t-text-tertiary);
+  }
+
+  .cart-continue-link {
+    color: var(--t-text-accent);
+    text-decoration: underline;
+
+    &:where(button) {
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  /* ── Cart page item (full size) ── */
+
+  .cart-page-image {
+    border-radius: var(--t-radius-image);
+  }
+
+  .cart-page-item-name {
+    font-family: var(--t-font-heading);
+    color: var(--t-text-primary);
+  }
+
+  .cart-page-item-variant {
+    color: var(--t-text-secondary);
+  }
+
+  .cart-page-item-remove {
+    color: var(--t-text-tertiary);
+  }
+
+  .cart-page-item-price {
+    color: var(--t-text-primary);
+  }
+
+  /* ── Delivery line ── */
+
+  .delivery-line {
+    font-family: var(--t-font-body);
+    font-size: var(--t-text-small);
+    color: var(--t-text-secondary);
+
+    & form {
+      display: inline;
+    }
+  }
+
+  .delivery-select {
+    appearance: auto;
+    background: transparent;
+    border: none;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* ── Order summary ── */
+
+  .order-summary-heading {
+    font-family: var(--t-font-heading);
+    color: var(--t-text-primary);
+  }
+
+  .order-summary-label {
+    color: var(--t-text-secondary);
+  }
+
+  .order-summary-value {
+    color: var(--t-text-primary);
+  }
+
+  .order-summary-divider {
+    border-color: var(--t-border-default);
+  }
 }
diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 80a1fda..8762e43 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -312,8 +312,7 @@
   color: var(--t-text-primary);
 }
 
-.shop-nav a[aria-current="page"],
-.shop-nav span[aria-current="page"] {
-  color: var(--t-text-primary);
+/* Active nav underline — must stay unlayered to match the base border above */
+.shop-nav [aria-current="page"] {
   border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
 }
diff --git a/lib/simpleshop_theme_web/components/shop_components/cart.ex b/lib/simpleshop_theme_web/components/shop_components/cart.ex
index b946b74..c76fea7 100644
--- a/lib/simpleshop_theme_web/components/shop_components/cart.ex
+++ b/lib/simpleshop_theme_web/components/shop_components/cart.ex
@@ -60,7 +60,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
       id="cart-drawer-overlay"
       class={["cart-drawer-overlay", @open && "open"]}
       aria-hidden={to_string(!@open)}
-      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
       phx-click={close_cart_drawer_js()}
     >
     </div>
@@ -75,25 +74,20 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
       aria-hidden={to_string(!@open)}
       phx-hook="CartDrawer"
       class={["cart-drawer", @open && "open"]}
-      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; height: 100dvh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
     >
       <p id="cart-drawer-description" class="sr-only">
         Shopping basket with {@cart_count} {if @cart_count == 1, do: "item", else: "items"}. Press Escape to close.
       </p>
-      <div
-        class="cart-drawer-header"
-        style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);"
-      >
+      <div class="cart-drawer-header">
         <h2
           id="cart-drawer-title"
-          style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;"
+          class="cart-drawer-title"
         >
           Your basket
         </h2>
         <button
           type="button"
           class="cart-drawer-close"
-          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
           phx-click={close_cart_drawer_js()}
           aria-label="Close cart"
         >
@@ -112,13 +106,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
         </button>
       </div>
 
-      <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
+      <div class="cart-drawer-items">
         <%= if @cart_items == [] do %>
           <.cart_empty_state mode={@mode} />
         <% else %>
-          <ul role="list" aria-label="Cart items" style="list-style: none; margin: 0; padding: 0;">
+          <ul role="list" aria-label="Cart items">
             <%= for item <- @cart_items do %>
-              <li style="border-bottom: 1px solid var(--t-border-default);">
+              <li>
                 <.cart_item_row item={item} size={:compact} show_quantity_controls mode={@mode} />
               </li>
             <% end %>
@@ -126,20 +120,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
         <% end %>
       </div>
 
-      <div
-        class="cart-drawer-footer"
-        style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);"
-      >
+      <div class="cart-drawer-footer">
         <.delivery_line
           shipping_estimate={@shipping_estimate}
           country_code={@country_code}
           available_countries={@available_countries}
           mode={@mode}
         />
-        <div
-          class="cart-drawer-total"
-          style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;"
-        >
+        <div class="cart-drawer-total">
           <span>{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}</span>
           <span>{@display_total}</span>
         </div>
@@ -147,7 +135,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
           <button
             type="button"
             class="cart-drawer-checkout w-full mb-2"
-            style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
           >
             Checkout
           </button>
@@ -157,7 +144,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
             <button
               type="submit"
               class="cart-drawer-checkout w-full mb-2"
-              style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
             >
               Checkout
             </button>
@@ -187,79 +173,71 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
     ~H"""
     <div
       class="cart-item-row"
-      style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
+      data-size={if @size == :compact, do: "compact"}
     >
       <%= if @mode != :preview do %>
         <.link
           navigate={"/products/#{@item.product_id}"}
-          class="cart-item-image"
-          style={"display: block; width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
+          class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
+          data-size={if @size == :compact, do: "compact"}
+          style={if @item.image, do: "background-image: url('#{@item.image}');"}
           aria-label={"View #{@item.name}"}
         >
         </.link>
       <% else %>
         <div
-          class="cart-item-image"
-          style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
+          class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
+          data-size={if @size == :compact, do: "compact"}
+          style={if @item.image, do: "background-image: url('#{@item.image}');"}
         >
         </div>
       <% end %>
-      <div class="cart-item-details" style="flex: 1; min-width: 0;">
-        <h3 style={"font-family: var(--t-font-body); font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; font-weight: 500; margin: 0 0 2px;"}>
+      <div class="cart-item-details">
+        <h3 class="cart-item-name" data-size={if @size == :compact, do: "compact"}>
           <%= if @mode != :preview do %>
             <.link
               navigate={"/products/#{@item.product_id}"}
-              style="color: var(--t-text-primary); text-decoration: none;"
-              onmouseover="this.style.textDecoration='underline'"
-              onmouseout="this.style.textDecoration='none'"
+              class="cart-item-name-link"
             >
               {@item.name}
             </.link>
           <% else %>
-            <span style="color: var(--t-text-primary);">{@item.name}</span>
+            <span>{@item.name}</span>
           <% end %>
         </h3>
         <%= if @item.variant do %>
-          <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
+          <p class="cart-item-variant-text">
             {@item.variant}
           </p>
         <% end %>
 
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px; flex-wrap: wrap; gap: 0.5rem;">
+        <div class="cart-item-actions">
           <%= if @show_quantity_controls do %>
-            <div
-              class="flex items-center"
-              style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
-            >
+            <div class="cart-qty-group flex items-center">
               <button
                 type="button"
                 phx-click="decrement"
                 phx-value-id={@item.variant_id}
-                class="px-3 py-1"
-                style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
+                class="cart-qty-btn px-3 py-1"
                 aria-label={"Decrease quantity of #{@item.name}"}
               >
                 −
               </button>
-              <span
-                class="px-3 py-1 border-x"
-                style="border-color: var(--t-border-default); color: var(--t-text-primary); min-width: 2rem; text-align: center;"
-              >
+              <span class="cart-qty-display px-3 py-1 border-x">
                 {@item.quantity}
               </span>
               <button
                 type="button"
                 phx-click="increment"
                 phx-value-id={@item.variant_id}
-                class="px-3 py-1"
-                style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
+                class="cart-qty-btn px-3 py-1"
                 aria-label={"Increase quantity of #{@item.name}"}
               >
                 +
               </button>
             </div>
           <% else %>
-            <span style="font-size: var(--t-text-caption); color: var(--t-text-tertiary);">
+            <span class="cart-qty-text">
               Qty: {@item.quantity}
             </span>
           <% end %>
@@ -268,8 +246,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
         </div>
       </div>
 
-      <div class="text-right" style="flex-shrink: 0;">
-        <p style={"font-weight: 500; font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; color: var(--t-text-primary); margin: 0;"}>
+      <div class="cart-item-price-col text-right">
+        <p class="cart-item-price" data-size={if @size == :compact, do: "compact"}>
           {SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}
         </p>
       </div>
@@ -284,12 +262,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
 
   def cart_empty_state(assigns) do
     ~H"""
-    <div class="text-center py-8" style="color: var(--t-text-secondary);">
+    <div class="cart-empty text-center py-8">
       <svg
-        class="w-16 h-16 mx-auto mb-4"
+        class="cart-empty-icon w-16 h-16 mx-auto mb-4"
         width="64"
         height="64"
-        style="color: var(--t-text-tertiary);"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -305,14 +282,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
           type="button"
           phx-click="change_preview_page"
           phx-value-page="collection"
-          style="color: var(--t-text-accent); text-decoration: underline; background: none; border: none; cursor: pointer;"
+          class="cart-continue-link"
         >
           Continue shopping
         </button>
       <% else %>
         <.link
           navigate="/collections/all"
-          style="color: var(--t-text-accent); text-decoration: underline;"
+          class="cart-continue-link"
         >
           Continue shopping
         </.link>
@@ -333,7 +310,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
       type="button"
       phx-click="remove_item"
       phx-value-id={@variant_id}
-      style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;"
+      class="cart-remove-btn"
       aria-label={"Remove #{@item_name} from cart"}
     >
       Remove
@@ -358,10 +335,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
   def cart_item(assigns) do
     ~H"""
     <.shop_card class="flex gap-4 p-4">
-      <div
-        class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden"
-        style="border-radius: var(--t-radius-image);"
-      >
+      <div class="cart-page-image w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden">
         <img
           src={cart_item_image(@item.product)}
           alt={@item.product.title}
@@ -373,39 +347,30 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
       </div>
 
       <div class="flex-1">
-        <h3
-          class="font-semibold mb-1"
-          style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-        >
+        <h3 class="cart-page-item-name font-semibold mb-1">
           {@item.product.title}
         </h3>
-        <p class="text-sm mb-2" style="color: var(--t-text-secondary);">
+        <p class="cart-page-item-variant text-sm mb-2">
           {@item.variant}
         </p>
 
         <div class="flex items-center gap-4">
-          <div
-            class="flex items-center"
-            style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
-          >
-            <button class="px-3 py-1" style="color: var(--t-text-primary);">−</button>
-            <span
-              class="px-3 py-1 border-x"
-              style="border-color: var(--t-border-default); color: var(--t-text-primary);"
-            >
+          <div class="cart-qty-group flex items-center">
+            <button class="cart-qty-btn px-3 py-1">−</button>
+            <span class="cart-qty-display px-3 py-1 border-x">
               {@item.quantity}
             </span>
-            <button class="px-3 py-1" style="color: var(--t-text-primary);">+</button>
+            <button class="cart-qty-btn px-3 py-1">+</button>
           </div>
 
-          <button class="text-sm" style="color: var(--t-text-tertiary);">
+          <button class="cart-page-item-remove text-sm">
             Remove
           </button>
         </div>
       </div>
 
       <div class="text-right">
-        <p class="font-bold text-lg" style="color: var(--t-text-primary);">
+        <p class="cart-page-item-price font-bold text-lg">
           {SimpleshopTheme.Cart.format_price(@item.product.cheapest_price * @item.quantity)}
         </p>
       </div>
@@ -426,18 +391,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
 
   defp delivery_line(assigns) do
     ~H"""
-    <div
-      class="flex justify-between items-center"
-      style="font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary);"
-    >
+    <div class="delivery-line flex justify-between items-center">
       <span class="flex items-center gap-1">
         Delivery to
         <%= if @available_countries != [] and @mode != :preview do %>
-          <form phx-change="change_country" style="display: inline;">
+          <form phx-change="change_country">
             <select
               name="country"
+              class="delivery-select"
               aria-label="Delivery country"
-              style="appearance: auto; background: transparent; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;"
             >
               <%= for {code, name} <- @available_countries do %>
                 <option value={code} selected={code == @country_code}>{name}</option>
@@ -484,17 +446,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
 
     ~H"""
     <.shop_card class="p-6 sticky top-4">
-      <h2
-        class="text-xl font-bold mb-6"
-        style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-      >
+      <h2 class="order-summary-heading text-xl font-bold mb-6">
         Order summary
       </h2>
 
       <div class="flex flex-col gap-3 mb-6">
         <div class="flex justify-between">
-          <span style="color: var(--t-text-secondary);">Subtotal</span>
-          <span style="color: var(--t-text-primary);">
+          <span class="order-summary-label">Subtotal</span>
+          <span class="order-summary-value">
             {SimpleshopTheme.Cart.format_price(@subtotal)}
           </span>
         </div>
@@ -504,12 +463,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
           available_countries={@available_countries}
           mode={@mode}
         />
-        <div class="border-t pt-3" style="border-color: var(--t-border-default);">
+        <div class="order-summary-divider border-t pt-3">
           <div class="flex justify-between text-lg">
-            <span class="font-semibold" style="color: var(--t-text-primary);">
+            <span class="order-summary-value font-semibold">
               {if @shipping_estimate, do: "Estimated total", else: "Subtotal"}
             </span>
-            <span class="font-bold" style="color: var(--t-text-primary);">
+            <span class="order-summary-value font-bold">
               {SimpleshopTheme.Cart.format_price(@estimated_total)}
             </span>
           </div>
diff --git a/lib/simpleshop_theme_web/components/shop_components/layout.ex b/lib/simpleshop_theme_web/components/shop_components/layout.ex
index ea3ae16..294a14f 100644
--- a/lib/simpleshop_theme_web/components/shop_components/layout.ex
+++ b/lib/simpleshop_theme_web/components/shop_components/layout.ex
@@ -26,11 +26,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
 
   def announcement_bar(assigns) do
     ~H"""
-    <div
-      class="announcement-bar"
-      style="background-color: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
-    >
-      <p style="margin: 0;">{@message}</p>
+    <div class="announcement-bar">
+      <p>{@message}</p>
     </div>
     """
   end
@@ -104,7 +101,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
       id={unless @error_page, do: "shop-container"}
       phx-hook={unless @error_page, do: "CartPersist"}
       class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
-      style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
     >
       <.skip_link />
 
@@ -182,13 +178,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
     ~H"""
     <nav
       class="mobile-bottom-nav md:hidden"
-      style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px);"
       aria-label="Main navigation"
     >
-      <ul
-        class="flex justify-around items-center h-16"
-        style="margin: 0; padding: 0; list-style: none;"
-      >
+      <ul class="flex justify-around items-center h-16">
         <.mobile_nav_item
           icon={:home}
           label="Home"
@@ -247,8 +239,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           href="#"
           phx-click="change_preview_page"
           phx-value-page={@page}
-          class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
-          style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
+          class="mobile-nav-link flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
           aria-current={if @is_current, do: "page", else: nil}
         >
           <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
@@ -257,8 +248,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
       <% else %>
         <.link
           navigate={@href}
-          class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
-          style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
+          class="mobile-nav-link flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
           aria-current={if @is_current, do: "page", else: nil}
         >
           <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
@@ -390,24 +380,19 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
     <div
       id="search-modal"
       class="search-modal"
-      style={"position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: #{if @search_open, do: "flex", else: "none"}; align-items: flex-start; justify-content: center; padding-top: 10vh;"}
+      style={"display: #{if @search_open, do: "flex", else: "none"};"}
       phx-hook="SearchModal"
       phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
     >
       <div
-        class="search-modal-content w-full max-w-xl mx-4"
-        style="background: var(--t-surface-raised); border-radius: var(--t-radius-card); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"
+        class="search-panel w-full max-w-xl mx-4"
         onclick="event.stopPropagation()"
       >
-        <div
-          class="flex items-center gap-3 p-4"
-          style="border-bottom: 1px solid var(--t-border-default);"
-        >
+        <div class="search-bar flex items-center gap-3 p-4">
           <svg
-            class="w-5 h-5 flex-shrink-0"
+            class="search-icon w-5 h-5 flex-shrink-0"
             width="20"
             height="20"
-            style="color: var(--t-text-tertiary);"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -420,8 +405,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
             type="text"
             id="search-input"
             name="query"
-            class="flex-1 text-lg bg-transparent border-none outline-none"
-            style="font-family: var(--t-font-body); color: var(--t-text-primary);"
+            class="search-input flex-1 text-lg bg-transparent border-none outline-none"
             placeholder="Search products..."
             value={@search_query}
             phx-keyup="search"
@@ -433,16 +417,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
             aria-autocomplete="list"
           />
           <div
-            class="hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
-            style="color: var(--t-text-tertiary); border: 1px solid var(--t-border-default);"
+            class="search-kbd hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
             aria-hidden="true"
           >
             <kbd>⌘</kbd><kbd>K</kbd>
           </div>
           <button
             type="button"
-            class="w-8 h-8 flex items-center justify-center transition-all"
-            style="color: var(--t-text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
+            class="search-close w-8 h-8 flex items-center justify-center transition-all"
             phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
             aria-label="Close search"
           >
@@ -461,7 +443,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           </button>
         </div>
 
-        <div class="search-results" style="max-height: 60vh; overflow-y: auto;">
+        <div class="search-results">
           <%= cond do %>
             <% @search_results != [] -> %>
               <ul id="search-results-list" class="py-2" role="listbox" aria-label="Search results">
@@ -473,16 +455,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                 >
                   <.link
                     navigate={"/products/#{item.product.slug || item.product.id}"}
-                    class="flex items-center gap-3 px-4 py-3 transition-colors"
-                    style="text-decoration: none; color: inherit;"
-                    onmouseenter="this.style.background='var(--t-surface-sunken)'"
-                    onmouseleave="this.style.background='transparent'"
+                    class="search-result flex items-center gap-3 px-4 py-3 transition-colors"
                     phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
                   >
                     <div
                       :if={item.image_url}
-                      class="w-12 h-12 flex-shrink-0 rounded overflow-hidden"
-                      style="background: var(--t-surface-sunken);"
+                      class="search-result-thumb w-12 h-12 flex-shrink-0 rounded overflow-hidden"
                     >
                       <img
                         src={item.image_url}
@@ -492,12 +470,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       />
                     </div>
                     <div class="flex-1 min-w-0">
-                      <p class="text-sm font-medium truncate" style="color: var(--t-text-primary);">
+                      <p class="search-result-title text-sm font-medium truncate">
                         {item.product.title}
                       </p>
-                      <p class="text-xs" style="color: var(--t-text-tertiary);">
+                      <p class="search-result-meta text-xs">
                         {item.product.category}
-                        <span style="margin-left: 0.5rem;">
+                        <span class="ml-2">
                           {Cart.format_price(item.product.cheapest_price)}
                         </span>
                       </p>
@@ -506,11 +484,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                 </li>
               </ul>
             <% String.length(@search_query) >= 2 -> %>
-              <div class="p-6" style="color: var(--t-text-tertiary);">
+              <div class="search-hint p-6">
                 <p class="text-sm">No products found for "{@search_query}"</p>
               </div>
             <% @hint_text != nil -> %>
-              <div class="p-6" style="color: var(--t-text-tertiary);">
+              <div class="search-hint p-6">
                 <p class="text-sm">{@hint_text}</p>
               </div>
             <% true -> %>
@@ -543,7 +521,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
     assigns = assign(assigns, :current_year, Date.utc_today().year)
 
     ~H"""
-    <footer style="background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default);">
+    <footer class="shop-footer">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
           <.newsletter_card variant={:inline} />
@@ -551,10 +529,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
     <!-- Links -->
           <div class="grid grid-cols-2 gap-8">
             <div>
-              <h4
-                class="font-semibold mb-4 text-sm"
-                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-              >
+              <h4 class="footer-heading font-semibold mb-4 text-sm">
                 Shop
               </h4>
               <ul class="flex flex-col gap-2 text-sm">
@@ -564,8 +539,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       href="#"
                       phx-click="change_preview_page"
                       phx-value-page="collection"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary); cursor: pointer;"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       All products
                     </a>
@@ -576,8 +550,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                         href="#"
                         phx-click="change_preview_page"
                         phx-value-page="collection"
-                        class="transition-colors hover:opacity-80"
-                        style="color: var(--t-text-secondary); cursor: pointer;"
+                        class="footer-link transition-colors hover:opacity-80"
                       >
                         {category.name}
                       </a>
@@ -587,8 +560,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                   <li>
                     <.link
                       navigate="/collections/all"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary);"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       All products
                     </.link>
@@ -597,8 +569,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                     <li>
                       <.link
                         navigate={"/collections/#{category.slug}"}
-                        class="transition-colors hover:opacity-80"
-                        style="color: var(--t-text-secondary);"
+                        class="footer-link transition-colors hover:opacity-80"
                       >
                         {category.name}
                       </.link>
@@ -608,10 +579,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
               </ul>
             </div>
             <div>
-              <h4
-                class="font-semibold mb-4 text-sm"
-                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-              >
+              <h4 class="footer-heading font-semibold mb-4 text-sm">
                 Help
               </h4>
               <ul class="flex flex-col gap-2 text-sm">
@@ -621,8 +589,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       href="#"
                       phx-click="change_preview_page"
                       phx-value-page="delivery"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary); cursor: pointer;"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Delivery & returns
                     </a>
@@ -632,8 +599,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       href="#"
                       phx-click="change_preview_page"
                       phx-value-page="privacy"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary); cursor: pointer;"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Privacy policy
                     </a>
@@ -643,8 +609,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       href="#"
                       phx-click="change_preview_page"
                       phx-value-page="terms"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary); cursor: pointer;"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Terms of service
                     </a>
@@ -654,8 +619,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                       href="#"
                       phx-click="change_preview_page"
                       phx-value-page="contact"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary); cursor: pointer;"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Contact
                     </a>
@@ -664,8 +628,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                   <li>
                     <.link
                       navigate="/delivery"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary);"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Delivery & returns
                     </.link>
@@ -673,8 +636,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                   <li>
                     <.link
                       navigate="/privacy"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary);"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Privacy policy
                     </.link>
@@ -682,8 +644,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                   <li>
                     <.link
                       navigate="/terms"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary);"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Terms of service
                     </.link>
@@ -691,8 +652,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
                   <li>
                     <.link
                       navigate="/contact"
-                      class="transition-colors hover:opacity-80"
-                      style="color: var(--t-text-secondary);"
+                      class="footer-link transition-colors hover:opacity-80"
                     >
                       Contact
                     </.link>
@@ -704,11 +664,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
         </div>
         
     <!-- Bottom Bar -->
-        <div
-          class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
-          style="border-top: 1px solid var(--t-border-subtle);"
-        >
-          <p class="text-xs" style="color: var(--t-text-tertiary);">
+        <div class="footer-bottom mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p class="footer-copyright text-xs">
             © {@current_year} {@theme_settings.site_name}
           </p>
           <.social_links />
@@ -745,18 +702,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
 
   def shop_header(assigns) do
     ~H"""
-    <header
-      class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4"
-      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); display: flex; align-items: center;"
-    >
+    <header class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4">
       <%= if @theme_settings.header_background_enabled && @header_image do %>
         <div style={header_background_style(@theme_settings, @header_image)} />
       <% end %>
 
-      <div
-        class="shop-logo"
-        style="display: flex; align-items: center; position: relative; z-index: 1;"
-      >
+      <div class="shop-logo">
         <.logo_content
           theme_settings={@theme_settings}
           logo_image={@logo_image}
@@ -765,7 +716,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
         />
       </div>
 
-      <nav class="shop-nav hidden md:flex md:gap-6" style="position: relative; z-index: 1;">
+      <nav class="shop-nav hidden md:flex md:gap-6">
         <%= if @mode == :preview do %>
           <.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
           <.nav_item
@@ -791,12 +742,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
         <% end %>
       </nav>
 
-      <div class="shop-actions flex items-center" style="position: relative; z-index: 1;">
+      <div class="shop-actions flex items-center">
         <.link
           :if={@is_admin}
           href="/admin"
           class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
-          style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
           aria-label="Admin"
         >
           <svg
@@ -823,7 +773,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
         <button
           type="button"
           class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
-          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
           phx-click={Phoenix.LiveView.JS.dispatch("open-search", to: "#search-modal")}
           aria-label="Search"
         >
@@ -843,7 +792,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
         <button
           type="button"
           class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
-          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
           phx-click={open_cart_drawer_js()}
           aria-label="Cart"
         >
@@ -861,10 +809,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
             <path d="M16 10a4 4 0 01-8 0"></path>
           </svg>
           <%= if @cart_count > 0 do %>
-            <span
-              class="cart-count"
-              style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;"
-            >
+            <span class="cart-badge">
               {@cart_count}
             </span>
           <% end %>
@@ -902,12 +847,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           href="#"
           phx-click="change_preview_page"
           phx-value-page="home"
-          style="display: flex; align-items: center; text-decoration: none;"
+          class="shop-logo-link"
         >
           <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
         </a>
       <% else %>
-        <.link navigate="/" style="display: flex; align-items: center; text-decoration: none;">
+        <.link navigate="/" class="shop-logo-link">
           <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
         </.link>
       <% end %>
@@ -922,10 +867,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
     ~H"""
     <%= case @theme_settings.logo_mode do %>
       <% "text-only" -> %>
-        <span
-          class="shop-logo-text"
-          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
-        >
+        <span class="shop-logo-text">
           {@theme_settings.site_name}
         </span>
       <% "logo-text" -> %>
@@ -933,13 +875,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           <img
             src={logo_url(@logo_image, @theme_settings)}
             alt={@theme_settings.site_name}
-            style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
+            class="shop-logo-img mr-2"
+            style={"height: #{@theme_settings.logo_size}px;"}
           />
         <% end %>
-        <span
-          class="shop-logo-text"
-          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
-        >
+        <span class="shop-logo-text">
           {@theme_settings.site_name}
         </span>
       <% "logo-only" -> %>
@@ -947,21 +887,16 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           <img
             src={logo_url(@logo_image, @theme_settings)}
             alt={@theme_settings.site_name}
-            style={"height: #{@theme_settings.logo_size}px; width: auto;"}
+            class="shop-logo-img"
+            style={"height: #{@theme_settings.logo_size}px;"}
           />
         <% else %>
-          <span
-            class="shop-logo-text"
-            style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
-          >
+          <span class="shop-logo-text">
             {@theme_settings.site_name}
           </span>
         <% end %>
       <% _ -> %>
-        <span
-          class="shop-logo-text"
-          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
-        >
+        <span class="shop-logo-text">
           {@theme_settings.site_name}
         </span>
     <% end %>
@@ -993,7 +928,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
 
     ~H"""
     <%= if @is_current do %>
-      <span aria-current="page" style="color: var(--t-text-secondary); text-decoration: none;">
+      <span class="nav-link" aria-current="page">
         {@label}
       </span>
     <% else %>
@@ -1002,12 +937,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
           href="#"
           phx-click="change_preview_page"
           phx-value-page={@page}
-          style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
+          class="nav-link"
         >
           {@label}
         </a>
       <% else %>
-        <.link navigate={@href} style="color: var(--t-text-secondary); text-decoration: none;">
+        <.link navigate={@href} class="nav-link">
           {@label}
         </.link>
       <% end %>