/*
 * Final hero corrections. The main stylesheet still contains older hero rules
 * from the previous live UI, so these overrides keep the prototype carousel
 * geometry stable across desktop, tablet, and narrow mobile widths.
 */
.pica-view-enter {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.pica-view-enter.pica-view-ready {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.pica-share-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    z-index: 9999;
    transform: translate(-50%, 12px);
    padding: 9px 14px;
    border: 1px solid rgba(31, 198, 243, 0.35);
    border-radius: 999px;
    background: rgba(8, 12, 22, 0.92);
    color: #f4f7ff;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pica-share-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pica-hero {
    isolation: isolate !important;
    overflow: hidden !important;
}

.pica-hero-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
}

.pica-hero-track {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    height: 100% !important;
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.68s cubic-bezier(0.22, 0.74, 0.22, 1) !important;
}

.pica-hero-slide {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.pica-hero-poster {
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    bottom: 18px !important;
    width: clamp(170px, 22vw, 245px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: calc(100% - 36px) !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
}

.pica-hero-copy {
    position: absolute !important;
    left: 24px !important;
    right: auto !important;
    bottom: 40px !important;
    z-index: 4 !important;
    width: min(54%, 620px) !important;
    max-width: none !important;
}

.pica-slider-arrows {
    z-index: 5 !important;
    pointer-events: none !important;
}

.pica-slider-arrows button {
    pointer-events: auto !important;
}

.pica-poster-wrap,
.pica-side-thumb {
    position: relative !important;
}

.pica-card .pica-card-meta,
.pica-side-item .pica-card-meta {
    display: none !important;
}

.pica-card-badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 3 !important;
    min-width: 0 !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    background: rgba(7, 10, 18, 0.82) !important;
    border: 1px solid rgba(255, 179, 0, 0.28) !important;
    color: var(--pica-gold) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3) !important;
}

.pica-card-info {
    padding-bottom: 0 !important;
}

.pica-card-title {
    margin-bottom: 0 !important;
}

.pica-side-item {
    grid-template-columns: 68px minmax(0, 1fr) !important;
}

.pica-side-thumb {
    width: 68px !important;
    aspect-ratio: 5 / 7 !important;
}

.pica-side-thumb img {
    width: 100% !important;
    height: 100% !important;
}

.pica-side-thumb .pica-card-badge {
    top: 4px !important;
    right: 4px !important;
    height: 19px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
}

.pica-vj-badge,
.pica-series-badge {
    position: absolute !important;
    top: 7px !important;
    z-index: 4 !important;
    max-width: calc(100% - 14px) !important;
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    background: rgba(7, 10, 18, 0.84) !important;
    border: 1px solid rgba(0, 210, 245, 0.3) !important;
    color: var(--pica-cyan) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
}

.pica-vj-badge {
    left: 7px !important;
    right: auto !important;
    max-width: calc(100% - 56px) !important;
}

.pica-series-badge {
    right: 7px !important;
    left: auto !important;
    background: rgba(255, 179, 0, 0.18) !important;
    border-color: rgba(255, 179, 0, 0.34) !important;
    color: var(--pica-gold) !important;
}

.pica-feed-sentinel {
    min-height: 34px !important;
    display: grid !important;
    place-items: center !important;
}

.pica-feed-sentinel span {
    display: none !important;
}

.pica-card {
    transition: opacity 0.22s ease, transform 0.22s ease !important;
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
}

.pica-card:hover,
.pica-card:focus,
.pica-card-title {
    text-decoration: none !important;
}

.pica-card.is-entering {
    opacity: 0 !important;
    transform: translateY(10px) scale(0.985) !important;
}

.pica-card-skeleton {
    pointer-events: none !important;
}

.pica-loading-page {
    animation: pica-page-soft-in 0.18s ease-out both !important;
}

.pica-loading-page .pica-page-title {
    color: rgba(238, 242, 255, 0.9) !important;
}

.pica-loading-page .pica-section-head h2 {
    color: rgba(238, 242, 255, 0.72) !important;
}

.pica-hero-skeleton {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(238, 242, 255, 0.06) !important;
    background: linear-gradient(135deg, rgba(0, 210, 245, 0.08), rgba(238, 242, 255, 0.07), rgba(255, 179, 0, 0.08)) !important;
}

.pica-hero-skeleton::after,
.pica-detail-video-skeleton::after,
.pica-skeleton-line::after,
.pica-cast-skeleton .pica-cast-thumb::after,
.pica-resources-skeleton .pica-episode-grid button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(-100%) !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
    animation: pica-skeleton-sweep 1.25s ease-in-out infinite !important;
}

.pica-hero-skeleton-poster {
    width: clamp(150px, 22vw, 245px) !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 8px !important;
    background: rgba(238, 242, 255, 0.1) !important;
}

.pica-hero-skeleton-copy {
    position: absolute !important;
    left: 24px !important;
    bottom: 40px !important;
    width: min(54%, 620px) !important;
    display: grid !important;
    gap: 10px !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(238, 242, 255, 0.08) !important;
    border-radius: 8px !important;
    background: rgba(20, 13, 16, 0.54) !important;
}

.pica-hero-skeleton-copy b,
.pica-hero-skeleton-copy span,
.pica-skeleton-line {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: rgba(238, 242, 255, 0.1) !important;
}

.pica-hero-skeleton-copy b {
    width: 58% !important;
    height: 26px !important;
}

.pica-hero-skeleton-copy span,
.pica-skeleton-line.short {
    width: 34% !important;
}

.pica-skeleton-line.wide {
    width: min(100%, 620px) !important;
    height: 22px !important;
}

.pica-detail-video-skeleton {
    background: linear-gradient(135deg, rgba(0, 210, 245, 0.07), rgba(238, 242, 255, 0.06)) !important;
}

.pica-skeleton-play {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 999px !important;
    background: rgba(238, 242, 255, 0.1) !important;
    transform: translate(-50%, -50%) !important;
}

.pica-skeleton-controls {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.pica-cast-skeleton .pica-cast-thumb,
.pica-resources-skeleton .pica-episode-grid button {
    position: relative !important;
    overflow: hidden !important;
    background: rgba(238, 242, 255, 0.1) !important;
}

.pica-card-skeleton .pica-poster-wrap,
.pica-card-skeleton .pica-card-info b {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(0, 210, 245, 0.09), rgba(238, 242, 255, 0.07), rgba(0, 210, 245, 0.05)) !important;
}

.pica-card-skeleton .pica-poster-wrap::after,
.pica-card-skeleton .pica-card-info b::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(-100%) !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
    animation: pica-skeleton-sweep 1.25s ease-in-out infinite !important;
}

.pica-card-skeleton .pica-card-info b {
    display: block !important;
    width: 72% !important;
    height: 14px !important;
    margin: 10px auto 0 !important;
    border-radius: 999px !important;
}

.pica-inline-video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    object-fit: contain !important;
}

.pica-inline-video.is-active,
.pica-inline-video[src]:not([src=""]) {
    display: block !important;
}

/* Watch Movie button — sits in the controls bar */
.pica-watch-movie-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 11px !important;
    min-height: 28px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--pica-gold, #ffb300) !important;
    color: #0a0800 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s ease !important;
}

.pica-watch-movie-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

.pica-watch-movie-btn:hover {
    opacity: 0.85 !important;
}

.pica-watch-movie-btn.is-gone {
    display: none !important;
}

.pica-video-panel.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 46%, rgba(31, 198, 243, 0.22), transparent 24%),
        rgba(0, 0, 0, 0.28);
    animation: pica-player-flicker 0.56s ease-in-out infinite alternate;
}

.pica-video-panel.is-fill .pica-inline-video,
.pica-video-panel.is-fill > img {
    object-fit: cover !important;
}

.pica-video-panel.is-browser-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    background: #000 !important;
}

@keyframes pica-player-flicker {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 0.86;
    }
}

.pica-play-center.is-hidden {
    display: none !important;
}

.pica-progress-line span {
    width: 0;
}

.pica-progress-line {
    cursor: pointer !important;
    touch-action: none !important;
}

.pica-mini-btn.is-volume svg {
    display: block !important;
}

.pica-mini-btn.is-volume.is-muted {
    color: rgba(238, 242, 255, 0.42) !important;
}

@media (max-width: 1024px) {
    .pica-volume-range {
        display: block !important;
        width: 56px !important;
        min-width: 56px !important;
        accent-color: var(--pica-cyan) !important;
    }
}

.pica-quality-control {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
}

.pica-quality-control summary {
    list-style: none !important;
}

.pica-quality-control summary::-webkit-details-marker {
    display: none !important;
}

.pica-quality-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: 44px !important;
    z-index: 12 !important;
    min-width: 150px !important;
    display: grid !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid rgba(0, 210, 245, 0.18) !important;
    border-radius: 8px !important;
    background: rgba(15, 19, 32, 0.98) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

.pica-quality-control:not([open]) .pica-quality-menu {
    display: none !important;
}

.pica-quality-menu button {
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(238, 242, 255, 0.08) !important;
    color: var(--pica-text) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.pica-quality-menu button.active,
.pica-quality-menu button:hover {
    background: var(--pica-cyan) !important;
    color: #061015 !important;
}

.pica-settings-menu button {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

.pica-settings-menu button:hover {
    background: rgba(238, 242, 255, 0.08) !important;
}

.pica-search-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pica-search-filters::-webkit-scrollbar {
    display: none;
}

.pica-search-filters a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--pica-text);
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
}

.pica-search-filters a.active {
    background: rgba(0, 210, 245, 0.14);
    color: var(--pica-cyan);
}

.pica-feed-sentinel .pica-card-skeleton {
    pointer-events: none;
}

.pica-feed-sentinel {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    min-height: 1px;
}

.pica-ugandan-feed {
    display: grid;
    gap: 26px;
}

.pica-vj-section.is-loading {
    min-height: 260px;
}

.pica-vj-actions {
    display: flex;
    justify-content: center;
    padding: 8px 0 0;
}

.pica-vj-actions button {
    min-height: 38px;
    border: 1px solid rgba(0, 210, 245, 0.28);
    border-radius: 999px;
    background: rgba(0, 210, 245, 0.1);
    color: var(--pica-cyan);
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
}

.pica-vj-actions button:hover {
    background: var(--pica-cyan);
    color: #061015;
}

.pica-vj-actions button[hidden] {
    display: none;
}

.pica-vj-actions button:disabled {
    cursor: wait;
    opacity: 0.7;
}

@media (max-width: 1024px) {
    .pica-mobile-search {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 64px !important;
        z-index: 89 !important;
        padding: 12px 18px 16px !important;
        background: rgba(8, 10, 18, 0.98) !important;
        border-bottom: 1px solid rgba(0, 210, 245, 0.18) !important;
        transform: translateY(-110%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.18s ease, opacity 0.18s ease !important;
    }

    .pica-search-open .pica-mobile-search {
        display: block !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .pica-mobile-search form {
        display: grid !important;
        gap: 14px !important;
        margin: 0 !important;
    }

    .pica-mobile-search-field {
        position: relative !important;
        display: block !important;
    }

    .pica-mobile-search input {
        width: 100% !important;
        height: 46px !important;
        border: 1px solid rgba(136, 146, 176, 0.34) !important;
        border-radius: 10px !important;
        background: #20232b !important;
        color: var(--pica-text) !important;
        padding: 0 44px 0 13px !important;
        outline: 0 !important;
        font-size: 18px !important;
    }

    .pica-mobile-search-field button {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        width: 22px !important;
        height: 22px !important;
        transform: translateY(-50%) !important;
        display: grid !important;
        place-items: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(238, 242, 255, 0.48) !important;
        color: #1a1d26 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        padding: 0 !important;
    }

    .pica-mobile-search-submit {
        width: 100% !important;
        min-height: 50px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: linear-gradient(90deg, #00a9d4, var(--pica-cyan)) !important;
        color: #061015 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        cursor: pointer !important;
    }

    .pica-search-filters {
        gap: 12px !important;
        margin: 2px -2px 20px !important;
        padding-bottom: 4px !important;
    }

    .pica-search-filters a {
        min-height: 38px !important;
        padding: 0 14px !important;
    }

    .pica-feed-sentinel {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

.pica-resources-loading {
    min-height: 220px !important;
}

.pica-resources-loading .pica-source-line {
    align-items: center !important;
}

.pica-resources-loading .pica-skeleton-line {
    display: inline-block !important;
    height: 12px !important;
    width: 110px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(238, 242, 255, 0.08), rgba(238, 242, 255, 0.18), rgba(238, 242, 255, 0.08)) !important;
    background-size: 220% 100% !important;
    animation: pica-skeleton-sweep 1.25s ease-in-out infinite !important;
}

.pica-resources-loading .pica-skeleton-line.short {
    width: 82px !important;
}

.pica-resources-loading .pica-episode-grid button {
    min-height: 38px !important;
    border: 0 !important;
    background: rgba(238, 242, 255, 0.08) !important;
    animation: pica-skeleton-sweep 1.25s ease-in-out infinite !important;
}

.pica-mobile-tools button.is-disabled,
.pica-mobile-tools button:disabled {
    opacity: 0.38 !important;
    cursor: default !important;
    color: rgba(238, 242, 255, 0.45) !important;
}

.pica-season-select {
    position: relative !important;
    min-width: 128px !important;
}

.pica-season-select summary {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 12px !important;
    border: 1px solid rgba(238, 242, 255, 0.14) !important;
    border-radius: 7px !important;
    background: rgba(238, 242, 255, 0.08) !important;
    color: var(--pica-text) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    list-style: none !important;
}

.pica-season-select summary::-webkit-details-marker {
    display: none !important;
}

.pica-season-select summary::after {
    content: "▾" !important;
    margin-left: 8px !important;
    font-size: 10px !important;
    color: rgba(238, 242, 255, 0.78) !important;
}

.pica-season-select div {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    z-index: 20 !important;
    min-width: 148px !important;
    display: grid !important;
    gap: 5px !important;
    padding: 8px !important;
    border: 1px solid rgba(0, 210, 245, 0.18) !important;
    border-radius: 8px !important;
    background: rgba(15, 19, 32, 0.98) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

.pica-season-select:not([open]) div {
    display: none !important;
}

.pica-season-select button {
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(238, 242, 255, 0.08) !important;
    color: var(--pica-text) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.pica-cast-card {
    width: clamp(86px, 9vw, 130px) !important;
    min-width: clamp(86px, 9vw, 130px) !important;
    color: var(--pica-text) !important;
    text-decoration: none !important;
}

.pica-cast-card .pica-cast-thumb,
.pica-cast-card img.pica-cast-thumb,
.pica-cast-card .pica-cast-fallback {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

.pica-cast-card .pica-cast-fallback {
    color: var(--pica-cyan) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    background: var(--pica-panel-2) !important;
}

.pica-cast-more {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.pica-actor-hero {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(0, 210, 245, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(15, 19, 32, 0.82) !important;
}

.pica-actor-hero img,
.pica-actor-avatar {
    width: 86px !important;
    height: 86px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background: var(--pica-panel-2) !important;
}

.pica-actor-avatar {
    display: grid !important;
    place-items: center !important;
    color: var(--pica-cyan) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
}

.pica-actor-hero h1 {
    margin: 0 !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1 !important;
}

.pica-actor-hero p {
    margin: 8px 0 0 !important;
    color: var(--pica-muted) !important;
    font-weight: 800 !important;
}

@keyframes pica-skeleton-sweep {
    to {
        transform: translateX(100%);
    }
}

@keyframes pica-page-soft-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pica-hero-bg {
    transition: none !important;
}

.pica-hero-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;
    z-index: 6 !important;
    display: flex !important;
    gap: 7px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.pica-hero-dots span {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    transition: width 0.22s ease, background 0.22s ease !important;
}

.pica-hero-dots span.active {
    width: 18px !important;
    background: var(--pica-cyan) !important;
}

.pica-live-topbar {
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.pica-live-brand {
    flex: 0 0 auto !important;
}

.pica-live-navlinks {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

.pica-live-search {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
}

.pica-live-search input {
    min-width: 0 !important;
}

@media (min-width: 821px) {
    .pica-row {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 96px) / 7) !important;
        gap: 16px !important;
        overflow-x: auto !important;
        padding-right: 0 !important;
    }

    .pica-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 18px 16px !important;
    }

    .pica-row .pica-card,
    .pica-grid .pica-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 1320px) and (min-width: 821px) {
    .pica-live-topbar {
        gap: 10px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .pica-live-brand img {
        width: 128px !important;
    }

    .pica-live-navlinks {
        gap: 13px !important;
    }

    .pica-live-navlinks a {
        font-size: 14px !important;
    }

    .pica-live-navlinks a[href="index.php?cat=more"] {
        display: none !important;
    }

    .pica-live-search {
        gap: 8px !important;
    }

    .pica-live-search input {
        width: clamp(170px, 20vw, 260px) !important;
    }

    .pica-live-search button {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .pica-live-app {
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 1180px) {
    .pica-side {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .pica-live-topbar {
        display: flex !important;
        align-items: center !important;
    }

    .pica-live-brand {
        order: 1 !important;
        margin-right: auto !important;
        min-width: 0 !important;
    }

    .pica-live-app {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    .pica-live-search-toggle {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    .pica-live-icon[aria-label="Menu"] {
        order: 4 !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 1180px) {
    .pica-hero-poster {
        width: clamp(160px, 28vw, 230px) !important;
    }

    .pica-hero-copy {
        width: min(58%, 560px) !important;
    }
}

@media (max-width: 820px) {
    .pica-hero-poster {
        top: 16px !important;
        bottom: 16px !important;
        width: clamp(150px, 34vw, 220px) !important;
        max-height: calc(100% - 32px) !important;
    }

    .pica-hero-copy {
        left: 18px !important;
        bottom: 34px !important;
        width: min(64%, 520px) !important;
    }
}

@media (max-width: 820px) {
    .pica-row {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 18px) / 3) !important;
        gap: 9px !important;
        overflow-x: auto !important;
        padding-right: 0 !important;
    }

    .pica-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .pica-row .pica-card,
    .pica-grid .pica-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 520px) {
    .pica-hero-poster {
        width: clamp(132px, 42vw, 182px) !important;
    }

    .pica-hero-copy {
        position: absolute !important;
        left: 58px !important;
        right: 58px !important;
        bottom: 30px !important;
        width: auto !important;
        max-width: none !important;
    }

    .pica-hero-dots {
        bottom: 4px !important;
    }
}

/* ── Mobile Player: full-width 16:9 video, controls below ───────────────── */
@media (max-width: 1024px) {

    /* Player shell stacks vertically */
    .pica-player-shell {
        display: flex !important;
        flex-direction: column !important;
    }

    /* ── Video panel: full width, strict 16:9 ── */
    .pica-video-panel {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 210px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        overflow: visible !important; /* Must be visible so controls can sit below! */
        margin-bottom: 84px !important; /* Reserve space for the controls below */
    }

    /* Poster / backdrop image fills the box */
    .pica-video-panel > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ── Controls bar: pulled OUT of the video, sits below it ── */
    .pica-mini-controls {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* CENTER the controls */
        flex-wrap: wrap !important;
        gap: 8px 12px !important; /* more horizontal gap, less vertical */
        padding: 14px 10px 10px !important; /* 14px top padding to clear absolute progress bar */
        background: #0d1018 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        z-index: 10 !important;
    }

    /* Progress bar — absolute edge-to-edge at the top of the controls bar */
    .pica-progress-line {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 4px !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .pica-progress-line span {
        background: var(--pica-cyan, #00D2F5) !important;
        border-radius: 0 !important;
    }

    /* Resources panel sits below the controls bar */
    .pica-resources {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid rgba(0, 210, 245, 0.12) !important;
        padding: 16px !important;
    }

    /* Watch Movie button — gold, prominent */
    .pica-watch-movie-btn {
        font-size: 12px !important;
        padding: 0 12px !important;
        min-height: 30px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    /* Play-center button: bigger tap target */
    .pica-play-center {
        width: 60px !important;
        height: 60px !important;
    }

    /* Mini buttons: bigger tap targets */
    .pica-mini-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 4px !important;
    }

    /* Time display */
    .pica-mini-time {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Fullscreen expand icon row */
    .pica-video-top-controls {
        padding: 8px 10px !important;
    }
}

@media (max-width: 520px) {
    .pica-video-panel {
        min-height: 180px !important;
    }

    /* Hide verbose quality label, show short version only */
    .pica-mini-pill .quality-full {
        display: none !important;
    }

    /* Slightly smaller controls text on tiny phones */
    .pica-mini-time {
        font-size: 10px !important;
    }
}