/* Button resets for elements converted from divs to semantic buttons. */
#masthead button.toggle-search,
#masthead .add-nav button.toggle,
#masthead button.menu-close {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

/* ============================================================
 * ROSA Clinic — Mobile homepage v2
 * Пункт 7 ТЗ
 *
 * Десктоп не меняем. Новые правила активируются до 767 px.
 * ============================================================ */

.mobile-home-only,
.mobile-home-title-text,
.mobile-home-subtitle-text,
.mobile-menu-v2,
.mobile-category-description,
.mobile-category-arrow {
    display: none;
}

@media (max-width: 767px) {

    :root {
        --rosa-mobile-green: #149443;
        --rosa-mobile-green-dark: #087f35;
        --rosa-mobile-green-soft: #eef8ef;
        --rosa-mobile-text: #161a18;
        --rosa-mobile-muted: #737b77;
        --rosa-mobile-line: #e8ece9;
        --rosa-mobile-bg: #ffffff;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body:has(.main-menu.open) {
        overflow: hidden;
    }

    .mobile-home-only,
    .mobile-home-title-text,
    .mobile-home-subtitle-text,
    .mobile-category-description,
    .mobile-category-arrow {
        display: block;
    }

    .desktop-home-title-text,
    .desktop-home-subtitle-text,
    .desktop-home-working-text {
        display: none !important;
    }

    .mobile-home-working-text {
        display: block !important;
    }

    /* --------------------------------------------------------
     * Header
     * -------------------------------------------------------- */

    #masthead.site-header {
        position: relative;
        z-index: 1000;
        width: 100%;
        background: #fff;
        box-shadow: none;
    }

    #masthead > .container {
        width: 100%;
        max-width: none;
        padding: 0 14px;
        box-sizing: border-box;
    }

    #masthead .top-panel {
        width: 100%;
        min-height: 64px;
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 2px;
        padding: 5px 0;
        box-sizing: border-box;
    }

    #masthead .top-panel .logo-box {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    #masthead .top-panel .logo-box img,
    #masthead .top-panel .logo-box .logo {
        width: auto !important;
        height: 48px !important;
        max-width: 92px;
        object-fit: contain;
    }

    #masthead .top-panel .logo-desc,
    #masthead .top-panel > .adress-box,
    #masthead .top-panel > .contact-box,
    #masthead .top-panel .icons-box > .item {
        display: none !important;
    }

    #masthead .top-panel .icons-box {
        grid-column: 3;
        display: flex !important;
        justify-self: end;
        align-items: center;
        gap: 0 !important;
    }

    #masthead .top-panel .icons-box .search-form {
        display: block !important;
        margin: 0;
    }

    #masthead .toggle-search,
    #masthead .add-nav .toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer;
        appearance: none;
    }

    #masthead .toggle-search:focus-visible,
    #masthead .add-nav .toggle:focus-visible,
    #masthead .menu-close:focus-visible {
        outline: 2px solid var(--rosa-mobile-green);
        outline-offset: 2px;
    }

    #masthead .toggle-search img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        object-fit: contain;
    }

    #masthead .add-nav {
        grid-column: 4;
        display: block !important;
        justify-self: end;
        margin: 0 !important;
    }

    #masthead .add-nav img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        object-fit: contain;
    }

    #masthead .nav-box {
        width: 100%;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible;
    }

    #masthead .nav-box .service-menu,
    #masthead .nav-box > .search-form {
        display: none !important;
    }

    /* --------------------------------------------------------
     * Fullscreen mobile menu
     * -------------------------------------------------------- */

    #masthead .main-menu {
        display: none;
    }

    #masthead .main-menu.open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10050 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        box-sizing: border-box;
        overscroll-behavior: contain;
    }

    #masthead .main-menu .desktop-primary-menu {
        display: none !important;
    }

    #masthead .main-menu .menu-close {
        position: absolute !important;
        top: 8px !important;
        right: 10px !important;
        z-index: 3;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        cursor: pointer;
        appearance: none;
    }

    #masthead .main-menu .menu-close img {
        width: 22px !important;
        height: 22px !important;
        filter: none !important;
    }

    #masthead .mobile-menu-v2 {
        width: 100%;
        min-height: 100%;
        display: flex !important;
        flex-direction: column;
        padding: 8px 14px 18px;
        box-sizing: border-box;
        background: #fff;
    }

    .mobile-menu-v2__head {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding-right: 48px;
    }

    .mobile-menu-v2__logo,
    .mobile-menu-v2__logo a {
        display: inline-flex !important;
        align-items: center;
    }

    .mobile-menu-v2__logo img {
        width: auto;
        height: 44px;
        display: block;
    }

    .mobile-menu-v2__contact {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin-top: 2px;
        padding: 9px 10px;
        border: 1px solid #eef1ef;
        border-radius: 12px;
        background: #fafcfb;
        box-sizing: border-box;
    }

    .mobile-menu-v2__phone-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--rosa-mobile-green-soft);
    }

    .mobile-menu-v2__phone-icon img {
        width: 28px;
        height: 28px;
        display: block;
    }

    .mobile-menu-v2__phone-copy {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        text-align: left;
    }

    .mobile-menu-v2__phone-copy > span,
    .mobile-menu-v2__phone-copy > small {
        color: #6f7773;
        font-size: 9px;
        line-height: 1.25;
    }

    .mobile-menu-v2__phone-copy > a {
        display: inline-block !important;
        margin-top: 1px;
        color: #111 !important;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 600;
        text-decoration: none !important;
    }

    .mobile-menu-v2__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 7px;
    }

    .mobile-menu-v2__action {
        width: 100%;
        min-height: 38px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px 12px !important;
        border-radius: 6px !important;
        box-sizing: border-box;
        font: inherit;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        cursor: pointer;
    }

    .mobile-menu-v2__action--primary {
        border: 1px solid var(--rosa-mobile-green) !important;
        background: var(--rosa-mobile-green) !important;
        color: #fff !important;
    }

    .mobile-menu-v2__action--secondary {
        border: 1px solid var(--rosa-mobile-green) !important;
        background: #fff !important;
        color: var(--rosa-mobile-green-dark) !important;
    }

    .mobile-menu-v2__action-icon,
    .mobile-home-action__icon {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .mobile-menu-v2__action-icon--calendar,
    .mobile-home-action__icon--calendar {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='14' height='12' rx='2'/%3E%3Cpath d='M6 2.8v3.1M14 2.8v3.1M3 8h14'/%3E%3C/svg%3E");
    }

    .mobile-menu-v2__action-icon--phone,
    .mobile-home-action__icon--phone {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23149443' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 2.8l2.4 3.1-1.8 2.2c1.2 2.4 3 4.2 5.4 5.4l2.2-1.8 3.1 2.4c.5.4.6 1.1.3 1.7-.6 1-1.7 1.6-2.9 1.5C8.1 16.8 3.2 11.9 2.7 6.1c-.1-1.2.5-2.3 1.5-2.9.4-.3.7-.5 1-.4z'/%3E%3C/svg%3E");
    }

    .mobile-menu-v2__list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .mobile-menu-v2__list--secondary {
        margin-top: 6px !important;
        padding-top: 4px !important;
        border-top: 1px solid var(--rosa-mobile-line);
    }

    .mobile-menu-v2__item {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .mobile-menu-v2__link {
        width: 100%;
        min-height: 40px;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 14px;
        align-items: center;
        gap: 8px;
        padding: 5px 2px !important;
        border-bottom: 1px solid #edf0ee;
        box-sizing: border-box;
        color: #202522 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
    }

    .mobile-menu-v2__link.is-current {
        color: var(--rosa-mobile-green-dark) !important;
        font-weight: 600 !important;
        background: #f7fbf7;
    }

    .mobile-menu-v2__icon {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f1f9f2;
        color: var(--rosa-mobile-green);
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-menu-v2__icon img {
        width: 26px;
        height: 26px;
        object-fit: cover;
        display: block;
    }

    .mobile-menu-v2__icon > span {
        width: 12px;
        height: 12px;
        display: block;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        position: relative;
        box-sizing: border-box;
    }

    .mobile-menu-v2__icon > span::before,
    .mobile-menu-v2__icon > span::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transform: translate(-50%, -50%);
    }

    .mobile-menu-v2__icon > span::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .mobile-menu-v2__link--secondary .mobile-menu-v2__icon {
        background: #f5f6f6;
        color: #8a928e;
    }

    .mobile-menu-v2__arrow {
        width: 7px;
        height: 7px;
        justify-self: end;
        border-top: 1.4px solid #626a66;
        border-right: 1.4px solid #626a66;
        transform: rotate(45deg);
    }

    .mobile-menu-v2__link.is-current .mobile-menu-v2__arrow {
        opacity: .25;
    }

    .mobile-menu-v2__footer {
        margin-top: auto;
        padding-top: 12px;
    }

    .mobile-menu-v2__socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .mobile-menu-v2__socials a {
        width: 28px;
        height: 28px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
    }

    .mobile-menu-v2__socials img {
        width: 28px;
        height: 28px;
        display: block;
        border-radius: 50%;
    }

    .mobile-menu-v2__addresses {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        margin-top: 8px;
        color: #5c6761;
        font-size: 9px;
        line-height: 1.3;
        text-align: center;
    }

    .mobile-menu-v2__addresses span {
        position: relative;
        padding-left: 13px;
    }

    .mobile-menu-v2__addresses span::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 7px;
        height: 7px;
        border: 1.3px solid var(--rosa-mobile-green);
        border-radius: 50%;
        transform: translateY(-55%);
        box-sizing: border-box;
    }

    /* --------------------------------------------------------
     * Homepage ordering: existing categories block is reused,
     * not duplicated, and visually moves right after hero.
     * -------------------------------------------------------- */

    main.homepage {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }

    main.homepage > .home-hero {
        order: -20;
    }

    main.homepage > .categories-section {
        order: -19;
    }

    /* --------------------------------------------------------
     * Mobile hero
     * -------------------------------------------------------- */

    .home-hero {
        width: 100%;
        padding: 8px 0 10px !important;
        background: #fff !important;
        background-image: none !important;
        box-sizing: border-box;
    }

    .home-hero .container {
        width: 100%;
        max-width: none;
        padding: 0 14px !important;
        box-sizing: border-box;
    }

    .home-hero .hero-content {
        width: 100%;
        max-width: none !important;
    }

    .mobile-home-label {
        width: max-content;
        max-width: 100%;
        margin: 0 0 8px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #eef8ef;
        color: #31964a;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 500;
        box-sizing: border-box;
    }

    .home-hero .hero-content .title h1,
    .home-hero .hero-content h1 {
        max-width: 340px;
        margin: 0 !important;
        color: var(--rosa-mobile-text) !important;
        font-size: 28px !important;
        line-height: 1.03 !important;
        font-weight: 700 !important;
        letter-spacing: -0.6px;
    }

    .mobile-home-title-text {
        display: inline !important;
    }

    .home-hero .hero-content .title > p,
    .home-hero .hero-content > .title p {
        max-width: 320px;
        margin: 9px 0 0 !important;
        color: #6e7772 !important;
        font-size: 13px !important;
        line-height: 1.32 !important;
        font-weight: 400;
    }

    .mobile-home-subtitle-text {
        display: inline !important;
    }

    .home-hero .phone {
        width: 100%;
        min-height: 72px;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 16px 0 8px !important;
        padding: 9px 10px !important;
        border: 1px solid #edf1ee;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 3px 14px rgba(0, 0, 0, .035);
        box-sizing: border-box;
    }

    .home-hero .phone .home-hero__phone-icon {
        width: 48px;
        height: 48px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        border-radius: 50%;
        background: #eff9ef;
        text-decoration: none !important;
    }

    .home-hero .phone .home-hero__phone-icon img,
    .home-hero .phone img {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block;
        object-fit: contain;
    }

    .home-hero .phone .text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .home-hero .phone .text > span {
        color: #737b77 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .home-hero .phone .text > a {
        display: inline-block !important;
        color: #171a18 !important;
        font-size: 19px !important;
        line-height: 1.18 !important;
        font-weight: 600;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .home-hero .phone .text .mobile-home-working-note {
        display: block !important;
        margin-top: 1px;
        color: #43a34d !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 600;
    }

    .mobile-home-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .mobile-home-action {
        width: 100%;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 9px 14px !important;
        border-radius: 7px !important;
        box-sizing: border-box;
        font: inherit;
        font-size: 13px !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        cursor: pointer;
    }

    .mobile-home-action--appointment {
        border: 1px solid var(--rosa-mobile-green) !important;
        background: var(--rosa-mobile-green) !important;
        color: #fff !important;
    }

    .mobile-home-action--call {
        border: 1px solid var(--rosa-mobile-green) !important;
        background: #fff !important;
        color: var(--rosa-mobile-green-dark) !important;
    }

    .mobile-home-clinic-image {
        width: 100%;
        margin-top: 10px;
        border-radius: 12px;
        overflow: hidden;
        background: #eef2ef;
        aspect-ratio: 2 / 1;
    }

    .mobile-home-clinic-image__img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover;
        object-position: center;
        margin: 0 !important;
    }

    .mobile-home-benefits {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 8px;
        border: 1px solid #eff1f0;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-home-benefit {
        min-width: 0;
        min-height: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 4px;
        box-sizing: border-box;
        text-align: center;
    }

    .mobile-home-benefit + .mobile-home-benefit {
        border-left: 1px solid #eff1f0;
    }

    .mobile-home-benefit__icon {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-home-benefit__icon img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        display: block;
        object-fit: contain;
        margin: 0 !important;
    }

    .mobile-home-benefit__text {
        max-width: 92px;
        color: #59625d;
        font-size: 9.5px;
        line-height: 1.25;
        font-weight: 400;
    }

    /* --------------------------------------------------------
     * Existing services-blocks -> mobile direction cards
     * -------------------------------------------------------- */

    .categories-section {
        width: 100%;
        padding: 0 0 22px !important;
        background: #fff !important;
        box-sizing: border-box;
    }

    .categories-section > .container {
        width: 100%;
        max-width: none;
        padding: 0 14px !important;
        box-sizing: border-box;
    }

    .categories-section .container > .heading,
    .categories-section .categories-wrapper > .btn-gradient,
    .categories-section .section-divider,
    .categories-section .categories-form-wrapper {
        display: none !important;
    }

    .categories-section .categories-wrapper {
        width: 100%;
        text-align: left !important;
    }

    .categories-section .categories-box {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    .categories-section .categories-box .item {
        display: none !important;
    }

    .categories-section .categories-box .item.mobile-home-direction {
        position: relative;
        width: 100% !important;
        min-height: 58px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 16px;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 10px;
        padding: 8px 11px !important;
        border: 1px solid #edf0ee;
        border-radius: 12px !important;
        background: #fff !important;
        overflow: hidden;
        box-sizing: border-box;
        text-align: left !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .category-name {
        grid-column: 2;
        grid-row: 1;
        max-width: none !important;
        display: block !important;
        color: #202522 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .mobile-category-description {
        grid-column: 2;
        grid-row: 2;
        max-width: none !important;
        display: block !important;
        color: #858c88 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > img {
        position: static !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > a {
        position: absolute !important;
        inset: 0 !important;
        z-index: 4;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        text-decoration: none !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .mobile-category-arrow {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-self: center;
        width: 8px;
        height: 8px;
        display: block !important;
        border-top: 2px solid var(--rosa-mobile-green);
        border-right: 2px solid var(--rosa-mobile-green);
        transform: rotate(45deg);
        box-sizing: border-box;
    }

    /* --------------------------------------------------------
     * Focus / pressed states
     * -------------------------------------------------------- */

    .mobile-home-action:focus-visible,
    .categories-section .mobile-home-direction > a:focus-visible,
    .mobile-menu-v2__link:focus-visible,
    .mobile-menu-v2__action:focus-visible,
    .mobile-menu-v2__socials a:focus-visible,
    .home-hero__phone-icon:focus-visible,
    .home-hero .phone .text > a:focus-visible {
        outline: 2px solid var(--rosa-mobile-green) !important;
        outline-offset: 2px;
    }

    .mobile-home-action:active,
    .mobile-menu-v2__action:active,
    .categories-section .mobile-home-direction:active {
        transform: translateY(1px);
    }

    /* Tiny screens: 320–360 px */
    @media (max-width: 360px) {
        #masthead > .container,
        .home-hero .container,
        .categories-section > .container {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }

        .home-hero .hero-content .title h1,
        .home-hero .hero-content h1 {
            font-size: 26px !important;
            letter-spacing: -0.4px;
        }

        .home-hero .phone .text > a {
            font-size: 17px !important;
        }

        .mobile-home-benefit__text {
            font-size: 8.8px;
        }

        .mobile-menu-v2 {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }
    }
}


/* ============================================================
 * v3 visual corrections — prototype alignment
 * This block is intentionally last in the file.
 * ============================================================ */
@media (max-width: 767px) {
    /* Header: logo + search + burger exactly in one compact row. */
    #masthead > .container {
        padding-left: 13px !important;
        padding-right: 9px !important;
    }

    #masthead .top-panel {
        min-height: 58px !important;
        grid-template-columns: auto 1fr 44px 44px !important;
        gap: 0 !important;
        padding: 3px 0 !important;
    }

    #masthead .top-panel .logo-box img,
    #masthead .top-panel .logo-box .logo {
        height: 45px !important;
        max-width: 80px !important;
    }

    #masthead .top-panel .icons-box {
        display: flex !important;
        grid-column: 3 !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    #masthead .top-panel .icons-box .search-form {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead .top-panel .toggle-search {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead .top-panel .toggle-search img {
        display: block !important;
        width: 23px !important;
        height: 23px !important;
    }

    #masthead .add-nav {
        display: block !important;
        grid-column: 4 !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #masthead .add-nav .toggle {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #masthead .add-nav .toggle img {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    /* First screen proportions. */
    .home-hero {
        padding: 5px 0 7px !important;
    }

    .home-hero .container,
    .categories-section > .container {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .mobile-home-label {
        margin-bottom: 6px !important;
        padding: 4px 9px !important;
        font-size: 10px !important;
    }

    .home-hero .hero-content .title h1,
    .home-hero .hero-content h1 {
        max-width: 315px !important;
        font-size: 25px !important;
        line-height: .99 !important;
        letter-spacing: -.45px !important;
    }

    .home-hero .hero-content .title > p,
    .home-hero .hero-content > .title p {
        max-width: 305px !important;
        margin-top: 7px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    .home-hero .phone {
        min-height: 64px !important;
        grid-template-columns: 45px minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 11px 0 6px !important;
        padding: 7px 9px !important;
        border-radius: 10px !important;
    }

    .home-hero .phone .home-hero__phone-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .home-hero .phone .home-hero__phone-icon img,
    .home-hero .phone img {
        width: 31px !important;
        height: 31px !important;
    }

    .home-hero .phone .text > span {
        font-size: 9px !important;
    }

    .home-hero .phone .text > a {
        font-size: 18px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .home-hero .phone .text .mobile-home-working-note {
        font-size: 9px !important;
    }

    .mobile-home-actions {
        gap: 5px !important;
    }

    .mobile-home-action {
        min-height: 37px !important;
        height: 37px !important;
        padding: 6px 12px !important;
        border-radius: 5px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .mobile-home-action__icon {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }

    .mobile-home-clinic-image {
        display: block !important;
        width: 100% !important;
        margin-top: 7px !important;
        aspect-ratio: 3.12 / 1 !important;
        min-height: 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
        background: #eef2ef !important;
    }

    .mobile-home-clinic-image__img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
        object-position: center 53% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .mobile-home-benefits {
        display: grid !important;
        min-height: 61px !important;
        margin-top: 7px !important;
        border-radius: 9px !important;
    }

    .mobile-home-benefit {
        min-height: 61px !important;
        gap: 3px !important;
        padding: 5px 2px !important;
    }

    .mobile-home-benefit__icon {
        width: 25px !important;
        height: 25px !important;
        color: #149443 !important;
    }

    .mobile-home-benefit__icon svg {
        display: block !important;
        width: 25px !important;
        height: 25px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .mobile-home-benefit__custom-icon {
        display: block !important;
        width: 25px !important;
        height: 25px !important;
        object-fit: contain !important;
    }

    .mobile-home-benefit__text {
        max-width: 88px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        color: #525a56 !important;
    }

    /* Direction list must directly follow the benefits. */
    main.homepage > .categories-section {
        display: block !important;
        padding: 0 0 12px !important;
        margin: 0 !important;
        background: #fff !important;
    }

    .categories-section .categories-wrapper,
    .categories-section .categories-box {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction {
        position: relative !important;
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        display: grid !important;
        grid-template-columns: 35px minmax(0, 1fr) 13px !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 0 8px !important;
        margin: 6px 0 0 !important;
        padding: 5px 9px !important;
        border: 1px solid #edf0ee !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .category-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        font-size: 11px !important;
        line-height: 1.12 !important;
        font-weight: 600 !important;
        color: #242925 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .mobile-category-description {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        display: block !important;
        margin-top: 1px !important;
        font-size: 7.8px !important;
        line-height: 1.1 !important;
        color: #858c88 !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > img,
    .categories-section .categories-box .item.mobile-home-direction > .mobile-category-image {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 35px !important;
        height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .categories-section .categories-box .item.mobile-home-direction > .mobile-category-arrow {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        width: 7px !important;
        height: 7px !important;
        border-width: 0 1.8px 1.8px 0 !important;
        border-style: solid !important;
        border-color: #149443 !important;
        transform: rotate(-45deg) !important;
    }

    /* The reused desktop section itself should contribute no extra spacing. */
    .categories-section .container > .heading,
    .categories-section .categories-wrapper > .btn-gradient,
    .categories-section .section-divider,
    .categories-section .categories-form-wrapper {
        display: none !important;
    }

    /* Keep subsequent desktop content visually separated after the mobile first screen. */
    main.homepage > .about-section {
        margin-top: 10px !important;
    }
}

@media (max-width: 360px) {
    .home-hero .hero-content .title h1,
    .home-hero .hero-content h1 {
        max-width: 285px !important;
        font-size: 23px !important;
    }

    .home-hero .phone .text > a {
        font-size: 17px !important;
    }
}