/**
 * LIVZO — Saved Societies (saved-societies.php) + the shared bookmark button.
 *
 * Class prefix `lz-saved*` is this page's own; the cards are the site's shared `.lz-society`
 * component, so only the few things a saved card adds (the verified chip, the saved-date line,
 * the Compare action in the action row) are styled here and always scoped under `.lz-saved`.
 *
 * Also home to two global rules the bookmark feature needs:
 *   - the bookmark is hidden without JavaScript instead of rendering as an inert control;
 *   - the header's shortlist button and its count badge.
 */

/* ==========================================================================
   1. The bookmark button (global)
   ========================================================================== */

/* Without JS the button cannot save anything, so it is hidden rather than a dead control
   (the same treatment the CompareChip gets in compare.css). */
html:not(.has-js) .lz-society__save {
    display: none;
}

/* --- The header's shortlist entry point --------------------------------- */

.lz-header__saved {
    position: relative;
}

.lz-header__saved .lz-icon {
    width: 19px;
    height: 19px;
}

.lz-header__saved-count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--lz-bg);
    border-radius: var(--lz-r-pill);
    /* `--lz-band-success-text` (5.2:1 on white) rather than `--lz-accent` (~3.4:1), which the
       badge's 0.68rem digits would fail. */
    background-color: var(--lz-band-success-text);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lz-header__saved-count[hidden] {
    display: none;
}

/* ==========================================================================
   2. Page shell
   ========================================================================== */

.lz-saved {
    position: relative;
    padding-block: clamp(22px, 3.4vw, 42px) clamp(34px, 5vw, 74px);
    overflow: hidden;
}

.lz-saved__wash {
    position: absolute;
    top: -180px;
    left: 50%;
    width: min(1180px, 132vw);
    height: 460px;
    border-radius: 50%;
    background-image: radial-gradient(closest-side, rgba(109, 74, 255, 0.14), transparent 72%);
    transform: translateX(-50%);
    pointer-events: none;
}

.lz-saved__inner {
    position: relative;
}

.lz-saved__noscript {
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-md);
    background-color: var(--lz-surface);
    color: var(--lz-body);
    font-size: 0.88rem;
}

/* ==========================================================================
   3. Breadcrumbs
   ========================================================================== */

.lz-saved__crumbs {
    margin-bottom: clamp(14px, 2vw, 22px);
}

.lz-saved__crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lz-saved__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lz-body);
    font-size: 0.8rem;
    font-weight: 600;
}

.lz-saved__crumb-link {
    transition: color var(--lz-t) var(--lz-ease);
}

.lz-saved__crumb-link:hover {
    color: var(--lz-accent-700);
}

.lz-saved__crumb-sep {
    display: grid;
    place-items: center;
    color: var(--lz-muted);
}

.lz-saved__crumb-sep .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-saved__crumb-current {
    color: var(--lz-navy);
    font-weight: 700;
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.lz-saved__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 34px);
    align-items: center;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.lz-saved__hero-text {
    min-width: 0;
}

/* The shortlist badge. The label stays navy (its own 0.72rem is small text, so the mint
   `--lz-accent-700` would sit at ~3.3:1) — the accent energy is carried by the icon disc
   instead, which is non-text and clears 3:1 on the gradient's lightest step. */
.lz-saved__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 5px 16px 5px 5px;
    border: 1px solid rgba(109, 74, 255, 0.20);
    border-radius: var(--lz-r-pill);
    background-image: linear-gradient(115deg, #FFFFFF, #F2EEFF);
    box-shadow: 0 10px 24px -18px rgba(11, 27, 51, 0.55);
    color: var(--lz-navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lz-saved__eyebrow-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-image: linear-gradient(140deg, var(--lz-band-success-text), var(--lz-accent));
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(5, 150, 105, 0.9);
}

.lz-saved__eyebrow-ico .lz-icon {
    width: 15px;
    height: 15px;
}

.lz-saved__title {
    max-width: 16ch;
    font-size: clamp(1.85rem, 4.4vw, 2.72rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.lz-saved__title-accent {
    color: var(--lz-accent);
}

.lz-saved__lead {
    max-width: 52ch;
    margin-top: 14px;
    color: var(--lz-body);
    font-size: clamp(0.94rem, 1.3vw, 1.04rem);
    line-height: 1.62;
}

/* What the shortlist does. These are facts, not controls, so they are a plain list — no
   pointer cursor, no hover state, and no pill row that could read as a filter bar (which
   would have to stay on one scrollable line on a phone). */
.lz-saved__points {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: clamp(20px, 2.6vw, 28px);
}

@media (min-width: 620px) {
    .lz-saved__points {
        /* 185px, not 170px: three columns have to be wide enough that the longest label holds
           one line (measured — at 170px "Saved to your account" wrapped from 620px up until
           the columns grew). */
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
        gap: 12px 16px;
    }
}

.lz-saved__point {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lz-saved__point-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-saved__point-ico .lz-icon {
    width: 16px;
    height: 16px;
}

.lz-saved__point-text {
    min-width: 0;
    color: var(--lz-body);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
}

/* The banner column. Desktop-only, like the mockup's mobile column — on a phone the type
   block is the whole hero, so nothing has to be scrolled past to reach the list. */
.lz-saved__hero-art {
    display: none;
    position: relative;
    width: 100%;
    min-width: 0;
}

.lz-saved__hero-img {
    width: 100%;
    height: auto;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-xl);
    box-shadow: var(--lz-sh-3);
}

@media (min-width: 900px) {
    .lz-saved__hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .lz-saved__hero-art {
        display: block;
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   5. Summary cards
   ========================================================================== */

.lz-saved__summary {
    margin-bottom: clamp(16px, 2.4vw, 24px);
}

.lz-saved__summary[hidden] {
    display: none;
}

.lz-saved__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 16px);
}

.lz-saved__stat {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 14px);
    min-width: 0;
    padding: clamp(12px, 1.6vw, 18px);
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-saved__stat-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(34px, 4.4vw, 42px);
    height: clamp(34px, 4.4vw, 42px);
    border-radius: var(--lz-r-sm);
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-saved__stat-ico .lz-icon {
    width: clamp(16px, 2vw, 19px);
    height: clamp(16px, 2vw, 19px);
}

.lz-saved__stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lz-saved__stat-value {
    color: var(--lz-navy);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.lz-saved__stat-label {
    color: var(--lz-body);
    font-size: clamp(0.7rem, 1.1vw, 0.78rem);
    font-weight: 600;
}

/* ==========================================================================
   6. Toolbar
   ========================================================================== */

.lz-saved__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 1.4vw, 14px);
    margin-bottom: clamp(16px, 2.4vw, 24px);
    padding: clamp(12px, 1.6vw, 16px);
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-saved__toolbar[hidden] {
    display: none;
}

.lz-saved__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 0;
}

.lz-saved__search-ico {
    position: absolute;
    left: 14px;
    display: grid;
    place-items: center;
    color: var(--lz-muted);
    pointer-events: none;
}

.lz-saved__search-ico .lz-icon {
    width: 17px;
    height: 17px;
}

.lz-saved__search-input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 42px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-bg);
    color: var(--lz-navy);
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color var(--lz-t) var(--lz-ease), box-shadow var(--lz-t) var(--lz-ease);
}

.lz-saved__search-input::placeholder {
    color: var(--lz-muted);
    font-weight: 500;
}

.lz-saved__search-input:focus {
    outline: none;
    border-color: var(--lz-accent-ring);
    box-shadow: 0 0 0 4px var(--lz-accent-soft);
}

.lz-saved__search-clear {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--lz-body);
    cursor: pointer;
    transition: background-color var(--lz-t) var(--lz-ease), color var(--lz-t) var(--lz-ease);
}

.lz-saved__search-clear:hover {
    background-color: var(--lz-bg-2);
    color: var(--lz-navy);
}

.lz-saved__search-clear[hidden] {
    display: none;
}

.lz-saved__search-clear .lz-icon {
    width: 15px;
    height: 15px;
}

.lz-saved__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.lz-saved__field {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.lz-saved__field-ico {
    position: absolute;
    left: 13px;
    display: grid;
    place-items: center;
    color: var(--lz-muted);
    pointer-events: none;
}

.lz-saved__field-ico .lz-icon {
    width: 15px;
    height: 15px;
}

.lz-saved__select {
    height: 46px;
    max-width: 100%;
    padding: 0 34px 0 36px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-bg);
    color: var(--lz-navy);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* The native chevron is replaced with a background triangle so the arrow sits at the
       same distance from the edge at every browser's default control size. */
    background-image: linear-gradient(45deg, transparent 50%, var(--lz-muted) 50%),
        linear-gradient(135deg, var(--lz-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.lz-saved__select:focus {
    outline: none;
    border-color: var(--lz-accent-ring);
    box-shadow: 0 0 0 4px var(--lz-accent-soft);
}

.lz-saved__views {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-bg);
}

.lz-saved__view {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--lz-body);
    cursor: pointer;
    transition: background-color var(--lz-t) var(--lz-ease), color var(--lz-t) var(--lz-ease);
}

.lz-saved__view .lz-icon {
    width: 17px;
    height: 17px;
}

.lz-saved__view:hover {
    color: var(--lz-navy);
}

.lz-saved__view.is-active {
    background-color: var(--lz-surface);
    color: var(--lz-accent-700);
    box-shadow: var(--lz-sh-1);
}

.lz-saved__count {
    flex: 1 1 100%;
    color: var(--lz-body);
    font-size: 0.82rem;
    font-weight: 600;
}

@media (min-width: 720px) {
    .lz-saved__count {
        flex: none;
        margin-left: auto;
    }
}

/* On a phone three content-sized dropdowns wrapped unevenly. A two-column grid keeps them
   even, and the sort — the least-used control — takes the full width on its own row, so the
   result reads as a decision rather than an accident. */
@media (max-width: 719px) {
    .lz-saved__filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
    }

    .lz-saved__field {
        display: flex;
        min-width: 0;
    }

    .lz-saved__select {
        width: 100%;
    }

    .lz-saved__filters .lz-saved__field:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   7. The list + the card's saved extras
   ========================================================================== */

.lz-saved__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 22px);
}

.lz-saved__item {
    display: flex;
    min-width: 0;
}

/* A saved card is the same card as everywhere else; the bookmark simply starts filled. */
.lz-saved__item .lz-society__save {
    color: var(--lz-accent-700);
}

/* The verified chip, only ever rendered for a society the database confirms. */
.lz-saved__verified {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--lz-r-pill);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--lz-green-600);
    font-size: 0.68rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lz-saved__verified .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-saved__verified[hidden] {
    display: none;
}

/* The date line, shared by every card the marker renders. */
.lz-saved__item .lz-society__saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--lz-body);
    font-size: 0.76rem;
    font-weight: 600;
}

.lz-saved__item .lz-society__saved-ico .lz-icon {
    width: 14px;
    height: 14px;
}

.lz-saved__item .lz-society__saved[hidden] {
    display: none;
}

/* The CompareChip lives in the action row here, not on the image — so it loses the chip's
   absolute placement and becomes a peer of "View Society". */
.lz-saved__item .lz-society__actions .lz-compare__add {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    padding: 8px 13px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: none;
}

.lz-saved__item .lz-society__actions .lz-compare__add:hover {
    transform: translateY(-1px);
    border-color: var(--lz-accent-soft-2);
    box-shadow: var(--lz-sh-2);
}

.lz-saved__item .lz-society__actions .lz-compare__add.is-added {
    border-color: var(--lz-green-soft);
    background-color: var(--lz-green-soft);
}

/* `hidden` must beat the component's own display rules (the meta row is a flex line, the
   score a flex span, the tags a flex list). */
.lz-saved__item .lz-society__meta-item[hidden],
.lz-saved__item .lz-society__meta-dot[hidden],
.lz-saved__item .lz-society__tags[hidden],
.lz-saved__item .lz-society__badge[hidden] {
    display: none;
}

/* A society with no published review keeps the chip and prints the site's "no data" mark (an
   em dash), so every card's head row is the same height and the location line below it stays
   on one baseline across the row. The chip goes neutral — an amber one would imply a middling
   score rather than none. */
.lz-saved__item .lz-society__score.is-empty {
    background-color: var(--lz-bg-2);
}

.lz-saved__item .lz-society__score.is-empty .lz-society__score-ico {
    color: var(--lz-muted);
}

/* The date line is part of the card's bottom cluster, so the flexible space collects ABOVE it
   rather than between it and the buttons — otherwise every card's date and buttons sat at a
   different height depending on how much content (tags, score) the society happened to have
   (gotcha 8: give the stretched column a budget, don't let the slack land mid-card). */
.lz-saved__item .lz-society__saved {
    margin-top: auto;
}

.lz-saved__item .lz-society__actions {
    margin-top: 10px;
}

/* A phone has to be able to hit these: the card's action row is 38px on the shared component,
   which is under the 44px touch guideline, so this page's cards grow it. Scoped to `.lz-saved`,
   never the component (every other page keeps its own card size). */
@media (max-width: 560px) {
    .lz-saved__item .lz-society__action {
        min-height: 44px;
        padding-inline: 16px;
    }
}

/* A reused component's own colours are not guaranteed on this page (gotcha 16). Both of these
   are scoped to `.lz-saved`, never to the shared component:
     - `--lz-muted` is 3.83:1 on white (the house-wide issue §17/§21/§22 record);
     - the primary action's white-on-`--lz-accent` label is ~3.4:1 at 0.78rem. */
.lz-saved__item .lz-society__meta {
    color: var(--lz-body);
}

.lz-saved__item .lz-society__action--primary {
    background-color: var(--lz-band-success-text);
}

.lz-saved__item .lz-society__action--primary:hover {
    background-color: var(--lz-green-600);
}

@media (min-width: 700px) {
    .lz-saved__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .lz-saved__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- List view ---------------------------------------------------------- */

.lz-saved__list.is-list {
    grid-template-columns: minmax(0, 1fr);
}

.lz-saved__list.is-list .lz-society {
    flex-direction: row;
}

.lz-saved__list.is-list .lz-society__media {
    flex: none;
    width: 260px;
    min-width: 0;
    aspect-ratio: auto;
}

.lz-saved__list.is-list .lz-society__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below the breakpoint the horizontal card would squeeze its own text, so it stacks again. */
@media (max-width: 760px) {
    .lz-saved__list.is-list .lz-society {
        flex-direction: column;
    }

    .lz-saved__list.is-list .lz-society__media {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}

/* ==========================================================================
   8. States
   ========================================================================== */

.lz-saved__status {
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--lz-green-soft);
    border-radius: var(--lz-r-md);
    background-color: var(--lz-green-soft);
    color: var(--lz-green-600);
    font-size: 0.85rem;
    font-weight: 700;
}

.lz-saved__status[hidden] {
    display: none;
}

/* Every other page's message surface: a toast the bookmark script creates the first time it
   has something to say (a failed save must never be a silent no-op). Pinned to the top so it
   can never collide with the fixed compare bar at the bottom. */
.lz-saved-toast {
    position: fixed;
    z-index: 90;
    top: calc(var(--lz-header-h) + 14px);
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 11px 20px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-navy);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--lz-sh-3);
    transform: translateX(-50%);
    animation: lzSavedToast 0.32s var(--lz-ease-out);
}

.lz-saved-toast[hidden] {
    display: none;
}

@keyframes lzSavedToast {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.lz-saved__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(30px, 5vw, 60px) clamp(18px, 3vw, 32px);
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-xl);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    text-align: center;
}

.lz-saved__state[hidden] {
    display: none;
}

.lz-saved__state-art {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-saved__state-art .lz-icon {
    width: 30px;
    height: 30px;
}

.lz-saved__state-title {
    font-size: clamp(1.05rem, 2.4vw, 1.32rem);
}

.lz-saved__state-text {
    max-width: 52ch;
    color: var(--lz-body);
    font-size: 0.9rem;
}

.lz-saved__state-cta {
    margin-top: 6px;
}

/* --- Loading skeleton --------------------------------------------------- */

.lz-saved__state--loading {
    align-items: stretch;
    gap: 18px;
    text-align: left;
}

.lz-saved__state--loading .lz-saved__state-text {
    align-self: center;
    color: var(--lz-body);
}

.lz-saved__skeleton {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 22px);
}

@media (min-width: 700px) {
    .lz-saved__skeleton {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lz-saved__skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
}

.lz-saved__skeleton-line {
    display: block;
    border-radius: var(--lz-r-xs);
    background-image: linear-gradient(90deg, var(--lz-bg-2) 0%, #EFEDF6 50%, var(--lz-bg-2) 100%);
    background-size: 220% 100%;
    animation: lzSavedShimmer 1.5s var(--lz-ease) infinite;
}

.lz-saved__skeleton-line--media {
    height: 150px;
    border-radius: 0;
}

.lz-saved__skeleton-line--title {
    height: 15px;
    margin-inline: 18px;
    width: 60%;
}

.lz-saved__skeleton-line--meta {
    height: 12px;
    margin-inline: 18px;
    width: 78%;
}

.lz-saved__skeleton-line--short {
    height: 12px;
    margin-inline: 18px;
    width: 40%;
}

@keyframes lzSavedShimmer {
    0% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

/* ==========================================================================
   9. Promo band
   ========================================================================== */

.lz-savedpromo {
    position: relative;
    /* The decorative glow reaches past the band's right edge; clipping it here is what keeps
       `scrollWidth` equal to the viewport (gotcha 6 — the glow is decoration, not content). */
    overflow: hidden;
    padding-block: clamp(28px, 4vw, 48px);
    background-image: linear-gradient(180deg, rgba(109, 74, 255, 0.07), rgba(109, 74, 255, 0.11));
    border-top: 1px solid var(--lz-line);
}

.lz-savedpromo__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2.4vw, 26px);
}

.lz-savedpromo__glow {
    position: absolute;
    top: -120px;
    right: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background-image: radial-gradient(closest-side, rgba(109, 74, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.lz-savedpromo__text {
    min-width: 0;
}

.lz-savedpromo__title {
    font-size: clamp(1.15rem, 3vw, 1.6rem);
}

.lz-savedpromo__lead {
    margin-top: 8px;
    max-width: 46ch;
    color: var(--lz-body);
    font-size: 0.92rem;
}

.lz-savedpromo__cta {
    flex: none;
}

@media (max-width: 560px) {
    .lz-savedpromo__cta {
        width: 100%;
    }
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* The shimmer and the toast are animations, not transitions — they belong in this list, or
       disabling transitions would leave them running (gotcha 24). */
    .lz-saved__skeleton-line,
    .lz-saved-toast {
        animation: none;
    }

    .lz-saved__item .lz-society__actions .lz-compare__add,
    .lz-saved__search-input,
    .lz-saved__view {
        transition: none;
    }
}