.rb-nsr {
  --rb-red: var(--ryman-primary-red);
  --rb-red-mid: color-mix(in srgb, var(--ryman-primary-red) 86%, #000000);
  --rb-red-deep: color-mix(in srgb, var(--ryman-primary-red) 66%, #000000);
  --rb-white: var(--ryman-primary-white);
  --rb-ink: var(--ryman-product-fg);
  --rb-muted: color-mix(in srgb, var(--ryman-product-fg) 55%, transparent);
  --rb-hero-img-opacity: 0.12; /* mockup value – raise to ~0.2 for a stronger photo */
  --rb-black: var(--ryman-primary-black);
  --rb-red-soft: color-mix(in srgb, var(--ryman-primary-red) 12%, #ffffff);
  --rb-red-wash: color-mix(in srgb, var(--ryman-primary-red) 5%, #ffffff);
  --rb-border: color-mix(in srgb, var(--ryman-primary-black) 12%, transparent);
}
.ex-404 > .container:has(.middle.content) {
  display: none !important;
}

/* ===== HERO ===== */
.rb-nsr__hero {
  position: relative;
  overflow: hidden;
  color: var(--rb-white);
  background: linear-gradient(225deg, var(--rb-red) 0%, var(--rb-red-mid) 50%, var(--rb-red-deep) 100%);
}
.rb-nsr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--rb-hero-img-opacity);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.rb-nsr__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.rb-nsr__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 64px;
}
.rb-nsr__intro {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

/* "0 results" pill */
.rb-nsr__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rb-nsr__pill svg {
  width: 14px;
  height: 14px;
}

.rb-nsr__title {
  margin: 24px 0 0;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.05;
  color: var(--rb-white);
}
.rb-nsr__term {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
  overflow-wrap: anywhere;
}

/* search form */
.rb-nsr__form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 672px;
  margin: 40px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: var(--rb-white);
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.35);
}
.rb-nsr__form:focus-within {
  outline: 3px solid rgb(255 255 255 / 0.6);
  outline-offset: 3px;
}
.rb-nsr__form-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: 16px;
  color: var(--rb-muted);
}
.rb-nsr__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--rb-ink);
  outline: none;
  box-shadow: none;
}
.rb-nsr__input::placeholder {
  color: var(--rb-muted);
}
.rb-nsr__btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--rb-red);
  color: var(--rb-white);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.rb-nsr__btn-icon {
  display: none;
  width: 20px;
  height: 20px;
}
.rb-nsr__btn:hover {
  background: var(--rb-red-deep);
}
.rb-nsr__btn:focus-visible {
  outline: 3px solid var(--rb-red-deep);
  outline-offset: 2px;
}

/* related searches (EvoX v2 suggestions) – hidden unless results come back */
.rb-nsr__related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.rb-nsr__related[hidden] {
  display: none;
}
.rb-nsr__related-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.rb-nsr__chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: var(--rb-white);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.rb-nsr__chip:hover {
  background: var(--rb-white);
  color: var(--rb-red);
}
.rb-nsr__chip:focus-visible {
  outline: 3px solid var(--rb-white);
  outline-offset: 2px;
}

/* ===== SEARCH TIPS ===== */
.rb-nsr__tips-title {
  margin: 64px 0 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.rb-nsr__tip-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.rb-nsr__tip {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--rb-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.rb-nsr__tip:hover {
  background: rgb(255 255 255 / 0.15);
}
a.rb-nsr__tip:focus-visible {
  outline: 3px solid var(--rb-white);
  outline-offset: 3px;
}
.rb-nsr__tip-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--rb-white);
  color: var(--rb-red);
}
.rb-nsr__tip-icon svg {
  width: 20px;
  height: 20px;
}
.rb-nsr__tip h3 {
  margin: 16px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rb-white);
}
.rb-nsr__tip p {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}
.rb-nsr__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rb-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rb-nsr__link[hidden] {
  display: none;
}
.rb-nsr__link:focus-visible {
  outline: 3px solid var(--rb-white);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .rb-nsr__tip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .rb-nsr__inner {
    padding-top: 80px;
  }
  .rb-nsr__title {
    font-size: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .rb-nsr__tip-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .rb-nsr__form-icon {
    display: none;
  }
  .rb-nsr__input {
    padding-left: 14px;
  }
  .rb-nsr__btn {
    display: grid;
    place-items: center;
    width: 48px;
    padding: 0;
  }
  .rb-nsr__btn-text {
    display: none;
  }
  .rb-nsr__btn-icon {
    display: block;
  }
}
/* ===== NEED A HAND ===== */
.rb-nsr__help {
  padding: 56px 24px;
  background: var(--ryman-dashboard-bg);
}
.rb-nsr__help-card {
  max-width: 1232px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 24px;
  background: var(--rb-white);
  box-shadow: 0 12px 32px -18px rgb(16 24 32 / 0.25);
}
.rb-nsr__help-title {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--rb-black);
}
.rb-nsr__help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

/* logged-in / logged-out switching – driven by the EvoX body class.
   Logged-out boxes are the default so the section is never empty. */
.rb-nsr__help-grid--in {
  display: none;
}
body.ex-loggedin .rb-nsr__help-grid--in {
  display: grid;
}
body.ex-loggedin .rb-nsr__help-grid--out {
  display: none;
}

/* contact boxes (logged out) */
.rb-nsr__contact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--rb-border);
  border-radius: 16px;
  color: var(--rb-black);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.rb-nsr__contact:hover {
  border-color: var(--rb-red);
}
.rb-nsr__contact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--rb-red-soft);
  color: var(--rb-red-deep);
}
.rb-nsr__contact-icon svg {
  width: 20px;
  height: 20px;
}
.rb-nsr__contact-label {
  display: block;
  font-size: 0.875rem;
  color: var(--rb-muted);
}
.rb-nsr__contact-value {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* account boxes (logged in) */
.rb-nsr__account {
  position: relative;
  display: block;
  padding: 24px 24px 24px;
  border: 1px solid var(--rb-border);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--rb-white), var(--rb-red-wash));
  color: var(--rb-black);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rb-nsr__account:hover {
  border-color: var(--rb-red);
  box-shadow: 0 16px 32px -18px rgb(16 24 32 / 0.3);
}
.rb-nsr__account-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--rb-red);
  color: var(--rb-white);
}
.rb-nsr__account-icon svg {
  width: 24px;
  height: 24px;
}
.rb-nsr__account h3 {
  margin: 20px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rb-black);
}
.rb-nsr__account p {
  margin: 2px 0 0;
  padding-right: 32px;
  font-size: 0.875rem;
  color: var(--rb-muted);
}
.rb-nsr__account-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 20px;
  height: 20px;
  color: var(--rb-red);
  transition: transform 0.15s ease;
}
.rb-nsr__account:hover .rb-nsr__account-arrow {
  transform: translateX(4px);
}

.rb-nsr__contact:focus-visible,
.rb-nsr__account:focus-visible {
  outline: 3px solid var(--rb-red);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .rb-nsr__help-card {
    padding: 40px;
  }
  .rb-nsr__help-title {
    font-size: 1.875rem;
  }
  .rb-nsr__help-grid--out {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-nsr__help-grid--in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .rb-nsr__help {
    padding: 40px 16px;
  }
  .rb-nsr__help-card {
    padding: 24px 20px;
  }
}

/* ===== ADDITIONAL SEARCH OPTIONS ===== */
.rb-nsr__more {
  padding: 56px 24px;
  background: var(--rb-white);
}
.rb-nsr__more-inner {
  max-width: 1232px;
  margin: 0 auto;
}
.rb-nsr__more-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.rb-nsr__more-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--rb-black);
}

/* category / brand switch */
.rb-nsr__switch {
  display: inline-flex;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ryman-primary-black) 6%, #ffffff);
}
.rb-nsr__switch-btn {
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rb-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.rb-nsr__switch-btn:hover {
  color: var(--rb-black);
}
.rb-nsr__switch-btn[aria-selected="true"] {
  background: var(--rb-black);
  color: var(--rb-white);
}
.rb-nsr__switch-btn:focus-visible {
  outline: 3px solid var(--rb-red);
  outline-offset: 2px;
}

.rb-nsr__panel {
  margin-top: 32px;
}
.rb-nsr__panel[hidden] {
  display: none;
}
.rb-nsr__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* shared tile */
.rb-nsr__tile {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--rb-border);
  border-radius: 16px;
  color: var(--rb-black);
  font-weight: 700;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.rb-nsr__tile:hover {
  border-color: color-mix(in srgb, var(--ryman-primary-red) 55%, #ffffff);
  background: var(--rb-red-wash);
}
.rb-nsr__tile:focus-visible {
  outline: 3px solid var(--rb-red);
  outline-offset: 2px;
}
.rb-nsr__tile-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--rb-red);
}
.rb-nsr__tile-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--rb-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rb-nsr__tile:hover .rb-nsr__tile-arrow {
  opacity: 1;
}

/* brand tile – centred name */
.rb-nsr__tile--brand {
  justify-content: center;
  min-height: 96px;
  text-align: center;
  color: color-mix(in srgb, var(--ryman-primary-black) 70%, #ffffff);
}
.rb-nsr__tile--brand:hover {
  color: var(--rb-black);
}
.rb-nsr__brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply; /* blends white logo backgrounds into the hover tint */
}

@media (min-width: 640px) {
  .rb-nsr__panel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .rb-nsr__more-head {
    flex-direction: row;
    align-items: flex-end;
  }
  .rb-nsr__more-title {
    font-size: 1.875rem;
  }
}
@media (max-width: 480px) {
  .rb-nsr__more {
    padding: 40px 16px;
  }
  .rb-nsr__tile {
    gap: 12px;
    padding: 16px;
  }
  .rb-nsr__switch-btn {
    padding: 8px 14px;
  }
}

/* ===== THEME LINK OVERRIDES =====
   The store theme colours a:hover / a:focus (blue). These pin our link colours
   in every state; .rb-nsr a.class:state outranks the theme's a:state. */
.rb-nsr a.rb-nsr__tile,
.rb-nsr a.rb-nsr__account,
.rb-nsr a.rb-nsr__contact {
  color: var(--rb-black);
  text-decoration: none;
}
.rb-nsr a.rb-nsr__tile--brand {
  color: color-mix(in srgb, var(--ryman-primary-black) 70%, #ffffff);
}
.rb-nsr a.rb-nsr__tile:hover,
.rb-nsr a.rb-nsr__tile:focus,
.rb-nsr a.rb-nsr__tile:active,
.rb-nsr a.rb-nsr__account:hover,
.rb-nsr a.rb-nsr__account:focus,
.rb-nsr a.rb-nsr__account:active,
.rb-nsr a.rb-nsr__contact:hover,
.rb-nsr a.rb-nsr__contact:focus,
.rb-nsr a.rb-nsr__contact:active {
  color: var(--rb-black);
  text-decoration: none;
}

.rb-nsr a.rb-nsr__tip,
.rb-nsr a.rb-nsr__tip:hover,
.rb-nsr a.rb-nsr__tip:focus,
.rb-nsr a.rb-nsr__tip:active {
  color: var(--rb-white);
  text-decoration: none;
}

.rb-nsr a.rb-nsr__link,
.rb-nsr a.rb-nsr__link:hover,
.rb-nsr a.rb-nsr__link:focus,
.rb-nsr a.rb-nsr__link:active {
  color: var(--rb-white);
  text-decoration: underline;
}

.rb-nsr a.rb-nsr__chip {
  color: var(--rb-white);
  text-decoration: none;
}
.rb-nsr a.rb-nsr__chip:hover,
.rb-nsr a.rb-nsr__chip:focus,
.rb-nsr a.rb-nsr__chip:active {
  color: var(--rb-red);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .rb-nsr__tip,
  .rb-nsr__btn,
  .rb-nsr__chip,
  .rb-nsr__contact,
  .rb-nsr__account,
  .rb-nsr__account-arrow,
  .rb-nsr__switch-btn,
  .rb-nsr__tile,
  .rb-nsr__tile-arrow {
    transition: none;
  }
  .rb-nsr__account:hover .rb-nsr__account-arrow {
    transform: none;
  }
}