/* ==========================================================================
   Icon
   1) SVG <use> (inherits color)
   2) CSS mask-image (also inherits color)
   ========================================================================== */
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -0.15em;
  color: currentColor;
}
.icon--center {
  background-position: center;
  background-size: contain;
}
.icon--16 {
  width: 16px;
  height: 16px;
}
.icon--24 {
  width: 24px;
  height: 24px;
}
/* Desktop header actions — Figma 2982:40792 (24×24); must follow base .icon 20×20 */
@media (min-width: 1180px) {
  .header__top .header-desktop__icon-link .icon,
  .header__top .header__order-empty-icons .header-desktop__icon-link .icon {
    width: 24px;
    height: 24px;
    max-width: none;
  }
}
/* Вариант для использования прямо в CSS (без <svg>) */
.icon-mask {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* Примеры “подключения” конкретных иконок из спрайта */
.icon-mask--search {
  -webkit-mask-image: url("../../assets/icons/icons-sprite.svg#icon-search");
  mask-image: url("../../assets/icons/icons-sprite.svg#icon-search");
}
.icon-mask--cart {
  -webkit-mask-image: url("../../assets/icons/icons-sprite.svg#icon-cart");
  mask-image: url("../../assets/icons/icons-sprite.svg#icon-cart");
}