.mobile-pages-menu { display: none; }

@media (max-width: 768px) {
    header { padding: 10px 5%; }
    nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
    nav .logo { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    nav ul { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 16px; }
    nav ul .desktop-pages-link { display: none; }
    nav ul .mobile-visible-page-link { display: list-item; }
    .mobile-pages-menu { display: block; grid-column: 2; grid-row: 1; position: relative; }
    .mobile-pages-menu:not([open]) .mobile-pages-links { display: none; }
    .mobile-pages-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--zloto); border-radius: 5px; color: var(--granat); cursor: pointer; list-style: none; }
    .mobile-pages-menu summary::-webkit-details-marker { display: none; }
    .mobile-pages-menu summary::before { content: '☰'; font-size: 1.45rem; line-height: 1; }
    .mobile-pages-links { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1001; display: flex; flex-direction: column; min-width: 170px; padding: 8px; background: var(--biel); border: 1px solid rgba(26,44,84,.12); border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
    .mobile-pages-links a { padding: 11px 14px; color: var(--granat); font-weight: bold; text-decoration: none; border-radius: 4px; white-space: nowrap; }
    .mobile-pages-links a:hover, .mobile-pages-links a[aria-current="page"] { color: var(--zloto); background: var(--tlo-jasne); }
}