/*
 * Separate stylesheet, enqueued by the widget's get_style_depends() and
 * by jws_style_bundles() in functions.php.
 */
/*
 * Genres — the /genres/ index (page-genres.php) and a single genre
 * (taxonomy-genres.php). Markup: template-parts/content/genres/.
 *
 * Only theme tokens here (--main, --heading, --body, --background-item…).
 * A genre's own colors arrive from its term meta as --genre-color and
 * --genre-color2 on the element's style attribute (see jws_genre_look()),
 * and .is-light when dark text reads better on them. Every rule below goes
 * through the --genre-* aliases, which fall back to the theme when a genre
 * has no colors.
 *
 * Selectors are nested under the page roots so they outrank the Elementor
 * kit's global `a` and `button` styles.
 */
/* Aliases: a genre's colors, or the theme's. */
.jws-genre-page,
.genre-tile {
  --genre-surface:var(--genre-color, var(--background-item));
  --genre-fill:var(--genre-color, var(--main));
  --genre-accent:var(--genre-color2, var(--main));
  --genre-ink:var(--light);
}
.jws-genre-page.is-light,
.genre-tile.is-light {
  --genre-ink:var(--background-body);
}
/* A tile without colors of its own must not inherit the page's. */
.genre-tile.no-genre-color {
  --genre-color:initial;
  --genre-color2:initial;
}
.genre-sr {
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
body.genre-sheet-lock {
  overflow:hidden;
}
/* --------------------------------------------------------------------------
 * Shared by both pages: breadcrumb, genre tiles, tile grid
 * ----------------------------------------------------------------------- */
.jws-genres-index,
.jws-genre-page {
  /* The theme's breadcrumb (ul.jws-breadcrumbs); only its size is set here. */
  /* On a genre's title bar the links follow its text color, which is dark on a light genre. */
  /* Featured: bigger, banner on the right fading into the genre color. */
}
.jws-genres-index .jws-breadcrumbs,
.jws-genre-page .jws-breadcrumbs {
  font-size:14px;
}
.jws-genres-index .genre-hero .jws-breadcrumbs a,
.jws-genre-page .genre-hero .jws-breadcrumbs a {
  color:var(--genre-ink);
}
.jws-genres-index .genres-grid,
.jws-genre-page .genres-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:24px;
}
.jws-genres-index .genre-tile,
.jws-genre-page .genre-tile {
  position:relative;
  display:block;
  height:140px;
  overflow:hidden;
  isolation:isolate;
  border-radius:12px;
  color:var(--genre-ink);
  background:var(--genre-surface);
  transition:transform 0.25s ease;
}
.jws-genres-index .genre-tile:hover,
.jws-genre-page .genre-tile:hover {
  color:var(--genre-ink);
  transform:translateY(-3px);
}
.jws-genres-index .genre-tile:focus-visible,
.jws-genre-page .genre-tile:focus-visible {
  outline:2px solid var(--heading);
  outline-offset:3px;
}
.jws-genres-index .genre-tile.no-genre-color,
.jws-genre-page .genre-tile.no-genre-color {
  box-shadow:inset 0 0 0 1px var(--border-color);
}
.jws-genres-index .genre-tile__disc,
.jws-genre-page .genre-tile__disc {
  position:absolute;
  z-index:0;
  right:-28px;
  bottom:-52px;
  width:132px;
  height:132px;
  border-radius:50%;
  background:var(--genre-accent);
}
.jws-genres-index .genre-tile__posters,
.jws-genre-page .genre-tile__posters {
  position:absolute;
  z-index:1;
  inset:0;
}
.jws-genres-index .genre-tile__poster,
.jws-genre-page .genre-tile__poster {
  position:absolute;
  width:60px;
  height:86px;
  overflow:hidden;
  border-radius:6px;
  box-shadow:0 10px 24px color-mix(in srgb, var(--dark) 45%, transparent);
  transition:transform 0.3s ease;
}
.jws-genres-index .genre-tile__poster img,
.jws-genre-page .genre-tile__poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.jws-genres-index .genre-tile__poster:nth-child(1),
.jws-genre-page .genre-tile__poster:nth-child(1) {
  right:62px;
  bottom:-22px;
  transform:rotate(-9deg);
}
.jws-genres-index .genre-tile__poster:nth-child(2),
.jws-genre-page .genre-tile__poster:nth-child(2) {
  right:14px;
  bottom:-10px;
  transform:rotate(8deg);
}
.jws-genres-index .genre-tile:hover .genre-tile__poster:nth-child(1),
.jws-genre-page .genre-tile:hover .genre-tile__poster:nth-child(1) {
  transform:rotate(-12deg) translateY(-6px);
}
.jws-genres-index .genre-tile:hover .genre-tile__poster:nth-child(2),
.jws-genre-page .genre-tile:hover .genre-tile__poster:nth-child(2) {
  transform:rotate(11deg) translateY(-6px);
}
.jws-genres-index .genre-tile__body,
.jws-genre-page .genre-tile__body {
  position:absolute;
  z-index:2;
  top:14px;
  inset-inline:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.jws-genres-index .genre-tile__name,
.jws-genre-page .genre-tile__name {
  font-family:var(--font2);
  font-size:20px;
  font-weight:700;
  line-height:1.15;
}
.jws-genres-index .genre-tile__count,
.jws-genre-page .genre-tile__count {
  font-size:13px;
  font-weight:500;
}
.jws-genres-index .genre-tile--featured,
.jws-genre-page .genre-tile--featured {
  height:250px;
  border-radius:14px;
  /* Keeps the name readable over the picture, in the genre's own color. */
}
.jws-genres-index .genre-tile--featured .genre-tile__art,
.jws-genre-page .genre-tile--featured .genre-tile__art {
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  width:78%;
  height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, var(--dark) 55%);
  mask-image:linear-gradient(90deg, transparent 0%, var(--dark) 55%);
}
.jws-genres-index .genre-tile--featured.has-art::after,
.jws-genre-page .genre-tile--featured.has-art::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(0deg, color-mix(in srgb, var(--genre-surface) 85%, transparent) 0%, transparent 60%);
}
.jws-genres-index .genre-tile--featured .genre-tile__disc,
.jws-genre-page .genre-tile--featured .genre-tile__disc {
  right:-40px;
  bottom:-90px;
  width:220px;
  height:220px;
}
.jws-genres-index .genre-tile--featured .genre-tile__poster,
.jws-genre-page .genre-tile--featured .genre-tile__poster {
  width:96px;
  height:138px;
  border-radius:8px;
}
.jws-genres-index .genre-tile--featured .genre-tile__poster:nth-child(1),
.jws-genre-page .genre-tile--featured .genre-tile__poster:nth-child(1) {
  right:104px;
  bottom:-30px;
}
.jws-genres-index .genre-tile--featured .genre-tile__poster:nth-child(2),
.jws-genre-page .genre-tile--featured .genre-tile__poster:nth-child(2) {
  right:24px;
  bottom:-14px;
}
.jws-genres-index .genre-tile--featured .genre-tile__body,
.jws-genre-page .genre-tile--featured .genre-tile__body {
  top:auto;
  bottom:22px;
  inset-inline:24px;
  gap:6px;
}
.jws-genres-index .genre-tile--featured .genre-tile__name,
.jws-genre-page .genre-tile--featured .genre-tile__name {
  font-size:36px;
  line-height:1.1;
}
.jws-genres-index .genre-tile--featured .genre-tile__count,
.jws-genre-page .genre-tile--featured .genre-tile__count {
  font-size:14px;
}
/* --------------------------------------------------------------------------
 * /genres/ index
 * ----------------------------------------------------------------------- */
.jws-genres-index {
  padding:40px 0 80px;
}
.jws-genres-index .genres-index__head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:48px;
}
.jws-genres-index .genres-index__intro {
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--body);
}
.jws-genres-index .genres-index__title {
  margin:0;
  font-size:52px;
  line-height:1.1;
  letter-spacing:-0.5px;
}
.jws-genres-index .genres-index__lead {
  margin:0;
  font-size:16px;
  color:var(--body);
}
.jws-genres-index .genres-index__controls {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.jws-genres-index .genre-segment {
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:var(--background-item);
}
.jws-genres-index .genre-segment a {
  display:inline-flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 18px;
  border-radius:9px;
  font-size:14px;
  font-weight:700;
  color:var(--body);
  white-space:nowrap;
  transition:0.2s ease;
}
.jws-genres-index .genre-segment a:hover {
  color:var(--heading);
}
.jws-genres-index .genre-segment a[aria-current] {
  color:var(--btn-color);
  background:var(--btn-bgcolor3);
}
.jws-genres-index .genre-segment--sort a[aria-current] {
  color:var(--heading);
  background:var(--input-background2);
}
.jws-genres-index .genres-index__section {
  margin-bottom:56px;
}
.jws-genres-index .genres-index__section-head {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:20px;
}
.jws-genres-index .genres-index__section-head h2 {
  margin:0;
  font-size:24px;
}
.jws-genres-index .genres-index__section-head span {
  font-size:14px;
  color:var(--body2);
}
.jws-genres-index .genres-featured {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.jws-genres-index .genres-index__empty {
  margin:0;
  color:var(--body);
}
/* --------------------------------------------------------------------------
 * A single genre
 * ----------------------------------------------------------------------- */
.jws-genre-page {
  padding-bottom:80px;
  /* Title bar */
  /* No picture: the genre's posters fanned out over the disc. */
  /* Back button and breadcrumb on one line. */
  /* Filter bar */
  /* Relative + z-index so the dropdowns and the mobile sheet sit above the grid. */
  /* On desktop the sheet is just the row of dropdowns. */
  /* Dropdowns */
  /* Active filters */
  /* Grid */
  /*
     * Items are the theme's Layout 8 cards (.jws-post-item); the grid owns the
     * spacing, so drop the padding and margin movies_advanced gives them.
     */
  /* Layout 8 keeps the genres on one line; clip it to the column, starting from the left once it no longer fits. */
}
.jws-genre-page .genre-hero {
  position:relative;
  display:flex;
  min-height:400px;
  margin:8px 0 32px;
  overflow:hidden;
  isolation:isolate;
  border-radius:20px;
  color:var(--genre-ink);
  background:var(--genre-surface);
}
.jws-genre-page.no-genre-color .genre-hero {
  box-shadow:inset 0 0 0 1px var(--border-color);
}
.jws-genre-page .genre-hero__disc {
  position:absolute;
  z-index:0;
  top:150px;
  left:41%;
  width:340px;
  height:340px;
  border-radius:50%;
  background:var(--genre-accent);
}
.jws-genre-page .genre-hero__art {
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:66%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, var(--dark) 42%);
  mask-image:linear-gradient(90deg, transparent 0%, var(--dark) 42%);
}
.jws-genre-page .genre-hero--fan .genre-hero__disc {
  top:40px;
  right:90px;
  left:auto;
  width:400px;
  height:400px;
}
.jws-genre-page .genre-hero--plain .genre-hero__disc {
  top:auto;
  right:-120px;
  bottom:-220px;
  left:auto;
  width:460px;
  height:460px;
}
.jws-genre-page .genre-hero__fan {
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  width:540px;
}
.jws-genre-page .genre-hero__poster {
  position:absolute;
  top:96px;
  width:180px;
  aspect-ratio:488 / 680;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 20px 40px color-mix(in srgb, var(--dark) 55%, transparent);
  /* Most watched in front, the next two either side of it. */
}
.jws-genre-page .genre-hero__poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.jws-genre-page .genre-hero__poster:nth-child(1) {
  z-index:1;
  top:64px;
  right:170px;
  width:200px;
}
.jws-genre-page .genre-hero__poster:nth-child(2) {
  right:330px;
  transform:rotate(-10deg);
}
.jws-genre-page .genre-hero__poster:nth-child(3) {
  right:30px;
  transform:rotate(10deg);
}
.jws-genre-page .genre-hero__content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  width:560px;
  max-width:100%;
  padding:36px 56px 40px;
  box-sizing:border-box;
}
.jws-genre-page .genre-hero__top {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}
.jws-genre-page .genre-hero__back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 16px 0 12px;
  border-radius:18px;
  font-size:14px;
  font-weight:700;
  color:var(--genre-ink);
  background:color-mix(in srgb, var(--genre-ink) 16%, transparent);
  transition:background 0.2s ease;
}
.jws-genre-page .genre-hero__back:hover {
  color:var(--genre-ink);
  background:color-mix(in srgb, var(--genre-ink) 26%, transparent);
}
.jws-genre-page .genre-hero__back:focus-visible {
  outline:2px solid var(--genre-ink);
  outline-offset:2px;
}
.jws-genre-page .genre-hero__heading {
  display:flex;
  flex-direction:column;
  gap:18px;
}
.jws-genre-page .genre-hero__title {
  margin:0;
  font-size:88px;
  line-height:0.95;
  letter-spacing:-2px;
  color:inherit;
}
.jws-genre-page .genre-hero__rule {
  display:block;
  width:64px;
  height:5px;
  border-radius:3px;
  background:var(--genre-accent);
}
.jws-genre-page.is-light .genre-hero__rule {
  background:var(--genre-ink);
}
.jws-genre-page .genre-hero__desc {
  max-width:430px;
  font-size:17px;
  font-weight:500;
  line-height:1.55;
}
.jws-genre-page .genre-hero__desc p {
  margin:0;
}
.jws-genre-page .genre-hero__stats {
  display:flex;
  flex-wrap:wrap;
  gap:12px 36px;
  margin:0;
}
.jws-genre-page .genre-hero__stat {
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
}
.jws-genre-page .genre-hero__stat dt {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.jws-genre-page .genre-hero__stat dd {
  margin:0;
  font-family:var(--font2);
  font-size:30px;
  font-weight:700;
  line-height:1.1;
}
.jws-genre-page .genre-browse {
  position:relative;
}
.jws-genre-page .genre-browse.is-loading .genre-grid {
  opacity:0.45;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.jws-genre-page .genre-browse .jws-pagination-number {
  margin-top:40px;
}
.jws-genre-page .genre-filters {
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-color);
}
.jws-genre-page .genre-filters.is-sheet-open {
  z-index:100000;
}
.jws-genre-page .genre-filters__bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.jws-genre-page .genre-types {
  display:flex;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.jws-genre-page .genre-type {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  margin:0;
  padding:0 8px 0 18px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  color:var(--heading);
  background:var(--background-item);
  white-space:nowrap;
  cursor:pointer;
  transition:background 0.2s ease;
}
.jws-genre-page .genre-type input {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.jws-genre-page .genre-type:hover {
  background:var(--input-background2);
}
.jws-genre-page .genre-type:has(input:focus-visible) {
  outline:2px solid var(--heading);
  outline-offset:2px;
}
.jws-genre-page .genre-type.is-active {
  color:var(--genre-ink);
  background:var(--genre-fill);
}
.jws-genre-page .genre-type.is-disabled {
  color:var(--border-color2);
  background:var(--background-item);
  cursor:not-allowed;
}
.jws-genre-page .genre-type__count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 6px;
  box-sizing:border-box;
  border-radius:7px;
  font-size:13px;
  color:var(--body);
  background:var(--input-background2);
}
.jws-genre-page .genre-type.is-active .genre-type__count {
  color:inherit;
  background:color-mix(in srgb, var(--genre-ink) 20%, transparent);
}
.jws-genre-page .genre-type.is-disabled .genre-type__count {
  color:var(--border-color2);
}
.jws-genre-page .genre-filters__tools {
  display:flex;
  align-items:center;
  gap:16px;
}
.jws-genre-page .genre-filters__result {
  font-size:14px;
  color:var(--body);
  white-space:nowrap;
}
.jws-genre-page .genre-filters__groups {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.jws-genre-page .genre-filters__label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-inline-end:4px;
  font-size:14px;
  font-weight:700;
  color:var(--heading);
}
.jws-genre-page .genre-filters__label svg {
  width:18px;
  height:18px;
}
.jws-genre-page .genre-sheet {
  display:contents;
}
.jws-genre-page .genre-sheet__body {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.jws-genre-page .genre-sheet__head,
.jws-genre-page .genre-sheet__foot,
.jws-genre-page .genre-sheet__backdrop,
.jws-genre-page .genre-filters__open {
  display:none;
}
.jws-genre-page .genre-dropdown {
  position:relative;
}
.jws-genre-page .genre-dropdown__toggle,
.jws-genre-page .genre-filters__open {
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 14px 0 16px;
  box-sizing:border-box;
  border:1px solid var(--background-item);
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  color:var(--heading);
  background:var(--background-item);
  white-space:nowrap;
  cursor:pointer;
  transition:background 0.2s ease,border-color 0.2s ease;
}
.jws-genre-page .genre-dropdown__toggle:hover,
.jws-genre-page .genre-filters__open:hover {
  border-color:var(--input-background2);
  background:var(--input-background2);
}
.jws-genre-page .genre-dropdown__toggle i,
.jws-genre-page .genre-filters__open i {
  font-size:12px;
  transition:transform 0.2s ease;
}
.jws-genre-page .genre-dropdown__toggle svg,
.jws-genre-page .genre-filters__open svg {
  width:16px;
  height:16px;
}
.jws-genre-page .genre-dropdown__toggle {
  display:inline-flex;
}
.jws-genre-page .genre-dropdown__toggle.has-value {
  border-color:var(--genre-fill);
}
.jws-genre-page .genre-dropdown.is-open>.genre-dropdown__toggle {
  background:var(--input-background2);
}
.jws-genre-page .genre-dropdown.is-open>.genre-dropdown__toggle i {
  transform:rotate(180deg);
}
.jws-genre-page .genre-dropdown__hint {
  font-weight:500;
  color:var(--body);
}
.jws-genre-page .genre-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  box-sizing:border-box;
  border-radius:11px;
  font-size:12px;
  font-weight:700;
  color:var(--genre-ink);
  background:var(--genre-fill);
}
.jws-genre-page .genre-dropdown__panel {
  position:absolute;
  z-index:40;
  top:calc(100% + 8px);
  left:0;
  display:none;
  flex-direction:column;
  gap:2px;
  width:300px;
  max-height:380px;
  margin:0;
  padding:6px;
  overflow-y:auto;
  box-sizing:border-box;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:var(--background-item);
  box-shadow:0 24px 48px color-mix(in srgb, var(--dark) 55%, transparent);
}
.jws-genre-page .genre-dropdown.is-open>.genre-dropdown__panel {
  display:flex;
}
.jws-genre-page .genre-dropdown--sort .genre-dropdown__panel {
  right:0;
  left:auto;
  width:220px;
}
.jws-genre-page .genre-dropdown__legend {
  display:none;
}
.jws-genre-page .genre-option {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  margin:0;
  padding:0 12px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  color:var(--heading);
  cursor:pointer;
}
.jws-genre-page .genre-option input {
  flex-shrink:0;
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--genre-fill);
}
.jws-genre-page .genre-option:hover {
  background:var(--input-background2);
}
.jws-genre-page .genre-option:has(input:checked) {
  background:color-mix(in srgb, var(--genre-fill) 16%, transparent);
}
.jws-genre-page .genre-option.is-disabled {
  color:var(--border-color2);
  background:none;
  cursor:not-allowed;
}
.jws-genre-page .genre-option__label {
  flex-grow:1;
}
.jws-genre-page .genre-option__count {
  font-size:13px;
  color:var(--body2);
}
.jws-genre-page .genre-option--radio input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.jws-genre-page .genre-option--radio .genre-option__check {
  display:none;
}
.jws-genre-page .genre-option--radio:has(input:checked) .genre-option__check {
  display:inline-block;
}
.jws-genre-page .genre-option--radio:has(input:focus-visible) {
  outline:2px solid var(--heading);
  outline-offset:-2px;
}
.jws-genre-page .genre-chips {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.jws-genre-page .genre-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 10px 0 14px;
  box-sizing:border-box;
  border:1px solid var(--genre-fill);
  border-radius:18px;
  font-size:13px;
  font-weight:700;
  color:var(--heading);
  background:color-mix(in srgb, var(--genre-fill) 20%, transparent);
}
.jws-genre-page .genre-chip:hover {
  color:var(--heading);
  background:color-mix(in srgb, var(--genre-fill) 35%, transparent);
}
.jws-genre-page .genre-chip i {
  font-size:12px;
}
.jws-genre-page .genre-chips__clear {
  padding:0 8px;
  font-size:13px;
  font-weight:700;
  color:var(--body);
  text-decoration:underline;
}
.jws-genre-page .genre-chips__clear:hover {
  color:var(--heading);
}
.jws-genre-page .genre-filters__submit {
  align-self:flex-start;
  height:44px;
  padding:0 22px;
  border:0;
  border-radius:10px;
  font-weight:700;
  color:var(--genre-ink);
  background:var(--genre-fill);
}
.jws-genre-page .genre-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:32px 24px;
}
.jws-genre-page .genre-grid>.jws-post-item {
  min-width:0;
  margin:0;
  padding:0;
}
.jws-genre-page .jws-movies_advanced-element .layout8 .post-inner.hover-video .video-cat {
  overflow:hidden;
  justify-content:safe center;
}
.jws-genre-page .genre-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:80px 0;
  text-align:center;
}
.jws-genre-page .genre-empty h2 {
  margin:0;
  font-size:20px;
}
.jws-genre-page .genre-empty p {
  margin:0;
  color:var(--body);
}
.jws-genre-page .genre-empty__reset {
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  color:var(--genre-ink);
  background:var(--genre-fill);
}
.jws-genre-page .genre-empty__reset:hover {
  color:var(--genre-ink);
}
.jws-genre-page .genre-more {
  margin-top:64px;
}
.jws-genre-page .genre-more__title {
  margin:0 0 20px;
  font-size:24px;
}
/* --------------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */
@media (max-width:1380px) {
  .jws-genres-index .genres-grid,
  .jws-genre-page .genres-grid,
  .jws-genre-page .genre-grid {
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
}
/*
 * Column count picked in Theme Options > Genres (is-cols-4/5/6; 6 is the
 * default above). Large screens only: tablets and phones keep their own.
 */
@media (min-width:1025px) {
  .jws-genres-index .genres-grid.is-cols-4,
  .jws-genre-page .genres-grid.is-cols-4,
  .jws-genre-page .genre-grid.is-cols-4 {
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  .jws-genres-index .genres-grid.is-cols-5,
  .jws-genre-page .genres-grid.is-cols-5,
  .jws-genre-page .genre-grid.is-cols-5 {
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
}
@media (max-width:1024px) {
  .jws-genres-index .genres-grid,
  .jws-genre-page .genres-grid,
  .jws-genre-page .genre-grid {
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  .jws-genres-index .genres-featured {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .jws-genre-page .genre-hero__content {
    width:58%;
    padding:32px 40px;
  }
  .jws-genre-page .genre-hero__title {
    font-size:64px;
  }
  .jws-genre-page .genre-hero--fan .genre-hero__fan {
    right:-120px;
  }
  .jws-genre-page .genre-filters__bar {
    flex-wrap:wrap;
  }
}
@media (max-width:767px) {
  /* Index */
  .jws-genres-index {
    padding:16px 0 48px;
  }
  .jws-genres-index .genres-index__head {
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    margin-bottom:28px;
  }
  .jws-genres-index .genres-index__title {
    font-size:34px;
  }
  .jws-genres-index .genres-index__lead {
    font-size:14px;
  }
  .jws-genres-index .genres-index__controls {
    flex-direction:column;
    gap:10px;
  }
  .jws-genres-index .genre-segment a {
    height:40px;
    padding:0 10px;
    font-size:13px;
  }
  .jws-genres-index .genres-index__section {
    margin-bottom:32px;
  }
  .jws-genres-index .genres-index__section-head h2 {
    font-size:20px;
  }
  .jws-genres-index .genres-featured {
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .jws-genres-index .genres-featured::-webkit-scrollbar {
    display:none;
  }
  .jws-genres-index .genres-featured .genre-tile {
    flex:0 0 300px;
    height:170px;
    scroll-snap-align:start;
  }
  .jws-genres-index .genres-featured .genre-tile__name {
    font-size:28px;
  }
  .jws-genres-index .genres-featured .genre-tile__count {
    font-size:13px;
  }
  .jws-genres-index .genres-featured .genre-tile__body {
    bottom:16px;
    inset-inline:18px;
  }
  .jws-genres-index .genres-grid,
  .jws-genre-page .genres-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .jws-genres-index .genres-grid .genre-tile,
  .jws-genre-page .genres-grid .genre-tile {
    height:112px;
  }
  .jws-genres-index .genres-grid .genre-tile__name,
  .jws-genre-page .genres-grid .genre-tile__name {
    font-size:17px;
  }
  .jws-genres-index .genres-grid .genre-tile__count,
  .jws-genre-page .genres-grid .genre-tile__count {
    font-size:12px;
  }
  .jws-genres-index .genres-grid .genre-tile__body,
  .jws-genre-page .genres-grid .genre-tile__body {
    top:12px;
    inset-inline:14px;
    gap:2px;
  }
  .jws-genres-index .genres-grid .genre-tile__disc,
  .jws-genre-page .genres-grid .genre-tile__disc {
    right:-24px;
    bottom:-42px;
    width:104px;
    height:104px;
  }
  .jws-genres-index .genres-grid .genre-tile__poster,
  .jws-genre-page .genres-grid .genre-tile__poster {
    width:46px;
    height:66px;
    border-radius:5px;
  }
  .jws-genres-index .genres-grid .genre-tile__poster:nth-child(1),
  .jws-genre-page .genres-grid .genre-tile__poster:nth-child(1) {
    right:50px;
    bottom:-18px;
  }
  .jws-genres-index .genres-grid .genre-tile__poster:nth-child(2),
  .jws-genre-page .genres-grid .genre-tile__poster:nth-child(2) {
    right:10px;
    bottom:-8px;
  }
  /* Genre title bar: picture on top, text under it. */
  .jws-genre-page {
    padding-bottom:48px;
    /* Kept inside the picture band, clear of the text below it. */
    /* The picture fades out at the bottom, so the text can start over it. */
    /* Filter bar: tabs scroll sideways, the filters live in a bottom sheet. */
    /* nowrap: a wrapping column would stretch both rows to the tabs' full width. */
    /* Three posters a row. */
  }
  .jws-genre-page .genre-hero {
    flex-direction:column;
    min-height:0;
    margin:4px 0 16px;
    border-radius:16px;
  }
  .jws-genre-page .genre-hero__disc,
  .jws-genre-page .genre-hero--fan .genre-hero__disc {
    top:10px;
    right:50%;
    bottom:auto;
    left:auto;
    width:190px;
    height:190px;
    margin-inline-end:-95px;
  }
  .jws-genre-page .genre-hero--plain .genre-hero__disc {
    top:-80px;
    left:auto;
    right:-60px;
  }
  .jws-genre-page .genre-hero__art {
    position:relative;
    width:100%;
    height:176px;
    -webkit-mask-image:linear-gradient(180deg, var(--dark) 40%, transparent 100%);
    mask-image:linear-gradient(180deg, var(--dark) 40%, transparent 100%);
  }
  .jws-genre-page .genre-hero__fan,
  .jws-genre-page .genre-hero--fan .genre-hero__fan {
    position:relative;
    right:auto;
    width:100%;
    height:196px;
  }
  .jws-genre-page .genre-hero__poster {
    top:40px;
    width:96px;
  }
  .jws-genre-page .genre-hero__poster:nth-child(1) {
    top:20px;
    right:calc(50% - 55px);
    width:110px;
  }
  .jws-genre-page .genre-hero__poster:nth-child(2) {
    right:calc(50% + 30px);
  }
  .jws-genre-page .genre-hero__poster:nth-child(3) {
    right:calc(50% - 126px);
  }
  .jws-genre-page .genre-hero__content {
    width:auto;
    gap:12px;
    padding:0 20px 22px;
  }
  .jws-genre-page .genre-hero--art .genre-hero__content {
    margin-top:-40px;
  }
  .jws-genre-page .genre-hero--plain .genre-hero__content {
    padding-top:22px;
  }
  .jws-genre-page .jws-breadcrumbs {
    font-size:12px;
  }
  .jws-genre-page .genre-hero__back {
    height:40px;
    font-size:13px;
  }
  .jws-genre-page .genre-hero__heading {
    gap:12px;
  }
  .jws-genre-page .genre-hero__title {
    font-size:48px;
    line-height:1;
    letter-spacing:-1px;
  }
  .jws-genre-page .genre-hero__rule {
    width:48px;
    height:4px;
  }
  .jws-genre-page .genre-hero__desc {
    font-size:15px;
    line-height:1.5;
  }
  .jws-genre-page .genre-hero__stats {
    gap:8px 28px;
  }
  .jws-genre-page .genre-hero__stat dt {
    font-size:11px;
    letter-spacing:1px;
  }
  .jws-genre-page .genre-hero__stat dd {
    font-size:22px;
  }
  .jws-genre-page .genre-filters {
    gap:12px;
    margin-bottom:20px;
    padding-bottom:16px;
  }
  .jws-genre-page .genre-filters__bar {
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:12px;
  }
  .jws-genre-page .genre-types {
    overflow-x:auto;
    scrollbar-width:none;
  }
  .jws-genre-page .genre-types::-webkit-scrollbar {
    display:none;
  }
  .jws-genre-page .genre-type {
    flex-shrink:0;
    height:40px;
    padding:0 6px 0 14px;
    font-size:14px;
  }
  .jws-genre-page .genre-type__count {
    min-width:24px;
    height:24px;
    font-size:12px;
  }
  .jws-genre-page .genre-filters__tools {
    gap:8px;
  }
  .jws-genre-page .genre-filters__result {
    flex-grow:1;
    font-size:13px;
  }
  .jws-genre-page .genre-dropdown--sort .genre-dropdown__hint {
    display:none;
  }
  .jws-genre-page .genre-dropdown__toggle,
  .jws-genre-page .genre-filters__open {
    padding:0 12px;
    font-size:13px;
  }
  .jws-genre-page .genre-filters__open {
    display:inline-flex;
  }
  .jws-genre-page .genre-filters__label {
    display:none;
  }
  .jws-genre-page .genre-filters__groups {
    display:block;
  }
  .jws-genre-page .genre-sheet {
    position:fixed;
    z-index:2;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    flex-direction:column;
    max-height:88vh;
    border-radius:20px 20px 0 0;
    background:var(--background-item);
    box-shadow:0 -12px 40px color-mix(in srgb, var(--dark) 50%, transparent);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .jws-genre-page .genre-sheet__backdrop {
    position:fixed;
    z-index:1;
    inset:0;
    display:block;
    background:color-mix(in srgb, var(--background-body) 72%, transparent);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .jws-genre-page .genre-filters.is-sheet-open .genre-sheet {
    transform:none;
    visibility:visible;
    transition:transform 0.3s ease;
  }
  .jws-genre-page .genre-filters.is-sheet-open .genre-sheet__backdrop {
    opacity:1;
    visibility:visible;
    transition:opacity 0.3s ease;
  }
  .jws-genre-page .genre-sheet__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 8px 4px 20px;
  }
  .jws-genre-page .genre-sheet__title {
    margin:0;
    font-size:20px;
  }
  .jws-genre-page .genre-sheet__close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    font-size:18px;
    color:var(--heading);
    background:none;
    cursor:pointer;
  }
  .jws-genre-page .genre-sheet__body {
    flex-direction:column;
    flex-wrap:nowrap;
    gap:22px;
    padding:8px 20px 20px;
    overflow-y:auto;
  }
  .jws-genre-page .genre-sheet {
    /* Options as chips. */
  }
  .jws-genre-page .genre-sheet .genre-dropdown__toggle {
    display:none;
  }
  .jws-genre-page .genre-sheet .genre-dropdown__panel {
    position:static;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    width:auto;
    max-height:none;
    padding:0;
    overflow:visible;
    border:0;
    background:none;
    box-shadow:none;
  }
  .jws-genre-page .genre-sheet .genre-dropdown__legend {
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:0;
    font-size:14px;
    font-weight:700;
    color:var(--heading);
  }
  .jws-genre-page .genre-sheet .genre-option {
    gap:6px;
    min-height:0;
    height:38px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid var(--input-background2);
    border-radius:19px;
    font-size:13px;
    font-weight:700;
  }
  .jws-genre-page .genre-sheet .genre-option input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
  }
  .jws-genre-page .genre-sheet .genre-option:hover {
    background:none;
  }
  .jws-genre-page .genre-sheet .genre-option:has(input:checked) {
    border-color:var(--genre-fill);
    color:var(--genre-ink);
    background:var(--genre-fill);
  }
  .jws-genre-page .genre-sheet .genre-option:has(input:checked) .genre-option__count {
    color:inherit;
  }
  .jws-genre-page .genre-sheet .genre-option:has(input:focus-visible) {
    outline:2px solid var(--heading);
    outline-offset:2px;
  }
  .jws-genre-page .genre-sheet .genre-option.is-disabled {
    border-color:var(--border-color);
  }
  .jws-genre-page .genre-sheet .genre-option__label {
    flex-grow:0;
  }
  .jws-genre-page .genre-sheet .genre-option__count {
    font-weight:500;
  }
  .jws-genre-page .genre-sheet__foot {
    display:flex;
    gap:10px;
    padding:12px 20px 20px;
    border-top:1px solid var(--border-color);
  }
  .jws-genre-page .genre-sheet__reset,
  .jws-genre-page .genre-sheet__apply {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:50px;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
  }
  .jws-genre-page .genre-sheet__reset {
    flex:1;
    color:var(--heading);
    background:var(--input-background2);
  }
  .jws-genre-page .genre-sheet__reset:hover {
    color:var(--heading);
  }
  .jws-genre-page .genre-sheet__apply {
    flex:2;
    border:0;
    color:var(--genre-ink);
    background:var(--genre-fill);
    cursor:pointer;
  }
  .jws-genre-page .genre-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px 10px;
  }
  .jws-genre-page .genre-more {
    margin-top:40px;
  }
  .jws-genre-page .genre-more__title {
    font-size:20px;
  }
}