.product-announcement {
  display: grid;
  grid-template-columns: max-content max-content 16px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  padding: 10px var(--gutter);
  background: #24221d;
  color: #f3eddf;
  font: 400 14px/1.45 Office, Arial, sans-serif;
  text-decoration: none;
}
.product-announcement strong {
  color: #e6bd5a;
  font-weight: 600;
}
.product-announcement svg {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease-out;
}
.product-announcement:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.product-announcement:hover svg { transform: translateX(3px); }
.product-announcement:focus-visible {
  outline: 2px solid #e6bd5a;
  outline-offset: -5px;
}
@media (max-width: 760px) {
  .product-announcement {
    grid-template-columns: minmax(0, 1fr) 16px;
    column-gap: 16px;
    row-gap: 2px;
    min-height: 64px;
    padding-block: 10px;
  }
  .product-announcement strong { grid-column: 1; }
  .product-announcement > span {
    grid-column: 1;
    font-size: 13px;
  }
  .product-announcement svg {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-announcement svg { transition: none; }
  .product-announcement:hover svg { transform: none; }
}