.catalog-grade-heading{margin-bottom:24px}
.catalog-grade-heading h1{display:flex;align-items:center;gap:8px;font-size:24px;line-height:1.4;margin:0 0 6px}
.catalog-grade-heading p{font-size:12px;color:var(--muted);margin:0}
.catalog-grade-select select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 10px;cursor:pointer;max-width:180px}
.catalog-grade-select select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grade-access-notice{position:fixed;z-index:10000;top:100px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;max-width:calc(100vw - 32px);padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 8px 30px #0002;font-size:13px}
.grade-access-notice button{border:0;background:transparent;color:var(--muted);opacity:.65;font-size:20px;cursor:pointer;padding:0 4px;flex:none}
@media(max-width:760px){.catalog-grade-heading h1{font-size:21px}.grade-access-notice{top:85px;width:max-content}}

.catalog-grade-picker{position:relative;display:inline-flex;align-items:center}
.catalog-grade-trigger{display:inline-flex;align-items:center;gap:9px;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-weight:inherit;cursor:pointer}
.catalog-grade-trigger:focus-visible{outline:1px solid var(--accent);outline-offset:5px;border-radius:3px}
.catalog-grade-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text);opacity:.85}
.catalog-grade-menu{position:absolute;left:calc(100% + 12px);top:0;z-index:50;min-width:118px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 8px 24px #0003}
.catalog-grade-menu[hidden]{display:none}
.catalog-grade-menu button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1.5;font-weight:500;cursor:pointer}
.catalog-grade-menu button:hover,.catalog-grade-menu button:focus-visible{background:var(--soft);color:var(--text)}
.catalog-grade-menu button.selected{background:var(--soft);color:var(--accent)}
.catalog-grade-menu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
@media(max-width:360px){.catalog-grade-menu{left:calc(100% + 6px);min-width:100px}.catalog-grade-menu button{padding-inline:9px;gap:10px}}

.catalog-grade-menu{min-width:156px;padding:8px;border-radius:14px;background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:0 12px 36px #0003;font-family:inherit}
.catalog-grade-menu>strong{display:block;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.5}
.catalog-grade-menu button{padding:9px 10px;border-radius:7px;font-size:12px;font-weight:400;line-height:1.5;color:var(--text)}
.catalog-grade-menu button.selected{color:var(--accent);background:var(--soft)}
.catalog-grade-menu button:hover{background:var(--soft);color:var(--accent)}
.catalog-grade-menu svg{width:17px;height:17px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@media(max-width:400px){.catalog-grade-menu{min-width:130px;padding:6px;left:calc(100% + 6px)}}

.grade-access-notice{top:50%;left:50%;transform:translate(-50%,-50%);padding:22px 26px;gap:24px;border-radius:18px;font-size:16px;font-weight:600;line-height:1.6;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 16px 60px #0005;max-width:calc(100vw - 40px);width:max-content}
.grade-access-notice button{font-size:23px;font-weight:400;padding:2px 5px}
@media(max-width:760px){.grade-access-notice{top:50%;padding:20px;gap:16px;font-size:15px}}