/* Полезная информация: отдельные индексируемые страницы в утверждённой оболочке сайта. */
@font-face{
  font-family:Caviar;
  src:url('../mobile/fonts/CaviarDreams.ttf') format('truetype');
  font-display:swap;
}

/* Пятый пункт меню и список материалов. На desktop список раскрывается вправо. */
.side-nav{overflow:visible}
.materials-menu{position:relative;color:#dedbd8}
.materials-menu summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  height:56px;
  padding:0 17px;
  border:0;
  border-radius:0 0 4px 4px;
  color:inherit;
  background:linear-gradient(180deg,rgba(25,25,25,.74),rgba(12,13,13,.78));
  cursor:pointer;
  font:400 19px/1.1 'Times New Roman',Times,serif;
  transition:.16s;
  user-select:none;
}
.materials-menu summary::-webkit-details-marker{display:none}
.materials-menu summary:hover,
.materials-menu summary:focus-visible{
  color:#fff;
  outline:none;
  background:linear-gradient(90deg,rgba(45,29,21,.58) 0%,rgba(73,44,29,.58) 58%,rgba(93,58,38,.65) 100%);
}
.materials-menu[open] summary,
.materials-menu--current summary{
  color:#fff;
  background:linear-gradient(90deg,#39251c 0%,#5a3826 56%,#80583d 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.07),inset 0 -1px rgba(0,0,0,.36);
}
.icon-information{mask-image:url('../images/icons/information.svg');-webkit-mask-image:url('../images/icons/information.svg')}
.side-nav .icon-home,
.side-nav .icon-information{
  mask-size:35px 35px;
  -webkit-mask-size:35px 35px;
}
.materials-menu[open] summary .nav-icon,
.materials-menu--current summary .nav-icon{color:#d79a72}
.materials-chevron{
  width:8px;
  height:8px;
  margin-left:auto;
  border-right:1px solid #b9b5b1;
  border-bottom:1px solid #b9b5b1;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s;
}
.materials-menu[open] .materials-chevron{
  border-color:#e0a57e;
  transform:rotate(225deg) translate(-1px,-1px);
}
.materials-submenu{
  position:absolute;
  z-index:20;
  left:-1px;
  bottom:56px;
  width:300px;
  padding:0;
  border:1px solid rgba(174,112,74,.82);
  border-radius:4px 4px 0 0;
  overflow:hidden;
  background:#0b0c0c;
  box-shadow:0 -10px 24px rgba(0,0,0,.34);
}
.side-nav .materials-submenu a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:43px;
  height:auto;
  padding:8px 34px 8px 16px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;
  color:#d8d5d2;
  background:linear-gradient(180deg,rgba(24,25,25,.98),rgba(13,14,14,.99));
  font:400 13.5px/1.25 Arial,Helvetica,sans-serif;
}
.side-nav .materials-submenu a:last-child{border-bottom:0}
.side-nav .materials-submenu a::before{
  content:'›';
  position:absolute;
  right:16px;
  color:#a87659;
  font-size:19px;
}
.side-nav .materials-submenu a::after{content:none!important}
.side-nav .materials-submenu a:hover,
.side-nav .materials-submenu a:focus-visible,
.side-nav .materials-submenu a.active{
  color:#fff;
  outline:none;
  transform:none;
  background:linear-gradient(90deg,rgba(76,48,34,.94),rgba(42,29,23,.98));
}

/* Desktop: заметный временный навигационный слой справа от основного меню. */
@media(min-width:1001px){
  .materials-menu .materials-chevron{
    transform:rotate(-45deg) translate(-1px,-1px);
  }
  .materials-menu[open] .materials-chevron{
    border-color:#e0a57e;
    transform:rotate(135deg) translate(-1px,-1px);
  }
  .materials-submenu{
    z-index:30;
    left:calc(100% + 8px);
    bottom:0;
    width:318px;
    border-color:rgba(191,126,85,.92);
    border-radius:5px;
    background:#090a0a;
    box-shadow:0 15px 34px rgba(0,0,0,.64),0 0 0 1px rgba(255,255,255,.035) inset;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-10px,6px);
    transform-origin:left bottom;
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  }
  .materials-menu[open] .materials-submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(0,0);
    transition-delay:0s;
  }
  .materials-menu.is-closing .materials-submenu{
    opacity:0;
    pointer-events:none;
    transform:translate(-10px,6px);
  }
  .side-nav .materials-submenu a{
    min-height:47px;
    padding:10px 40px 10px 18px;
    background:linear-gradient(180deg,#191a1a,#0d0e0e);
    font-size:14.5px;
    line-height:1.28;
  }
  .side-nav .materials-submenu a::before{
    right:17px;
    color:#c18460;
    font-size:21px;
  }
  .side-nav .materials-submenu a:hover,
  .side-nav .materials-submenu a:focus-visible,
  .side-nav .materials-submenu a.active{
    background:linear-gradient(90deg,#69452f 0%,#4a3024 58%,#261b17 100%);
    box-shadow:inset 3px 0 #d1946c;
  }
}

@media(prefers-reduced-motion:reduce){
  .materials-submenu,.materials-chevron{transition:none!important}
}

/* Новые страницы: правый текстовый блок сохраняет композицию старого сайта. */
.materials-body .materials-inside{display:block}
.materials-body .materials-inside .side-nav{height:auto}
.materials-body .materials-view{display:block}
.materials-body .materials-scroll{padding-bottom:22px}
.materials-body .materials-scroll h1{
  margin:0;
  color:#efedeb;
  font:600 28px/1.08 'Times New Roman',Times,serif;
}
.materials-body .materials-scroll h2{
  margin:25px 0 10px;
  color:#efedeb;
  font:600 20px/1.2 'Times New Roman',Times,serif;
}
.materials-body .materials-scroll h3{
  margin:18px 0 8px;
  color:#efedeb;
  font:600 17px/1.25 'Times New Roman',Times,serif;
}
.materials-body .materials-scroll p{
  margin:8px 0;
  color:#c9c6c3;
  font-size:14.4px;
  line-height:1.48;
}
.materials-body .materials-scroll .lead{
  margin-top:9px;
  color:#c58b68;
  font-size:14.5px;
  line-height:1.42;
}
.materials-back{
  display:inline-block;
  margin:0 0 12px;
  color:#67bcc4!important;
  text-decoration:none;
  font-size:13px;
}
.materials-back:hover,.materials-back:focus-visible{color:#92d6dc!important;outline:none}
.materials-intro{
  margin:15px 0 20px;
  padding:15px 17px;
  border:1px solid rgba(63,146,155,.68);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(16,25,25,.88),rgba(10,15,15,.91));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.materials-intro h2{margin:0 0 7px!important;font-size:19px!important}
.materials-intro p{margin:0!important}
.materials-checks{
  display:grid;
  gap:9px;
  margin:10px 0 18px;
  padding:0;
  list-style:none;
}
.materials-checks li{
  position:relative;
  padding-left:27px;
  color:#cbc8c5;
  font-size:14.2px;
  line-height:1.42;
}
.materials-checks li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border:1px solid #58aeb7;
  border-radius:50%;
  color:#69c2ca;
  font:400 10px/1 Arial,sans-serif;
}
.materials-note{
  margin:16px 0!important;
  padding:11px 13px;
  border-left:3px solid #b97852;
  color:#aaa6a2!important;
  background:rgba(17,17,17,.46);
  font-size:12.2px!important;
}
.materials-index-grid{display:grid;gap:11px;margin-top:17px}
.material-card{
  position:relative;
  display:grid;
  grid-template-columns:43px minmax(0,1fr) 18px;
  align-items:center;
  min-height:88px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  color:#efedeb!important;
  text-decoration:none;
  background:linear-gradient(180deg,rgba(28,29,29,.84),rgba(12,13,13,.90));
  transition:.16s;
}
.material-card:focus-visible{
  border-color:rgba(194,130,88,.82);
  outline:none;
  transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(90,58,41,.80),rgba(34,24,20,.88));
}
@media(hover:hover) and (pointer:fine){
  .material-card:hover{
    border-color:rgba(194,130,88,.82);
    outline:none;
    transform:translateY(-1px);
    background:linear-gradient(180deg,rgba(90,58,41,.80),rgba(34,24,20,.88));
  }
}
.material-card__num{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid rgba(199,138,102,.78);
  border-radius:4px;
  color:#d39a75;
  font-size:12px;
}
.material-card strong{display:block;font:600 18px/1.18 'Times New Roman',Times,serif}
.material-card small{display:block;margin-top:5px;color:#b4b0ad;font-size:12.8px;line-height:1.35}
.material-card__arrow{color:#c18763;font-size:24px}
.materials-cta-row{display:flex;justify-content:center;margin:22px 0 24px}
.materials-index-grid + .materials-cta-row{margin-bottom:0}
.materials-cta-row[id]{scroll-margin-top:24px;scroll-margin-bottom:24px}
.materials-faq{margin:9px 0;border-top:1px solid rgba(255,255,255,.12)}
.materials-faq details{border-bottom:1px solid rgba(255,255,255,.12)}
.materials-faq summary{
  padding:11px 24px 11px 0;
  color:#e7e4e1;
  cursor:pointer;
  font:600 15px/1.3 'Times New Roman',Times,serif;
}
.materials-faq details p{padding:0 12px 11px 0;margin:0}

@media(min-width:1001px){
  .materials-body .materials-inside .view-scroll{
    height:520px;
    overflow-y:auto;
  }
  .materials-body .materials-inside .classic-scrollbar{height:520px}
  .materials-body .materials-inside .classic-scrollbar[hidden]{display:none!important}
  .materials-faq + .materials-cta-row{margin-bottom:0}
}

/* Телефон: те же URL и тот же HTML, но визуальный язык действующей /mobile/. */
@media(max-width:1000px){
  html,body.materials-body{height:auto;min-height:100%;overflow:auto}
  body.materials-body{
    display:block;
    min-width:0;
    background:#0c0d0d url('../mobile/images/bg-image.png') center top/cover fixed no-repeat;
    color:#f4f3f0;
    font-family:Caviar,Arial,sans-serif;
  }
  .materials-body .site-wrap{
    position:relative;
    left:auto;
    top:auto;
    width:min(100%,460px);
    height:auto;
    min-height:100vh;
    margin:0 auto;
    transform:none;
  }
  .materials-body .materials-inside{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    min-height:100vh;
    padding:22px 22px 34px;
    overflow:visible;
    background:linear-gradient(rgba(5,6,6,.58),rgba(7,8,8,.76));
  }
  .materials-body .side-panel{display:none}
  .materials-body .content-panel,
  .materials-body .content-panel .view{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .materials-body .materials-scroll{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .materials-body .classic-scrollbar{display:none!important}
  .materials-body .eyebrow{margin:8px 0 7px;font-size:12px;letter-spacing:1.5px}
  .materials-body .materials-scroll h1{
    font:400 31px/1.12 Georgia,'Times New Roman',serif;
  }
  .materials-body .materials-scroll h2{
    margin-top:28px;
    font:400 24px/1.18 Georgia,'Times New Roman',serif;
  }
  .materials-body .materials-scroll h3{font:600 18px/1.25 Georgia,'Times New Roman',serif}
  .materials-body .materials-scroll p{font-size:15px;line-height:1.56}
  .materials-body .materials-scroll .lead{font-size:15px;line-height:1.5}
  .materials-back{margin:0 0 21px;font-size:15px}
  .materials-body .title-rule{margin:14px 0 18px}
  .materials-intro{padding:17px;margin:18px 0 23px;border-radius:9px}
  .materials-intro h2{font-size:20px!important}
  .materials-checks{gap:13px}
  .materials-checks li{padding-left:37px;font-size:15px;line-height:1.5}
  .materials-checks li::before{width:25px;height:25px;font-size:12px}
  .materials-note{font-size:13px!important;line-height:1.5!important}
  .materials-index-grid{gap:11px}
  .material-card{
    grid-template-columns:48px minmax(0,1fr) 16px;
    min-height:84px;
    padding:13px 15px;
    border-radius:9px;
    -webkit-tap-highlight-color:transparent;
    transition:transform .08s ease,filter .08s ease,box-shadow .08s ease,border-color .08s ease,background .08s ease;
  }
  .material-card:active{
    border-color:rgba(197,141,109,.62);
    transform:translateY(1px) scale(.995);
    filter:brightness(.93);
    background:linear-gradient(180deg,rgba(88,57,41,.78),rgba(35,24,20,.88));
    box-shadow:inset 0 3px 8px rgba(0,0,0,.22);
  }
  .material-card__num{width:36px;height:36px;font-size:13px}
  .material-card strong{font:600 18px/1.22 Georgia,'Times New Roman',serif}
  .material-card small{font-size:13.5px;line-height:1.4}
  .materials-faq summary{font:600 16px/1.35 Georgia,'Times New Roman',serif}
  .materials-cta-row{margin:27px 0 0}
  .materials-cta-row .button{width:100%;min-height:54px;justify-content:center;border-radius:8px}
  .materials-body .site-footer{display:none}
}

@media(max-width:360px){
  .materials-body .materials-inside{padding-left:16px;padding-right:16px}
  .materials-body .materials-scroll h1{font-size:28px}
  .material-card strong{font-size:17px}
}