/* One visual frame across the informational pages and shop. */
body:not(:has(.shell)) > header.site-head,
body:not(:has(.shell)) > header:not(.site-head){background:transparent;color:#fff;margin:0;padding:0;border:0;box-shadow:none}
body:not(:has(.shell)) > header.site-head.wrap{width:min(1144px,calc(100% - 36px));margin:18px auto 0;padding:24px 30px;min-height:150px;display:block;background:linear-gradient(125deg,#163835,#22534e);border-radius:25px;box-shadow:0 14px 35px #102c2a1c}
body:not(:has(.shell)) > header .head-row{display:block;width:min(1144px,calc(100% - 36px));margin:18px auto 0;padding:24px 30px;min-height:150px;background:linear-gradient(125deg,#163835,#22534e);border-radius:25px;box-shadow:0 14px 35px #102c2a1c}
body:not(:has(.shell)) > header .brand,
body:not(:has(.shell)) > header .logo{display:flex;align-items:center;gap:13px;width:max-content;max-width:100%;font:900 clamp(1.65rem,3vw,2.3rem)/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.045em;color:#fff;text-decoration:none}
body:not(:has(.shell)) > header .mark,
body:not(:has(.shell)) > header .logo .mark{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;margin:0;border-radius:15px;background:#f3b85b;color:#163835;font-size:2rem;box-shadow:0 8px 20px #0002}
body:not(:has(.shell)) > header .global-nav{display:flex;justify-content:flex-start;align-items:center;width:100%;gap:3px;margin:14px 0 0;min-width:0}
body:not(:has(.shell)) > header .global-nav a,
body:not(:has(.shell)) > header .nav-topics>summary{font-size:.91rem;line-height:1.3;padding:9px 11px;color:#fff}
body:not(:has(.shell)) > .crisis{width:min(1144px,calc(100% - 36px));margin:16px auto 20px;padding:13px 18px;background:#dcefea;color:#264d48;border:1px solid #a9c7bf;border-radius:17px;font-size:1rem}
body:not(:has(.shell)) > .crisis .wrap{width:100%;max-width:none;margin:0;padding:0}
body:not(:has(.shell)) > .wrap{width:min(1144px,calc(100% - 36px))}
/* Make the catalogue introduction more like the home page, without moving its controls. */
.catalog{padding-top:20px}
.catalog-hero{padding:clamp(28px,5vw,48px);background:linear-gradient(90deg,#163835 0%,#204d49 52%,#163835a8 100%),url('/images/shop-wave-pattern.webp') right center / 55% auto no-repeat,#163835}
.catalog-hero h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.06}
/* Give every nav item enough width to retain a horizontal label on small screens. */
.global-nav .nav-topics{flex:0 0 auto;min-width:max-content}
.global-nav .nav-topics>summary{display:block;white-space:nowrap;writing-mode:horizontal-tb;overflow-wrap:normal;word-break:normal}
@media(max-width:700px){
  body:not(:has(.shell)) > header.site-head.wrap,
  body:not(:has(.shell)) > header .head-row{width:calc(100% - 20px);margin-top:10px;padding:18px;min-height:0}
  body:not(:has(.shell)) > header .brand,
  body:not(:has(.shell)) > header .logo{font-size:1.6rem}
  body:not(:has(.shell)) > header .mark,
  body:not(:has(.shell)) > header .logo .mark{flex-basis:45px;width:45px;height:45px;font-size:1.7rem}
  body:not(:has(.shell)) > .crisis{width:calc(100% - 20px);margin:10px auto 16px}
  body:not(:has(.shell)) > .wrap{width:calc(100% - 20px)}
  .global-nav .nav-topics{max-width:100%}
  .global-nav:has(.nav-topics[open]) .nav-topics{flex:1 0 100%;min-width:0}
  .global-nav .nav-topic-menu{width:100%;box-sizing:border-box}
  .catalog-hero{background:linear-gradient(90deg,#163835ed,#163835d6),url('/images/shop-wave-pattern.webp') center / cover no-repeat,#163835}
}
@media(max-width:600px){
  .topbar .primary-nav{display:flex;grid-template-columns:none;flex-wrap:wrap;align-items:center;gap:2px;width:100%}
  .topbar .primary-nav>a{white-space:nowrap;text-align:left;flex:0 0 auto;padding:8px 9px}
  .topbar .primary-nav .nav-topics{flex:0 0 auto;min-width:max-content}
  .topbar .primary-nav:has(.nav-topics[open]) .nav-topics{flex:1 0 100%;min-width:0}
  .topbar .primary-nav .nav-topic-menu{width:100%}
}