/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 160:0 Unexpected "<"

**/
<style>
  .aspect-video      { aspect-ratio: 16/9; }
  .text-brand-yellow { color:#FBD500; }
  .group:hover .group-hover\:text-brand-yellow { color:#FBD500; }
  .rounded-lg        { border-radius:0.5rem; }
  .group:hover img   { filter:brightness(1.05); }

/* video duration badge — sits over the thumbnail */
.video-duration-badge{
  position:absolute;
  left:0.25rem;        /* 4 px */
  bottom:0.25rem;      /* 4 px */
  z-index:10;

  padding:0.125rem 0.375rem;  /* 2 px × 6 px */
  font-size:11px;
  line-height:1;
  color:#fff;
  background:rgba(0,0,0,.7);
  border-radius:4px;
  font-weight:400;
}

/* featured heading */
.featured-heading{
  position:relative;
  color: #fbd500
}

/* yellow border; glow on hover */
.featured-grid a{
  border:2px solid rgba(251,213,0,.4);   /* thin translucent yellow */
  border-radius:0.5rem;
  overflow:hidden;                       /* keep border on thumbnails */
  transition:border-color .25s, box-shadow .25s;
}
.featured-grid a:hover{
  border-color:#FBD500;
  box-shadow:0 0 10px 0 rgba(251,213,0,.7);
}

/* ──────────────────────────────────────────────
   Video-library – filter dropdown styling
   Mirrors the look of the sort-by selectors used
   elsewhere in the theme.
   ────────────────────────────────────────────── */
.filter-bar select{
  /* layout */
  min-width:10rem;               /* a little wider than before            */
  padding:0.5rem 2.25rem 0.5rem .75rem;
  border-radius:4px;
  font-size:15px;
  line-height:1.3;
  cursor:pointer;

  /* colours */
  background:#1b1b1b;            /* same as page background               */
  color:#fff;
  border:1px solid #fff;

  /* remove default arrow & inject custom ▼ */
  appearance:none;               /* Firefox & others                      */
  -webkit-appearance:none;       /* Safari / iOS                          */
  background-image:url("data:image/svg+xml,%3Csvg \
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' \
fill='white'%3E%3Cpath d='M1 1l5 6 5-6' stroke='white' \
stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:12px 8px;

  transition:border-color .2s, box-shadow .2s;
}

/* option list keeps the dark look when the menu is open */
.filter-bar select option{
  background:#2a2a2a;
  color:#fff;
}

/* yellow focus ring (matches inputs elsewhere) */
@media (prefers-color-scheme:dark){
  .filter-bar select:focus{
    outline:2px solid #FBD500;
    outline-offset:1px;
    border-color:#FBD500;
  }
}

/* darker still on hover (Chromium only) */
@supports (--custom:property){
  .filter-bar select option:hover{
    background:#3a3a3a;
  }
}

/* highlight an active (non-“All”) filter  */
.filter-bar select.filter-active{
  border-color:#fbd500;   /* yellow outline   */
  font-weight:600;        /* semibold text    */
}

/* keep the same yellow ring when the box is focused */
@media (prefers-color-scheme:dark){
  .filter-bar select.filter-active:focus{
    outline-color:#FBD500;
  }
}

/* ───────────── Filters card ───────────── */
.filters-card{
  background:#242424;                   /* slightly lighter than page */
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;                    /* matches your .rounded-lg look */
  padding:0.75rem;                      /* 12px */
  margin-bottom:1.25rem;                /* space above “Featured” */
}
@media (min-width:768px){
  .filters-card{ padding:1rem 1rem; }   /* a touch more room on md+ */
}

.filters-card__header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.5rem;
}
.filters-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#FBD500;
}

/* When any filter is active, highlight the whole card */
.filters-card.has-active{
  border-color:#FBD500;
  box-shadow:0 0 0 1px rgba(251,213,0,.35) inset;
}

/* Keep the selects from crowding the card edges on tiny screens */
.filters-card .filter-bar{ row-gap:0.5rem; }

/* give the Filters card breathing room under the banner */
.filters-card{
  margin-top:1.5rem;      /* 24 px */
}
@media (min-width:768px){ /* bump it a hair on larger screens if you like */
  .filters-card{ margin-top:2rem; }  /* 32 px */
}

#no-videos-message{ margin-top:2rem; }


</style>