/* Dangard.net — Bootstrap 5 overrides */

/* When a theme defines --site-* but not Bootstrap body tokens, keep forms/surfaces in sync */
:root {
  --bs-body-color: var(--site-text, #212529);
  --bs-body-bg: var(--site-page-bg, #fff);
  --show-more-lines-default: 2;
  --book-cover-max-width: 7.5rem;
  --underwear-product-image-max-width: 7.5rem;
  --catalog-image-placeholder-path: url(/images/image-placeholder.svg);
  --catalog-admin-thumb-size: 3rem;
  --show-more-overflow-tolerance: 2px;
  --elfsight-chat-z-index: 1080;
  /* Rainbow gradient scroll — active only when theme-gradient-map has an entry for the active theme */
  --site-rainbow-fade-duration: 0.4s;
  --site-rainbow-hue-duration: 0.15s;
  --site-input-bg: var(--site-content-bg, #fff);
  --site-input-fg: var(--site-text, #212529);
  /* List groups follow content/text until a theme sets --site-list-group-* explicitly. */
  --site-list-group-bg: var(--site-content-bg, #ffffff);
  --site-list-group-fg: var(--site-text, #212529);
  --site-list-group-border-mix: 18%;
  --site-list-group-hover-mix: 8%;
  --site-list-group-active-mix: 12%;
  --site-list-group-active-hover-mix: 15%;
  --site-list-group-muted-mix: 62%;
  --site-list-group-disabled-opacity: 0.35;
  --site-list-group-border-color: color-mix(in srgb, var(--site-list-group-fg) var(--site-list-group-border-mix), transparent);
  --site-list-group-hover-bg: color-mix(in srgb, var(--site-list-group-fg) var(--site-list-group-hover-mix), var(--site-list-group-bg));
  --site-list-group-active-bg: color-mix(in srgb, var(--site-list-group-fg) var(--site-list-group-active-mix), var(--site-list-group-bg));
  --site-list-group-active-hover-bg: color-mix(in srgb, var(--site-list-group-fg) var(--site-list-group-active-hover-mix), var(--site-list-group-bg));
  --site-list-group-muted-color: color-mix(in srgb, var(--site-list-group-fg) var(--site-list-group-muted-mix), transparent);
  --section-switcher-gap: 0.35rem;
  --section-switcher-pill-padding-x: 0.65rem;
  --section-switcher-pill-padding-y: 0.25rem;
  --section-switcher-font-size: 0.875rem;
  --section-switcher-pill-radius: 50rem;
  --section-switcher-step-min-size: 2rem;
  --section-switcher-menu-max-rows: 8;
  --section-switcher-menu-row-height: 2.25rem;
  --section-switcher-caret-size: 0.3em;
}

/* Horizontal page scrollbar only — no embed/column/navbar width rules */
html {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  background-color: var(--site-page-bg, var(--bs-body-bg, #f8f9fa));
  color: var(--site-text, #212529);
}

.form-control,
.form-select {
  --bs-body-color: var(--site-input-fg);
  --bs-body-bg: var(--site-input-bg);
  border-color: color-mix(in srgb, var(--site-input-fg) 25%, transparent);
}

/* Overlay behind content, above body background-color; activated via data-rainbow-gradient on html */
[data-rainbow-gradient="true"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-color: hsl(
    var(--site-rainbow-hue, 0),
    var(--site-rainbow-saturation, 65%),
    var(--site-rainbow-lightness, 35%)
  );
  opacity: var(--site-rainbow-opacity, 0);
  transition:
    opacity var(--site-rainbow-fade-duration) ease,
    background-color var(--site-rainbow-hue-duration) ease;
  pointer-events: none;
  z-index: -1;
}

.site-card-body {
  background-color: var(--site-content-bg, #fff);
  color: var(--site-text, #212529);
}

/* /links promo imgs: cosmetic filters (e.g. AdGuard) often hide 2nd+ “banner” images; scoped
   !important keeps self-hosted promos visible for visitors who use those tools. */
.site-card-body .links-footer-promos img,
.site-card-body .links-category-promos img {
  display: block !important;
}

/* Bootstrap cards follow theme content bg even when theme CSS doesn't override --bs-body-bg.
   Bootstrap 5.3 declares `--bs-card-bg: var(--bs-body-bg)` on .card, which defaults to #fff. */
.card {
  --bs-card-bg: var(--site-tigerbox-bg, #ffffff);
  --bs-card-color: var(--site-tigerbox-fg, var(--site-text, #212529));
}

/* Bootstrap list-group: theme tokens (Bootstrap sets --bs-list-group-* on .list-group). */
.list-group,
.list-group-item {
  --bs-list-group-color: var(--site-list-group-fg);
  --bs-list-group-bg: var(--site-list-group-bg);
  --bs-list-group-border-color: var(--site-list-group-border-color);
  --bs-list-group-action-hover-color: var(--site-list-group-fg);
  --bs-list-group-action-hover-bg: var(--site-list-group-hover-bg);
  --bs-list-group-action-active-color: var(--site-list-group-fg);
  --bs-list-group-action-active-bg: var(--site-list-group-active-bg);
}

.list-group-item {
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-bg);
}

.list-group-item a:not(.btn) {
  color: var(--site-list-group-fg);
}

.list-group-item .text-muted {
  color: var(--site-list-group-muted-color) !important;
}

/* Bootstrap nav-tabs: same tokens as list groups (public + admin; not .site-navbar). */
.nav.nav-tabs {
  --bs-nav-tabs-border-color: var(--site-list-group-border-color);
  --bs-nav-tabs-link-hover-border-color: var(--site-list-group-border-color);
  --bs-nav-tabs-link-active-color: var(--site-list-group-fg);
  --bs-nav-tabs-link-active-bg: var(--site-list-group-active-bg);
  --bs-nav-tabs-link-active-border-color: var(--site-list-group-border-color);
  border-bottom-color: var(--site-list-group-border-color);
}

.nav.nav-tabs .nav-link {
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-bg);
  border-color: var(--site-list-group-border-color);
}

.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-link:focus {
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-hover-bg);
  border-color: var(--site-list-group-border-color);
}

.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link {
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-active-bg);
  border-color: var(--site-list-group-border-color);
  border-bottom-color: var(--site-list-group-bg);
}

/* Bootstrap pagination: same list-group surface tokens as section-switcher. */
.pagination {
  --bs-pagination-color: var(--site-list-group-fg);
  --bs-pagination-bg: var(--site-list-group-bg);
  --bs-pagination-border-color: var(--site-list-group-border-color);
  --bs-pagination-hover-color: var(--site-list-group-fg);
  --bs-pagination-hover-bg: var(--site-list-group-hover-bg);
  --bs-pagination-hover-border-color: var(--site-list-group-border-color);
  --bs-pagination-focus-color: var(--site-list-group-fg);
  --bs-pagination-focus-bg: var(--site-list-group-hover-bg);
  --bs-pagination-active-color: var(--site-list-group-fg);
  --bs-pagination-active-bg: var(--site-list-group-active-bg);
  --bs-pagination-active-border-color: var(--site-list-group-border-color);
  /* Match section-switcher disabled steps: full fg at reduced opacity, not muted + opacity. */
  --bs-pagination-disabled-color: var(--site-list-group-fg);
  --bs-pagination-disabled-bg: var(--site-list-group-bg);
  --bs-pagination-disabled-border-color: var(--site-list-group-border-color);
}

.page-item.disabled .page-link {
  opacity: var(--site-list-group-disabled-opacity);
}

/* Theme module: variables from /css/themes/<slug>.css */
.site-card-header {
  background-color: var(--site-tiger, #688cbe);
  color: var(--site-card-header-fg, #fff);
}

.site-card-header .btn {
  color: var(--site-card-header-fg, #fff);
}

.site-card-header-compact {
  font-size: 0.75rem;
}

.site-card-header-compact .btn {
  font-size: inherit;
}

/* Admin feeds list/carousel: inactive uses theme body text; active matches header foreground */
.site-card-header .feeds-view-mode-toggle > .btn {
  --bs-btn-color: var(--site-text, #212529);
  --bs-btn-border-color: color-mix(in srgb, var(--site-text, #212529) 42%, transparent);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--site-text, #212529);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-text, #212529) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-text, #212529) 55%, transparent);
  --bs-btn-focus-shadow-rgb: var(--site-text-rgb, 33, 37, 41);
  --bs-btn-active-color: var(--site-text, #212529);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-text, #212529) 14%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-text, #212529) 55%, transparent);
  --bs-btn-disabled-color: color-mix(in srgb, var(--site-text, #212529) 45%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--site-text, #212529) 25%, transparent);
}

.site-card-header .feeds-view-mode-toggle > .btn.active {
  --bs-btn-color: var(--site-card-header-fg, #fff);
  --bs-btn-border-color: color-mix(in srgb, var(--site-card-header-fg, #fff) 65%, transparent);
  --bs-btn-bg: color-mix(in srgb, var(--site-card-header-fg, #fff) 22%, transparent);
  --bs-btn-hover-color: var(--site-card-header-fg, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-card-header-fg, #fff) 32%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-card-header-fg, #fff) 80%, transparent);
  --bs-btn-active-color: var(--site-card-header-fg, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-card-header-fg, #fff) 38%, transparent);
  --bs-btn-active-border-color: var(--site-card-header-fg, #fff);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.site-navbar {
  background-color: var(--site-accent, #d88422);
  --bs-navbar-color: var(--site-navbar-fg, rgba(255, 255, 255, 0.55));
  --bs-navbar-hover-color: var(--site-navbar-hover-fg, rgba(255, 255, 255, 0.75));
  --bs-navbar-active-color: var(--site-navbar-active-fg, #fff);
  --bs-navbar-brand-color: var(--site-navbar-brand-fg, #fff);
  --bs-navbar-brand-hover-color: var(--site-navbar-brand-fg, #fff);
}

/* Navbar links: global a:hover / a:visited (0,1,1) otherwise beat .nav-link (0,1,0) and paint
   --site-link-* on the bar. Force Bootstrap navbar tokens for brand + nav items. */
.site-navbar a.nav-link {
  color: var(--bs-nav-link-color);
}
.site-navbar a.nav-link:visited {
  color: var(--bs-nav-link-color);
}
.site-navbar a.nav-link:hover,
.site-navbar a.nav-link:focus-visible {
  color: var(--bs-nav-link-hover-color);
}
.site-navbar a.nav-link:active,
.site-navbar a.nav-link.active {
  color: var(--bs-navbar-active-color);
}
.site-navbar a.navbar-brand {
  color: var(--bs-navbar-brand-color);
}
.site-navbar a.navbar-brand:visited {
  color: var(--bs-navbar-brand-color);
}
.site-navbar a.navbar-brand:hover,
.site-navbar a.navbar-brand:focus-visible {
  color: var(--bs-navbar-brand-hover-color);
}
.site-navbar a.navbar-brand:active {
  color: var(--bs-navbar-brand-hover-color);
}

.site-navbar .dropdown-menu {
  --bs-dropdown-bg: var(--site-content-bg, #fff);
  --bs-dropdown-link-color: var(--site-text, #212529);
  --bs-dropdown-link-hover-color: var(--site-text, #212529);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--site-tiger, #688cbe) 12%, transparent);
}

.site-navbar .dropdown-menu .dropdown-item:active,
.site-navbar .dropdown-menu .dropdown-item.active {
  color: var(--site-text, #212529);
}

.site-sidebar-nav__chevron {
  transition: transform 0.2s ease;
}

.site-sidebar-nav__toggle:not(.collapsed) .site-sidebar-nav__chevron {
  transform: rotate(180deg);
}

.site-sidebar-nav__submenu {
  margin-top: 0.25rem;
}

.site-sidebar-nav__child {
  padding-left: 1rem;
}

.site-navbar .site-banner-logo {
  display: block;
  height: auto;
  max-height: 2.75rem;
  width: auto;
}

/* Expanded horizontal bar (xl+): keep labels on one line */
@media (min-width: 1200px) {
  .site-navbar .navbar-collapse .navbar-nav {
    flex-wrap: nowrap;
  }

  .site-navbar .nav-link {
    white-space: nowrap;
  }
}

.site-main-heading-color {
  color: var(--site-main-heading, #003366);
}

.site-sec-heading-color {
  color: var(--site-sec-heading, #435c24);
}

/* Admin sub-card headers (was Bootstrap bg-light); subtle tint of --site-tiger */
.site-card-header-soft {
  background-color: color-mix(in srgb, var(--site-tiger, #688cbe) 12%, transparent);
  color: var(--site-text, #212529);
}

/* Theme-aware badges — use with Bootstrap .badge */
.site-badge--muted {
  background-color: var(--site-btn-secondary, #6c757d);
  color: var(--site-card-header-fg, #fff);
}

.site-badge--info {
  background-color: color-mix(in srgb, var(--site-btn-info, #0dcaf0) 28%, var(--site-content-bg, #fff));
  color: var(--site-text, #212529);
  border: 1px solid color-mix(in srgb, var(--site-btn-info, #0dcaf0) 50%, transparent);
}

.site-badge--soft {
  background-color: color-mix(in srgb, var(--site-tiger, #688cbe) 12%, var(--site-content-bg, #fff));
  color: var(--site-text, #212529);
  border: 1px solid color-mix(in srgb, var(--site-text, #212529) 18%, transparent);
}

.modal-content {
  --bs-modal-bg: var(--site-content-bg, #fff);
  --bs-modal-color: var(--site-text, #212529);
}

/* Fixed footer: top padding only (was py-2). Bottom gap is .site-footer-spacer — avoids invalid
   max(calc(env())) on main in some UAs, which left only 0.5rem from .py-2. */
main.site-main-with-fixed-footer {
  padding-top: 0.5rem;
  min-width: 0;
}

.site-footer-spacer {
  min-height: 5.5rem;
}

.site-footer {
  background-color: var(--site-accent, #d88422);
  color: var(--site-navbar-brand-fg, #fff);
  border-top-color: color-mix(in srgb, var(--site-accent, #d88422) 65%, #000);
  padding-bottom: 1rem;
}

.site-footer-brand {
  color: var(--site-navbar-brand-fg, #fff);
  font-weight: 600;
}

.site-footer .text-muted {
  color: color-mix(in srgb, var(--site-navbar-brand-fg, #fff) 80%, transparent) !important;
}

.site-card-header h1,
.site-card-header .h4 {
  color: var(--site-card-header-fg, #fff);
}

/* Inline links — colours from theme :root (--site-link-*); fallbacks match Bootstrap defaults */
a {
  color: var(--site-link, #0d6efd);
}

a:visited {
  color: var(--site-link-visited, #6f42c1);
}

a:hover,
a:focus-visible {
  color: var(--site-link-hover, #0a58ca);
}

a:active {
  color: var(--site-link-active, #084298);
}

/* Footer corner icons — match navbar brand fg on accent bar; SVG uses currentColor */
a.footer-icon-action {
  color: var(--site-navbar-brand-fg, #fff);
  text-decoration: none;
}

a.footer-icon-action:visited {
  color: var(--site-navbar-brand-fg, #fff);
}

a.footer-icon-action:hover,
a.footer-icon-action:focus-visible {
  color: color-mix(in srgb, var(--site-navbar-brand-fg, #fff) 75%, #000);
}

a.footer-icon-action:active {
  color: color-mix(in srgb, var(--site-navbar-brand-fg, #fff) 60%, #000);
}

/*
 * reCAPTCHA v3: Google injects `.grecaptcha-badge` fixed bottom-right. This site sets
 * `overflow-x` on html and uses a fixed footer — both can obscure or interact badly with it.
 */
.grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1080 !important; /* Bootstrap .fixed-bottom normally ~1030; utility z-3 is low — ensure badge tops */
  bottom: 5.75rem !important; /* above fixed footer bar (~matches .site-footer-spacer) */
}

@media (max-width: 991.98px) {
  .grecaptcha-badge {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* iPhone+ / narrow: safe-area padding for status bar + fixed footer */
@media (max-width: 991.98px) {
  .site-navbar {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  }

  .site-footer-spacer {
    min-height: calc(5.5rem + env(safe-area-inset-bottom, 0));
  }

  .site-footer {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  }
}

/* Desktop: tighter footer vertical padding (mobile keeps pt-4 + safe-area bottom) */
@media (min-width: 992px) {
  .site-footer {
    padding-top: 0.75rem !important;
    padding-bottom: 0.5rem;
  }
}

/* Contextual buttons — base colours from theme :root (--site-btn-*); hover/active via color-mix */
.btn-primary {
  --bs-btn-bg: var(--site-btn-primary, #0d6efd);
  --bs-btn-border-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-primary, #0d6efd) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-primary, #0d6efd) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-primary, #0d6efd) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-primary, #0d6efd) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-primary, #0d6efd);
  --bs-btn-disabled-border-color: var(--site-btn-primary, #0d6efd);
}

.btn-outline-primary {
  --bs-btn-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-border-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-hover-bg: var(--site-btn-primary, #0d6efd);
  --bs-btn-hover-border-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-active-bg: var(--site-btn-primary, #0d6efd);
  --bs-btn-active-border-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-disabled-color: var(--site-btn-primary, #0d6efd);
  --bs-btn-disabled-border-color: var(--site-btn-primary, #0d6efd);
}

.btn-secondary {
  --bs-btn-bg: var(--site-btn-secondary, #6c757d);
  --bs-btn-border-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-secondary, #6c757d);
  --bs-btn-disabled-border-color: var(--site-btn-secondary, #6c757d);
}

.btn-outline-secondary {
  --bs-btn-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-border-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-hover-bg: var(--site-btn-secondary, #6c757d);
  --bs-btn-hover-border-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-active-bg: var(--site-btn-secondary, #6c757d);
  --bs-btn-active-border-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-disabled-color: var(--site-btn-secondary, #6c757d);
  --bs-btn-disabled-border-color: var(--site-btn-secondary, #6c757d);
}

.btn-success {
  --bs-btn-bg: var(--site-btn-success, #198754);
  --bs-btn-border-color: var(--site-btn-success, #198754);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-success, #198754) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-success, #198754) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-success, #198754) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-success, #198754) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-success, #198754);
  --bs-btn-disabled-border-color: var(--site-btn-success, #198754);
}

.btn-outline-success {
  --bs-btn-color: var(--site-btn-success, #198754);
  --bs-btn-border-color: var(--site-btn-success, #198754);
  --bs-btn-hover-bg: var(--site-btn-success, #198754);
  --bs-btn-hover-border-color: var(--site-btn-success, #198754);
  --bs-btn-active-bg: var(--site-btn-success, #198754);
  --bs-btn-active-border-color: var(--site-btn-success, #198754);
  --bs-btn-disabled-color: var(--site-btn-success, #198754);
  --bs-btn-disabled-border-color: var(--site-btn-success, #198754);
}

.btn-danger {
  --bs-btn-bg: var(--site-btn-danger, #dc3545);
  --bs-btn-border-color: var(--site-btn-danger, #dc3545);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-danger, #dc3545) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-danger, #dc3545) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-danger, #dc3545) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-danger, #dc3545) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-danger, #dc3545);
  --bs-btn-disabled-border-color: var(--site-btn-danger, #dc3545);
}

.btn-outline-danger {
  --bs-btn-color: var(--site-btn-danger, #dc3545);
  --bs-btn-border-color: var(--site-btn-danger, #dc3545);
  --bs-btn-hover-bg: var(--site-btn-danger, #dc3545);
  --bs-btn-hover-border-color: var(--site-btn-danger, #dc3545);
  --bs-btn-active-bg: var(--site-btn-danger, #dc3545);
  --bs-btn-active-border-color: var(--site-btn-danger, #dc3545);
  --bs-btn-disabled-color: var(--site-btn-danger, #dc3545);
  --bs-btn-disabled-border-color: var(--site-btn-danger, #dc3545);
}

.btn-warning {
  --bs-btn-bg: var(--site-btn-warning, #ffc107);
  --bs-btn-border-color: var(--site-btn-warning, #ffc107);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-warning, #ffc107) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-warning, #ffc107) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-warning, #ffc107) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-warning, #ffc107) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-warning, #ffc107);
  --bs-btn-disabled-border-color: var(--site-btn-warning, #ffc107);
}

.btn-outline-warning {
  --bs-btn-color: var(--site-btn-warning, #ffc107);
  --bs-btn-border-color: var(--site-btn-warning, #ffc107);
  --bs-btn-hover-bg: var(--site-btn-warning, #ffc107);
  --bs-btn-hover-border-color: var(--site-btn-warning, #ffc107);
  --bs-btn-active-bg: var(--site-btn-warning, #ffc107);
  --bs-btn-active-border-color: var(--site-btn-warning, #ffc107);
  --bs-btn-disabled-color: var(--site-btn-warning, #ffc107);
  --bs-btn-disabled-border-color: var(--site-btn-warning, #ffc107);
}

.btn-info {
  --bs-btn-bg: var(--site-btn-info, #0dcaf0);
  --bs-btn-border-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-btn-info, #0dcaf0) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-btn-info, #0dcaf0) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-btn-info, #0dcaf0) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-btn-info, #0dcaf0) 75%, #000);
  --bs-btn-disabled-bg: var(--site-btn-info, #0dcaf0);
  --bs-btn-disabled-border-color: var(--site-btn-info, #0dcaf0);
}

.btn-outline-info {
  --bs-btn-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-border-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-hover-bg: var(--site-btn-info, #0dcaf0);
  --bs-btn-hover-border-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-active-bg: var(--site-btn-info, #0dcaf0);
  --bs-btn-active-border-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-disabled-color: var(--site-btn-info, #0dcaf0);
  --bs-btn-disabled-border-color: var(--site-btn-info, #0dcaf0);
}

/* File-input "Choose File" button — themed to match .btn-secondary */
.form-control::file-selector-button {
  background-color: var(--site-btn-secondary, #6c757d);
  border-color: var(--site-btn-secondary, #6c757d);
  color: #fff;
}
.form-control::file-selector-button:hover {
  background-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 85%, #000);
  border-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 80%, #000);
}
.form-control:active::file-selector-button,
.form-control::file-selector-button:active {
  background-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 75%, #000);
  border-color: color-mix(in srgb, var(--site-btn-secondary, #6c757d) 75%, #000);
}

.tigerBoxHeader {
  font-weight: 600;
}

/* Reusable multi-line ellipsis preview; set --show-more-lines on the element or a wrapper */
.show-more-wrap {
  min-width: 0;
  max-width: 100%;
}

.show-more-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-line-clamp: var(--show-more-lines, var(--show-more-lines-default));
  line-clamp: var(--show-more-lines, var(--show-more-lines-default));
}

.show-more-wrap .show-more-trigger {
  margin-top: 0.25rem;
}

.book-card-cover {
  max-width: var(--book-cover-max-width);
  position: relative;
  background: var(--catalog-image-placeholder-path) center / contain no-repeat #e9ecef;
}

.underwear-product-card__image {
  max-width: var(--underwear-product-image-max-width);
  position: relative;
  background: var(--catalog-image-placeholder-path) center / contain no-repeat #e9ecef;
}

.cover-img-spinner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--site-page-bg, #fff) 75%, transparent);
}

.underwear-admin-thumb {
  width: var(--underwear-product-image-max-width);
  max-height: calc(var(--underwear-product-image-max-width) * 1.25);
  object-fit: cover;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.underwear-admin-preview {
  max-width: calc(var(--underwear-product-image-max-width) * 2);
  max-height: calc(var(--underwear-product-image-max-width) * 2.5);
  object-fit: contain;
}

.catalog-admin-thumb {
  display: inline-block;
  position: relative;
}

.catalog-admin-thumb__img {
  width: var(--catalog-admin-thumb-size);
  max-height: calc(var(--catalog-admin-thumb-size) * 1.5);
  object-fit: cover;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.star-rating__stars {
  display: inline-grid;
  grid-template-columns: repeat(var(--star-rating-max, 5), 1ch);
  vertical-align: middle;
}

.star-rating__label {
  margin-right: 0.25rem;
}

.star-rating__star {
  color: color-mix(in srgb, var(--site-text, #212529) 35%, transparent);
}

.star-rating__star--filled {
  color: var(--site-sec-heading, #435c24);
}

/* Collapsible summary (p / ul / ol / li only after sanitizer); hero thumb is never inside here */
.feed-item-summary-wrap .feed-item-summary {
  --show-more-lines: 3;
}

.feed-item-summary-wrap .feed-item-summary.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.feed-item-summary-wrap .feed-item-summary__toggle {
  margin-top: 0.25rem;
}

/* RSS /feeds: item copy and tables follow theme (not fixed Bootstrap grays) */
.feed-item,
.feed-item-reddit {
  color: var(--site-text, inherit);
}

.feed-item .text-muted,
.feed-item-reddit .text-muted {
  color: color-mix(in srgb, var(--site-text, #6c757d) 58%, transparent) !important;
}

.site-card-body .feed-items-list__item {
  border-bottom-color: color-mix(in srgb, var(--site-tiger, #688cbe) 35%, transparent) !important;
}

/* Wide feed tables scroll within the card instead of overlapping siblings */
.feed-item-body {
  max-width: 100%;
  overflow-x: auto;
  color: var(--site-text, inherit);
}

.feed-item-body table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background-color: color-mix(
    in srgb,
    var(--site-text, #000) 8%,
    var(--site-content-bg, var(--site-tigerbox-bg, #fff))
  );
  color: var(--site-text, #212529);
}

/* Padding; keep tops aligned so rows don’t stack oddly beside tall images */
.feed-item-body td,
.feed-item-body th {
  padding: 10px;
  vertical-align: top;
}

/* First and last cell in each row: no line wrapping (use horizontal scroll on .feed-item-body or the cell) */
.feed-item-body tr > :first-child,
.feed-item-body tr > :last-child {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  min-width: min-content;
  overflow-x: auto;
}

/* Middle data cells in tbody only (excludes thead so column labels never get white-space: normal) */
.feed-item-body tbody tr > td:not(:has(img)):not(:first-child):not(:last-child),
.feed-item-body tbody tr > th:not(:first-child):not(:last-child) {
  min-width: 0;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Column header row (e.g. # Items): must win over the middle-column rule; !important is required for th specificity */
.feed-item-body table thead th,
.feed-item-body table thead td,
.feed-item-body table:not(:has(thead)) > tbody > tr:first-child th,
.feed-item-body table:not(:has(thead)) > tbody > tr:first-child td,
.feed-item-body table:not(:has(thead)) > tr:first-child th,
.feed-item-body table:not(:has(thead)) > tr:first-child td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  min-width: min-content;
  overflow-x: auto;
}

/* Image cells: no aggressive word-break; column width follows intrinsic image in auto table layout */
.feed-item-body td:has(img),
.feed-item-body th:has(img) {
  overflow-wrap: normal;
  word-break: normal;
}

/* JS-added .thumb-image-wrap for /feeds/proxy: fill the table cell so the loading spinner is
   centered in the same width the banner will use (avoids a tiny min-size box in a wide cell). */
.feed-item-body .thumb-image-wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Cap wide inline images; table-cell banners/thumbs are not limited by a squished column */
.feed-item-body img {
  max-width: 100%;
  height: auto;
}

.feed-item-body td:has(img) img,
.feed-item-body th:has(img) img {
  max-width: none;
  height: auto;
}

/* reddit-view: two-column main cell — allow long tables to shrink in flex row */
.feed-item-reddit__main {
  min-width: 0;
}

/* reddit-view: duplicate hero thumb already in left col; hide img inside feed <content> table */
.feed-item-body--reddit table img {
  display: none;
}

/*
 * Reddit Atom <content> is a 2-column table (thumb + "submitted by" / [link] / [comments]).
 * Global .feed-item-body rules (first/last cell nowrap, thead-less !important) are for NATS
 * item tables and clip or shove this text off-screen in a narrow col — reset for reddit only.
 */
.feed-item-body--reddit.feed-item-body tr > :first-child,
.feed-item-body--reddit.feed-item-body tr > :last-child {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  overflow-x: visible;
}

.feed-item-body--reddit.feed-item-body
  table:not(:has(thead))
  > tbody
  > tr:first-child
  > th,
.feed-item-body--reddit.feed-item-body
  table:not(:has(thead))
  > tbody
  > tr:first-child
  > td,
.feed-item-body--reddit.feed-item-body
  table:not(:has(thead))
  > tr:first-child
  > th,
.feed-item-body--reddit.feed-item-body
  table:not(:has(thead))
  > tr:first-child
  > td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

/* Collapse the (now image-free) thumb cell so the text column gets width; beat .feed-item-body td:has(img) */
.feed-item-body--reddit.feed-item-body td:has(img),
.feed-item-body--reddit.feed-item-body th:has(img) {
  width: 1%;
  max-width: 3rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Admin (and main column) tables: inherit themed body text / striped row text */
.site-card-body .table {
  --bs-table-color: var(--site-text, #212529);
  --bs-table-striped-color: var(--site-text, #212529);
  --bs-table-bg: var(--site-content-bg, transparent);
  --bs-table-striped-bg: color-mix(in srgb, var(--site-text, #212529) 6%, var(--site-content-bg, #fff));
  --bs-table-hover-bg: color-mix(in srgb, var(--site-tiger, #688cbe) 10%, var(--site-content-bg, #fff));
  color: var(--site-text, #212529);
}
.site-card-body .table > thead {
  --bs-table-color: var(--site-text, #212529);
}

/* Interests section grid: hover shadow follows theme text hue */
.interests-grid-nav .interests-grid-nav__card {
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.interests-grid-nav .interests-grid-nav__card:hover {
  box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--site-text, #000) 14%, transparent) !important;
  transform: translateY(-2px);
}

/* Month/year picker above the calendar grid — centered, wraps to column on narrow viewports */
.calendar-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.calendar-picker .form-select {
  width: auto;
}

/* Calendar (/calendar): table uses theme tokens (CalendarHelper) */
.calendar-wrap .calendar-table {
  --calendar-scale: 1.1;
  --bs-table-color: var(--site-text, #212529);
  --bs-table-bg: var(--site-content-bg, #fff);
  --bs-table-border-color: color-mix(in srgb, var(--site-text, #212529) 18%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--site-tiger, #688cbe) 10%, var(--site-content-bg, #fff));
  --calendar-weekday-strip-bg: color-mix(in srgb, var(--site-tiger, #688cbe) 14%, var(--site-content-bg, #fff));
  color: var(--site-text, #212529);
  max-width: min(calc(34rem * var(--calendar-scale)), 100%);
  width: 100%;
  table-layout: fixed;
  margin-inline: auto;
}

/* Equal weekday columns regardless of nav row colspan / short labels */
.calendar-wrap .calendar-table col.calendar-grid-col {
  width: 14.2857142857%;
}

/* Zero inner padding — borders define cell bounds (Bootstrap .table-sm would add padding otherwise) */
.calendar-wrap .calendar-table > :not(caption) > * > * {
  padding: 0;
}

/* Month / prev-next row: match .site-card-header tiger band + header text colour */
.calendar-wrap .calendar-nav-row td {
  background-color: var(--site-tiger, #688cbe);
  color: var(--site-card-header-fg, #fff);
  border-color: color-mix(in srgb, var(--site-card-header-fg, #fff) 38%, transparent);
}

.calendar-wrap .calendar-nav-row a:link,
.calendar-wrap .calendar-nav-row a:visited {
  color: var(--site-card-header-fg, #fff);
}

.calendar-wrap .calendar-nav-row a:hover,
.calendar-wrap .calendar-nav-row a:focus-visible {
  color: color-mix(in srgb, var(--site-card-header-fg, #fff) 78%, #000);
}

.calendar-wrap .calendar-nav-row a:active {
  color: color-mix(in srgb, var(--site-card-header-fg, #fff) 62%, #000);
}

.calendar-wrap .calendar-nav-row .calendar-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  min-height: 1.85rem;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

.calendar-wrap .calendar-nav-row .calendar-nav-link:focus-visible {
  outline: 2px solid var(--site-card-header-fg, #fff);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.calendar-wrap .calendar-nav-row .calendar-nav-link .bi {
  font-size: 1.125rem;
}

.calendar-wrap .calendar-weekdays td {
  color: color-mix(in srgb, var(--site-text, #212529) 72%, transparent);
  background-color: var(--calendar-weekday-strip-bg);
}

/* Week rows below header: fixed tall cells (pads + numbered days); nav/weekday rows keep auto height */
.calendar-wrap .calendar-table tr:not(.calendar-nav-row):not(.calendar-weekdays) > td {
  height: calc(70px * var(--calendar-scale));
  min-height: calc(70px * var(--calendar-scale));
  vertical-align: top;
}

.calendar-wrap .calendar-day--today {
  background-color: var(--calendar-weekday-strip-bg) !important;
  font-weight: 600;
}

.calendar-wrap .calendar-table td.calendar-day {
  vertical-align: top !important;
  text-align: left !important;
  overflow: hidden;
  padding: calc(0.25rem * var(--calendar-scale));
}

/* Keeps the digit in the top-left when body/table line-height is large */
.calendar-wrap .calendar-table td.calendar-day .calendar-day-num {
  display: block;
  line-height: 1.1;
  width: 100%;
  text-align: left;
}

.calendar-wrap .calendar-table td.calendar-day .calendar-holiday {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: calc(0.2rem * var(--calendar-scale));
  font-size: calc(0.6875rem * var(--calendar-scale));
  line-height: 1.2;
  color: color-mix(in srgb, var(--site-text, #212529) 74%, transparent);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.calendar-wrap .calendar-table td.calendar-day .calendar-holiday:not(.calendar-holiday--with-icon) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Icon (e.g. birthday) stacks above label; clamp the text span only */
.calendar-wrap .calendar-table td.calendar-day .calendar-holiday--with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(0.12rem * var(--calendar-scale));
}

.calendar-wrap .calendar-table td.calendar-day .calendar-holiday__icon .bi {
  font-size: calc(0.8125rem * var(--calendar-scale));
  line-height: 1;
}

.calendar-wrap .calendar-table td.calendar-day .calendar-holiday--with-icon .calendar-holiday__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.calendar-wrap .calendar-table td.calendar-day a.calendar-holiday {
  color: inherit;
  text-decoration: none;
}

.calendar-wrap .calendar-table td.calendar-day a.calendar-holiday:hover,
.calendar-wrap .calendar-table td.calendar-day a.calendar-holiday:focus-visible {
  text-decoration: underline;
}

/* partials/random-figure.twig — caption width follows image column (float / inline-table).
   Avoid Bootstrap .w-100 on figcaption: width:100% !important breaks shrink-wrapped figures.
   Table-caption model is more reliable than flex fit-content for mixed text + links. */
figure.random-figure-pooled {
  /* Beat Bootstrap .d-inline-block / .figure utilities (often !important) so table-caption wrapping works */
  display: inline-table !important;
  vertical-align: bottom;
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
}

figure.random-figure-pooled > a {
  display: block;
}

figure.random-figure-pooled > a > img {
  display: block;
  height: auto;
}

figure.random-figure-pooled--caption-pending:not(.random-figure-pooled--img-ready) figcaption {
  display: none;
}

figure.random-figure-pooled figcaption {
  display: table-caption;
  caption-side: bottom;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
}

figure.random-figure-pooled figcaption a {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
}

/* Theme stylesheet loads after app.css; reinforce wrapping inside tiger-box card body */
.site-card-body figure.random-figure-pooled figcaption,
.site-card-body figure.random-figure-pooled figcaption a {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
}

/*
 * Three-column layout: right sidebar above main content for chat popups that extend left,
 * but both stay below the fixed footer (Bootstrap .z-3 = 3).
 */
.site-layout-main-column {
  position: relative;
  z-index: 1;
}

.site-layout-right-column {
  position: relative;
  z-index: 2;
}

/*
 * Elfsight Instagram Chat: stack above sibling sidebar cards/iframes without beating the footer.
 * High z-index applies only to the open chat window, not the in-flow launcher button.
 */
.elfsight-instagram-chat-host {
  position: relative;
  z-index: 1;
}

.elfsight-instagram-chat-host .card,
.elfsight-instagram-chat-host .card-body {
  overflow: visible;
}

/*
 * Open chat panel only — exclude launcher/embed containers (class*="ChatWindow" matches both).
 */
.elfsight-instagram-chat-host [class*="ChatWindow"]:not([class*="Button"]):not([class*="Embed"]):not([class*="Launcher"]),
.elfsight-instagram-chat-host [class*="WindowContainer"]:not([class*="Button"]):not([class*="Embed"]):not([class*="Launcher"]) {
  z-index: var(--elfsight-chat-z-index) !important;
}

@media (max-width: 991.98px) {
  .site-layout-right-column .card-body > [class^="elfsight-app-"] {
    margin-inline: auto;
  }

  /*
   * Mobile: stack chat host above later sidebar partials (DOM order) without raising
   * the whole column above the fixed footer (z-3 = 3).
   */
  .site-layout-right-column .elfsight-instagram-chat-host {
    z-index: 5;
  }

  /*
   * When the chat panel is open (class toggled by elfsight-instagram-chat-embed.js),
   * lift the column above the footer only for the open state.
   */
  .site-layout-right-column.elfsight-chat-panel-open {
    z-index: 10;
  }
}

/* Compact prev / picker / next section switcher (albums, galleries, poetry, interests) */
.section-switcher {
  font-size: var(--section-switcher-font-size);
}

.section-switcher__back {
  margin-bottom: var(--section-switcher-gap);
}

.section-switcher__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--section-switcher-gap);
}

.section-switcher__picker {
  flex: 0 1 auto;
  max-width: 100%;
}

.section-switcher__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-switcher-pill-padding-y) var(--section-switcher-pill-padding-x);
  border-radius: var(--section-switcher-pill-radius);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  color: var(--site-list-group-fg);
  border: 1px solid var(--site-list-group-border-color);
  background-color: var(--site-list-group-bg);
}

.section-switcher__step {
  min-width: var(--section-switcher-step-min-size);
  min-height: var(--section-switcher-step-min-size);
  padding-inline: calc(var(--section-switcher-pill-padding-x) * 0.75);
}

.section-switcher__step--disabled {
  opacity: var(--site-list-group-disabled-opacity);
  pointer-events: none;
}

.section-switcher__step::before {
  content: "";
  display: inline-block;
  border-top: var(--section-switcher-caret-size) solid transparent;
  border-bottom: var(--section-switcher-caret-size) solid transparent;
  vertical-align: 0.15em;
}

.section-switcher__step--prev::before {
  border-right: var(--section-switcher-caret-size) solid currentColor;
}

.section-switcher__step--next::before {
  border-left: var(--section-switcher-caret-size) solid currentColor;
}

.section-switcher__pill:hover,
.section-switcher__pill:focus-visible {
  color: var(--site-list-group-fg);
  border-color: var(--site-list-group-border-color);
  background-color: var(--site-list-group-hover-bg);
}

.section-switcher__pill:focus-visible {
  outline: 2px solid var(--site-tiger, #688cbe);
  outline-offset: 2px;
}

.section-switcher__pill--active {
  font-weight: 600;
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-active-bg);
  border-color: var(--site-list-group-border-color);
}

.section-switcher__pill--active:hover,
.section-switcher__pill--active:focus-visible {
  color: var(--site-list-group-fg);
  border-color: var(--site-list-group-border-color);
  background-color: var(--site-list-group-active-hover-bg);
}

.section-switcher__current.dropdown-toggle::after {
  margin-inline-start: 0.45em;
  vertical-align: 0.15em;
  border-top: var(--section-switcher-caret-size) solid currentColor;
  border-right: var(--section-switcher-caret-size) solid transparent;
  border-bottom: 0;
  border-left: var(--section-switcher-caret-size) solid transparent;
}

.section-switcher__current-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(16rem, 70vw);
}

.section-switcher__menu {
  --bs-dropdown-min-width: min(100%, 14rem);
  max-height: min(
    50vh,
    calc(var(--section-switcher-menu-max-rows) * var(--section-switcher-menu-row-height))
  );
  overflow-y: auto;
  background-color: var(--site-list-group-bg);
  border-color: var(--site-list-group-border-color);
}

.section-switcher__menu-item {
  border-radius: var(--section-switcher-pill-radius);
  margin: calc(var(--section-switcher-gap) * 0.5) calc(var(--section-switcher-gap) * 0.75);
  padding: var(--section-switcher-pill-padding-y) var(--section-switcher-pill-padding-x);
  width: auto;
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-bg);
}

.section-switcher__menu-item:hover,
.section-switcher__menu-item:focus {
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-hover-bg);
}

.section-switcher__menu-item.active,
.section-switcher__menu-item:active {
  font-weight: 600;
  color: var(--site-list-group-fg);
  background-color: var(--site-list-group-active-bg);
}