/* assets/css/page-article.css - копия без комментариев, править исходник */
.article-page { color: #252B2B; background: #fff; }  .article-heading { padding: 46px 32px 45px; border-bottom: 1px solid #E3E5E6; box-sizing: border-box; } .article-breadcrumbs { display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; white-space: nowrap; font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 22px; } .article-breadcrumbs a { color: #252B2B; text-decoration: none; } .article-breadcrumbs > span:last-child { min-width: 0; max-width: 364px; overflow: hidden; color: #979E9F; text-overflow: ellipsis; }  .article-breadcrumbs > span:nth-last-child(2) { color: #979E9F; } .article-heading h1 { max-width: 906px; margin: 18px auto 0; text-align: center; font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 64px; }  .article-heading__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; min-height: 34px; margin-top: 46px; white-space: nowrap; } .article-heading__meta > span, .article-heading__meta > time { display: flex; align-items: center; gap: 8px; color: #555B5C; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 24px; } .article-heading__meta svg { width: 16px; height: 16px; flex: 0 0 16px; }  .article-heading__category { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px; border: 1px solid #E3E5E6; border-radius: 999px; box-sizing: border-box; color: #555B5C; text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 20px; } .article-heading__category:hover { border-color: #006C66; color: #006C66; }  .article-cover { width: 100%; aspect-ratio: 1920 / 794; margin: 0; overflow: hidden; } .article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .article-layout { display: grid; grid-template-columns: 321px 692px 321px; gap: 32px; align-items: start; margin-top: 60px; padding-bottom: 132px; } .article-toc, .article-related { position: sticky; top: 132px; } .article-toc h2, .article-related h2 { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 26px; }  .article-toc nav { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; box-shadow: inset 2px 0 #E3E5E6; } .article-toc a { display: flex; align-items: center; min-height: 38px; padding: 8px 0 8px 14px; border-left: 2px solid transparent; box-sizing: border-box; color: #979E9F; text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 22px; transition: border-color .2s ease, color .2s ease; } .article-toc a:hover, .article-toc a.is-active { border-left-color: #006C66; color: #006C66; } .article-body { min-width: 0; color: #555B5C; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 26px; } .article-body p { margin: 0; } .article-body p + p { margin-top: 16px; } .article-body > .article-lead { margin: 0; } .article-body h2 { margin: 60px 0 30px; scroll-margin-top: 140px; color: #252B2B; font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 46px; } .article-body h3 { margin: 30px 0; color: #252B2B; font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: .025em; line-height: 32px; }  .article-body ul, .article-body ol { display: flex; flex-direction: column; gap: 8px; margin: -1px 0; padding: 0; list-style: none; } .article-body li { position: relative; min-height: 24px; padding-left: 20px; } .article-body ul li::before { content: '•'; position: absolute; top: -1px; left: 0; color: #00B189; font-size: 16px; font-weight: 700; } .article-body ol { counter-reset: article-step; } .article-body ol li { counter-increment: article-step; padding-left: 34px; } .article-body ol li::before { content: counter(article-step); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #006C66; font-size: 12px; font-weight: 600; }  .article-info { min-height: 134px; margin: 30px 0 0; padding: 28px 24px 28px 56px; border-left: 4px solid #006C66; border-radius: 0 8px 8px 0; box-sizing: border-box; color: #006C66; background: rgba(0,108,102,.05) url("/wp-content/themes/rokodil/assets/img/journal/article-info.svg") 24px 30px/20px 20px no-repeat; font: inherit; } .article-comparison { display: grid; gap: 8px; margin-top: 24px; padding: 24px 28px; border-radius: 8px; background: #F9F9F9; } .article-comparison strong { color: #252B2B; }  .article-product { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 20px; width: 692px; height: 217px; margin-top: 30px; padding: 24px; border: 1px solid #E3E5E6; border-radius: 8px; box-sizing: border-box; background: #fff; } .article-product__image { display: block; width: 160px; height: 160px; overflow: hidden; } .article-product__image img { display: block; width: 100%; height: 100%; object-fit: contain; } .article-product__details { position: relative; min-width: 0; padding-top: 36px; } .article-product__badge { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; color: #fff; background: #C60100; font-size: 12px; line-height: 14px; }  .article-product__name { display: -webkit-box; width: 360px; max-height: 40px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #252B2B; text-decoration: none; font-size: 14px; font-weight: 400; line-height: 20px; } .article-product__rating { display: flex; align-items: center; gap: 8px; height: 18px; margin-top: 12px; color: #555B5C; font-size: 13px; line-height: 18px; } .article-product__rating span { color: #FFD100; letter-spacing: 1.5px; } .article-product__rating b { font-weight: 500; } .article-product__price { position: absolute; top: 134px; left: 0; color: #252B2B; font-size: 20px; font-weight: 700; line-height: 26px; } .article-product__price del { display: none; } .article-product__sku { position: absolute; top: 28px; right: 24px; color: #979E9F; font-size: 12px; line-height: 15px; } .article-product__actions { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 10px; height: 40px; } .article-product__cart { display: flex; align-items: center; justify-content: center; width: 160px; height: 40px; border-radius: 4px; color: #fff; background: #006C66; text-decoration: none; font-size: 14px; font-weight: 500; } .article-product__cart-icon { display: none; width: 18px; height: 18px; } .article-product__actions button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; color: #555B5C; background: #F9F9F9; cursor: pointer; }  .article-product__actions button[data-compare-toggle].is-active { color: #006C66; } .article-tags { margin-top: 60px; padding-top: 24px; border-top: 1px solid #E3E5E6; } .article-tags > strong { display: block; margin-bottom: 14px; color: #252B2B; font-size: 16px; } .article-tags > div { display: flex; flex-wrap: wrap; gap: 8px; } .article-tags a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #E3E5E6; border-radius: 999px; color: #555B5C; text-decoration: none; font-size: 13px; } .article-tags a:hover { border-color: #006C66; color: #006C66; } .article-related h2 { height: 40px; border-bottom: 1px solid #F5F5F5; box-sizing: border-box; } .article-related__list { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .article-related__item { display: grid; grid-template-columns: 80px 1fr; gap: 16px; width: 321px; height: 80px; color: #252B2B; text-decoration: none; } .article-related__item > img { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; } .article-related__item > span { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 80px; font-size: 13px; font-weight: 500; line-height: 18px; } .article-related__item time { display: flex; align-items: center; gap: 8px; color: #979E9F; font-size: 12px; font-weight: 400; line-height: 16px; } .article-related__item time svg { width: 16px; height: 16px; flex: 0 0 16px; } @media (max-width: 1200px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); } .article-related { display: none; } .article-product { width: 100%; } } @media (max-width: 960px) {  .article-product { display: block; height: 160px; padding: 12px; } .article-product__image { position: absolute; top: 12px; left: 12px; width: 56px; height: 56px; } .article-product__details { position: static; padding-top: 0; } .article-product__badge { top: 12px; left: 80px; height: 22px; } .article-product__rating { position: absolute; top: 17px; left: 212px; height: 13px; margin: 0; gap: 6px; font-size: 12px; line-height: 13px; }  .article-product__rating span { display: inline-block; width: 13px; overflow: hidden; letter-spacing: 0; } .article-product__name { position: absolute; top: 44px; right: 12px; left: 80px; display: -webkit-box; width: auto; max-height: 48px; overflow: hidden; color: #242627; font-size: 12px; line-height: 16px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .article-product__price { position: absolute; top: 115px; left: 80px; margin: 0; font-size: 16px; line-height: 26px; }  .article-product__sku { top: 12px; right: 12px; max-width: 72px; text-align: right; font-size: 10px; line-height: 15px; } .article-product__actions { top: 108px; right: 12px; bottom: auto; left: auto; gap: 10px; } .article-product__cart { flex: 0 0 auto; width: 40px; height: 40px; box-shadow: 0 4px 14px rgba(0, 108, 102, .25); } .article-product__cart span { display: none; } .article-product__cart-icon { display: block; } } @media (max-width: 768px) {  .article-heading { padding: 20px 16px 24px; border-bottom: 0; } .article-breadcrumbs { display: none; }  .article-heading h1 { max-width: none; margin: 0; font-size: 36px; font-weight: 500; line-height: 40px; }  .article-heading__meta { gap: 8px 14px; min-height: 30px; margin: 24px -8px 0; } .article-heading__meta > span, .article-heading__meta > time { height: 24px; font-size: 12px; line-height: 20px; }  .article-heading__category { height: 30px; padding: 0 11.5px; border-color: #F5F5F5; font-size: 12px; line-height: 20px; }  .article-cover { aspect-ratio: 375 / 192; } .article-layout { display: flex; flex-direction: column; gap: 0; margin-top: 20px; padding-bottom: 80px; } .article-toc, .article-related { position: static; width: 100%; }  .article-toc { padding: 4px 0 0; } .article-toc--empty, .article-toc .article-tags { display: none; }  .article-toc nav { margin-top: 16px; box-shadow: none; } .article-toc a { padding-left: 12px; border-left-color: #E3E5E6; } .article-body { width: 100%; }  .article-body > .article-lead { margin-top: 42px; } .article-toc--empty + .article-body > .article-lead { margin-top: 4px; }  .article-body h2 { margin: 32px 0 24px; scroll-margin-top: 70px; font-size: 32px; line-height: 38px; } .article-body h3 { margin: 24px 0 24px; }  .article-body ul li::before { top: 50%; transform: translateY(-50%); }  .article-info { min-height: 0; margin-top: 24px; padding: 14px 16px 14px 44px; background-position: 12px 16px; font-size: 14px; line-height: 20px; } .article-product { margin-top: 24px; }  .article-related { display: block; margin-top: 80px; } .article-related h2 { width: 321px; max-width: 100%; } .article-related__item { width: 100%; } }