/* =============================================================
 * Sales Gem banner — full-bleed footer promo.
 *
 * Critical: the banner shell MUST stretch edge-to-edge across the
 * viewport (left & right sides touching the screen edges, NO outer
 * margin or padding, NO max-width on the shell). The colored
 * gradient background runs from screen-edge to screen-edge.
 *
 * Internal content sits inside .sg-banner-inner which has its own
 * padding + max-width so on big monitors the text/image stay
 * legible without the background "collapsing" inward.
 * ============================================================= */

#sales-gem-banner.sg-banner {
    /* Full-bleed shell — touching viewport L and R edges. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;            /* zero outer padding by design */
    box-sizing: border-box;
    z-index: 9000;

    /* Subtle drop shadow + top border for visual separation */
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .25);
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font-family: var(--font-sans, system-ui, sans-serif);

    /* ============================================================
     * 2026-05-20 (fix-pack 3) — Three-state animation machine.
     *
     *   is-armed   — banner is in the DOM but hidden offscreen,
     *                waiting for the JS-scheduled delay to elapse.
     *   is-visible — banner has glided in and is being shown.
     *   is-exiting — banner is sliding/fading away after its display
     *                time elapsed or the user tapped close.
     *
     * Each entrance / exit style is a separate transform on the
     * armed / exiting state so JS just toggles classes; CSS handles
     * the actual motion. Long transition timing (.6s ease-out)
     * makes the glide smooth rather than a quick flash.
     * ============================================================ */
    transition: transform .7s cubic-bezier(.22, 1, .36, 1),
                opacity   .5s ease;
    will-change: transform, opacity;
}

/* ---- ARMED (hidden, waiting) ---- */
#sales-gem-banner.sg-banner.is-armed[data-entrance="fly_up"]      { transform: translateY(110%);  opacity: 1; }
#sales-gem-banner.sg-banner.is-armed[data-entrance="fade"]        { transform: translateY(0);     opacity: 0; }
#sales-gem-banner.sg-banner.is-armed[data-entrance="slide_left"]  { transform: translateX(110%);  opacity: 1; }
#sales-gem-banner.sg-banner.is-armed                              { pointer-events: none; }

/* ---- VISIBLE ---- */
#sales-gem-banner.sg-banner.is-visible {
    transform: translateY(0) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ---- EXITING ---- */
#sales-gem-banner.sg-banner.is-exiting[data-exit="fly_down"]    { transform: translateY(110%);  opacity: 1; pointer-events: none; }
#sales-gem-banner.sg-banner.is-exiting[data-exit="fade"]        { transform: translateY(0);     opacity: 0; pointer-events: none; }
#sales-gem-banner.sg-banner.is-exiting[data-exit="slide_right"] { transform: translateX(-110%); opacity: 1; pointer-events: none; }

/* Legacy class kept for backwards compat with cached JS calls. */
#sales-gem-banner.sg-banner.is-dismissed {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

/* Preview mode (rendered inside the seller analytics card) — pin
 * it inside its container, force-visible regardless of armed state. */
#sales-gem-banner.sg-banner--preview {
    position: relative;
    z-index: auto;
    box-shadow: none;
    border-top: none;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Tighten the preview banner gap — the analytics card is much
 * narrower than a real full-bleed banner, so the 3.2rem PC gap
 * would overflow. */
#sales-gem-banner.sg-banner--preview .sg-banner-inner {
    gap: 1.4rem;
}

/* ============================================================
 * Inner content — bounded width + readable padding
 * ============================================================ */
.sg-banner-inner {
    /* 2026-05-20 (fix-pack 4 + 5) — cluster the columns toward the
     * centre but with a generous 3.2rem (~51px) gap so the product
     * image isn't crowded by the side content. Order is enforced
     * by per-column `order:` properties below: 1 content, 2 image,
     * 3 cta, 4 brand-diamond.
     */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.2rem;
    padding: .9rem 1.6rem 1rem;
    max-width: 1380px;
    margin: 0 auto;
    position: relative;
}

/* Dismiss button — sits at the top-right of the full shell */
.sg-close {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: background .2s ease;
}
.sg-close:hover {
    background: rgba(255, 255, 255, .28);
}

/* ============================================================
 * Product image — now the CENTRAL visual anchor (2026-05-20 fix-pack 4)
 * ============================================================ */
.sg-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    order: 2;             /* hard-enforce middle position */
}
.sg-product-img {
    position: relative;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
    z-index: 2;
    background: #fff;
    display: block;
}
.sg-product-img--placeholder {
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    background: rgba(255, 255, 255, .12);
}
.sg-img-glow {
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    opacity: .55;
    filter: blur(10px);
    z-index: 1;
}

/* ============================================================
 * Center content — curved header + title + pricing
 * ============================================================ */
.sg-content {
    /* 2026-05-20 (fix-pack 7) — re-aligned. Earlier passes pulled
     * the SALES GEM arc to the right edge and right-aligned the
     * title + prices, which made the arc look disconnected from
     * the lines below it. We now centre-align all three rows
     * inside the content column so they read as one structured
     * block: ARC ↘ TITLE ↘ PRICES. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 360px;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
}
.sg-curved-header {
    /* 2026-05-20 (fix-pack 7) — centred above the title to read as
     * a kicker badge. Earlier fix-pack 5 shoved it rightward to
     * point at the image; with the content column now centre-aligned
     * we centre the arc too for a tidy stacked look. */
    width: 260px;
    height: 38px;
    margin: 0 auto -2px;
    overflow: visible;
    pointer-events: none;
}
.sg-arc-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.sg-title-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .15rem;
}
.sg-product-title {
    /* 2026-05-20 (fix-pack 7) — slightly bolder and a subtle text
     * shadow so the title reads cleanly over every template
     * gradient. Centre-aligned with the arc + pricing below. */
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    letter-spacing: .1px;
}
.sg-tag {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    color: inherit;
    border-radius: 10px;
    padding: .12rem .5rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.sg-pricing {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .25rem;
}
.sg-old-price {
    color: inherit;
    opacity: .7;
    font-size: .82rem;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.sg-new-price {
    color: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.sg-discount-pill {
    background: #fde68a;
    color: #7f1d1d;
    border-radius: 99px;
    padding: .2rem .6rem;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* ============================================================
 * CTA column — countdown + button
 * ============================================================ */
.sg-cta-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    flex-shrink: 0;
    min-width: 150px;
    order: 3;
}
.sg-countdown {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    justify-content: flex-end;
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.sg-countdown-label {
    font-size: .68rem;
    opacity: .82;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.sg-countdown-time {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .8px;
}
.sg-cta-form {
    margin: 0;
}
.sg-cta-btn {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .25px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    transition: transform .12s ease, box-shadow .15s ease;
    text-align: center;
    line-height: 1.2;
}
.sg-cta-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.sg-cta-btn:active:not([disabled]) {
    transform: translateY(0);
}
.sg-cta-btn[disabled] {
    cursor: default;
    opacity: .9;
}

/* ============================================================
 * 2026-05-20 (fix-pack 6) — Decorative diamond brand mark.
 *
 * REWRITE notes (vs fix-pack 5):
 *   • No more circle background, border, or inner glow ring. Just
 *     the blue 💎 glyph itself with a clean drop-shadow.
 *   • Repositioned to the LEFT side of the banner (order: 0).
 *   • Container is FIXED SIZE so the looping animations only ever
 *     transform the inner glyph — surrounding banner elements
 *     (image, title, prices, CTA) never get pushed around even at
 *     the most exaggerated animation key positions.
 *   • Eight looping styles, selected by `data-diamond-anim` on the
 *     wrapper. CSS attribute selectors flip the matching keyframe
 *     on .sg-brand-diamond-glyph.
 * ============================================================ */
.sg-brand-diamond {
    /* Fixed-size container — guarantees animations on the inner
     * glyph never displace neighbouring banner elements. */
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    order: 0;                /* LEFT side on PC */
    display: grid;
    place-items: center;
    overflow: visible;       /* let big-scale animations breathe */
    background: transparent; /* no placeholder — clean look */
    border: 0;
    box-shadow: none;
    position: relative;
}
.sg-brand-diamond-glyph {
    display: inline-block;
    font-size: 3rem;
    line-height: 1;
    /* Clean drop-shadow + faint specular highlight — gives the gem
     * depth without any background plate. */
    filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, .35))
        drop-shadow(0 0 14px rgba(56, 189, 248, .35));
    transform-origin: center center;
    /* Default animation comes from the data-diamond-anim attribute
     * selectors below. `will-change` keeps the GPU layer hot for
     * smooth transitions. */
    will-change: transform, opacity;
}

/* ---- 8 looping animations + 'none' --------------------------- */

/* PULSE — gentle scale breathing (default) */
.sg-brand-diamond[data-diamond-anim="pulse"] .sg-brand-diamond-glyph {
    animation: sg-diamond-pulse 3.4s ease-in-out infinite;
}
@keyframes sg-diamond-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* ROTATE — full 360° infinite spin */
.sg-brand-diamond[data-diamond-anim="rotate"] .sg-brand-diamond-glyph {
    animation: sg-diamond-rotate 5s linear infinite;
}
@keyframes sg-diamond-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* BOUNCE — energetic vertical bounce with ease-in tail */
.sg-brand-diamond[data-diamond-anim="bounce"] .sg-brand-diamond-glyph {
    animation: sg-diamond-bounce 1.4s cubic-bezier(.5, .05, .5, .95) infinite;
}
@keyframes sg-diamond-bounce {
    0%, 100%      { transform: translateY(0);     }
    20%           { transform: translateY(-10px); }
    40%           { transform: translateY(0);     }
    55%           { transform: translateY(-4px);  }
    70%           { transform: translateY(0);     }
}

/* UP-DOWN — slow vertical float */
.sg-brand-diamond[data-diamond-anim="up_down"] .sg-brand-diamond-glyph {
    animation: sg-diamond-up-down 3.2s ease-in-out infinite;
}
@keyframes sg-diamond-up-down {
    0%, 100% { transform: translateY(0);      }
    50%      { transform: translateY(-8px);   }
}

/* SHAKE — fast left-right wiggle */
.sg-brand-diamond[data-diamond-anim="shake"] .sg-brand-diamond-glyph {
    animation: sg-diamond-shake 1.8s ease-in-out infinite;
}
@keyframes sg-diamond-shake {
    0%, 100%     { transform: translateX(0);    }
    10%          { transform: translateX(-3px); }
    20%          { transform: translateX(3px);  }
    30%          { transform: translateX(-3px); }
    40%          { transform: translateX(3px);  }
    50%          { transform: translateX(0);    }
}

/* SWAY — pendulum-style left-right rotation */
.sg-brand-diamond[data-diamond-anim="sway"] .sg-brand-diamond-glyph {
    animation: sg-diamond-sway 3s ease-in-out infinite;
    transform-origin: 50% 20%;   /* swing from the top */
}
@keyframes sg-diamond-sway {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate( 12deg); }
}

/* HEARTBEAT — two-step double-pulse like a heartbeat */
.sg-brand-diamond[data-diamond-anim="heartbeat"] .sg-brand-diamond-glyph {
    animation: sg-diamond-heartbeat 1.4s ease-in-out infinite;
}
@keyframes sg-diamond-heartbeat {
    0%, 70%, 100% { transform: scale(1);    }
    15%           { transform: scale(1.20); }
    30%           { transform: scale(1);    }
    45%           { transform: scale(1.12); }
}

/* SPARKLE — gentle opacity flicker + tiny scale */
.sg-brand-diamond[data-diamond-anim="sparkle"] .sg-brand-diamond-glyph {
    animation: sg-diamond-sparkle 2.4s ease-in-out infinite;
}
@keyframes sg-diamond-sparkle {
    0%, 100% { opacity: 1;   transform: scale(1)    rotate(0deg); }
    25%      { opacity: .7;  transform: scale(1.05) rotate(-4deg); }
    50%      { opacity: 1;   transform: scale(1.10) rotate( 0deg); }
    75%      { opacity: .8;  transform: scale(1.05) rotate( 4deg); }
}

/* NONE — completely static */
.sg-brand-diamond[data-diamond-anim="none"] .sg-brand-diamond-glyph {
    animation: none;
}

/* Respect user motion preferences — disable looping animation. */
@media (prefers-reduced-motion: reduce) {
    .sg-brand-diamond-glyph {
        animation: none !important;
    }
}

/* ============================================================
 * Responsive — mobile-first reflow.
 * On small screens, stack the columns and shrink art. The
 * full-bleed shell stays full-bleed regardless.
 * ============================================================ */
@media (max-width: 720px) {
    .sg-banner-inner {
        padding: .8rem 1.1rem .9rem;
        gap: .9rem;
        align-items: center;
        flex-wrap: nowrap;
        /* On PC the gap is 3.2rem for the wider cluster; on phone
         * we tighten to .9rem because the brand-diamond is hidden
         * (fix-pack 8) and only [content][image][cta] remains,
         * needing less horizontal breathing room. */
    }
    /* 2026-05-20 (fix-pack 8) — phone: hide the decorative brand
     * diamond and KEEP the product image visible. Earlier fix-pack
     * 5/6 swapped them the other way around; user feedback is that
     * the actual product photo is far more important than the brand
     * mark on small screens. So:
     *   • .sg-brand-diamond → display:none (kept in DOM, just hidden)
     *   • .sg-img-wrap stays visible, sized down for phones
     */
    .sg-brand-diamond {
        display: none;
    }
    .sg-img-wrap,
    .sg-product-img {
        width: 65px;
        height: 65px;
    }
    .sg-content {
        max-width: 220px;
    }
    .sg-product-title {
        max-width: 200px;
        font-size: .86rem;
    }
    .sg-curved-header {
        width: 170px;
        height: 26px;
    }
    .sg-arc-text { font-size: 15px; letter-spacing: 3px; }
    .sg-old-price { font-size: .72rem; }
    .sg-new-price { font-size: .95rem; }
    .sg-discount-pill { font-size: .72rem; padding: .15rem .45rem; }
    .sg-cta-col { min-width: 110px; gap: .25rem; }
    .sg-countdown-label { display: none; }
    .sg-countdown-time { font-size: .85rem; }
    .sg-cta-btn { padding: .5rem .55rem; font-size: .78rem; }
    .sg-tag { display: none; }
}

@media (max-width: 480px) {
    .sg-close {
        top: 4px; right: 6px;
        width: 24px; height: 24px;
        font-size: 1.1rem;
    }
    .sg-banner-inner {
        padding: .65rem .8rem .75rem;
        gap: .65rem;
    }
    /* Brand diamond stays hidden on extra-small screens too —
     * inherited from the 720px rule, redeclared here for clarity. */
    .sg-brand-diamond {
        display: none;
    }
    .sg-img-wrap,
    .sg-product-img {
        max-width: 100%;
        width: 62px;
        height: 62px;
    }
    .sg-content {
        max-width: 150px;
    }
    .sg-product-title {
        max-width: 130px;
        font-size: .8rem;
    }
    .sg-curved-header {
        width: 130px;
        height: 22px;
    }
    .sg-arc-text { font-size: 13px; letter-spacing: 2px; }
    .sg-cta-col { min-width: 90px; }
    .sg-cta-btn { padding: .45rem .5rem; font-size: .72rem; }
}

/* Push the page bottom up so the banner doesn't cover footer
 * content. Only applies when banner is in the DOM (not preview). */
body.has-sales-gem-banner {
    padding-bottom: 96px;
}
@media (max-width: 720px) {
    body.has-sales-gem-banner { padding-bottom: 84px; }
}

/* ============================================================
 * Product-detail discount notice (when buyer arrived from a Gem).
 * ============================================================ */
.sg-active-discount-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #facc15;
    color: #7f1d1d;
    padding: .65rem .9rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.sg-active-discount-banner .sg-gem-icon { font-size: 1.3rem; }
.sg-active-discount-banner .sg-clock {
    margin-left: auto;
    background: #7f1d1d;
    color: #fff;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
}

/* =============================================================
 * 2026-05-20 (fix-pack 1) — form pickers used on /seller/sales-gem/new
 * and /seller/sales-gem/{id}/edit. Replaces the old square-tile
 * `.ad-product-picker` look that rendered as a giant green block
 * when sellers only had 1 or 2 listings.
 * ============================================================= */

/* ---- Listing picker (compact, list-based) ---- */
.sg-listing-picker {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 360px;
    overflow-y: auto;
    padding-right: .35rem;
}
.sg-listing-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .85rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    position: relative;
}
.sg-listing-row:hover {
    border-color: #fbbf24;
    background: #fffbeb;
}
.sg-listing-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sg-listing-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f3f4f6 center/cover no-repeat;
    display: grid;
    place-items: center;
    border: 1px solid #e5e7eb;
}
.sg-listing-thumb-fallback {
    font-size: 1.5rem;
    opacity: .55;
}
.sg-listing-meta {
    flex: 1;
    min-width: 0;
}
.sg-listing-title {
    font-weight: 600;
    color: #111827;
    font-size: .95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-listing-price {
    font-size: .82rem;
    color: #047857;
    margin-top: .15rem;
    font-weight: 600;
}
.sg-listing-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    color: transparent;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.sg-listing-row.is-selected,
.sg-listing-row:has(input:checked) {
    border-color: #d97706;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .18);
}
.sg-listing-row.is-selected .sg-listing-check,
.sg-listing-row:has(input:checked) .sg-listing-check {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
}

/* ---- Page-pill picker (visual feedback when checked) ---- */
.sg-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
    margin-top: .6rem;
}
.sg-page-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.sg-page-pill:hover { border-color: #047857; }
.sg-page-pill.is-selected,
.sg-page-pill:has(input:checked) {
    border-color: #047857;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.sg-page-pill input {
    margin: 0;
    accent-color: #047857;
}

/* ---- Template cards with strong selection feedback ---- */
.sg-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .7rem;
    margin-top: .5rem;
}
.sg-template-card {
    display: block;
    padding: 0;
    border: 3px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sg-template-card:hover {
    border-color: #fbbf24;
    transform: translateY(-2px);
}
.sg-template-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sg-template-preview {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .5px;
}
.sg-template-meta {
    padding: .6rem .75rem;
}
.sg-template-name {
    font-weight: 700;
    color: #111827;
    font-size: .95rem;
}
.sg-template-desc {
    font-size: .78rem;
    color: #6b7280;
    margin-top: .15rem;
    line-height: 1.3;
}
.sg-template-check {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(217, 119, 6, .35);
}
.sg-template-card.is-selected,
.sg-template-card:has(input:checked) {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .25), 0 8px 20px rgba(217, 119, 6, .2);
}
.sg-template-card.is-selected .sg-template-check,
.sg-template-card:has(input:checked) .sg-template-check {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Cost summary uses tabular numerics so digits don't wobble ---- */
.cost-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}
.cost-summary > div:nth-child(odd):not(.form-actions) {
    text-align: center;
}
.cost-summary .form-actions {
    margin-left: auto;
}

/* =============================================================
 * 2026-05-20 (fix-pack 2) — Sales Gem campaign card layout.
 *
 * Replaces the previous `.ad-card` / `.ad-thumb` reuse which had
 * `aspect-ratio: 16/9` and rendered as a giant green block on
 * single-card rows. New design: horizontal card with a fixed-size
 * thumbnail on the left and content on the right.
 * ============================================================= */
.sg-campaign-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
}
.sg-campaign-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.sg-campaign-thumb {
    flex-shrink: 0;
    width: 140px;
    min-height: 100%;
    background: #f3f4f6 center/cover no-repeat;
    position: relative;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid #e5e7eb;
}
.sg-campaign-thumb-fallback {
    font-size: 2.2rem;
    opacity: .35;
}
.sg-campaign-discount {
    position: absolute;
    top: .55rem;
    left: .55rem;
    font-size: .75rem;
    padding: .2rem .55rem;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    border-radius: 99px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(217, 119, 6, .25);
}
.sg-campaign-body {
    flex: 1;
    min-width: 0;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.sg-campaign-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.sg-campaign-title {
    font-weight: 700;
    color: #111827;
    font-size: 1.02rem;
    text-decoration: none;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.sg-campaign-title:hover { color: #047857; }
.sg-campaign-meta {
    line-height: 1.25;
}
.sg-progress-wrap {
    height: 6px;
    background: #eef0f3;
    border-radius: 99px;
    overflow: hidden;
    margin-top: .15rem;
}
.sg-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    transition: width .3s ease;
}
.sg-campaign-stats {
    display: flex;
    gap: 1rem;
    color: #6b7280;
    margin-top: .15rem;
    flex-wrap: wrap;
}
.sg-campaign-stats strong {
    color: #111827;
}
.sg-campaign-actions {
    display: flex;
    gap: .4rem;
    margin-top: .35rem;
}
.sg-campaign-actions .btn {
    flex: 1;
    text-align: center;
}

@media (max-width: 560px) {
    .sg-campaign-card {
        flex-direction: column;
    }
    .sg-campaign-thumb {
        width: 100%;
        height: 120px;
        min-height: 120px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }
}

/* =============================================================
 * 2026-05-20 (fix-pack 3) — per-template product-image art.
 *
 * Each banner template gets a slightly different image frame /
 * placement so the same campaign looks distinct across templates.
 * Markup-level support comes from the `tpl-{slug}` class on the
 * outer banner div (added by sales-gem-banner.php).
 *
 * If for any reason the product image fails to load, the
 * `<img onerror>` swap reveals a styled placeholder using the
 * template accent colour.
 * ============================================================= */

/* Hard ensure the image is visible — overrides any host-page
 * CSS that may set `img { max-width: 100% }` with a flexbox
 * collapse on its parent. */
.sg-banner .sg-img-wrap {
    overflow: visible;
}
.sg-banner .sg-product-img:not(.sg-product-img--placeholder) {
    display: block;
}

/* CLASSIC — gold-bordered rounded card. */
.sg-banner.tpl-classic .sg-product-img {
    border-radius: 18px;
    border: 3px solid rgba(253, 230, 138, .65);
}
.sg-banner.tpl-classic .sg-img-glow {
    inset: -6px;
    filter: blur(14px);
    opacity: .7;
}

/* VIBRANT — circular crop with bright halo. */
.sg-banner.tpl-vibrant .sg-img-wrap,
.sg-banner.tpl-vibrant .sg-product-img {
    border-radius: 50%;
}
.sg-banner.tpl-vibrant .sg-product-img {
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 0 26px rgba(253, 224, 71, .6), 0 8px 18px rgba(0, 0, 0, .35);
}
.sg-banner.tpl-vibrant .sg-img-glow {
    border-radius: 50%;
    inset: -8px;
    filter: blur(20px);
    opacity: .85;
}

/* MINIMAL — clean square card, soft shadow. */
.sg-banner.tpl-minimal .sg-product-img {
    border-radius: 10px;
    border: 1px solid rgba(202, 138, 4, .35);
    box-shadow: 0 6px 14px rgba(31, 41, 55, .2);
}
.sg-banner.tpl-minimal .sg-img-glow {
    inset: -2px;
    opacity: .18;
    filter: blur(22px);
}

/* FESTIVE — gold + maroon double-border. */
.sg-banner.tpl-festive .sg-product-img {
    border-radius: 12px;
    border: 2px solid #fef08a;
    outline: 3px solid rgba(127, 29, 29, .65);
    outline-offset: 2px;
}
.sg-banner.tpl-festive .sg-img-glow {
    inset: -8px;
    filter: blur(12px);
    opacity: .65;
}

/* Image-load failure placeholder — distinct per template via accent. */
.sg-banner .sg-product-img.sg-product-img--placeholder {
    background: rgba(255, 255, 255, .14);
    color: inherit;
    font-size: 2.2rem;
}

/* =============================================================
 * 2026-05-20 (fix-pack 3) — Product-detail Sales Gem discount UI.
 *
 * Rendered by product-details.php when the buyer arrived from a
 * banner click and the `sg_discount_{cid}` cookie is still active.
 * ============================================================= */

/* Discount pill that sits next to the new price */
.sg-pdp-discount-pill {
    display: inline-block;
    margin-left: .55rem;
    padding: .2rem .6rem;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .3px;
    vertical-align: middle;
    box-shadow: 0 3px 8px rgba(217, 119, 6, .35);
}

/* The full notice that explains the discount + countdown */
.sg-active-discount-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #facc15;
    color: #7f1d1d;
    padding: .75rem 1rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 1rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(217, 119, 6, .15);
    line-height: 1.35;
}
.sg-active-discount-banner .sg-gem-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(127, 29, 29, .25));
}
.sg-active-discount-banner > span:not(.sg-gem-icon):not(.sg-clock) {
    flex: 1;
    min-width: 0;
}
.sg-active-discount-banner .sg-clock {
    flex-shrink: 0;
    background: #7f1d1d;
    color: #fff;
    padding: .3rem .65rem;
    border-radius: 99px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    letter-spacing: .5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

@media (max-width: 560px) {
    .sg-active-discount-banner {
        flex-wrap: wrap;
        padding: .65rem .8rem;
        font-size: .9rem;
    }
    .sg-active-discount-banner .sg-clock {
        margin-left: auto;
        font-size: .82rem;
    }
}

/* =============================================================
 * 2026-05-20 (fix-pack 6) — Diamond animation preview, used inside
 * the seller's create/edit form alongside the dropdown picker.
 * The keyframes above are already keyed on data-diamond-anim so
 * the preview reuses them automatically — these rules just give
 * the preview its own little card-like presentation.
 * ============================================================= */
.sg-diamond-preview-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem .9rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 70%, #d4a017 100%);
    border-radius: 12px;
    color: #fff;
    min-height: 78px;
}
.sg-brand-diamond.sg-diamond-preview {
    width: 60px;
    height: 60px;
    margin-left: auto;       /* tuck the gem to the right of the label */
}
.sg-brand-diamond.sg-diamond-preview .sg-brand-diamond-glyph {
    font-size: 2.4rem;
}