/* Packages: TV channel-guide style (cover once + list rows) */
.pguide {
  --pc-ink: var(--ink, #2a2d5c);
  --pc-dim: var(--ink-dim, rgba(42, 45, 92, .8));
  display: grid;
  grid-template-columns: clamp(180px, 20%, 260px) 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}

/* Cover: Lumi of this app, shown once */
.pguide__cover {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
}
.pguide__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 0 3px #fff, 0 0 36px -6px color-mix(in srgb, var(--glow, #7c6cf0) 55%, transparent), 0 14px 30px rgba(90, 70, 150, .2);
}
.pguide__info { display: grid; gap: 2px; color: var(--pc-dim); font-size: 14px; }
.pguide__info > b { font: 600 20px "Prompt", sans-serif; color: var(--pc-ink); font-feature-settings: "liga" 0; }
.pguide__from b { font: 600 18px "Prompt", sans-serif; color: color-mix(in srgb, var(--glow, #7c6cf0) 75%, var(--pc-ink)); }

.pguide__list { display: grid; gap: 10px; }

/* One package row */
.prow {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 14px clamp(14px, 1.6vw, 22px) 14px 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: var(--pc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(42, 45, 92, .06), 0 4px 14px rgba(90, 70, 150, .08);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s;
}

/* TV OSD channel number (same look as loader / CH badge) */
.prow__ch {
  min-width: 2.4em;
  padding: 4px 8px;
  border-radius: 10px;
  background: #1d1f3a;
  color: var(--osd, #7dff9a);
  font: 24px/1 "VT323", monospace;
  text-align: center;
  text-shadow: 0 0 6px rgba(125, 255, 154, .6);
}

.prow__main { display: grid; gap: 3px; min-width: 0; }
.prow__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font: 600 clamp(16px, 1.25vw, 20px)/1.3 "Prompt", sans-serif;
  font-feature-settings: "liga" 0;
}
.prow__off, .prow__out {
  padding: 1px 9px;
  border-radius: 999px;
  font: 600 12.5px "Prompt", sans-serif;
}
.prow__off { background: color-mix(in srgb, var(--glow, #7c6cf0) 14%, #fff); color: color-mix(in srgb, var(--glow, #7c6cf0) 80%, #000); }
.prow__out { background: #ecebf2; color: #8a8aa3; }
.prow__detail {
  color: var(--pc-dim);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prow__price { display: grid; justify-items: end; line-height: 1.1; white-space: nowrap; }
.prow__price s { color: var(--pc-dim); font-size: 13.5px; }
.prow__price b { font: 600 clamp(22px, 1.9vw, 28px) "Prompt", sans-serif; }

/* Remote "OK" button */
.prow__go {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--glow, #7c6cf0) 12%, #fff);
  color: var(--glow, #7c6cf0);
  transition: background-color .2s, color .2s, transform .2s;
}

/* Focus / hover: like moving the TV cursor onto a channel */
.prow:hover, .prow:focus-visible, [data-device="tv"] .prow:focus {
  outline: none;
  background: #fff;
  transform: translateX(6px);
  box-shadow: 0 0 0 3px var(--glow, #7c6cf0), 0 10px 28px color-mix(in srgb, var(--glow, #7c6cf0) 28%, transparent);
}
.prow:hover .prow__go, .prow:focus-visible .prow__go, [data-device="tv"] .prow:focus .prow__go {
  background: var(--glow, #7c6cf0);
  color: var(--on-glow, #fff);
  transform: scale(1.08);
}
.prow:active { transform: translateX(6px) scale(.99); }
:is([data-device="phone"], [data-device="tablet"]) .prow:hover { transform: none; }

/* Sold out */
.prow.is-soldout { cursor: not-allowed; background: rgba(255, 255, 255, .5); box-shadow: none; }
.prow.is-soldout .prow__ch { background: #c9c8d6; color: #fff; text-shadow: none; }
.prow.is-soldout .prow__name, .prow.is-soldout .prow__price b { color: #8a8aa3; }
.prow.is-soldout .prow__go { background: #ecebf2; color: #b3b2c4; }
.prow.is-soldout:hover, .prow.is-soldout:focus-visible { transform: none; box-shadow: 0 0 0 2px #c9c8d6; }

@media (prefers-reduced-motion: reduce) {
  .prow, .prow__go { transition: none; }
}

/* Tablet/phone: cover becomes a slim header row */
@media (max-width: 860px) {
  .pguide { grid-template-columns: 1fr; }
  .pguide__cover { position: static; grid-template-columns: 72px 1fr; align-items: center; }
  .pguide__cover img { border-radius: 16px; }
  .pguide__info > b { font-size: 18px; }
}
@media (max-width: 640px) {
  .prow {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "ch main main" "ch price go";
    row-gap: 8px;
    padding: 12px;
    align-items: start;
  }
  .prow__ch { grid-area: ch; font-size: 20px; min-width: 2.2em; }
  .prow__main { grid-area: main; }
  .prow__price { grid-area: price; justify-items: start; align-self: center; }
  .prow__go { grid-area: go; width: 36px; height: 36px; }
}