.kit.product-callout {
  max-width: var(--product-callout-width, 680px);
  margin: 8px auto 0;
  padding: 0 32px;
}

/* Native style.spacing writes every side from --s-* variables; seed the centring and inline gutters. */
.kit.product-callout.style\:spacing {
  --s-margin-inline-start: auto;
  --s-margin-inline-end: auto;
  --s-padding-inline-start: 32px;
  --s-padding-inline-end: 32px;
}

.kit .product-callout__link {
  text-decoration: none;
  color: inherit;
}

.product-callout__card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(var(--color-card-background));
  border: 1px solid rgba(var(--color-entry-line), 0.1);
  border-radius: var(--kit-radius);
  padding: 18px;
}

.product-callout__thumb {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--kit-radius-sm);
  overflow: hidden;
  background: rgba(var(--color-media-background));
}

.kit .product-callout__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-callout__body {
  flex: 1;
}

.product-callout__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-button-background));
  font-weight: 700;
  margin-bottom: 5px;
}

.product-callout__title {
  font-family: var(--kit-font-display);
  font-weight: 700;
  font-size: 19px;
}

.product-callout__meta {
  font-size: 13.5px;
  color: rgba(var(--color-light-text));
}

.product-callout__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  background: rgba(var(--color-button-background));
  color: rgba(var(--color-button-text));
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  transition:
    transform 0.28s var(--kit-ease),
    box-shadow 0.28s var(--kit-ease),
    filter 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-callout__link:hover .product-callout__button {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 8px 18px -10px rgba(var(--color-button-background), 0.5);
  }
}