/* ═══════════════════════════════════════════════════════════
   RANDOMSHOPPER — main.css v3.3
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --bg:      #0d0f12;
  --fg:      #f4f1ea;
  --muted:   rgba(244,241,234,.62);
  --gap:     10px;
  --radius:  18px;
  --max-w:   1760px;
  --shadow:  0 18px 48px rgba(0,0,0,.32);
  --stroke:  rgba(255,255,255,.09);
  --row-h:   104px;

  --c1:#f15bb5; --c2:#00bbf9; --c3:#00f5d4; --c4:#fee440;
  --c5:#9b5de5; --c6:#f3722c; --c7:#43aa8b; --c8:#f94144;
  --c9:#4361ee; --c10:#e9c46a; --c11:#06d6a0; --c12:#ef476f;
  --dark-text: #08111a;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--fg);
  font-family:"DM Sans",Inter,system-ui,sans-serif; }
body { overflow-x:hidden; }
a    { color:inherit;text-decoration:none; }
img  { display:block;max-width:100%;height:auto; }
.rs-site { min-height:100vh; }

/* ── Hero ────────────────────────────────────────────────── */
.rs-hero {
  padding:48px 20px 20px;
  background:
    radial-gradient(circle at 8% 14%,rgba(241,91,181,.22),transparent 22%),
    radial-gradient(circle at 88% 18%,rgba(0,187,249,.18),transparent 20%),
    radial-gradient(circle at 50% 60%,rgba(155,93,229,.10),transparent 30%),
    linear-gradient(180deg,#12161f,var(--bg));
}
.rs-hero__inner { width:min(100%,var(--max-w));margin:0 auto; }
.rs-kicker { margin:0 0 10px;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--muted); }
.rs-title  { margin:0;font-size:clamp(3rem,8vw,7.5rem);line-height:.85;font-weight:800; }

/* ── Grille ──────────────────────────────────────────────── */
.rs-grid-wrap { padding:var(--gap) var(--gap) 80px; }

.rs-grid {
  width:min(100%,var(--max-w));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(16,1fr);
  grid-auto-rows:var(--row-h);
  gap:var(--gap);
}

/* ── Card base ───────────────────────────────────────────── */
.rs-card {
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--stroke);
  isolation:isolate;
  opacity:0;transform:translateY(10px);
  animation:rsUp .5s ease forwards;
  will-change:transform,opacity;
  transition:transform .22s ease,box-shadow .22s ease;
}
.rs-card:hover {
  transform:translateY(-4px) scale(1.012);
  box-shadow:0 28px 64px rgba(0,0,0,.45);
  z-index:3;
}

/* Lien pleine card */
.rs-card__link {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:12px;z-index:3;
  overflow:hidden; /* garde-fou : le contenu ne doit jamais déborder de sa carte */
}

/* Image */
.rs-card__media {
  position:absolute;inset:0;z-index:0;
}
.rs-card__media img {
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 25%; /* favorise le haut des photos produit */
  transition: transform .5s ease, filter .4s ease;
  filter: saturate(1.1) brightness(.97);
}
.rs-card:hover .rs-card__media img {
  transform: scale(1.06);
  filter: saturate(1.2) brightness(1.02);
}

/* Gradient sur image */
.rs-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.00)  0%,
    rgba(0,0,0,.04) 35%,
    rgba(0,0,0,.45) 68%,
    rgba(0,0,0,.78) 100%
  );
}

/* Surcouche lumineuse */
.rs-card__shine {
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(145deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 30%,transparent 60%);
  pointer-events:none;
}

/* ── Card SANS image : titre centré grand ────────────────── */
.rs-card.no-image .rs-card__link {
  justify-content:flex-end;  /* header + body au bas */
}
.rs-card.no-image .rs-card__title {
  font-size:clamp(1.2rem,2.2vw,2.4rem);
  line-height:1;
}

/* ── Badges ──────────────────────────────────────────────── */
.rs-card__header { display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start; }

.rs-badge {
  display:inline-flex;align-items:center;
  height:22px;padding:0 9px;
  border-radius:99px;font-size:.7rem;font-weight:600;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.rs-badge--price       { background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:.78rem; }
.rs-badge--available   { background:rgba(22,163,74,.82);color:#fff; }
.rs-badge--outofstock  { background:rgba(220,38,38,.82);color:#fff; }
.rs-badge--preorder    { background:rgba(217,119,6,.85);color:#fff; }
.rs-badge--discontinued{ background:rgba(107,114,128,.7);color:#fff; }

/* ── Corps card ──────────────────────────────────────────── */
.rs-card__body  { display:flex;flex-direction:column;gap:3px;min-height:0; }
.rs-card__header{ min-height:0; }
.rs-card__store { font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;opacity:.75; }
.rs-card__title {
  margin:0;font-size:clamp(.92rem,1.5vw,1.7rem);line-height:1.02;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.rs-card__excerpt {
  margin:4px 0 0;font-size:.82rem;line-height:1.4;
  color:rgba(255,255,255,.78);max-width:30ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Palette couleurs ────────────────────────────────────── */
/* Le texte sombre n'a de sens que sur fond pastel plein (cartes
   sans image) : sur une photo, le texte reste toujours blanc. */
.rs-card:nth-child(12n+1) {background:var(--c1)}
.rs-card:nth-child(12n+2) {background:var(--c2)}
.rs-card:nth-child(12n+3) {background:var(--c3)}
.rs-card:nth-child(12n+4) {background:var(--c4)}
.rs-card:nth-child(12n+5) {background:var(--c5)}
.rs-card:nth-child(12n+6) {background:var(--c6)}
.rs-card:nth-child(12n+7) {background:var(--c7)}
.rs-card:nth-child(12n+8) {background:var(--c8)}
.rs-card:nth-child(12n+9) {background:var(--c9)}
.rs-card:nth-child(12n+10){background:var(--c10)}
.rs-card:nth-child(12n+11){background:var(--c11)}
.rs-card:nth-child(12n+12){background:var(--c12)}

.rs-card.no-image:nth-child(12n+3),
.rs-card.no-image:nth-child(12n+4),
.rs-card.no-image:nth-child(12n+10),
.rs-card.no-image:nth-child(12n+11) { color:var(--dark-text); }

.rs-card.no-image:nth-child(12n+3) .rs-card__excerpt,
.rs-card.no-image:nth-child(12n+4) .rs-card__excerpt,
.rs-card.no-image:nth-child(12n+10) .rs-card__excerpt,
.rs-card.no-image:nth-child(12n+11) .rs-card__excerpt { color:rgba(8,17,26,.72); }

.rs-card.no-image:nth-child(12n+3) .rs-badge--price,
.rs-card.no-image:nth-child(12n+4) .rs-badge--price,
.rs-card.no-image:nth-child(12n+10) .rs-badge--price,
.rs-card.no-image:nth-child(12n+11) .rs-badge--price {
  background:rgba(255,255,255,.45);color:var(--dark-text);border-color:rgba(0,0,0,.12);
}

.rs-card--oos { filter:grayscale(.3); }

/* ── Tailles (grille 16 colonnes) ────────────────────────── */
/* Largeur minimale = 3 colonnes : en dessous, le contenu (titre, badges)
   n'a plus assez de place pour rester lisible. */
.rs-card--3x2 {grid-column:span 3;grid-row:span 2}
.rs-card--3x3 {grid-column:span 3;grid-row:span 3}
.rs-card--3x4 {grid-column:span 3;grid-row:span 4}
.rs-card--3x5 {grid-column:span 3;grid-row:span 5}
.rs-card--4x2 {grid-column:span 4;grid-row:span 2}
.rs-card--4x3 {grid-column:span 4;grid-row:span 3}
.rs-card--4x4 {grid-column:span 4;grid-row:span 4}
.rs-card--4x5 {grid-column:span 4;grid-row:span 5}
.rs-card--5x2 {grid-column:span 5;grid-row:span 2}
.rs-card--5x3 {grid-column:span 5;grid-row:span 3}
.rs-card--5x4 {grid-column:span 5;grid-row:span 4}
.rs-card--5x5 {grid-column:span 5;grid-row:span 5}
.rs-card--6x2 {grid-column:span 6;grid-row:span 2}
.rs-card--6x3 {grid-column:span 6;grid-row:span 3}
.rs-card--6x4 {grid-column:span 6;grid-row:span 4}
.rs-card--6x5 {grid-column:span 6;grid-row:span 5}
.rs-card--7x2 {grid-column:span 7;grid-row:span 2}
.rs-card--7x3 {grid-column:span 7;grid-row:span 3}
.rs-card--7x4 {grid-column:span 7;grid-row:span 4}
.rs-card--7x5 {grid-column:span 7;grid-row:span 5}
.rs-card--8x2 {grid-column:span 8;grid-row:span 2}
.rs-card--8x3 {grid-column:span 8;grid-row:span 3}
.rs-card--8x4 {grid-column:span 8;grid-row:span 4}
.rs-card--8x5 {grid-column:span 8;grid-row:span 5}
.rs-card--9x2 {grid-column:span 9;grid-row:span 2}
.rs-card--9x3 {grid-column:span 9;grid-row:span 3}
.rs-card--9x4 {grid-column:span 9;grid-row:span 4}
.rs-card--9x5 {grid-column:span 9;grid-row:span 5}
.rs-card--10x2 {grid-column:span 10;grid-row:span 2}
.rs-card--10x3 {grid-column:span 10;grid-row:span 3}
.rs-card--10x4 {grid-column:span 10;grid-row:span 4}
.rs-card--10x5 {grid-column:span 10;grid-row:span 5}
.rs-card--12x2 {grid-column:span 12;grid-row:span 2}
.rs-card--12x3 {grid-column:span 12;grid-row:span 3}
.rs-card--12x4 {grid-column:span 12;grid-row:span 4}
.rs-card--12x5 {grid-column:span 12;grid-row:span 5}
.rs-card--16x2 {grid-column:span 16;grid-row:span 2}
.rs-card--16x3 {grid-column:span 16;grid-row:span 3}
.rs-card--16x4 {grid-column:span 16;grid-row:span 4}
.rs-card--16x5 {grid-column:span 16;grid-row:span 5}

/* ── Bouton + flottant ───────────────────────────────────── */
.rs-add-btn {
  position:fixed;bottom:28px;right:28px;
  width:56px;height:56px;border-radius:50%;
  background:var(--fg);color:var(--bg);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  z-index:1000;
  transition:transform .2s ease,box-shadow .2s ease;
}
.rs-add-btn:hover {
  transform:scale(1.1) rotate(90deg);
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.rs-add-btn__icon { font-size:28px;font-weight:300;line-height:1; }

/* ── Overlay ─────────────────────────────────────────────── */
.rs-add-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:1001;
  opacity:0;transition:opacity .3s ease;
}
.rs-add-overlay.is-open { opacity:1; }

/* ── Panel ajout ─────────────────────────────────────────── */
.rs-add-panel {
  position:fixed;
  bottom:0;right:0;
  width:min(460px,100vw);
  height:100dvh;
  background:#16181e;
  border-left:1px solid var(--stroke);
  z-index:1002;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.rs-add-panel.is-open { transform:translateX(0); }

.rs-add-panel__header {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--stroke);
  flex-shrink:0;
}
.rs-add-panel__header h2 { margin:0;font-size:1.4rem;font-weight:700; }

.rs-add-close {
  background:none;border:none;color:var(--muted);
  font-size:24px;cursor:pointer;padding:0;line-height:1;
  transition:color .15s;
}
.rs-add-close:hover { color:var(--fg); }

.rs-add-panel__body {
  flex:1;overflow-y:auto;
  padding:20px 24px 40px;
  display:flex;flex-direction:column;gap:14px;
}

/* Champs */
.rs-add-field { display:flex;flex-direction:column;gap:6px; }
.rs-add-field label { font-size:13px;font-weight:600;color:var(--muted); }
.rs-required { color:#ef4444; }

.rs-add-field input,
.rs-add-field select,
.rs-add-field textarea {
  background:#1e2028;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:var(--fg);
  padding:10px 12px;font-size:14px;
  outline:none;transition:border-color .15s;
  font-family:inherit;
}
.rs-add-field input:focus,
.rs-add-field select:focus,
.rs-add-field textarea:focus { border-color:rgba(255,255,255,.35); }
.rs-add-field textarea { resize:vertical;min-height:70px; }

.rs-add-url-row   { display:flex;gap:8px; }
.rs-add-url-row input { flex:1; }
.rs-add-price-row { display:flex;gap:6px; }
.rs-add-price-row input  { flex:1; }
.rs-add-price-row select { width:72px;flex-shrink:0; }

.rs-add-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

/* Fetch btn */
.rs-add-fetch-btn {
  flex-shrink:0;padding:0 14px;height:42px;
  background:rgba(255,255,255,.1);color:var(--fg);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;
  font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background .15s;
}
.rs-add-fetch-btn:hover { background:rgba(255,255,255,.18); }

/* Preview image */
.rs-add-preview {
  border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;background:#1e2028;
}
.rs-add-preview img { width:100%;height:100%;object-fit:cover; }

/* Statut */
.rs-add-status { font-size:12px;color:var(--muted);min-height:16px; }
.rs-add-status--loading { color:#60a5fa; }
.rs-add-status--done    { color:#4ade80; }
.rs-add-status--warning { color:#f3722c; }
.rs-add-status--error   { color:#f87171; }

/* Bouton submit */
.rs-add-submit {
  margin-top:8px;padding:14px;
  background:var(--fg);color:var(--bg);
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.rs-add-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* ── Vide ────────────────────────────────────────────────── */
.rs-empty { width:min(100%,var(--max-w));margin:0 auto;padding:48px 0 80px;color:var(--muted);font-size:1.1rem; }

/* ── Animation ───────────────────────────────────────────── */
@keyframes rsUp { to { opacity:1;transform:none; } }

/* ── Page produit single ─────────────────────────────────── */
.rs-single { min-height:100vh;padding:0 var(--gap) 80px; }
.rs-single__inner { width:min(100%,1100px);margin:0 auto;padding-top:32px; }
.rs-single__back {
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;color:var(--muted);margin-bottom:32px;
  transition:color .15s;
}
.rs-single__back:hover { color:var(--fg); }
.rs-single__layout { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start; }
.rs-single__media {
  border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;
  background:rgba(255,255,255,.06);position:sticky;top:24px;
}
.rs-single__media img { width:100%;height:100%;object-fit:cover; }
.rs-single__store { margin:0 0 10px;font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted); }
.rs-single__title { margin:0 0 20px;font-size:clamp(1.6rem,3.5vw,3rem);line-height:1.02;font-weight:800; }
.rs-single__badges { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px; }
.rs-badge--lg { height:30px;padding:0 14px;font-size:.85rem; }
.rs-single__description { color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:36px; }
.rs-single__description p { margin:0 0 12px; }
.rs-single__cta {
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;background:var(--fg);color:var(--bg);
  border-radius:99px;font-size:1rem;font-weight:700;
  transition:transform .18s,box-shadow .18s;
}
.rs-single__cta:hover { transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3); }
.rs-single__cta-arrow { font-size:1.1rem;transition:transform .18s; }
.rs-single__cta:hover .rs-single__cta-arrow { transform:translate(2px,-2px); }
.rs-single__no-url { color:var(--muted);font-size:.9rem; }

/* ── Responsive 1200px ───────────────────────────────────── */
@media(max-width:1200px) {
  :root { --row-h:78px; }
  /* Base réduite de moitié (16 → 8) : les cartes gardent leur span
     relatif mais occupent proportionnellement plus de largeur.
     Le placement explicite (desktop, en ligne) est neutralisé carte
     par carte via !important pour laisser le navigateur replacer
     librement chaque carte sur la grille à 8 colonnes. */
  .rs-grid { grid-template-columns:repeat(8,1fr);grid-auto-flow:dense; }

  [class*="rs-card--16x"],
  [class*="rs-card--12x"],
  [class*="rs-card--10x"],
  [class*="rs-card--9x"],
  [class*="rs-card--8x"]  { grid-column:span 8 !important; }
  [class*="rs-card--7x"],
  [class*="rs-card--6x"]  { grid-column:span 6 !important; }
  [class*="rs-card--5x"]  { grid-column:span 5 !important; }
  [class*="rs-card--4x"]  { grid-column:span 4 !important; }
  [class*="rs-card--3x"]  { grid-column:span 3 !important; }

  [class*="x2"] { grid-row:span 2 !important; }
  [class*="x3"] { grid-row:span 3 !important; }
  [class*="x4"] { grid-row:span 3 !important; }
  [class*="x5"] { grid-row:span 4 !important; }
}

/* ── Responsive 760px ────────────────────────────────────── */
@media(max-width:760px) {
  :root { --gap:6px; --radius:14px; --row-h:82px; }

  .rs-hero { padding-inline:14px; padding-top:36px; }

  /* Grille 4 colonnes — placement explicite desktop neutralisé
     carte par carte (voir commentaire du breakpoint 1200px) */
  .rs-grid { grid-template-columns:repeat(4,1fr);grid-auto-flow:dense; }

  /* Grandes cartes (5 cols et plus) → pleine largeur */
  [class*="rs-card--5x"],
  [class*="rs-card--6x"],
  [class*="rs-card--7x"],
  [class*="rs-card--8x"],
  [class*="rs-card--9x"],
  [class*="rs-card--10x"],
  [class*="rs-card--12x"],
  [class*="rs-card--16x"] { grid-column:span 4 !important; }

  /* Petites cartes (3, 4 cols) → demi-largeur, 2 par ligne */
  [class*="rs-card--3x"],
  [class*="rs-card--4x"] { grid-column:span 2 !important; }

  /* Hauteurs réduites sur mobile */
  [class*="x2"] { grid-row:span 2 !important; }
  [class*="x3"] { grid-row:span 2 !important; }
  [class*="x4"] { grid-row:span 3 !important; }
  [class*="x5"] { grid-row:span 3 !important; }

  .rs-card__excerpt { display:none; }
  .rs-add-panel { width:100vw; }
  .rs-single__layout { grid-template-columns:1fr; gap:24px; }
  .rs-single__media { position:static; aspect-ratio:4/3; }
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Nav globale
════════════════════════════════════════════════════════════ */

.rs-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: rgba(13,15,18,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.rs-nav__logo {
  font-weight: 800; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg);
  text-decoration: none;
}
.rs-nav__actions { display: flex; align-items: center; gap: 10px; }
.rs-nav__user {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted);
}
.rs-nav__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.rs-nav__btn {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: .78rem; font-weight: 600;
  background: var(--fg); color: var(--bg);
  transition: opacity .15s;
  text-decoration: none;
}
.rs-nav__btn:hover { opacity: .82; }
.rs-nav__btn--ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--stroke);
}
.rs-nav__btn--ghost:hover { border-color: rgba(255,255,255,.25); }


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Page compte commune
════════════════════════════════════════════════════════════ */

.rs-account {
  min-height: calc(100vh - 52px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 10% 20%, rgba(155,93,229,.15), transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(0,187,249,.10), transparent 28%),
    var(--bg);
}
.rs-account__inner {
  width: 100%; max-width: 420px;
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Auth card (login / register)
════════════════════════════════════════════════════════════ */

.rs-auth-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  overflow: hidden;
}

/* Tabs */
.rs-auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--stroke);
}
.rs-auth-tab {
  padding: 16px; border: none; background: none;
  color: var(--muted); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: color .15s, background .15s;
}
.rs-auth-tab:hover { color: var(--fg); }
.rs-auth-tab.is-active {
  color: var(--fg);
  background: rgba(255,255,255,.05);
  border-bottom: 2px solid var(--c5);
  margin-bottom: -1px;
}

/* Form panel */
.rs-auth-form { padding: 28px 24px 32px; }
.rs-auth-lead {
  margin: 0 0 22px; font-size: .9rem; color: var(--muted);
}

/* Alert */
.rs-auth-alert {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(249,65,68,.15);
  border: 1px solid rgba(249,65,68,.3);
  font-size: .82rem; color: #f87171;
  margin-bottom: 18px;
}
.rs-auth-alert--success {
  background: rgba(6,214,160,.1);
  border-color: rgba(6,214,160,.25);
  color: #6ee7b7;
}

/* Field */
.rs-auth-field {
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.rs-auth-field label {
  font-size: .78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.rs-auth-field input {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--fg); font-size: .9rem;
  outline: none; transition: border-color .15s;
  width: 100%;
}
.rs-auth-field input:focus { border-color: var(--c5); }
.rs-auth-field input.has-error { border-color: #f87171; }

.rs-auth-pwd-wrap { position: relative; }
.rs-auth-pwd-wrap input { padding-right: 42px; }
.rs-auth-toggle-pwd {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: .9rem; padding: 0; opacity: .5;
  transition: opacity .15s;
}
.rs-auth-toggle-pwd:hover { opacity: 1; }

/* Password strength */
.rs-auth-strength {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.rs-auth-strength__bar {
  flex: 1; height: 4px; background: rgba(255,255,255,.1);
  border-radius: 99px; overflow: hidden;
}
.rs-auth-strength__fill {
  height: 100%; border-radius: 99px;
  transition: width .3s, background .3s;
  width: 0;
}
.rs-auth-strength span { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* Remember */
.rs-auth-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted);
  cursor: pointer; margin-bottom: 20px;
  user-select: none;
}
.rs-auth-remember input { accent-color: var(--c5); }

/* Required star */
.rs-required { color: var(--c8); }

/* Submit button */
.rs-auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 20px;
  border-radius: 10px; border: none;
  background: var(--fg); color: var(--bg);
  font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .1s;
  text-decoration: none; text-align: center;
  margin-top: 6px;
}
.rs-auth-btn:hover { opacity: .88; }
.rs-auth-btn:active { transform: scale(.98); }
.rs-auth-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.rs-auth-btn--primary { background: var(--c5); color: #fff; }
.rs-auth-btn--ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--stroke);
}
.rs-auth-btn--ghost:hover { border-color: rgba(255,255,255,.25); }


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Profil
════════════════════════════════════════════════════════════ */

.rs-account--profile .rs-account__inner { max-width: 480px; }

.rs-profile {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
}
.rs-profile__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c5), var(--c2));
  color: #fff; font-size: 2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.rs-profile__name { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; }
.rs-profile__email { margin: 0 0 28px; font-size: .85rem; color: var(--muted); }
.rs-profile__stats {
  display: flex; gap: 1px;
  background: var(--stroke);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 28px;
}
.rs-profile__stat {
  flex: 1; padding: 14px;
  background: rgba(255,255,255,.03);
  display: flex; flex-direction: column; gap: 4px;
}
.rs-profile__stat strong { font-size: 1.4rem; font-weight: 800; }
.rs-profile__stat span   { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rs-profile__actions { display: flex; flex-direction: column; gap: 10px; }


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Responsive
════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .rs-nav__user span:not(.rs-nav__avatar) { display: none; }
  .rs-auth-form { padding: 24px 18px 28px; }
  .rs-profile { padding: 30px 20px; }
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Nav des listes
════════════════════════════════════════════════════════════ */

.rs-lists-nav {
  position: sticky; top: 52px; z-index: 90;
  background: rgba(13,15,18,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
  padding: 0 16px;
}
.rs-lists-nav__scroll {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding: 10px 0;
  scrollbar-width: none;
}
.rs-lists-nav__scroll::-webkit-scrollbar { display: none; }

/* Chip individuel */
.rs-list-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
  flex-shrink: 0;
}
.rs-list-chip:hover { color: var(--fg); background: rgba(255,255,255,.12); }
.rs-list-chip.is-active {
  background: var(--fg); color: var(--bg);
  border-color: var(--fg);
}
.rs-list-chip__count {
  font-size: .7rem; opacity: .6; font-weight: 400;
}
.rs-list-chip.is-active .rs-list-chip__count { opacity: .5; }

/* Chip collections du site */
.rs-list-chip--site {
  border-color: rgba(6,214,160,.25);
  color: #06d6a0;
  background: rgba(6,214,160,.06);
}
.rs-list-chip--site:hover { background: rgba(6,214,160,.14); color: #06d6a0; }
.rs-list-chip--site.is-active { background: #06d6a0; color: #0d0f12; border-color: #06d6a0; }

/* Chip listes utilisateur */
.rs-list-chip--user {
  border-color: rgba(155,93,229,.25);
  color: #b07ef5;
  background: rgba(155,93,229,.06);
}
.rs-list-chip--user:hover { background: rgba(155,93,229,.14); color: #b07ef5; }
.rs-list-chip--user.is-active { background: #9b5de5; color: #fff; border-color: #9b5de5; }

/* Séparateur entre zones */
.rs-lists-sep {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.2);
  white-space: nowrap; padding: 0 4px;
  flex-shrink: 0; align-self: center;
}

/* Chip + nouvelle liste */
.rs-list-chip--new {
  border: 1px dashed rgba(155,93,229,.3);
  background: transparent; color: rgba(155,93,229,.7);
}
.rs-list-chip--new:hover { border-color: #9b5de5; color: #9b5de5; }

/* Wrap chip avec bouton delete */
.rs-list-chip-wrap {
  position: relative; display: flex; align-items: center;
  flex-shrink: 0;
}
.rs-list-chip__delete {
  position: absolute; right: -6px; top: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #f94144; color: #fff; border: none;
  font-size: .7rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  transition: transform .1s;
  z-index: 1;
}
.rs-list-chip-wrap:hover .rs-list-chip__delete { display: flex; }
.rs-list-chip__delete:hover { transform: scale(1.15); }

/* Formulaire inline nouvelle liste */
.rs-list-new-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rs-list-new-form {
  display: flex; align-items: center; gap: 4px;
  animation: rs-fade-in .15s ease;
}
.rs-list-new-form input {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--c5);
  border-radius: 99px;
  padding: 5px 12px;
  color: var(--fg); font-size: .8rem;
  outline: none; width: 160px;
}
.rs-list-new-confirm, .rs-list-new-cancel {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer;
  font-size: .8rem; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.rs-list-new-confirm { background: var(--c5); color: #fff; }
.rs-list-new-cancel  { background: rgba(255,255,255,.1); color: var(--muted); }
.rs-list-new-confirm:hover, .rs-list-new-cancel:hover { opacity: .8; }

/* Liste select dans le modal */
.rs-add-list-row {
  display: flex; gap: 8px; align-items: center;
}
.rs-add-list-row select { flex: 1; }

@keyframes rs-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Hero avec collections intégrées
════════════════════════════════════════════════════════════ */

.rs-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rs-hero__title { flex-shrink: 0; }

.rs-hero__collections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6px;
  max-width: 55%;
}

/* Chips collections (dans le hero) */
.rs-col-chip {
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  background: rgba(6,214,160,.08);
  color: rgba(6,214,160,.7);
  border: 1px solid rgba(6,214,160,.2);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.rs-col-chip:hover {
  background: rgba(6,214,160,.18);
  color: #06d6a0;
  border-color: rgba(6,214,160,.4);
  transform: translateY(-1px);
}
.rs-col-chip.is-active {
  background: #06d6a0;
  color: #0d0f12;
  border-color: #06d6a0;
  font-weight: 700;
}

@media (max-width: 640px) {
  .rs-hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Chips collections : scroll horizontal — plus de wrap en plusieurs lignes */
  .rs-hero__collections {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
  }
  .rs-hero__collections::-webkit-scrollbar { display: none; }
  .rs-col-chip { flex-shrink: 0; }
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Badge store (à la place de "Disponible")
════════════════════════════════════════════════════════════ */

.rs-badge--store {
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 500;
  letter-spacing: .01em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge dispo petit (rupture / préco affiché en plus du store) */
.rs-badge--small {
  font-size: .62rem;
  padding: 2px 6px;
  opacity: .85;
}


/* ══════════════════════════════════════════════════════════
   RANDOMSHOPPER — Bouton suppression sur la carte
════════════════════════════════════════════════════════════ */

.rs-card__delete {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 20;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(249,65,68,.85);
  color: #fff;
  border: none;
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s, transform .1s;
}
.rs-card:hover .rs-card__delete { display: flex; }
.rs-card__delete:hover {
  background: #f94144;
  transform: scale(1.12);
}

/* Évite que le lien carte intercepte le clic sur le bouton */
.rs-card { position: relative; }