/* "Pia toont" (pia-show.js): label, gloed en het kaartje van het getoonde product.
   Kleuren volgen de luchtregel: koel blauw/turquoise. Geen knipperen: één zachte
   gloed bij de wissel, daarna een rustige rand (veilig voor lichtgevoelige bezoekers). */
.rs-piashow{ margin:0; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px;
  border:1px solid rgba(143,216,255,.55); background:rgba(0,40,60,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 12px/1 var(--f-mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#BFE9FF;
  box-shadow:0 0 22px rgba(0,154,215,.45); pointer-events:none; }
.rs-piashow b{ font-weight:600; color:#fff; letter-spacing:.06em; }
.rs-piashow .dot{ width:7px; height:7px; border-radius:50%; background:#8FD8FF; box-shadow:0 0 10px #8FD8FF, 0 0 20px #009AD7; }
.rs-piashow[hidden]{ display:none; }

/* Gloed rond de hele scène zolang Pia een ander rooster toont. */
.peek-rs::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .9s ease;
  box-shadow:inset 0 0 0 1px rgba(143,216,255,.35), inset 0 0 90px rgba(0,154,215,.28), inset 0 0 220px rgba(38,198,218,.10); }
.peek-rs.is-pia-show::after{ opacity:1; }
.peek-rs.is-pia-pulse::after{ animation:rs-pia-in 1.6s ease-out both; }
@keyframes rs-pia-in{ 0%{ opacity:0; } 35%{ opacity:1; box-shadow:inset 0 0 0 1px rgba(143,216,255,.7), inset 0 0 140px rgba(0,154,215,.45), inset 0 0 300px rgba(38,198,218,.18); } 100%{ opacity:1; } }

/* Het kaartje van het getoonde product */
.card--pia{ border-color:rgba(143,216,255,.55); box-shadow:0 0 28px rgba(0,154,215,.28); animation:rs-card-in .5s cubic-bezier(.2,.7,.2,1) both; }
.card--pia .code{ color:#fff; }
.card--pia .card-name{ margin:2px 0 4px; font:400 12px/1.35 var(--f-mono, monospace); color:var(--c-ink-2, #A4A7AA); }
.card--pia .card-src{ margin:4px 0 0; padding-top:4px; border-top:1px solid var(--c-line, rgba(236,235,231,.14)); font:400 12px/1.4 var(--f-mono, monospace); color:var(--c-ink-3, #7E8286); letter-spacing:.04em; }
.card-act{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.card-go, .card-back{ appearance:none; display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px; cursor:pointer; text-decoration:none;
  font:500 12px/1 var(--f-mono, monospace); letter-spacing:.1em; text-transform:uppercase; }
.card-go{ background:#009AD7; color:#02121B; border:1px solid #8FD8FF; box-shadow:0 0 16px rgba(0,154,215,.45); }
.card-go:hover{ background:#26B5EE; }
.card-back{ background:transparent; color:var(--c-ink-2, #A4A7AA); border:1px solid var(--c-line, rgba(236,235,231,.2)); }
.card-back:hover{ color:var(--c-ink, #ECEBE7); }
.card-go:focus-visible, .card-back:focus-visible{ outline:2px solid #EF9221; outline-offset:2px; }
.card--pia, .card-act{ pointer-events:auto; }
@keyframes rs-card-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .peek-rs.is-pia-pulse::after, .card--pia{ animation:none; } }
.card--pia .card-photo{ margin:4px 0 6px; width:100%; max-width:200px; aspect-ratio:4 / 3; border-radius:6px; overflow:hidden; background:radial-gradient(120% 95% at 35% 22%, #ffffff, #f4f4f1 55%, #dcdbd6); }
.card--pia .card-photo img{ display:block; width:100%; height:100%; object-fit:contain; padding:6%; mix-blend-mode:multiply; }
@media (max-width:899px) and (orientation:portrait){ .card--pia .card-photo{ max-width:120px; } }