/* Shred Finder — favourites page (/favourites): budget + ships-to pickers, one glowing
   panel, sideways-scrolling rows of "★ Our pick" cards */
/* ── Favourites page (/favourites) ─────────────────────────────────── */
.favourites-page {
    max-width: 1120px;
    margin: 0 auto;
}

/* Ships-to dropdown sits under the budget pills */
.picks > .ship-mini {
    display: block;
    width: 240px;
    max-width: 100%;
}

/* ── My budget: a row of pill buttons instead of a dropdown ─────────────
   zOS draws radio inputs + labels; the input hides, the label IS the pill,
   the checked one turns lime (with a small bounce) */
.pill-choice .zForm-check-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.pill-choice .zForm-check-group > .zLabel {
    width: 100%;
    margin-bottom: 2px;
}

.pill-choice .zForm-check {
    position: relative;
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.pill-choice .zForm-check-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.pill-choice .zForm-check-label {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 2px solid var(--sf-line);
    background: var(--sf-surface-2);
    color: var(--sf-text);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition:
        border-color var(--sf-quick) var(--sf-ease),
        background-color var(--sf-quick) var(--sf-ease),
        transform var(--sf-standard) var(--sf-bounce);
}

.pill-choice .zForm-check-label:hover {
    border-color: var(--sf-lime);
    transform: translateY(-2px);
}

.pill-choice .zForm-check:has(:checked) .zForm-check-label,
.pill-choice .zForm-check-group:not(:has(:checked)) .zForm-check:nth-child(2) .zForm-check-label {
    color: #10160f;
    background: var(--sf-lime);
    border-color: var(--sf-lime);
    box-shadow: 0 6px 18px rgba(198, 244, 50, 0.25);
}

.pill-choice .zForm-check:has(:checked) .zForm-check-label {
    animation: sf-pop 240ms var(--sf-bounce) both;
}

.pill-choice .zForm-check:has(:focus-visible) .zForm-check-label {
    outline: 3px solid var(--sf-lime);
    outline-offset: 2px;
}

/* the favourites live in their own glowing panel so they read as OUR picks */
.picks {
    margin-top: 24px;
    padding: 28px 24px 24px;
    text-align: left;
    border-radius: 22px;
    border: 2px solid rgba(198, 244, 50, 0.45);
    background:
        radial-gradient(circle at 0% 0%, rgba(198, 244, 50, 0.14), transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, 0.10), transparent 40%),
        var(--sf-surface);
    box-shadow: 0 0 40px rgba(198, 244, 50, 0.08);
}

/* "Picked for you → budget … · shipping to …" — repaints with every change */
.favs-for {
    display: inline-block;
    margin: 6px 0 4px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    color: #10160f;
    background: var(--sf-lime);
    animation: sf-pop 260ms var(--sf-bounce) both;
}

/* every favourite card wears a badge */
.pick-strip .bike-card::after {
    content: '★ Our pick';
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #10160f;
    background: var(--sf-orange);
}

.picks-intro h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3rem);
    text-transform: uppercase;
    margin: 0 0 4px;
    color: var(--sf-text);
}

.picks-intro p {
    color: var(--sf-muted);
    margin: 0 0 8px;
}

/* "My budget" — a lime-edged pill that re-picks every row below as you change it */
.budget-picker {
    margin: 14px 0 4px;
}

.budget-picker .zDialog-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.budget-picker .zDialog-form > .zmb-3 {
    margin: 0 !important;
}

.budget-picker .zDialog-feedback:empty {
    display: none;
}

.budget-picker .zSelect {
    height: 52px;
    border-radius: 999px !important;
    border: 2px solid var(--sf-lime) !important;
    padding: 0 20px;
    font-weight: 600;
}

.pick-row {
    margin-top: 28px;
    animation: sf-rise var(--sf-slow) var(--sf-ease) both;
}

.pick-row h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 2px;
    color: var(--sf-lime);
}

.pick-row > p {
    color: var(--sf-muted);
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.pick-strip {
    display: flex;
    max-width: 100%;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--sf-line) transparent;
    /* soft fade on the right edge says "there's more — scroll sideways" */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.pick-strip .bike-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

/* a country with no picks in a row: say so instead of an empty gap */
.pick-strip:not(:has(.bike-card))::after {
    content: 'Nothing here for this budget and country yet — try another budget or Browse.';
    color: var(--sf-muted);
    font-size: 0.9rem;
}


@media (max-width: 520px) {
    .picks { padding: 20px 14px; }
    .picks > .ship-mini { width: 100%; }
    .pill-choice .zForm-check-label { padding: 9px 14px; font-size: 0.9rem; }
    .pick-strip .bike-card { flex-basis: 78vw; }
}