.page-products {
  --crisp-blue: #3a86ff;
  --crisp-green: #00b894;
  --crisp-purple: #7b2ff7;
  --crisp-gray: #8d99ae;
  padding: 20px 16px 48px;
}
.page-products .page-head {
  margin-bottom: 28px;
}
.page-products .page-title {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
}
.page-products .page-intro {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  max-width: 64ch;
}
.page-products .section {
  margin-bottom: 46px;
}
.page-products .section-head {
  margin-bottom: 18px;
}

.page-products__magnet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.page-products__magnet {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 148px;
  padding: 14px;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease;
}
.page-products__magnet:hover {
  transform: translateY(-4px);
}
.page-products__magnet-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
  mix-blend-mode: overlay;
}
.page-products__magnet-icon {
  position: relative;
  font-size: 28px;
  line-height: 1;
  margin-bottom: auto;
  margin-top: 4px;
}
.page-products__magnet-name {
  position: relative;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  padding-right: 40px;
}
.page-products__magnet-count {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  opacity: .92;
  padding-right: 40px;
  margin-top: 2px;
}
.page-products__magnet-arrow {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.page-products__magnet--film { background: linear-gradient(135deg, var(--tag-film), #c9184a); }
.page-products__magnet--drama { background: linear-gradient(135deg, var(--tag-drama), var(--tag-sports)); }
.page-products__magnet--variety { background: linear-gradient(135deg, var(--tag-variety), var(--tag-doc)); }
.page-products__magnet--doc { background: linear-gradient(135deg, var(--tag-doc), var(--replay-start)); }
.page-products__magnet--sports { background: linear-gradient(135deg, var(--tag-sports), var(--live-start)); }
.page-products__magnet--game { background: linear-gradient(135deg, var(--nav-primary), #3a0ca3); }
.page-products__magnet--music { background: linear-gradient(135deg, var(--tag-film), var(--live-end)); }
.page-products__magnet--knowledge { background: linear-gradient(135deg, var(--replay-start), #3a86ff); }
.page-products__magnet--kids { background: linear-gradient(135deg, #ffd60a, #ffb703); color: #1a1a2e; }
.page-products__magnet--kids .page-products__magnet-arrow { background: rgba(26, 26, 46, .14); }
.page-products__magnet--life { background: linear-gradient(135deg, var(--status-live), #06d6a0); }
.page-products__magnet--all { background: linear-gradient(135deg, var(--replay-start), var(--nav-primary)); }
.page-products__magnet--update { background: linear-gradient(135deg, var(--live-start), var(--live-end)); }

.page-products__schedule-scroller,
.page-products__replay-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.page-products__schedule-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.page-products__schedule-table thead th {
  background: var(--grad-nav);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 13px 12px;
  text-align: left;
  white-space: nowrap;
}
.page-products__schedule-table thead th:first-child,
.page-products__schedule-table tbody th:first-child {
  width: 190px;
}
.page-products__schedule-table tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  white-space: nowrap;
  color: var(--text-primary);
}
.page-products__schedule-table tbody tr:nth-child(even) td {
  background: #f7f8fb;
}
.page-products__schedule-table tbody tr:hover td {
  background: #fff9db;
  box-shadow: inset 3px 0 0 var(--accent);
}
.page-products__schedule-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-primary);
}
.page-products__channel-logo {
  width: 80px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
  display: block;
}
.page-products__logo-block {
  width: 80px;
  height: 50px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.page-products__logo-block--drama { background: linear-gradient(135deg, var(--tag-drama), var(--tag-sports)); }
.page-products__logo-block--variety { background: linear-gradient(135deg, var(--tag-variety), var(--tag-doc)); }
.page-products__logo-block--doc { background: linear-gradient(135deg, var(--tag-doc), var(--replay-start)); }
.page-products__logo-block--sports { background: linear-gradient(135deg, var(--tag-sports), var(--live-start)); }
.page-products__logo-block--game { background: linear-gradient(135deg, var(--nav-primary), #3a0ca3); }
.page-products__logo-block--music { background: linear-gradient(135deg, var(--tag-film), var(--live-end)); }
.page-products__logo-block--kids { background: linear-gradient(135deg, #ffd60a, #ffb703); color: #1a1a2e; }
.page-products__logo-block--knowledge { background: linear-gradient(135deg, var(--replay-start), #3a86ff); }
.page-products__logo-block--life { background: linear-gradient(135deg, var(--status-live), #06d6a0); }
.page-products__programme {
  font-weight: 600;
  color: var(--text-primary);
}
.page-products__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.page-products__dot--live {
  background: var(--status-live);
  box-shadow: 0 0 0 3px rgba(0, 184, 148, .18);
}
.page-products__dot--replay {
  background: var(--status-replay);
  box-shadow: 0 0 0 3px rgba(255, 140, 66, .18);
}

.page-products__year-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
}
.page-products__year-link {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.2;
}
.page-products__year-link em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.page-products__year-link.is-now {
  background: var(--grad-replay);
  color: #fff;
  border-color: transparent;
}
.page-products__year-link.is-now em {
  color: rgba(255, 255, 255, .88);
}
.page-products__replay-group {
  margin-top: 22px;
  scroll-margin-top: 18px;
}
.page-products__replay-year {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: var(--grad-nav);
  color: #fff;
  border-radius: 14px 14px 0 0;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 900;
}
.page-products__replay-year span {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, .16);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.page-products__replay-scroller {
  border-radius: 0 0 14px 14px;
  box-shadow: var(--shadow-card);
  padding-bottom: 0;
}
.page-products__replay-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: var(--card);
}
.page-products__replay-table th {
  background: #efeff5;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.page-products__replay-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
  color: var(--text-primary);
}
.page-products__replay-table tbody tr:hover {
  background: #f0f4ff;
}
.page-products__replay-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--nav-primary);
}
.page-products__replay-color {
  display: inline-block;
  width: 10px;
  height: 30px;
  border-radius: 5px;
  vertical-align: middle;
}
.page-products__replay-color--film { background: var(--tag-film); }
.page-products__replay-color--drama { background: var(--tag-drama); }
.page-products__replay-color--variety { background: var(--tag-variety); }
.page-products__replay-color--doc { background: var(--tag-doc); }
.page-products__replay-color--sports { background: var(--tag-sports); }
.page-products__replay-color--game { background: var(--nav-primary); }
.page-products__replay-color--music { background: var(--live-end); }
.page-products__replay-color--kids { background: var(--accent); }
.page-products__replay-color--knowledge { background: var(--replay-start); }
.page-products__replay-color--life { background: var(--status-live); }
.page-products__replay-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.page-products__replay-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
  display: block;
}
.page-products__thumb-block {
  width: 120px;
  height: 80px;
  border-radius: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--replay-start), var(--nav-primary));
}
.page-products__batch-badge {
  display: inline-block;
  background: #eef0ff;
  color: var(--nav-primary);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.page-products__filter-tags {
  margin: 2px 0 18px;
  flex-wrap: wrap;
}
.page-products__filter-tags .tag {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.page-products__filter-tags .tag:hover {
  border-color: var(--nav-primary);
  color: var(--nav-primary);
}
.page-products__filter-tags .tag.is-active {
  background: var(--grad-nav);
  color: #fff;
  border-color: transparent;
}
.page-products__channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.page-products__channel-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s ease;
}
.page-products__channel-card:hover {
  transform: translateY(-4px);
}
.page-products__channel-media {
  position: relative;
  height: 118px;
  overflow: hidden;
}
.page-products__channel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-products__channel-media--live { background: linear-gradient(135deg, var(--live-start), var(--live-end)); }
.page-products__channel-media--replay { background: linear-gradient(135deg, var(--replay-start), var(--replay-end)); }
.page-products__channel-media--drama { background: linear-gradient(135deg, var(--tag-drama), var(--tag-sports)); }
.page-products__channel-media--drama2 { background: linear-gradient(135deg, var(--tag-sports), var(--live-start)); }
.page-products__channel-media--variety { background: linear-gradient(135deg, var(--tag-variety), var(--tag-doc)); }
.page-products__channel-media--doc { background: linear-gradient(135deg, var(--tag-doc), var(--replay-end)); }
.page-products__channel-media--sports { background: linear-gradient(135deg, var(--tag-film), var(--live-start)); }
.page-products__channel-media--game { background: linear-gradient(135deg, var(--nav-primary), #3a0ca3); }
.page-products__channel-media--music { background: linear-gradient(135deg, #c9184a, var(--live-end)); }
.page-products__channel-media--kids { background: linear-gradient(135deg, var(--accent), #ffb703); }
.page-products__channel-media--knowledge { background: linear-gradient(135deg, var(--replay-start), #3a86ff); }
.page-products__channel-media--life { background: linear-gradient(135deg, var(--status-live), #06d6a0); }
.page-products__channel-body {
  padding: 14px 14px 46px;
  position: relative;
}
.page-products__channel-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}
.page-products__channel-tag--film { background: var(--tag-film); }
.page-products__channel-tag--drama { background: var(--tag-drama); color: #1a1a2e; }
.page-products__channel-tag--variety { background: var(--tag-variety); }
.page-products__channel-tag--doc { background: var(--tag-doc); }
.page-products__channel-tag--sports { background: var(--tag-sports); }
.page-products__channel-tag--game { background: var(--nav-primary); }
.page-products__channel-tag--music { background: var(--live-end); }
.page-products__channel-tag--kids { background: var(--accent); color: #1a1a2e; }
.page-products__channel-tag--knowledge { background: var(--replay-start); }
.page-products__channel-tag--life { background: var(--status-live); color: #1a1a2e; }
.page-products__crisp {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
}
.page-products__crisp--blue { background: var(--crisp-blue); }
.page-products__crisp--green { background: var(--crisp-green); }
.page-products__crisp--purple { background: var(--crisp-purple); }
.page-products__crisp--gray { background: var(--crisp-gray); }
.page-products__channel-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
  color: var(--text-primary);
}
.page-products__channel-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.page-products__channel-card .status-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 11px;
}
.page-products__alpha-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
  padding: 12px 8px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.page-products__alpha-rail span {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f7;
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.page-products__tagcloud-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f1f0ff, #fff7e6);
  padding: 26px 18px;
}
.page-products__tagcloud-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
}
.page-products__tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  align-items: center;
}
.page-products__tag-link {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--border);
  transition: transform .2s ease;
}
.page-products__tag-link:hover {
  transform: translateY(-2px);
}
.page-products__tag-link--lg {
  font-size: 19px;
  background: var(--grad-live);
  color: #fff;
  border-color: transparent;
}
.page-products__tag-link--md {
  font-size: 15px;
  background: rgba(123, 47, 247, .1);
  color: var(--nav-primary);
  border-color: transparent;
}
.page-products__tag-link--sm {
  font-size: 13px;
}
.page-products__tag-link--sp {
  font-size: 11px;
  opacity: .85;
}

.page-products__page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.page-products__page-links .btn {
  padding: 10px 18px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .page-products {
    padding: 28px 32px 64px;
  }
  .page-products .page-title {
    font-size: 38px;
  }
  .page-products .page-intro {
    font-size: 16px;
  }
  .page-products__magnet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .page-products__magnet {
    min-height: 190px;
    padding: 18px;
  }
  .page-products__schedule-scroller,
  .page-products__replay-scroller {
    overflow-x: visible;
    padding-bottom: 2px;
  }
  .page-products__schedule-table {
    min-width: 0;
  }
  .page-products__replay-table {
    min-width: 0;
  }
  .page-products__channel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .page-products__channel-media {
    height: 130px;
  }
  .page-products__tagcloud-panel {
    padding: 34px 28px;
  }
}