/* All presentation is scoped to Recipe Swiper; theme fonts may be reused. */
.hprs {
  --hprs-primary: #186749;
  --hprs-ink: #22232b;
  --hprs-save: #16a34a;
  --hprs-control-font-size: 14.5px;
  --hprs-control-icon-size: 18px;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 24px auto;
  padding: 18px 14px 38px;
  background: #fff;
  color: var(--hprs-ink);
  font-family: "Montserrat", "Avenir Next", system-ui, sans-serif;
  line-height: 1.5;
  isolation: isolate;
}
.hprs *, .hprs *::before, .hprs *::after { box-sizing: border-box; }
.hprs [hidden] { display: none !important; }
.hprs button, .hprs input { font: inherit; }
.hprs button {
  cursor: pointer;
  min-height: 44px;
  border: 1px solid #dce4de;
  border-radius: 14px;
  padding: 10px 14px;
  background: #fff;
  color: var(--hprs-ink);
  font-weight: 600;
}
.hprs button:disabled { cursor: default; color: #8a8e98; }
.hprs button:focus-visible, .hprs a:focus-visible, .hprs input:focus-visible, .hprs article:focus-visible {
  outline: 3px solid #26727a;
  outline-offset: 4px;
}
.hprs-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.hprs-header > div { min-width: 0; }
.hprs-eyebrow { display: block; font-size: 15px; font-weight: 700; letter-spacing: .22em; color: #637c70; }
.hprs .hprs-header h2 { color: var(--hprs-ink); font: inherit; font-size: 29px; font-weight: 700; line-height: 1.2; letter-spacing: -.035em; margin: 5px 0 0; }
.hprs .hprs-list-button { display: flex; justify-content: center; align-items: center; gap: 9px; flex-shrink: 0; min-width: 94px; height: 64px; padding: 10px 14px; border: 2px solid #c1cdc5; border-radius: 999px; color: #fff; background: #193d42; }
.hprs-icon { width: 23px; height: 23px; flex: 0 0 auto; display: block; pointer-events: none; }
.hprs-list-button .hprs-icon { width: 31px; height: 31px; }
.hprs-count { font-size: 17px; font-weight: 700; min-width: 12px; }
.hprs-deck { position: relative; width: 100%; overflow: hidden; border-radius: 20px; background: #edf2ed; transition: background-color 150ms ease; }
.hprs .hprs-deck.hprs-swipe-save { background-color: #dcfce7; }
.hprs .hprs-deck.hprs-swipe-skip { background-color: #fee2e2; }
.hprs-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; aspect-ratio: 0.683; min-height: 360px; margin: 0; border: 0; border-radius: 20px; overflow: hidden; touch-action: pan-y; transition: transform 180ms ease-out; }
.hprs-card.hprs-dragging { transition: none; }
.hprs-card:not(.hprs-ad-card)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 48%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.82) 100%); }
.hprs-picture { position: absolute; inset: 0; background: linear-gradient(145deg, #618376, #193d42); display: grid; place-items: center; }
/* Beat theme image height:auto rules without applying important to other styles. */
.hprs .hprs-card .hprs-picture img { display: block; width: 100%; height: 100% !important; max-width: none; max-height: none; object-fit: cover; pointer-events: none; user-select: none; }
.hprs-placeholder { color: #fff; font-weight: 650; font-size: 14px; letter-spacing: .16em; }
.hprs-card-body { position: relative; z-index: 1; flex: 0 0 auto; padding: 24px; color: #fff; overflow-wrap: anywhere; }
.hprs a { color: var(--hprs-primary); text-underline-offset: 4px; }
.hprs .hprs-card .hprs-card-body a.hprs-category { display: inline-block; color: #fff; font-size: 16px; font-weight: 400; text-decoration: none; margin: 0 0 14px; transition: color 150ms ease; }
.hprs .hprs-card .hprs-card-body a.hprs-category:hover,
.hprs .hprs-card .hprs-card-body a.hprs-category:focus-visible { color: #e2efe5; text-decoration: underline; }
.hprs .hprs-card .hprs-card-body h3 > a.hprs-title-link { color: inherit; font: inherit; text-decoration: none; transition: color 150ms ease; }
.hprs .hprs-card .hprs-card-body h3 > a.hprs-title-link:hover,
.hprs .hprs-card .hprs-card-body h3 > a.hprs-title-link:focus-visible { color: #e2efe5; text-decoration: none; }
.hprs .hprs-card .hprs-card-body a.hprs-category:focus-visible,
.hprs .hprs-card .hprs-card-body h3 > a.hprs-title-link:focus-visible { outline: 3px solid #26727a; outline-offset: 4px; }
.hprs .hprs-card-body h3 { color: #fff; font: inherit; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 17px; }
.hprs-nutrition { display: flex; flex-wrap: wrap; gap: 14px; }
.hprs-nutrition span { border-radius: 999px; background: #eff5ec; color: #283e38; padding: 8px 14px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.hprs-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 32px 0 0; padding: 0; }
.hprs .hprs-controls > button, .hprs .hprs-controls > a { display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; min-height: 66px; padding: 10px 6px; border: 2px solid #e9e9ed; border-radius: 14px; font-size: var(--hprs-control-font-size); font-weight: 600; line-height: 1.2; text-decoration: none; background: #fff; color: #45454e; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; }
.hprs .hprs-controls > button.hprs-back { background: #fafcfb; border-color: #e0e7e1; }
.hprs .hprs-controls > button.hprs-back:disabled { color: #878c96; }
.hprs .hprs-controls > a.hprs-recipe { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; text-decoration: none; }
.hprs .hprs-controls > a.hprs-recipe:not([aria-disabled="true"]):hover { background: #e5e7eb; border-color: #d1d5db; color: #111827; text-decoration: none; }
.hprs .hprs-controls > button.hprs-next { background: transparent; color: #6b7280; }
.hprs .hprs-controls > button.hprs-next:not(:disabled):hover { background: #f3f4f6; color: #111827; }
.hprs .hprs-controls > button.hprs-save { background: #16a34a; border-color: #16a34a; color: #fff; }
.hprs .hprs-controls > button.hprs-save:not(:disabled):hover { background: #15803d; border-color: #15803d; color: #fff; }
.hprs .hprs-controls > button.hprs-save:not(:disabled):active { background: #166534; border-color: #166534; color: #fff; }
.hprs .hprs-controls > button:focus-visible, .hprs .hprs-controls > a:focus-visible { outline: 3px solid #26727a; outline-offset: 4px; }
.hprs-controls > :disabled, .hprs-controls > [aria-disabled="true"] { cursor: default; opacity: .65; }
.hprs-controls > [aria-disabled="true"] { pointer-events: none; }
.hprs .hprs-controls > button, .hprs .hprs-controls > a { filter: none; }
.hprs .hprs-primary { background: var(--hprs-primary); color: #fff; border-color: transparent; }
.hprs-status { margin: 0; min-height: 0; font-size: 13px; text-align: center; }
.hprs-status:not(:empty) { margin-top: 16px; }
.hprs-privacy { margin: 62px 0 20px; text-align: center; color: #7a8b81; font-size: 15px; line-height: 1.8; letter-spacing: .02em; }
.hprs-toast { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; padding: 10px 14px; border: 1px solid #d6e6d8; border-radius: 12px; color: #244c34; background: #f1f7ef; font-size: 14px; }
.hprs .hprs-undo { background: transparent; border: 0; padding: 4px 8px; color: #186749; text-decoration: underline; }
.hprs-empty { min-height: 360px; aspect-ratio: .683; display: grid; place-items: center; padding: 36px; text-align: center; color: #526e5e; }
.hprs-dialog {
  color:var(--hprs-ink);
  background:#fff;
  border:1px solid #dce6dd;
  border-radius:24px;
  padding:24px;
  width:calc(100% - 24px);
  max-width:480px;
  max-height:85dvh;
  overflow:auto;
  margin:auto;
  box-shadow:0 24px 80px #0003
}
.hprs-dialog::backdrop {
  background:#132c2370;
  backdrop-filter:blur(4px)
}
.hprs-dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.hprs-dialog h3 {
  font-size:23px;
  margin:0
}
.hprs .hprs-close {
  font-size:26px;
  line-height:1;
  padding:6px 12px
}
.hprs-list-help {
  font-size:12px;
  color:#607469
}
.hprs-saved-list {
  list-style:none;
  padding:0;
  margin:24px 0
}
.hprs-saved-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #e6eee7
}
.hprs-saved-list a {
  font-size:15px;
  overflow-wrap:anywhere
}
.hprs .hprs-remove {
  font-size:11px;
  padding:8px;
  flex-shrink:0
}
.hprs-newsletter-cta {
  width:100%;
  text-align:center
}
.hprs-newsletter h4 {
  font-size:21px;
  margin:24px 0 10px
}
.hprs-newsletter p {
  font-size:14px
}
.hprs-form {
  display:flex;
  flex-direction:column;
  gap:12px
}
.hprs-form input[type=email] {
  width:100%;
  min-height:48px;
  border:1px solid #c8d8cc;
  border-radius:10px;
  padding:12px;
  background:#fff;
  color:var(--hprs-ink)
}
.hprs-consent {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:13px
}
.hprs-consent input {
  margin-top:4px;
  flex-shrink:0;
  width:18px;
  height:18px
}

.hprs-ad-card { justify-content: flex-start; background: #f7faf6; padding-top: 20px; }
.hprs-ad-card > .hprs-category { padding: 0 20px; text-align: center; color: #6b7f70; font-size: 13px; }
.hprs-ad-source { width: 100%; max-width: 100%; overflow: hidden; padding: 16px; flex: 1; }
.hprs-ad-source img, .hprs-ad-source iframe { max-width: 100%; }
.hprs .hprs-ad-card .hprs-ad-source { min-height: 0; display: flex; flex-direction: column; justify-content: center; touch-action: pan-y; }
.hprs .hprs-ad-card .hprs-fallback-ad { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hprs .hprs-ad-card .hprs-fallback-ad a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hprs .hprs-ad-card .hprs-fallback-ad img { display: block; width: 100%; max-height: 560px; height: auto; object-fit: contain; border-radius: 14px; user-select: none; -webkit-user-drag: none; }
@media (max-width: 767px) {
  .hprs { --hprs-control-font-size: 12px; }
}
@media (max-width: 480px) {
  .hprs { margin: 12px auto; padding: 12px 12px 24px; }
  .hprs-eyebrow { font-size: 13px; letter-spacing: .24em; }
  .hprs .hprs-header h2 { font-size: 24px; }
  .hprs .hprs-list-button { min-width: 76px; height: 57px; padding: 8px 12px; gap: 7px; }
  .hprs-list-button .hprs-icon { width: 26px; height: 26px; }
  .hprs-card-body { padding: 20px; }
  .hprs .hprs-card-body h3 { font-size: 18px; }
  .hprs .hprs-card .hprs-card-body a.hprs-category { font-size: 14px; margin-bottom: 12px; }
  .hprs-nutrition { gap: 10px; }
  .hprs-nutrition span { font-size: 14px; padding: 8px 12px; }
  .hprs-controls { gap: 8px; margin-top: 26px; }
  .hprs .hprs-controls > button, .hprs .hprs-controls > a { min-height: 60px; gap: 5px; }
  .hprs-privacy { font-size: 13px; margin-top: 46px; }
  .hprs-dialog { padding: 20px; }
}
@media (max-width: 374px) {
  .hprs .hprs-header h2 { font-size: 24px; }
  .hprs .hprs-card-body h3 { font-size: 17px; }
}
@media (max-width: 420px) {
  .hprs .hprs-controls > button, .hprs .hprs-controls > a { flex-direction: column; gap: 4px; padding-inline: 3px; }
  .hprs-controls { gap: 7px; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .hprs-card, .hprs-empty { aspect-ratio: auto; min-height: max(340px, calc(100svh - 230px)); height: auto; }
  .hprs-card-body { padding: 18px; }
  .hprs .hprs-card-body h3 { font-size: 18px; }
  .hprs-controls { margin-top: 18px; }
  .hprs-privacy { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hprs * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.hprs .hprs-controls .hprs-icon { width: var(--hprs-control-icon-size); height: var(--hprs-control-icon-size); }
.hprs .hprs-controls > button > span, .hprs .hprs-controls > a > span { font-size: var(--hprs-control-font-size); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }