/* ==========================================================================
   DS Coatings — Articles & FAQ
   New styles for the Articles section (clean cards, likes, comments, share)
   and the searchable Q&A accordion.

   Loaded after style.css. Reuses existing tokens:
   --blue-700 --blue-50 --gray-100 --gray-200 --gray-500 --gray-600 --ink
   ========================================================================== */

/* ───────────────────────── Shared: section shell ───────────────────────── */
.ds-section {
  padding: 80px 0;
}
.ds-section--gray {
  background: var(--gray-100);
}
.ds-section__head {
  margin-bottom: 40px;
}
.ds-section__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 10px;
}
.ds-section__title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.2;
}
.ds-section__sub {
  margin-top: 12px;
  font-size: 15px;
  color: var(--gray-600);
  max-width: 620px;
  line-height: 1.6;
}

/* ───────────────────────── Articles: page title (no hero) ───────────────── */
/* The Articles listing used to sit under the big dark `.page-hero` band
   (background image + gradient overlay). Per the site owner it should be a
   plain title with the articles right underneath — no hero, no background
   picture. */
.ds-page-title {
  background: var(--white);
  padding: 52px 0 8px;
  border-bottom: 1px solid var(--gray-100);
}
.ds-page-title__eyebrow {
  display: inline-block;
  background: rgba(30, 136, 229, .1);
  border: 1px solid rgba(30, 136, 229, .2);
  color: var(--blue-700);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 14px;
}
.ds-page-title__heading {
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
}
.ds-page-title__sub {
  margin-top: 14px;
  color: var(--gray-600);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 620px;
}
/* The title block already provides the top spacing — don't double it up. */
.ds-page-title + .ds-section {
  padding-top: 48px;
}

/* ───────────────────────── Articles: grid + cards ───────────────────────── */

/* Category filter bar above the article grid */
.ds-articles-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.ds-articles-filter__btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.ds-articles-filter__btn:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
}
.ds-articles-filter__btn.is-active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--white);
}
.ds-articles-empty {
  display: none;
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
}
.ds-articles-empty.is-visible {
  display: block;
}

.ds-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.ds-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ds-card:hover {
  border-color: var(--blue-500);
  box-shadow: 0 14px 34px rgba(11, 36, 71, .10);
  transform: translateY(-2px);
}

.ds-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0B2447 0%, #19376D 100%);
  overflow: hidden;
}
.ds-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ds-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(11, 36, 71, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 2;
}

.ds-card__body {
  padding: 22px 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ds-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -.2px;
}
.ds-card__title a {
  color: inherit;
  text-decoration: none;
}
.ds-card__title a:hover {
  color: var(--blue-700);
}

.ds-card__desc {
  font-size: 14px;
  line-height: 1.62;
  color: var(--gray-600);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding: 14px 22px;
  border-top: 1px solid var(--gray-100);
  font-size: 12.5px;
  color: var(--gray-500);
  flex-wrap: wrap;
}

.ds-card__date {
  white-space: nowrap;
}

/* Like button */
.ds-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--gray-500);
  cursor: pointer;
  transition: color .18s;
  -webkit-tap-highlight-color: transparent;
}
.ds-like-word {
  white-space: nowrap;
}
.ds-like svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .18s, fill .18s, stroke .18s;
}
.ds-like:hover {
  color: var(--blue-700);
}
.ds-like:hover svg {
  transform: scale(1.14);
}
.ds-like.is-liked {
  color: var(--blue-700);
  font-weight: 600;
}
.ds-like.is-liked svg {
  fill: var(--blue-700);
  stroke: var(--blue-700);
}

/* Comment count */
.ds-comments-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
  text-decoration: none;
  white-space: nowrap;
}
.ds-comments-count:hover {
  color: var(--blue-700);
}
.ds-comments-count svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Share */
.ds-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ds-share__label {
  font-size: 12.5px;
  color: var(--gray-400);
}
.ds-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.ds-share__btn:hover {
  border-color: var(--blue-700);
  color: var(--blue-700);
  background: var(--blue-50);
}
.ds-share__btn svg {
  width: 13px;
  height: 13px;
}

/* ══════════════════════════════════════════════════════════════════════
   ARTICLE DETAIL — journal / magazine layout
   Two columns: a wide editorial body on the left and a sticky sidebar
   (table of contents, key facts, author, CTA) on the right. On narrow
   screens the sidebar collapses under the body.
   ══════════════════════════════════════════════════════════════════════ */

/* Reading progress bar */
.ds-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 120;
  pointer-events: none;
}
.ds-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500));
  transition: width .12s linear;
}

.ds-article {
  padding: 48px 0 90px;
}
.ds-article__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  margin-bottom: 24px;
}
.ds-article__back:hover {
  color: var(--blue-700);
}
.ds-article__back svg {
  width: 14px;
  height: 14px;
}

/* ── Masthead ─────────────────────────────────────────────────────── */
.ds-article__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 38px;
}
.ds-article__head-main {
  min-width: 0;
}
.ds-article__tag {
  display: inline-block;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  margin-bottom: 16px;
}
.ds-article__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.9px;
  color: var(--ink);
  margin-bottom: 16px;
}
.ds-article__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-600);
  margin-bottom: 22px;
}
.ds-article__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0B2447 0%, #19376D 100%);
  box-shadow: 0 18px 44px rgba(11, 36, 71, .16);
}
.ds-article__cover img {
  width: 100%;
  display: block;
}

.ds-article__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray-500);
}
.ds-article__meta-item {
  position: relative;
  padding-inline-start: 18px;
}
.ds-article__meta-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-300);
}
.ds-article__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-soft);
}
.ds-article__author svg {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
}

/* ── Two-column layout ────────────────────────────────────────────── */
.ds-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
.ds-article__main {
  min-width: 0;
}

/* ── Editorial body ───────────────────────────────────────────────── */
.ds-article__content {
  font-size: 16.5px;
  line-height: 1.82;
  color: var(--ink-soft);
}
.ds-article__content h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ink);
  margin: 44px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
  scroll-margin-top: 96px;
}
.ds-article__content h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.ds-article__content h3 {
  font-size: 19.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 30px 0 12px;
  scroll-margin-top: 96px;
}
.ds-article__content p {
  margin-bottom: 20px;
}
.ds-article__content ul,
.ds-article__content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.ds-article__content li {
  margin-bottom: 10px;
}
.ds-article__content strong {
  color: var(--ink);
  font-weight: 700;
}
.ds-article__content a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds-article__content blockquote {
  border-left: 3px solid var(--blue-700);
  background: var(--blue-50);
  padding: 18px 22px;
  margin: 26px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px;
}
.ds-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 14px;
  background: var(--white);
}
.ds-article__content th,
.ds-article__content td {
  border: 1px solid var(--gray-200);
  padding: 11px 13px;
  text-align: left;
}
.ds-article__content th {
  background: var(--gray-100);
  font-weight: 700;
  color: var(--ink);
}

/* Specification table inside the article body */
.ds-article__content table.ds-spec-table {
  font-size: 14.5px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--gray-200);
}
.ds-article__content table.ds-spec-table th {
  width: 34%;
  background: var(--gray-100);
  vertical-align: top;
  white-space: normal;
}
.ds-article__content table.ds-spec-table td {
  width: 66%;
  vertical-align: top;
}

/* FAQ block inside the article body */
.ds-article-faq {
  margin: 24px 0 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.ds-article-faq__item {
  padding: 20px 22px;
  border-bottom: 1px solid var(--gray-200);
}
.ds-article-faq__item:last-child {
  border-bottom: 0;
}
.ds-article-faq__item h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  scroll-margin-top: 96px;
}
.ds-article-faq__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* Related product links */
.ds-article__content ul.ds-article-links {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ds-article__content ul.ds-article-links li {
  margin-bottom: 0;
}
.ds-article__content ul.ds-article-links a {
  display: block;
  padding: 12px 16px;
  background: var(--blue-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color .18s, color .18s;
}
.ds-article__content ul.ds-article-links a:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
}

/* Article footer: like / comment / share */
.ds-article__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 24px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.ds-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.ds-action-btn:hover {
  border-color: var(--blue-700);
  color: var(--blue-700);
  background: var(--blue-50);
}
.ds-action-btn svg {
  width: 16px;
  height: 16px;
}
.ds-action-btn.is-liked {
  border-color: var(--blue-700);
  color: var(--blue-700);
  background: var(--blue-50);
}
.ds-action-btn.is-liked svg {
  fill: var(--blue-700);
  stroke: var(--blue-700);
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS
   ══════════════════════════════════════════════════════════════════════ */
.ds-article__aside {
  min-width: 0;
}
.ds-article__aside-sticky {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-inline-end: 2px;
}
.ds-article__aside-sticky::-webkit-scrollbar {
  width: 5px;
}
.ds-article__aside-sticky::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.ds-widget {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(11, 36, 71, .04);
}
.ds-widget__title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 14px;
}
.ds-widget__text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gray-600);
  margin-bottom: 16px;
}

/* ── Table of contents ────────────────────────────────────────────── */
.ds-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}
.ds-toc__item {
  margin: 0;
  border-inline-start: 2px solid var(--gray-200);
}
.ds-toc__item--h3 {
  padding-inline-start: 14px;
}
.ds-toc__link {
  display: block;
  padding: 6px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-600);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -2px;
  transition: color .16s, border-color .16s, background .16s;
}
.ds-toc__link:hover {
  color: var(--blue-700);
  background: var(--blue-50);
}
.ds-toc__link.is-active {
  color: var(--blue-700);
  font-weight: 700;
  border-inline-start-color: var(--blue-700);
  background: var(--blue-50);
}

/* ── At a glance ──────────────────────────────────────────────────── */
.ds-facts__list {
  margin: 0;
}
.ds-facts__row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.ds-facts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ds-facts__row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 4px;
}
.ds-facts__row dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ── Author card ──────────────────────────────────────────────────── */
.ds-author__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-author__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-700);
}
.ds-author__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ds-author__meta {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ── CTA ──────────────────────────────────────────────────────────── */
.ds-cta {
  background: linear-gradient(150deg, #0B2447 0%, #19376D 100%);
  border-color: transparent;
}
.ds-cta .ds-widget__title {
  color: #fff;
}
.ds-cta .ds-widget__text {
  color: rgba(255, 255, 255, .78);
}

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 12px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.ds-btn--block {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.ds-btn--block:last-child {
  margin-bottom: 0;
}
.ds-btn--primary {
  background: var(--blue-700);
  color: #fff;
}
.ds-btn--primary:hover {
  background: var(--blue-900);
  color: #fff;
}
.ds-btn--ghost {
  background: transparent;
  border-color: var(--gray-300);
  color: var(--ink-soft);
}
.ds-btn--ghost:hover {
  border-color: var(--blue-700);
  color: var(--blue-700);
}
.ds-cta .ds-btn--primary {
  background: #fff;
  color: var(--blue-900);
}
.ds-cta .ds-btn--primary:hover {
  background: var(--blue-50);
}
.ds-cta .ds-btn--ghost {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.ds-cta .ds-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}
.ds-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════
   COMMENTS + COMMENT FORM
   ══════════════════════════════════════════════════════════════════════ */
.ds-comments {
  margin-top: 52px;
}
.ds-comments__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.ds-comments__sub {
  font-size: 13.5px;
  color: var(--gray-500);
  margin-bottom: 24px;
}
.ds-comments__list {
  margin-top: 8px;
}

/* ── Leave a comment form ─────────────────────────────────────────── */
.ds-comment-form {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 34px;
}
.ds-comment-form__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.ds-comment-form__sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 20px;
}
.ds-comment-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ds-field {
  margin-bottom: 16px;
}
.ds-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.ds-field__req {
  color: #d93636;
}
.ds-field__opt {
  font-weight: 500;
  color: var(--gray-400);
  font-size: 11.5px;
}
.ds-field input,
.ds-field textarea {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  padding: 11px 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.ds-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.ds-field input:focus,
.ds-field textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(30, 95, 191, .10);
}
.ds-field input.is-invalid,
.ds-field textarea.is-invalid {
  border-color: #d93636;
  box-shadow: 0 0 0 3px rgba(217, 54, 54, .08);
}
/* Honeypot: hidden from people, but not off-canvas — off-canvas elements
   widen the document in RTL layouts and create a horizontal scrollbar. */
.ds-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ds-comment-form__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ds-comment-form__msg {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-600);
}
.ds-comment-form__msg.is-success {
  color: var(--green-700);
}
.ds-comment-form__msg.is-error {
  color: #d93636;
}
.ds-comment-form__msg.is-sending {
  color: var(--gray-500);
}

/* ── Comment items ────────────────────────────────────────────────── */
.ds-comment {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-100);
}
.ds-comment:last-child {
  border-bottom: 0;
}
.ds-comment--new {
  background: var(--blue-50);
  border: 1px solid rgba(30, 95, 191, .16);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  animation: dsCommentIn .45s ease both;
}
@keyframes dsCommentIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-comment__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-700);
  user-select: none;
}
.ds-comment__body {
  flex: 1;
  min-width: 0;
}
.ds-comment__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ds-comment__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.ds-comment__role {
  font-size: 11.5px;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 3px;
}
.ds-comment__date {
  font-size: 12px;
  color: var(--gray-500);
}
.ds-comment__text {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--gray-700);
  margin: 0;
}
.ds-comment__reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.ds-comment__reply:hover {
  color: var(--blue-700);
}
.ds-comment__reply svg {
  width: 13px;
  height: 13px;
}

/* ───────────────────────── FAQ / Q&A ───────────────────────── */
.ds-faq-search {
  position: relative;
  max-width: 560px;
  margin-bottom: 26px;
}
.ds-faq-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  pointer-events: none;
}
.ds-faq-search input {
  width: 100%;
  height: 52px;
  padding: 0 46px 0 46px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.ds-faq-search input::placeholder {
  color: var(--gray-400);
}
.ds-faq-search input:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(30, 95, 191, .10);
}
.ds-faq-search__clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.ds-faq-search__clear.is-visible {
  display: flex;
}
.ds-faq-search__clear svg {
  position: static;
  transform: none;
  width: 13px;
  height: 13px;
  color: var(--gray-600);
}

.ds-faq-count {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
  min-height: 18px;
}
.ds-faq-count strong {
  color: var(--ink);
  font-weight: 700;
}

.ds-faq-list {
  max-width: 860px;
  border-top: 1px solid var(--gray-200);
}
.ds-faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.ds-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.ds-faq-q:hover .ds-faq-q-label {
  color: var(--blue-700);
}
.ds-faq-q-icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  transition: background .2s, color .2s, transform .25s;
}
.ds-faq-q-icon svg {
  width: 13px;
  height: 13px;
}
.ds-faq-item.is-open .ds-faq-q-icon {
  background: var(--blue-700);
  color: #fff;
  transform: rotate(180deg);
}
.ds-faq-q-text {
  flex: 1;
  min-width: 0;
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  transition: color .18s;
}
/* The question wording itself — always high contrast on the light card. */
.ds-faq-q-label {
  display: block;
  color: var(--ink);
  font-weight: 600;
  transition: color .18s;
}
.ds-faq-q-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 5px;
}
.ds-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}
.ds-faq-a.open {
  max-height: 1400px;
}
.ds-faq-a-inner {
  padding: 0 4px 24px 46px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
}
.ds-faq-a-inner p {
  margin-bottom: 12px;
}
.ds-faq-a-inner p:last-child {
  margin-bottom: 0;
}
.ds-faq-a-inner strong {
  color: var(--ink);
  font-weight: 700;
}
.ds-faq-a-inner ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.ds-faq-a-inner li {
  margin-bottom: 6px;
}
.ds-faq-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--gray-500);
  font-size: 14.5px;
  display: none;
}
.ds-faq-empty.is-visible {
  display: block;
}
.ds-faq-highlight {
  background: rgba(255, 214, 0, .28);
  border-radius: 2px;
  padding: 0 1px;
}

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1180px) {
  .ds-article__head {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
  }
  .ds-article__layout {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 40px;
  }
  .ds-article__title {
    font-size: 35px;
  }
}

@media (max-width: 1024px) {
  .ds-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Sidebar drops below the article body */
  .ds-article__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .ds-article__aside-sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .ds-article__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ds-article__cover {
    max-width: 620px;
  }
}

@media (max-width: 720px) {
  .ds-section {
    padding: 56px 0;
  }
  .ds-page-title {
    padding: 36px 0 4px;
  }
  .ds-page-title + .ds-section {
    padding-top: 32px;
  }
  .ds-page-title__heading {
    font-size: 26px;
  }
  .ds-page-title__sub {
    font-size: 14px;
  }
  .ds-section__title {
    font-size: 26px;
  }
  .ds-section__sub {
    font-size: 14px;
  }

  .ds-articles-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ds-card__body {
    padding: 18px 18px 0;
  }
  .ds-card__meta {
    padding: 12px 18px;
    gap: 12px;
    font-size: 12px;
  }
  .ds-card__title {
    font-size: 16px;
  }
  .ds-card__desc {
    font-size: 13.5px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .ds-share {
    margin-left: 0;
    width: 100%;
    padding-top: 4px;
  }
  .ds-share__label {
    margin-right: auto;
  }

  .ds-article {
    padding: 30px 0 60px;
  }
  .ds-article__head {
    padding-bottom: 22px;
    margin-bottom: 28px;
  }
  .ds-article__title {
    font-size: 27px;
    letter-spacing: -.4px;
  }
  .ds-article__lead {
    font-size: 15.5px;
  }
  .ds-article__content {
    font-size: 15.5px;
    line-height: 1.74;
  }
  .ds-article__content h2 {
    font-size: 21px;
    margin: 32px 0 12px;
    padding-top: 14px;
  }
  .ds-article__content h3 {
    font-size: 17.5px;
  }
  .ds-article__content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .ds-article__meta {
    gap: 12px;
    font-size: 12.5px;
  }
  .ds-article__actions {
    gap: 12px;
  }
  .ds-action-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Sidebar widgets become a single stack */
  .ds-widget {
    padding: 17px;
  }
  .ds-toc__list {
    max-height: 260px;
  }

  /* Comment form */
  .ds-comment-form {
    padding: 18px;
  }
  .ds-comment-form__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ds-comment-form__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ds-comment-form__foot .ds-btn {
    width: 100%;
  }

  .ds-comment {
    gap: 11px;
    padding: 16px 0;
  }
  .ds-comment--new {
    padding: 14px;
  }
  .ds-comment__avatar {
    width: 36px;
    height: 36px;
    font-size: 13.5px;
  }
  .ds-comment__text {
    font-size: 14px;
  }
  .ds-comment__name {
    font-size: 13.5px;
  }

  .ds-faq-search input {
    height: 48px;
    font-size: 15px;
  }
  .ds-faq-q {
    padding: 16px 2px;
    gap: 12px;
  }
  .ds-faq-q-text {
    font-size: 15px;
  }
  .ds-faq-a-inner {
    padding: 0 2px 20px 38px;
    font-size: 14.5px;
  }
  .ds-faq-q-icon {
    width: 23px;
    height: 23px;
  }
}

@media (max-width: 400px) {
  .ds-card__meta {
    gap: 10px;
  }
  .ds-faq-a-inner {
    padding-left: 34px;
  }
  .ds-article__title {
    font-size: 24px;
  }
}

/* ───────────────────────── RTL (Arabic) ───────────────────────── */
html[dir="rtl"] .ds-faq-search svg {
  left: auto;
  right: 16px;
}
html[dir="rtl"] .ds-faq-search input {
  padding: 0 46px 0 46px;
}
html[dir="rtl"] .ds-faq-search__clear {
  right: auto;
  left: 14px;
}
html[dir="rtl"] .ds-faq-a-inner {
  padding: 0 46px 24px 4px;
}
@media (max-width: 720px) {
  html[dir="rtl"] .ds-faq-a-inner {
    padding: 0 38px 20px 2px;
  }
}
html[dir="rtl"] .ds-share {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 720px) {
  html[dir="rtl"] .ds-share {
    margin-right: 0;
  }
}
/* The share button row reads right-to-left: label first, then buttons */
html[dir="rtl"] .ds-share__label {
  margin-right: 0;
  margin-left: auto;
}
@media (max-width: 720px) {
  html[dir="rtl"] .ds-share__label {
    margin-left: 0;
  }
}
/* Card media tag sits on the right in RTL */
html[dir="rtl"] .ds-card__tag {
  left: auto;
  right: 12px;
}
/* Keep the article back-link arrow pointing right in RTL */
html[dir="rtl"] .ds-article__back svg {
  transform: scaleX(-1);
}

/* ── Article journal layout: RTL ──
   CSS Grid already places the first track on the right in RTL, so the
   main column stays on the reading side and the sidebar moves to the
   opposite edge automatically. No column overrides are needed here —
   only the text-direction tweaks below. */
html[dir="rtl"] .ds-faq-q {
  text-align: right;
}
html[dir="rtl"] .ds-article__content ul,
html[dir="rtl"] .ds-article__content ol {
  padding-left: 0;
  padding-right: 22px;
}
html[dir="rtl"] .ds-article__content blockquote {
  border-left: 0;
  border-right: 3px solid var(--blue-700);
  border-radius: var(--radius) 0 0 var(--radius);
}
html[dir="rtl"] .ds-article__content th,
html[dir="rtl"] .ds-article__content td {
  text-align: right;
}
html[dir="rtl"] .ds-field input,
html[dir="rtl"] .ds-field textarea {
  text-align: right;
}
@media (max-width: 1180px) {
  html[dir="rtl"] .ds-article__head {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  html[dir="rtl"] .ds-article__layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
@media (max-width: 1024px) {
  html[dir="rtl"] .ds-article__head {
    grid-template-columns: minmax(0, 1fr);
  }
  html[dir="rtl"] .ds-article__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}