/* partial_alinks.css — FULL DROP-IN REPLACEMENT (EG / PRO, v2)
   Goals (fixes your notes):
   • Primary “Best deal” area looks like an EG card (not a neon slab)
   • Retailer names do NOT truncate by default (wrap to 2 lines)
   • Grids auto-fit with sensible min widths so labels stay readable
   • Only ellipsis on *very* small screens
   • Variant (“More options…”) area looks intentional + tied to the primary retailer

   Updates per latest request:
   • Primary CTA uses *retailer color* (from inline --retailer-color) as the button background.
   • Primary CTA left strip (::before) uses *product color* (from variant → global --color-* tokens).
   • Primary retailer variant links reuse the same product-color strip.
   • affiliate-search-partner-btn labels are single-line and never cut off:
       - grid enforces a minimum button width
       - drops to fewer columns automatically
       - all search buttons share identical sizing
*/

/* ───────────────────────── Theme tokens ───────────────────────── */
:root {
    --ap-radius: 12px;
    --ap-radius-sm: 10px;

    --ap-border: rgba(255, 255, 255, .08);
    --ap-border-strong: rgba(255, 255, 255, .12);

    --ap-surface: var(--section-darkestdark-background-color, #121212);
    --ap-surface-2: var(--section-darkest-background-color, #161718);
    --ap-surface-3: var(--section-dusk-background-color, #25292a);

    --ap-shadow: 0 26px 70px rgba(0, 0, 0, .62);
    --ap-shadow-soft: 0 10px 30px rgba(0, 0, 0, .35);

    --ap-open-dur: 380ms;
    --ap-close-dur: 240ms;
    --ap-ease: cubic-bezier(.2, .8, .2, 1);
    --ap-ease-out: cubic-bezier(.22, .61, .36, 1);







    /* =========================================
   SPECIAL / MULTI-COLOR VARIANTS (--color-*)
   Usage:
   - If variantToken = "mac", popup sets:
       --product-color: var(--color-mac, var(--retailer-color...))
   - Strips can be SOLID or GRADIENTS.
   ========================================= */

    /* "Mac" = white + blue (two-tone strip) */
    --color-mac: linear-gradient(180deg,
            var(--color-white) 0%,
            var(--color-white) 50%,
            var(--color-blue) 50%,
            var(--color-blue) 100%);

    /* Example: "black-white" split */
    --color-black-white: linear-gradient(180deg,
            var(--color-black) 0%,
            var(--color-black) 50%,
            var(--color-white) 50%,
            var(--color-white) 100%);

    /* Example: "white-blue" split (if you ever want a generic token) */
    --color-white-blue: linear-gradient(180deg,
            var(--color-white) 0%,
            var(--color-white) 50%,
            var(--color-blue) 50%,
            var(--color-blue) 100%);

}

/* ───────────────────────── Popup container ───────────────────────── */
.affiliate-popup {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: min(46rem, calc(100vw - 1.5rem));
    max-height: min(84vh, calc(100vh - 6rem));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12)),
        var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
    color: var(--white-color-1, #fff);
    z-index: 97525;

    font-family: var(--identity-font, 'Open Sans', Arial, Helvetica, sans-serif);
    contain: layout paint;
    will-change: transform;
}



@media (max-width: 600px) {
    .affiliate-popup {
        left: 0;
        top: 0;
        width: 100vw;

        height: 100vh;
        height: 100dvh;
        max-height: none;

        transform: none;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .popup-header {
        cursor: default;

        padding-top: calc(12px + constant(safe-area-inset-top));
        padding-top: calc(12px + env(safe-area-inset-top));

        padding-left: calc(16px + constant(safe-area-inset-left));
        padding-left: calc(16px + env(safe-area-inset-left));

        padding-right: calc(16px + constant(safe-area-inset-right));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    .popup-content {
        padding-left: calc(16px + constant(safe-area-inset-left));
        padding-left: calc(16px + env(safe-area-inset-left));

        padding-right: calc(16px + constant(safe-area-inset-right));
        padding-right: calc(16px + env(safe-area-inset-right));

        padding-bottom: calc(16px + constant(safe-area-inset-bottom));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .popup-resizer {
        display: none;
    }
}


/* ───────────────────────── Header ───────────────────────── */
.popup-header {
    position: sticky;
    top: 0;
    z-index: 5;
    cursor: move;

    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(10px);
}

.popup-title-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popup-header h3 {
    margin: 0;
    font-family: var(--identity-font, sans-serif);
    font-weight: var(--font-weight8, 800);
    font-size: var(--ft-20-19, 1.15rem);
    line-height: 1.15;
    letter-spacing: -.35px;
    color: var(--white-color-1, #fff);

    /* Keep title tidy */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-subtitle {
    margin: 0;
    font-family: var(--identity-font, sans-serif);
    font-weight: var(--font-weight4, 400);
    font-size: var(--ft-13-12, .8rem);
    line-height: 1.2;
    color: var(--grey-color-4, #909090);
}

.close-popup-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;

    color: var(--white-color-1, #fff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.close-popup-btn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: var(--accent-color-3, #e65443);
}

.close-popup-btn:focus-visible {
    outline: 2px solid var(--card-color, #00aeff);
    outline-offset: 3px;
}

/* ───────────────────────── Content ───────────────────────── */
.popup-content {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-lead {
    margin: 0 0 10px;
    color: var(--grey-color-3, #b0b0b0);
    font: 700 var(--ft-12-11, .78rem)/1.2 var(--identity-font, sans-serif);
    letter-spacing: .10em;
    text-transform: uppercase;
}

.affiliate-search-empty {
    margin: 0 0 8px;
    color: var(--grey-color-2, #bbbbbb);
    font: 400 var(--ft-14-13, .9rem)/1.25 var(--identity-font, sans-serif);
}

/* ───────────────────────── “Best deal” section ───────────────────────── */
.best-deal {
    /* product color strip (defaults to category/card color; overridden via :has mapping below) */
    --eg-product-color: var(--product-color, var(--card-color, var(--site-color, #00aeff)));

    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 12px;
}

.best-deal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.best-deal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font: 800 var(--ft-12-11, .78rem)/1.1 var(--identity-font, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-color-3, #b0b0b0);
}

.best-deal-kicker::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--card-color, #00aeff);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

.best-deal-meta {
    font: 500 var(--ft-12-11, .78rem)/1.1 var(--identity-font, sans-serif);
    color: var(--grey-color-4, #909090);
    white-space: nowrap;
}

/* partial_alinks.css — REPLACE THE ENTIRE PRIMARY BUTTON BLOCK
   Replace from:
     .affiliate-popup .primary-seller-btn { ... }
   through:
     .affiliate-popup .primary-seller-btn:focus-visible { ... }
   INCLUDING the old “Variant → token map …” rules.
*/
/* REPLACE your ENTIRE current primary CTA styling blocks with the blocks below:
   - Replace:
       .affiliate-popup .primary-seller-btn { ... }
       @supports (...) { .affiliate-popup .primary-seller-btn { ... } }
       @supports (...) { .affiliate-popup .primary-seller-btn:hover { ... } }
   - Keep your existing ::before strip block as-is (product color strip).
*/

/* ───────────────────────── Primary CTA — retailer-like button ───────────────────────── */
.affiliate-popup .primary-seller-btn {
    --eg-retailer: var(--retailer-color, var(--card-color, #00aeff));
    --eg-product: var(--product-color, var(--eg-retailer));

    position: relative;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 12px;
    padding-right: 19px;

    overflow: hidden;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    text-decoration: none;
    color: #000;

    /* Start with “real paint”: pure retailer color + subtle gloss/shade (NOT pastel) */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .10) 0%,
            rgba(255, 255, 255, .04) 38%,
            rgba(0, 0, 0, .18) 100%),
        var(--eg-retailer);


    transition:
        transform .12s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        filter .18s ease,
        background .18s ease;
}

@supports (background: color-mix(in srgb, #000 50%, transparent)) {
    .affiliate-popup .primary-seller-btn {
        /* Border that reads “retailer-colored” instead of gray */

        /* Add a small bloom that stays saturated (no white-wash) */
        background:
            radial-gradient(760px 240px at 55% -55%,
                color-mix(in srgb, var(--eg-retailer) 22%, rgba(255, 255, 255, .20)),
                transparent 62%),
            linear-gradient(180deg,
                rgba(255, 255, 255, .10) 0%,
                rgba(255, 255, 255, .04) 38%,
                rgba(0, 0, 0, .18) 100%),
            var(--eg-retailer);
    }
}

.affiliate-popup .primary-seller-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .26);
}

@supports (background: color-mix(in srgb, #000 50%, transparent)) {
    .affiliate-popup .primary-seller-btn:hover {
        border-color: color-mix(in srgb, var(--eg-retailer) 62%, rgba(0, 0, 0, .68));
        background:
            radial-gradient(760px 240px at 55% -55%,
                color-mix(in srgb, var(--eg-retailer) 26%, rgba(255, 255, 255, .22)),
                transparent 60%),
            linear-gradient(180deg,
                rgba(255, 255, 255, .12) 0%,
                rgba(255, 255, 255, .05) 38%,
                rgba(0, 0, 0, .16) 100%),
            var(--eg-retailer);
    }
}

/* Keep your existing strip:
   .affiliate-popup .primary-seller-btn::before { background: var(--eg-product ...); }
   That’s what makes the product color strip correct.
*/



.affiliate-popup .primary-seller-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--eg-product);
    opacity: 1;
}

.affiliate-popup .primary-seller-btn:focus-visible {
    outline: 2px solid var(--eg-retailer);
    outline-offset: 3px;
}


.affiliate-popup .primary-seller-btn .retailer-logo-wrap {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.affiliate-popup .primary-seller-btn .retailer-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
    pointer-events: none;
}

.primary-seller-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.affiliate-popup .primary-seller-btn .retailer-name {
    font: 800 var(--ft-18-16, 1rem)/1.15 var(--identity-font, sans-serif);
    letter-spacing: -.25px;

    /* Keep brand casing */
    text-transform: capitalize;

    /* wrap instead of truncating */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
}

.primary-seller-variant {
    display: inline-flex;
    align-items: center;
    padding: .5rem .85rem;
    border-radius: 999px;

    background: var(--eg-product);
    border: 1px solid rgba(255, 255, 255, .14);

    color: #000;

    font: 750 var(--ft-14-13, .85rem)/1 var(--identity-font, sans-serif);
    text-transform: capitalize;
}


/* DROP-IN: make the variant pill always use the PRODUCT (variant) color, but at 0.2 opacity.
   Works for both solid colors and your gradient tokens (e.g. --color-mac).
   No per-variant selectors needed.
*/

.primary-seller-variant {
    /* variant color comes from your HTML inline: --product-color: var(--color-<token>, ...) */
    --eg-variant: var(--product-color, var(--eg-product, var(--retailer-color, var(--card-color, #00aeff))));

    border-radius: 999px;
    padding: .5rem .9rem;

    /* 0.2 opacity variant color */
    background: color-mix(in srgb, var(--eg-variant) 30%, transparent);

    /* keep a subtle edge */
    border: 1px solid color-mix(in srgb, var(--eg-variant) 28%, rgba(0, 0, 0, .28));

    /* keep text readable (uses your ink if you pass it, else black) */
    color: #000
}

@supports not (background: color-mix(in srgb, #000 20%, transparent)) {
    .primary-seller-variant {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(0, 0, 0, 0.28);
    }
}


.primary-seller-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font: 700 var(--ft-14-13, .9rem)/1 var(--identity-font, sans-serif);
    color: #000;
    white-space: nowrap;
}

.primary-seller-cta-icon {
    opacity: .8;
    font-size: 1rem;
    line-height: 1;
}

/* On small screens, keep retailer name readable; hide the “See price” text first */
@media (max-width: 420px) {
    .primary-seller-cta-text {
        display: none;
    }
}

/* ───────────────────────── Primary retailer variants (clean) ───────────────────────── */
.primary-variants {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.primary-variants-label {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
    font: 600 var(--ft-13-12, .82rem)/1.2 var(--identity-font, sans-serif);
    color: var(--grey-color-3, #b0b0b0);
}

.pv-icon {
    font-size: var(--ft-16-15);
}

.primary-variants-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .35);
}

.primary-variants-label strong {
    color: var(--white-color-2, #f2f2f2);
    font-weight: 800;
}

.primary-variants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.primary-variant-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    padding: 10px 14px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);

    text-decoration: none;
    color: var(--white-color-1, #fff);
    font: 650 var(--ft-14-13, .86rem)/1 var(--identity-font, sans-serif);
    text-transform: capitalize;

    transition: transform .10s ease, background-color .18s ease, border-color .18s ease;
}

.primary-variant-link {
    position: relative;
    padding-left: 18px;
    /* room for strip */
    overflow: hidden;
}

/* partial_alinks.css — REPLACE ONLY THIS ONE BLOCK */

.primary-variant-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--product-color, var(--retailer-color, var(--card-color, #00aeff)));
    opacity: 1;
}


.primary-variant-link:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .05);
}

.primary-variant-link:focus-visible {
    outline: 2px solid var(--card-color, #00aeff);
    outline-offset: 2px;
}

.primary-variant-link .pv-icon {
    opacity: .55;
    font-size: .95rem;
}

/* ───────────────────────── Retailer grid (deal links) ───────────────────────── */
.retailer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
    gap: 10px;
    margin: 0;
}

@media (max-width: 520px) {
    .retailer-grid {
        grid-template-columns: 1fr;
    }
}

.retailer-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;

    text-decoration: none;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--ap-radius);
    padding: 10px 12px;
    min-height: 64px;

    transition: transform .10s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.retailer-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--ap-radius) 0 0 var(--ap-radius);
    background: rgba(var(--card-rgb, 0, 174, 255), .85);
    opacity: .9;
}

.retailer-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .05);
    border-color: rgba(var(--card-rgb, 0, 174, 255), .35);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}

.retailer-card:focus-visible {
    outline: 2px solid var(--card-color, #00aeff);
    outline-offset: 2px;
}

.affiliate-popup .retailer-card .retailer-logo-wrap {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .08);
}

.affiliate-popup .retailer-card .retailer-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.retailer-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.affiliate-popup .retailer-card .retailer-name {
    text-transform: none;
    font: 800 var(--ft-16-15, .95rem)/1.15 var(--identity-font, sans-serif);

    white-space: normal;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.affiliate-popup .retailer-card .retailer-variant {
    color: var(--grey-color-3, #b0b0b0);
    font: 500 var(--ft-14-13, .85rem)/1.15 var(--identity-font, sans-serif);
    text-transform: none;

    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Only on super tiny screens do we force single-line truncation */
@media (max-width: 340px) {

    .affiliate-popup .retailer-card .retailer-name,
    .affiliate-popup .retailer-card .retailer-variant {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* ───────────────────────── Search section ───────────────────────── */
.affiliate-search {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 12px;
    margin-top: 2px;
}

.affiliate-search--solo {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.affiliate-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.affiliate-search-form--multi {
    grid-template-columns: 1fr;
}

.affiliate-search-input {
    height: 42px;
    background: rgba(0, 0, 0, .25);
    color: var(--white-color-1, #fff);

    font: 400 var(--ft-14-13, .9rem)/1 var(--identity-font, sans-serif);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;
    padding: 0 12px;
    outline: none;
}

.affiliate-search-input:focus {
    border-color: rgba(var(--card-rgb, 0, 174, 255), .75);
    box-shadow: 0 0 0 3px rgba(var(--card-rgb, 0, 174, 255), .20);
}

/* ───────────────────────── Search buttons (uniform) ───────────────────────── */
.affiliate-search-primary-btn,
.affiliate-search-partner-btn {
    position: relative;

    width: 100%;
    min-height: 56px;

    /* uniform padding: icon slot left, label center, no depth */
    padding: 10px 14px;

    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;

    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    color: var(--white-color-1, #fff);
    cursor: pointer;
    text-decoration: none;

    transition: transform .10s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* Left accent strip */
.affiliate-search-primary-btn::before,
.affiliate-search-partner-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--retailer-color, var(--card-color, #00aeff));
    opacity: 1;
}

/* Hover = only time we add “depth” */
.affiliate-search-primary-btn:hover,
.affiliate-search-partner-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .22);
}

.affiliate-search-primary-btn:focus-visible,
.affiliate-search-partner-btn:focus-visible {
    outline: 2px solid var(--card-color, #00aeff);
    outline-offset: 2px;
}

/* Logo chip */
.affiliate-search-logo-chip {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.affiliate-search-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

/* Label: SINGLE LINE, never clamped */
.affiliate-search-btn-label,
.affiliate-search-partner-label {
    text-transform: none;
    font: 800 var(--ft-16-15, .95rem)/1.15 var(--identity-font, sans-serif);

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;

    text-align: center;
    justify-self: center;
    width: 100%;
}

/* multi mode: hide primary-on-form button */
.affiliate-search--multi .affiliate-search-primary-btn {
    display: none;
}

/* Partner grid: enforce a MIN width so labels never truncate.
   Drops to fewer columns automatically if the popup is narrower. */
.affiliate-search-partners {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* If popup is super narrow, stack (still one-line label; container is wide enough) */
@media (max-width: 480px) {
    .affiliate-search-partners {
        grid-template-columns: 1fr;
    }
}

/* Only on super tiny screens allow ellipsis */
@media (max-width: 340px) {

    .affiliate-search-btn-label,
    .affiliate-search-partner-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.affiliate-search-note {
    margin: 10px 0 0;
    font-weight: 400;
    line-height: 1.25;
    font-size: var(--ft-12-11, .75rem);
    font-family: var(--identity-font, sans-serif);
    color: var(--grey-color-3, #b0b0b0);
}

.affiliate-search-note a {
    color: var(--card-color, #00aeff);
}

.affiliate-search-note a:hover {
    text-decoration: underline;
}

/* ───────────────────────── Resizer handle ───────────────────────── */
.popup-resizer {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 6px;
    right: 6px;
    cursor: se-resize;
    opacity: .65;
}

.popup-resizer::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05));
    mask-image:
        radial-gradient(circle at 100% 100%, #000 44%, transparent 46%),
        linear-gradient(135deg, transparent 48%, #000 49% 51%, transparent 52%);
}

/* ───────────────────────── Open/close animations ───────────────────────── */
.affiliate-popup.is-opening,
.affiliate-popup.is-closing {
    will-change: transform, opacity;
}

.affiliate-popup.is-opening {
    animation: apPopIn var(--ap-open-dur) var(--ap-ease) both;
}

.affiliate-popup.is-closing {
    animation: apPopOut var(--ap-close-dur) var(--ap-ease-out) both;
}

.affiliate-popup[data-drag-anchored="true"].is-opening {
    animation-name: apAnchoredIn;
}

.affiliate-popup[data-drag-anchored="true"].is-closing {
    animation-name: apAnchoredOut;
}

@media (max-width:600px) {
    .affiliate-popup.is-opening {
        animation-name: apSheetIn;
    }

    .affiliate-popup.is-closing {
        animation-name: apSheetOut;
    }

    .affiliate-popup[data-drag-anchored="true"].is-opening {
        animation-name: apAnchoredSheetIn;
    }

    .affiliate-popup[data-drag-anchored="true"].is-closing {
        animation-name: apAnchoredSheetOut;
    }
}

@keyframes apPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(.96);
        filter: saturate(.98) blur(.2px);
    }

    60% {
        transform: translate(-50%, -50%) scale(1.01);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: none;
    }
}

@keyframes apPopOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -46%) scale(.98);
    }
}

@keyframes apAnchoredIn {
    from {
        opacity: 0;
        transform: scale(.96);
        filter: saturate(.98) blur(.2px);
    }

    60% {
        transform: scale(1.01);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

@keyframes apAnchoredOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(.98);
    }
}

@keyframes apSheetIn {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes apSheetOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes apAnchoredSheetIn {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes apAnchoredSheetOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}


@media (prefers-reduced-motion: reduce) {

    .affiliate-popup.is-opening,
    .affiliate-popup.is-closing {
        animation: none !important;
    }
}