/**
 * RetailFix Nearby — consumer map.
 *
 * This software was originally conceived, designed, architected, and
 * developed by Jess Maron. The underlying concepts, system structure,
 * functionality, workflows, and custom code represent original creative
 * and technical work by its creator. Attribution to the original creator
 * is intended to remain associated with this work.
 */

.rfn {
  --red-deep: #bb0016;
  --red-bright: #e1272b;
  --orange: #fea121;
  --ink: #1c1917;
  --paper: #fcf9f8;
  --cream: #fbe9e5;
  --stone: #78716c;
  --line: #e2d9d4;
  --white: #fff;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Dongle", sans-serif;

  position: fixed;
  inset: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

/* Map fills everything; the chrome floats over it. */
#rfn-map {
  position: absolute;
  inset: 0;
}
/* The colour behind the map's squares, so no light grid shows between them.
   Google sets its own light grey on the element, hence !important. */
#rfn-map {
  background-color: #f6f2f0 !important;
}
html[data-theme="dark"] #rfn-map {
  background-color: #24201e !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.rfn-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Above the feed pane, or switching to the feed hides the way back. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  pointer-events: none;
}
.rfn-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: auto;
}
.rfn-brand-mark {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.7;
  color: var(--red-deep);
}

.rfn-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  pointer-events: auto;
  transition: margin-right 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.rfn-count,
.rfn-viewswitch {
  flex-shrink: 0;
}
.rfn-brand {
  flex-shrink: 0;
}
/* Map or the whole feed. */
.rfn-account {
  flex-shrink: 0;
  padding: 8px 16px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 4px 14px #bb001612;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.rfn-account.is-in {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}

/* Sign in. A dialog rather than a page: they're mid-browse, and the reason
   they're here is a button they just pressed. */
.rfn-auth {
  position: absolute;
  inset: 0;
  /* Above the frosted glass at the top and bottom, so it dims the whole screen. */
  z-index: 21;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #1c191799;
  backdrop-filter: blur(3px);
}
.rfn-auth.is-open {
  display: flex;
}
.rfn-auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 28px 24px 24px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 20px 60px #00000040;
}
.rfn-auth-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 0.8;
  color: var(--ink);
}
.rfn-auth-sub {
  margin: 10px 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--stone);
}
.rfn-auth-input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
}
.rfn-auth-input:focus {
  outline: none;
  border-color: var(--red-deep);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 12%);
}
.rf-pw-wrap {
  align-items: center;
  display: flex;
  position: relative;
}
.rf-pw-wrap .rfn-auth-input {
  padding-right: 44px;
}
.rf-pw-eye {
  cursor: pointer;
  color: #888;
  background: 0 0;
  border: none;
  align-items: center;
  padding: 0;
  line-height: 1;
  display: flex;
  position: absolute;
  right: 0.75rem;
}

.rfn-auth-error {
  margin: 2px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-deep);
}
.rfn-auth-go {
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: var(--red-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
  cursor: pointer;
}
.rfn-auth-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.rfn-auth-switch {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-auth-switch:hover {
  color: var(--red-deep);
}
.rfn-guides-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  text-decoration: none;
}
.rfn-guides-link:hover {
  color: var(--red-deep);
}

/* New posts, offered rather than forced. Their scroll position never moves
   unless they ask for it. */
.rfn-new-pill {
  position: fixed;
  left: 50%;
  top: 96px;
  z-index: 7;
  transform: translate(-50%, -14px);
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: var(--red-deep);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 26px #bb001640;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rfn-new-pill.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Brief confirmation, low on the screen so it isn't over what they just
   pressed. */
/* The confirm and the toast can end up outside .rfn in the DOM, and the
   palette is scoped to it — without this they render with no colour at
   all. */
.rfn-ask,
.rfn-toast {
  --red-deep: #bb0016;
  --ink: #1c1917;
  --paper: #fcf9f8;
  --cream: #fbe9e5;
  --stone: #78716c;
  --line: #e2d9d4;
  --white: #fff;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* The Suite's toast, to the pixel: same 96px offset, same shape, so both
   products confirm things the same way. */
.rfn-toast {
  z-index: 9999999;
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  /* As wide as the message, up to the screen's width less a margin; without
     this it wraps at half the screen. */
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 13px 20px;
  /* A thin edge, so it still shows over a black photo. */
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 12px 32px #00000040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rfn-toast svg {
  flex-shrink: 0;
  color: #7ee2a8;
}
.rfn-toast.is-on {
  opacity: 1;
  animation: rfn-toast-in 0.22s ease;
}
@keyframes rfn-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* The app's own confirm, so nothing here shows the browser's chrome. */
.rfn-ask {
  /* Its own copy of the palette: this is appended to <body>, outside .rfn,
     so it can sit above everything — and without these the card renders
     with no background at all. */
  --red-deep: #bb0016;
  --ink: #1c1917;
  --paper: #fcf9f8;
  --cream: #fbe9e5;
  --stone: #78716c;
  --line: #e2d9d4;
  --white: #fff;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  font-family: var(--font-sans);
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #1c191799;
  backdrop-filter: blur(3px);
}
.rfn-ask-card {
  width: 100%;
  max-width: 340px;
  padding: 24px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 20px 60px #00000040;
}
.rfn-ask-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.rfn-ask-body {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--stone);
}
.rfn-ask-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.rfn-ask-no,
.rfn-ask-yes {
  flex: 1;
  padding: 11px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rfn-ask-no {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--stone);
}
.rfn-ask-yes {
  border: none;
  background: var(--red-deep);
  color: var(--white);
}
.rfn-ask-yes.is-danger {
  background: var(--red-deep);
}

/* Profile: their coupons, what they like, who they follow. */
.rfn-profile-card {
  max-height: 86vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rfn-profile-card::-webkit-scrollbar {
  width: 8px;
}
.rfn-profile-card::-webkit-scrollbar-track {
  background: transparent;
}
.rfn-profile-card::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
}
.rfn-profile-card::-webkit-scrollbar-thumb:hover {
  background: var(--stone);
  background-clip: content-box;
}
.rfn-prof-count {
  margin-left: 6px;
  font-weight: 800;
  color: var(--red-deep);
}
.rfn-prof-head {
  margin: 24px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.rfn-prof-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--stone);
}
.rfn-prof-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--stone);
}
.rfn-wallet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Capped, or a hundred coupons buries everything under it. Its own
     scroll rather than the card's, with the same thin bar. */
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rfn-wallet::-webkit-scrollbar {
  width: 8px;
}
.rfn-wallet::-webkit-scrollbar-track {
  background: transparent;
}
.rfn-wallet::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
}
.rfn-wallet::-webkit-scrollbar-thumb:hover {
  background: var(--stone);
  background-clip: content-box;
}
.rfn-wallet-item {
  flex-shrink: 0;
}
.rfn-wallet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--cream);
}
.rfn-wallet-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
}
.rfn-wallet-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rfn-wallet-meta {
  flex: 1;
  min-width: 0;
}
.rfn-wallet-big {
  font-size: 14px;
  font-weight: 800;
  color: var(--red-deep);
}
.rfn-wallet-where {
  font-size: 11.5px;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfn-wallet-star {
  margin-left: 2px;
  font-size: 11px;
  vertical-align: super;
  color: var(--stone);
}
.rfn-wallet-terms {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--stone);
}
/* Already used. Kept in the wallet as a record, but plainly spent. */
.rfn-wallet-item.is-used {
  background: var(--paper);
  border: 1px solid var(--line);
}
.rfn-wallet-item.is-used .rfn-wallet-big {
  color: var(--stone);
  text-decoration: line-through;
}
.rfn-wallet-item.is-used .rfn-wallet-code {
  color: var(--stone);
  text-decoration: line-through;
}
/* Ran out rather than spent — a different kind of gone. */
.rfn-wallet-gone {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--stone);
}
.rfn-wallet-used {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #15803d;
}

.rfn-wallet-code {
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
}
/* The same words the shops choose from, so a pick here matches a shop. */
.rfn-int-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.rfn-int-row + .rfn-int-row {
  margin-top: 8px;
}
.rfn-int {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-int.is-on {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}
/* Following: just their marks, in a row. Tap to open; unfollowing is the
   button on their posts, so there's nothing to remove from here. */
.rfn-follow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Four rows of logos, then it scrolls — same reason as the wallet. */
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rfn-follow-strip::-webkit-scrollbar {
  width: 8px;
}
.rfn-follow-strip::-webkit-scrollbar-track {
  background: transparent;
}
.rfn-follow-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
}
.rfn-follow-strip::-webkit-scrollbar-thumb:hover {
  background: var(--stone);
  background-clip: content-box;
}
.rfn-follow-dot {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
/* The clip lives on the image, not the button — overflow: hidden here
   would cut off the tooltip as well as the logo's corners. */
.rfn-follow-dot img,
.rfn-follow-dot .rfn-follow-initial {
  border-radius: 50%;
  overflow: hidden;
}
.rfn-follow-dot:hover {
  border-color: var(--red-deep);
}
.rfn-follow-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rfn-follow-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 17px;
  font-weight: 800;
}

/* The row opens the shop; the x removes it. */
.rfn-follow-go {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.rfn-follow-go:hover .rfn-wallet-big {
  text-decoration: underline;
}
.rfn-wallet-meta.rfn-follow-go {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.rfn-wallet-big,
.rfn-wallet-where {
  display: block;
}

/* Remove from a list — a saved post, a followed shop. */
.rfn-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
  font-size: 16px;
  line-height: 1;
  color: var(--stone);
  cursor: pointer;
}
.rfn-x:hover {
  background: var(--white);
  color: var(--red-deep);
}
.rfn-prof-msg {
  min-height: 18px;
  margin: 2px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
}
.rfn-prof-msg.is-ok {
  color: #15803d;
}
.rfn-prof-msg.is-bad {
  color: var(--red-deep);
}
/* Last thing in the profile, and it looks like it. */
.rfn-danger {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-danger:hover {
  color: var(--red-deep);
  text-decoration: underline;
}

.rfn-signout {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-signout:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}
.rfn-inline-go {
  width: auto;
  margin-top: 14px;
  padding: 10px 22px;
}

.rfn-search {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Gives way first when the row runs short, rather than pushing the count
     and the view switch off the edge. */
  flex: 0 1 220px;
  min-width: 120px;
  padding: 0 12px;
  height: 36px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px #bb001612;
  color: var(--stone);
}
.rfn-search:focus-within {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 12%);
}
.rfn-search svg {
  flex-shrink: 0;
}
.rfn-search input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.rfn-search input::placeholder {
  color: var(--stone);
  font-weight: 600;
}
/* Chrome adds its own clear control on type=search. */
.rfn-search input::-webkit-search-cancel-button {
  display: none;
}
.rfn-search-clear {
  display: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--stone);
  cursor: pointer;
}
.rfn-search-clear.is-on {
  display: block;
}
.rfn-search-clear:hover {
  color: var(--red-deep);
}

.rfn-viewswitch {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px #bb001612;
}
.rfn-viewbtn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-viewbtn.is-active {
  background: var(--red-deep);
  color: var(--white);
}

/* The whole-feed view, over the map. */
.rfn-feedview {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow-y: auto;
  /* The top is set from the header's measured height — it changes with the
     breakpoint and with the length of a shop name, so a fixed number here
     is a guess that eventually goes wrong. */
  padding: 88px 20px 32px;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
  display: none;
}
.rfn-feedview.is-open {
  display: block;
}
.rfn-feedview .rfn-feed {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 0;
}

/* Which shop a post came from, on the main feed only. */
.rfn-post-store {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.rfn-post-store:hover .rfn-post-store-name {
  color: var(--red-deep);
}
.rfn-post-store-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}
.rfn-post-store-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rfn-post-store-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rfn-post-store-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
/* How far, ahead of the address — the reason the app is called Geo. */
.rfn-far {
  font-weight: 800;
  color: var(--red-deep);
}
.rfn-post-store-where {
  font-size: 11.5px;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rfn-post-title {
  margin: 2px 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.rfn-by-avatars {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 38px;
}
.rfn-by-logo,
.rfn-by-face {
  position: absolute;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
}
.rfn-by-logo {
  left: -30px;
  top: -15px;
  z-index: 2;
  width: 75px;
  height: 75px;
  border: 1px solid var(--line);
}
.rfn-by-face {
  left: 12px;
  width: 38px;
  height: 38px;
  border: 2px solid var(--white);
  box-shadow: 0 1px 5px #00000026;
  z-index: 3;
}
.rfn-by-logo img,
.rfn-by-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rfn-by-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 16px;
  font-weight: 800;
}
/* The shop is context, not the headline. */
.rfn-post-at {
  font-weight: 700;
  color: var(--stone);
}
.rfn-link {
  color: var(--red-deep);
  font-weight: 700;
  text-decoration: underline;
}

/* Inert until shopper accounts exist. */
.rfn-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rfn-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-act:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}
.rfn-act.is-on {
  background: var(--cream);
  border-color: var(--red-deep);
  color: var(--red-deep);
}
.rfn-act.is-on svg {
  fill: currentColor;
}

.rfn-count {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px #bb001612;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: auto;
}

/* ── Store sheet ──────────────────────────────────────────────────────── */

.rfn-sheet {
  position: absolute;
  z-index: 4;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px #00000024;
}
/* Phone: a sheet that rises from the bottom. */
@media (max-width: 767px) {
  .rfn-sheet {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    transform: translateY(102%);
    /* Opaque and clipped: the map showing through the sheet as it scrolls
       reads as a rendering fault rather than a layer. */
    background: var(--white);
    overflow: hidden;
  }
  .rfn-sheet.is-open {
    transform: translateY(0);
  }
}
/* Desktop: a panel down the side, so the map stays usable beside it. */
@media (min-width: 768px) {
  .rfn-sheet {
    top: 0;
    bottom: 0;
    right: 0;
    width: 475px;
    max-width: 40vw;
    transform: translateX(102%);
    box-shadow: -8px 0 40px #00000018;
    /* Above the header, or the header's controls sit over the panel's
       close button and swallow the click. */
    z-index: 6;
  }
  /* And the header's controls step aside so they aren't over the panel. */
  .rfn.is-sheet-open .rfn-head-right {
    margin-right: min(475px, 40vw);
  }
  .rfn-sheet.is-open {
    transform: translateX(0);
  }
}

.rfn-sheet-grip {
  align-self: center;
  width: 42px;
  height: 4px;
  margin: 10px 0 2px;
  border-radius: 999px;
  background: var(--line);
}
@media (min-width: 768px) {
  .rfn-sheet-grip {
    display: none;
  }
}
/* Full height on a phone, so there is no sheet to drag. */
@media (max-width: 767px) {
  .rfn-sheet-grip {
    display: none;
  }
  .rfn-sheet-body {
    padding-top: 56px;
  }
}
.rfn-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rfn-sheet-body {
  position: relative;
  overflow-y: auto;
  padding: 18px 20px 28px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
/* The panel now sits above the header and the header's controls step aside
   for it, so its content no longer has to clear anything. */
@media (min-width: 768px) {
  .rfn-sheet-body {
    padding-top: 22px;
  }
}

/* ── Store header ─────────────────────────────────────────────────────── */

/* Everything about the shop in one box: who and where, then Follow and
   alerts, then call and the way there, then what they sell. */
.rfn-store-head {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 6px 22px #bb00160d;
}
.rfn-shop-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 44px;
}
.rfn-store-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}
.rfn-store-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No logo: the shop's first letter. */
.rfn-shop-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--red-deep);
  color: var(--white);
  font-size: 26px;
  font-weight: 800;
}
.rfn-store-meta {
  min-width: 0;
}
.rfn-shop-row {
  display: flex;
  gap: 10px;
}
.rfn-shop-row > * {
  flex: 1 1 0;
  min-width: 0;
}
.rfn-shop-row > [hidden] {
  display: none;
}
/* All four buttons: the same size, side by side. */
.rfn-store-head .rfn-shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--red-deep);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.rfn-store-head .rfn-shop-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfn-store-head .rfn-shop-btn svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}
.rfn-store-head .rfn-shop-follow svg {
  fill: none;
}
/* Call and the way there: smaller pills under Follow and alerts. */
.rfn-store-head .rfn-store-contact {
  justify-content: flex-start;
  gap: 8px;
}
.rfn-store-head .rfn-store-contact > * {
  flex: 0 0 auto;
}
.rfn-store-head .rfn-store-contact .rfn-shop-btn {
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-width: 1px;
  font-size: 14px;
}
.rfn-store-head .rfn-store-contact .rfn-shop-btn svg {
  width: 15px;
  height: 15px;
}
/* Longer names step down a size so they don't run to four lines. */
.rfn-store-head .rfn-store-name.is-long {
  font-size: 22px;
}
.rfn-store-head .rfn-store-name.is-longer {
  font-size: 20px;
}
.rfn-store-head .rfn-shop-follow {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}
.rfn-store-head .rfn-shop-follow.is-on {
  background: var(--white);
  border-color: #f0c9c2;
  color: var(--red-deep);
}
.rfn-store-head .rfn-alert-btn {
  background: var(--cream);
  border-color: var(--cream);
}
.rfn-store-head .rfn-alert-btn.is-on {
  background: var(--white);
  border-color: #f0c9c2;
}
.rfn-store-head .rfn-alert-btn .rfn-alert-tick {
  width: 15px;
  height: 15px;
}
.rfn-store-head .rfn-store-route svg.rfn-store-route-icon {
  width: 15px;
  height: 15px;
}
.rfn-store-head .rfn-store-phone:hover span,
.rfn-store-head .rfn-store-route:hover .rfn-way-label {
  text-decoration: none;
}
.rfn-store-head .rfn-shop-btn:hover {
  border-color: var(--red-deep);
}
.rfn-store-head .rfn-store-tags {
  margin-top: 0;
}
.rfn-store-head .rfn-store-address {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.35;
}
.rfn-store-head .rfn-store-hours {
  margin-top: 6px;
}
.rfn-store-head .rfn-addr-line {
  display: block;
}
.rfn-store-head .rfn-hours-now {
  font-size: 14px;
}
/* The week, in the box: room for bigger type. */
/* Opened, it takes the box's full width: back past the logo, out under the close. */
.rfn-store-head .rfn-hours-week {
  margin: 10px -44px 0 -78px;
  padding: 10px 16px;
  border-radius: 12px;
}
.rfn-store-head .rfn-hours-row {
  padding: 5px 0;
  font-size: 15px;
}
.rfn-store-head .rfn-hours-row span:last-child {
  white-space: nowrap;
}
.rfn-store-head .rfn-hours-now.is-open::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 1px;
  border-radius: 50%;
  background: #1f9d57;
}

/* Phones: logo and name share the top line; the address and hours get the
   box's full width underneath. */
@media (max-width: 767px) {
  .rfn-shop-top {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 6px 12px;
    padding-right: 0;
  }
  .rfn-store-meta {
    display: contents;
  }
  .rfn-store-logo {
    width: 52px;
    height: 52px;
  }
  .rfn-store-head .rfn-store-name {
    padding-right: 44px;
    font-size: 21px;
  }
  .rfn-store-head .rfn-store-name.is-long {
    font-size: 20px;
  }
  .rfn-store-head .rfn-store-name.is-longer {
    font-size: 18px;
  }
  .rfn-store-head .rfn-store-address,
  .rfn-store-head .rfn-store-hours {
    grid-column: 1 / -1;
  }
  .rfn-store-head .rfn-store-address {
    margin-top: 4px;
    text-wrap: balance;
  }
  .rfn-store-head .rfn-store-hours {
    margin-top: 0;
  }
  .rfn-store-head .rfn-hours-week {
    margin: 10px 0 0;
  }
  .rfn-store-head .rfn-shop-btn {
    gap: 6px;
    padding: 0 8px;
  }
}

/* Close (and Back) on the box and on the pinned bar. */
.rfn-pin-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--red-deep);
  cursor: pointer;
}
.rfn-pin-x {
  border-color: var(--cream);
  background: var(--cream);
}
.rfn-shop-x {
  position: absolute;
  top: 14px;
  right: 14px;
}
/* A shop's box carries its own close, so the panel's is put away. */
.rfn-sheet.is-shop #rfn-sheet-close {
  display: none;
}
@media (max-width: 767px) {
  .rfn-sheet.is-shop .rfn-sheet-body {
    padding-top: 18px;
  }
}

/* The bar pinned to the top of the shop once its box scrolls away. */
/* Sticks at the panel's top edge: up by the panel's own top padding. */
.rfn-shop-pin {
  position: sticky;
  top: -18px;
  z-index: 6;
  height: 0;
  margin: 0 -20px;
}
.rfn-shop-pin-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /* The same glass as the main header. */
  background: rgb(252 249 248 / 42%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid rgb(255 255 255 / 55%);
  box-shadow: 0 1px 24px rgb(28 25 23 / 8%);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
}
@media (min-width: 768px) {
  .rfn-shop-pin {
    top: -22px;
  }
}
.rfn-shop-pin.is-pinned .rfn-shop-pin-bar {
  transform: none;
  visibility: visible;
}
.rfn-shop-pin-bar .rfn-pin-logo {
  width: 34px;
  height: 34px;
}
.rfn-shop-pin-bar .rfn-pin-logo .rfn-shop-initial {
  font-size: 15px;
}
.rfn-pin-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.rfn-shop-pin-bar .rfn-pin-call,
.rfn-shop-pin-bar .rfn-pin-way {
  text-decoration: none;
}
.rfn-shop-pin-bar .rfn-pin-way[hidden] {
  display: none;
}
.rfn-shop-pin-bar .rfn-pin-way svg {
  width: 18px;
  height: 18px;
  color: #f9a316;
}
.rfn-shop-pin-bar .rfn-pin-way.is-on {
  border-color: #f9a316;
  background: #fff6e6;
}
.rfn-store-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}
.rfn-store-address {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--stone);
  text-decoration: none;
}
.rfn-store-address svg {
  flex-shrink: 0;
  color: var(--red-deep);
  opacity: 0.85;
}

/* Inside a card the ::after tooltip is clipped by .rfn-post's overflow, so
   cards use the floating .rfn-hovertip instead. */
.rfn-post [data-tooltip]:hover::after {
  display: none;
}

/* The like button carries a number, so it stays tight when empty and grows
   only once someone has liked it. */
.rfn-act-like {
  gap: 5px;
}
.rfn-like-count {
  font-variant-numeric: tabular-nums;
}
.rfn-like-count:empty {
  display: none;
}

/* Open or closed now, with the week underneath. */
.rfn-store-hours {
  margin-top: 8px;
}
.rfn-hours-now {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-hours-now.is-open {
  color: #0f8a5f;
}
.rfn-hours-now svg {
  transition: transform 0.16s ease;
}
.rfn-store-hours.is-open-week .rfn-hours-now svg {
  transform: rotate(180deg);
}
.rfn-hours-week {
  display: none;
  margin-top: 7px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.rfn-store-hours.is-open-week .rfn-hours-week {
  display: block;
}
.rfn-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
}
.rfn-hours-row span:last-child {
  color: var(--ink, #1c1917);
  font-variant-numeric: tabular-nums;
}

.rfn-store-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.rfn-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Post feed ────────────────────────────────────────────────────────── */

.rfn-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
}
.rfn-post {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.rfn-post.is-target {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 14%);
}
.rfn-post-image {
  aspect-ratio: 4 / 5;
  background: var(--paper);
}

/* Several images. Scroll-snap carries the swipe natively, so touch needs no
   JS and keeps the platform's own momentum. */
.rfn-carousel {
  position: relative;
  background: var(--paper);
}
.rfn-carousel:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: -2px;
}
.rfn-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.rfn-carousel-track::-webkit-scrollbar {
  display: none;
}
.rfn-carousel-slide {
  flex: 0 0 100%;
  /* Centring a full-width slide in a fractional-width track lands on a half
     pixel and the neighbour shows along the edge. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 4 / 5;
}
.rfn-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.rfn-carousel-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ffffffe8;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px #00000026;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rfn-carousel:hover .rfn-carousel-nav,
.rfn-carousel:focus-within .rfn-carousel-nav {
  opacity: 1;
}
.rfn-carousel-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
}
.rfn-prev {
  left: 8px;
}
.rfn-next {
  right: 8px;
}
/* Always visible on touch, where there is no hover to reveal them. */
@media (hover: none) {
  .rfn-carousel-nav {
    display: none;
  }
}
.rfn-carousel-dots {
  position: absolute;
  /* Above a video's own layers, which sit at 1 and 2. */
  z-index: 3;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.rfn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffffb3;
  box-shadow: 0 1px 3px #0000004d;
  cursor: pointer;
  transition: width 0.15s ease, background 0.15s ease;
}
.rfn-dot.is-on {
  width: 18px;
  border-radius: 999px;
  background: var(--white);
}
.rfn-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Product shots put the subject at the top, so crop from the bottom. */
  object-position: center top;
  display: block;
}
.rfn-post-body {
  padding: 14px 16px 16px;
}
.rfn-post-brand {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 5px;
}
.rfn-post-caption-wrap {
  position: relative;
}
.rfn-post-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  /* Four lines until they ask for the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rfn-post-caption-wrap.is-open .rfn-post-caption {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.rfn-more {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
}
.rfn-more:hover {
  text-decoration: underline;
}
.rfn-post-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.rfn-price-now {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 0.8;
  color: var(--red-deep);
}
.rfn-price-was {
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
  text-decoration: line-through;
}

/* Two tones of Nearby's own palette: a red arc sweeping over a cream ring.
   The mask cuts the disc down to a ring. */
.rfn-spin2 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--cream) 0deg,
    var(--cream) 40deg,
    var(--red-deep) 300deg,
    var(--cream) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
  animation: rfn-spin 0.85s linear infinite;
}
/* No mask support: a two-tone border still reads as a spinner. */
@supports not (mask: radial-gradient(#000, #000)) {
  .rfn-spin2 {
    background: none;
    border: 4px solid var(--cream);
    border-top-color: var(--red-deep);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfn-spin2 {
    animation-duration: 2.4s;
  }
}

.rfn-spin-wrap {
  display: flex;
  justify-content: center;
  padding: 48px 0;
  color: var(--red-deep);
}

@keyframes rfn-spin {
  to {
    transform: rotate(360deg);
  }
}


/* Photos still downloading fade in over the held space. */
.rfn-post img.rfn-img-wait {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.rfn-post img.rfn-img-wait.is-in {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .rfn-post img.rfn-img-wait {
    transition: none;
  }
}

/* A held space while an image decodes, so cards don't jump as they load. */
.rfn-post-image,
.rfn-carousel-slide {
  background: var(--cream);
}
.rfn-post-image img,
.rfn-carousel-slide img,
.rfn-post-store-logo img,
.rfn-by-face img,
.rfn-by-logo img {
  background: var(--paper);
}

/* Phone: the title and the controls don't fit on one line, so the brand
   takes the first row and the count with the switch takes the second. */
/* Phone: three rows, each doing one job, rather than everything wrapping
   into whatever space is left. Title and account, then search, then the
   view switch across the full width. */
@media (max-width: 560px) {
  .rfn-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 12px;
    /* Glass, not a tinted panel: the tint has to stay thin enough to see
       the map moving through it, and the blur heavy enough that it reads
       as frosted rather than blurry. Saturation lifts the colour the blur
       washes out — without it, glass over a map looks grey. */
    background: rgb(252 249 248 / 42%);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgb(255 255 255 / 55%);
    box-shadow: 0 1px 24px rgb(28 25 23 / 8%);
  }
  .rfn-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .rfn-head-right {
    display: contents;
  }
  .rfn-account {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    height: 32px;
    padding: 0 14px;
  }
  .rfn-search {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 38px;
    flex: none;
  }
  .rfn-search input {
    width: 100%;
    font-size: 16px; /* Under 16px, iOS zooms the page on focus. */
  }
  .rfn-viewswitch {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* On glass, a solid white pill reads as a second surface. These sit in
     it rather than on it. */
  .rfn-search,
  .rfn-viewswitch,
  .rfn-account {
    background: rgb(255 255 255 / 55%);
    border-color: rgb(255 255 255 / 70%);
    box-shadow: none;
  }
  .rfn-account.is-in {
    background: var(--red-deep);
    border-color: var(--red-deep);
  }
  .rfn-viewbtn {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
  }
  /* The pin count is what the map already shows — the space is better
     spent on the controls. */
  .rfn-count {
    display: none;
  }
  .rfn-brand-mark {
    font-size: 34px;
  }
}

/* Coupon. The foil sits over the reward until it's scratched off. */
.rfn-coupon {
  position: relative;
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  /* Deep, so what's underneath reads as a different surface from the pale
     foil over it rather than more of the same. */
  background: linear-gradient(150deg, #2a1013 0%, var(--red-deep) 55%, #8e0011 100%);
  color: var(--white);
  user-select: none;
  -webkit-user-select: none;
}
.rfn-coupon-inner {
  padding: 22px 16px 20px;
  text-align: center;
}
.rfn-coupon-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffffa6;
}
/* The reward and its icon on one line, sized as one thing. */
.rfn-coupon-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.82;
  color: var(--white);
}
.rfn-coupon-icon {
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  opacity: 0.9;
}
.rfn-coupon-small {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffffd1;
}
.rfn-coupon-code {
  display: block;
  width: fit-content;
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 16px;
  border-radius: 10px;
  background: #ffffff1f;
  border: 1px dashed #ffffff5c;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--white);
}
/* Says what Save is for, on a card whose coupon isn't kept yet. */
/* Spent. The card stays open — the code is still their receipt — but it
   stops looking like something to take to a counter. */
.rfn-coupon.is-used {
  background: linear-gradient(150deg, #3a3634 0%, #57514e 55%, #46403d 100%);
}
.rfn-coupon.is-used .rfn-coupon-code {
  text-decoration: line-through;
  opacity: 0.7;
}
.rfn-coupon-used {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Its own line: the code is what they show, and the two side by side
     squeeze both. */
  margin: 12px auto 0;
  clear: both;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff1f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7ee2a8;
}

/* Revealed but not kept. The code is visibly there and not readable — they
   have had the moment, and one tap makes it theirs. Hiding it outright
   after a scratch would feel like a bait. */
.rfn-coupon-code.is-locked {
  filter: blur(6px);
  opacity: 0.85;
  user-select: none;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
/* It says what to do and does it — pressing this is the same as pressing
   Save below, so nobody has to find the button after reading about it. */
.rfn-coupon-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 20px;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  background: #ffffff2e;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* It carries .rfn-act so the delegated save handler picks it up, which
   also brings that class's red hover — wrong on a red card. */
.rfn-coupon .rfn-coupon-lock:hover,
.rfn-coupon .rfn-coupon-lock:focus,
.rfn-coupon .rfn-coupon-lock:hover span,
.rfn-coupon .rfn-coupon-lock:hover svg {
  background: #ffffff45;
  border-color: var(--white);
  color: #fff;
}
.rfn-coupon .rfn-coupon-lock:hover span,
.rfn-coupon .rfn-coupon-lock:hover svg {
  background: none;
  border: none;
}
.rfn-coupon-lock:active {
  transform: scale(0.97);
}
.rfn-coupon-lock svg {
  flex-shrink: 0;
}
.rfn-coupon-note {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff8f;
}
.rfn-coupon-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.5s ease;
}
/* The canvas holds the foil's colour and grain, but it's painted once —
   so the part that moves is here, a band of light drifting across as the
   card is tilted or scrolled past. Sits above the canvas and below the
   scratching, which is why it can't take pointer events. */
.rfn-coupon.has-foil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgb(255 214 245 / 45%) 36%,
    rgb(214 240 255 / 55%) 44%,
    rgb(255 255 255 / 65%) 50%,
    rgb(214 255 231 / 55%) 56%,
    rgb(255 236 199 / 45%) 64%,
    transparent 80%
  );
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  animation: rfn-foil-shift 5.5s ease-in-out infinite alternate;
}
/* Gone the moment they touch it, so it can't tint what they've cleared. */
.rfn-coupon::before {
  transition: opacity 0.4s ease;
}
.rfn-coupon:not(.has-foil)::before {
  opacity: 0;
}
@keyframes rfn-foil-shift {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfn-coupon.has-foil::before {
    animation: none;
    background-position: 50% 0;
  }
}
.rfn-coupon-foil:active {
  cursor: grabbing;
}
.rfn-coupon-foil.is-gone {
  opacity: 0;
  pointer-events: none;
}
/* Printed on the foil, the way a real panel is: small, condensed caps,
   widely tracked, pressed into the surface rather than sitting on it. */
.rfn-coupon-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #6c747f;
  text-shadow: 0 1px 0 #ffffffcc, 0 -1px 0 #00000014;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* The store panel is narrower than the main feed, so the tracked caps have
   to come down to fit at any width. */
.rfn-sheet .rfn-coupon-hint {
  font-size: 20px;
}
/* Same on a phone. Placed after the base rule rather than in the earlier
   560px block, where it sits above it and loses at equal specificity. */
@media (max-width: 560px) {
  .rfn-coupon-hint {
    font-size: 20px;
  }
}

/* The moment. The card takes a breath in, the reward lands after it, and
   a sweep of light runs across — the feeling comes from the motion rather
   than from a word telling them they won. */
.rfn-coupon.is-revealed {
  animation: rfn-pop 0.55s cubic-bezier(0.2, 1.6, 0.35, 1);
}
@keyframes rfn-pop {
  0% { transform: scale(0.965); }
  55% { transform: scale(1.028); }
  100% { transform: scale(1); }
}
.rfn-coupon.is-revealed .rfn-coupon-big {
  animation: rfn-land 0.5s 0.06s cubic-bezier(0.2, 1.5, 0.3, 1) backwards;
}
@keyframes rfn-land {
  from { transform: scale(0.7) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.rfn-coupon.is-revealed .rfn-coupon-icon {
  animation: rfn-spin-in 0.6s 0.1s cubic-bezier(0.2, 1.4, 0.3, 1) backwards;
}
@keyframes rfn-spin-in {
  from { transform: rotate(-160deg) scale(0.3); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}
.rfn-coupon.is-revealed .rfn-coupon-code {
  animation: rfn-rise 0.45s 0.2s ease backwards;
}
.rfn-coupon.is-revealed .rfn-coupon-small,
.rfn-coupon.is-revealed .rfn-coupon-note {
  animation: rfn-rise 0.45s 0.28s ease backwards;
}
@keyframes rfn-rise {
  from { transform: translateY(7px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* Light crossing the card once, as it opens. */
.rfn-coupon.is-revealed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 34%,
    #ffffff40 48%,
    #ffffff8c 52%,
    transparent 66%
  );
  transform: translateX(-120%);
  animation: rfn-sheen 0.95s 0.12s ease-out;
  pointer-events: none;
}
@keyframes rfn-sheen {
  to { transform: translateX(120%); }
}
/* The tooltip from app-switcher.css, which /geo/ doesn't load. Same rule,
   verbatim, so both products look identical. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px #00000040;
  pointer-events: none;
  z-index: 100000;
}
/* Inside a scrolling strip, a tooltip above the item is clipped by the
   box — the same exception app-switcher.css makes for lightbox controls. */
[data-tooltip].rf-tooltip-below:hover::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 6px;
}

/* ── The header ──────────────────────────────────────────────────────────
   Phone: the whole bar slides off while they read, back when they scroll up.
   Desktop feed: the controls slide out right and a mark brings them back.
   The title never moves, and nothing happens on hover — it opens and closes
   on a click and stays where it's put. */
.rfn-head {
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.rfn.head-away .rfn-head {
  transform: translateY(-104%);
}
/* A shop takes the whole phone screen, so the header starts out of the way.
   Scrolling up inside it removes is-sheet-open's effect via head-back. */
@media (max-width: 767px) {
  .rfn.is-sheet-open:not(.head-back) .rfn-head,
  .rfn.is-routing:not(.head-back) .rfn-head {
    transform: translateY(-104%);
  }
}

.rfn-head-toggle {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 4px 14px #bb001612;
  cursor: pointer;
  transition: opacity 0.18s ease, border-color 0.15s ease, color 0.15s ease;
}
.rfn-head-toggle:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}

@media (min-width: 561px) {
  .rfn-head-right {
    transition:
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.2s ease;
  }
  .rfn.head-folded .rfn-head-right {
    transform: translateX(calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
  }
  /* Open, the controls stop short of the mark rather than hiding it —
     the same button has to be there to close them again. */
  .rfn.head-folded.head-open .rfn-head-right {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    margin-right: 48px;
  }
  .rfn.head-folded.head-open .rfn-head-toggle {
    background: var(--red-deep);
    border-color: var(--red-deep);
    color: var(--white);
  }
}

/* The pin's own tooltip, matching [data-tooltip] above. */
.rfn-pin-tip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px #00000040;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.rfn-pin-tip.is-on {
  opacity: 1;
}

/* Confetti, thrown from the middle. Positioned against the viewport rather
   than inside the coupon, whose overflow would clip it at the corners. */
.rfn-coupon-fx {
  position: fixed;
  z-index: 9999998;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .rfn-coupon.is-revealed,
  .rfn-coupon.is-revealed *,
  .rfn-coupon.is-revealed::after {
    animation: none;
  }
}

/* Offers a re-rank after the shopper has moved; the feed never reorders
   on its own. Held just under the header while scrolling; the feed's own
   top padding already clears the header. */
.rfn-moved {
  display: none;
  position: sticky;
  top: 12px;
  z-index: 4;
  margin: 0 auto 12px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--red-deep);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.18);
  cursor: pointer;
}
.rfn-moved.is-on {
  display: block;
}

.rfn-retry {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--red-deep);
  text-decoration: underline;
  cursor: pointer;
}

.rfn-loading {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}

/* ── Video ───────────────────────────────────────────────────────────────
   A post's video sits where its images do — the first slide of the carousel
   when it has both, or on its own. The wrapper fills the slide so the sizing
   rules above still decide the card's shape. */
.rfn-post-video {
  position: relative;
  width: 100%;
  height: 100%;
  /* Holds the scaled fill inside the card. */
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
}
/* A video on its own is sized to its own shape inline; this is the fallback
   for one whose dimensions were never recorded. */
.rfn-post-solo-video {
  aspect-ratio: 4 / 5;
}
.rfn-video {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
/* Without a poster to fill with, it crops as before. */
.rfn-post-video:not(.has-fill) .rfn-video {
  object-fit: cover;
  object-position: center top;
  background: var(--paper);
}
/* Scaled well past the edges: a blur samples beyond its own bounds, so at
   this radius an unscaled layer thins out around the rim. */
.rfn-post-video.has-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rfn-fill);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.25) brightness(0.92);
  transform: scale(1.35);
  z-index: 0;
  pointer-events: none;
}
/* The controls belong in front of both. */
.rfn-video-bar,
.rfn-video-start,
.rfn-video-btn,
.rfn-video-seek,
.rfn-video-time {
  z-index: 2;
}

/* Controls sit over the foot of the video rather than below it, so the card
   is the same height whether or not a post has one. Out of the way until
   asked for: hover where there's a pointer, a tap where there isn't. */
.rfn-video-bar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #000000a6;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rfn-post-video:hover .rfn-video-bar {
    opacity: 1;
    pointer-events: auto;
  }
}
.rfn-post-video.is-controls .rfn-video-bar,
.rfn-post-video.is-full .rfn-video-bar,
.rfn-post-video.is-noautoplay .rfn-video-bar {
  opacity: 1;
  pointer-events: auto;
}
/* In a carousel the bar sits above the dots. Full screen has no dots. */
.rfn-carousel .rfn-video-bar {
  bottom: 26px;
}
.rfn-carousel .rfn-post-video.is-full .rfn-video-bar {
  bottom: 8px;
}
.rfn-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rfn-video-btn:hover {
  background: #ffffff2e;
}
.rfn-video-time {
  flex: none;
  min-width: 34px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The scrubber, styled by hand — a range input keeps none of its own look
   across browsers. */
.rfn-video-seek {
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  margin: 0 4px;
  padding: 0;
  border-radius: 999px;
  background: #ffffff3d;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rfn-video-seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rfn-video-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

/* Muted is the resting state — it has to be, or nothing could start on its
   own — so each control shows the state it will move to. */
.rfn-video-ico-on,
.rfn-video-ico-play,
.rfn-video-ico-shrink,
.rfn-video-ico-auto-off {
  display: none;
}
.rfn-post-video.is-unmuted .rfn-video-ico-off,
.rfn-post-video.is-paused .rfn-video-ico-pause,
.rfn-post-video.is-full .rfn-video-ico-expand,
.rfn-post-video.is-noautoplay .rfn-video-ico-auto-on {
  display: none;
}
.rfn-post-video.is-unmuted .rfn-video-ico-on,
.rfn-post-video.is-paused .rfn-video-ico-play,
.rfn-post-video.is-full .rfn-video-ico-shrink,
.rfn-post-video.is-noautoplay .rfn-video-ico-auto-off {
  display: block;
}

/* Full screen wants the whole frame, not a crop to the card's shape. */
.rfn-post-video:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.rfn-post-video:fullscreen .rfn-video {
  object-fit: contain;
}
.rfn-post-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.rfn-post-video:-webkit-full-screen .rfn-video {
  object-fit: contain;
}

@media (max-width: 560px) {
  .rfn-video-btn {
    width: 32px;
    height: 32px;
  }
}

/* ── Profile tabs ────────────────────────────────────────────────────────
   Four sections in one sheet is a long scroll on a phone, which is where
   most of this is read. */
.rfn-profile-card {
  max-width: 480px;
}
.rfn-tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0 14px;
  padding: 3px;
  border-radius: 999px;
  background: var(--cream);
}
.rfn-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--stone);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rfn-tab.is-on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px #0000001f;
}
.rfn-tab .rfn-prof-count {
  margin: 0;
}
.rfn-tabpane {
  display: none;
}
.rfn-tabpane.is-on {
  display: block;
  height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* Room for the scrollbar so rows don't sit under it. */
  padding-right: 4px;
  margin-right: -4px;
}
.rfn-tabpane.is-on.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
.rfn-tabpane.is-on::-webkit-scrollbar {
  width: 8px;
}
.rfn-tabpane.is-on::-webkit-scrollbar-track {
  background: transparent;
}
.rfn-tabpane.is-on::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
}
.rfn-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
}
/* The first heading in a pane has the tab row above it already. */
.rfn-tabpane > .rfn-prof-head:first-child {
  margin-top: 0;
}

/* ── Saved posts ─────────────────────────────────────────────────────────
   A save without a coupon: the thing itself, not a code to show in store. */
.rfn-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rfn-saved-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.rfn-saved-row:hover {
  border-color: var(--red-deep);
}
.rfn-saved-img {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  background: var(--cream);
}
.rfn-saved-meta {
  min-width: 0;
  flex: 1 1 auto;
}
.rfn-saved-brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stone);
}
.rfn-saved-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rfn-saved-shop {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--stone);
}
.rfn-saved-price {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
}
/* A long saving — "25–50% off" — drops to its own line whole rather than
   squeezing in beside the prices. */
.rfn-saved-price .rfn-price-off {
  flex-basis: auto;
}
.rfn-saved-price:has(.rfn-price-off) {
  row-gap: 8px;
}
.rfn-saved-row .rfn-x {
  flex: none;
  align-self: flex-start;
}

/* Account and What I like are short — spread to fill the pane rather than
   sitting in the top half of it. */
.rfn-tabpane[data-pane="account"].is-on,
.rfn-tabpane[data-pane="likes"].is-on,
.rfn-tabpane[data-pane="wallet"].is-on {
  display: flex;
  flex-direction: column;
}
/* The list scrolls; the footer below it does not. */
.rfn-tabpane[data-pane="wallet"].is-on {
  overflow: hidden;
  padding-right: 0;
  margin-right: 0;
}
.rfn-tabpane[data-pane="wallet"] .rfn-wallet {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rfn-tabpane[data-pane="wallet"] .rfn-wallet::-webkit-scrollbar {
  width: 8px;
}
.rfn-tabpane[data-pane="wallet"] .rfn-wallet::-webkit-scrollbar-track {
  background: transparent;
}
.rfn-tabpane[data-pane="wallet"] .rfn-wallet::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
}
.rfn-wallet-foot {
  flex: none;
}
.rfn-tabpane[data-pane="account"] .rfn-prof-msg:empty {
  display: none;
}
.rfn-tabpane[data-pane="likes"] .rfn-int-row:last-of-type {
  margin-bottom: auto;
}

/* Tooltip for anything inside a scrolling pane. Fixed and appended to the
   body, so no overflow ancestor can clip it. */
/* app-switcher.css styles every [data-tooltip]:hover::after, so the dot
   draws its own tooltip behind this one. */
.rfn-tip[data-tooltip]:hover::after {
  content: none;
}

.rfn-hovertip {
  position: fixed;
  z-index: 100000;
  display: none;
  padding: 4px 8px;
  border-radius: 6px;
  /* Hardcoded: this sits on the body, outside .rfn, so the custom
     properties do not reach it. */
  background: #1c1917;
  color: #fff;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  /* Light text on dark picks up colour fringing from subpixel rendering. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Wallet footer: what happens to ended offers, and a way to do it now. */
.rfn-wallet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--stone);
}
.rfn-wallet-clear {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
  white-space: nowrap;
}
.rfn-wallet-clear:hover {
  border-color: var(--red-deep);
}

/* My location — shows the way to the nearest shop, and hides it again. */
.rfn-here-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 10px 84px 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 6px #00000029;
  -webkit-tap-highlight-color: transparent;
}
.rfn-here-btn:hover {
  color: var(--red-deep);
}
#rfn-map.is-routing .rfn-here-btn {
  background: #f9a316;
  color: #fff;
}

/* Shown on a video that hasn't started, so a still frame reads as ready.
   Fades out the moment it plays. */
.rfn-video-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: #00000073;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.rfn-post-video.is-waiting .rfn-video-start,
.rfn-post-video.is-paused .rfn-video-start,
.rfn-post-video.is-noautoplay .rfn-video-start {
  opacity: 1;
  pointer-events: auto;
}
.rfn-video-start:hover {
  background: #0000008f;
}

/* In dark mode the page behind the app is dark too, so the area under the
   phone's home bar matches instead of showing white. */
html[data-theme="dark"]:has(.rfn),
html[data-theme="dark"] body:has(.rfn) {
  background: #1c1917;
}

/* Shown when most of a limited offer has been redeemed. */
.rfn-coupon-left {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 3px 9px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* When the offer runs out, on the card itself. */
.rfn-coupon-until {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffffb8;
}

/* What they save, worked out rather than left to them. Pushed to the end of
   the row so it lines up down the list. */
.rfn-price-off {
  margin-left: auto;
  color: var(--red-deep);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 0.5;
}

/* A group of shops on the map: up to three logos, fanned, with +N for the
   rest. Tapping it zooms in until they come apart. */
.rfn-fan {
  position: absolute;
  height: 46px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.rfn-fan-logo {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  transition: margin 0.15s ease;
}
.rfn-fan-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rfn-fan-logo.is-initial {
  background: var(--cream);
  font-size: 17px;
  font-weight: 800;
  color: var(--red-deep);
}
/* Opens a little on hover, so the ones behind show more. */
.rfn-fan:hover .rfn-fan-logo:nth-child(2) {
  margin-left: 6px;
}
.rfn-fan:hover .rfn-fan-logo:nth-child(3) {
  margin-left: 12px;
}
.rfn-fan-more {
  position: absolute;
  right: -10px;
  bottom: -4px;
  z-index: 5;
  padding: 2px 7px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--red-deep);
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--white);
}
/* A shop on its own: one round logo, the same as in a group. */
.rfn-pin {
  position: absolute;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.rfn-pin .rfn-fan-logo {
  left: 0;
}
.rfn-pin.is-bounce .rfn-fan-logo {
  animation: rfn-pin-bounce 0.75s ease;
}
@keyframes rfn-pin-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-14px);
  }
  55% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfn-pin.is-bounce .rfn-fan-logo {
    animation: none;
  }
}

/* ── Shop phone ──────────────────────────────────────────────────────────
   Its own line under the address, so opening the week's hours never moves
   it. On a post, a Call button beside the others, only when the shop chose
   to include it. */
.rfn-store-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-deep);
  text-decoration: none;
}
.rfn-store-phone svg {
  flex-shrink: 0;
}
.rfn-store-phone:hover span {
  text-decoration: underline;
}
/* Phone and the way to the shop share a line; the way drops under the
   phone when the panel is too narrow for both. */
.rfn-store-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 5px;
  margin-top: 5px;
}
.rfn-store-contact:not(:has(> :not([hidden]))) {
  display: none;
}
.rfn-store-head .rfn-store-contact {
  margin: 0;
  column-gap: 10px;
  flex-wrap: nowrap;
}
.rfn-store-contact .rfn-store-phone,
.rfn-store-contact .rfn-store-route {
  margin-top: 0;
}
.rfn-store-route[hidden] {
  display: none;
}
/* The same size and weight as the phone, with the route's amber icon. */
.rfn-store-route {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-deep);
  cursor: pointer;
}
.rfn-store-route svg.rfn-store-route-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: #f9a316;
}
.rfn-store-route:hover .rfn-way-label {
  text-decoration: underline;
}
/* On a post it sits in the distance line, after the distance. */
.rfn-post-way {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 800;
}
.rfn-post-way svg.rfn-store-route-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 3px;
  vertical-align: -2px;
}
.rfn-post-way[hidden],
.rfn-way-sep[hidden] {
  display: none;
}
.rfn-store-route.is-on {
  color: #c77a00;
}
.rfn-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--stone);
  text-decoration: none;
  cursor: pointer;
}
.rfn-call:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}

/* ── Advanced search ─────────────────────────────────────────────────────
   Studio's advanced search, to the pixel: the same sliders button, the
   same frosted panel and pills, the same chips in the search box. Studio's
   own colours are written out here, since this page doesn't load its
   stylesheet. */
.rfn-search-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rfn-search-scroll::-webkit-scrollbar {
  display: none;
}
.rfn-search-scroll input {
  flex: 1 1 90px;
  width: auto;
  min-width: 90px;
}
.rfn-chips {
  display: contents;
}
/* "+N" after the chips when some are cut off, and a fade on them at that
   edge, as in the Studio. */
.rfn-chips-more {
  flex-shrink: 0;
  height: 24px;
  min-width: 30px;
  padding: 0 8px;
  margin-left: 4px;
  border: 0;
  border-radius: 9999px;
  background: var(--red-deep);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
  cursor: pointer;
}
.rfn-chips-more[hidden] {
  display: none;
}
.rfn-search-scroll:has(+ .rfn-chips-more:not([hidden])) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
/* Room for the button as well as the placeholder, and more once chips
   are in it. */
.rfn-search {
  flex-basis: 260px;
}
.rfn-search.has-chips {
  flex-basis: 400px;
}

.rfn-adv-btn {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: -8px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: none;
  color: #5c3f3d;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rfn-adv-btn:hover {
  background: #f6f3f2;
  color: #1c1b1b;
}
.rfn-adv-btn.is-on {
  background: color-mix(in oklab, #bb0016 12%, transparent);
  color: #bb0016;
}
.rfn-adv-btn.is-on:hover {
  background: color-mix(in oklab, #bb0016 20%, transparent);
}

.rfn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 8px 4px 12px;
  border-radius: 9999px;
  background: color-mix(in oklab, #bb0016 10%, transparent);
  color: #bb0016;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rfn-chip > svg {
  flex-shrink: 0;
}
.rfn-chip-x {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 2px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
.rfn-chip-x:hover {
  opacity: 0.7;
}

.rfn-adv {
  position: absolute;
  z-index: 5;
  right: 20px;
  width: min(560px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 20px 32px;
  padding: 0 24px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  font-family: var(--font-sans);
  /* Closed by default, always mounted, so the transition has something to
     animate between. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rfn-adv.is-open {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 20px 24px;
  border-color: #e6bdb9;
  /* Studio's panel sits on the page; this one floats over the map, so it
     carries the header's own soft lift as well. */
  box-shadow:
    0 1px 2px rgb(0 0 0 / 5%),
    0 4px 14px #bb001612;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rfn-adv-field {
  min-width: 0;
}
.rfn-adv-field.is-wide {
  grid-column: 1 / -1;
}
.rfn-adv-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5c3f3d;
}
.rfn-pill-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rfn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid #e6bdb9;
  background: #f6f3f2;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #5c3f3d;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rfn-pill:hover {
  border-color: color-mix(in oklab, #bb0016 40%, transparent);
}
.rfn-pill.is-on {
  background: #bb0016;
  border-color: #bb0016;
  color: #fff;
}
.rfn-pill-n {
  font-weight: 800;
  opacity: 0.6;
}
.rfn-adv-empty {
  font-size: 12px;
  color: #5c3f3d;
}
/* Under the filters once any is picked: how many shops match, and Clear
   all, as in the Studio. */
.rfn-adv-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0dcd9;
  font-size: 13px;
  color: #5c3f3d;
}
.rfn-adv-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #bb0016;
  cursor: pointer;
}
.rfn-adv-clear:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .rfn-adv {
    left: 14px;
    right: 14px;
    width: auto;
    grid-template-columns: 1fr;
  }
  .rfn-adv.is-open {
    max-height: min(70vh, 760px);
  }
}

/* ── Live tracking ───────────────────────────────────────────────────────
   Its button sits above the route button, in the same white circle. On,
   it turns amber like the route button does while routing. */
.rfn-map-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 10px -2px 0;
}
.rfn-map-btns .rfn-here-btn {
  margin: 0;
}
/* Zoom in and out: one pill, the same width and look as the buttons above. */
.rfn-zoom {
  display: flex;
  flex-direction: column;
  width: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 6px #00000029;
}
.rfn-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rfn-zoom-btn + .rfn-zoom-btn {
  border-top: 1px solid var(--line);
}
.rfn-zoom-btn:hover {
  color: var(--red-deep);
}
.rfn-zoom-btn:disabled {
  color: var(--stone);
  opacity: 0.45;
  cursor: default;
}
.rfn-track-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 6px #00000029;
  -webkit-tap-highlight-color: transparent;
}
.rfn-track-btn:hover {
  color: var(--red-deep);
}
.rfn-track-btn.is-on,
.rfn-track-btn.is-on:hover {
  background: #f9a316;
  color: #fff;
}

/* The ring round the "you are here" dot. Still while tracking is off; a
   slow amber pulse while it's on. */
.rfn-here-ring {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid #f9a316;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}
.rfn-here-ring.is-live::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #f9a316;
  border-radius: 50%;
  animation: rfn-here-pulse 1.8s ease-out infinite;
}
@keyframes rfn-here-pulse {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfn-here-ring.is-live::after {
    animation: none;
    opacity: 0;
  }
  .rfn-here-ring.is-live {
    box-shadow: 0 0 0 4px rgb(249 163 22 / 30%);
  }
}

/* The shop count doubles as the search button, the same as Enter. */
button.rfn-count {
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
button.rfn-count:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}

/* The header's show / hide button: lines to open, a cross to close. */
.rfn-head-toggle .rfn-head-ico-close,
.rfn.head-open .rfn-head-toggle .rfn-head-ico-open {
  display: none;
}
.rfn.head-open .rfn-head-toggle .rfn-head-ico-close {
  display: block;
}

/* With the shop panel open on desktop, the map ends at the panel's edge,
   so its controls sit beside the panel instead of under it. */
@media (min-width: 768px) {
  .rfn.is-sheet-open #rfn-map {
    right: min(475px, 40vw);
  }
}

/* ── The mixed feed in the shop panel ────────────────────────────────── */
.rfn-mix-head {
  padding: 4px 44px 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 0.8;
  color: var(--ink);
}
.rfn-mix-end {
  margin: 22px 0 6px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: var(--cream);
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 0.85;
  color: var(--red-deep);
}
.rfn-mix-end-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.rfn-mix-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rfn-mix-back:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
}

/* How the route travels, in the route's own amber rather than the tick's
   green. */
.rfn-toast svg.rfn-toast-travel {
  color: #f9a316;
}

/* ── Perks: QR codes and the Saved list ────────────────────────────────── */

/* The perk's QR code on the post's card, white so any scanner reads it. */
.rfn-coupon-qr {
  width: 152px;
  margin: 14px auto 0;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.rfn-coupon-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.rfn-coupon-qr + .rfn-coupon-code {
  margin-top: 10px;
}
.rfn-coupon-qr.is-locked {
  filter: blur(7px);
  opacity: 0.75;
  user-select: none;
}
.rfn-coupon-lock.is-saving {
  opacity: 0.8;
  pointer-events: none;
}

/* All | Perks only, over the Saved list. */
.rfn-saved-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 10px;
}
.rfn-saved-filter > span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}
.rfn-seg {
  display: flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper, #fcf9f8);
}
.rfn-seg-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--stone);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.rfn-seg-btn.is-on {
  background: var(--red-deep);
  color: #fff;
}

/* A saved item: the post, with its perk underneath. */
.rfn-saved-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.rfn-saved-card .rfn-saved-row {
  border: none;
  border-radius: 0;
  background: none;
}
.rfn-saved-card:hover {
  border-color: var(--red-deep);
}
.rfn-saved-card .rfn-saved-row:hover {
  border-color: transparent;
}
.rfn-saved-logo {
  object-fit: contain;
  padding: 6px;
}

.rfn-perk-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 8px;
  padding: 9px 10px 9px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #a50016 0%, #c8001c 100%);
  color: #fff;
}
.rfn-perk-icon {
  display: inline-flex;
  flex: none;
}
.rfn-perk-icon svg {
  width: 18px;
  height: 18px;
}
.rfn-perk-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.rfn-perk-big {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}
.rfn-perk-small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.88;
  line-height: 1.3;
}
.rfn-perk-show {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 7px 11px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--red-deep);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.rfn-perk-strip.is-used,
.rfn-perk-strip.is-ended {
  background: #f3eeec;
  color: var(--stone);
}
.rfn-perk-strip.is-used .rfn-perk-big,
.rfn-perk-strip.is-ended .rfn-perk-big {
  text-decoration: line-through;
}
.rfn-perk-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rfn-perk-state.is-used {
  color: #15803d;
}

/* Turned over: the QR code for the till. */
.rfn-perk-back {
  display: none;
  margin: 0 8px 8px;
  padding: 14px;
  border: 2px dashed #e7c9c2;
  border-radius: 14px;
  background: #fffaf9;
  text-align: center;
}
.rfn-saved-card.is-flipped .rfn-perk-strip {
  display: none;
}
.rfn-saved-card.is-flipped .rfn-perk-back {
  display: block;
}
.rfn-perk-back-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.rfn-perk-back-when {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--stone);
}
.rfn-perk-back-qr {
  width: 168px;
  margin: 10px auto 8px;
}
.rfn-perk-back-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.rfn-perk-back-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.rfn-perk-back-hint {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
}
/* Flip back sits at the top, where it's found before the card's remove ×. */
.rfn-perk-back-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.rfn-perk-flip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--red-deep);
  border-radius: 999px;
  background: var(--white);
  color: var(--red-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rfn-perk-flip:hover {
  background: var(--red-deep);
  color: var(--white);
}
.rfn-perk-small {
  text-wrap: pretty;
}

/* Account: the name in its own box at the top, everything else as a list
   of rows at the foot. */
.rfn-acct-name {
  padding: 16px;
  border-radius: 18px;
  background: var(--cream);
}
.rfn-acct-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rfn-acct-name-row {
  display: flex;
  gap: 8px;
}
.rfn-acct-name-row .rfn-auth-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: var(--white);
}
.rfn-acct-save {
  flex: none;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: var(--red-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
  cursor: pointer;
}
.rfn-acct-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.rfn-acct-name .rfn-prof-msg {
  margin: 10px 0 0;
  min-height: 0;
}
.rfn-acct-list {
  flex: none;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
}
/* Keeps a gap above the account list when the pane is full. */
.rfn-acct-name {
  margin-bottom: 14px;
}
/* Light dark mode: the first row of the account list, named beside a
   half-light, half-dark circle. */
.rfn-theme-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.rfn-theme-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.rfn-theme-seg .rfn-seg-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13.5px;
}
.rfn-acct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.rfn-acct-row:first-child {
  border-top: none;
}
.rfn-acct-row span:not(.rfn-acct-ico) {
  flex: 1;
}
.rfn-acct-ico {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--cream);
  color: var(--red-deep);
}
.rfn-acct-chev {
  flex: none;
  color: var(--stone);
}
.rfn-acct-row:hover {
  background: var(--paper);
}
.rfn-acct-row.is-danger {
  color: var(--red-deep);
}

/* A perk back in the feed: its code waits behind Show code. */
.rfn-coupon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px auto 0;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--red-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.rfn-coupon-toggle[hidden],
.rfn-coupon-codewrap[hidden] {
  display: none;
}
.rfn-coupon-codewrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The perk's code as a barcode, for a scanner that can't read QR codes. */
.rfn-code-bar {
  display: flex;
  align-items: center;
  width: min(250px, 100%);
  margin: 14px auto 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
}
.rfn-code-bar svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 76px;
}
.rfn-code-bar[hidden],
.rfn-coupon-qr[hidden],
.rfn-perk-back-qr[hidden] {
  display: none;
}
.rfn-perk-back .rfn-code-bar {
  margin: 10px auto 8px;
  border: 1px solid var(--line);
}
.rfn-codeview-btn {
  display: block;
  margin: 8px auto 0;
  padding: 4px 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #ffffffd9;
  cursor: pointer;
}
.rfn-perk-back .rfn-codeview-btn {
  color: var(--red-deep);
}

/* ── Alerts ──────────────────────────────────────────────────────────────
   Get alerts on a shop's page, under its phone and the way there, and the
   Alerts tab in the profile: one main switch, the kinds of alert, then the
   shops. */
.rfn-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red-deep), var(--red-bright));
  box-shadow: 0 2px 8px #bb001630;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rfn-alert-btn.is-on {
  background: var(--white);
  border-color: var(--red-deep);
  box-shadow: none;
  color: var(--red-deep);
}
.rfn-alert-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.rfn-alert-btn svg {
  flex-shrink: 0;
}
.rfn-alert-tick {
  color: #15803d;
}
.rfn-nt {
  width: 100%;
  border-collapse: collapse;
}
.rfn-nt th {
  width: 64px;
  padding: 2px 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--stone);
}
.rfn-nt th:first-child {
  width: auto;
}
.rfn-nt td {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.rfn-nt .rfn-nt-all td {
  border-top: 0;
}
.rfn-nt td.rfn-nt-c {
  text-align: center;
}
.rfn-nt .rfn-n-sw {
  vertical-align: middle;
}
.rfn-n-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rfn-nt-all .rfn-n-name {
  font-size: 15px;
  font-weight: 800;
}
.rfn-n-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stone);
}
.rfn-n-shop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.rfn-n-shop:last-child {
  border-bottom: 0;
}
.rfn-n-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--red-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.rfn-n-logo.has-img {
  background: transparent;
}
.rfn-n-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rfn-n-shopname {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rfn-n-sw {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.18s ease;
}
.rfn-n-sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.18s ease;
}
.rfn-n-sw:checked {
  background: var(--red-deep);
}
.rfn-n-sw:checked::after {
  transform: translateX(18px);
}
.rfn-n-sw:disabled {
  opacity: 0.45;
  cursor: default;
}
.rfn-n-sw.is-sm {
  width: 32px;
  height: 18px;
}
.rfn-n-sw.is-sm::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}
.rfn-n-sw.is-sm:checked::after {
  transform: translateX(14px);
}
@media (prefers-reduced-motion: reduce) {
  .rfn-n-sw,
  .rfn-n-sw::after {
    transition: none;
  }
}

/* ── In the Nearby app ───────────────────────────────────────────────────
   Fingerprint or face sign-in, and near-a-shop alerts. */
.rfn-auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}
.rfn-auth-or::before,
.rfn-auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rfn-auth-pk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
}
.rfn-auth-pk:disabled {
  opacity: 0.6;
  cursor: default;
}
.rfn-auth-pk svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.rfn-bio-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--red-deep);
}
.rfn-bio-row > svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.rfn-bio-text {
  min-width: 0;
}
.rfn-bio-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.rfn-bio-line {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--stone);
}
.rfn-bio-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  color: var(--red-deep);
  text-decoration: underline;
  cursor: pointer;
}
.rfn-bio-btn:disabled {
  opacity: 0.6;
}
.rfn-n-none {
  font-weight: 800;
  color: #c9bdb8;
}
.rfn-near-info {
  display: grid;
  gap: 14px;
  padding-top: 10px;
}
.rfn-near-info .rfn-auth-title {
  margin: 0;
}
.rfn-near-info p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.rfn-near-info .rfn-near-next {
  color: var(--stone);
}
.rfn-near-info .rfn-near-next b {
  color: var(--ink);
  white-space: nowrap;
}
.rfn-near-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red-deep);
}
.rfn-near-info .rfn-auth-go {
  margin-top: 6px;
}

/* ── In the app: the page runs up under the phone's clock ────────────────
   --rfn-top is the clock strip's height, set by the app; 0 on the web. */
.rfn-head {
  padding-top: calc(16px + var(--rfn-top, 0px));
}
.rfn-head-toggle,
.rfn-sheet-close {
  top: calc(14px + var(--rfn-top, 0px));
}
.rfn-sheet-body {
  padding-top: calc(18px + var(--rfn-top, 0px));
}
.rfn-shop-pin-bar {
  padding-top: calc(10px + var(--rfn-top, 0px));
}
.rfn-toast,
.rfn-new-pill {
  top: calc(96px + var(--rfn-top, 0px));
}
.rfn-auth {
  padding-top: calc(20px + var(--rfn-top, 0px));
}
@media (max-width: 560px) {
  .rfn-head {
    padding-top: calc(10px + var(--rfn-top, 0px));
  }
}
@media (max-width: 767px) {
  .rfn-sheet-body {
    padding-top: calc(56px + var(--rfn-top, 0px));
  }
  .rfn-sheet.is-shop .rfn-sheet-body {
    padding-top: calc(18px + var(--rfn-top, 0px));
  }
  .rfn-shop-pin {
    top: calc(-18px - var(--rfn-top, 0px));
  }
}
@media (min-width: 768px) {
  .rfn-sheet-body {
    padding-top: calc(22px + var(--rfn-top, 0px));
  }
  .rfn-shop-pin {
    top: calc(-22px - var(--rfn-top, 0px));
  }
}

/* The phone's bottom bar: the same light glass as the header.
   The map, lists and panels all run on under it. */
.rfn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--rfn-bottom, 0px);
  background: rgb(252 249 248 / 42%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  pointer-events: none;
}
/* Google's corner pieces (logo, small print, zoom) and the map's own
   buttons, lifted together just above the glass. */
#rfn-map .gm-style > div > div[style*="bottom: 0px"],
#rfn-map .gm-style .gm-bundled-control,
#rfn-map .gm-style .rfn-map-btns {
  translate: 0 calc(-1 * var(--rfn-bottom, 0px));
}
.rfn-feedview {
  padding-bottom: calc(32px + var(--rfn-bottom, 0px));
}
.rfn-sheet-body {
  padding-bottom: calc(28px + var(--rfn-bottom, 0px));
}
.rfn-auth {
  padding-bottom: calc(20px + var(--rfn-bottom, 0px));
}

/* With the header slid away, the clock still sits on the same light glass. */
.rfn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  height: var(--rfn-top, 0px);
  background: rgb(252 249 248 / 42%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.rfn.head-away:not(.is-sheet-open)::before {
  opacity: 1;
}
@media (max-width: 767px) {
  .rfn.is-routing:not(.head-back):not(.is-sheet-open)::before {
    opacity: 1;
  }
}

/* ── Report a post ────────────────────────────────────────────────────── */

.rfn-post {
  position: relative;
}
/* The ••• on a post: in the shop row at the top, or over the photo when
   the post has no shop row. */
.rfn-more-btn {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--stone);
  cursor: pointer;
}
.rfn-more-btn:hover {
  background: var(--cream);
  color: var(--red-deep);
}
.rfn-more-btn.is-on-photo {
  top: 10px;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 2px 8px #00000026;
  color: var(--ink);
}
.rfn-post-store {
  padding-right: 48px;
}
.rfn-more-menu {
  position: absolute;
  top: 50px;
  right: 10px;
  z-index: 5;
  padding: 6px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 30px rgb(0 0 0 / 16%);
}
.rfn-more-menu.is-on-photo {
  top: 46px;
}
.rfn-more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.rfn-more-menu button:hover {
  background: var(--paper);
  color: var(--red-deep);
}

/* The sheet: up from the bottom on a phone, a card in the middle on a computer. */
.rfn-report {
  z-index: 30;
}
.rfn-report-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 20px 22px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 20px 60px #00000040;
}
@media (max-width: 560px) {
  .rfn-report {
    align-items: flex-end;
    padding: 0;
  }
  .rfn-report-card {
    max-width: none;
    border-radius: 24px 24px 0 0;
    /* Clear of the phone's bottom bar: the browser's gap, or the app's bar. */
    padding-bottom: calc(22px + max(env(safe-area-inset-bottom, 0px), var(--rfn-bottom, 0px)));
    animation: rfn-report-up 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
}
@keyframes rfn-report-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}
.rfn-report-x {
  top: 16px;
  right: 16px;
}
.rfn-report-title {
  margin: 0 44px 4px 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.rfn-report-sub {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--stone);
  text-wrap: pretty;
}
.rfn-report-opts {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.rfn-report-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #f1e4e0;
  border-radius: 14px;
  background: var(--white);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.rfn-report-opt.is-on {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 1px var(--red-deep);
}
.rfn-report-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d6cbc7;
  border-radius: 50%;
}
.rfn-report-opt.is-on .rfn-report-dot {
  border: 6px solid var(--red-deep);
}
.rfn-report-note {
  resize: none;
  background: var(--white);
}
.rfn-report-go {
  margin-top: 6px;
  padding: 15px;
  font-size: 15px;
}
.rfn-report-done {
  padding: 8px 0 0;
  text-align: center;
}
.rfn-report-done .rfn-report-title {
  margin: 0 0 4px;
}
.rfn-report-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red-deep);
}


/* ------------------------------------------------------------------
   Dark mode. RetailFix Core's theme.js sets data-theme on <html> from
   the shopper's choice (Auto, Light or Dark); Auto follows the device.
   ------------------------------------------------------------------ */
html[data-theme="dark"] { color-scheme: dark; background: #1c1917; }
html[data-theme="dark"] .rfn, html[data-theme="dark"] .rfn-ask, html[data-theme="dark"] .rfn-toast {
  --ink: #f2ece9; --paper: #1c1917; --cream: #2c2624; --stone: #c9c2bd; --line: #46403c; --white: #262120;
}

:where(html[data-theme="dark"]) #rfn-map {
  background-color: rgb(41 35 32) !important;
}
:where(html[data-theme="dark"]) .rfn-brand-mark {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-account.is-in {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-auth-input:focus {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rf-pw-eye {
  color: rgb(139 139 139);
}
:where(html[data-theme="dark"]) .rfn-auth-error {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-auth-go {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-auth-switch:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-guides-link:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-new-pill {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-ask-yes {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-prof-count {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-wallet-big {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-wallet-used {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-int.is-on {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-follow-dot:hover {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-follow-initial {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-x {
  background: rgb(38 38 38 / 70%);
}
:where(html[data-theme="dark"]) .rfn-x:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-prof-msg.is-ok {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-prof-msg.is-bad {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-danger:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-signout:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-search:focus-within {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-search-clear:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-viewbtn.is-active {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-post-store:hover .rfn-post-store-name {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-far {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-by-initial {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-link {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-act:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-act.is-on {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-sheet-close {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-shop-initial {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-store-head .rfn-shop-btn {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-store-head .rfn-shop-follow {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-store-head .rfn-shop-follow.is-on {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-store-head .rfn-shop-btn:hover {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-pin-btn {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-shop-pin-bar {
  background: rgb(42 35 33 / 42%);
  border-bottom: 1px solid rgb(54 54 54 / 55%);
}
:where(html[data-theme="dark"]) .rfn-shop-pin-bar .rfn-pin-way.is-on {
  background: rgb(41 38 32);
}
:where(html[data-theme="dark"]) .rfn-store-address svg {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-hours-now.is-open {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-hours-row span:last-child {
  color: var(--ink, rgb(235 233 231));
}
:where(html[data-theme="dark"]) .rfn-tag {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-post.is-target {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-carousel:focus-visible {
  outline: 2px solid #ff9690;
}
:where(html[data-theme="dark"]) .rfn-carousel-nav {
  background: rgb(38 38 38 / 91%);
}
:where(html[data-theme="dark"]) .rfn-dot {
  background: rgb(38 38 38 / 70.2%);
}
:where(html[data-theme="dark"]) .rfn-more {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-price-now {
  color: #ff4d55;
}
@supports not (mask: radial-gradient(#000, #000)) {
  :where(html[data-theme="dark"]) .rfn-spin2 {
    border-top-color: #ff9690;
  }
}
:where(html[data-theme="dark"]) .rfn-spin-wrap {
  color: #ff4d55;
}
@media (max-width: 560px) {
  :where(html[data-theme="dark"]) .rfn-head {
    background: rgb(42 35 33 / 42%);
    border-bottom: 1px solid rgb(54 54 54 / 55%);
  }
}
@media (max-width: 560px) {
  :where(html[data-theme="dark"]) .rfn-search,
  :where(html[data-theme="dark"]) .rfn-viewswitch,
  :where(html[data-theme="dark"]) .rfn-account {
    background: rgb(38 38 38 / 55%);
    border-color: rgb(54 54 54 / 70%);
  }
}
:where(html[data-theme="dark"]) .rfn-coupon {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-coupon-big {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-coupon-code {
  background: rgb(38 38 38 / 12.2%);
  border: 1px dashed rgb(54 54 54 / 36.1%);
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-coupon-used {
  background: rgb(38 38 38 / 12.2%);
}
:where(html[data-theme="dark"]) .rfn-coupon-lock {
  border: 1px solid rgb(54 54 54 / 30.2%);
  background: rgb(38 38 38 / 18%);
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-coupon .rfn-coupon-lock:hover,
:where(html[data-theme="dark"]) .rfn-coupon .rfn-coupon-lock:focus,
:where(html[data-theme="dark"]) .rfn-coupon .rfn-coupon-lock:hover span,
:where(html[data-theme="dark"]) .rfn-coupon .rfn-coupon-lock:hover svg {
  background: rgb(38 38 38 / 27.1%);
}
:where(html[data-theme="dark"]) .rfn-coupon.has-foil::before {
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgb(40 31 38 / 45%) 36%,
    rgb(31 37 40 / 55%) 44%,
    rgb(38 38 38 / 65%) 50%,
    rgb(31 40 35 / 55%) 56%,
    rgb(39 36 30 / 45%) 64%,
    transparent 80%
  );
}
:where(html[data-theme="dark"]) .rfn-coupon-hint {
  color: rgb(147 154 163);
  text-shadow: 0 1px 0 rgb(38 38 38 / 80%), 0 -1px 0 #00000014;
}
:where(html[data-theme="dark"]) .rfn-coupon.is-revealed::after {
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgb(38 38 38 / 25.1%) 48%,
    rgb(38 38 38 / 54.9%) 52%,
    transparent 66%
  );
}
:where(html[data-theme="dark"]) .rfn-head-toggle:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
@media (min-width: 561px) {
  :where(html[data-theme="dark"]) .rfn.head-folded.head-open .rfn-head-toggle {
    color: #fff;
  }
}
:where(html[data-theme="dark"]) .rfn-moved {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-retry {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-video-btn:hover {
  background: rgb(38 38 38 / 18%);
}
:where(html[data-theme="dark"]) .rfn-video-seek {
  background: rgb(38 38 38 / 23.9%);
}
:where(html[data-theme="dark"]) .rfn-video-seek::-webkit-slider-thumb {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-video-seek::-moz-range-thumb {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-tab.is-on {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-saved-row {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-saved-row:hover {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-wallet-clear {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-wallet-clear:hover {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-here-btn:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-price-off {
  color: #ff4d55;
}
/* Shop logos on the map stay on white, as in light mode. */
:where(html[data-theme="dark"]) .rfn-fan-logo,
:where(html[data-theme="dark"]) .rfn-fan-logo.is-initial {
  border-color: #fff;
  background: #fff;
  color: #bb0016;
}
:where(html[data-theme="dark"]) .rfn-fan-more {
  border-color: #fff;
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-store-phone {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-store-route {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-store-route.is-on {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-call:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-adv-btn {
  color: rgb(198 183 182);
}
:where(html[data-theme="dark"]) .rfn-adv-btn:hover {
  background: rgb(41 35 32);
  color: rgb(232 231 231);
}
:where(html[data-theme="dark"]) .rfn-adv-btn.is-on {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-chip {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-adv {
  background: rgb(38 38 38 / 90%);
}
:where(html[data-theme="dark"]) .rfn-adv-label {
  color: rgb(198 183 182);
}
:where(html[data-theme="dark"]) .rfn-pill {
  background: rgb(41 35 32);
  color: rgb(198 183 182);
}
:where(html[data-theme="dark"]) .rfn-pill:hover {
  border-color: color-mix(in oklab, #ff9690 40%, transparent);
}
:where(html[data-theme="dark"]) .rfn-adv-empty {
  color: rgb(198 183 182);
}
:where(html[data-theme="dark"]) .rfn-adv-foot {
  border-top: 1px solid rgb(69 56 54);
  color: rgb(198 183 182);
}
:where(html[data-theme="dark"]) .rfn-adv-clear {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-zoom-btn:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-track-btn:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) button.rfn-count:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-mix-end {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-mix-back:hover {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-seg {
  background: var(--paper, rgb(42 35 33));
}
:where(html[data-theme="dark"]) .rfn-saved-card {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-saved-card:hover {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-perk-strip.is-used,
:where(html[data-theme="dark"]) .rfn-perk-strip.is-ended {
  background: rgb(41 34 32);
}
:where(html[data-theme="dark"]) .rfn-perk-state.is-used {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-perk-back {
  background: rgb(42 35 33);
}
:where(html[data-theme="dark"]) .rfn-perk-back-label {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-perk-flip {
  border: 1.5px solid #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-perk-flip:hover {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-acct-save {
  color: #fff;
}
:where(html[data-theme="dark"]) .rfn-acct-ico {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-acct-row.is-danger {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-coupon-toggle {
  background: rgb(38 38 38);
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-perk-back .rfn-codeview-btn {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-alert-btn.is-on {
  border-color: #ff9690;
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-alert-tick {
  color: rgb(255 77 85);
}
:where(html[data-theme="dark"]) .rfn-n-sw::after {
  background: rgb(38 38 38);
}
:where(html[data-theme="dark"]) .rfn-auth-pk {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-bio-row {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-bio-btn {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-near-ico {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn::after {
  background: rgb(42 35 33 / 42%);
}
:where(html[data-theme="dark"]) .rfn::before {
  background: rgb(42 35 33 / 42%);
}
:where(html[data-theme="dark"]) .rfn-more-btn:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-more-btn.is-on-photo {
  background: rgb(38 38 38 / 85%);
}
:where(html[data-theme="dark"]) .rfn-more-menu button:hover {
  color: #ff4d55;
}
:where(html[data-theme="dark"]) .rfn-report-opt {
  border: 1.5px solid rgb(68 56 53);
}
:where(html[data-theme="dark"]) .rfn-report-opt.is-on {
  border-color: #ff9690;
}
:where(html[data-theme="dark"]) .rfn-report-dot {
  border: 2px solid rgb(76 64 60);
}
:where(html[data-theme="dark"]) .rfn-report-opt.is-on .rfn-report-dot {
  border: 6px solid #ff9690;
}
:where(html[data-theme="dark"]) .rfn-report-check {
  color: #ff4d55;
}
/* Dark: small fixes the colour swap can't make on its own. */
:where(html[data-theme="dark"]) .rfn-pill-n { opacity: 0.85; }
:where(html[data-theme="dark"]) .rfn-brand-mark { color: #bb0016; }
:where(html[data-theme="dark"]) .rfn-auth-go:disabled { opacity: 1; background: #3a3431; color: #c9c2bd; }
/* Messages and the "x left" tag stay dark pills in dark mode, lifted off the page. */
:where(html[data-theme="dark"]) .rfn-toast,
:where(html[data-theme="dark"]) .rfn-coupon-left { background: #1c1917; color: #fff; }
/* Google's small print along the bottom of the map. */
html[data-theme="dark"] #rfn-map .gm-style-cc > div:first-child > div { background-color: rgb(28 25 23 / 70%) !important; }
html[data-theme="dark"] #rfn-map .gm-style-cc a,
html[data-theme="dark"] #rfn-map .gm-style-cc span,
html[data-theme="dark"] #rfn-map .gm-style-cc button { color: #c9c2bd !important; }