/*
 * The site chrome, layered over the legacy stylesheets: header, listing toolbar, poster cards,
 * the text sections, the tags cloud and the footer. Markup and class names are the legacy ones
 * (the e2e specs and the admin navbar colour hang off them); this file only restyles them.
 * Loaded last, so equal-specificity rules win here; `!important` appears only where a legacy
 * sheet used it first.
 *
 * Direction: a quiet dark bar with one accent (the brand orange) for the current section, the
 * primary button and the active page; Inter throughout; posters with nothing on them but the
 * title underneath.
 */

:root {
  --hh-accent: #ff9f08;
  --hh-accent-ink: #140d00;
  /* the header; the admin navbar colour replaces all three (see nav-color.ts) */
  --hh-nav-bg: #141414;
  --hh-nav-ink: #f3f3f3;
  --hh-nav-ink-soft: rgba(243, 243, 243, 0.62);
  --hh-bg: #121212;
  --hh-surface: #1a1a1a;
  --hh-surface-2: #242424;
  --hh-line: rgba(255, 255, 255, 0.08);
  --hh-text: #f0f0f0;
  --hh-muted: #9a9a9a;
  --hh-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hh-nav-h: 64px;
  --hh-radius: 8px;
}

html {
  scroll-padding-top: var(--hh-nav-h);
}
body {
  font-family: var(--hh-font);
  background: var(--hh-bg);
  color: var(--hh-text);
  font-size: 15px;
}
/* bootstrap paints a focus ring on every clicked link; keep rings for keyboard focus only */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--hh-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */
header.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--hh-nav-h);
  padding: 0 20px;
  background: color-mix(in srgb, var(--hh-nav-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hh-nav-ink) 9%, transparent);
  font-family: var(--hh-font);
}
header.navbar .clear,
header.navbar::before,
header.navbar::after {
  display: none; /* the legacy clearfix pseudo-elements would become flex items */
}
header.navbar .navbar_left {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
}
header.navbar .navbar_left > a {
  display: block;
  flex: 0 0 auto;
  border-radius: 10px;
}
header.navbar .navbar_left .navbar_logo {
  float: none;
  width: 40px;
  height: 40px;
  margin: 0 12px 0 0;
  border-radius: 10px;
  background-size: contain !important;
}
header.navbar .drop_btn {
  display: none !important;
}

header.navbar .navbar_left .navbar_links {
  float: none;
  position: static;
  display: block;
  width: auto;
  flex: 0 0 auto;
}
header.navbar .navbar_left .navbar_links ul {
  display: flex;
  align-items: center;
  gap: 2px;
}
header.navbar .navbar_left .navbar_links ul li,
header.navbar .navbar_left .navbar_links ul li:first-child,
header.navbar .navbar_left .navbar_links ul li:last-child {
  float: none;
  width: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
header.navbar .navbar_left .navbar_links ul li a {
  position: relative;
  display: block;
  line-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hh-nav-ink-soft);
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
header.navbar .navbar_left .navbar_links ul li a:hover {
  color: var(--hh-nav-ink);
  background: color-mix(in srgb, var(--hh-nav-ink) 8%, transparent);
}
header.navbar .navbar_left .navbar_links ul li a[aria-current="page"] {
  color: var(--hh-nav-ink);
  font-weight: 600;
}
header.navbar .navbar_left .navbar_links ul li a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -14px;
  height: 2px;
  background: var(--hh-accent);
}

/* The "AI Hentai" partner link: the one glowing pill in the link row. The gradient
   border, the sparkle and the New tag all sit on the brand orange so it reads as
   part of the bar, not an ad; the shimmer sweeps once on hover. */
header.navbar .navbar_left .navbar_links ul li a.nav_ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 0 11px 0 9px;
  line-height: 32px;
  border-radius: 999px;
  color: var(--hh-nav-ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  background:
    linear-gradient(color-mix(in srgb, var(--hh-nav-bg) 70%, var(--hh-accent) 10%), color-mix(in srgb, var(--hh-nav-bg) 70%, var(--hh-accent) 10%)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--hh-accent) 85%, transparent), color-mix(in srgb, var(--hh-accent) 25%, transparent) 55%, color-mix(in srgb, var(--hh-accent) 85%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hh-accent) 0%, transparent);
  overflow: hidden;
  isolation: isolate;
  animation: hh-ai-glow 2.8s ease-in-out infinite;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 30%,
    color-mix(in srgb, var(--hh-accent) 35%, transparent) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0s;
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai:hover,
header.navbar .navbar_left .navbar_links ul li a.nav_ai:focus-visible {
  color: #fff;
  background:
    linear-gradient(color-mix(in srgb, var(--hh-nav-bg) 60%, var(--hh-accent) 22%), color-mix(in srgb, var(--hh-nav-bg) 60%, var(--hh-accent) 22%)) padding-box,
    linear-gradient(120deg, var(--hh-accent), color-mix(in srgb, var(--hh-accent) 60%, #fff), var(--hh-accent)) border-box;
  box-shadow: 0 0 18px color-mix(in srgb, var(--hh-accent) 40%, transparent);
  transform: translateY(-1px);
  animation: none;
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai:hover::before,
header.navbar .navbar_left .navbar_links ul li a.nav_ai:focus-visible::before {
  transform: translateX(120%);
  transition: transform 0.7s ease;
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai .nav_ai_spark {
  flex: 0 0 auto;
  color: var(--hh-accent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-accent) 70%, transparent));
  transition: transform 0.3s ease;
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai:hover .nav_ai_spark {
  transform: rotate(20deg) scale(1.15);
}
header.navbar .navbar_left .navbar_links ul li a.nav_ai .nav_ai_tag {
  flex: 0 0 auto;
  padding: 0 6px;
  line-height: 16px;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@keyframes hh-ai-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hh-accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 14px color-mix(in srgb, var(--hh-accent) 32%, transparent);
  }
}

header.navbar .navbar_left .navbar_search {
  float: none !important;
  position: static;
  flex: 1 1 200px;
  min-width: 150px;
  max-width: 340px;
  width: auto;
  height: auto;
  margin: 0 auto;
}
/* the bar's own AI Hentai pill, phones only (the link row lives in the drawer there) */
header.navbar .navbar_left > a.nav_ai_mobile {
  display: none;
}
header.navbar .navbar-form {
  margin: 0;
  width: 100%;
}
header.navbar .input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
/* the magnifier sits inside the field on the left; it is also the submit button */
header.navbar .navbar_left .navbar_search input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  border: 1px solid color-mix(in srgb, var(--hh-nav-ink) 12%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--hh-nav-ink) 6%, transparent);
  color: var(--hh-nav-ink);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
header.navbar .navbar_left .navbar_search input[type="text"]::placeholder {
  color: var(--hh-nav-ink-soft);
}
header.navbar .navbar_left .navbar_search input[type="text"]:hover {
  border-color: color-mix(in srgb, var(--hh-nav-ink) 20%, transparent);
}
header.navbar .navbar_left .navbar_search input[type="text"]:focus {
  outline: 0;
  border-color: var(--hh-accent);
  background: color-mix(in srgb, var(--hh-nav-ink) 4%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-accent) 22%, transparent);
}
header.navbar .input-group-btn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: auto;
  display: flex;
  font-size: 0;
}
header.navbar .navbar_left .navbar_search button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px 0 0 12px;
  background-color: transparent;
  color: var(--hh-nav-ink-soft);
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  transition: color 0.15s ease;
}
header.navbar .navbar_left .navbar_search button:hover {
  background-color: transparent;
  color: var(--hh-accent);
}

header.navbar .navbar_right {
  position: static;
  display: block;
  flex: 0 0 auto;
  background: transparent;
}
header.navbar .navbar_right ul {
  display: flex;
  align-items: center;
  gap: 6px;
}
header.navbar .navbar_right ul li {
  float: none;
  padding: 0;
}
header.navbar .navbar_right ul li a {
  display: block;
  line-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hh-nav-ink-soft);
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
header.navbar .navbar_right ul li a:hover {
  color: var(--hh-nav-ink);
  background: color-mix(in srgb, var(--hh-nav-ink) 8%, transparent);
}
header.navbar .navbar_right ul li a.nav_cta {
  padding: 0 16px;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-weight: 600;
}
header.navbar .navbar_right ul li a.nav_cta:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
}
header.navbar .navbar_right ul li a .fa {
  display: none;
}

/* hamburger: hidden on desktop, an animated icon on phones */
header.navbar .navbar-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  header.navbar {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 60px;
    padding: 10px 12px;
  }
  header.navbar .navbar_left {
    flex-wrap: wrap;
  }
  header.navbar .navbar_left > a {
    order: 1;
  }
  header.navbar .navbar_left .navbar_logo {
    float: none;
    width: 38px;
    height: 38px;
    margin: 0 4px 0 0;
  }
  header.navbar .navbar_left .navbar_search {
    order: 2;
    position: static;
    left: auto;
    top: auto;
    flex: 1 1 120px;
    min-width: 120px;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
  }
  header.navbar .navbar-form {
    margin: 0;
  }
  header.navbar .navbar_left > a.nav_ai_mobile {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 10px 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
      linear-gradient(
          color-mix(in srgb, var(--hh-nav-bg) 70%, var(--hh-accent) 10%),
          color-mix(in srgb, var(--hh-nav-bg) 70%, var(--hh-accent) 10%)
        )
        padding-box,
      linear-gradient(
          120deg,
          color-mix(in srgb, var(--hh-accent) 85%, transparent),
          color-mix(in srgb, var(--hh-accent) 25%, transparent) 55%,
          color-mix(in srgb, var(--hh-accent) 85%, transparent)
        )
        border-box;
    color: var(--hh-nav-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
  }
  header.navbar .navbar_left > a.nav_ai_mobile .nav_ai_spark {
    color: var(--hh-accent);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-accent) 70%, transparent));
  }
  header.navbar .navbar-toggle {
    order: 4;
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--hh-nav-ink) 12%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--hh-nav-ink) 6%, transparent);
    cursor: pointer;
  }
  /* three bars 6px apart; open, the outer two meet in the middle as an X */
  header.navbar .navbar-toggle .icon-bar {
    position: absolute;
    left: 10px;
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 !important;
    border-radius: 2px;
    background: var(--hh-nav-ink);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }
  header.navbar .navbar-toggle .icon-bar:nth-child(2) {
    top: 12px;
  }
  header.navbar .navbar-toggle .icon-bar:nth-child(3) {
    top: 18px;
  }
  header.navbar .navbar-toggle .icon-bar:nth-child(4) {
    top: 24px;
  }
  header.navbar .navbar-toggle.active_nav {
    background: color-mix(in srgb, var(--hh-nav-ink) 6%, transparent);
    border-color: var(--hh-accent);
  }
  header.navbar .navbar-toggle.active_nav .icon-bar:nth-child(2) {
    transform: translateY(6px) rotate(45deg);
  }
  header.navbar .navbar-toggle.active_nav .icon-bar:nth-child(3) {
    opacity: 0;
  }
  header.navbar .navbar-toggle.active_nav .icon-bar:nth-child(4) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* the menu is a drawer hanging off the header (the sticky header is its box) */
  header.navbar .navbar_left .navbar_links {
    order: 4;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    display: none;
    width: auto;
    flex: none;
    margin: 0;
    padding: 6px 12px 10px;
    background: var(--hh-nav-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--hh-nav-ink) 9%, transparent);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  }
  header.navbar.is-open .navbar_left .navbar_links {
    display: block;
  }
  header.navbar .navbar_left .navbar_links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  header.navbar .navbar_left .navbar_links ul li {
    width: 100%;
  }
  header.navbar .navbar_left .navbar_links ul li a {
    line-height: 44px;
    padding: 0 12px;
    font-size: 15px;
  }
  header.navbar .navbar_left .navbar_links ul li a[aria-current="page"]::after {
    left: 0;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
    border-radius: 2px;
  }
  header.navbar .navbar_left .navbar_links ul li a.nav_ai {
    display: inline-flex;
    width: auto;
    margin: 6px 0 2px;
    padding: 0 14px 0 11px;
    line-height: 36px;
    font-size: 14px;
  }
  header.navbar .mob_li {
    display: block;
  }
  header.navbar .mob_li a .fa {
    width: 18px;
    margin-right: 6px;
    color: var(--hh-accent);
    text-align: center;
  }
  header.navbar .navbar_right {
    display: none;
  }
}

/* ------------------------------------------------------- listing toolbar */
.overview {
  max-width: none;
  margin: 0 auto;
  padding: 0 8px;
}
.top_overview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 28px auto 0;
  padding: 0 8px;
}
.overview .top_overview {
  justify-content: center;
}
.top_overview .sort_area,
.top_overview .sort_area.srt_ovw {
  position: relative;
  margin: 0;
}
/* the sort control is the section title: "Recent Upload", "Most Views"... */
.top_overview .sort_area button {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 4px 28px 4px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hh-text) !important;
  font-family: var(--hh-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  transition: color 0.15s ease;
}
.top_overview .sort_area button:hover {
  color: var(--hh-accent) !important;
}
.top_overview .sort_area #ss_changer i {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--hh-accent);
}
.top_overview .sort_area .ss_ch_drop {
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.top_overview .sort_area .ss_ch_drop a {
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--hh-text) !important;
}
.top_overview .sort_area .ch_drop_itm:hover {
  background: transparent;
  border-color: transparent;
}
.top_overview .sort_area .ch_drop_itm:hover > a {
  background: var(--hh-accent);
  color: var(--hh-accent-ink) !important;
}
.top_overview .home-ad-top {
  margin: 16px 0 0;
}

.pagination,
.top_overview .pagination,
.top_overview_sec .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:last-child > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--hh-line);
  border-radius: 8px;
  background: var(--hh-surface);
  color: var(--hh-muted) !important;
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--hh-surface-2);
  border-color: var(--hh-line);
  color: var(--hh-text) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background: var(--hh-accent) !important;
  border-color: transparent;
  color: var(--hh-accent-ink) !important;
  font-weight: 600;
}
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
  background: transparent;
  border-color: var(--hh-line);
  color: var(--hh-muted) !important;
  opacity: 0.45;
  cursor: default;
}
.bottom_overview {
  margin: 24px auto 8px;
  padding: 0 16px;
}

/* ------------------------------------------------------------ poster cards */
.sub_overview {
  margin: 20px auto 0;
}
.sub_overview .a_item {
  display: block;
  margin: 0 5px 20px; /* the legacy column widths assume 5px gutters */
  text-decoration: none;
  border-radius: var(--hh-radius);
}
.sub_overview .v_item {
  float: none;
  display: block;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sub_overview .video_cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--hh-radius);
  background: var(--hh-surface);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s ease;
}
.sub_overview .video_cover img {
  display: block;
  height: auto;
  aspect-ratio: 268 / 394;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* hover: the card lifts, the poster zooms behind a soft bottom shade, and a play button lands */
.sub_overview .video_cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sub_overview .video_cover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 999px;
  background: var(--hh-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23140d00' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E")
    center / 26px no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sub_overview .a_item:hover .video_cover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--hh-accent) 45%, transparent);
}
.sub_overview .a_item:hover .video_cover img {
  transform: scale(1.06);
}
.sub_overview .a_item:hover .video_cover::before,
.sub_overview .a_item:hover .video_cover::after {
  opacity: 1;
}
.sub_overview .a_item:hover .video_cover::after {
  transform: scale(1);
}
/* two clamped lines under the poster */
.sub_overview .video_title,
.sub_overview .a_item:hover .video_title,
.sub_overview .video_title:hover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 46px;
  max-height: none;
  padding: 10px 2px 0;
  background: transparent;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-overflow: ellipsis;
  box-shadow: none;
}
/* ------------------------------------------------------- search filters */
/* search/index.php shipped its own slate-blue and gold palette; bring it onto the site tokens */
/* the filter row: each tab opens a modal, so they read as pill buttons with a caret; "Reset All"
   is the quiet one; the chosen filters follow as orange chips */
.adv_filters {
  width: 100%;
  padding: 14px 0 0;
}
/* the tab row and the chosen chips sit centred under the sort + page-chip row, which is centred
   too; the listing beneath is full-bleed, so nothing else gives them a left edge to hang on */
.adv_filters .adv_tabs {
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  border-bottom: 0;
  background: transparent;
}
.adv_filters .adv_tab {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.adv_filters .adv_tab[data-open-modal]::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--hh-accent);
}
.adv_filters .adv_tab:hover {
  border-color: var(--hh-accent);
  background: var(--hh-surface);
  color: var(--hh-text);
}
.adv_filters .adv_tab.active {
  border-color: var(--hh-accent);
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-weight: 600;
}
.adv_filters .adv_tab:not([data-open-modal]) {
  border-color: transparent;
  background: transparent;
  color: var(--hh-muted);
}
.adv_filters .adv_tab:not([data-open-modal]):hover {
  color: var(--hh-text);
}
.adv_filters .adv_selected {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.adv_filters .adv_selected .adv_chip {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}
.adv_filters .adv_chip,
.filter-modal .adv_chip {
  padding: 10px 14px;
  border: 1px solid var(--hh-line);
  border-radius: 8px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
}
.adv_filters .adv_chip:hover,
.filter-modal .adv_chip:hover {
  background: var(--hh-surface);
  border-color: var(--hh-accent);
  color: var(--hh-text);
  transform: none;
}
.adv_filters .adv_chip.selected,
.filter-modal .adv_chip.selected,
.adv_filters .adv_chip.selected:hover,
.filter-modal .adv_chip.selected:hover {
  background: var(--hh-accent);
  border-color: transparent;
  color: var(--hh-accent-ink);
  font-weight: 600;
}
.adv_filters .adv_chip.danger,
.filter-modal .adv_chip.danger {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
  color: #fca5a5;
}
.adv_filters .adv_chip.danger:hover,
.filter-modal .adv_chip.danger:hover {
  background: rgba(220, 38, 38, 0.22);
  border-color: #dc2626;
  color: #fecaca;
}
.filter-modal .filter-modal_dialog {
  border: 1px solid var(--hh-line);
  border-radius: 16px;
  background: var(--hh-surface);
}
.filter-modal .adv_modal_hdr {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hh-line);
  border-radius: 16px 16px 0 0;
  background: var(--hh-surface);
}
.filter-modal .adv_modal_title {
  margin: 0 0 14px;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.filter-modal .adv_modal_footer {
  padding: 16px 24px;
  border-top: 1px solid var(--hh-line);
  border-radius: 0 0 16px 16px;
  background: var(--hh-surface);
}
.filter-modal .adv_grid {
  scrollbar-color: var(--hh-surface-2) var(--hh-surface);
}
.filter-modal .adv_btn {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.filter-modal .adv_btn:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  transform: none;
}
.filter-modal .switch {
  color: var(--hh-text);
  font-family: var(--hh-font);
}
.filter-modal .switch input {
  accent-color: var(--hh-accent);
}
.filter-modal .filter-modal_close {
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-weight: 500;
}
.filter-modal .filter-modal_close:hover {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  transform: none;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  /* phones get the sort title and the ad up top; the page chips live below the grid */
  .top_overview .pagination {
    display: none;
  }
  .top_overview .sort_area button {
    font-size: 20px;
  }
  .sub_overview .a_item {
    margin: 0 5px 16px;
    width: 47%;
  }
  .sub_overview .video_cover img {
    width: 100%;
  }
  .sub_overview .video_title,
  .sub_overview .a_item:hover .video_title,
  .sub_overview .video_title:hover {
    width: 100%;
    height: 42px;
    padding: 8px 2px 0;
    font-size: 13px;
  }
}

/* ------------------------------------------------- text sections and tags */
.main_section {
  padding: 32px 16px;
  background: var(--hh-surface);
  border-top: 1px solid var(--hh-line);
  border-bottom: 1px solid var(--hh-line);
  color: var(--hh-text);
}
.main_section + .main_section {
  border-top: 0;
}
.main_bar {
  font-family: var(--hh-font);
  text-align: left;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.main_section .main_desc {
  max-width: 72ch;
  margin-top: 12px;
  color: var(--hh-muted);
  font-size: 15px;
  line-height: 1.65;
}
.main_section .main_desc h2,
.main_section .main_desc h3 {
  margin: 24px 0 6px;
  color: var(--hh-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.main_section .main_desc p {
  margin: 0 0 10px;
}
.main_section .main_desc ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.main_section .main_desc strong {
  color: var(--hh-text);
  font-weight: 600;
}
.main_section .tags_list {
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-start;
}
.main_section .tags_list a:not(.tag_chip) {
  padding: 6px 12px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.main_section .tags_list a:not(.tag_chip):hover {
  background: var(--hh-accent);
  border-color: transparent;
  color: var(--hh-accent-ink);
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------ watch page */
/* watch/index.php: a two-column grid (player column + side lists) instead of the fixed-width
   floats; the legacy breakpoints below 992px are overridden by the same selectors here */
.video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  max-width: 1560px;
  margin: 28px auto 0;
  padding: 0 20px;
  font-family: var(--hh-font);
}
.video .left,
.video .right {
  float: none;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.video .left .player {
  position: relative;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.video .left .player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video .left .info_top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: center;
  margin-bottom: 20px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--hh-line);
}
.video .left .info_top .video_title {
  grid-column: 1;
  margin: 0;
  max-height: none;
  color: var(--hh-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: none;
}
.video .left .info_top .video_views {
  grid-column: 1;
  margin: 0;
  color: var(--hh-muted);
  font-size: 14px;
  font-weight: 400;
}
.video .left .info_top .buttons {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hh-font);
  color: var(--hh-text);
}
.video .left .info_top .buttons .button_item {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-size: 13px;
  font-weight: 500;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.video .left .info_top .buttons .button_item i {
  margin-right: 6px;
  font-size: 14px;
}
.video .left .info_top .buttons .button_item:hover {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
}
.video .left .info_top .buttons .button_item.like[data-vote="like"],
.video .left .info_top .buttons .button_item.dislike[data-vote="dislike"],
.video .left .info_top .buttons .button_item.save[data-favorited="1"] {
  border-color: transparent;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.video .tt .tt_text {
  left: 50%;
  bottom: calc(100% + 8px);
  margin-left: 0;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: #333;
  font-family: var(--hh-font);
}

.video .left .info_bottom {
  display: flex;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
}
.video .left .info_bottom .cover {
  flex: 0 0 auto;
  float: none;
  width: 170px;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.video .left .info_bottom .cover img {
  border-radius: 8px;
  box-shadow: none;
}
.video .left .info_bottom .r_info_b {
  flex: 1 1 auto;
  min-width: 0;
}
.video .left .info_bottom .r_item {
  height: auto;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.4;
}
.video .left .info_bottom .r_item span {
  color: var(--hh-muted);
  font-size: 12px;
}
.video .left .info_bottom .r_item .sub_r,
.video .left .info_bottom .r_item .sub_t {
  margin-top: 2px;
  color: var(--hh-text);
  font-size: 14px;
  font-weight: 500;
}
.video .left .info_bottom .r_item h2 {
  font-size: 14px;
  font-weight: 500;
}
.video .left .info_bottom .r_item a {
  color: var(--hh-accent);
}
.video .left .info_bottom .r_item a:hover {
  color: var(--hh-text);
}
.video .left .info_bottom .clear {
  display: none;
}

.video .left .video_tags {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
}
.video .left .video_tags a,
.video .left .video_tags .tag_chip {
  height: 32px;
  min-width: 0;
  margin: 0 8px 8px 0;
  padding: 0 12px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 30px;
  text-transform: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.video .left .video_tags a::before {
  display: none;
}
.video .left .video_tags a:hover,
.video .left .video_tags .tag_chip:hover {
  border-color: transparent;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  transform: none;
}
.video .left .video_tags .more-tags {
  color: var(--hh-muted);
  font-size: 13px;
}
.video .left .video_tags .video_description p {
  margin: 16px 0 0;
  color: var(--hh-muted);
  font-size: 15px;
  line-height: 1.7;
}
.video .left .video_tags .main_bar {
  margin-bottom: 12px !important;
  font-size: 18px;
}
.video .left .video_tags .tags_list {
  gap: 0;
}
.video .left .comments {
  margin-top: 20px;
}

/* the sidebar: each list is a card with a ruled heading; the current episode is a highlighted
   row with a small "Now Playing" pill instead of a black box over its thumbnail */
.video .right .watch-ad-top.desktop {
  margin: 0 0 20px;
}
.video .right .more_from_series,
.video .right .more_related {
  padding: 10px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
}
.video .right .more_from_series {
  margin-bottom: 20px;
}
.video .right .more_from_series .mfs_title,
.video .right .more_related .mr_title {
  margin: 0 0 8px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--hh-line);
  color: var(--hh-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.video .right .more_from_series .mfs_item,
.video .right .more_related .mr_item {
  gap: 12px;
  margin: 0 0 2px;
  padding: 6px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.video .right .more_from_series .mfs_item:hover,
.video .right .more_related .mr_item:hover,
.video .right .more_from_series .mfs_item:has(.now_playing) {
  background: var(--hh-surface-2);
}
.video .right .more_from_series .mfs_item .poster,
.video .right .more_related .mr_item .poster {
  flex: 0 0 auto;
}
.video .right .more_from_series .mfs_item .poster img,
.video .right .more_related .mr_item .poster img {
  display: block;
  width: 150px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
}
.video .right .more_from_series .mfs_item .now_playing {
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.video .right .more_from_series .mfs_item .infos,
.video .right .more_related .mr_item .infos {
  min-width: 0;
  padding-left: 0;
}
.video .right .more_from_series .mfs_item .infos .title,
.video .right .more_related .mr_item .infos .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.video .right .more_from_series .mfs_item .infos .title a,
.video .right .more_related .mr_item .infos .title a {
  color: var(--hh-text);
}
.video .right .more_from_series .mfs_item .infos .title a:hover,
.video .right .more_related .mr_item .infos .title a:hover {
  color: var(--hh-accent);
}
.video .right .more_from_series .mfs_item .infos .brand,
.video .right .more_from_series .mfs_item .infos .views,
.video .right .more_related .mr_item .infos .brand,
.video .right .more_related .mr_item .infos .views {
  margin-top: 3px;
  color: var(--hh-muted);
  font-size: 12px;
}

@media (max-width: 991.98px) {
  .video {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 16px auto 0;
    padding: 0 12px;
  }
  .video .left,
  .video .right {
    width: auto;
    padding: 0;
  }
  .video .left .player {
    height: auto;
    padding-bottom: 0;
    border-radius: 10px;
  }
  .video .left .info_bottom {
    gap: 16px;
    padding: 16px;
  }
  .video .left .info_bottom .cover {
    width: 120px;
  }
  .video .left .info_bottom .half {
    display: block;
    width: 50%;
    margin-bottom: 0;
  }
  .video .right .more_from_series {
    margin-top: 0;
  }
}
@media (max-width: 599.98px) {
  .video .left .info_top {
    grid-template-columns: minmax(0, 1fr);
  }
  .video .left .info_top .buttons {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }
  .video .left .info_bottom .half {
    width: 100%;
    margin-bottom: 0;
  }
}

/* --------------------------------------------- page titles (series, genres, tags) */
.h1_series,
.h1_tags,
.h1_tag,
.h1_favorited,
.genre_header_section .free_genre_title {
  max-width: 1520px;
  margin: 28px auto 0;
  padding: 0 16px;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
}
.genre_header_section {
  max-width: 1520px;
  margin: 0 auto;
}
.genre_header_section .free_genre_title {
  margin-bottom: 8px !important;
  padding: 0;
}
.genre_header_section .wrap {
  width: auto;
  padding: 0 16px;
}
.genre_header_section .genre_description p {
  max-width: 80ch;
  padding: 0 !important;
  color: var(--hh-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ----------------------------------------------------- series directory */
.series .top_overview {
  max-width: 1520px;
  padding: 0 16px;
}
.top_overview .view_style {
  margin: 0;
}
.top_overview #s_view {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hh-line);
  border-radius: 8px;
  background: var(--hh-surface);
  font-size: 15px;
  line-height: 34px;
  text-align: center;
  box-shadow: none;
}
.top_overview #s_view:hover {
  border-color: var(--hh-accent);
}
/* series (and brand) cards: backdrop, the poster overlapping it, name and count */
.sub_overview:has(.vc_item) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1520px;
  margin: 20px auto 0;
  padding: 0 16px;
}
.sub_overview:has(.vc_item)::before,
.sub_overview:has(.vc_item)::after {
  display: none; /* legacy clearfix pseudo-elements would each take a grid cell */
}
.sub_overview .vc_item {
  display: block;
  width: auto;
  margin: 0;
  text-decoration: none;
}
.sub_overview .vc_item .v_item {
  display: block;
  float: none;
  border-radius: 12px;
  overflow: visible;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s ease;
}
.sub_overview .vc_item:hover .v_item {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}
.sub_overview .vcat_poster {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px 12px 0 0;
  background: var(--hh-surface-2); /* shows when a post has no backdrop */
}
.sub_overview .vcat_poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
}
/* the empty state of a brand with no published videos */
.not_found {
  width: calc(100% - 32px);
  max-width: 1488px;
  margin: 24px auto;
  padding: 40px 16px;
  border: 1px dashed var(--hh-line);
  border-radius: 12px;
  text-align: center;
}
.not_found h1 {
  margin: 0 0 6px;
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.not_found p {
  margin: 0;
  color: var(--hh-muted);
  font-size: 15px;
}
/* the full 404 page: a big dimmed code, the message and two ways out */
.not_found_page {
  max-width: 640px;
  margin: 48px auto 64px;
  padding: 48px 24px;
}
.not_found_page .not_found_code {
  margin-bottom: 4px;
  color: var(--hh-accent);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.not_found_page h1 {
  font-size: 24px;
}
.not_found_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.not_found_primary,
.not_found_secondary {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.not_found_primary {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.not_found_primary:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
  text-decoration: none;
}
.not_found_secondary {
  border-color: var(--hh-line);
  background: var(--hh-surface-2);
  color: var(--hh-text);
}
.not_found_secondary:hover {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .not_found_page {
    margin: 24px auto 40px;
    padding: 32px 16px;
  }
  .not_found_page .not_found_code {
    font-size: 48px;
  }
}
.sub_overview .vcat_info {
  position: relative;
  width: auto;
  min-height: 88px;
  padding: 12px 14px 12px 126px;
  border: 1px solid var(--hh-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--hh-surface);
}
.sub_overview .vcat_info:not(:has(.vcover)) {
  padding-left: 14px;
}
.sub_overview .vcover {
  left: 14px;
  bottom: 12px;
  width: 96px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
}
.sub_overview .vcat_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  justify-content: flex-start;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.sub_overview .vcat_second {
  padding: 6px 0 0;
  color: var(--hh-muted);
  font-family: var(--hh-font);
  font-size: 12px;
}
.sub_overview .vcat_second i {
  margin-right: 4px;
  color: var(--hh-accent);
}
/* the A-Z list view */
.sub_overview .series_list {
  width: 100%;
  max-width: 1520px;
  margin: 20px auto 0;
  padding: 0 16px;
  column-count: 3;
  column-gap: 32px;
}
.sub_overview .series_list .letter {
  break-after: avoid;
  padding: 0 10px;
}
.sub_overview .series_list .letter h3 {
  margin: 18px 0 6px;
  color: var(--hh-accent);
  font-size: 18px;
  font-weight: 700;
}
.sub_overview .series_list .az_sub {
  padding: 0;
  border-radius: 6px;
}
.sub_overview .series_list .az_sub.active {
  background: var(--hh-surface);
}
.sub_overview .series_list li a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--hh-text);
  font-size: 14px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.sub_overview .series_list li a:hover {
  background: var(--hh-surface);
  color: var(--hh-accent);
  text-decoration: none;
}
.pg_btm {
  display: flex;
  justify-content: center;
  margin: 24px auto 8px;
  padding: 0 16px;
}

/* ---------------------------------------------------------- genre cards */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1520px;
  margin: 20px auto 0;
  padding: 0 16px;
}
/* the legacy clearfix pseudo-elements would each take a grid cell */
.categories::before,
.categories::after {
  display: none;
}
.categories .cat_item {
  width: auto;
  height: 415px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
  box-shadow: none;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s ease;
}
.categories .cat_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}
.categories .cat_bg {
  border-radius: 12px;
  background-size: cover !important;
}
/* the text sits on its own shade, so it reads whatever the card height (the inline gradient on
   .cat_bg assumed the legacy 415px) */
.categories .cat_con {
  bottom: 0;
  padding: 172px 20px 20px;
  background: linear-gradient(
    to bottom,
    transparent 22%,
    color-mix(in srgb, var(--hh-surface) 85%, transparent) 46%,
    var(--hh-surface) 60%
  );
}
.categories .cat_ico {
  width: 52px;
  height: 52px;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.categories .cat_ttl {
  margin: 12px 0 6px;
  transform: none;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: none;
  text-transform: none;
}
.categories .cat_dsc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  color: var(--hh-muted);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.categories .cat_count {
  bottom: 12px;
  left: 20px;
  margin: 0;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.categories .cat_count i {
  margin-right: 6px;
  color: var(--hh-accent);
  font-size: 13px;
}
@media (max-width: 767.98px) {
  .h1_series,
  .h1_tags,
  .h1_tag,
  .h1_favorited,
  .genre_header_section .free_genre_title {
    margin-top: 20px;
    font-size: 22px;
  }
  .sub_overview:has(.vc_item) {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 12px;
  }
  .sub_overview .series_list {
    column-count: 1;
    padding: 0 12px;
  }
  .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px;
  }
  .categories .cat_item {
    height: 320px;
  }
  .categories .cat_con {
    padding: 120px 14px 14px;
  }
  .categories .cat_ico {
    width: 40px;
    height: 40px;
  }
  .categories .cat_ttl {
    font-size: 15px;
  }
  .categories .cat_dsc {
    -webkit-line-clamp: 4;
    font-size: 12px;
  }
  .categories .cat_count {
    left: 14px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------- login / register */
/* login, register, forgot and reset share AuthPanel: a bootstrap .panel in a .row */
.row:has(> .panel-register) {
  margin: 0;
  padding: 0 16px;
}
.panel-register {
  max-width: 420px;
  margin: 48px auto 64px;
  border: 1px solid var(--hh-line);
  border-radius: 16px;
  background: var(--hh-surface);
  color: var(--hh-muted);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.panel-register .panel-body {
  padding: 28px 28px 24px;
}
.panel-register h2 {
  margin: 0 0 6px;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
}
.panel-register .form-group {
  margin-bottom: 12px;
}
.panel-register .panel-body .form-control {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hh-line);
  border-radius: 10px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.panel-register .panel-body .form-control::placeholder {
  color: var(--hh-muted);
}
.panel-register .panel-body .form-control:focus {
  outline: 0;
  border-color: var(--hh-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-accent) 22%, transparent);
}
.panel-register input[type="submit"],
.panel-register input[type="submit"]:focus,
.panel-register input[type="submit"]:active {
  height: 44px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.panel-register input[type="submit"]:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
}
.panel-register p {
  margin: 10px 0 0;
  color: var(--hh-muted);
  font-size: 14px;
}
.panel-register a {
  color: var(--hh-accent);
  font-weight: 500;
}
.panel-register a:hover {
  color: var(--hh-text);
  text-decoration: none;
}
.panel-register hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--hh-line);
}
.panel-register .alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}
.panel-register .alert-danger {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
}
.panel-register .alert-success {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}
.panel-register .alert a {
  color: inherit;
  text-decoration: underline;
}
.panel-register .g-recaptcha {
  display: flex;
  justify-content: center;
}
.panel-register .resend_btn {
  color: var(--hh-accent);
}
@media (max-width: 767.98px) {
  .row:has(> .panel-register) {
    padding: 0 12px;
  }
  .panel-register {
    margin: 20px auto 40px;
  }
  .panel-register .panel-body {
    padding: 22px 18px 20px;
  }
}

.panel-register label {
  color: var(--hh-text);
  font-size: 13px;
  font-weight: 500;
}
.panel-register input[type="submit"]:disabled,
.recovery-settings button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.recovery-key {
  display: block;
  margin: 20px 0;
  padding: 16px;
  border: 1px dashed var(--hh-accent);
  border-radius: 10px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  user-select: all;
}
.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recovery-actions .btn,
.recovery-settings .btn {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  white-space: normal;
}
.recovery-actions .btn-info,
.recovery-settings .btn-info {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  border-color: transparent;
}
.recovery-actions .btn-default {
  background: var(--hh-surface-2);
  color: var(--hh-text);
  border-color: var(--hh-line);
}
.recovery-actions .btn:focus-visible,
.recovery-settings .btn:focus-visible {
  outline: 2px solid var(--hh-accent);
  outline-offset: 3px;
}
.recovery-settings {
  max-width: 560px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hh-line);
}
.recovery-settings h2 {
  color: var(--hh-text);
  font-size: 24px;
}
.recovery-settings p {
  color: var(--hh-muted);
  line-height: 1.6;
}
.recovery-settings form {
  margin-top: 16px;
}

/* ------------------------------------------------------------- profile */
.container.profile_tabs {
  width: auto;
  max-width: 1520px;
  margin: 28px auto 56px;
  padding: 0 16px;
}
.profile_tabs .nav-tabs > li > a i {
  margin-right: 8px;
  color: var(--hh-muted);
}
.profile_tabs .nav-tabs > li.active > a i {
  color: var(--hh-accent);
}
.profile_tabs .profile_tab_count {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.profile_tabs .nav-tabs > li.active > a .profile_tab_count {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
/* account settings: a section under the lists, not a tab. The forms' .row and the recovery
   section are laid out as one grid of cards (the .row contributes its children) */
.profile_tabs .profile_settings,
.profile_tabs .tab-pane.active.profile_settings {
  display: grid !important; /* outranks legacy-extras' block !important on .tab-pane.active */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hh-line);
}
.profile_tabs .profile_settings .profile_pane_head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
@media (max-width: 1100px) and (min-width: 768px) {
  .profile_tabs .profile_settings,
  .profile_tabs .tab-pane.active.profile_settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.profile_tabs .profile_settings .row {
  display: contents;
}
.profile_tabs .profile_settings .row::before,
.profile_tabs .profile_settings .row::after {
  display: none;
}
.profile_tabs .profile_settings .col-sm-6,
.profile_tabs .profile_settings .recovery-settings {
  position: relative;
  float: none;
  width: auto;
  padding: 20px 20px 20px 72px;
  border: 1px solid var(--hh-line);
  border-radius: 14px;
  background: var(--hh-surface);
}
.profile_tabs .profile_card_icon,
.profile_tabs .profile_settings .recovery-settings::before {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hh-accent) 16%, transparent);
  color: var(--hh-accent);
  font-size: 15px;
}
.profile_tabs .profile_settings .recovery-settings::before {
  content: "\f084"; /* fa-key */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.profile_tabs .profile_settings h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 38px;
}
.profile_tabs .profile_settings .profile_card_text,
.profile_tabs .profile_settings .recovery-settings > p {
  margin: 0 0 14px;
  color: var(--hh-muted);
  font-size: 13px;
  line-height: 1.5;
}
.profile_tabs .profile_settings .form-control + .form-control {
  margin-top: 8px;
}
.profile_tabs .profile_settings label {
  display: block;
  margin-bottom: 6px;
  color: var(--hh-muted);
  font-size: 12px;
  font-weight: 500;
}
.profile_tabs .profile_card_actions,
.profile_tabs .profile_settings .recovery-settings form > .btn {
  margin-top: 12px;
}
.profile_tabs .profile_card_actions {
  display: flex;
  justify-content: flex-end;
}
.profile_tabs .profile_settings .alert {
  margin: 0 0 12px;
}
.profile_tabs .profile_settings .profile_pane_head h3 {
  font-size: 20px;
}
.profile_tabs .profile_settings .profile_pane_head h3 i {
  margin-right: 8px;
  color: var(--hh-accent);
}
.profile_tabs .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  border-bottom: 1px solid var(--hh-line);
}
.profile_tabs .nav-tabs > li {
  float: none;
  margin-bottom: -1px;
}
.profile_tabs .nav-tabs > li > a {
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--hh-muted);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: color 0.15s ease;
}
.profile_tabs .nav-tabs > li > a:hover,
.profile_tabs .nav-tabs > li > a:focus {
  border-color: transparent;
  background: transparent;
  color: var(--hh-text);
}
.profile_tabs .nav-tabs > li.active > a,
.profile_tabs .nav-tabs > li.active > a:focus,
.profile_tabs .nav-tabs > li.active > a:hover {
  border: 0;
  border-bottom: 2px solid var(--hh-accent);
  background: transparent;
  color: var(--hh-text);
  font-weight: 600;
}
.profile_tabs .tab-content {
  padding: 20px 0 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* the Overview, Favorites and Votes panes sit in one card; the Account tab brings its own two */
.profile_tabs .tab-pane:not(#account) {
  padding: 20px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
}
.profile_tabs .tab-pane:not(#account).active {
  display: block !important;
}
.profile_tabs h2 {
  margin: 0 0 12px;
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile_tabs h3 {
  margin: 0 0 12px;
  color: var(--hh-text);
  font-size: 17px;
  font-weight: 600;
}
.profile_tabs p {
  margin: 0 0 8px;
  color: var(--hh-muted);
  font-size: 15px;
}
.profile_tabs .btn,
.profile_tabs .btn:focus {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 38px;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.profile_tabs .btn:hover {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
}
.profile_tabs .btn-info,
.profile_tabs .btn-info:focus {
  border-color: transparent;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.profile_tabs .btn-info:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
}
/* the Account tab: the two forms side by side as cards */
.profile_tabs .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.profile_tabs .row::before,
.profile_tabs .row::after {
  display: none;
}
.profile_tabs .col-sm-6 {
  float: none;
  width: auto;
  padding: 20px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface);
}
.profile_tabs .tab-content .form-control,
.profile_tabs .profile_settings .form-control {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hh-line);
  border-radius: 10px;
  background: var(--hh-surface-2);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.profile_tabs .tab-content .form-control,
.profile_tabs .profile_settings .form-control::placeholder {
  color: var(--hh-muted);
}
.profile_tabs .tab-content .form-control,
.profile_tabs .profile_settings .form-control:focus {
  outline: 0;
  border-color: var(--hh-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-accent) 22%, transparent);
}
.profile_tabs .alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.profile_tabs .alert-danger {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
}
.profile_tabs .alert-success {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}
/* favourites use the standard poster cards; votes are a ruled list */
/* favourites: a six-up grid of the standard cards at the full page width */
.profile_tabs .sub_overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 16px;
  margin: 4px 0 0;
}
.profile_tabs .sub_overview::before,
.profile_tabs .sub_overview::after {
  display: none;
}
.profile_tabs .sub_overview .video_cover img,
.profile_tabs .sub_overview .video_title {
  width: 100%;
}
.profile_tabs .list-unstyled {
  margin: 0;
}
.profile_tabs .list-unstyled li {
  margin: 0 !important;
  padding: 10px 0;
  border-bottom: 1px solid var(--hh-line);
  color: var(--hh-muted);
  font-size: 14px;
}
.profile_tabs .list-unstyled li a {
  color: var(--hh-text);
  font-weight: 500;
}
.profile_tabs .list-unstyled li a:hover {
  color: var(--hh-accent);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .container.profile_tabs {
    margin: 20px auto 40px;
    padding: 0 12px;
  }
  .profile_tabs .profile_settings,
  .profile_tabs .tab-pane.active.profile_settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .profile_tabs .profile_settings .col-sm-6,
  .profile_tabs .profile_settings .recovery-settings {
    padding: 16px 16px 16px 64px;
  }
  .profile_tabs .profile_card_icon,
  .profile_tabs .profile_settings .recovery-settings::before {
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
  }
  .profile_tabs .profile_settings h3 {
    line-height: 34px;
  }
}

/* profile: the bar above the tabs (avatar, name, meta, counters, actions), pane headings, empty
   states and the votes list */
.profile_tabs .profile_bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid var(--hh-line);
  border-radius: 14px;
  background: var(--hh-surface);
}
.profile_tabs .profile_avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffc266, var(--hh-accent));
  color: var(--hh-accent-ink);
  font-size: 22px;
  font-weight: 700;
}
.profile_tabs .profile_info {
  flex: 1 1 220px;
  min-width: 0;
}
.profile_tabs .profile_info h1 {
  margin: 0 0 4px;
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.profile_tabs .profile_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--hh-muted);
  font-size: 12px;
}
.profile_tabs .profile_meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.profile_tabs .profile_meta i {
  color: var(--hh-muted);
  opacity: 0.7;
}
.profile_tabs .profile_stats {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.profile_tabs .profile_stats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--hh-muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.profile_tabs .profile_stats a:hover {
  background: var(--hh-surface-2);
  color: var(--hh-text);
}
.profile_tabs .profile_stats strong {
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.profile_tabs .profile_actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.profile_tabs .profile_actions .btn i {
  margin-right: 6px;
  color: var(--hh-muted);
}
@media (max-width: 767.98px) {
  .profile_tabs .profile_bar {
    padding: 14px;
  }
  .profile_tabs .profile_stats {
    order: 3;
    width: 100%;
    justify-content: space-around;
  }
  .profile_tabs .profile_actions {
    order: 4;
    width: 100%;
  }
  .profile_tabs .profile_actions .btn {
    flex: 1 1 0;
    text-align: center;
  }
}
.profile_tabs .profile_pane_head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.profile_tabs .profile_pane_head h3 {
  margin: 0;
}
.profile_tabs .profile_count {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-muted);
  font-size: 12px;
  font-weight: 500;
}
.profile_tabs .profile_empty {
  padding: 32px 16px;
  border: 1px dashed var(--hh-line);
  border-radius: 12px;
  text-align: center;
}
.profile_tabs .profile_empty p {
  margin: 0;
}
.profile_tabs .profile_empty_cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-top: 14px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.profile_tabs .profile_empty_cta:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
}
/* favourites: a remove button on each cover, shown on hover (always on touch screens) */
.profile_tabs .profile_fav {
  position: relative;
}
.profile_tabs .profile_fav_link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.profile_tabs .profile_fav_remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--hh-text);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.profile_tabs .profile_fav:hover .profile_fav_remove,
.profile_tabs .profile_fav:focus-within .profile_fav_remove,
.profile_tabs .profile_fav_remove:focus-visible {
  opacity: 1;
}
.profile_tabs .profile_fav_remove:hover {
  background: #dc2626;
  color: #fff;
}
@media (hover: none) {
  .profile_tabs .profile_fav_remove {
    opacity: 1;
  }
}

/* votes: the same poster cards with a Liked / Disliked badge on the cover */
.profile_tabs .profile_vote {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.profile_tabs .profile_vote_like {
  background: #16a34a;
}
.profile_tabs .profile_vote_dislike {
  background: #dc2626;
}
.profile_tabs .list-unstyled li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile_tabs .list-unstyled li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile_tabs .sub_overview .a_item {
  width: auto;
  margin: 0;
}
@media (max-width: 767.98px) {
  .profile_tabs .sub_overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .profile_tabs .sub_overview .a_item {
    width: auto;
    margin: 0;
  }
}

/* ------------------------------------------------------------ genre rail */
/* every genre as a chip under the header, busiest first, scrolling sideways with faded ends */
.genre_rail {
  position: relative;
  border-bottom: 1px solid var(--hh-line);
  background: var(--hh-bg);
}
.genre_rail_inner {
  display: flex;
  gap: 8px;
  max-width: 1552px;
  margin: 0 auto;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 16px,
    #000 calc(100% - 24px),
    transparent
  );
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
.genre_rail_inner::-webkit-scrollbar {
  display: none;
}
.genre_rail_inner,
.genre_rail_inner .genre_chip {
  cursor: grab;
  user-select: none;
}
.genre_rail_inner[data-dragging],
.genre_rail_inner[data-dragging] .genre_chip {
  cursor: grabbing;
}
.genre_chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface);
  color: var(--hh-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.genre_chip:hover {
  border-color: var(--hh-accent);
  color: var(--hh-text);
  text-decoration: none;
}
.genre_chip[aria-current="page"] {
  border-color: transparent;
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.genre_chip_all {
  color: var(--hh-text);
  font-weight: 600;
}

/* ------------------------------------------------------------ card badges */
.card_badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.card_badge {
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hh-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.card_badge_new {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}

/* ------------------------------------------------------ search suggestions */
.suggest {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.suggest_list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  min-width: 320px;
  padding: 6px;
  border: 1px solid var(--hh-line);
  border-radius: 12px;
  background: var(--hh-surface-2);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
.suggest_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--hh-text);
  text-decoration: none;
}
.suggest_item.is-active,
.suggest_item:hover {
  background: var(--hh-surface);
  color: var(--hh-text);
  text-decoration: none;
}
.suggest_thumb {
  flex: 0 0 auto;
  width: 32px;
  height: 47px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--hh-surface);
}
.suggest_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suggest_kind {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--hh-surface);
  color: var(--hh-accent);
  font-size: 13px;
}
.suggest_text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.suggest_label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest_detail {
  color: var(--hh-muted);
  font-size: 12px;
}
.suggest_item_divider {
  margin-top: 4px;
  border-top: 1px solid var(--hh-line);
  border-radius: 0 0 8px 8px;
  padding-top: 10px;
}
.suggest_item_genre .suggest_label {
  text-transform: capitalize;
}
.suggest_note {
  padding: 8px;
  color: var(--hh-muted);
  font-size: 13px;
}
.suggest_all {
  display: block;
  margin-top: 4px;
  padding: 8px;
  border-top: 1px solid var(--hh-line);
  color: var(--hh-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.suggest_all:hover {
  color: var(--hh-text);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .suggest_list {
    position: fixed;
    top: 64px;
    left: 8px;
    right: 8px;
    min-width: 0;
  }
}

/* --------------------------------------------------------- phone tab bar */
.tab_bar {
  display: none;
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  .tab_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--hh-line);
    background: color-mix(in srgb, var(--hh-nav-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .tab_bar_item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 0 8px;
    color: var(--hh-nav-ink-soft);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
  }
  .tab_bar_item i {
    font-size: 17px;
  }
  .tab_bar_item:hover {
    color: var(--hh-nav-ink);
    text-decoration: none;
  }
  .tab_bar_item[aria-current="page"] {
    color: var(--hh-accent);
  }
  .scroll_top {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------ filter bar */
.filter_bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1520px;
  margin: 14px auto 0;
  padding: 0 8px;
}
.filter_bar_label {
  margin-right: 4px;
  color: var(--hh-muted);
  font-size: 13px;
  font-weight: 500;
}
.filter_bar_label i {
  margin-right: 6px;
  color: var(--hh-accent);
}
/* the pickers (FacetPicker.tsx, after ihentai): a pill that opens a floating, searchable list.
   The native <select>s below only render inside <noscript>. */
.picker {
  position: relative;
}
.picker_trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 12px 0 14px;
  border: 1px solid var(--hh-line);
  border-radius: 999px;
  background: var(--hh-surface);
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.picker_trigger > span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker_trigger > .fa {
  font-size: 10px;
  color: var(--hh-muted);
  transition: transform 0.2s ease;
}
.picker_trigger:hover {
  border-color: var(--hh-accent);
  color: var(--hh-text);
}
.picker_trigger:focus-visible {
  outline: 0;
  border-color: var(--hh-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-accent) 22%, transparent);
}
.picker_trigger[aria-expanded="true"] {
  border-color: var(--hh-accent);
  background: var(--hh-surface-2);
}
.picker_trigger[aria-expanded="true"] > .fa {
  transform: rotate(180deg);
}
/* a chosen facet: the pill turns accent, like the active page chip */
.picker.active .picker_trigger {
  border-color: var(--hh-accent);
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.picker.active .picker_trigger > .fa {
  color: var(--hh-accent-ink);
}
.picker_panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(280px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: var(--hh-surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  animation: picker-in 0.14s ease;
}
.picker_panel.right {
  left: auto;
  right: 0;
}
@keyframes picker-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.picker_search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0 0 4px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--hh-bg);
  color: var(--hh-muted);
  font-weight: 400;
}
.picker_search > .fa {
  font-size: 12px;
}
.picker_search:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hh-accent) 40%, transparent);
}
.picker_search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
  color: var(--hh-text);
  font-family: var(--hh-font);
  font-size: 13px;
}
.picker_search input::placeholder {
  color: var(--hh-muted);
}
.picker_list {
  list-style: none;
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
  outline: none;
}
.picker_option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--hh-text);
  font-size: 13px;
  cursor: pointer;
}
.picker_option > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker_option small {
  color: var(--hh-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.picker_option > .fa {
  font-size: 11px;
  color: var(--hh-accent);
}
.picker_option.highlight {
  background: var(--hh-surface-2);
}
.picker_option[aria-selected="true"] {
  font-weight: 600;
}
.picker_option.any {
  color: var(--hh-muted);
}
.picker_empty {
  padding: 12px;
  color: var(--hh-muted);
  font-size: 13px;
  text-align: center;
}
.filter_clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--hh-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.filter_clear > .fa {
  font-size: 11px;
}
.filter_clear:hover,
.filter_clear:focus {
  background: var(--hh-surface);
  color: var(--hh-text);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .filter_bar {
    gap: 6px;
    padding: 0 12px;
  }
  .filter_bar_label {
    display: none;
  }
  .picker_trigger {
    padding: 0 10px 0 12px;
    font-size: 12px;
  }
  .picker_trigger > span {
    max-width: 120px;
  }
}

/* ------------------------------------------------------------ card save */
.card_save {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--hh-text);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.a_item:hover .card_save,
.card_save:focus-visible,
.card_save.is-saved {
  opacity: 1;
}
.card_save:hover {
  background: var(--hh-text);
  color: var(--hh-bg);
}
.card_save.is-saved {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.card_save:disabled {
  cursor: default;
  opacity: 0.6;
}
@media (hover: none) {
  .card_save {
    opacity: 1;
  }
}

/* ------------------------------------------------------ series title page */
.series_hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hh-line);
  background: var(--hh-surface);
}
.series_hero_bg {
  position: absolute;
  inset: -40px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(1.1);
  opacity: 0.35;
}
.series_hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.2), var(--hh-bg));
}
.series_hero_inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px 16px 28px;
}
.series_hero_poster {
  flex: 0 0 200px;
}
.series_hero_poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
.series_hero_body {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}
.series_hero .h1_series {
  margin: 0 0 10px;
  padding: 0;
  font-size: 32px;
}
.series_hero_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--hh-muted);
  font-size: 14px;
}
.series_hero_meta a {
  color: var(--hh-text);
  font-weight: 500;
  text-decoration: none;
}
.series_hero_meta a:hover {
  color: var(--hh-accent);
}
.series_hero_meta i {
  margin-right: 5px;
  opacity: 0.7;
}
.series_hero_genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.series_hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.series_hero_play,
.series_hero_latest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.series_hero_play {
  background: var(--hh-accent);
  color: var(--hh-accent-ink);
}
.series_hero_play:hover {
  background: color-mix(in srgb, var(--hh-accent) 85%, #fff);
  color: var(--hh-accent-ink);
  text-decoration: none;
}
.series_hero_latest {
  border: 1px solid var(--hh-line);
  background: rgba(10, 10, 10, 0.4);
  color: var(--hh-text);
}
.series_hero_latest:hover {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
  text-decoration: none;
}
.series_hero_desc {
  max-width: 72ch;
  margin: 18px 0 0;
  color: var(--hh-muted);
  font-size: 15px;
  line-height: 1.65;
}
.section_title {
  margin: 0;
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.series .top_overview,
.series_related .top_overview {
  max-width: 1520px;
  padding: 0 16px;
}
.series_related {
  margin-top: 16px;
}
@media (max-width: 767.98px) {
  .series_hero_inner {
    gap: 16px;
    padding: 20px 12px 20px;
  }
  .series_hero_poster {
    flex-basis: 110px;
  }
  .series_hero .h1_series {
    font-size: 22px;
  }
  .series_hero_meta {
    font-size: 13px;
  }
  .series_hero_desc {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------- browse */
.browse {
  max-width: 1520px;
  margin: 0 auto 48px;
  padding: 0 16px;
}
.browse .h1_tags {
  padding: 0;
}
.browse_section {
  margin-top: 32px;
}
.browse_head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.browse_head h2 {
  margin: 0;
  color: var(--hh-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.browse_head a {
  color: var(--hh-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.browse_head a:hover {
  color: var(--hh-text);
}
.browse_count {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hh-surface-2);
  color: var(--hh-muted);
  font-size: 12px;
  font-weight: 500;
}
.browse .categories {
  padding: 0;
}
.browse_studios {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 4;
  column-gap: 24px;
}
.browse_studios li {
  break-inside: avoid;
}
.browse_studios a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--hh-text);
  font-size: 14px;
  text-decoration: none;
}
.browse_studios a:hover {
  background: var(--hh-surface);
  color: var(--hh-accent);
}
.browse_studio_count {
  color: var(--hh-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.browse_years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.browse_year {
  padding: 8px 14px;
  border: 1px solid var(--hh-line);
  border-radius: 8px;
  background: var(--hh-surface);
  color: var(--hh-text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.browse_year:hover {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
}
@media (max-width: 1100px) {
  .browse_studios {
    column-count: 3;
  }
}
@media (max-width: 767.98px) {
  .browse {
    padding: 0 12px;
  }
  .browse_studios {
    column-count: 2;
    column-gap: 12px;
  }
}

/* ---------------------------------------------------- footer genre column */
footer.footer .footer_genres {
  flex: 1 1 260px;
  max-width: 420px;
}
footer.footer .footer_genres h3 {
  margin: 0 0 8px;
  color: var(--hh-text);
  font-size: 13px;
  font-weight: 600;
}
footer.footer .footer_genres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
footer.footer .footer_genres a {
  color: var(--hh-muted);
  font-size: 13px;
  text-decoration: none;
  text-transform: capitalize;
}
footer.footer .footer_genres a:hover {
  color: var(--hh-text);
}
header.navbar .nav_icon {
  margin-right: 6px;
  font-size: 12px;
  color: var(--hh-accent);
}

/* ------------------------------------------------------- scroll to top */
/* shown by ScrollTop.tsx through a class on <html> once the page is scrolled */
.scroll_top {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--hh-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
html.hh-scrolled .scroll_top {
  display: block;
}
.scroll_top:hover {
  transform: translateY(-2px);
}
.scroll_top i {
  width: auto;
  line-height: 48px;
  font-size: 16px;
  color: var(--hh-accent-ink);
}

/* ------------------------------------------------------------------ footer */
footer.footer {
  position: static;
  height: auto;
  margin-top: 40px;
  border-top: 1px solid var(--hh-line);
  background: var(--hh-surface);
  color: var(--hh-muted);
  font-family: var(--hh-font);
}
footer.footer .wrap {
  width: auto;
  max-width: 1520px;
  padding: 0 16px;
}
/* brand line left, site links right */
footer.footer .top_footer {
  padding: 32px 0 24px;
  background: transparent;
}
footer.footer .top_footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
}
footer.footer .footer_name {
  display: inline-block;
  color: var(--hh-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
footer.footer .footer_name:hover {
  color: var(--hh-accent);
}
footer.footer .footer_tagline {
  margin: 4px 0 0;
  color: var(--hh-muted);
  font-size: 14px;
}
footer.footer .footer_meta {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  font-size: 12px;
  line-height: 1.45;
}
footer.footer .footer_age {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--hh-line);
  border-radius: 6px;
  color: var(--hh-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* partner links, then the age notice */
footer.footer .bottom_footer {
  padding: 20px 0 28px;
  background: transparent;
  color: var(--hh-muted);
  text-align: left;
}
footer.footer .bottom_footer .wrap > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 20px;
  padding: 20px 0 0;
  border-top: 1px solid var(--hh-line);
}
footer.footer .bottom_footer .wrap > ul + ul {
  padding: 0;
  border: 0;
}
footer.footer .bottom_footer ul li {
  margin: 0;
}
/* the legacy phone-only toggle for an "offsite" list that is always empty */
footer.footer #offsite_link {
  display: none !important;
}
footer.footer .bottom_footer a {
  color: var(--hh-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s ease;
}
footer.footer .bottom_footer a:hover {
  color: var(--hh-text);
}
@media (max-width: 767.98px) {
  footer.footer .top_footer {
    padding: 24px 0 18px;
  }
  footer.footer .bottom_footer .wrap > ul {
    gap: 6px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header.navbar .navbar_left .navbar_links ul li a.nav_ai {
    animation: none;
  }
  header.navbar .navbar_left .navbar_links ul li a.nav_ai:hover::before,
  header.navbar .navbar_left .navbar_links ul li a.nav_ai:hover .nav_ai_spark {
    transform: none;
  }
  header.navbar *,
  .sub_overview .video_cover,
  .sub_overview .video_cover::before,
  .sub_overview .video_cover::after,
  .sub_overview .video_cover img,
  .pagination > li > a,
  .main_section .tags_list a {
    transition: none !important;
  }
  .sub_overview .a_item:hover .video_cover,
  .sub_overview .a_item:hover .video_cover img {
    transform: none;
  }
}

/* Catalog navigation stays compact and wraps long titles on small screens. */
.catalog_breadcrumbs {
  max-width: 1520px;
  margin: 16px auto 8px;
  padding: 0 16px;
  color: var(--hh-muted);
  font-size: 12px;
  line-height: 1.6;
}
.catalog_breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.catalog_breadcrumbs li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.catalog_breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--hh-muted);
}
.catalog_breadcrumbs a {
  color: var(--hh-text);
}
.catalog_breadcrumbs a:hover,
.catalog_breadcrumbs a:focus-visible {
  color: var(--hh-accent);
  text-decoration: underline;
}

/* tablet and small laptop widths: the desktop header carries six links, the AI pill, search and
   the account buttons, which overflow below ~1180px. Search and Browse are covered there by the
   search field and the genre rail, Random keeps only its icon, and the AI pill drops its tag. */
@media (min-width: 768px) and (max-width: 1180px) {
  header.navbar {
    gap: 10px;
    padding: 0 12px;
  }
  header.navbar .navbar_left .navbar_logo {
    margin-right: 4px;
  }
  header.navbar .navbar_left .navbar_links ul li:has(> a[href$="/search/"]),
  header.navbar .navbar_left .navbar_links ul li:has(> a[href$="/browse/"]) {
    display: none;
  }
  header.navbar .navbar_left .navbar_links ul li a {
    padding: 0 8px;
  }
  header.navbar .navbar_left .navbar_links ul li a[href$="/random/"] {
    font-size: 0;
  }
  header.navbar .navbar_left .navbar_links ul li a[href$="/random/"] .nav_icon {
    margin: 0;
    font-size: 14px;
  }
  header.navbar .navbar_left .navbar_links ul li a.nav_ai .nav_ai_tag {
    display: none;
  }
  header.navbar .navbar_left .navbar_search {
    flex: 1 1 120px;
    min-width: 110px;
  }
  header.navbar .navbar_right ul li a {
    padding: 0 8px;
  }
}
/* the account items inside the link row are for the phone drawer only; the legacy responsive
   sheet still shows them between 768px and 772px */
@media (min-width: 768px) {
  header.navbar .navbar_left .navbar_links .mob_li {
    display: none;
  }
}