/* KolorTube mobile homepage final layout — loaded after all global layout layers. */
@media (max-width: 767.98px) {
  body.home,
  body.blog {
    overflow-x: hidden;
  }

  body.home #content,
  body.blog #content,
  body.home .wpst-home-shell,
  body.blog .wpst-home-shell,
  body.home .wpst-home-shell > *,
  body.blog .wpst-home-shell > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  body.home .wpst-home-shell,
  body.blog .wpst-home-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  /* Compact mobile filter/category panel. */
  body.home .wpst-home-menu,
  body.blog .wpst-home-menu {
    order: 0;
    margin: 0 !important;
    border-radius: 4px;
    overflow: hidden;
  }

  body.home .wpst-home-menu__inner,
  body.blog .wpst-home-menu__inner {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 4px !important;
  }

  body.home .wpst-home-menu .widget,
  body.blog .wpst-home-menu .widget {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  body.home .wpst-home-menu .widget-title,
  body.blog .wpst-home-menu .widget-title {
    margin: 0 0 9px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body.home .wpst-home-menu #wpst-video-filters,
  body.blog .wpst-home-menu #wpst-video-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.home .wpst-home-menu #wpst-video-categories,
  body.blog .wpst-home-menu #wpst-video-categories {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.home .wpst-home-menu #wpst-video-filters li,
  body.blog .wpst-home-menu #wpst-video-filters li,
  body.home .wpst-home-menu #wpst-video-categories li,
  body.blog .wpst-home-menu #wpst-video-categories li {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.home .wpst-home-menu #wpst-video-filters a,
  body.blog .wpst-home-menu #wpst-video-filters a,
  body.home .wpst-home-menu #wpst-video-categories a,
  body.blog .wpst-home-menu #wpst-video-categories a {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.home .wpst-home-menu #wpst-video-categories .see-all-tax,
  body.blog .wpst-home-menu #wpst-video-categories .see-all-tax {
    grid-column: 1 / -1;
  }

  /* True two-column homepage grid on mobile. */
  body.home .wpst-home-shell .video-loop,
  body.blog .wpst-home-shell .video-loop {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .wpst-home-shell .video-loop .row,
  body.blog .wpst-home-shell .video-loop .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    margin: 0 -4px !important;
  }

  body.home .wpst-home-shell .video-loop .row > .col-12,
  body.blog .wpst-home-shell .video-loop .row > .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.home .wpst-home-shell .video-loop .row.no-gutters > [class*="col-"],
  body.blog .wpst-home-shell .video-loop .row.no-gutters > [class*="col-"] {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 4px 8px !important;
  }

  /* Internal advertisement should span both columns. */
  body.home .wpst-home-shell .video-loop .row.no-gutters > .col-12:first-child,
  body.blog .wpst-home-shell .video-loop .row.no-gutters > .col-12:first-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .video-block-happy,
  body.blog .video-block-happy {
    min-height: 0 !important;
    aspect-ratio: 16 / 5;
    margin: 0 0 8px !important;
    overflow: hidden;
    border-radius: 4px;
  }

  body.home .video-block-happy img,
  body.blog .video-block-happy img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.home .video-block,
  body.blog .video-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  body.home .video-block .thumb,
  body.blog .video-block .thumb {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  body.home .video-block .video-img,
  body.blog .video-block .video-img,
  body.home .video-block .thumb img,
  body.blog .video-block .thumb img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  body.home .video-block a.infos,
  body.blog .video-block a.infos {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 9px !important;
  }

  body.home .video-block a.infos .title,
  body.blog .video-block a.infos .title {
    display: -webkit-box !important;
    min-height: 34px !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body.home .video-block .video-datas,
  body.blog .video-block .video-datas {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body.home .video-block .video-datas .rating,
  body.blog .video-block .video-datas .rating {
    display: none !important;
  }

  body.home .video-block .duration,
  body.blog .video-block .duration {
    right: 5px !important;
    bottom: 5px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  body.home .happy-section,
  body.blog .happy-section,
  body.home .hero,
  body.blog .hero {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.home .hero .container,
  body.blog .hero .container {
    padding: 14px 0 !important;
  }

  body.home .hero h1,
  body.blog .hero h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  body.home .hero-desc,
  body.blog .hero-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body.home .pagination,
  body.blog .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 14px 0 4px !important;
  }

  body.home .page-link,
  body.blog .page-link {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 9px !important;
  }
}

@media (max-width: 374.98px) {
  body.home .wpst-home-shell,
  body.blog .wpst-home-shell {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body.home .wpst-home-menu #wpst-video-filters,
  body.blog .wpst-home-menu #wpst-video-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home .video-block a.infos,
  body.blog .video-block a.infos {
    padding: 7px !important;
  }

  body.home .video-block a.infos .title,
  body.blog .video-block a.infos .title {
    font-size: 12px !important;
  }
}