/* ============================================================================
   Plush74 Collections 2026 — Wave 3 (ROUND 2, CORRECTED)
   Surface: "Save to a Collection" favourites POPUP (heart/bookmark on every card)
   Live:    https://staging.plush74.com/find/  → click a card .sw_coll_add tile
   Prefix:  .p74cp-*   Root: .swwidget_collection.p74cp-root (injected in wp_footer)
   Depends on the shared kit (collections-2026.css). Loaded by plush74-collections-2026.php.

   WHY ROUND 2: the owner REJECTED round 1 — "random lines, grey, clunky old
   buttons, dark+yellow". The probe confirmed the real defects:
     • every zone boundary (head / search / create-bar / foot / modal frame) drew a
       HEAVY near-black hairline (var(--p74c-line) = #111) → the "liney" 2021 look;
     • the create bar AND its input had a GREY fill (#f7f7f5) → banned grey band;
     • per-row thumbnails were boxed with a hard #111 border (stray boxes), and the
       save tick was a hard #111 empty square (clunky box, square/box mix);
     • a leftover Wave-1 foot button in custom.css painted #000 bg + LIME TEXT on
       hover (the #1 banned combo) — that competing block is now DELETED in
       custom.css; THIS file is the single source of truth.

   CORRECTED 2026 LANGUAGE applied here (mirrors the approved flagship editor):
     1. Pure white/paper everywhere. NO grey fills/bands. Grey only as faint hover.
     2. AT MOST one thin hairline per real zone — and it is FAINT (--p74c-line-2,
        #dcdcdc), never the near-black structural line. Inputs are clean (no boxes):
        borderless search + create fields; underline-on-focus at most.
     3. ONE universal button family. The only filled control is the lime CREATE&ADD
        (lime bg + INK label). Everything else is a quiet white/ghost control.
     4. NO dark bar/button with yellow/lime TEXT. The modal head is LIGHT paper+ink.
     5. (no money on this surface) — rows are clean, scannable, packed top-left.
     6. (no long notes) — search-first, compact.
     7. Compact, friendly: tight rows, airy but not sprawling.
     8. FUNCTIONS IDENTICAL — every JS hook class / input name / data-* preserved;
        this file is STYLE-ONLY.

   IMPORTANT (engine contract): the open/close engine in custom.js toggles the
   `.closed` class on the root (it never adds the kit's `.is-open`). The kit sets
   `.p74c__modal-bg { display:none }`, so THIS file owns the closed→hidden /
   open→centered-flex mapping (previously in the now-deleted custom.css block).

   Every rule is anchored on `.swwidget_collection.p74cp-root` (the root carries
   BOTH classes) so it reliably out-specifies the legacy single-class
   `.swwidget_collection ...` rules still in custom.css. Style-only; no class JS
   binds to is renamed; no data-* touched. Cyon-deploy-ready (no host hardcodes).
   ========================================================================= */

/* ---- Backdrop: full-screen dim, centered. Engine toggles .closed. ---------- */
.swwidget_collection.p74cp-root.p74c__modal-bg {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;                 /* OPEN state = centered flex (engine removes .closed) */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: auto;
    max-width: none;
    min-height: 0;
    transform: none;
    opacity: 1;
    padding: 24px;
    background: rgba(17,17,17,.5);
    -webkit-backdrop-filter: saturate(120%) blur(1px);
            backdrop-filter: saturate(120%) blur(1px);
}
/* CLOSED state (engine adds .closed) — hidden */
.swwidget_collection.p74cp-root.p74c__modal-bg.closed {
    display: none;
    opacity: 0;
    transform: none;
}

/* ---- The sheet (white paper). ONE thin frame + the ONLY allowed shadow. ----
   The frame is intentionally the faint hairline, not near-black: a soft, modern
   modal edge that floats on its shadow (owner rule #2). */
.swwidget_collection.p74cp-root .p74c__modal.p74cp-modal {
    width: 100%;
    max-width: 420px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--p74c-paper);
    border: 1px solid var(--p74c-hair); /* FINAL PUSH: kit hairline token (XC-1) */
    box-shadow: 0 24px 64px -18px rgba(17,17,17,.42);
    border-radius: 0;
}

/* ---- Head: eyebrow + title on paper. NO heavy bar, NO dark fill. ----------
   One FAINT bottom hairline separates the head from the search (owner rule #2). */
.swwidget_collection.p74cp-root .p74c__modal-head.p74cp-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 16px;
    background: var(--p74c-paper);
    border-bottom: 1px solid var(--p74c-hair); /* FINAL PUSH: kit hairline token (XC-1) */
}
.swwidget_collection.p74cp-root .p74cp-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.swwidget_collection.p74cp-root .p74cp-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--p74c-muted);
}
.swwidget_collection.p74cp-root .p74c__modal-title.p74cp-title {
    font-family: var(--p74c-font-disp);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.12;
    color: var(--p74c-ink);
}
/* Close = a QUIET borderless icon (no hard #111 box). Faint soft hover, never a
   dark fill with a contrasting glyph (owner rules #2 #4). */
.swwidget_collection.p74cp-root .p74c__modal-x.p74cp-x {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: -2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--p74c-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.swwidget_collection.p74cp-root .p74c__modal-x.p74cp-x:hover {
    background: var(--p74c-soft);
    color: var(--p74c-ink);
    opacity: 1;
}

/* ---- Body: search-first, then the scrollable rows ------------------------- */
.swwidget_collection.p74cp-root .p74c__modal-body.p74cp-body {
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;            /* anchor for the bottom scroll-fade (see round-1 patch) */
    background: var(--p74c-paper);
}

/* Search bar: a CLEAN field on paper (no box), leading magnifier, one FAINT
   bottom hairline to divide it from the rows (owner rules #1 #2). */
.swwidget_collection.p74cp-root .p74c__search.p74cp-search {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--p74c-hair); /* FINAL PUSH: kit hairline token (XC-1) */
    background: var(--p74c-paper);
    padding: 2px 6px;
}
.swwidget_collection.p74cp-root .p74cp-search svg { width: 16px; height: 16px; margin: 0 6px 0 10px; color: var(--p74c-faint); flex: 0 0 auto; }
.swwidget_collection.p74cp-root .p74cp-search .p74cp-searchform { flex: 1 1 auto; margin: 0; padding: 0; }
.swwidget_collection.p74cp-root .p74cp-search .swcol_control.p74cp-searchinput {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: .01em;
    padding: 0 10px 0 0;
    min-height: 46px;
    color: var(--p74c-ink);
    outline: none;
    font-style: normal;
    box-shadow: none;
}
/* kill the ancient placeholder search-icon background (custom.css paints
   ../img/icon-search-flip.jpg here) — we already render a clean leading SVG
   magnifier, so the legacy one was a stray duplicate glyph (owner rule #2) */
.swwidget_collection.p74cp-root .p74cp-search .swcol_control.p74cp-searchinput::-webkit-input-placeholder,
.swwidget_collection.p74cp-root .p74cp-search .swcol_control.p74cp-searchinput::placeholder {
    color: var(--p74c-faint);
    text-transform: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13.5px;
    background: none !important;
    background-image: none !important;
}
/* focus: the kit's lime underline (mirrors collections-2026.css .p74c__search:focus-within
   + the editor's lime focus rule) — the borderless field gets a visible, on-brand affordance
   instead of nothing (the comment above promised "underline-on-focus at most"). */
.swwidget_collection.p74cp-root .p74cp-search:focus-within {
    border-bottom-width: 2px;
    border-bottom-color: var(--p74c-lime-d);
}

/* ---- Rows list: scrollable, the full owned list -------------------------- */
.swwidget_collection.p74cp-root .sw_collection_list.wishes.p74cp-rows {
    display: block;
    margin: 0;
    flex: 0 1 auto;             /* shrink-to-content: a zero-collection list collapses to nothing,
                                   so the modal shrinks to the friendly hint (no 120px blank band) */
    min-height: 0;             /* was 120px — that min-height WAS the empty-state void (owner rule #7) */
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 20px; /* FINAL PUSH (PU-15 + round-1): bottom breathing room so the
                            last row clears the create bar at full scroll; the 20px gap
                            also gives the body scroll-fade (below) a paper zone to sit in
                            so it stays invisible once you've scrolled to the very end */
    background: var(--p74c-paper);
}
/* when the list IS populated it should be the flexible scroll region again */
.swwidget_collection.p74cp-root .sw_collection_list.wishes.p74cp-rows:not(:empty) { flex: 1 1 auto; }
/* thin, branded scrollbar */
.swwidget_collection.p74cp-root .p74cp-rows::-webkit-scrollbar { width: 8px; }
.swwidget_collection.p74cp-root .p74cp-rows::-webkit-scrollbar-thumb { background: #e2e2e0; }
.swwidget_collection.p74cp-root .p74cp-rows::-webkit-scrollbar-thumb:hover { background: var(--p74c-faint); }

/* a single scannable row — NO hairline between rows, NO grey at rest; whitespace
   does the work, a faint soft tint on hover (owner rules #1 #2). */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.sw_card_coll.p74cp-row {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 16px;
    margin: 0 8px;
    border: 0;
    border-bottom: 0;
    cursor: pointer;
    background: var(--p74c-paper);
    transition: background .12s;
}
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.sw_card_coll.p74cp-row:hover {
    background: var(--p74c-soft);
}

/* square thumbnail — NO hard #111 border (was a stray box). A clean soft tile;
   real images cover it, the missing-image case reads as a quiet neutral square
   (owner rules #1 #2). */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .thumbnail.p74cp-row-thumb {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 0;
    padding: 0;         /* FINAL PUSH (PU-8): bootstrap .thumbnail{padding:4px} boxed the
                           34px img inside the 42px tile — the cover now fills the tile */
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    /* FINAL PUSH round-1 polish (critic d-01, row 457 "MAKE UP COMMERCIAL SHOOT"):
       a cover-less row renders a 1x1 TRANSPARENT pixel (PU-8), so a flat near-white
       soft2 tile read as an undesigned "blank white square". Paint a FAINT photo glyph
       as the tile BACKGROUND: a real cover (opaque <img>) still fully covers it, while
       the transparent pixel lets this designed neutral placeholder show through — one
       intentional missing-cover treatment (server rows + JS-normalized AJAX rows). */
    background-color: var(--p74c-soft2);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c2c2c0%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2214%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M20%2015l-4.5-4.5L7%2019%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    font-size: 0;                  /* hide any broken-image alt/glyph leakage */
    color: transparent;
}
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .thumbnail.p74cp-row-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* name — sentence case, calm weight, ellipsis (owner rule #7) */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .context.p74cp-row-name {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .005em;
    color: var(--p74c-ink);
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* right-aligned save TICK: a FAINT square at rest (line-2, not #111), fills lime
   when .selected (saved). Friendly, not a hard box (owner rules #2 #3). */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .action.p74cp-row-check {
    flex: 0 0 auto;
    position: relative;
    width: 22px;
    height: 22px;
}
/* hide the legacy checkbox visually but keep it in the DOM (JS contract) */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .action.p74cp-row-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .p74cp-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--p74c-line-2);
    background: var(--p74c-paper);
    color: transparent;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row:hover .p74cp-tick {
    border-color: var(--p74c-faint);
}
/* saved state: JS adds .selected to the row → lime fill + ink check */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row.selected .p74cp-tick {
    background: var(--p74c-lime);
    color: var(--p74c-ink);
    border-color: var(--p74c-lime-d);
}
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row.selected:hover .p74cp-tick {
    background: var(--p74c-lime-d);
    border-color: var(--p74c-lime-d);
}

/* the legacy absolute link overlay (kept for the JS click contract) */
.swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.p74cp-row .link_over {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* after-save flash (added by custom.js sw_after_save_view_hint) */
.swwidget_collection.p74cp-root .swcollection_card.p74cp-just-saved { animation: p74cp-flash .9s ease; }
@keyframes p74cp-flash {
    0%   { background: var(--p74c-lime); }
    100% { background: var(--p74c-paper); }
}

/* empty hint (only when the rows list has no real .p74cp-row) */
.swwidget_collection.p74cp-root .p74cp-emptyhint {
    display: none;
    padding: 26px 20px 22px;
    text-align: center;
    font-size: 12.5px;
    color: var(--p74c-faint);
}
/* Show the hint when the list truly has no collection rows. Two anchors so it is
   robust to either an empty node OR a node that only holds whitespace/comments:
     1. :empty           — exact zero-child case (functions.php now emits no text node)
     2. :not(:has(.p74cp-row)) — content-robust: matches even if a stray node exists,
                                 so the comment-lies failure mode can't recur. */
.swwidget_collection.p74cp-root .p74cp-rows:empty + .p74cp-emptyhint,
.swwidget_collection.p74cp-root .p74cp-rows:not(:has(.p74cp-row)) + .p74cp-emptyhint { display: block; }
/* and when there is at least one row, collapse the hint's padding entirely */
.swwidget_collection.p74cp-root .p74cp-rows:has(.p74cp-row) + .p74cp-emptyhint { display: none; padding: 0; }

/* ---- Create bar (Spotify "+ New playlist"): PAPER, not grey. -------------
   One FAINT top hairline; a clean borderless input on paper; the ONE lime
   CREATE&ADD button (lime bg + INK label) — the only filled control here
   (owner rules #1 #2 #3 #4). */
.swwidget_collection.p74cp-root .sw_collection_list.create.p74cp-createbar {
    display: flex;
    margin: 0;
    border-top: 1px solid var(--p74c-hair); /* FINAL PUSH: kit hairline token (XC-1) */
    background: var(--p74c-paper);
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    /* FINAL PUSH: the engine's close path (swlist_close_create) adds `.closed` to this
       create list — legacy custom.css:10590 then paints position:absolute +
       translateY(100%) + opacity:0 and the bar VANISHED on every reopen. That state
       was unreachable before PU-1 (the popup could never be closed on desktop).
       The redesign keeps the create bar permanently inline, whatever `.closed` says: */
    position: static;
    transform: none;
    opacity: 1;
}
.swwidget_collection.p74cp-root .p74cp-createbar .swcollection_card.sw_card_create { display: none !important; }
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
}
.swwidget_collection.p74cp-root .p74cp-createform .p74cp-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex: 0 0 44px;
    color: var(--p74c-faint);
    background: var(--p74c-paper);
    border: 0;
}
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform .swcol_control.p74cp-createinput {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    border: 0;
    background: var(--p74c-paper);
    box-shadow: none;
    padding: 0 12px 0 0;
    height: 50px;
    min-height: 50px;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--p74c-ink);
    outline: none;
}
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform .swcol_control.p74cp-createinput::placeholder {
    color: var(--p74c-faint);
    text-transform: none;
    font-size: 13.5px;
}
/* focus: lime underline (mirrors the editor's .wishlisting_field_input:focus / kit inputs)
   so the borderless create field shows the same on-brand affordance as the search field. */
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform .swcol_control.p74cp-createinput:focus {
    box-shadow: inset 0 -2px 0 var(--p74c-lime-d);
}
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform button.p74c__btn.p74cp-createbtn {
    border-radius: 0;
    border: 0;
    height: 50px;
    margin: 0;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 0 20px;
    background: var(--p74c-lime);
    color: var(--p74c-btn-on-lime);   /* ink label on lime — owner button rule */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform button.p74c__btn.p74cp-createbtn:hover {
    background: var(--p74c-lime-d);
    color: var(--p74c-btn-on-lime);
}
.swwidget_collection.p74cp-root .swcollection_form.p74cp-createform button.btn_loading { opacity: .65; pointer-events: none; }

/* ---- Foot: ONE clear ghost path to the dashboard (no dark+yellow-text). ---
   One FAINT top hairline; ghost link (ink text, transparent bg). */
.swwidget_collection.p74cp-root .p74c__modal-foot.p74cp-foot {
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--p74c-hair); /* FINAL PUSH: kit hairline token (XC-1) */
    background: var(--p74c-paper);
}
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.p74cp-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--p74c-ink);            /* ghost: ink text, no dark+yellow-text */
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    height: 40px;
    padding: 0 4px;
    text-decoration: none;
    transition: color .15s;
}
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.p74cp-view svg { transition: transform .15s; }
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.p74cp-view:hover { color: var(--p74c-muted); background: transparent; }
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.p74cp-view:hover svg { transform: translateX(3px); }

/* after-save pulse on the view link (added by custom.js) */
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.p74cp-view.p74cp-pulse {
    animation: p74cp-pulse 1.4s ease;
}
@keyframes p74cp-pulse {
    0%, 100% { color: var(--p74c-ink); box-shadow: none; }
    30%, 60% { color: var(--p74c-ink); box-shadow: inset 0 -2px 0 var(--p74c-lime); }
}

/* Back button (create-form back) — universal SECONDARY (white + ink + 1px faint
   hairline). Never the old black oddball. */
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.sw_collection_btn_back {
    margin: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--p74c-line-2);
    border-radius: 0;
    background: var(--p74c-paper);
    color: var(--p74c-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .15s;
}
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.sw_collection_btn_back:hover { background: var(--p74c-soft); }
.swwidget_collection.p74cp-root .p74c__modal-foot .sw_collection_btn.sw_collection_btn_back.hidden { display: none; }

/* ---- Mobile: slide-up bottom sheet ---------------------------------------- */
@media (max-width: 600px) {
    .swwidget_collection.p74cp-root.p74c__modal-bg {
        padding: 0;
        align-items: flex-end;
    }
    /* FINAL PUSH (PU-4): comfortable on-screen close target on the sheet */
    .swwidget_collection.p74cp-root .p74c__modal-x.p74cp-x { width: 44px; height: 44px; margin-top: -6px; }
    .swwidget_collection.p74cp-root .p74c__modal.p74cp-modal {
        max-width: 100%;
        width: 100%;
        max-height: 88vh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -16px 40px -12px rgba(17,17,17,.4);
        animation: p74cp-sheet-up .22s ease;
    }
    @keyframes p74cp-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
    .swwidget_collection.p74cp-root .p74c__modal-head.p74cp-head { padding: 18px 16px 14px; }
    .swwidget_collection.p74cp-root .sw_collection_list .swcollection_card.sw_card_coll.p74cp-row { margin: 0 4px; padding: 9px 14px; }
    /* FINAL PUSH: keep the foot buttons above the iPhone home-indicator */
    .swwidget_collection.p74cp-root .p74c__modal-foot.p74cp-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   FINAL PUSH 2026-07-02 — targeted patch (PU-1..PU-8, PU-11, PU-15 + XC-1/XC-11)
   The named legacy custom.css offenders (10241 viewport frame, 10367 clipped
   close, 15697 mobile cap) are now scoped `:not(.p74cp-root)` at the source;
   the resets below are BELT-AND-BRACES so the popup also survives a custom.css
   regression (e.g. an older theme file deployed over the scoped one).
   ========================================================================= */

/* PU-3: never a border on the full-viewport backdrop (legacy 2px #000 frame);
   PU-2: never let the legacy mobile cap (max-height:calc(100vh - 100px) +
   overflow scroll at ≤767px) shorten the backdrop — the surface's own sheet
   block owns mobile sizing. Applies at ALL widths (the legacy cap also bled
   into the 601–767px band the old mobile block never covered). */
.swwidget_collection.p74cp-root.p74c__modal-bg {
    border: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* FINAL PUSH round-1 polish (PU-15 follow-up, critic d-01 last row 454 "MUSIC VIDEO
   ONA"): the scroll list ends flush against the sticky CREATE & ADD bar. Bottom
   padding alone still read as a HARD-CLIPPED row mid-scroll. Add a short paper fade at
   the list's bottom edge so a partially-scrolled row dissolves into the create bar
   instead of being sliced. The fade is pinned to the NON-scrolling body (rows scroll
   under it), only renders when a real row exists (`:has(.p74cp-row)` — never veils the
   empty-state hint), and is invisible at full scroll (it sits over the 20px paper
   padding gap = paper-over-paper). pointer-events:none keeps scroll/clicks on the rows;
   no z-index needed — a positioned ::after already paints above the in-flow rows. */
.swwidget_collection.p74cp-root .p74c__modal-body.p74cp-body:has(.p74cp-row)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, var(--p74c-paper) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--p74c-paper) 100%);
}

/* PU-1/PU-4: the close X lives IN FLOW inside the head — hard-reset the legacy
   `position:absolute; right:100%; top:-2px` that pushed it outside the modal's
   overflow:hidden box (invisible + unclickable). */
.swwidget_collection.p74cp-root .p74c__modal-x.p74cp-x {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-right: 0;
}

/* PU-6 (XC-11): quiet failure line — revealed by the popup patch JS on a failed
   wishlist AJAX call (create / search / row-save). Sentence case, muted, one
   underlined retry affordance; never a void, never a shout. */
.swwidget_collection.p74cp-root .p74cp-error {
    padding: 10px 20px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--p74c-muted);
    text-align: center;
    border-bottom: 1px solid var(--p74c-hair);
    background: var(--p74c-paper);
}
.swwidget_collection.p74cp-root .p74cp-error[hidden] { display: none !important; }
.swwidget_collection.p74cp-root .p74cp-error .p74cp-retry {
    color: var(--p74c-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.swwidget_collection.p74cp-root .p74cp-error .p74cp-retry:hover { color: var(--p74c-muted); }

/* PU-7: zero-MATCH search hint. The patch JS holds .p74cp-has-query on the root
   while the search field has text; then the generic "No collections yet" hint is
   suppressed and the search variant shows instead. Anchors mirror the existing
   empty-hint pair (`:empty` exact + `:not(:has())` content-robust). */
.swwidget_collection.p74cp-root .p74cp-emptyhint--search { display: none; }
.swwidget_collection.p74cp-root.p74cp-has-query .p74cp-rows:empty ~ .p74cp-emptyhint--search,
.swwidget_collection.p74cp-root.p74cp-has-query .p74cp-rows:not(:has(.p74cp-row)) ~ .p74cp-emptyhint--search { display: block; }
.swwidget_collection.p74cp-root.p74cp-has-query .p74cp-rows:empty + .p74cp-emptyhint,
.swwidget_collection.p74cp-root.p74cp-has-query .p74cp-rows:not(:has(.p74cp-row)) + .p74cp-emptyhint { display: none; }
/* the search variant also never shows when rows exist */
.swwidget_collection.p74cp-root .p74cp-rows:has(.p74cp-row) ~ .p74cp-emptyhint--search { display: none; }

/* PU-11: busy indicators — replace the legacy dashicons refresh glyph (\f113,
   half-clipped at right:-30px) with ONE quiet hairline spinner inside the control. */
.swwidget_collection.p74cp-root .swcollection_search_form.p74cp-searchform { position: relative; }
.swwidget_collection.p74cp-root .form_loading::after,
.swwidget_collection.p74cp-root .btn_loading::after {
    content: "";
    font-family: inherit;
    display: block;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 2px solid var(--p74c-hair);
    border-top-color: var(--p74c-ink);
    border-radius: 50%;
    position: absolute;
    z-index: 5;
    top: 50%;
    margin-top: -7px;
    right: 8px;
    -webkit-animation: p74cp-spin .7s linear infinite;
            animation: p74cp-spin .7s linear infinite;
}
/* on the lime CREATE & ADD the spinner spins on the fill's right edge — make room */
.swwidget_collection.p74cp-root .p74cp-createbtn.btn_loading { padding-right: 30px; }
@-webkit-keyframes p74cp-spin { to { transform: rotate(360deg); } }
@keyframes p74cp-spin { to { transform: rotate(360deg); } }