#toggleMainMenuWrap {
    display: none;
}

#toggleMainMenu {
    display: none;
}

#waitingServerTime {
    width: 100%;
    height: 100%;
    background: transparent url('/images/waiting-circles-2.gif') no-repeat center center;
    background-size: 64px;
    opacity: 0.7;
    z-index: 100;
    position: fixed;
    display: none;
}

div.logo_direction.logo_head_in{
    flex-direction: row !important;
}

div.geoloc.pad_city{
    padding-left: 6rem;
}

span.pad_disp_region{
    padding-left: 20.5px;
    display: block;
}

@media (min-width: 768px) and (max-width: 1300px) {
    .help_block{
        width: 100%!important;
    }
    body{
        min-width: auto!important;
    }
    .head-main .head-main-in{
        width: 100%!important;
    }
}

@media screen and (max-width: 767px) {

    #waitingServerTime {
        background-color: #fff;
    }

    body {
        min-width: inherit;
        overflow-x: hidden;
    }

    body.index-tpl > div.head-block > div.head-main, div.head-main .head-main-in .logo_head {
        height: auto;
    }

    div.partner_info ul.partner-info{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .main-content,
    #user_bonus,
    .fin_block_main,
    .hello_block,
    .profile_block,
    .help_block
    {
        min-width: auto;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    #ItemEditor .form-row{
        margin-left: 0;
        margin-right: 0;
    }
    .help_block .defoult-page-wrap {
        padding: 0;
    }
    .help_block .tab-pane {
        max-width: 100%;
    }
    .fin_block_main,
    .profile_block {
        overflow-x: auto;
    }

    .fin_block_main > .tabs,
    .profile_block > .tabs {
        width: 1260px;
    }

    .main-content {
        /*padding: 0 5px;*/
        padding: 0;
    }

    .main-content-in {
        max-width: 100%;
    }
    body > div.head-block > div.head-main{
        height: auto!important;
    }

    div.main-content > div.main-content > div.main-content-in {
        width: 100%;
        /* margin: 0 auto;*/
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3{
        /*flex-direction: column;*/
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child{
        width: 100% !important;
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child > div:nth-child(2){
        flex-direction: column;
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child > div:nth-child(2){
        flex-direction: column;
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child > div:nth-child(2) > div:first-child{
        width: 90% !important;
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child > div:nth-child(2) > div:nth-child(2){
        width: 100%;
        min-width: 90% !important;
    }

    div.main-content > div.main-content > div.main-content-in > div.d-flex.justify-content-center.mt-4.mb-3 > div:first-child >
    div:nth-child(2) > div:nth-child(2) #gotoPaySection > form > div.gotoPaySelect {
        width: 100%;
        min-width: 90% !important;
    }

    .main-content-in #tabs ul {
        width: 100% !important;
        text-align: center;
    }

    .main-content-in #tabs ul li {
        float: none;
        display: inline-block;
        max-width: calc(50% - 0.6rem);

        /* Картинка таба — спрайт из двух состояний (205x94), видна только верхняя половина.
           Раньше высота задавалась как padding-bottom: 10% от ширины списка и расходилась
           с высотой картинки на ширинах больше телефонной — вылезала вторая половина. */
        height: auto;
        max-height: none;
        padding-bottom: 0;
        aspect-ratio: 205 / 47;
    }

    .main-content-in #tabs ul li a {
        display: flex;
        justify-content: center;

        width: 100%;
    }

    .main-content-in #tabs ul li a img {
        width: 100%;
    }

    .main-content-in #tabs ul li a.tabulous_active img {
        top: 0;
    }
    .main-content-in #tabs ul li:hover a img {
        top: -50%;
    }

    .main-content-in .first_block_product {
        text-align: center;
        padding-top: 0.5rem;
        border-top: 3px solid #4a301f1c;
    }

    .main-content-in .first_block_product > span,
    .main-content-in .first_block_product > div[table] {
        display: inline-block; /* not important!!! */
        width: 30%;
        max-width: 185px;
        margin: 0;
        min-width: 130px;
    }
    .main-content-in .first_block_product > span{
        width: calc(50% - 0.6rem);
    }
    .main-content-in .first_block_product .small_block {
        margin: 0;
        height: 0;
        width: 100%;
        padding-bottom: 100%;
    }

    .head-main .head-main-in {
        display: block;
        width: 100%;
        height: 100%;
    }

    .head-main .head-main-in .logo_head {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 135px;
    }

    .head-main .head-main-in .logo_head_img {
        width: auto;
        display: inline-block;
    }

    .head-main .head-main-in .head_menu {
        display: block;
        width: 100%;
        float: none;
        margin-bottom: 2rem;

        background-color: #fff;
        border-top: 6px solid #e8e8e8;
    }
    .head-main.menu-narrow .head-main-in .head_menu {

        border-top: none;
    }

    .head-main .head-main-in .head_menu ul {
        text-align: center;
        /*margin-top: 1.5rem;*/
        border-bottom: 6px solid #e8e8e8;
    }

    .head-main .head-main-in .head_menu ul li.head_menu_li {
        display: inline-block;
        float: none;
        /*width: 100%!important;*/
    }

    .head-main .head-main-in .head_menu ul li a span {
        border: none!important;
    }

    .head-main .head-main-in .head_line {
        display: none;
    }


    #toggleMainMenuWrap {
        position: absolute;
        /*top: 118px;*/
        left: 0;
        right: 0;
        top: calc(-1rem - 9px);
        padding-top: 6px;
        z-index: 200;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        user-select: none;
    }
    .head-main .head-main-in .head_menu{
        border-top: none;
    }



    #toggleMainMenuWrap span {
        background-color: #fff;
        padding: 0.5rem 1rem;
        border: 3px solid #e8e8e8;
        border-radius: 5rem;
        user-select: none;
    }




    #toggleMainMenu:checked~ ul {
        /*display: block;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding-top: 31px;
        padding-bottom: 15px;
        position: relative;
        z-index: 3;
        /*padding-top: 10px;*/
    }
    body .head-block .head-main{
        max-width: 100%!important;

    }
    body.index-tpl > div.head-block > div.head-main, div.head-main .head-main-in .logo_head{
        margin-left: 0;
        margin-right: 0;
    }
    body > div.head-block > div.head-main ul.main-menu-list li.head_menu_li:not(.dropdown-item):not(.dropdown-submenu) > a > .head_menu_li_span_bg{
        height: 100%!important;
        display: none;
    }

    #toggleMainMenu:checked~label .label-text-first {
        display: none;
    }

    #toggleMainMenu:checked~label .label-text-second {
        display: block;
    }

    #MainMenu {
        position: relative;
    }

    #MainMenu ul {
        display: none;
    }

    .label-text-first {
        display: block;
        color: black;

    }

    .label-text-second {
        display: none;
        color: black;
    }

    /*/MainMenu*/

    .order.title,
    .delimiter-string,
    .orders table.orderTable {
        width: 100%!important;
    }

    .orders table.orderTable thead tr td:nth-child(5),
    .orders table.orderTable tbody tr td:nth-child(5) {
        display: none!important;
    }

    .orders table.orderTable thead tr td:nth-child(6),
    .orders table.orderTable tbody tr td:nth-child(6) {
        display: none!important;
    }

    .orders table.orderTable thead tr td:nth-child(7),
    .orders table.orderTable tbody tr td:nth-child(7) {
        display: none!important;
    }

    .orders table.orderTable thead tr td:nth-child(9),
    .orders table.orderTable tbody tr td:nth-child(9) {
        display: none!important;
    }

    .orders table.orderTable thead tr td:nth-child(10),
    .orders table.orderTable tbody tr td:nth-child(10) {
        display: none!important;
    }



    .toTop {
        right: -100vw;
        width: 0;
        height: 0;
    }

    .toTop::after {
        content: "\f176";
        font-family: 'FontAwesome', serif;
        font-size: 1.5rem;
        width: 3rem;
        height: 4rem;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 0.5rem;
        bottom: 0.5rem;
    }




    .offset-content {
        width: auto;
    }
    .material_value_switchers {
        display: inline-block!important;
    }
    .material_value_switchers span {
        white-space: nowrap!important;
    }
    div.offset-content div.offset-materail-table div.material table div.material_value_switchers span {
        white-space: normal !important;
    }
    .offset-content > div.offset-materail-table div[class*="material"] > table {
        table-layout: auto!important;
    }
    .offset-content > div.offset-materail-table div[class*="material"] table tr td {
        width: auto!important;
        padding: 0.5rem!important;
        white-space: nowrap!important;
    }
    .offset-content > div.offset-materail-table div[class*="material"] table tr td:last-child {
        min-width: 80px!important;
    }



    #orderDetailsModal {
        overflow-x: auto;
    }

    #quant-cart .product__quantity button.basket-btn {
        margin-left: 2px !important;
    }

    /*.orders, .orders * {*/
    /*    box-sizing: border-box;*/
    /*}*/

    /*.orders table.orderTable,*/
    /*.orders table.orderTable tbody,*/
    /*.orders table.orderTable tr,*/
    /*.orders table.orderTable td,*/
    /*.orders table.orderTable th*/
    /*{*/
    /*    display: block!important;*/
    /*    min-width: 100%!important;*/
    /*    width: 100%!important;*/
    /*    height: 100%!important;*/
    /*}*/

    /*.orders table.orderTable td,*/
    /*.orders table.orderTable th*/
    /*{*/
    /*    padding: 0.5rem;*/
    /*    border-bottom: 1px solid #e8e8e8;*/
    /*    text-align: right;*/
    /*}*/

    /*.orders table.orderTable thead {*/
    /*    display: none!important;*/
    /*}*/




    /*.orderTableBody {*/
    /*    display: block!important;*/
    /*}*/

    /*.orderTableBody tr {*/
    /*    display: block!important;*/
    /*}*/

    /*.orderTableBody tr td {*/
    /*    display: block!important;*/
    /*}*/
    .head_menu_li .head_menu_li_span-text{
        /*color: #482e1d;*/
        color: inherit;
    }

    div.logo_head_in.logo_direction{
        flex-direction: column !important;
    }

    div.head_menu.menu_pos{
        position:absolute;
    }

    div.head-main-in.main_in_pos{
        position:relative;

    }
    div.head-main div.head-main-in{
        display: block!important;
    }

    div.geoloc.pad_city{
        padding-left: 0;
    }

    span.pad_disp_region{
        padding-left: 2px;
        display: inline;
    }

    div.geoloc{
        padding-left: 0;
    }

    div.geoloc > div{
        padding-left: 5px;
        display:inline;
    }

    div.offset-content > div.offset-materail-table div[class*=material] > table{
        table-layout: auto !important;
        white-space: nowrap;
        scrollbar-width: thin;
        scrollbar-color: #826C5D #e0e0e0;
        overflow-x: auto;
        display: block;
    }
    .cFilterForRealProd{
        flex-wrap: wrap;
    }

    .material_value_switchers {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 5px 1rem !important;
    }

    div.offset_info {
        width:100%;
        padding-left:0;
    }

    div.offset_info div.offset_info_head {
        flex-direction:column;
    }

    div.offset-content div.offset_info > div.offset_params_order > div,
    div.offset-content div.offset_info div.offset_cost{
        flex-wrap: wrap;
    }

    div.offset-content .offset_info > div.offset_params_order > div > div:first-child,
    div.offset-content .offset_info div.offset_cost > div:first-child{
        height: 70px;
        min-height: 70px;
        width: 100%;
        padding:5px 0;
        margin:0 0 15px 0;
    }

    div.offset-content .offset_info div.offset_cost > div:first-child{
        height: 80px;
    }

    div.offset_info div.offset_info_head div.cForWidth {
        width: 100% !important;
        height: auto !important;
    }

    div.offset_info div.offset_info_head div.cForWidth a{
        margin-left:0;
        float: right;
    }

    div.offset_info div.offset_info_head div.cForTemplate {
        width: 100%  !important;
    }

    div.offset_info div.offset_info_head div.cForTemplate img{
        position:relative !important;
        top:0 !important;
        height:auto;
    }

    /*div.offset_info div.offset_params_order > div{
    width:auto;
    margin-right:10px;
    }*/

    /*div.offset_params_order > div > div:first-child,
    div.offset_cost > div:first-child{
        width:53px !important;
        min-width:53px !important;
    }

    div.offset_params_order > div > div:first-child{
        margin-right:10px !important;
    }

    div.offset_cost > div:first-child{
        margin-right:0 !important;
    }*/

    div.offset_params_order > div > div:first-child > span:first-child,
    div.offset_cost > div:first-child > span:first-child{
        font-size:35px !important;
        width:42px !important;
        height:42px !important;
    }

    /*div.offset_params_order > div > div:first-child > span:nth-child(2){
        font-size:11px !important;
    }

    div.offset_cost > div:first-child > span:nth-child(2){
        font-size:11px !important;
    }*/

    div.offset_info > div.offset_params_order > div.first-block-ofset > div:nth-child(2){
        justify-content: start !important;
        font-size:17px;
        flex-direction: column;
    }

    div.offset_info > div.offset_params_order > div.first-block-ofset > div:nth-child(2) > div{
        width: 95% !important;
        margin: 5px 5px 15px 5px !important;
    }

    div.offset_info > div.offset_params_order > div.first-block-ofset > div:nth-child(2) textarea{
        width: 97% !important;
        height: 90px !important;
    }

    div.offset-content > div.offset_info div._btn_group_radio > div:nth-child(2){
        width: 80% !important;
    }

    div.offset-content > div.offset_info div._btn_group_radio{
        font-size: 0.85rem;
    }

    div.offset_maket > div:nth-child(2) div.front-block,
    div.offset_maket > div:nth-child(2) div.back-block{
        width: 95% !important;
        margin-left: 0 !important;
    }

    div.offset_info > div.offset_params_order > div > div:nth-child(2){
        padding-left: 3% !important;
    }

    div.offset_maket div.ap-hide{
        width:75%;
        font-size:16px;
    }

    div.offset_maket div._btn_group_radio{
        flex-direction: column;
    }

    div.offset-content > div.offset_info #ap_agree > div.ap_buttons{
        justify-content: space-between;
        gap: 5px;
    }

    div.offset-content > div.offset_info #ap_agree > div.ap_buttons > button{
        padding: 8px 0.7rem;
    }

    div.cOffsetDelivery div.check_delivery{
        width:100%;
        padding-right: 8px;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab{
        width: 100% !important;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab > div:first-child{
        display: flex;
        flex-direction: column;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab div.tablinks1{
        height: 6rem;
        width: 33%;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab div.tablinks1 > label{
        width: auto;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab div.tablinks1 > label > div:first-of-type{
        width: 100%;
    }

    div.cOffsetDelivery > div.check_delivery > div.tab div.tablinks1 > label > div:first-of-type > img{
        width: 100%;
        top: -90%;
        height: 180%;
        padding: 0;
    }

    div.offset-content > div.offset_info #pickup{
        width: 100% !important;
    }

    div.offset-content > div.offset_info div.sp_tk_block.active{
        width: 100% !important;
    }

    div.delivery_block_ad_of_dpd > div:first-child > input.dpd_city{
        width: 90% !important;
        font-size: 14px;
        margin: 0 0 0 2% !important;
        border-right-width: 2px;
    }

    div.offset-content > div.offset_info #dpd_delivery{
        width: 100% !important;
    }

    div.offset-content > div.offset_info #dpdTargetedBlock{
        width: 100% !important;
    }

    div.delivery_block_ad_of_dpd > .dr_dpd_ou > div > input {
        width: 90% !important;
    }

    div.delivery_block_ad_of_dpd > .dr_dpd_ou > div > input.delivery_to {
        width: 95% !important;
    }

    div.offset-content > div.offset_info #dpdTargetedBlock > div.delivery_block_ad_of_dpd > div:first-child,
    div.offset-content > div.offset_info #dpd_delivery > div.dpd_terminal > div.delivery_block_ad_of_dpd div.cInfo_addressee.delivery_block_dpd_dpdp > div:first-child,
    div.offset-content > div.offset_info #targeted_delivery > div.delivery_block > div:first-child{
        flex-direction: column;
        text-align: center;
    }

    div.offset_cost > div, div.offset_cost > div > table{
        margin-right:0 !important;
    }

    div.offset_cost > div > table > tbody > tr > td{
        /*width: auto !important;*/
        padding: 5px 0px 5px 5px !important;
    }

    div.offset_cost > div > table > tbody > tr{
        font-size: 13px !important;
    }

    div.offset_cost > div > table > tbody > tr:first-child > td:first-child > span,
    #ofset_cost_dpd{
        font-size: 16px !important;
    }

    .offset_cost > div > table > tbody > tr > td:nth-child(2) > span{
        padding: 0 !important;
    }

    div.offset-content .offset_info > div.offset_cost > div i{
        font-size: 12px !important;
    }

    div.offset_cost > div > table > tbody > tr > td:nth-child(4) > span{
        padding-left: 3px;
    }

    div.offset-content > div.offset-materail-table div[class*=material] table tr td:first-child {
        width: 100% !important;
    }
    /*.cost_visor{*/
    /*    margin-left: 0!important;*/
    /*}*/

    div.offset-content > div.offset_info div.tablinks1 > label.mytooltip > span.tooltiptext{
        font-size: 10pt !important;
    }

    div.offset-content > div.offset_info #dpd_delivery, #dpd_delivery > div.dpd_terminal{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    div.offset-content > div.offset_info #pickup div.sp_points div.dr_dpd_ou input{
        width: 90% !important;
    }

    div.offset-content > div.offset_info div.offset_params_order div.params{
        width: 95%;
    }

    div.offset-content > div.offset_info div.offset_params_order
    div.params div.offset_maket div._btn_group_radio div:first-of-type{
        width: auto !important;
    }

    div.offset-content > div.offset_info div.offset_params_order
    div.params div.offset_maket div.cShowPreview{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    div.offset-content > div.offset_info div.offset_params_order
    div.params div.offset_maket > div.cShowPreview > div{
        width: auto;
    }

    div.offset-content > div.offset_info div.offset_params_order
    div.params div.offset_maket > div.cShowPreview > div.wrap_box_img_block_back{
        margin: 10px 0;
    }

    div.offset-content > div.offset_info #descLines{
        width: auto !important;
        padding-left: 8px;
        font-size: 16px;
    }

    div.offset-content > div.offset_info #targeted_delivery{
        width: auto !important;
    }

    /*div.offset-content > div.offset_info #targeted_delivery > div.delivery_block > div:first-child{
        flex-direction: column;
    }

    div.offset-content > div.offset_info #targeted_delivery > div.delivery_block > div:first-child{
        text-align: center;
    }*/

    div.offset-content > div.offset_info #targeted_delivery > .delivery_block > .dr_dpd_ou > div input,
    div.offset-content > div.offset_info #dpdTargetedBlock > .delivery_block_ad_of_dpd > .dr_dpd_ou > div input,
    div.offset-content > div.offset_info #dpd_delivery > div.dpd_terminal > div.delivery_block_ad_of_dpd div.cInfo_addressee.delivery_block_dpd_dpdp > .dr_dpd_ou > div input{
        width: 92% !important;
    }

    div.offset-content > div.offset_info #dpd_delivery > div.dpd_terminal div.cDPD_terminal_selection div.sTK_block {
        font-size: 10px  !important;
    }

    div.offset-content > div.offset_info #dpd_delivery > div.dpd_terminal div.cDPD_terminal_selection div.sTK_block > div.tk_block > table > tbody > tr:first-child > td:first-child{
        display: none;
    }

    div.main_page-phone_number > div.d-flex.justify-content-center.align-items-center:nth-child(2){
        flex-direction: column;
        padding-top: 15px;
        padding-bottom: 10px;
    }

    div.main_page-phone_number > div.d-flex.justify-content-center.align-items-center:nth-child(2) > div.line_h{
        height: 3px;
    }

    div.main_page-phone_number > div.d-flex.justify-content-center.align-items-center:nth-child(2) a{
        font-size: 0.58rem;
        color: #7e7e7e;
    }

    #authConfirm > div:first-child{
        position: relative !important;
        width: 95% !important;
        left: auto !important;
        margin-left: auto;
        margin-right: auto;
        margin-top: 8%;
        max-width: 500px;
    }

    .main_page-phone_number div.footer-container {
        width: auto;
    }

    /* deliveryLocationSelector */
    #deliveryLocationSelector form {
        width: 100%;
    }
    #deliveryLocationSelector form > div {
        width: inherit;
    }
    #deliveryLocationSelector form > div > .d-flex {
        flex-direction: column;
    }
    #deliveryLocationSelector form > div > .d-flex > div {
        margin: 0 !important;
    }
    #deliveryLocationSelector form > div > .d-flex > div input {
        width: 100% !important;
    }
    /* [end] deliveryLocationSelector */
}


@media (max-width: 769px) {
    .head-main.menu-narrow .partner-office{
        display: none;
        transition: display 1s linear;
    }
    .tab-pane .left-menu{
        order: 1;
    }
}

/* print-house-products: horizontal scroll for the large-format price table on narrow screens
   (the table is wider than the viewport and body has overflow-x: hidden, so prices were cut off).
   The product title inside the same block stays in place while the table is scrolled. */
.print-house-products-app .large {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}
.print-house-products-app .large > :not(table) {
    position: sticky;
    left: 0;
}

/* print-house-products: animated swipe hint above the price tables (mobile):
   large-format table (.large) and offset / multipage tables (.material-price, MaterialPrice component).
   Shown only on narrow screens; in browsers with scroll-driven animations it appears only
   when the table really overflows and fades out once the user starts scrolling. */
@media screen and (max-width: 767px) {
    /* hint goes between the product title and the table */
    .print-house-products-app .large {
        display: flex;
        flex-direction: column;
    }
    .print-house-products-app .large > table {
        order: 2;
        align-self: flex-start;
    }

    .print-house-products-app .large::before,
    .print-house-products-app .material-price > div[style*="overflow-x"]::before {
        order: 1;
        content: "\41B \438 \441 \442 \430 \439 \442 \435  \442 \430 \431 \43B \438 \446 \443 ";
        position: sticky;
        left: 0;
        display: block;
        box-sizing: border-box;
        height: 34px;
        margin-bottom: 6px;
        padding-left: 52px;
        overflow: hidden;
        font-size: 13px;
        line-height: 34px;
        white-space: nowrap;
        color: inherit;
        opacity: .85;
        pointer-events: none;
        background: linear-gradient(currentColor, currentColor) 0 50% / 48px 30px no-repeat;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5 3 8l3.5 3.5M3 8h5.5M37.5 4.5 41 8l-3.5 3.5M41 8h-5.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(10 4)'%3E%3Cpath d='M10 17V4.5a1.5 1.5 0 0 1 3 0V12'/%3E%3Cpath d='M13 11a1.5 1.5 0 0 1 3 0v1.5'/%3E%3Cpath d='M16 11.8a1.5 1.5 0 0 1 3 0V16a6 6 0 0 1-6 6h-1a6 6 0 0 1-4.7-2.3L4.6 16.3a1.6 1.6 0 0 1 2.4-2.1L10 17'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5 3 8l3.5 3.5M3 8h5.5M37.5 4.5 41 8l-3.5 3.5M41 8h-5.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(10 4)'%3E%3Cpath d='M10 17V4.5a1.5 1.5 0 0 1 3 0V12'/%3E%3Cpath d='M13 11a1.5 1.5 0 0 1 3 0v1.5'/%3E%3Cpath d='M16 11.8a1.5 1.5 0 0 1 3 0V16a6 6 0 0 1-6 6h-1a6 6 0 0 1-4.7-2.3L4.6 16.3a1.6 1.6 0 0 1 2.4-2.1L10 17'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
        -webkit-mask-size: 44px 30px, 44px 30px, calc(100% - 50px) 100%;
        mask-size: 44px 30px, 44px 30px, calc(100% - 50px) 100%;
        -webkit-mask-position: 2px 50%, 2px 50%, 100% 0;
        mask-position: 2px 50%, 2px 50%, 100% 0;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        animation: php-swipe-hint 1.8s ease-in-out infinite;
    }

    @keyframes php-swipe-hint {
        0%, 100% {
            -webkit-mask-position: 2px 50%, -2px 50%, 100% 0;
            mask-position: 2px 50%, -2px 50%, 100% 0;
        }
        50% {
            -webkit-mask-position: 2px 50%, 6px 50%, 100% 0;
            mask-position: 2px 50%, 6px 50%, 100% 0;
        }
    }

    @supports (animation-timeline: scroll()) {
        .print-house-products-app .large::before,
        .print-house-products-app .material-price > div[style*="overflow-x"]::before {
            height: 0;
            margin-bottom: 0;
            opacity: 0;
            visibility: hidden;
            animation: php-swipe-hint 1.8s ease-in-out infinite, php-swipe-hint-reveal linear both;
            animation-timeline: auto, scroll(nearest inline);
            animation-range: normal, 0 80px;
        }

        @keyframes php-swipe-hint-reveal {
            from { height: 34px; margin-bottom: 6px; opacity: .85; visibility: visible; }
            to   { height: 34px; margin-bottom: 6px; opacity: 0; visibility: visible; }
        }
    }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .print-house-products-app .large::before,
    .print-house-products-app .material-price > div[style*="overflow-x"]::before {
        -webkit-mask-position: 2px 50%, 2px 50%, 100% 0;
        mask-position: 2px 50%, 2px 50%, 100% 0;
        animation: none;
    }

    @supports (animation-timeline: scroll()) {
        .print-house-products-app .large::before,
        .print-house-products-app .material-price > div[style*="overflow-x"]::before {
            animation: php-swipe-hint-reveal linear both;
            animation-timeline: scroll(nearest inline);
            animation-range: 0 80px;
        }
    }
}

/* print-house-products: step 3 "Size and quantity" of the large-format order form.
   .order-large__user-params is a nowrap flex row with two .order-large-dimensions columns
   (editable width/height/quantity and the calculated area). With the fixed widths
   (label 150px + input/value 140px) the row is ~664px wide, so on a phone the second column
   was pushed off the right edge of the screen and the price row was cut off as well.
   On narrow screens the columns are stacked and every row stretches to the block width. */
@media screen and (max-width: 767px) {
    .print-house-products-app .order-large__user-params {
        flex-wrap: wrap;
    }

    .print-house-products-app .order-large__user-params > .order-large-dimensions {
        flex: 1 1 100%;
        min-width: 0;
    }

    .print-house-products-app .order-large-dimensions .order-large-dimensions__parameter,
    .print-house-products-app .order-large-dimensions .order-large-dimensions__parameter--editable,
    .print-house-products-app .order-large-price {
        width: auto;
        margin-right: 0;
        gap: .5rem;
    }

    .print-house-products-app .order-large-dimensions .order-large-dimensions__parameter-label,
    .print-house-products-app .order-large-price .order-large-price__label {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .print-house-products-app .order-large-dimensions .order-large-dimensions__parameter-input,
    .print-house-products-app .order-large-dimensions .order-large-dimensions__parameter-value,
    .print-house-products-app .order-large-price .order-large-price__value {
        flex: 0 1 140px;
        width: auto;
        min-width: 0;
    }
}