/* ==========================================================================
   Mobile layout — aligned with dimdoma.ru (Tilda)
   Breakpoints: 1199 / 959 / 639 / 479 px
   ========================================================================== */

@media (max-width: 1199px) {
    .container {
        width: 100%;
        max-width: 1148px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        box-sizing: border-box;
    }

    .page-bg {
        display: block;
        overflow: hidden;
    }

    .page-shell {
        overflow-x: clip;
    }

    .page-bg__canvas {
        --page-bg-scale: 1;
        transform: scale(var(--page-bg-scale));
        transform-origin: top center;
    }

    .page-bg__layer {
        will-change: auto;
    }

    .header__nav {
        margin-top: 1.5rem;
        height: auto;
        min-height: 56px;
        border-radius: 16px;
        padding: 0.35rem 0;
    }

    .header__nav-list {
        padding: 0 0.75rem;
        font-size: 14px;
    }

    .order,
    .steps,
    .tariffs,
    .reviews,
    .masters,
    .stars-section,
    .feedback,
    .footer {
        margin-top: 5rem;
    }

    .order__content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-left: 0;
        justify-items: center;
    }

    .order__form-decor {
        display: none;
    }

    .order__form-header {
        grid-template-columns: 1fr;
    }

    .order__form-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .order__image {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }

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

    .steps__layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        gap: 2rem;
    }

    .steps__arrows {
        display: none;
    }

    .steps__card--order {
        order: 1;
    }

    .steps__card--delivery {
        order: 2;
    }

    .steps__center {
        order: 3;
        align-self: center;
    }

    .steps__card--service {
        order: 4;
    }

    .steps__card--finish {
        order: 5;
    }

    .tariffs__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .reviews__layout {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 2.5rem;
        justify-items: center;
    }

    .reviews__column {
        min-height: auto;
        gap: 2rem;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }

    .reviews__column--left,
    .reviews__column--right {
        align-items: center;
        text-align: center;
    }

    .reviews__center {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .reviews__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .reviews__item-image {
        margin-inline: auto;
    }

    .reviews__item-title,
    .reviews__item-desc {
        text-align: center;
    }

    .reviews__item--right .reviews__item-image {
        margin-left: auto;
        margin-right: auto;
    }

    .masters__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .masters__cards {
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }

    .masters__hero {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .masters__stat,
    .masters__guarantee,
    .masters__profile {
        position: static;
        max-width: 100%;
        text-align: center;
    }

    .masters__guarantee {
        justify-content: center;
    }

    .masters__profile {
        flex-direction: column;
        align-items: center;
    }

    .stars-section__gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

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

/* Desktop: навигация всегда видна (бургер скрыт в style.css) */
@media (min-width: 960px) {
    .header__nav {
        display: flex !important;
    }
}

/* Tablet portrait — Tilda artboard ~640px */
@media (max-width: 959px) {
    .container {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .header__top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.65rem 0.75rem;
        align-items: start;
    }

    .header__logo {
        grid-column: 1;
        grid-row: 1;
    }

    .header__logo svg {
        width: 64px;
        height: auto;
    }

    .header__social {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    .header__social-icon {
        width: 36px;
        height: 36px;
    }

    .header__contacts {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        justify-self: stretch;
        font-size: 13px;
    }

    .header__phone {
        grid-column: 2;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
    }

    .header__phone .btn--phone {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 30px;
    }

    .header__phone .btn--phone::before {
        display: none;
    }

    .header__burger {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    .header__nav {
        display: none;
        margin-top: 1rem;
        height: auto;
        border-radius: 16px;
        padding: 0.35rem 0;
    }

    .header__nav--open {
        display: flex;
    }

    .header__nav-list {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.35rem 1rem;
        font-size: 15px;
    }

    .header__nav-link {
        padding: 0.75rem 0;
        text-align: center;
    }

    .hero {
        width: 100%;
        max-width: 512px;
        margin-top: 2rem;
        margin-inline: auto;
        padding: 1.5rem 0 2rem;
        gap: 1rem;
        text-align: left;
    }

    .hero__title {
        font-size: 40px;
        line-height: 1.3;
        max-width: 512px;
    }

    .hero__service {
        width: 100%;
        max-width: 363px;
        font-size: 18px;
    }

    .btn--order,
    .hero .btn--order {
        width: 100%;
        max-width: 371px;
        height: auto;
        min-height: 56px;
        padding: 0.85rem 1.25rem;
        white-space: normal;
        line-height: 1.35;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 3rem;
        padding-left: 1.75rem;
        padding-right: 0;
        justify-items: stretch;
    }

    .feature-card {
        width: 100%;
        max-width: 320px;
        margin-inline: auto 0;
    }

    .feature-card__panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .feature-card__title,
    .feature-card__subtitle,
    .feature-card__desc {
        margin-inline: auto;
        text-align: center;
    }

    .order__heading {
        font-size: 32px;
    }

    .order__form-card {
        max-width: 440px;
        padding: 2rem 1.5rem 1.75rem;
        min-height: auto;
    }

    .order__input {
        width: 100%;
        max-width: 280px;
    }

    .order__submit {
        width: 100%;
        max-width: 300px;
    }

    .steps__heading {
        font-size: 32px;
    }

    .steps__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .steps__card--finish,
    .steps__card--service {
        flex-direction: column;
    }

    .steps__card-body,
    .steps__card--finish .steps__card-body,
    .steps__card--service .steps__card-body {
        text-align: center;
    }

    .steps__card-title,
    .steps__card--finish .steps__card-title,
    .steps__card--service .steps__card-title {
        justify-content: center;
    }

    .steps__center img {
        width: min(100%, 280px);
        max-height: none;
    }

    .steps__card-media img {
        max-width: 180px;
    }

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

    .masters-card {
        margin-left: 0;
        max-width: 100%;
        padding-top: 2.75rem;
    }

    .masters-card__badge {
        left: 1rem;
        top: 0.85rem;
        transform: none;
        box-shadow: 0 0 0 4px #fdfdfd;
    }

    .masters-card__image {
        width: min(100%, 200px);
        object-position: center center;
    }
}

/* Mobile — Tilda artboard ~480px */
@media (max-width: 639px) {
    body {
        overflow-x: hidden;
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .header__contacts {
        font-size: 12px;
    }

    .header__address::before,
    .header__work-time::before {
        width: 20px;
        height: 20px;
        margin-right: 0.65rem;
    }

    .hero {
        max-width: 366px;
        text-align: center;
        justify-items: center;
    }

    .hero__title {
        font-size: 28px;
        line-height: 1.35;
        max-width: 366px;
        margin-inline: auto;
    }

    .hero__service {
        max-width: 324px;
        font-size: 16px;
        margin-inline: auto;
        text-align: center;
        justify-items: center;
        grid-template-columns: 18px 1fr;
    }

    .btn--order,
    .hero .btn--order {
        max-width: 339px;
        margin-inline: auto;
        font-size: 12px;
    }

    .features {
        padding-left: 1.5rem;
        padding-right: 0.5rem;
        justify-items: center;
    }

    .feature-card {
        max-width: 300px;
        margin-inline: auto;
    }

    .feature-card__title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .feature-card__subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .feature-card__desc {
        font-size: 12px;
        line-height: 1.55;
    }

    .feature-card__panel {
        min-height: 280px;
        padding: 30px 24px 26px 34px;
    }

    .order__heading {
        font-size: 26px;
        line-height: 1.25;
        padding-inline: 0.5rem;
    }

    .order__flavors {
        font-size: 18px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .order__image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin-inline: auto;
        border-radius: 4%;
        object-fit: cover;
    }

    .order__form-card {
        max-width: 100%;
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .order__form-intro strong {
        font-size: 22px;
        line-height: 1.3;
    }

    .order__form-intro small {
        font-size: 14px;
    }

    .order__input,
    .order__submit {
        width: 100%;
        max-width: 100%;
    }

    .steps__heading,
    .tariffs__heading,
    .reviews__heading,
    .masters__heading,
    .stars-section__heading,
    .feedback__heading {
        font-size: 26px;
        line-height: 1.25;
    }

    .steps__subtitle,
    .tariffs__subtitle,
    .reviews__years,
    .masters__subtitle,
    .stars-section__subtitle,
    .feedback__subtitle {
        font-size: 16px;
    }

    .steps__card-media img {
        max-width: 160px;
    }

    .reviews__center img {
        width: min(100%, 280px);
        height: auto;
    }

    .reviews__item {
        max-width: 100%;
    }

    .masters__cards {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .masters-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .masters-card__badge {
        left: 50%;
        top: 0.85rem;
        transform: translateX(-50%);
    }

    .masters-card__body {
        align-items: center;
    }

    .stars-section__gallery {
        grid-template-columns: 1fr;
    }

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

    .stars-section__tags {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .stars-section__tag {
        font-size: 11px;
        padding: 0.4rem 0.65rem;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer__brand,
    .footer__info,
    .footer__messengers,
    .footer__call {
        align-items: center;
    }

    .feedback__slider {
        flex-direction: column;
        gap: 1rem;
    }

    .feedback__phone {
        max-width: 280px;
    }

    .seo-content__title {
        font-size: 24px;
    }

    .seo-content__subtitle {
        font-size: 18px;
    }
}

/* Small mobile — Tilda artboard ~320px (iPhone 14 Pro Max и уже) */
@media (max-width: 479px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .header__logo svg {
        width: 56px;
    }

    .header__social-icon {
        width: 32px;
        height: 32px;
    }

    .header__phone .btn--phone {
        font-size: 12px;
        height: 38px;
        padding: 0 8px;
    }

    .header__burger {
        width: 40px;
        height: 40px;
    }

    .hero {
        max-width: 303px;
        padding: 1rem 0 1.5rem;
    }

    .hero__title {
        font-size: 24px;
        max-width: 303px;
    }

    .hero__service {
        max-width: 284px;
        font-size: 14px;
    }

    .btn--order,
    .hero .btn--order {
        max-width: 289px;
        min-height: 52px;
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .features {
        padding-left: 1.25rem;
        padding-right: 0.25rem;
    }

    .feature-card {
        max-width: 300px;
    }

    .feature-card__panel {
        padding: 28px 24px 24px 28px;
    }

    .feature-card__title {
        font-size: 18px;
    }

    .order__heading {
        font-size: 22px;
    }

    .order__image img {
        width: 100%;
        max-width: 100%;
    }

    .order__form-intro strong {
        font-size: 20px;
    }

    .steps__heading,
    .tariffs__heading,
    .reviews__heading,
    .masters__heading,
    .stars-section__heading,
    .feedback__heading {
        font-size: 22px;
    }

    .feedback__nav {
        width: 36px;
        height: 36px;
    }

    .blog__heading--post {
        font-size: 24px;
    }
}