/* ══ Social proof clips (product pages) ════════════════════════════════════
   Vertical 9:16 click-to-play frames. Mobile: native scroll-snap row (same
   idea as .pv-strip in plugins.css). 64em+: three across. No motion beyond
   the shared stroke-draw box; play is an instant swap. */
.p-social-body { padding: var(--s6) var(--gutter) var(--s7); }
.p-clips {
  display: flex; gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.p-clip {
  flex: 0 0 68%;
  max-width: 32rem;
  scroll-snap-align: center;
  margin: 0;
}
.p-clip-play, .p-clip-video {
  display: block; width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  padding: 0; border: 0;
  border-radius: var(--shot-radius);
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--surface);
}
/* The 9:16 box above uses cover so the poster fills it. Fullscreen inherits
   that, so a portrait clip got cropped and blown up to fill a landscape
   screen. In fullscreen show the whole frame instead, letterboxed in black. */
.p-clip-video:fullscreen { object-fit: contain; background: #000; }
.p-clip-video:-webkit-full-screen { object-fit: contain; background: #000; }
.p-clip-play { position: relative; cursor: pointer; overflow: hidden; }
.p-clip-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-clip-icon {
  position: absolute; left: 50%; top: 50%;
  width: 6.4rem; height: 6.4rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--fg);
  border-radius: 50%;
  background: var(--ground);
}
.p-clip-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-35%, -50%);
  border-left: 1.8rem solid var(--fg);
  border-top: 1.1rem solid transparent;
  border-bottom: 1.1rem solid transparent;
}
.p-clip-play:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.p-clip-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s3);
  text-transform: uppercase;
}
.p-clip-link { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 48em) { .p-social-body { padding: var(--s7) var(--gutter) var(--s8); } }
@media (min-width: 64em) {
  .p-clips { overflow: visible; gap: var(--s5); }
  .p-clip { flex: 1 1 0; max-width: none; }
}