/* Keep the grade / unit navigation beside the desktop catalogue, including
   while browsing package offers and filters. Mobile keeps its existing flow. */
@media (min-width:901px) {
 html[data-theme] body main.catalog-with-directory { padding-top:calc(var(--header-height,100px) + 24px) }
 html[data-theme] body .catalog-section:not(.teacher-catalog) { padding-top:0 }
 html[data-theme] body .catalog-section:not(.teacher-catalog) > .catalog-page-heading { margin-bottom:26px; padding:0; min-height:0 }
 html[data-theme] body .catalog-section:not(.teacher-catalog) > .catalog-page-heading h1 { margin:0; font-size:40px; line-height:1.4 }
 .catalog-browser { display:grid; grid-template-columns:274px minmax(0,1fr); grid-template-areas:'directory filters' 'directory products'; gap:22px 28px; align-items:start }
 .catalog-browser.has-bundle-offers { grid-template-areas:'directory offers' 'directory filters' 'directory products' }
 .catalog-browser > .catalog-layout { display:contents }
 .catalog-browser #curriculum { grid-area:directory; position:sticky; top:calc(var(--header-height) + 18px); align-self:start }
 .catalog-browser > .catalog-bundle-grid { grid-area:offers; margin:0 }
 html[data-theme] body .catalog-browser .catalog-bundle-grid > .bundle-strip { padding:14px 16px!important; gap:12px }
 html[data-theme] body .catalog-browser .catalog-bundle-grid .bundle-strip h2 { font-size:20px; margin-bottom:6px }
 .catalog-browser .catalog-bundle-grid .bundle-strip p { font-size:12px; line-height:1.6 }
 .catalog-browser .catalog-bundle-grid .bundle-strip > a { gap:4px }
 .catalog-browser .catalog-bundle-grid .bundle-pricing { gap:2px }
 .catalog-browser .catalog-bundle-grid .bundle-current-price { font-size:26px; line-height:1.2 }
 .catalog-browser .catalog-bundle-grid .bundle-original-price { font-size:12px; line-height:1.3 }
 .catalog-browser .catalog-bundle-grid .bundle-promotion { font-size:11px; line-height:1.4 }
 .catalog-browser .catalog-bundle-grid .bundle-strip > a > span { font-size:12px; line-height:1.4 }
 .catalog-browser > .catalog-panel { grid-area:filters; min-width:0; margin:0 }
 .catalog-browser .catalog-products { grid-area:products }
 .catalog-browser .curriculum-body { padding:17px 13px 20px }
 .catalog-browser .curriculum-title h2 { font-size:19px }
 .catalog-browser .curriculum-volume > summary { font-size:16px; padding:14px 4px }
 html[data-theme] body .catalog-browser .curriculum-chapter-button { min-height:48px; font-size:17px; padding:10px 12px }

 /* The existing filter groups retain their actions and labels. The stage row
    is boxless so its search field can sit next to the source filter. */
 html[data-theme] body .catalog-browser > .catalog-panel {
  display:grid; grid-template-columns:34px minmax(205px,1fr) minmax(0,1.1fr);
  grid-template-areas:'origin origin search' 'stage-label stage subject' 'usage usage usage' 'hint hint hint';
  align-items:center; column-gap:10px; row-gap:11px; padding:18px 20px;
 }
 html[data-theme] body .catalog-browser > .catalog-panel > .filter-row { margin:0; padding:0; border:0; min-width:0; gap:9px }
 .catalog-browser > .catalog-panel > .filter-row:first-child { grid-area:origin }
 .catalog-browser > .catalog-panel > .filter-row:nth-child(2) { display:contents }
 .catalog-browser > .catalog-panel > .filter-row:nth-child(2) > .filter-label { grid-area:stage-label }
 .catalog-browser > .catalog-panel > .filter-row:nth-child(2) > .filters { grid-area:stage; min-width:0 }
 html[data-theme] body .catalog-browser > .catalog-panel .search-wrap { grid-area:search; width:100%; min-width:0; max-width:none; margin:0; min-height:42px }
 .catalog-browser > .catalog-panel > .filter-row:nth-child(3) { grid-area:subject }
 .catalog-browser > .catalog-panel > .filter-row:last-of-type { grid-area:usage }
 .catalog-browser > .catalog-panel > .catalog-search-hint { grid-area:hint; margin:0; font-size:12px; line-height:1.6 }
 html[data-theme] body .catalog-browser > .catalog-panel .filter-label { width:34px; flex:0 0 34px; font-size:13px; line-height:1.5 }
 html[data-theme] body .catalog-browser > .catalog-panel .filters { gap:3px }
 html[data-theme] body .catalog-browser > .catalog-panel .filter { min-height:38px; font-size:14px; padding:7px 10px; line-height:1.5 }
 html[data-theme] body .catalog-browser > .catalog-panel .search { min-width:0; height:40px; font-size:15px }
 html[data-theme] body .catalog-browser > .catalog-panel .sort-label { margin-left:auto; min-width:0; font-size:13px }
 html[data-theme] body .catalog-browser > .catalog-panel .sort-label select { max-width:140px; font-size:14px; min-height:38px }
 html[data-theme] body .catalog-browser > .catalog-panel:not(.has-catalog-authors) > .author-filter-row { display:none }
 html[data-theme] body .catalog-browser > .catalog-panel.has-catalog-authors { grid-template-areas:'origin origin search' 'stage-label stage subject' 'author author author' 'usage usage usage' 'hint hint hint' }
 .catalog-browser > .catalog-panel > .author-filter-row { grid-area:author }
 html[data-theme] body .catalog-browser .catalog-result-row { margin:0 0 18px; min-height:32px }
 html[data-theme] body .catalog-browser .catalog-result-row .result-count { font-size:16px }
}
@media (min-width:901px) and (max-width:1150px) {
 .catalog-browser { grid-template-columns:240px minmax(0,1fr); gap:20px }
 html[data-theme] body .catalog-browser > .catalog-panel { grid-template-columns:34px minmax(0,1fr); grid-template-areas:'origin origin' 'search search' 'stage-label stage' 'subject subject' 'usage usage' 'hint hint'; padding:16px }
 html[data-theme] body .catalog-browser > .catalog-panel.has-catalog-authors { grid-template-areas:'origin origin' 'search search' 'stage-label stage' 'subject subject' 'author author' 'usage usage' 'hint hint' }
}