.hh-share {
  --share-dark: #0c1b2e;
  --share-accent: #8b2252;
  --share-gold: #c47832;
  --share-line: rgba(12, 27, 46, 0.12);
  --share-muted: #6b7280;
  border-top: 1px solid var(--share-line);
  padding-top: 28px;
}

.hh-share--article {
  margin-top: 40px;
}

.hh-share--card {
  border-top: 1px solid #f0f0f0;
  padding: 12px 24px 16px;
  margin-top: auto;
}

.hh-share__label {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a94a6;
}

.hh-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hh-share__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(12, 27, 46, 0.12);
  border-radius: 6px;
  background: #fff;
  color: var(--share-dark);
  font: 700 12px/1.2 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.hh-share__button:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 27, 46, 0.26);
}

.hh-share__button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hh-share__button--native {
  background: var(--share-dark);
  border-color: var(--share-dark);
  color: #fff;
}

.hh-share__button--whatsapp {
  background: #128c7e;
  border-color: #128c7e;
  color: #fff;
}

.hh-share__button--linkedin {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff;
}

.hh-share__button--facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.hh-share__button--x {
  background: #111;
  border-color: #111;
  color: #fff;
}

.hh-share__button--copy {
  color: var(--share-accent);
}

.hh-share__button--copy.is-copied {
  background: rgba(139, 34, 82, 0.08);
  border-color: rgba(139, 34, 82, 0.22);
}

.hh-share--card .hh-share__label {
  margin-bottom: 8px;
  font-size: 9px;
}

.hh-share--card .hh-share__button {
  min-height: 32px;
  width: 32px;
  padding: 0;
}

.hh-share--card .hh-share__button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.blog-preview .blog-card {
  display: flex;
  flex-direction: column;
}

.blog-grid .card > a,
.blog-preview .blog-card > a {
  height: auto;
  flex: 1;
}

@media (max-width: 600px) {
  .hh-share__button {
    flex: 1 1 calc(50% - 9px);
  }

  .hh-share--card .hh-share__button {
    flex: 0 0 32px;
  }
}