:root {
    --trend-menu-accent: #126dcc;
    --trend-menu-text: #292929;
    --trend-menu-muted: #6f7480;
    --trend-menu-surface: #f6f7f9;
    --trend-menu-border: #dfe2e7;
    --trend-menu-focus: #154f9b;
}

.trend-menu-page { max-width: 1040px; min-height: 100vh; margin: 0 auto; padding: 24px 32px 72px; }
.trend-menu-page .site-navigation { margin-bottom: 56px; }
.trend-menu-intro { max-width: 640px; margin-bottom: 54px; }
.trend-menu-eyebrow { margin: 0 0 8px; color: var(--trend-menu-accent); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.trend-menu-intro h1 { margin: 0; color: var(--trend-menu-text); font-size: clamp(34px, 5vw, 48px); letter-spacing: -.04em; }
.trend-menu-intro > p:last-child { margin: 14px 0 0; color: var(--trend-menu-muted); font-size: 16px; line-height: 1.65; }
.trend-menu-groups { display: grid; gap: 54px; }
.trend-menu-group { scroll-margin-top: 24px; }
.trend-menu-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.trend-menu-group-heading h2 { margin: 0; color: var(--trend-menu-text); font-size: clamp(25px, 3.5vw, 32px); letter-spacing: -.035em; }
.trend-menu-group-heading a { display: inline-flex; align-items: center; gap: 6px; color: var(--trend-menu-accent); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.trend-menu-group-heading a span { font-size: 28px; font-weight: 400; line-height: .5; }
.trend-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trend-menu-item { display: grid; place-content: center; min-height: 70px; padding: 10px 8px; color: var(--trend-menu-text); font-size: clamp(17px, 3.7vw, 22px); font-weight: 600; line-height: 1.15; text-align: center; background: var(--trend-menu-surface); border: 1px solid var(--trend-menu-border); border-radius: 10px; }
.trend-menu-item--available { color: var(--trend-menu-accent); text-decoration: none; background: #f4f8fe; border-color: #b8d1ef; }
.trend-menu-item-status { display: block; margin-top: 5px; color: var(--trend-menu-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.trend-menu-item--available:hover { background: #eaf3ff; border-color: var(--trend-menu-accent); transform: translateY(-1px); }
.trend-menu-item--available:focus-visible, .trend-menu-group-heading a:focus-visible { outline: 3px solid var(--trend-menu-focus); outline-offset: 3px; }

@media (min-width: 768px) {
    .trend-menu-grid { gap: 16px; }
    .trend-menu-item { min-height: 80px; }
}

@media (max-width: 640px) {
    .trend-menu-page { padding: 16px 20px 44px; }
    .trend-menu-page .site-navigation { margin-bottom: 38px; }
    .trend-menu-intro { margin-bottom: 42px; }
    .trend-menu-intro > p:last-child { font-size: 14px; }
    .trend-menu-groups { gap: 42px; }
    .trend-menu-group-heading { align-items: center; margin-bottom: 16px; }
    .trend-menu-group-heading a { font-size: 14px; }
    .trend-menu-grid { gap: 8px; }
    .trend-menu-item { min-height: 62px; padding: 7px 3px; border-radius: 8px; }
    .trend-menu-item-status { margin-top: 4px; font-size: 9px; }
}