/* ─────────────────────────────────────────────────────────────────
   SHOP REDESIGN v6 — Discord-style premium
   ───────────────────────────────────────────────────────────────── */

/* ── Rarity tokens ── */
.shop-card.rarity-border-commun     { --srd-c1:#5865f2; --srd-c2:#3b46d4; --srd-glow:rgba(88,101,242,.55); --srd-label:'COMMUN'; }
.shop-card.rarity-border-rare       { --srd-c1:#22d3ee; --srd-c2:#0891b2; --srd-glow:rgba(34,211,238,.6);  --srd-label:'RARE'; }
.shop-card.rarity-border-épique     { --srd-c1:#c084fc; --srd-c2:#9333ea; --srd-glow:rgba(192,132,252,.65); --srd-label:'ÉPIQUE'; }
.shop-card.rarity-border-légendaire { --srd-c1:#fbbf24; --srd-c2:#d97706; --srd-glow:rgba(251,191,36,.7);   --srd-label:'LÉGENDAIRE'; }
.shop-card.rarity-border-limité     { --srd-c1:#fb7185; --srd-c2:#e11d48; --srd-glow:rgba(251,113,133,.7);  --srd-label:'LIMITÉ'; }
.shop-card { --srd-c1:#5865f2; --srd-c2:#3b46d4; --srd-glow:rgba(88,101,242,.4); --srd-label:''; }

/* ── GRID ── */
.shop-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    padding: 6px 2px !important;
}

/* ── TILE ── */
.shop-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #2b2d31 0%, #1e1f22 100%) !important;
    border: 1px solid rgba(255,255,255,.04) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .3s, border-color .25s !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
    isolation: isolate;
    cursor: pointer;
    padding: 0 !important;
}
.shop-card::before, .shop-card::after { content: none !important; }
.shop-card:hover {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--srd-c1) 50%, transparent) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--srd-glow) 40%, transparent) !important;
}
.shop-card.equipped {
    border-color: rgba(35,209,139,.6) !important;
    box-shadow: 0 0 0 1px rgba(35,209,139,.4), 0 0 18px rgba(35,209,139,.3), 0 4px 14px rgba(0,0,0,.4) !important;
}

/* ── PREVIEW area — vibrant gradient header ── */
.shop-card-preview-wrap {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--srd-c1) 55%, transparent) 0%, transparent 65%),
        linear-gradient(160deg, var(--srd-c1) 0%, var(--srd-c2) 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Font category: shorter preview — no need for full square */
.shop-card-preview-wrap:has(.shop-preview--font) {
    aspect-ratio: 16 / 7 !important;
}
.shop-card-preview-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 20%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,.4), transparent 50%),
        radial-gradient(2px 2px at 65% 75%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.3), transparent 50%);
    pointer-events: none;
    opacity: .6;
    z-index: 1;
}
.shop-card-preview-wrap::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
    z-index: 1;
}
.shop-card-preview-wrap > .shop-preview {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    position: relative;
    z-index: 2;
}
.shop-card-preview-wrap .shop-mp-card {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.shop-card-preview-wrap .shop-mp-handle,
.shop-card-preview-wrap .shop-mp-status-dot,
.shop-card-preview-wrap .shop-mp-bg-rays,
.shop-card-preview-wrap .shop-preview-aura-bg,
.shop-card-preview-wrap .shop-preview-font-tag,
.shop-card-preview-wrap .shop-preview-widget-info,
.shop-card-preview-wrap .spub-name-bars,
.shop-card-preview-wrap .spt-mock-bar {
    display: none !important;
}
.shop-card-preview-wrap .shop-mp-info { width: auto !important; min-width: 0 !important; }

/* === BADGE === */
.shop-card-preview-wrap .shop-preview--badge .shop-mp-card { gap: 14px !important; }
.shop-card-preview-wrap .shop-preview--badge .shop-mp-avatar {
    width: 78px !important; height: 78px !important; border-radius: 50% !important;
    border: 3px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.4) !important;
}
.shop-card-preview-wrap .shop-preview--badge .shop-mp-name { display: none !important; }
.shop-card-preview-wrap .shop-preview--badge .shop-mp-name-row {
    display: flex !important; justify-content: center !important; margin: 0 !important;
}
.shop-card-preview-wrap .shop-preview--badge .shop-mp-badge {
    width: 44px !important; height: 44px !important; font-size: 1.6rem !important;
    border: 3px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}

/* === AURA === */
.shop-card-preview-wrap .shop-preview--aura .shop-mp-avatar--aura { width: 86px !important; height: 86px !important; }
.shop-card-preview-wrap .shop-preview--aura .shop-mp-name { display: none !important; }
.shop-card-preview-wrap .shop-preview--aura .shop-mp-aura-ring { inset: -10px !important; }

/* === FONT === single-line, auto-fit (size set inline by JS) === */
.shop-card-preview-wrap .shop-preview--font .shop-mp-avatar { display: none !important; }
.shop-card-preview-wrap .shop-preview--font .shop-mp-card { padding: 12px !important; }
.shop-card-preview-wrap .shop-preview--font .shop-mp-info {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: 100% !important;
    overflow: hidden !important;
}
/* Identical animated background for ALL font cards (override rarity tint) */
.shop-card:has(.shop-preview--font) .shop-card-preview-wrap {
    background:
        linear-gradient(120deg, #1a1d2e 0%, #2d1b4e 35%, #1f3a5f 70%, #1a1d2e 100%) !important;
    background-size: 200% 200% !important;
    animation: srd-font-bg 9s ease-in-out infinite;
}
@keyframes srd-font-bg {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.shop-card:has(.shop-preview--font) .shop-card-preview-wrap::before {
    background:
        radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,.6), transparent 50%),
        radial-gradient(1.5px 1.5px at 75% 35%, rgba(168,120,255,.7), transparent 50%),
        radial-gradient(2px 2px at 60% 70%, rgba(91,141,238,.6), transparent 50%),
        radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.5px 1.5px at 85% 65%, rgba(0,217,163,.6), transparent 50%),
        radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,.4), transparent 50%);
    background-size: 200% 200%;
    opacity: .8;
    animation: srd-font-twinkle 3s ease-in-out infinite alternate, srd-font-stars-drift 24s linear infinite;
}
@keyframes srd-font-twinkle {
    from { opacity: .35; }
    to   { opacity: .95; }
}
@keyframes srd-font-stars-drift {
    from { background-position: 0% 0%; }
    to   { background-position: 100% 100%; }
}
.shop-card-preview-wrap .shop-preview--font .shop-mp-name--font {
    font-size: clamp(.85rem, 9cqw, 2rem);
    line-height: 1 !important; color: #fff !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.55), 0 0 20px rgba(168,120,255,.3) !important;
    text-align: center !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    margin: 0 !important; padding: 0 !important;
    display: inline-block !important;
    transform-origin: center center;
}
.shop-card-preview-wrap .shop-preview--font {
    container-type: inline-size;
}

/* === THEME === */
.shop-card-preview-wrap .shop-preview--theme .spt-mockup { display: none !important; }
.shop-card-preview-wrap .shop-preview-label {
    font-size: 2.6rem !important;
    text-shadow: 0 4px 14px rgba(0,0,0,.5);
    position: static !important;
}

/* === WIDGET === */
.shop-card-preview-wrap .shop-preview-widget-icon {
    font-size: 3.4rem !important; margin: 0 !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}

/* === EMOJI === */
.shop-card-preview-wrap .shop-preview--emoji {
    font-size: 3.8rem !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}

/* ── RARITY PILL ── style original badge directly, no ::before ── */
.shop-card-rarity-row { display: contents !important; }
.shop-card .shop-card-rarity-row > .rarity-badge {
    position: absolute !important;
    top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important;
    margin: 0 !important;
    font-size: .56rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--srd-c1) 35%, rgba(0,0,0,.65)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--srd-c1) 55%, rgba(255,255,255,.25)) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    z-index: 4 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.shop-card .shop-card-rarity-row > .rarity-badge::before,
.shop-card .shop-card-rarity-row > .rarity-badge::after { content: none !important; }
/* Hide for commun (default rarity) */
.shop-card .shop-card-rarity-row > .rarity-badge.rarity-commun,
.shop-card.rarity-border-commun .shop-card-rarity-row > .rarity-badge {
    display: none !important;
}

/* ── EYE / GIFT ── */
.shop-card-eye-btn, .shop-card-gift-btn {
    position: absolute !important;
    width: 30px !important; height: 30px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 50% !important;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    cursor: pointer; opacity: 0; transform: scale(.85);
    transition: opacity .2s, transform .2s, background .2s, border-color .2s;
    z-index: 5; padding: 0 !important; font-size: .9rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.shop-card-gift-btn { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; }
.shop-card-eye-btn  { top: 10px !important; right: 48px !important; left: auto !important; bottom: auto !important; }
.shop-card-eye-btn svg { width: 14px !important; height: 14px !important; }
.shop-card:hover .shop-card-eye-btn,
.shop-card:hover .shop-card-gift-btn { opacity: 1; transform: scale(1); }
.shop-card-eye-btn:hover  { background: rgba(34,211,238,.55) !important; border-color: rgba(34,211,238,.8) !important; }
.shop-card-gift-btn:hover { background: rgba(251,113,133,.55) !important; border-color: rgba(251,113,133,.8) !important; }

/* ── QUANTITY ── */
.shop-card-qty-badge {
    position: absolute !important;
    bottom: 10px !important; left: 10px !important; top: auto !important; right: auto !important;
    padding: 4px 10px !important; font-size: .68rem !important; font-weight: 900 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a0e00 !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    z-index: 5 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}

/* ── LIMITED TIMER ── centered BOTTOM pill (above the buy button) ── */
.rarity-timer {
    position: absolute !important;
    bottom: 70px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    font-size: .58rem !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 11px 5px 22px !important;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 7;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        0 4px 14px rgba(225,29,72,.55);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.rarity-timer::before {
    content: '';
    position: absolute;
    left: 9px; top: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,.95);
    animation: srd-timer-pulse 1.4s ease-in-out infinite;
}
@keyframes srd-timer-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: .5; transform: translateY(-50%) scale(.65); }
}

/* ── BODY (compact) ── */
.shop-card-body {
    padding: 10px 14px 2px !important;
    min-width: 0 !important;
    flex: 0 0 auto;
    background: transparent !important;
}
.shop-card-title {
    font-size: .95rem !important; font-weight: 800 !important; color: #fff !important;
    background: none !important; -webkit-text-fill-color: initial !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    margin: 0 !important; letter-spacing: -.2px;
}
.shop-card-handle { display: none !important; }
.shop-card-desc { display: none !important; }

/* ── FOOTER (compact) ── */
.shop-card-footer {
    padding: 6px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex: 0 0 auto;
    background: transparent !important;
}
.shop-card-price-tag {
    margin: 0 !important;
    font-size: .98rem !important; font-weight: 900 !important; color: #fff !important;
    background: none !important; border: none !important; border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important; align-items: center; gap: 5px !important;
    flex-shrink: 0; letter-spacing: -.3px;
}
.shop-card-price-tag::before {
    content: 'Prix';
    display: inline-block;
    font-size: .55rem; font-weight: 700; letter-spacing: 1px;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    margin-right: 5px;
    line-height: 1;
}
.shop-card-price-tag--owned { color: #23d18b !important; }
.shop-card-price-tag--owned::before { content: 'Possédé'; color: rgba(35,209,139,.7) !important; }
.shop-card-price-tag .bpv-pts-inline-logo { width: 16px; height: 16px; }

/* ── BIG BUY BUTTON ── */
/* ── BIG BUY BUTTON ── solid premium gradient (pro Discord-style) ── */
.shop-card-footer .shop-item-btn {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 8px !important;
    transition: transform .14s, box-shadow .25s, background .22s, border-color .22s, color .2s, filter .2s !important;
    position: relative; overflow: hidden; white-space: nowrap;
    margin: 0 !important; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16) !important;
}
.shop-item-btn--buy {
    background:
        linear-gradient(135deg, #00d9a3 0%, #5b8dee 50%, #a878ff 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 6px 16px rgba(91,141,238,.42),
        0 2px 6px rgba(0,0,0,.3) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    font-size: .9rem !important;
}
.shop-item-btn--buy::before {
    content: 'Acheter';
    color: #fff;
    font-weight: 900;
    letter-spacing: .4px;
}
.shop-item-btn--buy img {
    display: inline-block !important;
    width: 14px !important; height: 14px !important;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.shop-item-btn--buy:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,255,255,.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 12px 28px rgba(91,141,238,.6),
        0 4px 10px rgba(168,120,255,.35) !important;
    filter: brightness(1.08) saturate(1.15);
}
.shop-item-btn--buy:active {
    transform: translateY(0) scale(.98) !important;
    filter: brightness(.96);
}
.shop-item-btn--buy::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: translateX(-100%); transition: transform .7s ease;
    pointer-events: none;
}
.shop-item-btn--buy:hover::after { transform: translateX(100%); }
.shop-item-btn--buy:active { transform: translateY(0) scale(.98) !important; }
.shop-item-btn--buy::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: translateX(-100%); transition: transform .6s;
}
.shop-item-btn--buy:hover::after { transform: translateX(100%); }

.shop-item-btn--locked {
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.4) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    cursor: not-allowed !important;
    font-size: 0 !important;
    box-shadow: none !important;
}
.shop-item-btn--locked::before { content: '🔒 Verrouillé'; font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.4); }
.shop-item-btn--locked img { display: none !important; }

.shop-item-btn--owned {
    background: rgba(35,209,139,.12) !important;
    color: #23d18b !important;
    border: 1px solid rgba(35,209,139,.35) !important;
    box-shadow: none !important;
    font-size: 0 !important;
}
.shop-item-btn--owned::before { content: 'Équiper'; font-size: .9rem; font-weight: 800; color: #23d18b; }
.shop-item-btn--owned img { display: none !important; }
.shop-item-btn--owned:hover {
    background: rgba(35,209,139,.22) !important;
    border-color: rgba(35,209,139,.55) !important;
    transform: translateY(-1px);
}

.shop-item-btn--equipped {
    background: rgba(35,209,139,.18) !important;
    color: #23d18b !important;
    border: 1px solid rgba(35,209,139,.5) !important;
    box-shadow: none !important;
    font-size: 0 !important;
}
.shop-item-btn--equipped::before { content: '✓ Équipé'; font-size: .9rem; font-weight: 800; color: #23d18b; }
.shop-item-btn--equipped img { display: none !important; }
.shop-item-btn--equipped:hover {
    background: rgba(244,63,94,.18) !important;
    border-color: rgba(244,63,94,.5) !important;
}
.shop-item-btn--equipped:hover::before { content: 'Retirer'; color: #fb7185; }

.shop-item-btn--rebuy { display: none !important; }

.shop-widget-default-label {
    width: 100%; text-align: center;
    padding: 11px; border-radius: 10px;
    font-size: .82rem; font-weight: 700;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.15);
}

/* ── SECTION HEADER ── */
.shop-section { margin-bottom: 32px; }
.shop-section-hdr {
    width: 100%;
    display: flex !important; align-items: center; gap: 12px;
    padding: 6px 4px 10px !important;
    background: none !important; border: none !important; border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-weight: 900 !important; font-size: 1rem !important;
    cursor: pointer; transition: opacity .2s;
    margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 1.5px;
    border-bottom: 2px solid rgba(255,255,255,.06) !important;
}
.shop-section-hdr:hover { opacity: .85; }
.shop-section-hdr-label {
    flex: 1; text-align: left;
    color: #fff;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.shop-section-hdr-count {
    font-size: .68rem; font-weight: 800;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #5865f2, #4752c4);
    color: #fff; border: none; letter-spacing: .5px;
    box-shadow: 0 2px 6px rgba(88,101,242,.35);
}
.shop-section-chevron { transition: transform .25s ease; opacity: .5; }
.shop-section--open .shop-section-chevron { transform: rotate(180deg); opacity: .8; }

/* ── "Voir tout" ── */
.shop-section-more {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin: 20px auto 0;
    padding: 11px 28px;
    background: linear-gradient(135deg, rgba(88,101,242,.15), rgba(71,82,196,.1));
    border: 1px solid rgba(88,101,242,.3);
    border-radius: 999px;
    color: #c7ccff;
    font-size: .82rem; font-weight: 800; letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .14s, color .2s, box-shadow .25s;
    text-transform: uppercase;
}
.shop-section-more:hover {
    background: linear-gradient(135deg, rgba(88,101,242,.3), rgba(71,82,196,.2));
    border-color: rgba(88,101,242,.6);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(88,101,242,.3);
}
.shop-section-more:active { transform: translateY(0) scale(.98); }

/* ── ANIMATION ── */
@keyframes srd-tile-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.shop-grid > .shop-card { animation: srd-tile-in .4s cubic-bezier(.2,.8,.25,1) both; }
.shop-grid > .shop-card:nth-child(1)  { animation-delay: .02s; }
.shop-grid > .shop-card:nth-child(2)  { animation-delay: .05s; }
.shop-grid > .shop-card:nth-child(3)  { animation-delay: .08s; }
.shop-grid > .shop-card:nth-child(4)  { animation-delay: .11s; }
.shop-grid > .shop-card:nth-child(5)  { animation-delay: .14s; }
.shop-grid > .shop-card:nth-child(6)  { animation-delay: .17s; }
.shop-grid > .shop-card:nth-child(n+7){ animation-delay: .2s; }

/* ── NAV ── transparent glass with premium pill buttons ── */
.shop-nav {
    gap: 6px !important; padding: 6px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 6px 20px rgba(0,0,0,.25) !important;
}
.shop-nav-btn {
    border-radius: 11px !important;
    padding: 9px 16px !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    letter-spacing: .2px;
    transition: background .22s, color .2s, transform .14s, border-color .2s, box-shadow .25s !important;
    color: rgba(255,255,255,.7) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(255,255,255,.025) !important;
    backdrop-filter: blur(8px);
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.shop-nav-btn:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.15) !important;
    transform: translateY(-1px);
}
.shop-nav-btn.active {
    background:
        linear-gradient(135deg, rgba(0,217,163,.32) 0%, rgba(16,185,129,.28) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(0,217,163,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 4px 14px rgba(0,217,163,.45) !important;
    text-shadow: 0 1px 6px rgba(0,217,163,.55);
}
.shop-nav-btn.active::after {
    content: '';
    position: absolute;
    left: 14%; right: 14%; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #00d9a3, #10b981, #00d9a3);
    box-shadow: 0 0 8px rgba(0,217,163,.7);
}
.shop-nav-ic { display: inline-flex; align-items: center; }
.shop-nav-ic svg { width: 14px; height: 14px; }
.shop-nav-divider { background: rgba(255,255,255,.08) !important; margin: 0 4px !important; width: 1px; }
.shop-nav-ic svg { width: 13px; height: 13px; }
.shop-nav-divider { background: rgba(255,255,255,.08) !important; margin: 0 4px !important; }

/* ── GIFT MODAL — show actual preview (font name BIG centered) ── */
.gift-modal-item-preview {
    width: 220px;
    height: 160px;
    margin: 0 auto 14px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(91,141,238,.35) 0%, transparent 65%),
        linear-gradient(135deg, #1e2436 0%, #0f1219 100%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 12px 28px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Font item special bg + animation in modal */
.gift-modal-item-preview:has(.shop-preview--font) {
    background:
        linear-gradient(120deg, #1a1d2e 0%, #2d1b4e 35%, #1f3a5f 70%, #1a1d2e 100%) !important;
    background-size: 200% 200% !important;
    animation: srd-font-bg 9s ease-in-out infinite;
}
.gift-modal-item-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1.5px 1.5px at 78% 32%, rgba(168,120,255,.7), transparent 50%),
        radial-gradient(2px 2px at 62% 72%, rgba(91,141,238,.6), transparent 50%),
        radial-gradient(1px 1px at 32% 82%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.5px 1.5px at 88% 70%, rgba(0,217,163,.6), transparent 50%);
    opacity: .65;
    pointer-events: none;
    animation: srd-font-twinkle 4s ease-in-out infinite alternate;
}
.gift-modal-item-preview > .shop-preview {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    position: relative;
    z-index: 2;
}
.gift-modal-item-preview .shop-mp-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
/* Hide noise but DO NOT hide the font name */
.gift-modal-item-preview .shop-mp-handle,
.gift-modal-item-preview .shop-mp-status-dot,
.gift-modal-item-preview .shop-preview-aura-bg,
.gift-modal-item-preview .shop-preview-font-tag,
.gift-modal-item-preview .shop-preview-widget-info,
.gift-modal-item-preview .spt-mock-bar,
.gift-modal-item-preview .shop-mp-bg-rays,
.gift-modal-item-preview .spub-name-bars { display: none !important; }
.gift-modal-item-preview .shop-mp-info { width: auto !important; max-width: 100% !important; overflow: hidden !important; }

/* === FONT in modal: HIDE avatar, show ONLY the name BIG in the actual font === */
.gift-modal-item-preview .shop-preview--font .shop-mp-avatar { display: none !important; }
.gift-modal-item-preview .shop-preview--font .shop-mp-card { padding: 18px !important; gap: 0 !important; }
.gift-modal-item-preview .shop-preview--font .shop-mp-info {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: 100% !important;
}
.gift-modal-item-preview .shop-preview--font .shop-mp-name {
    display: none !important;
}
.gift-modal-item-preview .shop-preview--font .shop-mp-name--font {
    display: inline-block !important;
    font-size: 2rem !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow:
        0 3px 14px rgba(0,0,0,.6),
        0 0 24px rgba(168,120,255,.4),
        0 0 40px rgba(91,141,238,.25) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Other categories in modal */
.gift-modal-item-preview .shop-mp-avatar {
    width: 78px !important; height: 78px !important;
    border: 3px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
}
.gift-modal-item-preview .shop-mp-avatar--aura { width: 84px !important; height: 84px !important; }
.gift-modal-item-preview .shop-preview--badge .shop-mp-name,
.gift-modal-item-preview .shop-preview--aura  .shop-mp-name { display: none !important; }
.gift-modal-item-preview .shop-mp-name-row { display: flex !important; justify-content: center !important; margin: 0 !important; }
.gift-modal-item-preview .shop-mp-badge {
    width: 44px !important; height: 44px !important; font-size: 1.5rem !important;
    border: 3px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.gift-modal-item-preview .shop-preview-widget-icon {
    font-size: 3.4rem !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.gift-modal-item-preview .shop-preview-label {
    font-size: 2.2rem !important;
    position: static !important;
    text-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.gift-modal-item-preview .spt-mockup { display: none !important; }
.gift-modal-item-preview .shop-preview--emoji {
    font-size: 3.6rem !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.gift-modal-item-preview .shop-preview--theme .spt-mockup { display: none !important; }

/* Auto-fit hook for font name in modal (in case gigantic) */
.gift-modal-item-preview .shop-preview--font .shop-mp-name--font[data-fit] {
    font-size: var(--fit-size, 2rem) !important;
}

/* ── MOBILE ── */
@media (max-width: 720px) {
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important; gap: 12px !important; }
    .shop-card-eye-btn, .shop-card-gift-btn { opacity: 1; transform: scale(1); width: 26px !important; height: 26px !important; }
    .shop-card-eye-btn  { right: 40px !important; }
    .shop-card-eye-btn svg { width: 12px !important; height: 12px !important; }
    .shop-card-title { font-size: .9rem !important; }
    .shop-card-handle { font-size: .65rem; }
    .shop-card-price-tag { font-size: .92rem !important; }
    .shop-card-footer .shop-item-btn { padding: 9px 12px !important; font-size: .8rem !important; }
    .shop-item-btn--buy::before, .shop-item-btn--owned::before, .shop-item-btn--equipped::before, .shop-item-btn--locked::before { font-size: .8rem; }
    .shop-card-preview-wrap .shop-preview--badge .shop-mp-avatar,
    .shop-card-preview-wrap .shop-preview--aura .shop-mp-avatar--aura { width: 64px !important; height: 64px !important; }
    .shop-card-preview-wrap .shop-preview--badge .shop-mp-badge { width: 36px !important; height: 36px !important; font-size: 1.3rem !important; }
    .shop-card-preview-wrap .shop-preview--font .shop-mp-name--font { font-size: 1.4rem !important; }
    .shop-card-preview-wrap .shop-preview-widget-icon { font-size: 2.6rem !important; }
    .shop-card-preview-wrap .shop-preview--emoji { font-size: 2.6rem !important; }
}

/* ==================================================================
   v13 ADDITIONS: Buy confirm modal styling + gift modal stronger anim
   ================================================================== */

/* Animate gift modal preview background harder (works for ALL categories,
   not just font) so the violet glow + stars are clearly alive */
.gift-modal-item-preview {
    background:
        radial-gradient(circle at 50% 35%, rgba(91,141,238,.4) 0%, transparent 65%),
        linear-gradient(135deg, #1e2436 0%, #1a1538 50%, #0f1219 100%) !important;
    background-size: 100% 100%, 200% 200% !important;
    animation: srd-gift-bg-pan 12s ease-in-out infinite alternate !important;
}
@keyframes srd-gift-bg-pan {
    from { background-position: 0% 0%, 0% 50%; }
    to   { background-position: 0% 0%, 100% 50%; }
}
.gift-modal-item-preview::before {
    background:
        radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1.5px 1.5px at 78% 32%, rgba(168,120,255,.85), transparent 50%),
        radial-gradient(2px 2px at 62% 72%, rgba(91,141,238,.7), transparent 50%),
        radial-gradient(1px 1px at 32% 82%, rgba(255,255,255,.6), transparent 50%),
        radial-gradient(1.5px 1.5px at 88% 70%, rgba(0,217,163,.7), transparent 50%),
        radial-gradient(1px 1px at 12% 60%, rgba(168,120,255,.6), transparent 50%),
        radial-gradient(1.5px 1.5px at 45% 18%, rgba(91,141,238,.6), transparent 50%) !important;
    background-size: 100% 100% !important;
    opacity: .75 !important;
    animation: srd-font-twinkle 2.6s ease-in-out infinite alternate !important;
}

/* ── BUY CONFIRM MODAL (#shop-buy-confirm-overlay) — premium override ── */
#shop-buy-confirm-overlay {
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
#shop-buy-confirm-overlay #sbcBox {
    background:
        radial-gradient(circle at 50% 0%, rgba(91,141,238,.18) 0%, transparent 55%),
        linear-gradient(160deg, #1e2436 0%, #15182b 60%, #0f1219 100%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 24px 60px rgba(0,0,0,.7),
        0 8px 22px rgba(91,141,238,.25) !important;
    max-width: 460px !important;
    overflow: hidden !important;
}
#shop-buy-confirm-overlay #sbcBox > div:first-child {
    background:
        linear-gradient(135deg, rgba(0,217,163,.14), rgba(91,141,238,.14) 50%, rgba(168,120,255,.14)) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
#shop-buy-confirm-overlay .shop-card-preview-wrap {
    width: 110px !important; height: 110px !important;
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.4) !important;
}

/* The two action buttons in the buy modal */
.purchase-modal-confirm,
#shop-buy-confirm-overlay button[id*="Confirm"],
#shop-buy-confirm-overlay button[id*="confirm"] {
    background: linear-gradient(135deg, #00d9a3 0%, #5b8dee 50%, #a878ff 100%) !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 6px 16px rgba(91,141,238,.42) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: transform .14s, box-shadow .25s, filter .2s !important;
}
.purchase-modal-confirm:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) saturate(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 12px 28px rgba(91,141,238,.6),
        0 4px 10px rgba(168,120,255,.35) !important;
}



/* ══════════ Boutique v4 — polish pro ══════════ */
/* Navigation : pilules verre + actif en degrade accent */
.shop-nav-btn{border-radius:12px !important;font-weight:700 !important;letter-spacing:.02em;border:1px solid rgba(255,255,255,.07) !important;background:rgba(255,255,255,.035) !important;transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease !important;}
.shop-nav-btn:hover{background:rgba(255,255,255,.08) !important;transform:translateY(-1px);border-color:rgba(255,255,255,.16) !important;}
.shop-nav-btn.active{background:linear-gradient(135deg,rgba(0,217,163,.22),rgba(0,150,199,.16)) !important;border-color:rgba(0,217,163,.45) !important;color:#5ff0c8 !important;box-shadow:0 4px 14px rgba(0,217,163,.16),inset 0 1px 0 rgba(255,255,255,.08);}

/* Cartes : levee au survol + halo colore par rarete */
.shop-card{border-radius:16px !important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;}
.shop-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) !important;}
.shop-card.rarity-border-rare:hover{box-shadow:0 14px 34px rgba(34,211,238,.22),0 0 16px rgba(34,211,238,.18) !important;}
.shop-card.rarity-border-épique:hover{box-shadow:0 14px 34px rgba(139,92,246,.26),0 0 18px rgba(139,92,246,.22) !important;}
.shop-card.rarity-border-légendaire:hover{box-shadow:0 14px 34px rgba(245,158,11,.26),0 0 18px rgba(245,158,11,.22) !important;}
.shop-card.rarity-border-limité:hover{box-shadow:0 14px 34px rgba(244,63,94,.28),0 0 20px rgba(244,63,94,.24) !important;}
.shop-card-title{font-size:1.02rem !important;font-weight:800 !important;letter-spacing:.01em;}
.shop-card-handle{opacity:.38 !important;font-size:.68rem !important;}
.shop-card-desc{line-height:1.45 !important;}

/* Boutons d'action : degrade accent + micro-interactions */
.shop-item-btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,filter .18s ease !important;}
.shop-item-btn--buy{background:linear-gradient(135deg,#00d9a3,#00a37c) !important;color:#04211a !important;font-weight:800 !important;border:none !important;box-shadow:0 4px 12px rgba(0,217,163,.28) !important;}
.shop-item-btn--buy:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,217,163,.42) !important;filter:brightness(1.07);}
.shop-item-btn--equipped{background:rgba(0,217,163,.14) !important;border:1px solid rgba(0,217,163,.4) !important;color:#5ff0c8 !important;}
.shop-item-btn--owned{border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.05) !important;}
.shop-item-btn--owned:hover{background:rgba(255,255,255,.11) !important;transform:translateY(-1px);}

/* Prix / timer limite : chips lisibles */
.shop-card-price-tag{background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.25);border-radius:9px;padding:2px 8px;font-weight:800;}
.rarity-timer{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.3);border-radius:8px;padding:2px 8px;font-weight:700;color:#fb7185;}
.shop-limited-header{background:linear-gradient(135deg,rgba(244,63,94,.12),rgba(139,92,246,.1)) !important;border:1px solid rgba(244,63,94,.28) !important;border-radius:14px !important;box-shadow:0 6px 20px rgba(244,63,94,.1);}

/* Sections + grille : respiration */
.shop-section-hdr{border-radius:12px !important;transition:background .2s ease !important;}
.shop-section-hdr:hover{background:rgba(255,255,255,.05) !important;}
.shop-grid{gap:16px !important;}

/* Boutons oeil / cadeau : verre flou */
.shop-card-eye-btn,.shop-card-gift-btn{backdrop-filter:blur(6px);background:rgba(10,14,22,.55) !important;border:1px solid rgba(255,255,255,.14) !important;transition:background .2s ease,transform .2s ease !important;}
.shop-card-eye-btn:hover,.shop-card-gift-btn:hover{background:rgba(0,217,163,.25) !important;transform:scale(1.08);}