/* Start:/local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/style.min.css?173385745310544*/
.bx-top-nav-container{margin-top:15px;padding:0 10px;color:#fff;border-radius:2px;position:relative;font-family:var(--ui-font-family-primary,var(--ui-font-family-helvetica))}.bx-top-nav-container .bx-nav-list-1-lvl{margin:0;padding:0;list-style:none}.bx-top-nav-container .bx-nav-1-lvl{float:left;position:relative}.bx-top-nav-container .bx-nav-1-lvl>a{color:#fff;font-weight:var(--ui-font-weight-bold);display:block;text-decoration:none;text-transform:uppercase;border-radius:1px;padding-top:6px;padding-bottom:2px;border-bottom:0}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:10px 14px 14px;display:block}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.hover>a{z-index:250;box-shadow:0 6px 13px 0 rgba(0,0,0,.13)}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a span,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.hover>a span{background:#fff}.bx-top-nav-container .bx-nav-parent-arrow{display:none}.bx-top-nav-container .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-2-lvl-container{z-index:999;display:none;opacity:0;padding:9px 0 5px;box-shadow:0 6px 13px 0 rgba(0,0,0,.13);border-top:0;min-width:100%;color:#000}.bx-top-nav-container .bx-nav-2-lvl-container-advanced:before,.bx-top-nav-container .bx-nav-2-lvl-container:before{position:absolute;content:" ";display:block;height:5px;background:#fff;top:-5px;left:0;right:0}.bx-top-nav-container .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.hover .bx-nav-2-lvl-container{opacity:1;display:block;position:absolute;top:100%;z-index:999;background:#fff}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:56px;margin-left:-10px}.bx-top-nav-container>ul{box-sizing:border-box}.bx-top-nav-container .bx-nav-list-2-lvl{margin:0;padding:5px 0 12px}.bx-top-nav-container .bx-nav-2-lvl{display:block;min-width:180px;padding:0 10px;box-sizing:border-box}.bx-top-nav-container .bx-nav-2-lvl>a{padding:5px 15px 5px;color:#20394c;font-size:13px;line-height:16px;text-decoration:none;font-weight:var(--ui-font-weight-bold);border-bottom:0;display:block}.bx-top-nav-container .bx-nav-list-2-lvl .bx-nav-2-lvl:first-child a{border-top:0;margin-top:0}.bx-top-nav-container .bx-nav-3-lvl{padding:5px 0;margin:0}.bx-top-nav-container .bx-nav-3-lvl-container-advanced:before,.bx-top-nav-container .bx-nav-3-lvl-container:before{position:absolute;content:" ";display:block;height:5px;background:#fff;top:-5px;left:0;right:0}.bx-top-nav-container .bx-nav-list-3-lvl{margin:0;padding:0 0 14px 7px}.bx-top-nav-container .bx-nav-3-lvl{display:block;min-width:180px;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-top-nav-container .bx-nav-3-lvl a{padding:3px 15px;color:#555;font-size:13px;line-height:14px;text-decoration:none;border-bottom:0;display:block}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container{min-width:200px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:100%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-catinfo-back{width:100%;background:#fff}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container{min-width:400px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:50%;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-catinfo-back{width:50%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container{min-width:600px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:33.33333%;float:left}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-catinfo-back{width:33.33333%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col{position:static}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced{top:100%;left:0;right:0}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container{min-width:100%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;width:25%;float:left}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-catinfo-back{width:25%}.bx-top-nav-container .bx-nav-catinfo{padding:5px 15px 5px;z-index:120;position:relative}.bx-top-nav-container .bx-nav-catinfo img{box-sizing:border-box;border:1px solid #e7e9ea;width:auto;max-width:100%;height:auto;max-height:100%}.bx-top-nav-container .bx-nav-catinfo p{padding:20px 5px 0;font-size:13px}.bx-top-nav-container .bx-nav-catinfo-back{position:absolute;display:block;content:' ';top:-5px;right:0;bottom:0;background:#f7fafb;z-index:100;border-left:1px solid #ecefef}.bx-aside-nav-control{font-size:28px;position:fixed;width:40px;height:40px;top:5px;left:5px;line-height:40px;cursor:pointer;z-index:1750;color:#fff;text-align:center}body>.bx-aside-nav-control{-webkit-transition:left .15s linear;-moz-transition:left .15s linear;-ms-transition:left .15s linear;-o-transition:left .15s linear;transition:left .15s linear}.bx-aside-nav-control .fa{line-height:40px;vertical-align:middle}.bx-wrapper,.bx-aside-nav{-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-ms-transition:-ms-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear}.bx-logo{z-index:1700 !important}.bx-opened .bx-footer,.bx-opened .workarea{display:none !important}.bx-aside-nav{display:none;padding-top:50px;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);width:100%;background:#4c5c65;position:fixed;top:0;bottom:0;left:0;z-index:1600}.bx-aside-nav.bx-opened{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);overflow-y:scroll}.bx-aside-nav ul{list-style:none;margin:0;padding:0}.bx-aside-nav a{color:#fff;vertical-align:middle;line-height:48px;height:48px;font-size:16px;display:block;border-bottom:1px solid #3d4b53;padding-left:15px;max-width:100%;overflow:hidden;white-space:nowrap;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.bx-aside-nav a{text-decoration:none}.bx-nav-1-lvl.bx-opened,.bx-aside-nav .bx-nav-1-lvl:hover>a,.bx-aside-nav .bx-nav-1-lvl.bx-hover>a{background:#44535c}.bx-aside-nav .bx-nav-list-2-lvl{background:#44535c}.bx-aside-nav .bx-nav-2-lvl>a{padding-left:30px}.bx-aside-nav .bx-nav-3-lvl>a{padding-left:45px}.bx-aside-nav .bx-nav-4-lvl a{padding-left:60px}.bx-aside-nav .bx-nav-parent{position:relative}.bx-aside-nav .bx-nav-parent-arrow{position:absolute;right:0;top:0;margin-top:6px;width:46px;height:34px;text-align:center;border-left:1px solid #5a6971;z-index:200}.bx-aside-nav .bx-nav-parent-arrow i{line-height:34px;font-size:17px;font-style:normal;color:#fff}.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-parent-arrow i{-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-ms-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear}.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container-advanced,.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container,.bx-aside-nav .bx-nav-parent>ul{overflow:hidden;height:0}.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container-advanced,.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container,.bx-aside-nav .bx-nav-parent.bx-opened>ul{height:auto}.bx-aside-nav .bx-nav-catinfo,.bx-aside-nav .bx-nav-catinfo-back{display:none}@media(min-width:1200px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:15px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:12px 14px 15px}}@media(min-width:992px) and (max-width:1199px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:13px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:9px 11px 12px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:47px}}@media(min-width:768px) and (max-width:991px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:11px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:5px 6px 9px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:37px}}@media(min-width:768px){.bx-aside-nav-control,.bx-aside-nav{display:none}.bx-top-nav-container{display:block}}@media(max-width:767px){.bx-aside-nav-control,.bx-aside-nav{display:block}.bx-top-nav-container{display:none}.bx-aside-nav .bx-nav-parent-arrow{display:block}.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent>a>span>.fa{display:none}}
/* End */


/* Start:/local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/themes/red/colors.min.css?1733857453817*/
.bx-red.bx-top-nav .bx-top-nav-container{background:#e22b2b}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-hover>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-active>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl:hover>a{background:#e95c5c;border-bottom:0}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent:hover>a{color:#e22b2b;background-color:transparent}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-2-lvl>a.bx-active,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-2-lvl>a:hover{color:#e22b2b;background:#f0f0f0}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-3-lvl a.bx-active,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-3-lvl a:hover{color:#e22b2b;background:#f0f0f0}
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/catalog_vertical/style.min.css?17319887105844*/
.bx_vertical_menu_advanced{border-left:7px solid #e3eaef;background:#f1f4f7;border-radius:4px;position:relative;box-shadow:0 0 1px 1px #dcdcdc}.bx_vertical_menu_advanced>ul{display:block;margin:0 0 10px 0;padding:0;width:100%;border-radius:5px;background:#fff;list-style:none}.bx_vertical_menu_advanced .bx_hma_one_lvl{display:block;padding:0}.bx_vertical_menu_advanced .bx_hma_one_lvl>a{position:relative;z-index:105;display:block;padding:10px 0 10px 12px;border-bottom:1px solid #e3eaef;color:#000;vertical-align:middle;text-align:left;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.8);font-size:14px;line-height:16px}.bx_vertical_menu_advanced .bx_hma_one_lvl:first-child,.bx_vertical_menu_advanced .bx_hma_one_lvl:first-child>a{border-radius:0 4px 0 0}.bx_vertical_menu_advanced .bx_hma_one_lvl:last-child,.bx_vertical_menu_advanced .bx_hma_one_lvl:last-child>a{border-radius:0 0 4px 0}.bx_vertical_menu_advanced ul:last-child .bx_hma_one_lvl:last-child>a{border-bottom:0}.bx_vertical_menu_advanced .bx_hma_one_lvl>a{-webkit-transition:border-color 0 ease;-moz-transition:border-color 0 ease;-o-transition:border-color 0 ease;-ms-transition:border-color 0 ease;transition:border-color 0 ease}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover{padding:1px 0 0;border:0}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover>a{margin-left:-11px;padding:10px 0 10px 12px;width:100%;border:0;border-right:2px;background:#fff;box-shadow:-1px 2px 3px 0 rgba(1,1,1,.22);font-weight:bold;line-height:16px;box-sizing:content-box}.bx_vertical_menu_advanced .bx_hma_one_lvl.dropdown.hover>a{z-index:1500}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container{position:absolute;top:-1px;left:100%;z-index:1300;display:none;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-top:1px solid rgba(1,1,1,.1);border-radius:2px;background:#fff;box-shadow:0 5px 10px 0 rgba(1,1,1,.29)}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover .bx_children_container{display:block}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block{float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:-20000px;padding:10px 12px;padding-bottom:20000px;min-width:130px;max-width:280px;border-left:1px solid #f2f2f2;background:#fff}.bx_shadow_fix{display:none}.bx_vertical_menu_advanced .dropdown:hover .bx_shadow_fix,.bx_vertical_menu_advanced .dropdown.hover .bx_shadow_fix{position:absolute;top:-1px;right:-2px;bottom:0;z-index:1500;display:block;width:5px;background:#fff;opacity:1}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b1{min-width:180px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b2{min-width:360px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b3{min-width:540px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b4{min-width:720px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block:first-child{border-left:0}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b1 .bx_children_block{width:100%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b2 .bx_children_block{width:50%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b3 .bx_children_block{width:33.3%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b4 .bx_children_block{width:25%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block.advanced{border-left:0;background:#f7fafb;box-shadow:inset 5px 0 7px -5px rgba(0,0,0,.12)}.bx_vertical_menu_advanced .bx_hma_one_lvl ul{display:block;margin:0;padding:0 0 14px 0;list-style:none}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel{display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a{display:block;padding:5px 10px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul{border-bottom:1px solid #f2f2f2}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent:last-child ul{border-bottom:0}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul li{line-height:24px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul a{display:block;padding:5px 10px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_advanced_panel{display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_block.advanced .bx_children_advanced_panel{display:block !important}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width:100%;max-height:220px;border:1px solid #e7e9ea}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel .bx_item_description{max-width:100%;max-height:220px;color:#000;text-align:left;white-space:normal;font-weight:normal;font-size:12px;line-height:18px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block>ul>li{display:block;background:#fff}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block>ul>li>a{display:block;color:#20394c;text-decoration:none;font-weight:bold;font-size:15px;line-height:23px}.bx_vertical_menu_advanced .bx_hma_one_lvl ul li ul li a{color:#000;text-decoration:none;font-size:13px;line-height:16px}@media(max-width:569px){.bx_vertical_menu_advanced{display:none}.header_inner_bottom_line{overflow:hidden;height:auto}}
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/catalog_vertical/themes/red/colors.min.css?1731988710578*/
.bx_vertical_menu_advanced.bx_red{border-left:7px solid #f0bdb5;background:#fbf1f0}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl>a{border-bottom:1px solid #f9e6e3}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a{color:#742b21}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a:hover{color:#742121}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul a:hover{background:#f7f3e0;box-shadow:inset 0 1px 1px 0 #ebe9e3}
/* End */


/* Start:/local/templates/webaspro-3/styles.css?175543699530969*/
/* ================================================
   1. Сброс отступов и установка box-sizing
   ================================================ */
.kojro-b-articles-recommended,
.kojro-b-articles-recommended * {
  box-sizing: border-box;  /* ширина/высота включают padding и border */
  margin: 0;               /* убираем внешние отступы */
  padding: 0;              /* убираем внутренние отступы */
}

/* ================================================
   2. Заголовок блока <h2> внутри грида
   ================================================ */
.kojro-b-articles-recommended > h2 {
  grid-column: 1 / -1;     /* растянуть от первой до последней колонки */
  font-size: 18px;         /* размер шрифта заголовка */
  font-weight: 700;        /* жирное начертание */
  color: #333;             /* цвет текста */
  margin-bottom: 15px;     /* отступ снизу перед карточками */
}

/* ================================================
   3. Основной контейнер карточек — адаптивный Grid
   ================================================ */
.kojro-b-articles-recommended {
  display: grid;                                            /* включаем grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* создаём адаптивные колонки */
  gap: 20px;                                                /* расстояние между строками и колонками */
  width: 100%;                                              /* ширина контейнера 100% */
  max-width: 1200px;                                        /* ограничиваем максимальную ширину */
  margin: 0 auto;                                           /* центрируем контейнер по горизонтали */
  padding: 20px 10px;                                       /* внутренние отступы по краям */
  font-family: Arial, sans-serif;                           /* задаём шрифты для текста */
}

/* ================================================
   4. Карточка — ссылка и её базовый стиль
   ================================================ */
.kojro-b-articles-recommended__item-link {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* картинка сверху, тело карточки снизу */
  background: #fff;                                         /* белый фон карточки */
  border-radius: 8px;                                       /* скруглённые углы */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);                   /* лёгкая тень под карточкой */
  overflow: hidden;                                         /* обрезаем выступающие части внутренних элементов */
  text-decoration: none;                                    /* убираем подчёркивание у ссылки */
  color: inherit;                                           /* наследуем цвет текста из родителя */
  height: 100%;                                             /* растягиваемся на всю высоту grid-ячейки */
  position: relative;                                       /* для абсолютного псевдоэлемента эффекта волны */
  transition: transform .3s ease,                           /* плавное изменение трансформации */
              box-shadow .3s ease;                         /* плавное изменение тени */
}
/* Hover-эффект «парения» */
.kojro-b-articles-recommended__item-link:hover {
  transform: translateY(-5px);                              /* поднимаем карточку вверх */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);                  /* усиливаем тень при hover */
}

/* ================================================
   5. Эффект «волны» при наведении
   ================================================ */
.kojro-b-articles-recommended__item-link {
  position: relative;                                       /* дублируем для уверенности */
  overflow: hidden;                                         /* обрезаем за границами */
}
.kojro-b-articles-recommended__item-link::after {
  content: '';                                              /* создаём пустой псевдоэлемент */
  position: absolute;                                       /* позиционируем поверх карточки */
  inset: 0;                                                 /* растягиваем на всю область */
  pointer-events: none;                                     /* не мешаем кликам */
  opacity: 0;                                               /* по умолчанию невидим */
  transition: opacity 0.3s;                                 /* плавное появление/исчезновение */
  background: radial-gradient(                              /* градиент для волны */
    circle at 50% 50%,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.5) 70%,
    rgba(255,255,255,0) 100%
  );
}
.kojro-b-articles-recommended__item-link:hover::after {
  opacity: 1;                                               /* волна становится видимой */
  animation: kojro-wave 0.6s ease-out forwards;             /* проигрываем анимацию волны */
}
@keyframes kojro-wave {
  0%   { transform: scale(0.7); opacity: 0.5; }             /* стартовый размер и прозрачность */
  60%  { transform: scale(1.2); opacity: 0.8; }             /* разворот и максимум видимости */
  100% { transform: scale(1.6); opacity: 0.1; }             /* размытая финальная фаза */
}

/* ================================================
   6. Обёртка для картинки — поддерживаем соотношение 16:9
   ================================================ */
.kojro-b-articles-recommended__item-img-wrapper {
  width: 100%;                                              /* ширина на 100% контейнера */
  height: 0;                                                /* обнуляем высоту для расчёта через padding */
  padding-top: 56.25%;                                      /* соотношение 16:9: (9/16)*100% */
  position: relative;                                       /* для абсолютного позиционирования img */
  overflow: hidden;                                         /* обрезаем выступающие части картинки */
}
.kojro-b-articles-recommended__item-img {
  position: absolute;                                       /* позиционируем внутри обёртки */
  top: 0;                                                   /* привязываем к верхнему краю */
  left: 0;                                                  /* привязываем к левому краю */
  width: 100%;                                              /* растягиваем по ширине */
  height: 100%;                                             /* растягиваем по высоте */
  object-fit: cover;                                        /* обрезаем/масштабируем картинку по пропорциям */
  transition: transform .3s ease;                           /* плавное увеличение при hover */
}
/* Лёгкое увеличение картинки при hover */
.kojro-b-articles-recommended__item-link:hover
  .kojro-b-articles-recommended__item-img {
  transform: scale(1.03);                                   /* чуть увеличиваем картинку */
}

/* ================================================
   7. Блок с текстом внутри карточки — flex для равной высоты
   ================================================ */
.kojro-b-articles-recommended__item-body {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* располагаем элементы по вертикали */
  flex: 1;                                                  /* растягиваем тело, чтобы заполнить пространство */
  padding: 15px;                                            /* внутренние отступы вокруг текста */
}
.kojro-b-articles-recommended__item-body header {
  margin-bottom: 8px;                                       /* отступ между заголовком и остальным текстом */
}
.kojro-b-articles-recommended__item-title {
  font-size: 16px;                                          /* размер шрифта заголовка статьи */
  font-weight: 700;                                         /* жирное начертание */
  color: #333;                                              /* цвет текста */
  line-height: 1.3;                                         /* межстрочный интервал */
}
.kojro-b-articles-recommended__item-text {
  font-size: 14px;                                          /* размер шрифта основного текста */
  color: #666;                                              /* цвет текста */
  line-height: 1.5;                                         /* межстрочный интервал */
  margin-top: auto;                                         /* прижимает текст к низу карточки */
}

/* ================================================
   8. Медиа-запрос для очень узких экранов (<480px)
   ================================================ */
@media (max-width: 480px) {
  .kojro-b-articles-recommended {
    padding: 10px;                                          /* уменьшаем внутренние отступы */
    gap: 15px;                                              /* уменьшаем расстояние между элементами */
  }
  .kojro-b-articles-recommended__item-title {
    font-size: 15px;                                        /* уменьшаем размер заголовка */
  }
  .kojro-b-articles-recommended__item-text {
    font-size: 13px;                                        /* уменьшаем размер основного текста */
  }
}

.copi { 
	-ms-user-select: all; 
	-moz-user-select: all; 
	-webkit-user-select: all; 
	user-select: all; 
}

/* Начало кода таблицы */
    /* Стили таблицы */
    .kojro-table-container {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
      padding: 0 10px;
    }
    
    .kojro-custom-table {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      border: 1px solid #ddd;
      table-layout: auto;
      margin: 0 auto;
    }
    
    .kojro-custom-table th,
    .kojro-custom-table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
      vertical-align: middle;
      word-break: break-word;
    }
    
    /* Фиксируем ширину столбца с цифрами */
    .kojro-custom-table th:first-child,
    .kojro-custom-table td:first-child {
      white-space: nowrap;
      width: 30px;
    }
    
    .kojro-custom-table th {
      background-color: #4CAF50;
      color: #fff;
      font-weight: bold;
    }
    
    .kojro-custom-table tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    .kojro-custom-table tr:hover {
      background-color: #e9e9e9;
      transition: background-color 0.2s ease;
    }
    
    /* Рукописный стиль */
    .kojro-custom-table .handwriting {
      font-family: 
        'Segoe Script', 'Brush Script MT',
        'Apple Chancery', cursive;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.3;
      color: #333;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 600px) {
      .kojro-custom-table th,
      .kojro-custom-table td {
        padding: 8px 6px;
        font-size: 14px;
      }
      
      .kojro-custom-table .handwriting {
        font-size: 16px;
      }
      
      /* Уменьшаем ширину первых двух столбцов */
      .kojro-custom-table th:nth-child(1),
      .kojro-custom-table td:nth-child(1),
      .kojro-custom-table th:nth-child(2),
      .kojro-custom-table td:nth-child(2) {
        width: auto;
        min-width: 30px;
      }
    }

/* Конец код таблицы*/
.responsive-image {
width: 100%; /* Изображение занимает 100% ширины родительского контейнера */
height: auto; /* Высота автоматически подстраивается под ширину */
}


body {
    margin: 0; /* Убираем отступы */
    font-family: Arial, sans-serif; /* Основной шрифт */
	-ms-user-select: none; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	user-select: none; 
}

.container {
    width: 100%; /* Ширина контейнера */
    max-width: 1400px; /* Максимальная ширина */
    margin: 0 auto; /* Центрируем контейнер */
    padding: 0 15px; /* Добавляем внутренние отступы */
}

header {
    position: relative;
    background: linear-gradient(to bottom, rgba(120, 120, 120, 0.8), rgba(51, 51, 51, 0.8));
    color: #fff;
    padding: 20px 0; /* Отступы для регулировки высоты */
    height: 150px; /* Фиксированная высота хедера */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #444;
}

header nav {
    margin-top: 10px; /* Отступ сверху для меню */
}

header nav a {
    color: #fff; /* Белый цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    margin-right: 10px; /* Расстояние между ссылками */
}

main {
    display: flex; /* Используем flexbox для колонок */
    flex-wrap: wrap; /* Позволяем колонкам переноситься */
    margin: 20px 0; /* Отступ сверху и снизу */
}

main .left, main .right {
    width: 19%; /* Левая и правая колонка занимают 25% ширины */
    padding: 10px; /* Внутренние отступы */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

main .center {
    width: 62%; /* Центральная колонка занимает 50% */
    padding: 10px;
    box-sizing: border-box;
}

footer {
    background: #333; /* Темный фон футера */
    color: #fff; /* Белый текст */
    text-align: center; /* Центрируем текст */
    padding: 20px 0; /* Отступы сверху и снизу */
}

/* Адаптивность */
@media (max-width: 768px) { /* Для экранов шириной 768px и меньше */
    main .left, main .right {
        width: 100%; /* Левая и правая колонка занимают 100% */
    }

    main .center {
        width: 100%; /* Центральная колонка занимает 100% */
    }
}

/* Основной стиль кнопки Telegram */
.telegram-button {
    background: #0088cc; /* Синий фон кнопки */
    border: 3px solid #007bb8; /* Синяя рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(0, 136, 204, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 18%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для кнопки Telegram */
}

.telegram-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.telegram-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.telegram-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #00bfff; /* Цвет текста (светло-синий) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 13px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.telegram-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.telegram-button:hover .telegram-icon {
    display: none; /* Иконка исчезает */
    color: #0088cc; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.telegram-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении Telegram */
@-webkit-keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .telegram-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 120px; /* Отступ кнопки справа от экрана */
    }
}

/* Основной стиль кнопки WhatsApp */
.whatsapp-button {
    background: #25D366; /* Зеленый фон кнопки */
    border: 3px solid #1cc15a; /* Зелёная рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 5%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для кнопки WhatsApp */
}

.whatsapp-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.whatsapp-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.whatsapp-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #23a455; /* Цвет текста (тёмно-зелёный) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 10px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.whatsapp-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.whatsapp-button:hover .whatsapp-icon {
    display: none; /* Иконка исчезает */
    color: #25D366; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.whatsapp-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении WhatsApp */
@-webkit-keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .whatsapp-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 30px; /* Отступ кнопки справа от экрана */
    }
}

/* End */


/* Start:/local/templates/webaspro-3/template_styles.css?17555126478468*/
        /* Kojro Pure CSS FAQ Styles - START */
        /*Обновленные стили FAQ на чистом CSS (желтый фон, черный текст, крупнее шрифт) */
        :root {
            --page-bg-color: #f0f2f5; /* Очень светлый серо-синий для фона страницы */
            --card-bg-color: #ffffff; /* Белый для отдельных элементов FAQ */
            --question-bg-yellow: #FFD700; /* Золотисто-желтый для фона вопроса */
            --question-bg-yellow-hover: #FFC000; /* Чуть темнее желтый для наведения */
            --question-text-black: #000000; /* Черный текст вопроса */
            --answer-bg-color: #f9f9f9; /* Слегка не совсем белый для фона ответа */
            --border-color: #e0e0e0; /* Светлая граница */
            --shadow-color: rgba(0, 0, 0, 0.08); /* Мягкая тень */
            --hover-shadow-color: rgba(0, 0, 0, 0.15); /* Чуть более сильная тень при наведении */
            --transition-speed: 0.3s; /* Скорость перехода для анимаций */
            --border-radius: 12px; /* Радиус скругления углов */
        }

        body {
            background-color: var(--page-bg-color);
            margin: 0;
            padding: 0;
        }

        .kojro-faq {
            max-width: 800px;
            margin: 40px auto;
            font-family: sans-serif; /* Использование общего системного шрифта */
            padding: 20px;
            background-color: var(--page-bg-color);
        }

        .kojro-faq-title {
            text-align: center;
            margin-bottom: 40px;
            /* Остальные стили для заголовка будут наследоваться с сайта */
        }

        .kojro-faq-item {
            margin-bottom: 20px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 20px var(--shadow-color);
            transition: all var(--transition-speed) ease;
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
        }

        .kojro-faq-item:hover {
            box-shadow: 0 8px 30px var(--hover-shadow-color);
            transform: translateY(-3px);
        }

        .kojro-faq-input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .kojro-faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--question-bg-yellow); /* Желтый фон */
            color: var(--question-text-black); /* Черный текст */
            padding: 20px 25px;
            cursor: pointer;
            font-weight: 700; /* Жирный шрифт для "популярного черного" */
            font-size: 1.6rem; /* Увеличенный размер шрифта для десктопа */
            transition: all var(--transition-speed) ease;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Тонкая темная внутренняя граница */
        }

        .kojro-faq-question:hover {
            background: var(--question-bg-yellow-hover); /* Чуть темнее желтый при наведении */
        }

        .kojro-faq-question::after {
            content: '';
            width: 10px;
            height: 10px;
            border-right: 2px solid var(--question-text-black); /* Черная иконка */
            border-bottom: 2px solid var(--question-text-black); /* Черная иконка */
            transform: rotate(45deg);
            transition: transform var(--transition-speed) ease;
            margin-left: 15px;
            flex-shrink: 0;
        }

        .kojro-faq-input:checked + .kojro-faq-question::after {
            transform: rotate(-135deg);
        }

        .kojro-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
            background-color: var(--answer-bg-color);
            border-top: 1px solid var(--border-color);
        }

        .kojro-faq-input:checked ~ .kojro-faq-answer {
            max-height: 500px;
            padding: 20px 25px;
        }

        .kojro-faq-answer-content {
            /* Стили для содержимого ответа будут наследоваться с сайта */
        }

        /* 📱 Медиазапросы для адаптивности */
        @media (max-width: 768px) {
            .kojro-faq {
                margin: 20px auto;
                padding: 15px;
            }
            .kojro-faq-title {
                margin-bottom: 30px;
            }
            .kojro-faq-question {
                font-size: 1.2rem; /* Увеличенный размер шрифта для планшетов */
                padding: 18px 20px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 18px 20px;
            }
        }

        @media (max-width: 480px) {
            .kojro-faq {
                padding: 10px;
            }
            .kojro-faq-title {
                margin-bottom: 25px;
            }
            .kojro-faq-question {
                font-size: 1.1rem; /* Увеличенный размер шрифта для мобильных */
                padding: 15px 15px;
            }
            .kojro-faq-question::after {
                width: 8px;
                height: 8px;
                margin-left: 10px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 15px 15px;
            }
        }
        /* Kojro Pure CSS FAQ Styles - END */



/* начало авторского кода таблица английский алфавит */
.kojro-table-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  /* на мобильных добавим небольшие отступы */
  padding: 0 10px;
}

.kojro-custom-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 0.5px solid #ddd;
}

/* Заголовки и ячейки */
.kojro-custom-table th,
.kojro-custom-table td {
  padding: 16px;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
  /* позволим тексту переноситься, чтобы не ломать верстку */
  word-wrap: break-word;
}

/* Фон заголовков */
.kojro-custom-table th {
  background-color: #4CAF50;
  color: #fff;
  font-weight: bold;
}

/* Чётные строки */
.kojro-custom-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Hover-эффект */
.kojro-custom-table tr:hover {
  background-color: #ddd;
  transition: background-color 0.2s ease;
}

/* Рукописный шрифт */
.kojro-custom-table .handwriting {
  font-family: 
    'Segoe Script', 
    'Brush Script MT', 
    'Apple Chancery',
    'Bradley Hand', 
    'Snell Roundhand', 
    'URW Chancery L',
    'Lucida Calligraphy', 
    'Lucida Handwriting', 
    'Comic Sans MS',
    'Marker Felt', 
    cursive !important;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #333;
  text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.1);
}

/* Адаптив для экранов до 600px */
@media (max-width: 600px) {
  .kojro-custom-table th,
  .kojro-custom-table td {
    padding: 8px;
    font-size: 14px;
  }
  .kojro-custom-table .handwriting {
    font-size: 16px;
  }
}
/* конец авторского кода таблица английский алфавит */
@media (max-width: 600px) {
  .kojro-footer-div {
    color: #f0f0f0;         /* чуть темнее белого */
    font-size: 16px;        /* оптимально для мобильных */
    line-height: 1.5;
    padding: 12px;
    text-align: center;
    /* Можно добавить ещё */
  }
}
/* End */
/* /local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/style.min.css?173385745310544 */
/* /local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/themes/red/colors.min.css?1733857453817 */
/* /bitrix/components/bitrix/menu/templates/catalog_vertical/style.min.css?17319887105844 */
/* /bitrix/components/bitrix/menu/templates/catalog_vertical/themes/red/colors.min.css?1731988710578 */
/* /local/templates/webaspro-3/styles.css?175543699530969 */
/* /local/templates/webaspro-3/template_styles.css?17555126478468 */