/* =============================================================
   RESPONSIVE  —  поверх template_styles.css
   Брейкпоинты: tablet ≤ 959px  |  mobile ≤ 639px  |  small ≤ 399px

   @author  Evgeni <github.com/wpadmin>
   @version 2026-05-07  адаптив рефакторинг
   ============================================================= */

html,
body {
    min-width: 0 !important;
}

table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.wow {
    visibility: visible !important;
}

#feedback_block .input_block p,
#feedback_block .input_block .placeh p {
    margin: 0;
}

/* ---- tablet  (≤ 959px) ------------------------------------ */

@media (max-width: 959px) {

    .container {
        width: 100%;
        padding-inline: 16px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .image_block iframe {
        max-width: 100%;
    }

    .fancybox-wrap .fancybox-close {
        width: 35px;
        height: 35px;
    }

    .header {
        height: auto;
        padding-block: 12px;
    }

    .header .container {
        display: flex;
        align-items: center;
        min-block-size: 60px;
    }

    .header .fl {
        float: none;
        position: static;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 50%;
        flex-shrink: 0;
    }

    .header .logo {
        position: static;
    }

    .header .logo img {
        max-height: 80px;
        width: auto;
    }

    .header .slogan {
        position: static;
        inset-inline-start: auto;
        top: auto;
    }

    .header .slogan img {
        max-width: 170px;
        height: auto;
    }

    .header .fr {
        float: none;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
        width: 50%;
    }

    .header .fr .top_menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 0;
    }

    .header .fr .top_menu ul li {
        margin: 0;
    }

    .header .fr .top_menu ul li a {
        font-size: 14px;
        padding-inline: 10px;
        padding-block: 2px;
    }

    .head_right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .head_right .header_phone {
        font-size: 20px;
        font-weight: bold;
        white-space: nowrap;
    }

    .white_line .main_menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-block: 4px;
    }

    .white_line .main_menu li {
        margin: 0;
    }

    .white_line .main_menu li a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        padding-block: 8px;
        padding-inline: 10px;
    }

    /* иконки перед пунктами меню (планшет — слева, мобильный — сверху) */
    .white_line .main_menu li a::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }

    .white_line .main_menu li a[href*="/asfalt"]::before {
        background-image: url(../img/road-roller.svg);
    }

    .white_line .main_menu li a[href*="/beton"]::before {
        background-image: url(../img/concrete-mixer-truck.svg);
    }

    .white_line .main_menu li a[href*="/shheben"]::before {
        background-image: url(../img/gravel-pile.svg);
    }

    .white_line .main_menu li a[href*="/pesok"]::before {
        background-image: url(../img/sand-pile.svg);
    }

    .white_line .main_menu li a[href*="/dostavka"]::before {
        background-image: url(../img/dump-truck.svg);
    }

    .head_main_include {
        position: static;
        width: 100%;
        inset: auto;
        padding: 16px 18px;
        margin-block-end: 24px;
        background: rgb(0 0 0 / 0.2);
        border-radius: 12px;
        backdrop-filter: blur(2px);
    }

    .head_main_include>br,
    .head_main_include+br,
    .head_main_include+div+br {
        display: none;
    }

    /* верхний отступ у первого ребёнка main, чтобы контент не прижимался к меню */
    .content>.container.pr:first-child,
    .content>div:first-child {
        padding-block-start: 20px;
    }

    .breadcrumb br,
    .breadcrumb hr {
        display: none;
    }

    a.button.big[style] {
        display: block;
        width: fit-content;
        margin-inline: auto !important;
    }

    .why_we_icon {
        position: static;
        inset: auto;
        text-align: center;
        margin-block-end: 20px;
    }

    .why_we_icon+br,
    .why_we_icon+br+br,
    .why_we_icon+br+br+br,
    .why_we_icon+br+br+br+br {
        display: none;
    }

    .form_block {
        padding-top: 0;
    }

    .why_we_list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 8px;
        list-style: none;
        text-align: center;
        padding: 0 0 30px;
    }

    .why_we_list li {
        display: block;
        width: auto;
        margin: 0;
    }

    .main_menu_block {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
        gap: 16px 8px;
        padding-block: 30px;
        text-align: center;
    }

    .main_menu_block .item {
        display: block;
        width: auto;
        margin: 0;
    }

    .main_menu_block .item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 18px;
    }

    .main_menu_block .item a span.img {
        margin-bottom: 0;
        max-width: 100%;
    }

    .footer {
        height: auto;
        margin-top: 0;
        padding-block: 20px;
    }

    .content {
        padding-block-end: 0;
    }

    .footer .fl,
    .footer .fr {
        float: none;
        inline-size: 100%;
    }

    .footer .fr {
        text-align: start;
    }

    .footer_phone {
        text-align: start;
        margin-block: 10px;
    }

    .footer_seacrh input[type="text"] {
        inline-size: 100%;
        background-color: rgb(255 255 255 / 0.08);
        background-image: none;
        border: 1px solid rgb(255 255 255 / 0.2);
    }

    .bottom_menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 12px;
        margin: 20px 0;
        text-align: start;
    }

    .bottom_menu li {
        margin: 0 !important;
        display: flex;
    }

    /* меняем местами: Контакты идут раньше, Благотворительность — последней */
    .bottom_menu li:has(a[href*="kontakty"]),
    .bottom_menu li:has(a[href*="contact"]) {
        order: 1;
    }

    .bottom_menu li:has(a[href*="blagotvor"]),
    .bottom_menu li:has(a[href*="charit"]) {
        order: 2;
        grid-column: 1 / -1;
    }

    .bottom_menu li a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-block: 10px;
        font-size: 16px;
    }

    .bottom_menu li a::before {
        content: "";
        width: 24px;
        height: 24px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }

    .bottom_menu li a[href*="/asfalt"]::before {
        background-image: url(../img/road-roller.svg);
    }

    .bottom_menu li a[href*="/beton"]::before {
        background-image: url(../img/concrete-mixer-truck.svg);
    }

    .bottom_menu li a[href*="/shheben"]::before {
        background-image: url(../img/gravel-pile.svg);
    }

    .bottom_menu li a[href*="/pesok"]::before {
        background-image: url(../img/sand-pile.svg);
    }

    .bottom_menu li a[href*="/dostavka"]::before {
        background-image: url(../img/dump-truck.svg);
    }

    .bottom_menu li a[href*="kompanii"]::before,
    .bottom_menu li a[href*="about"]::before {
        background-image: url(../img/about.svg);
    }

    .bottom_menu li a[href*="kontakty"]::before,
    .bottom_menu li a[href*="contact"]::before {
        background-image: url(../img/maps.svg);
    }

    .bottom_menu li a[href*="otzyv"]::before,
    .bottom_menu li a[href*="review"]::before {
        background-image: url(../img/comment.svg);
    }

    .bottom_menu li a[href*="blagotvor"]::before,
    .bottom_menu li a[href*="charit"]::before {
        background-image: url(../img/charity.svg);
    }

    [class*="col_"],
    [class*="column"] {
        float: none;
        width: 100%;
    }
}

/* fancybox popup */
@media (max-width: 639px) {

    .fancybox-wrap {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        inset-inline-start: 10px !important;
        box-sizing: border-box;
    }

    .fancybox-skin,
    .fancybox-inner,
    .fancybox-outer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .fancybox-wrap .fancybox-skin,
    div.fancybox-skin[style] {
        padding-top: 15px !important;
        padding-left: 45px !important;
    }

    .fancybox-inner {
        height: auto !important;
    }

    #feedback_block {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    #feedback_block .input_block,
    #feedback_block .input_block .placeh {
        width: 100%;
        box-sizing: border-box;
    }

    #feedback_block .input_block .placeh p,
    #feedback_block .input_block p {
        margin: 0;
    }

    #feedback_block input[type="text"],
    #feedback_block input[type="tel"],
    #feedback_block input[type="email"],
    #feedback_block textarea {
        width: 100%;
        box-sizing: border-box;
    }

    #feedback_block .button {
        width: 100%;
        max-width: 100%;
    }

    #feedback_block .wpcf7-turnstile,
    #feedback_block .cf-turnstile {
        max-width: 100%;
        overflow: hidden;
        transform-origin: left top;
    }
}

@media (max-width: 359px) {

    #feedback_block .wpcf7-turnstile,
    #feedback_block .cf-turnstile {
        transform: scale(0.85);
        margin-block-end: -10px;
    }
}

/* ---- mobile  (≤ 639px) ------------------------------------ */

@media (max-width: 639px) {

    .header {
        padding: 0;
    }

    .header .container {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .header .fr {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-block: 5px;
        padding-inline: 12px;
        background: rgb(0 0 0 / 0.2);
    }

    .header .fr .top_menu {
        display: block;
    }

    .header .fr .top_menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .header .fr .top_menu ul li {
        margin: 0;
    }

    .header .fr .top_menu ul li a {
        font-size: 13px;
        padding-block: 3px;
        padding-inline: 10px;
    }

    .header .fl {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
        padding: 0 12px 8px 130px;
        width: 100%;
    }

    .header .logo {
        position: absolute;
        top: 0;
        inset-inline-start: 12px;
        z-index: 20;
    }

    .header .logo img {
        max-height: 104px;
    }

    .header .slogan {
        position: absolute;
        bottom: 18px;
        inset-inline-start: 86px;
        z-index: 20;
    }

    .header .slogan img {
        max-width: 130px;
        height: auto;
    }

    .header .fl .logo,
    .header .fl .slogan {
        padding: 0;
    }

    .head_right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        margin-inline-start: auto;
        flex-shrink: 0;
    }

    .head_right .header_phone {
        font-size: 18px;
        font-weight: bold;
        white-space: nowrap;
        margin: 0;
    }

    .white_line--nav {
        overflow-x: auto;
    }

    .white_line--nav .container {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: auto;
    }

    .white_line--nav .main_menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
        padding-inline-start: 0;
        list-style: none;
        min-block-size: 48px;
        width: max-content;
        min-width: 100%;
    }

    .white_line--nav .main_menu li {
        margin: 0;
        flex-shrink: 0;
    }

    .white_line--nav .main_menu li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        padding-block: 8px;
        padding-inline: 12px;
        white-space: nowrap;
        line-height: 1.2;
    }

    .white_line--nav .main_menu li a::before {
        width: 26px;
        height: 26px;
    }

    .head_main_include {
        text-align: center;
        font-size: 16px;
        line-height: 1.5;
        padding-inline: 4px;
    }

    .content {
        font-size: 15px;
        line-height: 1.5;
    }

    .why_we_list {
        grid-template-columns: repeat(3, 1fr);
    }

    .main_menu_block {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        inline-size: 100%;
    }

    .input_block {
        display: block;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-block: 12px;
    }

    .line .input_block:first-child,
    .form_block .input_block:first-child {
        margin-left: auto;
    }

    .input_block .placeh {
        width: 100%;
    }

    .input_block .placeh p,
    .input_block p {
        margin: 0;
    }

    .jq-selectbox,
    .jq-selectbox__select {
        width: 100%;
    }

    .w34,
    .w14 {
        width: 100% !important;
        max-width: 100%;
        margin-inline-end: 0;
        display: block;
    }

    .grey_block .half_grey,
    .grey_block .inline {
        display: block;
        width: 100%;
        margin: 0 0 14px 0;
    }

    .grey_block .half_grey:last-child,
    .grey_block .inline:last-child {
        margin-bottom: 0;
    }

    .full_w .half_full_w {
        display: block;
        width: 100%;
        margin: 0 0 20px 0;
    }

    .full_w .half_full_w:first-child {
        margin-right: 0;
    }

    .review_add {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .review_add .half_review {
        display: block;
        width: 100% !important;
        margin-right: 0 !important;
    }

    .charity_bg {
        width: 320px;
        height: 190px;
        left: -10px;
    }

    .charityies .item {
        display: block;
        margin: 30px 0;
    }

    .charityies .item .lblock,
    .charityies .item .rblock {
        display: block;
        width: 100%;
        margin: 0 0 16px 0;
    }

    .promo_block {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: 16px;
    }

    .promo_block .item {
        display: block;
        width: 100%;
        margin: 0;
    }

    .promo_block .item:first-child {
        margin-left: 0;
    }

    .promo_block .item img {
        display: block;
        margin-inline: auto;
    }
}

/* ---- small mobile  (≤ 399px) ------------------------------ */

@media (max-width: 399px) {
    .header .fl .slogan {
        display: none;
    }

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

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