/* ============================================================
   Spotlights roll + viewer (U10; renamed from "Highlights" in U12)
   Homepage-only roll above the search bar, and the full-screen
   viewer opened by tapping a vendor circle. See static/js/highlights.js.

   U12 Rule 6: the roll's circles (incl. the "+" circle) are sized to 85%
   of the homepage bottom-nav "+" button's diameter (.vf-sell-btn,
   static/css/style.css -- 52px, single definition, no media-query
   override) = 44.2px, rounded to 44px. That's a 0.7367 ratio against
   this roll's OLD 60px ring, applied proportionally to every other
   ring/label/spacing value below (box-shadow halo width, label font
   size, circle column width, track gap). Before -> after, per value:
     ring/more-pill diameter   60px    -> 44px   (target 44.2px)
     ring halo (inner/outer)   3/5px   -> 2.2/3.7px
     circle column width       68px    -> 50px
     label font-size           .72rem  -> .53rem
     plus-icon font-size       1.15rem -> .85rem
     more-pill font-size       .85rem  -> .63rem
     track gap                 .9rem   -> .66rem

   Follow-up (presentation only): the .53rem label was too small to read
   comfortably at the 44px ring size, so it's bumped to .68rem (~11px) --
   the ring itself is UNCHANGED (still 44px, still 85% of .vf-sell-btn).
   The circle column (and the label's own max-width, which always matches
   it) widens 50px -> 58px so the larger text has room before its
   ellipsis kicks in, without the label crowding into the next circle's
   column -- the track gap between columns is untouched (.66rem), so the
   wider column is the only thing buying the label breathing room.
     label font-size            .53rem -> .68rem
     circle column width/label
       max-width                50px   -> 58px
   ============================================================ */

/* ---------- Roll ---------- */
.vf-hl-roll { padding: .6rem 0; }
.vf-hl-track {
  display: flex;
  align-items: flex-start;
  gap: .66rem;
  overflow-x: hidden;
}
.vf-hl-track.vf-hl-track--expanded {
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--bs-gutter-x, .75rem));
  padding: 0 var(--bs-gutter-x, .75rem) .4rem;
}
.vf-hl-track.vf-hl-track--expanded::-webkit-scrollbar { display: none; }

.vf-hl-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  width: 58px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.vf-hl-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef3ef;
  box-shadow: 0 0 0 2.2px #fff, 0 0 0 3.7px #d8dedb;
}
.vf-hl-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vf-hl-ring--gold   { box-shadow: 0 0 0 2.2px #fff, 0 0 0 3.7px var(--vm-gold); }
.vf-hl-ring--grey   { box-shadow: 0 0 0 2.2px #fff, 0 0 0 3.7px #c7cbc8; }
.vf-hl-ring--plus {
  background: var(--vf-green-dark, var(--vm-deep));
  color: #fff;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(26,77,46,.25);
}
.vf-hl-plus:hover .vf-hl-ring--plus { transform: translateY(-2px); }
.vf-hl-ring--plus { transition: transform .12s ease; }

.vf-hl-label {
  font-size: .68rem;
  color: #374151;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58px;
}
.vf-hl-updating .vf-hl-label { color: #6c757d; font-style: italic; }

.vf-hl-more {
  width: 44px; height: 44px; border-radius: 50%;
  background: #eef3ef; color: var(--vm-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: .63rem; font-weight: 800;
}

/* ---------- Viewer ---------- */
.vf-hlv-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; flex-direction: column;
  touch-action: none;
}
.vf-hlv-overlay[hidden] { display: none; }

.vf-hlv-progress {
  display: flex; gap: 4px;
  padding: .6rem .6rem 0;
}
.vf-hlv-progress-seg {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}
.vf-hlv-progress-fill {
  height: 100%; width: 0%; background: #fff;
  transform-origin: left;
}

.vf-hlv-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem;
  color: #fff;
}
.vf-hlv-header img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #333;
}
.vf-hlv-vendor-name { font-weight: 700; font-size: .92rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-hlv-views {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: #e8ebe9; flex-shrink: 0;
}
.vf-hlv-share, .vf-hlv-close {
  background: none; border: none; color: #fff;
  line-height: 1; padding: .25rem .5rem; cursor: pointer;
}
.vf-hlv-share { font-size: 1.05rem; }
.vf-hlv-close { font-size: 1.3rem; }

.vf-hlv-media {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.vf-hlv-photo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
}
.vf-hlv-photo.vf-hlv-photo--active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vf-hlv-photo { transition: none; }
}

.vf-hlv-nav-zone {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: transparent;
}
.vf-hlv-nav-zone--left  { left: 0; }
.vf-hlv-nav-zone--right { right: 0; }

.vf-hlv-body {
  padding: .9rem 1rem 1.2rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.vf-hlv-title { font-weight: 800; font-size: 1.05rem; margin: 0 0 .2rem; }
.vf-hlv-price { font-size: .92rem; color: #e8ebe9; margin: 0 0 .7rem; }
.vf-hlv-contact {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25D366; color: #fff; text-decoration: none;
  border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700; font-size: .9rem;
}

.vf-hlv-share-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2010;
  background: #1c1c1e;
  border-radius: 1rem 1rem 0 0;
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
.vf-hlv-share-sheet[hidden] { display: none; }
.vf-hlv-share-item {
  background: none; border: none; color: #fff; text-align: left;
  padding: .85rem 1.2rem; font-size: .95rem; cursor: pointer;
  display: flex; align-items: center; gap: .7rem;
}
.vf-hlv-share-item + .vf-hlv-share-item { border-top: 1px solid rgba(255,255,255,.08); }
.vf-hlv-share-cancel { justify-content: center; color: #e8ebe9; font-weight: 700; }

.vf-hlv-paused .vf-hlv-progress-fill { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .vf-hl-ring--plus, .vf-hlv-photo { transition: none !important; }
}