/* The bar of style pills above the header: the same on every design. */
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
	src: url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- style bar (above the header; the same whatever the style) ---------- */

.stylebar { background: #15171a; color: #e9ebee; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 400; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
.stylebar__in { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: flex; align-items: center; gap: 14px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.stylebar__in::-webkit-scrollbar { display: none; }
.stylebar__label { flex: none; font-size: 0.85rem; color: #a9afb6; }
.stylebar__pills { display: flex; gap: 6px; flex: none; padding-block: 8px; }
.stylepill {
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 6px;
	border: 1px solid #3a3f46; border-radius: 99px; background: transparent; color: #e9ebee;
	font: inherit; font-size: 0.88rem; font-weight: 560; white-space: nowrap; cursor: pointer;
}
.stylepill:hover { border-color: #7c838c; }
.stylepill[aria-pressed="true"] { background: #e9ebee; color: #15171a; border-color: #e9ebee; }
.stylepill:focus-visible { outline: 2px solid #8fc5c9; outline-offset: 2px; }
.stylepill__sw { display: inline-flex; flex: none; }
.stylepill__sw i { display: block; width: 12px; height: 12px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 1.5px #15171a; }
.stylepill__sw i:first-child { margin-left: 0; }
.stylepill[aria-pressed="true"] .stylepill__sw i { box-shadow: 0 0 0 1.5px #e9ebee; }

.stylebar__sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: #3a3f46; }
.stylepill--design[aria-current="page"] { background: #f2b866; color: #0d1b38; border-color: #f2b866; }
.stylepill--design[aria-current="page"] .stylepill__sw i { box-shadow: 0 0 0 1.5px #f2b866; }
.stylepill__tag { font-size: 0.72rem; font-weight: 600; opacity: 0.7; }