/* Stories row and viewer. Ring colour follows the shop's primary colour. */
.st-wrap {
  --st-accent: var(--primary, #2563eb);
  --st-size: 72px;
  position: relative;
  max-width: var(--container, 72rem);
  margin: 1rem auto 0;
  padding: 0 1rem;
}
.st-row {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: .35rem .25rem .6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.st-row::-webkit-scrollbar { display: none; }
.st-circle {
  flex: 0 0 auto; width: calc(var(--st-size) + 8px);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  scroll-snap-align: start;
  color: var(--text, #1c1917);
  -webkit-tap-highlight-color: transparent;
}
.st-ring {
  position: relative;
  width: calc(var(--st-size) + 6px); height: calc(var(--st-size) + 6px);
  border-radius: 999px; padding: 3px;
  background: conic-gradient(from 210deg, #f59e0b, #ef4444, #d946ef, var(--st-accent), #f59e0b);
  transition: transform .2s ease;
}
.st-circle:hover .st-ring { transform: scale(1.05); }
.st-circle:focus-visible { outline: none; }
.st-circle:focus-visible .st-ring { box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 5px var(--st-accent); }
.st-circle.is-seen .st-ring { background: rgba(120, 113, 108, .35); }
.st-ring img, .st-fallback {
  position: absolute; top: 3px; left: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  border-radius: 999px; object-fit: cover;
  border: 3px solid var(--bg, #fff);
  box-sizing: border-box;
}
.st-ring img { z-index: 1; background: var(--bg, #fff); }
.st-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--st-accent); color: #fff; font-size: 20px;
}
.st-badge {
  position: absolute; right: 0; bottom: 2px; z-index: 2;
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff; font-size: 8px; padding-left: 1px;
  border: 2px solid var(--bg, #fff);
}
.st-label {
  max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text, #1c1917);
}
.st-circle.is-seen .st-label { opacity: .65; }
.st-scroll {
  position: absolute; top: calc(.35rem + var(--st-size) / 2 + 3px - 17px); z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, .08); background: var(--surface, #fff); color: var(--text, #1c1917);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14); font-size: 13px;
}
.st-scroll--prev { left: .25rem; }
.st-scroll--next { right: .25rem; }
@media (hover: hover) and (pointer: fine) {
  .st-scroll:not([hidden]) { display: flex; }
}
.st-scroll[hidden] { display: none; }

/* Viewer */
html.stv-lock, html.stv-lock body { overflow: hidden; }
.stv {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  background: #050507; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.stv[hidden] { display: none; }
.stv:focus { outline: none; }
.stv-bg {
  position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px;
  background-size: cover; background-position: center;
  filter: blur(46px) brightness(.38) saturate(1.2);
  transform: scale(1.05);
}
.stv-card {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  background: #000; overflow: hidden;
  transition: transform .2s ease;
}
.stv-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.stv-img, .stv-vid { width: 100%; height: 100%; object-fit: contain; }
.stv-img[hidden], .stv-vid[hidden] { display: none; }
.stv-spin, .stv-fail {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  pointer-events: none; text-align: center; padding: 2rem;
}
.stv-spin { font-size: 32px; color: rgba(255, 255, 255, .85); }
.stv-fail { color: #e7e5e4; background: rgba(0, 0, 0, .6); }
.stv-fail i { font-size: 30px; opacity: .55; }
.stv-fail p { margin: 0; font-size: 14px; }
.stv-spin[hidden], .stv-fail[hidden] { display: none; }

.stv-segs {
  position: absolute; top: calc(.6rem + env(safe-area-inset-top, 0px)); left: .6rem; right: .6rem; z-index: 6;
  display: flex; gap: 4px;
}
.stv-seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.stv-seg-fill { height: 100%; width: 0; background: #fff; }

.stv-head {
  position: absolute; top: calc(1.25rem + env(safe-area-inset-top, 0px)); left: .75rem; right: .5rem; z-index: 7;
  display: flex; align-items: center; gap: .55rem;
}
.stv-av {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary, #2563eb); color: #fff; font-weight: 800; font-size: 15px;
}
img.stv-av { background: #fff; }
.stv-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.stv-handle { font-size: 14px; font-weight: 700; white-space: nowrap; }
.stv-sub { font-size: 12px; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stv-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .3); color: #fff; font-size: 15px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stv-btn[hidden] { display: none; }
.stv-btn:hover { background: rgba(0, 0, 0, .5); }
.stv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.stv-tap { position: absolute; top: 0; bottom: 0; z-index: 4; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stv-tap--prev { left: 0; width: 32%; cursor: w-resize; }
.stv-tap--next { right: 0; width: 68%; cursor: e-resize; }

.stv-paused {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .42); font-size: 24px; pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stv.is-paused .stv-paused { display: flex; }
.stv.is-held .stv-head, .stv.is-held .stv-foot, .stv.is-held .stv-segs { opacity: 0; transition: opacity .2s ease; }

.stv-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 3.5rem 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.stv-foot > * { pointer-events: auto; }
.stv-caption { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.stv-caption[hidden], .stv-music[hidden], .stv-cta[hidden] { display: none; }
.stv-music { margin: .45rem 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .8); display: flex; align-items: center; gap: .35rem; }
.stv-cta {
  margin-top: .85rem; display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  background: #fff; color: #111; text-decoration: none; font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.stv-cta-arrow { font-size: 12px; transition: transform .15s ease; }
.stv-cta:hover .stv-cta-arrow { transform: translateX(3px); }

.stv-arrow {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 999px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.stv-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .24); transform: scale(1.06); }
.stv-arrow:disabled { opacity: .25; cursor: default; }
.stv-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.stv-hint {
  position: absolute; left: 50%; bottom: 1.25rem; z-index: 3; margin: 0;
  transform: translateX(-50%);
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(18, 18, 24, .85); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.stv.show-hint .stv-hint { opacity: 1; }

/* Desktop and tablets: story card with arrows beside it */
@media (min-width: 700px) and (min-height: 560px) {
  .stv-card {
    width: auto; height: calc(100% - 3rem);
    aspect-ratio: 9 / 16; max-width: 460px;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  }
  @supports not (aspect-ratio: 9 / 16) { .stv-card { width: 460px; } }
  .stv.is-pointer .stv-arrow { display: flex; }
}
@media (hover: hover) and (pointer: fine) {
  .stv-arrow { display: flex; }
}
@media (max-width: 699px) {
  .stv-arrow { position: absolute; top: 50%; margin-top: -26px; display: none; }
  .stv-arrow--prev { left: .5rem; }
  .stv-arrow--next { right: .5rem; }
  .stv.is-pointer .stv-arrow { display: flex; z-index: 8; }
}

@media (prefers-reduced-motion: reduce) {
  .st-ring, .stv-card, .stv-arrow, .stv-hint { transition: none !important; }
}