/* Controls belong to the existing photo tray; the overlay follows the image. */
.single-content .sau-photo-rx-host { position: relative; }
.single-content .sau-photo-rx-host--bare { margin: 0; }
.single-content .sau-photo-rx-image { touch-action: manipulation; }
.sau-photo-rx-layer { position: absolute; pointer-events: none; z-index: 4; }
.sau-photo-rx { position: absolute; right: 8px; bottom: 8px; left: 8px; display: flex; justify-content: flex-end; pointer-events: none; }
.sau-photo-rx button { box-sizing: border-box; min-height: 0; margin: 0; text-transform: none; letter-spacing: normal; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sau-photo-rx .sau-photo-rx-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 5px; border-radius: 999px;
  background: rgba(22,19,16,.5); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  color: white; font: 600 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: auto; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.sau-photo-rx-pill::after { content: ''; position: absolute; inset: -5px; border-radius: 999px; }
.sau-photo-rx .sau-photo-rx-pill.is-zero { padding-left: 10px; }
.sau-photo-rx-stack, .sau-photo-rx-outline { display: inline-flex; align-items: center; }
.sau-photo-rx-face {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #FBF9F6;
  box-shadow: 0 0 0 2px rgba(22,19,16,.85); font-size: 14px; line-height: 24px;
}
.sau-photo-rx-face + .sau-photo-rx-face { margin-left: -5px; }
.sau-photo-rx-face:nth-child(1) { z-index: 3; }
.sau-photo-rx-face:nth-child(2) { z-index: 2; }
.sau-photo-rx-face:nth-child(3) { z-index: 1; }
.sau-photo-rx-face[data-reaction="love"] { font-size: 12px; }
.sau-photo-rx-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sau-photo-rx .sau-photo-rx-pill.is-mine {
  background: rgba(251,249,246,.96); color: #1A1A1A; border-color: rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
}
.sau-photo-rx-pill:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.sau-photo-rx-pill.is-mine:focus-visible { outline-color: #1A1A1A; }
.sau-photo-rx-picker { position: absolute; right: 0; bottom: 0; max-width: 100%; transform-origin: bottom right; pointer-events: auto; }
.sau-photo-rx-picker[hidden], .sau-photo-rx-tip[hidden] { display: none; }
.sau-photo-rx.is-open .sau-photo-rx-pill { opacity: 0; transform: scale(.9); pointer-events: none; }
.sau-photo-rx-toolbar {
  max-width: 100%; height: 52px; padding: 4px 6px; border-radius: 26px;
  background: #FBF9F6; border: 1px solid #E6E1DA;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); box-sizing: border-box;
}
.sau-photo-rx-scroll {
  display: flex; gap: 2px; height: 44px; margin-block: -1px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.sau-photo-rx-scroll::-webkit-scrollbar { display: none; }
.sau-photo-rx-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
.sau-photo-rx .sau-photo-rx-option {
  flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: 28px/1 system-ui, sans-serif;
}
.sau-photo-rx-option span { font-size: 28px; line-height: 1; }
.sau-photo-rx .sau-photo-rx-option.is-picked { background: #F1ECE5; border-radius: 12px; }
.sau-photo-rx-option:focus-visible { outline: 2px solid #1A1A1A; outline-offset: -3px; }
.sau-photo-rx-option:disabled { cursor: wait; opacity: .55; }
.sau-photo-rx-tip {
  position: absolute; right: 2px; bottom: calc(100% + 8px); padding: 4px 10px;
  border-radius: 999px; background: rgba(251,249,246,.94); color: #6e675f;
  font: 500 11.5px/1.25 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none; transition: opacity .3s ease;
}
.sau-photo-rx-tip.is-gone { opacity: 0; }
[data-sau-theme="dark"] .sau-photo-rx-toolbar { background: #24211E; border-color: rgba(255,255,255,.12); }
[data-sau-theme="dark"] .sau-photo-rx .sau-photo-rx-option.is-picked { background: rgba(255,255,255,.1); }
[data-sau-theme="dark"] .sau-photo-rx-option:focus-visible { outline-color: white; }
[data-sau-theme="dark"] .sau-photo-rx-tip { background: rgba(36,33,30,.94); color: #c9c1b7; }
.sau-photo-rx-burst {
  position: absolute; left: 50%; top: 50%; font-size: 88px; line-height: 1;
  pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.4);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  animation: sau-photo-rx-burst .75s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes sau-photo-rx-burst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  33% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  45%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,calc(-50% - 16px)) scale(1); }
}
@keyframes sau-photo-rx-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes sau-photo-rx-pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.15); } }
@keyframes sau-photo-rx-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@media (prefers-reduced-motion: no-preference) {
  .sau-photo-rx-picker { animation: sau-photo-rx-in .2s cubic-bezier(.2,1.3,.4,1); }
  .sau-photo-rx-pill.is-pulsing { animation: sau-photo-rx-pulse .35s cubic-bezier(.2,1.4,.4,1); }
  .sau-photo-rx-scroll.is-nudging { animation: sau-photo-rx-nudge .6s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .sau-photo-rx-burst { display: none; animation: none; }
  .sau-photo-rx *, .sau-photo-rx *::after { animation: none !important; transition: none !important; }
}