@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    /* 🎯 Основной брендовый цвет (зелёно-бирюзовый)
       Использовать для: кнопок, активных ссылок, иконок, индикаторов, интерактивных элементов */
    --color-accent: #00C48C;

    /* ⚪ Светлый фон (ультрасветлый серо-голубой)
       Использовать для: общего фона, карточек, секций, форм */
    --color-background: #F5F7FA;

    /* ⚫ Основной тёмный цвет текста (почти чёрный)
       Использовать для: заголовков, основного текста, интерфейсных надписей */
    --color-text: #1E1E1E;

    /* 🔘 Дополнительный цвет (ярко-синий, техно)
       Использовать для: подсветки активных элементов, тегов, алертов, системных сообщений */
    --color-secondary: #3D8AFF;

    /* 🌿 Приглушённый мятный фон (успокаивающий)
       Использовать для: карточек состояния, фонов подсказок, «отдыхающих» блоков */
    --color-muted: #D1F2EB;

    /* 🧡 Акцентный эмоциональный цвет (апельсиновый)
       Использовать для: мотивационных блоков, прогресса, подчёркивания достижений */
    --color-emotion: #FFAA4D;
}

html.theme-light {
    --color-background: #FAFAFA;
    --color-text: #111111;
    --color-muted: #EAEAEA;
    --color-secondary: #1DB954; /* фирменный зелёный Spotify */
    --color-accent: #FF4081;    /* розовый акцент */
    --color-emotion: #FFD54F;   /* жёлтый */
    --color-divider: #DDDDDD;
}
html.theme-dark {
    --color-background: #121212;
    --color-text: #FFFFFF;
    --color-muted: #1E1E1E;
    --color-secondary: #1DB954;
    --color-accent: #FF4081;
    --color-emotion: #FFD54F;
    --color-divider: #2E2E2E;
}

html.theme-light {
    --color-background: #FAF7F2; /* тёплый беж */
    --color-text: #2D2A26;
    --color-muted: #EDE8E2;
    --color-secondary: #8E735B; /* кофейный */
    --color-accent: #5E8B7E;    /* оливково-зелёный */
    --color-emotion: #D2695E;   /* терракотовый */
    --color-divider: #D8D2CC;
}
html.theme-dark {
    --color-background: #1C1A17;
    --color-text: #EAE6E1;
    --color-muted: #262421;
    --color-secondary: #A1887F;
    --color-accent: #81C784;
    --color-emotion: #FF8A65;
    --color-divider: #33312E;
}
body, html {
    padding: 0;
    margin: 0;
}
.button-link {
    display: block;
    width:194px;
    height: 60px;
    background: url("/images/button.png") no-repeat;
    margin: 40px auto;
}
body {
    margin: 0;
    padding: 0;
    cursor: default;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 16px;
}
.container {
    width: 1200px;
    margin: 0 auto;
}
a {
    color: var(--color-accent);
}
.full-width {
    width: 100% !important;
    height: auto !important;
}
#themeToggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-accent);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    z-index: 999;
}
.site-support-send {
    text-align: center;
    width: 140px;
    padding: 10px;
    border-radius: 7px;
    margin-bottom: 15px;
    background-color: var(--color-accent);
    color: white;
    cursor: pointer;
}
.logo {
    font-family: 'Exo 2', sans-serif;
    font-size: 58px;
    line-height: 58px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 900;
    margin-bottom: -5px;
}
.slogan {
    margin-top: -5px;
    font-size: 18px;
    font-weight: 300;
}
header {
    padding: 25px 0 30px;
    margin-bottom: 55px;
    border-bottom: solid 1px var(--color-divider);
}
.flex {
    display: flex;
    flex-wrap: wrap;
}
.align-between {
    justify-content: space-between;
}
.vertical-center {
    align-items: center;
}
.menu {
    gap: 30px;
}
.content_inject {
    display: none;
}
h1, h2, h3, h4 {
    font-family: 'Exo 2', sans-serif;
}
b, strong {
    font-weight: 500;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}
.adv-item-img img {
    display: block;
    border-radius: 50%;
    border: solid 5px var(--color-muted);
    width: calc(80% - 10px);
    margin: 0 auto 20px auto;
}
.adv-item-name {
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
}
.grid-2 {
    display: grid;
    gap: 50px;
    grid-template-columns: 350px 1fr;
}
.grid-2-reverse {
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr 350px;
}
.grid-2-equals {
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr 1fr;
}
.example {
    border-radius: 32px;
    display: block;
    width: 100%;
}
.text-index p:first-child{
    margin-top: 0;
}
.mt-40 {
    margin-top: 40px !important;
}
footer {
    padding: 25px 0 30px;
    margin-top: 42px;
    border-top: solid 1px var(--color-divider);
}
.logo-mini {
    font-size: 42px;
    margin-right: 15px;
}
.grid-res {
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}
.pr {
    position: relative;
}
.success {
    background: #A9D0FA;
}
.swiper {
    margin-bottom: 80px;
}
.swiper-button-next:after {
    display:none;
}
.swiper-button-next {
    right: 0 !important;
    left: auto !important;
    bottom:-75px  !important;
    width:48px !important;
    height:48px !important;
    background: url(/images/next.png) !important;
    top:auto  !important;
}

.swiper-button-prev:after {
    display:none;
}
.swiper-button-prev {
    right: 64px !important;
    left: auto !important;
    bottom:-75px  !important;
    width:48px !important;
    height:48px !important;
    background: url(/images/prev.png) !important;
    top:auto  !important;
}
.res-item-img img {
    display: block;
    width: 100%;
    border-radius: 32px;
    margin: 0 auto 20px auto;
}
.res-item-name {
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 20px;
    text-align: center;
}
.res-item-age {
    text-align: center;
    margin-bottom: 5px;
    font-style: italic;
}
.res-item-res {
    text-align: center;
}
@media (max-width: 640px) {
    body {
        font-size: 18px;
        line-height: 1.4;
    }
    .grid-res {
        display: grid;
        gap: 50px;
        grid-template-columns: 1fr;
    }
    .grid-2-equals {

        grid-template-columns: 1fr;
    }
    .grid-2, .grid-2-reverse {
        gap: 32px;
        grid-template-columns: 1fr;
    }
    .grid-2-reverse div:nth-child(1) {
        order: 2;
    }
    .grid-2-reverse div:nth-child(2) {
        order: 1;
    }
    .grid-3 {
        display: grid;
        grid-template-columns: 1fr;
    }
    .container {
        width: auto;
        padding: 0 15px;
    }
    .menu {
        display: none !important;
    }
}

:root {
    --s32: 10px;
    --fs12: 10px;
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s32);
}

.menu {
    display: none;
}

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}
@media (min-width: 850px) {
    .col-sm-1 {
        grid-column: span 1;
    }

    .col-sm-2 {
        grid-column: span 2;
    }

    .col-sm-3 {
        grid-column: span 3;
    }

    .col-sm-4 {
        grid-column: span 4;
    }

    .col-sm-5 {
        grid-column: span 5;
    }

    .col-sm-6 {
        grid-column: span 6;
    }

    .col-sm-7 {
        grid-column: span 7;
    }

    .col-sm-8 {
        grid-column: span 8;
    }

    .col-sm-9 {
        grid-column: span 9;
    }

    .col-sm-10 {
        grid-column: span 10;
    }

    .col-sm-11 {
        grid-column: span 11;
    }

    .col-sm-12 {
        grid-column: span 12;
    }

}

/* ≥ 1200 px — large (lg) */
@media (min-width: 1200px) {
    .no-mobile-flex {
        display: flex;
    }

    .bar {
        display: none;
    }

    .menu {
        display: flex;
    }

    .col-lg-1 {
        grid-column: span 1;
    }

    .col-lg-2 {
        grid-column: span 2;
    }

    .col-lg-3 {
        grid-column: span 3;
    }

    .col-lg-4 {
        grid-column: span 4;
    }

    .col-lg-5 {
        grid-column: span 5;
    }

    .col-lg-6 {
        grid-column: span 6;
    }

    .col-lg-7 {
        grid-column: span 7;
    }

    .col-lg-8 {
        grid-column: span 8;
    }

    .col-lg-9 {
        grid-column: span 9;
    }

    .col-lg-10 {
        grid-column: span 10;
    }

    .col-lg-11 {
        grid-column: span 11;
    }

    .col-lg-12 {
        grid-column: span 12;
    }

    .container {
        margin: 0 auto;
        width: 100%;
        padding: 0;
    }
    .order-sort:nth-child(2n) .order-1 {
        order: 3;
    }
}

/* ≥ 1450 px — extra-large (xl) */
@media (min-width: 1450px) {
    .col-xl-1 {
        grid-column: span 1;
    }

    .col-xl-2 {
        grid-column: span 2;
    }

    .col-xl-3 {
        grid-column: span 3;
    }

    .col-xl-4 {
        grid-column: span 4;
    }

    .col-xl-5 {
        grid-column: span 5;
    }

    .col-xl-6 {
        grid-column: span 6;
    }

    .col-xl-7 {
        grid-column: span 7;
    }

    .col-xl-8 {
        grid-column: span 8;
    }

    .col-xl-9 {
        grid-column: span 9;
    }

    .col-xl-10 {
        grid-column: span 10;
    }

    .col-xl-11 {
        grid-column: span 11;
    }

    .col-xl-12 {
        grid-column: span 12;
    }
}

/* ≥ 2400 px — extra-extra-large (xxl) */
@media (min-width: 2400px) {
    .col-xxl-1 {
        grid-column: span 1;
    }

    .col-xxl-2 {
        grid-column: span 2;
    }

    .col-xxl-3 {
        grid-column: span 3;
    }

    .col-xxl-4 {
        grid-column: span 4;
    }

    .col-xxl-5 {
        grid-column: span 5;
    }

    .col-xxl-6 {
        grid-column: span 6;
    }

    .col-xxl-7 {
        grid-column: span 7;
    }

    .col-xxl-8 {
        grid-column: span 8;
    }

    .col-xxl-9 {
        grid-column: span 9;
    }

    .col-xxl-10 {
        grid-column: span 10;
    }

    .col-xxl-11 {
        grid-column: span 11;
    }

    .col-xxl-12 {
        grid-column: span 12;
    }
}

@media (min-width: 850px) {
    :root {
        --s32: 15px;
        --fs12: 11px;
    }

    .container {
        max-width: 700px;
    }
}
@media (min-width: 1200px) {
    :root {
        --s32: 20px;
        --fs12: 12px;
    }

    .container {
        max-width: 1100px;
    }
}

@media (min-width: 1450px) {
    :root {
        --s32: 25px;
        --fs12: 13px;
    }

    .container {
        max-width: 1330px;

    }
}

@media (min-width: 2400px) {
    :root {
        --s32: 32px;
        --fs12: 14px;
    }

    .container {
        max-width: 2000px;

    }
}

@media (min-width: 3600px) {
    :root {
        --s32: 40px;
        --fs12: 15px;
    }

    .container {
        max-width: 3300px;

    }
}
.article-img {
    margin:10px 0;
}
.menu-link-s {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    align-items: center;
    text-decoration: none;
}
.sub-img img {
    display: block;
    width: 100%;
}
.sub-name {
    text-transform: uppercase;
    font-weight: 500;
}
.article-link {
    display:block;
    text-decoration:none;
    font-weight:500;
    text-transform:uppercase;
    height:50px;
}
.article-img img {
    display:block;
    width:100%;
    height:250px;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    
}
.article-img-inside {
    float: left; /* тут float обязателен для обтекания */
  width: 450px;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  margin: 0 15px 15px 0;

  /* современное обтекание */
  shape-outside: inset(0 round 15px); /* текст будет повторять скруглённые углы */
  clip-path: inset(0 round 15px); /* визуально режем саму картинку */
    max-width:calc(100% - 15px);
}


.article-container ul,
.article-container ol {
  display: flow-root;       /* современно */
  /* fallback на старые браузеры:
     overflow: auto;  */
  margin: 0 0 1em 1.2em;
  padding-left: 1.2em;
  list-style-position: outside;
}
.artcle-date {
    font-style:italic;
    font-size:12px;
    margin:0 0 10px 0;
}
.article-theme {
    font-style:italic;
    font-weight:600;
    font-size:12px;
    margin:0 0 10px 0;
}
.h-auto {
    height:auto !important;
}
.other-article-item {
    margin-bottom:15px;
}
.lowercase {
    text-transform:initial !important;
}
.article-container table {
    border-collapse: collapse;
}
.article-container table td, .article-container table th {
    border: solid 1px var(--color-emotion);
    padding: 7px 10px;
    border-collapse: collapse;
    font-size: 12px;
}
.pagination {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 20px 0;
    padding: 0;
}
.browse_path {
    margin: 10px 0 10px 0;
    padding: 10px 15px;
    background: var(--color-muted);
    border-radius: 7px;
    font-size: 13px;
}
.share-block {
    margin: 20px 0;
}
.share-icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
    transition: transform 0.2s;
}
.share-icon:hover {
    transform: scale(1.1);
}
.share-block a {
    text-decoration: none;
    font-size: 12px;
}
.alco-root{color:var(--color-text);background:transparent}
.alco-card{background:var(--color-background);border:1px solid var(--color-divider);border-radius:14px;padding:16px}
.alco-title{margin:0 0 4px}
.alco-sub{margin:0 0 12px;color:var(--color-secondary)}
.alco-label{font-size:14px;color:var(--color-text);opacity:.85;margin:8px 0 6px;display:block}
.alco-input{width:100%;padding:10px;border:1px solid var(--color-divider);border-radius:10px;background:var(--color-muted);color:var(--color-text)}
.alco-btn{cursor:pointer;border:1px solid var(--color-divider);background:var(--color-muted);color:var(--color-text);border-radius:12px;padding:10px 14px}
.alco-btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.alco-btn-ghost{background:transparent}
.alco-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.alco-actions{margin-top:8px}
.alco-block{margin-top:12px}
.alco-table{width:100%;border-collapse:collapse}
.alco-table td{border-bottom:1px solid var(--color-divider);padding:8px 6px}
.alco-chipwrap{display:flex;gap:8px;flex-wrap:wrap}
.alco-chip{border:1px solid var(--color-divider);background:transparent;border-radius:999px;padding:6px 10px;cursor:pointer}
.alco-note{color:var(--color-secondary);font-size:13px;margin-top:8px}
.alco-h3{margin:0 0 8px}
.alco-hint{margin-top:10px;background:rgba(214,105,94,.08);border:1px dashed var(--color-emotion);border-radius:10px;padding:10px}
.alco-list{margin:6px 0 0 18px}
.alco-brand{margin-top:10px;color:var(--color-secondary);font-size:13px}
.alco-drink, .alco-snack{border:1px solid var(--color-divider);border-radius:12px;padding:10px;margin:8px 0;background:transparent}
.alco-minirow{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr .2fr;gap:8px}
.alco-minirow-snack{display:grid;grid-template-columns:1.3fr 1fr 1fr .2fr;gap:8px}
.alco-remove{background:transparent;border:none;color:var(--color-emotion);font-weight:700;cursor:pointer}
.mt-32 {
    margin-top: 32px !important;
}