/* Nunito Sans — self-hosted variable font (latin + latin-ext). */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*********************************************************************************************

0.  CSS Reset
1.  Basic Setup (Body, Fonts, etc.)
2.  Header Styles
3.  Navigation and Menu Styles
4.  Main Content
5.  Breadcrumbs
6.  Search Form
7.  Multiple Post Pages
8.  Single Post Pages
9.  Post Comment Styles
10. Pagination
11. Sidebar Styles
12. Footer Styles
  
**********************************************************************************************/

/*********************************************************************************************

0. CSS Reset

*********************************************************************************************/
:root {
--radius-main: 14px;
  --radius-pill: calc(var(--radius-main) * 0.5);
}

:root {
  --thumb-edge: clamp(3px, 0.5vw, 6px);
  --thumb-edge-x: clamp(4px, 0.6vw, 5px);  /* left/right */
  --thumb-edge-y: clamp(3px, 0.5vw, 5px);  /* top/bottom */
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

.model {
  color: silver;
  padding: 5px 0 5px;
}

\ q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 9999;
  padding: clamp(10px, 1.5vw, 12px);
  padding-right: 44px;
  background: linear-gradient(270deg, #14532d, #16a34a, #14532d);
  background-size: 200% 200%;
  animation: navbarFlow 6s ease infinite;
  border-bottom: 2px solid #22c55e;
  text-align: center;
  overflow: visible;
  /* 👈 fallback centering */
}

#navbar {
  position: fixed;
  inset: 0 auto auto 0;
  /* 👈 ensures correct anchor */
}

#navbar-close {
  /* see main declaration below */
}

@keyframes navbarFlow {
0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

#navbar * {
  float: none !important;
  margin: 0;
  padding: 0;
  text-align: center;

  align-items: center;
}

#navbar .navbar-text {
  display: block;
  width: 100%;
  flex: 1;
  white-space: nowrap;      /* 🔥 required */
  overflow: hidden;         /* prevents overflow */
  text-overflow: ellipsis;  /* safety fallback */
  min-width: 0;
  font-size: clamp(14px, 2.5vw, 28px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  font-weight: 800;
  color: #fff;
}
#navbar .navbar-text {
  transition: font-size 0.15s ease;
}
#navbar:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

#navbar {
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.25);
}
#navbar-close {
  /* see main declaration below */
}
#navbar a {
  display: block;
  width: 100%;
  text-decoration: none;
}

#navbar .navbar-text {
  transform: translateX(-1%);
}

/* CLOSE BUTTON */
#navbar-close {
  position: fixed;
  right: 12px;
  top: 6px;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: white;
  cursor: pointer;
  opacity: 1;
  line-height: 1;
  padding-bottom: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
  text-align: center;
}

#navbar-close:hover {
  opacity: 0.7;
}

/*********************************************************************************************

1. Basic Setup (Body, Fonts, etc.)

*********************************************************************************************/

body {
  width: auto;
  background: black;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  /* Unitless so it scales with each element's own font-size. The old
     fixed `15px` was inherited literally by every descendant — any
     element with font >15px got its text crushed below its own glyph
     height (and clipped where overflow:hidden was set). Root-caused
     + verified live 2026-05-15. */
  line-height: 1.4;
  color: #555555;
  overflow-x: visible;
}

html,
body {
  height: 100%;
}

#wrapper {
  min-height: 100vh;
  /* 👈 important */
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 28px;
  text-transform: normal;
}

.title {
  line-height: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
}

a:link,
a:visited {
  color: #888888;
}

a:hover {
  color: #808080;
}

abbr,
acronym {
  border-bottom: 1px dotted;
  cursor: help;
}

em {
  font-style: italic;
}

ol,
ul {
  margin: 0;
}

ol li {
  list-style: decimal outside;
}

ul li {
  list-style: none;
}

th,
td {
  border: 1px solid;
  padding: 8px;
}

th {
  font-weight: bold;
  text-align: center;
}

caption {
  margin-bottom: 8px;
  text-align: center;
}

a:link,
a:visited {
  text-decoration: none;
}

:focus {
  outline: 0;
}/*********************************************************************************************

2. Header Styles

*********************************************************************************************/
#header {
  color: #c2c2c2;
  flex: 0 1 auto;
  float: right;
  text-align: justify;
  font-size: clamp(0.85rem, 0.5vw + 0.7rem, 1.05rem);
  line-height: 1.3;
  font-weight: 400;
  text-shadow: 1px 1px 1px #111;
  width: 100%;
}
@media (orientation: landscape) and (max-height: 700px) {
#header {
    font-size: 0.6em;
  }
}

/* =========================================
   SINGLE PAGE – FLUID MODERN LAYER
========================================= */
body.single #header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(0,0,0,0.25); /* 👈 MUCH lighter */

  backdrop-filter: blur(4px);

  transition: all 0.3s ease;
}
body.single #header-inside {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px clamp(20px, 2vw, 20px);
}
body.single #header.scrolled {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* 👈 smoother than border */
}
body.single #header {
  backdrop-filter: blur(6px);
}
body.single #content {
  margin-top: -30px;
}
body.single .entry video {
  display: block;
  margin-top: 0;
}
body.single .entry iframe,
body.single .entry video {
  position: relative;
  z-index: 1;
}
body.single .entry {
  margin-top: 6px;
}
body.single .entry video,
body.single .entry iframe {
  margin-top: 0;
}
body.single #logo_home {
  height: 24px;
  width: auto;
  display: block;
}
body.single #content,
body.single .content,
body.single .wrap,
body.single .container {
  padding-top: 0 !important;
}
body.single #header::after {
  display: none;
}

body.single #logo_home {
  max-height: clamp(22px, 3vw, 32px);
  margin: 0;
}

/* VIDEO BLOCK */
body.single .entry video,
body.single .entry iframe {
  width: 100%;
  /* aspect-ratio reserves the player box up front — prevents CLS. */
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: clamp(8px, 1.5vw, 14px);
  display: block;
}

/* VIDEO INFO */
body.single .video-info {
  margin-top: 10px;
}

body.single .video-info h2 {
    font-size: clamp(18px, 2.2vw, 26px);
  color: #fff;
  line-height: 1.2;
}
body.single .cta-button {
  margin-top: 12px; /* was probably 20–30 */
}
/* META ROW */
body.single .video-meta {
  margin-top: clamp(4px, 1vw, 8px);
  font-size: clamp(13px, 1.2vw, 16px);
  color: #bbb;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  row-gap: 4px;                 /* vertical spacing */
  column-gap: clamp(4px, 1.4vw, 12px);            /* horizontal spacing */
}

.meta-stars {
  flex-shrink: 1;
  min-width: 0;
}
body.single .video-meta span {
  display: inline;
}
.meta-item,
.video-views {
  display: inline-flex;
  align-items: center;
}
body.single .video-meta .meta-item {
  display: inline-flex !important;
}.video-views,
.meta-time {
  flex-shrink: 0;   /* 🔥 prevents squeezing */
}
/* starring links */
body.single .meta-stars a {
  color: #ddd !important;
  text-decoration: none;
}

body.single .meta-stars a:hover {
  color: #fff !important;
}

/* highlight views */
body.single .video-views {
  color: #fff;
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 17px);
}
body.single .video-meta a {
  color: #bbb !important;
  text-decoration: none;
}

body.single .video-meta a:hover {
  color: #fff !important;
}
/* WRAPPER */
body.single .video-description-wrapper {
  margin-top: 16px;
}
body.single .video-description {
  background: #0e0e0e; /* slightly lighter than black */
  border: 1px solid rgba(255,255,255,0.04); /* softer */
}
/* DESCRIPTION BOX */
body.single .video-description {
  position: relative;

  padding: clamp(14px, 2vw, 20px);

  background: #111;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;

  color: #d1d5db;
  font-family: "Nunito Sans", sans-serif;

  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.7;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
}

/* MOBILE tighter */
@media (max-width: 768px) {
body.single .video-description {
    -webkit-line-clamp: 2;
  }
}

/* FADE */
body.single .video-description::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;

  background: linear-gradient(
    to bottom,
    rgba(17,17,17,0),
    rgba(17,17,17,1)
  );

  pointer-events: none;
}

/* EXPANDED */
body.single .video-description.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

body.single .video-description.expanded::after {
  display: none;
}

/* BUTTON */
body.single .desc-toggle {
  display: inline-block;

  margin-top: 6px;
  margin-left: clamp(14px, 2vw, 20px);

  background: none;
  border: none;

  font-family: "Nunito Sans", sans-serif !important;

  color: #9ca3af;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 600;

  cursor: pointer;
}
.video-description {
  transition: border 0.2s ease;
}

.video-description:hover {
  border-color: rgba(255,255,255,0.12);
}
body.single .desc-toggle:hover {
  color: #fff;
}
body.single .video-content-block {
  margin-top: 10px;
  padding-bottom: 6px;

  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.video-description-wrapper {
  margin-top: 18px;

}

.desc-toggle {
  margin-top: 10px;
}#header {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
}
body.single #header {
  background-image: none !important;
}#header-inside {
  max-width: 1400px;
  display: block;
  align-items: flex-start;
  gap: 16px;
  margin: 0 auto;
  padding: 10px clamp(16px, 3vw, 20px);
}

#header-inside p {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}#logo_home {
  float: left;
  max-height: 2em;
  height: auto;
  width: auto;
  margin-right: clamp(5px, 1.5vw, 10px);
  margin-top: 2px;
}

@media (orientation: landscape) and (max-height: 700px) {
#logo_home {
    max-height: 3em;
    /* 👈 bigger logo */
    margin-right: clamp(4px, 1vw, 8px);
    /* 👈 tighter spacing */
    margin-top: 0;
    /* 👈 better vertical alignment */
  }
}
#title {
  font-size: 21px;
  font-weight: 800;
  line-height: 150%;
  color: silver;
  margin-bottom: 5px;
}

#title span {
  vertical-align: middle !important;
  color: silver;
}

#main ul li {
  list-style: none;
  margin-left: 4px;
}

/*********************************************************************************************

4. Main Content

*********************************************************************************************/
#content {
  background: black;
  width: 100%;
  display: block;
  flex: 1 1 auto;
  margin-bottom: 20px;
}

#content-inside {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 20px);
}

#main {
  margin-top: clamp(5px, 2vw, 10px);
}

#main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#main>*:only-child {
  width: 100%;
  max-width: clamp(270px, 60vw, 500px);
  margin-left: 0;
  /* 👈 align left */
  margin-right: auto;
}

@media (max-width: 600px) {
#main>*:only-child {
    max-width: 100%;
    /* 👈 remove cap */
  }
}

body.single .video-description.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: none;
}

body.single .video-description.expanded::after {
  display: none;
}
body.single .video-description-wrapper {
  position: relative;
  z-index: 1;
}

body.single .desc-toggle {
  position: relative;
  z-index: 2;
}
body.single .video-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
   margin-bottom: clamp(40px, 4vw, 60px);
  overflow: hidden;
  max-height: calc(1.7em * 2);
}
/*********************************************************************************************

5. Breadcrumbs

*********************************************************************************************/
#breadcrumbs {
  background: black;
  color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  /* Compensate for Borders */
  float: left;
  margin: 10px 0 5px 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#breadcrumbs h2 {
  line-height: 105%;
}

#breadcrumbs p {
  float: left;
  margin: 0;
  padding: 9px 10px 0 10px;
}

#breadcrumbs a {
  color: white;
}

#breadcrumbs a:hover {
  color: #b0b0b0;
}

#breadcrumbs strong {
  color: white;
}

/*********************************************************************************************

7. Multiple Post Pages

*********************************************************************************************/
.multiple {
  display: flex;
  flex-direction: column;
}.wp-pagenavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  margin: 30px auto;
  max-width: 1400px;
}
.wp-pagenavi {
  max-height: 120px; /* ~2 rows */
  overflow: hidden;
}
.wp-pagenavi .current {
  filter: brightness(2);
  border-color: #333;
}
.wp-pagenavi a:hover {
  filter: brightness(2);
  color: #fff;
}

@media (max-width: 600px) {
.wp-pagenavi a,
  .wp-pagenavi span {

    font-size: 11px;
  }
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-block;

  padding: 8px 12px;
  font-size: clamp(13px, 1vw, 16px);

  color: #ddd;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;

  text-decoration: none;
  transition: all 0.2s ease;
}

.multiple h2 a {
  color: white;
}

.multiple p {
  margin: 0;
  padding: 0 0 0 4px;
}

.post-image {
  float: none;
}

.thumbz {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-main);
  transition: transform 0.24s ease;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Subtle whole-card grow on hover. Gated to hover-capable pointers:
   on touch devices :hover sticks after a tap (and while a finger
   passes over thumbs during a scroll), which left thumbs stuck
   oversized. Mouse devices keep the effect; touch devices never zoom. */
@media (hover: hover) {
  .multiple:hover .thumbz {
    transform: translateZ(0) scale(1.025);
  }
}

/* Preview-state zoom — works on mobile (and anywhere a preview runs).
   The thumb grows while its preview is loading/playing, then animates
   back to normal (via the .thumbz `transition` above) the instant the
   preview ends or another thumb takes over — touch-preview.js drops
   the class. This is a preview cue tied to playback, NOT to :hover,
   so it can never get stuck the way sticky mobile :hover did. */
.thumbz.is-loading,
.thumbz.is-previewing {
  transform: translateZ(0) scale(1.025);
}

.thumbz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0) scale(1.001);
  transition: filter 0.35s ease;
  backface-visibility: hidden;
}

/* keep image stable; only brighten on hover (hover-capable pointers) */
@media (hover: hover) {
  .multiple:hover .thumbz img {
    filter: brightness(1.15);
  }
}

.thumbz img,
.thumb-video,
.thumb-img {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.thumbz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.4) 25%,
      rgba(0, 0, 0, 0.15) 45%,
      rgba(0, 0, 0, 0) 70%);

  pointer-events: none;
}
@media (hover: hover) {
  .multiple:hover .thumbz::after {
    opacity: 0;
  }
}

.thumbz::after {
  transition: opacity 0.25s ease;
}
.thumbz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}.instant {
  display: none;
  z-index: -100;
}

.instant-view {
  text-align: center;
}#starrings {
text-shadow:
  -1px -1px 1px rgba(0,0,0,0.6),
   1px -1px 1px rgba(0,0,0,0.6),
  -1px  1px 1px rgba(0,0,0,0.6),
   1px  1px 1px rgba(0,0,0,0.6);
  font-size: clamp(0.8rem, 0.4vw + 0.5rem, 0.85rem);
  padding: 5px;
  position: absolute;
  right: 1px;
  text-align: right;
  top: -2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  max-width: 85%;
}
#starrings {
  position: absolute;
  z-index: 3; /* 👈 higher than overlay */
}
#starrings a {font-weight: 600;   color: rgba(255, 255, 255, 0.85) !important;}#starrings img {
  border: 0;
}

#starrings img:hover {
  border: 0;
}

#time {
  max-width: 10px;
  height: auto;
  margin: 0;
}#views {
  height: auto;
  margin-left: 5px;
  max-width: 11px;
  vertical-align: -1px;
}#star {
  max-width: 10px;
  height: auto;
  margin-left: 4px;
}#category {
  max-width: 14px;
  max-height: auto;
  margin-left: 4px;
  vertical-align: -1px;
}/*********************************************************************************************

8. Single Post Pages

*********************************************************************************************/

.full {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.entry p {
  color: grey;
  clear: both;
  font-size: 105%;
  line-height: 125%;
  text-align: justify;
}

.entry h1 {
  padding: 15px;
}

.entry h2 {
  color: silver;
  line-height: 120%;
}

.entry h3 {
  color: silver;
  padding-bottom: 20px;
  font-size: 140%;
  line-height: 150%;
}

.entry p strong {
  color: silver;
}

.entry ul li {
  list-style: inside none disc;
  margin-left: 5px;
  padding: 5px;
  color: grey;
  line-height: 120%;
}

.entry li {
  color: silver;
  font-size: 115%;
  text-align: left;
  text-decoration: none;
  list-style: inside none disc;
  padding: 5px;
}

.entry blockquote {
  color: grey;
  font-size: 130%;
  line-height: 120%;
  padding: 10px;
}

.entry blockquote img {
  padding-left: 20px;
}

.widgettitle {
  color: silver;
  padding: 5px;
}

.single {
  width: 100%;
}

.entry {
  display: block;
}.entry ul {
  margin: 0 0 15px 0;
}

.entry ol {}

p img {
  padding: 0;
  color: #666666;
  max-width: 100%;
}#video {
  width: 100%;
  height: auto;
  display: block;
}

#video-inside {
  width: 960px;
  margin: 0px auto;
  padding: 20px 0 20px 0;
  text-align: center;
}

.entry video {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 12px;   /* 👈 rounded corners */
}

.entry {
  margin-top: 15px;
}/*********************************************************************************************

12. Footer Styles

*********************************************************************************************/
#footer {
  color: #c2c2c2;
  background: #000;
  flex: 0 0 auto;
  font-size: clamp(0.85rem, 0.5vw + 0.7rem, 1.05rem);
  line-height: 1.2;
}

#footer {
  flex-shrink: 0;
}

#footer ul li {
  display: inline;
}

#footer-inside {
  max-width: 1400px;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  display: box;
}

#footer-inside {
  padding: 10px;
}

#footer-inside p {
  font-weight: 300;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 black;
  text-align: center;
  color: ghostwhite;
  text-align: justify;
}

#footer a {
  color: #ffffff;
  font-weight: 600;
}

#footer a:hover {
  color: #cccccc;
}

video {
  object-fit: cover;
}

/* 🔥 FIX VIDEO DISAPPEARING */
.entry {
  display: block !important;
}

.entry p {
  clear: both;
}

video {
  width: 100%;
  height: auto;
  display: block;
}

.entry p {
  flex: 1;
  margin: 0;
}
.footer-logo {
  text-align: center;
  margin-bottom: 10px;
}

.footer-logo img {
  width: clamp(60px, 12vw, 100px); /* 🔥 responsive scaling */
  height: auto;
  opacity: 0.9;
}

.footer-logo img:hover {
  opacity: 1;
}
/* =========================================
   MODERN LAYER
========================================= */

#breadcrumbs,
#breadcrumbs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}

#breadcrumbs h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  color: white;
}.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* CTA */

/* === CTA BUTTON (GLOBAL, SINGLE SOURCE OF TRUTH) === */
.cta-button {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.15;
  margin: 14px 0;
  padding: 22px clamp(18px, 3vw, 32px);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: 0.3px;

  color: #fff !important;

  text-shadow: 0 2px 4px rgba(0,0,0,0.45);
  padding: clamp(14px, 2vw, 24px) clamp(16px, 3vw, 32px);
  background: linear-gradient(90deg, #1e7f3f, #22a84a);
  border: 2px solid #22c55e;
  border-radius: 12px;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.15);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button,
.cta-button:link,
.cta-button:visited {
  color: #fff !important;
}
.cta-button .cta-accent {
  white-space: nowrap;
  color: #facc15 !important;
  font-weight: 900;
}/* hover */
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
body.single .cta-button span {
  white-space: nowrap;
  color: #facc15 !important;
  font-weight: 900;
}/* allow more columns on larger screens */
.icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: #aaa;
  display: inline-block;
}.meta-item strong {
  margin-right: 4px;
  /* 👈 key fix */
}

.meta-stars a+a {
  margin-left: 4px;
}

.meta-stars a:first-child {
  margin-left: 0;
}.meta-time .icon {
  transform: scale(0.9) translateY(-1px);
}

.meta-stars .icon {
  transform: scale(0.9) translateY(-1px);
}

.meta-views .icon {
  transform: scale(1) translateY(-1px);
}@media (max-width: 600px) {
.wp-pagenavi {
    flex-wrap: wrap;
    /* 👈 allow 2 rows */
    overflow-x: hidden;
    /* 👈 prevent scroll bar */
    justify-content: center;
  }

  .wp-pagenavi .pages {
    display: none;
  }
}

.wp-pagenavi .pages {
  display: none;
}

#header {
  position: relative;
  overflow: hidden;
}#header-inside {
  position: relative;
  z-index: 2;
}

@keyframes valueColor {
0% {
    color: #facc15;
  }

  100% {
    color: #ffffff;
  }
}

/* wrapper handles layout */
.promo-value-wrap {
  display: inline;
  white-space: nowrap;
  width: auto;
}

/* Gold price/number highlight — STATIC. The breathing "zoom" animation was
   removed 2026-06-02: scaling the number (inline-block + transform) collapsed
   the spacing of whatever followed it, so an emoji right after a value looked
   glued to it. display:inline (not inline-block) so trailing whitespace next to
   the value renders normally. Gold colour + glow kept for the price emphasis. */
.promo-value {
  display: inline;
  color: #facc15;
  font-weight: 900;
  text-shadow:
    0 0 6px rgba(250, 204, 21, 0.5),
    0 0 10px rgba(250, 204, 21, 0.3);
  white-space: nowrap;
}
.ad-item {
  opacity: 0.95;
}

.ad-item h2 span {
  color: #facc15;
}
.ad-item {
  position: relative;
}

.ad-item .thumbz::after {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.4),
    transparent
  );
}.meta-ad {
  color: #facc15;
  font-weight: 700;
  filter: brightness(1.1);
  font-size: 120%;
}
.meta-ad .icon {
  color: #facc15;
  transform: scale(0.95) translateY(-1px);
}

/* optional subtle glow */

.ad-item .thumbz img {
  transition: opacity 0.4s ease;
}
.ad-item .ad-img {
  opacity: 0;
}
.ad-img.active {
  opacity: 1;
}
.grid-breaker {
  grid-column: 1 / -1; /* 🔥 span all columns */
}body.single .desc-toggle {
  font-family: "Nunito Sans", sans-serif !important;
}
/* VIDEO LAYER */
.thumbz {
  position: relative;
}

/* both layers identical */
.thumb-img,
.thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* video overlay */
.thumb-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* below overlays */
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* keep overlay + meta above */
.thumbz::after,
#starrings,
/* swap on hover only for cards that actually use video previews */
.multiple:not(.external-card):not(.model-card):hover .thumb-video {
  opacity: 1;
}

.multiple:not(.external-card):not(.model-card):hover .thumb-img {
  opacity: 0;
}
.thumb-info {
  padding: 6px 2px 0;
}

.starrings-below {
  font-size: 13px;
  margin-bottom: 4px;
}/* hide overlay text */
.thumbz #starrings,
.thumbz .entry-multiple {
  display: none !important;
}
.thumb-title {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.4em;
  color: #ccc;
  transition: color 0.2s ease;
}
.multiple:hover .thumb-title {
  color: #fff;
}
.thumb-title a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.multiple {
  cursor: pointer;
}
.thumb-title a:hover {
  opacity: 0.8;
}
.meta-row {
  font-size: clamp(13px, 1.1vw, 14px);
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 6px;

  flex-wrap: nowrap;
  width: 100%;
}
.meta-views,
.meta-time,
.meta-separator {
  flex-shrink: 0;
}/* tags below */
.starrings-below {
  font-size: clamp(13px, 1.1vw, 14px);
  color: #bbb;
  line-height: 1.4;
}

/* optional: prevent tag explosion */
.starrings-below a {
  white-space: nowrap;
}
.starrings-below {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tag-sep {
  color: #666;   /* softer comma */
}
.thumb-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: none) {
.thumb-video {
    display: none !important;
  }

  .thumbz::after {
    opacity: 1 !important;
  }
}

.multiple:active {
  transform: scale(0.98);
  transition: transform 0.08s ease-out;
}
.ad-item .thumb-title {
  color: #facc15; /* subtle highlight */
}

.meta-ad {
  color: #facc15;
  font-weight: 500;
}
.meta-ad {
  color: #aaa;
}
/* mobile */
@media (max-width: 767px) {
.intro-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1024px) {
.intro-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* or 4 if you prefer */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.intro-text.expanded {
  -webkit-line-clamp: unset;
}
/* WRAPPER becomes positioning context */
.video-description-wrapper {
  position: relative;
}

/* CENTERED BUTTON */
body.single .desc-toggle {
  position: absolute;
  bottom: -18px;
left: 0;
right: 0;
margin: 0 auto;
  width: 36px;
  height: 36px;

  border-radius: 50%;
  background: rgba(20,20,20,0.85);
  border: 1px solid rgba(255,255,255,0.15);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 3;

  transition: all 0.25s ease;
}

/* HOVER */
body.single .desc-toggle:hover {
  background: rgba(40,40,40,0.95);
  transform: scale(1.1);
}

/* ARROW (chevron) */
.desc-toggle .arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.2s ease;
}

/* hover arrow color */
.desc-toggle:hover .arrow {
  border-color: #fff;
}

/* ROTATE WHEN OPEN */
.video-description.expanded + .desc-toggle .arrow {
  transform: rotate(-135deg);
}
.external-card .thumb-link {
  position: relative;
}

.ad-item .thumb-link::after {
  content: "JOIN NOW";
  /* or dynamically replaced later */

  position: absolute;
  top: 10px;
  left: 10px;

  background: rgba(255,255,255,0.92);
  color: #000;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;

  padding: 4px 8px;
  border-radius: 4px;

  backdrop-filter: blur(4px);

  z-index: 2;
}
/* ================================
   GRID: STARRING (1 LINE ONLY)
================================ */
.starrings-below {
  display: block;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  line-height: 1.25;
  margin-top: 4px;
}

/* ================================
   SINGLE: STARRING (2 LINES MAX)
================================ */
.meta-stars {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: rgba(255,255,255,0.75);
}

.meta-stars a {
  color: inherit;
}

.more-stars {
  opacity: 0.7;
  margin-left: 4px;
}
/* base */
body.single .meta-stars {
  display: inline-block;
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  vertical-align: bottom;

  line-height: inherit; /* 👈 keeps your meta rhythm */
  color: rgba(255,255,255,0.75);
}

/* links */
.meta-stars a {
  color: inherit;
}

/* "+X more" */
body.single .more-stars-toggle {
  margin-left: 6px;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body.single .more-stars-toggle:hover {
  opacity: 1;
}

body.single .hidden-stars {
  display: none !important;
}

body.single .meta-stars.expanded {
  flex-basis: 100%;
  display: block;
  white-space: normal;

}

.meta-stars.expanded .hidden-stars {
  display: inline !important;
}
.more-stars-toggle {
  margin-left: 6px;
  opacity: 0.7;
}
.meta-views,
.meta-time,
.meta-separator {
  flex: 0 0 auto;   /* 👈 prevents weird resizing */
}
.meta-stars.expanded .more-stars-toggle {
  display: block;
  margin-left: 0;
  margin-top: 4px;
}
a,
.thumb-link {
  cursor: pointer;
}
.meta-series-wrap {
  flex: 1 1 auto;
  display: inline-flex;
  min-width: 0;
  flex-shrink: 1;
  max-width: fit-content;

  vertical-align: bottom;
}

.meta-series {
  display: inline-block;
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  vertical-align: bottom;
  opacity: 0.85;
}

.multiple .meta-row {
  display: flex;
  align-items: center;
  gap: 6px;

  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.multiple .meta-views,
.multiple .meta-time,
.multiple .meta-separator {
  flex: 0 0 auto;
}

.multiple .meta-series {
  flex: 1 1 0%;
  min-width: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
}
.meta-series {
  color: inherit;
  text-decoration: none;

  transition: color 0.15s ease, opacity 0.15s ease;
}

.meta-series:hover {
  color: #fff;              /* brighter */
  opacity: 1;
}
.multiple .meta-stars a:hover {
  color: #fff; /* brighten */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.series-item {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #bbb;
  font-size: 13px;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* hover */
.series-item:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* active */
.series-item.active {
  background: #22c55e;
  color: #fff;
}

.search-toggle {
  border: none;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}

.search-inline {
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 0 4px 0 0;
}

.search-inline-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 5px 12px;
  width: auto;
  min-width: 80px;
  max-width: clamp(140px, 40vw, 300px);
  outline: none;
}

.search-inline-input::placeholder {
  color: #777;
}

.search-inline-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  flex-shrink: 0;
  line-height: 1;
}

.search-inline-close:hover {
  color: #fff;
}
.category-header {

  margin-bottom: 15px;
}

.category-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
}
.series-item {
  white-space: nowrap;
}

.series-item {
  flex: 0 0 auto;
}
.series-nav::-webkit-scrollbar {
  display: none;
}
.series-nav {
  scrollbar-width: none;
}
.series-nav-wrapper {
  position: relative;
}
.series-nav:active {
  cursor: grabbing;
}
.series-label {
  color: #888;
  font-size: 13px;
  margin: 0 6px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.series-nav {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 10px;
  overflow-x: auto;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;

}

.series-nav-wrapper:hover::after {
  opacity: 1;
}
.series-nav {
  cursor: grab;
}

.series-nav:active {
  cursor: grabbing;
}
.series-nav::-webkit-scrollbar {
  display: none; /* Chrome */
}.series-nav-wrapper {
  position: relative;
  background: #000; /* or slightly lighter than page */
  padding: 4px 0;
}/* DESKTOP (default) */
body.single .video-meta .time-short {
  display: none;
}

body.single .video-meta .views-label {
  display: inline;
}

/* MOBILE */
@media (max-width: 768px) {
body.single .video-meta .views-label {
    display: none;
  }

  body.single .video-meta .time-full {
    display: none;
  }

  body.single .video-meta .time-short {
    display: inline;
  }
}

@media (max-width: 768px) {
body.single .meta-series-wrap {
    flex: 0 0 auto !important;   /* 🔥 THIS FIXES IT */
    display: inline-flex;

    max-width: fit-content;      /* optional but nice */
  }
}

@media (max-width: 768px) {
body.single .video-views { order: 1; }
  body.single .meta-time   { order: 2; }

  body.single .meta-stars  { order: 3; }

  body.single .meta-series-wrap {
    order: 4;
    flex: 0 0 100%;
  }
}

body.single .video-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body.single .video-meta .meta-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body.single .video-meta > * + *::before {
  /* A CSS-drawn dot, NOT the "\2022" bullet glyph. The bullet glyph
     has asymmetric side-bearings, so it reads as off-centre between
     two items even when the CSS margins are mathematically equal.
     A real circle is geometrically exact — margins apply evenly.
     vertical-align centres it for the inline-host items (date,
     stars); align-self does the same for the inline-flex host
     (.meta-series-wrap). Verified live 2026-05-15. */
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  align-self: center;
  margin-right: clamp(4px, 1.4vw, 12px);
  opacity: 0.5;
}.thumbz {
  border-radius: var(--radius-main);
}.ad-rotator {
  position: relative;
}

.ad-rotator .ad-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ad-rotator .ad-img.active {
  opacity: 1;
  position: relative;
}
.ad-rotator {
  position: relative;
}

.ad-img {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.ad-img.active {
  opacity: 1;
}.thumb-meta-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;

  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);

  padding: 4px 8px;
  border-radius: 6px;

  font-size: 12px;
  color: #fff;

  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-dot {
  opacity: 0.6;
}
.meta-row {
  display: none !important;
}
.starrings-below .category::before {
  content: "•";
  margin: 0 6px;
  opacity: 0.5;
}
@media (max-width: 899px) {
.starrings-below {
    display: none;
  }

  .model-card .thumb-info {
    display: none;
  }
}

@media (min-width: 900px) {
.starrings-below {
    display: block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .multiple:hover .starrings-below {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }
  .multiple:active {
  transform: scale(0.97);
}
}

.ad-item {
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.ad-item:hover {
  opacity: 1;
}
.meta-stars {
  display: inline;
  white-space: nowrap;
}

.meta-stars .hidden-stars {
  display: none;
}

.meta-stars.expanded .hidden-stars {
  display: inline;
}
.more-stars-toggle {
  display: inline;
  white-space: nowrap;
  cursor: pointer;
}
body.single .meta-stars.expanded {
  display: inline;        /* keep inline */
  white-space: nowrap;    /* stay on one line */
  flex-basis: auto;       /* 🚀 DO NOT force new row */
}
.meta-stars.expanded .more-stars-toggle {
  display: inline;
  margin-left: 6px;
}
@media (max-width: 768px) {
body.single .meta-stars.expanded {
    white-space: normal !important;   /* 🚀 allow wrapping */
    overflow: visible !important;
    text-overflow: unset !important;
    display: block;                  /* stack nicely */
  }
}

#related-posts-section #main > * {
  min-width: 0; /* 🔥 CRITICAL FIX */
}
#related-posts-section #main {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔥 force 2 columns on mobile */
  gap: 16px;
}

/* tablet */
@media (min-width: 768px) {
#related-posts-section #main {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* desktop */
@media (min-width: 1200px) {
#related-posts-section #main {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* mobile only (2-column layout on single page) */
@media (max-width: 767px) {
#related-posts-section .thumbz {
  }
}

@media (max-width: 767px) {
#related-posts-section .thumbz {
    width: 100%;
  }

  #related-posts-section .thumbz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#related-posts-section .multiple {
  display: flex;
  flex-direction: column;
}
#related-posts-section .load-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#related-posts-section #load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 12px;
  min-width: 120px;

  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;

  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  transition: all 0.2s ease;
}

#related-posts-section #load-more:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.24);
}
.series-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  padding: 4px 0;
}

.series-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.series-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 34px;
  font-size: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #ddd;

  cursor: pointer;
  transition: all 0.2s ease;
}

.series-nav-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.series-nav-btn[disabled] {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.series-nav-btn span {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
.series-nav-btn {
    display: inline-flex;
  }

  .series-nav-wrapper::after {
    width: 56px; /* leave room for right button + fade */
  }
}

.series-label--legacy {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding: 5px 10px;
  border-radius: 999px;

  background: #111;
  color: #cfcfcf;
  border: 1px solid rgba(255,255,255,0.08);

  font-size: 13px;
  font-weight: 600;
}
.meta-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #fff;
}
.model-card .meta-badge--model {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.model-card .model-meta-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: clamp(13px, 1.1vw, 14px);
  color: #bbb;
  line-height: 1.35;
}
.model-card .meta-badge--model {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Category latest/top grouped pills === */

/* Featured model badge (appears in current video) */
.model-card--featured .thumb-meta-overlay {
  background: #16a34a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.series-item-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 0;
}

.series-item-group .series-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.series-item-group.is-current {
  align-items: stretch;
  overflow: hidden;
  border-radius: 999px;
}

.series-item-group.is-current .series-item--main,
.series-item-group.is-current .series-item--sort-toggle {
  vertical-align: middle;
  border-radius: 0;
  margin: 0;
}

.series-item-group.is-current .series-item--main {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  padding-right: 12px;
}

.series-item-group.is-current .series-item--sort-toggle {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  min-width: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid #21C55E;
}

.series-item--sort-toggle {
  min-width: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
.series-item-group.is-current .series-item--sort-toggle,
  .series-item--sort-toggle {
    min-width: 18px;
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* Keep category latest/top pair fully green when /top/ is active */
.series-item-group.is-current .series-item--main.is-selected,
.series-item-group.is-current .series-item--main.is-selected:hover,
.series-item-group.is-current .series-item--main.is-selected + .series-item--sort-toggle.active,
.series-item-group.is-current .series-item--main.is-selected + .series-item--sort-toggle.active:hover {
  background: #22c55e;
  color: #fff;
}

.series-item-group.is-current .series-item--main.is-selected {
  border-right-color: #22c55e;
}

.series-item-group.is-current .series-item--main.is-selected + .series-item--sort-toggle.active {
  border-left-color: #21C55E;
}

/* === Current category latest view: give sort toggle a full green outline === */
.series-item-group.is-current .series-item--main.active + .series-item--sort-toggle.is-selected,
.series-item-group.is-current .series-item--main.active + .series-item--sort-toggle.is-selected:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
  box-shadow: none;
  border-left: 2px solid #21C55E;
  border-top: 2px solid #22c55e;
  border-right: 2px solid #22c55e;
  border-bottom: 2px solid #22c55e;
}
.single-keywords-nav {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: none;
  padding: 0;
}

.single-keywords-nav .series-item {
  margin: 0;
}

/* MOBILE THUMB PREVIEW – FINAL OVERRIDE */
@media (hover: none), (pointer: coarse) {
.multiple:active {
    transform: none !important;
  }

  .thumb-video {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: #000 !important;
  }

  .thumb-img {
    opacity: 1 !important;
    transition: opacity 0.12s ease !important;
  }

  .thumbz.is-previewing .thumb-video {
    opacity: 1 !important;
  }

  .thumbz.is-previewing .thumb-img {
    opacity: 0 !important;
  }

  .thumbz.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: #22c55e;
    z-index: 10;
    animation: thumb-loading 0.8s ease-in-out infinite;
    pointer-events: none;
  }

  .thumbz.is-previewing::after {
    display: none;
  }

  @keyframes thumb-loading {
    0% { width: 0; }
    50% { width: 70%; }
    100% { width: 100%; }
  }
}

/* ===== Promo bar + single holiday promo stabilization (mobile only) ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.single-header-promo {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.1;
}

@media (max-width: 1024px) {
#navbar {
    padding-right: calc(46px + env(safe-area-inset-right, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }

  #navbar a {
    display: block;
    width: 100%;
    padding-right: calc(40px + env(safe-area-inset-right, 0px));
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  #navbar .navbar-text {
    transform: none !important;
    margin: 0 !important;
    /* Fluid sizing on mobile (replaces the old fixed 11/12/14px guesses).
       Toned down a notch 2026-06-02 — mobile width is limited. Scales with
       viewport: ~12px on small portrait phones up to a 15px cap on
       landscape/tablet. nowrap+ellipsis below still guarantees the text never
       crowds the X (its space is reserved via padding-right). */
    font-size: clamp(12px, 3.3vw, 15px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.1px !important;
  }

  #navbar-close {
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }

  body.single .single-header-promo {
    display: inline-block;
    max-width: 100%;
    /* Fluid sizing on mobile (replaces fixed 13/15px), toned down a notch
       2026-06-02. ~13px small portrait up to a 16px cap on landscape/tablet.
       ellipsis still truncates safely. */
    font-size: clamp(13px, 3.6vw, 16px);
    letter-spacing: 0.15px;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Orientation-specific fixed px rules removed 2026-06-02 — mobile sizing is
   now fluid via clamp() in the @media (max-width:1024px) block above, which
   scales for both portrait and landscape automatically. The JS still adds the
   is-mobile-portrait/landscape classes (harmless; used for the X-button offset
   logic), but no font-size keys off them anymore. */

/* Mobile close button safe-area adjustment */
@media (max-width: 820px) {
#navbar-close {
    right: calc(8px + env(safe-area-inset-right, 0px));
  }
}