@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/snippets/product-card.liquid

@@ -11,6 +11,11 @@
 
 {% assign image_loading = loading | default: "lazy" %}
 {% assign variants = product.variations | default: empty %}
+{% assign product_call_for_pricing_raw = product.showCallForPricing | default: product.ShowCallForPricing | default: product.isCallForPricing | default: product.IsCallForPricing | default: false %}
+{% assign product_show_call_for_pricing = false %}
+{% if product_call_for_pricing_raw == true or product_call_for_pricing_raw == 'true' or product_call_for_pricing_raw == 1 or product_call_for_pricing_raw == '1' %}
+  {% assign product_show_call_for_pricing = true %}
+{% endif %}
 
 {% comment %}Calculate default variant for add-to-cart{% endcomment %}
 {% assign defaultVariantForCart = null %}
@@ -29,6 +34,22 @@
   {% endif %}
 {% endif %}
 
+{% assign variant_call_for_pricing_raw = defaultVariantForCart.showCallForPricing | default: defaultVariantForCart.ShowCallForPricing | default: defaultVariantForCart.isCallForPricing | default: defaultVariantForCart.IsCallForPricing | default: false %}
+{% assign variant_show_call_for_pricing = false %}
+{% if variant_call_for_pricing_raw == true or variant_call_for_pricing_raw == 'true' or variant_call_for_pricing_raw == 1 or variant_call_for_pricing_raw == '1' %}
+  {% assign variant_show_call_for_pricing = true %}
+{% endif %}
+{% assign card_show_call_for_pricing = false %}
+{% if product_show_call_for_pricing or variant_show_call_for_pricing %}
+  {% assign card_show_call_for_pricing = true %}
+{% endif %}
+
+{% comment %}Product URL (must be set before data attributes){% endcomment %}
+{% assign product_url = product.url | default: product.Url | default: product.link | default: product.Link %}
+{% if product_url == blank %}
+  {% assign product_url = product.slug | default: product.id | default: '#' %}
+{% endif %}
+
 {% comment %}Image fallback logic{% endcomment %}
 {% assign product_image = nil %}
 {% assign product_image_alt = product.name | default: product.slug | default: product.id %}
@@ -61,25 +82,27 @@
 {% endif %}
 
 <div class="product-card" 
-     data-product-id="{{ product.productId }}"
+     data-product-id="{{ product.productId | default: product.id }}"
      data-price="{{ product.prices.price }}" 
+     data-price-string="{{ product.prices.price | money_with_settings: shop.settings }}"
      data-name="{{ product.name | default: product.slug | default: product.id | downcase }}"
+     data-title="{{ product.name | default: product.slug | default: product.id }}"
+     data-product-url="{{ product_url }}"
+     data-base-product-id="{{ product.productId | default: product.id }}"
+     {% if product_image %}data-image="{{ product_image }}"{% endif %}
+     data-show-call-for-pricing="{% if card_show_call_for_pricing %}true{% else %}false{% endif %}"
      data-product-type="{{ product.productType | default: product.type | default: 0 }}"
      data-variants-count="{% if variants and variants.size > 0 %}{{ variants.size }}{% else %}0{% endif %}"
-     data-availability="{% if product.stockQuantity > 0 %}in-stock{% else %}out-of-stock{% endif %}">
+     data-availability="{% if product.inStock or product.available %}in-stock{% else %}out-of-stock{% endif %}">
   
   <div class="product-card__image-wrapper">
     {% hook 'product_card_image_before' %}
-    {% assign product_url = product.url | default: product.Url | default: product.link | default: product.Link %}
-    {% if product_url == blank %}
-      {% assign product_url = product.slug | default: product.id | default: '#' %}
-    {% endif %}
-    <a href="{{ product_url }}" class="product-card__link">
+    <a href="/{{ product_url }}" class="product-card__link">
       {% if product_image %}
         <img src="{{ product_image }}" 
              alt="{{ product_image_alt }}" 
              class="product-card__image"
-             loading="{{ image_loading }}">
+             loading="{{ image_loading }}" {% if image_fetchpriority %}fetchpriority="{{ image_fetchpriority }}"{% endif %}>
       {% else %}
         <div class="product-card__placeholder">
           <svg class="product-card__placeholder-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -109,7 +132,7 @@
         <span class="product-card__badge product-card__badge--new">New</span>
       {% endif %}
       
-      {% if product.prices.mrp and product.prices.mrp > product.prices.price %}
+      {% if product.prices.mrp and product.prices.mrp > product.prices.price and card_show_call_for_pricing == false %}
         {% assign discount = product.prices.mrp | minus: product.prices.price | times: 100 | divided_by: product.prices.mrp | round %}
         <span class="product-card__badge product-card__badge--sale">-{{ discount }}%</span>
       {% endif %}
@@ -117,12 +140,28 @@
         <span class="product-card__badge product-card__badge--sold-out">Sold Out</span>
       {% endunless %}
     </div>
+
+    <!-- Product Actions (Wishlist, Quick View) -->
+    <div class="product-card__actions">
+      <button class="product-action-btn wishlist-btn" data-product-id="{{ product.productId | default: product.id }}" aria-label="Add to wishlist" aria-pressed="false" title="Add to wishlist" tabindex="0">
+        <!-- Empty heart by default; theme.js will toggle filled state -->
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
+        </svg>
+      </button>
+      <button class="product-action-btn quick-view-btn" data-product-id="{{ product.productId | default: product.id }}" aria-label="Quick view" title="Quick view" tabindex="0">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      </button>
+    </div>
   </div>
   
   <div class="product-card__content">
     {% hook 'product_card_title_before' %}
     <h3 class="product-card__title">
-      <a href="{{ product_url }}" class="product-card__title-link">
+      <a href="/{{ product_url }}" class="product-card__title-link">
         {{ product.name | default: product.slug | default: product.id }}
       </a>
     </h3>
@@ -130,7 +169,9 @@
     
     {% hook 'product_card_price_before' %}
     <div class="product-card__price" data-product-card-price="{{ product.productId }}">
-      {% if variants and variants.size > 0 %}
+      {% if card_show_call_for_pricing %}
+        <span class="product-card__price-current">Call for pricing</span>
+      {% elsif variants and variants.size > 0 %}
         {% assign defaultVariant = null %}
         {% for variant in variants %}
           {% assign isAvailable = variant.inStock | default: variant.available | default: true %}
@@ -159,7 +200,7 @@
     <!-- Add to Cart Button -->
     <button class="product-card__cart-btn add-to-cart-btn" 
             data-product-id="{{ defaultVariantProductId }}"
-            data-base-product-id="{{ product.productId }}"
+            data-base-product-id="{{ product.productId | default: product.id }}"
             data-product-type="{{ product.productType | default: product.type | default: 0 }}"
             {% if variants and variants.size > 0 %}
               {% assign defaultAvailable = defaultVariantForCart.inStock | default: defaultVariantForCart.available | default: true %}
@@ -187,19 +228,19 @@
 <style>
 /* Product Card Variables */
 :root {
-  --card-bg: #ffffff;
-  --card-border: #e5e7eb;
-  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --card-radius: 8px;
-  --card-padding: 16px;
-  --badge-radius: 4px;
-  --btn-radius: 6px;
-  --color-primary: #111827;
-  --color-secondary: #6b7280;
-  --color-sale: #ef4444;
-  --color-new: #10b981;
-  --color-text: #111827;
-  --color-text-muted: #6b7280;
+  --card-bg: {{ settings.color_background | default: '#ffffff' }};
+  --card-border: {{ settings.color_border | default: '#e5e7eb' }};
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, calc({{ settings.shadow_opacity | default: 0.1 }} * 0.5));
+  --card-radius: {{ settings.border_radius_medium | default: 8 }}px;
+  --card-padding: {{ settings.spacing_element | default: 16 }}px;
+  --badge-radius: {{ settings.border_radius_small | default: 4 }}px;
+  --btn-radius: {{ settings.border_radius_small | default: 6 }}px;
+  --color-primary: {{ settings.color_primary | default: '#111827' }};
+  --color-secondary: {{ settings.color_secondary | default: '#6b7280' }};
+  --color-sale: {{ settings.color_error | default: '#ef4444' }};
+  --color-new: {{ settings.color_success | default: '#10b981' }};
+  --color-text: {{ settings.color_text | default: '#111827' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#6b7280' }};
 }
 
 /* Card Container */
@@ -273,6 +314,78 @@
   letter-spacing: 0.3px;
 }
 
+/* Product action buttons (wishlist, quick view) */
+/* Hidden by default: shown only when hovering/focusing the specific product card */
+.product-card__actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  gap: 8px;
+  z-index: 3;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
+  pointer-events: auto;
+}
+
+/* Keep actions visible on all cards so quick view is always available */
+.product-card:hover .product-card__actions,
+.product-card:focus-within .product-card__actions {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.product-action-btn {
+  border: none;
+  background: rgba(255,255,255,0.92);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;
+}
+
+.product-action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+/* Ensure svg sizing still applies */
+.product-action-btn svg {
+  width: 18px;
+  height: 18px;
+  color: #111827;
+}
+
+/* On touch devices (no hover), keep actions visible for accessibility */
+@media (hover: none) and (pointer: coarse) {
+  .product-card__actions {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+}
+
+/* Wishlist active state */
+.wishlist-btn.in-wishlist {
+  background: rgba(239, 68, 68, 0.95);
+}
+
+.wishlist-btn.in-wishlist svg {
+  fill: #ffffff;
+  stroke: #ffffff;
+  color: #ffffff;
+}
+
 .product-card__badge--new {
   background: var(--color-new);
   color: white;
@@ -347,7 +460,7 @@
   font-weight: 500;
   cursor: pointer;
   margin-top: auto;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--card-radius);
   border: none;
 }
 
@@ -391,10 +504,10 @@
 /* Mobile */
 @media screen and (max-width: 768px) {
   :root {
-    --card-radius: 6px;
-    --card-padding: 10px;
-    --badge-radius: 3px;
-    --btn-radius: 5px;
+    --card-radius: {{ settings.border_radius_small | default: 6 }}px;
+    --card-padding: {{ settings.spacing_small | default: 10 }}px;
+    --badge-radius: {{ settings.border_radius_small | default: 3 }}px;
+    --btn-radius: {{ settings.border_radius_small | default: 5 }}px;
   }
   
   .product-card {
@@ -477,7 +590,7 @@
 </style>
 
 {% if variants and variants.size > 0 %}
-<script type="application/json" class="product-card-variant-data" data-product-id="{{ product.productId }}">
+<script type="application/json" class="product-card-variant-data" data-product-id="{{ product.productId | default: product.id }}">
 {
   "variants": [
     {% for variant in variants %}
@@ -490,208 +603,8 @@
       }{% unless forloop.last %},{% endunless %}
     {% endfor %}
   ],
-  "baseProductId": {{ product.productId }}
+  "baseProductId": {{ product.productId | default: product.id }}
 }
 </script>
 {% endif %}
 
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const productCards = document.querySelectorAll('.product-card');
-    
-    productCards.forEach(card => {
-      initializeProductCard(card);
-    });
-    
-    function initializeProductCard(card) {
-      const cartBtn = card.querySelector('.product-card__cart-btn');
-      if (cartBtn) {
-        const productType = parseInt(card.dataset.productType || cartBtn.dataset.productType || '0', 10);
-        const variantsCount = parseInt(card.dataset.variantsCount || '0', 10);
-        
-        if (productType === 0 && variantsCount === 0) {
-          cartBtn.addEventListener('click', function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            handleAddToCart(this, card);
-          }, true);
-        }
-      }
-    }
-    
-    function handleAddToCart(button, card) {
-      if (button.disabled) return;
-      
-      const productId = button.getAttribute('data-product-id');
-      const originalText = button.querySelector('.product-card__cart-text')?.textContent || 'Add to Cart';
-      
-      if (button.querySelector('.product-card__cart-text')) {
-        button.querySelector('.product-card__cart-text').textContent = 'Adding...';
-      }
-      button.disabled = true;
-      
-      addToCartAPI(productId)
-        .then(response => {
-          if (button.querySelector('.product-card__cart-text')) {
-            button.querySelector('.product-card__cart-text').textContent = '✓ Added';
-          }
-          
-          updateHeaderCart();
-          
-          // Unified bottom-center toast confirmation
-          if (window.Theme && typeof window.Theme.showNotification === 'function') {
-            window.Theme.showNotification('Product added to cart!', 'success', 3000);
-          }
-          
-          setTimeout(() => {
-            if (button.querySelector('.product-card__cart-text')) {
-              button.querySelector('.product-card__cart-text').textContent = originalText;
-            }
-            button.disabled = false;
-          }, 2000);
-        })
-        .catch(error => {
-          console.error('Add to cart error:', error);
-          
-          // Check if error message indicates authentication is required
-          // This handles cases where the error object might have requiresAuth info
-          if (error.message && error.message.includes('Authentication required')) {
-            // Try to open login modal
-            if (window.Theme && window.Theme.openLoginModal) {
-              window.Theme.openLoginModal();
-            } else if (window.CartManager && window.CartManager.openLoginModal) {
-              window.CartManager.openLoginModal();
-            } else {
-              const loginTrigger = document.querySelector('[data-login-modal-trigger]');
-              if (loginTrigger) {
-                loginTrigger.click();
-              }
-            }
-          } else {
-            // Show error message
-            if (button.querySelector('.product-card__cart-text')) {
-              button.querySelector('.product-card__cart-text').textContent = 'Error';
-            }
-            // Unified error toast
-            if (window.Theme && typeof window.Theme.showNotification === 'function') {
-              window.Theme.showNotification('Failed to add product to cart. Please try again.', 'error', 3000);
-            }
-          }
-          
-          setTimeout(() => {
-            if (button.querySelector('.product-card__cart-text')) {
-              button.querySelector('.product-card__cart-text').textContent = originalText;
-            }
-            button.disabled = false;
-          }, 2000);
-        });
-    }
-    
-    function addToCartAPI(productId) {
-      return fetch('/webstoreapi/carts/add', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json'
-        },
-        body: JSON.stringify({
-          productId: productId,
-          quantity: 1
-        })
-      })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          return data;
-        } else {
-          // Check if authentication is required
-          if (data.requiresAuth) {
-            // Try to open login modal from Theme instance
-            if (window.Theme && window.Theme.openLoginModal) {
-              window.Theme.openLoginModal();
-            } else if (window.CartManager && window.CartManager.openLoginModal) {
-              window.CartManager.openLoginModal();
-            } else {
-              // Fallback: trigger login modal via data attribute
-              const loginTrigger = document.querySelector('[data-login-modal-trigger]');
-              if (loginTrigger) {
-                loginTrigger.click();
-              }
-            }
-            throw new Error('Authentication required');
-          }
-          throw new Error(data.error || data.message || 'Failed to add to cart');
-        }
-      });
-    }
-    
-    function updateHeaderCart() {
-      if (window.CartManager && typeof window.CartManager.getCartCount === 'function') {
-        window.CartManager.getCartCount()
-          .then(count => {
-            updateCartBadge(count);
-          })
-          .catch(error => {
-            fetchCartFromAPI();
-          });
-      } else {
-        fetchCartFromAPI();
-      }
-      
-      function fetchCartFromAPI() {
-        fetch('/webstoreapi/cart', {
-          method: 'GET',
-          headers: {
-            'Accept': 'application/json',
-            'X-Requested-With': 'XMLHttpRequest'
-          }
-        })
-          .then(response => response.json())
-          .then(data => {
-            if (data.success && data.cart) {
-              const itemCount = data.cart.itemCount || data.cart.cartQuantity || (data.cart.items ? data.cart.items.length : 0) || 0;
-              updateCartBadge(itemCount);
-            } else {
-              updateCartBadge(0);
-            }
-          })
-          .catch(error => {
-            console.error('Error updating header cart:', error);
-            updateCartBadge(0);
-          });
-      }
-      
-      function updateCartBadge(count) {
-        const itemCount = parseInt(count, 10) || 0;
-        
-        const cartCountElements = document.querySelectorAll('.site-header__cart-count, [data-cart-count]');
-        cartCountElements.forEach(el => {
-          el.textContent = itemCount;
-          el.setAttribute('data-cart-count', itemCount.toString());
-          el.style.display = itemCount > 0 ? 'flex' : 'none';
-        });
-        
-        if (window.CartManager && typeof window.CartManager.updateCartBadge === 'function') {
-          window.CartManager.updateCartBadge(itemCount);
-        }
-        
-        const event = new CustomEvent('cart:updated', {
-          detail: { count: itemCount }
-        });
-        document.dispatchEvent(event);
-      }
-    }
-    
-    function initCartUpdate() {
-      setTimeout(() => {
-        updateHeaderCart();
-      }, 100);
-    }
-    
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', initCartUpdate);
-    } else {
-      initCartUpdate();
-    }
-  });
-</script>

package/test-theme/snippets/rating.liquid

@@ -48,38 +48,129 @@
 </div>
 
 <style>
+:root {
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  /* Shadow variables - mapped from settings */
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --shadow-spread: {{ settings.shadow_spread | default: 0 }}px;
+  
+  /* Border radius - mapped from settings */
+  --radius-sm: {{ settings.border_radius_small | default: 6 }}px;
+  --radius-md: {{ settings.border_radius_medium | default: 10 }}px;
+  --radius-lg: {{ settings.border_radius_large | default: 16 }}px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  
+  /* Spacing - mapped from settings */
+  --spacing-xs: {{ settings.spacing_xsmall | default: 4 }}px;
+  --spacing-sm: {{ settings.spacing_small | default: 8 }}px;
+  --spacing-md: {{ settings.spacing_element | default: 16 }}px;
+  --spacing-lg: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-xl: {{ settings.spacing_large | default: 32 }}px;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  
+  /* Text sizes - based on font_size_base from settings */
+  --text-xs: 12px;
+  --text-sm: {{ settings.font_size_base | default: 14 }}px;
+  --text-base: {{ settings.font_size_base | default: 14 }}px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 21px;
+  
+  /* Transitions - mapped from settings */
+  --transition-fast: 133ms cubic-bezier(0, 0, 0.2, 1);
+  --transition: {{ settings.button_transition_speed | default: 200 }}ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
+  --duration-150: 150ms;
+  --duration-300: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-index values */
+  --z-10: 10;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  
+  /* Letter spacing - mapped from settings */
+  --tracking-wider: {{ settings.letter_spacing_uppercase | default: 0.05 }}em;
+}
+
   .rating {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
 
   .rating-stars {
     display: inline-flex;
-    gap: 0.125rem;
-    font-size: 1rem;
-    line-height: 1;
+    gap: var(--space-0-5);
+    font-size: var(--text-base);
+    line-height: var(--leading-none);
   }
 
   .rating-star {
     color: #fbbf24;
-    font-size: 1rem;
+    font-size: var(--text-base);
   }
 
   .rating-star-empty {
-    color: #e5e7eb;
+    color: var(--color-gray-200);
   }
 
   .rating-star-half {
-    background: linear-gradient(90deg, #fbbf24 50%, #e5e7eb 50%);
+    background: linear-gradient(90deg, #fbbf24 50%, var(--color-gray-200) 50%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
 
   .rating-count {
-    font-size: 0.875rem;
-    color: {{ settings.color_text_light }};
+    font-size: var(--text-sm);
+    color: var(--color-text-light);
   }
 </style>