/* ==========================================================================
   Фотоиконки — круглые с блестящей хромированной окантовкой
   (не применяется к сайдбару, шапке, футеру и карточкам товаров)
   ========================================================================== */

.photo-icon {
  --photo-icon-size: 172px;
  --photo-icon-ring: calc(var(--photo-icon-size) * 0.062);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--photo-icon-size);
  height: var(--photo-icon-size);
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  padding: var(--photo-icon-ring);
  background:
    radial-gradient(ellipse 120% 80% at 28% 14%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 54%),
    var(--chrome-ring-bg);
  box-shadow: var(--chrome-ring-shadow);
}

.photo-icon::before {
  content: '';
  position: absolute;
  inset: calc(var(--photo-icon-ring) - 0.5px);
  border-radius: 50%;
  border: 1.5px solid rgba(46, 58, 68, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    inset 0 2px 4px rgba(255, 255, 255, 0.28),
    inset 0 -2px 4px rgba(38, 50, 60, 0.42),
    0 0 0 0.5px rgba(28, 38, 46, 0.35);
  pointer-events: none;
  z-index: 4;
}

.photo-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--chrome-ring-specular);
  opacity: 0.92;
  pointer-events: none;
  z-index: 3;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent calc(50% - var(--photo-icon-ring) - 0.5px),
    #000 calc(50% - var(--photo-icon-ring) - 0.5px)
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent calc(50% - var(--photo-icon-ring) - 0.5px),
    #000 calc(50% - var(--photo-icon-ring) - 0.5px)
  );
}

.photo-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(42, 54, 64, 0.55);
}

.photo-icon--xs {
  --photo-icon-size: 120px;
}

.photo-icon--sm {
  --photo-icon-size: 138px;
}

.photo-icon--md {
  --photo-icon-size: 172px;
}

.photo-icon--lg {
  --photo-icon-size: 208px;
}

.photo-icon--xl {
  --photo-icon-size: 240px;
}

/* Контейнеры, где FA заменяется на фото */
.home-hero__trust-icon.photo-icon-host,
.home-why__icon.photo-icon-host,
.home-trust__icon.photo-icon-host,
.pdp-trust__icon.photo-icon-host,
.feature-icon.photo-icon-host,
.eyebrow-pill.photo-icon-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
}

.home-hero__trust-icon.photo-icon-host {
  margin-right: 0;
}

.home-hero__trust-icon.photo-icon-host .photo-icon {
  --photo-icon-size: 96px;
}

.home-trust__icon.photo-icon-host .photo-icon {
  --photo-icon-size: 192px;
}

.pdp-trust__icon.photo-icon-host .photo-icon {
  --photo-icon-size: 92px;
}

.home-why__icon.photo-icon-host .photo-icon,
.feature-icon.photo-icon-host .photo-icon {
  --photo-icon-size: 136px;
}

.eyebrow-pill.photo-icon-host {
  gap: 16px;
}

.eyebrow-pill.photo-icon-host .photo-icon {
  --photo-icon-size: 120px;
}

.home-hero__trust-item {
  gap: 6px;
}

.home-why__icon.photo-icon-host {
  margin: 0 auto 16px;
}

.feature-icon.photo-icon-host {
  margin: 0 auto 18px;
}

@media (max-width: 1200px) {
  .home-hero__trust-icon.photo-icon-host .photo-icon {
    --photo-icon-size: 82px;
  }

  .home-trust__icon.photo-icon-host .photo-icon {
    --photo-icon-size: 160px;
  }

  .pdp-trust__icon.photo-icon-host .photo-icon {
    --photo-icon-size: 78px;
  }
}

@media (max-width: 768px) {
  .home-hero__trust-icon.photo-icon-host .photo-icon {
    --photo-icon-size: 72px;
  }

  .home-trust__icon.photo-icon-host .photo-icon {
    --photo-icon-size: 144px;
  }

  .pdp-trust__icon.photo-icon-host .photo-icon {
    --photo-icon-size: 64px;
  }

  .home-why__icon.photo-icon-host .photo-icon,
  .feature-icon.photo-icon-host .photo-icon {
    --photo-icon-size: 112px;
  }

  .eyebrow-pill.photo-icon-host .photo-icon {
    --photo-icon-size: 104px;
  }
}