/* Homepage announcement ticker: two identical lanes form one seamless loop. */
.sgc-announcement-marquee-host {
  min-width: 0;
  overflow: hidden;
}

.sgc-home-announcement {
  gap: 8px;
  padding-left: 8px;
}

.sgc-home-notice-icon {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 54, 69, .18);
  border-radius: 7px;
  background: #fff0ee;
  color: #d93645;
  font-size: 0;
  line-height: 1;
  pointer-events: none;
}

.sgc-home-notice-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sgc-announcement-marquee {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.sgc-announcement-marquee__viewport {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.sgc-announcement-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  transform: translate3d(0, 0, 0);
  animation: sgc-announcement-marquee-scroll var(--sgc-marquee-duration, 48s) linear infinite;
  will-change: transform;
}

.sgc-announcement-marquee__lane {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2rem;
  min-width: max-content;
  padding-right: 2rem;
}

.sgc-announcement-marquee__item {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: max-content;
  align-items: baseline;
  gap: .42rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sgc-home-notice-track .sgc-announcement-marquee__message {
  display: inline;
  min-width: 0;
  animation: none;
  color: #c56c5e;
}

.sgc-announcement-marquee__phone {
  color: #93483f;
  font-weight: 700;
  letter-spacing: .015em;
}

.sgc-announcement-marquee:hover .sgc-announcement-marquee__track,
.sgc-announcement-marquee:focus-within .sgc-announcement-marquee__track {
  animation-play-state: paused;
}

@keyframes sgc-announcement-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--sgc-marquee-distance, 320px)), 0, 0); }
}

@media (max-width: 360px) {
  .sgc-announcement-marquee__lane {
    gap: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sgc-announcement-marquee__track {
    animation: none;
    transform: translate3d(0, 0, 0);
  }

  .sgc-announcement-marquee__lane[data-sgc-marquee-lane="duplicate"] {
    display: none;
  }
}