/*! Sunorium — boutique (utilise les variables --sn-* du thème) */

.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sn-chip {
    --c: 4px;
    font-family: var(--sn-font-pixel);
    font-size: 16px;
    padding: .55rem 1.1rem;
    border: 0;
    color: var(--sn-ink-2);
    background: var(--sn-surface);
    box-shadow: inset 0 0 0 1px var(--sn-line);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) var(--c), 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c)), 0 var(--c), var(--c) var(--c));
    transition: background var(--sn-fast), color var(--sn-fast);
}
.sn-chip:hover { color: var(--sn-ink); }
.sn-chip.is-active { background: var(--sn-sun); color: var(--sn-on-sun); box-shadow: none; }

.sn-shopgrid .sn-rank { cursor: pointer; }
.sn-shopnote { display: flex; align-items: center; gap: .5rem; margin: 28px 0 0; color: var(--sn-ink-3); font-size: .95rem; }
.sn-shopnote i { color: var(--sn-sun); }

/* --- Fenêtre d'achat --- */
html.sn-modal-open { overflow: hidden; }
.sn-modal {
    --c: var(--sn-cut-lg);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    color: var(--sn-ink);
    background: var(--sn-surface);
    overflow: auto;
    overscroll-behavior: contain;
}
.sn-modal::backdrop { background: rgba(17, 13, 10, .62); backdrop-filter: blur(3px); }
.sn-modal[open] { animation: sn-modal-in .32s var(--sn-ease-out); }
@keyframes sn-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sn-modal[open] { animation: none; } }

.sn-modal__inner { position: relative; display: grid; gap: 14px; padding: 0 28px 28px; }
.sn-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.sn-modal__plate {
    display: grid; place-items: center; height: 140px; margin: 0 -28px 6px;
    background-color: var(--sn-surface-2);
    background-image:
        radial-gradient(circle at 50% 120%, var(--sn-glow), transparent 70%),
        linear-gradient(var(--sn-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--sn-grid) 1px, transparent 1px);
    background-size: auto, 16px 16px, 16px 16px;
}
.sn-modal__plate img { height: 44px; width: auto; image-rendering: pixelated; }
.sn-modal h2 { margin: 0; font-size: 36px; }
.sn-modal__price { margin: 0; font-size: 24px; }
.sn-modal p { margin: 0; }

.sn-modal__form { display: grid; gap: 14px; margin-top: 8px; }
.sn-modal__user { display: flex; align-items: center; gap: 10px; }
.sn-modal__user .form-control { flex: 1; }
.sn-modal__avatar { width: 40px; height: 40px; image-rendering: pixelated; flex-shrink: 0; }
.sn-modal__consent { display: flex; gap: .65rem; align-items: flex-start; padding-left: 0; font-size: .9rem; color: var(--sn-ink-2); }
.sn-modal__consent .form-check-input { float: none; margin: .15rem 0 0; flex-shrink: 0; }
.sn-modal__consent a { text-decoration: underline; color: var(--sn-ember); }
[data-bs-theme=dark] .sn-modal__consent a { color: var(--sn-gold); }
.sn-modal__error { color: var(--sn-bad); font-size: .95rem; }
.sn-modal__error.is-info { color: var(--sn-ink-2); }
.sn-modal .btn[disabled] { opacity: .6; pointer-events: none; }