/* Favorites (My List) — force landscape 16:9 while preserving portrait tiles
   Load this AFTER style.css so the specific rules override the global ones.
*/
#myList {
  /* ensure the favorites region behaves like a horizontal list container */
  display: block;
  box-sizing: border-box;
  padding: 0;
}

/* Default favorite tile = landscape 16:9 (override older 320x210 / 4:3 rules) */
#myList li {
  width: 320px !important;     /* preferred landscape width */
  height: 180px !important;    /* 16:9 -> 320x180 */
  display: inline-block;
  margin: 12px !important;
  box-sizing: border-box !important;
  vertical-align: top;
}

/* Image container inside favorite tile */
#myList li .my-list-box {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure poster fills the box without changing layout */
#myList li .my-list-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Keep the portrait override (unchanged behaviour for portrait favorites) */
#myList li.portrait {
  width: 192px !important;
  height: 288px !important;
  margin: 10px 15px !important;
}

#myList li.portrait .my-list-box {
  width: 192px !important;
  height: 288px !important;
}

/* Title appearance (keeps your existing class names but scoped) */
#myList li .fav-item-title {
  color: #fff;
  font-size: 16px;
  margin-top: 6px;
  font-family: "Poppins-Regular";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Defensive: if there are global rules that add large fixed heights,
   ensure favorites don't get clipped or stretched */
#myList,
#myList ul,
#myList li {
  max-width: none !important;
  max-height: none !important;
}

/* If you use a wrapper like #myList ul.my-list, this rule ensures it scrolls horizontally */
#myList ul.my-list,
#myList > ul {
  white-space: nowrap;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}