@font-face {
        font-family: "NinoMtavruli";
        src: url("/assets/fonts/bpg-nino-mtavruli-bold-webfont.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "NinoMedium";
        src: url("/assets/fonts/bpg-nino-medium-webfont.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Mrgvlovani";
        src: url("/assets/fonts/bpg-mrgvlovani-caps-webfont.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --yg-ink: #202422;
        --yg-forest: #34433f;
        --yg-forest-2: #52625c;
        --yg-panel: #ffffff;
        --yg-panel-soft: #f6f8f3;
        --yg-line: rgba(32, 36, 34, 0.12);
        --yg-blue: #86b7e5;
        --yg-orange: #f6a333;
        --yg-green: #a8c937;
        --yg-text: #263238;
        --yg-muted: #75808a;
        --yg-shadow: 0 20px 52px rgba(45, 61, 52, 0.10);
        --yg-font-heading: "NinoMtavruli", "Arial Unicode MS", sans-serif;
        --yg-font-body: "NinoMedium", "Noto Sans Georgian", Arial, sans-serif;
    }

    html,
    body.yoga-modern-page {
        min-height: 100%;
        background:
            radial-gradient(circle at 18% 0%, rgba(134, 183, 229, 0.24), transparent 30%),
            radial-gradient(circle at 88% 8%, rgba(168, 201, 55, 0.18), transparent 28%),
            linear-gradient(180deg, #34433f 0%, #2f3d32 280px, #e9f2ec 280px, #f4f7f2 100%);
        color: var(--yg-text);
    }

    body.yoga-modern-page {
        font-family: var(--yg-font-body);
        line-height: 1.65;
    }

    body.yoga-modern-page h1,
    body.yoga-modern-page h2,
    body.yoga-modern-page h3,
    body.yoga-modern-page h4,
    body.yoga-modern-page h5,
    body.yoga-modern-page h6 {
        font-family: var(--yg-font-heading);
        letter-spacing: 0;
    }

    .yoga-modern-menu {
        position: relative;
        z-index: 20;
        padding: 18px 0 12px;
        background: linear-gradient(135deg, rgba(35, 50, 46, 0.98), rgba(53, 70, 57, 0.95));
        border-bottom: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 18px 44px rgba(20, 31, 27, 0.18);
    }

    .yoga-menu-inner {
        width: min(1380px, calc(100% - 48px));
        min-height: 72px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 22px;
    }

    .yoga-modern-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: #fff;
        text-decoration: none;
    }

    .yoga-modern-brand:hover,
    .yoga-modern-brand:focus {
        color: #fff;
        text-decoration: none;
    }

    .yoga-modern-brand img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        padding: 7px;
        border-radius: 6px;
        background: rgba(255,255,255,0.09);
        border: 1px solid rgba(255,255,255,0.12);
    }

    .yoga-modern-brand strong {
        display: block;
        font-size: 18px;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .yoga-modern-brand span span {
        display: block;
        margin-top: 3px;
        color: rgba(255,255,255,0.64);
        font-size: 12px;
    }

    .yoga-modern-links {
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .yoga-modern-link {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 9px 13px;
        border-radius: 6px;
        color: rgba(255,255,255,0.82);
        text-decoration: none;
        font-size: 13px;
        font-weight: 750;
        font-family: var(--yg-font-heading);
        border: 1px solid transparent;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .yoga-modern-link:hover,
    .yoga-modern-link:focus {
        color: #fff;
        text-decoration: none;
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.13);
    }

    .yoga-modern-link.active {
        color: #202422;
        background: var(--yg-green);
        border-color: rgba(168, 201, 55, 0.5);
        box-shadow: 0 10px 22px rgba(168, 201, 55, 0.18);
    }

    .yoga-modern-dotbar {
        justify-self: end;
        display: inline-flex;
        gap: 9px;
        align-items: center;
    }

    .yoga-modern-dotbar span {
        width: 42px;
        height: 6px;
        border-radius: 99px;
        display: block;
        box-shadow: 0 5px 14px rgba(0,0,0,0.12);
    }

    .yoga-modern-dotbar span:nth-child(1) { background: var(--yg-blue); }
    .yoga-modern-dotbar span:nth-child(2) { background: var(--yg-orange); }
    .yoga-modern-dotbar span:nth-child(3) { background: var(--yg-green); }

    /* Footer styles live in yoga-modern-footer.php (light, logo-accent). */

    .yoga-modern-panel {
        position: relative;
        overflow: hidden;
        background: var(--yg-panel);
        border: 1px solid var(--yg-line);
        border-radius: 8px;
        box-shadow: var(--yg-shadow);
    }

    .yoga-modern-panel::before {
        content: "";
        position: absolute;
        top: 18px;
        right: 52px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--yg-blue);
        box-shadow: 15px 0 0 var(--yg-orange), 30px 0 0 var(--yg-green);
        opacity: 0.72;
    }

    @media (max-width: 991px) {
        .yoga-menu-inner {
            grid-template-columns: 1fr;
        }

        .yoga-modern-links,
        .yoga-modern-dotbar {
            justify-self: start;
            justify-content: flex-start;
        }
    }

    @media (max-width: 575px) {
        .yoga-menu-inner {
            width: min(100% - 20px, 1380px);
        }
    }