.main-article-container {
  padding-block: 56px 72px;
  font-family: var(--kemove-font-stack, Inter, Arial, sans-serif);
  background: #f5f7fa;
}

.main-article.page-width {
  width: min(1040px, calc(100vw - 96px));
  max-width: none;
  padding-inline: 0;
}

.main-article.page-width > div {
  padding: clamp(28px, 4vw, 54px) !important;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgb(15 23 42 / 8%);
}
.main-article__title {
  max-width: 860px;
  padding-block-end: 18px;
  color: #111827;
  font-size: clamp(34px, 4vw, 60px) !important;
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: 0;
}
.main-article__cover-image {
  aspect-ratio: var(--aspect-ratio);
  margin-block: 34px;
  overflow: hidden;
  background: #eef2f7;
  border-radius: 18px;
}
.main-article__cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-article__info {
  display: flex;
  gap: 10px;
  padding-block-end: 22px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 750;
  border-block-end: 1px solid #e5e7eb;
}
.main-article__button-back {
  margin-block-end: 28px;
}
.main-article__button-back svg {
  width: 0.8em;
  height: 0.8em;
  transform: rotate(90deg);
}
.main-article__content {
  max-width: 820px;
  margin: 40px auto;
  color: #1f2937;
  font-size: 17px;
  line-height: 1.78;
}
.main-article__content :is(h2, h3, h4) {
  margin-block: 1.8em 0.65em;
  color: #111827;
  font-weight: 900;
  line-height: 1.16;
}
.main-article__content h2 {
  font-size: clamp(26px, 2.5vw, 36px);
}
.main-article__content h3 {
  font-size: clamp(22px, 2vw, 28px);
}
.main-article__content :is(img, video, iframe) {
  border-radius: 18px;
}
.main-article__content a {
  color: #006be6;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.main-article__comment-title {
  padding-block: 40px;
}
.main-article__comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block-end: 40px;
}
.main-article__comment-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.main-article__comment-info {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: end;
}
.main-article__comment-fields {
  display: flex;
  gap: 20px;
}
.main-article .text-area + .field__label {
  inset-block-start: 20px;
}
.main-article__share {
  max-width: 820px;
  margin: 40px auto 70px;
}
.main-article__comment-submit {
  display: flex;
  justify-content: center;
  margin-block-start: 40px;
}
.main-article__comment-form {
  padding-block-start: 40px;
}
.main-article__comment-form-title {
  margin-block-end: 40px;
}
.main-article__comment-tip {
  padding-block: 40px;
}
.main-article .field__info {
  padding-block-end: 40px;
}
.main-article__comment-dot {
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
}
@media (max-width: 959px) {
  .main-article-container {
    padding-block: 28px 48px;
  }

  .main-article.page-width {
    width: calc(100vw - 32px);
  }

  .main-article.page-width > div {
    padding: 24px 20px !important;
    border-radius: 18px;
  }

  .main-article__cover-image {
    margin-block: 20px;
  }

  .main-article__content {
    margin-block-end: 20px;
    font-size: 15px;
  }

  .main-article__share {
    margin-block: 20px 40px;
  }

  .main-article__comment-title {
    padding-block: 0 20px;
  }

  .main-article__comment-list {
    margin-block-end: 20px;
  }

  .main-article__comment-item {
    gap: 20px;
    padding: 20px;
  }

  .main-article__comment-info {
    gap: 16px;
  }

  .main-article__comment-content {
    padding: 0;
  }

  .main-article__comment-form-title {
    margin-block-end: 20px;
  }

  .main-article__comment-fields {
    display: block;
  }

  .main-article__comment-tip {
    padding-block-start: 20px;
  }
}

/* 0.2.4 FINAL article geometry: true 1360px content and one sticky sidebar container. */
@media (min-width: 960px) {
  .main-article.page-width {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: none !important;
    padding-inline: 40px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .main-article__layout,
  .main-article.page-width > .main-article__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 960px) 320px !important;
    gap: 80px !important;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .main-article__title {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(38px, 2.8vw, 48px) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }

  .main-article__aside {
    position: sticky !important;
    top: 116px !important;
    align-self: start !important;
    display: block !important;
    width: 320px !important;
    height: min(620px, calc(100vh - 148px)) !important;
    max-height: calc(100vh - 148px) !important;
    padding: 28px 18px 28px 28px !important;
    margin-block-start: var(--article-aside-start, 0px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-sizing: border-box !important;
    box-shadow: none;
  }

  .main-article__quick-nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 959px) {
  .main-article.page-width,
  .main-article__layout {
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  .main-article__title {
    max-width: none !important;
    font-size: clamp(32px, 9vw, 44px) !important;
    text-wrap: balance;
  }
}

/* Final long-form article layout: restrained white canvas and a focused reading column. */
.main-article-container {
  padding-block: 40px 88px;
  background: #fff;
}

.main-article.page-width {
  width: min(1360px, calc(100vw - 64px));
  max-width: none !important;
}

.main-article.page-width > div {
  padding: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.main-article__button-back,
.main-article__title,
.main-article__info,
.main-article__share {
  width: min(920px, 100%);
  margin-inline: auto;
}

.main-article__button-back {
  margin-block: 0 42px;
}

.main-article__button-back a {
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.main-article__title {
  max-width: 920px;
  padding: 0;
  font-size: clamp(38px, 4.4vw, 64px) !important;
  line-height: 1.06;
  text-align: center;
}

.main-article__info {
  justify-content: center;
  padding-block: 20px 0;
  border: 0;
}

.main-article__share {
  display: flex;
  justify-content: center;
  margin-block: 18px 38px;
}

.main-article__cover-image {
  width: min(1120px, 100%);
  margin: 0 auto 52px;
  border-radius: 12px;
}

.main-article__content {
  max-width: 900px;
  margin: 0 auto 64px;
  font-size: 17px;
  line-height: 1.82;
}

.main-article__content > :first-child {
  margin-block-start: 0;
}

.main-article__content :is(h2, h3, h4) {
  scroll-margin-top: 110px;
}

@media (max-width: 959px) {
  .main-article-container {
    padding-block: 24px 52px;
  }

  .main-article.page-width {
    width: calc(100vw - 32px);
  }

  .main-article__button-back {
    margin-block-end: 28px;
  }

  .main-article__title {
    font-size: clamp(32px, 10vw, 46px) !important;
    text-align: left;
  }

  .main-article__info,
  .main-article__share {
    justify-content: flex-start;
  }

  .main-article__cover-image {
    margin-block-end: 32px;
  }

  .main-article__content {
    font-size: 16px;
  }
}

/* Article final pass: calm long-form layout with sticky quick navigation. */
.main-article-container {
  padding-block: 0 96px !important;
  background: #f5f7fa !important;
}

.main-article.page-width {
  width: min(1360px, calc(100vw - 64px)) !important;
  max-width: none !important;
  padding-inline: 0 !important;
}

.main-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 920px) 320px;
  gap: 64px;
  align-items: start;
  padding-block-start: 72px !important;
}

.main-article__body {
  min-width: 0;
}

.main-article__aside {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 86px;
  padding-block-start: 116px;
}

.main-article__social {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  color: #8d96a5;
  font-size: 22px;
  font-weight: 760;
}

.main-article__quick-nav {
  padding: 28px 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(15 23 42 / 5%);
}

.main-article__quick-nav h2 {
  margin: 0 0 18px;
  color: #111827;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.25;
}

.main-article__quick-nav p {
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 14px;
}

.main-article__quick-nav ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-article__quick-nav a {
  display: block;
  color: #7c8796;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}

.main-article__quick-nav li.is-child a {
  padding-inline-start: 16px;
  font-size: 13px;
}

.main-article__quick-nav a:hover {
  color: #0091ff;
}

.main-article--no-nav .main-article__aside {
  display: none;
}

.main-article--no-nav .main-article__layout {
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
}

.main-article__button-back,
.main-article__title,
.main-article__info,
.main-article__cover-image,
.main-article__content,
.main-article__comment-title,
.main-article__comment-list,
.main-article__comment-form {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.main-article__share {
  display: none !important;
}

.main-article__title {
  padding-block: 92px 34px !important;
  color: #080a0f;
  font-size: clamp(40px, 4.1vw, 64px) !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

.main-article__info {
  justify-content: flex-start !important;
  padding-block: 0 54px !important;
  color: #6b7280;
  font-weight: 500;
}

.main-article__cover-image {
  margin-block: 0 0 !important;
  border-radius: 10px !important;
}

.main-article__content {
  padding: clamp(32px, 4vw, 48px) !important;
  margin-block: 0 72px !important;
  color: #111827;
  font-size: 17px;
  line-height: 1.78;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

.main-article__content :is(h2, h3, h4) {
  font-weight: 760 !important;
  scroll-margin-top: 118px;
}

.main-article__content h2 {
  font-size: clamp(28px, 2.6vw, 38px) !important;
}

.main-article__content h3 {
  font-size: clamp(22px, 2vw, 28px) !important;
}

@media (max-width: 959px) {
  .main-article-container {
    padding-block-end: 58px !important;
  }

  .main-article.page-width {
    width: calc(100vw - 32px) !important;
  }

  .main-article__layout {
    display: block;
    padding-block-start: 36px !important;
  }

  .main-article__aside {
    display: none;
  }

  .main-article__title {
    padding-block: 42px 20px !important;
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  .main-article__info {
    padding-block-end: 28px !important;
  }

  .main-article__content {
    padding: 26px 22px !important;
    font-size: 16px;
  }
}

/* 0.2.0 article polish: cleaner editorial rhythm and clearer quick navigation. */
@media (min-width: 960px) {
  .main-article-container {
    background: #f5f5f5 !important;
  }

  .main-article__layout {
    grid-template-columns: minmax(0, 900px) 320px !important;
    gap: 72px !important;
    padding-block-start: 64px !important;
  }

  .main-article__aside {
    padding-block-start: 126px !important;
  }

  .main-article__title {
    padding-block: 88px 30px !important;
    font-weight: 720 !important;
  }

  .main-article__info {
    padding-block-end: 50px !important;
  }

  .main-article__content {
    padding: 46px 50px !important;
    line-height: 1.84 !important;
    border-radius: 0 !important;
  }

  .main-article__quick-nav {
    border: 1px solid #edf0f4;
    box-shadow: none !important;
  }

  .main-article__quick-nav a::before {
    content: ">";
    display: inline-block;
    margin-inline-end: 8px;
    color: #a2abb8;
  }
}

/* 0.2.2 long-form article layout and optional product recommendation blocks. */
.main-article__product-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: stretch;
  margin-block: 34px 54px;
  padding: 20px;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 12px;
}

.main-article__product-cards:empty {
  display: none;
}

.main-article__product-media {
  position: relative;
  display: grid;
  min-height: 310px;
  place-items: center;
  background: #fff;
}

.main-article__product-media img,
.main-article__product-media svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-article__product-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 9px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  background: #0091ff;
}

.main-article__product-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 24px 20px 24px 4px;
}

.main-article__product-copy h3 {
  max-width: 22ch;
  margin: 0 0 18px;
  font-size: clamp(24px, 2.1vw, 32px) !important;
  line-height: 1.18 !important;
}

.main-article__product-copy h3 a {
  color: #111827 !important;
  text-decoration: none !important;
}

.main-article__product-price {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-block-end: 8px;
}

.main-article__product-price strong {
  color: #111827;
  font-size: 28px;
}

.main-article__product-price s {
  color: #8b94a1;
  font-size: 16px;
}

.main-article__product-code,
.main-article__product-copy > p {
  margin: 6px 0;
  color: #667180;
  font-size: 14px;
  line-height: 1.55;
}

.main-article__product-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  margin-block-start: 22px;
}

.main-article__product-actions a,
.main-article__product-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding-inline: 18px;
  font: inherit;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 999px;
}

.main-article__product-link {
  color: #111827 !important;
  background: #fff;
  border: 1px solid #111827;
}

.main-article__product-shop {
  color: #fff !important;
  background: #0091ff;
  border: 0;
  cursor: pointer;
}

.main-article__product-form,
.main-article__product-form form {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.main-article__product-shop:disabled {
  color: #fff !important;
  cursor: not-allowed;
  background: #8b94a1;
}

.main-article__product-actions :is(a, button):focus-visible {
  outline: 3px solid rgba(0, 145, 255, 0.32);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .main-article__layout {
    grid-template-columns: minmax(0, 960px) 320px !important;
    gap: 80px !important;
  }

  .main-article__title {
    max-width: 24ch !important;
    font-size: clamp(40px, 3.25vw, 52px) !important;
    font-weight: 650 !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
  }

  .main-article__content {
    padding: 44px 42px 62px !important;
  }

  .main-article__content :is(p, ul, ol, blockquote) {
    max-width: 72ch !important;
  }

  .main-article__aside {
    gap: 54px !important;
    padding-block-start: 188px !important;
  }

  .main-article__quick-nav {
    max-height: min(620px, calc(100vh - 150px)) !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c7ced8 transparent;
  }

  .main-article__quick-nav::-webkit-scrollbar {
    width: 6px;
  }

  .main-article__quick-nav::-webkit-scrollbar-thumb {
    background: #c7ced8;
    border-radius: 999px;
  }
}

@media (max-width: 959px) {
  .main-article__product-card {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 14px;
  }

  .main-article__product-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .main-article__product-copy {
    padding: 24px 10px 10px;
  }
}

/* KEMOVE 0.2.1 native article template: clean editorial canvas and usable navigation. */
.main-article-container {
  font-family: var(--kemove-font-stack, Barlow, Arial, sans-serif) !important;
}

.main-article__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #7b8491;
  background: transparent;
  border-radius: 50%;
  transition: color 160ms ease, background 160ms ease;
}

.main-article__social svg {
  width: 21px;
  height: 21px;
  fill: currentcolor;
}

.main-article__social a:hover {
  color: #fff;
  background: #0091ff;
}

.main-article__quick-nav a.is-active {
  color: #111827 !important;
  font-weight: 700;
}

.main-article__quick-nav a.is-active::before {
  color: #0091ff !important;
}

@media (min-width: 960px) {
  .main-article-container {
    padding-block: 0 104px !important;
    background: #f5f5f5 !important;
  }

  .main-article.page-width {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: none !important;
    padding-inline: 40px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .main-article__layout {
    grid-template-columns: minmax(0, 920px) 320px !important;
    gap: 72px !important;
    padding-block-start: 0 !important;
  }

  .main-article__body {
    padding-block-start: 38px;
  }

  .main-article__button-back {
    margin-block: 0 68px !important;
  }

  .main-article__button-back a {
    color: #7b8491;
    font-size: 14px;
    font-weight: 500;
  }

  .main-article__title {
    max-width: 900px !important;
    padding-block: 0 28px !important;
    margin: 0 !important;
    color: #080a0f;
    font-size: clamp(42px, 4vw, 62px) !important;
    font-weight: 680 !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }

  .main-article__info {
    padding-block: 0 52px !important;
    color: #6b7280;
    font-size: 15px;
  }

  .main-article__cover-image {
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden;
    background: #eef1f4;
    border-radius: 0 !important;
  }

  .main-article__content {
    padding: 44px 40px 58px !important;
    margin: 0 0 72px !important;
    color: #161a22;
    font-size: 17px;
    line-height: 1.82 !important;
    background: #fff;
    border-radius: 0 !important;
  }

  .main-article__content :is(p, ul, ol, blockquote) {
    max-width: 75ch;
  }

  .main-article__content :is(h2, h3) {
    max-width: 30ch;
    margin-block: 1.8em 0.65em;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  .main-article__aside {
    top: 112px;
    gap: 72px;
    padding-block-start: 214px !important;
  }

  .main-article__social {
    justify-content: center;
    gap: 22px;
  }

  .main-article__quick-nav {
    max-height: calc(100vh - 170px);
    padding: 28px 30px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e7e9ed !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .main-article__quick-nav h2 {
    font-size: 18px;
    font-weight: 680;
  }

  .main-article__quick-nav ul {
    gap: 9px;
  }

  .main-article__quick-nav a {
    color: #858e9a;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* 0.2.2 authoritative article sizing after all legacy layers. */
@media (min-width: 960px) {
  .main-article__layout {
    grid-template-columns: minmax(0, 960px) 320px !important;
    gap: 80px !important;
  }

  .main-article__title {
    max-width: 24ch !important;
    font-size: clamp(40px, 3.25vw, 52px) !important;
    font-weight: 650 !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
  }

  .main-article__content {
    padding: 44px 42px 62px !important;
  }

  .main-article__content :is(p, ul, ol, blockquote) {
    max-width: 72ch !important;
  }

  .main-article__aside {
    gap: 54px !important;
    padding-block-start: 188px !important;
  }

  .main-article__quick-nav {
    max-height: min(620px, calc(100vh - 150px)) !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c7ced8 transparent;
  }
}

/* 0.2.3 article header, sticky scrolling sidebar, and modular content. */
.main-article__module-copy {
  white-space: pre-line;
}

.main-article__module-image {
  margin: 0 0 44px;
  background: #fff;
}

.main-article__module-image img,
.main-article__module-image svg {
  display: block;
  width: 100%;
  height: auto;
}

.main-article__module-image figcaption {
  padding: 12px 16px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.main-article__related {
  padding-block-start: 28px;
  margin-block-start: 28px;
  border-block-start: 1px solid #e5e7eb;
}

.main-article__related[hidden],
.main-article__related-item[hidden] {
  display: none !important;
}

.main-article__related-item {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-block: 10px;
  color: #111827 !important;
  text-decoration: none !important;
  border-block-end: 1px solid #eef0f3;
}

.main-article__related-item img,
.main-article__related-item svg {
  width: 88px;
  height: 68px;
  object-fit: cover;
  background: #eef1f4;
}

.main-article__related-item span {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.main-article__related-item strong {
  display: -webkit-box;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.main-article__related-item time {
  color: #8a93a0;
  font-size: 12px;
}

@media (min-width: 960px) {
  .main-article__layout {
    grid-template-columns: minmax(0, 960px) 320px !important;
    gap: 80px !important;
  }

  .main-article__body {
    position: relative;
  }

  .main-article__info {
    display: flex !important;
    gap: 14px;
    align-items: center;
    min-height: 40px;
  }

  .main-article__info .main-article__social {
    display: flex !important;
    gap: 12px;
    margin-inline-start: auto;
  }

  .main-article__info .main-article__social a {
    width: 34px;
    height: 34px;
  }

  .main-article__aside {
    position: static !important;
    display: block !important;
    padding-block-start: 188px !important;
  }

  .main-article__aside > .main-article__social {
    display: none !important;
  }

  .main-article__quick-nav {
    position: sticky;
    top: 116px;
    max-height: calc(100vh - 148px) !important;
    padding: 28px 18px 28px 28px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 959px) {
  .main-article__info {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .main-article__info .main-article__social {
    display: flex !important;
    gap: 8px;
    width: 100%;
    margin-block-start: 8px;
  }

  .main-article__module-image {
    margin-block-end: 26px;
  }
}

/* 0.2.4 AUTHORITATIVE - must remain after all legacy article layers. */
@media (min-width: 960px) {
  .main-article.page-width {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: none !important;
    padding-inline: 40px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .main-article__layout,
  .main-article.page-width > .main-article__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 960px) 320px !important;
    gap: 80px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .main-article__title {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(38px, 2.8vw, 48px) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }

  .main-article__aside {
    position: sticky !important;
    top: 116px !important;
    align-self: start !important;
    display: block !important;
    width: 320px !important;
    height: min(620px, calc(100vh - 148px)) !important;
    max-height: calc(100vh - 148px) !important;
    padding: 28px 18px 28px 28px !important;
    margin-block-start: var(--article-aside-start, 0px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .main-article__quick-nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* 0.2.5 editable, viewport-height article sidebar. */
@media (min-width: 960px) {
  .main-article__aside {
    position: sticky !important;
    top: 116px !important;
    width: 320px !important;
    height: calc(100vh - 140px) !important;
    height: calc(100dvh - 140px) !important;
    max-height: none !important;
    padding: 0 !important;
    margin-block-start: var(--article-aside-start, 0px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  .main-article__sidebar-panel {
    width: 100%;
    height: 100%;
    padding: 28px 18px 28px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
  }

  .main-article__quick-nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  .main-article__related-item::before {
    display: none !important;
    content: none !important;
  }

  .main-article__related-placeholder {
    display: block;
    width: 88px;
    height: 68px;
    background: #f3f5f7;
  }
}

/* 0.2.6: keep the article sidebar inside the visible browser canvas. */
@media (min-width: 960px) {
  .main-article__aside {
    --article-sidebar-top-gap: 116px;
    --article-sidebar-bottom-gap: 18px;

    top: var(--article-sidebar-top-gap) !important;
    height: calc(100vh - var(--article-sidebar-top-gap) - var(--article-sidebar-bottom-gap)) !important;
    height: calc(100dvh - var(--article-sidebar-top-gap) - var(--article-sidebar-bottom-gap)) !important;
    max-height: calc(100dvh - var(--article-sidebar-top-gap) - var(--article-sidebar-bottom-gap)) !important;
  }

  .main-article__sidebar-panel {
    height: 100% !important;
    max-height: 100% !important;
  }
}

@media (max-width: 959px) {
  .main-article.page-width,
  .main-article__layout {
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  .main-article__title {
    max-width: none !important;
    font-size: clamp(32px, 9vw, 44px) !important;
    text-wrap: balance;
  }
}

/* 0.2.8 AUTHORITATIVE: contain the article sidebar above the footer. */
@media (min-width: 960px) {
  .main-article-container {
    overflow: clip;
  }

  .main-article__layout,
  .main-article.page-width > .main-article__layout {
    align-items: start !important;
    padding-block-end: 32px !important;
  }

  .main-article__aside {
    --article-sidebar-top-gap: 116px;
    --article-sidebar-bottom-gap: 16px;

    position: sticky !important;
    top: var(--article-sidebar-top-gap) !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .main-article__sidebar-panel {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - var(--article-sidebar-top-gap) - var(--article-sidebar-bottom-gap)) !important;
    max-height: calc(100dvh - var(--article-sidebar-top-gap) - var(--article-sidebar-bottom-gap)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* 0.3.3 AUTHORITATIVE: UGREEN-sized content shell and editor-linked share block. */
.main-article__meta-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 0 48px;
  box-sizing: border-box;
}

.main-article__meta-row .main-article__info {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-article__share.main-article__social {
  display: flex !important;
  flex: 0 0 auto;
  gap: 8px !important;
  align-items: center;
  justify-content: flex-end !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-article__share.main-article__social a {
  width: 36px;
  height: 36px;
  color: #667180;
  border: 1px solid #dfe3e8;
}

.main-article__share.main-article__social a:hover {
  color: #fff;
  background: #0091ff;
  border-color: #0091ff;
}

.main-article__content-shell {
  width: 100%;
  padding: 40px;
  margin: 0 0 72px;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}

.main-article__cover-image {
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  margin: 0 0 32px !important;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 8px !important;
}

.main-article__cover-image img,
.main-article__cover-image svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.main-article__content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.main-article__content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, table, figure),
.main-article__content > div:not([data-article-product-card]) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.main-article__content > p:has(img),
.main-article__content > p:has(video),
.main-article__content > p:has(iframe),
.main-article__content > figure {
  width: 100% !important;
  max-width: none !important;
}

.main-article__content > p > a:has(> img) {
  display: block;
}

.main-article__content > img,
.main-article__content > p img,
.main-article__content > figure img,
.main-article__module-image img,
.main-article__module-image svg {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

.main-article__content :is(video, iframe) {
  width: 100%;
  max-width: 100%;
  border-radius: 8px !important;
}

.main-article__module-image,
.main-article__module-text,
.main-article__product-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.main-article__product-media,
.main-article__product-media img,
.main-article__product-media svg {
  border-radius: 10px !important;
}

@media (min-width: 960px) {
  .main-article.page-width {
    width: min(1440px, calc(100vw - 32px)) !important;
    max-width: none !important;
    padding-inline: clamp(24px, 2.1vw, 40px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .main-article__layout,
  .main-article.page-width > .main-article__layout {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 20vw, 320px) !important;
    gap: clamp(24px, 1.8vw, 34px) !important;
  }

  .main-article__sidebar-panel {
    padding: 20px 16px 20px 24px !important;
  }

  .main-article__related {
    padding-block-start: 24px;
    margin-block-start: 24px;
  }
}

@media (max-width: 959px) {
  .main-article__meta-row {
    gap: 16px;
    padding-block-end: 28px;
  }

  .main-article__content-shell {
    padding: 20px;
    margin-block-end: 44px;
  }

  .main-article__cover-image {
    margin-block-end: 24px !important;
  }

  .main-article__module-image {
    margin-block: 0 24px !important;
    overflow: hidden;
  }

  .main-article__share.main-article__social {
    gap: 6px !important;
  }

  .main-article__share.main-article__social a {
    width: 34px;
    height: 34px;
  }
}