@font-face {
    font-family: 'Bold';
    src: local('Avenir Next Bold'), local('Avenir-Next-Bold'),
        url('AvenirNextCyr-Bold.woff2') format('woff2'),
        url('AvenirNextCyr-Bold.woff') format('woff'),
        url('AvenirNextCyr-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
 @font-face {
    font-family: 'Light';
    src: local('Avenir Next Light'), local('Avenir-Next-Light'),
        url('AvenirNextCyr-Light.woff2') format('woff2'),
        url('AvenirNextCyr-Light.woff') format('woff'),
        url('AvenirNextCyr-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Medium';
    src: local('Avenir Next Medium'), local('Avenir-Next-Medium'),
        url('AvenirNextCyr-Medium.woff2') format('woff2'),
        url('AvenirNextCyr-Medium.woff') format('woff'),
        url('AvenirNextCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
 @font-face {
    font-family: 'Regular';
    src: local('Avenir Next Regular'), local('Avenir-Next-Regular'),
        url('AvenirNextCyr-Regular.woff2') format('woff2'),
        url('AvenirNextCyr-Regular.woff') format('woff'),
        url('AvenirNextCyr-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

html {
         font-family: 'Regular';

}
header {
  
}
section {
 
}
.logo {
    background: url(../img/logo.svg) no-repeat;
    height: 23px;
    min-width: 237px;
    display: block;
}
.callback-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 32px;
  font-size: 0.9rem;
  color: #4caf50;              
  text-decoration: none;
  position: relative;
}

.callback-link::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  -webkit-mask: url("../img/callback.svg") center / contain no-repeat;
  mask: url("../img/callback.svg") center / contain no-repeat;
  background-color: currentColor;
}

.callback-link:hover {
  color: #43a047;               /* чуть темнее на hover */
  text-decoration: underline;
}
.search-btn {
  width: 40px;                      /* ширина под иконку */
  padding: 0;
  border: none;
  background-color: transparent;    /* без фона */
  box-shadow: none;
  background-image: url("../img/search.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;       /* размер иконки */
}

.search-btn:focus,
.search-btn:active {
  outline: none;
  box-shadow: none;                 /* убрать синий инпутный outline Bootstrap */
}

.search-btn:hover {
  background-color: transparent;    /* на всякий случай, чтобы тема Bootstrap не заливала */
}
.header-search-form {
  width: 100%;
  margin: 0;
}

/* Овальный инпут */
.header-search-input {
  border-radius: 999px !important;
  border: none;
  background-color: #f5f5f5;
  padding-left: 20px;
  padding-right: 42px; /* место под иконку */
  height: 40px;
  font-size: 14px;
  box-shadow: none;
}

.header-search-input:focus {
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  outline: none;
}

/* Кнопка-иконка справа */
.header-search-btn {
  position: relative;
  margin-left: -40px;              /* заходим поверх правого края инпута */
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.header-search-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-image: url("../img/search.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header-search-btn:focus,
.header-search-btn:hover {
  background: transparent;
  box-shadow: none;
}/* общий ряд телефона + иконки */
.header-phone-row {
  gap: 16px;                        /* больше расстояние от телефона до иконок */
}

/* телефон как раньше */
.header-phone {
  display: inline-flex;
  align-items: center;              /* текст и иконка в одной линии */
  position: relative;
  padding-left: 26px;
  font-size: 22px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}

.header-phone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("../img/phone.svg") center/contain no-repeat;
}

/* иконки */
.messengers {
  display: flex;
  align-items: center;              /* выровнять по высоте с телефоном */
  gap: 8px;
}

.messenger-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.messenger-tg { background-image: url("../img/tg.svg"); }
.messenger-wa { background-image: url("../img/wa.svg"); }

.header-cart {
  gap: 6px;                 /* расстояние между иконкой, текстом и бейджем */
  text-decoration: none;
  color: #000;
}

.header-cart-text {
  white-space: nowrap;      /* не переносить "Корзина" */
}

.header-cart .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 0 6px;
}
.site-footer {
  background-color: #525252; /* подбери точный серый из макета */
  color: #fff;
  font-size: 14px;
}

.footer-links a,
.footer-bottom-link {
  color: #fff;
  text-decoration: none;
}
.footer-links a:hover,
.footer-bottom-link:hover {
  text-decoration: underline;
}

/* соцсети */
.footer-social-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.footer-social-icon.vk  { background-image: url("../img/vk-white.svg"); }
.footer-social-icon.ok  { background-image: url("../img/ok-white.svg"); }
.footer-social-icon.tg  { background-image: url("../img/tg-white.svg"); }

/* рейтинг */
.footer-rating img {
  max-width: 100%;
  height: auto;
}

/* платёжные иконки */
.footer-pay-icon {
  width: 40px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.footer-pay-icon.mir  { background-image: url("../img/mir.svg"); }
.footer-pay-icon.visa { background-image: url("../img/visa.svg"); }
.footer-pay-icon.master { background-image: url("../img/master.svg"); }

.footer-shk img {
    width: 130px;
}