.stepBtn    { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; margin: 0 20px 0 0;}

.active {
    background: var(--green-1) !important;
    color: var(--white-2);
}

.shopHead   {
    max-width:1200px;
    font-weight:600px;
    font-size: 32px;
    line-height: 36px;
    color: var(--black);
    margin: 20px 0;    
}

#path .shop_h1    {margin: 20px 0;}

.tabs {overflow: hidden; margin:0 10px 0 30px;}

.contentPage .tabFix    { width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 20px; margin-bottom: -20px; }

.step { border-radius: 25px; padding: 0 20px; display: grid; align-items: center; gap: 6px; background: var(--gray-1);  height: 50px; white-space: nowrap; font-weight: 700; cursor: pointer; width: 100%; justify-content: center; }







.shopHelp   {grid-template-areas: "sh1 sh2 sh2 sh3"; gap:10px; grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom:40px;}

.shopHelp .num  {width:60px; height:60px; display: grid; align-items: center; text-align: center; border-radius: 30px; background: var(--gray-1);color: var(--black); font-size: 18px; font-weight: 700;}

.shopHelp .num_head   {color: var(--green-1); font-size: 28px; line-height: 32px; font-weight: 700; margin:20px 0;}

.shopHelp .shadowBlock, .shop_select  {cursor:default; background-color: var(--white-1);}

.sh1 {grid-area: sh1;}

.sh2 {grid-area: sh2;}

.sh3 {grid-area: sh3;}

.sh1, .sh2, .sh3    {padding: 30px;}

.sh1 .payments  {margin-top:60px;}

.num_text   {font-size: 18px; line-height: 24px; font-weight: 400; color: var(--black);}

.num_alert  {font-size: 18px; line-height: 24px; font-weight: 400; color: var(--red-form); border-top: 1px solid var(--gray-3); padding:20px 0 0;margin:20px 0 0;}

.num_line   {height:1px;border-bottom: 1px solid var(--gray-3); margin:30px 0;}

.num_contacts, .num_contacts a   {color: var(--black); font-weight: 700; line-height: 24px;}

.num_contacts   {grid-template-columns: 1fr;}

.num_contacts .c1, .num_contacts .c4   {margin-bottom: 0;}

.shop_list  {grid-template-columns: 2fr 1fr; gap: 10px;} 

.shop_list .shadowBlock {padding:40px;}

.code_list  {grid-template-columns: 1fr; gap: 20px;}

.itogo  {background-color: #EBF0E8 !important; height: fit-content;}

.shop_select .shop_head, .itogo .shop_head  {font-size: 32px; line-height: 36px;}

.shop_select .shop_head {font-weight: 700; color: var(--green-1);}

.itogo .shop_head    {font-weight: 600; color: var(--black); margin-bottom:30px;}



.step3  {padding: 40px; text-align: center; cursor: default;}

.step3 .shop_head   {color:var(--green-1); text-align: center; font-weight: 700;}

.step3 .shop_codes  {text-align: center;}



.shop_item  {grid-template-columns: 3fr 2fr 1fr; border-bottom: 1px solid var(--gray-3); margin-top:20px;}

.shop_item_name {font-size: 28px; line-height:32px; font-weight: 600; color: var(--black);}

.shop_item_name > span  {display: block; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--gray-txt); margin: 10px 0;}

.shop_item_cost {font-size: 32px; line-height: 36px; font-weight: 700; color: var(--green-1); align-self: center;}

.shop_item_count    {justify-self: end;}

.shop_item_count .tac {font-size: 14px; margin-bottom:10px;}




.shop_count {width:140px; height:44px; align-items: center; justify-items: center; position:relative; background-color: var(--white-2); border-radius: 4px; border:1px solid var(--gray-3);}

.shop_m, .shop_p    {width:44px; height:44px; border-radius: 4px; font-size: 28px; text-align: center; position:absolute; background: var(--white-1); cursor: pointer; align-content: center; font-weight: 400;}

.shop_m {color: var(--gray-txt); border:1px solid var(--gray-3); left:-1px;top:-1px;}

.shop_p {color: var(--green-1); border:1px solid var(--gray-3); right:-1px;top:-1px;}

.shop_input { width:52px; left:44px; }

.shop_input input[type="text"]   { padding:4px; margin-bottom:0 !important; text-align: center; font-size: 18px; font-weight: 700; border:0; height:42px; border-radius: 0;}

.itogo_line   {border-bottom: 1px solid var(--green-1); margin:20px 0;}

.shop_forms label   {font-size: 16px; line-height: 18px; font-weight: 500;}

.itogo_block    {grid-template-columns: 1fr 1fr; font-size:18px; line-height: 24px; font-weight: 400; color: var(--black); align-items: center;}

.itogo_block .right {justify-self: end; font-size: 28px; line-height: 32px; font-weight: 600;}

.itogo_head {font-size: 28px; line-height: 32px; font-weight: 600;}

.itogo_block  .itogo_price    {font-size: 32px; line-height: 36px; font-weight: 700; color: var(--green-1);}

#toContact, #toBuy  {margin:30px 0 20px; width:100%; background: var(--green-1);}

#toBuy  {width:320px; margin:10px 0 20px;}

.pay_info   {margin-top: 20px;}

.shop_codes {font-size: 18px; line-height: 24px; font-weight: 400; color: var(--black); margin:20px 0;}

.phone_email    {grid-template-columns: 1fr 1fr; max-width:800px; gap:20px;}

#listForm .field    {font-size: 16px; line-height: 18px; font-weight: 700;}

#listForm .payments {gap:30px; margin: 20px 0 0; width:min-content;}

#listForm .payments > div   {height:100%; width:55px;}

.step2  {height:100% !important;}

.shop_buy   {grid-column: 1/3; display:grid; }


#listForm label {position: relative; display: inline-flex;}

#listForm .phone_email label    {display: block;}

.order_state    {padding: 40px;}




.code_grid  {display: grid; grid-template-columns: 1fr; margin: 0 70px; gap:10px;}

.code_head  {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}

.code_head_1, .code_head_2, .code_head_3    {background: var(--green-1); color: var(--white-1); }

.code_1, .code_2, .code_3  {background: var(--white-1); color: var(--black);}

.code_3 {white-space: nowrap;}

.code_head_1, .code_head_2, .code_head_3, .code_1, .code_2, .code_3 {font-size:18px; line-height: 24px; font-weight: 700; text-align: center; padding:10px; border-radius: 4px;} 

.code_content   {display: grid; gap:10px; grid-template-columns: repeat(3, 1fr); overflow-x: auto;}

.step3 .red {color: var(--red-form);}

a.code_print, a.code_load {text-align: center; display: inline-block; padding: 0 0 0 30px;}

a.code_print {background: url(/img/icons/print-1.svg) no-repeat 60px 55% !important; width:280px;}

a.code_load  {background: url(/img/icons/dload-1.svg) no-repeat 40px 55% !important; width: 190px; display:none;}

a.code_print:hover {background-color: var(--green-1) !important; background-image: url(/img/icons/print-2.svg) !important;}

a.code_load:hover {background-color: var(--green-1) !important; background-image: url(/img/icons/dload-2.svg) !important;}



.shop_link  {display: grid; grid-template-columns: repeat(4, 1fr); gap:10px; min-height: 200px; background-color: var(--white-1); padding:40px;}

.shop_link .freeBtnShort    {position: static; justify-self: end; margin: 16px 16px 0 0;}

.shop_link .href    {color:var(--black); padding:30px; display: inline-block;}

.shop_link .link    {display: grid; background-color: var(--white-2); font-size: 24px; line-height:28px; font-weight: 700; border-radius: 20px;  height: 100%;}

.shop_link .link:hover > .freeBtnShort  {transform: rotate(-45deg);cursor:pointer; }

.shop_link .link:hover > .href  {color: var(--green-1);}

.order_state_name   {font-size: 18px; line-height: 24px; font-weight: 500; text-align: center; }

.order_state_rez    {font-size: 24px; line-height: 28px; font-weight: 600;  text-align: center; margin: 0 0 10px 0;}

.order_state_rez .red   {color: var(--red-form);}

img.process {width: 32px; height:32px; display:inline-block;}




#path   {grid-template-areas: "pl1 pl3" "pl2 pl3"; grid-template-columns: 1fr 350px;}

.path {grid-area: pl1;}

.shop_h1 {grid-area: pl2;}

.pLogo {grid-area: pl3; max-width:350px; background: var(--white-1); border-radius: 14px; margin:20px 0; justify-content: center;}

.pLogo img  {height:70px; width:auto; margin:10px auto; max-width: 320px;}



.shop_balance   {grid-template-columns: 1fr 1fr; margin:20px 0; font-size: 20px; padding:10px 0;}




@media screen and (min-width:1280px) and (max-width:1919px){

    .shopHelp   {grid-template-areas: "sh1 sh2" "sh3 sh2"; grid-template-columns: 1fr 1fr;}

    .step    {font-size: 14px;}
   
    .shopHead   {max-width:820px; font-size: 28px; line-height: 30px;}

    .num_text, .num_alert   {font-size: 14px; line-height: 18px;}

    .shopHelp .num_head   {font-size: 18px; line-height: 20px;}

    .sh1 .payments, .num_line  {display: none;}

    .num_contacts   {grid-template-columns: max-content minmax(220px, 1fr); gap:30px;}

    .num_contacts .c4   {line-height: normal;}

    .num_contacts, .num_contacts a   { line-height: 18px;}




    .shop_select .shop_head  {font-size: 28px; line-height: 30px;}

    .shop_item_name {font-size: 20px; line-height: 24px;}

    .shop_item_name > span  {font-size: 14px; line-height: 18px;}

    .shop_item_cost {font-size: 28px; line-height: 28px;}

    .shop_input input[type="text"]  {font-size: 14px; line-height: 18px;}

    .shop_m, .shop_p    {font-size: 24px;}

    .shop_count {width:134px;}
    
    .itogo .shop_head   {font-size: 24px; line-height: 24px;}

    .itogo_block    { font-size:14px; line-height: 18px;}

    .itogo_block .right {font-size: 20px; line-height: 24px;}

    .itogo_head {font-size: 20px; line-height: 24px; }

    .itogo_block  .itogo_price    {font-size: 28px; line-height: 28px; }

    #toContact, #toBuy  {margin:20px 0 10px;}

    .shop_forms label   {font-size: 12px; line-height: 18px;}


    .step3 .shop_head   {font-size: 28px; line-height: 30px;}


    .shop_codes {font-size: 14px; line-height: 18px;}

    #listForm .field    {font-size: 12px; line-height: 18px;}

    .shop_chk   {display: grid;}

    .shop_chk > div {justify-self: center;}

    .shop_buy   {justify-items: center;}




    .code_grid {margin:0;}
    
    .code_head_1, .code_head_2, .code_head_3, .code_1, .code_2, .code_3 {font-size:14px; line-height: 18px;} 

    .shop_link  {grid-template-columns: repeat(2, 1fr);}

    .shop_link .link    {font-size: 18px; line-height: 20px;}

    .order_state_name   {font-size: 14px; line-height: 18px;}

    .order_state_rez    {font-size: 20px; line-height: 24px;}


}
@media screen and (min-width:640px) and (max-width:1279px){

    .shopHelp   {grid-template-areas:"sh1" "sh2" "sh3"; grid-template-columns: 1fr;}

    .step    {font-size: 14px; border-radius: 20px; height: 44px;}

    .shopHead   {max-width:100%; font-size: 20px; line-height: 24px;  margin: 30px 0 20px;}

    .num_text, .num_alert   {font-size: 14px; line-height: 18px;}

    .shopHelp .num_head   {font-size: 18px; line-height: 20px;}

    .sh1 .payments, .num_line  {display: none;}

    .num_contacts   {grid-template-columns: max-content minmax(220px, 1fr); gap:30px;}

    .num_contacts, .num_contacts a   { line-height: 18px;}



    .shop_list  {grid-template-columns: 1fr; gap:20px;}

    .shop_select .shop_head {font-size: 24px; line-height: 28px;}

    .shop_buy .shop_head  {text-align: center;} 

    .shop_codes { font-size: 14px; line-height: 18px; text-align: center;}

    .shop_item_name {font-size: 20px; line-height: 24px;}

    .shop_item_name > span  {font-size: 14px; line-height: 18px;}

    .shop_item_cost {font-size: 28px; line-height: 28px;}

    .shop_input input[type="text"]  {font-size: 14px; line-height: 18px;}

    .shop_m, .shop_p    {font-size: 24px;}

    .shop_count {width:134px;}
    
    .itogo .shop_head   {font-size: 24px; line-height: 24px;}

    .itogo_block    { font-size:14px; line-height: 18px;}

    .itogo_block .right {font-size: 20px; line-height: 24px;}

    .itogo_head {font-size: 20px; line-height: 24px; }

    .itogo_block  .itogo_price    {font-size: 28px; line-height: 28px; }

    #toContact, #toBuy  {margin:20px 0 10px;}

    #toBuy {width: 100%;}

    .shop_forms label   {font-size: 12px; line-height: 18px;}

    .shop_item  {grid-template-columns: 2fr;}

    .shop_item_name {grid-column: 1/5;}

    .shop_item_cost {grid-column: 1/3;}

    .shop_item_count    {grid-column: 3/5;}

    .stepBtn, .step   {width:min-content;}

    .tabs   {margin: 0 0 0 20px;}


    .step3 .shop_head   {font-size: 28px; line-height: 30px;}


    .shop_buy   {grid-column: 1/2;}

    .phone_email    {grid-template-columns: 1fr; gap:0;}

    #listForm .payments {justify-self: center;}



    .code_grid  {grid-template-columns: 50% 1fr; margin:0; overflow: hidden;}

    .code_head_1, .code_head_2, .code_head_3, .code_1, .code_2, .code_3 {font-size:14px; line-height: 18px;}

    .code_head  {grid-template-columns: 1fr;}

    .code_content   {grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); padding-bottom: 20px; margin-bottom: -20px;}

    .code_1 {width: calc((100vw / 2) - 120px);}

    a.code_print {display: none;}

    a.code_load  {display: inline-block;}

    .shop_link  {grid-template-columns: 1fr;}

    .shop_link .link    {font-size: 18px; line-height: 20px;}

    .order_state_name   {font-size: 14px; line-height: 18px;}

    .order_state_rez    {font-size: 20px; line-height: 24px;}



    #path   {grid-template-areas: "pl1" "pl3" "pl2"; grid-template-columns: 1fr;}

    .pLogo  {max-width: none; margin:0;}


}
@media screen and (min-width:360px) and (max-width:639px)   {

    .shopHelp   {grid-template-areas:"sh1" "sh2" "sh3"; grid-template-columns: 1fr;}

    .step    {font-size: 14px; border-radius: 20px; height: 44px;}

    .shopHead   {max-width:100%; font-size: 20px; line-height: 24px;  margin: 20px 0;}

    .num_text, .num_alert   {font-size: 14px; line-height: 18px;}

    .shopHelp .num_head   {font-size: 18px; line-height: 20px;}

    .sh1 .payments, .num_line  {display: none;}

    .num_contacts   {grid-template-columns: 1fr;}

    .num_contacts, .num_contacts a   { line-height: 18px;}

    .num_contacts .c1   {margin-bottom: 10px;}




    .shop_list  {grid-template-columns: 1fr; gap:20px;}

    .shop_select .shop_head {font-size: 20px; line-height: 24px; }

    .shop_buy .shop_head  {text-align: center;}    

    .shop_codes {text-align: center;}

    .shop_list .shadowBlock {padding:20px;}

    .shop_item_name {font-size: 20px; line-height: 24px;}

    .shop_item_name > span  {font-size: 14px; line-height: 18px;}

    .shop_item_cost {font-size: 20px; line-height: 24px;}

    .shop_input input[type="text"]  {font-size: 14px; line-height: 18px;}

    .shop_m, .shop_p    {font-size: 24px;}

    .shop_input input[type="text"]  {height:38px;}

    .shop_count {width:120px; height:40px;}

    .shop_m, .shop_p    {width:40px; height:40px;}
    
    .itogo .shop_head   {font-size: 24px; line-height: 24px;}

    .itogo_block    { font-size:14px; line-height: 18px;}

    .itogo_block .right {font-size: 20px; line-height: 24px;}

    .itogo_head {font-size: 20px; line-height: 24px; }

    .itogo_block  .itogo_price    {font-size: 24px; line-height: 28px; width: max-content;}

    #toContact, #toBuy  {margin:20px 0 10px;}

    #toBuy {width: 100%;}

    .shop_forms label   {font-size: 12px; line-height: 18px;}



    .step3 .shop_head   {font-size: 20px; line-height: 24px;}



    .shop_item  {grid-template-columns: 2fr;}

    .shop_item_name {grid-column: 1/5;}

    .shop_item_cost {grid-column: 1/3;}

    .shop_item_count    {grid-column: 3/5;}

    .sh1, .sh2, .sh3    {padding:20px;}

    .stepBtn, .step   {width:min-content;}

    .tabs   {margin: 0 0 0 20px;}

    .tabs2  {margin-left: 0 !important;}



    .shop_buy   {grid-column: 1/2;}

    .phone_email    {grid-template-columns: 1fr; gap:0;}

    #listForm .payments {justify-self: center;}

    .order_fix  {font-size: 24px !important; line-height: 28px !important;}

    .shop_codes {font-size: 14px; line-height: 18px;}

    #listForm .field    {font-size: 12px;}




    .step3  {padding: 20px 0 20px 20px;}

    .code_grid  {grid-template-columns: 40% 1fr; margin:0; overflow: hidden;}

    .code_head_1, .code_head_2, .code_head_3, .code_1, .code_2, .code_3 {font-size:12px; line-height: 14px;} 

    .code_head  {grid-template-columns: 1fr;}

    .code_content   {grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); padding-bottom: 20px; margin-bottom: -20px;}

    .code_1, .code_2, .code_3 {white-space: nowrap;}

    a.code_print {display: none;}

    a.code_load  {display: inline-block;}

    .shop_link  {grid-template-columns: 1fr; padding:20px;}

    .shop_link .link    {font-size: 14px; line-height: 18px;}

    .shop_link .href, .order_state    {padding:20px;}

    .order_state_name   {font-size: 12px; line-height: 16px;}

    .order_state_rez    {font-size: 16px; line-height: 20px;}



    #path   {grid-template-areas: "pl1" "pl3" "pl2"; grid-template-columns: 1fr;}

    .pLogo  {max-width: none; margin:0;}

}