/* Fortnite Item Shop card-text resilience.
   The legacy page sheet is already above the hand-maintained file-size ceiling,
   so this focused companion owns compact-card readability and small resilience
   states. Load it after fortniteshop.css. */

/* Never shrink sourced names below readable text or truncate them. The band
   grows naturally; the separate square artwork frame retains its dimensions. */
.sh-name-head .sh-name {
    text-wrap: balance;
    line-height: 1.24;
}
.sh-name-head .sh-name-sm,
.sh-name-head .sh-name-xs {
    font-size: .82rem;
    letter-spacing: normal;
}

/* Type and rarity are real item data. Never hide either behind an ellipsis.
   Narrow cards can use a second line instead of losing the end of the label. */
.sh-kind strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
}

.sh-rarity-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 18px;
    overflow: visible;
    text-overflow: clip;
    text-transform: none;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.08;
}

/* A crossed-out regular price reads as the old price immediately instead of a
   second unexplained number competing with the current V-Bucks price. */
.sh-was {
    color: #8490a2;
    font-size: .61rem;
    font-weight: 650;
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: #a9b3c0;
    text-decoration-skip-ink: none;
}

/* Return-history copy is allowed to wrap naturally on the narrowest cards. */
.sh-seen-main,
.sh-when {
    overflow-wrap: anywhere;
}

/* Item cards are links, so keyboard focus should be at least as obvious as
   hover. Use each card's sourced rarity color instead of a generic outline. */
.sh-card:focus-visible {
    outline: 2px solid var(--rarity-solid);
    outline-offset: 3px;
    border-color: rgba(var(--rarity-rgb), .62);
    transform: translateY(-2px);
}

/* A source image can disappear after the shop payload was cached. The API also
   supplies a branded wide image to Discord when item art is missing; that image
   is useful for Discord but must never masquerade as the cosmetic on this grid. */
.sh-pic:has(> img[src*="/assets/images/og-card-fortniteshop-"]) > img {
    display: none;
}
.sh-card:not(.is-skel) .sh-pic:empty::after,
.sh-card:not(.is-skel) .sh-pic:has(> img[src*="/assets/images/og-card-fortniteshop-"])::after {
    content: "Artwork unavailable";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14px;
    color: #7f8999;
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--rarity-rgb), .10), transparent 42%),
        #0d1118;
}

/* Jam Tracks are injected by their own renderer. Keep their real title/artist
   readable too; the injected one-class rules intentionally lose to this more
   specific page-level override without !important. */
.shop-jams .shop-jam-name,
.shop-jams .shop-jam-artist {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}
.shop-jams .shop-jam-name {
    text-wrap: balance;
}
.shop-jam-card:focus-visible,
.shop-jams-show-all:focus-visible,
.shop-more:focus-visible {
    outline: 2px solid #82ffff;
    outline-offset: 3px;
}
.shop-jams .shop-jam-art:has(> img[src*="/assets/images/og-card-fortniteshop-"]) > img {
    display: none;
}
.shop-jams .shop-jam-art:empty,
.shop-jams .shop-jam-art:has(> img[src*="/assets/images/og-card-fortniteshop-"]) {
    position: relative;
}
.shop-jams .shop-jam-art:empty::after,
.shop-jams .shop-jam-art:has(> img[src*="/assets/images/og-card-fortniteshop-"])::after {
    content: "Artwork unavailable";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 8px;
    color: #7f8999;
    font-size: .50rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-align: center;
    text-transform: uppercase;
    background: #0d1118;
}

@media (max-width: 799px) {
    .sh-name-head .sh-name-sm,
    .sh-name-head .sh-name-xs {
        font-size: .79rem;
    }
    .sh-rarity-badge {
        font-size: .47rem;
        padding-inline: 4px;
    }
    .sh-kind {
        font-size: .60rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-card {
        transition: none;
    }
    .sh-card:hover,
    .sh-card:focus-visible {
        transform: none;
    }
}