/* The site bar (web/site/bar.js): transparent over the page art, solid once the page scrolls; square GTA-style panels. */
.sb-host { position: fixed; inset: 0 0 auto; z-index: 50; color: #f4f3ef; background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.38) 60%, rgba(0,0,0,0)); transition: background .25s; }
.sb-host.sb-solid { background: rgba(7,9,10,.94); box-shadow: 0 1px 0 rgba(244,243,239,.1); }
.sb a, .sb-drawer a { color: inherit; }
.sb button, .sb-drawer button { color: inherit; font: inherit; }
.sb a { text-decoration: none; }
.sb-row1 { display: flex; align-items: center; gap: 20px; height: 54px; padding: 0 28px; border-bottom: 1px solid rgba(244,243,239,.12); }
.sb-menu, .sb-x { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; padding: 0; border: 0; background: none; cursor: pointer; }
.sb-menu:hover { color: #5fb3a3; }
.sb-x:hover { background: rgba(11,33,29,.12); }
.sb-brand { display: flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sb-brand img { width: 28px; height: 28px; }
.sb-account { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 13px; }
.sb-account > i { width: 1px; height: 10px; background: rgba(244,243,239,.3); }
.sb-link { padding: 0; border: 0; background: none; color: rgba(244,243,239,.82) !important; cursor: pointer; }
.sb-link:hover { color: #f4f3ef !important; }
.sb-user { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sb-avatar { display: grid; place-items: center; width: 24px; height: 24px; background: #5fb3a3; color: #0b211d; font-size: 12px; font-weight: 800; }
.sb-langs { display: flex; margin-left: 10px; border: 1px solid rgba(244,243,239,.22); }
.sb-langs button { padding: 4px 8px; border: 0; background: none; color: rgba(244,243,239,.62); font-size: 12px; cursor: pointer; }
.sb-langs button:hover { color: #f4f3ef; }
.sb-langs button[aria-pressed="true"] { background: #f4f3ef; color: #07090a; font-weight: 700; }
.sb-row2 { display: flex; align-items: center; gap: 36px; height: 56px; padding: 0 48px; font-size: 16px; font-weight: 600; }
.sb-row2 a { display: flex; align-items: center; height: 100%; color: rgba(244,243,239,.78); transition: color .15s, box-shadow .15s; }
.sb-row2 a:hover { color: #f4f3ef; }
.sb-row2 a[aria-current="page"] { color: #f4f3ef; box-shadow: inset 0 -3px 0 #5fb3a3; }
.sb-row2 a.sb-shop { color: #f2c94c; }
.sb-row2 a.sb-shop:hover { color: #ffd966; }
.sb-row2 a.sb-shop[aria-current="page"] { box-shadow: inset 0 -3px 0 #f2c94c; }
:where(.sb, .sb-drawer) :focus-visible { outline: 2px solid #5fb3a3; outline-offset: 2px; }

/* Drawer: sections left (the chosen one inverted), their pages right, quick links and nothing else at the bottom. */
html.sb-locked { overflow: hidden; }
.sb-drawer { position: fixed; inset: 0; z-index: 60; color: #f4f3ef; }
.sb-drawer[hidden] { display: none; }
.sb-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: sb-fade .2s ease both; }
.sb-panel { position: absolute; inset: 0 auto 0 0; width: min(760px, 100%); display: flex; flex-direction: column; background: rgba(5,6,7,.97); border-right: 1px solid rgba(244,243,239,.1); animation: sb-in .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes sb-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sb-fade { from { opacity: 0; } }
.sb-panel-head { display: flex; align-items: center; gap: 16px; height: 70px; padding: 0 26px; background: #5fb3a3; color: #0b211d; }
.sb-panel-head .sb-brand { font-size: 21px; }
.sb-panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: auto; }
.sb-cats { display: flex; flex-direction: column; padding: 24px 0; border-right: 1px solid rgba(244,243,239,.08); }
.sb-cats button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 28px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .15s; }
.sb-cats button:hover { background: rgba(244,243,239,.08); }
.sb-cats button[aria-pressed="true"] { background: #f4f3ef; color: #07090a; }
.sb-cats small { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .24em; opacity: .6; }
.sb-cats span { font-size: 23px; font-weight: 800; }
.sb-pages { padding: 32px 30px; }
.sb-pages p { margin: 0 0 16px; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .24em; color: #5fb3a3; }
.sb-pages ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid #f4f3ef; }
.sb-pages li { border-bottom: 1px solid rgba(244,243,239,.12); }
.sb-pages a { display: flex; align-items: center; justify-content: space-between; padding: 17px 14px; font-size: 18px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.sb-pages a:hover { background: #5fb3a3; color: #0b211d; }
.sb-pages svg { width: 16px; height: 16px; }
.sb-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(244,243,239,.1); }
.sb-quick a { display: grid; place-items: center; height: 60px; font-size: 16px; font-weight: 700; text-decoration: none; }
.sb-quick a + a { border-left: 1px solid rgba(244,243,239,.1); }
.sb-quick a:hover { background: rgba(244,243,239,.08); }
.sb-quick a.sb-shop { color: #f2c94c; }

@media (max-width: 1100px) { .sb-row2 { gap: 24px; padding: 0 28px; } .sb-langs button { padding: 4px 6px; } }
@media (max-width: 860px) {
  .sb-row1 { gap: 12px; padding: 0 16px; }
  .sb-brand span { display: none; }
  .sb-account > .sb-link, .sb-account > i, .sb-user, .sb-account > [data-action] { display: none; }
  .sb-langs { margin-left: 0; }
  .sb-row2 { display: none; }
  .sb-panel-body { grid-template-columns: 1fr; align-content: start; }
  .sb-cats { flex-direction: row; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid rgba(244,243,239,.08); }
  .sb-cats button { flex: none; width: auto; padding: 12px 18px; }
  .sb-cats span { font-size: 17px; }
  .sb-pages { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sb-panel, .sb-scrim { animation: none; } }