/* ================================================================
   BOUTIQUE — /shop, /shop/{id}, /shop/type/{type}, /shop/highclub,
   confirmations, crédits insuffisants, /boutique.
   S'appuie sur znv-ui.css (tokens, boutons, cartes, alertes).
   Rappels style.css : h1..h5 et p imposent leur couleur en !important.
   ================================================================ */

.shop-page {
    --shop-surface: #15161b;
    --shop-surface-2: #1c1d24;
    --shop-line: rgba(255, 255, 255, .09);
    --shop-credit: #00DDFF;
    --rarity: var(--znv-accent);
    display: block;
    overflow-x: clip;
}

/* ---------- Rareté (couleur d'appoint : le nom est toujours écrit) ---------- */
.shop-page .card-common    { --rarity: #3ddc84; }
.shop-page .card-rare      { --rarity: #7c86ff; }
.shop-page .card-epic      { --rarity: #bd7bff; }
.shop-page .card-legendary { --rarity: #f5c518; }
.shop-page .card-mythic    { --rarity: #ff6b6b; }

/* ================================================================
   EN-TÊTE /shop
   ================================================================ */
.shop-hero-v2 {
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.shop-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 2rem 3rem;
    align-items: end;
}

.shop-hero-copy .znv-page-lead {
    margin-bottom: 1.6rem;
}

.shop-vip {
    background: linear-gradient(90deg, var(--znv-accent-2), var(--znv-accent-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--znv-accent-3);
}

/* Carte solde */
.shop-wallet {
    display: grid;
    gap: 1rem;
    padding: 1.4rem;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.shop-wallet-user {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.shop-wallet-user img {
    flex: none;
    border-radius: 10px;
    image-rendering: pixelated;
}

.shop-wallet-label {
    display: block;
    color: var(--znv-text-dim);
    font-size: .8rem;
    font-weight: 500;
}

.shop-page .shop-wallet-name {
    margin: 0;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.shop-wallet-balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--znv-r-md);
    border: 1px solid var(--shop-line);
    background: rgba(0, 0, 0, .3);
}

.shop-wallet-amount {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    color: var(--shop-credit);
    font-size: 1.1rem;
}

.shop-wallet-amount strong {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.shop-page .shop-wallet-meta,
.shop-page .shop-wallet-text {
    margin: 0;
    color: var(--znv-text-dim) !important;
    font-size: .9rem;
}

.shop-wallet-guest {
    display: grid;
    gap: .7rem;
    justify-items: start;
}

.shop-wallet-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--znv-r-md);
    background: rgba(56, 193, 233, .14);
    color: var(--znv-accent);
    font-size: 1.3rem;
}

.shop-wallet-guest .znv-btn {
    margin-top: .3rem;
}

/* Flashes */
.shop-flashes {
    display: grid;
    gap: .6rem;
    margin-top: 1.5rem;
}

/* ================================================================
   SECTIONS
   ================================================================ */
.shop-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.6rem;
}

.shop-page .shop-section-title {
    margin: 0;
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.05;
}

/* Compte à rebours (surcharge du style.css) */
.shop-page .shop-timer {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border-radius: var(--znv-r-md);
    border: 1px solid var(--shop-line);
    background: rgba(255, 255, 255, .04);
    color: var(--znv-text);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.shop-page .shop-timer .bi {
    color: var(--znv-accent);
}

/* ---------- Offres permanentes ---------- */
.shop-offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-offer {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 210px;
    height: 100%;
    padding: 1.4rem;
    overflow: hidden;
    border-radius: var(--znv-r-lg);
    border: 1px solid var(--shop-line);
    background: var(--shop-surface);
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.shop-offer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(10, 12, 16, .92) 0%, rgba(10, 12, 16, .55) 45%, rgba(10, 12, 16, .1) 100%);
}

.shop-offer-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.shop-offer--highclub {
    --accent: #c08bff;
    background:
        radial-gradient(circle at 78% 30%, rgba(176, 111, 208, .45) 0%, transparent 60%),
        linear-gradient(135deg, #1a1422 0%, #33234a 50%, #5e3880 100%);
}

.shop-offer-icon {
    position: absolute;
    top: -6px;
    right: 4px;
    z-index: -2;
    width: 150px;
    height: auto;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.shop-offer-body {
    display: grid;
    gap: .3rem;
    padding-right: 2.6rem;
}

.shop-offer-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent, var(--znv-accent-3));
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.shop-offer-title {
    font-family: 'Paytone One', sans-serif;
    font-size: 1.35rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.shop-offer-price {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--shop-credit);
    font-size: 1.05rem;
    font-weight: 700;
}

.shop-offer-price--muted {
    color: var(--znv-text);
    font-size: .9rem;
    font-weight: 500;
}

.shop-offer-arrow {
    position: absolute;
    right: 1.2rem;
    bottom: 1.3rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .35);
    transition: background-color .25s, border-color .25s, transform .25s;
}

.shop-offer:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent, var(--znv-accent)) 60%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}

.shop-offer:hover .shop-offer-bg,
.shop-offer:hover .shop-offer-icon {
    transform: scale(1.06);
}

.shop-offer:hover .shop-offer-arrow {
    border-color: var(--accent, var(--znv-accent));
    background: var(--accent, var(--znv-accent));
    color: #0a0b0e;
    transform: translateX(2px);
}

.shop-offer:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ================================================================
   PASTILLES DE CATÉGORIES (/shop/type/...)
   ================================================================ */
.shop-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .3rem;
    border-radius: 14px;
    border: 1px solid var(--shop-line);
    background: rgba(255, 255, 255, .03);
}

.shop-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem 1rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--znv-text-dim) !important;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.shop-pill:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}

.shop-pill[aria-pressed="true"],
.shop-pill[aria-current="page"] {
    background: rgba(56, 193, 233, .16);
    color: #fff !important;
    box-shadow: inset 0 -2px 0 var(--znv-accent);
}

.shop-pill:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 2px;
}

.shop-hero-compact .shop-pills {
    display: inline-flex;
    margin-top: .5rem;
}

/* ================================================================
   GRILLE DE COSMÉTIQUES
   ================================================================ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-grid-cell[hidden] {
    display: none !important;
}

.shop-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--znv-r-lg);
    border: 1px solid var(--shop-line);
    background: var(--shop-surface);
    color: var(--znv-text) !important;
    text-decoration: none !important;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.shop-item-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 1.2rem;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--rarity) 38%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--rarity) 14%, #1a1b21), #121318);
    border-bottom: 1px solid color-mix(in srgb, var(--rarity) 35%, transparent);
}

.shop-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.shop-item-img.shop-thumb {
    image-rendering: pixelated;
}

.shop-item-game {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.shop-page .shop-card-badges {
    position: absolute;
    top: .8rem;
    left: .8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    z-index: 2;
    pointer-events: none;
}

.shop-page .shop-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(10, 12, 16, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.shop-page .shop-badge-new {
    border-color: transparent;
    background: linear-gradient(90deg, var(--znv-accent-2), var(--znv-accent-3));
    color: #052b3a;
}

.shop-page .shop-badge-owned {
    border-color: rgba(61, 220, 132, .6);
    background: rgba(12, 60, 34, .85);
    color: #bff5d6;
}

.shop-page .shop-badge-rarity {
    border-color: color-mix(in srgb, var(--rarity) 60%, transparent);
    background: color-mix(in srgb, var(--rarity) 18%, #0d0e12);
    color: #fff;
}

.shop-page .shop-badge-off {
    border-color: rgba(240, 160, 75, .55);
    background: rgba(70, 40, 10, .7);
    color: #ffd9b0;
}

.shop-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.1rem 1.1rem;
}

.shop-page .shop-item-name {
    margin: 0;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.shop-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    color: var(--znv-text-dim);
    font-size: .82rem;
}

.shop-item-meta > span + span::before {
    content: "·";
    margin-right: .6rem;
    color: rgba(255, 255, 255, .3);
}

.shop-rarity {
    color: var(--rarity);
    font-weight: 700;
}

.shop-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-top: .6rem;
}

.shop-item-price {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.shop-item-price .bi {
    color: var(--shop-credit);
    font-size: .95em;
}

.shop-item-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--znv-text-dim);
    font-size: .85rem;
    font-weight: 600;
    transition: color .2s;
}

.shop-item-cta .bi {
    transition: transform .2s;
}

.shop-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--rarity) 60%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4), 0 0 0 1px color-mix(in srgb, var(--rarity) 25%, transparent);
}

.shop-item:hover .shop-item-img {
    transform: scale(1.06);
}

.shop-item:hover .shop-item-cta {
    color: #fff;
}

.shop-item:hover .shop-item-cta .bi {
    transform: translateX(3px);
}

.shop-item:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Rareté haute : liseré lumineux statique (pas d'animation) */
.shop-item.card-legendary,
.shop-item.card-mythic {
    border-color: color-mix(in srgb, var(--rarity) 45%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--rarity) 18%, transparent);
}

/* Déjà possédé : le badge "Possédé" porte l'info ; léger retrait visuel */
.shop-item.shop-card-owned .shop-item-price {
    color: var(--znv-text-dim);
}

/* État vide */
.shop-empty {
    display: grid;
    justify-items: center;
    gap: .6rem;
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    border-radius: var(--znv-r-lg);
    border: 1px dashed var(--znv-line-strong);
    text-align: center;
    list-style: none;
}

.shop-empty > .bi {
    color: var(--znv-accent);
    font-size: 2rem;
}

.shop-page .shop-empty p {
    margin: 0;
    color: var(--znv-text-dim) !important;
}

.shop-empty[hidden] {
    display: none;
}

/* ================================================================
   FICHE COSMÉTIQUE
   ================================================================ */
.shop-product-page {
    padding: 2rem 0 5rem;
}

.shop-breadcrumb {
    margin-bottom: 1.4rem;
}

.shop-breadcrumb .znv-link {
    min-height: 44px;
    color: var(--znv-text-dim) !important;
}

.shop-breadcrumb .znv-link:hover {
    color: #fff !important;
}

.shop-product {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem 2.5rem;
    align-items: start;
}

.shop-product-visual {
    position: sticky;
    top: 90px;
}

.shop-page .shop-show-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(340px, 62vh, 600px);
    overflow: hidden;
    border-radius: var(--znv-r-lg);
    border: 1px solid color-mix(in srgb, var(--rarity) 35%, transparent);
    background:
        radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--rarity) 26%, transparent), transparent 75%),
        linear-gradient(180deg, #1d1e25, #121318);
}

.shop-page .img-show-article {
    max-width: 100%;
    max-height: 100%;
    padding: 25px;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
}

.shop-page .shop-kill-preview {
    margin: 0;
    padding: 0 1.5rem;
    color: #fff !important;
    font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.shop-page .shop-visual-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .7rem 0 0;
    color: var(--znv-text-dim) !important;
    font-size: .85rem;
}

.shop-product-info {
    display: grid;
    gap: 1.2rem;
    min-width: 0;
}

.shop-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.shop-page .shop-product-title {
    margin: 0;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.shop-product-price {
    display: flex;
    align-items: baseline;
    gap: .8rem;
}

.shop-product-price-label {
    color: var(--znv-text-dim);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.shop-product-price .shop-price {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    color: var(--shop-credit);
    font-size: 1.3rem;
}

.shop-product-price .shop-price strong {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.shop-price-unit {
    color: var(--znv-text-dim);
    font-size: .95rem;
    font-weight: 500;
}

.shop-buy-card {
    padding: 1.3rem;
}

/* Onglets Acheter / Offrir : contrôle segmenté (Bootstrap gère l'affichage) */
.shop-page .shop-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem;
    margin-bottom: 1.1rem;
    padding: .3rem;
    border: 1px solid var(--shop-line);
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
}

.shop-page .shop-tabs .nav-item {
    margin: 0;
}

.shop-page .shop-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--znv-text-dim);
    font-weight: 600;
    transition: background-color .2s, color .2s;
}

.shop-page .shop-tabs .nav-link:hover {
    color: #fff;
}

.shop-page .shop-tabs .nav-link.active {
    background: rgba(56, 193, 233, .16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--znv-accent);
}

.shop-page .shop-tabs .nav-link:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 2px;
}

.shop-page .shop-pane-text {
    margin: 0 0 1rem;
    color: var(--znv-text) !important;
    font-size: .95rem;
}

.shop-alert-gap {
    margin-bottom: 1rem;
}

/* Récapitulatif (solde, prix…) */
.shop-recap {
    display: grid;
    gap: .1rem;
    margin: 0 0 1rem;
}

.shop-recap > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .3rem 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--shop-line);
}

.shop-recap > div:last-child {
    border-bottom: 0;
}

.shop-recap dt {
    color: var(--znv-text-dim);
    font-weight: 500;
}

.shop-recap dd {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.shop-recap dd .bi-database-fill {
    color: var(--shop-credit);
}

.shop-recap--boxed {
    margin-bottom: 1.4rem;
    padding: .4rem 1.1rem;
    border-radius: var(--znv-r-md);
    border: 1px solid var(--shop-line);
    background: rgba(0, 0, 0, .25);
}

.shop-recap .shop-recap-sep {
    margin-top: .4rem;
    border-top: 1px solid var(--znv-line-strong);
}

.shop-recap-hint {
    display: block;
    color: var(--znv-text-dim);
    font-size: .8rem;
    font-weight: 500;
}

/* Cadeau : champ pseudo + état */
.shop-page .shop-gift-icon {
    right: 14px;
    width: 18px;
    height: 18px;
}

.shop-page #giftPseudo {
    padding-right: 2.6rem;
}

.shop-page #giftFeedback:empty {
    display: none;
}

.shop-page #giftFeedback {
    margin-top: 0 !important;
    font-size: .88rem;
    font-weight: 600;
}

/* Couleurs lisibles sur fond sombre (classes posées par le script inline) */
.shop-page #giftFeedback.text-success { color: var(--znv-success) !important; }
.shop-page #giftFeedback.text-danger  { color: var(--znv-danger) !important; }
.shop-page #giftFeedback.text-muted   { color: var(--znv-text-dim) !important; }

.shop-page .shop-gift-icon.is-ok::before { color: var(--znv-success); }

.shop-gift-submit {
    --accent: #ff7ac6;
}

/* Détails secondaires */
.shop-product-details {
    padding-top: 1.2rem;
    border-top: 1px solid var(--shop-line);
}

.shop-page .shop-subtitle {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}

.shop-page .shop-subtitle .bi {
    color: var(--znv-accent);
}

.shop-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
}

.shop-specs > div {
    padding: .7rem .9rem;
    border-radius: var(--znv-r-md);
    border: 1px solid var(--shop-line);
    background: rgba(255, 255, 255, .025);
}

.shop-specs dt {
    color: var(--znv-text-dim);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-specs dd {
    margin: .2rem 0 0;
    color: #fff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shop-page .shop-specs .shop-price {
    color: #fff;
    font-size: 1rem;
}

.shop-specs .shop-price .bi {
    color: var(--shop-credit);
}

.shop-page .shop-description {
    margin: 0;
    color: var(--znv-text) !important;
    line-height: 1.65;
}

/* ---------- Viewer 3D : spinner (ex-<style> inline de show) ---------- */
.viewer-spinner {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 26px;
    align-items: center; justify-content: center;
    transition: opacity .35s ease;
}
.viewer-spinner.is-hidden { opacity: 0; pointer-events: none; }
.viewer-spinner-label { color: #9aa0aa; font-size: .85rem; }

.loader {
    --color-1: #fff;
    --size: 1px;
    width: calc(48 * var(--size));
    height: calc(48 * var(--size));
    position: relative;
}
.loader::before,
.loader::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 48em; height: 48em;
    background-image:
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0),
        radial-gradient(circle calc(10 * var(--size)), var(--color-1) 100%, transparent 0);
    background-position:
        0em -18em, 0em 18em, 18em 0em, -18em 0em,
        13em -13em, -13em -13em, 13em 13em, -13em 13em;
    background-repeat: no-repeat;
    font-size: calc(0.5 * var(--size));
    border-radius: 50%;
    animation: blast 1s ease-in infinite;
}
.loader::after {
    font-size: calc(1 * var(--size));
    background: var(--color-1);
    animation: bounce 1s ease-in infinite;
}
@keyframes bounce {
    0%, 100% { font-size: calc(0.75 * var(--size)); }
    50%      { font-size: calc(1.5 * var(--size)); }
}
@keyframes blast {
    0%, 40% { font-size: calc(0.5 * var(--size)); }
    70%     { opacity: 1; font-size: calc(4 * var(--size)); }
    100%    { font-size: calc(6 * var(--size)); opacity: 0; }
}

/* ================================================================
   PAGES CENTRÉES : HighClub, confirmation, crédits insuffisants
   ================================================================ */
.shop-focus {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 70px);
    padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0;
    background:
        radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent, var(--znv-accent)) 14%, transparent), transparent 70%);
}

.shop-focus--highclub {
    --accent: #c08bff;
}

.shop-focus > .znv-container {
    width: 100%;
}

.shop-focus-card {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
    border-color: color-mix(in srgb, var(--accent, var(--znv-accent)) 25%, var(--znv-line));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.shop-focus-head {
    display: grid;
    justify-items: center;
    gap: .2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.shop-focus-head .znv-eyebrow {
    margin-bottom: .2rem;
}

.shop-focus-art {
    width: 140px;
    max-width: 40vw;
    height: auto;
    margin-bottom: .4rem;
}

.shop-page .shop-focus-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
    line-height: 1.1;
    text-wrap: balance;
}

.shop-page .shop-focus-lead {
    max-width: 30rem;
    margin: 0;
    color: var(--znv-text-dim) !important;
    font-size: 1rem;
    line-height: 1.6;
}

.shop-page .shop-focus-lead--center {
    margin: 0 auto 1.5rem;
    color: var(--znv-text) !important;
    text-align: center;
}

.shop-focus-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: .8rem;
    border-radius: 22px;
    font-size: 2.1rem;
}

.shop-focus-icon--warning {
    border: 1px solid rgba(240, 160, 75, .45);
    background: rgba(240, 160, 75, .12);
    color: var(--znv-warning);
}

.shop-focus-icon--success {
    border: 1px solid rgba(61, 220, 132, .45);
    background: rgba(61, 220, 132, .12);
    color: var(--znv-success);
}

.shop-page .shop-insufficient-icon {
    color: inherit;
    font-size: inherit;
}

.shop-page .shop-missing {
    color: #fff;
    font-size: 1.1em;
}

.shop-buyer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: fit-content;
    margin: 0 auto 1.2rem;
    padding: .4rem .9rem .4rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--shop-line);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-weight: 600;
}

.shop-buyer img {
    border-radius: 8px;
    image-rendering: pixelated;
}

.shop-focus-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin: 0 0 1rem;
}

.shop-focus-actions .znv-btn {
    flex: 1 1 200px;
}

.shop-focus-secondary {
    display: flex;
    justify-content: center;
    margin-top: .4rem;
}

.shop-focus-secondary .znv-link {
    min-height: 44px;
}

.shop-page .shop-focus-note {
    margin: .8rem 0 0;
    color: var(--znv-text-dim) !important;
    font-size: .85rem;
    text-align: center;
}

/* Succès : apparition discrète (désactivée si réduction des animations) */
.shop-success-art {
    position: relative;
}

.shop-success-check {
    position: absolute;
    right: 4px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #15161b;
    background: var(--znv-success);
    color: #06140c;
    font-size: 1.3rem;
}

@media (prefers-reduced-motion: no-preference) {
    .shop-success .shop-success-pop,
    .shop-success .shop-success-check {
        animation: shop-pop .6s cubic-bezier(.2, .9, .3, 1.3) .15s both;
    }

    .shop-success .shop-success-pop::after,
    .shop-success .shop-success-check::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        border: 2px solid var(--znv-success);
        opacity: 0;
        animation: shop-ring 1.2s ease-out .5s 1;
    }

    .shop-success .shop-success-pop {
        position: relative;
    }

    .shop-success .shop-focus-title,
    .shop-success .shop-focus-lead {
        animation: shop-rise .6s cubic-bezier(.2, .7, .2, 1) .25s both;
    }
}

@keyframes shop-pop {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shop-ring {
    0%   { opacity: .8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

@keyframes shop-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ================================================================
   /boutique : choix Cosmétiques / Grades
   ================================================================ */
.shop-hero-compact {
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.shop-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.shop-choice {
    display: grid;
    justify-items: center;
    gap: .8rem;
    height: 100%;
    padding: 2rem 1.5rem;
    border-radius: var(--znv-r-lg);
    border: 1px solid var(--shop-line);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(56, 193, 233, .12), transparent 70%),
        var(--shop-surface);
    color: var(--znv-text) !important;
    text-align: center;
    text-decoration: none !important;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.shop-choice-img {
    width: min(220px, 70%);
    height: auto;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.shop-page .shop-choice-title {
    margin: 0;
    font-size: 1.6rem;
}

.shop-choice:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 193, 233, .55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}

.shop-choice:hover .shop-choice-img {
    transform: scale(1.05);
}

.shop-choice:hover .znv-link {
    color: #fff !important;
}

.shop-choice:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991.98px) {
    .shop-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .shop-wallet {
        max-width: 460px;
    }

    .shop-offer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-offer {
        min-height: 170px;
    }

    .shop-product {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-product-visual {
        position: static;
    }
}

@media (min-width: 640px) and (max-width: 991.98px) {
    .shop-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-offer-grid > li:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .shop-pills {
        width: 100%;
    }

    .shop-pill {
        flex: 1 1 auto;
        justify-content: center;
        padding: .45rem .7rem;
    }

    .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    .shop-item-media {
        padding: .8rem;
    }

    .shop-item-body {
        padding: .8rem .8rem .9rem;
    }

    .shop-page .shop-item-name {
        font-size: .95rem;
    }

    .shop-item-cta {
        display: none;
    }

    .shop-specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-focus-actions .znv-btn {
        flex-basis: 100%;
    }

    .shop-page .shop-show-preview {
        height: 320px;
    }
}

@media (max-width: 379.98px) {
    .shop-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-offer,
    .shop-item,
    .shop-choice,
    .shop-offer-bg,
    .shop-offer-icon,
    .shop-item-img,
    .shop-choice-img {
        transition: none;
    }

    .shop-offer:hover,
    .shop-item:hover,
    .shop-choice:hover,
    .shop-offer:hover .shop-offer-bg,
    .shop-offer:hover .shop-offer-icon,
    .shop-item:hover .shop-item-img,
    .shop-choice:hover .shop-choice-img {
        transform: none;
    }
}