[data-role="path"] { padding-block: 20px 60px; }
[data-role="path"] h2 { font-size: 1.6rem; max-width: 36ch; margin-bottom: 26px; }
[data-role="path-links"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
[data-role="path-links"] a { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; min-height: 114px; padding: 22px; border: 1px solid #c4d5dc; border-radius: 10px; background: #f1f7f9; text-decoration: none; box-shadow: 6px 6px 14px #d0e0e5, -6px -6px 14px #ffffff; }
[data-role="path-label"] { grid-column: 1 / -1; color: var(--muted); font-size: 1rem; }
[data-role="path-links"] a > span:last-child { font-size: 1.2rem; }
[data-role="path-links"] a:hover, [data-role="path-links"] a[aria-current] { background: #dceef5; border-color: #90afbc; }

@media (max-width: 900px) { [data-role="path-links"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  [data-role="path"] { padding-block: 12px 40px; }
  [data-role="path-links"] { grid-template-columns: 1fr; gap: 16px; }
  [data-role="path-links"] a { padding: 18px 20px; min-height: 98px; }
}