mobile is finished

style changes
home page
2026-02-14 02:59:26 +04:00 · 2026-02-14 02:34:11 +04:00 · 2026-02-14 01:28:08 +04:00 · 2026-02-14 00:45:17 +04:00 · 2026-01-23 00:34:16 +04:00
43 changed files with 3613 additions and 1126 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 /tmp
 /out-tsc
 /bazel-out
 /files
 # Node
 /node_modules
--- a/files/changes.txt
+++ b/files/changes.txt
@@ -0,0 +1,500 @@
 we ae going to redesing dexar. here are css from the figma. i will try to explain all.
 pls do responsive and better! thank you
 you are free to do changes better and responsive ofc!!
 Header:
 <div class="frame">
      <img class="group" src="img/group-2.png" />
      <div class="div">
        <div class="div-wrapper"><div class="text-wrapper">Главная</div></div>
        <div class="div-wrapper-2"><div class="text-wrapper">О нас</div></div>
        <div class="div-wrapper-3"><div class="text-wrapper-2">Контакты</div></div>
      </div>
      <div class="frame-wrapper">
        <div class="div-2">
          <div class="text-wrapper-3">Искать...</div>
          <img class="icn" src="img/icn-05.png" />
        </div>
      </div>
      <div class="korzina-frame"><img class="cart" src="img/cart.svg" /></div>
      <div class="RU-frame">
        <div class="text-wrapper-4">RU</div>
        <div class="group-2"><img class="line" src="img/line-2.svg" /> <img class="img" src="img/line-3.svg" /></div>
      </div>
      <div class="login-frame"><img class="icon" src="img/icon.svg" /></div>
    </div>
    .frame {
  width: 1440px;
  height: 84px;
  display: flex;
  background-color: #74787b1a;
 }
 .frame .group {
  margin-top: 18px;
  width: 148px;
  height: 48px;
  position: relative;
  margin-left: 56px;
 }
 .frame .div {
  display: inline-flex;
  margin-top: 18px;
  width: 569px;
  height: 49px;
  position: relative;
  margin-left: 57px;
  align-items: flex-start;
 }
 .frame .div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 48px;
  position: relative;
  flex: 0 0 auto;
  background-color: #497671;
  border-radius: 13px 0px 0px 13px;
  border: 1px solid;
  border-color: #d3dad9;
  box-shadow: 0px 3px 4px #00000026;
 }
 .frame .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "DM Sans-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .div-wrapper-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 63px;
  position: relative;
  flex: 0 0 auto;
  background-color: #a1b4b5;
  border: 1px solid;
  border-color: #d3dad9;
  box-shadow: 0px 3px 4px #00000026;
 }
 .frame .div-wrapper-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 42px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffffbd;
  border-radius: 0px 13px 13px 0px;
  border: 1px solid;
  border-color: #d3dad9;
  box-shadow: 0px 3px 4px #00000026;
 }
 .frame .text-wrapper-2 {
  color: #1e3c38;
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "DM Sans-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .frame-wrapper {
  margin-top: 18px;
  width: 234px;
  height: 49px;
  position: relative;
  margin-left: 126px;
  background-color: #ffffffbd;
  border-radius: 22px;
  border: 1px solid;
  border-color: #d2dad9;
  box-shadow: 0px 3px 4px #00000026;
 }
 .frame .div-2 {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  padding: 0px 20px;
  position: relative;
  top: 10px;
  left: 50px;
 }
 .frame .text-wrapper-3 {
  color: #828e8d;
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "DM Sans-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .icn {
  position: absolute;
  top: 1px;
  left: -32px;
  width: 28px;
  height: 28px;
 }
 .frame .korzina-frame {
  margin-top: 26px;
  width: 48px;
  height: 32px;
  position: relative;
  margin-left: 57px;
  background-color: #ffffff4c;
  border-radius: 12px;
  border: 1px solid;
  border-color: #667a77;
 }
 .frame .cart {
  position: absolute;
  top: calc(50.00% - 13px);
  left: calc(50.00% - 14px);
  width: 27px;
  height: 27px;
 }
 .frame .RU-frame {
  display: flex;
  margin-top: 26px;
  width: 67px;
  height: 32px;
  position: relative;
  margin-left: 4px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background-color: #ffffff4c;
  border-radius: 12px;
  border: 1px solid;
  border-color: #667a77;
 }
 .frame .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -6.50px;
  margin-bottom: -4.50px;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #1e3c38;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .group-2 {
  position: relative;
  width: 9.29px;
  height: 14px;
  transform: rotate(90.00deg);
 }
 .frame .line {
  top: -2px;
  position: absolute;
  left: 1px;
  width: 9px;
  height: 10px;
  transform: rotate(-90.00deg);
 }
 .frame .img {
  top: 6px;
  position: absolute;
  left: 1px;
  width: 9px;
  height: 10px;
  transform: rotate(-90.00deg);
 }
 .frame .login-frame {
  margin-top: 26px;
  width: 48px;
  height: 32px;
  position: relative;
  margin-left: 4px;
  background-color: #ffffff4c;
  border-radius: 12px;
  border: 1px solid;
  border-color: #667a77;
 }
 .frame .icon {
  position: absolute;
  top: calc(50.00% - 12px);
  left: calc(50.00% - 12px);
  width: 24px;
  height: 24px;
 }
 1.  background: rgba(117, 121, 124, 0.1);
    padding: 14px 0px;
    width: 1440px;  
    height: 84px;
 2. logo stays the 
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="_Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.43 100.53">
  <defs>
    <style>
      .cls-1 {
        fill: #477470;
        stroke-width: 0px;
      }
    </style>
  </defs>
  <path class="cls-1" d="m101.66,15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83,0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41-1.59-.07-3.18-.17-4.77-.21C11.37.13,7.31.06,3.25,0,1.27-.03,0,1.13,0,2.92c0,1.78,1.38,3.14,3.26,3.17,4.28.08,8.56.17,12.84.2.89,0,1.34.26,1.56,1.17,1.2,4.99,2.47,9.95,3.69,14.93,2.3,9.38,4.58,18.77,6.88,28.15,1.11,4.54,2.21,9.07,3.36,13.6.28,1.11.15,1.73-1.02,2.31-3.76,1.85-5.33,5.91-4.45,9.93.91,4.11,4.58,6.95,9.07,7.02.46,0,.92,0,1.38,0-2.97,1.75-4.68,4.13-4.95,7.42-.27,3.32,1.42,5.8,3.95,7.96-4.85.74-6.27.75-9.41,1.23.8.23,1.31.11,1.98.12,4.46.05,8.92.17,13.37.01,4.94-.17,8.86-5.16,7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87,1.74-4.53,4.14-4.85,7.36-.32,3.29,1.08,5.9,3.89,8.11-9.01.38-17.71.47-26.34,1.09l30.02.35c1.84-.07,3.73.03,5.49-.97,4.82-2.75,6.23-8.3,3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2,1.3,0,2.83.03,4.35,0,1.66-.04,2.81-1.34,2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02-4.25,0-8.5,0-12.75,0-2.17,0-3.72-1.47-3.62-3.37.09-1.79,1.73-3.16,3.83-3.15,8.39.04,16.77.1,25.16.13,8.61.04,17.21.06,25.82.07.97,0,1.94-.09,2.9-.21,3.83-.52,6.67-3.16,7.69-6.89,1.84-6.75,3.76-13.47,5.65-20.21,1.36-4.84,2.79-9.66,4.08-14.52.59-2.2,1.13-4.45,1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8,71.86c2.2-.07,4.11,1.95,4.1,4.15-.18,2.67-1.84,3.97-4.24,4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3,1.72-3.96,4.17-4.04Zm-47.43-.03c2.45-.06,4.19,1.8,4.15,4.03-.05,2.63-2.02,3.98-4.06,4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22,2.05-4.07,4.06-3.98Zm30.45-67.01v12.33c-1.89,0-3.69.02-5.48,0-3.15-.05-6.3-.18-9.45-.18-.98,0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66h17.23Zm-.14,17.64v12.64c-4.47,0-8.88.02-13.29-.04-.26,0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55,0-.04,0-.07,0-.11-.15-1.98-.15-1.95,1.83-1.94,4.35.02,8.69,0,13.13,0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1,7.05.12,13.97.24,21.04.37.41,4.15.81,8.23,1.19,12.14-5.73,0-11.3,0-16.87,0-.11,0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26Zm5.02,20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47,4.3.93,8.46,1.39,12.7h-17.01Zm57.74,8.57c-.3,1.1-.54,2.23-.89,3.31-.51,1.58-1.87,2.54-3.47,2.54-16.08-.01-32.17-.04-48.25,0-1.26,0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17,0-.35,0-.67,18.95.13,37.85.26,56.99.39-.29,1.03-.53,1.89-.77,2.76Zm4.75-16.54c-.7,2.51-1.41,5.02-2.17,7.51-.09.29-.56.65-.85.65-5.59.04-11.18.04-16.77,0-.29,0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38,1.5-.69,2.8-1.05,4.08Zm5.38-19.31c-.83,2.95-1.7,5.89-2.49,8.85-.19.73-.47,1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88,0-2.97,0,0-3.91.01-7.67,0-11.43,0-.76.45-.78,1-.77,2.83.08,5.65.17,8.48.22,4.93.09,9.86.15,14.79.22,1.49.02,2.18.94,1.78,2.34Z"/>
  <path class="cls-1" d="m299.48,39.67c.17-.09.36-.18.54-.28,3.09-1.58,5.27-3.86,5.99-7.4.42-2.08.51-4.14.17-6.22-.51-3.09-1.95-5.6-4.74-7.19-2.92-1.67-6.16-2.13-9.43-2.22-4.54-.13-9.08-.02-13.62-.04-.68,0-.98.18-.98.92.02,11.58.02,23.15,0,34.73,0,.72.26.96.96.95,1.71-.03,3.41-.03,5.12.02.85.03,1.15-.26,1.14-1.12-.04-3.23-.02-6.46-.02-9.69v-1.18c2.28,0,4.38.04,6.48-.02.77-.02,1.18.27,1.57.87,1.95,3.04,4,6.02,5.85,9.11.89,1.49,1.85,2.24,3.68,2.06,1.95-.2,3.94-.04,6.23-.04-3.09-4.57-6.01-8.89-8.95-13.25Zm-.65-8.49c-.41,1.92-1.85,2.99-3.63,3.16-3.3.31-6.64.33-9.96.42-.2,0-.59-.48-.59-.74-.04-3.81-.03-7.61-.03-11.8,3.68.22,7.25.24,10.77.71,2.49.33,3.8,2.22,3.81,4.75,0,1.17-.13,2.36-.37,3.51Z"/>
  <path class="cls-1" d="m160.88,43.32c2.31-4.64,2.45-9.55,1.34-14.5-.78-3.47-2.57-6.41-5.35-8.65-3.79-3.05-8.3-4.12-13.04-4.26-3.99-.11-7.99.01-11.98-.05-1.08-.02-1.33.33-1.33,1.36.03,11.35.02,22.71.02,34.06v1.2c3.27,0,6.38.06,9.5-.02,2.92-.07,5.87-.03,8.73-.48,5.42-.85,9.62-3.66,12.11-8.67Zm-5.96-4c-1.11,3.56-4.21,6.16-7.89,6.59-2.68.32-5.41.24-8.12.41-.96.06-1.17-.33-1.16-1.19.03-3.66.01-7.32.01-10.99.02,0,.03,0,.05,0,0-3.7-.01-7.4.02-11.09,0-.28.34-.81.52-.81,3.16.01,6.35-.32,9.47.56,4.39,1.24,6.86,4.16,7.57,8.62.43,2.66.34,5.3-.47,7.88Z"/>
  <path class="cls-1" d="m176.08,37.91c0-.65.38-.66.86-.65,3.92.06,7.84.12,11.76.16,1.36.02,2.72,0,4.17,0,0-1.95-.04-3.62.02-5.28.03-.84-.28-1.03-1.07-1.02-4.83.03-9.66.02-14.49.02h-1.27c0-2.91-.01-5.7.03-8.48,0-.17.43-.48.66-.48,5.15-.02,10.31-.01,15.46-.01.47,0,.94-.05,1.42-.03.73.04,1.03-.22,1-1-.06-1.27-.07-2.54,0-3.81.06-.94-.22-1.25-1.2-1.24-7.04.03-14.09,0-21.13,0-1.11,0-2.22,0-3.31,0v36.58h25.96v-6.21h-18.86c0-2.98,0-5.76,0-8.55Z"/>
  <path class="cls-1" d="m265.06,35c-2.49-6.04-4.99-12.08-7.52-18.1-.12-.28-.65-.53-1-.54-1.92-.05-3.85,0-5.77-.04-.7-.02-1,.27-1.26.89-2.73,6.57-5.49,13.12-8.23,19.68-2.17,5.21-4.32,10.42-6.61,15.95,2.43,0,4.65.03,6.86-.04.34-.01.81-.44.96-.79.93-2.17,1.76-4.38,2.69-6.55.15-.34.61-.79.93-.79,4.94.01,9.87.11,14.81.13.67,0,.84.31,1.04.81.86,2.16,1.73,4.31,2.63,6.45.11.26.38.65.59.65,2.34.05,4.68.03,7.12.03-.11-.33-.19-.63-.31-.91-2.3-5.62-4.6-11.23-6.91-16.84Zm-17.29,3.48c1.91-4.7,3.81-9.35,5.79-14.21,1.96,4.85,3.84,9.48,5.76,14.21h-11.54Z"/>
  <path class="cls-1" d="m225.35,52.65c2.59.09,5.19.05,7.88.05-.08-.32-.09-.51-.18-.64-1.34-1.94-2.7-3.86-4.04-5.8-2.54-3.68-5.05-7.38-7.59-11.06-.54-.78-.8-1.41-.12-2.37,2.6-3.69,5.06-7.47,7.59-11.21,1.18-1.74,2.4-3.46,3.72-5.35-.47-.07-.71-.13-.95-.13-2.11,0-4.21-.06-6.32.03-.52.02-1.21.36-1.51.77-1.3,1.77-2.49,3.62-3.72,5.43-1.3,1.92-2.61,3.85-3.96,5.84-.26-.31-.43-.49-.57-.7-2.13-3.22-4.31-6.4-6.36-9.67-.79-1.26-1.63-1.88-3.2-1.76-2.04.17-4.09.04-6.28.04.14.36.18.57.29.73,3.71,5.4,7.42,10.8,11.15,16.19.43.62.42,1.09-.02,1.72-3.29,4.7-6.54,9.42-9.8,14.14-.83,1.21-1.63,2.45-2.53,3.81,2.74,0,5.24.02,7.74-.02.31,0,.73-.26.92-.53,2.4-3.49,4.77-7,7.15-10.51.45-.67.9-1.34,1.38-2.05,2.79,4.08,5.5,8.05,8.23,12,.29.42.72,1.05,1.1,1.06Z"/>
  <path class="cls-1" d="m141.52,77.32l-1.21,2.83h-.11l-1.21-2.83-3.33-7.36h-3.58v14.94h2.99v-6.83c0-1.39-.25-3.38-.4-4.75h.11l1.47,3.4,3.19,6.78h1.5l3.19-6.78,1.5-3.4h.11c-.17,1.37-.42,3.36-.42,4.75v6.83h3.08v-14.94h-3.61l-3.24,7.36Z"/>
  <path class="cls-1" d="m162.26,69.96l-6.04,14.94h3.36l1.44-4.04h6.18l1.44,4.04h3.47l-6.01-14.94h-3.84Zm-.51,8.82l.65-1.83c.59-1.58,1.13-3.27,1.64-4.93h.11c.54,1.64,1.1,3.36,1.66,4.93l.65,1.83h-4.71Z"/>
  <path class="cls-1" d="m192.96,74.39c0-3.34-2.96-4.43-6.8-4.43h-6.21v14.94h3.27v-5.85h2.79l3.98,5.85h3.67l-4.4-6.24c2.23-.62,3.7-1.99,3.7-4.27Zm-7.14,2.56h-2.6v-4.87h2.6c2.54,0,3.89.59,3.89,2.31s-1.35,2.56-3.89,2.56Z"/>
  <polygon class="cls-1" points="215.96 69.96 212.34 69.96 205.77 76.75 205.69 76.75 205.69 69.96 202.41 69.96 202.41 84.9 205.69 84.9 205.69 80.54 208.34 77.87 213.3 84.9 216.92 84.9 210.29 75.79 215.96 69.96"/>
  <polygon class="cls-1" points="228.09 78.25 234.72 78.25 234.72 76.01 228.09 76.01 228.09 72.2 235.9 72.2 235.9 69.96 224.82 69.96 224.82 84.9 236.19 84.9 236.19 82.66 228.09 82.66 228.09 78.25"/>
  <polygon class="cls-1" points="243.92 72.2 249.25 72.2 249.25 84.9 252.52 84.9 252.52 72.2 257.83 72.2 257.83 69.96 243.92 69.96 243.92 72.2"/>
 </svg>
 3. after logo 3 btns in same div and without gap
    3.1 "главная" 
    border: 1px solid #d3dad9;
    border-radius: 13px 0 0 13px;
    padding: 10px 48px;
    width: 187px;
    height: 49px;
    3.2 "о нас"border: 
    1px solid #d3dad9;
    padding: 10px 63px;
    width: 188px;
    height: 49px;
    3.3 "котакты"border: 
    1px solid #d3dad9;
    border-radius: 0 13px 13px 0;
    padding: 10px 42px;
    width: 194px;   
    height: 49px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.74);
    hover: background: #a1b4b5;
    active : background: #497671;
 4. next search btn with place holder "искать..."   and on the left fixed svg icon "<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#576463" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#576463" />
 </svg>"
    border: 1px solid #d3dad9;
 border-radius: 22px;
 padding: 6px 10px;
 width: 234px;
 height: 49px;
 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
 background: rgba(255, 255, 255, 0.74);
 5. after 3 buttons to the right
 5.1 cart btn 
    border-radius: 12px;
    fill: rgba(255, 255, 255, 0.3);
    border: 1px solid #677b78;
       <svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="white" fill-opacity="0.3" />
  <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
  <path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
 </svg>
    5.2 lang selector btn style border: 1px solid #677b78;
    border-radius: 12px;
    padding: 6px;
    width: 67px;
    height: 32px;
 HERO
    we are goung to have a width wide hero, photos for dekstop and mobile you can see in the same folder
    on it text. here are codes from figma
        <div class="frame">
      <div class="text-wrapper">Здесь ты найдёшь всё</div>
      <p class="div">Тысячи товаров в одном месте</p>
      <div class="text-wrapper-2">просто и удобно</div>
    </div>
    .frame {
  display: flex;
  flex-direction: column;
  width: 639px;
  align-items: flex-start;
  gap: 18px;
  position: relative;
 }
 .frame .text-wrapper {
  position: relative;
  width: 659px;
  margin-top: -1.00px;
  margin-right: -20.00px;
  font-size: 57px;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #1e3c38;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .div {
  position: absolute;
  top: 87px;
  left: 0;
  width: 581px;
  font-size: 34px;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #1e3c38;
  letter-spacing: 0;
  line-height: normal;
 }
 .frame .text-wrapper-2 {
  position: absolute;
  top: 133px;
  left: 0;
  width: 281px;
  font-size: 34px;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #1e3c38;
  letter-spacing: 0;
  line-height: normal;
 }
 under the text we have btns.. hovers and actives for all web site are the same as from header
 first
 <div class="pereyti-v-katalog"><div class="text-wrapper">Перейти в каталог</div></div>
    .pereyti-v-katalog {
  width: 337px;
  height: 60px;
  display: flex;
  border-radius: 13px;
  border: 1px solid;
  border-color: #d3dad9;
  background: linear-gradient(
    360deg,
    rgba(73, 118, 113, 1) 0%,
    rgba(167, 206, 202, 1) 100%
  );
 }
 .pereyti-v-katalog .text-wrapper {
  margin-top: 12px;
  width: 269px;
  height: 36px;
  margin-left: 34px;
  position: relative;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 27px;
  text-align: center;
  letter-spacing: 1.08px;
  line-height: normal;
 }
 second btn
    <div class="frame">
      <div class="text-wrapper">Найти товар</div>
      <div class="group"><img class="line" src="img/line-2.svg" /> <img class="img" src="img/line-3.svg" /></div>
    </div>
    .frame {
  width: 264px;
  height: 60px;
  display: flex;
  gap: 9.2px;
  background-color: #f5f5f5;
  border-radius: 13px;
  border: 1px solid;
  border-color: #d3dad9;
 }
 .frame .text-wrapper {
  margin-top: 12px;
  width: 181px;
  height: 36px;
  position: relative;
  margin-left: 36px;
  font-family: "DM Sans-Medium", Helvetica;
  font-weight: 500;
  color: #1e3c38;
  font-size: 27px;
  text-align: center;
  letter-spacing: 1.08px;
  line-height: normal;
 }
 .frame .group {
  margin-top: 22.0px;
  width: 10.62px;
  height: 16px;
  position: relative;
 }
 .frame .line {
  top: -1px;
  width: 12px;
  position: absolute;
  left: 1px;
  height: 10px;
 }
 .frame .img {
  top: 7px;
  width: 11px;
  position: absolute;
  left: 1px;
  height: 10px;
 }
--- a/public/assets/images/dexar-logo-small.svg
+++ b/public/assets/images/dexar-logo-small.svg
@@ -0,0 +1 @@
 <svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>
--- a/public/assets/images/dexar-logo.svg
+++ b/public/assets/images/dexar-logo.svg
--- a/public/assets/images/footer_bg.webp
+++ b/public/assets/images/footer_bg.webp
--- a/public/assets/images/footer_bg_mobile.webp
+++ b/public/assets/images/footer_bg_mobile.webp
--- a/public/assets/images/hero_background_desktop.webp
+++ b/public/assets/images/hero_background_desktop.webp
--- a/public/assets/images/hero_background_mobile.webp
+++ b/public/assets/images/hero_background_mobile.webp
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#667eea;stop-opacity:1"/><stop offset="100%" style="stop-color:#764ba2;stop-opacity:1"/></linearGradient></defs><path d="m20 35-5 50q0 10 10 10h50q10 0 10-10l-5-50Z" fill="url(#a)" stroke="#4a5cd6" stroke-width="2"/><path d="M30 35q0-20 20-20t20 20" fill="none" stroke="#4a5cd6" stroke-width="3" stroke-linecap="round"/><circle cx="70" cy="25" r="4" fill="gold"/><circle cx="30" cy="70" r="3" fill="#fff" opacity=".7"/></svg>
+<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>
--- a/public/icons/icon-128x128.png
+++ b/public/icons/icon-128x128.png
--- a/public/icons/icon-144x144.png
+++ b/public/icons/icon-144x144.png
--- a/public/icons/icon-152x152.png
+++ b/public/icons/icon-152x152.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-384x384.png
+++ b/public/icons/icon-384x384.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/icons/icon-72x72.png
+++ b/public/icons/icon-72x72.png
--- a/public/icons/icon-96x96.png
+++ b/public/icons/icon-96x96.png
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -16,6 +16,9 @@
  </div>
 } @else { 
  <app-header></app-header>
  @if (!isHomePage()) {
    <app-back-button />
  }
  <main class="main-content">
    <router-outlet></router-outlet>
  </main>
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,19 +1,20 @@
 import { Component, OnInit, OnDestroy, signal, ApplicationRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet, NavigationEnd } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { HeaderComponent } from './components/header/header.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { BackButtonComponent } from './components/back-button/back-button.component';
 import { ApiService } from './services';
 import { Subscription, interval, concat } from 'rxjs';
-import { first } from 'rxjs/operators';
+import { filter, first } from 'rxjs/operators';
 import { environment } from '../environments/environment';
 import { SwUpdate } from '@angular/service-worker';
@Component({
  selector: 'app-root',
-  imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, BackButtonComponent, CommonModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
 })
@@ -21,14 +22,17 @@ export class App implements OnInit, OnDestroy {
  protected title = environment.brandName;
  serverAvailable = signal(true);
  checkingServer = signal(true);
  isHomePage = signal(true);
  private pingSubscription?: Subscription;
  private updateSubscription?: Subscription;
  private routerSubscription?: Subscription;
  constructor(
    private apiService: ApiService,
    private titleService: Title,
    private swUpdate: SwUpdate,
-    private appRef: ApplicationRef
+    private appRef: ApplicationRef,
    private router: Router
  ) {}
  ngOnInit(): void {
@@ -36,6 +40,14 @@ export class App implements OnInit, OnDestroy {
    this.titleService.setTitle(`${environment.brandFullName} - Маркетплейс товаров и услуг`);
    this.checkServerHealth();
    this.setupAutoUpdates();
    // Track route changes to show/hide back button
    this.routerSubscription = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event) => {
        const url = (event as NavigationEnd).urlAfterRedirects || (event as NavigationEnd).url;
        this.isHomePage.set(url === '/' || url === '/home' || url === '');
      });
  }
  checkServerHealth(): void {
@@ -84,6 +96,7 @@ export class App implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    this.pingSubscription?.unsubscribe();
    this.updateSubscription?.unsubscribe();
    this.routerSubscription?.unsubscribe();
  }
  retryConnection(): void {
--- a/src/app/components/back-button/back-button.component.ts
+++ b/src/app/components/back-button/back-button.component.ts
@@ -0,0 +1,69 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { environment } from '../../../environments/environment';
@Component({
  selector: 'app-back-button',
  standalone: true,
  template: `
    @if (!isnovo) {
      <button class="dexar-back-btn" (click)="goBack()" aria-label="Назад">
        <svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4.73 11.46c-.97-.52-.97-1.4 0-1.92L20.39 1.21c1.48-.79 3.89-.19 3.89.95v3.74h6.94c1.28 0 2.31.59 2.31 1.31v6.56c0 .73-1.03 1.31-2.31 1.31h-6.94v3.74c0 1.15-2.42 1.74-3.89.96L4.73 11.46Z"
            fill="#497671" fill-opacity="0.75" stroke="white" stroke-opacity="0.6" stroke-linejoin="round"/>
        </svg>
      </button>
    }
  `,
  styles: [`
    .dexar-back-btn {
      position: fixed;
      top: 76px;
      left: 20px;
      z-index: 100;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      transition: transform 0.2s ease;
      svg path {
        transition: fill 0.2s ease, fill-opacity 0.2s ease;
      }
      &:hover {
        transform: scale(1.08);
        svg path {
          fill: #A1B4B5;
          fill-opacity: 1;
        }
      }
      &:active {
        transform: scale(0.95);
      }
    }
    @media (max-width: 768px) {
      .dexar-back-btn {
        top: 68px;
        left: 12px;
        svg {
          width: 30px;
          height: 20px;
        }
      }
    }
  `]
 })
 export class BackButtonComponent {
  isnovo = environment.theme === 'novo';
  constructor(private location: Location) {}
  goBack(): void {
    this.location.back();
  }
 }
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -49,49 +49,60 @@
    </div>
  </footer>
 } @else {
-  <!-- DEXAR VERSION - Original -->
+  <!-- DEXAR VERSION - Redesigned -->
-  <footer class="footer">
+  <footer class="dexar-footer">
-    <div class="footer-container">
+    <div class="dexar-footer-bg">
-      <div class="footer-section">
+      <div class="dexar-footer-container">
-        <h3>Информация</h3>
+        <div class="dexar-footer-top">
-        <ul>
+          <div class="dexar-footer-logo">
-          <li><a routerLink="/about">О компании</a></li>
+            <img src="/assets/images/dexar-logo.svg" alt="Dexar" class="dexar-footer-logo-desktop" loading="lazy" />
-          <li><a routerLink="/contacts">Контакты</a></li>
+            <img src="/assets/images/dexar-logo-small.svg" alt="Dexar" class="dexar-footer-logo-mobile" loading="lazy" />
-          <li><a routerLink="/company-details">Реквизиты организации</a></li>
+          </div>
        </ul>
      </div>
-      <div class="footer-section">
+          <div class="dexar-footer-columns">
-        <h3>Документы</h3>
+            <div class="dexar-footer-col">
-        <ul>
+              <h4>Информация</h4>
-          <li><a routerLink="/payment-terms">Правила оплаты</a></li>
+              <ul>
-          <li><a routerLink="/return-policy">Политика возврата</a></li>
+                <li><a routerLink="/about">О компании</a></li>
-          <li><a routerLink="/public-offer">Публичная оферта</a></li>
+                <li><a routerLink="/contacts">Контакты</a></li>
-          <li><a routerLink="/privacy-policy">Политика конфиденциальности</a></li>
+                <li><a routerLink="/company-details">Реквизиты</a></li>
-        </ul>
+              </ul>
-      </div>
+            </div>
-      <div class="footer-section">
+            <div class="dexar-footer-col">
-        <h3>Помощь</h3>
+              <h4>Документы</h4>
-        <ul>
+              <ul>
-          <li><a routerLink="/faq">Часто задаваемые вопросы</a></li>
+                <li><a routerLink="/payment-terms">Правила оплаты</a></li>
-          <li><a routerLink="/delivery">Доставка</a></li>
+                <li><a routerLink="/return-policy">Политика возврата</a></li>
-          <li><a routerLink="/guarantee">Гарантия</a></li>
+                <li><a routerLink="/public-offer">Публичная оферта</a></li>
-        </ul>
+                <li><a routerLink="/privacy-policy">Конфиденциальность</a></li>
-      </div>
+              </ul>
            </div>
-      <div class="footer-section payment-systems">
+            <div class="dexar-footer-col">
-        <h3>Способы оплаты</h3>
+              <h4>Помощь</h4>
-        <div class="payment-logos">
+              <ul>
-          <img src="/assets/images/mir-logo.svg" alt="МИР" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
+                <li><a routerLink="/faq">FAQ</a></li>
-          <img src="/assets/images/visa-logo.svg" alt="Visa" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
+                <li><a routerLink="/delivery">Доставка</a></li>
-          <img src="/assets/images/mastercard-logo.svg" alt="Mastercard" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
+                <li><a routerLink="/guarantee">Гарантия</a></li>
              </ul>
            </div>
            <div class="dexar-footer-col">
              <h4>Оплата</h4>
              <div class="dexar-payment-logos">
                <img src="/assets/images/mir-logo.svg" alt="МИР" loading="lazy" width="48" height="32" />
                <img src="/assets/images/visa-logo.svg" alt="Visa" loading="lazy" width="48" height="32" />
                <img src="/assets/images/mastercard-logo.svg" alt="Mastercard" loading="lazy" width="48" height="32" />
              </div>
            </div>
          </div>
        </div>
        <div class="dexar-footer-bottom">
          <p>&copy; {{ currentYear }} {{ brandName }}. Все права защищены.</p>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; {{ currentYear }} {{ brandName }}. Все права защищены.</p>
    </div>
  </footer>
 }
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -1,4 +1,9 @@
-.footer {
+:host {
  display: block;
  width: 100%;
 }
 .footer {
  background-color: #1a1a1a;
  color: #ffffff;
  margin-top: auto;
@@ -217,3 +222,196 @@
    text-align: center;
  }
 }
 // ========== DEXAR FOOTER STYLES ==========
 .dexar-footer {
  margin-top: auto;
 }
 .dexar-footer-bg {
  background-image: url('/assets/images/footer_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 60, 56, 0.85);
  }
 }
 .dexar-footer-container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 40px 24px;
 }
 .dexar-footer-top {
  display: flex;
  gap: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
 .dexar-footer-logo {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  .dexar-footer-logo-desktop {
    display: block;
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .dexar-footer-logo-mobile {
    display: none;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
  }
 }
 .dexar-footer-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
 }
 .dexar-footer-col {
  h4 {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 16px 0;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      margin-bottom: 10px;
      a {
        font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color 0.2s ease;
        &:hover {
          color: #ffffff;
        }
      }
    }
  }
 }
 .dexar-payment-logos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  img {
    height: 28px;
    max-height: 28px;
    width: auto;
    max-width: 60px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    transition: opacity 0.2s;
    object-fit: contain;
    &:hover {
      opacity: 0.85;
    }
  }
 }
 .dexar-footer-bottom {
  padding: 20px 0 0;
  text-align: center;
  p {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
  }
 }
 // Responsive
@media (max-width: 992px) {
  .dexar-footer-container {
    padding: 40px 32px 20px;
  }
  .dexar-footer-top {
    flex-direction: column;
    gap: 32px;
  }
  .dexar-footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
 }
@media (max-width: 768px) {
  .dexar-footer-bg {
    background-image: url('/assets/images/footer_bg_mobile.webp');
  }
  .dexar-footer-container {
    padding: 32px 20px 16px;
  }
  .dexar-footer-logo {
    .dexar-footer-logo-desktop {
      display: none;
    }
    .dexar-footer-logo-mobile {
      display: block;
    }
  }
  .dexar-footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .dexar-footer-col h4 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .dexar-footer-col ul li a {
    font-size: 12px;
  }
 }
@media (max-width: 480px) {
  .dexar-footer-container {
    padding: 24px 16px 12px;
  }
  .dexar-footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
 }
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -49,48 +49,131 @@
    </div>
  </header>
 } @else {
-  <!-- DEXAR VERSION - Original -->
+  <!-- DEXAR VERSION - Redesigned 2026 -->
-  <header class="header">
+  <header class="dexar-header">
-    <div class="header-container">
+    <div class="dexar-header-container">
-      <a routerLink="/" class="logo" (click)="closeMenu()">
+      <!-- Logo -->
      <a routerLink="/" class="dexar-logo" (click)="closeMenu()">
        <app-logo />
        <!-- <span class="logo-text">{{ brandName }}</span> -->
      </a>
-      <nav class="nav" [class.nav-open]="menuOpen">
+      <!-- Navigation Buttons (desktop) -->
-        <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">
+      <nav class="dexar-nav">
-          <span class="nav-icon">🏠</span>
+        <div class="dexar-nav-group">
-          <span class="nav-text">Главная</span>
+          <a routerLink="/" routerLinkActive="dexar-active" [routerLinkActiveOptions]="{exact: true}" 
-        </a>
+             (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-left">
-        <a routerLink="/search" routerLinkActive="active" (click)="closeMenu()">
+            Главная
-          <span class="nav-icon">🔍</span>
+          </a>
-          <span class="nav-text">Поиск</span>
+          <a routerLink="/about" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-middle">
-        </a>
+            О нас
-        <a routerLink="/cart" routerLinkActive="active" class="cart-link" (click)="closeMenu()">
+          </a>
-          <span class="nav-icon">🛒</span>
+          <a routerLink="/contacts" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-right">
-          <span class="nav-text">Корзина</span>
+            Контакты
-          @if (cartItemCount() > 0) {
+          </a>
-            <span class="cart-badge">{{ cartItemCount() }}</span>
+        </div>
          }
        </a>
      </nav>
-      <a routerLink="/cart" routerLinkActive="active" class="cart-link-mobile" (click)="closeMenu()">
+      <!-- Search Box (desktop) -->
-        <span class="cart-icon">🛒</span>
+      <div class="dexar-search-wrapper">
-        @if (cartItemCount() > 0) {
+        <div class="dexar-search-box">
-          <span class="cart-badge">{{ cartItemCount() }}</span>
+          <svg class="dexar-search-icon" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        }
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#576463" />
-      </a>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#576463" />
-
+          </svg>
-      <div class="header-actions">
+          <input type="text" placeholder="Искать..." class="dexar-search-input" (click)="navigateToSearch()" readonly />
-        <app-language-selector />
+        </div>
      </div>
-      <button class="menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
+      <!-- Search Icon (mobile only) -->
-        <span></span>
+      <button class="dexar-search-mobile" (click)="navigateToSearch()" aria-label="Поиск">
-        <span></span>
+        <svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <span></span>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#1e3c38" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#1e3c38" />
        </svg>
      </button>
      <!-- Right Actions -->
      <div class="dexar-actions">
        <!-- Cart Button -->
        <a routerLink="/cart" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
          <svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" />
            <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
            <path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
          </svg>
          @if (cartItemCount() > 0) {
            <span class="dexar-cart-badge">{{ cartItemCount() }}</span>
          }
        </a>
        <!-- Language Selector (desktop only) -->
        <div class="dexar-lang-selector dexar-lang-desktop">
          <app-language-selector />
        </div>
        <!-- Mobile Menu Toggle -->
        <button class="dexar-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </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>
 }
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -78,12 +78,12 @@
    &:hover {
      color: var(--primary-hover);
-      background: rgba(85, 104, 211, 0.05);
+      background: rgba(73, 118, 113, 0.05);
    }
    &.active {
      color: var(--primary-hover);
-      background: rgba(85, 104, 211, 0.1);
+      background: rgba(73, 118, 113, 0.1);
      font-weight: 600;
    }
  }
@@ -183,11 +183,11 @@
    }
    &:hover {
-      background: rgba(85, 104, 211, 0.05);
+      background: rgba(73, 118, 113, 0.05);
    }
    &.active {
-      background: rgba(85, 104, 211, 0.1);
+      background: rgba(73, 118, 113, 0.1);
    }
  }
@@ -449,3 +449,474 @@
    font-size: 1.1rem;
  }
 }
 // ========== DEXAR REDESIGN 2026 STYLES ==========
 .dexar-header {
  background: rgba(117, 121, 124, 0.1);
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .dexar-header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 48px;
 }
 .dexar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  ::ng-deep .logo-img {
    width: 120px;
    height: 38px;
    object-fit: contain;
  }
 }
 // Navigation Buttons Group
 .dexar-nav {
  display: flex;
  flex-shrink: 0;
 }
 .dexar-nav-group {
  display: flex;
  align-items: center;
 }
 .dexar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 32px;
  height: 38px;
  border: 1px solid #d3dad9;
  background: rgba(255, 255, 255, 0.74);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #1e3c38;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
  &:hover {
    background: #a1b4b5;
    color: #1e3c38;
  }
  &.dexar-active {
    background: #497671;
    color: #ffffff;
  }
 }
 .dexar-nav-btn-left {
  border-radius: 10px 0 0 10px;
  padding: 6px 32px;
 }
 .dexar-nav-btn-middle {
  padding: 6px 40px;
  border-left: none;
 }
 .dexar-nav-btn-right {
  border-radius: 0 10px 10px 0;
  padding: 6px 28px;
  border-left: none;
 }
 // Search Box
 .dexar-search-wrapper {
  flex: 1;
  max-width: 200px;
  margin-left: auto;
 }
 .dexar-search-box {
  position: relative;
  width: 100%;
  height: 38px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid #d2dad9;
  border-radius: 19px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
 }
 .dexar-search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
 }
 .dexar-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #828e8d;
  cursor: pointer;
  &::placeholder {
    color: #828e8d;
  }
 }
 // Actions
 .dexar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
 }
 .dexar-cart-btn {
  position: relative;
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  svg {
    width: 36px;
    height: 28px;
  }
  &:hover {
    opacity: 0.85;
  }
  &.dexar-cart-active {
    opacity: 1;
  }
 }
 .dexar-cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #497671;
  color: #ffffff;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 .dexar-lang-selector {
  display: flex;
  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;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  span {
    width: 25px;
    height: 3px;
    background: #1e3c38;
    border-radius: 2px;
    transition: all 0.3s;
  }
  &.active {
    span:nth-child(1) {
      transform: rotate(45deg) translate(7px, 4.5px);
    }
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -4.5px);
    }
  }
 }
 // Mobile Search Icon
 .dexar-search-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  transition: opacity 0.2s ease;
  &:hover {
    opacity: 0.7;
  }
 }
 // Responsive Design
@media (max-width: 1200px) {
  .dexar-header-container {
    padding: 0 32px;
    gap: 32px;
  }
  .dexar-nav-btn {
    font-size: 18px;
    padding: 8px 32px !important;
  }
  .dexar-nav-btn-left {
    padding: 8px 32px !important;
  }
  .dexar-nav-btn-middle {
    padding: 8px 40px !important;
  }
  .dexar-nav-btn-right {
    padding: 8px 28px !important;
  }
 }
@media (max-width: 992px) {
  .dexar-header-container {
    padding: 0 20px;
    gap: 20px;
  }
  .dexar-logo ::ng-deep .logo-img {
    width: 120px;
    height: 40px;
  }
  .dexar-nav-btn {
    font-size: 16px;
    padding: 8px 24px !important;
  }
  .dexar-nav-btn-left {
    padding: 8px 24px !important;
  }
  .dexar-nav-btn-middle {
    padding: 8px 28px !important;
  }
  .dexar-nav-btn-right {
    padding: 8px 20px !important;
  }
  .dexar-search-box {
    height: 42px;
  }
  .dexar-search-input {
    font-size: 18px;
  }
 }
@media (max-width: 768px) {
  .dexar-header-container {
    gap: 12px;
    padding: 0 16px;
  }
  // Hide desktop nav
  .dexar-nav {
    display: none;
  }
  // Hide desktop language selector
  .dexar-lang-desktop {
    display: none;
  }
  .dexar-search-wrapper {
    display: none;
  }
  .dexar-search-mobile {
    display: flex;
  }
  .dexar-menu-toggle {
    display: flex;
  }
  .dexar-logo ::ng-deep .logo-img {
    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; }
 }
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { CartService } from '../../services';
 import { environment } from '../../../environments/environment';
 import { LogoComponent } from '../logo/logo.component';
@@ -20,15 +20,21 @@ export class HeaderComponent {
  logo = environment.logo;
  isnovo = environment.theme === 'novo';
-  constructor(private cartService: CartService) {
+  constructor(private cartService: CartService, private router: Router) {
    this.cartItemCount = this.cartService.itemCount;
  }
  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 {
    this.router.navigate(['/search']);
  }
 }
--- a/src/app/components/items-carousel/items-carousel.component.html
+++ b/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>
--- a/src/app/components/items-carousel/items-carousel.component.scss
+++ b/src/app/components/items-carousel/items-carousel.component.scss
@@ -3,6 +3,7 @@
  padding: 2rem 0;
  max-width: 1400px;
  margin: 0 auto;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  ::ng-deep {
    // PrimeNG carousel wrapper
@@ -21,8 +22,8 @@
        height: 3rem;
        border-radius: 50%;
        background: white;
-        border: 2px solid #e5e7eb;
+        border: 2px solid #d3dad9;
-        color: #374151;
+        color: #1e3c38;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        align-self: center;
@@ -31,13 +32,13 @@
        &:hover {
          background: #f9fafb;
-          border-color: #d1d5db;
+          border-color: #d3dad9;
          transform: scale(1.05);
        }
        &:not(:disabled):hover {
-          background: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
-          border-color: var(--primary-color, #5568d3);
+          border-color: var(--primary-color, #497671);
          color: white;
        }
      }
@@ -63,7 +64,7 @@
        flex-shrink: 0;
      }
-      // Pagination dots - using actual PrimeNG rendered classes
+      // Pagination dots
      .p-carousel-indicator-list {
        display: flex !important;
        justify-content: center !important;
@@ -79,20 +80,20 @@
            width: 12px !important;
            height: 12px !important;
            border-radius: 50% !important;
-            background-color: #d1d5db !important;
+            background-color: #d3dad9 !important;
            border: 0 !important;
            padding: 0 !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
            &:hover {
-              background-color: #9ca3af !important;
+              background-color: #a1b4b5 !important;
              transform: scale(1.2);
            }
          }
          &.p-carousel-indicator-active .p-carousel-indicator-button {
-            background-color: var(--primary-color, #5568d3) !important;
+            background-color: var(--primary-color, #497671) !important;
            width: 32px !important;
            border-radius: 6px !important;
          }
@@ -106,14 +107,14 @@
 .carousel-empty {
  text-align: center;
  padding: 3rem 1rem;
-  color: #666;
+  color: #697777;
  .spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 4px solid #f3f3f3;
-    border-top: 4px solid var(--primary-color, #5568d3);
+    border-top: 4px solid var(--primary-color, #497671);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
@@ -124,13 +125,14 @@
  100% { transform: rotate(360deg); }
 }
-// Item card styles matching your existing design
+// Item card styles
 .item-card {
-  background: white;
+  background: #ffffff;
-  border-radius: 12px;
+  border-radius: 13px;
  border: 1px solid #d3dad9;
  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  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;
@@ -140,7 +142,7 @@
  margin: 0 auto;
  &:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
  }
 }
@@ -156,78 +158,86 @@
 .item-image {
  position: relative;
  width: 100%;
-  height: 140px;
+  height: 170px;
  overflow: hidden;
-  background: #f5f5f5;
+  background: #f5f3f9;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
-    background: white;
+    padding: 12px;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s ease;
    box-sizing: border-box;
  }
-  &:hover img {
+  .item-card:hover & img {
-    transform: scale(1.08);
+    transform: scale(1.06);
  }
 }
 .discount-badge {
  position: absolute;
-  top: 12px;
+  top: 10px;
-  right: 12px;
+  left: 10px;
-  background: #e74c3c;
+  background: #ef4444;
  color: white;
-  padding: 0.4rem 0.8rem;
+  padding: 4px 10px;
-  border-radius: 6px;
+  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;
  -webkit-box-orient: vertical;
  overflow: hidden;
-  color: #1a1a1a;
+  color: #1e3c38;
  transition: color 0.2s;
-  &:hover {
+  .item-card:hover & {
-    color: var(--primary-color, #5568d3);
+    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: #fbbf24;
+    flex-shrink: 0;
  }
  .rating-value {
    font-weight: 600;
    color: #1e3c38;
  }
  .rating-count {
-    color: #6b7280;
+    color: #697777;
  }
 }
@@ -235,42 +245,47 @@
  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 {
    font-size: 0.9375rem;
    font-weight: 700;
-    color: #1a1a1a;
+    color: #1e3c38;
  }
  .discounted-price {
-    color: #e74c3c;
+    color: #ef4444;
  }
  .original-price {
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
-    color: #9ca3af;
+    color: #a1b4b5;
    text-decoration: line-through;
  }
 }
 .cart-icon-btn {
-  padding: 0.5rem;
+  width: 36px;
-  background: var(--primary-color, #5568d3);
+  height: 36px;
  padding: 0;
  background: #497671;
  color: white;
  border: none;
-  border-radius: 8px;
+  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;
@@ -278,11 +293,13 @@
  svg {
    display: block;
    width: 18px;
    height: 18px;
  }
  &:hover {
-    background: var(--primary-hover, #4456b3);
+    background: #3d635f;
-    transform: scale(1.05);
+    transform: scale(1.08);
  }
  &:active {
@@ -297,14 +314,14 @@
      .p-carousel-prev,
      .p-carousel-next {
        &:not(:disabled):hover {
-          background: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
-          border-color: var(--primary-color, #5568d3);
+          border-color: var(--primary-color, #497671);
        }
      }
      .p-carousel-indicators {
        .p-carousel-indicator.p-highlight button {
-          background: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
        }
      }
    }
@@ -315,10 +332,10 @@
  }
  .cart-icon-btn {
-    background: var(--primary-color, #5568d3);
+    background: var(--primary-color, #497671);
    &:hover {
-      background: var(--primary-hover, #4456b3);
+      background: var(--primary-hover, #3d635f);
    }
  }
 }
@@ -330,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;
    }
  }
 }
--- a/src/app/components/language-selector/language-selector.component.scss
+++ b/src/app/components/language-selector/language-selector.component.scss
@@ -152,6 +152,74 @@
  }
 }
 // Dexar header specific styles
 :host-context(.dexar-header),
 :host-context(.dexar-mobile-menu) {
  .language-selector {
    width: 56px;
    height: 28px;
  }
  .language-button {
    width: 100%;
    height: 100%;
    padding: 4px;
    gap: 4px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #677b78;
    border-radius: 8px;
    color: #1e3c38;
    justify-content: center;
    &:hover {
      background: rgba(255, 255, 255, 0.5);
      border-color: #677b78;
    }
    .language-flag {
      display: none;
    }
    .language-code {
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 500;
      font-size: 15px;
      color: #1e3c38;
      letter-spacing: 0;
      line-height: 1;
    }
    .dropdown-arrow {
      display: block;
      width: 7px;
      height: 10px;
      opacity: 1;
      path {
        stroke: #1e3c38;
      }
    }
  }
  .language-dropdown {
    background: #ffffff;
    border-color: #d3dad9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .language-option {
    color: #1e3c38;
    &:hover:not(.disabled) {
      background: rgba(161, 180, 181, 0.2);
    }
    &.active {
      background: rgba(73, 118, 113, 0.1);
    }
  }
 }
 // Mobile responsiveness
@media (max-width: 768px) {
  .language-button {
@@ -177,4 +245,16 @@
      height: 20px;
    }
  }
  :host-context(.dexar-header),
  :host-context(.dexar-mobile-menu) {
    .language-selector {
      width: 56px;
      height: 28px;
    }
    .language-button .language-code {
      font-size: 18px;
    }
  }
 }
--- a/src/app/components/logo/logo.component.ts
+++ b/src/app/components/logo/logo.component.ts
@@ -4,11 +4,12 @@ import { environment } from '../../../environments/environment';
@Component({
  selector: 'app-logo',
  standalone: true,
-  template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" width="120" height="40" fetchpriority="high" />`,
+  template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" fetchpriority="high" />`,
  styles: [`
    .logo-img {
-      height: 40px;
+      width: 100%;
-      width: auto;
+      height: 100%;
      object-fit: contain;
    }
  `]
 })
--- a/src/app/models/category.model.ts
+++ b/src/app/models/category.model.ts
@@ -3,4 +3,5 @@ export interface Category {
  name: string;
  parentID: number;
  icon?: string;
  wideBanner?: string;
 }
--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
@@ -2,8 +2,9 @@
 .cart-container.dexar {
  max-width: 1200px;
  margin: 0 auto;
-  padding: 20px;
+  padding: 24px;
  min-height: calc(100vh - 200px);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 // Novo theme - Modern green design
@@ -16,38 +17,44 @@
 }
 .cart-container.dexar .cart-header {
-  margin-bottom: 24px;
+  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h1 {
-    font-size: 1.75rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-weight: 600;
+    font-size: 2rem;
-    color: #1a1a1a;
+    font-weight: 700;
    color: #1e3c38;
    margin: 0;
  }
  .clear-cart-btn {
-    padding: 8px 16px;
+    padding: 10px 20px;
-    background: #ef4444;
+    background: transparent;
-    color: white;
+    color: #697777;
-    border: none;
+    border: 1px solid #d3dad9;
-    border-radius: 8px;
+    border-radius: 13px;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
-    font-weight: 500;
+    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
-    gap: 6px;
+    gap: 8px;
    svg {
-      display: none;
+      display: block;
      width: 16px;
      height: 16px;
    }
    &:hover {
-      background: #dc2626;
+      background: #fef2f2;
      border-color: #ef4444;
      color: #ef4444;
      transform: translateY(-1px);
    }
@@ -114,41 +121,51 @@
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background: #f5f3f9;
  border-radius: 13px;
  border: 1px solid #d3dad9;
  .empty-icon {
-    margin-bottom: 24px;
+    margin-bottom: 28px;
    svg {
-      width: 80px;
+      width: 90px;
-      height: 80px;
+      height: 90px;
      opacity: 0.7;
    }
  }
  h2 {
-    font-size: 1.5rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-weight: 600;
+    font-size: 1.6rem;
-    color: #1a1a1a;
+    font-weight: 700;
    color: #1e3c38;
    margin: 0 0 12px 0;
  }
  p {
-    font-size: 0.95rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    color: #6b7280;
+    font-size: 1rem;
-    margin: 0 0 24px 0;
+    color: #697777;
    margin: 0 0 28px 0;
  }
  .shop-btn {
-    padding: 12px 24px;
+    padding: 14px 32px;
-    background: #a855f7;
+    background: #497671;
    color: white;
    text-decoration: none;
-    border-radius: 8px;
+    border-radius: 13px;
-    font-weight: 500;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    &:hover {
-      background: #9333ea;
+      background: #3a5f5b;
-      transform: translateY(-1px);
+      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(73, 118, 113, 0.3);
    }
  }
 }
@@ -256,26 +273,30 @@
 // Dexar cart item
 .cart-container.dexar .cart-item {
  display: flex;
-  gap: 16px;
+  gap: 20px;
  background: white;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d3dad9;
-  border-radius: 12px;
+  border-radius: 13px;
-  padding: 16px;
+  padding: 20px;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  &:hover {
-    border-color: #d1d5db;
+    border-color: #a1b4b5;
    box-shadow: 0 4px 12px rgba(73, 118, 113, 0.1);
    transform: translateY(-1px);
  }
  .item-image {
    flex-shrink: 0;
-    width: 80px;
+    width: 100px;
-    height: 80px;
+    height: 100px;
-    border-radius: 8px;
+    border-radius: 13px;
    overflow: hidden;
-    background: #f3f4f6;
+    background: #f5f3f9;
    border: 1px solid #d3dad9;
    img {
      width: 100%;
@@ -283,6 +304,12 @@
      object-fit: contain;
      background: white;
      display: block;
      padding: 6px;
      transition: transform 0.3s ease;
    }
    &:hover img {
      transform: scale(1.05);
    }
  }
@@ -302,25 +329,26 @@
  }
  .item-name {
-    font-size: 1rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
-    color: #1a1a1a;
+    color: #1e3c38;
    text-decoration: none;
    transition: color 0.2s;
    &:hover {
-      color: #a855f7;
+      color: #497671;
    }
  }
  .remove-btn {
    flex-shrink: 0;
-    padding: 4px;
+    padding: 6px;
    background: transparent;
    border: none;
-    color: #9ca3af;
+    color: #a1b4b5;
    cursor: pointer;
-    border-radius: 6px;
+    border-radius: 8px;
    transition: all 0.2s;
    &:hover {
@@ -330,8 +358,9 @@
  }
  .item-description {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
-    color: #6b7280;
+    color: #697777;
    line-height: 1.5;
  }
@@ -462,9 +491,10 @@
  }
  .current-price {
-    font-size: 1.1rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
-    color: #1a1a1a;
+    color: #497671;
  }
 }
@@ -473,16 +503,17 @@
  display: flex;
  align-items: center;
  gap: 12px;
-  background: #f3f4f6;
+  background: #f5f3f9;
-  border-radius: 20px;
+  border-radius: 13px;
-  padding: 4px 8px;
+  padding: 4px 10px;
  border: 1px solid #d3dad9;
  .qty-btn {
-    width: 28px;
+    width: 30px;
-    height: 28px;
+    height: 30px;
    border: none;
    background: transparent;
-    color: #a855f7;
+    color: #497671;
    cursor: pointer;
    display: flex;
    align-items: center;
@@ -491,7 +522,7 @@
    transition: all 0.2s;
    &:hover:not(:disabled) {
-      background: #a855f7;
+      background: #497671;
      color: white;
    }
@@ -502,10 +533,11 @@
  }
  .qty-value {
-    font-size: 0.95rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-weight: 600;
+    font-size: 1rem;
-    color: #1a1a1a;
+    font-weight: 700;
-    min-width: 20px;
+    color: #1e3c38;
    min-width: 24px;
    text-align: center;
  }
 }
@@ -582,19 +614,21 @@
 // Dexar Cart Summary
 .cart-container.dexar .cart-summary {
  position: sticky;
-  top: 20px;
+  top: 90px;
-  background: white;
+  background: #f5f3f9;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d3dad9;
-  border-radius: 16px;
+  border-radius: 13px;
-  padding: 24px;
+  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  .summary-header h3 {
-    font-size: 1.25rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-weight: 600;
+    font-size: 1.4rem;
-    color: #1a1a1a;
+    font-weight: 700;
    color: #1e3c38;
    margin: 0 0 16px 0;
  }
@@ -602,8 +636,9 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
-    color: #6b7280;
+    color: #697777;
    &.delivery {
      display: flex;
@@ -611,35 +646,38 @@
    &.total {
      padding-top: 16px;
-      border-top: 1px solid #e5e7eb;
+      border-top: 1px solid #d3dad9;
-      font-size: 1.1rem;
+      font-size: 1.15rem;
-      font-weight: 600;
+      font-weight: 700;
-      color: #1a1a1a;
+      color: #1e3c38;
      margin-top: 8px;
      .total-price {
-        font-size: 1.25rem;
+        font-size: 1.35rem;
-        color: #1a1a1a;
+        color: #497671;
      }
    }
  }
  .checkout-btn {
    width: 100%;
-    padding: 14px;
+    padding: 16px;
-    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+    background: #497671;
    color: white;
    border: none;
-    border-radius: 12px;
+    border-radius: 13px;
-    font-size: 1rem;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-weight: 600;
+    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    &:hover:not(:disabled) {
-      transform: translateY(-1px);
+      background: #3a5f5b;
-      box-shadow: 0 8px 16px rgba(168, 85, 247, 0.3);
+      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(73, 118, 113, 0.3);
    }
    &:active {
@@ -790,7 +828,7 @@
      line-height: 1.4;
      a {
-        color: #a855f7;
+        color: var(--primary-color);
        text-decoration: none;
        &:hover {
@@ -804,13 +842,36 @@
 // Dexar checkbox colors
 .cart-container.dexar .terms-agreement .checkbox-container {
  input[type="checkbox"]:checked ~ .checkmark {
-    background: #a855f7;
+    background: #497671;
-    border-color: #a855f7;
+    border-color: #497671;
    &::after {
      display: block;
    }
  }
  .checkmark {
    border: 2px solid #d3dad9;
    border-radius: 4px;
  }
  .terms-text {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    color: #697777;
    line-height: 1.5;
    a {
      color: #497671;
      text-decoration: none;
      font-weight: 600;
      &:hover {
        text-decoration: underline;
        color: #3a5f5b;
      }
    }
  }
 }
 // Novo checkbox colors - green
@@ -861,13 +922,15 @@
 .payment-modal {
  background: white;
-  border-radius: 20px;
+  border-radius: 13px;
  max-width: 500px;
  width: 100%;
  padding: 40px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #d3dad9;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 .close-modal-btn {
  position: absolute;
@@ -980,8 +1043,8 @@
 .spinner-small {
  width: 50px;
  height: 50px;
-  border: 4px solid #f3f3f3;
+  border: 4px solid #d3dad9;
-  border-top: 4px solid #a855f7;
+  border-top: 4px solid #497671;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
@@ -1032,9 +1095,9 @@
    left: 16px;
    right: 16px;
    height: 2px;
-    background: linear-gradient(90deg, transparent, #a855f7, transparent);
+    background: linear-gradient(90deg, transparent, #497671, transparent);
    animation: scan 2s linear infinite;
-    box-shadow: 0 0 10px #a855f7;
+    box-shadow: 0 0 10px #497671;
  }
  @keyframes scan {
@@ -1084,7 +1147,7 @@
    .pulse-dot {
      width: 8px;
      height: 8px;
-      background: #a855f7;
+      background: #497671;
      border-radius: 50%;
      animation: pulse 1.5s ease-in-out infinite;
    }
@@ -1132,12 +1195,12 @@
      display: flex;
      align-items: center;
      justify-content: center;
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
+      box-shadow: 0 4px 12px rgba(73, 118, 113, 0.25);
      &:hover {
        background: var(--primary-hover);
        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
+        box-shadow: 0 6px 16px rgba(73, 118, 113, 0.35);
      }
      &:active {
@@ -1198,8 +1261,8 @@
    transition: all 0.2s;
    &:focus {
-      border-color: #a855f7;
+      border-color: #497671;
-      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
+      box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.1);
    }
    &.valid {
@@ -1225,12 +1288,13 @@
  .submit-email-btn {
    padding: 14px;
-    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+    background: #497671;
    color: white;
    border: none;
-    border-radius: 8px;
+    border-radius: 13px;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
-    font-weight: 600;
+    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
@@ -1239,8 +1303,9 @@
    transition: all 0.2s;
    &:hover:not(:disabled) {
      background: #3a5f5b;
      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
+      box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
    }
    &:disabled {
--- a/src/app/pages/category/category.component.scss
+++ b/src/app/pages/category/category.component.scss
@@ -1,7 +1,8 @@
 .category-container {
  max-width: 1200px;
  margin: 0 auto;
-  padding: 20px;
+  padding: 24px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .error,
@@ -14,42 +15,54 @@
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #697777;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .error button {
  margin-top: 20px;
  padding: 10px 24px;
-  background: var(--primary-color);
+  background: #497671;
  color: white;
  border: none;
-  border-radius: 6px;
+  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  transition: all 0.2s ease;
  &:hover {
-    background: var(--primary-hover);
+    background: #3a5f5b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
  }
 }
 .items-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
+  gap: 30px;
  margin-bottom: 40px;
  width: 100%;
 }
 .item-card {
-  background: white;
+  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+
    .item-image {
      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
    }
    .item-details {
      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
    }
  }
 }
@@ -64,18 +77,27 @@
 .item-image {
  position: relative;
  width: 100%;
-  padding-top: 75%; // 4:3 aspect ratio
+  aspect-ratio: 4 / 3;
-  background: #f5f5f5;
+  border: 1px solid #d3dad9;
  border-radius: 13px 13px 0 0;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
    padding: 12px;
    transition: transform 0.3s ease;
  }
  &:hover img {
    transform: scale(1.05);
  }
 }
@@ -89,33 +111,47 @@
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 1;
 }
 .item-details {
-  padding: 16px;
+  width: 100%;
  border: 1px solid #d3dad9;
  border-top: none;
  border-radius: 0 0 13px 13px;
  padding: 12px 16px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  background: #f5f3f9;
  flex: 1;
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: 6px;
  transition: background 0.3s ease;
 }
 .item-name {
-  font-size: 1.1rem;
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 18px);
  color: #1e3c38;
  margin: 0;
-  color: #333;
+  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(2 * 1.3em);
 }
 .item-rating {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 6px;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
-  color: #333;
+  color: #697777;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  .rating-stars {
    color: #ffa502;
@@ -133,15 +169,17 @@
 .original-price {
  text-decoration: line-through;
-  color: #555;
+  color: #697777;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .discounted-price,
 .current-price {
-  font-size: 1.3rem;
+  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
-  color: var(--primary-color);
+  color: #497671;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .item-stock {
@@ -153,16 +191,16 @@
    .bar-segment {
      width: 20px;
      height: 6px;
-      background: #e0e0e0;
+      background: #d3dad9;
      border-radius: 3px;
      transition: background 0.2s;
      &.filled.high {
-        background: #2ed573;
+        background: #497671;
      }
      &.filled.medium {
-        background: #ffa502;
+        background: #a1b4b5;
      }
      &.filled.low {
@@ -175,16 +213,19 @@
 .add-to-cart-btn {
  width: 100%;
  padding: 12px;
-  background: var(--primary-color);
+  background: #497671;
  color: white;
  border: none;
-  font-size: 1rem;
+  border-radius: 0 0 13px 13px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
-  transition: background 0.2s;
+  transition: all 0.2s ease;
  margin-top: -1px;
  &:hover {
-    background: var(--primary-hover);
+    background: #3a5f5b;
  }
  &:active {
@@ -200,8 +241,8 @@
 .spinner {
  width: 40px;
  height: 40px;
-  border: 4px solid #f3f3f3;
+  border: 4px solid #d3dad9;
-  border-top: 4px solid var(--primary-color);
+  border-top: 4px solid #497671;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
@@ -213,22 +254,65 @@
 }
 .no-more {
-  color: #555;
+  color: #697777;
  padding: 40px 20px;
 }
 // Responsive
@media (max-width: 1200px) {
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
 }
@media (max-width: 992px) {
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
 }
@media (max-width: 768px) {
  .items-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .item-name {
-    font-size: 0.95rem;
+    font-size: clamp(12px, 3vw, 16px);
  }
  .discounted-price,
  .current-price {
-    font-size: 1.1rem;
+    font-size: clamp(14px, 3.5vw, 18px);
  }
  .item-details {
    padding: 10px 12px;
  }
 }
@media (max-width: 480px) {
  .category-container {
    padding: 12px;
  }
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .item-details {
    padding: 8px 10px;
  }
  .item-card:hover {
    transform: translateY(-2px);
  }
  .add-to-cart-btn {
    padding: 10px;
    font-size: 0.85rem;
  }
 }
--- a/src/app/pages/category/subcategories.component.html
+++ b/src/app/pages/category/subcategories.component.html
@@ -20,18 +20,18 @@
    <div class="categories-grid">
      @for (cat of subcategories(); track trackByCategoryId($index, cat)) {
-        <div class="category-card">
+        <a [routerLink]="['/category', cat.categoryID]" class="category-card">
-          <a [routerLink]="['/category', cat.categoryID]" class="category-link">
+          <div class="category-image">
-            <div class="category-media">
+            @if (cat.icon) {
-              @if (cat.icon) {
+              <img [src]="cat.icon" [alt]="cat.name" loading="lazy" decoding="async" />
-                <img [src]="cat.icon" [alt]="cat.name" loading="lazy" decoding="async" />
+            } @else {
-              } @else {
+              <div class="category-fallback">{{ cat.name.charAt(0) }}</div>
-                <div class="category-fallback">{{ cat.name }}</div>
+            }
-              }
+          </div>
-            </div>
+          <div class="category-info">
-            <h3>{{ cat.name }}</h3>
+            <h3 class="category-name">{{ cat.name }}</h3>
-          </a>
+          </div>
-        </div>
+        </a>
      }
    </div>
  }
--- a/src/app/pages/category/subcategories.component.scss
+++ b/src/app/pages/category/subcategories.component.scss
@@ -1,9 +1,9 @@
 .subcategories-container {
-  max-width: 1100px;
+  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
-  // Loading состояние
+  // Loading state
  .loading {
    display: flex;
    flex-direction: column;
@@ -15,20 +15,21 @@
    .spinner {
      width: 48px;
      height: 48px;
-      border: 4px solid #f3f4f6;
+      border: 4px solid #d3dad9;
-      border-top-color: #3b82f6;
+      border-top-color: #497671;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    p {
-      color: #6b7280;
+      color: #697777;
      font-size: 1rem;
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
    }
  }
-  // Error состояние
+  // Error state
  .error {
    display: flex;
    flex-direction: column;
@@ -41,25 +42,27 @@
    p {
      color: #dc2626;
      font-size: 1rem;
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      text-align: center;
      margin: 0;
    }
    button {
      padding: 10px 24px;
-      background: #3b82f6;
+      background: #497671;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      cursor: pointer;
      transition: all 0.2s ease;
      &:hover {
-        background: #2563eb;
+        background: #3a5f5b;
        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
      }
      &:active {
@@ -69,144 +72,134 @@
  }
  .sub-header {
-    margin-bottom: 24px;
+    margin-bottom: 28px;
    position: relative;
    padding-bottom: 12px;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      border-radius: 2px;
    }
    h2 {
-      font-size: 1.75rem;
+      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      color: #1f2937;
+      font-size: 2rem;
      color: #1e3c38;
      margin: 0;
-      font-weight: 600;
+      font-weight: 700;
      letter-spacing: -0.02em;
    }
  }
  .categories-grid {
    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
+    gap: 30px;
    width: 100%;
  }
  .category-card {
-    background: white;
+    width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
-    overflow: hidden;
+    text-decoration: none;
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease backwards;
    cursor: pointer;
    // Анимация появления с задержкой для каждой карточки
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.05}s;
      }
    }
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
-    .category-link {
+      .category-image {
-      display: flex;
+        box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
      flex-direction: column;
      flex: 1;
      text-decoration: none;
      color: inherit;
      position: relative;
      min-height: 200px;
      .category-media {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: linear-gradient(135deg, #f6f7fb 0%, #e9ecf5 100%);
        transition: transform 0.3s ease;
      }
-      &:hover .category-media {
+      .category-info {
-        transform: scale(1.05);
+        box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
      }
      .category-media img { 
        width: 100%; 
        height: 100%; 
        object-fit: contain;
        background: white;
        transition: opacity 0.3s ease;
      }
      .category-fallback { 
        text-align: center; 
        font-weight: 600;
        font-size: 1.1rem;
        padding: 20px;
        color: #6b7280;
      }
      h3 { 
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        margin: 0;
        font-size: 0.95rem;
        color: white;
        padding: 12px 14px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 70%, transparent);
        z-index: 1;
        font-weight: 500;
        transition: all 0.3s ease;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      }
      &:hover h3 {
        padding: 16px 14px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 70%, transparent);
      }
    }
  }
-  // Keyframes для анимаций
+  .category-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid #d3dad9;
    border-radius: 13px 13px 0 0;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    &:hover img {
      transform: scale(1.05);
    }
  }
  .category-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 700;
    color: #497671;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  }
  .category-info {
    width: 100%;
    border: 1px solid #d3dad9;
    border-top: none;
    border-radius: 0 0 13px 13px;
    padding: 12px 16px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    background: #f5f3f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    transition: background 0.3s ease;
  }
  .category-name {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.4vw, 18px);
    color: #1e3c38;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(2 * 1.3em);
  }
  // Keyframes
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
-  @keyframes fadeInUp {
+  // Responsive
-    from {
+  @media (max-width: 1200px) {
-      opacity: 0;
+    padding: 24px;
-      transform: translateY(20px);
+
-    }
+    .categories-grid {
-    to {
+      grid-template-columns: repeat(3, 1fr);
-      opacity: 1;
+      gap: 24px;
-      transform: translateY(0);
+    }
  }
  @media (max-width: 992px) {
    .categories-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }
  // Мобильная версия
  @media (max-width: 768px) {
    padding: 16px;
@@ -220,24 +213,14 @@
    .categories-grid {
      grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
+      gap: 16px;
    }
-    .category-card {
+    .category-info {
-      border-radius: 10px;
+      padding: 10px 12px;
      .category-link {
        min-height: 140px;
        h3 {
          font-size: 0.85rem;
          padding: 10px 8px;
        }
      }
    }
  }
  // Очень маленькие экраны
  @media (max-width: 480px) {
    padding: 12px;
@@ -250,52 +233,16 @@
    }
    .categories-grid {
-      gap: 10px;
+      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
-    .category-card {
+    .category-info {
-      .category-link {
+      padding: 8px 10px;
        min-height: 120px;
        h3 {
          font-size: 0.8rem;
          padding: 8px 6px;
        }
        .category-fallback {
          font-size: 0.95rem;
          padding: 12px;
        }
      }
    }
  }
  // Большие экраны
  @media (min-width: 1200px) {
    padding: 32px;
    .sub-header {
      margin-bottom: 28px;
      h2 {
        font-size: 2rem;
      }
    }
-    .categories-grid {
+    .category-card:hover {
-      gap: 24px;
+      transform: translateY(-2px);
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .category-card {
      .category-link {
        min-height: 220px;
        h3 {
          font-size: 1rem;
          padding: 14px 16px;
        }
      }
    }
  }
 }
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -72,55 +72,78 @@
    }
  </div>
 } @else {
-  <!-- DEXAR VERSION - Original -->
+  <!-- DEXAR VERSION - Redesigned 2026 -->
-  <div class="home-container">
+  <div class="dexar-home">
-    <header class="hero hero-compact">
+    <!-- Hero Section with Full Width Image -->
-      <h1>{{ brandName }}</h1>
+    <section class="dexar-hero">
-      <p>Ваш маркетплейс товаров и услуг</p>
+      <div class="dexar-hero-overlay">
-    </header>
+        <div class="dexar-hero-content">
          <h1 class="dexar-hero-title">Здесь ты найдёшь всё</h1>
          <p class="dexar-hero-subtitle">Тысячи товаров в одном месте</p>
          <p class="dexar-hero-tagline">просто и удобно</p>
          <div class="dexar-hero-actions">
            <a (click)="scrollToCatalog()" class="dexar-btn-primary">
              Перейти в каталог
            </a>
            <button (click)="navigateToSearch()" class="dexar-btn-secondary">
              Найти товар
              <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L9 8L1 15" stroke="#1E3C38" stroke-width="2"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
    <!-- Items Carousel -->
    <app-items-carousel />
    @if (loading()) {
-      <div class="loading">
+      <div class="dexar-loading">
-        <div class="spinner"></div>
+        <div class="dexar-spinner"></div>
        <p>Загрузка категорий...</p>
      </div>
    }
    @if (error()) {
-      <div class="error">
+      <div class="dexar-error">
        <p>{{ error() }}</p>
-        <button (click)="loadCategories()">Попробовать снова</button>
+        <button (click)="loadCategories()" class="dexar-retry-btn">Попробовать снова</button>
      </div>
    }
    @if (!loading() && !error()) {
-      <section class="categories">
+      <section class="dexar-categories" id="catalog">
-        <h2>Категории</h2>
+        <h2 class="dexar-categories-title">Каталог товаров</h2>
        @if (getTopLevelCategories().length === 0) {
-          <div class="empty-categories">
+          <div class="dexar-empty-categories">
-            <div class="empty-icon">📦</div>
+            <div class="dexar-empty-icon">📦</div>
            <h3>Категории пока отсутствуют</h3>
            <p>Скоро здесь появятся категории товаров</p>
          </div>
        } @else {
-          <div class="categories-grid">
+          <div class="dexar-categories-grid">
            @for (category of getTopLevelCategories(); track category.categoryID) {
-                <div class="category-card">
+              <a [routerLink]="['/category', category.categoryID]" 
-                  <a [routerLink]="['/category', category.categoryID]" class="category-link">
+                 class="dexar-category-card" 
-                    <div class="category-media">
+                 [class.dexar-category-card--wide]="isWideCategory(category.categoryID)">
-                      @if (category.icon) {
+                <div class="dexar-category-image">
-                        <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
+                  @if (isWideCategory(category.categoryID) && category.wideBanner) {
-                      } @else {
+                    <img [src]="category.wideBanner" [alt]="category.name" loading="lazy" decoding="async" />
-                        <div class="category-fallback">{{ category.name }}</div>
+                  } @else if (category.icon) {
-                      }
+                    <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
-                    </div>
+                  } @else {
-                    <h3>{{ category.name }}</h3>
+                    <div class="dexar-category-fallback">{{ category.name.charAt(0) }}</div>
-                  </a>
+                  }
                </div>
-              }
+                <div class="dexar-category-info">
                  <h3 class="dexar-category-name">{{ category.name }}</h3>
                  <p class="dexar-category-count">{{ getItemCount(category.categoryID) }} товаров</p>
                </div>
              </a>
            }
          </div>
        }
      </section>
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -254,7 +254,15 @@
    height: 100%;
    object-fit: contain;
    background: white;
-    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 15px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    border-radius: 8px;
  }
  &:hover .category-media img {
    transform: scale(1.05);
    filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18)) saturate(1.1);
  }
  .category-fallback {
@@ -693,3 +701,540 @@
    transform: translateY(-4px);
  }
 }
 // ========== DEXAR REDESIGN 2026 STYLES ==========
 .dexar-home {
  width: 100%;
  overflow-x: hidden;
 }
 // Hero Section
 .dexar-hero {
  position: relative;
  width: 100%;
  height: 600px;
  background-image: url('/assets/images/hero_background_desktop.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  // Mobile hero image
  @media (max-width: 768px) {
    background-image: url('/assets/images/hero_background_mobile.webp');
  }
 }
 .dexar-hero-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  display: flex;
  align-items: center;
  padding: 0 56px;
 }
 .dexar-hero-content {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeInUp 0.8s ease-out;
 }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .dexar-hero-title {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 42px;
  color: #1e3c38;
  line-height: 1.2;
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.1s both;
 }
 .dexar-hero-subtitle {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #1e3c38;
  line-height: 1.3;
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.2s both;
 }
 .dexar-hero-tagline {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #1e3c38;
  line-height: 1.3;
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.3s both;
 }
 .dexar-hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
 }
 .dexar-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 48px;
  background: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
  border: 1px solid #d3dad9;
  border-radius: 13px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 1.08px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(73, 118, 113, 0.4);
  }
  &:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(73, 118, 113, 0.3);
  }
 }
 .dexar-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 220px;
  height: 48px;
  background: #f5f5f5;
  border: 1px solid #d3dad9;
  border-radius: 13px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #1e3c38;
  letter-spacing: 1.08px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  svg {
    width: 11px;
    height: 16px;
    transition: transform 0.3s ease;
  }
  &:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    svg {
      transform: translateX(3px);
    }
  }
  &:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
 }
 // Loading & Error States
 .dexar-loading,
 .dexar-error {
  text-align: center;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
 }
 .dexar-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #497671;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
 }
 .dexar-error {
  button {
    margin-top: 20px;
    padding: 12px 28px;
    background: #497671;
    color: white;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    &:hover {
      background: #3d635f;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
    }
  }
 }
 // Categories Section
 .dexar-categories {
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 56px;
 }
 .dexar-categories-title {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 40px;
  color: #1e3c38;
 }
 .dexar-empty-categories {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  .dexar-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
  }
  h3 {
    font-size: 1.8rem;
    color: #1e3c38;
    margin: 0 0 12px 0;
    font-weight: 600;
  }
  p {
    color: #667a77;
    font-size: 1.1rem;
    margin: 0;
  }
 }
 .dexar-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  animation: fadeIn 0.6s ease-in 0.3s both;
  width: 100%;
 }
 .dexar-category-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    transform: translateY(-4px);
    .dexar-category-image {
      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
    }
    .dexar-category-info {
      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
    }
  }
 }
 .dexar-category-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #d3dad9;
  border-radius: 13px 13px 0 0;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  &:hover img {
    transform: scale(1.05);
  }
 }
 .dexar-category-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 700;
  color: #497671;
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
 }
 .dexar-category-info {
  width: 100%;
  border: 1px solid #d3dad9;
  border-top: none;
  border-radius: 0 0 13px 13px;
  padding: 12px 16px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  background: #f5f3f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  transition: background 0.3s ease;
 }
 .dexar-category-name {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 18px);
  color: #1e3c38;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(2 * 1.3em);
 }
 .dexar-category-count {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  color: #697777;
  margin: 0;
  line-height: 1.2;
 }
 // Wide category card (spans 2 columns)
 .dexar-category-card--wide {
  grid-column: span 2;
  .dexar-category-image {
    aspect-ratio: 8 / 3;
    img {
      object-fit: cover;
    }
  }
 }
 // Responsive Design
@media (max-width: 1200px) {
  .dexar-hero {
    height: 380px;
  }
  .dexar-hero-overlay {
    padding: 0 40px;
  }
  .dexar-hero-title {
    font-size: 38px;
  }
  .dexar-hero-subtitle,
  .dexar-hero-tagline {
    font-size: 22px;
  }
  .dexar-categories {
    padding: 0 40px;
  }
  .dexar-categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
 }
@media (max-width: 992px) {
  .dexar-hero {
    height: 340px;
  }
  .dexar-hero-overlay {
    padding: 0 32px;
  }
  .dexar-hero-title {
    font-size: 34px;
  }
  .dexar-hero-subtitle,
  .dexar-hero-tagline {
    font-size: 20px;
  }
  .dexar-btn-primary {
    width: 240px;
    height: 44px;
    font-size: 18px;
  }
  .dexar-btn-secondary {
    width: 200px;
    height: 44px;
    font-size: 18px;
  }
  .dexar-categories {
    padding: 0 32px;
  }
  .dexar-categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
 }
@media (max-width: 768px) {
  .dexar-hero {
    height: 320px;
    background-position: right center;
  }
  .dexar-hero-overlay {
    padding: 0 20px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.85) 100%
    );
  }
  .dexar-hero-title {
    font-size: 28px;
  }
  .dexar-hero-subtitle,
  .dexar-hero-tagline {
    font-size: 17px;
  }
  .dexar-hero-actions {
    flex-direction: row;
    gap: 10px;
    width: 100%;
  }
  .dexar-btn-primary,
  .dexar-btn-secondary {
    flex: 1;
    min-width: 0;
    max-width: 180px;
    height: 40px;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .dexar-categories {
    margin: 40px auto;
    padding: 0 20px;
  }
  .dexar-categories-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  .dexar-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .dexar-category-info {
    padding: 10px 12px;
  }
 }
@media (max-width: 480px) {
  .dexar-hero {
    height: 280px;
  }
  .dexar-hero-title {
    font-size: 24px;
  }
  .dexar-hero-subtitle,
  .dexar-hero-tagline {
    font-size: 15px;
  }
  .dexar-hero-actions {
    gap: 10px;
  }
  .dexar-btn-primary,
  .dexar-btn-secondary {
    height: 38px;
    font-size: 13px;
    max-width: 160px;
  }
  .dexar-categories {
    padding: 0 16px;
  }
  .dexar-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .dexar-category-info {
    padding: 8px 10px;
  }
  .dexar-category-card:hover {
    transform: translateY(-2px);
  }
 }
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { ApiService } from '../../services';
 import { Category } from '../../models';
 import { environment } from '../../../environments/environment';
@@ -18,6 +19,8 @@ export class HomeComponent implements OnInit {
  brandName = environment.brandFullName;
  isnovo = environment.theme === 'novo';
  categories = signal<Category[]>([]);
  itemCounts = signal<Map<number, number>>(new Map());
  wideCategories = signal<Set<number>>(new Set());
  loading = signal(true);
  error = signal<string | null>(null);
@@ -40,7 +43,7 @@ export class HomeComponent implements OnInit {
    return cache;
  });
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: ApiService, private router: Router) {}
  ngOnInit(): void {
    this.loadCategories();
@@ -52,6 +55,8 @@ export class HomeComponent implements OnInit {
      next: (categories) => {
        this.categories.set(categories);
        this.loading.set(false);
        this.loadItemCounts();
        this.detectWideImages(categories);
      },
      error: (err) => {
        this.error.set('Failed to load categories');
@@ -61,6 +66,31 @@ export class HomeComponent implements OnInit {
    });
  }
  private loadItemCounts(): void {
    const topLevel = this.topLevelCategories();
    if (topLevel.length === 0) return;
    const requests: Record<string, ReturnType<ApiService['getCategoryItems']>> = {};
    topLevel.forEach(cat => {
      requests[cat.categoryID.toString()] = this.apiService.getCategoryItems(cat.categoryID, 1000);
    });
    forkJoin(requests).subscribe({
      next: (results) => {
        const counts = new Map<number, number>();
        Object.entries(results).forEach(([id, items]) => {
          counts.set(Number(id), items.length);
        });
        this.itemCounts.set(counts);
      },
      error: (err) => console.error('Error loading item counts:', err)
    });
  }
  getItemCount(categoryID: number): number {
    return this.itemCounts().get(categoryID) || 0;
  }
  getTopLevelCategories(): Category[] {
    return this.topLevelCategories();
  }
@@ -68,4 +98,56 @@ export class HomeComponent implements OnInit {
  getSubCategories(parentID: number): Category[] {
    return this.subcategoriesCache().get(parentID) || [];
  }
  isWideCategory(categoryID: number): boolean {
    return this.wideCategories().has(categoryID);
  }
  private detectWideImages(categories: Category[]): void {
    const topLevel = categories.filter(c => c.parentID === 0);
    topLevel.forEach(cat => {
      const src = cat.wideBanner || null;
      if (!src) return;
      const img = new Image();
      img.onload = () => {
        const ratio = img.naturalWidth / img.naturalHeight;
        if (ratio > 2) {
          this.wideCategories.update(set => {
            const next = new Set(set);
            next.add(cat.categoryID);
            return next;
          });
        }
      };
      img.src = src;
    });
  }
  navigateToSearch(): void {
    this.router.navigate(['/search']);
  }
  scrollToCatalog(): void {
    const target = document.getElementById('catalog');
    if (!target) return;
    const targetY = target.getBoundingClientRect().top + window.scrollY;
    const startY = window.scrollY;
    const distance = targetY - startY;
    const duration = 1200;
    let start: number | null = null;
    const easeInOutCubic = (t: number) =>
      t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    const step = (timestamp: number) => {
      if (!start) start = timestamp;
      const elapsed = timestamp - start;
      const progress = Math.min(elapsed / duration, 1);
      window.scrollTo(0, startY + distance * easeInOutCubic(progress));
      if (progress < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }
 }
--- a/src/app/pages/item-detail/item-detail.component.html
+++ b/src/app/pages/item-detail/item-detail.component.html
@@ -192,201 +192,240 @@
    }
  </div>
 } @else {
-<!-- DEXAR VERSION - Original -->
+<!-- DEXAR VERSION - Redesigned 2026 -->
-<div class="item-detail-container">
+<div class="dx-item-container">
  @if (loading()) {
-    <div class="loading">
+    <div class="dx-loading">
-      <div class="spinner"></div>
+      <div class="dx-spinner"></div>
      <p>Загрузка товара...</p>
    </div>
  }
  @if (error()) {
-    <div class="error">
+    <div class="dx-error">
      <p>{{ error() }}</p>
-      <a routerLink="/" class="back-link">Вернуться на главную</a>
+      <a routerLink="/" class="dx-back-link">Вернуться на главную</a>
    </div>
  }
  @if (item() && !loading()) {
-    <div class="item-content">
+    <div class="dx-item-content">
-      <div class="item-gallery">
+      <!-- Gallery: thumbnails left + main photo -->
      <div class="dx-gallery">
        @if (item()?.photos && item()!.photos!.length > 0) {
-          <div class="main-photo">
+          <div class="dx-thumbnails">
            @if (item()!.photos![selectedPhotoIndex()]?.video) {
              <video [src]="item()!.photos![selectedPhotoIndex()].url" controls></video>
            } @else {
              <img [src]="item()!.photos![selectedPhotoIndex()].url" [alt]="item()!.name" fetchpriority="high" decoding="async" width="600" height="600" />
            }
          </div>
          <div class="photo-thumbnails">
            @for (photo of item()!.photos!; track $index) {
              <div 
-                class="thumbnail" 
+                class="dx-thumb" 
                [class.active]="selectedPhotoIndex() === $index"
                (click)="selectPhoto($index)">
                @if (photo.video) {
-                  <div class="video-indicator">▶</div>
+                  <div class="dx-video-badge">▶</div>
                }
-                <img [src]="photo.url" [alt]="'Photo ' + ($index + 1)" loading="lazy" decoding="async" />
+                <img [src]="photo.url" [alt]="'Фото ' + ($index + 1)" loading="lazy" decoding="async" />
              </div>
            }
          </div>
        } @else {
          <div class="main-photo">
            <div class="no-image">📦 Нет изображения</div>
          </div>
        }
-      </div>
+        <div class="dx-main-photo">
-
+          @if (item()?.photos && item()!.photos!.length > 0) {
-      <div class="item-info">
+            @if (item()!.photos![selectedPhotoIndex()]?.video) {
-        <h1>{{ item()!.name }}</h1>
+              <video [src]="item()!.photos![selectedPhotoIndex()].url" controls></video>
-        
+            } @else {
-        <div class="rating-section">
+              <img [src]="item()!.photos![selectedPhotoIndex()].url" [alt]="item()!.name" fetchpriority="high" decoding="async" />
-          <span class="rating">{{ getRatingStars(item()!.rating) }} {{ item()!.rating }}</span>
+            }
          <span class="reviews-count">({{ item()!.callbacks?.length || 0 }} отзывов)</span>
        </div>
        <div class="price-section">
          @if (item()!.discount > 0) {
            <div class="discount-info">
              <span class="original-price">{{ item()!.price }} {{ item()!.currency }}</span>
              <span class="discount-badge">-{{ item()!.discount }}%</span>
            </div>
            <div class="current-price">{{ getDiscountedPrice() | number:'1.2-2' }} {{ item()!.currency }}</div>
          } @else {
-            <div class="current-price">{{ item()!.price }} {{ item()!.currency }}</div>
+            <div class="dx-no-image">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#a1b4b5" stroke-width="1.5">
                <rect x="3" y="3" width="18" height="18" rx="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <path d="M21 15l-5-5L5 21"></path>
              </svg>
              <span>Нет изображения</span>
            </div>
          }
        </div>
      </div>
-        <div class="stock-info">
+      <!-- Item Info -->
-          <div class="stock-bar">
+      <div class="dx-info">
-            <span class="bar-segment" [class.filled]="item()!.remainings === 'high' || item()!.remainings === 'medium' || item()!.remainings === 'low'" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'" [class.low]="item()!.remainings === 'low'"></span>
+        <h1 class="dx-title">{{ item()!.name }}</h1>
-            <span class="bar-segment" [class.filled]="item()!.remainings === 'high' || item()!.remainings === 'medium'" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'"></span>
+        
-            <span class="bar-segment" [class.filled]="item()!.remainings === 'high'" [class.high]="item()!.remainings === 'high'"></span>
+        <div class="dx-rating">
          <div class="dx-stars">
            @for (star of [1, 2, 3, 4, 5]; track star) {
              <svg width="18" height="18" viewBox="0 0 24 24" [attr.fill]="star <= item()!.rating ? '#497671' : 'none'" [attr.stroke]="star <= item()!.rating ? '#497671' : '#a1b4b5'" stroke-width="2">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
              </svg>
            }
          </div>
          <span class="dx-rating-value">{{ item()!.rating }}</span>
          <span class="dx-rating-count">({{ item()!.callbacks?.length || 0 }} отзывов)</span>
        </div>
        <div class="dx-price-block">
          @if (item()!.discount > 0) {
            <div class="dx-price-row">
              <span class="dx-old-price">{{ item()!.price }} {{ item()!.currency }}</span>
              <span class="dx-discount-tag">-{{ item()!.discount }}%</span>
            </div>
          }
          <div class="dx-current-price">
            {{ item()!.discount > 0 ? (getDiscountedPrice() | number:'1.2-2') : item()!.price }} {{ item()!.currency }}
          </div>
        </div>
-        <button class="add-to-cart-btn" (click)="addToCart()">
+        <div class="dx-stock">
          <span class="dx-stock-label">Наличие:</span>
          <span class="dx-stock-status" 
                [class.high]="item()!.remainings === 'high'" 
                [class.medium]="item()!.remainings === 'medium'" 
                [class.low]="item()!.remainings === 'low'">
            <span class="dx-stock-dot"></span>
            {{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Заканчивается' : 'Последние штуки' }}
          </span>
        </div>
        <button class="dx-add-cart" (click)="addToCart()">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg>
          Добавить в корзину
        </button>
-        <div class="description-section">
+        <div class="dx-description">
          <h2>Описание</h2>
-          <div class="description" [innerHTML]="getSafeHtml(item()!.description)"></div>
+          <div class="dx-description-text" [innerHTML]="getSafeHtml(item()!.description)"></div>
        </div>
      </div>
    </div>
-    <div class="reviews-section">
+    <!-- Reviews Section -->
    <div class="dx-reviews-section">
      <h2>Отзывы ({{ item()!.callbacks?.length || 0 }})</h2>
-      <!-- Review Submission Form -->
+      <div class="dx-review-form">
      <div class="review-form">
        <h3>Оставить отзыв</h3>
-        <div class="rating-input">
+        <div class="dx-rating-input">
          <label>Оценка:</label>
-          <div class="star-selector">
+          <div class="dx-star-selector">
            @for (star of [1, 2, 3, 4, 5]; track star) {
              <span 
-                class="star" 
+                class="dx-star-pick" 
                [class.selected]="newReview.rating >= star"
                (click)="setRating(star)">
-                ⭐
+                ★
              </span>
            }
          </div>
        </div>
        <textarea 
          [(ngModel)]="newReview.comment" 
-          placeholder="Напишите свой отзыв..."
+          placeholder="Поделитесь впечатлениями о товаре..."
-          rows="4">
+          rows="4"
          class="dx-textarea">
        </textarea>
-        <div class="form-actions">
+        <div class="dx-form-actions">
-          <label class="anonymous-toggle">
+          <label class="dx-anon-toggle">
            <input type="checkbox" [(ngModel)]="newReview.anonymous">
-            Анонимно
+            <span>Анонимно</span>
          </label>
          @if (!newReview.anonymous && getUserDisplayName()) {
-            <span class="username-preview">Опубликуется как: {{ getUserDisplayName() }}</span>
+            <span class="dx-user-preview">{{ getUserDisplayName() }}</span>
          }
          <button 
-            class="submit-review-btn" 
+            class="dx-submit-btn" 
            (click)="submitReview()"
            [disabled]="!newReview.rating || !newReview.comment.trim() || reviewSubmitStatus() === 'loading'"
            [class.submitting]="reviewSubmitStatus() === 'loading'">
            @if (reviewSubmitStatus() === 'loading') {
-              <span class="spinner-small"></span>
+              <span class="dx-spinner-sm"></span>
              Отправка...
            } @else {
-              Отправить отзыв
+              Отправить
            }
          </button>
        </div>
        @if (reviewSubmitStatus() === 'success') {
-          <div class="status-message success">
+          <div class="dx-status success">
-            <span class="icon">✓</span>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
            Спасибо за ваш отзыв!
          </div>
        }
        @if (reviewSubmitStatus() === 'error') {
-          <div class="status-message error">
+          <div class="dx-status error">
-            <span class="icon">✗</span>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
            Ошибка отправки. Попробуйте позже.
          </div>
        }
      </div>
-      <div class="reviews-list">
+      <div class="dx-reviews-list">
        @if (item()?.callbacks && item()!.callbacks!.length > 0) {
          @for (callback of item()!.callbacks; track $index) {
-            <div class="review-card">
+            <div class="dx-review-card">
-              <div class="review-header">
+              <div class="dx-review-header">
-                <span class="review-author">{{ callback.userID || 'Аноним' }}</span>
+                <div class="dx-reviewer">
                  <span class="dx-reviewer-name">{{ callback.userID || 'Аноним' }}</span>
                  @if (callback.timestamp) {
                    <span class="dx-review-date">{{ formatDate(callback.timestamp) }}</span>
                  }
                </div>
                @if (callback.rating) {
-                  <div class="review-rating">{{ getRatingStars(callback.rating) }}</div>
+                  <div class="dx-review-stars">
-                }
+                    @for (star of [1, 2, 3, 4, 5]; track star) {
-                @if (callback.timestamp) {
+                      <svg width="14" height="14" viewBox="0 0 24 24" [attr.fill]="star <= callback.rating ? '#497671' : 'none'" [attr.stroke]="star <= callback.rating ? '#497671' : '#d3dad9'" stroke-width="2">
-                  <span class="review-date">{{ formatDate(callback.timestamp) }}</span>
+                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                      </svg>
                    }
                  </div>
                }
              </div>
              @if (callback.content) {
-                <p class="review-text">{{ callback.content }}</p>
+                <p class="dx-review-text">{{ callback.content }}</p>
              }
            </div>
          }
        } @else {
-          <p class="no-reviews">Пока нет отзывов</p>
+          <p class="dx-no-reviews">Пока нет отзывов. Станьте первым!</p>
        }
      </div>
    </div>
-    <div class="questions-section">
+    <!-- Q&A Section -->
-      <h2>Вопросы и ответы ({{ item()!.questions?.length || 0 }})</h2>
+    @if (item()!.questions && item()!.questions!.length > 0) {
-      <div class="questions-list">
+      <div class="dx-qa-section">
-        @if (item()?.questions && item()!.questions!.length > 0) {
+        <h2>Вопросы и ответы ({{ item()!.questions!.length }})</h2>
-          @for (question of item()!.questions; track $index) {
+        <div class="dx-qa-list">
-            <div class="question-card">
+          @for (question of item()!.questions!; track $index) {
-              <div class="question-text">
+            <div class="dx-qa-card">
-                <strong>В:</strong> {{ question.question }}
+              <div class="dx-question">
                <span class="dx-qa-label q">В</span>
                <span>{{ question.question }}</span>
              </div>
-              <div class="answer-text">
+              <div class="dx-answer">
-                <strong>О:</strong> {{ question.answer }}
+                <span class="dx-qa-label a">О</span>
                <span>{{ question.answer }}</span>
              </div>
-              <div class="question-votes">
+              <div class="dx-qa-votes">
-                <span class="vote-up">👍 {{ question.upvotes }}</span>
+                <button class="dx-vote up">
-                <span class="vote-down">👎 {{ question.downvotes }}</span>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                  {{ question.upvotes }}
                </button>
                <button class="dx-vote down">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z"/><path d="M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/></svg>
                  {{ question.downvotes }}
                </button>
              </div>
            </div>
          }
-        } @else {
+        </div>
          <p class="no-questions">Пока нет вопросов</p>
        }
      </div>
-    </div>
+    }
  }
 </div>
 }
--- a/src/app/pages/item-detail/item-detail.component.scss
+++ b/src/app/pages/item-detail/item-detail.component.scss
--- a/src/app/pages/search/search.component.html
+++ b/src/app/pages/search/search.component.html
@@ -10,7 +10,12 @@
        class="search-input"
        autofocus
      />
-      <span class="search-icon">🔍</span>
+      <span class="search-icon">
        <svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#697777" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#697777" />
        </svg>
      </span>
    </div>
  </div>
@@ -36,7 +41,12 @@
  @if (!loading() && searchQuery && items().length === 0 && !error()) {
    <div class="no-results">
-      <div class="no-results-icon">🔍</div>
+      <div class="no-results-icon">
        <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZZ2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#a1b4b5" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#a1b4b5" />
        </svg>
      </div>
      <h2>Ничего не найдено</h2>
      <p>По запросу "{{ searchQuery }}" товары не найдены</p>
      <p class="hint">Попробуйте изменить запрос или используйте другие ключевые слова</p>
--- a/src/app/pages/search/search.component.scss
+++ b/src/app/pages/search/search.component.scss
@@ -2,6 +2,7 @@
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 .search-header {
@@ -10,7 +11,7 @@
  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
-    color: #333;
+    color: #1e3c38;
    text-align: center;
  }
 }
@@ -24,13 +25,15 @@
    width: 100%;
    padding: 16px 50px 16px 20px;
    font-size: 1.1rem;
-    border: 2px solid #ddd;
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    border-radius: 50px;
+    border: 2px solid #d3dad9;
    border-radius: 13px;
    outline: none;
    transition: border-color 0.2s;
    &:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.1);
    }
  }
@@ -39,7 +42,8 @@
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
-    font-size: 1.5rem;
+    display: flex;
    align-items: center;
    pointer-events: none;
  }
 }
@@ -47,7 +51,7 @@
 .results-count {
  text-align: center;
  margin-bottom: 24px;
-  color: #333;
+  color: #1e3c38;
  font-size: 1.1rem;
 }
@@ -56,30 +60,31 @@
 .loading-initial {
  text-align: center;
  padding: 60px 20px;
-  color: #555;
+  color: #697777;
 }
 .no-results {
  .no-results-icon {
    font-size: 4rem;
    margin-bottom: 20px;
-    opacity: 0.3;
+    opacity: 0.5;
    display: flex;
    justify-content: center;
  }
  h2 {
    font-size: 1.5rem;
-    color: #333;
+    color: #1e3c38;
    margin-bottom: 12px;
  }
  p {
    margin: 8px 0;
-    color: #666;
+    color: #697777;
  }
  .hint {
    font-size: 0.9rem;
-    color: #999;
+    color: #a1b4b5;
    margin-top: 16px;
  }
 }
@@ -94,9 +99,10 @@
    background: var(--primary-color);
    color: white;
    border: none;
-    border-radius: 6px;
+    border-radius: 13px;
    cursor: pointer;
    font-size: 1rem;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    &:hover {
      background: var(--primary-hover);
@@ -113,8 +119,9 @@
 .item-card {
  background: white;
-  border-radius: 12px;
+  border-radius: 13px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #d3dad9;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
@@ -122,7 +129,7 @@
  &:hover {
    transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
 }
@@ -140,6 +147,7 @@
  padding-top: 75%;
  background: #f5f5f5;
  overflow: hidden;
  border-radius: 13px;
  img {
    position: absolute;
@@ -149,6 +157,14 @@
    height: 100%;
    object-fit: contain;
    background: white;
    padding: 12px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
  }
  &:hover img {
    transform: scale(1.06) translateY(-2px);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)) brightness(1.03);
  }
 }
@@ -156,7 +172,7 @@
  position: absolute;
  top: 12px;
  right: 12px;
-  background: #ff4757;
+  background: #ef4444;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
@@ -175,7 +191,7 @@
 .item-name {
  font-size: 1.1rem;
  margin: 0;
-  color: #333;
+  color: #1e3c38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
@@ -188,10 +204,10 @@
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
-  color: #333;
+  color: #1e3c38;
  .rating-stars {
-    color: #ffa502;
+    color: #497671;
    font-weight: 600;
  }
 }
@@ -206,7 +222,7 @@
 .original-price {
  text-decoration: line-through;
-  color: #555;
+  color: #697777;
  font-size: 0.9rem;
 }
@@ -226,7 +242,7 @@
    .bar-segment {
      width: 20px;
      height: 6px;
-      background: #e0e0e0;
+      background: #d3dad9;
      border-radius: 3px;
      transition: background 0.2s;
@@ -239,7 +255,7 @@
      }
      &.filled.low {
-        background: #ff4757;
+        background: #ef4444;
      }
    }
  }
@@ -251,8 +267,10 @@
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0 0 13px 13px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: background 0.2s;
@@ -286,7 +304,7 @@
 }
 .no-more {
-  color: #555;
+  color: #697777;
  padding: 40px 20px;
  text-align: center;
 }
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,9 @@
 /* PrimeNG and PrimeIcons */
@import 'primeicons/primeicons.css';
 /* Google Fonts - DM Sans for Dexar redesign */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
 /* Font optimization */
@font-face {
  font-family: system-ui;
@@ -11,39 +14,40 @@
 /* Default CSS Variables - will be overridden by theme files */
 :root {
-  --primary-color: #667eea;
+  --primary-color: #497671;
-  --primary-hover: #5568d3;
+  --primary-hover: #3d635f;
-  --secondary-color: #764ba2;
+  --secondary-color: #a1b4b5;
-  --secondary-hover: #653a8e;
+  --secondary-hover: #8da3a4;
-  --accent-color: #f093fb;
+  --accent-color: #a7ceca;
-  --accent-hover: #e07ff0;
+  --accent-hover: #91b9b5;
-  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-primary: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
-  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --gradient-secondary: linear-gradient(135deg, #a1b4b5 0%, #677b78 100%);
-  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-hero: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
-  --text-primary: #333333;
+  --text-primary: #1e3c38;
-  --text-secondary: #666666;
+  --text-secondary: #667a77;
-  --text-light: #999999;
+  --text-light: #828e8d;
  --bg-primary: #ffffff;
-  --bg-secondary: #f6f7fb;
+  --bg-secondary: #f5f5f5;
-  --bg-tertiary: #e9ecf5;
+  --bg-tertiary: #f0f0f0;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;
-  --border-color: #e5e7eb;
+  --border-color: #d3dad9;
  --border-dark: #677b78;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-lg: 0 12px 40px rgba(102, 126, 234, 0.25);
+  --shadow-lg: 0 12px 32px rgba(73, 118, 113, 0.2);
  --radius-sm: 8px;
  --radius-md: 12px;
-  --radius-lg: 16px;
+  --radius-lg: 13px;
-  --radius-xl: 20px;
+  --radius-xl: 22px;
 }
 * {
@@ -63,8 +67,13 @@ body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
-  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
+  background: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden;
  &.dexar-menu-open {
    overflow: hidden;
  }
 }
 /* Smooth Transitions */
--- a/src/styles/themes/dexar.theme.scss
+++ b/src/styles/themes/dexar.theme.scss
@@ -1,36 +1,42 @@
-// Dexar Theme - Purple/Violet Colors
+// Dexar Theme - Redesigned 2026 - Green/Teal Colors
 :root {
-  --primary-color: #667eea;
+  --primary-color: #497671;
-  --primary-hover: #5568d3;
+  --primary-hover: #3d635f;
-  --secondary-color: #764ba2;
+  --secondary-color: #a1b4b5;
-  --secondary-hover: #653a8e;
+  --secondary-hover: #8da3a4;
-  --accent-color: #f093fb;
+  --accent-color: #a7ceca;
-  --accent-hover: #e07ff0;
+  --accent-hover: #91b9b5;
-  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-primary: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
-  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --gradient-secondary: linear-gradient(135deg, #a1b4b5 0%, #677b78 100%);
-  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-hero: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
-  --text-primary: #333333;
+  --text-primary: #1e3c38;
-  --text-secondary: #666666;
+  --text-secondary: #667a77;
-  --text-light: #999999;
+  --text-light: #828e8d;
  --bg-primary: #ffffff;
-  --bg-secondary: #f6f7fb;
+  --bg-secondary: #f5f5f5;
-  --bg-tertiary: #e9ecf5;
+  --bg-tertiary: #f0f0f0;
  --bg-header: rgba(117, 121, 124, 0.1);
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;
-  --border-color: #e5e7eb;
+  --border-color: #d3dad9;
  --border-dark: #677b78;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-lg: 0 12px 40px rgba(102, 126, 234, 0.25);
+  --shadow-lg: 0 12px 32px rgba(73, 118, 113, 0.2);
  --radius-sm: 8px;
  --radius-md: 12px;
-  --radius-lg: 16px;
+  --radius-lg: 13px;
-  --radius-xl: 20px;
+  --radius-xl: 22px;
 }
 body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
Author	SHA1	Message	Date
sdarbinyan	9154660a01	mobile is finished	2026-02-14 02:59:26 +04:00
sdarbinyan	4238d59fc6	style changes	2026-02-14 02:34:11 +04:00
sdarbinyan	751ad48489	home page	2026-02-14 01:28:08 +04:00
sdarbinyan	88ac37ebc4	changed header and hero img	2026-02-14 00:45:17 +04:00
sdarbinyan	39290ef776	style chages	2026-01-23 00:34:16 +04:00
		`@@ -0,0 +1 @@`
							<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>
		`@@ -1 +1 @@`
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#667eea;stop-opacity:1"/><stop offset="100%" style="stop-color:#764ba2;stop-opacity:1"/></linearGradient></defs><path d="m20 35-5 50q0 10 10 10h50q10 0 10-10l-5-50Z" fill="url(#a)" stroke="#4a5cd6" stroke-width="2"/><path d="M30 35q0-20 20-20t20 20" fill="none" stroke="#4a5cd6" stroke-width="3" stroke-linecap="round"/><circle cx="70" cy="25" r="4" fill="gold"/><circle cx="30" cy="70" r="3" fill="#fff" opacity=".7"/></svg>				<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>