/* Aspect « boutique » des styles Lobby et Noir : pastilles de filtre collantes, grandes cartes à survol, aperçu rapide.
   Les couleurs viennent de l'aspect actif : Lobby = couleur du site (--pink), Noir = couleur d'accent (--ac). */
body.look-lobby { --sx: var(--pink); --sx-on: var(--on-pink, #fff); --sx-lt: var(--lt, var(--pink)); }
body.look-noir { --sx: var(--ac, var(--pink)); --sx-on: var(--on-ac, #fff); --sx-lt: var(--ac-lt, var(--ac, var(--pink))); }

/* ---------- Pastilles : « Everything » + une par catégorie, collées sous l'en-tête pendant le défilement ---------- */
body.look-lobby .lb-shop .tabs { position: sticky; top: var(--hdr, 0px); z-index: 30; display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 14px 2px; margin: 0 0 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(6, 6, 8, .97), rgba(6, 6, 8, .9) 72%, rgba(6, 6, 8, 0)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.look-lobby .lb-shop .tabs::-webkit-scrollbar { display: none; }
body.look-lobby .lb-shop .tabs .tab { flex: 0 0 auto; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
body.look-lobby .lb-shop .tabs .tab.on, body.look-noir .lb-shop .tabs .tab.on { background: var(--sx); border-color: var(--sx); color: var(--sx-on); }
body.look-lobby .lb-shop .tabs .tab.on i, body.look-noir .lb-shop .tabs .tab.on i { color: var(--sx-on); opacity: .72; }
@media (max-width: 760px) { body.look-lobby .lb-shop .tabs { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Grille et cartes ---------- */
.lb-shop #grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 22px; align-items: start; }
@media (max-width: 800px) { .lb-shop #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 380px) { .lb-shop #grid { grid-template-columns: 1fr; } }

/* l'achat se fait dans l'aperçu rapide : plus de ligne « cœur + Add to cart » sous chaque carte */
body.look-lobby .pc-actions { display: none; }
/* étiquettes : catégorie en haut à gauche, « New / Female… » en haut à droite, « 3D » en bas à gauche */
body.look-lobby .pc-img .badge { top: 10px; right: 10px; bottom: auto; left: auto; }
body.look-lobby .chip-3d { top: auto; right: auto; bottom: 10px; left: 10px; }
/* flèche qui apparaît au survol, en bas à droite de l'image */
body.look-lobby .pc-img::after { content: '\2192'; position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sx); color: var(--sx-on); font: 700 18px/1 var(--font-b); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .18s, transform .18s; pointer-events: none; }
body.look-lobby .pcard:hover .pc-img::after, body.look-lobby .pcard:focus-within .pc-img::after { opacity: 1; transform: none; }
@media (hover: none) { body.look-lobby .pc-img::after { display: none; } }
/* barre du bas : nom en majuscules à gauche, prix en couleur à droite */
body.look-lobby .pc-name { padding: 16px 16px; background: rgba(0, 0, 0, .34); border-top: 1px solid rgba(255, 255, 255, .06); }
body.look-noir .pc-name h3 { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; font-size: 12px; }
body.look-lobby .pc-name .price { font-size: 17px; }
body.look-noir .pc-name .price { font-size: 15px; }
body.look-lobby .pcard { cursor: pointer; }

/* ---------- Aperçu rapide ---------- */
html.qv-open { overflow: hidden; }
.qv { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(10px, 3vw, 28px); }
.qv[hidden] { display: none; }
.qv-back { position: absolute; inset: 0; background: rgba(2, 2, 4, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: qvFade .2s ease both; }
.qv-box { position: relative; width: min(1120px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  background: #0a0a0d; border: 1px solid var(--sx-lt, #fff); border-radius: 26px; overflow: auto; box-shadow: 0 40px 120px -30px #000; animation: qvPop .22s cubic-bezier(.2, .8, .2, 1) both; }
.qv-x { position: absolute; top: 16px; right: 16px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.qv-x:hover { border-color: var(--sx-lt); color: var(--sx-lt); }
.qv-media { position: relative; display: grid; place-items: center; min-height: 340px; padding: 28px; background: radial-gradient(circle at 50% 40%, #202027, #050507 76%); }
.qv-media img { display: block; max-width: 100%; max-height: min(68vh, 640px); width: auto; height: auto; object-fit: contain; border-radius: 14px; }
.qv-media img[hidden] { display: none; }
.qv-media.wide img, .qv-media img.photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.qv-badge { position: absolute; top: 18px; left: 18px; background: #fff; color: #000; padding: 5px 12px; border-radius: 999px; font: 700 11px var(--font-b); letter-spacing: .1em; text-transform: uppercase; }
.qv-badge[hidden] { display: none; }
.qv-badge.female { background: #ff5fa8; }
.qv-info { display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 4vw, 46px); min-width: 0; }
.qv-eyebrow { font: 600 12px var(--font-b); letter-spacing: .34em; text-transform: uppercase; color: var(--sx-lt); padding-right: 44px; }
.qv-title { margin: 0; font: 400 clamp(30px, 4.2vw, 56px)/.98 var(--font-h); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; text-wrap: balance; }
body.look-noir .qv-title { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.qv-price { font: 400 clamp(26px, 3vw, 40px)/1 var(--font-h); color: var(--sx-lt); }
body.look-noir .qv-price { font-family: var(--font-m); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); }
.qv-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .03); color: #e9e9ee; font: 600 12px var(--font-b); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: border-color .15s, color .15s; }
.qv-pill:hover { border-color: var(--sx-lt); color: var(--sx-lt); }
.qv-heart { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #e9e9ee; cursor: pointer; font-size: 18px; display: grid; place-items: center; padding: 0; }
.qv-heart:hover, .qv-heart.on { border-color: var(--sx-lt); color: var(--sx-lt); }
.qv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.qv-btn { flex: 1 1 170px; min-height: 58px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .38); background: transparent; color: #fff; font: 700 14px var(--font-b); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: filter .15s, border-color .15s; }
.qv-btn:hover { border-color: #fff; }
.qv-btn.primary { background: var(--sx); border-color: var(--sx); color: var(--sx-on); }
.qv-btn.primary:hover { filter: brightness(1.12); }
.qv-btn:disabled { opacity: .7; cursor: default; }
.qv-note { margin: 0; color: #8d8d97; font-size: 13.5px; line-height: 1.5; }
.qv-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.qv-prev, .qv-next { background: none; border: 0; padding: 8px 4px; color: #cfcfd6; font: 700 12px var(--font-b); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.qv-prev:hover:not(:disabled), .qv-next:hover:not(:disabled) { color: var(--sx-lt); }
.qv-prev:disabled, .qv-next:disabled { opacity: .3; cursor: default; }
@keyframes qvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qvPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qv-back, .qv-box { animation: none; } }
@media (max-width: 860px) {
  .qv { padding: 0; align-items: end; }
  .qv-box { grid-template-columns: 1fr; width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .qv-media { min-height: 0; padding: 18px; }
  .qv-media img { max-height: 36vh; }
  .qv-info { padding: 22px 20px 26px; gap: 14px; }
  .qv-x { top: 12px; right: 12px; width: 42px; height: 42px; }
}

/* cartes d'une même ligne : la barre du bas s'étire pour remplir la carte (plus de grand vide noir sous une carte plus courte que sa voisine) */
body.look-lobby .pc-name { flex: 1 1 auto; align-items: center; }