mobile is finished

src/app/components/footer/footer.component.scss

@@ -372,6 +372,10 @@
 }
 
 @media (max-width: 768px) {
+  .dexar-footer-bg {
+    background-image: url('/assets/images/footer_bg_mobile.webp');
+  }
+
   .dexar-footer-container {
     padding: 32px 20px 16px;
   }
@@ -407,7 +411,7 @@
   }
 
   .dexar-footer-columns {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
+    gap: 16px;
   }
 }

src/app/components/header/header.component.html

@@ -57,8 +57,8 @@
         <app-logo />
       </a>
 
-      <!-- Navigation Buttons -->
+      <!-- Navigation Buttons (desktop) -->
-      <nav class="dexar-nav" [class.dexar-nav-open]="menuOpen">
+      <nav class="dexar-nav">
         <div class="dexar-nav-group">
           <a routerLink="/" routerLinkActive="dexar-active" [routerLinkActiveOptions]="{exact: true}" 
              (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-left">
@@ -106,8 +106,8 @@
           }
         </a>
 
-        <!-- Language Selector -->
+        <!-- Language Selector (desktop only) -->
-        <div class="dexar-lang-selector">
+        <div class="dexar-lang-selector dexar-lang-desktop">
           <app-language-selector />
         </div>
 
@@ -120,4 +120,60 @@
       </div>
     </div>
   </header>
+
+  <!-- Mobile Menu Backdrop (outside header to blur page content) -->
+  @if (menuOpen) {
+    <div class="dexar-menu-backdrop" (click)="closeMenu()"></div>
+  }
+
+  <!-- Mobile Menu Panel (outside header for correct stacking) -->
+  <div class="dexar-mobile-menu" [class.dexar-mobile-menu-open]="menuOpen">
+      <a routerLink="/" routerLinkActive="dexar-mobile-active" [routerLinkActiveOptions]="{exact: true}" 
+         (click)="closeMenu()" class="dexar-mobile-item">
+        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
+          <path d="M16.185 2.22124C15.8067 1.84292 15.1933 1.84292 14.815 2.22124L3.18999 13.8462C3.00831 14.0279 2.90625 14.2743 2.90625 14.5312V28.0938C2.90625 28.6288 3.33997 29.0625 3.875 29.0625H12.5938C13.1288 29.0625 13.5625 28.6288 13.5625 28.0938V20.3438H17.4375V28.0938C17.4375 28.6288 17.8712 29.0625 18.4062 29.0625H27.125C27.66 29.0625 28.0938 28.6288 28.0938 28.0938V14.5312C28.0938 14.2743 27.9917 14.0279 27.81 13.8462L25.1875 11.2237V4.84375C25.1875 4.30872 24.7538 3.875 24.2188 3.875H22.2812C21.7462 3.875 21.3125 4.30872 21.3125 4.84375V7.34873L16.185 2.22124ZM4.84375 27.125V14.9325L15.5 4.27627L26.1562 14.9325V27.125H19.375V19.375C19.375 18.84 18.9413 18.4062 18.4062 18.4062H12.5938C12.0587 18.4062 11.625 18.84 11.625 19.375V27.125H4.84375Z" fill="#497671" />
+        </svg>
+        <span>Главная</span>
+        <svg class="dexar-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
+          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+
+      <a (click)="closeMenu(); navigateToSearch()" class="dexar-mobile-item" style="cursor: pointer;">
+        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
+          <path d="M1.9375 4.84375C1.9375 3.23867 3.23867 1.9375 4.84375 1.9375L10.6562 1.9375C12.2613 1.9375 13.5625 3.23867 13.5625 4.84375V10.6562C13.5625 12.2613 12.2613 13.5625 10.6562 13.5625H4.84375C3.23867 13.5625 1.9375 12.2613 1.9375 10.6562L1.9375 4.84375ZM4.84375 3.875C4.30872 3.875 3.875 4.30872 3.875 4.84375V10.6562C3.875 11.1913 4.30872 11.625 4.84375 11.625H10.6562C11.1913 11.625 11.625 11.1913 11.625 10.6562V4.84375C11.625 4.30872 11.1913 3.875 10.6562 3.875H4.84375ZM17.4375 4.84375C17.4375 3.23867 18.7387 1.9375 20.3438 1.9375L26.1562 1.9375C27.7613 1.9375 29.0625 3.23867 29.0625 4.84375V10.6562C29.0625 12.2613 27.7613 13.5625 26.1562 13.5625H20.3438C18.7387 13.5625 17.4375 12.2613 17.4375 10.6562V4.84375ZM20.3438 3.875C19.8087 3.875 19.375 4.30872 19.375 4.84375V10.6562C19.375 11.1913 19.8087 11.625 20.3438 11.625H26.1562C26.6913 11.625 27.125 11.1913 27.125 10.6562V4.84375C27.125 4.30872 26.6913 3.875 26.1562 3.875H20.3438ZM1.9375 20.3438C1.9375 18.7387 3.23867 17.4375 4.84375 17.4375H10.6562C12.2613 17.4375 13.5625 18.7387 13.5625 20.3438V26.1562C13.5625 27.7613 12.2613 29.0625 10.6562 29.0625H4.84375C3.23867 29.0625 1.9375 27.7613 1.9375 26.1562L1.9375 20.3438ZM4.84375 19.375C4.30872 19.375 3.875 19.8087 3.875 20.3438V26.1562C3.875 26.6913 4.30872 27.125 4.84375 27.125H10.6562C11.1913 27.125 11.625 26.6913 11.625 26.1562V20.3438C11.625 19.8087 11.1913 19.375 10.6562 19.375H4.84375ZM17.4375 20.3438C17.4375 18.7387 18.7387 17.4375 20.3438 17.4375H26.1562C27.7613 17.4375 29.0625 18.7387 29.0625 20.3438V26.1562C29.0625 27.7613 27.7613 29.0625 26.1562 29.0625H20.3438C18.7387 29.0625 17.4375 27.7613 17.4375 26.1562V20.3438ZM20.3438 19.375C19.8087 19.375 19.375 19.8087 19.375 20.3438V26.1562C19.375 26.6913 19.8087 27.125 20.3438 27.125H26.1562C26.6913 27.125 27.125 26.6913 27.125 26.1562V20.3438C27.125 19.8087 26.6913 19.375 26.1562 19.375H20.3438Z" fill="#497671" />
+        </svg>
+        <span>Каталог</span>
+        <svg class="dexar-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
+          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+
+      <a routerLink="/about" (click)="closeMenu()" class="dexar-mobile-item">
+        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
+          <path d="M27.125 1.9375C28.1951 1.9375 29.0625 2.80495 29.0625 3.875V27.125C29.0625 28.1951 28.1951 29.0625 27.125 29.0625H3.875C2.80495 29.0625 1.9375 28.1951 1.9375 27.125V3.875C1.9375 2.80495 2.80495 1.9375 3.875 1.9375H27.125ZM3.875 0C1.7349 0 0 1.7349 0 3.875V27.125C0 29.2651 1.7349 31 3.875 31H27.125C29.2651 31 31 29.2651 31 27.125V3.875C31 1.7349 29.2651 0 27.125 0H3.875Z" fill="#497671" />
+          <path d="M17.3032 12.764L12.8644 13.3203L12.7055 14.0582L13.5796 14.2172C14.1472 14.3534 14.2608 14.5577 14.1359 15.1254L12.7055 21.8461C12.3308 23.583 12.9098 24.4004 14.2721 24.4004C15.3279 24.4004 16.554 23.9122 17.1102 23.2424L17.2805 22.4364C16.8945 22.777 16.3269 22.9132 15.9523 22.9132C15.4187 22.9132 15.2257 22.5386 15.362 21.8801L17.3032 12.764Z" fill="#497671" />
+          <path d="M17.4375 8.71875C17.4375 9.7888 16.5701 10.6562 15.5 10.6562C14.4299 10.6562 13.5625 9.7888 13.5625 8.71875C13.5625 7.6487 14.4299 6.78125 15.5 6.78125C16.5701 6.78125 17.4375 7.6487 17.4375 8.71875Z" fill="#497671" />
+        </svg>
+        <span>О нас</span>
+        <svg class="dexar-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
+          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+
+      <a routerLink="/contacts" (click)="closeMenu()" class="dexar-mobile-item">
+        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
+          <path d="M0 7.75C0 5.6099 1.7349 3.875 3.875 3.875H27.125C29.2651 3.875 31 5.6099 31 7.75V23.25C31 25.3901 29.2651 27.125 27.125 27.125H3.875C1.7349 27.125 0 25.3901 0 23.25V7.75ZM3.875 5.8125C2.80495 5.8125 1.9375 6.67995 1.9375 7.75V8.17025L15.5 16.3078L29.0625 8.17025V7.75C29.0625 6.67995 28.1951 5.8125 27.125 5.8125H3.875ZM29.0625 10.4297L19.9406 15.9029L29.0625 21.5164V10.4297ZM28.9971 23.7511L18.0688 17.026L15.5 18.5672L12.9312 17.026L2.00292 23.7511C2.22375 24.5782 2.97823 25.1875 3.875 25.1875H27.125C28.0218 25.1875 28.7762 24.5782 28.9971 23.7511ZM1.9375 21.5164L11.0594 15.9029L1.9375 10.4297V21.5164Z" fill="#497671" />
+        </svg>
+        <span>Контакты</span>
+        <svg class="dexar-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
+          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+
+      <!-- Language Selector in mobile menu -->
+      <div class="dexar-mobile-lang">
+        <app-language-selector />
+      </div>
+    </div>
 }

src/app/components/header/header.component.scss

@@ -639,6 +639,70 @@
   align-items: center;
 }
 
+// Mobile Menu Backdrop
+.dexar-menu-backdrop {
+  display: none;
+}
+
+// Mobile Menu Panel
+.dexar-mobile-menu {
+  display: none;
+}
+
+// Mobile Menu Items
+.dexar-mobile-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 395px;
+  max-width: 100%;
+  height: 42px;
+  padding: 15px 26px;
+  background: #e9edf1;
+  border: 1px solid #d3dad9;
+  border-radius: 13px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1e3c38;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease;
+  box-sizing: border-box;
+
+  &:hover {
+    background: #dce2e7;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  svg:first-child {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  .dexar-mobile-chevron {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+}
+
+.dexar-mobile-lang {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+}
+
 .dexar-menu-toggle {
   display: none;
   flex-direction: column;
@@ -756,45 +820,14 @@
     padding: 0 16px;
   }
   
+  // Hide desktop nav
   .dexar-nav {
-    position: fixed;
+    display: none;
-    top: 84px;
-    left: 0;
-    right: 0;
-    background: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    
-    &.dexar-nav-open {
-      max-height: 400px;
-    }
   }
   
-  .dexar-nav-group {
+  // Hide desktop language selector
-    flex-direction: column;
+  .dexar-lang-desktop {
-    width: 100%;
+    display: none;
-    box-shadow: none;
-  }
-  
-  .dexar-nav-btn {
-    width: 100%;
-    border-radius: 0 !important;
-    border: none;
-    border-bottom: 1px solid #d3dad9;
-    padding: 16px !important;
-    font-size: 18px;
-    
-    &:hover {
-      background: rgba(161, 180, 181, 0.3);
-    }
-  }
-  
-  .dexar-nav-btn-left,
-  .dexar-nav-btn-middle,
-  .dexar-nav-btn-right {
-    padding: 16px !important;
   }
   
   .dexar-search-wrapper {
@@ -813,4 +846,77 @@
     width: 100px;
     height: 32px;
   }
+
+  // Mobile Menu Backdrop — full-screen, blurred, blocks interaction
+  .dexar-menu-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.35);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    z-index: 998;
+    animation: dexar-fade-in 0.25s ease;
+  }
+
+  // Mobile Menu Panel
+  .dexar-mobile-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    position: fixed;
+    top: 84px;
+    right: 0;
+    width: 485px;
+    max-width: 100vw;
+    padding: 28px 20px 32px;
+    background: rgba(245, 242, 249, 0.93);
+    border-radius: 0 0 13px 13px;
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
+    z-index: 999;
+    box-sizing: border-box;
+    
+    // Hide by default, animate in
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
+
+    &.dexar-mobile-menu-open {
+      max-height: 576px;
+      padding: 28px 20px 32px;
+      opacity: 1;
+    }
+  }
+
+  .dexar-mobile-item {
+    width: 395px;
+    max-width: 100%;
+  }
+
+  .dexar-mobile-lang {
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dexar-mobile-menu {
+    width: 100vw;
+    border-radius: 0 0 13px 13px;
+  }
+
+  .dexar-mobile-item {
+    width: 100%;
+  }
+}
+
+@keyframes dexar-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }

src/app/components/header/header.component.ts

@@ -26,10 +26,12 @@ export class HeaderComponent {
 
   toggleMenu(): void {
     this.menuOpen = !this.menuOpen;
+    document.body.classList.toggle('dexar-menu-open', this.menuOpen);
   }
 
   closeMenu(): void {
     this.menuOpen = false;
+    document.body.classList.remove('dexar-menu-open');
   }
 
   navigateToSearch(): void {

src/app/components/items-carousel/items-carousel.component.html

@@ -20,17 +20,22 @@
                         <div class="item-image">
                             <img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
                             @if (product.discount > 0) {
-                                <div class="discount-badge">-{{ product.discount }}%</div>
+                                <span class="discount-badge">-{{ product.discount }}%</span>
                             }
                         </div>
                         
                         <div class="item-details">
                             <h3 class="item-name">{{ product.name }}</h3>
                             
-                            <div class="item-rating" *ngIf="product.rating">
+                            @if (product.rating) {
-                                <span class="rating-stars">⭐ {{ product.rating }}</span>
+                              <div class="item-rating">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="#497671" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
+                                </svg>
+                                <span class="rating-value">{{ product.rating }}</span>
                                 <span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
-                            </div>
+                              </div>
+                            }
                             
                             <div class="item-price-row">
                                 <div class="item-price">
@@ -42,16 +47,15 @@
                                     }
                                 </div>
                                 <button class="cart-icon-btn" (click)="addToCart($event, product)" title="Добавить в корзину">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <circle cx="9" cy="21" r="1"></circle>
+                                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
-                                        <circle cx="20" cy="21" r="1"></circle>
+                                        <line x1="3" y1="6" x2="21" y2="6"></line>
-                                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                                        <path d="M16 10a4 4 0 0 1-8 0"></path>
                                     </svg>
                                 </button>
                             </div>
                         </div>
                     </a>
-
                 </div>
             </ng-template>
             <ul class="p-carousel-indicator-list" data-pc-section="indicatorlist"><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="1" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="2" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="3" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="4" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="5" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="6" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator p-carousel-indicator-active" data-p-active="true" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="0" aria-label="7" aria-current="page" data-pc-section="indicatorbutton"></button></li><!----></ul>

src/app/components/items-carousel/items-carousel.component.scss

@@ -127,12 +127,12 @@
 
 // Item card styles
 .item-card {
-  background: white;
+  background: #ffffff;
   border-radius: 13px;
   border: 1px solid #d3dad9;
   overflow: hidden;
-  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s ease;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
   position: relative;
   height: 100%;
   display: flex;
@@ -142,7 +142,7 @@
   margin: 0 auto;
 
   &:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
     transform: translateY(-4px);
   }
 }
@@ -158,56 +158,55 @@
 .item-image {
   position: relative;
   width: 100%;
-  height: 140px;
+  height: 170px;
   overflow: hidden;
-  background: #f5f5f5;
+  background: #f5f3f9;
-  border-radius: 13px;
   
   img {
     width: 100%;
     height: 100%;
     object-fit: contain;
-    background: white;
+    padding: 12px;
-    padding: 10px;
+    transition: transform 0.4s ease;
-    transition: transform 0.3s ease, filter 0.3s ease;
+    box-sizing: border-box;
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
   }
 
-  &:hover img {
+  .item-card:hover & img {
-    transform: scale(1.08);
+    transform: scale(1.06);
-    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12)) brightness(1.05);
   }
 }
 
 .discount-badge {
   position: absolute;
-  top: 12px;
+  top: 10px;
-  right: 12px;
+  left: 10px;
   background: #ef4444;
   color: white;
-  padding: 0.4rem 0.8rem;
+  padding: 4px 10px;
   border-radius: 20px;
-  font-size: 0.875rem;
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.75rem;
   font-weight: 700;
-  z-index: 10;
+  letter-spacing: 0.02em;
+  z-index: 2;
+  line-height: 1.3;
 }
 
-
-
 .item-details {
-  padding: 0.625rem;
+  padding: 12px 14px 14px;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 6px;
   flex: 1;
 }
 
 .item-name {
+  font-family: "DM Sans", sans-serif;
   font-size: 0.8125rem;
   font-weight: 600;
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.35;
-  min-height: 2.6em;
+  min-height: 2.2em;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
@@ -216,20 +215,25 @@
   color: #1e3c38;
   transition: color 0.2s;
 
-  &:hover {
+  .item-card:hover & {
-    color: var(--primary-color, #497671);
+    color: #497671;
   }
 }
 
 .item-rating {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 4px;
+  font-family: "DM Sans", sans-serif;
   font-size: 0.75rem;
 
-  .rating-stars {
+  svg {
-    color: #497671;
+    flex-shrink: 0;
+  }
+
+  .rating-value {
     font-weight: 600;
+    color: #1e3c38;
   }
 
   .rating-count {
@@ -241,15 +245,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 4px;
 }
 
 .item-price {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
+  gap: 6px;
   flex-wrap: wrap;
   flex: 1;
+  font-family: "DM Sans", sans-serif;
 
   .current-price,
   .discounted-price {
@@ -263,20 +270,22 @@
   }
 
   .original-price {
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
-    color: #697777;
+    color: #a1b4b5;
     text-decoration: line-through;
   }
 }
 
 .cart-icon-btn {
-  padding: 0.5rem;
+  width: 36px;
-  background: var(--primary-color, #497671);
+  height: 36px;
+  padding: 0;
+  background: #497671;
   color: white;
   border: none;
   border-radius: 10px;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: background 0.2s ease, transform 0.15s ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -284,11 +293,13 @@
   
   svg {
     display: block;
+    width: 18px;
+    height: 18px;
   }
 
   &:hover {
-    background: var(--primary-hover, #3d635f);
+    background: #3d635f;
-    transform: scale(1.05);
+    transform: scale(1.08);
   }
 
   &:active {
@@ -336,27 +347,27 @@
   }
   
   .item-image {
-    height: 220px;
+    height: 160px;
   }
 }
 
 @media (max-width: 640px) {
   .item-image {
-    height: 200px;
+    height: 150px;
   }
   
   .item-details {
-    padding: 1rem;
+    padding: 10px 12px 12px;
   }
   
   .item-name {
-    font-size: 0.9rem;
+    font-size: 0.8125rem;
   }
   
   .item-price {
     .current-price,
     .discounted-price {
-      font-size: 1.125rem;
+      font-size: 1rem;
     }
   }
 }

src/app/components/language-selector/language-selector.component.scss

@@ -153,7 +153,8 @@
 }
 
 // Dexar header specific styles
-:host-context(.dexar-header) {
+:host-context(.dexar-header),
+:host-context(.dexar-mobile-menu) {
   .language-selector {
     width: 56px;
     height: 28px;
@@ -245,7 +246,8 @@
     }
   }
 
-  :host-context(.dexar-header) {
+  :host-context(.dexar-header),
+  :host-context(.dexar-mobile-menu) {
     .language-selector {
       width: 56px;
       height: 28px;

src/app/pages/home/home.component.scss

@@ -1161,17 +1161,19 @@
   }
   
   .dexar-hero-actions {
-    flex-direction: column;
+    flex-direction: row;
-    gap: 12px;
+    gap: 10px;
     width: 100%;
   }
   
   .dexar-btn-primary,
   .dexar-btn-secondary {
-    width: 100%;
+    flex: 1;
-    max-width: 280px;
+    min-width: 0;
-    height: 42px;
+    max-width: 180px;
-    font-size: 17px;
+    height: 40px;
+    font-size: 14px;
+    letter-spacing: 0.5px;
   }
   
   .dexar-categories {
@@ -1214,8 +1216,9 @@
   
   .dexar-btn-primary,
   .dexar-btn-secondary {
-    height: 40px;
+    height: 38px;
-    font-size: 16px;
+    font-size: 13px;
+    max-width: 160px;
   }
   
   .dexar-categories {

src/styles.scss

@@ -70,6 +70,10 @@ body {
   background: #f5f5f5;
   min-height: 100vh;
   overflow-x: hidden;
+
+  &.dexar-menu-open {
+    overflow: hidden;
+  }
 }
 
 /* Smooth Transitions */