/* VoicePa discovery pages: scoped so profile/editor layouts keep their own geometry. */
#page:is(.voicepa-homepage, .voicepa-dlgoods) {
    --vp-home-ink: #263747;
    --vp-home-muted: #657587;
    --vp-home-blue: #10658c;
    --vp-home-line: #dce6ed;
    --vp-home-gap: 8px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-content,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter-panel {
    position: relative;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    clear: both;
    margin: 10px 0 0;
}

/* Native radio navigation also works with Tab / Arrow keys, without a second JS tab system. */
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-switch {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--vp-home-line);
    border-radius: 10px;
    background: #f6f9fb;
    color: #45596a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-label:hover {
    border-color: #abcfe0;
    background: #edf6fb;
    color: var(--vp-home-blue);
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-switch:checked + .tab-label {
    border-color: #92c4df;
    background: #e2f2fb;
    color: #105f84;
    box-shadow: inset 0 -2px 0 #50a7d0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-switch:focus-visible + .tab-label,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter select:focus-visible,
#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) a:focus-visible,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight a:focus-visible {
    outline: 2px solid #087aaf;
    outline-offset: 3px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-content {
    flex: 0 0 100%;
    width: 100%;
    margin: 2px 0 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 10px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter__label {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 7px;
    border-radius: 6px;
    background: #f3f7fa;
    color: var(--vp-home-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--vp-home-line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--vp-home-ink);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]),
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--vp-home-gap);
    clear: both;
    width: 100%;
    min-width: 0;
    margin: 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) > article,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid > article {
    position: relative;
    display: block;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 13px;
    isolation: isolate;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) > :not(article) {
    grid-column: 1 / -1;
    min-width: 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) :is(.featured-thumbnail-frontmaintop, .featured-thumbnail-frontmaintop2),
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid :is(.featured-thumbnail-frontmaintop, .featured-thumbnail-frontmaintop2) {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 13px;
    background: #eaf0f4;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) img:is(.featured-thumbnail-frontmaintop-img, .featured-thumbnail-frontmaintop-img2sm),
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid img:is(.featured-thumbnail-frontmaintop-img, .featured-thumbnail-frontmaintop-img2sm) {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border-radius: 13px;
    object-fit: cover;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) :is(.overlay-info, .overlay-infosm, .overlay-info-live, .overlay-infosm-live),
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid :is(.overlay-info, .overlay-infosm, .overlay-info-live, .overlay-infosm-live) {
    position: absolute;
    top: auto;
    right: 0;
    /* Legacy footer measurements write an inline negative bottom on these cards. */
    bottom: 0 !important;
    left: 0;
    z-index: 3;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 22px 10px 9px;
    border-radius: 0 0 13px 13px;
    background: linear-gradient(180deg, rgba(18, 29, 44, 0), rgba(18, 29, 44, .7) 28%, rgba(18, 29, 44, .88));
    color: #fff;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .post-info,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .post-info {
    min-width: 0;
    margin: 0;
    color: #eef3f7;
    line-height: 1.45;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .title-frontmain03,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .title-frontmain03 {
    margin: 0 0 3px;
    font-size: 13px;
    line-height: 1.5;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .title-frontmain03 a,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .title-frontmain03 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #fff;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .title-frontmain03 a:hover,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .title-frontmain03 a:hover {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .theauthor,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .theauthor {
    display: inline-block;
    max-width: calc(100% - 40px);
    overflow: hidden;
    color: #eef3f7;
    font-size: 11px;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .theauthor a,
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .theauthor a {
    color: inherit;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) > article > [class*="indexribbon"],
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid > article > [class*="indexribbon"] {
    max-width: calc(100% - 12px);
    box-sizing: border-box;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) [data-vp-feed-kind="cast"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) [data-vp-feed-kind="cast"] > article {
    padding-bottom: 7px;
    border: 1px solid var(--vp-home-line);
    overflow: hidden;
    background: #fff;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) [data-vp-feed-kind="cast"] .title-frontmain05 {
    margin: 0;
    padding: 9px 11px 5px;
    color: var(--vp-home-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) [data-vp-feed-kind="cast"] .subtitle-frontmain05 {
    margin: 0 11px 8px;
    padding: 0;
    border: 0;
    color: var(--vp-home-muted);
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-feed-empty {
    margin: 0;
    padding: 20px 14px;
    border: 1px dashed #d4e2eb;
    border-radius: 10px;
    background: #f7fafc;
    color: var(--vp-home-muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight {
    clear: both;
    margin: 12px 0 14px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-section-title {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vp-home-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 900px) {
    #page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]):not([data-vp-feed-kind="cast"]),
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-label {
        min-height: 44px;
        padding: 8px 5px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    #page:is(.voicepa-homepage, .voicepa-dlgoods) {
        --vp-home-gap: 6px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs {
        gap: 4px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) [data-vp-feed-kind="cast"] {
        grid-template-columns: minmax(0, 1fr);
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) :is(.overlay-info, .overlay-infosm, .overlay-info-live, .overlay-infosm-live),
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid :is(.overlay-info, .overlay-infosm, .overlay-info-live, .overlay-infosm-live) {
        padding: 18px 7px 7px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-feed], [data-vp-feed]) .title-frontmain03,
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__grid .title-frontmain03 {
        font-size: 12px;
        line-height: 1.45;
    }
}

@media (max-width: 360px) {
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs > .tab-label {
        font-size: 11px;
    }
}

/* Home discovery: one compact heading and a short shelf before the full feed. */
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-heading > div {
    min-width: 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vp-home-ink);
    font: inherit;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.02em;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-intro {
    margin: 3px 0 0;
    color: var(--vp-home-muted);
    font-size: 12px;
    line-height: 1.55;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-community {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid #cfdeeb;
    border-radius: 10px;
    background: #f3f8fc;
    color: #27648a;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is(.vp-home-community, .vp-home-text-action, .vp-home-rail-control) svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-section-heading .vp-home-section-title {
    margin: 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-section-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is(.vp-home-text-action, .vp-home-rail-control) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #226990;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-rail-control {
    min-width: 40px;
    padding: 6px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-rail-control[data-vp-home-rail-step="-1"] svg {
    transform: rotate(180deg);
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is(.vp-home-text-action, .vp-home-rail-control):hover:not(:disabled),
#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-community:hover {
    border-color: #c2dbea;
    background: #eaf4fb;
    color: #175b81;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-rail-control:disabled {
    color: #a1adb7;
    cursor: default;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is([data-vp-home-open], [data-vp-home-rail-step])[hidden] {
    display: none !important;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) :is(.vp-home-community, .vp-home-text-action, .vp-home-rail-control, [data-vp-home-rail]):focus-visible {
    outline: 2px solid #087aaf;
    outline-offset: 2px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-feed-empty p {
    margin: 0;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-tabs {
    scroll-margin-top: 100px;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(138px, 41vw, 188px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    padding: 2px 0 6px;
    scrollbar-width: thin;
    scrollbar-color: #b0c3d2 transparent;
    -webkit-overflow-scrolling: touch;
}

#page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__rail > article {
    scroll-snap-align: start;
}

@media (max-width: 900px) {
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-filter select {
        min-height: 44px;
        /* Keep iOS from zooming the whole page when a filter receives focus. */
        font-size: 16px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight {
        margin: 8px 0 10px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-highlight__rail .title-frontmain03 {
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-width: 380px) {
    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-heading {
        gap: 8px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-intro {
        max-width: 18em;
        font-size: 11px;
    }

    #page:is(.voicepa-homepage, .voicepa-dlgoods) .vp-home-community {
        padding-inline: 8px;
    }
}