/* Страницы раздела «О препарате»: карточка препарата и статьи с оглавлением.
   Размеры в em от корневого кегля, как и во всём остальном шаблоне.
   Цвета, ширины и отступы сняты с макетов 2026 года. */

.p_page {
  padding: 3em 0 5em; }
  @media (min-width: 48em) {
    .p_page {
      padding: 4em 0 6em; } }
  @media (min-width: 62em) {
    .p_page {
      padding: 4em 0 8em; } }
  .p_page--wrapper {
    padding: 0 1.5em;
    margin: 0 auto;
    width: 100%; }
    @media (min-width: 48em) {
      .p_page--wrapper {
        width: 700px;
        padding: 0 1em; } }
    @media (min-width: 62em) {
      .p_page--wrapper {
        width: 920px; } }
    @media (min-width: 75em) {
      .p_page--wrapper {
        width: 130em;
        padding: 0; } }

/* Хлебные крошки */
.p_crumbs {
  margin-bottom: 3em; }
  @media (min-width: 62em) {
    .p_crumbs {
      margin-bottom: 2.8em; } }
  .p_crumbs li {
    display: inline;
    font-size: 1.6em;
    line-height: 1.4;
    color: #4B4B4B; }
    .p_crumbs li:after {
      content: '/';
      margin: 0 .5em; }
    .p_crumbs li:last-child:after {
      content: none; }
  .p_crumbs a {
    color: #4B4B4B; }
    .p_crumbs a:hover {
      color: #004FCC; }
  .p_crumbs .p_crumbs__current {
    color: #001582; }

/* Две колонки: оглавление и статья */
@media (min-width: 62em) {
  .p_layout {
    margin-top: 4.2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; } }

.p_toc {
  display: none; }
  @media (min-width: 62em) {
    .p_toc {
      display: block;
      position: -webkit-sticky;
      position: sticky;
      top: 4em;
      width: 28em;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      padding-left: 2em;
      border-left: 1px solid #D1D8E2; } }
  .p_toc li {
    margin-bottom: 1.2em; }
    .p_toc li:last-child {
      margin-bottom: 0; }
  .p_toc a {
    display: block;
    font-size: 1.8em;
    line-height: 1.25;
    color: #001582; }
    .p_toc a:hover {
      color: #004FCC; }
  .p_toc .p_toc__active a {
    font-weight: 700; }

/* Статья */
.p_article {
  scroll-margin-top: 6em; }
  @media (min-width: 62em) {
    .p_article {
      width: calc(100% - 33em); } }

.p_article h1 {
  color: #001582;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: .6em; }
  @media (min-width: 48em) {
    .p_article h1 {
      font-size: 3.4em; } }
  @media (min-width: 62em) {
    .p_article h1 {
      font-size: 3.8em; } }
.p_article h2 {
  scroll-margin-top: 6em;
  color: #001582;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.85em 0 .62em; }
  @media (min-width: 62em) {
    .p_article h2 {
      font-size: 2.6em; } }
.p_article h3 {
  color: #001582;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.4em 0 .5em; }
  @media (min-width: 62em) {
    .p_article h3 {
      font-size: 2em; } }
.p_article p {
  color: #4B4B4B;
  font-size: 1.6em;
  line-height: 1.25;
  margin-bottom: .9em; }
  @media (min-width: 62em) {
    .p_article p {
      font-size: 1.8em; } }
.p_article a {
  color: #004FCC; }
  .p_article a:hover {
    text-decoration: underline; }
.p_article strong {
  font-weight: 700; }
.p_article ul,
.p_article ol {
  margin: 0 0 1.6em; }
.p_article li {
  position: relative;
  color: #4B4B4B;
  font-size: 1.6em;
  line-height: 1.25;
  padding-left: 1.5em;
  margin-bottom: .25em; }
  @media (min-width: 62em) {
    .p_article li {
      font-size: 1.8em; } }
  .p_article li:last-child {
    margin-bottom: 0; }
  .p_article li li {
    font-size: 1em; }
.p_article ul > li:before {
  content: '';
  position: absolute;
  left: .25em;
  top: .5em;
  width: .4em;
  height: .4em;
  border-radius: 50%;
  background: #9CC3FF; }
.p_article ol {
  counter-reset: p_ol;
  padding-left: 1em; }
  .p_article ol > li {
    counter-increment: p_ol; }
    .p_article ol > li:before {
      content: counter(p_ol) '.';
      position: absolute;
      left: 0;
      top: 0; }
.p_article ul ul,
.p_article ol ul {
  margin: .4em 0 0; }

/* Карточки с точкой: «Как принимать», «Как действует».
   Точка вынесена в псевдоэлемент, чтобы заголовок и текст в карточке
   стояли по одной вертикали. */
.p_cards {
  margin: 0; }
  .p_article .p_cards {
    margin: 3.5em 0 1.4em; }
  @media (min-width: 48em) {
    .p_cards {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-left: -1em;
      width: calc(100% + 2em); } }
  .p_card {
    position: relative;
    padding: 2.4em 2.4em 2.4em 7.2em;
    margin-bottom: 1.5em;
    border: 1px solid #D1D8E2;
    border-radius: 1.6em; }
    @media (min-width: 48em) {
      .p_card {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
        margin: 0 1em; } }
    .p_card:before {
      content: '';
      position: absolute;
      left: 2.4em;
      top: 2.4em;
      width: 3.4em;
      height: 3.4em;
      border-radius: 50%;
      background: #9CC3FF;
      background: -webkit-radial-gradient(circle, #004FCC 30%, #9CC3FF 32%);
      background: radial-gradient(circle, #004FCC 30%, #9CC3FF 32%); }
    .p_card h3 {
      color: #001582;
      font-size: 1.8em;
      font-weight: 700;
      line-height: 1.25;
      margin: 0 0 .4em; }
      @media (min-width: 62em) {
        .p_card h3 {
          font-size: 2em; } }
    .p_card p {
      color: #4B4B4B;
      font-size: 1.6em;
      line-height: 1.25;
      margin: 0; }
      @media (min-width: 62em) {
        .p_card p {
          font-size: 1.8em; } }

/* Карточка препарата */
.p_drug {
  margin-bottom: 0; }
  @media (min-width: 62em) {
    .p_drug {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .p_drug__photo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 3em 0;
    margin-bottom: 3em;
    border: 1px solid #D1D8E2;
    border-radius: 1.6em; }
    @media (min-width: 62em) {
      .p_drug__photo {
        width: 40.7%;
        padding: 5.3em 0;
        margin-bottom: 0; } }
    .p_drug__photo img {
      display: block;
      width: 80%;
      height: auto; }
      @media (min-width: 62em) {
        .p_drug__photo img {
          width: 58%; } }
  @media (min-width: 62em) {
    .p_drug__info {
      width: 53.9%; } }
  .p_drug__info h1 {
    color: #001582;
    font-size: 3em;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .5em; }
    @media (min-width: 62em) {
      .p_drug__info h1 {
        font-size: 3.8em; } }
  .p_drug__lead p {
    color: #4B4B4B;
    font-size: 1.6em;
    line-height: 1.25;
    margin-bottom: .9em; }
    @media (min-width: 62em) {
      .p_drug__lead p {
        font-size: 1.8em; } }

.p_specs {
  margin: 1.8em 0 2.4em; }
  .p_specs__row {
    color: #4B4B4B;
    font-size: 1.6em;
    line-height: 1.25;
    margin-bottom: .35em; }
    @media (min-width: 62em) {
      .p_specs__row {
        font-size: 1.8em; } }
  .p_specs__label {
    font-weight: 700;
    color: #001582;
    margin-right: .4em; }

.p_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .p_actions .button {
    margin: 0 1.3em 1.3em 0; }

/* Заголовки блоков внутри страницы. По макету они мельче, чем секции
   на главной, поэтому кегль задаём отдельно, а подсветку строки берём
   общую — класс .title__line. */
.p_title {
  display: inline-block;
  scroll-margin-top: 6em;
  color: #001582;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.15;
  margin: 2.4em 0 1.24em; }
  @media (min-width: 62em) {
    .p_title {
      font-size: 3.8em;
      margin: 2.95em 0 1.5em; } }

/* Аккордеон вопросов */
.p_faq {
  margin-top: 5em; }
  @media (min-width: 62em) {
    .p_faq {
      margin-top: 8em; } }
  .p_faq__inner {
    margin: 0 auto; }
    @media (min-width: 62em) {
      .p_faq__inner {
        width: 86em; } }
  .p_faq .title {
    font-size: 3em; }
    @media (min-width: 62em) {
      .p_faq .title {
        font-size: 3.8em; } }
  .p_faq__accordions {
    margin-top: 3em; }
    @media (min-width: 62em) {
      .p_faq__accordions {
        margin-top: 5em; } }
  .p_faq__accordions .accordion {
    margin-bottom: 0;
    padding: 2.2em 0;
    border-bottom: 1px solid #D1D8E2; }
  .p_faq__accordions .accordion-title {
    display: block;
    color: #001582;
    font-size: 1.8em;
    font-weight: 700;
    text-transform: none;
    line-height: 1.25;
    padding-right: 2em; }
    @media (min-width: 62em) {
      .p_faq__accordions .accordion-title {
        font-size: 2.6em; } }
  .p_faq__accordions .accordion-desc {
    padding-top: 0; }
    .p_faq__accordions .accordion-desc p {
      color: #4B4B4B;
      font-size: 1.6em;
      line-height: 1.25;
      padding-top: 1em; }
      @media (min-width: 62em) {
        .p_faq__accordions .accordion-desc p {
          font-size: 1.8em; } }

/* Предупреждение и юридическая сноска */
.p_note {
  padding: 1.8em 2em;
  margin-top: 4em;
  border: 1px solid #004FCC;
  border-radius: 1em; }
  @media (min-width: 62em) {
    .p_note {
      margin-top: 2.7em;
      width: 86em; } }
  .p_note p {
    color: #4B4B4B;
    font-size: 1.6em;
    line-height: 1.25;
    margin: 0; }
    @media (min-width: 62em) {
      .p_note p {
        font-size: 1.8em; } }
  .p_note a {
    display: inline-block;
    color: #004FCC;
    font-size: 1.6em;
    line-height: 1.25;
    margin-top: .6em; }
    @media (min-width: 62em) {
      .p_note a {
        font-size: 1.8em; } }
    .p_note a:hover {
      text-decoration: underline; }

.p_legal {
  margin-top: 4em; }
  @media (min-width: 62em) {
    .p_legal {
      margin-top: 5em;
      width: 86em; } }
  .p_legal p {
    color: #4B4B4B;
    font-size: 1.6em;
    line-height: 1.25;
    margin-bottom: 1em; }
    @media (min-width: 62em) {
      .p_legal p {
        font-size: 1.8em; } }
  .p_legal a {
    color: #4B4B4B; }
    .p_legal a:hover {
      color: #004FCC; }

/* Логотипы аптек берём с главной вместе с их оформлением, но раскладку
   подгоняем под макет раздела: семь в ряд и большой отступ до предупреждения. */
@media (min-width: 62em) {
  .p_page .h_seventh__items {
    margin-top: 0;
    margin-bottom: 23em; }
  .p_page .h_seventh__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(14.285% - 2em);
            flex: 0 0 calc(14.285% - 2em);
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    margin: 0 1em 2em; }
    .p_page .h_seventh__item:after {
      padding-bottom: 60%; } }

/* На страницах-статьях нижние блоки идут по центру колонки,
   на карточке препарата — от левого края. */
@media (min-width: 62em) {
  .p_page--article .p_note,
  .p_page--article .p_legal {
    margin-left: auto;
    margin-right: auto; } }