.page-articles,
.page-article {
    --mag-primary: #32348f;
    --mag-primary-dark: #1d1e61;
    --mag-secondary: #5fa8ab;
    --mag-ink: #1d293d;
    --mag-muted: #62748e;
    --mag-line: #e2e8f0;
    --mag-soft: #f8fafc;
    background: #fff;
}

.page-articles main,
.page-article main {
    overflow: hidden;
}

.page-articles .ava-container,
.page-article .ava-container {
    width: min(calc(100% - 40px), 1200px);
}

.articles-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #90a1b9;
    font-size: 13px;
    line-height: 24px;
}

.articles-breadcrumb a {
    color: #62748e;
    transition: color .2s ease;
}

.articles-breadcrumb a:hover {
    color: var(--mag-primary);
}

.articles-eyebrow,
.article-section-kicker {
    display: block;
    color: var(--mag-secondary);
    font-size: 14px;
    line-height: 28px;
    font-weight: 700;
}

/* Magazine listing */

.articles-hero {
    padding-block: 24px 56px;
    background: #fff;
}

.articles-hero__inner {
    position: relative;
    min-height: 358px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    gap: 64px;
    padding: 52px 72px;
    overflow: hidden;
    border-radius: 40px;
    background:
        radial-gradient(circle at 15% 15%, rgba(95, 168, 171, .13), transparent 26%),
        linear-gradient(135deg, #f8fafc 0%, #f3f4fb 100%);
}

.articles-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image: radial-gradient(rgba(50, 52, 143, .18) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}

.articles-hero__copy {
    position: relative;
    z-index: 2;
}

.articles-hero__copy .articles-breadcrumb {
    margin-block-end: 30px;
}

.articles-hero__copy h1 {
    margin: 8px 0 12px;
    color: var(--mag-primary-dark);
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -1.8px;
}

.articles-hero__copy > p {
    max-width: 610px;
    margin: 0;
    color: #45556c;
    font-size: 17px;
    line-height: 34px;
    text-align: justify;
}

.articles-hero__art {
    position: relative;
    z-index: 1;
    width: 360px;
    height: 258px;
    justify-self: end;
}

.articles-hero__pulse {
    position: absolute;
    inset: 30px 18px 4px 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(95, 168, 171, .2), rgba(50, 52, 143, .08));
    box-shadow: inset 0 0 0 1px rgba(50, 52, 143, .08);
}

.articles-hero__page {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 58px;
    width: 210px;
    height: 246px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 58px 30px 30px;
    border: 1px solid rgba(50, 52, 143, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 55px rgba(50, 52, 143, .14);
    transform: rotate(-5deg);
}

.articles-hero__page::before {
    content: "";
    position: absolute;
    inset-block-start: 24px;
    inset-inline-start: 30px;
    width: 42px;
    height: 13px;
    border-radius: 20px;
    background: var(--mag-secondary);
}

.articles-hero__page i {
    height: 8px;
    display: block;
    border-radius: 9px;
    background: #e8e8f3;
}

.articles-hero__page i:nth-child(2) { width: 78%; }
.articles-hero__page i:nth-child(3) { width: 58%; }

.articles-hero__page b {
    width: 74px;
    height: 74px;
    display: block;
    margin-block-start: 2px;
    border-radius: 20px;
    background: linear-gradient(145deg, #32348f, #5fa8ab);
}

.articles-hero__page b::before,
.articles-hero__page b::after,
.articles-hero__cross::before,
.articles-hero__cross::after {
    content: "";
    position: absolute;
    border-radius: 4px;
    background: #fff;
}

.articles-hero__page b::before { width: 36px; height: 10px; margin: 32px 19px; }
.articles-hero__page b::after { width: 10px; height: 36px; margin: 19px 32px; }

.articles-hero__cross {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--mag-secondary);
    box-shadow: 0 10px 22px rgba(95, 168, 171, .25);
}

.articles-hero__cross::before { width: 18px; height: 5px; inset: 14px 8px; }
.articles-hero__cross::after { width: 5px; height: 18px; inset: 8px 14px; }
.articles-hero__cross--one { inset-block-start: 18px; inset-inline-start: 22px; transform: rotate(8deg); }
.articles-hero__cross--two { inset-block-end: 20px; inset-inline-end: 12px; transform: scale(.72) rotate(-10deg); background: var(--mag-primary); }

.articles-list {
    padding-block: 56px 96px;
}

.articles-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-block-end: 32px;
}

.articles-toolbar__heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.articles-toolbar__heading span {
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    border-radius: 15px;
    color: var(--mag-primary);
    background: #e8e8f3;
    font-weight: 800;
}

.articles-toolbar h2 {
    margin: 0;
    color: var(--mag-ink);
    font-size: 30px;
    line-height: 46px;
    font-weight: 800;
}

.articles-search {
    width: 330px;
    height: 52px;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--mag-line);
    border-radius: 16px;
    background: #fff;
    transition: border .2s ease, box-shadow .2s ease;
}

.articles-search:focus-within {
    border-color: rgba(50, 52, 143, .45);
    box-shadow: 0 0 0 4px rgba(50, 52, 143, .06);
}

.articles-search input {
    min-width: 0;
    flex: 1;
    padding: 10px 18px;
    border: 0;
    outline: 0;
    color: var(--mag-ink);
    background: transparent;
}

.articles-search button {
    width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: var(--mag-primary);
    background: transparent;
}

.articles-search svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.articles-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-end: 40px;
}

.articles-categories a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px;
    border: 1px solid var(--mag-line);
    border-radius: 14px;
    color: #45556c;
    background: #fff;
    font-weight: 600;
    transition: .2s ease;
}

.articles-categories a:hover,
.articles-categories a.is-active {
    border-color: var(--mag-primary);
    color: #fff;
    background: var(--mag-primary);
}

.articles-categories small {
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: inherit;
    background: rgba(144, 161, 185, .16);
    font-size: 10px;
}

.articles-result-note {
    margin: -14px 0 32px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #45556c;
    background: var(--mag-soft);
}

.articles-result-note a {
    margin-inline-start: 12px;
    color: var(--mag-primary);
    font-weight: 700;
}

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

.article-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mag-line);
    border-radius: 28px;
    background: #fff;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.article-card:hover {
    transform: translateY(-6px);
    border-color: rgba(50, 52, 143, .18);
    box-shadow: 0 22px 45px rgba(15, 23, 43, .08);
}

.article-card__media {
    position: relative;
    height: 230px;
    display: block;
    margin: 7px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--mag-soft);
}

.article-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.article-card:hover .article-card__media img {
    transform: scale(1.035);
}

.article-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    padding-block-end: 67px;
    background:
        radial-gradient(circle at 76% 20%, rgba(95,168,171,.28), transparent 24%),
        linear-gradient(145deg, #f1f5f9, #e8e8f3);
}

.article-card__placeholder::before {
    content: "+";
    position: absolute;
    inset-block-start: 65px;
    color: var(--mag-primary);
    font-size: 60px;
    line-height: 60px;
    font-weight: 300;
}

.article-card__placeholder i {
    height: 7px;
    border-radius: 6px;
    background: rgba(50,52,143,.16);
}

.article-card__placeholder i:nth-child(1) { width: 62px; }
.article-card__placeholder i:nth-child(2) { width: 38px; }
.article-card__placeholder i:nth-child(3) { width: 22px; }

.article-card__category {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    padding: 4px 13px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 12px;
    color: var(--mag-primary-dark);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
}

.article-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 17px 22px 24px;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #90a1b9;
    font-size: 12px;
    line-height: 24px;
}

.article-card__meta > span[aria-hidden] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mag-secondary);
}

.article-card h2 {
    width: 100%;
    margin: 8px 0 7px;
    color: var(--mag-ink);
    font-size: 20px;
    line-height: 34px;
    font-weight: 800;
}

.article-card h2 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-card p {
    display: -webkit-box;
    min-height: 56px;
    margin: 0 0 14px;
    overflow: hidden;
    color: var(--mag-muted);
    font-size: 13px;
    line-height: 28px;
    text-align: justify;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: auto;
    color: var(--mag-primary);
    font-size: 13px;
    line-height: 28px;
    font-weight: 800;
}

.article-card__link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.article-card:hover .article-card__link span { transform: translateX(-4px); }

.articles-empty {
    grid-column: 1 / -1;
    padding: 75px 24px;
    border: 1px dashed #cad5e2;
    border-radius: 28px;
    background: var(--mag-soft);
    text-align: center;
}

.articles-empty > span { color: var(--mag-secondary); font-size: 34px; }
.articles-empty h2 { margin: 8px 0 2px; color: var(--mag-ink); }
.articles-empty p { margin: 0 0 18px; color: var(--mag-muted); }
.articles-empty a { color: var(--mag-primary); font-weight: 800; }

.articles-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-block-start: 52px;
}

.articles-pagination > a,
.articles-pagination > span:not(.articles-pagination__status) {
    min-width: 74px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
    border: 1px solid var(--mag-line);
    border-radius: 13px;
    color: var(--mag-primary);
    background: #fff;
    font-weight: 700;
}

.articles-pagination .is-disabled { color: #cad5e2 !important; }
.articles-pagination__status { color: var(--mag-muted); }

.articles-cta {
    padding-block: 0 96px;
}

.articles-cta__panel {
    min-height: 172px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 38px 56px;
    border-radius: 32px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 30%, rgba(95,168,171,.48), transparent 32%),
        linear-gradient(120deg, #1d1e61, #32348f);
}

.articles-cta__panel span { color: #bbbbda; }
.articles-cta__panel h2 { margin: 3px 0 0; font-size: 27px; line-height: 44px; font-weight: 800; }
.articles-cta__panel a { min-width: 210px; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding-inline: 22px; border-radius: 17px; color: var(--mag-primary); background: #fff; font-weight: 800; }

/* Single article */

.article-header {
    padding-block: 32px 42px;
    text-align: center;
}

.article-header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article-header .articles-breadcrumb {
    width: 100%;
    margin-block-end: 38px;
    text-align: right;
}

.article-header__category {
    display: inline-flex;
    padding: 4px 15px;
    border-radius: 12px;
    color: var(--mag-primary);
    background: #e8e8f3;
    font-size: 13px;
    font-weight: 800;
}

.article-header h1 {
    max-width: 940px;
    margin: 18px auto 16px;
    color: var(--mag-primary-dark);
    font-size: clamp(34px, 4.1vw, 54px);
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: -1.6px;
}

.article-header > .article-header__inner > p {
    max-width: 780px;
    margin: 0 auto;
    color: #62748e;
    font-size: 17px;
    line-height: 34px;
}

.article-header__meta {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-block-start: 28px;
    color: #90a1b9;
    font-size: 12px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mag-ink);
    text-align: right;
}

.article-author > i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--mag-primary), var(--mag-secondary));
    font-size: 19px;
    font-style: normal;
    font-weight: 900;
}

.article-author > span { display: flex; flex-direction: column; line-height: 20px; }
.article-author small { color: #90a1b9; font-size: 10px; }
.article-author strong { font-size: 12px; font-weight: 800; }
.article-header__divider { width: 1px; height: 30px; background: var(--mag-line); }
.article-header__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mag-secondary); }

.article-cover {
    position: relative;
    height: 600px;
    margin-block: 0 72px;
    overflow: hidden;
    border-radius: 38px;
    background: var(--mag-soft);
    box-shadow: 0 30px 65px rgba(15, 23, 43, .08);
}

.article-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(15, 23, 43, .05);
    border-radius: inherit;
    pointer-events: none;
}

.article-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-cover--empty > div {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(95,168,171,.28), transparent 25%),
        radial-gradient(circle at 82% 78%, rgba(50,52,143,.16), transparent 28%),
        linear-gradient(145deg, #f8fafc, #e8e8f3);
}

.article-cover--empty span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 120px;
    height: 120px;
    border-radius: 36px;
    background: linear-gradient(145deg, var(--mag-primary), var(--mag-secondary));
    transform: translate(-50%, -50%);
}

.article-cover--empty span::before,
.article-cover--empty span::after {
    content: "";
    position: absolute;
    inset: 52px 28px;
    border-radius: 6px;
    background: #fff;
}

.article-cover--empty span::after { inset: 28px 52px; }

.article-layout {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 820px);
    justify-content: center;
    gap: 48px;
    padding-block-end: 80px;
    direction: ltr;
}

.article-share {
    position: sticky;
    inset-block-start: 132px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    direction: rtl;
}

.article-share > span {
    color: #90a1b9;
    font-size: 11px;
    line-height: 24px;
}

.article-share a,
.article-share button {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mag-line);
    border-radius: 14px;
    color: var(--mag-primary);
    background: #fff;
    transition: .2s ease;
}

.article-share a svg,
.article-share button svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: currentColor;
}

.article-share .article-share__copy svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.article-share [data-tooltip]::before,
.article-share [data-tooltip]::after {
    position: absolute;
    z-index: 20;
    inset-inline-start: calc(100% + 10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    transform: translateX(4px);
}

.article-share [data-tooltip]::before {
    content: attr(data-tooltip);
    inset-block-start: 50%;
    width: max-content;
    max-width: 170px;
    padding: 5px 9px;
    border-radius: 8px;
    color: #fff;
    background: #1d293d;
    box-shadow: 0 8px 20px rgba(15, 23, 43, .16);
    font-family: var(--ava-font);
    font-size: 10px;
    line-height: 20px;
    font-weight: 600;
    white-space: nowrap;
    transform: translate(4px, -50%);
}

.article-share [data-tooltip]::after {
    content: "";
    inset-block-start: 50%;
    inset-inline-start: calc(100% + 5px);
    border-block: 5px solid transparent;
    border-inline-end: 5px solid #1d293d;
    transform: translate(4px, -50%);
}

.article-share [data-tooltip]:hover::before,
.article-share [data-tooltip]:hover::after,
.article-share [data-tooltip]:focus-visible::before,
.article-share [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.article-share a:hover,
.article-share button:hover { border-color: var(--mag-primary); color: #fff; background: var(--mag-primary); }

.article-main { min-width: 0; direction: rtl; }

.article-body {
    color: #314158;
    font-size: 17px;
    line-height: 2.15;
}

.article-body > *:first-child { margin-block-start: 0; }
.article-body p { margin: 0 0 24px; text-align: justify; }
.article-body h2 { margin: 56px 0 18px; color: var(--mag-primary-dark); font-size: 30px; line-height: 48px; font-weight: 900; }
.article-body h3 { margin: 40px 0 14px; color: var(--mag-ink); font-size: 23px; line-height: 40px; font-weight: 800; }
.article-body h4 { margin: 32px 0 12px; color: var(--mag-ink); font-size: 19px; line-height: 36px; font-weight: 800; }
.article-body a { color: var(--mag-primary); text-decoration: underline; text-underline-offset: 4px; }
.article-body strong { color: var(--mag-ink); font-weight: 800; }
.article-body ul,
.article-body ol { display: grid; gap: 10px; margin: 18px 0 30px; padding-inline-start: 0; padding-inline-end: 26px; }
.article-body li { padding-inline-start: 8px; }
.article-body li::marker { color: var(--mag-secondary); font-weight: 800; }
.article-body img { width: auto; max-width: 100%; height: auto; display: block; margin: 34px auto; border-radius: 24px; }
.article-body blockquote { position: relative; margin: 38px 0; padding: 28px 34px 28px 28px; border: 0; border-inline-start: 5px solid var(--mag-secondary); border-radius: 22px; color: #45556c; background: #f8fafc; font-size: 18px; line-height: 36px; }
.article-body table { width: 100%; margin: 32px 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--mag-line); border-radius: 18px; font-size: 14px; }
.article-body th,
.article-body td { padding: 13px 16px; border-block-end: 1px solid var(--mag-line); text-align: right; }
.article-body th { color: var(--mag-primary-dark); background: #f1f5f9; font-weight: 800; }
.article-body tr:last-child td { border-block-end: 0; }

.article-faq {
    margin-block-start: 72px;
    padding-block-start: 64px;
    border-block-start: 1px solid var(--mag-line);
}

.article-faq header { margin-block-end: 26px; }
.article-faq header > span { color: var(--mag-secondary); font-size: 13px; font-weight: 800; }
.article-faq h2 { margin: 5px 0 0; color: var(--mag-primary-dark); font-size: 30px; line-height: 48px; font-weight: 900; }
.article-faq__list { display: grid; gap: 12px; }
.article-faq details { overflow: hidden; border: 1px solid var(--mag-line); border-radius: 18px; background: #fff; }
.article-faq details[open] { border-color: rgba(50,52,143,.22); background: #f8fafc; }
.article-faq summary { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; color: var(--mag-ink); cursor: pointer; list-style: none; font-size: 15px; line-height: 30px; font-weight: 800; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary span { position: relative; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: #e8e8f3; }
.article-faq summary span::before,
.article-faq summary span::after { content: ""; position: absolute; inset: 13px 8px; border-radius: 2px; background: var(--mag-primary); }
.article-faq summary span::after { inset: 8px 13px; transition: transform .2s ease; }
.article-faq details[open] summary span::after { transform: rotate(90deg); }
.article-faq details > div { padding: 0 20px 18px; }
.article-faq details p { margin: 0; color: var(--mag-muted); font-size: 14px; line-height: 29px; text-align: justify; }

.article-end {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-block-start: 58px;
    padding: 18px 24px;
    border-radius: 20px;
    color: #45556c;
    background: #f8fafc;
}

.article-end a { padding: 8px 15px; border-radius: 12px; color: var(--mag-primary); background: #e8e8f3; font-weight: 800; }

/* Comments, mirroring the PDP visual language */

.article-comments {
    padding-block: 80px 96px;
    background: #f8fafc;
}

.article-comments__grid {
    display: grid;
    grid-template-columns: 385px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    direction: ltr;
}

.article-comment-form,
.article-comments__list { direction: rtl; }

.article-comment-form {
    position: sticky;
    inset-block-start: 122px;
}

.article-comment-form h2,
.article-comments__head h2 {
    margin: 4px 0 24px;
    color: var(--mag-primary-dark);
    font-size: 28px;
    line-height: 44px;
    font-weight: 900;
}

.article-comment-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--mag-line);
    border-radius: 25px;
    background: #fff;
}

.article-comment-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.article-comment-form label > span { color: #62748e; font-size: 12px; line-height: 24px; }
.article-comment-form label small { color: #90a1b9; font-size: 9px; }
.article-comment-form input,
.article-comment-form textarea { width: 100%; border: 1px solid var(--mag-line); border-radius: 12px; outline: 0; color: var(--mag-ink); background: #f8fafc; transition: .2s ease; }
.article-comment-form input { height: 44px; padding: 7px 11px; }
.article-comment-form textarea { height: 142px; resize: vertical; padding: 11px; line-height: 27px; }
.article-comment-form input:focus,
.article-comment-form textarea:focus { border-color: rgba(50,52,143,.5); background: #fff; box-shadow: 0 0 0 3px rgba(50,52,143,.06); }
.article-comment-form__body { grid-column: 1 / -1; }
.article-comment-form__fields > button { grid-column: 1 / -1; height: 50px; border: 0; border-radius: 14px; color: #fff; background: var(--mag-primary); font-weight: 800; transition: .2s ease; }
.article-comment-form__fields > button:hover { background: var(--mag-primary-dark); }
.article-comment-form__notice { margin: 9px 4px 0; color: #90a1b9; font-size: 10px; line-height: 21px; }
.article-honeypot { position: absolute !important; inset-inline-start: -9999px !important; }
.article-comment-success,
.article-comment-errors { margin-block-end: 12px; padding: 11px 14px; border-radius: 12px; font-size: 12px; line-height: 24px; }
.article-comment-success { color: #176b52; background: #e8f7f1; }
.article-comment-errors { color: #aa3043; background: #fff0f2; }
.article-replying { margin-block-end: 10px; padding: 9px 12px; border-radius: 11px; color: var(--mag-muted); background: #e8e8f3; font-size: 12px; }
.article-replying button { float: left; padding: 0; border: 0; color: #aa3043; background: transparent; font-size: 11px; }

.article-comments__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-block-end: 25px;
}

.article-comments__head h2 { margin-block-end: 0; }
.article-comments__head > span { min-width: 86px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 12px; border-radius: 12px; color: var(--mag-primary); background: #e8e8f3; font-size: 11px; font-weight: 800; }
.article-comment-cards { display: grid; gap: 18px; }

.article-comment-card {
    position: relative;
    display: grid;
    gap: 17px;
    padding: 25px 28px;
    border: 1px solid var(--mag-line);
    border-radius: 28px;
    background: #fff;
}

.article-comment-card--reply {
    margin-inline-start: 64px;
    border-color: rgba(95,168,171,.28);
    background: linear-gradient(90deg, #fff, #f8fafc);
}

.article-comment-card header { display: flex; align-items: center; gap: 13px; }
.article-comment-card__avatar { width: 48px; height: 48px; display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; border: 1px solid #cad5e2; border-radius: 14px; color: var(--mag-primary); background: #f1f5f9; font-size: 17px; font-weight: 900; }
.article-comment-card header > div { min-width: 0; display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.article-comment-card header strong { color: var(--mag-ink); font-size: 14px; line-height: 26px; font-weight: 900; }
.article-comment-card header time { width: 100%; color: #90a1b9; font-size: 10px; line-height: 20px; }
.article-comment-card__admin { padding: 1px 8px; border-radius: 8px; color: #307477; background: rgba(95,168,171,.13); font-size: 9px; line-height: 19px; font-weight: 800; }
.article-comment-card > p { margin: 0; color: #62748e; font-size: 14px; line-height: 29px; text-align: justify; white-space: pre-line; }
.article-comment-card > button { width: max-content; padding: 0; border: 0; color: var(--mag-primary); background: transparent; font-size: 12px; line-height: 24px; font-weight: 800; }
.article-comments__empty { padding: 55px 20px; border: 1px dashed #cad5e2; border-radius: 25px; color: var(--mag-muted); background: #fff; text-align: center; }
.article-comments__empty span { color: var(--mag-primary); font-size: 18px; font-weight: 900; }
.article-comments__empty p { margin: 5px 0 0; }

.related-articles {
    padding-block: 88px 104px;
}

.related-articles > .ava-container > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 32px;
}

.related-articles header > div > span { color: var(--mag-secondary); font-size: 13px; font-weight: 800; }
.related-articles h2 { margin: 3px 0 0; color: var(--mag-primary-dark); font-size: 32px; line-height: 48px; font-weight: 900; }
.related-articles header > a { display: inline-flex; gap: 8px; color: var(--mag-primary); font-weight: 800; }

@media (max-width: 1023px) {
    .articles-hero__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 25px; padding-inline: 45px; }
    .articles-hero__art { width: 290px; transform: scale(.86); transform-origin: center; }
    .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-cover { height: min(54vw, 550px); }
    .article-layout { grid-template-columns: 52px minmax(0, 740px); gap: 28px; }
    .article-comments__grid { grid-template-columns: 330px minmax(0, 1fr); gap: 32px; }
    .article-comment-form__fields { grid-template-columns: 1fr; }
    .article-comment-form__body,
    .article-comment-form__fields > button { grid-column: auto; }
}

@media (max-width: 767px) {
    .page-articles .ava-container,
    .page-article .ava-container { width: min(calc(100% - 32px), 1200px); }
    .articles-breadcrumb { gap: 7px; font-size: 11px; line-height: 22px; }

    .articles-hero { padding-block: 12px 30px; }
    .articles-hero__inner { min-height: 440px; display: block; padding: 28px 24px; border-radius: 28px; }
    .articles-hero__inner::before { mask-image: linear-gradient(0deg, #000, transparent); }
    .articles-hero__copy .articles-breadcrumb { margin-block-end: 22px; }
    .articles-hero__copy h1 { margin-block: 4px 7px; font-size: 38px; line-height: 1.4; }
    .articles-hero__copy > p { font-size: 14px; line-height: 28px; text-align: right; }
    .articles-hero__art { position: absolute; inset-block-end: -45px; inset-inline-start: 50%; width: 280px; height: 220px; transform: translateX(-50%) scale(.72); transform-origin: bottom; }

    .articles-list { padding-block: 36px 64px; }
    .articles-toolbar { display: grid; gap: 18px; margin-block-end: 20px; }
    .articles-toolbar__heading span { min-width: 40px; height: 40px; border-radius: 12px; }
    .articles-toolbar h2 { font-size: 24px; line-height: 40px; }
    .articles-search { width: 100%; }
    .articles-categories { flex-wrap: nowrap; margin-inline: -16px; margin-block-end: 28px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
    .articles-categories::-webkit-scrollbar { display: none; }
    .articles-categories a { flex: 0 0 auto; }
    .articles-grid { grid-template-columns: 1fr; gap: 20px; }
    .article-card { border-radius: 24px; }
    .article-card__media { height: 211px; border-radius: 19px; }
    .article-card__body { padding: 14px 18px 20px; }
    .article-card h2 { font-size: 19px; line-height: 32px; }
    .articles-pagination { gap: 7px; }
    .articles-pagination__status { font-size: 11px; }
    .articles-pagination > a,
    .articles-pagination > span:not(.articles-pagination__status) { min-width: 58px; height: 40px; padding-inline: 8px; font-size: 11px; }
    .articles-cta { padding-block-end: 68px; }
    .articles-cta__panel { display: grid; padding: 28px 24px; border-radius: 25px; text-align: center; }
    .articles-cta__panel h2 { font-size: 21px; line-height: 37px; }
    .articles-cta__panel a { min-width: 0; width: 100%; }

    .article-header { padding-block: 20px 28px; }
    .article-header .articles-breadcrumb { flex-wrap: nowrap; margin-block-end: 27px; overflow: hidden; white-space: nowrap; }
    .article-header .articles-breadcrumb > * { flex: 0 0 auto; }
    .article-header h1 { margin: 13px 0 10px; font-size: 31px; line-height: 1.55; letter-spacing: -.9px; }
    .article-header > .article-header__inner > p { font-size: 14px; line-height: 29px; }
    .article-header__meta { flex-wrap: wrap; gap: 7px 10px; margin-block-start: 22px; }
    .article-author { width: 100%; justify-content: center; margin-block-end: 5px; }
    .article-header__divider { display: none; }
    .article-author > i { width: 40px; height: 40px; border-radius: 12px; }
    .article-cover { height: 54vw; min-height: 205px; max-height: 310px; margin-block-end: 42px; border-radius: 24px; }
    .article-cover--empty span { width: 76px; height: 76px; border-radius: 23px; }
    .article-cover--empty span::before { inset: 33px 18px; }
    .article-cover--empty span::after { inset: 18px 33px; }
    .article-layout { display: block; padding-block-end: 54px; }
    .article-share { position: static; flex-direction: row; justify-content: flex-start; margin-block-end: 30px; }
    .article-share > span { margin-inline-end: 4px; }
    .article-share a,
    .article-share button { width: 40px; height: 40px; border-radius: 12px; }
    .article-share [data-tooltip]::before,
    .article-share [data-tooltip]::after { display: none; }
    .article-body { font-size: 15px; line-height: 2.05; }
    .article-body p { margin-block-end: 20px; text-align: right; }
    .article-body h2 { margin-block-start: 42px; font-size: 25px; line-height: 42px; }
    .article-body h3 { margin-block-start: 32px; font-size: 21px; line-height: 37px; }
    .article-body img { margin-block: 26px; border-radius: 18px; }
    .article-body blockquote { margin-block: 28px; padding: 20px 22px; border-radius: 17px; font-size: 15px; line-height: 31px; }
    .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
    .article-faq { margin-block-start: 50px; padding-block-start: 44px; }
    .article-faq h2 { font-size: 25px; line-height: 42px; }
    .article-faq summary { min-height: 62px; padding: 14px 16px; font-size: 14px; line-height: 27px; }
    .article-end { display: grid; justify-items: start; margin-block-start: 40px; }

    .article-comments { padding-block: 56px 68px; }
    .article-comments__grid { display: flex; flex-direction: column; gap: 56px; }
    .article-comment-form { position: static; width: 100%; }
    .article-comment-form h2,
    .article-comments__head h2 { margin-block-end: 18px; font-size: 24px; line-height: 40px; }
    .article-comments__list { width: 100%; }
    .article-comments__head { align-items: center; }
    .article-comments__head > span { min-width: 72px; }
    .article-comment-card { gap: 14px; padding: 20px; border-radius: 22px; }
    .article-comment-card--reply { margin-inline-start: 22px; }
    .article-comment-card > p { text-align: right; }
    .related-articles { padding-block: 64px 78px; }
    .related-articles h2 { font-size: 25px; line-height: 42px; }
    .related-articles header > a { font-size: 12px; }
}

/* Article comments intentionally reuse the product-review UI. */
.page-article .article-comments--product {
    --pd-primary: #32348f;
    --pd-secondary: #5fa8ab;
    --pd-secondary-soft: #edf5f6;
    --pd-n0: #f8fafc;
    --pd-n100: #f1f5f9;
    --pd-n200: #e2e8f0;
    --pd-n300: #cad5e2;
    --pd-n400: #90a1b9;
    --pd-n500: #62748e;
    --pd-n600: #45556c;
    --pd-n700: #314158;
    --pd-n800: #1d293d;
    --pd-n900: #0f172b;
    padding-block: 0;
    background: #fff;
}

.page-article .article-comments--product .pd-review-form__contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-block-end: 12px;
    direction: rtl;
}

.page-article .article-comments--product .pd-review-form__contact-fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--pd-n500);
    font-size: 12px;
    line-height: 24px;
}

.page-article .article-comments--product .pd-review-form__contact-fields label small {
    color: var(--pd-n400);
    font-size: 9px;
}

.page-article .article-comments--product .pd-review-form__contact-fields input {
    width: 100%;
    height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--pd-n200);
    border-radius: 14px;
    outline: 0;
    color: var(--pd-n700);
    background: var(--pd-n0);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.page-article .article-comments--product .pd-review-form__contact-fields input:focus {
    border-color: rgba(50, 52, 143, .5);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(50, 52, 143, .06);
}

@media (max-width: 991px) {
    .page-article .article-comments--product {
        padding-block: 0;
    }

    .page-article .article-comments--product .pd-review-form__contact-fields {
        grid-template-columns: 1fr;
    }
}