.sub-nav { grid-area: subnav; background: #fff; padding: 0.6rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.sub-nav-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; }
.sub-nav-item { padding: 0.5rem 1.5rem; font-weight: 600; border-radius: 12px; border: 2px solid transparent; min-width: 120px; text-align: center; transition: all 0.3s ease; }
.sub-nav-item.shop { background: #fde8e8; color: #b91c1c; border-color: #f5b5b5; }
.sub-nav-item.history { background: #f5ede4; color: #8b5e3c; border-color: #decbb8; }
.sub-nav-item.nature { background: #e6f5ed; color: #1a7a42; border-color: #a8d5b8; }
.sub-nav-item.projects { background: #ebe8f5; color: #4c3d8a; border-color: #c4b3e0; }
.sub-nav-item.active { transform: translateY(-4px) scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@media(max-width: 767px) {
    .sub-nav-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.5rem; }
    .sub-nav-item { font-size: 0.8rem; padding: 0.4rem 0.8rem; min-width: 90px; white-space: nowrap; }
}