/* Phones, as their own round (phone.js) */

/* ── 1 · The next consultant's face peeks in at the edge while the sheet is swiped ── */
.pf-peek { position: absolute; z-index: 7; top: 120px; width: 64px; height: 64px; pointer-events: none; display: none; opacity: 0; }
.pf-peek.on { display: block; }
.pf-peek.from-r { right: 10px; }
.pf-peek.from-l { left: 10px; }
.pf-peek .pk-ph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 10px 26px -12px rgba(11,36,67,.45), 0 0 0 3px #fff;
  transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out); }
.pf-peek .pk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; mix-blend-mode: multiply; }
.pf-peek .pk-ph .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: var(--navy); }
.pf-peek .pk-arr { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out); }
.pf-peek .pk-arr svg { width: 12px; height: 12px; }
.pf-peek.from-r .pk-arr { left: -14px; }
.pf-peek.from-r .pk-arr svg { transform: scaleX(-1); }
.pf-peek.from-l .pk-arr { right: -14px; }
/* past the threshold: the face is ready to come in */
.pf-peek.armed .pk-ph { box-shadow: 0 12px 30px -12px rgba(11,36,67,.55), 0 0 0 3px var(--blue); transform: scale(1.06); }
.pf-peek.armed .pk-arr { opacity: 1; transform: none; }

/* ── 2 · More filters: a grab handle on the bottom sheet, and a scrim that closes it on tap ── */
.pop-grip { display: none; }
@media (max-width: 680px) {
  .more-wrap::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(11,36,67,.32); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 280ms var(--ease-out), visibility 0s 280ms; }
  .more-wrap.open::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 280ms var(--ease-out), visibility 0s; }
  #morePop { padding-top: 30px; touch-action: none; overscroll-behavior: contain; }
  #morePop.dragging { transition: none; }
  .pop-grip { display: block; position: absolute; top: 0; left: 50%; width: 88px; height: 28px; margin-left: -44px; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; }
  .pop-grip i { position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line); transition: background 200ms, width 260ms var(--ease-out), margin 260ms var(--ease-out); }
  #morePop.dragging .pop-grip i { background: var(--ink-2, #8a94a3); width: 52px; margin-left: -26px; }
  .pop-grip:focus-visible { outline: none; }
  /* the compare tray's resting place on phones left its top 6px on screen (bottom 76px + 150%); park it fully off,
     and step it aside while the filter sheet is up, since it stacks above the sheet */
  .cmp-tray:not(.on), body:has(.more-wrap.open) .cmp-tray { transform: translate(-50%, calc(100% + 96px)); }
  /* Dr Kings' button steps aside while the sheet is up, so it never sits on an option */
  .drkings-fab { transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
  body:has(.more-wrap.open) .drkings-fab { opacity: 0; transform: translateY(16px) scale(.9); visibility: hidden; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms; }
  .pop-grip:focus-visible i { box-shadow: 0 0 0 3px var(--blue); }
}

/* ── 3 · The cover wall as a single row you can flick ── */
@media (max-width: 680px) {
  .wall { height: auto; }
  .wall .wall-cols { position: relative; inset: auto; display: flex; flex-direction: row; gap: 10px; padding: 14px 16px 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wall .wall-cols::-webkit-scrollbar { display: none; }
  .wall.drift .wall-cols { scroll-snap-type: none; }
  /* the three columns dissolve into one row; their drift transforms no longer apply */
  .wall .wall-col { display: contents; }
  .wall .wfac { flex: 0 0 auto; width: 132px; scroll-snap-align: start; }
  .wall-fade { background: linear-gradient(90deg, var(--tint), rgba(232,235,240,0) 7%, rgba(232,235,240,0) 93%, var(--tint)); }
  /* the pause button sits below the row, so it never covers a face */
  .dcover-grid { padding-bottom: 60px; }
  .wall-pause { bottom: 8px; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .wall-pause { display: none; }
}
@media (max-width: 680px) { .rm .wall-pause { display: none; } }