webupdate

website/public/assets/css/modern-theme.css

@@ -233,6 +233,7 @@ body {
 
 .nav-brand {
   display: flex;
+  flex: 1;
   align-items: center;
   gap: var(--spacing-md);
   text-decoration: none;
@@ -306,8 +307,9 @@ body {
 .nav-actions {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--spacing-md);
-  flex-shrink: 0;
+  flex: 1;
 }
 
 .nav-icon-btn {
@@ -712,7 +714,9 @@ body {
 
 .product-card {
   position: relative;
-  background: var(--bg-card);
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: var(--transition-smooth);
@@ -728,15 +732,16 @@ body {
 .product-image {
   position: relative;
   width: 100%;
-  padding-top: 100%;
-  background: var(--primary-pink-light);
+  aspect-ratio: 1 / 1;
+  background: #ffffff;
   overflow: hidden;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .product-image img {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -840,10 +845,8 @@ body {
   color: var(--text-primary);
   margin-bottom: var(--spacing-sm);
   line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 .product-name a {
@@ -1459,7 +1462,7 @@ body {
    ============================================ */
 .about-hero {
   text-align: center;
-  padding: var(--spacing-2xl) 0;
+  padding: var(--spacing-lg) 0;
   background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
 }
 
@@ -1872,7 +1875,7 @@ body {
    ============================================ */
 .page-header {
   background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
-  padding: var(--spacing-2xl) 0;
+  padding: var(--spacing-lg) 0;
   text-align: center;
 }
 
@@ -1891,12 +1894,20 @@ body {
 }
 
 .breadcrumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
+  display: block !important;
+  text-align: center !important;
   margin-top: var(--spacing-md);
-  font-size: 0.9rem;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  white-space: nowrap !important;
+}
+
+.breadcrumb * {
+  display: inline !important;
+  white-space: nowrap !important;
+  font-size: 0.9rem !important;
+  line-height: 1.2 !important;
+  vertical-align: baseline !important;
 }
 
 .breadcrumb a {