.article-heading-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 10px;
  margin-bottom: 1rem;
}

.article-heading-bar .cat-label { margin: 0; }

.article-heading-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.article-heading-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #ffff;
  border-radius: 9999px;
  background: #fff;
  color: #543d30;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}

.article-heading-action:hover {
  border-color: #fff;
  background: #fff;
  color: #d14d1b;
  transform: translateY(-1px);
}

.article-heading-action:active { transform: translateY(0) scale(.96); }

.article-heading-action:focus-visible {
  outline: 3px solid rgba(224, 92, 42, .28);
  outline-offset: 2px;
}

.article-heading-action svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.article-share-button { padding: 0 0px 0 0; }
.article-share-button .share-icon-success { display: none; }
.article-header-save-button .save-icon-filled { display: none; }
.article-header-save-button.saved .save-icon-outline { display: none; }
.article-header-save-button.saved .save-icon-filled { display: block; }
.article-header-save-button.saved {
  border-color: #E8E8E8;
  background: #E8E8E8;
  color: #c94718;
}

.article-share-button.copied {
  border-color: #94bd72;
  background: #e9f7de;
  color: #23410a;
}

.article-share-button.copied .share-icon-default { display: none; }
.article-share-button.copied .share-icon-success { display: block; }
.article-share-button.share-error {
  border-color: #d98678;
  background: #fff1ee;
  color: #8a2e20;
}

.article-share-button:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.related-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.related .related-heading-row h2 { margin: 0; }

.related-carousel-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.related-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #decab8;
  border-radius: 9999px;
  background: #fff;
  color: #5c4232;
  cursor: pointer;
}

.related-carousel-arrow:hover:not(:disabled) { border-color: #e05c2a; color: #d14d1b; }
.related-carousel-arrow:focus-visible { outline: 2px solid #e05c2a; outline-offset: 2px; }
.related-carousel-arrow:disabled { color: #c7b8ab; cursor: not-allowed; opacity: .55; }
.related-carousel-arrow svg { width: 1rem; height: 1rem; }

.related-carousel-viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.related-carousel-viewport::-webkit-scrollbar { display: none; }

.related-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 3.2rem;
}

.related-carousel .card {
  flex: 0 0 calc((100% - 3.2rem) / 2);
  min-width: 0;
  scroll-snap-align: start;
}

.related-carousel-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: .625rem;
  margin-top: 1.25rem;
}

.related-carousel-indicator {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #d9cfc5;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.related-carousel-indicator.is-active { width: 1.25rem; background: #e05c2a; }
.related-carousel-indicator:focus-visible { outline: 2px solid #e05c2a; outline-offset: 2px; }

@media (max-width: 1023px) {
  .related-carousel-track { gap: 2rem; }
  .related-carousel .card { flex-basis: calc((100% - 2rem) / 2); }
}

@media (max-width: 720px) {
  .article-heading-bar { margin-bottom: .75rem; }
  .article-heading-actions { gap: .5rem; }
  .article-heading-action { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
  .related-heading-row { margin-bottom: 1rem; }
  .related-carousel-track { gap: 1rem; }
  .related-carousel .card { flex-basis: 100%; }
}