/* Deep blue header; the existing clay material is reserved for controls. */
body > header,
body > nav.clay-site-nav {
    background: #0b5a67 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 8px 20px rgba(0, 27, 32, .24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.pm-page-scrolled body > nav.clay-site-nav {
    box-shadow: 0 8px 20px rgba(0, 27, 32, .24) !important;
}

/* Header copy is light on blue. The clay controls supply their own dark ink. */
body > header :is(.mobile-worktime, .mobile-address, .mobile-phone,
    .header-info, .header-info .font-medium, .header-hours span,
    .header-phone-mobile, .header-phone-desktop),
body > header a[href="index.html"],
.clay-site-nav .top-nav-list {
    color: #fffaf3 !important;
    text-shadow: none !important;
}
body > header :is(.mobile-worktime, .mobile-address, .header-hours span) {
    color: rgba(255, 250, 243, .78) !important;
}

/* Negative margins preserve the menu's text positions and row footprint. */
.clay-site-nav .top-nav-list > li > :is(button, a) {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    margin: -7px -12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Enlarge the ceramic mark visually while keeping its layout box unchanged. */
body > header img[src$="header-may.webp"] {
    aspect-ratio: 1;
    width: auto;
    object-fit: cover;
    clip-path: circle(45% at 50% 50%);
    transform: scale(1.4);
    transform-origin: center;
}

/* Existing messenger anchors retain their text, labels, hrefs and hit areas. */
body > header :is(.header-actions, .mobile-socials) > a[aria-label] {
    position: relative;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body > header :is(.header-actions, .mobile-socials) > a[aria-label]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-position: center;
    background-size: 170% 170%;
    background-repeat: no-repeat;
    box-shadow: 0 3px 5px rgba(0, 33, 38, .28);
    pointer-events: none;
}
body > header a[aria-label="ВКонтакте"]::before { background-image: url("header-vk.webp"); }
body > header a[aria-label="Telegram"]::before { background-image: url("header-tg.webp"); }
body > header a[aria-label="MAX"]::before { background-image: url("header-max.webp"); }
@media (hover: hover) and (pointer: fine) {
    body > header :is(.header-actions, .mobile-socials) > a[aria-label]:hover::before {
        transform: translateY(-1px);
        box-shadow: 0 5px 7px rgba(0, 33, 38, .32);
    }
}
@media (max-width: 767px) {
    body > header img[src$="header-may.webp"] { transform: scale(1.25); }
    /* The mobile link boxes keep their original 32 × 24 hit areas. */
    body > header .mobile-socials > a[aria-label]::before {
        left: 50%;
        right: auto;
        width: 24px;
        height: 24px;
        transform: translateX(-50%);
    }
    body > header .mobile-socials > a[aria-label]:hover::before {
        transform: translateX(-50%);
    }
}

/* The footer uses the exact same glazed art as the upper three links. */
.footer-social-link {
    position: relative;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.footer-social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-position: center;
    background-size: 170% 170%;
    background-repeat: no-repeat;
    box-shadow: 0 3px 5px rgba(0, 33, 38, .28);
    pointer-events: none;
}
.footer-social-link[aria-label="ВКонтакте"]::before { background-image: url("header-vk.webp"); }
.footer-social-link[aria-label="Telegram"]::before { background-image: url("header-tg.webp"); }
.footer-social-link[aria-label="MAX"]::before { background-image: url("header-max.webp"); }

/* Desktop dropdowns retain the existing show/hide transforms and click logic. */
.clay-site-nav .top-dropdown {
    background: #e4d7c6 url("clay-material.webp") center / cover no-repeat !important;
    background-blend-mode: luminosity;
    border: 1px solid rgba(112, 82, 61, .32) !important;
    box-shadow: inset 0 1px 1px rgba(255, 250, 235, .7),
        inset 0 -2px 2px rgba(110, 79, 55, .16),
        0 12px 24px rgba(0, 27, 32, .38) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.clay-site-nav .top-dropdown-link { color: #073f46 !important; }
.clay-site-nav .top-dropdown-link:hover {
    background: rgba(7, 63, 70, .09) !important;
    color: #073f46 !important;
}
.clay-site-nav .top-dropdown-group-title { color: rgba(7, 63, 70, .65) !important; }

/* The existing mobile menu opens exactly as before, with matching material. */
#mobile-menu.is-open {
    background: #e4d7c6 url("clay-material.webp") center / cover no-repeat !important;
    background-blend-mode: luminosity;
    border-color: rgba(112, 82, 61, .32) !important;
    box-shadow: 0 12px 26px rgba(0, 27, 32, .3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#mobile-menu :is(.mobile-menu-item, .mobile-menu-link, .mobile-submenu a) {
    background: #e4d7c6 url("clay-material.webp") center / cover no-repeat !important;
    background-blend-mode: luminosity;
    border: 1px solid rgba(112, 82, 61, .23) !important;
    box-shadow: inset 0 1px 1px rgba(255, 250, 235, .65),
        0 3px 6px rgba(0, 27, 32, .2) !important;
    color: #073f46 !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#mobile-menu :is(.mobile-menu-item, .mobile-menu-link, .mobile-submenu a):hover {
    background-color: #d9cbb8 !important;
}